/* ==========================================================================
   Report v3 skin: the classic page (index.html markup, app.js) in the look of
   the outlook experiment (public/v2.css). styles.css is imported as the base
   so every classic selector (sidebar, modals, forms, setup, admin) stays
   styled; this file redefines the tokens and the panel language on screen.
   Print keeps the classic rules (the PDF renders from the classic page).
   Palette: Deep Current (final, 5 November 2026): a calm grey frame with white cards (solid petrol-ink cards in dark),
   one accent (deep petrol) for actions, links, the active nav and the one series that matters, neutral grey for the
   other bars and lines, the shared status colours, and the client colour on markers and rings. No glows or gradients.
   Density: panel padding 20px, gaps 14px, body 15px, captions 13px.
   Contrast: the colour tokens are the v2 set checked by contrast-v2.mjs.
   ========================================================================== */
@import url("styles.css");

:root {
  color-scheme: light;
  --bg: #F3F5F6;
  --bg-2: #EAEEF0;
  --surface: #FFFFFF;
  --surface-2: #F3F5F6;
  --solid: #FFFFFF;
  --solid2: #F3F5F6;
  --ink: #12191C;
  --ink-2: #4A565B;
  --muted: #5A676D;
  --hair: rgba(18, 25, 28, 0.08);
  --hair-2: rgba(18, 25, 28, 0.16);
  --edge: rgba(18, 25, 28, 0.08);
  --sep: rgba(18, 25, 28, 0.1);
  --track: rgba(18, 25, 28, 0.08);
  --glass2: rgba(18, 25, 28, 0.035);
  --glass-hi: transparent;
  --navy: #12191C;
  --accent: #0B6478;
  --accent-ink: #FFFFFF;
  --accent-soft: #E7F0F2;
  --teal: #0B6478;
  --teal2: #0B6478;
  --teal-ink: #0B6478;
  --coral: #0B6478;
  --coral2: #0B6478;
  --coral-ink: #0B6478;
  --bar: #8A8C8E;
  --lime: #8A8C8E;
  --green: #1F6F56;
  --red: #A3282A;
  --amber: #85510F;
  --good: #0F845F;
  --watch: #EEB44B;
  --act: #DB3122;
  --on-dark: #FFFFFF;
  --lime-chip: #0F845F;
  --coral-chip: #0B6478;
  --green-chip: #0F845F;
  --series-1: #0B6478;
  --series-2: #28323A;
  --series-3: #8A8C8E;
  --good-text: #1F6F56;
  --good-bg: #DDEEE9;
  --watch-text: #85510F;
  --watch-bg: #FDF5E6;
  --bad-text: #A3282A;
  --bad-bg: #FAE2E0;
  --page1-bg: #E7F0F2;
  --page1-text: #12191C;
  --page2-bg: #FDF5E6;
  --page2-text: #85510F;
  --cell-top-bg: #0B6478;
  --cell-top-ink: #FFFFFF;
  --cell-p1-bg: #AED5E2;
  --cell-p1-ink: #12191C;
  --tip-bg: #12191C;
  --tip-ink: #FFFFFF;
  --ring-fill: #FFFFFF;
  --focus: #0B6478;
  --glass: rgba(255, 255, 255, 0.9);
  --glow1: transparent;
  --glow2: transparent;
  --shadow-1: 0 1px 2px rgba(18, 25, 28, 0.06), 0 6px 16px rgba(18, 25, 28, 0.06);
  --shadow-2: 0 2px 6px rgba(18, 25, 28, 0.08), 0 16px 40px rgba(18, 25, 28, 0.12);
  --panel-blur: none;
  --sheen: none;
  --radius: 22px;
  --radius-s: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A1114;
    --bg-2: #0E171B;
    --surface: #111A1E;
    --surface-2: #172328;
    --solid: #111A1E;
    --solid2: #172328;
    --ink: #EEF3F5;
    --ink-2: #9AAAB0;
    --muted: #8A9AA0;
    --hair: rgba(238, 243, 245, 0.1);
    --hair-2: rgba(238, 243, 245, 0.18);
    --edge: rgba(238, 243, 245, 0.09);
    --sep: rgba(238, 243, 245, 0.1);
    --track: rgba(238, 243, 245, 0.08);
    --glass2: rgba(238, 243, 245, 0.035);
    --glass-hi: rgba(255, 255, 255, 0.03);
    --navy: #172328;
    --accent: #45B6CB;
    --accent-ink: #0A1114;
    --accent-soft: #19333A;
    --teal: #45B6CB;
    --teal2: #45B6CB;
    --teal-ink: #45B6CB;
    --coral: #45B6CB;
    --coral2: #45B6CB;
    --coral-ink: #45B6CB;
    --bar: #727272;
    --lime: #727272;
    --green: #86DDB4;
    --red: #EF7B75;
    --amber: #FEB504;
    --good: #35A67D;
    --watch: #F8BE60;
    --act: #FA5A47;
    --on-dark: #0A1114;
    --lime-chip: #35A67D;
    --coral-chip: #45B6CB;
    --green-chip: #35A67D;
    --series-1: #45B6CB;
    --series-2: #E0E8F3;
    --series-3: #727272;
    --good-text: #86DDB4;
    --good-bg: #162E2B;
    --watch-text: #FEB504;
    --watch-bg: #313127;
    --bad-text: #EF7B75;
    --bad-bg: #322324;
    --page1-bg: #19333A;
    --page1-text: #EEF3F5;
    --page2-bg: #313127;
    --page2-text: #FEB504;
    --cell-top-bg: #45B6CB;
    --cell-top-ink: #0A1114;
    --cell-p1-bg: #004854;
    --cell-p1-ink: #EEF3F5;
    --tip-bg: #EEF3F5;
    --tip-ink: #0A1114;
    --ring-fill: #111A1E;
    --focus: #45B6CB;
    --glass: rgba(10, 17, 20, 0.86);
    --glow1: transparent;
    --glow2: transparent;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.5);
    --panel-blur: none;
    --sheen: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1114;
  --bg-2: #0E171B;
  --surface: #111A1E;
  --surface-2: #172328;
  --solid: #111A1E;
  --solid2: #172328;
  --ink: #EEF3F5;
  --ink-2: #9AAAB0;
  --muted: #8A9AA0;
  --hair: rgba(238, 243, 245, 0.1);
  --hair-2: rgba(238, 243, 245, 0.18);
  --edge: rgba(238, 243, 245, 0.09);
  --sep: rgba(238, 243, 245, 0.1);
  --track: rgba(238, 243, 245, 0.08);
  --glass2: rgba(238, 243, 245, 0.035);
  --glass-hi: rgba(255, 255, 255, 0.03);
  --navy: #172328;
  --accent: #45B6CB;
  --accent-ink: #0A1114;
  --accent-soft: #19333A;
  --teal: #45B6CB;
  --teal2: #45B6CB;
  --teal-ink: #45B6CB;
  --coral: #45B6CB;
  --coral2: #45B6CB;
  --coral-ink: #45B6CB;
  --bar: #727272;
  --lime: #727272;
  --green: #86DDB4;
  --red: #EF7B75;
  --amber: #FEB504;
  --good: #35A67D;
  --watch: #F8BE60;
  --act: #FA5A47;
  --on-dark: #0A1114;
  --lime-chip: #35A67D;
  --coral-chip: #45B6CB;
  --green-chip: #35A67D;
  --series-1: #45B6CB;
  --series-2: #E0E8F3;
  --series-3: #727272;
  --good-text: #86DDB4;
  --good-bg: #162E2B;
  --watch-text: #FEB504;
  --watch-bg: #313127;
  --bad-text: #EF7B75;
  --bad-bg: #322324;
  --page1-bg: #19333A;
  --page1-text: #EEF3F5;
  --page2-bg: #313127;
  --page2-text: #FEB504;
  --cell-top-bg: #45B6CB;
  --cell-top-ink: #0A1114;
  --cell-p1-bg: #004854;
  --cell-p1-ink: #EEF3F5;
  --tip-bg: #EEF3F5;
  --tip-ink: #0A1114;
  --ring-fill: #111A1E;
  --focus: #45B6CB;
  --glass: rgba(10, 17, 20, 0.86);
  --glow1: transparent;
  --glow2: transparent;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.5);
  --panel-blur: none;
  --sheen: none;
}

@media screen {
  /* ---- base and density -------------------------------------------------- */
  body { font-size: 15px; line-height: 1.45; }
  body::before { content: none; }
  h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
  h2 { font-size: 20px; font-weight: 700; }
  h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
  .hint { font-size: 13px; }
  .note { font-size: 14px; }
  .eyebrow { font-size: 13px; }
  a { color: var(--teal-ink); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
  ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  .num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; font-weight: 700; }
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  svg text { font-family: var(--font); font-variant-numeric: tabular-nums; }

  /* ---- panel language: every classic card and tile ------------------------- */
  .card, .tiles > .tile, .rank-tiles > .tile, .conn-card, .monthly-block, .notice, .target-card, .post-item, .wizard li, .card.step, .shot-item, .import-row, .error-box, .confirm-dialog, .mfa-gate, .empty-state {
    background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius);
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-hi);
    backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
    position: relative;
  }
  .card { padding: 20px; margin-bottom: 14px; }
  .card.lift:hover, .tile:hover { transform: none; box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-hi); }
  .tiles > .tile, .rank-tiles > .tile { border-radius: var(--radius-s); padding: 16px 18px; }
  /* Tiles inside a panel do not blur again (nested blur paints empty in Chrome). */
  .card .tile, .thing, .ol-pace, .ol-weeks { background: var(--glass2); border: 0; border-radius: var(--radius-s); box-shadow: inset 0 1px 0 var(--glass-hi); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .notice { border-style: solid; color: var(--ink-2); padding: 16px 20px; }
  .error-box { background: var(--bad-bg); border-color: transparent; }
  .grid-1, .grid-2, .two-col, .tiles { gap: 14px; }
  .grid-2, .two-col { margin-bottom: 14px; }
  .tiles { margin-bottom: 14px; }
  section.page { margin-bottom: 30px; }
  .sec-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sep); }
  .sec-head h2::before { width: 6px; height: 20px; border-radius: 3px; background: var(--brand-mark); vertical-align: -3px; }
  .sec-sub { font-size: 13px; }
  .source { font-size: 13px; }
  .report-foot { font-size: 13px; border-top-color: var(--sep); }

  /* ---- sidebar ----------------------------------------------------------- */
  #sidebar { background: var(--glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-right: 1px solid var(--edge); gap: 16px; }
  .side-select { font-size: 14px; border-radius: 14px; border-color: var(--edge); background-color: var(--surface); box-shadow: none; padding: 10px 34px 10px 12px; }
  .side-label { font-size: 13px; }
  .side-made, .avatar, .side-user, .public-bar .pb-powered, .leaflet-control-attribution { font-size: 13px; }
  .nav-item { font-size: 14px; border-radius: 12px; padding: 9px 11px; }
  .nav-item:hover { background: var(--track); }
  .nav-item.active { background: var(--accent); color: var(--accent-ink); }
  .nav-sub .nav-item { font-size: 13px; }
  .nav-sub .nav-item.active { background: transparent; color: var(--teal-ink); }
  .side-user { font-size: 13px; }
  .side-legal { font-size: 13px; }
  .avatar { background: var(--accent-soft); color: var(--teal-ink); }
  .brand-mark { background: var(--ink-2); }
  .nav-badge { background: var(--coral-chip); color: var(--on-dark); font-size: 12px; }

  /* ---- top bar and controls --------------------------------------------- */
  #topbar { background: var(--glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--edge); padding: 12px 24px; }
  .tb-title { font-size: 16px; }
  .tb-title span { font-size: 13px; }
  .field { font-size: 13px; }
  .field select, .custom-range input, .rank-toolbar input[type=search], .share-url input, .options select { font-size: 14px; font-weight: 600; padding: 8px 32px 8px 14px; border-radius: 999px; border: 1px solid var(--edge); background-color: var(--surface); color: var(--ink-2); }
  .custom-range input, .rank-toolbar input[type=search], .share-url input { padding-right: 14px; font-weight: 500; }
  .btn { font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .btn:hover { filter: brightness(1.06); }
  .btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--edge); box-shadow: none; }
  .btn.ghost:hover { background: var(--track); color: var(--ink); border-color: var(--hair-2); }
  .btn.ghost.active { background: var(--page1-bg); color: var(--page1-text); border-color: transparent; }
  .btn.small { padding: 6px 13px; font-size: 13px; border-radius: 999px; }
  .btn.icon-only { width: 38px; height: 38px; }
  .menu-list { background: var(--solid); border-color: var(--edge); border-radius: 16px; box-shadow: var(--shadow-2); min-width: 200px; padding: 6px; }
  .menu-list button { font-size: 14px; border-radius: 10px; padding: 9px 12px; }
  .menu-list button:hover { background: var(--track); }
  .icon-btn:hover { background: var(--track); }

  /* ---- report head and chips -------------------------------------------- */
  #report { padding: 22px 24px 80px; }
  .report-head { margin-bottom: 20px; }
  .report-head h1 { font-size: 34px; }
  .chip { font-size: 13px; font-weight: 600; padding: 5px 12px; min-height: 30px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--edge); color: var(--ink-2); }
  .chip.soft { background: var(--track); border-color: transparent; }
  .chip.src { font-size: 13px; }
  .chip.src:hover { background: var(--track); color: var(--ink); }
  .chip.src.ok i { background: var(--good); }
  .chip.src.warn i { background: var(--watch); }
  .chip.src.bad i { background: var(--act); }
  .chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
  .chip.lime { background: var(--good-bg); color: var(--good-text); border-color: transparent; }
  .chip.lime i { background: var(--good); }
  .chip.coral { background: var(--bad-bg); color: var(--bad-text); border-color: transparent; }
  .chip.coral i { background: var(--act); }
  .chip.green { background: var(--good-bg); color: var(--good-text); border-color: transparent; }
  .chip.green i { background: var(--good); }
  .chip.quiet { min-height: 28px; padding: 3px 11px; font-size: 13px; }
  .live { font-size: 13px; background: var(--surface); border-color: var(--edge); box-shadow: none; }
  .live i { background: var(--good); }
  .client-logo { border-radius: 16px; border-color: var(--edge); box-shadow: none; }
  .customise-bar { background: var(--page1-bg); color: var(--page1-text); border-radius: var(--radius-s); font-size: 14px; padding: 12px 18px; margin: -6px 0 18px; }
  .customise-bar .btn { white-space: nowrap; }
  .customise-bar .form-actions { flex-wrap: wrap; justify-content: flex-end; }
  .pdf-toggle { font-size: 13px; font-weight: 600; padding: 3px 11px; color: var(--page1-text); background: var(--page1-bg); }
  .pdf-toggle:hover { background: var(--teal); color: var(--on-dark); }
  .pdf-hidden .pdf-toggle { background: var(--bad-bg); color: var(--bad-text); }
  .mv-grip:hover { background: var(--track); }
  body.customise [data-pid].dragging { outline-color: var(--teal); }
  body.customise [data-pid].drop-before { box-shadow: 0 -3px 0 var(--teal); }
  body.customise [data-pid].drop-after { box-shadow: 0 3px 0 var(--teal); }

  /* ---- tiles and numbers -------------------------------------------------- */
  .t-label { font-size: 14px; color: var(--ink-2); font-weight: 600; }
  .t-value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 4px 0 6px; }
  .t-delta { font-size: 13px; gap: 8px; }
  .vs { font-size: 13px; }
  .delta { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--track); color: var(--ink-2); letter-spacing: 0; }
  .delta.good { color: var(--green); background: var(--good-bg); }
  .delta.bad { color: var(--red); background: var(--bad-bg); }
  .delta.same, .delta.new { color: var(--ink-2); background: var(--track); }
  .glance-grid { gap: 14px; margin-bottom: 14px; }
  .hero-tile { border-radius: var(--radius); padding: 24px 26px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  .hero-tile::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%); }
  .hero-tile .t-label { font-size: 15px; }
  .hero-value { font-size: 60px; font-weight: 700; letter-spacing: -0.04em; }
  .hero-tile .delta { background: rgba(255, 255, 255, 0.18); color: var(--brand-ink); }
  .card.metric .hero-value { font-size: 44px; }
  .empty { font-size: 14px; }
  .empty-state { padding: 44px 32px; }
  .empty-state .es-icon { background: var(--page1-bg); color: var(--teal-ink); }

  /* ---- charts: smooth lines, the focus series in the accent, others neutral -- */
  .linechart .grid { stroke: var(--sep); }
  .linechart .axis, .heatmap .axis { font-size: 13px; fill: var(--muted); }
  .linechart .endlabel { font-size: 13px; font-weight: 700; fill: var(--ink); }
  .linechart .ring { fill: var(--ring-fill); }
  .linechart .crosshair { stroke: var(--ink); opacity: 0.35; }
  .linechart.v3 .area { opacity: 1; }
  .linechart.v3 .area.anim { animation: areain3 0.9s var(--ease) 0.4s both; }
  @keyframes areain3 { from { opacity: 0; } to { opacity: 1; } }
  .legend { font-size: 13px; gap: 8px; margin-top: 10px; }
  .legend-item { background: var(--track); padding: 5px 12px; font-weight: 600; }
  .legend-item:hover { background: var(--hair-2); }
  .heatmap.v3 .base { fill: var(--track); }
  .heatmap.v3 .cell.out .base { fill: transparent; }
  .heatmap.v3 g.cell:not(.out):hover rect.base { stroke: var(--ink); stroke-width: 1.5; }
  .heatmap.v3 g.cell.anim { animation: pop 0.35s var(--ease) both; transform-box: fill-box; transform-origin: center; }
  .heatmap.v3 .dn { font-size: 13px; fill: var(--ink); opacity: 0.9; }
  .heatmap.v3 .dn.lt { fill: #FFFFFF; }
  .heatmap.v3 .dn.dk { fill: #12191C; }
  .hc { gap: 28px; }
  .hc-title { font-size: 13px; color: var(--muted); }
  .hc-row { font-size: 13px; grid-template-columns: 36px minmax(0, 1fr) auto; margin-bottom: 6px; }
  .hc-bar { height: 12px; background: var(--track); }
  .hc-bar .bl-fill { background: var(--accent); }
  .hc-fact { font-size: 14px; color: var(--ink-2); }
  .scale { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
  .scale i { width: 60px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--track), var(--accent)); display: inline-block; }

  /* ---- bar lists as capsules -------------------------------------------- */
  .barlist { gap: 9px; }
  .barrow { font-size: 14px; gap: 12px; }
  .ring-row { font-size: 14px; }
  .ring-delta { font-size: 13px; }
  .ring-total { font-size: 28px; font-weight: 800; }
  .bl-track { height: 10px; background: var(--track); }
  .bl-fill { background: var(--bar); }
  .barrow.hl .bl-fill { background: var(--accent); }
  .groups .bl-fill { background: var(--bar); }
  .bl-value { font-size: 15px; font-weight: 700; }
  .bl-delta { font-size: 13px; }
  .bl-tag { font-size: 13px; padding: 1px 8px; letter-spacing: 0.02em; background: var(--page1-bg); color: var(--page1-text); }

  /* ---- map ----------------------------------------------------------------- */
  .map { border-radius: var(--radius-s); border: 1px solid var(--edge); background: var(--surface-2); }
  .map-tip { font-size: 13px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-ink); box-shadow: none; }
  .map-tip::before { border-top-color: var(--tip-bg); }
  .map-dark .leaflet-control-attribution { background: rgba(21, 25, 30, 0.85); }

  /* ---- tables ----------------------------------------------------------- */
  table.data { font-size: 14px; }
  table.data th { font-size: 13px; color: var(--muted); background: transparent; border-bottom: 1px solid var(--hair-2); padding: 8px 10px; }
  table.data th:first-child, table.data th:last-child { border-radius: 0; }
  table.data td { border-bottom-color: var(--sep); padding: 10px 10px; }
  table.data tr.clickable:hover td { background: var(--track); }
  table.data tr.totals td { background: var(--track); border-top-color: var(--hair-2); }
  table.rank tr.group-row td { background: var(--track); border-top-color: var(--hair-2); }
  .table-card { padding: 14px 16px; }
  .rank-toolbar { gap: 10px; }
  .rank-toolbar .hint { font-size: 13px; }
  .seg { background: var(--track); border-radius: 999px; padding: 3px; }
  .seg button { font-size: 13px; border-radius: 999px; padding: 6px 12px; }
  .seg button.active { background: var(--solid); color: var(--ink); box-shadow: none; }
  .pill { font-size: 13px; font-weight: 700; padding: 3px 9px; background: var(--track); color: var(--ink-2); }
  .pill.top3 { background: var(--cell-top-bg); color: var(--cell-top-ink); }
  .pill.page1 { background: var(--cell-p1-bg); color: var(--cell-p1-ink); }
  .pill.page2 { background: var(--page2-bg); color: var(--page2-text); }
  .pill.beyond, .pill.none { background: var(--track); color: var(--muted); }
  .pill.bad { background: var(--bad-bg); color: var(--bad-text); }
  .status-on { color: var(--green); background: var(--good-bg); font-size: 13px; }
  .status-off { font-size: 13px; background: var(--track); }

  /* ---- tooltip, toast, modal, forms --------------------------------------- */
  .tooltip { background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; border-radius: 12px; backdrop-filter: none; box-shadow: var(--shadow-2); padding: 9px 12px; }
  .tt-row span { color: inherit; opacity: 0.75; }
  .toast { background: var(--tip-bg); color: var(--tip-ink); font-size: 14px; font-weight: 600; border-radius: 999px; backdrop-filter: none; }
  .toast.error { background: var(--red); color: var(--on-dark); }
  .modal-backdrop { background: rgba(0, 0, 0, 0.45); }
  .modal { background: var(--solid); border: 1px solid var(--edge); border-radius: 24px; }
  .modal-head { background: transparent; backdrop-filter: none; border-bottom-color: var(--sep); }
  .modal-head h2 { font-size: 20px; }
  .modal-body { padding: 18px 22px 26px; }
  .tabs { background: var(--track); border-radius: 999px; }
  .tabs button { font-size: 14px; border-radius: 999px; padding: 7px 15px; }
  .tabs button.active { background: var(--solid2); box-shadow: none; }
  .form label, .logo-field, .options label { font-size: 13px; }
  .form input, .form textarea, .form select, .shot-item input, .options select, .control { font-size: 15px; color: var(--ink); background: var(--solid2); border: 1px solid var(--edge); border-radius: 12px; padding: 9px 12px; }
  .form input:focus, .form textarea:focus, .form select:focus, .control:focus { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
  .form fieldset { background: var(--surface); border-color: var(--edge); border-radius: var(--radius-s); }
  .check-list li { background: var(--track); border-radius: 12px; }
  .ck.ok { background: var(--green-chip); color: var(--on-dark); }
  .ck.no { background: var(--red); color: var(--on-dark); }
  .ck.wait { background: var(--amber); color: var(--on-dark); }
  .step-n, .wz-n { background: var(--accent); color: var(--accent-ink); }
  .mfa-codes { background: var(--track); }
  .danger-zone { background: var(--bad-bg); border-color: transparent; border-radius: var(--radius-s); }
  .snap-line, .conn-head, .health-line { border-color: var(--sep); }
  .health-line.ok i { background: var(--good); }
  .health-line.warn i { background: var(--watch); }
  .health-line.bad i { background: var(--act); }
  code { background: var(--track); font-size: 13px; }
  .logo-box, .brand-logo { border-color: var(--edge); }

  /* ---- v3 outlook blocks: three things ----------------------------------- */
  .things { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .things.n1 { grid-template-columns: 1fr; }
  .things.n2 { grid-template-columns: 1fr 1fr; }
  .things .thing { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-hi); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); }
  .thing i { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
  .thing.good i { background: var(--green); }
  .thing.bad i { background: var(--red); }
  .thing.info i { background: var(--teal); }
  .thing .k { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
  .thing.good .k { color: var(--green); }
  .thing.bad .k { color: var(--red); }
  .thing.info .k { color: var(--teal-ink); }
  .thing p { font-size: 15px; line-height: 1.4; margin: 0; }

  /* ---- v3 outlook hero ------------------------------------------------------ */
  .ol-hero { padding: 22px 22px 20px; }
  .ol-hero > .pdf-toggle { position: absolute; top: 14px; right: 16px; z-index: 2; margin: 0; }
  .ol-top { display: grid; grid-template-columns: auto 1fr; gap: 20px 36px; align-items: end; }
  .ol-eyebrow { font-size: 14px; color: var(--ink-2); font-weight: 600; letter-spacing: 0.02em; }
  .ol-big { font-size: clamp(50px, 7vw, 76px); line-height: 0.95; margin-top: 4px; }
  .ol-big .unit { font-size: 19px; letter-spacing: 0; font-weight: 600; color: var(--ink-2); margin-left: 10px; }
  .ol-parts { font-size: 14px; color: var(--muted); margin: 8px 0 0; max-width: 70ch; }
  .ol-facts { display: flex; gap: 22px; flex-wrap: wrap; align-items: end; }
  .ol-facts .fact { display: grid; gap: 2px; }
  .ol-facts .fact .l { font-size: 13px; color: var(--muted); }
  .ol-facts .fact .v { font-size: 24px; display: inline-flex; align-items: center; gap: 8px; }
  .ol-facts .fact .v.coral { color: var(--ink); }
  .ol-facts .chip { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .ol-hero .tile { margin-top: 16px; padding: 16px 18px; }
  .ol-hero .sentence, .sentence { font-size: 15px; color: var(--ink-2); margin: 14px 0 0; line-height: 1.45; }
  .ol-why { margin-top: 10px; }
  .ph { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .ph.tight { margin-bottom: 4px; }
  .ph h3 { margin: 0; }
  .cap, .ph .cap { font-size: 13px; color: var(--muted); }
  .chartwrap { position: relative; margin-top: 14px; }
  .chart.v3, svg.chart { width: 100%; height: auto; display: block; border-radius: 12px; }
  .tip { position: absolute; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 10px; white-space: nowrap; transform: translate(-50%, -125%); opacity: 0; transition: opacity 0.15s; z-index: 5; }
  .tip.on { opacity: 1; }
  .keys { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-top: 8px; }
  .keys span { display: inline-flex; align-items: center; gap: 7px; }
  .keys .sw { width: 18px; height: 4px; border-radius: 2px; background: var(--accent); }
  .keys .sw.ghost { background: var(--muted); opacity: 0.6; }
  .keys .sw.dash { background: repeating-linear-gradient(90deg, var(--teal) 0 4px, transparent 4px 8px); }
  .keys .sw.tgt { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); height: 2px; }

  /* ---- capsule bars (weekly pairs, outcome cards, monthly series) ------------ */
  .weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 180px; padding-top: 24px; align-items: end; }
  .wk { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; height: 100%; min-width: 0; }
  .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 40px)); justify-content: center; gap: 4px; align-items: end; height: 100%; }
  .pair.n1 { grid-template-columns: minmax(0, 44px); }
  .pair.n3 { grid-template-columns: repeat(3, minmax(0, 28px)); }
  .pair .cap { height: 100%; }
  .pair .cap.prev .f { background: var(--muted); opacity: 0.55; }
  .pair .cap.cur .f { background: var(--accent); }
  .wl { font-size: 13px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .weeks.months { height: 200px; }
  .outs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
  .out { padding: 14px 16px 12px; }
  .out.text { align-self: start; }
  .out .oh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .out .oh .l { font-size: 14px; color: var(--ink-2); font-weight: 600; }
  .out .oh .v { font-size: 24px; display: inline-flex; align-items: center; gap: 8px; }
  .caps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; height: 150px; padding-top: 24px; align-items: end; justify-items: center; }
  .caps .cap { width: 100%; max-width: 44px; }
  .caps .cap, .pair .cap { position: relative; height: 100%; display: block; background: var(--track); border-radius: 999px; overflow: visible; border: 0; padding: 0; cursor: default; min-width: 0; }
  .caps .cap .f, .pair .cap .f { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: var(--c, var(--bar)); min-height: 6px; }
  .pair .cap[style*="--c"] .f { background: var(--c); }
  .caps .cap.now .f, .pair .cap.now .f { background: var(--accent); }
  .caps .cap.empty .f, .pair .cap.empty .f { display: none; }
  .caps .cap.partial .f { opacity: 0.55; }
  .caps .cap .pct, .pair .cap .pct { position: absolute; left: 50%; transform: translate(-50%, -22px); top: 0; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
  .caps .cap.now .pct, .pair .cap.now .pct { color: var(--coral-ink); }
  .pair .cap.prev .pct { color: var(--muted); }
  .out .cl { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 8px; }
  .out .cl .now { color: var(--coral-ink); font-weight: 600; margin-left: auto; }
  .est { font-size: 13px; color: var(--muted); }

  /* ---- goals and next 30 days ------------------------------------------------- */
  .goals-grid .card { margin-bottom: 0; }
  .goals { display: grid; }
  .g { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--sep); }
  .g:first-child { border-top: 0; padding-top: 0; }
  .g svg.ring { width: 44px; height: 44px; }
  .g .t { font-size: 15px; font-weight: 600; }
  .g .v { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
  .g .gr { display: flex; align-items: center; }
  .g .rm { margin-left: 6px; }
  .iconbtn { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
  .iconbtn:hover { background: var(--track); color: var(--ink); }
  .iconbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .goal-form, .plan-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sep); }
  .goal-form input, .plan-form input, .goal-form select { flex: 1 1 120px; min-width: 0; }
  .plan-form input[name=text] { flex: 1 1 100%; }
  .goal-form .btn svg, .plan-form .btn svg { width: 15px; height: 15px; }
  .step { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sep); align-items: center; }
  .step:first-of-type { border-top: 0; padding-top: 0; }
  .step .k { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--track); color: var(--ink); border: 1px solid transparent; cursor: default; padding: 0; font-family: inherit; }
  .step .k.c { background: var(--coral-chip); color: var(--on-dark); }
  .step .k.done { background: var(--green-chip); color: var(--on-dark); }
  .step .k.tick { cursor: pointer; }
  .step .k svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .step .t { font-weight: 600; font-size: 15px; }
  .step.done .t { text-decoration: line-through; color: var(--muted); }
  .step .d { font-size: 13px; color: var(--muted); margin-top: 2px; }
  .step .who { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; max-width: 150px; text-align: right; justify-content: flex-end; }
  .step .who span { overflow-wrap: anywhere; }
  .step.sug .k { background: transparent; border: 1px dashed var(--sep); color: var(--muted); }

  .gp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .gp h3 { margin-bottom: 4px; }
  .gp .step { padding: 8px 0; }
  .gp .goal-form, .gp .plan-form { border-top: 0; padding-top: 0; margin-top: 10px; }
  .gp .plan-form input[name=text] { flex: 2 1 180px; }
  @media (max-width: 760px) { .gp { grid-template-columns: 1fr; } }

  /* ---- hour-by-day heat map ------------------------------------------------- */
  .hours-card .hint { margin: -6px 0 12px; }
  .heat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 5px 8px; align-items: center; min-width: 0; }
  .heat .dl { font-size: 13px; color: var(--muted); text-align: right; }
  .heat .row { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
  .heat .c { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--track); position: relative; border: 0; padding: 0; min-width: 0; cursor: default; }
  .heat .c::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--rc, var(--accent)); opacity: var(--a, 0); }
  .heat .c.peak, .heat .c.focus { box-shadow: 0 0 0 2px var(--ink); }
  .heat .hl { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; font-size: 13px; color: var(--muted); grid-column: 2; }
  .heat .hl span { text-align: left; overflow: visible; white-space: nowrap; min-width: 0; }
  .heat-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
  .heat-note b { color: var(--ink); }

  /* ---- no empty slots: fixed columns per width, the remainder of the last row stretches ------- */
  @media (min-width: 1100px) {
    body:not(.print) .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body:not(.print) .tiles:not(.rank-tiles) > .tile:last-child:nth-child(4n + 1) { grid-column: span 4; }
    body:not(.print) .tiles:not(.rank-tiles) > .tile:nth-last-child(2):nth-child(4n + 1), body:not(.print) .tiles:not(.rank-tiles) > .tile:last-child:nth-child(4n + 2) { grid-column: span 2; }
    body:not(.print) .tiles:not(.rank-tiles) > .tile:last-child:nth-child(4n + 3) { grid-column: span 2; }
    body:not(.print) .rank-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body:not(.print) .rank-tiles > .tile { grid-column: auto; }
    body:not(.print) .glance-grid.few { grid-template-columns: 300px repeat(3, minmax(0, 1fr)); }
    body:not(.print) .glance-grid.few .tiles > .tile:nth-child(n) { grid-column: auto; }
    body:not(.print) .glance-grid.few .tiles > .tile:last-child:nth-child(3n + 1) { grid-column: span 3; }
    body:not(.print) .glance-grid.few .tiles > .tile:last-child:nth-child(3n + 2) { grid-column: span 2; }
    .outs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .outs:has(> .out:last-child:nth-child(4)), .outs:has(> .out:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outs:has(> .out:last-child:nth-child(1)) { grid-template-columns: 1fr; }
    .outs > .out:last-child:nth-child(3n + 1):not(:nth-child(1)):not(:nth-child(4)) { grid-column: span 3; }
    .outs > .out:last-child:nth-child(3n + 2):not(:nth-child(2)) { grid-column: span 2; }
  }
  @media (min-width: 700px) and (max-width: 1099px) {
    body:not(.print) .tiles, body:not(.print) .rank-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body:not(.print) .tiles:not(.rank-tiles) > .tile:last-child:nth-child(3n + 1) { grid-column: span 3; }
    body:not(.print) .tiles:not(.rank-tiles) > .tile:last-child:nth-child(3n + 2) { grid-column: span 2; }
    .outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outs > .out:last-child:nth-child(odd):not(:nth-child(1)) { grid-column: span 2; }
  }
  @media (max-width: 699px) {
    body:not(.print) .tiles, body:not(.print) .rank-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body:not(.print) .glance-grid.few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body:not(.print) .glance-grid.few .hero-tile { grid-column: 1 / -1; }
    body:not(.print) .glance-grid.few .tiles > .tile:nth-child(n) { grid-column: auto; }
    body:not(.print) .glance-grid.few .tiles > .tile:last-child:nth-child(odd) { grid-column: span 2; }
    body:not(.print) .tiles:not(.rank-tiles) > .tile:last-child:nth-child(odd):not(:nth-child(1)) { grid-column: span 2; }
    .outs { grid-template-columns: 1fr; }
  }
  @media (min-width: 821px) {
    body:not(.print) .grid-2 > .card:last-child:nth-child(odd):not(:nth-child(1)), body:not(.print) .two-col > .card:last-child:nth-child(odd):not(:nth-child(1)) { grid-column: 1 / -1; }
  }
  .extras-grid .card:has(.heatmap) { display: flex; flex-direction: column; }
  .extras-grid .card:has(.heatmap) .chart { flex: 1; display: flex; flex-direction: column; justify-content: center; }

  /* ---- responsive --------------------------------------------------------- */
  @media (max-width: 600px) {
    .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .sec-head .source, .sec-head > .muted { font-size: 13px; }
    .sec-sub { margin-left: 16px; }
  }
  @media (max-width: 980px) {
    /* The drawer (styles.css "Phone layout"): a solid panel so the glass does not blend into the backdrop. */
    #sidebar { border-right: 1px solid var(--edge); background: var(--solid); }
    #topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
    .btn.icon-only { width: 44px; height: 44px; }
  }
  @media (max-width: 900px) { .things, .things.n2 { grid-template-columns: 1fr; } }
  @media (max-width: 820px) {
    #report { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
    .hero-value { font-size: 44px; }
    .ol-top { grid-template-columns: 1fr; }
    body:not(.print) .goals-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .wk:nth-child(n + 7) { display: none; }
    .heat .hl span.alt { visibility: hidden; }
    .g { grid-template-columns: auto 1fr; }
    .g > :nth-child(3) { grid-column: 2; justify-self: start; }
    .step { grid-template-columns: 44px 1fr; }
    .iconbtn, .step .k.tick { min-width: 44px; min-height: 44px; }
    .step .who { grid-column: 2; max-width: none; justify-content: flex-start; text-align: left; }
  }

  /* ---- motion and preferences -------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .caps .cap .f, .pair .cap .f { animation: grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    @keyframes grow { from { transform: translateY(100%); } to { transform: none; } }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .card, .tiles > .tile, .rank-tiles > .tile, .things .thing, #sidebar, #topbar, .btn.ghost, .chip, .conn-card, .notice { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--solid); }
    .card .tile, .ol-pace, .ol-weeks { background: var(--solid2); }
    body::before { display: none; }
  }
  @media (prefers-contrast: more) {
    :root { --edge: currentColor; --sep: currentColor; }
    .card, .tiles > .tile { border-width: 2px; }
  }

  /* ---- page view (the public page's print layout on screen): the classic print rules set the A4 column and
     page breaks on body.print; the v3 tokens and panels stay, so the page keeps the v3 look in both themes. ---- */
  body.print {
    color-scheme: inherit;
    --bg: inherit; --bg-2: inherit; --surface: inherit; --surface-2: inherit; --ink: inherit; --ink-2: inherit; --muted: inherit;
    --hair: inherit; --hair-2: inherit; --accent: inherit; --series-1: inherit; --series-2: inherit; --series-3: inherit;
    --good-text: inherit; --good-bg: inherit; --bad-text: inherit; --bad-bg: inherit;
    --page1-bg: inherit; --page1-text: inherit; --page2-bg: inherit; --page2-text: inherit; --shadow-1: inherit; --shadow-2: inherit;
    background: var(--bg);
  }
  html.page-view-root { background: var(--bg-2); }
  body.print.page-view { box-shadow: var(--shadow-2); border-left: 1px solid var(--edge); border-right: 1px solid var(--edge); }
  body.print.page-view .public-bar { background: var(--glass); }
  body.print .card, body.print .tile { background: var(--surface); border-color: var(--edge); }
  body.print .card .tile, body.print .thing, body.print .ol-pace, body.print .ol-weeks { background: var(--glass2); border: 0; }
  body.page-view #report > section.page:not(.cover) + section.page { border-top-color: var(--sep); }
}

/* ==========================================================================
   Printing a v3 page from the browser (the public link's Print button): the classic print rules in styles.css
   apply as they do to the classic page; the blocks that exist only on v3 (three things, outlook hero, weekly
   capsules, goals and plan, hour heat map) get a plain light layout here. The PDF renders from the classic page.
   ========================================================================== */
@media print {
  :root, body.print { --teal: #0B6478; --teal2: #0B6478; --teal-ink: #0B6478; --coral: #0B6478; --coral2: #0B6478; --coral-ink: #0B6478; --bar: #8A8C8E; --accent: #0B6478; --accent-ink: #FFFFFF; --green: #1F6F56; --red: #A3282A; --amber: #85510F; --muted: #5A676D; --ink: #12191C; --ink-2: #4A565B; --track: rgba(18, 25, 28, 0.08); --sep: rgba(18, 25, 28, 0.1); --edge: #E1E6E8; --glass2: #F3F5F6; --coral-chip: #0B6478; --green-chip: #0F845F; --on-dark: #FFFFFF; --ring-fill: #FFFFFF; }
  .things { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .things.n1 { grid-template-columns: 1fr; }
  .things.n2 { grid-template-columns: 1fr 1fr; }
  .things .thing { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; }
  .thing i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
  .thing.good i { background: var(--green); }
  .thing.bad i { background: var(--red); }
  .thing.info i { background: var(--teal); }
  .thing .k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .thing p { margin: 0; line-height: 1.4; }
  .ol-top { display: grid; grid-template-columns: auto 1fr; gap: 16px 28px; align-items: end; }
  .ol-eyebrow { font-size: 12px; color: var(--ink-2); font-weight: 600; }
  .ol-big { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; }
  .ol-big .unit { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-left: 8px; letter-spacing: 0; }
  .ol-parts { font-size: 12px; color: var(--muted); margin: 6px 0 0; max-width: 70ch; }
  .ol-facts { display: flex; gap: 18px; flex-wrap: wrap; align-items: end; }
  .ol-facts .fact { display: grid; gap: 2px; }
  .ol-facts .fact .l { font-size: 11px; color: var(--muted); }
  .ol-facts .fact .v { font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
  .ol-hero .tile, .ol-pace, .ol-weeks { margin-top: 12px; padding: 12px 14px; border-radius: 12px; }
  .ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
  .ph h3 { margin: 0; }
  .cap, .ph .cap { font-size: 11px; color: var(--muted); }
  .chart.v3, svg.chart { width: 100%; height: auto; display: block; }
  .tip { display: none; }
  .keys { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); margin-top: 6px; }
  .keys span { display: inline-flex; align-items: center; gap: 6px; }
  .keys .sw { width: 16px; height: 4px; border-radius: 2px; background: var(--accent); }
  .keys .sw.ghost { background: var(--muted); opacity: 0.6; }
  .keys .sw.tgt { background: var(--ink); height: 2px; }
  .weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 150px; padding-top: 20px; align-items: end; }
  .wk { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; height: 100%; min-width: 0; }
  .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 32px)); justify-content: center; gap: 4px; align-items: end; height: 100%; }
  .pair.n1 { grid-template-columns: minmax(0, 36px); }
  .pair.n3 { grid-template-columns: repeat(3, minmax(0, 24px)); }
  .wl { font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .out { padding: 12px 14px 10px; border: 1px solid var(--edge); border-radius: 12px; break-inside: avoid; }
  .out .oh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .out .oh .l { font-size: 12px; color: var(--ink-2); font-weight: 600; }
  .out .oh .v { font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
  .caps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 110px; padding-top: 20px; align-items: end; justify-items: center; }
  .caps .cap { width: 100%; max-width: 36px; }
  .caps .cap, .pair .cap { position: relative; height: 100%; display: block; background: var(--track); border-radius: 999px; border: 0; padding: 0; min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .caps .cap .f, .pair .cap .f { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: var(--c, var(--bar)); min-height: 5px; }
  .pair .cap.prev .f { background: var(--muted); opacity: 0.55; }
  .pair .cap.cur .f { background: var(--accent); }
  .caps .cap.now .f, .pair .cap.now .f { background: var(--accent); }
  .caps .cap.empty .f, .pair .cap.empty .f { display: none; }
  .caps .cap.partial .f { opacity: 0.55; }
  .caps .cap .pct, .pair .cap .pct { position: absolute; left: 50%; transform: translate(-50%, -18px); top: 0; font-size: 10px; font-weight: 700; white-space: nowrap; }
  .out .cl { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 6px; }
  .out .cl .now { color: var(--coral-ink); font-weight: 600; margin-left: auto; }
  .est { font-size: 11px; color: var(--muted); }
  .g { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sep); }
  .g:first-child { border-top: 0; padding-top: 0; }
  .g svg.ring { width: 40px; height: 40px; }
  .g .t { font-weight: 600; }
  .g .v { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .step { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sep); align-items: center; break-inside: avoid; }
  .step:first-of-type { border-top: 0; padding-top: 0; }
  .step .k { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--track); border: 1px solid transparent; }
  .step .k.c { background: var(--coral-chip); color: var(--on-dark); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .step .k.done { background: var(--green-chip); color: var(--on-dark); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .step .k svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .step .t { font-weight: 600; }
  .step.done .t { text-decoration: line-through; color: var(--muted); }
  .step .d, .step .who { font-size: 11px; color: var(--muted); }
  .step.sug .k { background: transparent; border: 1px dashed var(--sep); color: var(--muted); }
  .gp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .heat { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 6px; align-items: center; min-width: 0; }
  .heat .dl { font-size: 11px; color: var(--muted); text-align: right; }
  .heat .row, .heat .hl { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
  .heat .hl { font-size: 10px; color: var(--muted); grid-column: 2; }
  .heat .hl span { white-space: nowrap; min-width: 0; }
  .heat .c { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--track); position: relative; border: 0; padding: 0; min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .heat .c::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--rc, var(--accent)); opacity: var(--a, 0); }
  .heat-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
}

/* Google reviews card in the v3 language */
@media screen {
  .rv-avatar { background: var(--accent-soft); color: var(--teal-ink); }
  .rv-reply { background: var(--glass2, var(--track)); border-left-color: var(--teal); border-radius: 0 var(--radius-s) var(--radius-s) 0; box-shadow: inset 0 1px 0 var(--glass-hi); }
  .rv-item, .reviews-card .rv-head { border-color: var(--sep, var(--hair)); }
  .rv-wait { color: var(--watch-text); }
  .rv-big { font-size: 36px; }
  .rv-reply-head, .rv-reply-head time, .rv-item time { font-size: 13px; }
}
@media screen {
  .ri-facts span { background: var(--track); color: var(--ink-2); font-size: 13px; padding: 4px 11px; }
  .ri-empty { border-color: var(--edge); }
  .key-reveal { background: var(--glass2, var(--track)); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-hi); }
  .code-block { background: var(--glass2, var(--track)); border-color: var(--edge); }
  .cm-figure .t-value { font-size: 36px; }
}

/* ==========================================================================
   Calm report (MVP, 5 November 2026): /v3 becomes the calm report and the default view. Rules from
   design-archive/prototypes/catchment-calm-report.html (revision 2) and catchment-report-10.html:
   Inter 400 to 600 (nothing heavier except the wordmark), hero 56/500, section numbers 28/500, headings 17/600,
   body 14/400, captions 13/400 grey; changes as plain text, green or red only at 10 per cent or more; no tinted
   pills; no area fills; charts grey with the focus series in petrol; rings and heat cells in petrol shades and
   neutrals, never the client colour; the client colour only on the logo tile, the answer card's top rule and
   the section markers; status colour only for real problems, always text plus an icon.
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/brand/fonts/inter-latin-wght.woff2") format("woff2"); }
:root { --series-quiet: #7C878C; --series-faint: #9AA4A8; --dot: #C3CACD; --client-rule: var(--client-rule-l, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-quiet: #6E7C82; --series-faint: #5E6C72; --dot: #34434A; --client-rule: var(--client-rule-d, transparent); } }
:root[data-theme="dark"] { --series-quiet: #6E7C82; --series-faint: #5E6C72; --dot: #34434A; --client-rule: var(--client-rule-d, transparent); }
#report[data-brand] { --client-rule: var(--client-rule-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #report[data-brand] { --client-rule: var(--client-rule-d); } }
:root[data-theme="dark"] #report[data-brand] { --client-rule: var(--client-rule-d); }

@media screen {
  html[data-skin="v3"] { --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  html[data-skin="v3"] body { font-family: var(--font); font-size: 14px; line-height: 1.5; font-synthesis-weight: none; font-feature-settings: "tnum" 1, "cv11" 1; }
  /* Weight budget: one rule with id-level specificity so no older v3 rule can set 700 or 800 on the report. */
  html[data-skin="v3"] :is(#report, #topbar, #sidebar, #modal, #toast, #banners) :is(h1, h2, h3, h4, b, strong, th, label, button, .btn, .num, .t-label, .t-value, .hero-value, .delta, .pill, .chip, .bl-value, .ring-total, .k, .ol-big, .v, .pct, .endlabel, .legend-item, .nav-item, .tb-title, .side-label, .rv-big, .rv-name, .field select) { font-weight: 600; }
  html[data-skin="v3"] :is(#report, #topbar) :is(.num, .t-value, .hero-value, .ol-big, .ring-total, .num-xl, .num-l, .ans-num, .rv-big, .bl-value, .v, .pct) { font-weight: 500; }
  html[data-skin="v3"] :is(#report, #topbar) :is(.delta, .t-label, .legend-item, .pill, .chip, label, .field select, .menu-list button, .nav-item, .btn.ghost, .bl-tag, .hc-d, .step .t) { font-weight: 500; }
  html[data-skin="v3"] :is(#report, #topbar, #sidebar) svg text { font-weight: 400; }
  html[data-skin="v3"] :is(#report) h1 { font-size: 28px; letter-spacing: -0.02em; }
  html[data-skin="v3"] :is(#report) h2 { font-size: 17px; letter-spacing: -0.01em; }
  html[data-skin="v3"] :is(#report) h3 { font-size: 15px; }
  html[data-skin="v3"] .catchment-word { font-weight: 900; }

  /* Buttons and controls: 10px corners, quiet ghosts, one petrol primary. */
  html[data-skin="v3"] .btn { border-radius: 10px; }
  html[data-skin="v3"] .btn.small { border-radius: 8px; }
  html[data-skin="v3"] .field select, html[data-skin="v3"] .custom-range input, html[data-skin="v3"] .rank-toolbar input[type=search] { border-radius: 10px; color: var(--ink); }
  html[data-skin="v3"] .seg, html[data-skin="v3"] .seg button { border-radius: 8px; }
  html[data-skin="v3"] .nav-item.active { background: transparent; color: var(--teal-ink); box-shadow: inset 2px 0 0 var(--accent); border-radius: 8px; }

  /* Changes are plain text; colour only from calmChange (10 per cent or more). */
  html[data-skin="v3"] .delta { background: none; padding: 0; border-radius: 0; color: var(--ink); font-size: 13px; }
  html[data-skin="v3"] .delta.good, html[data-skin="v3"] .delta.bad, html[data-skin="v3"] .delta.same, html[data-skin="v3"] .delta.new { background: none; color: var(--ink); }
  html[data-skin="v3"] .delta.calm.good { color: var(--green); }
  html[data-skin="v3"] .delta.calm.bad { color: var(--red); }
  html[data-skin="v3"] .hero-tile .delta { background: none; }
  /* No tinted pill backgrounds: outlined labels in ink, petrol for the top 3. */
  html[data-skin="v3"] :is(.pill, .chip, .bl-tag, .legend-item) { background: transparent; border: 1px solid var(--hair-2); color: var(--ink-2); box-shadow: none; }
  html[data-skin="v3"] .pill.top3 { background: transparent; color: var(--teal-ink); border-color: currentColor; }
  html[data-skin="v3"] .pill.page1 { background: transparent; color: var(--ink); }
  html[data-skin="v3"] .pill.page2, html[data-skin="v3"] .pill.beyond, html[data-skin="v3"] .pill.none { background: transparent; color: var(--muted); }
  html[data-skin="v3"] .chip i { display: none; }
  html[data-skin="v3"] .chip.coral { color: var(--amber); }
  html[data-skin="v3"] .chip.green, html[data-skin="v3"] .chip.lime { color: var(--ink); }
  html[data-skin="v3"] .legend-item.off { opacity: 0.5; }
  html[data-skin="v3"] .bl-fill, html[data-skin="v3"] .groups .bl-fill { background: var(--series-quiet); }
  html[data-skin="v3"] .barrow.hl .bl-fill { background: var(--accent); }
  html[data-skin="v3"] .bl-track { height: 8px; }
  html[data-skin="v3"] .linechart.v3 .area { display: none; }

  /* ---- header: one row ---------------------------------------------------- */
  #topbar.calm { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; padding: 10px 24px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--hair); box-shadow: inset 0 3px 0 var(--client-rule); }
  #topbar.calm .tb-client { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 140px; max-width: 240px; flex: 0 1 auto; }
  #topbar.calm .tb-logo { width: 36px; height: 36px; flex: none; border-radius: 9px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; font-size: 13px; font-weight: 600; overflow: hidden; }
  #topbar.calm .tb-logo.branded { border-color: transparent; }
  #topbar.calm .tb-logo.img { background: #FFFFFF; padding: 3px; }
  #topbar.calm .tb-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  #topbar.calm .tb-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  #topbar.calm .tb-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
  #topbar.calm #tb-sub { font-size: 13px; font-weight: 400; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #topbar.calm .ask { flex: 1 1 220px; min-width: 160px; max-width: 420px; }
  #topbar.calm .controls { flex: none; gap: 8px; flex-wrap: nowrap; }
  #topbar.calm .field select { font-weight: 500; padding: 8px 30px 8px 12px; min-height: 40px; max-width: 176px; }
  #topbar.calm .actions { margin-left: 0; gap: 8px; flex: none; }
  #topbar.calm .btn { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; }
  #topbar.calm .btn.icon-only { width: 40px; padding: 0; justify-content: center; }
  #topbar.calm .btn svg, .calm-head .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #topbar.calm .menu-list { min-width: 240px; }
  #topbar.calm .menu-list button { display: flex; align-items: center; min-height: 40px; }
  .ask { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 10px; padding: 0 8px 0 12px; min-height: 40px; color: var(--muted); }
  .ask:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ask svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .ask input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 14px var(--font); outline: none; padding: 8px 0; -webkit-appearance: none; appearance: none; }
  .ask input::placeholder { color: var(--muted); }
  .ask input::-webkit-search-cancel-button { display: none; }
  .ask kbd { font: 500 13px var(--font); color: var(--muted); border: 1px solid var(--hair-2); border-radius: 5px; padding: 0 6px; line-height: 20px; }
  details.pop { position: relative; }
  details.pop > summary { list-style: none; cursor: pointer; }
  details.pop > summary::-webkit-details-marker { display: none; }
  details.health > summary.btn { background: var(--surface); color: var(--ink); border: 1px solid var(--hair-2); font-weight: 500; white-space: nowrap; }
  details.health > summary.btn:hover { background: var(--track); filter: none; }
  details.health .popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 340px; max-width: calc(100vw - 32px); background: var(--solid); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--shadow-2); padding: 12px 14px; font-size: 13px; color: var(--ink); }
  details.health .popover h4 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
  .fresh-l { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .fresh-l li { display: contents; }
  .fresh-l span { padding: 7px 0; border-top: 1px solid var(--sep); }
  .fresh-l span:nth-child(2) { color: var(--ink-2); text-align: right; padding-left: 10px; }
  .st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
  .st svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .st.watch { color: var(--amber); }
  .st.bad, td.st.bad { color: var(--red); }
  .calm-head { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
  .calm-head .ask { flex: 1; max-width: none; }
  .calm-head .tb-client { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; margin-right: 6px; }
  .calm-head .tb-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; font-size: 13px; font-weight: 600; overflow: hidden; }
  .calm-head .tb-logo.img { background: #FFFFFF; padding: 3px; }
  .calm-head .tb-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .calm-head .tb-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .calm-head .tb-name { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calm-head .tb-sub { font-size: 13px; color: var(--ink-2); }

  /* ---- the answer card from the ask bar -------------------------------- */
  #ask-answer.ans { padding: 0; margin: 0 0 16px; overflow: hidden; box-shadow: var(--shadow-2); }
  .ans-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--sep); font-size: 13px; color: var(--ink-2); }
  .ans-q b { color: var(--ink); font-weight: 500; }
  .ans-b { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 22px; padding: 16px; }
  .ans-b.none { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ans-b .lbl, .answer-a .lbl, .ans-next .lbl { font-size: 13px; color: var(--ink-2); }
  .ans-num { font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; margin: 6px 0 8px; color: var(--ink); }
  .ans-b p { margin: 4px 0; }
  .ans-how { font-size: 13px; color: var(--ink-2); border-left: 2px solid var(--hair-2); padding: 2px 0 2px 10px; margin-top: 10px !important; }
  .ans-how b { font-weight: 500; color: var(--ink); }
  .ans-none { font-size: 15px; color: var(--ink); margin: 0 0 6px; }
  .ans-weeks .aw { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--sep); }
  .ans-weeks .aw i { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; display: block; }
  .ans-weeks .aw i b { display: block; height: 100%; background: var(--series-quiet); border-radius: 4px; }
  .ans-next { display: grid; align-content: start; }
  .ans-sug { text-align: left; background: none; border: 0; border-top: 1px solid var(--sep); color: var(--teal-ink); font: 500 14px var(--font); min-height: 44px; padding: 0 4px; cursor: pointer; border-radius: 6px; }
  .ans-sug:hover { background: var(--track); }
  .est { display: inline-block; font-size: 13px; font-weight: 500; color: var(--ink-2); border: 1px dashed var(--hair-2); border-radius: 5px; padding: 0 5px; line-height: 18px; vertical-align: 1px; letter-spacing: 0; }

  /* ---- level 1: the answer ---------------------------------------------- */
  .answer-a { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 24px; padding: 22px 22px 18px; margin-bottom: 14px; box-shadow: var(--shadow-1), inset 0 3px 0 var(--client-rule); }
  .answer-a .num-xl { font-size: 56px; line-height: 1; letter-spacing: -0.03em; margin: 12px 0 10px; color: var(--ink); }
  .answer-a .row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
  .answer-a .split { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 14px; }
  .answer-a .split b { font-weight: 500; }
  .status-a { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sep); display: grid; gap: 2px; }
  .answer-a .cap, .reason .cap, .calm-sec .cap, .viz .cap, .calm-block .cap { font-size: 13px; color: var(--ink-2); }
  .answer-a .src { margin: 12px 0 0; }
  .answer-a #live-pill .live { margin-top: 8px; font-size: 13px; }
  .answer-nochart { align-self: center; }
  .viz { margin: 0; min-width: 0; }
  .viz-top { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 8px; }
  .viz-top .t { font-size: 14px; font-weight: 500; color: var(--ink); }
  .viz-top .legend { display: flex; gap: 4px 14px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--ink-2); }
  .viz-top .legend > span { display: inline-flex; align-items: center; gap: 6px; }
  .viz-top .sw { display: inline-block; width: 20px; height: 2px; border: 0; border-radius: 1px; background: var(--accent); vertical-align: middle; }
  .viz-top .sw.prev { height: 1.5px; background: repeating-linear-gradient(90deg, var(--series-quiet) 0 4px, transparent 4px 8px); }
  .viz-top .sw.dot { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--dot); }
  svg.calmline { display: block; width: 100%; height: auto; overflow: visible; }
  svg.calmline .grid { stroke: var(--sep); stroke-width: 1; }
  svg.calmline .axis { font-size: 13px; fill: var(--muted); }
  svg.calmline .pt-day { fill: var(--dot); }
  svg.calmline .pt-day.est { fill: var(--surface); stroke: var(--dot); stroke-width: 1.2; }
  svg.calmline .ln-focus { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
  svg.calmline .ln-prev { fill: none; stroke: var(--series-quiet); stroke-width: 1.25; stroke-dasharray: 4 4; }
  svg.calmline .crosshair { stroke: var(--ink); opacity: 0.3; }
  svg.calmline .hov { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }

  /* ---- level 2: reasons --------------------------------------------------- */
  .reasons-sec .sec-head, .calm-sec .sec-head, .calm-block .sec-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
  .reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .reasons.n1 { grid-template-columns: minmax(0, 1fr); }
  .reasons.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reason.card { padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
  .reason h3 { font-size: 15px; font-weight: 500 !important; line-height: 1.4; margin: 0 0 8px; color: var(--ink); }
  .reason .num-l, .kpi .num-l { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
  .reason .unit, .ol-big .unit, .ans-num .unit { font-size: 14px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; }
  .reason .cap { margin-top: auto; padding-top: 6px; }

  /* ---- level 3: evidence sections ---------------------------------------- */
  section.calm-sec { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 16px 18px 6px; }
  section.calm-sec .sec-head h2::before, .calm-block .sec-head h2::before, .reasons-sec .sec-head h2::before { width: 3px; height: 16px; border-radius: 2px; vertical-align: -2px; margin-right: 10px; }
  .full-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--teal-ink); text-decoration: none; min-height: 32px; padding: 0 6px; border-radius: 8px; }
  .full-link:hover { background: var(--track); }
  .full-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .kpis { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); margin: 0 -18px; }
  .kpis.c1 { --cols: 1; } .kpis.c2 { --cols: 2; } .kpis.c3 { --cols: 3; } .kpis.c4 { --cols: 4; } .kpis.c5 { --cols: 5; }
  .kpis.more { margin: 0; border: 1px solid var(--sep); border-radius: 10px; grid-column: 1 / -1; }
  .kpi { padding: 12px 18px; border-right: 1px solid var(--sep); min-width: 0; }
  .kpi:last-child { border-right: 0; }
  .kpis.more .kpi { border-bottom: 1px solid var(--sep); }
  .kpi-n { font-size: 13px; color: var(--ink-2); min-height: 20px; }
  .kpi .num-l { margin: 4px 0 2px; }
  .kpi-d { font-size: 13px; min-height: 20px; }
  .src-line { margin: 8px 0 14px; }
  section.calm-sec > .viz { margin-bottom: 8px; }
  details.more { border-top: 1px solid var(--sep); margin: 8px -18px 0; padding: 0 18px; }
  details.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--teal-ink); font-size: 13px; font-weight: 500; min-height: 44px; }
  details.more > summary::-webkit-details-marker { display: none; }
  details.more > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s; }
  details.more[open] > summary svg { transform: rotate(180deg); }
  details.more > summary .cap { font-weight: 400; }
  details.more .when-open { display: none; }
  details.more[open] .when-open { display: inline; }
  details.more[open] .when-closed { display: none; }
  .detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 6px 0 18px; }
  .detail > .viz { min-width: 0; }
  .detail > .table-card, .detail > .hours-card { grid-column: 1 / -1; background: none; border: 0; box-shadow: none; padding: 0; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .state { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair-2); margin: 4px 0 12px; }
  .state > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--ink-2); }
  .state.bad > svg, .state.bad b { color: var(--red); }
  .state b { display: block; font-weight: 600; }
  .state p { margin: 2px 0 8px; color: var(--ink-2); }

  /* ---- level 4 blocks in the calm style ---------------------------------- */
  .calm-block > .card.pad, .calm-block > .card { padding: 18px; }
  .ol-two { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 24px; align-items: start; }
  .ol-next .ol-big { font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; margin: 8px 0; }
  .ol-outs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sep); }
  .ol-pace, .ol-weeks { background: none !important; }
  .outs .tile.out { background: var(--surface-2); }
  html[data-skin="v3"] #report .sec-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
  .caps .cap, .pair .cap { background: var(--track); }
  .caps .cap .f, .pair .cap .f { background: var(--dot); }
  .caps .cap.now .f, .pair .cap.cur .f { background: var(--accent); }
  .pair .cap.prev .f { background: var(--dot); }
  .reviews-sec .reviews-card { margin: 0; }
  html[data-skin="v3"] .step .k.done, html[data-skin="v3"] .step .k.tick.done { background: var(--track); color: var(--ink-2); border-color: transparent; }
  html[data-skin="v3"] .step .k.c { background: var(--surface); color: var(--ink); border: 1.5px solid var(--hair-2); }
  .src-t td, .src-t th { vertical-align: top; }
  .report-foot { color: var(--ink-2); }
}
@media screen and (min-width: 981px) { #topbar.calm .menu-btn { display: none; } }
@media screen and (max-width: 1440px) {
  #topbar.calm { flex-wrap: wrap; }
  #topbar.calm .ask { order: 9; flex: 1 1 100%; max-width: none; }
  #topbar.calm .tb-client { flex: 1 1 auto; }
}
@media screen and (max-width: 980px) {
  #topbar.calm { padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); gap: 8px; }
  #topbar.calm .tb-client { flex: 1 1 0; }
  #topbar.calm .actions { order: 1; }
  #topbar.calm .controls { order: 2; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; }
  #topbar.calm .field select { width: 100%; min-height: 44px; }
  #topbar.calm .btn, #topbar.calm .btn.icon-only, .ask { min-height: 44px; }
  #topbar.calm .btn.icon-only { width: 44px; }
  .answer-a { grid-template-columns: minmax(0, 1fr); }
  .reasons, .reasons.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis, .kpis.c5, .kpis.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { border-bottom: 1px solid var(--sep); }
  .ans-b, .ans-b.none, .ol-two, .detail { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 600px) {
  #topbar.calm .share-btn .ml, #topbar.calm details.health > summary span:not(.st) { display: none; }
  #topbar.calm .share-btn, #topbar.calm details.health > summary { width: 44px; padding: 0; justify-content: center; }
  details.health .popover { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
  .answer-a { padding: 16px; }
  .answer-a .num-xl { font-size: 52px; }
  .reasons, .reasons.n2, .reasons.n3 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  section.calm-sec { padding: 14px 14px 4px; }
  .kpis, .kpis.c3, .kpis.c4, .kpis.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -14px; }
  .kpis.more { margin: 0; }
  .kpi { padding: 12px 14px; }
  .kpi:nth-child(2n) { border-right: 0; }
  details.more { margin: 8px -14px 0; padding: 0 14px; }
  .ask input { font-size: 16px; }
  .calm-head { flex-wrap: wrap; }
  .calm-head .tb-client { flex: 1 1 100%; }
  .calm-head .ask { order: 3; flex: 1 1 100%; }
}
@media print {
  #ask-answer, .calm-head, .full-link, details.more > summary { display: none !important; }
  details.more > .detail { display: grid !important; }
  .answer-a { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 16px; border: 1px solid #D3DADD; border-radius: 12px; padding: 14px; break-inside: avoid; }
  .answer-a .num-xl { font-size: 40px; font-weight: 500; }
  .reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .reason { border: 1px solid #D3DADD; border-radius: 10px; padding: 10px; break-inside: avoid; }
  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .delta.calm.good { color: #1F6F56; } .delta.calm.bad { color: #A3282A; }
  svg.calmline .ln-focus { fill: none; stroke: #0B6478; stroke-width: 2; } svg.calmline .ln-prev { fill: none; stroke: #7C878C; stroke-dasharray: 4 4; } svg.calmline .pt-day { fill: #C3CACD; }
}