/* One file, on purpose - a handful of screens don't need a design system.
   The tokens come first and everything below reads from them: change a value
   here and every screen follows. Every text/background pair that matters was
   measured against WCAG 2.2 AA (4.5:1 for text, 3:1 for control edges and
   focus rings) in both colour schemes. */

/* One self-hosted OFL face, Geist (variable weight, 29 KB), for headings and
   body alike. Nothing here is fetched from a third party, and the fallbacks
   are the platform's own sans. */
@font-face {
  font-family: "Geist";
  src: url("/static/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The display face, used on the sign-in door only: Instrument Serif Regular
   (OFL, 27 KB; provenance in OFL-instrument-serif.txt). */
@font-face {
  font-family: "Instrument Serif";
  src: url("/static/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colour: surfaces */
  --canvas: #f5f8fb;
  --surface: #ffffff;
  --surface-sunk: #ebf0f6;
  --line: #dbe4ee;          /* hairline between rows: decorative only */
  --line-strong: #5b6e82;   /* control edges: 3:1 or better on every surface */

  /* Colour: text */
  --ink: #0b1a2a;
  --ink-muted: #46586b;

  /* Colour: brand. The primary action is ink on white, not blue: it is the one
     thing on the page that should look like a decision. */
  --cta: #0b1a2a;
  --cta-hover: #23384e;
  --on-cta: #ffffff;
  --brand: #0a58b0;
  --brand-hover: #07458b;
  --on-brand: #ffffff;
  --link: #0a58b0;
  --focus: #0a58b0;

  /* Colour: states */
  --error-bg: #fdecea;
  --error-ink: #611a15;
  --notice-bg: #eaf3fb;
  --notice-ink: #0b1a2a;

  /* Colour: kind badges (text + tint, never colour alone: the word is there) */
  --kind-visit-bg: #dcebfb;      --kind-visit-ink: #0b3f7a;
  --kind-document-bg: #e4eaf0;   --kind-document-ink: #2a3c4d;
  --kind-diagnosis-bg: #d6f1ed;  --kind-diagnosis-ink: #0a4f4a;
  --kind-lab-bg: #d5eef7;        --kind-lab-ink: #0a4660;
  --kind-prescription-bg: #fbe9c8; --kind-prescription-ink: #653b00;

  /* Panels (ADR-025): a 1px line, a 12px radius and a barely visible shadow.
     Controls keep the 8px --radius. The wash colours the top 240px of the
     canvas of the signed-in app and the sign-in door, and nothing else. */
  --radius-panel: 0.75rem;
  --shadow-panel: 0 1px 2px rgb(11 26 42 / 0.05);
  --wash: linear-gradient(180deg, #e3edf9 0%, #f5f8fb 100%);
  --wash-a: #dbe9fb;
  --door-wash: linear-gradient(155deg, #d6e6f9 0%, #e5e0f6 52%, #f7e7db 100%);

  /* Kind dots on the timeline rail: 3:1 or better on --surface. The word is
     always beside the dot, so colour is never alone. */
  --dot-visit: #2563c9;
  --dot-document: #5b6e82;
  --dot-diagnosis: #0b7a70;
  --dot-lab: #0a77a0;
  --dot-prescription: #b45309;

  /* Type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --step--1: 1.0625rem;                                   /* meta, 17px */
  --step-0: 1.125rem;                                     /* body, 18px */
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.75rem);           /* screen title */
  --leading: 1.55;

  /* Space: a 4px grid in rem */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape. Eight pixels at most; the small radius is for inline labels only.
     Nothing casts a shadow: surfaces are told apart by a hairline. */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;

  --target: 2.75rem;        /* 44px minimum hit area */
  --nav-height: 3.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #070f18;
    --surface: #0f1b29;
    --surface-sunk: #0b1622;
    --line: #223548;
    --line-strong: #8296ab;

    --ink: #e9f1f8;
    --ink-muted: #b0bdcc;

    --cta: #f1f6fb;
    --cta-hover: #cfe0f0;
    --on-cta: #07121e;
    --brand: #7db9ff;
    --brand-hover: #a3cdff;
    --on-brand: #04152a;
    --link: #8cc2ff;
    --focus: #8cc2ff;

    --error-bg: #3a1613;
    --error-ink: #ffd9d4;
    --notice-bg: #112a42;
    --notice-ink: #e9f1f8;

    --wash: linear-gradient(180deg, #0f2238 0%, #070f18 100%);
    --door-wash: linear-gradient(155deg, #12263d 0%, #1b1f3d 52%, #2a2025 100%);
    --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.3);
    --wash-a: #16314f;
    --dot-visit: #7db9ff;
    --dot-document: #9fb0c3;
    --dot-diagnosis: #4fd1c1;
    --dot-lab: #5cc8ee;
    --dot-prescription: #f0b44c;

    --kind-visit-bg: #17304d;      --kind-visit-ink: #bcdcff;
    --kind-document-bg: #223344;   --kind-document-ink: #cfdbe7;
    --kind-diagnosis-bg: #12403c;  --kind-diagnosis-ink: #aef0e6;
    --kind-lab-bg: #123a4d;        --kind-lab-ink: #b4e6f7;
    --kind-prescription-bg: #4a3410; --kind-prescription-ink: #ffdfa0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #070f18;
  --surface: #0f1b29;
  --surface-sunk: #0b1622;
  --line: #223548;
  --line-strong: #8296ab;

  --ink: #e9f1f8;
  --ink-muted: #b0bdcc;

  --cta: #f1f6fb;
  --cta-hover: #cfe0f0;
  --on-cta: #07121e;
  --brand: #7db9ff;
  --brand-hover: #a3cdff;
  --on-brand: #04152a;
  --link: #8cc2ff;
  --focus: #8cc2ff;

  --error-bg: #3a1613;
  --error-ink: #ffd9d4;
  --notice-bg: #112a42;
  --notice-ink: #e9f1f8;

  --wash: linear-gradient(180deg, #0f2238 0%, #070f18 100%);
  --door-wash: linear-gradient(155deg, #12263d 0%, #1b1f3d 52%, #2a2025 100%);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.3);
  --wash-a: #16314f;
  --dot-visit: #7db9ff;
  --dot-document: #9fb0c3;
  --dot-diagnosis: #4fd1c1;
  --dot-lab: #5cc8ee;
  --dot-prescription: #f0b44c;

  --kind-visit-bg: #17304d;      --kind-visit-ink: #bcdcff;
  --kind-document-bg: #223344;   --kind-document-ink: #cfdbe7;
  --kind-diagnosis-bg: #12403c;  --kind-diagnosis-ink: #aef0e6;
  --kind-lab-bg: #123a4d;        --kind-lab-ink: #b4e6f7;
  --kind-prescription-bg: #4a3410; --kind-prescription-ink: #ffdfa0;
}

:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--space-6);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--canvas);
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

a,
button,
select,
input,
label {
  touch-action: manipulation;
}

h1,
h2 {
  text-wrap: balance;
  line-height: 1.2;
}

p {
  text-wrap: pretty;
}

/* ---------- Skip link, focus ---------- */

.skip {
  position: absolute;
  left: var(--space-4);
  top: -6rem;
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--focus);
  border-radius: var(--radius);
}

.skip:focus-visible {
  top: var(--space-3);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.button:focus-visible,
a.button:focus-visible {
  border-radius: var(--radius);
}

/* ---------- Header ---------- */

header {
  padding: var(--space-2) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

header .brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
}

/* ---------- Plain pages: a panel on the canvas (legal, consent, import) ---------- */

main {
  max-width: 42rem;
  margin: var(--space-6) auto;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 40rem) {
  main {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

h1 {
  font-weight: 650;
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: var(--space-6) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

.muted {
  color: var(--ink-muted);
}

/* Meta text and links inside it keep a 44px tap height without looking tall. */
.actions a,
.notice a,
.error a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* ---------- Buttons ---------- */

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: var(--space-3) var(--space-5);
  font: inherit;
  font-weight: 550;
  letter-spacing: -0.01em;
  border: 1px solid var(--cta);
  border-radius: var(--radius);
  background: var(--cta);
  color: var(--on-cta);
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
button:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  text-decoration: none;
}

.button:active,
button:active {
  transform: translateY(1px);
}

/* The quiet sign-out in the signed-in header: same 44px target, no call to action. */
.sign-out {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.sign-out:hover {
  background: var(--canvas);
  border-color: var(--line-strong);
}

/* ---------- Notices ---------- */

.error,
.notice {
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}

.error p,
.notice p {
  margin-bottom: var(--space-2);
}

/* A failure is drawn as one: a heavy edge and the error colours. It is never
   shaped like an empty state, and an empty state never borrows this. */
.error {
  background: var(--error-bg);
  color: var(--error-ink);
  border: 1px solid var(--error-ink);
  border-left-width: 6px;
}

.error a {
  color: inherit;
}

/* Same shape as .error, deliberately quieter. "There is more than fits here"
   is information, not a failure, and colouring it like one would teach people
   to dismiss it. */
.notice {
  background: var(--notice-bg);
  color: var(--notice-ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
}

.notice .muted {
  color: var(--ink-muted);
}

.error .muted {
  color: inherit;
  opacity: 1;
}

/* ---------- Counts, rows, cards ---------- */

/* "N things, counted from what's stored" is the record screen's headline fact. */
.count {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0 0 var(--space-5);
  max-width: 38rem;
}

.card {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--target) + var(--space-5));
}

.card h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.card > .muted {
  margin-bottom: var(--space-2);
}

.rows,
.documents {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rows li,
.documents li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.rows li:last-child,
.documents li:last-child {
  border-bottom: 0;
}

.rows p {
  margin: var(--space-1) 0 0;
}

.doc-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.doc-meta {
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.source {
  color: var(--ink-muted);
}

/* The language switch is two links; the active one reads as chosen, not as a
   link to itself. */
.lang-switch {
  margin: var(--space-4) 0;
}

.lang-switch a[aria-current="true"] {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

/* A result's value is the thing the eye goes to. */
.value {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.codes {
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.choices {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.choices li {
  margin: 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.choices li p {
  margin: var(--space-3) 0 0;
}

.actions {
  margin-top: var(--space-5);
}

/* ---------- Forms and tables ---------- */

label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  font-weight: 600;
}

select,
input[type="file"] {
  font: inherit;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  min-height: var(--target);
  padding: var(--space-2) var(--space-3);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.legal {
  max-width: 40rem;
}

/* ---------- The signed-in shell ---------- */

.shell {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* A list of legal and build links at the bottom of every page. The list is
   a flex row on wide screens; on small screens each item gets its own line.
   The text is the existing muted ink, which already meets WCAG AA on canvas
   and surface in both colour schemes. */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0 var(--space-6);
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  display: flex;
  align-items: center;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.plain .site-footer,
.flow .site-footer,
.door-page .site-footer {
  max-width: 42rem;
  margin-inline: auto;
}

/* On a wide viewport the plain legal pages have room for the full footer row;
   below 40rem the media query stacks the items and uses a smaller inset. */
.plain .site-footer {
  max-width: calc(100% - 2 * var(--space-5));
  padding-inline: var(--space-5);
}

.flow .site-footer {
  max-width: 36rem;
}

/* In the signed-in shell the footer runs under both columns, so on a wide
   screen its items share one line instead of stacking in the sidebar column. */
.shell .site-footer {
  grid-column: 1 / -1;
}

.door-page .site-footer {
  max-width: 36rem;
  padding-inline: var(--space-5);
}

.app main,
.shell main {
  max-width: 50rem;
  width: 100%;
  margin: var(--space-7) 0 var(--space-8);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-inline: max(var(--space-5), calc((100% - 68rem) / 2 + var(--space-5)));
}

.sidebar {
  position: sticky;
  top: calc(var(--target) + var(--space-5) + var(--space-4));
  align-self: start;
  margin-top: var(--space-7);
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: grid;
  gap: var(--space-1);
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
}

/* The icons are CSS masks so the link text stays the link's only content. */
.sidebar a::before {
  content: "";
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.sidebar a[href="/record"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='9' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='5.5' rx='2'/%3E%3Crect x='13.5' y='11.5' width='7.5' height='9.5' rx='2'/%3E%3Crect x='3' y='15.5' width='7.5' height='5.5' rx='2'/%3E%3C/svg%3E");
}

.sidebar a[href="/timeline"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v18'/%3E%3Ccircle cx='6' cy='6' r='1.8'/%3E%3Ccircle cx='6' cy='12' r='1.8'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Cpath d='M11 6h9M11 12h9M11 18h6'/%3E%3C/svg%3E");
}

.sidebar a[href="/medications"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8.5' width='19' height='7' rx='3.5' transform='rotate(-45 12 12)'/%3E%3Cpath d='M9.5 9.5l5 5'/%3E%3C/svg%3E");
}

.sidebar a[href="/labs"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5.5 9.5A1.5 1.5 0 0 0 5.8 21h12.4a1.5 1.5 0 0 0 1.3-2.5L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E");
}

.sidebar a[href="/documents"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E");
}

.sidebar a:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.sidebar a[aria-current="page"] {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-sunk);
}

@media (max-width: 52rem) {
  .shell {
    display: block;
    padding: 0 var(--space-4) calc(var(--nav-height) + var(--space-6) + env(safe-area-inset-bottom));
  }

  .app main,
  .shell main {
    max-width: none;
    margin: var(--space-5) 0 0;
    padding: 0;
  }

  .app header {
    padding: var(--space-1) var(--space-4);
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    z-index: 10;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar ul {
    display: flex;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .sidebar li {
    flex: 1;
  }

  .sidebar a {
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-height: var(--nav-height);
    padding: var(--space-2);
    border-radius: 0;
    text-align: center;
    font-size: var(--step--1);
  }

  .sidebar a[aria-current="page"] {
    background: none;
    color: var(--ink);
    box-shadow: inset 0 3px 0 var(--cta);
  }
}

@media (max-width: 40rem) {
  .site-footer ul {
    flex-direction: column;
    gap: var(--space-2);
  }

  .plain .site-footer,
  .flow .site-footer,
  .door-page .site-footer {
    padding-inline: var(--space-4);
  }
}

/* ---------- The record overview ---------- */

.app main > h1 {
  font-size: var(--step-3);
  margin-bottom: var(--space-3);
}

/* A flat row of linked figures, a hairline between them. The number is the
   display face; the word beside it says what was counted. */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0 0 var(--space-6);
}

.tally a,
.tally .tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  border-left: 1px solid var(--line);
}

.tally a:hover {
  background: var(--surface-sunk);
}

.tally .num {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.tally .what {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* ---------- Timeline ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0 var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--line);
}

.filters label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.filters select {
  font-size: var(--step-0);
  color: var(--ink);
  min-width: 9rem;
}

/* Secondary on purpose: with script, changing a select applies it; this is the
   way through without script. */
.filters button {
  margin-top: var(--space-4);
  background: transparent;
  color: var(--link);
  border-color: var(--line-strong);
  box-shadow: none;
}

.filters button:hover {
  background: var(--surface-sunk);
  color: var(--link);
  border-color: var(--line-strong);
}

/* A rail runs down between the date and the entry, and each entry hangs a dot
   on it. The year is the card; the rail is only the thread through it. */
.rail {
  position: relative;
}

.rail::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  left: 9rem;
  width: 1px;
  background: var(--line-strong);
  transform-origin: top;
}

.timeline {
  position: relative;
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  column-gap: var(--space-7);
  row-gap: var(--space-1);
  align-items: baseline;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 1.65rem;
  left: calc(9rem - 5.5px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand);
  box-sizing: border-box;
}

.timeline .entry-visit::before { border-color: var(--kind-visit-ink); }
.timeline .entry-document::before { border-color: var(--kind-document-ink); }
.timeline .entry-diagnosis::before { border-color: var(--kind-diagnosis-ink); }
.timeline .entry-lab::before { border-color: var(--kind-lab-ink); }
.timeline .entry-prescription::before { border-color: var(--kind-prescription-ink); }

.month-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
  margin: var(--space-4) 0 var(--space-2);
}

.month + .month {
  margin-top: var(--space-3);
}

.timeline li > * {
  grid-column: 2;
  margin: 0;
}

.timeline .when {
  grid-column: 1;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

.timeline .kind {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.kind {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 550;
  line-height: 1.5;
  background: var(--kind-document-bg);
  color: var(--kind-document-ink);
}

.kind-visit { background: var(--kind-visit-bg); color: var(--kind-visit-ink); }
.kind-document { background: var(--kind-document-bg); color: var(--kind-document-ink); }
.kind-diagnosis { background: var(--kind-diagnosis-bg); color: var(--kind-diagnosis-ink); }
.kind-lab { background: var(--kind-lab-bg); color: var(--kind-lab-ink); }
.kind-prescription { background: var(--kind-prescription-bg); color: var(--kind-prescription-ink); }

@media (max-width: 30rem) {
  .rail::before,
  .timeline li::before {
    display: none;
  }

  .timeline li {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
  }

  .timeline li > * {
    grid-column: 1 / -1;
  }

  .timeline .when {
    grid-column: 1;
  }

  .timeline .kind {
    grid-column: 2;
    grid-row: 1;
  }

  .card {
    padding-inline: var(--space-4);
  }

  .filters {
    padding-inline: var(--space-4);
  }
}

/* Motion: a colour change on hover and focus, nothing else; the reduced-motion
   block below zeroes it. Nothing inside the record moves. */
@media (prefers-reduced-motion: no-preference) {
  .button,
  button,
  .sidebar a,
  .tally a {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
}

@media (forced-colors: active) {
  .kind,
  .tally a {
    border: 1px solid CanvasText;
  }

  .sidebar a[aria-current="page"] {
    outline: 2px solid CanvasText;
  }

  .timeline li::before {
    border-color: CanvasText;
  }
}

/* ======================================================================
   Design pass: upload, import status and result, history, connect, consent,
   legal. Tokens only; every text pair below is one the stylesheet already
   measures (ink / ink-muted on surface or canvas, on-cta on cta, error-ink
   on error-bg, notice-ink on notice-bg).
   ====================================================================== */

/* ---------- Shared: lede, eyebrow, state word ---------- */

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 38rem;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* The state is a word, never colour alone. */
.state {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ---------- Upload ---------- */

.field {
  margin: var(--space-5) 0;
}

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-6) var(--space-5);
  font-weight: 400;
  background: var(--surface-sunk);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.dropzone:hover,
.dropzone:focus-within {
  background: var(--surface);
}

/* The browser's own file control stays in the label: it shows the chosen
   filename natively, and takes the dropped file. */
.dropzone input[type="file"] {
  width: 100%;
  min-height: var(--target);
  max-width: 100%;
  background: var(--surface);
}

.dropzone:has(input:valid) {
  border-style: solid;
  background: var(--surface);
}

.dropzone-title {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dropzone-hint {
  color: var(--ink-muted);
}

.upload-form .button {
  width: 100%;
}

@media (min-width: 40rem) {
  .upload-form .button {
    width: auto;
  }
}

.indicator {
  margin-left: var(--space-3);
  color: var(--ink-muted);
}

/* htmx injects its own indicator CSS using opacity only; these rules set
   display, a different property, so they do not conflict, and the element is
   out of the accessibility tree until a request runs. */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

button[disabled] {
  opacity: 1;
  cursor: progress;
  background: var(--cta-hover);
}

/* ---------- Import status, result, history ---------- */

.status-card,
.import-row,
.empty-state {
  margin: var(--space-5) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.status-card h1 {
  margin-top: var(--space-3);
}

/* A failed or partial import is drawn with the failure's heavy edge, never
   with the calm one a success gets. */
.status-failed {
  border-color: var(--error-ink);
  border-left-width: 6px;
}

.tallies {
  margin: var(--space-4) 0 var(--space-5);
}

.counts {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.defects th {
  font-weight: 600;
}

/* Under 768px a defect is a labelled block, not a row of cramped cells. */
@media (max-width: 47.9375rem) {
  .defects thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .defects,
  .defects tbody,
  .defects tr,
  .defects td {
    display: block;
    width: 100%;
  }

  .defects tr {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .defects td {
    padding: var(--space-1) 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .defects td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-muted);
  }
}

.defects td {
  overflow-wrap: anywhere;
}

.imports {
  list-style: none;
  margin: 0;
  padding: 0;
}

.import-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.import-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.import-counts dt {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.import-counts dd {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.empty-state .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

/* ---------- Focus flow: connect and consent ---------- */

.flow header {
  background: none;
  border-bottom: 0;
}

.flow main {
  max-width: 36rem;
  margin: var(--space-6) auto var(--space-8);
}

.flow main:has(.legal) {
  max-width: 44rem;
}

@media (max-width: 40rem) {
  .flow main {
    margin: 0 auto;
  }
}

.step-action {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.step-action .button {
  width: 100%;
}

.consent-line {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.secondary {
  margin: var(--space-3) 0 0;
  text-align: center;
}

.secondary a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* The version identifier is evidence, so it is read, not hidden. */
.version {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.flow form .button {
  width: 100%;
}

/* ---------- Legal: reading ---------- */

.legal {
  max-width: 68ch;
  font-size: var(--step-0);
  line-height: 1.65;
}

.legal h1 {
  margin-bottom: var(--space-5);
}

.legal h2 {
  margin: var(--space-6) 0 var(--space-3);
}

.legal h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--step-0);
}

.legal p,
.legal li {
  margin-bottom: var(--space-3);
}

.legal ul,
.legal ol {
  padding-left: var(--space-5);
}

.legal a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal a:hover {
  text-decoration-thickness: 2px;
}

/* Imprint definition list. */
.legal dl {
  margin: 0;
}

.legal dt {
  font-weight: 600;
}

.legal dd {
  margin: 0 0 var(--space-3);
}

/* The notice under the overview heading; it must stay readable and not push
   the h1 into the first card. */
.record-notice {
  color: var(--ink-muted);
  font-size: var(--step--1);
  margin: 0 0 var(--space-3);
  max-width: 44rem;
}

/* ---------- Reduced motion, forced colours ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  summary:focus-visible {
    outline: 3px solid Highlight;
  }

  .sidebar a[aria-current="page"] {
    outline: 2px solid Highlight;
    text-decoration: underline;
  }

  .status-card,
  .import-row,
  .dropzone,
  .state {
    border: 1px solid CanvasText;
  }
}

.sidebar a[href="/imports"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}

/* A standalone way back is a control, not running text: it gets the full
   44px target, unlike links inside a paragraph. */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* Finished with gaps: done, but not everything converted or something was
   flagged. Its own state, never the success styling. */
.status-partial {
  border-color: var(--notice-ink);
  border-left-width: 6px;
}

.status-partial .state {
  background: var(--notice-bg);
  color: var(--notice-ink);
}

/* main's bottom margin would otherwise collapse through body and leave the
   flow background short of the page end. */
.flow {
  display: flow-root;
}

/* ---------- Lab results ---------- */

/* Every point is drawn the same: nothing here depends on a value or on where it
   sits against its stated range. The band is the stated range, neutral. */
.chart-wrap {
  margin: var(--space-4) 0;
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 40rem;
}

.chart-band {
  fill: var(--surface-sunk);
}

.chart-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linejoin: round;
}

.chart-point {
  fill: var(--brand);
}

.chart-axis {
  fill: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Signed-in screens: the premium pass (ui#78) ----------
   The tokens above are the product's; this layer only decides how the
   signed-in screens use them.
   The shell is a tool, not a page: a flat canvas, hairlines, rectangular
   controls, and a plain wordmark. Everything else is the same few moves
   repeated on every screen: one title size, one section, one row, one table,
   one meta size. Motion is a colour change on hover and focus, nothing more,
   and the reduced-motion block above still zeroes it. */

.app {
  --meta: 0.9375rem;        /* dates, codes, captions: one size on every screen */
  --title: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
  font-size: 1rem;
}

.app a,
.app button,
.app select,
.app .tally a,
.app .dropzone {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Shell: a solid header over a hairline, the wordmark as text. */

.app header {
  border-bottom-color: var(--line);
}

.app header .brand {
  font-weight: 650;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}

/* Navigation: a quiet list of rectangles on the canvas, not a card. */

.sidebar ul {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.sidebar a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: 1rem;
}

.sidebar a:hover {
  background: color-mix(in srgb, var(--surface-sunk) 85%, transparent);
}

/* Phone bar. Six entries cannot share one 320px row at a readable size, so
   below 34rem it is three columns by two rows, each cell an icon over its
   whole word (never abbreviated, never behind a "More"), and from 34rem up one
   row of six. No script either way. */

@media (max-width: 52rem) {
  .sidebar ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    padding: var(--space-1) var(--space-2);
  }

  .sidebar a {
    min-height: 3.25rem;
    padding: var(--space-1) 0;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.15;
    gap: 0.25rem;
  }

  .sidebar a[aria-current="page"] {
    font-weight: 650;
    color: var(--ink);
    background: var(--surface-sunk);
  }

  .shell {
    padding-bottom: calc(var(--nav-height) + var(--space-6) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 33.99rem) {
  .sidebar ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shell {
    padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
  }
}

/* Page head: one title size, one lede. */

.app main > h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--title);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.app main > h1 + * {
  margin-top: var(--space-4);
}

.app main > h1 + .lede,
.app main > h1 + .count {
  margin-top: var(--space-3);
}

.app .count,
.app .lede {
  max-width: 40rem;
  margin: 0 0 var(--space-5);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-muted);
}

.app main > p {
  max-width: 40rem;
}

/* Meta text: one size. */

.app .doc-meta,
.app .codes,
.app .tally .what,
.app .state,
.app .kind,
.app .import-counts dt,
.app .eyebrow,
.app .filters label,
.app .muted {
  font-size: var(--meta);
}

.app .doc-meta,
.app .muted {
  line-height: 1.5;
}

/* Cards and rows. */

.app .card {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
}

.app .status-card,
.app .import-row {
  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-6);
}

.app .card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.app .card h3 {
  margin: var(--space-5) 0 0;
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.app .rows li,
.app .documents li {
  display: grid;
  row-gap: 0.125rem;
  padding: var(--space-4) 0;
}

.app .rows li:first-child,
.app .documents li:first-child {
  padding-top: var(--space-3);
}

.app .rows li:last-child,
.app .documents li:last-child {
  padding-bottom: var(--space-1);
}

.app .rows li > *,
.app .documents li > * {
  margin: 0;
}

.app .rows p,
.app .rows .source {
  font-size: var(--meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.app .doc-title,
.app .rows li > strong,
.app .rows li > a:first-child {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.app .rows li > a:first-child,
.app .documents li > a:first-child {
  justify-self: start;
}

/* A result's value is what the eye goes to, in the same weight as a title. */
.app .value {
  margin: 0.125rem 0;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Source links: present on every row, so quiet; still underlined, so still links. */
.app .rows a:not(:first-child),
.app .rows .source a {
  justify-self: start;
  font-size: var(--meta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Overview tiles. */

.app .tally {
  margin-bottom: var(--space-5);
}

.app .tally a {
  min-height: 4.5rem;
}

.app .tally .num {
  font-size: 2rem;
  font-weight: 600;
}

/* Tables: hairlines, a small muted head, numbers that line up. */

.app table {
  margin: var(--space-3) 0 0;
}

.app th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--meta);
  font-weight: 600;
  color: var(--ink-muted);
  vertical-align: bottom;
  border-bottom-color: var(--line-strong);
}

.app td {
  padding: var(--space-3);
  vertical-align: top;
}

.app th:first-child,
.app td:first-child {
  padding-left: 0;
}

.app th:last-child,
.app td:last-child {
  padding-right: 0;
}

.app tbody tr:last-child td {
  border-bottom: 0;
}

.app table.stack td:first-child,
.app table.stack td:nth-child(2) {
  white-space: nowrap;
}

@media (max-width: 47.9375rem) {
  .app table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .app table.stack,
  .app table.stack tbody,
  .app table.stack tr,
  .app table.stack td {
    display: block;
    width: 100%;
  }

  .app table.stack tr {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
  }

  .app table.stack tr:last-child {
    border-bottom: 0;
  }

  .app table.stack td {
    padding: var(--space-1) 0;
    border: 0;
    white-space: normal;
  }

  .app table.stack td:empty {
    display: none;
  }

  .app table.stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--meta);
    font-weight: 600;
    color: var(--ink-muted);
  }

  .chart-axis {
    font-size: 22px;
  }
}

/* Lab chart: the line is the only ink; the band is the stated range, neutral. */

.app .chart-wrap {
  margin: var(--space-4) 0 var(--space-5);
}

.app .chart-line {
  stroke-width: 2.5;
}

.app .chart-band {
  fill: color-mix(in srgb, var(--ink-muted) 16%, transparent);
}

/* Filters. */

.app .filters select {
  font-size: 1rem;
}

@media (max-width: 30rem) {
  .app .filters label {
    flex: 1 1 8rem;
  }

  .app .filters select {
    width: 100%;
    min-width: 0;
  }

  .app .filters button {
    flex: 1 1 100%;
    margin-top: var(--space-3);
  }
}

/* Timeline entries. */

.app .timeline .when {
  font-size: var(--meta);
  color: var(--ink-muted);
}

.app .timeline li > :not(.when):not(.kind) {
  font-size: 1rem;
}

.app .kind {
  padding: 0.0625rem var(--space-3);
}

/* Notices and import cards: a full hairline and a stripe clipped to the
   rounded corners. The words carry the state; the stripe only repeats it. */

.app .error,
.app .notice,
.app .status-failed,
.app .status-partial {
  position: relative;
  overflow: hidden;
  border-left-width: 1px;
}

.app .error::before,
.app .notice::before,
.app .status-failed::before,
.app .status-partial::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand);
}

.app .error::before,
.app .status-failed::before {
  background: var(--error-ink);
}

.app .error,
.app .status-failed {
  border-color: color-mix(in srgb, var(--error-ink) 45%, transparent);
}

.app .status-partial {
  border-color: var(--line);
}

.app .error,
.app .notice {
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 4px);
  margin: 0 0 var(--space-5);
}

.app main > .state,
.app main > .eyebrow {
  margin-bottom: var(--space-3);
}

/* Empty states: a calm card, the one action at the end. */

.app .empty-state {
  padding: var(--space-6);
  text-align: left;
}

.app .empty-state .empty {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.app .empty-state p {
  max-width: 34rem;
  color: var(--ink-muted);
}

.app .empty-state p.empty {
  color: var(--ink);
}

.app .empty-state .button {
  margin-top: var(--space-2);
}

/* Upload. */

.app .lede {
  margin-inline: 0;
}

.app .dropzone {
  border-width: 1.5px;
  border-radius: var(--radius);
}

.app .dropzone input[type="file"] {
  padding: var(--space-1);
  border-radius: var(--radius);
  font-size: var(--meta);
}

.app input[type="file"]::file-selector-button {
  min-height: calc(var(--target) - 0.5rem);
  margin-right: var(--space-3);
  padding: 0 var(--space-4);
  font: inherit;
  font-weight: 550;
  color: var(--on-cta);
  background: var(--cta);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.app .import-head .doc-title {
  font-size: var(--step-0);
}

.app .import-counts dd {
  font-size: var(--step-1);
  font-weight: 650;
}

.app main > .button {
  margin-bottom: var(--space-5);
}

.app main > .back-link,
.app main > .actions {
  margin-top: var(--space-2);
}

.app main > h1 + .button {
  margin-top: var(--space-4);
}

@media (max-width: 30rem) {
  .app .status-card,
  .app .import-row {
    padding: var(--space-4);
  }
}

/* Links that stand alone on a line are controls: 44px to hit, without making
   the rows look tall (the rows give back what the link takes). */
.app .rows li > a,
.app .rows .source a,
.app .documents li > a,
.app .lang-switch a,
.app .card > a,
.app main > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.app .rows li,
.app .documents li {
  padding-block: var(--space-3);
}

/* ---------- Second polish pass (ui#79) ---------- */

/* The card must not touch the title. `.app .card` sets its own margin shorthand
   and outranks `h1 + *`, so the gap is stated on the card itself. */
.app main > h1 + .card,
.app main > h1 + .filters,
.app main > h1 + .tally,
.app main > h1 + .chart-wrap {
  margin-top: var(--space-6);
}

/* A section label is a quiet word above its rows, not a heading. */
.app .card h2.section-label {
  margin: 0 0 var(--space-1);
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Status: a small muted pill. Tints reuse the existing kind tokens, so dark
   mode comes with them. */
.pill {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--meta);
  font-weight: 550;
  line-height: 1.6;
  background: var(--kind-document-bg);
  color: var(--kind-document-ink);
}

.pill-active { background: var(--kind-diagnosis-bg); color: var(--kind-diagnosis-ink); }
.pill-completed { background: var(--kind-visit-bg); color: var(--kind-visit-ink); }
.pill-stopped,
.pill-cancelled,
.pill-entered-in-error { background: var(--kind-prescription-bg); color: var(--kind-prescription-ink); }

/* Dispenses: a compact sub-list under the prescription text, with a hairline
   on the left instead of an indent and a divider per row. */
.app .rows .dispenses {
  margin: var(--space-2) 0 var(--space-1);
  padding: 0 0 0 var(--space-3);
  border-left: 2px solid var(--line);
  list-style: none;
}

.app .rows .dispenses li,
.app .rows .dispenses li:first-child,
.app .rows .dispenses li:last-child {
  padding: var(--space-1) 0;
  border-bottom: 0;
}

/* ---------- The sign-in door ----------
   A plain centred column on the flat canvas: the wordmark, one sentence, the
   button, one link out. It shares tokens and the typeface with the rest of the
   product and nothing else. */

.door-page main {
  max-width: 22rem;
  margin: 0 auto;
  padding: var(--space-9) var(--space-4) var(--space-7);
  background: none;
  border: 0;
  border-radius: 0;
}

.door-page .error {
  margin: 0 0 var(--space-5);
}

.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.door h1 {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.door p {
  margin: 0;
  color: var(--ink-muted);
}

.door .button {
  width: 100%;
}

.door-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

@media (max-width: 40rem) {
  .door-page main {
    padding-top: var(--space-8);
  }
}

/* ---------- Lab results: the table and the range bar ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.section-count {
  margin-left: var(--space-3);
  font-size: var(--meta);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.app .labs-table td:first-child {
  white-space: normal;
}

.app .labs-table .value {
  display: inline;
  margin: 0;
  font-size: 1rem;
}

.app .labs-table .doc-meta {
  margin: 0;
}

/* The track is the whole drawn span, the band is the range the lab stated, the
   tick is the latest value. Neutral tokens only, drawn the same wherever the
   tick falls. */
.range-bar {
  display: block;
}

.range-track {
  fill: var(--line-strong);
}

.range-band {
  fill: var(--line);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.range-mark {
  fill: var(--ink);
}

/* ======================================================================
   The workspace pass (ADR-025). The signed-in app becomes a workspace and the
   door a split. Panels, stat tiles, tabs with count badges, a segmented kind
   control, a timeline rail, a list-plus-preview pane for documents. Tokens
   only; nothing here is a hero, a mesh, a pill or a skeleton, and no example
   record data exists anywhere in the markup these rules style.
   ====================================================================== */

.app {
  --header-h: 3.8125rem;
  --meta: 0.9375rem;
  font-size: var(--step--1);            /* body 17px */
  position: relative;
  isolation: isolate;
}

html:has(.app) {
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

/* The wash: the top 240px of the canvas, fading into it. Nothing below. */
.app::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 15rem;
  background: var(--wash);
  z-index: -1;
  pointer-events: none;
}

/* Shell: 240px sidebar, a 1120px main column. */
.shell {
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 90rem;
}

.app main,
.shell main {
  max-width: 70rem;
  margin: var(--space-6) 0 var(--space-8);
}

.app header {
  display: flex;
  align-items: center;
  justify-content: space-between;     /* the sign-out control goes after .brand */
  gap: var(--space-4);
  min-height: var(--header-h);
  border-bottom: 1px solid var(--line);
  padding-inline: max(var(--space-5), calc((100% - 90rem) / 2 + var(--space-5)));
}

@media (min-width: 52.0625rem) {
  .sidebar {
    top: calc(var(--header-h) + var(--space-5));
    margin-top: var(--space-6);
  }
}

/* The wordmark in the display serif; anything after it (the sign-out control)
   sits at the right edge. */
.app header .brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.app header > :not(.brand) {
  margin-left: auto;
}

.sidebar a[aria-current="page"] {
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

@media (max-width: 52rem) {
  .shell {
    grid-template-columns: none;
  }

  .sidebar a[aria-current="page"] {
    box-shadow: none;
    outline: 0;
  }
}

/* Page head: 32px / 650. */
.app main > h1 {
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.app .count,
.app .lede {
  font-size: var(--step--1);
  max-width: 44rem;
}

.app td,
.app th,
.app .value,
.app .num,
.app .badge {
  font-variant-numeric: tabular-nums;
}

/* Panels: every section of a signed-in screen. */
.app .card {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

.app .card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--step-1);
}

.app .card h2.section-label {
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}

.app .empty-state {
  padding: var(--space-6);
}

.app main > .card:first-of-type,
.app main > h1 + .card {
  margin-top: var(--space-5);
}

.app .status-card,
.app .import-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

/* Counts as badges: a small square label, never a pill. */
.badge {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Overview: stat tiles, tabs, the two-column body ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}

.stats a {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-height: 7rem;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  color: var(--ink);
  text-decoration: none;
}

.stats a:hover {
  border-color: var(--brand);
  background: var(--surface-sunk);
}

.stats a:focus-visible {
  outline-offset: 2px;
  border-radius: var(--radius-panel);
}

.stats .what {
  color: var(--ink-muted);
  font-size: var(--meta);
  font-weight: 550;
  text-transform: capitalize;
}

.stats .num {
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.stats .sub {
  color: var(--ink-muted);
  font-size: var(--meta);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-5);
  align-items: start;
}

.workspace .col {
  min-width: 0;
}

@media (min-width: 64rem) {
  .workspace {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* Chart cards: cells of one grid, divided by hairlines, all one height. They
   are not boxes in a box: the panel is the only container. At least 160px
   wide. The whole cell is the link to the analyte's page. */
.chart-cards {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.app .rows.chart-cards li,
.chart-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: var(--space-4);
  background: var(--surface);
  border: 0;
  border-top: 1px solid var(--line);
}

.chart-card:hover {
  background: var(--surface-sunk);
}

.chart-card:focus-within {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 2px var(--focus);
}

.chart-card .card-link {
  text-decoration: none;
  color: var(--ink);
}

.chart-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.chart-card .card-link:focus-visible {
  outline: 0;
}

.app .chart-card .value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.value .unit {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.spark {
  display: block;
  width: 100%;
  height: 72px;
  margin: var(--space-2) 0;
}

.spark .chart-line {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.spark .chart-band {
  fill: color-mix(in srgb, var(--brand) 14%, transparent);
}

.app .doc-meta.fine {
  font-size: 0.875rem;
  line-height: 1.4;
}

.provenance {
  margin: var(--space-3) 0 0;
}

.app .doc-meta.fine time {
  white-space: nowrap;
}

.workspace .codes {
  font-size: 0.875rem;
}

/* ---------- Timeline: segmented kind control, rail, sticky years ---------- */

.app .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.segmented a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-height: var(--target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-weight: 550;
  text-decoration: none;
}

.segmented a:hover {
  color: var(--ink);
}

.segmented a[aria-current="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-panel);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.segmented a[aria-current="true"] .badge {
  background: var(--surface-sunk);
}

.year-filter {
  display: flex;
  align-items: end;
  gap: var(--space-3);
}

.year-filter button {
  margin-top: 0;
}

.app .count {
  margin-top: var(--space-4);
}

/* Years are panels whose heading stays in view while their rows scroll. */
.app .card:has(> .timeline) {
  padding-top: 0;
}

.app .card > h2.section-label {
  margin: 0;
}

.app .card:has(> .timeline) > h2.section-label {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  padding: var(--space-4) 0 var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  font-variant-numeric: tabular-nums;
}

.app .timeline li::before {
  background: var(--surface);
  border: 3px solid var(--brand);
  box-shadow: none;
}

.app .timeline .entry-visit::before { border-color: var(--kind-visit-ink); }
.app .timeline .entry-document::before { border-color: var(--kind-document-ink); }
.app .timeline .entry-diagnosis::before { border-color: var(--kind-diagnosis-ink); }
.app .timeline .entry-lab::before { border-color: var(--kind-lab-ink); }
.app .timeline .entry-prescription::before { border-color: var(--kind-prescription-ink); }

@media (max-width: 30rem) {
  .app .card {
    padding: var(--space-4);
  }

  .app .card:has(> .timeline) > h2.section-label {
    margin-inline: 0;
  }
}

/* ---------- Documents: a list and the pane for the one in view ---------- */

.docs-split {
  display: block;
}

.docs-list .doc-list li:has(> a[aria-current="true"]),
.docs-list .doc-list li:has(> a[data-previewed]) {
  box-shadow: inset 3px 0 0 var(--brand);
  background: var(--surface-sunk);
}

.docs-list .doc-list li {
  padding-inline: var(--space-3);
}

/* Below 1024px a list is a list, and a document is its own page. */
.docs-split > .docs-preview {
  display: none;
}

.docs-split:has(> .docs-detail) > .docs-list {
  display: none;
}

@media (min-width: 64rem) {
  .docs-split {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: 0 var(--space-5);
    align-items: start;
  }

  .docs-split > .docs-preview,
  .docs-split:has(> .docs-detail) > .docs-list {
    display: block;
  }

  .docs-split > .docs-list {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    max-height: calc(100dvh - var(--header-h) - var(--space-6));
    overflow-y: auto;
  }
}

.docs-preview .button {
  margin-top: var(--space-4);
}

.docs-detail > :first-child {
  margin-top: var(--space-5);
}

/* ---------- Labs, medications ---------- */

.app .chart-wrap {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

.app .labs-table th {
  background: var(--surface-sunk);
}

.app .labs-table th:first-child,
.app .labs-table td:first-child {
  padding-left: var(--space-3);
}

.app .labs-table th:last-child,
.app .labs-table td:last-child {
  padding-right: var(--space-3);
}

.app .card > table {
  margin-top: var(--space-2);
}

/* ---------- The sign-in door: a split ---------- */

.door-page main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.door {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(18rem, 1fr);
  min-height: 100dvh;
  gap: 0;
  align-items: stretch;
  text-align: left;
}

.door-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  max-width: 36rem;
  padding: var(--space-8) var(--space-5);
  margin-inline: auto;
  width: 100%;
}

.door-copy .error {
  margin: 0;
  width: 100%;
}

.door-wash {
  min-height: 18rem;
  background: var(--door-wash);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The illustration: blank sheets and one line with dots across them. No text
   and no figures anywhere in it. */
.door-art {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.door-wash .sheet {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.door-wash .sheet-back { opacity: 0.55; }
.door-wash .sheet-mid { opacity: 0.8; }
.door-wash .fold {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.door-wash .thread {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.door-wash .node {
  fill: var(--surface);
  stroke: var(--brand);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .door-wash .thread {
    clip-path: inset(0 100% 0 0);
    animation: draw-thread 2.4s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .door-wash .node {
    opacity: 0;
    animation: show-node 0.5s ease forwards;
  }

  .door-wash .node-0 { animation-delay: 0.3s; }
  .door-wash .node-1 { animation-delay: 1.0s; }
  .door-wash .node-2 { animation-delay: 1.5s; }
  .door-wash .node-3 { animation-delay: 2.0s; }
  .door-wash .node-4 { animation-delay: 2.6s; }
}

@keyframes draw-thread {
  to { clip-path: inset(0); }
}

@keyframes show-node {
  to { opacity: 1; }
}

.door-copy {
  --door-pad: var(--space-5);
  position: relative;
}

.door-brand {
  position: absolute;
  top: max(var(--space-5), env(safe-area-inset-top));
  left: var(--door-pad);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.door-brand .mark {
  width: 0.75rem;
  height: 0.75rem;
  clip-path: circle(50%);
  background: var(--brand);
}

.door h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.door p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--ink-muted);
}

.door .button {
  width: auto;
  min-height: 3rem;
  padding-inline: var(--space-6);
  font-size: var(--step-0);
}

.door-link {
  min-height: var(--target);
  font-weight: 550;
}

.door-link::after {
  content: "\2192";
  margin-left: var(--space-2);
}

@media (min-width: 56rem) {
  .door {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
  }

  .door-copy {
    margin-inline: 0;
    max-width: none;
    --door-pad: clamp(var(--space-6), 8vw, 7rem);
    padding: var(--space-8) var(--door-pad);
  }

  .door-wash {
    min-height: 100dvh;
  }
}

@media (forced-colors: active) {
  .stats a,
  .segmented a[aria-current="true"] {
    border: 1px solid CanvasText;
  }
}

@media (max-width: 40rem) {
  .stats a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .year-filter {
    width: 100%;
  }

  .year-filter label {
    flex: 1 1 8rem;
  }

  .year-filter select {
    width: 100%;
  }
}

.chart-card .doc-title {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--target);
  margin-block: calc(-1 * var(--space-2));
}

.app .chart {
  max-width: 60rem;
}

.app .card .rows + .doc-meta {
  margin-top: var(--space-3);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rail::before {
      animation: rail-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
  }
}
@keyframes rail-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Theme toggle ---------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.plain header,
.flow header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.theme-toggle {
  width: var(--target);
  padding: 0;
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.theme-toggle:hover {
  background: var(--surface-sunk);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The door has no header of its own; the toggle sits in the top corner. */
.door-page .door-bar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  z-index: 5;
  padding: 0;
  background: none;
  border: 0;
}