/* ==========================================================================
   KPIcons v2 — shared chrome
   Import AFTER kpicons-design.css so these win the cascade where relevant.
   Ships: icon sizing helpers, v2 topbar, persona pill, pulse strip,
          artifact cards, manager overlay banner, starter pills, toasts.
   Design tokens reuse the existing --accent/--accent-2/--accent-3, --green,
   --amber, --red variables that already live in each page's :root.
   ========================================================================== */

/* ---------- Typography utilities ----------
   Geist is loaded per-page; this file adds the numeric treatment. Any element
   with `.v2-num` renders in Geist Mono with tabular + slashed-zero features,
   so KPI values, money, and percentages align cleanly across tables. */
.v2-num, .v2-pulse-chip .v, .v2-team-pulse-num,
.v2-pulse .pulse-ring .num, .v2-pulse-time,
.v2-team-pulse .v2-pulse-time, .v2-team-pulse .v2-pulse-chip .v {
    font-family: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-feature-settings: "tnum","ss01";
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: -0.01em;
}

/* ---------- Icon sizing ---------- */
.i {
    display: inline-flex;
    width: 1em; height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
    vertical-align: -0.15em;
}
/* Bumped 2026-04-19 — icons feel slightly bigger per user feedback.
   Class names are nominal; we kept them so existing HTML keeps working. */
.i-14 { width: 15px; height: 15px; }
.i-16 { width: 18px; height: 18px; }
.i-18 { width: 20px; height: 20px; }
.i-20 { width: 22px; height: 22px; }
.i-24 { width: 26px; height: 26px; }
.i-28 { width: 30px; height: 30px; }

/* ---------- v2 topbar ---------- */
.v2-topbar {
    height: 56px;
    background: var(--bg-sidebar, var(--surface, #0A1628));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    display: flex; align-items: center;
    padding: 0 20px;
    gap: 24px;
    position: sticky; top: 0; z-index: 50;
}
.v2-topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; font-size: 14px; color: var(--text-primary, var(--text, #fff)); }
.v2-topbar .brand .mark {
    width: 28px; height: 28px; border-radius: 7px;
    background: linear-gradient(135deg, var(--accent, #009CDE), var(--accent-2, #FF9933));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900; color: #fff;
    box-shadow: 0 2px 8px rgba(0,156,222,0.25);
}
.v2-topbar .mid { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary, var(--text-2, #94A3B8)); min-width: 0; }
.v2-topbar .right { display: flex; align-items: center; gap: 8px; }

.v2-role-pill {
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0,156,222,0.12); color: var(--accent, #009CDE);
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.v2-role-pill.mgr { background: rgba(255,153,51,0.14); color: var(--accent-2, #FF9933); }
.v2-role-pill.it  { background: rgba(139,92,246,0.14); color: var(--accent-3, #8B5CF6); }

.v2-icon-btn {
    background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text-secondary, var(--text-2, #94A3B8));
    width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.v2-icon-btn:hover { background: var(--bg-hover, var(--surface-2, #131F35)); color: var(--text-primary, var(--text, #fff)); border-color: var(--border-strong, rgba(255,255,255,0.16)); }
.v2-icon-btn.primary { color: var(--accent-2, #FF9933); border-color: rgba(255,153,51,0.4); background: rgba(255,153,51,0.08); }
.v2-icon-btn.primary:hover { background: rgba(255,153,51,0.18); }

.v2-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #009CDE), var(--accent-3, #8B5CF6));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #fff;
    cursor: pointer; flex-shrink: 0;
}

/* ---------- Persona pill ---------- */
.v2-persona {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 6px 5px 5px;
    border-radius: 999px;
    background: var(--bg-card, var(--surface-2, #131F35));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    cursor: pointer;
    font-size: 12px; color: var(--text-primary, var(--text, #fff));
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.v2-persona:hover { border-color: var(--border-strong, rgba(255,255,255,0.16)); background: var(--bg-hover, var(--surface-3, #1a2942)); }
.v2-persona .avi {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #009CDE), var(--accent-3, #8B5CF6));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px; color: #fff;
}
.v2-persona .name { font-weight: 700; }
.v2-persona .style { color: var(--text-secondary, var(--text-2, #94A3B8)); font-weight: 500; font-size: 11px; }
.v2-persona .sep { color: var(--text-tertiary, var(--text-3, #64748B)); }
.v2-persona .play {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,156,222,0.15); color: var(--accent, #009CDE);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
    border: none; cursor: pointer;
}
.v2-persona .play:hover { background: rgba(0,156,222,0.28); transform: scale(1.05); }
.v2-persona.speaking .play { background: var(--accent, #009CDE); color: #fff; animation: v2Speak 0.7s ease-in-out infinite; }
@keyframes v2Speak {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.v2-persona .chev { color: var(--text-tertiary, var(--text-3, #64748B)); margin-left: 2px; }

.v2-persona-menu {
    /* Right-aligned: the persona pill always sits at the header's right
       edge (and inside the companion capsule), so the menu must open
       leftward or it runs off-screen. */
    position: absolute; top: calc(100% + 8px); left: auto; right: 0;
    max-width: calc(100vw - 24px);
    background: var(--bg-card, var(--surface, #0A1628));
    border: 1px solid var(--border-strong, rgba(255,255,255,0.16));
    border-radius: 12px;
    padding: 8px;
    min-width: 280px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    display: none;
    z-index: 1000;
}
.v2-persona-menu.open { display: block; }
.v2-persona-menu .hd {
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-tertiary, var(--text-3, #64748B)); padding: 6px 8px 8px;
}
.v2-persona-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.v2-persona-opt:hover { background: var(--bg-hover, var(--surface-2, #131F35)); }
.v2-persona-opt.active { background: rgba(0,156,222,0.1); border: 1px solid rgba(0,156,222,0.3); padding: 7px; }
.v2-persona-opt .avi-mini {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px; color: #fff; flex-shrink: 0;
}
.v2-persona-opt .info { flex: 1; min-width: 0; }
.v2-persona-opt .info .n { font-size: 13px; font-weight: 700; color: var(--text-primary, var(--text, #fff)); }
.v2-persona-opt .info .s { font-size: 11px; color: var(--text-secondary, var(--text-2, #94A3B8)); line-height: 1.3; }
.v2-persona-opt .preview-btn {
    background: var(--bg-hover, var(--surface-3, #1a2942)); border: 1px solid var(--border, rgba(255,255,255,0.08));
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary, var(--text-2, #94A3B8));
    flex-shrink: 0;
}
.v2-persona-opt .preview-btn:hover { color: var(--accent, #009CDE); border-color: var(--accent, #009CDE); }

/* ---------- Pulse strip (for dashboard pages) ---------- */
.v2-pulse {
    background: var(--bg-card, var(--surface, #0A1628));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    padding: 14px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 18px;
    align-items: center;
}
.v2-pulse-score { display: flex; align-items: center; gap: 12px; }
.v2-pulse-ring { width: 52px; height: 52px; position: relative; }
.v2-pulse-ring svg { transform: rotate(-90deg); }
.v2-pulse-ring .num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: var(--text-primary, var(--text, #fff));
}
.v2-pulse-info .label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary, var(--text-3, #64748B)); }
.v2-pulse-info .title { font-size: 14px; font-weight: 700; margin-top: 2px; color: var(--text-primary, var(--text, #fff)); }
.v2-pulse-info .sub { font-size: 11px; color: var(--text-secondary, var(--text-2, #94A3B8)); margin-top: 1px; }

.v2-pulse-spark {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 120px;
}
.v2-pulse-spark .lab { font-size: 10px; color: var(--text-tertiary, var(--text-3, #64748B)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.v2-pulse-spark .trend { font-size: 11px; font-weight: 700; color: var(--green, #10B981); display: inline-flex; align-items: center; gap: 4px; }
.v2-pulse-spark .trend.down { color: var(--red, #EF4444); }

.v2-pulse-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 9px;
    background: var(--bg-hover, var(--surface-2, #131F35));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    font-size: 12px;
}
.v2-pulse-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.v2-pulse-chip .dot.g { background: var(--green, #10B981); }
.v2-pulse-chip .dot.a { background: var(--amber, #F59E0B); }
.v2-pulse-chip .dot.r { background: var(--red, #EF4444); }
.v2-pulse-chip .k { color: var(--text-secondary, var(--text-2, #94A3B8)); font-weight: 600; }
.v2-pulse-chip .v { color: var(--text-primary, var(--text, #fff)); font-weight: 800; }
.v2-pulse-time {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 9px;
    background: rgba(255,153,51,0.1);
    border: 1px solid rgba(255,153,51,0.3);
    color: var(--accent-2, #FF9933);
    font-size: 12px; font-weight: 700;
}

/* ---------- Artifact card ---------- */
.v2-artifact {
    background: var(--bg-card, var(--surface, #0A1628));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 14px;
    margin-top: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.v2-artifact:hover { border-color: var(--border-strong, rgba(255,255,255,0.16)); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.v2-artifact.featured { border-color: rgba(0,156,222,0.3); box-shadow: 0 10px 40px rgba(0,156,222,0.08); }
.v2-artifact-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    background: var(--bg-hover, var(--surface-2, #131F35));
    gap: 12px; flex-wrap: wrap;
}
.v2-artifact-head-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.v2-artifact-kind {
    font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px;
    background: rgba(0,156,222,0.12); color: var(--accent, #009CDE);
    flex-shrink: 0;
}
.v2-artifact-kind.attribution { background: rgba(16,185,129,0.12); color: var(--green, #10B981); }
.v2-artifact-kind.roleplay    { background: rgba(139,92,246,0.12); color: var(--accent-3, #8B5CF6); }
.v2-artifact-kind.nudge       { background: rgba(255,153,51,0.12); color: var(--accent-2, #FF9933); }
.v2-artifact-kind.secondary   { background: var(--surface-3, #1a2942); color: var(--text-secondary, var(--text-2, #94A3B8)); }
.v2-artifact-title {
    font-size: 13px; font-weight: 700; color: var(--text-primary, var(--text, #fff));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.v2-artifact-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-artifact-actions button {
    background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text-secondary, var(--text-2, #94A3B8));
    font-size: 11px; font-weight: 600;
    padding: 5px 10px; border-radius: 7px; cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit;
}
.v2-artifact-actions button:hover { background: var(--bg-hover, var(--surface-3, #1a2942)); color: var(--text-primary, var(--text, #fff)); }
.v2-artifact-actions button.mgr-only { display: none; background: rgba(255,153,51,0.1); color: var(--accent-2, #FF9933); border-color: rgba(255,153,51,0.3); }
body.mgr-mode .v2-artifact-actions button.mgr-only { display: inline-flex; }
.v2-artifact-body { padding: 16px; }

/* ---------- Manager overlay banner ---------- */
.v2-mgrbar {
    display: none;
    align-items: center; justify-content: space-between;
    padding: 10px 28px;
    background: rgba(255,153,51,0.08);
    border-bottom: 1px solid rgba(255,153,51,0.25);
    font-size: 12.5px;
    color: var(--text-primary, var(--text, #fff));
    position: sticky; top: 56px; z-index: 40;
}
body.mgr-mode .v2-mgrbar { display: flex; }
.v2-mgrbar .left { display: flex; align-items: center; gap: 10px; }
.v2-mgrbar .badge {
    padding: 3px 8px; border-radius: 5px;
    background: rgba(255,153,51,0.2); color: var(--accent-2, #FF9933);
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.v2-mgrbar .right { display: flex; gap: 8px; }
.v2-mgrbar .btn {
    background: var(--accent-2, #FF9933); color: #000;
    border: none; padding: 6px 12px; border-radius: 7px;
    font-weight: 700; font-size: 12px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: filter 0.15s;
    font-family: inherit;
}
.v2-mgrbar .btn:hover { filter: brightness(1.08); }
.v2-mgrbar .btn.ghost { background: transparent; color: var(--accent-2, #FF9933); border: 1px solid rgba(255,153,51,0.4); }

/* Coaching notes from the manager — ALWAYS visible to the rep so they see
   what Victoria said without needing to enter Manager View. */
.v2-mgr-note {
    display: block;
    margin: 0 16px 12px;
    padding: 10px 12px;
    background: rgba(255,153,51,0.08);
    border: 1px solid rgba(255,153,51,0.25);
    border-left: 3px solid var(--accent-2, #FF9933);
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--text-primary, var(--text, #fff));
}
.v2-mgr-notes-host { display: contents; }
.v2-mgr-notes-host:empty { display: none; }
/* The per-note delete button is mgr-only — reps can't remove Victoria's notes. */
.v2-mgr-note-del { display: none !important; }
body.mgr-mode .v2-mgr-note-del { display: inline-flex !important; }

/* Compact composer — used ONLY inside the annotate popover. */
.v2-mgr-note-compose {
    display: flex;
    align-items: center; gap: 8px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(255,153,51,0.35);
    border-radius: 9px;
    background: rgba(255,153,51,0.06);
}
.v2-mgr-note-compose input {
    flex: 1;
    background: transparent; border: none; outline: none;
    color: var(--text-primary, var(--text, #fff));
    font-size: 12.5px; font-family: inherit;
    min-width: 0;
}
.v2-mgr-note-compose input::placeholder { color: var(--text-tertiary, var(--text-3, #64748B)); }
.v2-mgr-note-compose button {
    background: var(--accent-2, #FF9933); color: #000;
    border: none; border-radius: 6px;
    padding: 6px 11px; font-weight: 700; font-size: 11px;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
}
.v2-mgr-note-compose button:hover { filter: brightness(1.05); }

/* Floating "annotate" pencil button — top-right of each annotatable element,
   visible only in manager mode so the rep UI stays clean. */
.v2-annotate-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(255,153,51,0.14);
    border: 1px solid rgba(255,153,51,0.35);
    color: var(--accent-2, #FF9933);
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
    font-family: inherit;
}
.v2-annotate-btn:hover {
    background: rgba(255,153,51,0.25);
    border-color: rgba(255,153,51,0.55);
    transform: translateY(-1px);
}
body.mgr-mode .v2-annotate-btn { display: inline-flex; }

/* Inline variant — for when the pencil is placed in a declarative
   `.v2-note-btn-slot` next to a rep's name (or other inline anchor).
   Sized small so it sits beside a 14px name without wrapping. */
.v2-annotate-btn--inline {
    position: static;
    top: auto; right: auto;
    width: 18px; height: 18px;
    border-radius: 5px;
    vertical-align: -4px;
}
.v2-annotate-btn--inline .i { width: 11px; height: 11px; }
.v2-note-btn-slot {
    display: inline-flex; align-items: center;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}
body:not(.mgr-mode) .v2-note-btn-slot { display: none; }

/* Popover anchored to the pencil button */
.v2-annotate-popover {
    position: fixed;
    top: 0; left: 0;
    background: var(--bg-card, var(--surface, #0A1628));
    border: 1px solid rgba(255,153,51,0.4);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.45);
    z-index: 9500;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
}
.v2-annotate-popover.open { opacity: 1; transform: translateY(0); }
.v2-annotate-popover-hd {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary, var(--text-2, #94A3B8));
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.v2-annotate-popover-hd span { flex: 1; }
.v2-annotate-popover-hd .v2-annotate-close {
    background: transparent; border: none; padding: 2px;
    cursor: pointer; color: var(--text-tertiary, var(--text-3, #64748B));
    display: inline-flex; align-items: center;
}
.v2-annotate-popover-hd .v2-annotate-close:hover { color: var(--text-primary, var(--text, #fff)); }
.v2-annotate-popover-notes { max-height: 240px; overflow-y: auto; }
.v2-annotate-popover-notes:empty { display: none; }
.v2-annotate-popover-notes::-webkit-scrollbar { width: 4px; }
.v2-annotate-popover-notes::-webkit-scrollbar-thumb { background: var(--border, rgba(255,255,255,0.08)); border-radius: 2px; }
/* Inside the popover, the note strips are compact with no outer margin. */
.v2-annotate-popover-notes .v2-mgr-note { margin: 0 0 6px; padding: 8px 10px; font-size: 12px; }

/* Floating coaching-notes summary badge shown to reps so they don't miss a note. */
.v2-notes-badge {
    position: fixed;
    right: 20px; bottom: 20px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 999px;
    background: linear-gradient(135deg, #FF9933, #EC4899);
    color: #fff; font-size: 12.5px; font-weight: 700;
    box-shadow: 0 10px 30px rgba(255,153,51,0.35);
    cursor: pointer; border: none; font-family: inherit;
    z-index: 900;
    animation: v2BadgeIn 0.4s cubic-bezier(.4,0,.2,1);
}
.v2-notes-badge:hover { filter: brightness(1.08); transform: translateY(-1px); }
@keyframes v2BadgeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.v2-notes-badge .count {
    background: rgba(0,0,0,0.25);
    padding: 2px 7px; border-radius: 999px;
    font-weight: 800; font-size: 11px;
}

/* Pulse animation applied to a note host when you scroll to it from the badge. */
@keyframes v2NoteHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(255,153,51,0.6); }
    50%  { box-shadow: 0 0 0 10px rgba(255,153,51,0.0); }
    100% { box-shadow: 0 0 0 0 rgba(255,153,51,0); }
}
.v2-mgr-note.v2-highlight { animation: v2NoteHighlight 1.2s ease-out; }
.v2-mgr-note .who {
    font-size: 10px; font-weight: 800; color: var(--accent-2, #FF9933);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 3px;
    display: inline-flex; align-items: center; gap: 5px;
}

/* ---------- Starter pills ---------- */
.v2-starters {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.v2-starter {
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--bg-card, var(--surface, #0A1628));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text-secondary, var(--text-2, #94A3B8));
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit;
}
.v2-starter:hover { background: var(--bg-hover, var(--surface-2, #131F35)); border-color: var(--accent, #009CDE); color: var(--text-primary, var(--text, #fff)); }
.v2-starter .i { color: var(--accent, #009CDE); }
.v2-starter.urgent .i { color: var(--amber, #F59E0B); }

/* ---------- Team pulse strip (manager pages) ---------- */
.v2-team-pulse {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 28px;
    background: var(--bg-card, var(--surface, #0A1628));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
@media (max-width: 1200px) {
    .v2-team-pulse { grid-template-columns: auto 1fr auto auto; }
    .v2-team-pulse > .v2-pulse-chip:nth-of-type(3), .v2-team-pulse > .v2-pulse-chip:nth-of-type(4) { display: none; }
}
.v2-team-pulse-ring { width: 48px; height: 48px; position: relative; flex-shrink: 0; }
.v2-team-pulse-ring svg { transform: rotate(-90deg); }
.v2-team-pulse-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    color: var(--text-primary, var(--text, #fff));
}
.v2-team-pulse-info .lab { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary, var(--text-3, #64748B)); }
.v2-team-pulse-info .ttl { font-size: 14px; font-weight: 700; margin-top: 2px; color: var(--text-primary, var(--text, #fff)); }
.v2-team-pulse-info .sub { font-size: 11px; color: var(--text-secondary, var(--text-2, #94A3B8)); margin-top: 1px; }

/* ---------- Persona gradient on active nav links ----------
   Draws a 3px gradient strip on the left edge of the active sidebar entry
   using the same --v2-persona-grad driving the topbar stripe. Subtle brand
   continuity: the whole surface reflects the active coach's palette. */
.sidebar .nav-link.active,
.sidebar .nav a.active,
.rail-foot a.active {
    position: relative;
}
.sidebar .nav-link.active::before,
.sidebar .nav a.active::before,
.rail-foot a.active::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--v2-persona-grad, linear-gradient(135deg, #009CDE, #FF9933));
}

/* ---------- Persona accent stripe ----------
   Renders a thin gradient bar at the top of .header / .v2-topbar reflecting
   the active persona's color palette. Hooked up by kpicons-persona.js via
   --v2-persona-grad CSS variable on <html>. */
.header, .v2-topbar {
    position: relative;
}
.header::before, .v2-topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--v2-persona-grad, linear-gradient(135deg, #009CDE, #FF9933));
    z-index: 60;
    pointer-events: none;
    opacity: 0.85;
}

/* ---------- Toast ---------- */
.v2-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: #0A1628;
    border: 1px solid rgba(255,153,51,0.4);
    color: #FF9933;
    padding: 10px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 700;
    z-index: 9999;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    display: inline-flex; align-items: center; gap: 8px;
    opacity: 0; transition: opacity 0.25s;
}
.v2-toast.show { opacity: 1; }

/* ---------- Upgrade legacy .bot-panel avatars on pages that adopt v2 ---------- */
body.v2 .bot-avatar,
body.v2 .coach-avatar {
    background: linear-gradient(135deg, var(--accent, #009CDE), var(--accent-3, #8B5CF6)) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

/* ============================================================
   Accessibility quick pass (pre-seed polish)
   ------------------------------------------------------------
   1. Visible keyboard focus everywhere — enterprise buyers test
      this in the first five minutes.
   2. Tertiary text lifted for contrast on the dark canvas
      (#64748B on #060E1A was ~4.1:1; #7E8EA6 clears 5:1).
      Loaded after per-page :root blocks on cockpits, so this
      override wins the cascade where it applies.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #009CDE) !important;
    outline-offset: 2px;
}
html:root { --text-tertiary: #7E8EA6; }
html:root[data-theme="light"] { --text-tertiary: #5B6B84; }

/* ============================================================
   Skeleton shimmer — replaces "Loading…" text flashes while the
   seeded data lands. Renderers set textContent, which replaces
   the skeleton span automatically.
   ============================================================ */
.v2-skeleton {
    display: inline-block;
    min-height: 1em;
    border-radius: 6px;
    color: transparent !important;
    background: linear-gradient(90deg, rgba(148,163,184,0.10) 25%, rgba(148,163,184,0.24) 50%, rgba(148,163,184,0.10) 75%);
    background-size: 200% 100%;
    animation: v2-shimmer 1.2s ease-in-out infinite;
    user-select: none;
}
@keyframes v2-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   Typographic discipline pass (pre-seed polish)
   ============================================================ */

/* 1 · One heading scale — every cockpit page title is 24/800.
   (Hero titles like .ch-title are contextual and keep their own
   scale; this normalizes the page-chrome H1s that ranged 22–30.) */
.header-title h1,
.page-header h1,
.ph-h1 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* 2 · Tabular numerals on every big stat — Geist Mono, so columns
   align and dashboards read financial-grade. Component big-number
   slots are enrolled here; ad-hoc numbers use .v2-num directly. */
.stat-card .value,
.bonus-card .bc-amount,
.kq-badge .pct,
#mdHeroScore {
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace !important;
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: 'tnum' 1, 'zero' 1;
    letter-spacing: -0.01em;
}

/* 3 · Section kicker — the hero's 11px-uppercase + accent-bar rhythm,
   reusable on below-fold section titles so scrolling feels chaptered. */
.v2-kicker {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent, #009CDE) !important;
}
.v2-kicker::before {
    content: '';
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent-orange, #FF9933);
    flex: 0 0 auto;
}
.v2-kicker .i, .v2-kicker svg { width: 14px !important; height: 14px !important; }

/* ============================================================
   Rail bottom-cluster discipline (pre-seed polish)
   ------------------------------------------------------------
   1. The theme toggle is a once-a-month preference — it must not
      outrank Profile/Settings. Demoted from a filled band to a
      quiet row matching the nav-link rhythm.
   2. The inner divider doubled up with .nav-bottom's border-top;
      one separator is enough.
   3. Log Out hints "this one's different" on hover only.
   ============================================================ */
.sidebar .theme-toggle {
    background: transparent !important;
    padding: 12px 16px !important;
    margin-bottom: 2px !important;
    border-radius: 6px;
}
.sidebar .theme-toggle:hover { background: var(--bg-hover, rgba(255,255,255,0.05)) !important; }
.sidebar .theme-toggle .toggle-label { font-size: 14px !important; color: var(--text-secondary, #94A3B8) !important; }
.sidebar .toggle-switch { width: 32px !important; height: 18px !important; flex: 0 0 auto; }
.sidebar .toggle-switch::after { width: 14px !important; height: 14px !important; top: 2px !important; left: 2px !important; }
.sidebar .toggle-switch.active::after { left: 16px !important; }
.sidebar .nav-bottom .nav-divider { display: none !important; }

.sidebar #logoutBtn:hover,
.sidebar #sidebarLogout:hover {
    color: #F87171 !important;
    background: rgba(239, 68, 68, 0.10) !important;
}