/* ============================================
   INSIGHTS DASHBOARD (2026-09-02 rebuild, phone-first)
   One column that reads like a short report:
     1. the verdict  (one sentence, the facts, one action)
     2. the picture  (24-cell strip + the team's best window marked above)
     3. who carries it + the trend word
     then the collapsibles (suggestions, proposal outcomes, overrides).
   Idioms carried over unchanged: the 24-cell strip with its hour lane
   (team-summary grammar), the per-person load rows, the collapsibles.
   Colour only via the canonical --fv-l* ramp and --tier-*-fill; the app
   accent is var(--primary-500). Tone words (all/most/few/none/empty) map to
   the tier fills, never to a numeral.
   ============================================ */

/* ---------- MODAL CHROME ---------- */
#insights-modal .modal-content.modal-large {
    max-width: 960px;
    width: 96%;
    max-height: 94vh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 0;
    margin: auto;
}
#insights-modal .modal-header {
    display: none;
}
#insights-modal .modal-body {
    padding: 0;
    overflow-y: auto;
    max-height: 94vh;
}

/* ---------- HEADER ---------- */
.ins-header {
    background: var(--surface-primary, #fff);
    padding: 12px 16px 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
body.dark-mode .ins-header {
    background: var(--surface-elevated, rgba(30, 41, 59, 0.98));
    border-bottom-color: rgba(148, 163, 184, 0.15);
}
.ins-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ins-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ins-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-5cf9c2d80a);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 12%, transparent);
    color: var(--primary-600, #0d9488);
    font-size: 14px;
}
body.dark-mode .ins-brand-icon { color: var(--primary-500, #14b8a6); }
.ins-brand-text { min-width: 0; }
.ins-brand-text h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.ins-brand-sub {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ins-brand-tier {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-full, 9999px);
    background: var(--cmx-7af27f5ce8);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 14%, transparent);
    color: var(--primary-700, #0f766e);
}
body.dark-mode .ins-brand-tier { color: var(--primary-500, #14b8a6); }

/* Fallback for browsers without color-mix() (the owner's iOS 15.8 / Safari
   15.6 among them). A var() leader INSIDE color-mix() is invalid at
   computed-value time there, so the whole declaration is dropped and these
   two chrome pills paint NOTHING — the icon and tier chip lose their tinted
   plate and read as bare glyphs on the header. Plain literal tints, no
   token arithmetic, so they survive. */
@supports not (background: color-mix(in srgb, red 12%, transparent)) {
    .ins-brand-icon { background: rgba(20, 184, 166, 0.12); }
    .ins-brand-tier { background: rgba(20, 184, 166, 0.14); }
    .ins-icon-btn:hover { background: var(--slate-100, #f1f5f9); }
    .ins-icon-btn.close-btn:hover { background: rgba(220, 38, 38, 0.10); }
    body.dark-mode .ins-brand-icon { background: rgba(45, 212, 191, 0.18); }
    body.dark-mode .ins-brand-tier { background: rgba(45, 212, 191, 0.20); }
}
.ins-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ins-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
}
.ins-icon-btn:hover {
    background: var(--cmx-392fb08934);
    background: color-mix(in srgb, var(--primary-500, #14b8a6) 10%, var(--surface-secondary, #f8fafc));
    color: var(--text-primary, #1e293b);
}
.ins-icon-btn.close-btn:hover {
    background: var(--cmx-ba4af42f13);
    background: color-mix(in srgb, var(--overlap-bad, #dc2626) 10%, var(--surface-secondary, #f8fafc));
    color: var(--overlap-bad, #dc2626);
}
body.dark-mode .ins-icon-btn {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary, #94a3b8);
}

/* Period control + scope line. The tab strip scrolls sideways on a phone
   instead of shrinking its targets; the scope line WRAPS (it used to
   ellipsise its most useful half on a 390px screen). */
.ins-period-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.ins-period-tabs {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    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;
}
.ins-period-tabs::-webkit-scrollbar { display: none; }
body.dark-mode .ins-period-tabs {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
}
.ins-period-tab {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.ins-period-tab:hover { color: var(--text-primary, #1e293b); }
.ins-period-tab.active {
    background: var(--primary-500, #14b8a6);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(20, 184, 166, 0.35);
}
.ins-period-tab.locked { opacity: 0.55; cursor: pointer; }
.ins-period-tab.locked i { font-size: 9px; }
.ins-period-tab.no-extra-data { opacity: 0.65; }
.ins-period-note {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}

/* ---------- BODY ---------- */
.ins-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 18px;
    background: var(--surface-secondary, #f8fafc);
}
/* --background was never DEFINED anywhere in the app, so this always painted
   its literal fallback and could never follow the theme. --surface-primary is
   the defined token this file already uses, and its dark value is the same
   #0f172a — so this is the same pixel, now actually token-driven. */
body.dark-mode .ins-body { background: var(--surface-primary, #0f172a); }

.ins-section,
.ins-panel,
.ins-verdict {
    background: var(--surface-primary, #fff);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 14px 16px;
}
body.dark-mode .ins-section,
body.dark-mode .ins-panel,
body.dark-mode .ins-verdict {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.1);
}
.ins-section-head,
.ins-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ins-section-head h3,
.ins-panel-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 7px;
}
.ins-section-head h3 i,
.ins-panel-header h3 i {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.ins-section-sub,
.ins-panel-sub {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

/* ---------- 1. THE VERDICT ---------- */
/* EDGE GEOMETRY (2026-09-23, owner: "the left highlighted box edges don't look
   good"). A CSS border follows the corner radius, so a 4px bar against the
   16px --radius-lg was sliced into a tapering wedge: MEASURED, the painted
   left edge is 2px at the top corner and only reaches its full 4px three rows
   down. The eye reads that as a chewed, broken edge rather than a clean rule.
   10px keeps the card soft while letting a 3px bar run true for nearly its
   whole height — the same "one corner, one shape" ruling as the card state
   slot (0d04fc25). ⚠️If the bar ever thickens again, the radius must come down
   with it, or the wedge returns. */
.ins-verdict {
    border-left: 3px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px 14px 15px;
}
/* Tone = the page's ONE band scale (low/modest/notable/high), the same keys
   the trend pills and person rows use. It was none/few/most/all, where
   "none" meant the WORST case.
   ⚠️The dark-mode twins are needed: `body.dark-mode .ins-verdict` sets
   border-color and outranks a bare attribute selector, so in dark mode the
   edge MEASURED rgba(148,163,184,.1) whatever the verdict said. */
.ins-verdict[data-tone="low"],     body.dark-mode .ins-verdict[data-tone="low"]     { border-left-color: var(--tier-excellent-fill, #059669); }
.ins-verdict[data-tone="modest"],  body.dark-mode .ins-verdict[data-tone="modest"]  { border-left-color: var(--tier-good-fill, #34d399); }
.ins-verdict[data-tone="notable"], body.dark-mode .ins-verdict[data-tone="notable"] { border-left-color: var(--tier-acceptable-fill, #f59e0b); }
.ins-verdict[data-tone="high"],    body.dark-mode .ins-verdict[data-tone="high"]    { border-left-color: var(--tier-poor-fill, #dc2626); }
.ins-verdict-lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    letter-spacing: -0.01em;
}
.ins-verdict[data-tone="empty"] .ins-verdict-lead {
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}
.ins-verdict-facts {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ins-verdict-facts li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
.ins-verdict-facts li i {
    flex-shrink: 0;
    width: 16px;
    margin-top: 3px;
    font-size: 11px;
    text-align: center;
    color: var(--text-secondary, #64748b);
}
.ins-verdict-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;
}
.ins-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--primary-500, #14b8a6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(20, 184, 166, 0.35);
    transition: background 0.15s ease, transform 0.15s ease;
}
.ins-cta:hover { background: var(--primary-600, #0d9488); }
.ins-cta:active { transform: translateY(1px); }
.ins-cta:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #2dd4bf);
    outline-offset: 2px;
}
.ins-cta-note {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}

/* ---------- 2. THE PICTURE ----------
   The 24-cell strip (and its count lane, hour lane, bracket, readout and
   key) was removed 2026-09-23: the dial above draws the same counts over the
   same tints. Its readout is the dial's default readout now. */
.ins-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 10px;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    font-style: italic;
}
.ins-empty i { font-style: normal; opacity: 0.7; }

/* ---------- 3. WHO CARRIES IT ---------- */
.ins-spread-lead {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-secondary, #64748b);
}
.ins-load-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ins-load-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(60px, 120px) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: background 0.15s ease;
}
.ins-load-row:hover,
.ins-load-row:focus-visible { background: var(--surface-secondary, #f8fafc); }
body.dark-mode .ins-load-row:hover,
body.dark-mode .ins-load-row:focus-visible { background: rgba(148, 163, 184, 0.08); }
.ins-load-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ins-load-counts {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ins-load-bar {
    height: 5px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}
.ins-load-fill {
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    transition: width 0.4s ease-out;
}
.ins-load-fill[data-tier="excellent"] { background: var(--tier-excellent-fill); }
.ins-load-fill[data-tier="good"] { background: var(--tier-good-fill); }
.ins-load-fill[data-tier="acceptable"] { background: var(--tier-acceptable-fill); }
.ins-load-fill[data-tier="poor"] { background: var(--tier-poor-fill); }
.ins-load-tier {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    min-width: 74px;
    text-align: right;
}
.ins-load-tier[data-tier="poor"] { color: var(--tier-poor-fg, #b91c1c); }
.ins-load-tier[data-tier="acceptable"] { color: var(--tier-acceptable-fg, #b45309); }
.ins-load-more {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    font-style: italic;
}
.ins-recency {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- 4. THE TREND ---------- */
.ins-trend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
body.dark-mode .ins-trend { border-top-color: rgba(148, 163, 184, 0.15); }
.ins-trend-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ins-trend-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ins-trend-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-color, #cbd5e1);
}
/* Trend tone is a DIRECTION, not a level. */
.ins-trend[data-tone="steady"] .ins-trend-eyebrow::before { background: var(--tier-excellent-fill, #059669); }
.ins-trend[data-tone="better"] .ins-trend-eyebrow::before { background: var(--tier-good-fill, #34d399); }
.ins-trend[data-tone="worse"]  .ins-trend-eyebrow::before { background: var(--tier-acceptable-fill, #f59e0b); }
.ins-trend[data-tone="same"]   .ins-trend-eyebrow::before { background: var(--text-secondary, #64748b); }
.ins-trend-word {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #1e293b);
}
.ins-trend-sketch {
    flex-shrink: 0;
    width: 132px;
}
/* The Suggestions collapsible and its advice cards were removed
   2026-09-23 with the section (see the renderer). */

/* ---------- PROPOSAL OUTCOMES (Business) ---------- */
.ins-proposal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.ins-proposal-stat {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-left-width: 3px;
    border-left-color: var(--primary-500, #14b8a6);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-primary, #fff);
}
body.dark-mode .ins-proposal-stat {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
    border-left-color: var(--primary-500, #14b8a6);
}
.ins-proposal-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
.ins-proposal-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}
.ins-proposal-breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ins-proposal-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.ins-proposal-group-title {
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    min-width: 64px;
}
.ins-proposal-chip {
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
.ins-proposal-note {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The SCHEDULE OVERRIDES rules were removed 2026-09-23 with the section they
   styled (.ins-override-stats / -stat / -table). That section could only ever
   render its empty state — nothing in the app calls recordOverride — so these
   selectors had no element to match. See js/features/insights-dashboard.js. */

/* ---------- FOOTNOTE ---------- */
.ins-footnote {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    text-align: center;
    font-style: italic;
}

/* ---------- RESPONSIVE ----------
   The hour lane and count numerals never thin (summary-strip rule). On a
   phone the header keeps ONE strong action (close) at 44px and folds the
   two utilities down to 36px; the load rows go to two lines so the impact
   word stays visible (an icon+title is unreachable on touch). */
@media (min-width: 640px) {
    .ins-period-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
    .ins-period-tabs { flex-shrink: 0; overflow: visible; }
    .ins-period-note { flex: 1; min-width: 0; text-align: right; }
}
@media (max-width: 600px) {
    #insights-modal .modal-content.modal-large {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    #insights-modal .modal-body { max-height: 100vh; }
    /* A 3-row header is too tall to pin on a phone: it ate 40% of the
       viewport in the owner's screenshot. Let it scroll away. */
    .ins-header { padding: 10px 14px 10px; position: static; }
    .ins-brand-sub { display: none; }
    .ins-icon-btn { width: 36px; height: 36px; font-size: 12px; }
    .ins-icon-btn.close-btn { width: 44px; height: 44px; }
    .ins-body { padding: 12px 12px 16px; gap: 10px; }
    .ins-section, .ins-panel, .ins-verdict { padding: 12px 14px; }
    .ins-verdict-lead { font-size: 16px; }
    .ins-cta { min-height: 44px; width: 100%; justify-content: center; }
    .ins-cta-note { width: 100%; text-align: center; }
    .ins-load-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name counts"
            "bar tier";
        row-gap: 5px;
        padding: 8px 6px;
    }
    .ins-load-name { grid-area: name; }
    .ins-load-counts { grid-area: counts; }
    .ins-load-bar { grid-area: bar; }
    .ins-load-tier { grid-area: tier; min-width: 0; }
    .ins-trend { flex-direction: column; align-items: stretch; }
    .ins-trend-sketch { width: 100%; }
}
@media (pointer: coarse) {
    .ins-icon-btn.close-btn { width: 44px; height: 44px; }
}
@media print {
    .ins-header-actions, .ins-verdict-actions { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ins-period-tab, .ins-icon-btn, .ins-load-row, .ins-load-fill, .ins-cta { transition: none; }
}

/* 2026-09-06 vocabulary + pill pass: a person with no outside-hours meetings
   reads "Even" (the midpoint word for a share) instead of a blank cell. */
.ins-load-tier[data-tier="even"] {
    color: var(--text-secondary, #64748b);
    font-weight: 600;
}

/* 2026-09-23 consistency pass. */
/* The dial's key, always shown (2026-09-26): folded away, the red rim over
   00-05 read as "red across recent days". */
.ins-dial-key { display: flex; flex-direction: column; gap: 6px; }
.ins-dial-key-lead {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}
.ins-dial-key-sample {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-secondary, #64748b);
}
.ins-dial-key-sample i { margin-right: 4px; }

/* Group picker in the period row, and the "All groups" overview rows. */
.ins-scope { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.ins-scope-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}
.ins-scope-select {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    max-width: 220px;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-primary, #fff);
    color: var(--text-primary, #1e293b);
}
.ins-ov-list { display: flex; flex-direction: column; }
.ins-ov-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 12px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 4px;
    border: none;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ins-ov-row:last-child { border-bottom: none; }
.ins-ov-row:hover { background: var(--surface-secondary, #f8fafc); }
.ins-ov-row:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }
.ins-ov-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-ov-counts { font-size: 12px; color: var(--text-secondary, #64748b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-ov-go { font-size: 10px; color: var(--text-secondary, #64748b); }
.ins-ov-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-secondary, #64748b); }
@media (max-width: 480px) {
    .ins-ov-row { grid-template-columns: minmax(0, 1fr) auto 12px; row-gap: 2px; }
    .ins-ov-name { grid-column: 1; grid-row: 1; }
    .ins-ov-counts { grid-column: 1; grid-row: 2; white-space: normal; }
    .ins-ov-row > .ins-load-tier { grid-column: 2; grid-row: 1 / span 2; }
    .ins-ov-go { grid-column: 3; grid-row: 1 / span 2; }
    .ins-scope { width: 100%; margin: 0 0 6px; }
    .ins-scope-select { flex: 1; max-width: none; }
}

/* A repeated meeting in "What's behind this". */
.ins-behind-times {
    margin-left: 4px;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}
.ins-behind-note {
    margin: 6px 0 2px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}
/* "Whose turn next" names are buttons now (they open the balance view). */
button.ins-turn-chip {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
button.ins-turn-chip:hover { border-color: var(--primary-500, #14b8a6); }
button.ins-turn-chip:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #2dd4bf);
    outline-offset: 2px;
}

/* The overview's one sentence: which group needs a look (2026-09-26). */
.ins-ov-lead {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

/* Admin view door in the header (team owners/admins only). */
.ins-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-primary, #fff);
    color: var(--text-primary, #1e293b);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ins-admin-btn:hover { background: var(--surface-secondary, #f8fafc); }
.ins-admin-btn:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }

/* The fix a "behind" row can name, and the trend and scale keys (2026-09-26). */
.ins-behind-fix { color: var(--primary-700, #0f766e); font-weight: 600; }
.ins-trend-key { margin: 6px 0 0; font-size: 11px; color: var(--text-secondary, #64748b); }
.ins-dial-key-scale { flex-basis: 100%; }