/* Ported verbatim from the Python report's render.py stylesheet.
 * Every rule here was arrived at against real pages on a real phone and
 * a real A4 printer; the comments explain which bug each one fixes.
 * Do not 'tidy' a rule without reading its comment first. */
/* --- Cairo, self-hosted --------------------------------------------------
   Served from /insights/ beside the reports rather than linked from Google,
   so opening a page about a child's medical data never issues a third-party
   request. Absolute paths because /insights (no trailing slash) is a valid URL
   and a relative href would resolve against / and 404.

   `local()` first: a reader who already has Cairo installed downloads nothing.
   The unicode-range split means the English pages never fetch the Arabic file.
   Cairo ships as a variable font, so one file covers the whole weight axis.
   Licence: SIL OFL 1.1 — see insights/fonts/README.md. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: local('Cairo'), url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: local('Cairo'), url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0369a1;
  --grid: #e2e8f0;
  --band-outer: rgba(14,165,233,0.14);
  --band-inner: rgba(14,165,233,0.30);
  --target: rgba(21,128,61,0.10);
  --warn-bg: #fffbeb;
  --warn-border: #f59e0b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120;
    --surface: #111827;
    --border: #1f2937;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --accent: #38bdf8;
    --grid: #1f2937;
    --band-outer: rgba(56,189,248,0.14);
    --band-inner: rgba(56,189,248,0.28);
    --target: rgba(34,197,94,0.12);
    --warn-bg: #27200a;
    --warn-border: #b45309;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #111827;
  --border: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --grid: #1f2937;
  --band-outer: rgba(56,189,248,0.14);
  --band-inner: rgba(56,189,248,0.28);
  --target: rgba(34,197,94,0.12);
  --warn-bg: #27200a;
  --warn-border: #b45309;
}

* { box-sizing: border-box; }
/* A percentage rather than a px value: everything below is sized in rem, so
   this one number scales the whole page, and using % keeps it multiplied by
   whatever base size the reader has set in their own browser instead of
   overriding it. 106.25% is 17px against a stock 16px default. */
html { font-size: 106.25%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* Cairo first, then system fonts that ship Arabic glyphs. If the woff2 files
   are ever missing the page degrades to the system stack rather than breaking.

   PORTING NOTE — the three `html[lang="ar"]` selectors in this file are now
   `.wrap[lang="ar"]`. Not a restyle: every declaration is unchanged, and the
   only thing that moved is which element the attribute is read from. The Python
   generated one document per language and could put lang on <html>; a Blazor
   WASM app serves ONE static index.html for all six routes, so the root element
   cannot carry the language without JavaScript reaching above <body> — and
   custom JS is exactly what this port is not allowed to add. `.wrap` already
   carries lang and dir (ReportShell sets both), every rendered element lives
   inside it, and font/line-height inherit down from there identically.
   Scoped to `.wrap[...]` rather than a bare `[lang="ar"]` on purpose: the
   language-switch anchor carries lang="ar" on the ENGLISH page, and a bare
   attribute selector would restyle that one link. */
.wrap[lang="ar"] {
  font-family: 'Cairo', "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic",
               "Geeza Pro", "Arabic Typesetting", system-ui, sans-serif;
  line-height: 1.95;
  /* Cairo's Arabic glyphs run slightly small against Latin digits at the same
     size, and this page mixes the two constantly (٪, mg/dL, dates). */
  font-size: 1.05rem;
}
.wrap[lang="ar"] .metric .value,
.wrap[lang="ar"] .verdict { letter-spacing: 0; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }
header { margin-bottom: 28px; }
.headbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
h1 { font-size: 1.65rem; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; margin: 0 0 8px; }
.sub { color: var(--muted); font-size: 0.9rem; }

.langswitch {
  flex: none;
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  white-space: nowrap;
}
.langswitch:hover { border-color: var(--accent); }

section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.section-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 16px; }

/* Sits at the foot of the report, immediately above the footer. It keeps the
   full amber panel, the 4px inline-start rule and full body size on purpose: a
   caveat placed last is the one most likely to be skimmed as boilerplate, so it
   must not also look like boilerplate. The margin moved from the bottom to the
   top now that it follows the content instead of the header — it collapses with
   the last section's 20px margin-bottom, giving a 28px gap above. */
.disclaimer {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-inline-start-width: 4px;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 28px;
  font-size: 0.95rem;
}
.disclaimer strong { display: block; margin-bottom: 4px; }
.disclaimer p { margin: 8px 0 0; color: var(--muted); }
/* The one-line pointer to the caveat, kept on the first screen. Coloured like
   the warning border rather than the link accent so it reads as a caution and
   not as navigation. */
.caveat-link { margin-top: 4px; }
.caveat-link a { color: var(--warn-border); text-underline-offset: 2px; }

.scroll { overflow-x: auto; }
svg { display: block; max-width: 100%; height: auto; }

/* --- Chart shape on a phone ----------------------------------------------
   Every chart carries a viewBox and no width/height, so it renders at the
   width of its column with its height taken from the viewBox ratio. The
   charts are drawn 1020 units wide because the desktop column measures
   1018px: one unit is one pixel, and font-size="12" means 12px. In a 305px
   phone column that same drawing is scaled to 0.30 — a 90px-tall AGP with
   3.6px axis numbers.

   A viewBox is an attribute, so no media query can swap it. Each chart is
   therefore emitted twice — the wide drawing, and a redraw at phone
   proportions — and CSS shows one. The phone version is a real re-layout at
   ~320 units wide, not a stretch, so one unit is one pixel there too and
   every label keeps its size and its position. */
.chart-tall { display: none; }
@media screen and (max-width: 640px) {
  .chart-wide { display: none; }
  .chart-tall { display: block; }
  /* Past a phone's width the portrait redraw would keep growing — a 570px
     column would make a 475px-tall day-by-day. Cap it and centre it. */
  .chart-tall svg { max-width: 420px; margin-inline: auto; }
}

/* --- Named chart axes -----------------------------------------------------
   Both axes of every 2-D chart are named in words, above and below the
   drawing. An unlabelled axis is meaningless to the person this report is
   written for.

   The names are HTML, not SVG <text>: the wide drawing is 1020 units in a
   ~305px phone column and the narrow redraw is 320 units in the same column,
   so a label sized for one is wrong in the other — and there is only one set
   of axis names. Out here the caption is a real 0.8rem in both, and follows
   whatever base size the reader has set in their own browser.

   Horizontal in both places: the vertical axis gets a caption above the plot
   rather than rotated text beside it. The charts carry direction="ltr" so the
   time axis matches Nightscout and AAPS, and a rotated Arabic run inheriting
   that direction would reorder around its own digits. A caption in normal
   flow has no such failure mode, and text-align:start puts it on the correct
   edge in both languages by itself. */
.chartbox { margin-top: 2px; }
.axis {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: start;
}
.axis b { color: var(--text); font-weight: 600; }
.axis-y { margin-bottom: 6px; }
.axis-x { margin-top: 6px; }

table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th, td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Cells holding prose rather than a value must wrap. Left as nowrap, the
   deviation table's explanatory first column rendered 636px wide and forced
   609px of horizontal scrolling on a phone. */
th.txt, td.txt { white-space: normal; min-width: 9rem; }
/* The meal table has the longest headings and the narrowest values — its "no. of
   meals" column is a single digit under a two-word heading, so nowrap made the
   heading set the column width. Letting headings and the meal-window label wrap
   drops the table from 356px to ~266px at 375px wide: no sideways swipe to reach
   the verdict. Values stay nowrap so numbers never split. */
/* --- The meal log, the page a clinician actually reads -------------------
   A day header row, then one row per meal, then an indented row per correction
   that followed it. Nested rather than one very wide row per meal: a meal can
   have no corrections or three, and fixed correction columns would be mostly
   empty and far too wide for A4. */
.meallog { font-size: 0.95rem; }
.meallog td, .meallog th { padding: 7px 9px; vertical-align: top; }
.meallog .daybreak td {
  background: var(--surface-2, rgba(127, 127, 127, 0.13));
  font-weight: 700; letter-spacing: 0.02em; padding-top: 11px;
}
.meallog .corrrow td { color: var(--muted); border-top: 0; }
.meallog .corrrow td:first-child { padding-inline-start: 18px; }
.meallog .mealrow td { border-top: 1px solid var(--border); }
/* Carbohydrate that was recorded but is not counted as a meal — a hypo
   treatment, or a small amount given without insulin. Without a visual
   difference the page will read a 5 g rescue as a fifth meal. Muted and italic
   does that: the meal rows are upright and full-strength, so the greyed italic
   run reads as an aside at a glance. It keeps .mealrow's top border and
   page-break rules because it IS a top-level row — it is not indented like
   .corrrow, which would say it hangs off the meal above it, and that is exactly
   what it does not do. Colour is not the only cue (the label says so too), so
   this survives a monochrome print and a colour-blind reader; the print block
   below redefines --muted and --border to ink values, so the grey, the italic
   and the dotted rule all reach paper. border-inline-start, not -left, keeps
   the rule at the row's start in Arabic. Verbatim from render.py's stylesheet:
   the two pages must not differ, and the note above the table tells the reader
   to look for grey. */
.meallog .notmeal td { color: var(--muted); font-style: italic; }
.meallog .notmeal td:first-child { border-inline-start: 3px dotted var(--border); }
.bg-high { color: #f97316; font-weight: 600; }
.bg-low  { color: #dc2626; font-weight: 700; }
.bg-ok   { color: var(--text); }

.mealtbl th { white-space: normal; }
/* Text cells wrap, value cells do not: the "when she ate" cell carries a time
   span and a sentence under it, and at nowrap that one column was 157px of a
   305px phone screen and pushed the whole table into a sideways scroll.
   .num is excluded so a number can never be split across two lines. */
.mealtbl td:not(.num) { white-space: normal; }
th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }
/* Do NOT add `direction: ltr` here to fix a stray minus sign — measured, it
   breaks two things at once: `text-align: end` then resolves against ltr and
   the numbers jump to the RIGHT (start) edge in Arabic, and cells that mix a
   number with an Arabic unit ("46 دقيقة", "1.25 وحدة") flip to the wrong
   order. Wrap the number itself in iso() / .num-inline instead. */
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.87rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.pill-ok { background: rgba(21,128,61,0.15); color: #15803d; }
.pill-warn { background: rgba(217,119,6,0.16); color: #b45309; }
.pill-bad { background: rgba(220,38,38,0.15); color: #dc2626; }
.pill-neutral { background: rgba(100,116,139,0.16); color: var(--muted); }

.finding {
  border-inline-start: 3px solid var(--accent);
  padding-block: 4px;
  padding-inline-start: 14px;
  margin: 14px 0;
}
.finding p { margin: 5px 0 0; color: var(--muted); font-size: 0.93rem; }

/* --- Explanation popups --------------------------------------------------
   Built on the native HTML popover API, not a hover tooltip and not an inline
   <details>. Three reasons that matters here:

     * Hover does not exist on a phone, which is where a parent will read this.
     * Popovers render in the browser's top layer, so they are never clipped by
       the `overflow: auto` wrappers around the tables and charts.
     * Tap-outside-to-dismiss and Escape-to-close come free, as does focus
       handling — with no JavaScript on the page at all.

   Where the API is unsupported the badge is hidden rather than left as a dead
   button; the full glossary at the foot of the page still carries every term,
   so no explanation is ever unreachable. */
.tip-btn {
  display: none;
  align-items: center;
  justify-content: center;
  /* 20px is still modest against a 44px ideal tap target, but this sits inline
     inside running text and a larger circle disrupts the line. Paired with the
     bigger body size it is comfortably hittable. */
  width: 20px; height: 20px;
  padding: 0;
  margin-inline-start: 6px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 12.5px; font-weight: 700; line-height: 1;
  font-family: ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  flex: none;
}
/* The Arabic badge is ؟ (U+061F), an Arabic letter — the Latin-only stack
   above would not serve it. Inherit the page stack so it comes from Cairo,
   whose Arabic subset already covers U+0600-06FF. */
.wrap[lang="ar"] .tip-btn { font-family: inherit; }
.tip-btn:hover { border-color: var(--accent); color: var(--accent); }
.tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tip-pop { display: none; }

@supports selector(:popover-open) {
  .tip-btn { display: inline-flex; }

  .tip-pop {
    /* The UA already centres a popover with position:fixed; inset:0; margin:auto */
    width: min(92vw, 430px);
    max-height: 78vh;
    overflow-y: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.30);
    /* Reset whatever the heading or table header imposed on the trigger. */
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.78;
    text-align: start;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
  }
  /* Deliberately no open/close animation.
     An earlier version faded in with `@starting-style` and a discrete `display`
     transition. Under any condition where the transition does not advance —
     a backgrounded or non-compositing tab was reproducible — the popup stayed
     at opacity 0 while still computing to display:block, leaving an invisible
     full-width overlay sitting over the page and swallowing taps. On a report a
     parent may open one-handed at 3am, a hard show/hide is worth more than a
     fade. */
  .tip-pop:popover-open { display: block; }
  .tip-pop::backdrop { background: rgba(15, 23, 42, 0.5); }
}

.tip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.tip-head h4 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.tip-body { margin: 0; padding: 14px 18px 18px; color: var(--muted); }
.tip-close {
  flex: none;
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--muted);
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.tip-close:hover { border-color: var(--accent); color: var(--accent); }
.tip-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.newhere {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 20px;
  font-size: 0.93rem;
  color: var(--muted);
}
.newhere strong { color: var(--text); }

/* --- Status card ---------------------------------------------------------
   The whole point of the redesign: the first screen must answer "how is it
   going, and is there anything to do?" without scrolling. Everything below it
   is evidence for this card. */
.status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin-bottom: 20px;
}
.verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.36rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.verdict .dot {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  align-self: center;
}
.verdict-ok    .dot { background: #15803d; }
.verdict-watch .dot { background: #d97706; }
.verdict-alert .dot { background: #dc2626; }
.verdict-none  .dot { background: var(--muted); }
.status-sub { color: var(--muted); font-size: 0.91rem; margin: 0 0 16px; }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.metric {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  min-width: 0;
}
.metric .label {
  display: flex; align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.35;
}
.metric .value {
  font-size: 1.62rem; font-weight: 600; line-height: 1.25; margin-top: 4px;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.metric .value small { font-size: 0.82rem; font-weight: 400; color: var(--muted); }
/* isolate: keeps "target >70%" from being reordered by the bidi algorithm. */
.metric .target { color: var(--muted); font-size: 0.8rem; margin-top: 2px; unicode-bidi: isolate; }

.trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.82rem; font-weight: 600;
  margin-inline-start: 7px;
  vertical-align: middle;
  unicode-bidi: isolate;
}
.trend-good { color: #15803d; }
.trend-bad  { color: #b45309; }
.trend-flat { color: var(--muted); }

/* --- Progressive disclosure ---------------------------------------------- */
.more { margin-top: 14px; }
.more > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  font-size: 0.88rem; font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ""; }
.more > summary::after { content: "\25be"; font-size: 0.7em; }
.more[open] > summary::after { content: "\25b4"; }
.more > summary:hover { border-color: var(--accent); }
.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more > *:not(summary) { margin-top: 14px; }

.glossary-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
}
.glossary-link:hover { text-decoration: underline; }

/* --- Narrow screens -------------------------------------------------------
   Columns marked .opt are secondary. On a phone they are dropped rather than
   pushed off-screen behind a horizontal scrollbar nobody discovers — the
   widest table needed 1137px inside a 294px column before this. */
@media (max-width: 640px) {
  .wrap { padding: 20px 14px 60px; }
  .metrics { gap: 8px; }
  .metric { padding: 9px 10px; }
  .metric .value { font-size: 1.4rem; }
  .metric .label { font-size: 0.76rem; letter-spacing: 0.01em; }
  th.opt, td.opt { display: none; }
  th, td { padding: 7px 8px; }
  .verdict { font-size: 1.2rem; }
}

.collecting {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.93rem;
}
.collecting strong { display: block; margin-bottom: 5px; }
.collecting p { margin: 0; color: var(--muted); line-height: 1.72; }

.glossary-group { margin-bottom: 26px; }
.glossary-group > h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.term { margin-bottom: 15px; }
.term dt { font-weight: 600; margin-bottom: 3px; }
.term dd { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.75; max-width: 70ch; }

/* A numeric or technical token: a date, a clock time, a signed value, a
   schedule. `isolate` alone is NOT enough in RTL — an isolate keeps the token
   from disturbing its neighbours, but its own base direction is still the
   inherited `rtl`. A leading "+" or "-" is bidi class ES; with no European
   number to its left, rule W6 turns it into ON and N1 then resolves it to R,
   so it takes the RTL level and is reordered to the far side of the digits:
   "+76" painted as "76+", "2026-08-14 03:12" as "03:12 2026-08-14". Pinning the
   island to ltr keeps the token exactly as written in both languages — this is
   what the Arabic locale itself does, emitting U+200E before the sign.
   Alignment is unaffected: text-align:start/end resolves against the
   surrounding cell's direction, not this span's. */
.num-inline { direction: ltr; unicode-bidi: isolate; }

footer { color: var(--muted); font-size: 0.87rem; text-align: center; margin-top: 36px; }

/* --- Clinic summary ------------------------------------------------------ */
.clinic-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.clinic-head div span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.clinic-head div strong { font-size: 1.06rem; font-weight: 600; }
.therapy-line {
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.therapy-line b { display: block; font-size: 0.78rem; text-transform: uppercase;
                  letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.pagebreak { break-before: page; page-break-before: always; }
.printonly { display: none; }

/* --- Print ----------------------------------------------------------------
   Browser Print -> Save as PDF, rather than a PDF library in the container.
   Everything interactive is stripped, the palette is forced to ink-on-paper
   regardless of the reader's dark mode, and detail blocks are opened so the
   printout is never missing what was collapsed on screen. */
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }
  :root {
    --bg: #ffffff; --surface: #ffffff; --border: #b9c2cc; --text: #000000;
    --muted: #414b56; --accent: #0b4f80; --grid: #ccd3da;
    --band-outer: rgba(11,79,128,0.13); --band-inner: rgba(11,79,128,0.26);
    --target: rgba(21,128,61,0.13); --warn-bg: #ffffff; --warn-border: #777777;
  }
  /* Print keeps its own scale in pt — the screen bump above must not inflate a
     clinical printout, where 11pt is the conventional body size. */
  html { font-size: 100%; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .langswitch, .tip-btn, .tip-pop, .newhere, .glossary-link,
  .noprint, .more > summary { display: none !important; }
  .printonly { display: block; }
  /* Collapsed detail must still reach the paper. */
  .more > *:not(summary) { display: block !important; margin-top: 8px; }
  details.more { margin-top: 8px; }
  section, .status, .clinic-head, .therapy-line, .chartbox {
    break-inside: avoid; page-break-inside: avoid;
    border-color: #b9c2cc; box-shadow: none;
  }
  table { break-inside: auto; }
  tr, .finding, .term { break-inside: avoid; page-break-inside: avoid; }
  /* The caveat is now the last block before the footer. It must never split
     across two sheets, and it must never be pushed onto a sheet of its own:
     break-before: avoid keeps it with the section above. Deliberately NOT added
     to the `section, .status, ...` group above — that rule also forces
     border-color, which would repaint the warning border pale grey and erase
     the one cue that marks this as a warning on paper. */
  .disclaimer {
    break-inside: avoid; page-break-inside: avoid;
    break-before: avoid; page-break-before: avoid;
  }
  thead { display: table-header-group; }
  h1 { font-size: 15pt; }
  h2 { font-size: 12pt; }
  a { color: #000; text-decoration: none; }
  /* Every optional column is wanted on paper — there is room there. */
  th.opt, td.opt { display: table-cell !important; }
  /* The meal log is the page a doctor reads across a desk, often with the
     parent pointing at rows. It was asked for explicitly as "not tiny", so it
     prints a step larger than the surrounding text rather than smaller, and
     each meal block is kept whole across a page break. */
  /* .scroll is overflow-x:auto for phones. On paper an overflow container
     CLIPS instead of scrolling, which silently cut the last columns —
     "after 2 h" — off the printed sheet. Paper has no scrollbar, so the
     wrapper must simply not constrain here. */
  .scroll { overflow: visible !important; }
  /* The meal-clock table carries 11 columns against the meal log's 8. At the
     base 20px cell padding that is 220px of gutter — 31% of the 718px A4
     content box — leaving ~45px per column and cutting the last one off the
     sheet. Same treatment as the log recovers 66px of that. */
  .mealtbl { font-size: 10.5pt !important; }
  .mealtbl td, .mealtbl th { padding: 5px 7px !important; }
  .meallog { font-size: 10.5pt !important; }
  .meallog td, .meallog th { padding: 5px 7px !important; }
  /* 8 columns on A4 portrait only fit if the free-text meal description is
     allowed to wrap; everything else stays on one line. */
  .meallog td, .meallog th { white-space: normal !important; }
  .meallog td.num, .meallog th.num { white-space: nowrap !important; }
  .meallog .daybreak td {
    background: #eef1f4 !important; font-size: 11pt !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* A day header must never be the last thing on a sheet. */
  /* A DAY IS NEVER SPLIT ACROSS TWO SHEETS - the weaker rule, and the better
     one.

     What stood here was break-before: page on every day heading: one day per
     sheet, so a day with two meals still took a whole one and a nine-day report
     ran to nine sheets of mostly white paper. The household asked for this
     instead. Days now run on after one another, and a day only moves WHOLE to
     the next sheet when it would not fit on this one.

     IT ACTS ON THE PER-DAY <tbody> that MealLogTable.razor emits, because there
     is no way to say "keep these together" about a run of <tr> that share only
     a class. That grouping exists for this rule.

     A day taller than a page is still broken - the browser has no choice, and
     an unsplittable block bigger than the paper is an impossible request. */
  .meallog tbody.dayblock {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Still glued to the rows under it: a day heading alone at the foot of a
     page is the thing this whole group of rules exists to prevent. */
  .meallog .daybreak { break-after: avoid; page-break-after: avoid; }
  .meallog .mealrow  { break-after: avoid; page-break-after: avoid; }
  /* The description must never be split from the meal it describes - a sheet
     ending on "Dinner" and the next beginning with the food is a page a reader
     has to hold two of at once. */
  .meallog .descrow  { break-before: avoid; page-break-before: avoid; }
  .meallog .corrrow  { break-before: avoid; page-break-before: avoid; }
  /* Colour carries meaning here (high/low), so keep it on paper. */
  .bg-high, .bg-low {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* The portrait redraw exists for phone screens. A4 has the width for the
     wide drawing, and the doctor's copy should match what a clinic AGP looks
     like. The @media above is already `screen`-scoped; this is the belt to
     that pair of braces. */
  .chart-wide { display: block !important; }
  .chart-tall { display: none !important; }
  footer { margin-top: 14px; font-size: 8.5pt;
           break-before: avoid; page-break-before: avoid; }
}