/* ═══════════════════════════════════════════════════════════════════════
   Shared chrome for the Fairness and Insights panels (2026-09-06, design
   review "Fairness and Insights, redrawn", step 3).

   Both panels answer the product's central question and used to look like
   two different apps: a 560px modal with a big title and a round close
   button beside a 960px panel with an icon tile, a badge and three square
   buttons; five day-count buttons with a retention gate beside five tabs
   with a plan gate. This sheet owns what they share:

     1. the header anatomy: brand block (icon tile, title, subtitle),
        actions, then one period row;
     2. the segmented period control (.fr-seg / .fr-seg-btn), Week · Month ·
        Quarter · Year, one gating rule;
     3. panel-scoped colour tokens. The rest of the app defines none of
        --text-primary / --text-secondary / --border-color /
        --surface-primary / --primary-500 (main.css is not linked), so
        every var(--x, #fallback) in the two panels painted its fallback.
        Defining them HERE, scoped to the two modals, makes the panels
        resolve as one set in both themes without touching the rest of
        the app.

   Loaded after both panels' own sheets; selectors are id-scoped so they win
   over the legacy rules there without editing them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 3. Panel-scoped tokens ─────────────────────────────────────────── */
/* 2026-09-07: the quota modal and the admin shells (Workspace admin, Group
   settings, Booking links) joined the set so they resolve the same tokens
   in both themes. 2026-10-08: the Dashboard joined too (its refit is built
   from the Fairness and Insights parts, and reads their band colours). */
#fairness-modal,
#insights-modal,
#quota-assignment-modal,
#workspace-admin,
#board-admin,
#team-booking-admin-modal,
#team-dashboard-panel {
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --surface-primary: #ffffff;
    --surface-secondary: #f8fafc;
    --primary-500: #14b8a6;
    --primary-600: #0d9488;
    --primary-700: #0f766e;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-full: 9999px;
}
body.dark-mode #fairness-modal,
body.dark-mode #insights-modal,
body.dark-mode #quota-assignment-modal,
body.dark-mode #workspace-admin,
body.dark-mode #board-admin,
body.dark-mode #team-booking-admin-modal,
body.dark-mode #team-dashboard-panel {
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.22);
    --surface-primary: #1e293b;
    --surface-secondary: rgba(30, 41, 59, 0.6);
    --primary-500: #2dd4bf;
    --primary-600: #14b8a6;
    --primary-700: #5eead4;
}

/* ── 1. Header anatomy (Fairness; Insights already has this shape) ──── */
#fairness-modal .fm-header {
    display: block;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-primary, #fff);
}
#fairness-modal .fm-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#fairness-modal .fm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
#fairness-modal .fm-brand-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
    background: var(--cmx-3388e5a4b3);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 12%, transparent);
    color: var(--primary-600, #0d9488);
    font-size: 14px;
}
#fairness-modal .fm-brand-text { min-width: 0; }
#fairness-modal .fm-brand-text h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}
#fairness-modal .fm-title-sub {
    display: block;
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#fairness-modal .fm-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
#fairness-modal .fm-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    cursor: pointer;
}
#fairness-modal .fm-icon-btn:hover {
    color: var(--text-primary, #1e293b);
    border-color: var(--text-muted, #94a3b8);
}
#fairness-modal .fm-period-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 10px;
}
#fairness-modal .fm-period-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fm-period-note .tier-indicator,
#fairness-modal .fm-period-note .fm-freshness {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fm-period-note .fm-freshness:not(:empty)::before {
    content: "·";
    margin-right: 8px;
    color: var(--text-muted, #94a3b8);
}
/* The modal body used to open with its own top padding under a plain
   header; the header now carries the period row, so the body starts flush. */
#fairness-modal .fairness-modal-body { padding-top: 14px; }

/* ── 2. Segmented period control ────────────────────────────────────── */
#fairness-modal .fr-seg,
#insights-modal .fr-seg {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    margin: 0;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-full, 9999px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#fairness-modal .fr-seg::-webkit-scrollbar,
#insights-modal .fr-seg::-webkit-scrollbar { display: none; }

#fairness-modal .fr-seg-btn,
#insights-modal .fr-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-secondary, #64748b);
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
#fairness-modal .fr-seg-btn:hover,
#insights-modal .fr-seg-btn:hover {
    color: var(--text-primary, #1e293b);
    background: transparent;
    transform: none;
}
#fairness-modal .fr-seg-btn.active,
#insights-modal .fr-seg-btn.active {
    background: var(--primary-500, #14b8a6);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(20, 184, 166, 0.35);
}
/* Locked windows stay visible (the empty space is the upsell) at reduced
   weight, with one small padlock glyph after the word. */
#fairness-modal .fr-seg-btn-locked,
#insights-modal .fr-seg-btn-locked {
    opacity: 0.55;
    cursor: pointer;
}
#fairness-modal .fr-seg-btn-locked::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    margin-left: 1px;
}
#insights-modal .fr-seg-btn-locked i { font-size: 9px; }
#fairness-modal .fr-seg-btn:focus-visible,
#insights-modal .fr-seg-btn:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    #fairness-modal .fm-period-row { gap: 6px 10px; }
    #fairness-modal .fm-period-note { flex-basis: 100%; }
}

/* ── 4. The shared 24-hour strip (js/ui/hour-strip.js) ──────────────── */
/* Same values the Insights strip shipped with, now under one name so the
   viewer strip in Fairness and the group strip in Insights are one object.
   Tints read the canonical --fv ramp (css/fairness-view.css); no hex
   fallbacks here on purpose, the ramp is the single source. */
#fairness-modal .fr-strip-hist,
#insights-modal .fr-strip-hist {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    height: 44px;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
#fairness-modal .fr-hist-col,
#insights-modal .fr-hist-col {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
#fairness-modal .fr-hist-bar,
#insights-modal .fr-hist-bar {
    width: 60%;
    max-width: 14px;
    border-radius: 3px 3px 0 0;
    background: var(--text-primary, #334155);
}
#fairness-modal .fr-hist-n,
#insights-modal .fr-hist-n {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #1e293b);
}
#fairness-modal .fr-strip,
#insights-modal .fr-strip {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
}
#fairness-modal .fr-strip-row,
#insights-modal .fr-strip-row { display: contents; }
#fairness-modal .fr-strip-cell,
#insights-modal .fr-strip-cell {
    position: relative;
    height: 100%;
    border-right: 1px solid var(--fv-cell-border, rgba(148, 163, 184, 0.2));
    cursor: pointer;
}
#fairness-modal .fr-strip-cell:last-child,
#insights-modal .fr-strip-cell:last-child { border-right: none; }

/* ── QUARTER-DAY ANCHOR LINES ──────────────────────────────────────────────
   Ported from .fv-strip-cell (css/fairness-view.css, 2026-08-05), where the
   owner's complaint was that "the cells and indicators aren't directly
   relatable". The hour ruler here already leads midnight and noon via
   .fr-hour-tick[data-anchor], but the 24 cells beneath it carried no
   landmarks at all, so reading the 3pm cell meant counting tracks from the
   edge. A hairline at each quarter-day boundary (6a / 12p / 6p) gives the
   eye the same anchors the ruler advertises, with noon given more ink as
   the day's midpoint — matching the [data-anchor] hierarchy exactly.

   Uses the existing --fv-* token family (no new colour language), so both
   modals inherit light/dark automatically. Left border, not a pseudo: the
   cell scales on hover and a pseudo would thicken the anchor with it. */
#fairness-modal .fr-strip-cell[data-hour="6"],
#fairness-modal .fr-strip-cell[data-hour="12"],
#fairness-modal .fr-strip-cell[data-hour="18"],
#insights-modal .fr-strip-cell[data-hour="6"],
#insights-modal .fr-strip-cell[data-hour="12"],
#insights-modal .fr-strip-cell[data-hour="18"] {
    border-left: 1px solid var(--fv-anchor-line, rgba(255, 255, 255, 0.55));
}
#fairness-modal .fr-strip-cell[data-hour="12"],
#insights-modal .fr-strip-cell[data-hour="12"] {
    border-left-color: var(--fv-anchor-line-strong, rgba(255, 255, 255, 0.85));
}
#fairness-modal .fr-strip-cell:hover,
#insights-modal .fr-strip-cell:hover { filter: brightness(1.06); }
#fairness-modal .fr-strip-cell:focus-visible,
#insights-modal .fr-strip-cell:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
}
#fairness-modal .fr-strip-cell[data-fv-level="1"], #insights-modal .fr-strip-cell[data-fv-level="1"] { background: var(--fv-l1); }
#fairness-modal .fr-strip-cell[data-fv-level="2"], #insights-modal .fr-strip-cell[data-fv-level="2"] { background: var(--fv-l2); }
#fairness-modal .fr-strip-cell[data-fv-level="3"], #insights-modal .fr-strip-cell[data-fv-level="3"] { background: var(--fv-l3); }
#fairness-modal .fr-strip-cell[data-fv-level="4"], #insights-modal .fr-strip-cell[data-fv-level="4"] { background: var(--fv-l4); }
#fairness-modal .fr-strip-cell[data-fv-level="5"], #insights-modal .fr-strip-cell[data-fv-level="5"] { background: var(--fv-l5); }
#fairness-modal .fr-strip-cell[data-fv-level="6"], #insights-modal .fr-strip-cell[data-fv-level="6"] { background: var(--fv-l6); }
#fairness-modal .fr-strip-cell[data-fv-level="7"], #insights-modal .fr-strip-cell[data-fv-level="7"] { background: var(--fv-l7); }
#fairness-modal .fr-strip-cell[data-fv-level="8"], #insights-modal .fr-strip-cell[data-fv-level="8"] { background: var(--fv-l8); }
#fairness-modal .fr-strip-cell[data-fv-level="9"], #insights-modal .fr-strip-cell[data-fv-level="9"] { background: var(--fv-l9); }
#fairness-modal .fr-hourlane,
#insights-modal .fr-hourlane {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    margin-top: 2px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fr-hour-tick,
#insights-modal .fr-hour-tick { text-align: center; opacity: 0.66; }
#fairness-modal .fr-hour-tick[data-anchor="true"],
#insights-modal .fr-hour-tick[data-anchor="true"] {
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    opacity: 1;
}

/* The Fairness card around the viewer strip. */
#fairness-modal .fm-strip-card {
    margin-top: 12px;
    padding: 10px 12px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-primary, #fff);
}
#fairness-modal .fm-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
#fairness-modal .fm-strip-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fm-strip-anchor {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fm-strip-readout {
    margin: 8px 0 0;
    min-height: 16px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
#fairness-modal .fm-strip-readout:empty { display: none; }
#fairness-modal .fm-strip-note {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}
/* The History tab hides the current-view blocks; the strip is one. */
#fairness-modal .fairness-modal-body.fm-view-history > .fm-strip-card { display: none; }

/* ── 5. The stat tile (Fairness facts; Insights count tiles) ────────── */
#fairness-modal .fr-stat,
#insights-modal .fr-stat {
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-left-width: 3px;
    border-left-color: var(--primary-500);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-primary, #fff);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
#fairness-modal .fr-stat-label,
#insights-modal .fr-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fr-stat-value,
#insights-modal .fr-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
#fairness-modal .fr-stat-note,
#insights-modal .fr-stat-note {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}

/* ── 6. Band pill, month lane, chip, "Whose turn next", receipts (step 5) ── */
/* The band pill: outline and tint from the ramp step, text in the same
   hue. One component for a person's share, a month, a bucket. */
#fairness-modal .fr-band,
#insights-modal .fr-band {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-full, 9999px);
    border: 1.5px solid var(--fr-band-hue, var(--border-color, #e2e8f0));
    background: color-mix(in srgb, var(--fr-band-hue, #94a3b8) 12%, transparent);
    color: var(--fr-band-hue, var(--text-secondary, #64748b));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
#fairness-modal .fr-band[data-band="low"],     #insights-modal .fr-band[data-band="low"]     { --fr-band-hue: var(--fv-l2); }
#fairness-modal .fr-band[data-band="modest"],  #insights-modal .fr-band[data-band="modest"]  { --fr-band-hue: var(--fv-l5); color: var(--cmx-f036abc597); color: color-mix(in srgb, var(--fv-l5) 55%, var(--text-primary)); }
#fairness-modal .fr-band[data-band="notable"], #insights-modal .fr-band[data-band="notable"] { --fr-band-hue: var(--fv-l6); }
#fairness-modal .fr-band[data-band="high"],    #insights-modal .fr-band[data-band="high"]    { --fr-band-hue: var(--fv-l8); }
#fairness-modal .fr-band[data-band="none"],    #insights-modal .fr-band[data-band="none"],
#fairness-modal .fr-band[data-band="nodata"],  #insights-modal .fr-band[data-band="nodata"]  {
    --fr-band-hue: var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    background: transparent;
    font-weight: 600;
}

/* The month lane: one tile per bucket, label over a band pill. */
#fairness-modal .fr-month-lane,
#insights-modal .fr-month-lane {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}
#fairness-modal .fr-month,
#insights-modal .fr-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--surface-primary, #fff);
    min-width: 0;
}
#fairness-modal .fr-month-label,
#insights-modal .fr-month-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}
#fairness-modal .fm-months-card {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-primary, #fff);
}
#fairness-modal .fairness-modal-body.fm-view-history > .fm-months-card,
#fairness-modal .fairness-modal-body.fm-view-history > .fm-turn-card { display: none; }

/* The person chip: neutral, City · Name, a ramp dot for direction. */
#fairness-modal .fr-chip,
#insights-modal .fr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-primary, #fff);
    color: var(--text-primary, #1e293b);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
#fairness-modal .fr-chip-dot,
#insights-modal .fr-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--fv-l5);
}
#fairness-modal .fr-chip-dot[data-tilt="under"],      #insights-modal .fr-chip-dot[data-tilt="under"]      { background: var(--fv-l3); }
#fairness-modal .fr-chip-dot[data-tilt="much-under"], #insights-modal .fr-chip-dot[data-tilt="much-under"] { background: var(--fv-l2); }
#fairness-modal .fr-chip-dot[data-tilt="over"],       #insights-modal .fr-chip-dot[data-tilt="over"]       { background: var(--fv-l7); }
#fairness-modal .fr-chip-dot[data-tilt="much-over"],  #insights-modal .fr-chip-dot[data-tilt="much-over"]  { background: var(--fv-l8); }

/* "Whose turn next": the one action card (Fairness). */
#fairness-modal .fm-turn-card {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 12px);
    background: var(--cmx-f1915e8575);
    background: color-mix(in srgb, var(--primary-500) 10%, transparent);
    border: 1px solid var(--cmx-c1f21548b1);
    border: 1px solid color-mix(in srgb, var(--primary-500) 25%, transparent);
}
#fairness-modal .fm-turn-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-700, #0f766e);
    margin-bottom: 6px;
}
#fairness-modal .fm-turn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#fairness-modal .fm-turn-text {
    margin: 0;
    flex: 1 1 220px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #1e293b);
}
#fairness-modal .fm-turn-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-full, 9999px);
    font-size: 13px;
    font-weight: 700;
}
#fairness-modal .fm-turn-cta[hidden] { display: none; }

/* The trend row: word on the left, the month lane on the right, wrapping
   to two rows on a phone. The legacy sketch slot was a fixed 132px column
   sized for four bars, which stacked the four pills vertically. */
#insights-modal .ins-trend { flex-wrap: wrap; }
#insights-modal .ins-trend-text { flex: 1 1 220px; }
#insights-modal .ins-trend-sketch { flex: 1 1 300px; width: auto; max-width: 420px; }
#insights-modal .ins-trend-sketch .fr-month-lane { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }

/* "Whose turn next" row under the load list (Insights). */
#insights-modal .ins-turn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
#insights-modal .ins-turn-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-700, #0f766e);
    margin-right: 2px;
}

/* Receipts under the group verdict (Insights). */
#insights-modal .ins-behind {
    margin-top: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--surface-primary, #fff);
}
#insights-modal .ins-behind > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    list-style: none;
}
#insights-modal .ins-behind > summary::-webkit-details-marker { display: none; }
#insights-modal .ins-behind > summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    margin-left: auto;
    color: var(--text-secondary, #64748b);
    transition: transform 0.15s ease;
}
#insights-modal .ins-behind[open] > summary::after { transform: rotate(180deg); }
#insights-modal .ins-behind-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
}
#insights-modal .ins-behind-list {
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding: 4px 12px 8px;
}
#insights-modal .ins-behind-row {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--cmx-a4dc07b128);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, #e2e8f0) 60%, transparent);
    font-size: 12.5px;
}
#insights-modal .ins-behind-row:last-child { border-bottom: none; }
#insights-modal .ins-behind-when { color: var(--text-secondary, #64748b); font-variant-numeric: tabular-nums; white-space: nowrap; }
#insights-modal .ins-behind-title { font-weight: 600; color: var(--text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Who it was outside hours for, each against their own working hours: a
   second line under the title, one person per chip-less line. */
#insights-modal .ins-behind-who { grid-column: 2; display: flex; flex-direction: column; gap: 1px; color: var(--text-secondary, #64748b); }
#insights-modal .ins-behind-hours { color: var(--text-tertiary, #94a3b8); }
#insights-modal .ins-behind-why {
    margin: 8px 0 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-primary, #1e293b);
}
#insights-modal .ins-behind-more { padding: 6px 0 2px; font-size: 12px; color: var(--text-secondary, #64748b); }
@media (max-width: 480px) {
    #insights-modal .ins-behind-row { grid-template-columns: 1fr; gap: 2px; }
    #insights-modal .ins-behind-who { grid-column: 1; }
    #insights-modal .ins-behind-title { white-space: normal; }
}

/* ── 7. Phone fixes from the first live look (2026-09-06 evening) ────── */
/* The trend row turns into a COLUMN under 640px (insights-dashboard.css),
   where a flex-basis becomes a HEIGHT: the word block stood 220px tall and
   the month lane 300px, with the tiles floating at the bottom of a blank
   card. Basis auto; widths carry the row layout. */
#insights-modal .ins-trend-text { flex: 1 1 auto; min-width: 200px; }
#insights-modal .ins-trend-sketch { flex: 1 1 auto; min-width: 240px; width: auto; max-width: 420px; }
@media (max-width: 640px) {
    #insights-modal .ins-trend-sketch { max-width: none; }
}
/* A band pill wider than its tile ("No meetings" at 78px) overhung it. */
#fairness-modal .fr-month .fr-band,
#insights-modal .fr-month .fr-band {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    line-height: 1.2;
}
/* The lane row: the bars' label on the left, the best-window label on the
   right, so the bars sit directly on the cells with only the bracket between. */
#insights-modal .ins-strip-lanerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 2px;
}
#insights-modal .ins-strip-lanerow .ins-strip-lanelabel,
#insights-modal .ins-strip-lanerow .ins-strip-windowlabel { margin: 0; }
#insights-modal .ins-strip-marks { margin-top: 2px; }

/* Person chips carry a faint tint of their direction (owner, first live
   look: "perhaps colour the pills"): the dot says which way, the wash makes
   a row of chips scannable. Kept faint so it never reads as a badge. */
#fairness-modal .fr-chip[data-tilt],
#insights-modal .fr-chip[data-tilt],
#fm-team-balance .fm-team-balance-name[data-tilt] {
    --fr-chip-hue: var(--fv-l5);
    background: color-mix(in srgb, var(--fr-chip-hue) 10%, var(--surface-primary, #fff));
    border-color: color-mix(in srgb, var(--fr-chip-hue) 35%, var(--border-color, #e2e8f0));
}
#fairness-modal .fr-chip[data-tilt="under"],      #insights-modal .fr-chip[data-tilt="under"],      #fm-team-balance .fm-team-balance-name[data-tilt="under"]      { --fr-chip-hue: var(--fv-l3); }
#fairness-modal .fr-chip[data-tilt="much-under"], #insights-modal .fr-chip[data-tilt="much-under"], #fm-team-balance .fm-team-balance-name[data-tilt="much-under"] { --fr-chip-hue: var(--fv-l2); }
#fairness-modal .fr-chip[data-tilt="over"],       #insights-modal .fr-chip[data-tilt="over"],       #fm-team-balance .fm-team-balance-name[data-tilt="over"]       { --fr-chip-hue: var(--fv-l7); }
#fairness-modal .fr-chip[data-tilt="much-over"],  #insights-modal .fr-chip[data-tilt="much-over"],  #fm-team-balance .fm-team-balance-name[data-tilt="much-over"]  { --fr-chip-hue: var(--fv-l8); }

/* ── 8. The dial (2026-09-07): the hero of both panels ─────────────── */
/* Drawn by HourStrip.renderDial(); colours come from the panel tokens and
   the --fv ramp through style attributes, so both themes resolve. */
#fairness-modal .fr-dial,
#insights-modal .fr-dial {
    display: block;
    width: 100%;
    height: auto;
    max-width: 196px;
    margin: 0 auto;
}
#fairness-modal .fr-dial text,
#insights-modal .fr-dial text { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#fairness-modal .fr-dial-seg,
#insights-modal .fr-dial-seg { cursor: pointer; outline: none; }
#fairness-modal .fr-dial-seg:hover,
#insights-modal .fr-dial-seg:hover { filter: brightness(1.08); }
#fairness-modal .fr-dial-seg:focus-visible,
#insights-modal .fr-dial-seg:focus-visible { stroke: var(--primary-500); stroke-width: 2px; }

/* Fairness hero: dial left, words right; stacked on a phone. */
#fairness-modal .fm-verdict-hero.fm-hero--dial {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    grid-template-areas: "dial text" "key key";
    gap: 8px 16px;
    align-items: center;
}
#fairness-modal .fm-hero--dial .fm-hero-dial { grid-area: dial; }
#fairness-modal .fm-hero--dial .fm-hero-text { grid-area: text; min-width: 0; }
#fairness-modal .fm-hero--dial .fr-dial-key { grid-area: key; }
#fairness-modal .fm-hero-dial[hidden] { display: none; }
@media (max-width: 520px) {
    #fairness-modal .fm-verdict-hero.fm-hero--dial {
        grid-template-columns: 1fr;
        grid-template-areas: "dial" "text" "key";
        justify-items: center;
        text-align: center;
    }
    #fairness-modal .fm-hero--dial .fr-dial { max-width: 216px; }
    #fairness-modal .fm-hero--dial .fm-hero-status { justify-content: center; }
}

/* Insights verdict: dial left, words right; stacked on a phone. */
#insights-modal .ins-verdict.ins-verdict--dial {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    grid-template-areas: "dial text" "readout readout" "key key" "behind behind";
    gap: 8px 18px;
    align-items: center;
}
#insights-modal .ins-verdict--dial .ins-verdict-dial { grid-area: dial; }
#insights-modal .ins-verdict--dial .ins-verdict-text { grid-area: text; min-width: 0; }
#insights-modal .ins-verdict--dial .ins-dial-readout { grid-area: readout; }
#insights-modal .ins-verdict--dial > .ins-dial-key { grid-area: key; }
#insights-modal .ins-verdict--dial > .ins-behind { grid-area: behind; margin-top: 4px; }
#insights-modal .ins-dial-readout {
    margin: 0;
    min-height: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
#insights-modal .ins-dial-readout:empty { display: none; }
@media (max-width: 640px) {
    #insights-modal .ins-verdict.ins-verdict--dial {
        grid-template-columns: 1fr;
        grid-template-areas: "dial" "text" "readout" "key" "behind";
        justify-items: stretch;
    }
    #insights-modal .ins-verdict--dial .fr-dial { max-width: 216px; }
}

/* The key under a dial: bar, rim, star and diamond, in words. */
#fairness-modal .fr-dial-key,
#insights-modal .fr-dial-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}
#fairness-modal .fr-dial-key[hidden],
#insights-modal .fr-dial-key[hidden] { display: none; }
#fairness-modal .fr-dial-key > span,
#insights-modal .fr-dial-key > span { display: inline-flex; align-items: center; gap: 6px; }
#fairness-modal .fr-dial-key-bar,
#insights-modal .fr-dial-key-bar { display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--text-primary, #1e293b); }
#fairness-modal .fr-dial-key-rim,
#insights-modal .fr-dial-key-rim { display: inline-block; width: 26px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--fv-l2), var(--fv-l5), var(--fv-l8)); }
#fairness-modal .fr-dial-key-win,
#insights-modal .fr-dial-key-win { font-style: normal; font-size: 11px; color: var(--text-primary, #1e293b); letter-spacing: 0.05em; }

/* ── 9. The bar lives in the cell (2026-09-07, owner) ─────────────────── */
/* No count lane above the strip: each cell carries a fill rising from its
   base in a darker shade of its own tint, and the count as a numeral, the
   way the board's Fairness View footer draws its cells. */
#fairness-modal .fr-strip,
#insights-modal .fr-strip,
#insights-modal .ins-strip { height: 46px; }
#fairness-modal .fr-strip-cell,
#insights-modal .fr-strip-cell { position: relative; overflow: hidden; }
#fairness-modal .fr-cell-bar,
#insights-modal .fr-cell-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgb(0 0 0 / 0.32);
    pointer-events: none;
}
#fairness-modal .fr-cell-n,
#insights-modal .fr-cell-n {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
/* The legacy count lane, should any caller still emit it, stays hidden. */
#fairness-modal .fr-strip-hist,
#insights-modal .fr-strip-hist,
#insights-modal .ins-strip-hist { display: none; }
/* The key swatch for a wedge is a small ink wedge, like the mark itself.
   It was a green cell with a dark fill (2026-09-07), which read as another
   ring colour (owner 2026-09-28: "isn't clear how the greens differentiate"). */
#fairness-modal .fr-dial-key-bar,
#insights-modal .fr-dial-key-bar {
    flex: 0 0 auto;
    width: 12px; height: 14px; border-radius: 0;
    background: var(--text-primary, #1e293b);
    clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
}
#fairness-modal .fr-dial-key-rim,
#insights-modal .fr-dial-key-rim,
#fairness-modal .fr-dial-key-win,
#insights-modal .fr-dial-key-win { flex: 0 0 auto; }

/* The Fairness key reads as a short list under the dial: a lead sentence,
   then one line per mark, left-aligned even where the hero is centred. */
#fairness-modal .fr-dial-key--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.4;
}
#fairness-modal .fr-dial-key--stack > span { align-items: flex-start; gap: 8px; }
#fairness-modal .fr-dial-key--stack > span > i { margin-top: 3px; }
#fairness-modal .fr-dial-key-lead {
    margin: 0 0 2px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

/* ── 10. Phone: Fairness and Insights are one sheet size (2026-09-28) ──
   Owner: "Why is insights smaller than fairness? Make them the same" and
   "why is no data shown". Measured at 412x780:
   - Fairness was a 702px bottom sheet whose body was a 426px window
     between a 152px header and a PINNED 125px footer, so the first
     screen was the dial alone and the facts, hour strip, whose-turn and
     month-by-month sat below it unseen: the panel looked empty.
   - Insights was a 494px box, full-bleed and square, centred on its
     content, so it shrank to whatever the overview had to say.
   Both are now the same bottom sheet, and on Fairness the whole sheet
   scrolls as one (Insights already lets its header scroll away), so the
   footer comes after the content instead of taking a fixed band. */
@media (max-width: 600px) {
    #fairness-modal .modal-content,
    #insights-modal.modal .modal-content.modal-large {
        width: calc(100% - 20px);
        max-width: none;
        height: 90vh;
        max-height: 90vh;
        margin: auto auto 0;
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #fairness-modal .modal-content { overflow-y: auto; overscroll-behavior: contain; }
    #fairness-modal .fairness-modal-body { max-height: none; overflow: visible; flex: 1 0 auto; }
    #fairness-modal .fairness-modal-footer { flex-shrink: 0; }
    /* A short page (the overview) leaves room under .ins-body; the scroll
       area wears the same grey so the sheet does not end in a white band. */
    #insights-modal.modal .modal-content.modal-large > .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        background: var(--surface-secondary, #f8fafc);
    }
}
/* dvh is the viewport actually visible; Android Chrome's vh is the large
   one, which pushed a bottom sheet's header off the top (quota, 09-26). */
@supports (height: 1dvh) {
    @media (max-width: 600px) {
        #fairness-modal .modal-content,
        #insights-modal.modal .modal-content.modal-large { height: 90dvh; max-height: 90dvh; }
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   NO-color-mix() FALLBACKS — the owner's phone is iOS 15.8 / Safari 15.6.
   ═══════════════════════════════════════════════════════════════════════
   color-mix() is unsupported there, and a var() leader INSIDE color-mix() is
   invalid at computed-value time, so the WHOLE DECLARATION IS DROPPED — the
   element paints nothing rather than falling back. A plain leader in the same
   rule does not rescue it either; only a separate @supports block does.

   This is the idiom css/insights-dashboard.css:109 already proved. Every
   value below is the literal result of the same mix against the light or dark
   panel surface, computed, not eyeballed — so the two paths agree on a
   browser that supports both.

   Without this block, on that phone: the header icon tile, the month-lane
   band pills, the "Whose turn next" card (tint AND border), the Insights
   receipts dividers and the team-balance person chips all render untinted
   and unbordered —
   i.e. the verdict surfaces of the score-invisible redesign read as bare
   text. (2026-09-23)
   ══════════════════════════════════════════════════════════════════════ */
@supports not (background: color-mix(in srgb, red 12%, transparent)) {
    /* 1. Header brand icon tile. */
    #fairness-modal .fm-brand-icon                { background: rgba(20, 184, 166, 0.12); }
    body.dark-mode #fairness-modal .fm-brand-icon { background: rgba(45, 212, 191, 0.12); }

    /* 2. The band pill — the verdict itself. Tinted per band off the --fv ramp. */
    #fairness-modal .fr-band,
    #insights-modal .fr-band { background: rgba(148, 163, 184, 0.12); } /* --fr-band-hue default #94a3b8; none/nodata set transparent at higher specificity */
    #fairness-modal .fr-band[data-band="low"],
    #insights-modal .fr-band[data-band="low"]     { background: rgba(21, 128, 61, 0.12); }
    #fairness-modal .fr-band[data-band="modest"],
    #insights-modal .fr-band[data-band="modest"]  { background: rgba(251, 191, 36, 0.12); color: #987c2e; }
    #fairness-modal .fr-band[data-band="notable"],
    #insights-modal .fr-band[data-band="notable"] { background: rgba(249, 115, 22, 0.12); }
    #fairness-modal .fr-band[data-band="high"],
    #insights-modal .fr-band[data-band="high"]    { background: rgba(220, 38, 38, 0.12); }
    body.dark-mode #fairness-modal .fr-band[data-band="modest"],
    body.dark-mode #insights-modal .fr-band[data-band="modest"]  { color: #f0d180; } /* 55% amber into the dark --text-primary */
    body.dark-mode #fairness-modal .fr-band[data-band="low"],
    body.dark-mode #insights-modal .fr-band[data-band="low"]     { background: rgba(22, 163, 74, 0.12); }
    body.dark-mode #fairness-modal .fr-band[data-band="notable"],
    body.dark-mode #insights-modal .fr-band[data-band="notable"] { background: rgba(251, 140, 42, 0.12); }

    /* 3. "Whose turn next" — the one action card. Loses tint AND border. */
    #fairness-modal .fm-turn-card {
        background: rgba(20, 184, 166, 0.10);
        border: 1px solid rgba(20, 184, 166, 0.25);
    }
    body.dark-mode #fairness-modal .fm-turn-card {
        background: rgba(45, 212, 191, 0.10);
        border: 1px solid rgba(45, 212, 191, 0.25);
    }

    /* 4. Receipts row dividers (the Insights "What's behind this" list). */
    #insights-modal .ins-behind-row                { border-bottom: 1px solid rgba(226, 232, 240, 0.60); }
    body.dark-mode #insights-modal .ins-behind-row { border-bottom: 1px solid rgba(148, 163, 184, 0.132); } /* 60% of the translucent dark border */

    /* 5. Person chips. The BACKGROUND mixes against the opaque surface, so it
       is a blended literal; the dark BORDER mixes against a TRANSLUCENT
       --border-color (rgba(148,163,184,.22)), so it stays an alpha. Values
       read back from Chromium's own color-mix(), not hand-blended. */
    #fairness-modal .fr-chip[data-tilt],
    #insights-modal .fr-chip[data-tilt],
    #fm-team-balance .fm-team-balance-name[data-tilt]                  { background: #fff9e9; border-color: #ebdaa9; }
    #fairness-modal .fr-chip[data-tilt="under"],
    #insights-modal .fr-chip[data-tilt="under"],
    #fm-team-balance .fm-team-balance-name[data-tilt="under"]          { background: #e8f6ed; border-color: #9bd0b6; }
    #fairness-modal .fr-chip[data-tilt="much-under"],
    #insights-modal .fr-chip[data-tilt="much-under"],
    #fm-team-balance .fm-team-balance-name[data-tilt="much-under"]     { background: #e8f2ec; border-color: #9ac4b1; }
    #fairness-modal .fr-chip[data-tilt="over"],
    #insights-modal .fr-chip[data-tilt="over"],
    #fm-team-balance .fm-team-balance-name[data-tilt="over"]           { background: #fdecec; border-color: #e7afb4; }
    #fairness-modal .fr-chip[data-tilt="much-over"],
    #insights-modal .fr-chip[data-tilt="much-over"],
    #fm-team-balance .fm-team-balance-name[data-tilt="much-over"]      { background: #fce9e9; border-color: #e0a4a9; }

    /* No dark #fm-team-balance lines on purpose: in dark mode
       fairness-dashboard.css `body.dark-mode #fm-team-balance
       .fm-team-balance-name` (1,2,1) already outranks the tinted rule (1,2,0)
       on EVERY browser, so those names are flat grey today. A fallback must
       reproduce what modern browsers paint, not what the tint rule intended. */
    body.dark-mode #fairness-modal .fr-chip[data-tilt],
    body.dark-mode #insights-modal .fr-chip[data-tilt] { background: #343839; border-color: rgba(221, 183, 79, 0.49); }
    body.dark-mode #fairness-modal .fr-chip[data-tilt="under"],
    body.dark-mode #insights-modal .fr-chip[data-tilt="under"] { background: #1e393e; border-color: rgba(67, 187, 120, 0.49); }
    body.dark-mode #fairness-modal .fr-chip[data-tilt="much-under"],
    body.dark-mode #insights-modal .fr-chip[data-tilt="much-under"] { background: #1d353c; border-color: rgba(59, 163, 106, 0.49); }
    body.dark-mode #fairness-modal .fr-chip[data-tilt="over"],
    body.dark-mode #insights-modal .fr-chip[data-tilt="over"] { background: #332c3c; border-color: rgba(213, 96, 102, 0.49); }
    body.dark-mode #fairness-modal .fr-chip[data-tilt="much-over"],
    body.dark-mode #insights-modal .fr-chip[data-tilt="much-over"] { background: #312939; border-color: rgba(199, 74, 80, 0.49); }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE REDRAWN FAIRNESS PANEL (owner approved mock v4, 2026-10-07: "Ok
   approved. Take care for overlap, and organise the text; this seems very
   texty"). Three bands, one colour each, everywhere on both panels: in your
   hours, early or evening, sleep hours. Plain colours only: the owner's
   iOS 15.6 phone paints no color-mix(). Selectors carry #fm-hero (two ids)
   on purpose: the legacy hero rules above and in fairness-dashboard.css are
   id-scoped, and these must win without editing them.
   ═══════════════════════════════════════════════════════════════════════ */
/* Help shows these parts too (its Fairness answer, 2026-10-08). */
.help-center-modal,
#fairness-modal,
#insights-modal,
#team-dashboard-panel {
    --fr-band-in: #6ee7a0;
    --fr-band-off: #fcd34d;
    --fr-band-sleep: #a78bfa;
    --fr-band-neutral: #e2e8f0;
    --fr-band-ink: #1e293b;
    --fr-off-ink: #b45309;
    --fr-good-ink: #047857;
}
body.dark-mode .help-center-modal,
body.dark-mode #fairness-modal,
body.dark-mode #insights-modal,
body.dark-mode #team-dashboard-panel {
    --fr-band-neutral: #334155;
    --fr-off-ink: #fcd34d;
    --fr-good-ink: #34d399;
}
.fr-sw { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--fr-band-neutral); }
.fr-sw[data-band="in"], .fr-pill[data-band="in"], .fr-bandbar > [data-band="in"], .fr-hist-seg[data-band="in"] { background: var(--fr-band-in); }
.fr-sw[data-band="off"], .fr-pill[data-band="off"], .fr-bandbar > [data-band="off"], .fr-hist-seg[data-band="off"] { background: var(--fr-band-off); }
.fr-sw[data-band="sleep"], .fr-pill[data-band="sleep"], .fr-bandbar > [data-band="sleep"], .fr-hist-seg[data-band="sleep"] { background: var(--fr-band-sleep); }

/* ── The hero: dial left, word + window + facts right, at every width ── */
#fairness-modal #fm-hero.fm-hero2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 14px;
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
#fairness-modal #fm-hero.fm-hero2.fm-hero--dial {
    grid-template-columns: minmax(150px, 1.15fr) minmax(0, 1fr);
    grid-template-areas: none;
}
#fairness-modal #fm-hero.fm-hero2 .fm-hero-dial { grid-area: auto; width: 100%; }
#fairness-modal #fm-hero.fm-hero2 .fm-hero-dial svg { display: block; width: 100%; height: auto; }
#fairness-modal #fm-hero.fm-hero2 .fm-hero-text { grid-area: auto; min-width: 0; }
#fairness-modal #fm-hero.fm-hero2 .fm-hero-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-wrap: balance;
}
#fairness-modal #fm-hero.fm-hero2[data-band="stretched"] .fm-hero-status,
#fairness-modal #fm-hero.fm-hero2[data-band="overloaded"] .fm-hero-status { color: var(--fr-off-ink); }
#fairness-modal #fm-hero.fm-hero2 .fm-hero-status i { display: none; }
#fairness-modal #fm-hero.fm-hero2.fm-is-empty .fm-hero-status { font-size: 1.05rem; color: var(--text-secondary); }
#fairness-modal .fm-hero-window {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 600;
}
body.dark-mode #fairness-modal .fm-hero-window { background: #0f2422; color: #5eead4; }
#fairness-modal .fm-hero-window[hidden] { display: none; }
#fairness-modal .fm-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 6px 16px;
    margin: 10px 0 0;
}
#fairness-modal .fm-stat { display: flex; flex-direction: column; min-width: 0; }
#fairness-modal .fm-stat dd {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
#fairness-modal .fm-stat--out:not([data-zero]) dd { color: var(--fr-off-ink); }
#fairness-modal .fm-stat dt { font-size: 0.72rem; color: var(--text-secondary); }
#fairness-modal .fm-stats.fm-is-empty dd { color: var(--text-secondary); }
#fairness-modal .fm-hero-notes > .fm-compare {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
}
#fairness-modal .fm-hero-notes > .fm-compare[data-dir="more"] { color: var(--fr-off-ink); }
#fairness-modal .fm-hero-notes > .fm-compare[data-dir="fewer"] { color: var(--fr-good-ink); }
#fairness-modal .fm-hero-notes > .fm-verdict-why { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--text-secondary); }
#fairness-modal .fm-hero-notes > .fm-compare[hidden],
#fairness-modal .fm-hero-notes > .fm-verdict-why[hidden] { display: none; }

/* ── The dial (HourStrip.renderBands) ── */
.fr-bd .fr-bd-ring { fill: var(--fr-band-neutral); }
.fr-bd .fr-bd-ring[data-band="in"] { fill: var(--fr-band-in); fill-opacity: 0.45; }
.fr-bd .fr-bd-ring[data-band="off"] { fill: var(--fr-band-off); fill-opacity: 0.45; }
.fr-bd .fr-bd-ring[data-band="sleep"] { fill: var(--fr-band-sleep); fill-opacity: 0.45; }
.fr-bd .fr-bd-bar { fill: var(--fr-band-neutral); }
.fr-bd .fr-bd-bar[data-band="in"] { fill: var(--fr-band-in); }
.fr-bd .fr-bd-bar[data-band="off"] { fill: var(--fr-band-off); }
.fr-bd .fr-bd-bar[data-band="sleep"] { fill: var(--fr-band-sleep); }
.fr-bd .fr-bd-hit { fill: transparent; }
.fr-bd .fr-bd-hour { cursor: pointer; outline: none; }
/* The tapped hour: its bar outlined and its count bold. No wash over the
   wedge (live 2026-10-07: it read as a stray grey slice). */
.fr-bd .fr-bd-hour:focus-visible .fr-bd-bar,
.fr-bd .fr-bd-hour.is-selected .fr-bd-bar { stroke: var(--text-primary); stroke-width: 1.6px; }
.fr-bd .fr-bd-hour.is-selected .fr-bd-n { font-weight: 800; }
.fr-bd .fr-bd-n { font-size: 10.5px; font-weight: 700; fill: var(--text-primary); }
.fr-bd .fr-bd-n--in { fill: var(--fr-band-ink); }
.fr-bd .fr-bd-lab { font-size: 9.2px; font-weight: 500; fill: var(--text-primary); }
.fr-bd .fr-bd-lab--major { font-size: 10.2px; font-weight: 800; fill: var(--text-primary); }

#fairness-modal .fm-dial-key,
#insights-modal .fr-dial-key2 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
#fairness-modal .fm-dial-key > span,
#insights-modal .fr-dial-key2 > span { display: inline-flex; align-items: center; gap: 5px; }
#fairness-modal .fm-dial-key .fm-dial-key-n,
#insights-modal .fr-dial-key2 .fr-dial-key-n { flex-basis: 100%; }
#fairness-modal .fm-dial-key[hidden] { display: none; }

/* ── Readouts: what a tapped hour or bar holds ── */
.fr-readout {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-primary, #fff);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-primary);
}
.fr-readout[hidden] { display: none; }
.fr-ro-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.fr-ro-head > span { color: var(--text-secondary); }
.fr-ro-band { display: inline-flex; align-items: center; gap: 5px; }
.fr-ro-list { display: grid; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.fr-ro-list li { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fr-ro-t { font-weight: 600; overflow-wrap: anywhere; }
.fr-ro-x { font-weight: 500; color: var(--text-secondary); }
.fr-ro-m { font-size: 0.72rem; color: var(--text-secondary); }
.fr-ro-note { margin-top: 3px; font-size: 0.72rem; color: var(--text-secondary); }
/* People affected (Insights): swatch, name, their time, count, in columns. */
.fr-ro-people { display: grid; grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; margin: 6px 0 0; padding: 0; list-style: none; }
.fr-ro-people li { display: contents; }
.fr-ro-people .fr-ro-name { font-weight: 700; overflow-wrap: anywhere; }
.fr-ro-people .fr-ro-when { font-size: 0.72rem; color: var(--text-secondary); }
.fr-ro-people .fr-ro-n { font-size: 0.72rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Sections ── */
#fairness-modal .fm-sec { margin: 22px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
#fairness-modal .fm-sec[hidden] { display: none; }
#fairness-modal .fm-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-bottom: 8px; }
#fairness-modal .fm-sec-title { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
#fairness-modal .fm-sec-sub { margin-left: auto; font-size: 0.72rem; color: var(--text-secondary); text-align: right; }
#fairness-modal .fm-turn-text { margin: 0; font-size: 0.84rem; color: var(--text-primary); }

/* Where your meetings landed: one bar in three parts, counts inside. */
.fr-bandbar { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; }
.fr-bandbar > span { display: flex; align-items: center; justify-content: center; min-width: 20px; font-size: 0.76rem; font-weight: 700; color: var(--fr-band-ink); }
.fr-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 0.74rem; color: var(--text-secondary); }
.fr-key > span { display: inline-flex; align-items: center; gap: 5px; }
.fr-key b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* History: labelled columns, counts in segments, the window boxed. The
   plot reserves 28px above the tallest bar for the box's label, so the
   label can never sit on a column total. */
.fr-hist-plot { position: relative; height: 150px; padding-top: 36px; }
.fr-hist-cols { display: grid; gap: 3px; align-items: end; height: 100%; }
.fr-hist-col,
#fairness-modal .fr-hist-col,
#insights-modal .fr-hist-col { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; min-width: 0; }
.fr-hist-tot { margin-bottom: 2px; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fr-hist-stack { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 1px; width: 100%; }
.fr-hist-tot.is-zero { font-weight: 500; color: var(--text-muted, #94a3b8); }
.fr-hist-seg {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--fr-band-ink);
    cursor: pointer;
    overflow: hidden;
}
/* EXEMPT FROM THE 44px TOUCH FLOOR (style.css, pointer: coarse, sets every
   button to min 44x44). On a phone it made each segment 44px wide, so the
   last column ran out of its slot and past the card (owner 2026-10-07). The
   column is the target; a segment keeps its measured size. */
.fr-hist-seg,
#fairness-modal .fr-hist-seg,
#insights-modal .fr-hist-seg { min-width: 0; max-width: 100%; }
.fr-hist-seg.is-selected { position: relative; z-index: 1; outline: 2px solid var(--text-primary); outline-offset: 0; }
.fr-hist-seg:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 1px; }
.fr-hist-zero { display: block; height: 2px; border-radius: 1px; background: var(--border-color); }
.fr-hist-win {
    position: absolute;
    top: 16px;
    bottom: -2px;
    border: 1.5px dashed var(--primary-500, #14b8a6);
    border-radius: 6px;
    background: rgba(20, 184, 166, 0.07);
    pointer-events: none;
}
.fr-hist-win > span {
    position: absolute;
    top: -16px;
    right: -2px;
    padding: 0 3px;
    border-radius: 3px;
    background: var(--surface-primary, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    color: #0f766e;
    white-space: nowrap;
}
body.dark-mode .fr-hist-win > span { color: #5eead4; }
.fr-hist-x, .fr-hist-people { display: grid; gap: 3px; text-align: center; }
.fr-hist-x { margin-top: 4px; line-height: 1.15; }
.fr-hist-x > span { min-width: 0; overflow: hidden; font-size: 8.5px; letter-spacing: -0.01em; color: var(--text-secondary); white-space: nowrap; }
.fr-hist-x b { display: block; font-weight: 600; color: var(--text-primary); }
.fr-hist-plab { margin-top: 7px; font-size: 9.5px; color: var(--text-secondary); }
.fr-hist-people > span.is-zero { font-weight: 500; color: var(--text-muted, #94a3b8); }
.fr-hist-people > span { font-size: 10px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Behind this: one row per meeting title, its bands as pills. */
#fairness-modal #fm-behind .fm-behind-list {
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-primary, #fff);
}
#fairness-modal #fm-behind .fm-behind-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    background: none;
}
#fairness-modal #fm-behind .fm-behind-row:first-child { border-top: 0; }
#fairness-modal #fm-behind .fm-behind-title { min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
#fairness-modal #fm-behind .fm-behind-times { font-weight: 500; color: var(--text-secondary); }
#fairness-modal #fm-behind .fm-behind-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
#fairness-modal #fm-behind .fm-behind-meta { grid-column: 1 / -1; font-size: 0.72rem; color: var(--text-secondary); }
.fr-pill { padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; line-height: 1.5; color: var(--fr-band-ink); white-space: nowrap; }
#fairness-modal #fm-behind .fm-behind-more { padding: 7px 10px; border-top: 1px solid var(--border-color); font-size: 0.72rem; color: var(--text-secondary); }
#fairness-modal #fm-behind .fm-behind-reset {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--border-color);
    background: none;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: #0f766e;
    text-align: left;
    cursor: pointer;
}
body.dark-mode #fairness-modal #fm-behind .fm-behind-reset { color: #5eead4; }

/* "Updated" moved into the footer's small print (no period row). */
#fairness-modal .fm-advisory-note .fm-freshness { margin-left: 6px; color: var(--text-muted, #94a3b8); }
/* (No leading dot: in the wrapped footer it read as "·Updated".) */

/* ── THE REDRAWN INSIGHTS PAGE (same approval, 2026-10-07) ──────────────
   The same parts as Fairness: dial left, word + window + facts right, the
   key, the readout; one dot per meeting outside a person's hours; the
   history chart. Selectors carry .ins-verdict2 / .ins-history so they win
   over the legacy grid in insights-dashboard.css without editing it. */
#insights-modal .ins-verdict.ins-verdict2 { display: block; }
#insights-modal .ins-verdict2 .ins-hero { display: grid; grid-template-columns: 1fr; gap: 6px 14px; align-items: center; }
#insights-modal .ins-verdict2.ins-verdict--dial .ins-hero { grid-template-columns: minmax(150px, 1.15fr) minmax(0, 1fr); }
#insights-modal .ins-verdict2 .ins-verdict-dial { grid-area: auto; width: 100%; }
#insights-modal .ins-verdict2 .ins-verdict-dial svg { display: block; width: 100%; height: auto; }
#insights-modal .ins-verdict2 .ins-verdict-text { grid-area: auto; min-width: 0; }
#insights-modal .ins-verdict-word { font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); }
#insights-modal .ins-verdict2[data-tone="notable"] .ins-verdict-word,
#insights-modal .ins-verdict2[data-tone="high"] .ins-verdict-word { color: var(--fr-off-ink); }
#insights-modal .ins-window-pill {
    display: inline-block;
    margin: 6px 0 2px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 600;
}
body.dark-mode #insights-modal .ins-window-pill { background: #0f2422; color: #5eead4; }
#insights-modal .ins-verdict2 .ins-verdict-lead { margin: 6px 0 0; font-size: 0.86rem; font-weight: 600; line-height: 1.35; }
#insights-modal .ins-people-line { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
#insights-modal .ins-people-line b { font-size: 1rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
#insights-modal .ins-compare { margin: 6px 0 0; font-size: 0.74rem; color: var(--text-secondary); }
#insights-modal .ins-compare[data-dir="more"] { color: var(--fr-off-ink); }
#insights-modal .ins-compare[data-dir="fewer"] { color: var(--fr-good-ink); }
#insights-modal .ins-verdict2 .fr-readout { margin-top: 8px; }
#insights-modal .ins-more-facts { margin-top: 10px; font-size: 0.78rem; }
#insights-modal .ins-more-facts > summary { cursor: pointer; font-weight: 600; color: #0f766e; }
body.dark-mode #insights-modal .ins-more-facts > summary { color: #5eead4; }
#insights-modal .ins-more-facts .ins-verdict-facts { margin-top: 6px; }
#insights-modal .ins-verdict2 > .ins-behind { margin-top: 10px; }

/* The group picker keeps a row only when there are groups to pick between;
   the period tabs that shared it are gone. The source note is small print. */
#insights-modal .ins-scope-row { display: flex; align-items: center; gap: 8px; }
#insights-modal .ins-body > .ins-period-note { margin: 0; font-size: 0.72rem; color: var(--text-secondary); text-align: left; }

/* Who carries it: name, dots, word on one line; the counts under the name. */
#insights-modal .ins-load-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name tier" "dots dots" "counts counts";
    row-gap: 1px;
    column-gap: 10px;
}
#insights-modal .ins-load-row .ins-load-name { grid-area: name; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.2; }
#insights-modal .ins-load-row .ins-load-counts { grid-area: counts; font-size: 10.5px; white-space: normal; }
#insights-modal .ins-load-row { row-gap: 4px; padding-top: 9px; padding-bottom: 9px; }
#insights-modal .ins-load-row .ins-load-dots { grid-area: dots; }
#insights-modal .ins-load-row .ins-load-tier { grid-area: tier; min-width: 0; }
#insights-modal .ins-load-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
#insights-modal .ins-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--fr-band-off); }
#insights-modal .ins-dot[data-band="sleep"] { background: var(--fr-band-sleep); }
#insights-modal .ins-dot-more { font-size: 10px; color: var(--text-secondary); }
#insights-modal .ins-load-n { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
#insights-modal .ins-load-n.is-zero { margin-left: 0; font-weight: 500; color: var(--text-muted, #94a3b8); }

/* History: the trend word as one line over the chart. */
#insights-modal .ins-history .ins-trend { display: block; margin: 0 0 8px; padding: 0; border: 0; }
#insights-modal .ins-history .ins-trend-word { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
#insights-modal .ins-history .ins-trend[data-tone="worse"] .ins-trend-word { color: var(--fr-off-ink); }
#insights-modal .ins-history .ins-trend[data-tone="better"] .ins-trend-word { color: var(--fr-good-ink); }
#insights-modal .ins-history .ins-trend[data-tone="empty"] .ins-trend-word { font-weight: 500; color: var(--text-secondary); }

/* USE THE SPACE BESIDE THE DIAL (owner 2026-10-07, on a phone: "a gap of
   wasted space. Use it"). The colour key moves into the words column, one
   swatch per line, and the note about the numbers runs full width under the
   dial. The dial takes the larger share of the row. */
#fairness-modal .fm-dial-key.fr-dial-key2--side,
#insights-modal .fr-dial-key2.fr-dial-key2--side {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-secondary);
}
#fairness-modal .fm-dial-key.fr-dial-key2--side[hidden] { display: none; }
#fairness-modal .fr-dial-key2--side > span,
#insights-modal .fr-dial-key2--side > span { display: flex; align-items: flex-start; gap: 6px; }
#fairness-modal .fr-dial-key2--side .fr-sw,
#insights-modal .fr-dial-key2--side .fr-sw { margin-top: 2px; }
.fr-dial-note { margin: 6px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--text-secondary); }
.fr-dial-note[hidden] { display: none; }
#insights-modal .ins-verdict.ins-verdict2 { padding-top: 12px; }
#insights-modal .ins-verdict2 .ins-hero,
#fairness-modal #fm-hero.fm-hero2 { align-items: center; }
@media (max-width: 480px) {
    #insights-modal .ins-verdict-word,
    #fairness-modal #fm-hero.fm-hero2 .fm-hero-status { font-size: 1.15rem; }
    #fairness-modal .fm-stat dd { font-size: 1.2rem; }
}

#fairness-modal .fm-hero-notes { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#fairness-modal .fm-hero-notes > * { margin-top: 0 !important; margin-bottom: 0; }
#fairness-modal .fm-hero-notes > .fr-readout { margin-top: 6px !important; }

/* The word lines up with its pill and facts: the legacy phone rule
   (max-width 520px) centred it (owner 2026-10-07: "Even still a little off"). */
#fairness-modal #fm-hero.fm-hero2 .fm-hero-status { justify-content: flex-start; text-align: left; }
#fairness-modal #fm-hero.fm-hero2 .fm-hero-text { justify-self: stretch; text-align: left; }