/* Aimosti redesign — base elements, typography, controls.
   Loaded on every page (after tokens.css). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);
  font-size:clamp(1rem,0.55vw + 0.9rem,1.075rem);line-height:1.55;
  font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.mono{font-family:var(--font-mono);font-feature-settings:"zero"}
a{color:var(--primary)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.022em;line-height:1.06;text-wrap:balance}
p{margin:0}
img,svg{max-width:100%}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:2px}

/* layout primitives */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.5rem)}
.wrap--narrow{max-width:760px}
.skip-link{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:4px;z-index:var(--z-overlay)}
.skip-link:focus{left:.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* honeypot: kept in the DOM for bots, off-screen for humans. Lives here (loaded on every
   base.html page) so the spam trap is hidden on marketing pages too, not just the app shell. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* buttons — primary = navigational blue; ghost = ink outline. No large black fills. */
.btn{
  display:inline-flex;align-items:center;gap:.5ch;font:inherit;font-weight:600;
  padding:.72em 1.15em;border:1.5px solid var(--primary);background:var(--primary);color:var(--on-primary);
  text-decoration:none;border-radius:3px;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px);background:var(--primary-press);border-color:var(--primary-press)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--sm{padding:.5em .9em;font-size:.86rem;border-width:1.5px}

/* small shared atoms */
.eyebrow,.kicker{font:600 .8rem/1 var(--font-mono);letter-spacing:.02em;color:var(--ink-faint);
  display:inline-flex;gap:1ch;align-items:center}
.coord{font-family:var(--font-mono);color:var(--ink)}
.muted{color:var(--ink-faint)}

/* inline glossary popover — JS-free hover/focus definition (see content/glossary.py).
   No CDN, works in the frozen report snapshot; the term carries the definition in its
   aria-label, .ex-pop is the visual reveal. The body text reads correctly without it. */
.ex{position:relative;text-decoration:underline dotted var(--ink-faint);text-underline-offset:3px;cursor:help}
.ex-pop{
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:var(--z-tooltip);
  width:max-content;max-width:min(18rem,80vw);
  padding:.55rem .7rem;background:var(--ink);color:var(--bg);
  font:400 .82rem/1.45 var(--font-sans);letter-spacing:0;text-transform:none;text-align:left;text-decoration:none;
  border-radius:var(--radius);box-shadow:0 6px 24px -8px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;pointer-events:none;
}
/* pointer-events enabled only while shown, so the "Read the full guide" link is clickable but the
   hidden popover never intercepts clicks on content behind it (during the fade-out especially). */
.ex:hover .ex-pop,.ex:focus .ex-pop,.ex:focus-visible .ex-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ex-pop__more{display:block;margin-top:.5rem;padding-top:.45rem;border-top:1px solid rgba(255,255,255,.2);font-weight:600;font-size:.8rem;color:var(--bg);text-decoration:none}
.ex-pop__more:hover{text-decoration:underline}
/* On narrow / touch screens the absolute popover can't fit beside a right-edge term without
   overflowing. Pin it to the viewport as a bottom sheet instead: position:fixed (relative to the
   viewport, escaping the report's overflow-x:clip), spanning the width with a 1rem inset, so a
   tap on the term (it's tabindex=0) shows the full definition and nothing ever overflows. */
@media(max-width:560px){
  .ex-pop{
    position:fixed;left:1rem;right:1rem;bottom:1rem;top:auto;
    width:auto;max-width:none;transform:translateY(8px);
    box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  }
  .ex:hover .ex-pop,.ex:focus .ex-pop,.ex:focus-visible .ex-pop{transform:translateY(0)}
}
@media print{.ex{text-decoration:none}.ex-pop{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05s!important;scroll-behavior:auto!important}
}