/* ==========================================================================
   SCMH concept demonstration — base.css
   Reset, type, focus, and the global chrome that is identical on all 29
   screens: skip link, demonstration banner, utility strip, masthead, header
   controls, navigation, the Display-and-language panel, and the footer.

   Both shells load this. Nothing shell-specific belongs here.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--pub-ground); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
[hidden]{ display:none !important; }

/* ----------------------------------------------------------------- 2. type
   brand §3.4, exactly. Display sizes are fluid; body sizes are not, so the
   text-size control is a real root scale and not a viewport trick. */
h1,h2,h3{ font-family:var(--display); font-weight:600; color:var(--ink);
  margin:0 0 .45em; text-wrap:balance;
  /* At 200% text on a 320px screen a display word is wider than the column.
     Breaking it is correct; overflowing the page is not. */
  overflow-wrap:break-word; }
h1{ font-size:clamp(2.3rem,4.9vw,3.5rem); line-height:1.06; letter-spacing:-.015em; }
h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.15; letter-spacing:-.01em; }
h3{ font-size:1.3rem; line-height:1.25; letter-spacing:0; }
h4{ font-family:var(--sans); font-size:1.05rem; font-weight:700; line-height:1.3;
  margin:0 0 .5em; color:var(--ink); }
p,ul,ol,dl,table,figure,blockquote{ margin:0 0 1.1em; }
p,li,dd{ max-width:var(--measure); }
.lead{ font-size:1.15rem; line-height:1.55; color:var(--ink-2); max-width:44rem; }
.small,.meta{ font-size:.85rem; line-height:1.5; }
.micro{ font-size:.7rem; font-weight:600; line-height:1.3; letter-spacing:.11em;
  text-transform:uppercase; }
.mono{ font-family:var(--mono); font-size:.8125rem; }
.muted{ color:var(--ink-2); }
strong,b{ font-weight:700; }

/* The eyebrow, with the house's rule before it. In the public shell it is
   --pub-accent (red); the clinical shell moves it to --gold, because red in a
   data plane has to mean one thing only. */
/* Sentence case, not all-caps. An all-caps eyebrow is one of the tells the
   build brief names; the leading rule and the weight already make it read as a
   label, and lower case is easier for a screen reader and for dyslexic readers
   than a shouted line. */
.eyebrow{ font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.02em; text-transform:none; color:var(--pub-accent);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.7rem; max-width:none;
  flex-wrap:wrap; min-width:0; overflow-wrap:break-word; }
.eyebrow::before{ content:""; width:1.6rem; height:2px; background:currentColor; flex:0 0 auto; }
.eyebrow.plain::before{ display:none; }

/* ---------------------------------------------------------------- 3. links
   Their site sets every link bold with no underline, which destroys the
   hierarchy of body copy and removes the non-colour cue. Underlines return. */
a{ color:var(--link); text-decoration:underline; text-underline-offset:.16em;
  text-decoration-thickness:.07em; }
a:hover{ text-decoration-thickness:.12em; }
.nav a,.brand,.btn,.btn-plain,.seg a,.card,.foot-links a,.crumbs a{ text-decoration:none; }
.nav a:hover,.brand:hover,.foot-links a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------- 4. focus
   The single most concrete thing this system fixes: their own site ships zero
   outline declarations in 83KB of CSS. Never `:focus{outline:none}` — the
   :focus-visible pseudo-class already exempts the mouse. */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:4px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline-offset:1px; }
/* Context switch. #12448F on navy is 1.22:1 and fails; gold is 10.84:1 there.
   Set on the container so every descendant inherits the right ring. */
.demo,.foot,.on-navy{ --focus-ring:#FFC94A; }
:target{ scroll-margin-top:1.5rem; }

/* Grid and flex children size to min-content by default, which at 200% text on
   a 320px screen is what actually pushes a page sideways. Opt every layout
   child out of it once, here, rather than chasing it per component. */
.grid>*,.cards>li,.figs>li,.ticks>li,.refusals>li,.prefgrid>*,.fgrid>*,
.signin>*,.hero .wrap>*,.strip .wrap>*,.mast>.wrap>*{ min-width:0; }

/* ----------------------------------------------------------- 5. fragments */
.wrap{ width:min(74rem,100% - 2*var(--pad)); margin-inline:auto; }
.wrap-narrow{ width:min(46rem,100% - 2*var(--pad)); margin-inline:auto; }
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.stack>*+*{ margin-top:1rem; }
hr{ border:0; border-top:1px solid var(--pub-line); margin:2.2rem 0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand-2); color:#FFFFFF;              /* 16.61:1 light, 19.15:1 dark */
  padding:.7rem 1rem; font-weight:600; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:.5rem; top:.5rem; border-radius:var(--r); }
/* When it appears, the skip link sits ON TOP of the navy demonstration banner,
   so the pixels its ring actually paints over are navy — not the cream page.
   #12448F on #011F3D is 1.22:1 and fails. A two-tone ring solves it the way
   brand §3.5 specifies: gold ring, navy halo on both of its edges.
   #FFC94A on #011F3D = 10.84:1, on both sides of the ring. */
.skip:focus-visible{
  --focus-ring:#FFC94A;
  box-shadow:0 0 0 8px var(--brand-2);
}
main:focus{ outline:none; }
main:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:-3px; }

/* ------------------------------------------------- 6. demonstration banner
   plan §1.1.2 and §3.1. First element inside <body> after the skip link, on
   every page, in both languages. No close control, no position:fixed, no
   collapse, no JavaScript dependency. Do not move it. */
.demo{
  background:var(--brand-2); color:#E7EDF8;            /* 14.13:1 light, 16.29:1 dark */
  font-size:.84rem; line-height:1.5; padding:.55rem 0;
}
.demo .wrap{ display:flex; gap:.5rem 1rem; flex-wrap:wrap; align-items:baseline; }
.demo p{ margin:0; max-width:none; }
.demo b{ font-weight:700; color:#FFFFFF; }             /* 16.61:1 */
.demo a{ color:#FFD08A; text-decoration:underline; }   /* 11.58:1 light, 13.35:1 dark */
.demo a:hover{ color:#FFFFFF; }

/* ---------------------------------------------------- 7. the utility strip
   The slot the sibling site fills with weather, bridge wait and the peso rate.
   Here it carries the honesty state, because that is the slot the eye already
   goes to. plan §3.2. */
.strip{
  background:var(--pub-band); color:var(--ink-2);
  font-size:.75rem; border-bottom:1px solid var(--pub-line);
}
.strip .wrap{ display:flex; flex-wrap:wrap; gap:.15rem .75rem; align-items:baseline;
  padding:.4rem 0; min-height:1.9rem; }
.strip p{ margin:0; max-width:none; letter-spacing:.04em; }
.strip .sep{ color:var(--ink-2); }   /* 6.51:1 — a separator nobody can see is not a separator */
.strip .clock{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; }

/* -------------------------------------------------------------- 8. masthead */
.site-head{ position:sticky; top:0; z-index:40; background:var(--pub-ground);
  box-shadow:0 1px 0 var(--pub-line); }
@media (max-height:30rem){ .site-head{ position:static; } }
.site-head[data-compact="true"]{ box-shadow:0 1px 12px -4px rgba(2,31,61,.28); }
.mast{ background:var(--pub-ground); border-bottom:1px solid var(--pub-line); }
.site-head[data-compact="true"] .mast{ border-bottom-color:transparent; }
.mast>.wrap{ display:flex; align-items:center; gap:1rem; padding:.5rem 0; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--ink); flex:1 1 auto;
  min-width:0; min-height:44px; }
.brand>span{ min-width:0; }
.brand img{ height:96px; width:auto; flex:0 0 auto; transition:height .18s ease; }
@media (max-width:40rem){
  .brand img{ height:56px; width:auto; }
  .mast-actions{ margin-inline-start:0; }
}
.site-head[data-compact="true"] .brand img{ height:44px; width:auto; }
.brand .bt{ font-family:var(--display); font-weight:600;
  font-size:clamp(1.05rem,4.4vw,1.45rem); line-height:1.12;
  letter-spacing:-.015em; display:block; overflow-wrap:break-word; }
.site-head[data-compact="true"] .brand .bt{ font-size:1.1rem; }
.brand .bs{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2); margin-top:.15rem; line-height:1.3; }
.site-head[data-compact="true"] .brand .bs{ display:none; }
.mast-actions{ display:flex; gap:.5rem; align-items:center; margin-inline-start:auto;
  flex-wrap:wrap; min-width:0; max-width:100%; }

/* ------------------------------------------------------- 9. header controls */
.seg-lang{ display:inline-flex; border:1px solid var(--pub-line-2);
  border-radius:var(--r-pill); padding:2px; background:var(--pub-card); }
.seg-lang button{
  font:inherit; font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  min-width:44px; min-height:40px; padding:.3rem .7rem;
  border:0; border-radius:var(--r-pill); background:transparent;
  color:var(--ink-2); cursor:pointer; line-height:1.4;
}
.seg-lang button:hover{ color:var(--brand); background:var(--pub-band); }
.seg-lang button[aria-pressed="true"]{ background:var(--brand); color:var(--pub-card); }
:root[data-theme="dark"] .seg-lang button[aria-pressed="true"],
:root[data-theme="night"] .seg-lang button[aria-pressed="true"]{ color:#06101A; }

.btn-plain{
  font:inherit; font-family:var(--sans); font-size:.82rem; font-weight:600;
  background:var(--pub-card); color:var(--ink); border:1px solid var(--pub-line-2);
  padding:.42rem .8rem; min-height:44px; border-radius:var(--r-pill); cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  max-width:100%; overflow-wrap:break-word; text-align:left;
}
@media (min-width:64rem){ .btn-plain{ white-space:nowrap; } }
.btn-plain:hover{ border-color:var(--brand); color:var(--brand); }
.btn-plain[aria-expanded="true"],.btn-plain[aria-pressed="true"]{
  background:var(--brand); color:var(--pub-card); border-color:var(--brand);
}
:root[data-theme="dark"] .btn-plain[aria-expanded="true"],
:root[data-theme="dark"] .btn-plain[aria-pressed="true"],
:root[data-theme="night"] .btn-plain[aria-expanded="true"],
:root[data-theme="night"] .btn-plain[aria-pressed="true"]{ color:#06101A; }

/* --------------------------------------------------------------- 10. nav */
.nav{ background:var(--pub-ground); border-bottom:1px solid var(--pub-line); }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.nav li{ max-width:none; }
.nav a{ display:flex; align-items:center; min-height:44px; color:var(--ink-2);
  padding:.5rem .85rem; font-size:.9rem; font-weight:500;
  border-bottom:3px solid transparent; }
.nav a:hover{ color:var(--brand); border-bottom-color:var(--pub-line-2); }
/* Current page: colour AND a 3px gold rule — never colour alone. */
.nav a[aria-current="page"]{ color:var(--brand); border-bottom-color:var(--gold);
  font-weight:700; }
@media (max-width:40rem){
  .nav{ max-height:0; overflow:hidden; border-bottom:0; }
  .nav[data-open="true"]{ max-height:none; border-bottom:1px solid var(--pub-line); }
  .nav ul{ flex-direction:column; }
  .nav a{ border-bottom:1px solid var(--pub-line); border-left:3px solid transparent;
    padding:.7rem .2rem; }
  .nav a[aria-current="page"]{ border-left-color:var(--gold);
    border-bottom-color:var(--pub-line); }
  :root.no-js .nav{ max-height:none; border-bottom:1px solid var(--pub-line); }
}
@media (min-width:40.001rem){ .nav-toggle{ display:none; } }

/* ---------------------------------- 11. the Display and language panel §3.5 */
.prefs{ background:var(--pub-band); border-bottom:1px solid var(--pub-line); }
.prefs .wrap{ padding:1rem 0 1.2rem; }
.prefs h2{ font-family:var(--sans); font-size:.85rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  margin:0 0 .85rem; }
.prefgrid{ display:grid; gap:1rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); }
.prefgrid fieldset{ border:0; margin:0; padding:0; min-width:0; }
.prefgrid legend{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; padding:0 0 .45rem; color:var(--ink-2); }
.radios{ display:grid; gap:.15rem; }
.radios label{ display:flex; gap:.55rem; align-items:center; font-size:.9rem;
  min-height:44px; padding:.1rem .25rem; border-radius:var(--r-sm); cursor:pointer;
  max-width:none; }
.radios label:hover{ background:var(--pub-card); }
.radios input{ width:1.15rem; height:1.15rem; flex:0 0 auto; accent-color:var(--brand); }
.pref-note{ font-size:.83rem; color:var(--ink-2); margin:.9rem 0 0; max-width:44rem; }

/* ------------------------------------------------------------ 12. buttons */
.btn{
  font:inherit; font-family:var(--sans); font-weight:600; font-size:1rem;
  background:var(--brand); color:var(--pub-card);
  border:1px solid var(--brand); padding:.72rem 1.25rem; min-height:48px;
  border-radius:var(--r); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  line-height:1.3;
}
.btn:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#FFFFFF; }
.btn.ghost{ background:var(--pub-card); color:var(--brand); border-color:var(--pub-line-2); }
.btn.ghost:hover{ background:var(--pub-band); border-color:var(--brand); color:var(--brand); }
:root[data-theme="dark"] .btn,:root[data-theme="night"] .btn{ color:#06101A; }
:root[data-theme="dark"] .btn:hover,:root[data-theme="night"] .btn:hover{
  background:#C6D8EE; border-color:#C6D8EE; color:#06101A; }
:root[data-theme="dark"] .btn.ghost,:root[data-theme="night"] .btn.ghost{
  background:transparent; color:var(--brand); }

/* -------------------------------------------------------------- 13. chips
   {ui.illustrative} and {ui.synthetic}. Never a watermark, never in a corner,
   never below the fold — beside the h1, in the flow. */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:var(--r-pill);
  border:1px solid currentColor; white-space:nowrap; line-height:1.5;
}
.chip.demo-chip{ color:var(--gold); }
.chip.synthetic{ color:var(--ink-2); }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; padding:0;
  list-style:none; }
.chips li{ max-width:none; }

/* ------------------------------------------------------------ 14. refusal
   plan §6.3: 1px --line-mean border, no fill, --ink text, NO RED. A refusal is
   not an error. */
.refusal{
  border:1px solid var(--line-mean-cream); border-radius:var(--r);
  background:transparent; color:var(--ink);
  padding:1rem 1.15rem; margin:0 0 1.4rem;
}
.refusal>*:last-child{ margin-bottom:0; }
.refusal h2,.refusal h3{ font-family:var(--display); font-size:1.1rem; margin-bottom:.35rem; }
.refusal p{ max-width:44rem; }

/* --------------------------------------------------------------- 15. footer */
.foot{
  background:var(--brand-2); color:#DBE3F2;             /* 12.87:1 light, 16.2:1 dark */
  padding:clamp(2.25rem,5vw,3.25rem) 0 1.5rem; margin-top:3.5rem;
}
.foot a{ color:#FFD08A; }                               /* 11.58:1 */
.foot a:hover{ color:#FFFFFF; }
.foot h2{ color:#FFFFFF; font-family:var(--sans); font-size:.74rem;
  letter-spacing:.13em; text-transform:uppercase; margin:0 0 .85rem; font-weight:700; }
.foot p{ max-width:42rem; font-size:.94rem; }
.fgrid{ display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); }
.foot-links{ list-style:none; margin:0; padding:0; }
.foot-links li{ margin-bottom:.5rem; max-width:none; font-size:.94rem; }
.foot-links a{ display:inline-flex; align-items:center; min-height:44px; }
.foot-bottom{ border-top:1px solid #3A527A; margin-top:2.25rem; padding-top:1.25rem;
  font-size:.86rem; color:#C3CFE8; }                    /* 10.60:1 */
.foot-bottom p{ margin:0; max-width:none; }

/* --------------------------------------------------------------- 16. tables */
table{ border-collapse:collapse; width:100%; font-size:.95rem;
  font-variant-numeric:tabular-nums; }
th,td{ text-align:left; padding:.7rem .85rem; border-bottom:1px solid var(--pub-line);
  vertical-align:top; font-variant-numeric:tabular-nums; }
thead th{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); }
caption{ text-align:left; font-size:.85rem; color:var(--ink-2); padding:.75rem .85rem; }
/* Every scrollable table container is reachable and scrollable from the
   keyboard, and says what it is. plan §2.8. */
.tablewrap{ overflow-x:auto; margin:0 0 1.4rem; border:1px solid var(--line-mean-cream);
  border-radius:var(--r-lg); background:var(--pub-card); }

/* -------------------------------------------------------------- 17. status
   {ui.unavailableDemo}. There are no dead controls: a control either works or
   says, inline and in both languages, that it was not built. */
.inline-status{ display:block; font-size:.85rem; color:var(--ink-2); margin:.4rem 0 0; }
.inline-status:empty{ display:none; }

/* spot icons, both shells — inline SVG on one 24-unit grid */
.ic{flex:none;vertical-align:-.15em}

/* ---- links in running text carry weight, not an underline.
   Colour alone would fail 1.4.1, so the weight is the second signal; the
   underline comes back on hover and focus. Chrome and cards opt out above. */
main p a, main li a, main dd a, main td a, .note a, .callout a, .closing a{
  text-decoration:none; font-weight:600;
}
main p a:hover, main li a:hover, main dd a:hover, main td a:hover,
.note a:hover, .callout a:hover, .closing a:hover,
main a:focus-visible{ text-decoration:underline; text-underline-offset:2px; }

/* the mark in the footer sits on the navy band */
.foot-mark{ height:66px; width:auto; margin-bottom:.7rem; display:block; }

/* The promise this whole proposal is selling, on the page a visitor lands on. */
.hero-badge{display:inline-block;margin:1rem 0 0;padding:.5rem .9rem;
  border-radius:999px;font-size:.86rem;font-weight:600;line-height:1.4;
  background:rgba(255,255,255,.92);color:#12263f;border:1px solid rgba(255,255,255,.6)}