/* ===========================================================================
   Pearl Women's Hospital — stylesheet
   One file, no build step, no framework. Every value comes from
   00-brand/brand-system.md; nothing here was invented.
   =========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Core — sampled from the logo file */
  --pearl-maroon:  #903848;
  --pearl-maroon-dark: #7A2F3D;   /* hover only, derived */
  --pearl-blue:    #1860A8;
  --pearl-blue-dark: #124A82;     /* link hover, derived */
  --pearl-cream:   #F8F0E8;
  --pearl-blush:   #F0C8C0;       /* decorative only — never type */
  --pearl-shell:   #584838;
  --pearl-shell-line: #6F5C48;    /* rules inside shell blocks */

  /* Neutrals */
  --ink:        #2B2320;
  --ink-muted:  #6B5D57;
  --ink-faint:  #A8968C;          /* placeholder text only */
  --line:       #E4DAD4;
  --line-strong:#C7B6A6;
  --surface:    #FFFFFF;
  --surface-2:  #F8F0E8;
  --surface-3:  #EAE0D6;

  /* Status */
  --success:    #1E7A5A;
  --success-bg: #E4F2ED;
  --warning:    #9A6410;
  --warning-bg: #FBF1DF;
  --danger:     #B3261E;
  --danger-bg:  #FBEAE8;
  --info-bg:    #E8F0F9;

  /* On-shell / on-maroon text */
  --on-dark:       #F8F0E8;
  --on-dark-faint: #C7B6A6;

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing — 4px base, nothing off the scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Shape */
  --r-card: 4px;
  --r-chip: 2px;

  --wrap: 1200px;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--pearl-cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; flex-shrink: 0; }

/* Visible focus everywhere. Never remove this. */
:focus-visible {
  outline: 2px solid var(--pearl-maroon);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--pearl-maroon); color: #fff;
  padding: var(--s3) var(--s5); border-radius: var(--r-card);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

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

/* --- 3. Type ------------------------------------------------------------ */

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }

.t-display { font-size: 48px; line-height: 56px; letter-spacing: -0.01em; }
.t-h1      { font-size: 39px; line-height: 48px; }
.t-h2      { font-size: 31px; line-height: 40px; }
.t-h3      { font-size: 25px; line-height: 32px; }
.t-lead    { font-family: var(--font-body); font-size: 20px; line-height: 32px; color: var(--ink-muted); }
.t-body    { font-size: 16px; line-height: 26px; }
.t-small   { font-size: 14px; line-height: 22px; }
.t-micro   { font-size: 12px; line-height: 18px; }

.t-eyebrow {
  font-size: 12px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--pearl-maroon);
}
.t-label {
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.t-muted { color: var(--ink-muted); }
.t-num   { font-variant-numeric: tabular-nums; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--pearl-blue); text-decoration: none; }
a:hover { color: var(--pearl-blue-dark); text-decoration: underline; }

/* Running text never exceeds 65 characters. */
.prose { max-width: 65ch; }
.prose p { font-size: 18px; line-height: 30px; margin-bottom: 20px; }
.prose h2 { font-size: 31px; line-height: 40px; margin: var(--s7) 0 var(--s4); }
.prose h3 { font-family: var(--font-body); font-size: 20px; line-height: 32px; font-weight: 600; margin: var(--s6) 0 var(--s2); }

/* --- 4. Layout ---------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s6); padding-right: var(--s6); }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.grow    { flex-grow: 1; }
.gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); } .gap-8 { gap: var(--s8); }

.grid   { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.section { padding-top: var(--s9); }
.section-tight { padding-top: var(--s7); }

/* Anything wide scrolls inside its own box; the page body never scrolls sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- 5. Utility bar ----------------------------------------------------- */

.utility {
  background: var(--pearl-shell);
  color: var(--on-dark);
  font-size: 14px; line-height: 22px;
}
.utility .wrap { display: flex; align-items: center; gap: var(--s6); padding-top: 10px; padding-bottom: 10px; }
.utility a { color: #fff; font-weight: 600; }
.utility a:hover { color: var(--pearl-blush); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-open   { background: #6BC9A2; }
.dot-closed { background: var(--line-strong); }

.lang { display: flex; gap: var(--s2); align-items: center; }
.lang [aria-current="true"] { font-weight: 600; color: #fff; border-bottom: 2px solid var(--pearl-blush); padding-bottom: 2px; }

/* --- 5b. Live patient token band ---------------------------------------
   Sits directly under the header on every page. Placement approved by the
   hospital on 1 Oct 2026. The numbers come from the appointment system's own
   endpoint; this is presentation only. See 07-build/NOT-OURS.md. */

.tokenbar { background: var(--pearl-cream); border-bottom: 1px solid var(--line); }
.tokenbar .wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  padding-top: 10px; padding-bottom: 10px;
}
/* Only this part is the live region; the booking button sits outside it. */
.tokenbar-status {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s2) var(--s5); flex: 1 1 auto;
}
.tokenbar-live {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--success);
}
.tokenbar-label { font-size: 14px; line-height: 22px; color: var(--ink-muted); font-weight: 600; }
.tokenbar-pair { display: inline-flex; align-items: baseline; gap: var(--s2); }
.tokenbar-at { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.tokenbar-pair b {
  font-family: var(--font-display); font-size: 26px; line-height: 30px;
  color: var(--pearl-maroon); font-variant-numeric: tabular-nums;
}

/* Where a patient actually gets a number. The band answers "what is being
   called"; without this it never answers "how do I get one". Links to the
   appointment system's own booking form — see NOT-OURS.md. */
.tokenbar-book {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  background: var(--pearl-maroon); color: #fff;
  font-size: 15px; line-height: 22px; font-weight: 600;
  border-radius: 4px; text-decoration: none; white-space: nowrap;
}
.tokenbar-book:hover { background: var(--pearl-maroon-dark); color: #fff; }
/* The global focus ring is maroon, which is invisible on a maroon button. */
.tokenbar-book:focus-visible {
  background: var(--pearl-maroon-dark); color: #fff;
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.tokenbar-book svg { flex-shrink: 0; }

/* The appointment system is unreachable: say so rather than show a stale number. */
.tokenbar-down .tokenbar-live { color: var(--ink-muted); }
.tokenbar-down .tokenbar-pair b { color: var(--ink-muted); }

@media (max-width: 700px) {
  /* The label is the first thing to go — the word "token" beside a number
     carries it, and both branches must stay readable on a phone. */
  .tokenbar-label { display: none; }
  /* A growing spacer inside a wrapping flex row leaves a gap on its own line. */
  .tokenbar .grow { display: none; }
  .tokenbar .wrap { gap: var(--s2) var(--s4); }
  .tokenbar-at { font-size: 13px; }
  .tokenbar-pair b { font-size: 22px; line-height: 26px; }
}

@media (max-width: 420px) {
  .tokenbar .wrap { gap: 6px var(--s3); padding-top: 8px; padding-bottom: 8px; }
  .tokenbar-at { font-size: 12px; }
  .tokenbar-pair b { font-size: 20px; line-height: 24px; }
  /* Once the row wraps, the booking button takes its own full-width line
     rather than being squeezed against the numbers. */
  .tokenbar-book { width: 100%; justify-content: center; margin-top: 2px; }
}

/* --- 6. Header ---------------------------------------------------------- */

.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; gap: 40px; padding-top: 20px; padding-bottom: 20px; }
.logo { width: 186px; }

.nav { flex-grow: 1; display: flex; align-items: center; gap: 28px; font-size: 16px; font-weight: 500; }
.nav a { color: var(--ink); }
.nav a:hover { color: var(--pearl-maroon); text-decoration: none; }
.nav a[aria-current="page"] {
  color: var(--pearl-maroon); font-weight: 600;
  border-bottom: 2px solid var(--pearl-maroon); padding-bottom: 4px;
}

.nav-toggle { display: none; }

/* --- 7. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 44px; padding: 0 20px;
  border-radius: var(--r-card); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-lg { height: 52px; padding: 0 26px; font-size: 17px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

.btn-primary { background: var(--pearl-maroon); color: #fff; }
.btn-primary:hover { background: var(--pearl-maroon-dark); color: #fff; }

.btn-secondary { background: var(--surface); color: var(--pearl-maroon); border-color: var(--pearl-maroon); }
.btn-secondary:hover { background: var(--pearl-cream); color: var(--pearl-maroon); }

/* On a maroon ground. Never a blue button here — maroon/blue is 1.50:1. */
.on-maroon .btn-primary { background: #fff; color: var(--pearl-maroon); }
.on-maroon .btn-primary:hover { background: var(--pearl-cream); }
.on-maroon .btn-secondary { background: transparent; color: #fff; border-color: var(--pearl-blush); }
.on-maroon .btn-secondary:hover { background: rgba(255,255,255,0.08); color: #fff; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--line-strong); border-color: var(--line-strong);
  color: #fff; cursor: not-allowed; pointer-events: none;
}

.btn-block { width: 100%; }

/* --- 8. Surfaces -------------------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s5);
}
.card-lg { padding: var(--s7); }

.panel-maroon { background: var(--pearl-maroon); color: #fff; border-radius: var(--r-card); padding: var(--s5); }
.panel-maroon h2, .panel-maroon h3 { color: #fff; }
.panel-maroon p { color: var(--pearl-blush); }

.panel-shell { background: var(--pearl-shell); color: var(--on-dark); border-radius: var(--r-card); padding: var(--s7); }
.panel-shell h2, .panel-shell h3 { color: #fff; }
.panel-shell .t-label { color: var(--pearl-blush); }

/* --- 9. Chips ----------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: 16px; line-height: 26px;
  color: var(--pearl-blue); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 4px 12px; text-decoration: none;
}
.chip:hover { border-color: var(--pearl-blue); text-decoration: none; }
.chip[aria-current="true"] { background: var(--pearl-maroon); border-color: var(--pearl-maroon); color: #fff; }
.chip-sm { font-size: 14px; line-height: 22px; padding: 2px 10px; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 22px; font-weight: 600;
  border-radius: var(--r-chip); padding: 4px 12px;
}
.status-open   { color: var(--success); background: var(--success-bg); }
.status-soon   { color: var(--warning); background: var(--warning-bg); }
.status-closed { color: var(--ink-muted); background: #F1EAE5; }

/* --- 10. Alerts --------------------------------------------------------- */

.alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid; border-radius: var(--r-card);
  padding: 14px 18px; font-size: 16px; line-height: 26px;
}
.alert-success { background: var(--success-bg); border-color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger); }
.alert-info    { background: var(--info-bg);    border-color: var(--pearl-blue); }
.alert svg { margin-top: 3px; }

/* --- 11. Forms ---------------------------------------------------------- */

.field { display: block; margin-bottom: var(--s4); }
.field > .label {
  display: block; font-size: 14px; line-height: 22px;
  font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.field .req { color: var(--danger); }

.input, .select, .textarea {
  width: 100%; height: 48px;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink);
  padding: 0 14px;
  font-family: var(--font-body); font-size: 16px; line-height: 46px;
}
.textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 26px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

.input:focus, .select:focus, .textarea:focus {
  outline: none; border: 2px solid var(--pearl-maroon);
  box-shadow: 0 0 0 2px var(--pearl-blush); line-height: 44px;
}
.textarea:focus { line-height: 26px; }

.field[data-invalid] .input,
.field[data-invalid] .select { border: 2px solid var(--danger); line-height: 44px; }

.field-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 14px; line-height: 22px; color: var(--danger); margin-top: 6px;
}
.field-error svg { margin-top: 3px; }

/* The whole label row is the target — the box alone is under 44px. */
.consent {
  display: flex; gap: var(--s3); align-items: flex-start;
  min-height: 44px; padding: 6px 0; cursor: pointer;
  font-size: 16px; line-height: 26px;
}
.consent input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0;
  accent-color: var(--pearl-maroon); cursor: pointer;
}

/* Honeypot — must stay reachable to bots and hidden from people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 12. Tables --------------------------------------------------------- */

.table-wrap { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 26px; }
thead th {
  text-align: left; background: var(--pearl-cream);
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  padding: 12px 20px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 12px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; }
tr.total td.num { font-weight: 700; color: var(--pearl-maroon); }

/* --- 13. FAQ ------------------------------------------------------------ */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  padding: 20px 0; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 20px; line-height: 32px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq summary .sign::before,
.faq summary .sign::after {
  content: ""; position: absolute; background: var(--pearl-maroon);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq summary .sign::before { width: 14px; height: 2px; }
.faq summary .sign::after  { width: 2px; height: 14px; }
.faq details[open] summary .sign::after { display: none; }
.faq details > *:not(summary) { padding-bottom: 20px; color: var(--ink-muted); }


/* --- 13b. Diet charts: tracker + print sheet -------------------------------- */

.tracker { min-width: 680px; }
.tracker .tick {
  display: inline-block; width: 22px; height: 22px;
  border: 2px solid var(--line-strong); border-radius: 3px;
}
.tracker .ruled { display: block; height: 22px; border-bottom: 1px dashed var(--line-strong); }

/* Language options that are not ready yet read as unavailable, not as broken. */
.lang-unavailable { background: var(--surface-2); color: var(--line-strong); border-color: var(--line); }

/* --- 14. Statutory band ------------------------------------------------- */
/* PC&PNDT Act, 1994. This appears on every page. It is not optional and it is
   not a component a template may choose to omit. */

.statutory {
  background: var(--surface);
  border-top: 3px solid var(--pearl-maroon);
  border-bottom: 1px solid var(--line);
  margin-top: var(--s8);
}
.statutory .wrap { display: flex; gap: var(--s5); align-items: flex-start; padding-top: 28px; padding-bottom: 28px; }
.statutory .notice { font-size: 16px; line-height: 26px; font-weight: 600; color: var(--ink); }
/* English and Gujarati at the same size and weight. The second language is
   never smaller. Only the statutory reference drops to micro. */
.statutory .ref { font-size: 12px; line-height: 18px; color: var(--ink-muted); margin-top: 6px; }

/* --- 15. Footer --------------------------------------------------------- */

.footer { background: var(--pearl-shell); color: var(--on-dark); }
.footer .wrap { padding-top: var(--s8); padding-bottom: var(--s6); }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s7); }
.footer a { color: var(--on-dark); }
.footer a:hover { color: #fff; }
.footer .t-label { color: var(--pearl-blush); }
.footer .stack a { margin-bottom: 10px; }
.footer-base {
  border-top: 1px solid var(--pearl-shell-line);
  padding-top: 20px; margin-top: var(--s6);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  font-size: 14px; line-height: 22px; color: var(--on-dark-faint);
}
.footer-base a { color: var(--on-dark-faint); }

/* --- 16. Mobile action bar ---------------------------------------------- */

.action-bar { display: none; }

/* --- 17. Media (real photos only — no stock) ---------------------------- */

.media { border-radius: var(--r-card); overflow: hidden; background: var(--surface-3); }
/* Reserve the box so nothing jumps when the image lands. */
.media img { width: 100%; height: 100%; object-fit: cover; }

/* --- 18. 1024px --------------------------------------------------------- */

@media (max-width: 1100px) {
  .wrap { padding-left: var(--s5); padding-right: var(--s5); }

  /* Six nav items plus two buttons needs ~1100px. Collapse the nav; the two
     actions never collapse. */
  .nav { display: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--surface); cursor: pointer;
  }
  .masthead .wrap { gap: var(--s4); }
  .logo { width: 176px; }
  .masthead .grow { display: block; }

  /* Utility strip drops the timings string; it is one tap away on every page. */
  .utility .drop-1024 { display: none; }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-display { font-size: 39px; line-height: 48px; }

  .split { flex-direction: column; }
  .split > * { width: 100% !important; }

  /* Service pages: the facts and the booking card move ABOVE the article,
     never below it — the cost and the way to book are what the page is for. */
  .article-layout { display: flex; flex-direction: column-reverse; gap: var(--s5); }
  .article-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }

  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
}

/* --- 19. 390px ---------------------------------------------------------- */

@media (max-width: 700px) {
  .wrap { padding-left: var(--s4); padding-right: var(--s4); }

  body { padding-bottom: 76px; } /* clears the fixed action bar */

  .utility .wrap { gap: var(--s3); padding-top: 8px; padding-bottom: 8px; }
  .utility .drop-390 { display: none; }

  .masthead .wrap { padding-top: 12px; padding-bottom: 12px; }
  .logo { width: 150px; }

  .section { padding-top: var(--s6); }
  .section-tight { padding-top: var(--s6); }

  .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s3); }
  .article-aside { grid-template-columns: 1fr; }

  .t-display { font-size: 34px; line-height: 42px; }
  .t-h1 { font-size: 31px; line-height: 40px; }
  .t-h2 { font-size: 25px; line-height: 32px; }
  .prose p { font-size: 18px; line-height: 30px; }

  .card-lg, .panel-shell { padding: var(--s5) 20px; }

  .btn { height: 52px; font-size: 17px; }     /* 52px for every action on a phone */
  .btn-lg { height: 52px; }
  .btn-sm { height: 44px; }

  /* Cost tables become label/value rows. */
  .table-stack thead { display: none; }
  .table-stack tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; }
  .table-stack tbody tr:last-child { border-bottom: none; }
  .table-stack tbody td { display: flex; justify-content: space-between; gap: var(--s4); border: none; padding: 2px 20px; }
  .table-stack tbody td::before { content: attr(data-label); color: var(--ink-muted); font-size: 14px; }
  .table-stack tbody td.num { text-align: right; font-weight: 600; }

  .footer-cols { grid-template-columns: 1fr; gap: var(--s5); }
  .footer-base { flex-direction: column; align-items: flex-start; gap: var(--s3); }

  /* Fixed to the viewport, not the page. Text and CSS only — it never waits
     on an image or a script. */
  .action-bar {
    display: flex; gap: var(--s2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--pearl-maroon);
    border-top: 1px solid var(--pearl-maroon-dark);
    padding: var(--s2);
    padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  }
  .action-bar .btn { height: 52px; flex-grow: 1; }
  .action-bar .btn-icon { flex-grow: 0; width: 52px; padding: 0; }
}

/* --- 19b. International & NRI module ------------------------------------
   Added for /international/. Everything here is built from the tokens above;
   no new colour, no new spacing value, no new radius. The module reuses
   .card, .alert, .field, .btn, .chip, .panel-shell and .faq from the sections
   above and only adds what genuinely did not exist.

   Note the class prefix. An earlier design canvas for this module defined its
   own .statutory, .card, .consent and .msg, which would have collided with the
   sitewide statutory band and the form components. Everything new here is
   prefixed intl- for that reason. */

/* The full-bleed white band the eligibility facts and payment sit on. */
.intl-plain {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s8) 0;
  margin-top: var(--s9);
}

/* The three "before you book a flight" facts. The two flagged ones carry an
   amber rule; the body text stays --ink. --warning as text on white is 5.26:1
   and passes, but amber body copy reads as a warning label rather than as
   something to actually read, so the colour is spent on the rule only. */
/* auto-fit, not repeat(3): this band carries three or four facts depending
   on whether the neonatal one is in, and neither count should leave a
   ragged last row. */
.intl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5); align-items: start; }
.intl-fact { border-left: 3px solid var(--line-strong); padding-left: var(--s4); }
.intl-fact.is-flag { border-left-color: var(--warning); }
.intl-fact h3 { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 var(--s2); }
.intl-fact p { font-size: 14px; line-height: 23px; margin: 0 0 var(--s2); }
.intl-fact p:last-child { margin-bottom: 0; color: var(--ink-muted); }

/* Treatment cards. The link is pinned to the bottom so unequal copy lengths
   do not leave one card's link floating halfway up the row. */
.intl-card { display: flex; flex-direction: column; }
.intl-trips {
  display: inline-flex; align-self: flex-start; align-items: center;
  background: var(--pearl-cream); border-radius: var(--r-chip); padding: 3px var(--s2);
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.intl-dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4);
  font-size: 14px; line-height: 22px;
  border-top: 1px solid var(--line); padding-top: var(--s3);
}
.intl-dl dt { color: var(--ink-muted); }
.intl-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.intl-more { font-size: 14px; font-weight: 600; }

/* Trip timeline. The leg column is typed information — "Trip 1 / days 13-16"
   — not a decorative 01/02/03, so it gets a fixed column and real wording. */
.intl-tl { list-style: none; margin: 0; padding: 0; }
.intl-tl li {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--s4);
  padding: var(--s4) 0; border-top: 1px solid var(--line);
}
.intl-tl li:first-child { border-top: none; padding-top: 0; }
.intl-leg {
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pearl-maroon); padding-top: 3px;
}
.intl-leg em {
  display: block; font-style: normal; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink-muted);
}
.intl-tl h4 { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 var(--s1); }
.intl-tl p { font-size: 14px; line-height: 23px; margin: 0; }
.intl-tl-note {
  background: var(--pearl-cream); border-radius: var(--r-card);
  padding: var(--s3) var(--s4); margin-top: var(--s2) !important;
}

/* Consultation windows, rendered in the patient's own clock at build time. */
.intl-wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s5); }
/* A country spanning several zones gets a column each; a single-zone country
   gets one column holding its standard and summer blocks. */
.intl-win { min-width: 0; }
.intl-zone-name {
  font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink);
  margin: 0 0 var(--s2); padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.intl-season + .intl-season { margin-top: var(--s3); }
.intl-sat {
  margin: var(--s3) 0 0; padding-top: var(--s2);
  border-top: 1px dashed var(--line);
  font-size: 13px; line-height: 20px; color: var(--ink-muted);
}
.intl-sat strong { color: var(--ink); }
.intl-win ul { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.intl-win li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding: 6px 0; font-size: 16px; line-height: 26px;
}
.intl-win li b { font-variant-numeric: tabular-nums; }
.intl-daychip {
  display: inline-flex; align-items: center;
  background: var(--info-bg); color: var(--pearl-blue);
  border-radius: var(--r-chip); padding: 2px var(--s2);
  font-size: 12px; line-height: 18px; font-weight: 600;
}

/* Credentials, on the shell panel. Cream on shell measures 7.76:1. */
.intl-regs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.intl-reg { border-top: 1px solid var(--pearl-shell-line); padding-top: var(--s3); margin: 0; }
.intl-reg dt {
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pearl-blush); margin-bottom: var(--s1);
}
.intl-reg dd { margin: 0; font-size: 16px; line-height: 26px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.intl-reg dd small { display: block; font-size: 13px; line-height: 21px; font-weight: 400; color: var(--on-dark-faint); }
/* Not .statutory — that class is the sitewide PC&PNDT band and must not be
   restyled from inside a panel. */
.intl-notice {
  margin: var(--s5) 0 0; padding: var(--s4);
  border: 1px solid var(--pearl-shell-line); border-radius: var(--r-card);
  font-size: 14px; line-height: 22px; color: var(--on-dark);
}
.intl-notice b { display: block; color: #fff; margin-bottom: var(--s1); }

/* Paying from abroad. No account number appears anywhere on this site. */
.intl-pay { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: start; }
.intl-paylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.intl-paylist li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); font-size: 14px; line-height: 23px; }
.intl-tag {
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--pearl-cream); border-radius: var(--r-chip);
  padding: 2px var(--s2); color: var(--ink);
  white-space: nowrap; height: fit-content; margin-top: 3px;
}
.intl-form .field { margin-bottom: 0; }

/* The homepage entry band. */
.intl-band { background: var(--pearl-cream); border-color: var(--line-strong); }
.intl-band-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.intl-band-list li {
  border-top: 1px solid var(--line-strong); padding-top: var(--s3);
  font-size: 14px; line-height: 23px; color: var(--ink-muted);
}
.intl-band-list strong { display: block; color: var(--ink); font-size: 16px; line-height: 24px; }

@media (max-width: 1100px) {
  .intl-facts, .intl-regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intl-pay { grid-template-columns: 1fr; gap: var(--s6); }
  .intl-plain { padding: var(--s7) 0; margin-top: var(--s7); }
}

@media (max-width: 700px) {
  .intl-facts, .intl-regs, .intl-wins, .intl-band-list { grid-template-columns: 1fr; }
  /* The leg stacks above its step rather than squeezing to 88px of nothing. */
  .intl-tl li { grid-template-columns: 1fr; gap: var(--s2); }
  .intl-leg { padding-top: 0; }
  .intl-leg em { display: inline; }
  .intl-leg em::before { content: " · "; }
  .intl-dl dd { text-align: left; }
}

/* --- 20. Print and motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  /* Everything that is navigation, decoration or an action goes. */
  .utility, .nav, .nav-toggle, .action-bar, .btn, .masthead .grow,
  .article-aside, .footer, .skip-link { display: none !important; }

  body { background: #fff; color: #000; padding-bottom: 0; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .article-layout { display: block; }
  .prose, .prose p { max-width: none; }
  .card, .table-wrap { border-color: #000; break-inside: avoid; }

  /* One stage on one side of A4. */
  @page { size: A4; margin: 14mm; }
  h1 { font-size: 20pt; line-height: 1.2; }
  h2 { font-size: 13pt; line-height: 1.3; margin: 10pt 0 4pt; }
  .prose p { font-size: 11pt; line-height: 1.45; margin-bottom: 6pt; }
  .chart-lede { border-left: 2pt solid #000; padding-left: 8pt; font-size: 11pt; }

  table { font-size: 10pt; }
  thead th { background: none; color: #000; border-bottom: 1pt solid #000;
             text-transform: none; letter-spacing: 0; font-size: 10pt; padding: 3pt 0; }
  tbody td { border-bottom: .5pt solid #999; padding: 3pt 0; }
  .table-wrap { border: none; overflow: visible; }
  .tracker { min-width: 0; }

  /* The two things that must survive a sheet on a fridge. */
  .chart-alarm {
    border: 2pt solid #000 !important; background: none !important;
    break-inside: avoid; padding: 8pt 10pt;
  }
  .chart-alarm svg { display: none; }
  .chart-footnote { border-top: .5pt solid #999; padding-top: 6pt; font-size: 9pt; }

  /* The masthead becomes a letterhead. */
  .masthead { border-bottom: 2pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt; }
  .masthead .wrap { padding: 0; display: block; }
  .logo { width: 150px; }

  .statutory { border-color: #000; margin-top: 10pt; }
  .statutory .wrap { padding: 6pt 0; }
  .statutory .notice { font-size: 9pt; line-height: 1.35; }

  nav[aria-label="Breadcrumb"], .no-print, .alert-warning { display: none; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: ""; }
}

/* --- 19c. The international desk's own contact block --------------------
   A different line from the main hospital number, and the thing the payment
   fraud notice points at when it says "the number on this page". */

.intl-contact { background: var(--pearl-cream); border-color: var(--line-strong); }
.intl-number { margin: var(--s2) 0 var(--s3); }
.intl-number a {
  font-family: var(--font-display); font-size: 31px; line-height: 40px;
  color: var(--pearl-maroon); text-decoration: none;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.intl-number a:hover { color: var(--pearl-maroon-dark); text-decoration: underline; }

@media (max-width: 700px) {
  .intl-number a { font-size: 25px; line-height: 32px; }
}