/* ===========================================================================
   sti.care · Color tokens
   Base palette + semantic aliases. Status colors are ALWAYS paired with an
   icon + word in the UI so they read in grayscale and for color-blind users.
   =========================================================================== */

:root {
  /* --- Surfaces / neutrals ------------------------------------------------ */
  --warm-50:  #FBF9F4;  /* app background — warm off-white                    */
  --warm-100: #F4F1E9;  /* subtle sunken panel / hover on bg                 */
  --warm-200: #ECE7DB;  /* hairline dividers on warm bg                      */
  --white:    #FFFFFF;  /* cards                                             */

  /* --- Ink (near-black, never pure) -------------------------------------- */
  --ink-900:  #1B1B2F;  /* primary text                                      */
  --ink-700:  #3A3A4D;  /* strong secondary text                             */
  --ink-500:  #5C5C6E;  /* secondary text / labels                           */
  --ink-400:  #8A8A99;  /* tertiary / muted / placeholder                    */
  --ink-300:  #B8B8C2;  /* disabled text                                     */
  --ink-200:  #DEDDE4;  /* borders on white                                  */
  --ink-100:  #EEEDF1;  /* faint fills                                       */

  /* --- Primary · calm trustworthy teal/blue ------------------------------ */
  --teal-700: #1F6E80;  /* pressed / text-on-light                           */
  --teal-600: #277F94;  /* hover                                             */
  --teal-500: #2F9BB3;  /* PRIMARY accent                                    */
  --teal-300: #8FCAD6;  /* soft accent / focus ring base                     */
  --teal-100: #DDF0F4;  /* tinted surface                                    */
  --teal-50:  #EEF8FA;  /* faintest tint                                     */

  /* --- Status · clear (green) -------------------------------------------- */
  --clear-600: #248457;
  --clear-500: #2E9E6B;
  --clear-100: #DCF1E6;
  --clear-50:  #EDF8F2;

  /* --- Status · in treatment (amber) ------------------------------------- */
  --treat-600: #BE8B00;
  --treat-500: #E0A500;
  --treat-100: #FBEFCC;
  --treat-50:  #FDF7E6;

  /* --- Status · out of date (red) ---------------------------------------- */
  --expired-600: #B83A30;
  --expired-500: #D7483B;
  --expired-100: #FAE0DD;
  --expired-50:  #FDF0EE;

  /* --- Status · no status (neutral gray) --------------------------------- */
  --neutral-600: #6C6C7A;
  --neutral-500: #8A8A99;
  --neutral-100: #EAEAEE;
  --neutral-50:  #F4F4F6;

  /* ======================================================================= */
  /* Semantic aliases — reference these in components, not the raw scale.    */
  /* ======================================================================= */

  /* Surfaces */
  --surface-app:      var(--warm-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--warm-100);
  --surface-tint:     var(--teal-50);

  /* Text */
  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-subtle:      var(--ink-400);
  --text-disabled:    var(--ink-300);
  --text-on-accent:   var(--white);
  --text-accent:      var(--teal-700);

  /* Lines */
  --border-card:      var(--ink-200);
  --border-strong:    var(--ink-300);
  --divider:          var(--warm-200);

  /* Primary action */
  --accent:           var(--teal-500);
  --accent-hover:     var(--teal-600);
  --accent-press:     var(--teal-700);
  --accent-soft:      var(--teal-100);
  --accent-ring:      var(--teal-300);

  /* Status — clear */
  --status-clear-fg:   var(--clear-600);
  --status-clear-base: var(--clear-500);
  --status-clear-bg:   var(--clear-100);

  /* Status — in treatment */
  --status-treat-fg:   var(--treat-600);
  --status-treat-base: var(--treat-500);
  --status-treat-bg:   var(--treat-100);

  /* Status — out of date */
  --status-expired-fg:   var(--expired-600);
  --status-expired-base: var(--expired-500);
  --status-expired-bg:   var(--expired-100);

  /* Status — no status / neutral */
  --status-none-fg:   var(--neutral-600);
  --status-none-base: var(--neutral-500);
  --status-none-bg:   var(--neutral-100);

  /* Focus */
  --focus-ring: 0 0 0 3px var(--teal-300);
}
/* ===========================================================================
   sti.care · Spacing tokens
   4px base grid. Generous whitespace — calm, uncrowded, confidence-inspiring.
   =========================================================================== */

:root {
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;

  /* Semantic spacing */
  --gap-inline:    var(--space-2);  /* between icon + label                   */
  --gap-stack:     var(--space-3);  /* between stacked text rows              */
  --pad-card:      var(--space-6);  /* inner card padding                     */
  --pad-screen:    var(--space-5);  /* mobile screen side gutters             */
  --gap-section:   var(--space-7);  /* between major sections                 */

  /* Touch target floor (accessibility) */
  --touch-min: 44px;
}
/* ===========================================================================
   sti.care · Radii, shadows, motion
   Soft rounded cards, gentle shadows (no harsh outlines). Calm easing.
   =========================================================================== */

:root {
  /* --- Corner radii ------------------------------------------------------- */
  --radius-xs:   8px;    /* chips, small controls                            */
  --radius-sm:   12px;   /* inputs, buttons                                  */
  --radius-md:   16px;   /* cards                                            */
  --radius-lg:   20px;   /* large feature cards                              */
  --radius-xl:   28px;   /* sheets, the passport card                        */
  --radius-pill: 999px;  /* status pills, avatars, segmented controls        */

  /* --- Shadows · soft and warm-tinted, never harsh ------------------------ */
  /* Ambient lift for resting cards */
  --shadow-sm: 0 1px 2px rgba(27, 27, 47, 0.04),
               0 2px 6px rgba(27, 27, 47, 0.05);
  /* Standard card */
  --shadow-md: 0 2px 4px rgba(27, 27, 47, 0.04),
               0 8px 20px rgba(27, 27, 47, 0.06);
  /* Raised / hover */
  --shadow-lg: 0 6px 14px rgba(27, 27, 47, 0.07),
               0 18px 40px rgba(27, 27, 47, 0.09);
  /* Floating sheets, dialogs */
  --shadow-xl: 0 12px 28px rgba(27, 27, 47, 0.10),
               0 32px 64px rgba(27, 27, 47, 0.14);
  /* Accent glow for the primary passport card */
  --shadow-accent: 0 10px 30px rgba(47, 155, 179, 0.20);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */
}
/* ===========================================================================
   sti.care · Typography tokens
   One clean humanist sans (Hanken Grotesk) throughout. Calm, legible, warm.
   Mobile-first scale; generous line-height for reassurance and readability.
   =========================================================================== */

:root {
  /* --- Families ----------------------------------------------------------- */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Weights ------------------------------------------------------------ */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* --- Type scale (px values; mobile-first) ------------------------------- */
  --text-display:  40px;  /* hero numerals, big reassuring statements         */
  --text-h1:       30px;  /* screen titles                                    */
  --text-h2:       24px;  /* section titles                                   */
  --text-h3:       20px;  /* card titles                                      */
  --text-lg:       18px;  /* lead paragraph / prominent body                  */
  --text-base:     16px;  /* default body                                     */
  --text-sm:       14px;  /* secondary / dense                                */
  --text-xs:       13px;  /* labels, captions                                 */
  --text-2xs:      11px;  /* eyebrows, overline (use sparingly)               */

  /* --- Line heights ------------------------------------------------------- */
  --leading-tight:   1.15;  /* display / large numerals                       */
  --leading-snug:    1.3;   /* headings                                       */
  --leading-normal:  1.5;   /* body                                           */
  --leading-relaxed: 1.65;  /* long-form reassurance copy                     */

  /* --- Letter spacing ----------------------------------------------------- */
  --tracking-tight:  -0.02em;  /* large display / headings                    */
  --tracking-snug:   -0.01em;  /* sub-heads                                   */
  --tracking-normal: 0;        /* body                                        */
  --tracking-wide:   0.06em;   /* eyebrows / overline, uppercase              */
}
/* ===========================================================================
   sti.care · Base / reset
   Minimal, calm defaults. Mobile-first. Applies the warm surface + ink + font.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-strong);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--text-accent); text-decoration: none; }

::selection { background: var(--teal-100); color: var(--ink-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* labs.sti.care editorial vocabulary, layered over the concatenated passport
   tokens (deploy/build-labs.sh emits labs.css = design tokens + this file +
   labs-site.css, so labs still deploys standalone with single-source tokens).
   Same grammar as info.sti.care (doc 36): self-hosted type with metric-tuned
   fallbacks, a serif display face, a reading measure, hairlines, and status
   inks derived to pass AA as small text on the warm background. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2018-201D, U+2026;
}

@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial");
  size-adjust: 100.94%;
  ascent-override: 99.07%;
  descent-override: 30.02%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2018-201D, U+2026;
}

@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 109.02%;
  ascent-override: 95.03%;
  descent-override: 30.73%;
  line-gap-override: 0%;
}

:root {
  --font-sans:
    "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:
    "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman",
    serif;

  --type-title: clamp(30px, 3.4vw + 20px, 44px);
  --type-doc-title: clamp(26px, 2vw + 20px, 34px);
  --type-section: clamp(20px, 1vw + 17px, 24px);
  --measure: 66ch;

  --hairline: 1px solid var(--warm-200);
  --hairline-strong: 1px solid var(--ink-200);

  /* Derived AA inks for the decision-status words (same method as info). */
  --status-ink-clear: color-mix(in srgb, var(--clear-600) 85%, var(--ink-900));
  --status-ink-treat: color-mix(in srgb, var(--treat-600) 60%, var(--ink-900));
  --status-ink-none: var(--neutral-600);
}
/* labs.sti.care page styles, on the editorial grammar (doc 36): the page as
   the surface, hairline structure instead of tinted or bordered cards, serif
   display over Hanken Grotesk body, quiet status words instead of pills, and
   teal reserved for actions. Applies to the generated landing, doc pages,
   and 404 from labs/render.mjs. */

body {
  padding: 0 clamp(16px, 5vw, 40px);
  overflow-wrap: break-word;
  color: var(--text-body);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 72px) 0 40px;
}

::selection {
  background: var(--accent-soft);
}

a {
  color: var(--text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Landing ─────────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--type-title);
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--text-strong);
}

.tagline {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-strong);
  font-weight: var(--weight-medium);
}

.lead {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: var(--measure);
}

section {
  margin-top: clamp(36px, 6vw, 56px);
}

.seclabel {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: var(--hairline);
  padding-top: 14px;
  margin-bottom: 16px;
}

/* The one action callout: the prototype. Flat white, hairline, no shadow. */
.feature {
  display: block;
  background: var(--surface-card);
  border: var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: 20px;
  text-decoration: none;
  color: inherit;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.ftitle {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.fblurb {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
}

.fcta {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--text-accent);
}

/* The published docs: dense hairline rows, not tiles. */
.doclist {
  display: flex;
  flex-direction: column;
}

.doctile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-top: var(--hairline);
  text-decoration: none;
  color: inherit;
}

.doctile:last-child {
  border-bottom: var(--hairline);
}

.dt-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-subtle);
  min-width: 18px;
}

.dt-title {
  display: block;
  font-size: 16.5px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

.doctile:hover .dt-title {
  color: var(--text-accent);
}

.dt-blurb {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.dt-ar {
  flex: none;
  margin-left: auto;
  color: var(--ink-400);
  font-size: 15px;
}

/* ── Doc pages ───────────────────────────────────────────────────────────── */
.back {
  display: inline-block;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 26px;
}

.back:hover {
  color: var(--text-accent);
}

.toc {
  border: var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: 14px 16px;
  margin-bottom: 28px;
}

.toc-h {
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toc a {
  font-size: 13.5px;
  color: var(--text-body);
  text-decoration: none;
}

.toc a:hover {
  color: var(--text-accent);
  text-decoration: underline;
}

/* Prose: the reading grammar, serif section heads over hairlines. */
.prose {
  max-width: var(--measure);
}

.prose h1 {
  font-size: var(--type-doc-title);
  margin-bottom: 14px;
}

.prose h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--type-section);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-strong);
  border-top: var(--hairline);
  padding-top: 22px;
  margin: 34px 0 12px;
  scroll-margin-top: 16px;
}

.prose h3 {
  font-size: 16.5px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  margin: 22px 0 8px;
  scroll-margin-top: 16px;
}

.prose p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.65;
}

.prose li {
  margin-bottom: 7px;
}

.prose li::marker {
  color: var(--text-subtle);
}

.prose strong {
  color: var(--text-strong);
}

.prose hr {
  border: 0;
  border-top: var(--hairline);
  margin: 26px 0;
}

.prose blockquote {
  border-left: 2px solid var(--ink-200);
  margin: 0 0 14px;
  padding: 2px 0 2px 16px;
  color: var(--text-muted);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--warm-100);
  border-radius: 4px;
  padding: 1px 5px;
}

.prose pre {
  background: var(--warm-100);
  border: var(--hairline);
  border-radius: var(--radius-xs);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 14px;
}

.prose pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

.prose th {
  text-align: left;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--hairline-strong);
  padding: 8px 14px 8px 0;
}

.prose td {
  border-bottom: var(--hairline);
  padding: 9px 14px 9px 0;
  vertical-align: top;
}

.prose a {
  color: var(--text-accent);
}

.prose img {
  max-width: 100%;
}

/* ── Decision-status words: quiet derived inks, never a filled pill ──────── */
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 6px;
  white-space: nowrap;
}

.pill-i {
  font-size: 11px;
}

.pill-locked {
  color: var(--status-ink-clear);
}

.pill-built {
  color: var(--status-ink-clear);
}

.pill-rejected {
  color: var(--status-ink-treat);
}

.pill-deferred {
  color: var(--status-ink-none);
}

.pill-open {
  color: var(--text-accent);
}

.pill-limit {
  color: var(--status-ink-none);
}

.pill-scope {
  color: var(--text-subtle);
  font-weight: var(--weight-semibold);
}

.legend {
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding: 14px 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-h {
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.lg-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lg-row .pill {
  min-width: 92px;
  margin-right: 0;
}

.lg-def {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Feedback callout ────────────────────────────────────────────────────── */
.feedbackcta {
  background: var(--surface-card);
  border: var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: 18px 20px;
  margin: 28px 0 6px;
  max-width: var(--measure);
}

.feedbackcta p {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}

.feedback-note {
  margin: 0;
  color: var(--text-muted);
}

/* The in-house response form (doc 35): plain controls on the callout. */
.ansform {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ansform-label {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

.ansform select,
.ansform textarea {
  font: inherit;
  font-size: 14px;
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
}

.ansform textarea {
  resize: vertical;
  line-height: 1.5;
}

.ansform select:focus-visible,
.ansform textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ansform .feedbackbtn {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: var(--weight-bold);
  margin-top: 4px;
}

.ansform .feedbackbtn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ansform-status:empty {
  display: none;
}

.feedbackbtn {
  display: inline-block;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
}

.feedbackbtn:hover {
  background: var(--accent-hover);
}

/* ── Cross-nav + footer ──────────────────────────────────────────────────── */
.crossnav {
  border-top: var(--hairline);
  margin-top: 34px;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.crossnav a {
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-decoration: none;
}

.crossnav a:hover {
  color: var(--text-accent);
  text-decoration: underline;
}

footer {
  border-top: var(--hairline);
  margin-top: 40px;
  padding-top: 16px;
  font-size: 12.5px;
  color: var(--text-subtle);
}

footer a {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

footer a:hover {
  color: var(--text-accent);
}