/* ==========================================================================
   SCMH concept demonstration — public.css
   The public shell: screens 1–6 and 29. Cream ground, Fraunces display, pill
   buttons, generous rhythm. This is the house style with the palette
   re-anchored to SCMH. The clinical shell is deliberately not this.
   ========================================================================== */

/* --------------------------------------------------------------- 1. layout */
main{ display:block; }
section{ padding:clamp(2rem,5vw,3.5rem) 0; }
section.band{ background:var(--pub-band); }
section.tight{ padding-top:1.5rem; }
.prose>*:last-child{ margin-bottom:0; }
.grid{ display:grid; gap:var(--gap); }
.g2{ grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); }

/* The page head used by screens 2–6: h1, chips, lead, a rule under it. */
.phead{ padding:clamp(1.75rem,4vw,3rem) 0 clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid var(--pub-line); }
.phead h1{ margin-bottom:.3em; }
.phead .lead{ font-size:1.12rem; max-width:46rem; }

/* ----------------------------------------------------------------- 2. hero */
.hero{ background:var(--pub-ground); padding:clamp(2rem,5vw,3.75rem) 0 clamp(2rem,5vw,3.25rem);
  border-bottom:1px solid var(--pub-line); }
.hero .wrap{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (min-width:64rem){
  .hero .wrap{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; }
}
.hero h1{ margin-bottom:.35em; }
.hero h1 .accent{ color:var(--pub-accent); display:block; }
.hero p.lead{ font-size:1.15rem; max-width:36rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.6rem 0 0; }

/* The checkmark affordance list. The tick is aria-hidden and each item carries
   a visually-hidden "included:" so nothing depends on the glyph. */
/* The house puts a photograph in the hero's second column. Rule 29 forbids a
   stock photograph of a person, and no SCMH photography is ours to use, so the
   affordance list becomes the panel instead of decorating the empty space. */
.ticks{ list-style:none; margin:1.6rem 0 0; padding:1.25rem 1.4rem; display:grid; gap:.85rem;
  background:var(--pub-card); border:1px solid var(--pub-line-2);
  border-top:4px solid var(--gold); border-radius:var(--r-lg); }
@media (min-width:64rem){ .ticks{ margin-top:0; } }
.ticks li{ display:flex; align-items:flex-start; gap:.65rem; max-width:34rem;
  font-size:.97rem; color:var(--ink); }
.ticks .tick{ flex:0 0 auto; width:1.35rem; height:1.35rem; margin-top:.12rem;
  border-radius:50%; background:var(--pub-band); border:1px solid var(--line-mean-cream);
  color:var(--brand); display:grid; place-items:center; font-size:.8rem; font-weight:700; }

/* --------------------------------------------------------------- 3. cards */
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); }
.cards li{ max-width:none; }
.card{
  display:flex; flex-direction:column; height:100%;
  background:var(--pub-card); color:var(--ink);
  border:1px solid var(--pub-line-2);
  border-left:3px solid var(--brand-3);   /* the identifying boundary: 7.93:1 on the
                                             page ground, 8.48:1 on the card fill.
                                             The hairline alone is 1.29:1 and could
                                             not carry it. */
  border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.4vw,1.6rem);
  min-height:44px;
}
a.card:hover{ border-color:var(--brand); border-left-color:var(--brand-3);
  box-shadow:var(--e1); }
.card .num{ font-size:.78rem; font-weight:700; letter-spacing:.1em;
  color:var(--gold); margin:0 0 .35rem; }
.card h3,.card .ct{ font-family:var(--display); font-weight:600; font-size:1.22rem;
  margin:0 0 .45rem; letter-spacing:-.015em; color:var(--ink); line-height:1.2;
  display:block; }
a.card:hover .ct,a.card:hover h3{ color:var(--brand); text-decoration:underline; }
.card p{ color:var(--ink-2); font-size:.97rem; margin:0 0 .85rem; max-width:34rem; }
.card .go{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--pub-line);
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); display:flex; align-items:center; gap:.4rem; }

/* --------------------------------------------------------------- 4. panels */
.note{
  border:1px solid var(--pub-line-2); border-left:4px solid var(--gold);
  background:var(--pub-card); border-radius:var(--r);
  padding:1.05rem 1.2rem; margin:0 0 1.5rem;
}
.note>*:last-child{ margin-bottom:0; }
.note h2,.note h3{ font-family:var(--display); font-size:1.15rem; margin-bottom:.4rem; }

/* The honest-magnitude callout on screen 2: accent-soft ground, gold left rule. */
.callout{
  background:var(--accent-soft); border:1px solid var(--pub-line-2);
  border-left:4px solid var(--gold); border-radius:var(--r);
  padding:1.15rem 1.3rem; margin:0 0 2rem;
}
.callout>*:last-child{ margin-bottom:0; }
.callout p{ max-width:44rem; }

blockquote{
  border-left:4px solid var(--gold); margin:0 0 1.5rem; padding:.2rem 0 .2rem 1.15rem;
}
blockquote p{ font-size:1.05rem; }
blockquote cite{ display:block; font-style:normal; font-size:.85rem; color:var(--ink-2);
  margin-top:.5rem; }
blockquote .caveat{ font-size:.85rem; color:var(--ink-2); margin-top:.4rem; max-width:44rem; }

/* --------------------------------------------------------------- 5. figures
   Big numerals. Never colour-only: each carries its full sentence beside it. */
.figs{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)); }
.figs li{ max-width:none; background:var(--pub-card);
  border:1px solid var(--pub-line-2); border-top:4px solid var(--brand-3);
  border-radius:var(--r-lg); padding:1.15rem 1.25rem; }
.figs .n{ font-family:var(--display); font-size:2.6rem; font-weight:600;
  color:var(--brand); line-height:1.02; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; display:block; }
.figs .l{ color:var(--ink-2); font-size:.95rem; margin:.5rem 0 0; max-width:none; }

.srcline{ font-family:var(--mono); font-size:.8125rem; color:var(--ink-2);
  max-width:none; margin:0 0 2rem; }

/* ------------------------------------------------------------ 6. refusals
   Screen 3 is a list of promises and should look like one: no icons, no
   colour beyond --ink and one gold rule. */
.refusals{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.refusals li{ max-width:none; }
.refusals .refusal h3{ font-family:var(--display); font-size:1.22rem; margin-bottom:.45rem; }
.refusals .refusal{ border-left:4px solid var(--gold); margin:0; }

/* --------------------------------------------------------------- 7. sign in */
.signin{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap);
  justify-items:center; }
.signin-card{
  width:min(var(--measure),100%); background:var(--pub-card);
  border:1px solid var(--pub-line-2); border-radius:var(--r-lg);
  box-shadow:var(--e1); padding:clamp(1.25rem,4vw,2rem);
}
.signin-card .mark{ margin:0 auto 1rem; }
.signin-card h1{ font-size:2rem; text-align:center; margin-bottom:1rem; }
.field{ margin:0 0 1.25rem; }
.field label{ display:block; font-weight:600; margin-bottom:.35rem; font-size:.95rem; }
input[type=text],input[type=password]{
  font:inherit; font-family:var(--sans); width:100%; padding:.7rem .75rem;
  min-height:48px; border:1px solid var(--line-mean-cream); border-radius:var(--r);
  background:var(--pub-card); color:var(--ink);
}
input[readonly]{ background:var(--pub-band); color:var(--ink-2); }
.signin-card .btn{ width:100%; }
.disclosure{
  width:min(var(--measure),100%); border:1px solid var(--line-mean-cream);
  border-radius:var(--r-lg); padding:clamp(1.1rem,3vw,1.6rem);
}
.disclosure h2{ font-size:1.3rem; }

/* ------------------------------------------------------------- 8. about */
.dl-block{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.1rem;
  margin:0 0 1.5rem; max-width:46rem; }
.dl-block dt{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--ink-2); padding-top:.2rem; }
.dl-block dd{ margin:0; }
@media (max-width:40rem){
  .dl-block{ grid-template-columns:1fr; gap:.15rem; }
  .dl-block dd{ margin-bottom:.8rem; }
}
.numlist{ counter-reset:n; list-style:none; margin:0 0 1.5rem; padding:0; }
.numlist li{ counter-increment:n; position:relative; padding-left:2.4rem;
  margin-bottom:.8rem; max-width:44rem; }
.numlist li::before{ content:counter(n); position:absolute; left:0; top:.05rem;
  width:1.7rem; height:1.7rem; border-radius:50%; background:var(--pub-band);
  border:1px solid var(--line-mean-cream); color:var(--brand);
  font-size:.8rem; font-weight:700; display:grid; place-items:center;
  font-variant-numeric:tabular-nums; }

/* Screen 5's [ES-REVIEW] register, and the mark that goes with it. */
[data-es-review="1"]{ text-decoration:none; }
:root[data-esmarks="on"] [data-es-review="1"]{
  text-decoration:underline; text-decoration-style:dotted;
  text-decoration-thickness:2px; text-decoration-color:var(--gold-mark);
  text-underline-offset:.2em;
}

/* --------------------------------------------------------- 9. closing band */
.closing{ background:var(--pub-band); border-top:1px solid var(--pub-line); }
.closing p{ font-size:1.02rem; max-width:46rem; }

/* ------------------------------------------- 10. the public record
   The board-document index and the board roster. Both are built from the
   hospital's own published record; nothing here is synthetic, so nothing
   here carries the synthetic-record treatment. */
.finding{border-left:4px solid var(--accent)}
.finding h2{margin-top:0}
.measured{font-family:var(--mono);font-size:.82rem;color:var(--ink-2);
  margin-bottom:0;padding-top:.5rem;border-top:1px solid var(--line)}

.year{margin:2.4rem 0 0}
.year>h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--line-2);
  font-family:var(--mono);font-size:1.05rem;letter-spacing:.04em}
.year-sum{font-family:var(--mono);font-size:.78rem;font-weight:400;
  color:var(--ink-2);letter-spacing:.02em}

.docs{list-style:none;margin:0;padding:0}
/* base.css caps p/li/dd at the reading measure, which is right for prose and
   wrong for a data row: these are records, not sentences. */
.doc,.member{max-width:none}
.doc{display:grid;gap:.15rem 1rem;padding:.75rem .9rem;
  grid-template-columns:11.5rem 6.5rem minmax(12rem,1fr) auto;
  align-items:baseline;border-bottom:1px solid var(--line)}
.doc:hover{background:var(--pub-card)}
/* A document nobody can read is marked on the row, not only in a legend —
   colour is never the only signal: the word "Image only" carries it too. */
.doc-img{background:color-mix(in srgb,var(--gold) 9%,transparent);
  box-shadow:inset 3px 0 0 var(--gold)}
.doc-img:hover{background:color-mix(in srgb,var(--gold) 15%,transparent)}
.doc-when{font-weight:600}
.doc-kind,.doc-detail{color:var(--ink-2);font-size:.88rem}
.doc-state{display:flex;flex-direction:column;gap:.1rem}
.state{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;
  font-size:.88rem}
.state .lg{flex:none}
.state.img{color:var(--accent)}
.doc-links{display:flex;flex-direction:column;gap:.2rem;text-align:right;
  font-size:.88rem}
.doc-links a{white-space:nowrap}
.published{font-weight:600}
.published svg{vertical-align:-2px}

.members{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.member{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;
  background:var(--pub-card);border:1px solid var(--pub-line);
  border-top:3px solid var(--brand);border-radius:var(--r)}
.mname{font-family:var(--display);font-size:1.12rem;font-weight:600}
.mrole{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.mcontact{font-size:.86rem;word-break:break-word}

@media (max-width:820px){
  .doc{grid-template-columns:1fr auto;gap:.3rem .8rem}
  .doc-when{grid-column:1}
  .doc-kind{grid-column:2;text-align:right}
  .doc-state,.doc-links{grid-column:1/-1}
  .doc-links{flex-direction:row;gap:1rem;text-align:left}
}

/* --------------------------------------- 11. the hospital's own information
   Service lines and patient-information pages, rebuilt bilingually from what
   the hospital publishes. Facts are theirs; the prose and the layout are ours. */
.svcs,.pis{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.svc,.pi{max-width:none;display:flex;flex-direction:column;gap:.4rem;
  padding:1.1rem 1.2rem;background:var(--pub-card);border:1px solid var(--pub-line);
  border-top:3px solid var(--brand);border-radius:var(--r)}
.svc h3,.pi h3{margin:0;font-family:var(--display);font-size:1.14rem;line-height:1.25}
.pi p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:none}
.fact{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--ink-2)}
.fact .lg{flex:none;color:var(--brand)}
.always{align-self:flex-start;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;padding:.15rem .5rem;
  border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);
  color:var(--brand)}
/* Whether a document exists in Spanish is a fact about the hospital's site, so
   it is stated in words. The colour only repeats what the words already say. */
.es-ok,.es-no{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;align-self:flex-start}
.es-ok{color:var(--brand)}
.es-no{color:var(--accent)}
.svc-src{margin-top:auto;padding-top:.5rem;font-size:.88rem;font-weight:600}
.svc-src svg{vertical-align:-2px}

/* ------------------------------------------- 12. the record, and the audit
   The board minutes published as text, and the accessibility statement. */
.mitem{margin:1.8rem 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.mitem>h3{margin:0 0 .6rem;font-family:var(--display);font-size:1.28rem;
  display:flex;gap:.65rem;align-items:baseline}
.inum{font-family:var(--mono);font-size:.82rem;color:var(--ink-2);flex:none;
  min-width:1.6rem}
.noaction{font-size:.9rem;color:var(--ink-2);font-style:italic}
.motion{margin:.9rem 0 0;padding:.85rem 1rem;background:var(--pub-card);
  border-left:3px solid var(--brand);border-radius:0 var(--r) var(--r) 0}
.motion p{margin:0;max-width:none}
.mline{font-size:.93rem}
.mlab{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.mout{margin-top:.35rem!important;font-weight:600}

/* A real table: the member's name is the row header, and the vote is a word.
   That is what makes a screen reader say "Elisa Pena, Vote, No". Row order is
   fixed and is never sorted by how people voted. */
.votes{width:100%;max-width:34rem;border-collapse:collapse;margin:.9rem 0 0;
  font-size:.94rem}
.votes caption{text-align:left;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:.4rem}
.votes th,.votes td{text-align:left;padding:.45rem .7rem;
  border-bottom:1px solid var(--line)}
.votes thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--line-2)}
.votes tbody th{font-weight:600}
.votes tfoot th,.votes tfoot td{border-bottom:none;padding-top:.6rem;font-weight:600}

.who{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:1rem 0 0}
.who h3{margin:0 0 .5rem;font-size:1rem}
.people{list-style:none;margin:0;padding:0}
.people li{max-width:none;padding:.3rem 0;border-bottom:1px solid var(--line)}
.pname{font-weight:600}
.prole{display:block;font-size:.84rem;color:var(--ink-2)}

.measures{margin:1.2rem 0 0}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--line)}
.mrow dt{max-width:none}
.mrow dd{margin:0;max-width:none}
.mrow .num{font-family:var(--mono);font-weight:600;font-size:1.02rem}
.plainlist{margin:1rem 0 0;padding-left:1.2rem}
.plainlist li{margin-bottom:.45rem}

/* ------------------------------------------- 13. the hospital front door
   The home page is the hospital's, not the pitch's. Emergency information is
   the one thing on it that never has to be looked for. */
.hero-hosp .wrap{align-items:start}
.emergency{padding:1.2rem 1.3rem;background:var(--pub-card);
  border:1px solid var(--pub-line);border-top:4px solid var(--accent);
  border-radius:var(--r)}
.emergency h2{margin:0 0 .5rem;font-family:var(--display);font-size:1.3rem;
  color:var(--accent)}
.emergency p{font-size:.95rem;margin:0 0 .5rem;max-width:none}
.btn-em{display:inline-block;margin-top:.4rem;padding:.6rem 1.1rem;
  font-family:var(--mono);font-size:1.16rem;font-weight:600;letter-spacing:.02em;
  /* Never #fff here. In dark mode --accent is re-derived to a light red, and
     white on it measured 2.8:1. --paper inverts with the theme, so this pair
     holds in both: 7.01:1 light, 5.93:1 dark, 6.37:1 dark high-contrast. */
  color:var(--paper);background:var(--accent);border-radius:var(--r);
  text-decoration:none}
.btn-em:hover{text-decoration:underline}

.doors{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.door{max-width:none;padding:1.1rem 1.2rem;background:var(--pub-card);
  border:1px solid var(--pub-line);border-left:3px solid var(--brand);
  border-radius:var(--r)}
.door h3{margin:0 0 .35rem;font-family:var(--display);font-size:1.16rem}
.door p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:none}

.band{background:var(--pub-band);padding:2.2rem 0;margin:2.4rem 0}
/* NB: .always is already the "Always open" pill on a service card. This list
   needs its own name, or every item inherits a pill. */
.openlist{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.openlist li{max-width:none;display:flex;justify-content:space-between;gap:.8rem;
  align-items:baseline;padding:.55rem .85rem;background:var(--paper);
  border:1px solid var(--pub-line);border-radius:var(--r);
  text-transform:none;letter-spacing:normal}
.ao-name{font-weight:600;font-size:.95rem;font-family:inherit;text-transform:none}
.ao-tel{font-family:var(--mono);font-size:.86rem;white-space:nowrap}

.locs{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.loc{max-width:none;display:flex;flex-direction:column;gap:.35rem;
  padding:1.1rem 1.2rem;background:var(--pub-card);border:1px solid var(--pub-line);
  border-top:3px solid var(--gold-mark);border-radius:var(--r)}
.loc h3{margin:0;font-family:var(--display);font-size:1.12rem}
.loc p{margin:0;max-width:none;font-size:.92rem}
.addr{color:var(--ink-2)}
.loc-hours{font-size:.88rem!important;color:var(--ink-2)}
.loc-tel{font-family:var(--mono);font-weight:600}

.jobs{margin:1rem 0 1.2rem;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:.5rem}
.jobs li{max-width:none;padding:.35rem .8rem;background:var(--paper);
  border:1px solid var(--pub-line);border-radius:999px;font-size:.9rem}

/* The demonstration is disclosed on its own ground, not whispered in a footer. */
.demo-band{background:var(--app-band);padding:2.4rem 0;margin-top:2.8rem;
  border-top:3px solid var(--brand)}
.demo-band h2{margin:.2rem 0 .8rem;font-family:var(--display);font-size:1.7rem}
.demo-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ------------------------------------------- 14. icons, cards, dashboards
   One icon grid, one card shape, one table. Every state is a word first; the
   icon and the colour repeat it so the meaning survives greyscale and CVD. */
.ic{flex:none;vertical-align:-.15em}

.facs,.jobcards,.roles,.signins{list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;gap:1rem}
.facs{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.jobcards{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.roles{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.signins{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr))}

.fac,.job,.role,.signin-door{max-width:none;background:var(--pub-card);
  border:1px solid var(--pub-line);border-radius:var(--r);padding:1.2rem 1.3rem}
.fac{display:flex;flex-direction:column;gap:.4rem;border-top:3px solid var(--brand)}
.fac-ic,.role-ic,.door-ic{display:inline-flex;color:var(--brand-3)}
.fac h3,.role h3,.signin-door h3{margin:.2rem 0 .1rem;font-family:var(--display);
  font-size:1.16rem}
.fac p{margin:0;max-width:none;font-size:.93rem}
.fac-hours{color:var(--ink-2);font-size:.88rem!important}
.fac-body{padding-top:.3rem}

.job{display:flex;gap:.85rem;align-items:flex-start;border-left:3px solid var(--brand)}
.job-ic{color:var(--brand-3);padding-top:.15rem}
.job h3{margin:0;font-size:1.02rem;font-family:var(--display)}
.job-dept{margin:.15rem 0 0;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.cta-row{margin-top:1.4rem}

.role{display:flex;flex-direction:column;gap:.35rem;border-top:3px solid var(--gold-mark)}
.role p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:none}

.signin-door{display:flex;flex-direction:column;gap:.5rem;
  border-top:4px solid var(--brand-3)}
.signin-door p{max-width:none;font-size:.94rem}
.door-list{margin:.2rem 0 .6rem;padding-left:1.1rem}
.door-list li{font-size:.9rem;color:var(--ink-2);margin-bottom:.2rem;max-width:none}
.signin-door .btn{align-self:flex-start}

/* ---- dashboards */
.tiles{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.tile{max-width:none;display:flex;flex-direction:column;gap:.15rem;
  padding:1rem 1.1rem;background:var(--pub-card);border:1px solid var(--pub-line);
  border-left:3px solid var(--brand-3);border-radius:var(--r)}
/* clinical numerals in mono: Public Sans has no slashed zero */
.tile-v{font-family:var(--mono);font-size:1.7rem;font-weight:600;line-height:1.1;
  color:var(--brand)}
.tile-l{font-weight:600;font-size:.94rem}
.tile-s{font-size:.83rem;color:var(--ink-2)}

.scroller{overflow-x:auto;margin:1.6rem 0 0}
.work{width:100%;border-collapse:collapse;font-size:.94rem;min-width:34rem}
.work caption{text-align:left;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:.5rem}
.work th,.work td{text-align:left;padding:.55rem .7rem;
  border-bottom:1px solid var(--line);vertical-align:top}
.work thead th{font-family:var(--mono);font-size:.71rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--line-2)}
.work tbody th{font-weight:600}
.work .num{font-family:var(--mono)}
.syn{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);font-weight:400}

.chip-state{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font-size:.85rem;font-weight:600;padding:.15rem .5rem;border-radius:var(--r);
  border:1px solid currentColor}
.s-ready{color:var(--brand-3)}
.s-part{color:var(--gold)}
.s-none,.s-due{color:var(--accent)}
.s-done{color:var(--brand)}
.s-wait{color:var(--gold)}

.refusal-box{display:flex;gap:.7rem;align-items:flex-start;margin:1.8rem 0 0;
  padding:1rem 1.2rem;background:var(--paper);border:1px solid var(--line-mean-cream);
  border-left:3px solid var(--ink-2);border-radius:var(--r);color:var(--ink)}
.refusal-box p{margin:0;max-width:none;font-size:.94rem}
.refusal-box .ic{color:var(--ink-2);margin-top:.15rem}
.resets{margin-top:1.8rem;font-size:.85rem;color:var(--ink-2)}
.screen-head .lead{margin-top:.6rem}

/* ---- numbered steps: a real sequence, so the numbers are meaningful here */
.steps{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:s}
.step{max-width:none;display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;
  border-top:1px solid var(--line)}
.step-n{flex:none;width:1.9rem;height:1.9rem;display:grid;place-items:center;
  border-radius:50%;background:var(--brand);color:var(--paper);
  font-family:var(--mono);font-size:.86rem;font-weight:600}
.step h3{margin:.1rem 0 .25rem;font-family:var(--display);font-size:1.1rem}
.step p{margin:0;max-width:none;font-size:.94rem;color:var(--ink-2)}

/* ------------------------------------------- 15. the application form
   A real form: one error summary, linked to the field that needs fixing, in
   the reader's language. Nothing here transmits — connect-src is 'none'. */
.form{margin:1.8rem 0 0}
.form fieldset{border:1px solid var(--pub-line);border-radius:var(--r);
  padding:1.1rem 1.2rem 1.3rem;margin:0 0 1.2rem}
.form legend{padding:0 .4rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.field{margin-bottom:1rem}
.field:last-child{margin-bottom:0}
.field label{display:block;font-weight:600;margin-bottom:.25rem}
.req{color:var(--accent);margin-left:.15rem}
.hint{margin:0 0 .35rem;font-size:.87rem;color:var(--ink-2);max-width:none}
.field input,.field select,.field textarea{width:100%;padding:.55rem .7rem;
  font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-mean);border-radius:var(--r)}
.field textarea{resize:vertical}
.field [aria-invalid="true"]{border-color:var(--accent);border-width:2px}
.errorsum{margin:1.4rem 0;padding:1rem 1.2rem;background:var(--accent-soft);
  border:1px solid var(--accent);border-left:4px solid var(--accent);
  border-radius:var(--r)}
.errorsum h2{margin:0 0 .5rem;font-size:1.05rem;color:var(--accent)}
.errorsum ul{margin:0;padding-left:1.1rem}
.errorsum li{margin-bottom:.25rem;max-width:none}
.callout.done{border-left:4px solid var(--brand)}
.done-lead{font-weight:600}
.v-ic{display:inline-flex;vertical-align:-.2em;margin-right:.45rem;color:var(--brand-3)}

/* ------------------------------------------- 16. the hero photographs
   Two photographs, cross-fading, each zooming gently as it appears. The text
   sits on a panel dark enough to read against any frame of either photograph —
   a gradient alone is a gamble, because the photograph underneath changes. */
.hero-hosp{position:relative;isolation:isolate;overflow:hidden;
  background:var(--brand-2)}
.hero-media{position:absolute;inset:0;z-index:0}
/* The zoom lasts exactly as long as a slide is shown (5s), and the resting
   transform is the animation's END value. That matters: when a slide loses
   .is-on its animation is stripped and it falls back to the base transform, so
   if the two differ the image visibly snaps mid-crossfade. They are the same
   here, so the outgoing slide freezes where it was and simply fades. */
.hero-media .hs{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;opacity:0;transform:scale(1.06);
  transition:opacity 1.2s ease-in-out;will-change:opacity,transform}
.hero-media .hs.is-on{opacity:1;animation:heroZoom 5s linear forwards}
@keyframes heroZoom{from{transform:scale(1.0)}to{transform:scale(1.06)}}
/* a scrim that is heavy where the words are and light where the faces are */
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--brand-2) 94%,transparent) 0%,
    color-mix(in srgb,var(--brand-2) 88%,transparent) 38%,
    color-mix(in srgb,var(--brand-2) 55%,transparent) 62%,
    color-mix(in srgb,var(--brand-2) 30%,transparent) 100%)}
.hero-inner{position:relative;z-index:1;padding-top:2.6rem;padding-bottom:2.6rem}
/* NOT --gold-mark: over the scrim at its lightest, that measures 4.26:1
   against a blown-out photo pixel — a fail. This step from the logo's own
   gold ramp measures 7.29:1 there, and 5.30:1 on the lighter mobile scrim. */
.hero-copy .eyebrow{color:#F0D898}
.hero-copy h1{color:#fff}
.hero-copy h1 .accent{color:#FFC9C9}
.hero-copy p{color:#E8EEF6}
/* The badge is a <p> inside .hero-copy, so it inherited the near-white the
   hero paragraphs use and became white text on a white pill — invisible.
   It needs its own colour where it can actually win: this file loads after
   base.css, and .hero-copy p.hero-badge outranks .hero-copy p. */
.hero-copy p.hero-badge{color:#0d2036;background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.75)}

/* the pause control: required once anything moves on its own for over 5s */
.hero-pause{position:absolute;right:1rem;bottom:1rem;z-index:2;width:40px;height:40px;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:color-mix(in srgb,var(--brand-2) 80%,transparent);cursor:pointer;
  display:grid;place-items:center}
.hero-pause:hover{background:var(--brand-2)}
.hp-bars{width:12px;height:13px;border-left:4px solid #fff;border-right:4px solid #fff}
.hero-pause.is-paused .hp-bars{width:0;height:0;border:none;
  border-left:13px solid #fff;border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:4px}

@media (max-width:820px){
  .hero-scrim{background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-2) 78%,transparent) 0%,
    color-mix(in srgb,var(--brand-2) 92%,transparent) 55%)}
}
/* Motion is a preference, and it is honoured: no zoom, no cross-fade, and
   hero.js does not start the timer at all. */
@media (prefers-reduced-motion: reduce){
  .hero-media .hs{transition:none}
  .hero-media .hs.is-on{animation:none;transform:none}
}

/* ------------------------------------------- 17. patient information pages */
.checks{list-style:none;margin:1rem 0 0;padding:0}
.checks li{max-width:none;display:flex;gap:.6rem;align-items:flex-start;
  padding:.45rem 0;border-bottom:1px solid var(--line)}
.checks li .ic{color:var(--c1);flex:none;margin-top:.15rem}
.reallink{display:flex;align-items:center;gap:.5rem;margin-top:2rem;
  padding-top:1rem;border-top:1px solid var(--line);font-size:.93rem}
.reallink .ic{color:var(--ink-2)}
.bigfact{font-family:var(--display);font-size:2.2rem;font-weight:600;
  color:var(--brand);margin:.6rem 0 .2rem}
.bf-u{font-size:1.1rem;font-weight:400;color:var(--ink-2)}