/*
  Clinical, the Lumen Health theme.

  The fourth of four, and it had to be visibly different from the other three without being
  decorative. Ledger is a printed document. Control Tower is a screen you glance at all day.
  Institutional is a credit committee pack that expects to be checked. This one is a briefing
  for a clinician and a finance director sitting in the same room, so it is calm, white,
  widely spaced and large. Nothing is dense. Nothing is rounded past 6px. Nothing moves.

  The practical constraint that shaped it: a practice manager reads this on a laptop between
  patients, in a room with the blinds open. So the text is 16px, the tiles are large enough
  to read across a desk, and every figure has a table twin.

  Four separate colour jobs, and they are not interchangeable:

    Categorical  sites, payment types, rejection classes. Validated for lightness band,
                 chroma floor, colour vision separation and surface contrast. Worst adjacent
                 pair clears delta E 25.4 in normal vision and 8.3 under tritanopia.
    Fill ramp    the weekday grid. Slot fill is an ordered magnitude, so it takes a single
                 hue running light to dark, validated as an ordinal ramp: monotone lightness,
                 a visible gap between every step, and a light end that still clears white.
                 The ramp starts at a medium teal rather than near white on purpose: below
                 2:1 against the surface a cell stops reading as a cell.
    Wait ramp    the same grid measured the other way. A separate warm hue, because waiting
                 time and slot fill are different quantities and sharing a ramp would invite
                 the reader to compare them as if they were one.
    Status       good, watch, poor. Reserved, never reused as a fourth series, and always
                 accompanied by a word.
*/

:root {
  --paper:      #F2F6F7;
  --paper-2:    #E8EFF1;
  --panel:      #FFFFFF;
  --ink:        #10222B;
  --ink-2:      #44606C;
  --ink-3:      #6E8791;
  --rule:       #DEE7EA;
  --rule-strong:#C3D2D7;
  --accent:     #00919A;
  --accent-ink: #006E76;

  /* Categorical, fixed order, never cycled */
  --s1: #00919A;   /* teal   */
  --s2: #C0521C;   /* rust   */
  --s3: #6B46C6;   /* violet */
  --s4: #57802C;   /* moss   */

  /* Slot fill, low to high. Ordered dimension, single hue. */
  --f1: #83BEC6;
  --f2: #62AAB6;
  --f3: #4395A3;
  --f4: #277D8E;
  --f5: #126474;
  --f6: #004C59;

  /* Waiting time, low to high. A different quantity, so a different hue. */
  --w1: #E3A882;
  --w2: #D48E63;
  --w3: #C17447;
  --w4: #A95A2D;
  --w5: #8E4218;
  --w6: #732706;

  /* Status. Reserved, and never used as a series colour. */
  --pos:  #1C7A44;
  --warn: #9A6200;
  --neg:  #B3261E;
  --neutral: #44606C;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --measure: 1200px;

  /* charts.js is shared across the four demos and reads the token names the first one
     established. Aliasing here keeps one chart library working against four themes. */
  --font-serif: var(--font-sans);
  --paper-3: var(--paper-2);
}

* { box-sizing: border-box; }

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

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 2.5rem; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  padding: 2.5rem 0 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-strong);
}
.masthead h1 {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.masthead .sub { color: var(--ink-2); font-size: 0.95rem; margin: 0; }
.masthead .meta {
  text-align: right;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-family: var(--font-mono);
  line-height: 1.7;
}

.freshness { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; color: var(--ink-2); }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.freshness.is-current { color: var(--pos); }
.freshness.is-current .fresh-dot { background: var(--pos); }
.freshness.is-lagging { color: var(--warn); }
.freshness.is-lagging .fresh-dot { background: var(--warn); }
.freshness.is-stale { color: var(--neg); }
.freshness.is-stale .fresh-dot { background: var(--neg); }

/* ---------------------------------------------------------------- sections */

section { margin: 0 0 4rem; }

.section-head { margin-bottom: 1.1rem; display: flex; align-items: baseline; gap: 0.9rem; }
.section-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-ink);
  letter-spacing: 0.1em;
  background: var(--paper-2);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}
.section-head h2 {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.lede { color: var(--ink-2); max-width: 74ch; margin: 0 0 1.6rem; font-size: 1.02rem; }
.lede b, .lede strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- hero and tiles */

.hero {
  background: var(--panel);
  border-radius: 6px;
  padding: 2rem 2.25rem;
  margin: 1.6rem 0;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  flex-wrap: wrap;
  border-left: 4px solid var(--neg);
}
.hero-value {
  font-size: 4.1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--neg);
}
.hero-label { color: var(--ink-2); font-size: 1.05rem; max-width: 36ch; }
.hero.is-cost { border-left-color: var(--s2); }
.hero.is-cost .hero-value { color: var(--s2); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin: 1.8rem 0;
}
.tile { padding: 1.1rem 1.3rem; background: var(--panel); }
.tile-label {
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.tile-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
.tile-delta { font-size: 0.82rem; color: var(--ink-3); margin-top: 0.25rem; }
.tile-delta .up { color: var(--pos); }
.tile-delta .down { color: var(--neg); }

/* ---------------------------------------------------------------- figures */

.figure {
  background: var(--panel);
  border-radius: 6px;
  padding: 1.4rem 1.6rem 1.2rem;
  margin: 1.6rem 0;
}
.figure-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.2rem; }
.figure-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0; }
.figure-note { color: var(--ink-3); font-size: 0.87rem; margin: 0 0 1rem; max-width: 80ch; }

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; font-size: 0.85rem; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend-key { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend-key.line { height: 2px; width: 18px; border-radius: 1px; }

/* A continuous scale needs a scale legend, not a set of swatches. */
.scale-legend { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 1rem; font-size: 0.82rem; color: var(--ink-3); }
.scale-swatches { display: flex; gap: 2px; }
.scale-swatches span { width: 28px; height: 12px; border-radius: 2px; }

.tbl-toggle {
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.tbl-toggle:hover { color: var(--accent-ink); border-color: var(--accent); }

/* ---------------------------------------------------------------- the weekday grid */

.grid-wrap { overflow-x: auto; }
table.heat { border-collapse: separate; border-spacing: 3px; width: 100%; margin: 0.4rem 0 0; background: none; }
table.heat th {
  background: none;
  border: none;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 0 0 0.3rem;
  text-align: center;
  white-space: nowrap;
}
table.heat th.rowhead { text-align: right; padding-right: 0.7rem; font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
table.heat td {
  border: none;
  border-radius: 4px;
  padding: 0.6rem 0.2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 500;
  color: #FFFFFF;
  cursor: default;
  min-width: 62px;
}
table.heat td.on-light { color: var(--ink); }
table.heat td.closed { background: var(--paper-2); color: var(--ink-3); font-weight: 400; }
table.heat tbody tr:nth-child(even) { background: none; }
table.heat td:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------------------------------------------------------------- tables */

table { border-collapse: collapse; width: 100%; font-size: 0.89rem; margin: 0.6rem 0 0; background: var(--panel); }
caption { text-align: left; color: var(--ink-3); font-size: 0.82rem; padding-bottom: 0.5rem; }
th, td { padding: 0.5rem 0.85rem; text-align: left; border-bottom: 1px solid var(--rule); }
th {
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
  background: var(--panel);
}
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: var(--paper); }
tr.total td { border-top: 1px solid var(--rule-strong); border-bottom: none; font-weight: 600; background: var(--paper-2); }
.neg { color: var(--neg); }
.pos { color: var(--pos); }
.warn { color: var(--warn); }
.muted { color: var(--ink-3); }
.data-table[hidden] { display: none; }

.flag {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

.callout {
  border-left: 4px solid var(--accent);
  background: var(--panel);
  border-radius: 0 6px 6px 0;
  padding: 1.1rem 1.35rem;
  margin: 1.5rem 0;
  font-size: 0.97rem;
  color: var(--ink-2);
}
.callout b { color: var(--ink); }
.callout.caution { border-left-color: var(--neg); }
.callout.method { border-left-color: var(--s3); }

/* ---------------------------------------------------------------- tooltip */

.tip {
  position: fixed; pointer-events: none; z-index: 40;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 300px;
  opacity: 0;
  transition: opacity 0.1s;
  box-shadow: 0 4px 16px rgb(16 34 43 / 0.12);
}
.tip[data-show] { opacity: 1; }
.tip b { font-weight: 600; }
.tip .tip-row { display: flex; justify-content: space-between; gap: 1.3rem; }
.tip .tip-row span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- states */

.loading { padding: 6rem 0; text-align: center; color: var(--ink-3); }
.err { border-left: 4px solid var(--neg); border-radius: 0 6px 6px 0; padding: 1rem 1.3rem; background: var(--panel); margin: 2rem 0; }

footer {
  border-top: 1px solid var(--rule-strong);
  margin-top: 3.5rem;
  padding: 1.8rem 0 4rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}
footer p { margin: 0 0 0.7rem; max-width: 82ch; }
.badge {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.08rem 0.5rem;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .wrap { padding: 0 1.1rem; }
  body { font-size: 15px; }
  .hero { padding: 1.4rem 1.5rem; }
  .hero-value { font-size: 2.8rem; }
  .masthead .meta { text-align: left; }
  .figure { padding: 1.1rem 1.1rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }