/* =========================================================
   J.A.R.V.I.S.: dotted orbs and frosted glass on black
   Every page has the landing page's look, after two reels Jim liked: monochrome dotted orbs on black, and frosted
   glass cards over a soft colour wash. White is the accent. Colour only ever means something: green for money in or
   all's well, amber for look at this, red for money out or something wrong, orange for waiting on you.
   ========================================================= */

:root {
    color-scheme: dark;

    --bg-void: #09090b;
    --bg-panel: #131316;        /* opaque, for pickers and pop-ups */
    --bg-panel-raised: #1c1c20;
    --bg-tile: rgba(255, 255, 255, 0.045);

    --border-hairline: rgba(255, 255, 255, 0.08);
    --border-hairline-strong: rgba(255, 255, 255, 0.16);

    --text-primary: #f2f2f5;
    --text-secondary: #d4d4d8;
    --text-subtle: #a1a1aa;
    --text-muted: #8b8b94;
    --text-faint: #71717a;

    --accent: #f2f2f5;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --accent-dim: rgba(255, 255, 255, 0.24);
    --accent-warm: #ff8a3d;

    --status-clean: #7ee2a8;
    --status-warning: #ffb547;
    --status-critical: #ff5c5c;
    --status-active: var(--accent);
    --status-neutral: var(--text-faint);

    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* The landing page's names for the same colours. */
    --jv-text: var(--text-primary);
    --jv-soft: var(--text-secondary);
    --jv-dim: var(--text-muted);
    --jv-faint: var(--text-faint);
    --jv-line: var(--border-hairline);
    --jv-accent: var(--accent-warm);
    --jv-amber: var(--status-warning);
    --jv-red: var(--status-critical);
    --jv-green: var(--status-clean);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--bg-void);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* The colour the glass refracts: dark in the middle, warm and cool at the edges. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 32% at 8% 22%, rgba(255, 138, 61, 0.17), transparent 70%),
        radial-gradient(30% 28% at 96% 18%, rgba(96, 165, 250, 0.11), transparent 70%),
        radial-gradient(42% 36% at 82% 88%, rgba(168, 112, 255, 0.13), transparent 70%),
        radial-gradient(34% 30% at 14% 92%, rgba(255, 108, 92, 0.10), transparent 70%);
}

h1:focus {
    outline: none;
}

a {
    color: inherit;
}

::selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-hairline-strong);
    border-radius: 8px;
}

/* -------------------- Layout shell -------------------- */

.jv-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 128px;
}

.hud-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.jv-page > .hud-main { margin-top: 40px; }

/* -------------------- Panel primitive -------------------- */

.hud-panel, .jv-glass {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03) 60%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

.hud-panel {
    position: relative;
    padding: 20px;
}

.hud-panel-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
}

/* -------------------- Buttons / inputs -------------------- */

.hud-btn, .jv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font: 600 14px var(--font);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.hud-btn { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.hud-btn:hover, .jv-btn:hover { background: rgba(255, 255, 255, 0.12); }
.hud-btn:active, .jv-btn:active { transform: scale(0.98); }
.hud-btn.solid, .jv-btn.solid { background: #f2f2f5; border-color: transparent; color: #0b0b0d; }
.hud-btn.solid:hover, .jv-btn.solid:hover { background: #ffffff; }
.hud-btn:disabled, .jv-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.hud-input, .jv-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    font: 14px/1.4 var(--font);
}
.jv-input { padding: 12px 14px; font-size: 15px; line-height: 1.45; resize: vertical; }
.hud-input:focus, .jv-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.35); }
.hud-input::placeholder, .jv-input::placeholder { color: var(--text-faint); }
.hud-input option { background: var(--bg-panel); }
input[type="checkbox"], input[type="radio"] { accent-color: #f2f2f5; }

/* -------------------- Stat tiles -------------------- */

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

.stat-tile {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) 60%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 16px 18px;
    min-width: 0;
}

.stat-tile .stat-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--text-primary);
    line-height: 1;
}

.stat-tile .stat-value.warning { color: var(--status-warning); }
.stat-tile .stat-value.critical { color: var(--status-critical); }

.stat-tile .stat-label {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.35;
}

.jv-page > .stat-tiles { margin-top: 40px; }

/* -------------------- Project cards (Financials) -------------------- */

.project-card {
    background: var(--bg-tile);
    border: 1px solid var(--border-hairline);
    border-left: 2px solid transparent;
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    transition: border-color 0.15s, transform 0.15s, border-left-color 0.15s;
}

.project-card:hover {
    border-color: var(--border-hairline-strong);
    transform: translateY(-1px);
}

.project-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-name {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-meta {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-meta .label {
    color: var(--text-muted);
}

/* -------------------- Add rows, delete buttons, empty notes -------------------- */

.todo-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.todo-add-row .hud-btn { flex: none; }

.todo-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    flex: none;
}

.todo-delete:hover {
    color: var(--status-critical);
}

.todo-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

/* -------------------- Misc -------------------- */

.blazor-error-boundary {
    background: var(--status-critical);
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 14px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    background: var(--status-critical);
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.4);
    display: none;
    left: 0;
    padding: 0.8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}

/* -------------------- Health: treatments -------------------- */

.treatment-list { display: flex; flex-direction: column; gap: 4px; }
.treatment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-tile);
    border-radius: 14px;
    font-size: 14px;
}
.treatment-name { flex: 1; color: var(--text-primary); }
.treatment-status {
    font-size: 11.5px;
    padding: 2px 7px;
    border-radius: 14px;
    min-width: 76px;
    text-align: center;
    border: 1px solid var(--border-hairline);
}
.treatment-status.helped { color: var(--status-clean); border-color: var(--status-clean); }
.treatment-status.trying { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.4); }
.treatment-status.considering { color: var(--text-muted); }
.treatment-status.noeffect { color: var(--text-muted); }
.treatment-status.worsened { color: var(--status-critical); border-color: var(--status-critical); }
.treatment-status.stopped { color: var(--text-muted); }
.treatment-select {
    background: var(--bg-panel);
    color: var(--text-secondary);
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    font-size: 12.5px;
    padding: 4px 8px;
    font-family: var(--font);
}

/* -------------------- Health: labs -------------------- */

.lab-list { display: flex; flex-direction: column; gap: 8px; }
.lab-sort-row { display: flex; align-items: center; gap: 8px; }
.lab-sort-label { font-size: 12.5px; color: var(--text-muted); }
.lab-item {
    background: var(--bg-tile);
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    padding: 10px 12px;
}
.lab-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.lab-date { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-subtle); }
.lab-type { font-size: 13.5px; color: var(--text-primary); font-weight: 600; }
.lab-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.lab-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lab-flag {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    color: var(--text-secondary);
}
.lab-flag.critical { color: var(--status-critical); border-color: var(--status-critical); }
.lab-flag.warning { color: var(--status-warning); border-color: var(--status-warning); }

.task-title-count {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text-muted);
    margin-left: auto;
}

/* Priority segmented control */
.prio-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}
.prio-seg-btn {
    font-family: var(--font);
    font-size: 12.5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.prio-seg-btn:hover { color: var(--text-secondary); background: var(--bg-tile); }
.prio-seg-btn.active.urgent { background: var(--status-critical); color: #fff; }
.prio-seg-btn.active.high { background: var(--status-warning); color: var(--bg-void); }
.prio-seg-btn.active.medium { background: #f2f2f5; color: #0b0b0d; }
.prio-seg-btn.active.low { background: var(--text-muted); color: var(--bg-void); }

/* -------------------- Lab source-photo links -------------------- */
.lab-photo-links { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lab-photo-link {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}
.lab-photo-link:hover { background: var(--accent-soft); border-color: var(--accent); }
.lab-head { flex-wrap: wrap; }

@keyframes panel-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* -------------------- Treatment anecdotes -------------------- */

.treatment-chevron {
    font-size: 11.5px;
    color: var(--text-muted);
    transition: transform 0.15s;
}

.anecdote-count {
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--accent);
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    padding: 0 6px;
    line-height: 15px;
}

.anecdote-box {
    margin: 2px 0 6px 26px;
    padding: 8px 10px;
    border-left: 2px solid var(--border-hairline-strong);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: panel-in 0.25s ease-out;
}

.anecdote-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
}

.anecdote-date {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-subtle);
    white-space: nowrap;
}

.anecdote-text {
    flex: 1;
    color: var(--text-primary);
    line-height: 1.45;
}

.anecdote-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.anecdote-box .todo-add-row { margin-top: 2px; }
.anecdote-box .hud-input { font-size: 13.5px; padding: 7px 12px; }

/* -------------------- App revenue source badge -------------------- */
.app-rev-source {
    font-size: 11.5px;
    color: var(--text-muted);
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* =========================================================
   Health page (/health) — dedicated ME/CFS investigation page
   ========================================================= */

/* Muted sub-label inside a panel title */
.health-panel-sub {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text-muted);
}

/* A collapsed section: a glass card whose <summary> is the title. Open, the content follows under it. */
summary.hud-panel-title {
    position: relative;
    list-style: none;
    margin: 0;
    padding-right: 26px;
    cursor: pointer;
}
summary.hud-panel-title::-webkit-details-marker { display: none; }
summary.hud-panel-title::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s;
}
details[open] > summary.hud-panel-title { margin-bottom: 16px; }
details[open] > summary.hud-panel-title::after { transform: rotate(45deg); }
.lab-sort-row { margin-bottom: 12px; }
a.prio-seg-btn { display: inline-block; text-decoration: none; }

/* Treatment tracker row: the expandable item (status, name, notes) with its status picker
   beside it. The picker is its own form, outside <summary>, so using it never toggles the row. */
.treatment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 8px;
    padding: 8px 10px;
    background: var(--bg-tile);
    border-radius: 999px;
}
.treatment-row .treatment-item {
    list-style: none;
    padding: 0;
    background: none;
    min-height: 30px;
    cursor: pointer;
}
.treatment-row .treatment-item::-webkit-details-marker { display: none; }
.treatment-row .treatment-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.treatment-details[open] .treatment-chevron { transform: rotate(90deg); }
.treatment-row .anecdote-box { margin: 8px 0 4px; }

/* "At a glance": flagged labs beside the treatment picture, stacked on narrow screens. */
.glance-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 22px 28px;
}
.glance-head {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 10px;
}
.glance-empty { font-size: 14px; color: var(--text-muted); padding: 4px 0; }

.kr-list { display: flex; flex-direction: column; gap: 6px; }
.kr-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    grid-template-areas: "name value meta" "earlier earlier earlier";
    gap: 2px 12px;
    align-items: baseline;
    padding: 10px 12px;
    background: var(--bg-tile);
    border-left: 2px solid var(--border-hairline-strong);
    border-radius: 0 12px 12px 0;
}
.kr-row.critical { border-left-color: var(--status-critical); }
.kr-row.warning { border-left-color: var(--status-warning); }
.kr-row.resolved { border-left-color: var(--status-clean); }
.kr-name { grid-area: name; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.kr-value { grid-area: value; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-primary); }
.kr-flag {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
    color: var(--text-muted);
}
.kr-row.critical .kr-flag { color: var(--status-critical); }
.kr-row.warning .kr-flag { color: var(--status-warning); }
.kr-row.resolved .kr-flag { color: var(--status-clean); }
.kr-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.kr-earlier { grid-area: earlier; font-size: 12.5px; color: var(--text-muted); }
.kr-borderline { margin-top: 10px; }

.tx-group { margin-bottom: 10px; }
.tx-group:last-child { margin-bottom: 0; }
.tx-group-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.tx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-chip {
    font-size: 13px;
    color: var(--text-primary);
    padding: 3px 11px;
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    background: var(--bg-tile);
}
.tx-chip.trying { border-color: rgba(255, 255, 255, 0.4); }
.tx-chip.helped { border-color: var(--status-clean); }
.tx-chip.worsened { border-color: var(--status-critical); }
.tx-chip.warning { border-color: var(--status-warning); }
.tx-chip.noeffect, .tx-chip.stopped, .tx-chip.considering { color: var(--text-secondary); }

/* "Considering": folded to one small pill, with smaller chips when opened. */
.tx-fold { margin-top: 12px; }
.tx-fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    list-style: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tx-fold > summary:hover { color: var(--text-primary); border-color: var(--border-hairline-strong); }
.tx-fold > summary::-webkit-details-marker { display: none; }
.tx-fold > summary::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-left: 1px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}
.tx-fold[open] > summary { margin-bottom: 8px; }
.tx-fold[open] > summary::after { transform: rotate(45deg); }
.tx-fold-count { font-weight: 400; font-variant-numeric: tabular-nums; }
.tx-fold .tx-chips { gap: 4px; }
.tx-fold .tx-chip { font-size: 12px; padding: 2px 9px; }

/* Triggers and symptoms: two ranked lists, worst first. Red is severe, amber moderate, and mild stays neutral. */
.sx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 20px;
    align-items: start;
}
.sx-tier { --sx: var(--text-muted); --sx-wash: transparent; }
.sx-tier.severe { --sx: var(--status-critical); --sx-wash: rgba(255, 92, 92, 0.13); }
.sx-tier.moderate { --sx: var(--status-warning); --sx-wash: rgba(255, 181, 71, 0.08); }
.sx-tier + .sx-tier { margin-top: 20px; }
.sx-tier-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 9px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--sx);
}
.sx-meter { display: inline-flex; gap: 3px; }
.sx-meter i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-meter i.off { opacity: 0.22; }
.sx-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sx-row {
    display: grid;
    grid-template-columns: 1.3em minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: baseline;
    padding: 10px 12px 10px 10px;
    background: linear-gradient(90deg, var(--sx-wash), transparent 75%), var(--bg-tile);
    border-left: 2px solid var(--sx);
    border-radius: 0 12px 12px 0;
}
.sx-rank { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sx-name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.sx-when {
    padding: 1px 9px;
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
    color: var(--text-subtle);
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
}
.sx-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 7px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted);
    border: 1px dashed var(--border-hairline-strong);
    border-radius: 999px;
    white-space: nowrap;
}
.sx-detail { grid-column: 2 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-subtle); }
/* The pill drops under the name wherever a row is too narrow for both: two tight columns, or a phone. */
@media (min-width: 901px) and (max-width: 1080px), (max-width: 600px) {
    .sx-row { grid-template-columns: 1.3em minmax(0, 1fr); }
    .sx-when { grid-column: 2; justify-self: start; white-space: normal; }
    .sx-col .jv-section-head p { flex-basis: 100%; }
}

/* Markdown rendering for the case file, clinician summary, research synthesis, and treatment notes (rendered to
   HTML by Markdig). */
.markdown-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    word-wrap: break-word;
}
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 1.5em 0 0.55em;
}
.markdown-body h1 { font-size: 22px; letter-spacing: -0.025em; margin-top: 0.2em; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 14.5px; letter-spacing: -0.01em; }

.markdown-body p { margin: 0 0 0.75em; }
.markdown-body strong { color: var(--text-primary); font-weight: 600; }
.markdown-body em { color: var(--text-secondary); }
.markdown-body del { color: var(--text-muted); }

.markdown-body a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-hairline-strong); }
.markdown-body a:hover { border-bottom-color: var(--text-primary); }

/* Lists — tight, with a subtle left rail so nested items read clearly. */
.markdown-body ul,
.markdown-body ol { margin: 0 0 0.75em; padding-left: 1.3em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body li::marker { color: var(--text-faint); }
.markdown-body ul ul, .markdown-body ol ol, .markdown-body ul ol, .markdown-body ol ul { margin: 0.2em 0; }

/* Task lists (Markdig) — render the checkbox quietly, not as a giant form control. */
.markdown-body input[type="checkbox"] { accent-color: var(--accent); margin-right: 6px; transform: translateY(-1px); }

/* Tables — the synthesis + clinician summary lean heavily on these. MarkdownService wraps each
   one in .md-table, which scrolls sideways when the table is wider than the panel. */
.markdown-body .md-table { overflow-x: auto; margin: 0 0 0.9em; }
.markdown-body .md-table table { margin: 0; }
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.9em;
    font-size: 13.5px;
}
.markdown-body thead th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border-hairline-strong);
    padding: 9px 12px;
}
.markdown-body tbody td {
    border-bottom: 1px solid var(--border-hairline);
    padding: 9px 12px;
    vertical-align: top;
    color: var(--text-secondary);
}
.markdown-body tbody tr:last-child td { border-bottom: none; }
.markdown-body tbody tr:hover td { background: rgba(255, 255, 255, 0.03); color: var(--text-primary); }

/* Inline code — small cyan-tinted pill. */
.markdown-body code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    background: var(--bg-tile);
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    padding: 1px 6px;
    color: var(--text-primary);
}
/* Fenced code blocks — full-width mono block. */
.markdown-body pre {
    background: var(--bg-tile);
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0 0 0.9em;
}
.markdown-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font-size: 12.5px;
}

/* Blockquote — left rail, muted. */
.markdown-body blockquote {
    border-left: 2px solid var(--border-hairline-strong);
    margin: 0 0 0.75em;
    padding: 0.2em 0 0.2em 0.9em;
    color: var(--text-subtle);
    font-style: italic;
}
.markdown-body blockquote p { margin: 0.2em 0; }

/* Horizontal rule — thin hairline, matches panel borders. */
.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border-hairline);
    margin: 1.2em 0;
}

/* The case file is the most compact doc; keep it a touch tighter. */
.case-file-body { font-size: 14.5px; }
.case-file-body h1 { font-size: 19px; }
.case-file-body h2 { font-size: 16px; }

/* Treatment notes are short — render as a small italic blurb inline, no heading scale. */
.treatment-notes-body { font-size: 13.5px; font-style: italic; color: var(--text-secondary); }
.treatment-notes-body h1, .treatment-notes-body h2, .treatment-notes-body h3 { font-size: 14px; margin: 0.6em 0 0.3em; }

@media (max-width: 900px) {
    .glance-grid, .sx-grid { grid-template-columns: 1fr; }
}

/* Phones: wrapped rows, and wide tables scroll inside their panel instead of being clipped (the body hides horizontal
   overflow). */
@media (max-width: 600px) {
    .hud-panel { padding: 16px; }
    .hud-input { font-size: 16px; } /* 16px stops iOS zooming in on focus */

    .kr-row {
        grid-template-columns: minmax(0, 1fr) fit-content(56%);
        grid-template-areas: "name value" "meta meta" "earlier earlier";
    }
    .kr-value { text-align: right; }
    .kr-meta { justify-content: flex-start; white-space: normal; }

    .health-page .markdown-body { font-size: 14.5px; }
    .health-page .markdown-body h1 { font-size: 19px; }
    .health-page .markdown-body h2 { font-size: 17px; }
    .health-page .markdown-body h3 { font-size: 15.5px; }
    .health-page .markdown-body table { font-size: 13px; }
    .health-page .markdown-body thead th { font-size: 12px; }
    .health-page .markdown-body thead th,
    .health-page .markdown-body tbody td { padding: 7px 9px; min-width: 6em; }
    /* The last column is usually the comment; give it room to read, the box scrolls. */
    .health-page .markdown-body tbody td:last-child { min-width: 10em; }
}

/* Print (the page's Print button or Ctrl+P): the header, "At a glance", triggers and symptoms and the clinician
   summary, plus the lab history when it is open, in black on white. */
@media print {
    :root { color-scheme: light; }
    body { background: #fff !important; }
    body::before { display: none !important; }
    .jv-page.health-page { max-width: none; padding: 0; }
    .health-page .jv-head-orb, .health-page .jv-dock, .health-page .no-print,
    .health-page .jv-section:not(.print-target):not(:has(.print-if-open[open])),
    .health-page #notes > .jv-section-head,
    .health-page #notes .hud-panel:not(.print-if-open[open]) { display: none !important; }
    .health-page, .health-page * {
        color: #000 !important;
        animation: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .health-page, .health-page * { font-family: Arial, Helvetica, sans-serif !important; }
    .health-page .markdown-body li::marker { color: #000; }
    .health-page .md-table { overflow: visible; }
    .health-page .jv-head { align-items: flex-start; text-align: left; padding: 0 0 4mm; margin: 0 0 6mm; border-bottom: 1px solid #999; }
    .health-page .jv-title { font-size: 20pt; letter-spacing: normal; }
    .health-page .jv-chips { justify-content: flex-start; gap: 2px 18px; margin-top: 2mm; }
    .health-page .jv-chip { min-height: 0; padding: 0; background: none; border: none; font-size: 11pt; }
    .health-page .jv-section { margin-top: 6mm; }
    .health-page .jv-section-head { margin-bottom: 2mm; }
    .health-page .jv-section-head h2 { font-size: 14pt; letter-spacing: normal; }
    .health-page .hud-panel { background: none !important; border: none !important; padding: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .health-page summary.hud-panel-title { padding: 0 0 2mm; border-bottom: 1px solid #999; }
    .health-page summary.hud-panel-title::after { display: none; }
    .kr-row, .lab-item, .tx-chip { background: none !important; }
    .kr-row, .lab-item { break-inside: avoid; }
    .tx-group { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
    .tx-group-label { flex: none; min-width: 8em; margin: 0; }
    .kr-row { border: 1px solid #bbb; border-left-width: 3px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .tx-chip, .lab-item, .lab-flag { border-color: #999 !important; }
    .tx-fold:not([open]) { display: none; }
    .tx-fold > summary { padding: 0; border: none; }
    .tx-fold > summary::after { display: none; }
    /* Paper is narrower than the 900px breakpoint, but two columns keep both lists to about one page. */
    .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm 5mm; }
    .sx-col .jv-section-head p { flex-basis: 100%; }
    .sx-tier + .sx-tier { margin-top: 3mm; }
    .sx-tier-head { font-size: 11pt; margin-bottom: 1.5mm; }
    .sx-meter i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sx-rows { gap: 1.5mm; }
    .sx-row {
        grid-template-columns: 1.3em minmax(0, 1fr);
        padding: 1.5mm 2mm;
        background: none !important;
        border: 1px solid #bbb;
        border-left-width: 3px;
        border-radius: 0;
        break-inside: avoid;
    }
    .sx-when { grid-column: 2; justify-self: start; padding: 0; border: none; white-space: normal; font-style: italic; }
    .sx-name { font-size: 10pt; }
    .sx-detail, .sx-when { font-size: 9pt; }
    .sx-tag { border-color: #999 !important; }
    .health-page .markdown-body table, .health-page .markdown-body td, .health-page .markdown-body th { border-color: #999 !important; }
    .health-page .markdown-body tbody tr:hover td { background: none; }
}

/* ---- App revenue card states ---- */
.app-rev-error { border-color: var(--status-critical); }
.app-rev-fail {
    font-size: 11.5px;
    color: var(--status-critical);
    padding: 6px 0 2px;
    line-height: 1.45;
}
.app-rev-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--border-hairline);
    line-height: 1.45;
}

/* Four headline tiles in a row, two by two on a phone. */
.stat-tiles.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stat-tiles.four { grid-template-columns: repeat(2, 1fr); } }

.fin-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.fin-fetched {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
}

.fin-source-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fin-source {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    padding: 7px 10px;
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    background: var(--bg-tile);
    flex-wrap: wrap;
}
.fin-source-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex: 0 0 auto; align-self: center;
}
.fin-source.on  .fin-source-dot { background: var(--status-clean); }
.fin-source.off .fin-source-dot { background: var(--status-warning); }
.fin-source-name { color: var(--text-primary); font-weight: 600; }
.fin-source-detail { color: var(--text-muted); font-size: 11.5px; }
.fin-source.off .fin-source-detail { color: var(--status-warning); }

.fin-tx-list { display: flex; flex-direction: column; gap: 2px; }
.fin-tx {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 13.5px; padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fin-tx:last-child { border-bottom: 0; }
.fin-tx-date { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-subtle); flex: 0 0 54px; }
.fin-tx-desc { flex: 1; color: var(--text-secondary); }
.fin-tx-cat { font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border-hairline); border-radius: 6px; padding: 1px 5px; }
.fin-tx-amt { font-variant-numeric: tabular-nums; font-size: 13px; flex: 0 0 auto; }
.fin-tx-amt.out { color: var(--status-critical); }
.fin-tx-amt.in { color: var(--status-clean); }

@media (max-width: 700px) {
    .fin-app-grid { grid-template-columns: 1fr; }
}
.fin-ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.fin-fx-note { font-size: 11.5px; color: var(--text-muted); margin: -4px 0 14px; }
@media (max-width: 700px) { .fin-ad-grid { grid-template-columns: 1fr; } }

/* ---- Financials: cash forecast, ad budget, accounts, spending ---- */
.fin-tiles .stat-value { font-size: clamp(20px, 5.4vw, 30px); white-space: nowrap; }
.fin-per { font-size: 0.5em; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
a.fin-tile-link { text-decoration: none; transition: border-color 0.15s; }
a.fin-tile-link:hover { border-color: rgba(255, 255, 255, 0.24); }

.fin-warn {
    font-size: 13.5px; line-height: 1.5; color: #ffd28f;
    border: 1px solid rgba(255, 181, 71, 0.3); background: rgba(255, 181, 71, 0.08);
    border-radius: 16px; padding: 10px 16px; margin-bottom: 14px;
}
.jv-page > .fin-warn, .jv-page > .fs-warn, .jv-page > .cp-warn { margin: 24px 0 0; }
.fin-warn a { color: inherit; font-weight: 600; }
.fin-note { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 12px; }
.fin-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }

/* Chart: the line is SVG stretched to the box (non-scaling strokes keep it 2px); labels, dots and the
   hover readout are HTML on top, so text and circles never stretch with it. */
.fin-chart-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
.fin-chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.fin-key-line { width: 14px; height: 2px; background: #f2f2f5; border-radius: 1px; }
.fin-key-dot { width: 8px; height: 8px; border-radius: 50%; background: #f2f2f5; }
.fin-key-dot.below { background: var(--status-critical); }
.fin-key-buffer { width: 14px; height: 0; border-top: 1px solid var(--status-warning); }

.fin-chart { position: relative; padding: 6px 0 0 46px; }
/* The plot scrolls sideways under a fixed y-axis. The padding keeps the end label and x-axis inside the scroll box, which clips. */
.fin-chart-scroll { overflow-x: auto; overflow-y: hidden; padding: 18px 0 26px; }
.fin-chart-axis { position: absolute; left: 0; top: 24px; width: 40px; height: 200px; pointer-events: none; }
.fin-chart-plot { position: relative; height: 200px; min-width: 100%; touch-action: pan-x pan-y; cursor: crosshair; }
.fin-chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fin-chart-grid { stroke: var(--border-hairline); stroke-width: 1; }
.fin-chart-today { stroke: var(--border-hairline-strong); stroke-width: 1; }
.fin-chart-buffer { stroke: var(--status-warning); stroke-width: 1; opacity: 0.8; }
.fin-chart-area { fill: #f2f2f5; opacity: 0.07; }
.fin-chart-line { fill: none; stroke: #f2f2f5; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fin-chart-y, .fin-chart-x, .fin-chart-end {
    position: absolute; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.fin-chart-y { left: 0; width: 40px; text-align: right; transform: translateY(-50%); }
.fin-chart-x { top: calc(100% + 8px); transform: translateX(-50%); }
.fin-chart-x:first-of-type { transform: none; }
.fin-chart-end { right: 0; transform: translate(0, -130%); color: var(--text-primary); }
.fin-chart-dot, .fin-chart-hover-dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
    background: #f2f2f5; box-shadow: 0 0 0 3px var(--bg-panel); pointer-events: none;
}
.fin-chart-dot.below { background: var(--status-critical); }
.fin-chart-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--text-muted); pointer-events: none; }
.fin-chart-tip {
    position: absolute; top: 0; margin: 0 10px; min-width: 120px; max-width: 220px; pointer-events: none;
    background: rgba(28, 28, 32, 0.96); border: 1px solid var(--border-hairline-strong); border-radius: 16px;
    padding: 10px 12px; font-size: 11.5px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 2px;
}
.fin-chart-tip[hidden], .fin-chart-cross[hidden], .fin-chart-hover-dot[hidden] { display: none; }
.fin-chart-tip strong { font-size: 14px; color: var(--text-primary); }

/* Tables: coming up, ad results, Azure */
.fin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 16px; }
.fin-table th {
    text-align: left; font-weight: 500; font-size: 12.5px;
    color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-hairline);
}
.fin-table td { padding: 9px 8px; color: var(--text-secondary); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.fin-table tbody tr:last-child td { border-bottom: 0; }
.fin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table .in { color: var(--status-clean); }
.fin-table .out { color: var(--status-critical); }
.fin-table .fin-date { white-space: nowrap; color: var(--text-primary); }
.fin-table tr.picked td { color: var(--text-primary); background: var(--accent-soft); }
@media (max-width: 600px) {
    .fin-table .hide-narrow { display: none; }
    .fin-table th, .fin-table td { padding: 5px 4px; }
}

/* Ad budget */
.fin-ad-headline { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.fin-ad-headline.warn .fin-ad-rec { color: var(--status-warning); }
.fin-ad-headline.bad .fin-ad-rec { color: var(--status-critical); }
.fin-ad-rec { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--text-primary); white-space: nowrap; }
.fin-ad-why { flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* Labelled horizontal bars (ad budget, average month, spending by category) */
.fin-bars { display: flex; flex-direction: column; gap: 14px; }
.fin-bar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; font-size: 14px;
}
.fin-bar-label { color: var(--text-primary); min-width: 0; }
.fin-bar-amt { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; }
.fin-bar-amt.in { color: var(--status-clean); }
.fin-bar-amt.out { color: var(--text-primary); }
.fin-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.fin-bar-fill { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.fin-bar-fill.in { background: var(--status-clean); }
.fin-bar-fill.cap, .fin-bar-fill.now { background: #f2f2f5; }
.fin-bar-fill.cap { opacity: 0.45; }
.fin-bar-fill.out { background: var(--accent-warm); opacity: 0.85; }
.fin-bar-fill.over { background: var(--status-critical); }
.fin-bar-total { border-top: 1px solid var(--border-hairline); padding-top: 14px; font-weight: 600; }
.fin-bar-total .fin-bar-amt { font-size: 18px; letter-spacing: -0.02em; }
.fin-bar-total .fin-bar-amt.out { color: var(--status-critical); }

/* Accounts */
.fin-acct-list { display: flex; flex-direction: column; gap: 10px; }
.fin-acct {
    display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--bg-tile); border: 1px solid var(--border-hairline); border-radius: 14px;
}
.fin-acct-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.fin-acct-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fin-acct-bal { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.fin-acct-age { font-size: 11.5px; color: var(--text-muted); }
.fin-acct-age.stale { color: var(--status-warning); }
.fin-acct-forms { display: flex; align-items: center; gap: 6px; }
.fin-inline-form { display: flex; gap: 6px; }
.fin-inline-form .hud-input { width: 150px; padding: 7px 12px; }
.fin-inline-form .hud-btn { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* Add / log forms */
.fin-add { margin-top: 14px; }
.fin-add > summary {
    cursor: pointer; list-style: none; width: fit-content; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
}
.fin-add > summary::-webkit-details-marker { display: none; }
.fin-add > summary:hover { color: #fff; }
.fin-add[open] > summary { margin-bottom: 10px; }
.fin-form-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fin-form-grid .hud-input { flex: 1 1 120px; width: auto; min-width: 0; }
.fin-form-grid > input[name="name"], .fin-form-grid > input[name="description"] { flex: 2 1 180px; }
.fin-form-grid select.hud-input, .fin-form-grid input[type="date"] { flex: 0 1 auto; }
.fin-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-muted); flex: 1 1 150px; }
.fin-field .hud-input { width: 100%; flex: none; } /* a column: a flex-basis here would set the height */
.fin-spend-form { margin-bottom: 14px; }
.fin-settings { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-hairline); }

/* Spending meter: fill = spent this month, tick = where spending should be by today */
.fin-meter-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.fin-meter-row b { color: var(--text-primary); }
.fin-meter { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); margin-bottom: 18px; }
.fin-meter-fill { display: block; height: 100%; border-radius: 6px; }
.fin-meter-fill.ok { background: #f2f2f5; }
.fin-meter-fill.warn { background: var(--status-warning); }
.fin-meter-fill.over { background: var(--status-critical); }
.fin-meter-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-primary); border-radius: 1px; }

.fin-tx form { display: contents; }
.fin-date-pick { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.fin-date-pick .hud-input { width: 150px; padding: 7px 12px; }
.fin-details .fin-app-grid, .fin-details .fin-ad-grid, .fin-details .fin-source-list { margin-top: 14px; }
.fin-ok {
    font-size: 13.5px; line-height: 1.5; color: var(--status-clean);
    border: 1px solid rgba(126, 226, 168, 0.3); background: rgba(126, 226, 168, 0.08);
    border-radius: 16px; padding: 10px 16px; margin-bottom: 14px;
}
.fin-import { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.fin-import .hud-input[type="file"] { padding: 8px 12px; font-size: 13px; color: var(--text-secondary); }
.fin-measured {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
    font-size: 13px; color: var(--text-secondary); padding: 10px 12px; margin-bottom: 14px;
    background: var(--bg-tile); border: 1px solid var(--border-hairline); border-radius: 14px;
}
.fin-measured b { color: var(--text-primary); }
.fin-bars + .fin-tx-list { margin-top: 16px; }
.fin-subhead {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text-primary); margin: 24px 0 10px;
}
.fin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-chip {
    font-size: 12px; color: var(--text-secondary); background: var(--bg-tile);
    border: 1px solid var(--border-hairline); border-radius: 999px; padding: 3px 10px;
}
.fin-chip b { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); margin-left: 4px; }
.fin-tx .fin-tx-cat { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.12); border-radius: 999px; color: var(--text-secondary); font-family: var(--font); font-size: 12px; padding: 3px 8px; }
.fin-tx-oneoff { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; }
.fin-tx-oneoff input { margin: 0; }
.fin-tx.oneoff .fin-tx-desc { color: var(--text-muted); }
.fin-tx.oneoff .fin-tx-oneoff { color: var(--accent-warm); }
.fin-more { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 500; }
@media (max-width: 600px) {
    .fin-tx { flex-wrap: wrap; }
    .fin-tx-desc { flex: 1 1 calc(100% - 70px); }
}

/* ---- Financials: secondary text ---- */
.fin-page .fin-sub { color: var(--text-muted); font-size: 12.5px; margin-left: 0; }
.fin-page .fin-bar-label .fin-sub::before,
.fin-page .fin-table td .fin-sub::before,
.fin-page .fin-tx-desc .fin-sub::before { content: "·"; margin: 0 6px; color: var(--text-muted); }
.fin-page .fin-bar-amt .fin-sub { margin-left: 6px; }
.fin-page .fin-subhead .fin-sub { font-weight: 400; letter-spacing: normal; margin-left: 10px; }
.fin-page .fin-per { color: var(--text-subtle); }
.fin-page .fin-chart-y, .fin-page .fin-chart-x { font-size: 11.5px; }
.fin-page .fin-acct-age { font-size: 12.5px; }
.fin-page .fin-acct-age.stale { color: var(--status-warning); }
.fin-page .fin-field { color: var(--text-subtle); }
.fin-page .fin-tx-oneoff { font-size: 12.5px; }
.fin-page .fin-tx.oneoff .fin-tx-oneoff { color: var(--accent-warm); }
.fin-page .fin-tx.oneoff .fin-tx-desc { color: var(--text-muted); }
.fin-page .fin-fetched, .fin-page .fin-source-detail { font-size: 12.5px; }
.fin-page .fin-meter-row { font-size: 14px; }

.fin-page .fin-sub:empty::before { content: none; }
@media (max-width: 600px) {
    /* Regular items have no category picker, so the name can shrink and keep the × on the row. */
    .fin-page #regular .fin-tx { flex-wrap: nowrap; }
    .fin-page #regular .fin-tx-desc { flex: 1 1 0; min-width: 0; }
}
.fin-page .fin-outlook { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.fin-page .fin-outlook > .fin-sub { line-height: 1.5; }

/* Cash forecast hover: the day's balance and change, then one row per thing that moved it. */
.fin-page .fin-chart-tip { min-width: 190px; max-width: 260px; z-index: 3; font-size: 12px; color: var(--text-subtle); }
.fin-chart-tip-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-hairline); }
.fin-chart-tip-rows > div { display: flex; justify-content: space-between; gap: 14px; color: var(--text-secondary); }
.fin-chart-tip-rows span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-primary); }
.fin-chart-tip-rows span.in { color: var(--status-clean); }
.fin-page .fin-chart-tip { margin: 0; }

/* -------------------- Public site home (PublicHome.razor): one card per page -------------------- */

.public-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 40px; }
.public-tool {
    display: flex;
    flex-direction: column;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.public-tool-orb { display: block; width: 64px; height: 64px; margin-bottom: 12px; }
.public-tool p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--text-subtle); }
.public-tool-open { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.public-tool:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }

/* -------------------- Site menu (MainLayout, every page) -------------------- */

.site-nav {
    position: relative;
    z-index: 100; /* above the glass panels below it, which its drop-down opens over; under pop-ups and the full-screen map */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 16px auto 0;
    padding: 5px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.site-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-subtle);
    text-decoration: none;
    transition: color 0.12s, background 0.12s;
}
.site-nav-link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }
.site-nav-link.active { color: #0b0b0d; background: #f2f2f5; }
.site-nav-strip { display: contents; }

/* Tools, Learning and Projects: <details> that open a panel under the menu (jarvis-page.js closes the others). */
.site-nav-group { position: relative; }
.site-nav-group > summary { list-style: none; gap: 7px; cursor: pointer; user-select: none; }
.site-nav-group > summary::-webkit-details-marker { display: none; }
.site-nav-group > summary::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.7;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s;
}
.site-nav-group[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.site-nav-group[open] > summary:not(.active) { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }
.site-nav-panel {
    position: absolute;
    top: calc(100% + 11px);
    left: 50%;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: 6px;
    transform: translateX(-50%);
    background: var(--bg-panel-raised);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8);
    animation: site-nav-open 0.14s ease-out;
}
@keyframes site-nav-open {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .site-nav-panel { animation: none; } }
.site-nav-panel .site-nav-link { min-height: 36px; white-space: nowrap; }
/* Projects is last on the row, so its wider panel lines up with the menu's right edge rather than running off it. */
.site-nav-projects .site-nav-panel { left: auto; right: -6px; transform: none; min-width: 430px; }
.site-nav-proj { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-nav-subs, .site-nav-foot { display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav-foot { margin-top: 4px; padding: 6px 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-nav-link.site-nav-sub { min-height: 28px; padding: 0 11px; font-size: 12px; }
.site-nav-panel .site-nav-link.site-nav-sub { min-height: 28px; }
/* What's waiting for Jim to review (ReviewQueue): orange, as anything waiting on him is. */
.site-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--jv-accent);
    color: #0b0b0d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.site-nav-group > summary .site-nav-badge { margin-left: 0; }
.site-nav-sub .site-nav-badge { min-width: 16px; height: 16px; font-size: 10.5px; }
.site-nav-test {
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 8px auto 0;
    font-size: 12px;
    text-align: center;
    color: var(--jv-amber);
}
.site-nav-test a { color: inherit; text-underline-offset: 3px; }
@media print { .site-nav-test { display: none; } }

/* A click answers at once while the next page is on its way (jarvis-page.js): a bar across the top, and if it takes
   more than a moment the page under the menu dims. A layer rather than opacity on the page, which would change what
   the glass cards blur. */
html.jv-navigating body { cursor: progress; }
html.jv-navigating::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.32);
    animation: jv-nav-dim 0.2s ease 0.15s both;
}
html.jv-navigating::after {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10000;
    height: 2px;
    pointer-events: none;
    background: #f2f2f5;
    box-shadow: 0 0 10px rgba(242, 242, 245, 0.6);
    transform-origin: 0 50%;
    animation: jv-nav-bar 14s linear both;
}
@keyframes jv-nav-dim {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes jv-nav-bar {
    0% { transform: scaleX(0); }
    2% { transform: scaleX(0.3); }
    8% { transform: scaleX(0.55); }
    30% { transform: scaleX(0.8); }
    100% { transform: scaleX(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    html.jv-navigating::before { animation: none; }
    html.jv-navigating::after { animation: none; opacity: 0.6; }
}

.site-nav-menu { display: none; }

/* Phones: one ☰ button naming the current page, opening a list. */
@media (max-width: 600px) {
    .site-nav { margin: 12px 0 0 16px; padding: 4px; }
    .site-nav-strip { display: none; }
    .site-nav-menu { display: block; position: relative; }
    .site-nav-menu summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 36px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
    }
    .site-nav-menu summary::-webkit-details-marker { display: none; }
    .site-nav-menu summary .site-nav-badge { margin-left: -2px; }
    .site-nav-menu summary::before { content: "☰"; font-size: 15px; }
    .site-nav-menu[open] summary { background: rgba(255, 255, 255, 0.08); }
    .site-nav-drop {
        position: absolute;
        top: calc(100% + 10px);
        left: -4px;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 220px;
        padding: 6px;
        background: var(--bg-panel-raised);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 22px;
        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8);
    }
    .site-nav-drop .site-nav-link { min-height: 42px; font-size: 14px; }
    .site-nav-drop .site-nav-link.site-nav-sub { min-height: 32px; font-size: 12.5px; }
    .site-nav-drop { max-height: calc(100dvh - 90px); overflow-y: auto; min-width: 280px; }
    .site-nav-drop-head {
        margin: 10px 14px 2px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }
    .site-nav-drop .site-nav-proj { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav-drop .site-nav-subs { margin: -6px 0 4px 6px; }
    .site-nav-drop .site-nav-foot { margin: 2px 8px 0; padding-left: 0; }
}
@media print { .site-nav { display: none; } }

/* -------------------- Te Araroa (/te-araroa) -------------------- */

.ta-page { --ta-trail: #ff8a3d; --ta-water: #60a5fa; --ta-road: #a1a1aa; }

.ta-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 980px) { .ta-layout { grid-template-columns: 1fr; } }

.ta-map-panel { padding: 0; overflow: hidden; }
.ta-map {
    position: relative;
    isolation: isolate; /* keep Leaflet's z-indexed panes inside the map */
    height: calc(100vh - 250px);
    height: calc(100dvh - 250px);
    min-height: 420px;
    border-radius: 21px 21px 0 0;
}
@media (max-width: 980px) {
    .ta-map { height: 62vh; height: 62dvh; min-height: 340px; }
}

/* Filling the screen (the ⛶ button; Esc leaves). */
.ta-map-panel.ta-max {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
}
.ta-map-panel.ta-max { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-void); }
.ta-map-panel.ta-max .ta-map { flex: 1; height: auto; min-height: 0; border-radius: 0; }
html.ta-max-open body { overflow: hidden; }

.ta-readout {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    min-height: 46px;
    padding: 11px 16px;
    border-top: 1px solid var(--border-hairline);
}
.ta-ro-head {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ta-trail);
}
.ta-ro-name { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.ta-ro-km { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .ta-readout { min-height: 70px; padding: 10px 12px; }
    .ta-ro-name { flex-basis: 100%; order: 1; }
    .ta-ro-km { order: 2; margin-left: 0; }
}
.ta-map-error { padding: 24px; color: var(--text-subtle); }

.ta-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ta-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ta-tiles .stat-tile { padding: 12px 14px; }
.ta-tiles .stat-value { font-size: 24px; }
.ta-tiles .stat-label { color: var(--text-subtle); }
@media (min-width: 600px) and (max-width: 980px) { .ta-tiles { grid-template-columns: repeat(4, 1fr); } }

.ta-island {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.ta-island:not(:first-child) { margin-top: 16px; }
.ta-region { border-top: 1px solid var(--border-hairline); }
.ta-region summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 2px;
    cursor: pointer;
}
.ta-region summary::-webkit-details-marker { display: none; }
.ta-region summary::after { content: "›"; color: var(--text-subtle); transition: transform 0.15s; }
.ta-region[open] summary::after { transform: rotate(90deg); }
.ta-region summary:hover .ta-reg-name, .ta-region[open] .ta-reg-name { color: #fff; }
.ta-reg-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-subtle); }
.ta-reg-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ta-reg-km, .ta-sec-km { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ta-sections { list-style: none; margin: 0 0 8px; padding: 0; }
.ta-sec-btn {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
.ta-sec-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.ta-sec-btn.on { background: rgba(255, 138, 61, 0.14); color: var(--text-primary); }
.ta-sec-code { width: 1ch; font-family: var(--font-mono); font-size: 12.5px; color: var(--ta-trail); }
.ta-sec-name { flex: 1; min-width: 0; }
.ta-sec-btn.bypass .ta-sec-code, .ta-sec-btn.bypass .ta-sec-name { color: var(--text-subtle); }

.ta-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-hairline);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ta-key span { display: inline-flex; align-items: center; gap: 7px; }
.ta-key i { width: 22px; border-top: 3px solid var(--ta-trail); }
.ta-key i.ta-key-water { border-top-color: var(--ta-water); }
.ta-key i.ta-key-road { border-top: 2px dashed var(--ta-road); }
.ta-source { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-subtle); }

/* Leaflet in the site's palette. Its stylesheet loads after this one, hence .ta-map.leaflet-container. */
.ta-map.leaflet-container { background: #0c0c0f; font-family: var(--font); }
.ta-map.leaflet-container .leaflet-bar { border: 1px solid var(--border-hairline-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.ta-map.leaflet-container .leaflet-bar a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 17px;
    background: var(--bg-panel-raised);
    color: var(--text-primary);
    border-bottom-color: var(--border-hairline);
    text-decoration: none;
}
.ta-map.leaflet-container .leaflet-bar a:hover { background: #2a2a30; color: #fff; }
.ta-map.leaflet-container .leaflet-bar a.leaflet-disabled { background: var(--bg-panel); color: var(--text-muted); }
.ta-map.leaflet-container .leaflet-control-layers {
    background: var(--bg-panel-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-hairline-strong);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.ta-map.leaflet-container .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); }
.ta-map.leaflet-container .leaflet-control-layers-expanded { padding: 8px 14px 8px 10px; font-size: 13.5px; }
.ta-map.leaflet-container .leaflet-control-layers label { padding: 3px 0; cursor: pointer; }
.ta-map.leaflet-container .leaflet-control-layers-selector { accent-color: var(--accent); }
.ta-map.leaflet-container .leaflet-control-attribution { background: rgba(9, 9, 11, 0.75); color: var(--text-subtle); font-size: 11.5px; }
.ta-map.leaflet-container .leaflet-control-attribution a { color: var(--text-secondary); }
.ta-map.leaflet-container .leaflet-control-scale-line { background: rgba(9, 9, 11, 0.6); color: var(--text-secondary); border-color: var(--text-subtle); }
.ta-map.leaflet-container .leaflet-tooltip.ta-end-label {
    padding: 3px 7px;
    background: rgba(9, 9, 11, 0.85);
    border: 1px solid rgba(255, 181, 71, 0.5);
    border-radius: 999px;
    box-shadow: none;
    color: #ffd28f;
    font-size: 11.5px;
}
.ta-map.leaflet-container .leaflet-tooltip.ta-end-label::before { display: none; }

/* ---- Death calculator (/death) ---- */
.death-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
@media (max-width: 820px) { .death-grid { grid-template-columns: 1fr; } }
.death-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-subtle); margin-bottom: 14px; }
.death-form .hud-input { width: 100%; box-sizing: border-box; }
.death-form .death-sex { display: flex; gap: 16px; margin-bottom: 14px; }
.death-form .death-sex label { flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: inherit; cursor: pointer; }
.death-prob { font-weight: 700; font-size: 56px; letter-spacing: -0.04em; line-height: 1.05; color: var(--text-primary); margin: 4px 0 18px; }
.death-prob small { font-weight: 400; font-size: 18px; letter-spacing: normal; color: var(--text-muted); }
.death-sub { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: -8px 0 18px; }
.death-sub b { color: inherit; font-weight: 600; }
.death-milestones { display: flex; flex-wrap: wrap; gap: 10px; }
.death-milestone { flex: 1 1 88px; background: var(--bg-tile); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 10px 12px; text-align: center; }
.death-milestone > span { display: block; font-size: 12px; color: var(--text-muted); }
.death-milestone b { display: block; font-size: 20px; letter-spacing: -0.02em; color: var(--text-primary); margin-top: 2px; }
.death-bar { height: 4px; background: var(--border-hairline); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.death-bar i { display: block; height: 100%; background: var(--accent); }
.death-tree { margin-top: 4px; }
.death-node { margin: 8px 0; }
.death-cause .death-node { margin: 6px 0 6px 18px; }
.death-cause-row { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--text-primary); }
.death-cause-row .pct { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-secondary); }
.death-cause.level-1 > summary .title, .death-cause.level-1.leaf > .death-cause-row .title { font-size: 14px; font-weight: 600; }
.death-cause-bar { height: 3px; background: var(--border-hairline); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.death-cause-bar i { display: block; height: 100%; background: var(--accent); }
.death-cause.group-1 .death-cause-bar i { background: var(--status-clean); }
.death-cause.group-3 .death-cause-bar i { background: var(--accent-warm); }
details.death-cause > summary { list-style: none; cursor: pointer; }
details.death-cause > summary::-webkit-details-marker { display: none; }
details.death-cause > summary .death-cause-row::before { content: "▸"; color: var(--text-muted); font-size: 11.5px; }
details[open].death-cause > summary .death-cause-row::before { content: "▾"; }
.death-cause.leaf > .death-cause-row::before { content: ""; width: 7px; }
.death-error { color: var(--status-critical); font-size: 13px; margin: -8px 0 12px; }
.death-note { margin-top: 0; }
.death-fallback { font-size: 12px; color: var(--accent-warm); margin: -6px 0 12px; }

/* While a fetch from jarvis-deathcalc.js can't get through, the results dim until one does. */
.death-stale .hud-panel:not(.death-form), .death-stale .fin-fx-note { opacity: 0.45; transition: opacity 0.3s; }

/* Recalculation animations: numbers count in jarvis-deathcalc.js; bars ease to their new width, grow in when
   they first appear, and a panel whose numbers changed gets one scan sweep. */
.death-bar i, .death-cause-bar i { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
    .death-bar i, .death-cause-bar i { transition: width 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .death-anim .death-bar i, .death-anim .death-cause-bar i { animation: death-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
    .death-page .hud-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.10) 50%, transparent) no-repeat;
        background-size: 100% 35%;
    }
    .death-page .hud-panel.recalc::after { animation: death-sweep 0.7s ease-out; }
    .death-page .hud-panel.recalc .death-prob { animation: death-glow 0.7s ease-out; }
}
@keyframes death-grow { from { transform: scaleX(0); } }
@keyframes death-sweep {
    from { opacity: 1; background-position: 0 -40%; }
    to { opacity: 0; background-position: 0 140%; }
}
@keyframes death-glow { 30% { text-shadow: 0 0 28px rgba(255, 255, 255, 0.5); } }

/* Survival chart (/death): curves morph in jarvis-deathcalc.js; the markers and the "lived" shading move in CSS. */
.death-chart-panel { margin-bottom: 20px; }
.death-chart { display: block; width: 100%; height: auto; }
.death-chart line, .death-chart path { vector-effect: non-scaling-stroke; }
.death-chart .grid { stroke: var(--border-hairline); stroke-width: 1; }
.death-chart .axis { fill: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.death-chart .lived { fill: rgba(255, 255, 255, 0.04); transform-box: fill-box; transform-origin: left center; }
.death-chart .area { fill: rgba(255, 255, 255, 0.07); }
.death-chart .curve { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.death-chart .curve.world { stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.7; }
.death-chart .mark line { stroke-width: 1; }
.death-chart .mark.expected line { stroke: var(--accent-warm); stroke-dasharray: 2 3; }
.death-chart .mark.expected text { fill: var(--accent-warm); font-variant-numeric: tabular-nums; font-size: 12px; }
.death-chart .mark.target line { stroke: var(--accent); opacity: 0.45; }
.death-chart .mark.target circle { r: 5px; fill: var(--accent); }
.death-chart .mark.target text { fill: var(--text-primary); font-variant-numeric: tabular-nums; font-size: 13px; }
/* The chart scales with its panel, text included, so on a phone the text needs to be larger in chart units. */
@media (max-width: 700px) {
    .death-chart .axis, .death-chart .mark.expected text { font-size: 26px; }
    .death-chart .mark.target text { font-size: 28px; }
    .death-chart .mark.target circle { r: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
    .death-chart .mark, .death-chart .mark .dot, .death-chart .lived { transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* ───────────────────────────── /content: social slideshows ───────────────────────────── */
.cp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cp-form .hud-input { flex: 1 1 160px; width: auto; min-width: 0; }
.cp-warn {
    font-size: 13.5px; line-height: 1.5; color: #ffd28f;
    border: 1px solid rgba(255, 181, 71, 0.3); background: rgba(255, 181, 71, 0.08);
    border-radius: 16px; padding: 10px 16px; margin-bottom: 14px;
}
.cp-note { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 12px; }
.cp-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.cp-brand { display: flex; flex-direction: column; gap: 12px; padding: 20px; min-width: 0; }
.cp-brand-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.cp-brand-orb { display: block; width: 56px; height: 56px; }
.cp-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.cp-brand-slots { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.cp-ready { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border-hairline); font-size: 13.5px; display: grid; gap: 6px; }
.cp-ready li.ok { color: var(--status-clean); }
.cp-ready li.no { color: var(--text-secondary); }
.cp-ready .cp-why { color: var(--text-muted); margin-left: 6px; font-size: 12.5px; }
.cp-ready a { margin-left: 6px; font-weight: 600; }

.cp-list { display: grid; gap: 16px; }
.cp-card { padding: 20px; min-width: 0; }
.cp-card.cp-draft { border-color: rgba(255, 138, 61, 0.35); }
.cp-card.cp-failed-card { border-color: rgba(255, 92, 92, 0.45); }
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.cp-chip { font-weight: 600; color: var(--text-secondary); background: rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 3px 11px; }
.cp-kind { color: var(--text-muted); }
.cp-when { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cp-status { flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.cp-status.cp-draft { background: rgba(255, 138, 61, 0.16); color: #ffbe94; }
.cp-status.cp-approved, .cp-status.cp-publishing { background: rgba(255, 255, 255, 0.14); color: var(--text-primary); }
.cp-status.cp-published { background: rgba(126, 226, 168, 0.12); color: var(--status-clean); }
.cp-status.cp-failed { background: rgba(255, 92, 92, 0.14); color: #ff9b9b; }
.cp-status.cp-rejected { color: var(--text-muted); }
.cp-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-primary); margin: 10px 0 14px; }
.cp-warn-list { margin: 4px 0 0; padding-left: 18px; }

.cp-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.cp-strip a { flex: 0 0 auto; scroll-snap-align: start; }
.cp-strip img { display: block; height: 260px; width: auto; aspect-ratio: 1080 / 1350; border-radius: 10px; border: 1px solid var(--border-hairline); background: var(--bg-tile); }
.cp-strip.story img { aspect-ratio: 1080 / 1920; height: 320px; }
@media (max-width: 600px) {
    .cp-strip img { height: 220px; }
    .cp-strip.story img { height: 280px; }
    .cp-when { margin-left: 0; width: 100%; }
}

.cp-caption { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 12px 0; max-width: 70ch; overflow-wrap: anywhere; }
.cp-targets { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; display: grid; gap: 3px; }
.cp-targets li { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); }
.cp-targets .cp-t-published strong { color: var(--status-clean); }
.cp-targets .cp-t-failed strong, .cp-targets .cp-t-failed span { color: var(--status-critical); }
.cp-targets a { font-weight: 600; }

.cp-approve { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 10px; padding-top: 14px; border-top: 1px solid var(--border-hairline); }
.cp-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--text-secondary); margin-right: 4px; }
.cp-time { width: auto; flex: 0 1 220px; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.cp-actions form { margin: 0; }
.cp-rewrite { display: flex; gap: 6px; align-items: center; }
.cp-rewrite .hud-input { width: 260px; max-width: 52vw; padding: 5px 10px; font-size: 13px; }

.cp-more { margin: 8px 0; }
.cp-more > summary { cursor: pointer; width: fit-content; font-size: 13px; color: var(--text-muted); padding: 4px 0; }
.cp-edit { display: grid; gap: 10px; margin-top: 8px; max-width: 720px; }
.cp-slide { border: 1px solid var(--border-hairline); border-radius: 14px; padding: 8px 10px 10px; display: grid; gap: 6px; min-width: 0; }
.cp-slide legend { font-size: 12.5px; color: var(--text-subtle); padding: 0 4px; }
.cp-row { display: flex; gap: 6px; }
.cp-row .hud-input { min-width: 0; }
.cp-stat { flex: 0 0 34%; }
.cp-label { display: grid; gap: 6px; font-size: 13px; color: var(--text-subtle); }
.cp-source { font-size: 13px; overflow-wrap: anywhere; }
.cp-brief { white-space: pre-wrap; font-size: 12px; line-height: 1.45; color: var(--text-subtle); max-height: 320px; overflow: auto; background: var(--bg-tile); border-radius: 10px; padding: 10px; margin-top: 6px; overflow-wrap: anywhere; }

/* =========================================================
   The landing page's parts (/), and what the other pages borrow from it
   ========================================================= */

.jv-dim { color: var(--text-muted); }
.jv-bad { color: #ff8f8f; }
.jv-warn { color: #ffc970; }
.jv-empty { color: var(--text-muted); font-size: 14px; padding: 14px 0; }
.jv-time { color: var(--text-faint); font-size: 12px; }

/* ---------- The orbs ---------- */

.jv-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 36px;
    scroll-margin-top: 16px;
}

.jv-caption {
    position: relative;
    margin: 0 auto;
    max-width: 780px;
    min-height: 2.6em;
    text-align: center;
    font-size: clamp(22px, 3.4vw, 34px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: #6f6f78;
}
.jv-caption .jv-w {
    position: relative;
    z-index: 1;
    display: inline-block;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.25em);
    transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.jv-caption .jv-w.in { opacity: 1; filter: none; transform: none; }
.jv-caption .jv-w.hi { color: #f6f6f8; font-weight: 700; padding: 0 0.28em; }
.jv-caption.out .jv-w { opacity: 0; filter: blur(6px); transform: translateY(-0.2em); }
.jv-pill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.3s, opacity 0.3s;
}
.jv-pill.on { opacity: 1; }
.jv-caption.out .jv-pill { opacity: 0; }

.jv-stage {
    position: relative;
    width: 100%;
    height: clamp(420px, 58vh, 560px);
}
.jv-stage canvas { display: block; }

.jv-tip {
    position: absolute;
    z-index: 5;
    max-width: 260px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(24, 24, 28, 0.72);
    pointer-events: none;
    font-size: 13px;
}
.jv-tip-name { font-weight: 700; font-size: 14px; }
.jv-tip-role { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
.jv-tip-state { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.jv-tip-state.waiting { color: var(--status-warning); }
.jv-tip-state.error { color: #ff8f8f; }
.jv-tip-doing { margin-top: 4px; line-height: 1.4; color: #e4e4e7; }

.jv-intro { text-align: center; margin-top: 14px; }
.jv-title {
    margin: 0;
    font-size: clamp(46px, 7vw, 76px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #f6f6f8;
}
.jv-sub { margin: 14px auto 0; max-width: 580px; color: #a1a1aa; font-size: 16px; line-height: 1.45; }
.jv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.jv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font: 500 13px var(--font);
    text-decoration: none;
    white-space: nowrap;
}
a.jv-chip, button.jv-chip { cursor: pointer; transition: background 0.15s, color 0.15s; }
a.jv-chip:hover, button.jv-chip:hover { background: rgba(255, 255, 255, 0.13); color: var(--text-primary); }
button.jv-chip:disabled { opacity: 0.5; cursor: default; }
.jv-chip.strong { color: var(--text-primary); font-weight: 600; }
.jv-chip.accent { background: rgba(255, 138, 61, 0.16); border-color: rgba(255, 138, 61, 0.42); color: #ffbe94; }
.jv-chip.warn { background: rgba(255, 181, 71, 0.12); border-color: rgba(255, 181, 71, 0.35); color: #ffd28f; }
.jv-chip.crit { background: rgba(255, 92, 92, 0.14); border-color: rgba(255, 92, 92, 0.45); color: #ffadad; }
.jv-chip.muted { color: var(--text-muted); }

/* ---------- Sections ---------- */

.jv-section { margin-top: 72px; scroll-margin-top: 20px; }
.jv-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.jv-section-head h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.035em; }
.jv-section-head p { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.jv-section-head .jv-chip { align-self: center; }

/* The head of every other page: the same title and pills, under a smaller orb of the page's own. */
.jv-head { display: flex; flex-direction: column; align-items: center; margin-top: 0; padding-top: 28px; }
.jv-head-orb { display: block; width: 116px; height: 116px; margin-bottom: 8px; }
.jv-head .jv-title { font-size: clamp(38px, 5.6vw, 60px); overflow-wrap: anywhere; hyphens: auto; }
.jv-head .jv-sub { margin-top: 12px; font-size: 15px; }
.jv-head > * { max-width: 100%; }
.jv-chips form { display: contents; }
.jv-head + .jv-glass { margin-top: 32px; }

/* A pill of choices, like the dock: where you are is the white one. */
.jv-toggle {
    display: inline-flex;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.jv-toggle::-webkit-scrollbar { display: none; }
.jv-toggle a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--text-subtle);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.jv-toggle a:hover { color: var(--text-primary); }
.jv-toggle a.on { background: #f2f2f5; color: #0b0b0d; }

/* A stack of collapsed sections. */
.jv-folds { display: grid; gap: 12px; }

.jv-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-muted); }
.jv-meta b { color: var(--text-secondary); font-weight: 600; }
.jv-meta a { text-decoration: none; }
.jv-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 600; }
.jv-who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

.jv-msg {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 70;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(28, 28, 32, 0.8);
    font-size: 14px;
    transition: opacity 0.5s, transform 0.5s;
}
.jv-msg.gone { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }

/* Approvals */
.jv-approvals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.jv-approval { padding: 20px; border-color: rgba(255, 138, 61, 0.35); }
.jv-approval h3 { margin: 10px 0 6px; font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; }
.jv-detail { margin: 0 0 10px; color: #b4b4bc; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.jv-action { margin: 0 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.jv-up { color: #ffa3a3; white-space: nowrap; }
.jv-down { color: var(--status-clean); white-space: nowrap; }
.jv-decide { display: flex; gap: 10px; }
.jv-empty-card { padding: 18px 20px; color: var(--text-muted); font-size: 14px; }
/* What's made and waiting for Jim to check (ReviewQueue): orange, like the approvals above it. */
.jv-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.jv-approvals + .jv-reviews, .jv-reviews + .jv-approvals { margin-top: 16px; }
.jv-review {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px;
    border-color: rgba(255, 138, 61, 0.35); color: var(--text-primary); text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.jv-review:hover { border-color: rgba(255, 138, 61, 0.6); background: rgba(255, 138, 61, 0.06); }
.jv-review-n {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
    border-radius: 999px; background: var(--jv-accent); color: #0b0b0d; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.jv-review-text { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.4; }
.jv-review-text strong { font-size: 16px; letter-spacing: -0.01em; }
.jv-review-sub { color: var(--text-subtle); }
.jv-review-go { margin-left: auto; color: #ffbe94; font-size: 20px; }
a.jv-wait { color: #ffbe94; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.jv-wait:hover { text-decoration: underline; text-underline-offset: 3px; }
.jv-decided { margin-top: 14px; color: var(--text-muted); font-size: 13px; }
.jv-decided summary { cursor: pointer; width: fit-content; }
.jv-decided-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; }
.jv-status { flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.jv-status.done, .jv-status.approved { background: rgba(126, 226, 168, 0.12); color: var(--status-clean); }
.jv-status.failed { background: rgba(255, 92, 92, 0.14); color: #ff9b9b; }

/* Apps */
.jv-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jv-app { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.jv-app.warn { border-color: rgba(255, 181, 71, 0.32); }
.jv-app.alarm { border-color: rgba(255, 92, 92, 0.45); }
.jv-app-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.jv-app-orb { display: block; width: 64px; height: 64px; }
.jv-app-name h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }
.jv-app-name h3 a.jv-app-link { color: inherit; font-size: inherit; }
.jv-app-name h3 a.jv-app-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.jv-app-name a { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.jv-app-name a:hover { color: var(--text-primary); }
.jv-focus { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.jv-season { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 181, 71, 0.1); border: 1px solid rgba(255, 181, 71, 0.25); color: #ffd28f; font-size: 12px; }
.jv-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.jv-big { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.jv-big.muted { color: var(--text-faint); }
.jv-money .jv-dim, .jv-money .jv-bad { font-size: 14px; }
.jv-rows { display: grid; gap: 9px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border-hairline); }
.jv-rows > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.45; }
.jv-rows dt { color: var(--text-muted); }
.jv-rows dd {
    margin: 0;
    color: #e4e4e7;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.jv-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; }
.jv-others > .jv-dim { margin-right: 4px; }

/* Feed and alerts */
.jv-feed-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jv-feed-card { padding: 6px 20px; }
.jv-feed { list-style: none; margin: 0; padding: 0; }
.jv-event { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.jv-feed > .jv-event:last-child { border-bottom: 0; }
.jv-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.jv-event-text { margin-top: 3px; color: #e4e4e7; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.jv-event-text a { margin-left: 6px; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.jv-event.alert .jv-event-text { color: #ffb4b4; }
.jv-event.message .jv-event-text { color: var(--text-primary); }
.jv-event.jv-new { animation: jv-new 2.4s ease-out; }
@keyframes jv-new { from { background: rgba(255, 255, 255, 0.08); } to { background: transparent; } }
.jv-earlier { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 12px 0; }
.jv-earlier summary { cursor: pointer; color: var(--text-muted); font-size: 13px; width: fit-content; }
.jv-alerts-card { padding: 18px 20px; }
.jv-alerts-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.jv-alert { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--status-warning); font-size: 13px; line-height: 1.45; }
.jv-alert.critical { border-left-color: var(--status-critical); }
.jv-alert-title { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.jv-alert .jv-dim { margin-top: 2px; }

/* Brain */
.jv-brain-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jv-runs { padding: 6px 20px; }
.jv-run { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.jv-run:last-child { border-bottom: 0; }
.jv-run p { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.jv-run.failed p { color: #ffb4b4; }
.jv-live { display: inline-flex; align-items: center; gap: 6px; color: var(--status-clean); }
.jv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: jv-blink 1.4s ease-in-out infinite; }
@keyframes jv-blink { 50% { opacity: 0.25; } }
.jv-ask { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.jv-ask form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.jv-ask label { font-size: 15px; font-weight: 600; }
.jv-ask .jv-dim { margin: 0; font-size: 13px; }
/* Setup */
.jv-setup { list-style: none; margin: 0; padding: 6px 20px; }
.jv-setup li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-secondary); font-size: 14px; line-height: 1.45; }
.jv-setup li:last-child { border-bottom: 0; }
.jv-setup li.done { color: var(--text-faint); }
.jv-tick { flex: none; width: 16px; color: var(--text-muted); }
.jv-setup li.done .jv-tick { color: var(--status-clean); }

/* The dock: a glass pill of the page's sections, always in reach. */
.jv-dock {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    gap: 2px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(26, 26, 30, 0.6);
}
.jv-dock::-webkit-scrollbar { display: none; }
.jv-dock a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    color: #a1a1aa;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.jv-dock a:hover { color: var(--text-primary); }
.jv-dock a.on { background: #f2f2f5; color: #0b0b0d; }
.jv-dock-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-warm);
    color: #0b0b0d;
    font-size: 11.5px;
    font-weight: 700;
}
.jv-dock-count[hidden] { display: none; }

@media (max-width: 900px) {
    .jv-feed-grid, .jv-brain-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .jv-apps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .jv-page { padding: 0 16px 112px; }
    .jv-hero { padding-top: 20px; }
    .jv-stage { height: 430px; }
    .jv-section { margin-top: 56px; }
    .jv-section-head h2 { font-size: 24px; }
    .jv-app, .jv-approval { padding: 16px; }
    .jv-app-head { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
    .jv-app-orb { width: 56px; height: 56px; }
    .jv-big { font-size: 30px; }
    .jv-feed-card, .jv-runs, .jv-setup { padding-left: 16px; padding-right: 16px; }
    .jv-dock a { padding: 0 11px; font-size: 12.5px; }
    .jv-head { padding-top: 18px; }
    .jv-head-orb { width: 92px; height: 92px; }
    .jv-head .jv-title { font-size: clamp(32px, 9.6vw, 44px); }
    .jv-head .jv-sub { font-size: 14.5px; }
    .cp-card, .cp-brand { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .jv-caption .jv-w, .jv-pill, .jv-msg { transition: none; }
    .jv-event.jv-new, .jv-live::before { animation: none; }
}

/* ===== Tasks, Markets, Grab ===== */

/* Tasks */
.jv-task-add { display: grid; grid-template-columns: minmax(0, 1fr) 120px 170px auto; gap: 10px; padding: 12px; }
.jv-task-add .jv-input, .jv-task-filters .jv-input, .jv-task-edit .jv-input { padding: 9px 14px; min-height: 40px; box-sizing: border-box; }
select.jv-input { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--jv-dim) 50%), linear-gradient(135deg, var(--jv-dim) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.jv-task-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.jv-task-spacer { flex: 1; }
.jv-task-filters select { min-width: 150px; }
a.jv-chip.on, .jv-page a.jv-chip.on { background: var(--jv-text); border-color: transparent; color: #0b0b0d; }
a.jv-chip:hover:not(.on) { background: rgba(255, 255, 255, 0.12); }
.jv-tasks { padding: 6px 20px 8px; }
.jv-task-group { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 0; color: var(--jv-dim); font-size: 12px; font-weight: 600; border-radius: 8px; }
.jv-task-group::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jv-faint); }
.jv-task-group.urgent { color: #ff9b9b; }
.jv-task-group.urgent::before { background: var(--jv-red); box-shadow: 0 0 8px var(--jv-red); }
.jv-task-group.high { color: #ffd28f; }
.jv-task-group.high::before { background: var(--jv-amber); }
.jv-task-group.medium { color: var(--jv-soft); }
.jv-task-group.medium::before { background: #9aa4b2; }
.jv-task-group.project::before { display: none; }
.jv-task-count { color: var(--jv-faint); font-weight: 500; }
.jv-task { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.jv-task[data-task-key] { cursor: grab; }
.jv-task.dragging { opacity: 0.45; cursor: grabbing; }
.jv-task.drag-over, .jv-task-group.drag-over { box-shadow: 0 -2px 0 0 var(--jv-text); }
body.task-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
.jv-task-grip { flex: none; width: 14px; margin-top: 2px; color: var(--jv-faint); font-size: 14px; line-height: 20px; touch-action: none; }
.jv-task-check { flex: none; width: 22px; height: 22px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: transparent; color: #0b0b0d; font-size: 13px; font-weight: 700; line-height: 19px; text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.jv-task-check:hover { border-color: var(--jv-green); }
.jv-task-check.checked { background: var(--jv-green); border-color: var(--jv-green); }
.jv-task-check.auto { border-style: dashed; border-color: rgba(255, 255, 255, 0.16); cursor: default; }
.jv-task-body { flex: 1 1 200px; min-width: 0; }
.jv-task-text { color: #e4e4e7; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.jv-task.done .jv-task-text { color: var(--jv-faint); text-decoration: line-through; }
.jv-task-body .jv-meta { margin-top: 2px; }
.jv-task-due.today { color: var(--jv-amber); }
.jv-task-due.overdue { color: #ff9b9b; font-weight: 600; }
.jv-task-more { flex: none; }
.jv-task-more summary { width: 28px; height: 28px; margin-left: auto; border-radius: 50%; color: var(--jv-dim); font-size: 14px; line-height: 28px; text-align: center; cursor: pointer; list-style: none; }
.jv-task-more summary::-webkit-details-marker { display: none; }
.jv-task-more summary:hover { background: rgba(255, 255, 255, 0.1); color: var(--jv-text); }
.jv-task-more[open] { flex: 1 1 100%; }
.jv-task-edit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); cursor: auto; }
.jv-task-field { display: grid; gap: 4px; color: var(--jv-dim); font-size: 12px; }
.jv-task-field.wide, .jv-task-buttons { grid-column: 1 / -1; }
.jv-task-buttons { display: flex; gap: 10px; }
.jv-task-clear { margin: 10px 0; }

/* Markets. Figures wear the text colours; a coloured arrow beside a change says which way it went. */
.jv-stocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.jv-stock { padding: 16px 18px; }
.jv-stock-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12.5px; }
.jv-stock-symbol { color: var(--jv-soft); font-size: 14px; font-weight: 700; }
.jv-stock-price { margin-top: 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jv-stock-change { margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.jv-stock-change.gain, .jv-bot-tiles .gain { color: var(--jv-green); }
.jv-stock-change.loss, .jv-bot-tiles .loss { color: #ff9b9b; }
.jv-bot { padding: 20px; }
.jv-bot-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.jv-bot-head h3 { margin: 0 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }
.jv-bot-head .jv-dim { font-size: 13px; }
.jv-bot-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.jv-bot-tiles > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.jv-bot-tiles dt { color: var(--jv-dim); font-size: 12.5px; }
.jv-bot-tiles dd { margin: 0 0 2px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.jv-spark { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--jv-line); }
.jv-spark-plot { position: relative; height: 96px; cursor: crosshair; touch-action: pan-y; }
.jv-spark-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jv-spark-line { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jv-spark-line.gain { stroke: var(--jv-green); }
.jv-spark-line.loss { stroke: #ff9b9b; }
.jv-spark-zero { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.jv-spark-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.jv-spark-tip { position: absolute; top: 0; padding: 4px 9px; border-radius: 9px; background: rgba(24, 24, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--jv-text); font-size: 12px; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.jv-spark-cross[hidden], .jv-spark-tip[hidden] { display: none; }
.jv-spark-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--jv-dim); font-size: 12.5px; }

/* Grab */
.gb-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding: 18px; }
.gb-kinds { display: inline-flex; align-self: flex-start; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); }
.gb-kind { position: relative; cursor: pointer; }
.gb-kind input { position: absolute; opacity: 0; }
.gb-kind span { display: block; padding: 7px 18px; border-radius: 999px; color: #a1a1aa; font-size: 13.5px; font-weight: 600; }
.gb-kind input:checked + span { background: var(--jv-text); color: #0b0b0d; }
.gb-kind input:focus-visible + span { outline: 2px solid var(--jv-text); outline-offset: 2px; }
.gb-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.gb-link .jv-input, .gb-options .jv-input { box-sizing: border-box; min-height: 40px; padding: 9px 14px; }
.gb-options { display: grid; grid-template-columns: 150px 150px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gb-options.video { grid-template-columns: 200px minmax(0, 1fr); }
.gb-options label { display: grid; gap: 4px; color: var(--jv-dim); font-size: 12px; }
/* The two modes swap by the radio buttons alone. */
.gb-form:has(input[value="audio"]:checked) .gb-if-video,
.gb-form:has(input[value="video"]:checked) .gb-if-audio { display: none; }
.gb-error { color: #ff8f8f; font-size: 14px; }
.gb-error[hidden] { display: none; }
.gb-note { margin: 0; color: var(--jv-dim); font-size: 13px; line-height: 1.5; }
.gb-folders { display: flex; }
.gb-jobs { padding: 6px 20px; }
.gb-job { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.gb-job:first-child { border-top: 0; }
.gb-job-kind { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--jv-soft); font-size: 11px; font-weight: 600; }
.gb-job-main { flex: 1; min-width: 0; }
.gb-job-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-job-status { margin-top: 2px; color: var(--jv-dim); font-size: 13px; }
.gb-job.done .gb-job-status { color: var(--jv-green); }
.gb-job.failed .gb-job-status { color: #ff8f8f; }
.gb-bar { height: 3px; margin-top: 7px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.gb-bar span { display: block; height: 100%; background: var(--jv-text); transition: width 0.3s; }
.gb-job-btn { flex: none; min-height: 34px; padding: 0 14px; font-size: 13px; }
.gb-job-remove { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--jv-dim); font-size: 18px; cursor: pointer; }
.gb-job-remove:hover { background: rgba(255, 255, 255, 0.1); color: var(--jv-text); }

/* Whewp on /health: recovery tiles and bars, sent from the phone. Colour is WHOOP's green, yellow and red zones, which Whewp keeps. */
.wh-card { padding: 18px 20px; }
.wh-stale { margin: 0 0 14px; color: var(--jv-amber); font-size: 13.5px; line-height: 1.45; }
.wh-note { margin: 10px 0 0; color: var(--jv-dim); font-size: 12.5px; line-height: 1.45; }
.wh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.wh-tiles > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.wh-tiles dt { color: var(--jv-dim); font-size: 12.5px; }
.wh-tiles dd { margin: 0 0 2px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wh-tiles .green { color: var(--jv-green); }
.wh-tiles .amber { color: var(--jv-amber); }
.wh-tiles .red { color: #ff9b9b; }
.wh-trend { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--jv-line); }
.wh-trend-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--jv-dim); font-size: 12.5px; }
.wh-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
/* The whole column is the target, so a short bar is still easy to hover. */
.wh-bar { position: relative; display: flex; flex: 1; align-items: flex-end; height: 100%; }
.wh-fill { width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--jv-faint); }
.wh-bar.green .wh-fill { background: var(--jv-green); }
.wh-bar.amber .wh-fill { background: var(--jv-amber); }
.wh-bar.red .wh-fill { background: #ff9b9b; }
.wh-bar:hover .wh-fill { filter: brightness(1.25); }
.wh-bar:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    z-index: 2;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(24, 24, 28, 0.94);
    color: var(--jv-text);
    font-size: 12px;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}
.wh-bar:nth-child(-n+3):hover::after { left: 0; transform: none; }
.wh-bar:nth-last-child(-n+3):hover::after { left: auto; right: 0; transform: none; }
.wh-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--jv-dim); font-size: 12px; }

@media (max-width: 760px) {
    .jv-task-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .jv-task-add > .jv-input[name="text"], .jv-task-add > .jv-btn { grid-column: 1 / -1; }
    .jv-bot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gb-options, .gb-options.video { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .jv-tasks { padding-left: 16px; padding-right: 16px; }
    .jv-task-edit { grid-template-columns: minmax(0, 1fr); }
    .jv-stocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .jv-stock { padding: 14px; }
    .jv-stock-price { font-size: 22px; }
    .jv-bot { padding: 16px; }
    .gb-jobs { padding-left: 16px; padding-right: 16px; }
}
/* ===== end Tasks, Markets, Grab ===== */

/* ===== Trading bot (/tradingbot). Profit and loss wear green and red; every other figure, and every chart line that
   isn't a P&L, stays white or grey. The panels, tiles and pills are the site's own. ===== */
.tb-status { display: contents; }
.tb-page[data-reachable="false"] .tb-needs-bot { display: none; }
.tb-page [data-tb-panel] { transition: opacity 0.2s; }
.tb-page.tb-stale [data-tb-panel] { opacity: 0.55; }
.tb-gain, .fin-table .tb-gain, .stat-tile .stat-value.tb-gain, .jv-bot-tiles .tb-gain { color: var(--jv-green); }
.tb-loss, .fin-table .tb-loss, .stat-tile .stat-value.tb-loss, .jv-bot-tiles .tb-loss { color: #ff9b9b; }
.tb-down { line-height: 1.5; }
.tb-down strong { display: block; margin-bottom: 4px; color: var(--jv-text); font-size: 16px; font-weight: 600; }
.tb-down p { margin: 8px 0 0; }
.tb-note { margin: 0; color: var(--jv-dim); font-size: 13.5px; line-height: 1.5; }
.tb-page .fin-sub { margin-left: 0; }
.tb-sub { margin: 24px 0 10px; color: var(--jv-text); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tb-card { margin-top: 16px; }
#performance .tb-card { margin-top: 0; }
.tb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

button.tb-price { display: block; width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
button.tb-price:hover { border-color: rgba(255, 255, 255, 0.24); }
button.tb-price.on { border-color: rgba(255, 255, 255, 0.55); }
.tb-price .jv-stock-price { display: block; }

.tb-chart { position: relative; height: 300px; }
.tb-chart.tall { height: 350px; }
.tb-chart.short { height: 260px; }
.tb-chart.failed { height: auto; }
.tb-tip { position: absolute; top: 8px; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: 12px; background: rgba(24, 24, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; pointer-events: none; font-variant-numeric: tabular-nums; }
.tb-tip[hidden] { display: none; }
.tb-tip-when { margin-bottom: 4px; color: var(--jv-dim); }
.tb-tip-row { display: flex; justify-content: space-between; gap: 14px; color: var(--jv-soft); white-space: nowrap; }
.tb-tip-row b { color: var(--jv-text); font-weight: 600; }
.tb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; color: var(--jv-soft); font-size: 12.5px; }
.tb-legend:empty { display: none; }
.tb-legend-item { display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; }
button.tb-legend-item { cursor: pointer; }
button.tb-legend-item:hover, button.tb-legend-item.on { color: var(--jv-text); }
button.tb-legend-item.on { font-weight: 600; }
.jv-toggle.tb-tabs { margin-bottom: 12px; }
.jv-toggle.tb-tabs[hidden] { display: none; }
.jv-toggle button { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--text-subtle); font: 500 13px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.jv-toggle button:hover { color: var(--text-primary); }
.jv-toggle button.on { background: #f2f2f5; color: #0b0b0d; }

.tb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tb-log { max-height: 360px; overflow-y: auto; }
.fin-table.tb-table { margin-top: 0; white-space: nowrap; }
.tb-log .fin-table.tb-table th { position: sticky; top: 0; z-index: 1; background: #17171a; }
.fin-table.tb-table tfoot td { border-top: 1px solid var(--border-hairline); border-bottom: 0; color: var(--jv-text); }
.tb-table .tb-strong { color: var(--jv-text); font-weight: 600; }
.tb-table .tb-when { color: var(--jv-dim); }
.tb-table .tb-why { min-width: 240px; color: var(--jv-dim); white-space: normal; }
.tb-table .tb-quiet td, .tb-table .tb-quiet .tb-strong { color: var(--jv-dim); font-weight: 400; }
.tb-subline { display: block; margin-top: 1px; color: var(--jv-dim); font-size: 12px; font-weight: 400; }
.tb-dry { color: var(--jv-amber); }
.tb-best { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--jv-text); font-size: 11.5px; font-weight: 600; }
.tb-table tr.picked td.tb-gain { color: var(--jv-green); }
.tb-table tr.picked td.tb-loss { color: #ff9b9b; }
.tb-rows tbody tr { cursor: pointer; }
.tb-rows tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }

.tb-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-items: end; }
.tb-form label { display: grid; gap: 4px; color: var(--jv-dim); font-size: 12px; }
.tb-form .hud-input { box-sizing: border-box; min-height: 40px; padding: 9px 12px; font-size: 13.5px; }
.tb-form label.tb-check { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--jv-soft); font-size: 13.5px; }
.tb-progress, .tb-error { margin: 12px 0 0; font-size: 13.5px; }
.tb-progress { color: var(--jv-soft); }
.tb-error { color: #ff8f8f; }
.tb-progress[hidden], .tb-error[hidden], [data-tb-results][hidden], .tb-detail[hidden] { display: none; }
[data-tb-results] { margin-top: 18px; }
[data-tb-results] [data-tb-info] { margin-bottom: 10px; }
[data-tb-space] { margin-top: 10px; }
.tb-detail { margin-top: 12px; }
.tb-detail .jv-bot-tiles { margin: 0 0 16px; }

.tb-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.tb-param h4, .tb-pair h4 { margin: 0 0 6px; color: var(--jv-text); font-size: 14px; font-weight: 600; }
.tb-param > div { display: flex; flex-direction: column; gap: 2px; }
.tb-kv { color: var(--jv-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.tb-kv b { color: var(--jv-dim); font-weight: 500; }
.tb-kv.changed { color: var(--jv-amber); }
.tb-kv i { color: var(--jv-faint); font-style: normal; font-size: 12px; }
.tb-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 20px; }
.tb-pairs:empty { display: none; }
.tb-pair { min-width: 0; }
.tb-pair.wide { grid-column: 1 / -1; }
.tb-pair h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.tb-pair [data-tb-pair-metrics] { margin-top: 10px; }

@media (min-width: 601px) {
    .tb-page .jv-stocks { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 900px) {
    .tb-two, .tb-pairs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .tb-chart { height: 240px; }
    .tb-chart.tall { height: 280px; }
    .tb-chart.short { height: 220px; }
    .tb-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-form .jv-btn { grid-column: 1 / -1; }
    .fin-table.tb-table { font-size: 12.5px; }
    .tb-table .tb-when { white-space: normal; }
    /* The reason takes its own line, so nothing has to scroll sideways. */
    .tb-signals thead { display: none; }
    .tb-signals tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .tb-signals tr:last-child { border-bottom: 0; }
    .tb-signals td { padding: 0; border: 0; }
    .tb-table.tb-signals .tb-why { grid-column: 1 / -1; min-width: 0; }
}
/* ===== end Trading bot ===== */

/* ===== Physics ===== */
.ph-chip-row { display: contents; }

/* Up next */
.ph-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: center; padding: 24px; }
.ph-next-text h3 { margin: 6px 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.ph-next-text p { margin: 0 0 18px; color: var(--text-subtle); font-size: 15px; line-height: 1.5; }
.ph-kicker { color: var(--text-muted); font-size: 13px; }
.ph-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ph-minutes { color: var(--text-muted); font-size: 13px; }

/* The map: each physics chapter beside the maths it needs */
.ph-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; margin-top: 24px; }
.ph-lane-head { grid-row: 2; padding-top: 8px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.ph-lane-head.maths { grid-column: 1; }
.ph-lane-head.physics { grid-column: 2; }
.ph-node {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025) 60%);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ph-node:hover { background: rgba(255, 255, 255, 0.1); }
.ph-node.start { grid-column: 1 / -1; }
.ph-node.maths { grid-column: 1; }
.ph-node.physics { grid-column: 2; }
.ph-node.linked::before { content: ""; position: absolute; top: 50%; left: -31px; width: 30px; border-top: 1px dashed rgba(255, 255, 255, 0.22); }
.ph-node.here { border-color: rgba(255, 181, 71, 0.55); }
.ph-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.ph-bar { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.ph-bar i { display: block; height: 100%; background: #f2f2f5; transition: width 0.3s; }
.ph-node.finished .ph-bar i { background: var(--status-clean); }

/* The gallery: small live previews of the figures, each a link to its lesson or topic */
.ph-play-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ph-play-card { display: grid; align-content: start; gap: 2px; padding: 10px 10px 13px; color: inherit; text-decoration: none; transition: background 0.15s, transform 0.15s, border-color 0.15s; }
.ph-play-card:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.ph-play-card .ph-viz { margin-bottom: 9px; }
.ph-play-title { padding: 0 4px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.ph-play-sub { padding: 0 4px; color: var(--text-muted); font-size: 12.5px; }
.ph-play-more { margin-top: 12px; }
.ph-play-more > summary { display: inline-flex; list-style: none; cursor: pointer; }
.ph-play-more > summary::-webkit-details-marker { display: none; }
.ph-play-more[open] > summary { margin-bottom: 12px; }

/* Chapters and lessons */
.ph-chapters { margin-top: 24px; }
.ph-chapter { scroll-margin-top: 20px; }
.ph-chapter summary .ph-code { align-self: center; }
.ph-blurb { margin: 0 0 8px; max-width: 720px; color: var(--text-subtle); font-size: 14px; line-height: 1.55; }
.ph-needs { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.ph-lessons { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; }
.ph-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; }
.ph-row:hover { background: rgba(255, 255, 255, 0.04); }
.ph-row-main { display: grid; flex: 1; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.ph-row-title { font-size: 14.5px; font-weight: 500; }
.ph-row-goal { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.ph-row.done .ph-row-title { color: var(--text-muted); }
.ph-tag {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text-faint);
    font-size: 11.5px;
    white-space: nowrap;
}
.ph-tag.on { color: var(--text-secondary); background: rgba(255, 255, 255, 0.07); }
.ph-tick-form { flex: none; margin: 0; }
.ph-tick {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: transparent;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ph-tick:hover { color: var(--text-muted); border-color: rgba(255, 255, 255, 0.4); }
.ph-tick.on { background: var(--status-clean); border-color: transparent; color: #08110c; }
.ph-tick-wide.on { background: rgba(126, 226, 168, 0.15); border-color: rgba(126, 226, 168, 0.45); color: var(--status-clean); }
.ph-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-hairline); color: var(--text-muted); font-size: 13px; }
.ph-howto ul { margin: 0; padding-left: 18px; color: var(--text-subtle); font-size: 14px; line-height: 1.6; }
.ph-howto li + li { margin-top: 6px; }
.ph-howto strong { color: var(--text-primary); font-weight: 600; }
.ph-pace { margin: 12px 0 0; color: var(--text-muted); font-size: 13px; }

/* A visualisation */
.ph-viz {
    margin: 24px 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025) 60%);
}
/* The stage: the site's dots, faintly, under a soft light from above. */
.ph-viz-stage {
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(120% 85% at 50% -15%, rgba(255, 255, 255, 0.075), transparent 62%),
        rgba(0, 0, 0, 0.36);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -50px 70px -50px rgba(0, 0, 0, 0.55);
}
.ph-viz canvas { display: block; outline: none; }
.ph-viz canvas:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.ph-next-viz { margin: 0; padding: 0; border: 0; background: none; }
.ph-read {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 2px solid rgba(255, 181, 71, 0.55);
    border-radius: 4px 14px 14px 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.ph-read b { color: var(--status-warning); font-weight: 600; }
.ph-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px 20px; align-items: end; margin-top: 14px; }
.ph-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; color: var(--text-subtle); font-size: 13px; }
.ph-ctl-value { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ph-ctl input[type="range"] { -webkit-appearance: none; appearance: none; grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; --at: 50%; }
.ph-ctl input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f2f2f5 var(--at), rgba(255, 255, 255, 0.15) var(--at)); }
.ph-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.5); transition: box-shadow 0.15s; }
.ph-ctl input[type="range"]:hover::-webkit-slider-thumb, .ph-ctl input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.5); }
.ph-ctl input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.15); }
.ph-ctl input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: #f2f2f5; }
.ph-ctl input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.ph-ctl input[type="range"]:focus-visible { outline: none; }
.ph-ctl-select { grid-template-columns: 1fr; gap: 4px; }
.ph-ctl-select select { padding: 7px 12px; font-size: 13px; }
.ph-ctl-toggle { display: flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; }
.ph-ctl-toggle input { width: 16px; height: 16px; margin: 0; accent-color: #f2f2f5; }
/* A few choices side by side, and the numbered stages of a story. */
.ph-ctl-seg { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ph-seg { display: flex; flex-wrap: wrap; gap: 3px; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(0, 0, 0, 0.28); }
.ph-seg button {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-subtle);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ph-seg button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }
.ph-seg button.on { background: #f2f2f5; color: #0b0b0e; }
.ph-seg button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }
.ph-ctl-seg.ph-wide { grid-column: 1 / -1; }
.ph-ctl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; grid-column: 1 / -1; }
.ph-ctl-steps .ph-seg button i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 6px 0 -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-size: 11px; font-style: normal; font-weight: 600; }
.ph-ctl-steps .ph-seg button.on i { background: rgba(0, 0, 0, 0.14); }
.ph-controls .hud-btn { justify-self: start; }
.ph-viz figcaption { margin-top: 10px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }

/* A lesson */
.ph-lesson-page .ph-md { max-width: 800px; margin: 36px auto 0; counter-reset: ph-problem; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
.ph-md > :first-child { margin-top: 0; }
.ph-md h2 { margin: 44px 0 12px; color: var(--text-primary); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.ph-md h3 { margin: 28px 0 8px; color: var(--text-primary); font-size: 18px; font-weight: 600; }
.ph-md p { margin: 0 0 14px; }
.ph-md ul, .ph-md ol { margin: 0 0 14px; padding-left: 22px; }
.ph-md li + li { margin-top: 5px; }
.ph-md strong { color: var(--text-primary); font-weight: 600; }
.ph-md a { text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.ph-md .katex { font-size: 1.08em; }
.ph-md .katex-display { margin: 14px 0; padding: 2px 0; overflow-x: auto; overflow-y: hidden; }
.ph-md .math { max-width: 100%; }
.ph-md div.math { overflow-x: auto; }
.ph-eqs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 36px; }
.ph-eq { max-width: 100%; }
.ph-eq .katex-display { margin: 6px 0; }
.ph-md .try, .ph-md .key, .ph-md .why, .ph-md .problem, .ph-steps {
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}
.ph-md .try > :last-child, .ph-md .key > :last-child, .ph-md .why > :last-child, .ph-md .problem > :last-child { margin-bottom: 0; }
.ph-md .key { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); text-align: center; }
.ph-md .why { font-size: 15px; }
.ph-md .why::before { content: "Why physics cares"; display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.ph-md .try { border-color: rgba(255, 181, 71, 0.28); background: rgba(255, 181, 71, 0.05); }
.ph-md .try::before { content: "Try this"; display: block; margin-bottom: 6px; color: var(--status-warning); font-size: 13px; font-weight: 600; }
.ph-md .problem { counter-increment: ph-problem; }
.ph-md .problem::before { content: "Problem " counter(ph-problem); display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.ph-md .problem details { margin-top: 10px; }
.ph-md .problem summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: var(--text-subtle);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.ph-md .problem summary::-webkit-details-marker { display: none; }
.ph-md .problem details[open] summary { margin-bottom: 10px; color: var(--status-clean); border-color: rgba(126, 226, 168, 0.4); }
.ph-steps > [hidden] { display: none !important; }
.ph-steps > p:last-of-type { margin-bottom: 0; }
.ph-next-step { margin-top: 10px; }
.ph-unwritten { max-width: 800px; margin: 36px auto 0; padding: 24px; }
.ph-unwritten h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.025em; }
.ph-unwritten p { margin: 0; color: var(--text-subtle); line-height: 1.55; }
.ph-deeper { max-width: 800px; margin: 44px auto 0; }
.ph-deeper h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -0.025em; }
.ph-deeper ul { margin: 0; padding-left: 20px; color: var(--text-subtle); line-height: 1.8; font-size: 14.5px; }
.ph-lesson-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 800px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--border-hairline); }
.ph-lesson-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-lesson-nav .jv-btn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Study */
.ph-caveat { margin: 0 0 14px; padding: 12px 16px; border: 1px solid rgba(255, 181, 71, 0.35); border-radius: 16px; background: rgba(255, 181, 71, 0.08); color: #ffd28f; font-size: 14px; line-height: 1.5; }
.ph-summary { margin: 0 0 18px; max-width: 820px; color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.ph-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ph-option h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.ph-option h3 a { text-decoration: none; }
.ph-option h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ph-option h4 { margin: 18px 0 6px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.ph-option ul { margin: 0; padding-left: 18px; color: var(--text-subtle); font-size: 13.5px; line-height: 1.5; }
.ph-option li + li { margin-top: 5px; }
.ph-option-course { margin: 0 0 6px; color: var(--text-muted); font-size: 13.5px; line-height: 1.4; }
.ph-option-line { margin: 0 0 10px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.45; }
.ph-facts { margin: 0; }
.ph-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-hairline); font-size: 13.5px; line-height: 1.4; }
.ph-facts dt { color: var(--text-muted); }
.ph-facts dd { margin: 0; color: var(--text-primary); }
.ph-facts dd.good { color: var(--status-clean); }
.ph-facts dd.warn { color: var(--status-warning); }
.ph-sources { margin: 16px 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.6; }
.ph-sources a { margin-right: 8px; color: var(--text-muted); }
.ph-subhead { margin: 32px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }
.ph-dates { margin: 0; padding: 6px 20px; list-style: none; }
.ph-dates li { display: grid; grid-template-columns: 100px 92px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-hairline); font-size: 14px; line-height: 1.4; }
.ph-dates li:first-child { border-top: 0; }
.ph-dates li.past { opacity: 0.45; }
.ph-date { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.ph-date-when { color: var(--text-muted); }
.ph-dates li.soon .ph-date-when { color: var(--status-warning); }
.ph-date-text strong { color: var(--text-secondary); font-weight: 500; }
.ph-date-text a { text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.ph-date-who { display: none; }
.ph-date-text p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.ph-steps-list { margin: 0; padding: 18px 20px 18px 40px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.ph-steps-list li + li { margin-top: 8px; }
.ph-study-folds { margin-top: 20px; }
.ph-note { margin: 0; color: var(--text-subtle); font-size: 14px; line-height: 1.6; }
.ph-others { margin: 0; padding-left: 18px; color: var(--text-subtle); font-size: 14px; line-height: 1.55; }
.ph-others li + li { margin-top: 8px; }
.ph-others strong { display: block; color: var(--text-primary); font-weight: 600; }

/* Material */
.ph-groups { display: grid; gap: 16px; }
.ph-group .hud-panel-title { margin-bottom: 8px; }
.ph-mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.ph-mat { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-hairline); }
.ph-mat .ph-tag { justify-self: start; }
.ph-mat form { margin: 0; }
.ph-mat-title { color: var(--text-primary); font-size: 14.5px; font-weight: 500; }
a.ph-mat-title { text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.ph-mat-text p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.ph-remove { padding: 0 4px; border: 0; background: none; color: var(--text-faint); font-size: 16px; line-height: 1.2; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.ph-mat:hover .ph-remove, .ph-remove:focus-visible { opacity: 1; }
.ph-add { margin-top: 16px; }
.ph-add-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) ; gap: 12px; align-items: end; }
.ph-add-form label { display: grid; gap: 4px; color: var(--text-subtle); font-size: 13px; }
.ph-add-form .wide { grid-column: span 3; }

@media (hover: none) { .ph-remove { opacity: 0.7; } }

@media (max-width: 760px) {
    .ph-next { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .ph-play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ph-play-card { padding: 7px 7px 10px; }
    .ph-play-title { font-size: 13.5px; }
    .ph-map { grid-template-columns: minmax(0, 1fr); }
    .ph-lane-head { display: none; }
    .ph-node, .ph-node.maths, .ph-node.physics, .ph-node.start { grid-column: 1; grid-row: auto !important; }
    .ph-node.linked::before { display: none; }
    .ph-row { flex-wrap: wrap; }
    .ph-row-main { flex-basis: calc(100% - 44px); }
    .ph-row .ph-tag { margin-left: 40px; }
    .ph-options, .ph-mats { grid-template-columns: minmax(0, 1fr); }
    .ph-dates li { grid-template-columns: 96px minmax(0, 1fr); }
    .ph-date-text { grid-column: 1 / -1; }
    .ph-add-form { grid-template-columns: minmax(0, 1fr); }
    .ph-add-form .wide { grid-column: auto; }
    .ph-viz { margin-left: -6px; margin-right: -6px; padding: 10px; }
    .ph-lesson-foot { flex-direction: column; align-items: stretch; }
    .ph-lesson-nav .jv-btn { flex: 1 1 100%; white-space: normal; padding: 8px 16px; text-align: center; }
}
/* ===== end Physics ===== */

/* ===== Immune system ===== */
/* /immune borrows the /physics lesson styles (.ph-md, .ph-viz, .ph-code, .ph-mat). These are the parts only it uses. */
.im-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.im-layer { display: grid; align-content: start; gap: 6px; padding: 16px 18px; color: inherit; text-decoration: none; transition: background 0.15s; }
.im-layer:hover { background: rgba(255, 255, 255, 0.09); }
.im-layer h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
.im-layer p { margin: 0; color: var(--text-subtle); font-size: 13.5px; line-height: 1.5; }
.im-layer-when { color: var(--text-muted); font-size: 13px; }
.im-hero { margin: 16px 0 0; }

/* The guide: each chapter a row, what it's about on the left and its topics on the right */
.im-chapters { display: grid; gap: 14px; }
.im-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 12px 32px; padding: 22px; scroll-margin-top: 20px; }
.im-chapter-head h3 { margin: 10px 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.im-chapter-head p { margin: 0; color: var(--text-subtle); font-size: 14px; line-height: 1.55; }
.im-topics { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.im-topics li { display: flex; align-items: center; gap: 12px; border-radius: 12px; }
.im-topics li:hover { background: rgba(255, 255, 255, 0.04); }
.im-topics a { display: grid; flex: 1; gap: 2px; min-width: 0; padding: 8px 6px; color: inherit; text-decoration: none; }
.im-topic-title { font-size: 14.5px; font-weight: 500; }
.im-topic-gist { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.im-topics .ph-tag { margin-right: 6px; }

/* Look it up */
.im-filter { display: flex; align-items: center; gap: 10px; max-width: 420px; margin-bottom: 14px; color: var(--text-subtle); font-size: 13px; }
.im-filter input { flex: 1; min-width: 0; }
.im-none { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; }
.im-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.im-terms > div { padding: 10px 0; border-top: 1px solid var(--border-hairline); }
.im-terms > div[hidden] { display: none; }
.im-terms dt { color: var(--text-primary); font-size: 14.5px; font-weight: 600; }
.im-aka { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.im-terms dd { margin: 3px 0 0; color: var(--text-subtle); font-size: 13.5px; line-height: 1.5; }
.im-terms dd a { color: var(--text-secondary); text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.im-sources { padding: 20px 22px; }
.im-sources h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.im-sources .ph-mat { grid-template-columns: 72px minmax(0, 1fr); }

/* A topic */
.im-md table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.im-md th { padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-muted); font-size: 13px; font-weight: 500; text-align: left; vertical-align: bottom; }
.im-md td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.im-md tbody tr:last-child td { border-bottom: 0; }
.im-md td:first-child { color: var(--text-primary); font-weight: 500; }
.im-md .key, .im-md .practice, .im-md .open {
    margin: 18px 0;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 15px;
    text-align: left;
}
.im-md .key > :last-child, .im-md .practice > :last-child, .im-md .open > :last-child { margin-bottom: 0; }
.im-md .key::before, .im-md .practice::before, .im-md .open::before { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.im-md .key { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.im-md .key::before { content: "To remember"; }
.im-md .practice::before { content: "In practice"; }
.im-md .open { border-color: rgba(255, 181, 71, 0.28); background: rgba(255, 181, 71, 0.05); }
.im-md .open::before { content: "Not settled yet"; color: var(--status-warning); font-weight: 600; }
.im-md .yours, .im-md .urgent {
    margin: 18px 0;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 15px;
    text-align: left;
}
.im-md .yours > :last-child, .im-md .urgent > :last-child { margin-bottom: 0; }
.im-md .yours::before, .im-md .urgent::before { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.im-md .yours { border-color: rgba(255, 255, 255, 0.22); }
.im-md .yours::before { content: "In your case"; color: var(--text-secondary); }
.im-md .urgent { border-color: rgba(255, 92, 92, 0.45); background: rgba(255, 92, 92, 0.07); }
.im-md .urgent::before { content: "Don't wait"; color: var(--status-critical); }
.im-md blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 2px solid rgba(255, 255, 255, 0.22); color: var(--text-subtle); font-size: 15px; }
.im-md blockquote p { margin: 0; }
.im-mine-note { max-width: 800px; margin: 18px auto 0; color: var(--text-muted); font-size: 13.5px; }
.im-foot { justify-content: flex-end; }
.im-viz-line { margin: 0 0 8px; }
.im-viz-key { display: block; margin-top: 8px; color: var(--text-muted); font-size: 13px; }
.im-viz-key i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 12px; border-radius: 50%; }
.im-viz-key i:first-child { margin-left: 0; }
.im-viz-key .k-sick { background: var(--status-warning); }
.im-viz-key .k-over { background: var(--text-primary); }
.im-viz-key .k-open { width: 6px; height: 6px; background: var(--text-faint); }
.im-viz-key .k-safe { border: 1.5px solid var(--status-clean); }

@media (max-width: 900px) {
    .im-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .im-chapter { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}
@media (max-width: 760px) {
    .im-terms { grid-template-columns: minmax(0, 1fr); }
    .im-sources .ph-mats { grid-template-columns: minmax(0, 1fr); }
    /* A table too wide for a phone scrolls inside itself rather than the page. */
    .im-md table { display: block; overflow-x: auto; font-size: 13.5px; }
    .im-md th, .im-md td { min-width: 110px; }
    .im-foot { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
    .im-layers { grid-template-columns: minmax(0, 1fr); }
    .im-topics .ph-tag { display: none; }
}
/* ===== end Immune system ===== */

/* -------------------- Projects (/projects, /projects/{key}, its ads and plan) -------------------- */

.jv-head-above { margin: 2px 0 2px; font-size: 13px; color: var(--text-muted); }
.jv-head-above a { color: var(--text-subtle); text-decoration: none; }
.jv-head-above a:hover { color: var(--text-primary); }
.pj-tabs { max-width: 100%; }

.pj-card .pj-name { color: inherit; text-decoration: none; }
.pj-card .pj-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pj-card .jv-app-orb { cursor: pointer; }
.pj-why { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-subtle); }
.pj-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }
.pj-pills .jv-chip { text-decoration: none; }

.stat-tile .stat-value.muted { color: var(--text-faint); }
.stat-tile .stat-value.good { color: var(--jv-green); }
.jv-page > .pj-tiles { margin-top: 40px; scroll-margin-top: 20px; }
.pj-tiles .stat-value { font-size: 26px; overflow-wrap: anywhere; }
a.pj-tile-link { color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
a.pj-tile-link:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }

.pj-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pj-none { margin: 0; font-size: 14px; }
.pj-alerts, .pj-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pj-alert { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; border: 1px solid var(--border-hairline); }
.pj-alert .jv-dim { font-size: 13px; }
.pj-alert a { font-size: 13px; color: var(--text-subtle); }
.pj-alert.warn { border-color: rgba(255, 181, 71, 0.3); background: rgba(255, 181, 71, 0.06); }
.pj-alert.bad { border-color: rgba(255, 92, 92, 0.4); background: rgba(255, 92, 92, 0.07); }
.pj-alert.wait { border-color: rgba(255, 138, 61, 0.42); background: rgba(255, 138, 61, 0.08); }
.pj-tasks li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.45; }
.pj-prio { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); transform: translateY(-1px); }
.pj-prio.high { background: var(--jv-amber); }
.pj-prio.low { background: rgba(255, 255, 255, 0.16); }

.pj-facts { display: grid; gap: 12px; margin: 0; }
.pj-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; font-size: 14px; line-height: 1.55; }
.pj-facts dt { color: var(--text-muted); }
.pj-facts dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.pj-facts .pj-target dd { color: var(--text-primary); }

.pj-intro { margin-bottom: 16px; color: var(--text-subtle); font-size: 14px; }
.pj-fold { scroll-margin-top: 20px; }
.pj-fold .markdown-body, .pj-note .markdown-body { font-size: 14.5px; }
.pj-note + .pj-note { margin-top: 12px; }
.pj-note > summary .pj-note-date { font-size: 13px; font-weight: 400; }
.pj-note .jv-folds { gap: 8px; }
.pj-note .pj-fold { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 14px 16px; }
.pj-note .pj-fold > summary.hud-panel-title { font-size: 15px; }
.jv-section-head p code, .ad-code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text-secondary); }

/* Ads: what has run on Meta, ad by ad */
.ad-group-title { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.ad-group-title:first-of-type { margin-top: 8px; }
.ad-group-title a { color: inherit; text-decoration: none; }
.ad-group-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ad-group-title .jv-dim { font-size: 14px; font-weight: 500; }
details.ad-shelf > summary { cursor: pointer; list-style: none; width: fit-content; }
details.ad-shelf > summary::-webkit-details-marker { display: none; }
details.ad-shelf > summary::after { content: "+"; margin-left: 2px; color: var(--text-muted); font-weight: 500; }
details.ad-shelf[open] > summary::after { content: "−"; }
.ad-account + .ad-account { margin-top: 28px; }
.ad-account-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; font-size: 14px; }
.ad-note { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; }
.ad-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.ad-tiles .stat-value { font-size: 24px; }
.ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ad-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; padding: 14px; align-items: start; min-width: 0; }
.ad-stats { grid-column: 1 / -1; min-width: 0; display: grid; gap: 6px; }
.ad-thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.ad-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-thumb-none { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--text-faint); }
.ad-status { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, 0.62); color: var(--text-subtle); }
.ad-status.live { color: #0b0b0d; background: var(--jv-green); }
.ad-status.blocked { color: #fff; background: rgba(255, 92, 92, 0.85); }
.ad-status.review { color: #0b0b0d; background: var(--jv-amber); }
.ad-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
.ad-body { min-width: 0; display: grid; gap: 6px; }
.ad-name { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ad-where { font-size: 12px; color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere; }
.ad-from { width: fit-content; font-size: 12.5px; color: var(--text-secondary); }
.ad-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-subtle); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-kpis { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ad-kpis th:first-child { width: 22%; }
.ad-kpis th, .ad-kpis td { padding: 5px 4px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }
.ad-kpis thead th { font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.ad-kpis tbody th { text-align: left; font-weight: 500; color: var(--text-muted); }
.ad-kpis tr > :first-child { padding-left: 0; }
.ad-kpis tr > :last-child { padding-right: 0; }
.ad-kpis tr.ad-quiet td { color: var(--text-faint); }
.ad-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12px; }
.ad-foot a { color: var(--text-subtle); text-decoration: none; }
.ad-foot a:hover { color: var(--text-primary); }

/* Ads: the library of ads made, to watch */
.ad-concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.ad-concept { display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 20px; }
.ad-concept:target { border-color: rgba(255, 255, 255, 0.4); }
/* The ad's shape, as tall as the screen allows. The player is pinned to it, so the whole frame always shows: with only
   width and height at 100%, Chrome drew a 9:16 video at its full height once it knew its size, and the box cut it off. */
.ad-media { position: relative; aspect-ratio: 9 / 16; max-height: min(80vh, 720px); background: #000; overflow: hidden; }
.ad-media.square { aspect-ratio: 1; }
.ad-media.wide { aspect-ratio: 1.91 / 1; }
.ad-media > a { display: contents; }
/* A play mark on an ad until it first plays (jarvis-ads.js starts it on a click anywhere on it). */
.ad-media:has(> video):not(.started)::after {
    content: "▶";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    padding-left: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 26px;
    pointer-events: none;
}
.ad-player, .ad-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ad-variants { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; }
.ad-variant {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-subtle);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ad-variant:hover { color: var(--text-primary); }
.ad-variant.on { color: #0b0b0d; background: #f2f2f5; border-color: #f2f2f5; }
.ad-concept-body { display: grid; gap: 8px; padding: 12px 16px 14px; }
.ad-concept-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ad-concept-top .jv-chip { text-decoration: none; padding: 2px 10px; font-size: 12px; }
.ad-code { color: var(--text-faint); font-size: 11px; overflow-wrap: anywhere; }
.ad-state { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.ad-state.s-draft, .ad-state.s-hold { color: #ffbe94; background: rgba(255, 138, 61, 0.14); border-color: rgba(255, 138, 61, 0.4); }
.ad-state.s-ready { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
.ad-state.s-running { color: #0b0b0d; background: var(--jv-green); }
.ad-state.s-retired { color: var(--text-faint); background: rgba(255, 255, 255, 0.04); }
.ad-state.s-paused { color: var(--text-secondary); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.ad-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.ad-hook { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.ad-summary { margin: 0; font-size: 13px; color: var(--text-subtle); line-height: 1.5; }
.ad-onmeta { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(126, 226, 168, 0.07); border: 1px solid rgba(126, 226, 168, 0.22); font-size: 12.5px; line-height: 1.45; }
.ad-state-note { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.ad-change { margin: 0; }
.ad-review .ad-concept { border-color: rgba(255, 138, 61, 0.35); }
.ad-decide { display: grid; gap: 8px; padding-top: 4px; }
.ad-decide-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-decide .jv-btn { flex: 1 1 auto; }
.pj-tabs .site-nav-badge { margin-left: 6px; }
.ad-state-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ad-state-form .hud-input { min-width: 0; flex: 1 1 120px; }

@media (max-width: 900px) {
    .pj-now { grid-template-columns: minmax(0, 1fr); }
    .ad-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pj-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ad-cards { grid-template-columns: minmax(0, 1fr); }
    .ad-concepts { grid-template-columns: minmax(0, 1fr); }
    .ad-media { max-height: 70vh; }
}