/* ---------------------------------------------------------------------------
   ANGELICA — the design system.

   Bootstrap 5.3.3 is loaded locally, from the versioned `current` symlink, per
   the design doc (section 6.1) and the DDG standard. This file is the layer on
   top: it retints Bootstrap's own custom properties so components inherit the
   palette, and then adds the pieces Bootstrap does not have — the day sheet,
   the charting canvas, the record cards, the consent chrome.

   THE LOOK, and why it is this and not the usual med spa look.

   Aesthetics marketing runs on blush pink, rose gold and script type, and a
   CLINICAL system dressed that way quietly undermines the thing it is trying
   to say: that this is a medical record, held to a medical standard, in a
   vault the patient owns. So the practice's public face is warm and the
   clinical surfaces are quiet — bone paper, a deep eucalyptus that reads as
   calm rather than corporate, one warm clay accent, thin rules and no
   shadows. Instrument Serif carries the display type because a serif is what
   makes a page look considered rather than templated; IBM Plex Sans carries
   the prose and Plex Mono every number, date and reference, because a lot
   number read aloud in a recall needs to be unambiguous.

   THE FIVE STATUS COLOURS, and what they are allowed to mean:
     ok      #3C6B55  green  — signed, current, paid, attested, in the vault
     soon    #8A6A1B  amber  — a date running out, or waiting on a person
     gone    #A64B3F  red    — expired, refused, cancelled, void
     open    #3A5F86  blue   — in progress, staged, under review
     neutral #94918B  grey   — nothing yet

   AND THE RULE THEY ARE UNDER. These colour RECORDS AND APPOINTMENTS. They do
   not colour a patient. There is no red patient in this product: the closest
   thing — somebody whose Good Faith Exam lapsed — is a fact about a date, and
   the screen names the date.

   Soft blue + a dashed edge marks DEMO SCAFFOLDING only, and it is gated on
   DEMO_MODE in PHP so DEMO_MODE=0 removes the markup rather than hiding it.
   The invented patients are NOT marked: they are fake today and they stand in
   for real people on launch, and the screens showing them are the product.
--------------------------------------------------------------------------- */

:root {
  --brand:        #33544A;   /* deep eucalyptus */
  --brand-deep:   #1F332C;   /* the sidebar */
  --brand-mid:    #3E6459;
  --brand-ink:    #264038;
  --brand-soft:   rgba(51, 84, 74, .09);
  --accent:       #B0785F;   /* warm clay — used sparingly, on purpose */
  --accent-soft:  rgba(176, 120, 95, .12);

  --bg:        #FAF7F3;
  --paper:     #FFFFFF;
  --paper-2:   #FDFBF8;
  --ink:       #211E1B;
  --ink-2:     #3E3A35;
  --muted:     #63605A;
  --muted-2:   #837F78;
  --muted-3:   #A29D95;
  --line:      rgba(33, 30, 27, .11);
  --line-soft: rgba(33, 30, 27, .06);

  --sidebar:      #1F332C;
  --sidebar-ink:  #E9EFEB;
  --sidebar-link: #A8C4B9;

  --ok:      #3C6B55;  --ok-bg:      rgba(60, 107, 85, .12);
  --soon:    #8A6A1B;  --soon-bg:    rgba(138, 106, 27, .13);
  --gone:    #A64B3F;  --gone-bg:    rgba(166, 75, 63, .12);
  --open:    #3A5F86;  --open-bg:    rgba(58, 95, 134, .11);
  --neutral: #94918B;  --neutral-bg: rgba(148, 145, 139, .17);

  --swatch:  #E7E1D8;
  --placeholder: #BAB5AC;

  --demo:      #EDF3FA;
  --demo-edge: #9DBEE4;
  --demo-ink:  #3A5F86;

  --radius:    10px;
  --radius-lg: 14px;

  --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  /* Bootstrap inherits from these, so its buttons, forms, modals and toasts
     come out in the practice's colours without a single !important. */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--sans);
  --bs-primary: var(--brand);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-ink);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-font-monospace: var(--mono);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-ink); }

/* ---------------------------------------------------------------- shell -- */

.app { min-height: 100vh; display: flex; }

.side {
  width: 262px; flex: none;
  background: var(--sidebar); color: var(--sidebar-ink);
  padding: 24px 0 20px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.side__brand { padding: 0 24px 22px; display: block; color: inherit; }
.side__brand__n { font: 400 27px/1.1 var(--serif); letter-spacing: .01em; color: #fff; }
.side__brand__sub {
  font: 400 11.5px var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: rgba(233, 239, 235, .48); margin-top: 9px;
}

.side__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 11px; }
.side__link {
  padding: 10px 15px; border-radius: 7px; color: rgba(233, 239, 235, .76);
  font: 400 16.5px var(--sans); display: flex; align-items: center; gap: 10px;
}
.side__link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.side__link.is-on { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 500; }
.side__badge { margin-left: auto; font: 500 13px var(--mono); color: #E4B78E; }

.side__sep {
  margin: 15px 24px 9px; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font: 400 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(233, 239, 235, .4);
}

.side__foot { margin-top: auto; padding: 16px 24px 0; }
.side__me {
  margin: 4px 0 0; padding: 12px 15px; border-radius: 8px;
  background: rgba(255, 255, 255, .07); display: block; color: inherit;
}
.side__me__kind {
  font: 400 11px var(--mono); color: rgba(233, 239, 235, .46);
  letter-spacing: .07em; text-transform: uppercase;
}
.side__me__name { font: 500 15.5px var(--sans); margin-top: 3px; }
.side__me__out  { font: 400 13.5px var(--sans); color: var(--sidebar-link); margin-top: 4px; display: block; }
.side__me__out:hover { color: #fff; }

.side__mec { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 68px; flex: none; border-bottom: 1px solid var(--line);
  background: var(--paper); display: flex; align-items: center; gap: 16px;
  padding: 0 30px; position: sticky; top: 0; z-index: 40;
}
.topbar__search { flex: 1; max-width: 420px; }
.topbar__search .input { height: 42px; font-size: 16px; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar__avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  font: 600 14px var(--sans); color: var(--brand-ink); flex: none;
}
.lang-toggle {
  font: 500 13px var(--mono); letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  color: var(--muted); white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--brand); color: var(--brand); }

.content { flex: 1; padding: 30px; min-width: 0; max-width: 1800px; }

/* ------------------------------------------------------------ typography -- */

h1.pg, h2.pg { font: 400 36px/1.15 var(--serif); margin: 0; letter-spacing: .005em; }
h3.sec { font: 400 24px/1.2 var(--serif); margin: 0 0 4px; }
.pg-sub { font: 400 16px var(--sans); color: var(--muted-2); }
.pg-lede { font: 400 17px/1.6 var(--sans); color: var(--muted); margin: 6px 0 24px; max-width: 74ch; text-wrap: pretty; }
.pg-head { display: flex; align-items: baseline; gap: 15px; margin-bottom: 4px; flex-wrap: wrap; }

.microhead {
  font: 600 13px var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow {
  font: 500 12px var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted-3);
}

.mono { font-family: var(--mono); font-size: .92em; }
.muted   { color: var(--muted); }
.muted-2 { color: var(--muted-3); }
.xs { font-size: 14px; }
.sm { font-size: 15px; }
.grow { flex: 1; min-width: 0; }
.pretty { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

.t-ok   { color: var(--ok); }
.t-soon { color: var(--soon); }
.t-gone { color: var(--gone); }
.t-open { color: var(--open); }
.t-brand{ color: var(--brand); }
.t-accent { color: var(--accent); }

/* ---------------------------------------------------------------- cards -- */

.card-a {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card-a--flush { padding: 0; overflow: hidden; }
.card-a--brand { border-color: rgba(51, 84, 74, .28); }
.card-a--dark  { background: var(--sidebar); color: var(--sidebar-ink); border: none; padding: 26px; }
.card-a__head {
  display: flex; align-items: center; gap: 12px; padding: 15px 20px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.card-a__title { font: 500 17.5px var(--sans); }
.card-a__foot {
  padding: 13px 20px; border-top: 1px solid var(--line-soft);
  background: var(--paper-2); font: 400 14.5px/1.55 var(--sans); color: var(--muted);
  text-wrap: pretty;
}

.cols { display: flex; gap: 26px; align-items: flex-start; }
.cols__side { width: 420px; flex: none; display: flex; flex-direction: column; gap: 18px; }
.cols__side--sm { width: 360px; }
.cols__main { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row-a { display: flex; align-items: center; gap: 12px; }
.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: baseline; gap: 14px; }
.spread > :last-child { margin-left: auto; }

.tiles { display: flex; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.tile { flex: 1; min-width: 200px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 20px; }
.tile__label { font: 400 11.5px var(--mono); color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; }
.tile__n { font: 500 28px var(--mono); margin-top: 6px; }
.tile__sub { font: 400 14px var(--sans); color: var(--muted-2); margin-top: 3px; text-wrap: pretty; }

/* ---------------------------------------------------------------- lists -- */

.lst-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; min-width: 0; }
.lst__head {
  display: flex; align-items: center; padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  font: 600 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap;
}
.lst__row {
  display: flex; align-items: center; padding: 15px 22px;
  border-bottom: 1px solid var(--line-soft); color: inherit;
}
.lst__row:last-child { border-bottom: none; }
a.lst__row:hover { background: var(--paper-2); color: inherit; }
.lst__empty { padding: 32px 22px; color: var(--muted-2); font: 400 16px var(--sans); text-align: center; text-wrap: pretty; }

.cell { flex: none; }
.c-name { font: 500 17px var(--sans); }
.c-note { font: 400 14px var(--sans); color: var(--muted-2); margin-top: 2px; }

.tbl__sort { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.tbl__sort:hover, .tbl__sort.is-on { color: var(--ink); }
.tbl__sort__arr { font-size: 10px; }

/* ----------------------------------------------------------------- pills -- */

.pill {
  display: inline-block; font: 600 13px var(--mono); letter-spacing: .03em;
  padding: 4px 11px; border-radius: 5px; white-space: nowrap;
}
.pill.is-ok      { background: var(--ok-bg);      color: var(--ok); }
.pill.is-soon    { background: var(--soon-bg);    color: var(--soon); }
.pill.is-gone    { background: var(--gone-bg);    color: var(--gone); }
.pill.is-open    { background: var(--open-bg);    color: var(--open); }
.pill.is-neutral { background: var(--neutral-bg); color: var(--muted); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.is-ok { background: var(--ok); } .dot.is-soon { background: var(--soon); }
.dot.is-gone { background: var(--gone); } .dot.is-open { background: var(--open); }
.dot.is-neutral { background: var(--muted-3); }

/* the custody chip — a different vocabulary from the status pills, on purpose */
.chipx {
  display: inline-block; font: 500 12.5px var(--mono); letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted); background: var(--paper);
}
.chipx--ok { border-color: rgba(60, 107, 85, .4); color: var(--ok); background: rgba(60,107,85,.05); }

/* ------------------------------------------------------------- controls -- */

.btn-a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper);
  font: 500 16px var(--sans); color: var(--ink); white-space: nowrap;
}
.btn-a:hover { border-color: var(--brand); color: var(--brand); }
.btn-a--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-a--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn-a--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-a--accent:hover { filter: brightness(.93); color: #fff; }
.btn-a--danger { background: var(--paper); border-color: rgba(166,75,63,.5); color: var(--gone); }
.btn-a--danger:hover { background: var(--gone); border-color: var(--gone); color: #fff; }
.btn-a--sm { height: 36px; padding: 0 13px; font-size: 14.5px; }
.btn-a--lg { height: 58px; padding: 0 30px; font-size: 19px; border-radius: 10px; }
.btn-a--block { width: 100%; }
.btn-a[disabled], .btn-a.is-off { opacity: .45; pointer-events: none; }

.input, select.input, textarea.input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper);
  font: 400 16.5px var(--sans); color: var(--ink);
}
textarea.input { height: auto; padding: 11px 14px; resize: vertical; line-height: 1.55; }
.input:focus { outline: 2px solid rgba(51, 84, 74, .3); border-color: var(--brand); }

/* A placeholder is an EXAMPLE, never a value: pale, light and italic — three
   signals, so it cannot be mistaken for something somebody typed. Every field
   carries its own <label>, so the low contrast costs nothing. */
.input::placeholder { color: var(--placeholder); font-style: italic; }
select.input:has(option[value=""]:checked) { color: var(--placeholder); font-style: italic; }

label.lbl { display: block; font: 500 14.5px var(--sans); color: var(--ink-2); margin: 0 0 6px; }
.field { margin-bottom: 16px; }
.hint { font: 400 14px/1.5 var(--sans); color: var(--muted-2); margin-top: 5px; text-wrap: pretty; }

.check {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  cursor: pointer; margin-bottom: 10px;
}
.check:hover { border-color: var(--brand); }
.check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--brand); }
.check__t { font: 500 16.5px var(--sans); }
.check__d { font: 400 15px/1.55 var(--sans); color: var(--muted); margin-top: 4px; text-wrap: pretty; }
.check.is-on { border-color: var(--brand); background: rgba(51, 84, 74, .04); }

.flash { border-radius: var(--radius); padding: 13px 17px; margin-bottom: 16px; font: 400 16px var(--sans); }
.flash--ok  { background: var(--ok-bg);   color: var(--ok); }
.flash--err { background: var(--gone-bg); color: var(--gone); }

.note-a { border-radius: 8px; padding: 13px 16px; font: 400 15px/1.55 var(--sans); text-wrap: pretty; }
.note-a--plain { background: #F3F0EA; color: var(--muted); }
.note-a--ok    { background: var(--ok-bg);   color: var(--ok); }
.note-a--warn  { background: var(--soon-bg); color: var(--soon); }
.note-a--bad   { background: var(--gone-bg); color: var(--gone); }
.note-a--info  { background: var(--open-bg); color: var(--open); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 0 13px; border-radius: 17px;
  border: 1px solid var(--line); background: var(--paper);
  font: 500 13.5px var(--sans); color: var(--ink-2); white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip__n { font: 600 11.5px var(--mono); color: var(--muted-2); }
.chip.is-on .chip__n { color: rgba(255, 255, 255, .72); }

.hr-a { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

/* --------------------------------------------------------- MeCentral badge -- */

.mecb { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mecb__mark { margin-right: 3px; flex: none; }
.mecb__txt { font: 400 14px var(--sans); letter-spacing: .01em; }
.mecb__txt strong { font-weight: 600; }
.mecb--sm .mecb__txt { font-size: 12px; }
.mecb--lg .mecb__txt { font-size: 17px; }

.mec-note {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); padding: 16px 19px;
}
.mec-note p { margin: 9px 0 0; font: 400 15px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------------------------- day sheet -- */

.day { display: flex; flex-direction: column; gap: 10px; }
.appt {
  display: flex; gap: 16px; align-items: stretch;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; color: inherit;
}
.appt:hover { border-color: var(--brand); color: inherit; }
.appt__time {
  flex: none; width: 76px; font: 500 17px var(--mono); color: var(--ink);
  border-right: 1px solid var(--line-soft); padding-right: 14px;
}
.appt__time small { display: block; font: 400 12px var(--mono); color: var(--muted-3); margin-top: 2px; }
.appt__body { flex: 1; min-width: 0; }
.appt__who { font: 500 17.5px var(--sans); }
.appt__what { font: 400 14.5px var(--sans); color: var(--muted); margin-top: 2px; }
.appt__side { flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.appt.is-past { opacity: .62; }
.appt.is-gap { border-left: 3px solid var(--soon); }

/* --------------------------------------------------------------- records -- */

.rec {
  display: flex; align-items: center; gap: 13px; padding: 13px 0;
  border-bottom: 1px solid var(--line-soft); color: inherit;
}
.rec:last-child { border-bottom: none; }
.rec:hover { color: var(--brand); }
.rec__t { font: 500 16px var(--sans); }
.rec__s { font: 400 13.5px var(--sans); color: var(--muted-2); margin-top: 2px; }

/* the ownership strip — where a record actually lives, said once per screen */
.own-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid rgba(51, 84, 74, .25); background: rgba(51, 84, 74, .04);
  border-radius: var(--radius); padding: 13px 17px; margin-bottom: 18px;
}
.own-strip__t { font: 400 15px/1.55 var(--sans); color: var(--brand-ink); text-wrap: pretty; }

/* --------------------------------------------------------------- guard -- */
/* The booking guard's readout. A block is never a bare no — it names the
   thing that is missing and offers the one action that fixes it. */

.guard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.guard__row { display: flex; gap: 13px; align-items: flex-start; padding: 14px 17px; border-bottom: 1px solid var(--line-soft); }
.guard__row:last-child { border-bottom: none; }
.guard__mark { flex: none; width: 22px; font: 600 15px var(--mono); }
.guard__t { font: 500 16px var(--sans); }
.guard__w { font: 400 14.5px/1.5 var(--sans); color: var(--muted); margin-top: 3px; text-wrap: pretty; }
.guard__do { margin-left: auto; flex: none; }

/* -------------------------------------------------------------- charting -- */

.chart-grid { display: flex; gap: 22px; align-items: flex-start; }
.chart-main { flex: 1; min-width: 0; }
.chart-side { width: 380px; flex: none; }

.canvas-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.canvas-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.canvas-tools { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line-soft); background: var(--paper-2); flex-wrap: wrap; }
.swatch-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch-btn.is-on { border-color: var(--ink); }

.prod-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.prod-row .field { margin-bottom: 0; }

/* ------------------------------------------------------------------ demo -- */

.demo-bar {
  background: var(--demo); border-bottom: 1px dashed var(--demo-edge);
  color: var(--demo-ink); font: 400 14px var(--sans);
  padding: 8px 30px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
}
/* margin-right as well as the flex gap: an engine without `gap` support butts
   the tag against the sentence, and this bar has to stay legible in whatever
   is rendering it, including a print-to-image pipeline. */
.demo-tag {
  font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase;
  background: var(--demo-ink); color: #fff; border-radius: 4px; padding: 3px 7px;
  flex: none; margin-right: 4px;
}
.demo-block {
  background: var(--demo); border: 1.5px dashed var(--demo-edge);
  border-radius: var(--radius); padding: 16px 19px; margin: 15px 0;
}
.demo-block__flag { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--demo-ink); font: 500 15px var(--sans); }

/* ============================================================================
   PATIENT-FACING SURFACES
   ============================================================================
   The public site, the booking flow, the forms and the portal are a different
   product from the clinical portal and are typed like one: bigger, quieter,
   one idea per screen, no sidebar, no density. Somebody is reading these on a
   phone, possibly in a car park, five minutes before an appointment.
   ------------------------------------------------------------------------- */

.pub { min-height: 100vh; display: flex; flex-direction: column; }
.pub__bar {
  display: flex; align-items: center; gap: 18px; padding: 20px 34px;
  border-bottom: 1px solid var(--line); background: var(--paper);
  position: sticky; top: 0; z-index: 30;
}
.pub__mark { font: 400 25px/1 var(--serif); color: var(--brand-ink); letter-spacing: .01em; }
.pub__nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.pub__nav a { font: 400 15.5px var(--sans); color: var(--muted); }
.pub__nav a:hover { color: var(--brand); }

.pub__body { flex: 1; }
.wrapx { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrapx--narrow { max-width: 700px; }

.hero { padding: 74px 0 56px; }
.hero__eyebrow { font: 500 12.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hero__h { font: 400 60px/1.06 var(--serif); margin: 18px 0 0; letter-spacing: -.005em; max-width: 16ch; }
.hero__p { font: 400 20px/1.62 var(--sans); color: var(--muted); margin: 20px 0 30px; max-width: 56ch; text-wrap: pretty; }

.svc {
  display: flex; gap: 18px; align-items: baseline; padding: 20px 0;
  border-bottom: 1px solid var(--line-soft); color: inherit;
}
.svc:last-child { border-bottom: none; }
.svc__n { font: 400 22px/1.25 var(--serif); }
.svc__d { font: 400 15.5px/1.55 var(--sans); color: var(--muted); margin-top: 5px; max-width: 62ch; text-wrap: pretty; }
.svc__meta { flex: none; text-align: right; }
.svc__price { font: 500 18px var(--mono); }
.svc__dur { font: 400 13.5px var(--mono); color: var(--muted-3); margin-top: 3px; }

.big-title { font: 400 42px/1.12 var(--serif); margin: 20px 0 10px; letter-spacing: .005em; }
.big-lede  { font: 400 20px/1.6 var(--sans); color: var(--muted); margin: 0 0 28px; text-wrap: pretty; }
.big-step  { font: 400 14px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }

.step-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 30px; margin-bottom: 18px;
}
.step-card h2 { font: 400 28px/1.2 var(--serif); margin: 0 0 10px; }
.step-card p  { font: 400 17.5px/1.62 var(--sans); color: var(--muted); margin: 0 0 15px; text-wrap: pretty; }
.step-card p:last-child { margin-bottom: 0; }

.rail { display: flex; gap: 8px; margin: 0 0 24px; }
.rail__seg { height: 5px; flex: 1; border-radius: 3px; background: var(--swatch); }
.rail__seg.is-done { background: var(--brand); }
.rail__seg.is-now  { background: var(--brand); opacity: .45; }

/* slot picker */
.slots { display: flex; flex-wrap: wrap; gap: 9px; }
.slot {
  min-width: 88px; height: 46px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper);
  font: 500 16px var(--mono); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.slot:hover { border-color: var(--brand); color: var(--brand); }
.slot.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.slot-day { margin-bottom: 22px; }
.slot-day__d { font: 500 15px var(--sans); color: var(--ink-2); margin-bottom: 9px; }

/* the consent reading surface — long text somebody has to actually read */
.clauses {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; font: 400 16.5px/1.7 var(--sans); color: var(--ink-2);
  white-space: pre-wrap; max-height: 46vh; overflow-y: auto; text-wrap: pretty;
}

/* the portal's record cards */
.myrec {
  display: flex; align-items: center; gap: 15px; padding: 18px 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 11px; color: inherit;
}
.myrec:hover { border-color: var(--brand); color: inherit; }
.myrec__t { font: 500 18px var(--sans); }
.myrec__s { font: 400 14.5px var(--sans); color: var(--muted-2); margin-top: 3px; }

.access-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  margin-bottom: 11px;
}
.access-row__who { font: 500 17.5px var(--sans); }
.access-row__why { font: 400 15px/1.55 var(--sans); color: var(--muted); margin-top: 4px; text-wrap: pretty; }

/* ---------------------------------------------------------- the reviewer -- */

.review { max-width: 820px; margin: 0 auto; padding: 30px 22px 70px; }
.review__head {
  display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap;
}
.countdown {
  font: 500 14px var(--mono); letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px; background: var(--soon-bg); color: var(--soon);
  white-space: nowrap;
}
.countdown.is-close { background: var(--gone-bg); color: var(--gone); }

.chartview { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.chartview__sec { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.chartview__sec:last-child { border-bottom: none; }
.chartview__k { font: 600 12px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 7px; }
.chartview__v { font: 400 16.5px/1.6 var(--sans); white-space: pre-wrap; text-wrap: pretty; }
.chartview img { max-width: 100%; border-radius: 8px; display: block; }

/* the code + QR block */
.codeblk {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 28px; background: var(--paper);
  border: 1px solid rgba(51, 84, 74, .3); border-radius: var(--radius-lg);
}
.codeblk__qr { width: 240px; height: 240px; display: block; }
.codeblk__qr img { width: 100%; height: 100%; display: block; }
.codeblk__url {
  font: 500 18px var(--mono); letter-spacing: .03em; color: var(--brand-ink);
  word-break: break-all; text-align: center;
}
.codeblk__hint { font: 400 15px/1.55 var(--sans); color: var(--muted-2); text-align: center; max-width: 44ch; text-wrap: pretty; }

/* ---------------------------------------------------------------- signin -- */

.signin { max-width: 700px; margin: 54px auto; padding: 0 24px; }
.persona {
  display: flex; align-items: center; gap: 16px; padding: 16px 19px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; margin-bottom: 10px;
}
.persona:hover { border-color: var(--brand); color: inherit; }
.persona__avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--brand-soft); flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 600 16px var(--sans); color: var(--brand-ink);
}

/* ------------------------------------------------------------- utilities -- */

.right { text-align: right; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }

@media (max-width: 1180px) {
  .cols, .chart-grid { flex-direction: column; }
  .cols__side, .cols__side--sm, .chart-side { width: auto; }
}
@media (max-width: 900px) {
  .side { display: none; }   /* the clinical portal is a desk and tablet tool */
  .content { padding: 18px; }
  .topbar { padding: 0 18px; }
  .hero { padding: 46px 0 34px; }
  .hero__h { font-size: 42px; }
  .hero__p { font-size: 18px; }
  .big-title { font-size: 34px; }
  .step-card { padding: 22px 20px; }
  .pub__bar { padding: 16px 20px; }
  .codeblk__qr { width: 200px; height: 200px; }
  .svc { flex-direction: column; gap: 8px; }
  .svc__meta { text-align: left; }
}

@media print {
  .side, .topbar, .demo-bar, .btn-a, .pub__bar { display: none !important; }
  body { background: #fff; }
  .card-a, .lst-wrap, .chartview { border-color: #ccc; }
}