/* AIU calm layer - loaded after responsive.css on every page (added by calm.py).
   Same attribute-substring approach as responsive.css, because the pages are
   inline-styled prototypes. */

/* Safety net for anything calm.py can't see at build time (the React
   calculators render their handwriting at runtime). */
[style*="Caveat"] { font-family: 'Karla', sans-serif !important; font-style: italic !important; }

/* Long reads: body copy a touch bigger and brighter on the dark green. */
[style*="font-size:16px;line-height:1.75;color:#dcd2b8"] { font-size: 17.5px !important; line-height: 1.75 !important; color: #e6ddc6 !important; }
[style*="font-size:15px;line-height:1.7;color:#cfc5aa"]  { font-size: 16.5px !important; color: #ddd3bb !important; }
li[style*="line-height:1.7"], li[style*="line-height: 1.7"] { font-size: 16.5px !important; }

/* Softer shadows - the stacked drop shadows were part of the "paper craft" look. */
[style*="box-shadow:0 18px 44px"], [style*="box-shadow: 0 18px 44px"] { box-shadow: 0 6px 18px rgba(0,0,0,.25) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Phones: the nav was wrapping onto two ragged lines. One line, swipeable. */
@media (max-width: 600px) {
  [style*="display:flex"][style*="gap:26px"],
  [style*="display: flex"][style*="gap: 26px"] {
    flex-wrap: nowrap !important; overflow-x: auto !important; gap: 18px !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  [style*="display:flex"][style*="gap:26px"]::-webkit-scrollbar,
  [style*="display: flex"][style*="gap: 26px"]::-webkit-scrollbar { display: none; }
  [style*="display:flex"][style*="gap:26px"] > a,
  [style*="display: flex"][style*="gap: 26px"] > a { white-space: nowrap; flex: 0 0 auto; }
}