/* Drug Test Guide — shared foundation.
   Bundled fonts, design tokens, reset, base typography/forms, and the
   editorial masthead chrome shared by every page (home, tools, about, 404).
   Page-type sheets (etg/app.css, assets/site.css) layer their own components
   on top. @font-face url()s resolve relative to THIS file, so one sheet works
   from /, /etg/, and /about/ alike. */

@layer reset, base, components, utilities;

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader/Newsreader-VariableFont_opsz,wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader/Newsreader-Italic-VariableFont_opsz,wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono/JetBrainsMono-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono/JetBrainsMono-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

@layer reset {
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
}

@layer base {
  :root {
    /* Color */
    --paper: #faf6ec;
    --paper-light: #fcf9ef;
    --ink: #1a1612;
    --ink-2: #433a30;
    --ink-3: #7a6e5e;
    --ink-4: #b5a793;
    --ink-tooltip-sub: #cdb7a0;
    --rule: #d9cdb4;
    --rule-soft: #e6dcc6;
    --accent: #b9502d;         /* terracotta */
    --accent-soft: #d98b5e;

    /* Type — role-based scale. Serif for editorial/body, mono for labels/data. */
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", "Courier New", monospace;
    --fs-display: clamp(30px, 4.2vw + 14px, 76px);  /* masthead title */
    --fs-h2: clamp(32px, 1.6vw + 20px, 40px);       /* section headings */
    --fs-title: 26px;                                /* card/chart titles */
    --fs-subhead: 22px;                              /* note subheads */
    --fs-lead: 20px;                                 /* intros, deks */
    --fs-stat-lg: 36px;                              /* threshold cutoff numbers */
    --fs-stat: 28px;                                 /* readout values */
    --fs-body-lg: 18px;
    --fs-body: 17px;                                 /* base body */
    --fs-body-sm: 13px;                              /* notes, captions */
    --fs-meta: 11px;                                 /* mono data/meta */
    --fs-eyebrow: 10.5px;                            /* mono uppercase labels */
    --fs-eyebrow-sm: 9.5px;
    --fs-micro: 8.5px;                               /* dense phone labels, ticks */
    --tracking-eyebrow: 0.14em;
    --tracking-eyebrow-sm: 0.1em;

    /* Space */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    --pad: 28px;

    /* Surface */
    --control-radius: 4px;
    --radius: 6px;
    --shadow: 0 6px 14px rgb(26 22 18 / 0.08);
    --shadow-soft: 0 4px 14px rgb(26 22 18 / 0.05);
    --field-border: 1px solid var(--rule);
    --hairline-rule: 1px solid var(--rule);
    --hairline-ink: 1px solid var(--ink);
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: var(--fs-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--ink-4); text-decoration-thickness: 1px; }
  a:hover { text-decoration-color: var(--accent); color: var(--accent); }

  .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;
  }
  button:focus-visible,
  input:focus-visible,
  a:focus-visible,
  sup[data-ref]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: 1px;
    background: var(--ink-2);
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    margin-top: -7px;
    transition: transform .12s;
  }
  input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); background: var(--accent); border-color: var(--accent); }
  input[type=range]::-moz-range-track { height: 1px; background: var(--ink-2); }
  input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    transition: transform .12s;
  }
  input[type=range]:hover::-moz-range-thumb {
    transform: scale(1.15);
    background: var(--accent);
    border-color: var(--accent);
  }
}

@layer components {
  /* Page container — article width by default; the EtG tool widens it. */
  .page {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--pad) 0;
  }

  /* Eyebrow — mono uppercase micro-label: section kickers and field labels. */
  .eyebrow {
    font-family: var(--mono);
    text-transform: uppercase;
    color: var(--ink-3);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    margin-bottom: 2px;
  }
  .eyebrow--sm {
    font-size: var(--fs-eyebrow-sm);
    letter-spacing: var(--tracking-eyebrow-sm);
  }

  /* Buttons — one base, modifiers for emphasis and size. */
  .btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--mono);
    font-size: var(--fs-body-sm);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    background: var(--paper-light);
    border: var(--hairline-rule);
    border-radius: var(--control-radius);
    padding: var(--space-sm) var(--space-md);
    transition: background .15s, border-color .15s, color .15s, transform .08s;
  }
  .btn:hover,
  .btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--paper);
  }
  .btn:active { transform: translateY(1px); }
  .btn--solid {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .btn--solid:hover,
  .btn--solid:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
  }
  .btn--ghost {
    background: transparent;
    border-color: transparent;
    padding-inline: 0;
  }
  .btn--mini {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--fs-eyebrow-sm);
    letter-spacing: 0.04em;
    color: var(--ink-2);
  }

  /* Card — the boxed callout surface shared site-wide by asides and rail notes. */
  .card {
    padding: var(--space-xl);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--paper) 82%, var(--rule-soft) 18%);
    box-shadow: var(--shadow-soft);
  }
  /* Even internal rhythm: zero child margins, then one uniform gap between
     stacked items so card padding stays symmetric regardless of content. */
  .card > * { margin: 0; }
  .card > * + * {
    margin-top: var(--space-md);
    line-height: 1.2;
  }

  /* Bibliography — compact numbered references shared by calculators and articles. */
  .biblio {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: var(--hairline-ink);
  }
  .biblio ol {
    list-style: none;
    counter-reset: ref;
    padding: 0;
    margin: 0;
    column-count: 3;
    column-gap: var(--space-5xl);
  }
  @media (max-width: 980px) { .biblio ol { column-count: 2; } }
  @media (max-width: 640px) { .biblio ol { column-count: 1; } }
  .biblio li {
    counter-increment: ref;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-sm);
    padding: 0 0 var(--space-md);
    border-bottom: none;
    font-size: var(--fs-body-sm);
    color: var(--ink-2);
    line-height: 1.45;
    break-inside: avoid;
  }
  .biblio li::before {
    content: counter(ref);
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--accent);
    letter-spacing: 0.04em;
    padding-top: 3px;
  }
  .biblio li .t {
    color: var(--ink);
    font-style: italic;
    overflow-wrap: anywhere;
  }
  .ref-link {
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-decoration-style: dotted;
    overflow-wrap: anywhere;
    margin-top: var(--space-xs);
  }

  /* ————— Masthead ————— */
  .mast {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-xl);
    border-bottom: var(--hairline-ink);
    padding-bottom: var(--space-lg);
  }
  .mast .eyebrow { margin-bottom: var(--space-sm); }
  .mast h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-display);
    line-height: 0.98;
    letter-spacing: 0;
    margin: 0;
    font-variation-settings: "opsz" 60;
  }
  .mast h1 em { font-style: italic; color: var(--ink-2); font-weight: 300; }
  .mast-sub {
    max-width: 70ch;
    margin: var(--space-sm) 0 0;
    color: var(--ink-2);
    font-size: var(--fs-body);
    line-height: 1.3;
  }
  .mast .meta {
    font-family: var(--mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
    text-align: right;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }
  .mast .meta b { color: var(--ink); font-weight: 500; }

  @media (max-width: 720px) {
    .mast {
      grid-template-columns: 1fr;
      align-items: start;
      gap: var(--space-sm);
      padding-bottom: var(--space-md);
    }
    .mast h1 { line-height: 1; max-width: none; }
    .mast .meta {
      justify-self: start;
      text-align: left;
      line-height: 1.3;
    }
  }

  /* Compact site navigation shared by mastheads and footer tops. */
  .guide-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: var(--hairline-rule);
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .guide-nav a {
    color: var(--ink-3);
    text-decoration: none;
  }
  .guide-nav a:hover,
  .guide-nav a:focus-visible {
    color: var(--accent);
  }
  .guide-nav a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
  }
  @media (max-width: 720px) {
    .guide-nav {
      gap: var(--space-xs) 6px;
    }
  }

  /* ————— Footer ————— */
  /* Shared chrome for every page: top nav, disclaimer, optional share controls,
     and copyright on its own bottom row. */
  .foot {
    margin-top: var(--space-xl);
    padding: 0 0 var(--space-3xl);
    border-top: var(--hairline-ink);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
    align-items: start;
  }
  .foot .guide-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }
  .foot .dis {
    max-width: 62ch;
    grid-column: 1;
    grid-row: 2;
    line-height: 1.6;
    font-style: italic;
    font-size: var(--fs-body-sm);
    color: var(--ink-2);
  }
  .foot-meta {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    gap: 5px;
    justify-items: end;
    text-align: right;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.08em;
    color: var(--ink-3);
  }
  .foot-copy {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.08em;
    color: var(--ink-3);
  }
  .foot:not(:has(.foot-meta)) .foot-copy {
    grid-row: 3;
  }
  @media (max-width: 760px) {
    .foot { grid-template-columns: 1fr; }
    .foot-meta {
      grid-column: 1;
      grid-row: 3;
      justify-items: start;
      text-align: left;
    }
    .foot-copy {
      grid-row: 4;
      justify-self: start;
    }
    .foot:not(:has(.foot-meta)) .foot-copy {
      grid-row: 3;
    }
  }
}