/* base — reset, root type, focus, icon primitive, motion policy */

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;overflow-x:clip;}
html{font-size:var(--base);-webkit-text-size-adjust:100%;}

body{
  background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.55;
  font-synthesis-weight:none;
}

h1,h2,h3,p{margin:0;}
button{font:inherit; color:inherit;}

/* every interactive element gets a visible ring — never animated in */
:focus-visible{
  outline:var(--rule-thick) solid var(--color-focus);
  outline-offset:2px; border-radius:var(--radius-chip);
}
:focus:not(:focus-visible){outline:none;}

/* icon primitive — Lucide paths injected as inline <svg> by js/icons.js.
   stroke:currentColor so an icon inherits whatever colour its button has. */
.ic{
  width:1.25em; height:1.25em; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic-sm{width:1em; height:1em; stroke-width:2;}
.ic-lg{width:1.5em; height:1.5em; stroke-width:1.6;}

/* search-term highlight */
mark{background:var(--color-mark); color:var(--color-ink); padding:0 .12em; border-radius:3px;}

/* screen-reader-only utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* Motion policy: only transform + opacity animate anywhere in this app.
   Reduced motion collapses spatial movement to a short crossfade. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:150ms !important; transition-property:opacity !important;
  }
}