/* Siderail base: reset, document typography, focus, selection, scrollbars, form-control
   defaults and reduced motion. Loaded on every page after tokens.css. Contract: docs/ui/CONVENTIONS.md. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
  ul[class], ol[class], menu { margin: 0; padding: 0; list-style: none; }
  img, svg, video, canvas, picture { display: block; max-width: 100%; }
  svg { overflow: visible; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  dialog { padding: 0; border: 0; color: inherit; }
  [popover] { margin: 0; padding: 0; border: 0; color: inherit; }
  [hidden]:not([hidden="until-found"]) { display: none !important; }
  textarea { resize: vertical; }
  :target { scroll-margin-block: calc(var(--topbar-height) + var(--space-4)); }
}

@layer base {
  html {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-feature-settings: var(--font-features);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--color-accent);
    scrollbar-color: var(--color-border-strong) transparent;
  }
  body { min-height: 100dvh; }

  h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); color: var(--color-text); text-wrap: balance; }
  /* Application headings: page title, section, card. Display sizes (30px+) are set by the page
     with --text-4xl..6xl, --weight-bold and --tracking-tight. */
  h1 { font-size: var(--text-3xl); line-height: var(--line-3xl); letter-spacing: var(--tracking-snug); }
  h2 { font-size: var(--text-xl); line-height: var(--line-xl); }
  h3 { font-size: var(--text-lg); line-height: var(--line-lg); }
  h4, h5, h6 { font-size: var(--text-md); line-height: var(--line-md); }
  p { text-wrap: pretty; }
  small { font-size: var(--text-sm); }
  strong, b { font-weight: var(--weight-semibold); }

  a { color: var(--color-accent); text-decoration: none; text-underline-offset: 0.18em; }
  a:hover { text-decoration: underline; }
  /* Links in running text: underline style for hover. Links with a class are UI (nav, buttons,
     menu items, cards) and style themselves. */
  :is(p, li, td, th, dd, dt, blockquote, figcaption, label, .sg-text, .sg-prose) a:not([class]) {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
    transition: text-decoration-color var(--t-fast) var(--ease-std);
    &:hover { text-decoration-color: currentColor; }
  }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }
  :not(pre) > code {
    padding: 0.1em 0.35em; border-radius: var(--radius-xs);
    background: var(--color-surface-muted); color: var(--color-text);
  }
  kbd {
    display: inline-block; min-width: 1.6em; padding: 0 0.4em; border-radius: var(--radius-xs);
    border: 1px solid var(--color-border-strong); border-bottom-width: 2px;
    background: var(--color-surface); font-size: var(--text-xs); line-height: 1.6; text-align: center;
  }
  pre { overflow: auto; line-height: var(--leading-normal); }
  hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }

  /* One focus treatment everywhere: a 2px accent outline, keyboard only. Components may move it
     (outline-offset) or swap it for --focus-halo on text inputs, never remove it. */
  :focus { outline: none; }
  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

  ::selection { background: var(--color-selection); color: var(--color-text); }

  /* Thin scrollbars that follow the theme (standard properties; WebKit fallback below). */
  * { scrollbar-width: thin; }
  @supports not (scrollbar-width: thin) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-track { background: transparent; }
  }

  /* Form-control defaults. Components style their own controls; this keeps unstyled ones usable. */
  input, select, textarea { font-size: var(--text-md); }
  input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
  /* Autofill keeps the control's own background and text colour: browsers force theirs with
     !important, so the transition delays it indefinitely instead. */
  :is(input, select, textarea):is(:-webkit-autofill, :autofill) {
    transition: background-color 9999999s step-end, color 9999999s step-end;
  }
  :disabled { cursor: not-allowed; }
  label { cursor: default; }

  /* Icons from the sprite ({{icon "name"}}): size follows --icon-size, colour follows currentColor. */
  .icon { width: var(--icon-size, var(--icon-md)); height: var(--icon-size, var(--icon-md)); flex: none; display: inline-block; vertical-align: middle; }
}

@layer utilities {
  .visually-hidden:not(:focus-within, :active) {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .text-muted { color: var(--color-text-muted); }
  .tabular { font-variant-numeric: tabular-nums; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  /* Pointer ripple for [data-ripple] hosts (added by core.js). */
  .ripple {
    position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.14;
    transform: scale(0); animation: ripple calc(var(--t-slow) * 2) var(--ease-out) forwards;
  }
  @keyframes ripple { to { transform: scale(1); opacity: 0; } }
}

/* Reduced motion: transitions and animations collapse to an instant change, so components need no
   rules of their own for it. It sits in the first layer because !important reverses layer order:
   an important declaration in "reset" outranks important declarations in every later layer. */
@layer reset {
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ripple { display: none; }
}
}