/* =========================================================================
   VisitBrief - styles.css
   A patient controlled pre visit narrative tool.

   Design thesis: the interface is broken in the patient to doctor direction.
   Two registers live in one product:
     - INTAKE is an app. It is warm, paced, and reassuring for a nervous person.
     - BRIEF is a document. It switches to serif and a clinical layout because
       it is the printed thing a doctor holds, not another app screen.

   UX principles referenced throughout (see comments before each region):
     usability, visual hierarchy, feedback, consistency, accessibility.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Neutrals. A cool clinical paper, with cards that lift off it.
     Consistency: every surface in the app is drawn from these three. */
  --paper: #F4F6F9;
  --surface: #FFFFFF;
  --surface-sunken: #F8FAFC;

  /* Ink. Deep desaturated navy rather than black, calmer to read at length. */
  --ink: #14202E;
  --ink-2: #46566A;
  --ink-3: #808EA2;

  /* Lines. Hairlines that separate without shouting. */
  --line: #E6EAF1;
  --line-strong: #D2D9E4;

  /* Accent. Trust and primary action. */
  --accent: #246EFA;
  --accent-press: #1B54C4;
  --accent-ink: #1A50BE;
  --accent-wash: #EDF3FE;
  --accent-wash-2: #DEEAFE;

  /* Care. The one warm note. Used only where the product holds space for the
     person: the fear, and the brief's "what matters most" block. Amber, not
     red, because fear on a medical form should be met with warmth not alarm. */
  --care-ink: #9A5209;
  --care-wash: #FCF5EA;
  --care-line: #F0E1C6;

  /* Status. Deepened for legibility against light. */
  --good: #2E9E62;
  --warn: #C97F0E;
  --alert: #DC3B3F;

  /* Type. Sans runs the app. A serif appears only in the brief document. */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Radius and shadow. Soft, medical, unfussy. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(20, 32, 46, 0.18);
  --shadow-lg: 0 30px 60px -28px rgba(20, 32, 46, 0.28);

  --wrap: 1080px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
button { font-family: inherit; }

/* Accessibility: a clearly visible focus ring, never removed. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accessibility: honor reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.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;
}

/* Detail: a soft accent wash on text selection instead of the browser default. */
::selection { background: var(--accent-wash-2); color: var(--ink); }

/* -------------------------------------------------------- orchestrated load */
/* Feedback: the hero introduces itself in reading order rather than all at
   once. Each piece carries its own delay via --d so the stagger stays in the
   markup next to the element it belongs to. */
.seq {
  animation: seqIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}
.hero h1 .seq { display: inline-block; }
@keyframes seqIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .seq { animation-delay: 0ms !important; }
}

/* ================================================================= CHROME */
/* Consistency: one slim brand bar across every app screen. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 48px);
  background: rgba(244, 246, 249, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 800; letter-spacing: -0.03em; font-size: 19px;
  color: var(--ink); text-decoration: none;
}
.brand .glyph {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), var(--shadow-sm);
}
.brand .glyph svg { display: block; }
.brand em { font-style: normal; color: var(--accent); }
.topbar .meta {
  font-size: 13px; color: var(--ink-3); font-weight: 600;
  letter-spacing: 0.01em;
}
/* Mobile: the meta line crowds the brand at narrow widths. The same
   reassurance already appears under the hero CTAs, so it is safe to hide. */
@media (max-width: 640px) {
  .topbar .meta { display: none; }
}

/* ================================================================== HERO */
/* Visual hierarchy: the thesis leads. Not a stat, not a logo wall, but the
   product's argument made visible as a before and after. */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 104px) clamp(20px, 5vw, 48px) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid var(--accent-wash-2);
  padding: 7px 13px 7px 11px; border-radius: 100px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.hero h1 .hero-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.hero .lede {
  margin-top: 22px; max-width: 30em;
  font-size: 19px; color: var(--ink-2); line-height: 1.6;
}
.hero .cta-row {
  margin-top: 34px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.hero .reassure {
  margin-top: 20px; font-size: 14px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.hero .reassure svg { flex: none; color: var(--good); }

/* The before/after card. This IS the pitch: rambling becomes a brief line. */
.transform {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.transform .pane { padding: 20px 22px; }
.transform .pane .tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 8px;
}
.transform .before {
  background: var(--surface-sunken);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  font-size: 15px; line-height: 1.62;
}
.transform .before .scribble { color: var(--ink-3); font-style: italic; }
.transform .arrow {
  display: grid; place-items: center; height: 40px;
}
.transform .arrow span {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-md);
}
.transform .after { padding-top: 6px; }
/* One-time entrance: the after doc rises in once the before pane finishes
   "typing". Default state is visible so no-motion/no-JS still reads fine. */
.transform .after.pre-anim { opacity: 0; transform: translateY(10px); }
.transform .after.rise-in {
  animation: afterRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes afterRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.transform .arrow span.pulse-once { animation: arrowPulse 0.5s ease; }
@keyframes arrowPulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .transform .after.pre-anim { opacity: 1; transform: none; }
  .transform .after.rise-in { animation-delay: 0ms !important; }
  .transform .arrow span.pulse-once { animation-delay: 0ms !important; }
}
.transform .after .doc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.transform .after .doc-head {
  background: var(--ink); color: #fff; padding: 12px 16px;
}
.transform .after .doc-head .k {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); font-weight: 700;
}
.transform .after .doc-head .v {
  font-family: var(--serif); font-size: 18px; font-weight: 600; margin-top: 2px;
}
.transform .after .doc-body { padding: 14px 16px; display: grid; gap: 10px; }
.transform .after .line { display: flex; gap: 10px; align-items: baseline; }
.transform .after .line .lab {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); width: 78px; flex: none;
}
.transform .after .line .val { font-size: 14px; color: var(--ink); }

/* ------------------------------------------------------------- buttons */
/* Consistency: two button roles only. Feedback: every button has hover +
   active + focus states, and labels say exactly what happens. */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  padding: 14px 22px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(36, 110, 250, 0.6);
}
.btn-primary:hover { background: var(--accent-press); box-shadow: 0 14px 26px -10px rgba(36, 110, 250, 0.7); }
.btn-ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn-ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.block { width: 100%; justify-content: center; }

/* ============================================================ INTAKE APP */
/* Usability: one question group per screen lowers the load on a person who
   may be anxious. Feedback: a progress rail shows exactly where they are and
   how much remains. */
.intake {
  max-width: 720px; margin: 0 auto;
  /* Framing: the intake page is exactly one viewport tall and top aligned, so
     the card is anchored near the top with a modest top margin rather than
     drifting toward the middle under a band of empty space. */
  padding: clamp(16px, 2vw, 24px) clamp(20px, 5vw, 40px) 80px;
}
.intake[hidden] { display: none; }

.progress {
  display: flex; align-items: center; gap: 12px; margin-bottom: 30px;
}
.progress .track {
  flex: 1; height: 6px; border-radius: 100px; background: var(--line);
  overflow: hidden;
}
.progress .track .fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), #4E8BFF);
  border-radius: 100px; width: 0%;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress .count {
  font-size: 13px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

/* A step is a card. Only one is visible at a time. */
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 44px);
  animation: stepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.step[hidden] { display: none; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step .kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink);
}
.step h2 {
  margin-top: 12px; font-size: clamp(24px, 3.4vw, 31px); letter-spacing: -0.03em;
}
.step .help {
  margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 42em;
}

/* Fields. Generous targets, calm borders, clear focus. */
.field { margin-top: 18px; }
.field > label {
  display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--ink);
}
.field .sub { font-weight: 500; color: var(--ink-3); font-size: 13.5px; margin-left: 6px; }

.control {
  width: 100%; font-family: inherit; font-size: 16.5px; color: var(--ink);
  background: var(--surface-sunken);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px 16px; line-height: 1.55;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.control::placeholder { color: var(--ink-3); }
.control:hover { border-color: var(--ink-3); }
.control:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
/* Visibility of the primary action: a shorter default keeps the tallest step,
   two stacked text areas, from pushing Next or Build my brief below the fold on
   common laptop heights. Still roomy, and the person can drag it taller. */
textarea.control { min-height: 104px; resize: vertical; }

/* The three priorities: numbered, because order is the point here. */
.priorities { display: grid; gap: 12px; margin-top: 8px; }
.priority-row { display: flex; align-items: center; gap: 12px; }
.priority-row .n {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-wash); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}

/* The fear step wears the warm register, setting it apart from clinical fields. */
.step.care { border-color: var(--care-line); }
.step.care .kicker { color: var(--care-ink); }
.step.care .control:focus {
  border-color: var(--care-ink);
  box-shadow: 0 0 0 4px var(--care-wash);
}
.care-note {
  margin-top: 20px; display: flex; gap: 12px; align-items: flex-start;
  background: var(--care-wash); border: 1px solid var(--care-line);
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 14.5px; color: var(--care-ink); line-height: 1.55;
}
.care-note svg { flex: none; margin-top: 2px; }

/* Nav row. Consistency: Back is always left, forward is always right. */
.step-nav {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.step-nav .spacer { flex: 1; }
.autosave {
  font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px;
}
.autosave svg { color: var(--good); }

/* ============================================================ GENERATING */
.generating {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: clamp(48px, 9vw, 96px) 24px;
}
.generating[hidden] { display: none; }
/* A small page assembling itself, one line per checklist item, instead of a
   generic spinner. Feedback: the visual mirrors exactly what the list says. */
.gen-skeleton {
  width: 108px; margin: 0 auto 26px; padding: 16px 15px;
  background: var(--accent-wash); border-radius: var(--r-lg);
  display: grid; gap: 9px;
  animation: skeletonGlow 1.8s ease-in-out infinite;
}
@keyframes skeletonGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36,110,250,0.28); }
  50% { box-shadow: 0 0 0 16px rgba(36,110,250,0); }
}
.gen-skeleton .sk-line, .gen-skeleton .sk-block {
  height: 8px; border-radius: 5px; background: var(--line-strong);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gen-skeleton .sk-line.short { width: 62%; }
.gen-skeleton .sk-block {
  height: 15px; margin-top: 2px; background: var(--care-line);
}
.gen-skeleton .sk-line.done, .gen-skeleton .sk-block.done { opacity: 1; transform: translateX(0); }
.gen-skeleton .sk-block.done { background: var(--care-ink); }
.generating h2 { font-size: 26px; letter-spacing: -0.03em; }
.generating p { margin-top: 12px; color: var(--ink-2); }
.gen-steps {
  margin: 30px auto 0; max-width: 320px; text-align: left; display: grid; gap: 12px;
}
.gen-steps li {
  list-style: none; display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--ink-3); font-weight: 600;
  transition: color 0.3s ease;
}
.gen-steps li .tick {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
  transition: all 0.3s ease;
}
.gen-steps li.done { color: var(--ink); }
.gen-steps li.done .tick { background: var(--good); border-color: var(--good); color: #fff; }

/* Error state. Direction, not apology: says what happened and how to fix it. */
.error-card {
  max-width: 560px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  padding: clamp(28px, 5vw, 44px); text-align: left;
}
.error-card[hidden] { display: none; }
.error-card .badge {
  width: 46px; height: 46px; border-radius: 13px;
  background: #FDECEC; color: var(--alert); display: grid; place-items: center; margin-bottom: 18px;
}
.error-card h2 { font-size: 23px; letter-spacing: -0.02em; }
.error-card p { margin-top: 10px; color: var(--ink-2); }
.error-card code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface-sunken); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 6px; font-size: 13.5px; color: var(--accent-ink);
}
.error-card .fix {
  margin-top: 18px; background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; font-size: 14.5px; color: var(--ink-2);
  line-height: 1.6;
}
.error-card .fix ol { margin: 8px 0 0; padding-left: 20px; }
.error-card .fix li { margin-top: 6px; }
.error-card .err-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================ THE BRIEF */
/* A document, not an app screen. Serif headings, clinical rhythm, sized to
   one printed page. Visual hierarchy is tuned for a doctor scanning in under
   a minute, not for the patient reading at leisure. */
.brief-shell {
  background: var(--paper);
  min-height: 100vh;
  padding: clamp(20px, 4vw, 44px) 16px 80px;
}
.brief-toolbar {
  max-width: 780px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.brief-toolbar .who {
  font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 9px;
}
.brief-toolbar .actions { display: flex; gap: 10px; }
.brief-toolbar .btn { padding: 11px 18px; font-size: 15px; }

.sheet {
  max-width: 780px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(30px, 5vw, 54px);
}

.sheet .sheet-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--ink);
}
.sheet .sheet-head .doc-brand {
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-ink);
}
.sheet .sheet-head .prepared {
  font-size: 12.5px; color: var(--ink-3); text-align: right; line-height: 1.5;
}
.sheet .sheet-head .prepared b {
  color: var(--ink-2); font-weight: 600;
  font-family: var(--serif);
}

/* Chief concern: the single most important line, in serif, large. */
.chief { margin-top: 26px; }
.chief .lab {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.chief h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.016em;
  font-size: clamp(29px, 4.4vw, 39px); line-height: 1.12; margin-top: 8px; color: var(--ink);
}

.block-lab .hint {
  font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-3); margin-left: 8px; font-size: 11.5px;
}

/* Priorities band: three cards across, the one place the brief uses width to
   restate the patient's own framing. Rank in serif ties it to the document. */
.priorities-band { margin-top: 30px; }
.priorities-band .cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px;
}
@media (max-width: 720px) { .priorities-band .cards { grid-template-columns: 1fr; } }
.pcard {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 10px;
  padding: 15px 16px 17px;
}
.pcard .rank {
  font-family: var(--serif); font-weight: 600; font-size: 22px;
  color: var(--accent-ink); line-height: 1;
}
.pcard .txt { margin-top: 8px; font-size: 14.5px; color: var(--ink); line-height: 1.42; }

/* Two column body: timeline reads as a spine, side facts sit beside it. */
.brief-grid {
  margin-top: 34px; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 44px);
}
@media (max-width: 720px) { .brief-grid { grid-template-columns: 1fr; } }

.block-lab {
  font-family: var(--sans);
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Timeline as a compact vertical spine. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 26px; }
.timeline li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.timeline li::after {
  content: ""; position: absolute; left: 8px; top: 16px; bottom: 0;
  width: 1.5px; background: var(--line-strong);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline .when {
  font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink);
}
.timeline .what { font-size: 14.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }

/* Side facts: medications and questions to ask. */
.factlist { list-style: none; margin: 0 0 24px; padding: 0; }
.factlist li {
  font-size: 14.5px; color: var(--ink); padding: 7px 0;
  border-bottom: 1px solid var(--line); line-height: 1.45;
}
.factlist li:last-child { border-bottom: 0; }
.factlist.qs li { padding-left: 20px; position: relative; color: var(--ink-2); }
.factlist.qs li::before {
  content: "?"; position: absolute; left: 0; top: 7px;
  color: var(--accent); font-weight: 800; font-size: 13px;
}

/* The signature block. The one place the document drops clinical voice. */
.matters {
  margin-top: 32px;
  background: var(--care-wash);
  border: 1px solid var(--care-line);
  border-left: 4px solid var(--care-ink);
  border-radius: var(--r-md);
  padding: 22px 26px;
}
.matters .lab {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--care-ink);
}
.matters p {
  font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink);
  margin-top: 8px; font-weight: 500;
}

.sheet-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; line-height: 1.5;
}

/* ---------------------------------------------------------------- print */
/* Usability under a printer: the brief must fall on a single clean page and
   drop everything that belongs to the app. */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; font-size: 12pt; }
  .topbar, .brief-toolbar, .no-print { display: none !important; }
  .brief-shell { padding: 0; background: #fff; }
  .sheet {
    max-width: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  .matters {
    background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    margin-top: 16px; padding: 14px 18px; page-break-inside: avoid;
  }
  .matters p { font-size: 13.5pt; }
  .timeline li::before { box-shadow: none; }
  a { color: var(--ink); text-decoration: none; }

  /* Compress vertical rhythm so the whole brief lands on one page. */
  .sheet-head { padding-bottom: 12px; }
  .chief { margin-top: 16px; }
  .chief h1 { font-size: 23pt; }
  .priorities-band { margin-top: 16px; }
  .pcard { padding: 11px 13px 12px; }
  .brief-grid { margin-top: 18px; gap: 26px; }
  .block-lab { padding-bottom: 8px; margin-bottom: 11px; }
  .timeline li { padding-bottom: 11px; }
  .factlist li { padding: 5px 0; }
  .sheet-foot { margin-top: 16px; page-break-inside: avoid; }
}

/* --------------------------------------------------------------- footer */
.site-foot {
  max-width: var(--wrap); margin: 0 auto; padding: 40px clamp(20px,5vw,48px) 60px;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }

/* ------------------------------------------------------ portfolio demo */
.demobar {
  height: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px; background: #101623; color: #fefefe;
  font-family: var(--sans);
}
.demobar .db-name { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; white-space: nowrap; }
.demobar .db-links { display: flex; gap: 18px; white-space: nowrap; }
.demobar a { color: #b9cef8; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.demobar a:hover, .demobar a:focus-visible { color: #fff; text-decoration: underline; }
.demonote {
  font-family: var(--sans); font-size: 12px; margin: 0; padding: 6px 16px;
  text-align: center; color: var(--muted, #5b6472);
  background: var(--wash, #f4f6fa); border-bottom: 1px solid var(--line, #e4e8ef);
}
.demo-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px;
}
.demo-picker-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, #5b6472); margin-right: 4px;
}
.demo-picker button {
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line, #e4e8ef); background: #fff; cursor: pointer;
}
.demo-picker button.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.ex-chip {
  display: inline-block; vertical-align: middle; margin-left: 10px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted, #5b6472);
  border: 1px solid var(--line, #e4e8ef); background: var(--wash, #f4f6fa);
}
@media print {
  .demobar, .demonote { display: none !important; }
}