HCP Allied Health — Wait Times

/* ============================================================
   Empower Healthcare — Wait Times
   Screen + shared base styles
   File: mi/frontend/static/css/wait-times.css

   Companion file (print overrides):
     mi/frontend/static/css/wait-times-print.css

   This stylesheet is partner-facing. Every visual treatment
   here is also what shows up in the exported PDF (the print
   stylesheet only tightens spacing/sizes for A4 landscape).
   ============================================================ */

/* Fonts now ship self-hosted in /static/css/fonts.css (13 Jul 2026). A CSS @import of a
   webfont is fully SERIAL and render-blocking — the browser must fetch this file, then
   discover the import, then fetch Google's stylesheet, then the font files. Link the local
   bundle in <head> instead; never @import a webfont. */

/* Brand canon (Empower Brand Guidelines, March 2022):
   Primary   #4C12A1  Empower Purple  (PMS 2091)
   Accent    #5BC2E7  Light Blue      (PMS 2985)
   Navy      #1E1645  Deep Purple     (PMS 2765)
   Grey-d    #333F49  Dark Grey       (PMS 432)
   Grey      #A0AAB2  Mid Grey        (PMS 429)  — used as "HEALTHCARE" lockup color
   Orange    #E05A29  Accent          (PMS 7579) — use sparingly
   Gradient  135° from #4C12A1 to #5BC2E7
   Headings  Montserrat (Bold). Pull-out: Montserrat Medium.
   Body      Poppins Light (300). Intro/UI emphasis: Poppins Semi-Bold (600). */

/* ---- Brand tokens -------------------------------------------------- */
:root {
  --emp-purple:   #4C12A1;   /* PMS 2091 */
  --emp-blue:     #5BC2E7;   /* PMS 2985 */
  --emp-navy:     #1E1645;   /* PMS 2765 */
  --emp-grey-d:   #333F49;   /* PMS 432  */
  --emp-grey:     #A0AAB2;   /* PMS 429  — "HEALTHCARE" word lockup tone */
  --emp-orange:   #E05A29;   /* PMS 7579 — use sparingly */

  --emp-purple-ink:  #2c0a63;   /* deep purple for body emphasis */
  --emp-purple-50:   #f3edff;   /* tint for hover/zebra */
  --emp-blue-50:     #ecf8fd;   /* tint for telehealth */
  --emp-orange-50:   #f7efe5;   /* warm taupe for temporarily-closed */

  --emp-gradient: linear-gradient(135deg, var(--emp-purple) 0%, var(--emp-blue) 100%);

  /* Per-state accent */
  --state-vic: var(--emp-purple);
  --state-nsw: var(--emp-blue);
  --state-qld: var(--emp-navy);
  --state-wa:  var(--emp-orange);

  /* Neutral surface */
  --surface:       #ffffff;
  --surface-alt:   #fafaf9;
  --rule:          #ececef;
  --ink:           #1d1a2b;
  --ink-soft:      #5b5870;
  --ink-mute:      #8c889e;

  /* Weeks color ramp — 0 (good) → 7+ (longer wait).
     The low end (0–2 wks) gets a quiet positive mint to celebrate fast
     service. The high end fades to near-white, deliberately
     undifferentiated — long waits are information, not alarm. */
  --w0-tint:  oklch(97% 0.030 160 / 1);   /* pale mint — same week */
  --w1-tint:  oklch(97% 0.026 150 / 1);
  --w2-tint:  oklch(97% 0.022 135 / 1);
  --w3-tint:  oklch(98% 0.014 110 / 1);   /* barely tinted */
  --w4-tint:  oklch(98% 0.012  95 / 1);
  --w5-tint:  oklch(98% 0.010  80 / 1);
  --w6-tint:  oklch(98% 0.010  70 / 1);
  --w7-tint:  oklch(98% 0.010  65 / 1);   /* essentially white */

  /* Rail — only visible at the positive end (0–2 wks). The high-wait
     rails fall to transparent so long waits never carry a warning stripe. */
  --w0-rail:  oklch(82% 0.07 165);
  --w1-rail:  oklch(83% 0.06 150);
  --w2-rail:  oklch(84% 0.04 130);
  --w3-rail:  transparent;
  --w4-rail:  transparent;
  --w5-rail:  transparent;
  --w6-rail:  transparent;
  --w7-rail:  transparent;

  --radius-card:  10px;
  --radius-chip:  999px;

  --shadow-card: 0 1px 0 rgba(30,22,69,.04), 0 8px 24px -16px rgba(30,22,69,.18);
}

/* ---- Reset / base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { color: var(--ink); }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;            /* Poppins Light — brand body weight */
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: #f3f1ee;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

h1, h2, h3 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--emp-navy);
}

a { color: var(--emp-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   PAGE SHELL
   ============================================================ */
.wait-times {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 28px 64px;
  background: transparent;
}

/* ============================================================
   FILTER CHROME  (.wt-controls)
   Hidden in print.
   ============================================================ */
.wt-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.wt-controls #wt-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-right: auto;
}

.wt-controls label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wt-controls select,
.wt-controls input[type="text"] {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dcdce2;
  border-radius: 8px;
  padding: 8px 30px 8px 12px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%234C12A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.wt-controls select:focus,
.wt-controls input[type="text"]:focus {
  outline: none;
  border-color: var(--emp-purple);
  box-shadow: 0 0 0 3px rgba(76,18,161,.14);
}

.wt-controls button,
.wt-download,
.wt-edit {
  font: 600 13px/1 'Poppins', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, transform .04s, box-shadow .12s;
}

.wt-download {
  background: var(--emp-purple);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(76,18,161,.6);
}
.wt-download:hover { background: var(--emp-purple-ink); text-decoration: none; }
.wt-download:active { transform: translateY(1px); }
.wt-download::before {
  content: "";
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 13h12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 13h12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.wt-edit {
  background: #fff;
  color: var(--emp-purple);
  border-color: #d8d1ea;
}
.wt-edit:hover { background: var(--emp-purple-50); text-decoration: none; }

/* ============================================================
   HERO / BRAND LOCKUP
   Engineering note: this assumes a <header class="wt-hero"> at the
   top of <main class="wait-times">, containing:
     <img class="wt-hero-mark" src="/static/img/empower_logo.svg">
     <p class="wt-hero-tagline">WE CHANGE LIVES</p>
     <h1 class="wt-hero-title">HCP Allied Health — Wait Times</h1>
     <p class="wt-hero-sub">National view · As at 22 May 2026</p>
   ============================================================ */
.wt-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 28px;
  row-gap: 4px;
  align-items: center;
  padding: 30px 38px;
  margin-bottom: 22px;
  background: var(--emp-gradient);
  color: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
}
.wt-hero::before {
  /* Empower "swish" — a curved gradient ribbon nodding to the
     brand's marketing collateral. Confined to upper-right so it
     never crowds the wordmark or title. */
  content: "";
  position: absolute;
  top: -40%; right: -8%;
  width: 55%; aspect-ratio: 2 / 1;
  border: 28px solid rgba(255,255,255,.10);
  border-radius: 50%;
  border-color: rgba(255,255,255,.10) transparent transparent rgba(255,255,255,.04);
  transform: rotate(-18deg);
  z-index: -1;
  pointer-events: none;
}
.wt-hero::after {
  /* faint vignette to give the band depth */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(60% 60% at 0% 100%, rgba(30,22,69,.30), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.wt-hero-mark {
  grid-row: 1 / span 2;
  height: 64px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

.wt-hero-tagline {
  grid-column: 2;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.wt-hero-title {
  grid-column: 2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
}

.wt-hero-sub {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.85);
  text-align: right;
  max-width: 240px;
}

/* ============================================================
   STATE SECTION  (.wt-state)
   ============================================================ */
.wt-state {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
  overflow: hidden;
  page-break-inside: avoid;
  break-inside: avoid;
}

.wt-state > h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--state-accent, var(--emp-purple));
  text-transform: none;
  position: relative;
}

/* state color via [data-state] */
.wt-state[data-state="VIC"] { --state-accent: var(--state-vic); }
.wt-state[data-state="NSW"] { --state-accent: var(--state-nsw); color: var(--emp-navy); }
.wt-state[data-state="QLD"] { --state-accent: var(--state-qld); }
.wt-state[data-state="WA"]  { --state-accent: var(--state-wa);  }

/* NSW is a lighter blue — keep H2 text dark for legibility */
.wt-state[data-state="NSW"] > h2 { color: var(--emp-navy); }

/* Leading state badge — the data-state value as an inset pill.
   The H2 text already names the state + region; this just adds
   a tactile per-state colour anchor at the left edge that stays
   consistent at any table width. */
.wt-state[data-state] > h2::before {
  content: attr(data-state);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 3px 10px 2px;
  border-radius: var(--radius-chip);
  background: rgba(255,255,255,.22);
  color: inherit;
  border: 1px solid rgba(255,255,255,.32);
  line-height: 1.4;
  align-self: center;
}
.wt-state[data-state="NSW"] > h2::before {
  background: rgba(30,22,69,.08);
  border-color: rgba(30,22,69,.20);
}

/* ============================================================
   TABLE
   ============================================================ */
.wt-state table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  table-layout: fixed;
}

.wt-state thead th {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  vertical-align: bottom;   /* baseline single-line + wrapped headers together */
  text-wrap: balance;       /* wrap consistently across equal-width columns */
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  text-transform: none;
  padding: 14px 8px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
  text-wrap: balance;
}

/* The first column header — service label.
   Explicit width here (combined with table-layout: fixed on .wt-state table)
   forces the browser to give every data column an identical share of the
   remaining width — otherwise it auto-distributes based on content and
   header lines wrap unevenly across siblings. */
.wt-state thead th:first-child {
  width: 14%;
  text-align: left;
  padding-left: 22px;
  color: var(--emp-purple);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wt-state tbody td {
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  position: relative;
}

/* Service name (first cell of each row) */
.wt-state tbody tr > *:first-child,
.wt-state tbody td:first-child {
  text-align: left;
  padding-left: 22px;
  font-weight: 600;
  font-size: 13px;
  color: var(--emp-navy);
  background: var(--surface-alt);
  border-right: 1px solid var(--rule);
}

.wt-state tbody tr:last-child td { border-bottom: none; }
.wt-state tbody tr:hover td:not(:first-child) { filter: brightness(0.985); }

/* Subtle column separators */
.wt-state tbody td + td { border-left: 1px solid transparent; }

/* ============================================================
   CELLS — Wait Times (numeric) view
   data-status="weeks" + data-weeks="N"
   ============================================================ */
.wt-cell { font-family: 'Montserrat', sans-serif; }

/* Numeric — common */
.wt-cell[data-status="weeks"][data-weeks] {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--emp-navy);
  background: var(--cell-tint, transparent);
}

/* Append a small "wk" suffix in the muted body face */
.wt-cell[data-status="weeks"][data-weeks]::after {
  content: " wk";
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-left: 2px;
  vertical-align: 1px;
}
/* "wks" plural for >1, "wk" for 0/1 — qualified with [data-weeks] so
   coverage-view cells (no data-weeks attribute) don't inherit a suffix. */
.wt-cell[data-status="weeks"][data-weeks="0"]::after,
.wt-cell[data-status="weeks"][data-weeks="1"]::after { content: " wk"; }
.wt-cell[data-status="weeks"][data-weeks]:not([data-weeks="0"]):not([data-weeks="1"])::after { content: " wks"; }

/* Left rail — a soft tick that gives the row a subtle warm/cool tilt
   without ever shouting urgency. */
.wt-cell[data-status="weeks"][data-weeks]::before {
  content: "";
  position: absolute;
  left: 0; top: 28%;
  width: 2px; height: 44%;
  background: var(--cell-rail, transparent);
  border-radius: 0 2px 2px 0;
  opacity: 0.7;
}

/* Ramp: green (0) → amber → red (7+) */
.wt-cell[data-weeks="0"] { --cell-tint: var(--w0-tint); --cell-rail: var(--w0-rail); }
.wt-cell[data-weeks="1"] { --cell-tint: var(--w1-tint); --cell-rail: var(--w1-rail); }
.wt-cell[data-weeks="2"] { --cell-tint: var(--w2-tint); --cell-rail: var(--w2-rail); }
.wt-cell[data-weeks="3"] { --cell-tint: var(--w3-tint); --cell-rail: var(--w3-rail); }
.wt-cell[data-weeks="4"] { --cell-tint: var(--w4-tint); --cell-rail: var(--w4-rail); }
.wt-cell[data-weeks="5"] { --cell-tint: var(--w5-tint); --cell-rail: var(--w5-rail); }
.wt-cell[data-weeks="6"] { --cell-tint: var(--w6-tint); --cell-rail: var(--w6-rail); }
.wt-cell[data-weeks="7"],
.wt-cell[data-weeks="8"],
.wt-cell[data-weeks="9"],
.wt-cell[data-weeks="10"],
.wt-cell[data-weeks="11"],
.wt-cell[data-weeks="12"] { --cell-tint: var(--w7-tint); --cell-rail: var(--w7-rail); }

/* ============================================================
   CELLS — Status tokens
   ============================================================ */
.wt-cell[data-status="telehealth"],
.wt-cell[data-status="not-available"],
.wt-cell[data-status="waitlist-closed"] {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--ink-soft);
}

/* Telehealth — soft blue chip with wave glyph */
.wt-cell[data-status="telehealth"] {
  color: #1a6b86;
  background: var(--emp-blue-50);
}
.wt-cell[data-status="telehealth"]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 11c1.5-2 3-2 4 0s2.5 2 4 0 2.5-2 4 0M1 7c1.5-2 3-2 4 0s2.5 2 4 0 2.5-2 4 0' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 11c1.5-2 3-2 4 0s2.5 2 4 0 2.5-2 4 0M1 7c1.5-2 3-2 4 0s2.5 2 4 0 2.5-2 4 0' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Not Available — muted neutral, em dash style */
.wt-cell[data-status="not-available"] {
  color: var(--ink-mute);
  background: transparent;
  font-style: italic;
}
.wt-cell[data-status="not-available"]::before {
  content: "—";
  display: inline-block;
  margin-right: 6px;
  color: #c9c5d4;
  font-style: normal;
  font-weight: 700;
}
.wt-cell.wt-missing { color: #c9c5d4; font-size: 16px; }
.wt-cell.wt-missing::before { content: none; }

/* Waitlist Temporarily Closed — neutral grey with a small clock glyph.
   Sits at the same visual weight as Not Available; the clock is the
   only thing distinguishing it. No warm tone, no warning color. */
.wt-cell[data-status="waitlist-closed"] {
  color: var(--ink-mute);
  background: #f4f4f6;
  font-style: italic;
}
.wt-cell[data-status="waitlist-closed"]::before {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  background: #b0adba;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.5V8l2.2 1.4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.5V8l2.2 1.4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

/* Immediate Availability — refined positive cue. No chip, no ring, no
   pulse. Just deep emerald type with a small filled dot prefix, sitting
   in the same restrained register as the other status tokens. The dot
   is what carries the positive signal, not the cell background. */
.wt-cell[data-status="immediate"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: oklch(42% 0.13 168);
  background: transparent;
  text-wrap: balance;
}
.wt-cell[data-status="immediate"]::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  vertical-align: 1px;
  border-radius: 50%;
  background: oklch(62% 0.16 168);
  box-shadow: 0 0 0 3px oklch(85% 0.10 168 / 0.45);
}

/* ============================================================
   SERVICE COVERAGE VIEW
   Cells use the same data-status values but "weeks" cells (without
   a numeric data-weeks attribute) read as "In Person" — we replace
   the text label with a solid check glyph that matches the
   per-row identity used in the wait-times view.
   ============================================================ */
.wt-cell[data-status="weeks"]:not([data-weeks]) {
  font-size: 0;            /* hide "In Person" label, replace with glyph */
  color: transparent;
  background: transparent;
}
.wt-cell[data-status="weeks"]:not([data-weeks])::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--emp-purple);
  -webkit-mask: none; mask: none;
  position: relative;
  vertical-align: middle;
}
.wt-cell[data-status="weeks"]:not([data-weeks])::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px; height: 12px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* ============================================================
   FOOTER
   ============================================================ */
.wt-footer {
  margin-top: 24px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  page-break-inside: avoid;
  break-inside: avoid;
}

.wt-footer::before {
  /* The brand gradient strip Empower has used for years */
  content: "";
  display: block;
  height: 4px;
  background: var(--emp-gradient);
}

.wt-footer > * {
  margin: 0;
  padding-left: 28px;
  padding-right: 28px;
}

.wt-telehealth-note {
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  color: var(--emp-navy);
  background: linear-gradient(0deg, transparent, rgba(91,194,231,.10));
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.wt-telehealth-note strong { font-weight: 600; }
.wt-telehealth-note::before {
  content: "";
  position: absolute;
  left: 14px; top: 22px;
  width: 4px; height: calc(100% - 36px);
  background: var(--emp-blue);
  border-radius: 2px;
}

.wt-disclaimer {
  padding-top: 14px;
  padding-bottom: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Legend — inline "Term = Description" pairs */
.wt-legend {
  /* 2-column grid: term (with dot glyph) | "= description".
     One pair per row, like the original Empower partner-PDFs. Reads cleaner
     than the inline flow because the eye has a fixed column to anchor on. */
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 4px 14px;
  padding-top: 8px;
  padding-bottom: 12px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.wt-legend dt {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--emp-navy);
}
.wt-legend dt::before {
  /* small inline glyph to echo the in-table tokens */
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--ink-mute);
}
/* per-token legend swatch colors — match the in-cell glyphs.
   Convention: dt order is [Immediate?, Not Available, Waitlist Temporarily Closed]
   so waitlist is always last-of-type. */
.wt-legend dt:last-of-type::before { background: #b0adba; }                /* waitlist temporarily closed */
.wt-legend dt:nth-last-of-type(2)::before { background: var(--ink-mute); } /* not available */
.wt-legend dt:nth-of-type(1):nth-last-of-type(n+3)::before {               /* immediate (only when 3+ items) */
  background: oklch(62% 0.16 168);
}
.wt-legend dd {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--ink-soft);
}
.wt-legend dd::before { content: "= "; color: var(--ink-mute); margin-right: 2px; }
.wt-legend dt:not(:first-of-type) { margin-left: 0; }

/* Region-map link */
.wt-region-map {
  padding-top: 4px;
  padding-bottom: 14px;
  font-size: 11px;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule);
}
.wt-region-map a {
  color: var(--emp-purple);
  font-weight: 500;
}

/* Contact strip */
.wt-contact {
  padding-top: 14px;
  padding-bottom: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--emp-navy);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.wt-contact::before {
  content: "";
  flex: 0 0 18px;
  width: 18px; height: 18px;
  background: var(--emp-purple);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 2.5h2l1.5 3-1.5 1c.8 1.6 2 2.8 3.5 3.5l1-1.5 3 1.5v2c0 .8-.7 1.5-1.5 1.5C5.5 13.5 2.5 10.5 2.5 4c0-.8.7-1.5 1.5-1.5z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 2.5h2l1.5 3-1.5 1c.8 1.6 2 2.8 3.5 3.5l1-1.5 3 1.5v2c0 .8-.7 1.5-1.5 1.5C5.5 13.5 2.5 10.5 2.5 4c0-.8.7-1.5 1.5-1.5z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.wt-updated {
  padding-top: 6px;
  padding-bottom: 16px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}

/* ============================================================
   OPTIONAL CREDENTIALS  (not in the locked contract — engineering
   may add an <img class="wt-cred-ndis"> inside .wt-contact when
   ?program=ndis. CSS is here so the visual works the moment they
   wire it up.)
   ============================================================ */
.wt-contact .wt-cred-ndis {
  height: 28px;
  width: auto;
  margin-left: auto;
  opacity: 0.85;
}
.wt-contact { justify-content: flex-start; }
.wt-contact .wt-cred-ndis ~ * { /* nothing */ }

/* ============================================================
   WIDE TABLES — NSW (14 cols), WA (10 cols)
   ============================================================ */
.wt-state[data-state="NSW"] table,
.wt-state[data-state="WA"] table {
  font-size: 12px;
}
.wt-state[data-state="NSW"] thead th,
.wt-state[data-state="WA"] thead th {
  font-size: 10px;
  padding: 12px 4px 10px;
}
.wt-state[data-state="NSW"] tbody td,
.wt-state[data-state="WA"] tbody td {
  padding: 10px 4px;
}
.wt-state[data-state="NSW"] .wt-cell[data-status="weeks"][data-weeks],
.wt-state[data-state="WA"] .wt-cell[data-status="weeks"][data-weeks] {
  font-size: 16px;
}
.wt-state[data-state="NSW"] .wt-cell[data-status="telehealth"],
.wt-state[data-state="NSW"] .wt-cell[data-status="not-available"],
.wt-state[data-state="NSW"] .wt-cell[data-status="waitlist-closed"],
.wt-state[data-state="WA"] .wt-cell[data-status="telehealth"],
.wt-state[data-state="WA"] .wt-cell[data-status="not-available"],
.wt-state[data-state="WA"] .wt-cell[data-status="waitlist-closed"] {
  font-size: 10px;
}
.wt-state[data-state="NSW"] tbody td:first-child,
.wt-state[data-state="WA"] tbody td:first-child {
  padding-left: 14px;
  font-size: 12px;
}

/* When a state column count is enormous, suppress the "wk" suffix
   so digits don't crowd. Engineering note: there is no column-count
   in markup, so this targets NSW (only state with 14 cols). */
.wt-state[data-state="NSW"] .wt-cell[data-status="weeks"][data-weeks]::after {
  content: "";
}

/* ============================================================
   SCREEN-ONLY POLISH
   ============================================================ */
@media (max-width: 900px) {
  .wt-hero { padding: 22px 20px; column-gap: 16px; }
  .wt-hero-title { font-size: 22px; }
  .wt-hero-mark { height: 44px; }
  .wt-hero-sub { display: none; }
  .wait-times { padding: 16px 14px 48px; }
  .wt-state > h2 { font-size: 14px; padding: 12px 16px; }
  .wt-state thead th { font-size: 10px; }
}

/* ---- App-side runtime overrides (not designer-authored) ------------- */
/* Hide rows where NO cell shows positive availability (i.e. every cell is
   Not Available OR Waitlist Temporarily Closed). A row stays visible if it
   contains at least one cell with status:
     - weeks      (numeric Wait Times view, e.g. "2 wks")
     - immediate  (0 weeks special-case)
     - telehealth (chip)
   Works for both Wait Times AND Service Coverage views (Service Coverage
   cells use status "weeks" without data-weeks for in-person; "telehealth"
   for telehealth; "not-available" for everything else - so the rule
   naturally handles both). Editor's data path is unaffected. */
/* Scoped to body:not(.wt-admin) so the editor (which has body.wt-admin and
   uses <select> children with no .wt-cell class) keeps every row visible -
   editors need to see + edit all rows regardless of current values. */
body:not(.wt-admin) .wt-state tbody tr:not(:has(.wt-cell[data-status="weeks"],
                                                  .wt-cell[data-status="immediate"],
                                                  .wt-cell[data-status="telehealth"])) {
  display: none;
}

/* ---- Multi-state checkbox filter (replaces the State <select>) ------- */
.wt-state-filter { align-items: center; }
.wt-state-checks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin-left: 6px;
}
.wt-state-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #dcdce2;
  padding: 5px 9px 4px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wt-state-check:hover { border-color: var(--emp-purple); }
.wt-state-check input { margin: 0; accent-color: var(--emp-purple); cursor: pointer; }
.wt-state-check:has(input:checked) {
  background: var(--emp-purple-50);
  border-color: var(--emp-purple);
  color: var(--emp-purple-ink);
}

/* ============================================================
   EMBED MODE  (body.embed-mode)
   The public /public/wait-times page, iframed on the marketing
   site. This renders the SAME in-app web design as the SSO view
   (gradient hero, badge grid, footer) — the only difference from
   the normal page is that there's no host browser/app shell around
   it, so we drop the page-canvas chrome: white background to blend
   with the host, no max-width cap so it fills whatever width the
   partner's container gives it, and trimmed outer padding so the
   hero sits flush near the top of the iframe instead of floating
   on a beige margin. (This is the clean alternative to embedding a
   PDF, whose browser viewer chrome can't be styled away.)
   ============================================================ */
body.embed-mode {
  background: #fff;
}
body.embed-mode .wait-times {
  max-width: none;
  padding: 14px 20px 28px;
}
/* The host page owns the surrounding whitespace; the embed shouldn't add
   its own bottom void below the footer. */
body.embed-mode .wt-footer {
  margin-bottom: 0;
}