/**
 * JPSA Events Hub V2 - Styles
 * Radical Redesign: Calendar-centric, Communications-focused
 * Visual Identity: Field Guide / Warm Olive & Sage
 *
 * Builds on top of design-system.css (shared with v1)
 * Only contains NEW styles for the v2 layout
 */

/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE COLOR SYSTEM — Overrides design-system.css
   Ink palette: warm olives + sage/terra/sand semantic colors
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Ink (Neutral) ── Full 13-stop scale ─────────── */
    --ink-50:  #ffffff;
    --ink-100: #f4f6f8;
    --ink-150: #e5e7eb;
    --ink-200: #dde1e5;
    --ink-250: #cdd3d6;
    --ink-300: #b8c0c4;
    --ink-400: #9aa9b0;
    --ink-500: #6b8693;
    --ink-600: #4a6b75;
    --ink-700: #2c5460;
    --ink-800: #143a44;
    --ink-900: #063b49;
    --ink-950: #06222b;

    /* ── Teal (Primary / Success) ── Full 11-stop scale  */
    --teal-50:  #e8f2f5;
    --teal-100: #c5e3ec;
    --teal-200: #8fcdda;
    --teal-300: #4daec2;
    --teal-400: #375DFE;
    --teal-500: #2741C0;
    --teal-600: #1A2240;
    --teal-700: #044a5e;
    --teal-800: #063b49;
    --teal-900: #06222b;
    --teal-950: #04161c;

    /* ── Rust (Error / Critical) ── Full 10-stop scale ── */
    --rust-50:  #fef5f1;
    --rust-100: #fde8de;
    --rust-200: #f5c4b4;
    --rust-300: #e09580;
    --rust-400: #c1614a;
    --rust-500: #a34a38;
    --rust-600: #8a3d2e;
    --rust-700: #6e3024;
    --rust-800: #54241b;
    --rust-900: #3a1812;

    /* ── Gold (Warning) ── Full 10-stop scale ──────────── */
    --gold-50:  #fdf8ee;
    --gold-100: #f3eddf;
    --gold-200: #e4d9c0;
    --gold-300: #d4c49a;
    --gold-400: #c4a76c;
    --gold-500: #9a8450;
    --gold-600: #7a6a3e;
    --gold-700: #5c4f2e;
    --gold-800: #3e3520;
    --gold-900: #201c12;

    /* ── Blue (Info / Accent) ── Full 10-stop scale ───── */
    --blue-50:  #eef6f8;
    --blue-100: #e8f2f5;
    --blue-200: #c5e3ec;
    --blue-300: #8fcdda;
    --blue-400: #4daec2;
    --blue-500: #375DFE;
    --blue-600: #1A2240;
    --blue-700: #044a5e;
    --blue-800: #063b49;
    --blue-900: #06222b;

    /* ── Purple (Accent) ── Full 10-stop scale ─────────── */
    --purple-50:  #f5f0fc;
    --purple-100: #e8dcf6;
    --purple-200: #cdb8e6;
    --purple-300: #ae8fd4;
    --purple-400: #7a5ab0;
    --purple-500: #5a3a8a;
    --purple-600: #4a3073;
    --purple-700: #3a265c;
    --purple-800: #2b1c45;
    --purple-900: #1c122e;

    /* ── Backward-compatible aliases ──────────────────── */
    --ink:    #143a44;
    --ink-80: #2c5460;
    --ink-60: #4a6b75;
    --ink-40: #6b8693;
    --ink-20: #b8c0c4;
    --ink-10: #e5e7eb;
    --ink-05: #f4f6f8;
    --paper:  #ffffff;
    --white:  #ffffff;
    --rust:       #c1614a;
    --rust-light: #e09580;
    --rust-bg:    #f8e8e4;
    --teal:       #375DFE;
    --teal-light: #4daec2;
    --teal-bg:    #e8f2f5;
    --gold:       #c4a76c;
    --gold-light: #d4c49a;
    --gold-bg:    #f3eddf;
    --literary-blue:       var(--blue-500);
    --literary-blue-light: var(--blue-400);
    --literary-blue-bg:    var(--blue-50);

    /* ── Semantic aliases ─────────────────────────────── */
    --color-primary:         var(--teal-500);
    --color-primary-hover:   var(--teal-600);
    --color-primary-active:  var(--teal-700);
    --color-primary-bg:      var(--teal-50);
    --color-error:           var(--rust-500);
    --color-error-hover:     var(--rust-600);
    --color-error-bg:        var(--rust-50);
    --color-warning:         var(--gold-500);
    --color-warning-hover:   var(--gold-600);
    --color-warning-bg:      var(--gold-50);
    --color-success:         var(--teal-500);
    --color-success-bg:      var(--teal-50);
    --color-info:            var(--blue-500);
    --color-info-bg:         var(--blue-50);

    /* ── Backgrounds ──────────────────────────────────── */
    --bg-page:     #ffffff;
    --bg-sunken:   var(--ink-100);
    --bg-card:     #ffffff;
    --bg-elevated: #ffffff;
    --bg-header:   var(--ink-900);
    --bg-overlay:  rgba(20, 28, 21, 0.60);

    /* ── Text ─────────────────────────────────────────── */
    --text-primary:       var(--ink-900);
    --text-secondary:     var(--ink-500);
    --text-tertiary:      var(--ink-400);
    --text-disabled:      var(--ink-300);
    --text-inverse:       #ffffff;
    --text-inverse-muted: rgba(250, 250, 250, 0.4);

    /* ── Borders ──────────────────────────────────────── */
    --border-subtle:      var(--ink-200);
    --border-default:     var(--ink-250);
    --border-strong:      var(--ink-300);
    --border-inverse:     rgba(250, 250, 250, 0.06);
    --border-interactive: var(--teal-500);
    --border-error:       var(--rust-500);
    --border-warning:     var(--gold-500);

    /* ── Fonts ────────────────────────────────────────── */
    --font-display: 'Bitter', serif;
    --font-body: 'brother-1816', 'Karla', sans-serif;
    --font-mono: 'brother-1816', 'Karla', sans-serif;
    --font-serif: 'Bitter', serif;

    /* ── Type Scale (extends design-system.css) ──────── */
    --text-label:      9px;      /* Mono: table headers, tier badges, calendar headers */
    --text-mono-label: 10px;     /* Mono: toggles, FAB, section counts, signout */
    --text-caption:    12px;     /* Report descriptions, hints */
    --text-subhead:    15px;     /* Report section headers, modal H3 */
    --text-stat:       36px;     /* Dashboard stat numbers */

    /* ── Letter Spacing ──────────────────────────────── */
    --tracking-tight:   -0.3px;  /* Display serif titles (24px+) */
    --tracking-normal:  0;       /* Body text, default */
    --tracking-wide:    0.03em;  /* Small status badges */
    --tracking-wider:   1px;     /* Mono badges, tier labels */
    --tracking-widest:  1.5px;   /* Mono section labels (uppercase) */
    --tracking-ultra:   2px;     /* Mono date headers, calendar headers */

    /* ── Line Heights ────────────────────────────────── */
    --leading-none:     1.0;     /* Stat numbers, single-line display */
    --leading-tighter:  1.2;     /* Display titles */
    --leading-tight:    1.25;    /* H1-H2 headings */
    --leading-snug:     1.35;    /* H3, labels, micro text */
    --leading-normal:   1.45;    /* Small text, metadata */
    --leading-relaxed:  1.6;     /* Body text (14-16px) */
    --leading-loose:    1.75;    /* Long-form reading */

    /* ── Override design-system warm palette ───────────── */
    --warm-50:  var(--paper);
    --warm-100: var(--ink-100);
    --warm-200: var(--ink-200);
    --warm-300: var(--ink-300);
    --warm-400: var(--ink-400);
    --warm-500: var(--ink-500);
    --warm-600: var(--ink-700);
    --warm-700: var(--ink-700);
    --warm-800: var(--ink-900);
    --warm-900: var(--ink-900);

    /* ── Override brand colors ─────────────────────────── */
    --brand-blue:       var(--blue-500);
    --brand-blue-light: var(--blue-50);
    --brand-blue-dark:  var(--blue-700);

    /* ── Override semantic colors ──────────────────────── */
    --success:       var(--teal-500);
    --success-light: var(--teal-50);
    --success-dark:  var(--teal-700);
    --warning:       var(--gold-500);
    --warning-light: var(--gold-50);
    --warning-dark:  var(--gold-700);
    --error:         var(--rust-500);
    --error-light:   var(--rust-50);
    --error-dark:    var(--rust-700);
    --info:          var(--purple-500);
    --info-light:    var(--purple-50);

    /* ── Shadows ──────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(17, 19, 24, 0.04);
    --shadow-sm: 0 2px 4px rgba(17, 19, 24, 0.05);
    --shadow-md: 0 4px 8px rgba(17, 19, 24, 0.06);
    --shadow-lg: 0 8px 16px rgba(17, 19, 24, 0.08);
    --shadow-xl: 0 16px 32px rgba(17, 19, 24, 0.10);
    --shadow-card: 0 1px 3px rgba(17, 19, 24, 0.04);

    /* ── Border radius ────────────────────────────────── */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 3px;
    --radius-lg: 3px;
    --radius-xl: 4px;
    --radius-full: 9999px;

    /* ── Channel color system (T4, 2026-06-10) ──────────────────────
       SINGLE source of truth for channel colors. Palette locked by the
       2026-06-09 design review (Guy: keep in-app colors, kill purple):
       Email brown / Text graphite / Snail Mail green / Social navy —
       the four distinct hues that already lived in the codebase, none
       colliding with chrome teal #375DFE, today gold #c4a76c, or
       marquee coral #c1614a. Every channel surface (.comm-channel-icon,
       .v2-legend-chip, .v2-side-panel-channel-badge, .v2-cal-comm-dot,
       admin review panel) reads ONLY these. JS: deploy/v2/js/channels.js */
    /* Soft "museum" channel palette — design review 2026-06-11. Muted, feminine,
       artistic; committed solid color (white text rides on it on the calendar).
       Replaces the earlier pale/earthy set Guy rejected as "pale and sad". */
    --ch-email:          #9E2B50;   /* deeper raspberry */
    --ch-email-bg:       #f6e7ec;
    --ch-email-border:   rgba(177, 85, 111, 0.30);
    --ch-text:           #375DFE;   /* amber (distinct from gold "today") */
    --ch-text-bg:        #e9edff;
    --ch-text-border:    rgba(179, 130, 42, 0.30);
    --ch-snail-mail:     #6E1E3A;   /* soft sage */
    --ch-snail-mail-bg:  #f3e9ee;
    --ch-snail-mail-border: rgba(111, 160, 136, 0.30);
    --ch-social-media:   #6E86CE;   /* dusty cornflower */
    --ch-social-media-bg: #eef1fb;
    --ch-social-media-border: rgba(113, 145, 192, 0.30);
    --ch-ajp:            var(--gold-600);
    --ch-ajp-bg:         var(--gold-bg);
    --ch-leadership:     var(--gold-600);   /* was purple-500 — purple is banned */
    --ch-leadership-bg:  var(--gold-bg);
    --ch-community:      var(--teal-400);
    --ch-community-bg:   var(--teal-bg);
    --ch-other:          var(--ink-40);
    --ch-other-bg:       var(--ink-05);

    /* Deep counter-tones for hard-offset (zero-blur) depth on Comms calendar
       item-tags — design review 2026-06-11 (FEISHU "Structural Systems"). */
    --ch-email-deep:        #7d2340;
    --ch-text-deep:         #2741C0;
    --ch-snail-mail-deep:   #56172e;
    --ch-social-media-deep: #47588f;

    /* DEPRECATED aliases — the old (never-referenced) channel token block,
       re-pointed at the system above so any future use stays canonical. */
    --channel-email:  var(--ch-email);
    --channel-social: var(--ch-social-media);
    --channel-print-mail: var(--ch-snail-mail);
    --channel-sms:    var(--ch-text);
    --channel-print:  var(--ch-snail-mail);
    --channel-ajp:    var(--ch-ajp);
    --channel-media-coverage: var(--ch-other);
    --channel-leadership-newsletter: var(--ch-leadership);
    --channel-community-cal: var(--ch-community);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL
   ═══════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.v2-header {
    background: #143a44;
    color: var(--paper);
    position: relative;
    z-index: var(--z-nav);
    padding: 0;
    border-bottom: none;
    overflow: hidden;
}

/* Topographic wave pattern */
.v2-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 Q50 60 100 100 Q150 140 200 100 Q250 60 300 100 Q350 140 400 100' fill='none' stroke='%23faf8f3' stroke-width='1'/%3E%3Cpath d='M0 120 Q50 80 100 120 Q150 160 200 120 Q250 80 300 120 Q350 160 400 120' fill='none' stroke='%23faf8f3' stroke-width='1'/%3E%3Cpath d='M0 80 Q50 40 100 80 Q150 120 200 80 Q250 40 300 80 Q350 120 400 80' fill='none' stroke='%23faf8f3' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 400px 200px;
    pointer-events: none;
}

.v2-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.v2-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Official JPSA logo — white knockout sitting directly on the teal bar */
.v2-header-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.v2-header-logo img {
    height: 52px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.v2-header-divider {
    width: 1px;
    height: 46px;
    background: rgba(255,255,255,0.30);
    flex: 0 0 auto;
}

.v2-header-title {
    font-family: 'brother-1816', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
    text-transform: none;
    position: relative;
    line-height: 1.05;
}

.v2-header-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #b6c4ca;
    margin-top: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v2-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    margin-left: 10px;
}

.v2-header-icon-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.62);
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast);
    display: flex;
    align-items: center;
}
.v2-header-icon-btn:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
}

.v2-signout-btn {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.32);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.v2-signout-btn:hover {
    color: #052f3a;
    background: #ffffff;
    border-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW TOGGLE (My Events / All Events)
   ═══════════════════════════════════════════════════════════════ */

.v2-view-toggle {
    display: flex;
    gap: 8px;
    padding: 1px;
}

.v2-toggle-btn {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #9aa9b0;
    background: transparent;
    border: 1.5px solid #4a6b75;
    border-radius: 20px;
    padding: 7px 18px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.v2-toggle-btn:hover {
    color: #ffffff;
    border-color: #375DFE;
}

.v2-toggle-btn.active {
    background: #375DFE;
    border-color: #375DFE;
    color: #ffffff;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR
   ═══════════════════════════════════════════════════════════════ */

.v2-tab-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--ink-150);
    position: sticky;
    top: 0;
    z-index: calc(var(--z-nav) - 1);
    padding: 12px 0;
}

.v2-tab-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    gap: 8px;
}

/* Tabs read as a filled segmented control — every tab looks clickable,
   the active one is an unmistakable teal button. */
.v2-tab {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #1f4651;
    background: #eef3f4;
    border: 1.5px solid #dde6e8;
    border-radius: 22px;
    padding: 9px 24px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.v2-tab:hover {
    background: #d8e7eb;
    border-color: var(--teal-300);
    color: #063b49;
}

.v2-tab:focus-visible {
    outline: 3px solid var(--teal-300);
    outline-offset: 2px;
    border-radius: 22px;
}

.v2-tab.active {
    color: #ffffff;
    background: #375DFE;
    border-color: #375DFE;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0,119,156,0.38);
}

.v2-tab.active:hover {
    background: #2741C0;
    border-color: #2741C0;
    color: #ffffff;
}

/* Tab badge for counts (e.g., Attention count) */
.v2-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    font-size: var(--text-micro);
    font-weight: var(--font-bold);
    color: white;
    background: #c1614a;
    border-radius: var(--radius-full);
    padding: 0 var(--space-1);
    margin-left: var(--space-1);
}

.v2-tab-badge.empty {
    display: none;
}


/* Diamond ornament horizontal rule */
.v2-ornament-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: #b8c0c4;
}
.v2-ornament-rule::before,
.v2-ornament-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d9d4c8;
}
.v2-ornament-rule .diamond {
    width: 6px;
    height: 6px;
    background: #c4a76c;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════ */

.v2-main {
    flex: 1;
    padding: var(--space-6) 0;
    background: #ffffff;
}

.v2-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Tab panels */
.v2-tab-panel {
    display: none;
}

.v2-tab-panel.active {
    display: block;
}

/* Loading state */
.v2-panel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) 0;
}

.v2-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #375DFE;
    border-radius: 50%;
    animation: v2-spin 0.8s linear infinite;
}

@keyframes v2-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION CONTAINERS
   ═══════════════════════════════════════════════════════════════ */

.v2-section {
    margin-bottom: 48px;
}

.v2-section-header {
    padding: 0 0 var(--space-3) 0;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.v2-section-title {
    font-family: 'Bitter', serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: none;
    padding-bottom: 0;
    line-height: 1.2;
}

.v2-section-count {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #6b8693;
}

.v2-section-body {
    padding: 0;
}

.v2-section-body.no-pad {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   COMM CARD
   ═══════════════════════════════════════════════════════════════ */

.comm-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--literary-blue);
    border-radius: 8px;
    background: white;
    transition: box-shadow var(--transition-fast);
    cursor: pointer;
}

.comm-card:hover {
    box-shadow: var(--shadow-sm);
}

.comm-channel-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

/* Channel colors — one system (--ch-*), canonical classes first, raw-value
   legacy classes kept as aliases so any stray un-normalized class still
   renders canonically (T4, 2026-06-10) */
.comm-channel-icon.channel-email              { background: var(--ch-email-bg); color: var(--ch-email); }
.comm-channel-icon.channel-text,
.comm-channel-icon.channel-sms,
.comm-channel-icon.channel-text-sms           { background: var(--ch-text-bg); color: var(--ch-text); }
.comm-channel-icon.channel-snail-mail,
.comm-channel-icon.channel-print,
.comm-channel-icon.channel-print-mail,
.comm-channel-icon.channel-direct-mail        { background: var(--ch-snail-mail-bg); color: var(--ch-snail-mail); }
.comm-channel-icon.channel-social-media,
.comm-channel-icon.channel-social             { background: var(--ch-social-media-bg); color: var(--ch-social-media); }
.comm-channel-icon.channel-ajp                { background: var(--ch-ajp-bg); color: var(--ch-ajp); }
.comm-channel-icon.channel-leadership-newsletter { background: var(--ch-leadership-bg); color: var(--ch-leadership); }
.comm-channel-icon.channel-community-cal-email { background: var(--ch-community-bg); color: var(--ch-community); }
.comm-channel-icon.channel-media-coverage,
.comm-channel-icon.channel-other    { background: var(--ch-other-bg); color: var(--ch-other); }

.comm-card-content {
    flex: 1;
    min-width: 0;
}

.comm-card-title {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--line-height-tight);
}

.comm-card-meta {
    font-size: var(--text-small);
    color: var(--ink-60);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.comm-card-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Status badges */
.comm-status {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.comm-status-planned     { background: var(--literary-blue-bg); color: var(--literary-blue); }
.comm-status-inprogress  { background: var(--gold-bg); color: var(--gold); }
.comm-status-needsreview { background: var(--rust-bg); color: var(--rust); }
.comm-status-onhold      { background: var(--ink-05); color: var(--ink-60); }
.comm-status-sent        { background: var(--teal-bg); color: var(--teal); }
.comm-status-cancelled   { background: var(--ink-05); color: var(--ink-40); }

/* Source badge (Mailchimp / ClickUp) */
.comm-source-badge {
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.comm-source-mailchimp { background: var(--gold-bg); color: var(--gold-600); }
.comm-source-clickup   { background: var(--ink-05); color: var(--ink-60); } /* was purple — banned (T4) */

/* Comm legibility tag row (2026-06-10): channel chip + source badge sit on
   their own line directly under the campaign so "what channel / what source"
   reads at a glance. Channel colors come inline from the locked --ch-* tokens
   (same pattern as drawerChannelChip) — no per-channel CSS here. */
.comm-card-tags {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}
.comm-channel-chip {
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.comm-unlinked-tag {
    font-size: var(--text-micro);
    font-weight: var(--font-medium);
    color: var(--ink-40);
    font-style: italic;
}
/* Real subject shown as secondary context when the campaign is the headline.
   NOTE: --ink-50 is WHITE in this token scale (the two-digit --ink-XX ramp is
   not monotonic) — use --ink-80 for readable secondary text. */
.comm-card-subject {
    color: var(--ink-80);
    font-style: italic;
}

/* ClickUp title link */
.comm-clickup-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-20);
    transition: border-color var(--transition-fast);
}
.comm-clickup-link:hover {
    border-bottom-color: var(--purple-400);
    color: var(--purple-500);
}

/* Standalone comm badge (not linked to an event) */
.comm-standalone-badge {
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--ink-05);
    color: var(--ink-60);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   COMMS CALENDAR — Filter bar + Status badges
   (Grid and list reuse .v2-cal-* and .v2-week-* from Calendar tab)
   ═══════════════════════════════════════════════════════════════ */

/* Filter bar above calendar grid */
.v2-comms-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Clean comms toolbar (2026-06-30): channel filter left, Add Comm right. Replaces the
   scattered space-between bar; Sync moved to the global header. */
.v2-comms-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.v2-comms-toolbar-right { display: flex; align-items: center; gap: var(--space-3); }
.v2-comms-social-link {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--teal);
    text-decoration: none;
    white-space: nowrap;
}
.v2-comms-social-link:hover { text-decoration: underline; }

/* Global sync control in the header (present on every tab; fixes the missing Sync on Events) */
.v2-header-sync {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.v2-header-sync:hover { background: rgba(255,255,255,0.20); }
.v2-header-sync:disabled { opacity: 0.6; cursor: default; }
.v2-header-sync-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
}

/* Social digest card (Enunciate) — Comms tab, above the calendar. Cool tones, no cream. */
.v2-social-digest {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    background: #f4f7f9;
    border: 1px solid #e2e8ec;
    border-left: 3px solid #6E86CE;
    border-radius: 10px;
    padding: 9px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.v2-social-digest-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #143a44; }
.v2-social-framework { font-weight: 500; color: #5a6b72; }
.v2-social-weeks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.v2-social-week { font-family: var(--font-body); font-size: 11px; padding: 2px 9px; border-radius: 999px; }
.v2-social-week--posted { background: #eef1f3; color: #5a6b72; }
.v2-social-week--live { background: #e3ecf7; color: #3a5a8a; font-weight: 600; }
.v2-social-digest-link { font-family: var(--font-body); font-size: 12px; color: #6E86CE; text-decoration: none; white-space: nowrap; }
.v2-social-digest-link:hover { text-decoration: underline; }

/* Event dropdown in comms filter bar */
.comms-event-select {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    min-width: 180px;
    cursor: pointer;
}

.comms-event-select:focus {
    outline: none;
    border-color: var(--teal);
}

/* "Mine" filter toggle in the comms bar (T7) + the per-row Mine marker */
.v2-comms-filter-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.v2-mine-toggle {
    height: 32px;
    padding: 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--ink-60);
    background: var(--white);
    border: 1px solid var(--ink-20);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.v2-mine-toggle:hover {
    border-color: var(--ink-40);
    color: var(--ink-80);
}

.v2-mine-toggle.active {
    background: #375DFE;
    color: #fff;
    border-color: #375DFE;
}

.v2-mine-toggle:focus-visible {
    outline: 2px solid #375DFE;
    outline-offset: 2px;
}

.v2-comm-mine-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #375DFE;
    background: rgba(0, 119, 156, 0.10);
    border: 1px solid rgba(0, 119, 156, 0.30);
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: var(--space-2);
    vertical-align: middle;
}

/* Selected date highlight on comms calendar cells */
.v2-cal-cell.selected {
    box-shadow: inset 0 0 0 2px #375DFE;
}

.v2-legend {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #6b8693;
    font-weight: 500;
    margin: 0 0 4px 0;
    align-items: center;
    flex-wrap: wrap;
}

.v2-legend-label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ink-40);
    margin-right: var(--space-1);
}

.v2-legend-chip {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--ink-10);
    border-radius: 2px;
    padding: 2px 6px;
    color: var(--ink-70);
    background: var(--white);
}

.v2-legend-chip.tier-marquee { background: #f8e8e4; color: #c1614a; border-color: rgba(193,97,74,0.25); }
.v2-legend-chip.tier-medium  { background: #e4f0e6; color: #2741C0; border-color: rgba(107,143,113,0.2); }
.v2-legend-chip.tier-small   { background: #f3eddf; color: #9a8450; border-color: rgba(196,167,108,0.25); }
.v2-legend-chip.tier-committee { background: var(--ink-05); color: var(--ink-50); border-color: var(--ink-10); }
.v2-legend-chip.channel-email { background: var(--ch-email-bg); color: var(--ch-email); border-color: var(--ch-email-border); }
.v2-legend-chip.channel-text,
.v2-legend-chip.channel-sms { background: var(--ch-text-bg); color: var(--ch-text); border-color: var(--ch-text-border); }
.v2-legend-chip.channel-snail-mail,
.v2-legend-chip.channel-print,
.v2-legend-chip.channel-print-mail,
.v2-legend-chip.channel-direct-mail { background: var(--ch-snail-mail-bg); color: var(--ch-snail-mail); border-color: var(--ch-snail-mail-border); }
.v2-legend-chip.channel-social-media,
.v2-legend-chip.channel-social { background: var(--ch-social-media-bg); color: var(--ch-social-media); border-color: var(--ch-social-media-border); }
.v2-legend-chip.v2-legend-overdue { background: #fff0e8; color: #a33f1d; border-color: #e8b49f; }

/* Inline comm status badges in list rows */
.v2-comm-status {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: var(--space-2);
}

.v2-comm-status--planned     { background: var(--ink-05); color: var(--ink-60); }
.v2-comm-status--inprogress  { background: var(--literary-blue-bg); color: var(--literary-blue); }
.v2-comm-status--sent        { background: rgba(20, 128, 96, 0.08); color: #148060; }
.v2-comm-status--cancelled   { background: var(--ink-05); color: var(--ink-40); text-decoration: line-through; }
.v2-comm-status--overdue     { background: var(--rust-bg); color: var(--rust); }

/* Overdue row highlight */
.v2-week-item--overdue {
    border-left: 3px solid var(--rust);
}

/* ═══════════════════════════════════════════════════════════════
   STUCK CARD (Attention tab)
   ═══════════════════════════════════════════════════════════════ */

.stuck-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    transition: box-shadow var(--transition-fast);
}

.stuck-card:hover {
    box-shadow: var(--shadow-sm);
}

.stuck-card.severity-critical {
    border-left: 4px solid var(--rust);
}

.stuck-card.severity-risk {
    border-left: 4px solid var(--gold);
}

.stuck-card.severity-watch {
    border-left: 4px solid var(--literary-blue);
}

.stuck-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.stuck-card-icon.urgency-high   { background: var(--rust-bg); color: var(--rust); }
.stuck-card-icon.urgency-medium { background: var(--gold-bg); color: var(--gold); }
.stuck-card-icon.urgency-low    { background: var(--literary-blue-bg); color: var(--literary-blue); }

.stuck-card-content {
    flex: 1;
    min-width: 0;
}

.stuck-card-title {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-1) 0;
}

.stuck-card-detail {
    font-size: var(--text-small);
    color: var(--ink-60);
    margin: 0 0 var(--space-2) 0;
}

.stuck-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.v2-severity-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 2px 6px;
    margin-right: var(--space-2);
    vertical-align: middle;
}

.v2-severity-label.severity-critical { background: var(--rust-bg); color: var(--rust); }
.v2-severity-label.severity-risk { background: var(--gold-bg); color: var(--gold-600); }
.v2-severity-label.severity-watch { background: var(--literary-blue-bg); color: var(--literary-blue); }
.v2-severity-label.severity-info { background: var(--teal-bg); color: var(--teal); }

.stuck-card.severity-info {
    border-left: 4px solid var(--teal);
}

.stuck-card-preview {
    margin: var(--space-2) 0;
    padding: var(--space-2);
    background: var(--ink-05);
    border-radius: 2px;
    font-size: var(--text-small);
    color: var(--ink-60);
}

.stuck-card-preview > div {
    margin-bottom: var(--space-1);
}

.stuck-card-preview > div:last-child {
    margin-bottom: 0;
}

/* ── Program Intake Form ────────────────────────────────────── */
.v2-intake-form-summary {
    padding: var(--space-3);
    border: 1px solid var(--ink-10);
    border-radius: 3px;
    background: var(--ink-05);
}

.v2-intake-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--ink-10);
}

.v2-intake-form-meta {
    font-size: var(--text-small);
    color: var(--ink-60);
}

.v2-status-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 3px 8px;
}

.v2-status-badge.v2-status-success {
    background: var(--teal-bg);
    color: var(--teal);
}

.v2-status-badge.v2-status-warning {
    background: var(--gold-bg);
    color: var(--gold-600);
}

.v2-intake-form-data {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.v2-intake-form-field {
    font-size: var(--text-small);
    color: var(--ink-80);
    line-height: 1.5;
}

.v2-intake-form-field strong {
    color: var(--ink);
    font-weight: var(--font-semibold);
    display: inline-block;
    min-width: 80px;
}

.v2-intake-form-actions {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--ink-10);
}

.v2-attention-summary {
    margin: 0 0 var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--ink-10);
    border-radius: 3px;
    background: linear-gradient(180deg, var(--ink-05), #fff);
}

.v2-attention-summary-title {
    font-size: var(--text-body);
    color: var(--ink);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-2) 0;
}

.v2-attention-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.v2-attention-chip {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    padding: 3px 8px;
}

.v2-attention-chip.severity-critical { background: var(--rust-bg); color: var(--rust); }
.v2-attention-chip.severity-risk { background: var(--gold-bg); color: var(--gold-600); }
.v2-attention-chip.severity-watch { background: var(--literary-blue-bg); color: var(--literary-blue); }

.v2-crosslink {
    font-size: 11px;
    color: var(--teal-60);
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
}
.v2-crosslink:hover {
    color: var(--teal-80);
    background: var(--teal-05);
}

.v2-crosslink--inline {
    font-size: 10px;
    padding: 1px var(--space-1);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.v2-crosslink--table {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-decoration: underline;
    text-decoration-color: var(--teal-20);
    text-underline-offset: 2px;
    background: none;
    border: none;
    cursor: pointer;
}

.v2-week-links {
    display: inline-flex;
    gap: var(--space-1);
    margin-left: var(--space-2);
}

/* All Clear checklist */
.v2-allclear {
    margin-top: 48px;
    padding-top: var(--space-5);
    border-top: 1px solid var(--ink-10);
}

.v2-allclear-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ink-60);
    margin-bottom: var(--space-3);
}

.v2-allclear-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--ink-80);
}

.v2-allclear-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.v2-allclear-icon.pass {
    color: var(--teal);
}

.v2-allclear-icon.warn {
    color: var(--gold);
}

/* Zero-issues state */
.v2-allclear-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink-05);
    font-weight: var(--font-semibold);
    color: var(--teal-500);
}

.v2-allclear-success svg {
    opacity: 0.6;
}

/* Card stack layout (vertical list with gap) */
.v2-card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════
   INTEGRATION SLOTS (Manage Events tab)
   ═══════════════════════════════════════════════════════════════ */

.integration-slot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--ink-05);
}

.integration-slot:last-child {
    border-bottom: none;
}

.integration-label {
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--ink-60);
    width: 90px;
    flex-shrink: 0;
}

.integration-input {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--text-small);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-xs);
    color: var(--ink-80);
    background: var(--paper);
}

.integration-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px var(--teal-bg);
    background: white;
}

.integration-connected {
    color: var(--teal);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
}

.integration-disconnected {
    color: var(--ink-40);
    font-size: var(--text-small);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   CALENDAR GRID
   ═══════════════════════════════════════════════════════════════ */

.v2-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.v2-cal-header-cell {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9aa9b0;
    text-align: center;
    padding: 10px 4px;
    background: transparent;
}

.v2-cal-header-cell:last-child {
    border-right: none;
}

.v2-cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    appearance: none;
    border: none;
    min-height: 80px;
    max-height: 100px;
    overflow: hidden;
    padding: 10px 4px;
    border-right: 1px dotted #dde1e5;
    border-bottom: 1px dotted #dde1e5;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast);
    vertical-align: top;
}

.v2-cal-cell:nth-child(7n) {
    border-right: none;
}

.v2-cal-cell:hover {
    background: #f4f6f8;
}

.v2-cal-cell:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px var(--teal);
}

.v2-cal-cell.other-month {
    background: transparent;
    color: var(--ink-20);
}

.v2-cal-cell.today {
    background: transparent;
}

/* Legacy day-num (kept for Comms tab which still uses v2-cal-day-num) */
.v2-cal-day-num {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 400;
    color: #6b8693;
    margin-bottom: 4px;
}

.v2-cal-cell.today .v2-cal-day-num {
    font-weight: 800;
    color: #ffffff;
    background: #c4a76c;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-cal-cell.other-month .v2-cal-day-num {
    color: #cdd3d6;
}

/* Calendar event dots */
.v2-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-1);
}

.v2-cal-event-dot {
    font-size: 10px;
    padding: 1px var(--space-1);
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Calendar layout with side panel */
.v2-cal-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.v2-cal-layout .v2-cal-grid {
    flex: 1;
    min-width: 0;
}

/* Side panel */
.v2-cal-side-panel {
    width: 320px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-left: 24px;
    background: var(--white);
    max-height: 520px;
    overflow-y: auto;
}

.v2-side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f4f6f8;
}

.v2-side-panel-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
}

.v2-side-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--ink-40);
    padding: 2px 6px;
    border-radius: 3px;
}

.v2-side-panel-close:hover {
    background: var(--ink-05);
    color: var(--ink);
}

.v2-side-panel-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ink-05);
}

.v2-side-panel-section-title {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--ink-40);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.v2-side-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
}

.v2-side-panel-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.v2-side-panel-item-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-40);
    margin-top: 2px;
}

.v2-side-panel-comm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.v2-side-panel-channel-badge {
    font-family: var(--font-body);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
}

.v2-side-panel-channel-badge.channel-email              { background: var(--ch-email-bg); color: var(--ch-email); }
.v2-side-panel-channel-badge.channel-text,
.v2-side-panel-channel-badge.channel-sms                { background: var(--ch-text-bg); color: var(--ch-text); }
.v2-side-panel-channel-badge.channel-snail-mail,
.v2-side-panel-channel-badge.channel-print,
.v2-side-panel-channel-badge.channel-print-mail,
.v2-side-panel-channel-badge.channel-direct-mail        { background: var(--ch-snail-mail-bg); color: var(--ch-snail-mail); }
.v2-side-panel-channel-badge.channel-social-media,
.v2-side-panel-channel-badge.channel-social             { background: var(--ch-social-media-bg); color: var(--ch-social-media); }
.v2-side-panel-channel-badge.channel-ajp               { background: var(--ch-ajp-bg); color: var(--ch-ajp); }
.v2-side-panel-channel-badge.channel-leadership-newsletter { background: var(--ch-leadership-bg); color: var(--ch-leadership); }
.v2-side-panel-channel-badge.channel-community-cal-email { background: var(--ch-community-bg); color: var(--ch-community); }
.v2-side-panel-channel-badge.channel-other             { background: var(--ch-other-bg); color: var(--ch-other); }

.v2-side-panel-comm-title {
    font-size: 13px;
    color: var(--ink);
}

/* Selected calendar cell highlight */
.v2-cal-cell.selected {
    background: #f4f6f8;
    box-shadow: inset 0 0 0 2px #375DFE;
}

/* Overflow dot ("+X more") */
.v2-cal-overflow {
    color: var(--ink-40);
}

/* Calendar event dots — muted semantic */
.v2-cal-event-dot.tier-marquee   { background: #f8e8e4; color: #c1614a; }
.v2-cal-event-dot.tier-medium    { background: #e4f0e6; color: #2741C0; }
.v2-cal-event-dot.tier-small     { background: #f3eddf; color: #9a8450; }
.v2-cal-event-dot.tier-committee { background: #ebeae6; color: #6a7a6b; }

/* Calendar comm icons on cells */
.v2-cal-comms {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    padding: var(--space-1) var(--space-1) 0;
}

/* Comm channel dots (icon-only in calendar cells) */
.v2-cal-comm-dot {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}

.v2-cal-comm-dot.channel-email              { background: var(--ch-email-bg); color: var(--ch-email); }
.v2-cal-comm-dot.channel-text,
.v2-cal-comm-dot.channel-sms                { background: var(--ch-text-bg); color: var(--ch-text); }
.v2-cal-comm-dot.channel-snail-mail,
.v2-cal-comm-dot.channel-print,
.v2-cal-comm-dot.channel-print-mail,
.v2-cal-comm-dot.channel-direct-mail        { background: var(--ch-snail-mail-bg); color: var(--ch-snail-mail); }
.v2-cal-comm-dot.channel-social-media,
.v2-cal-comm-dot.channel-social             { background: var(--ch-social-media-bg); color: var(--ch-social-media); }
.v2-cal-comm-dot.channel-ajp               { background: var(--ch-ajp-bg); color: var(--ch-ajp); }
.v2-cal-comm-dot.channel-leadership-newsletter { background: var(--ch-leadership-bg); color: var(--ch-leadership); }
.v2-cal-comm-dot.channel-community-cal-email { background: var(--ch-community-bg); color: var(--ch-community); }
.v2-cal-comm-dot.channel-other             { background: var(--ch-other-bg); color: var(--ch-other); }
.v2-cal-comm-dot.v2-cal-overflow           { background: none; color: var(--ink-40); font-family: var(--font-mono); font-size: 9px; }

/* Overdue comm dot — unsent comms past their scheduled date */
.v2-cal-comm-dot--overdue {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

/* ============================================================================
   Comms calendar — SOFT "museum" treatment (design review 2026-06-11, final).
   Scoped to .v2-comms-grid so the Programs calendar (shared .v2-cal-* classes,
   fg-cal-num inside) is NOT affected. Direction: soft, feminine, slick, artistic.
   Committed SOLID channel color, white Bitter name + thin white icon riding on
   it, gentle drop shadow (not hard offset), airy spacing, light rounded frame.
   "Feel the light before you read the text." Gold "today" disc kept.
   ============================================================================ */
.v2-comms-grid {
    border: 1.5px solid #cdd8da;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 24px rgba(43, 71, 80, 0.06);
}
.v2-comms-grid .v2-cal-header-cell {
    color: #9bacae;
    text-align: left;
    padding: 14px 16px;
    border-right: 1px solid #eef2f2;
    border-bottom: 1.5px solid #cdd8da;
    background: #fbfcfc;
}
.v2-comms-grid .v2-cal-header-cell:nth-child(7n) { border-right: none; }
.v2-comms-grid .v2-cal-cell {
    align-items: flex-start;
    text-align: left;
    min-height: 152px;
    max-height: none;
    padding: 13px 13px 16px;
    border-right: 1px solid #eef2f2;
    border-bottom: 1px solid #eef2f2;
}
.v2-comms-grid .v2-cal-cell:nth-child(7n) { border-right: none; }
.v2-comms-grid .v2-cal-day-num {
    font-family: 'Bitter', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #3a5560;
    margin-bottom: 9px;
}
.v2-comms-grid .v2-cal-cell.other-month .v2-cal-day-num { color: #e2e9ea; }
.v2-comms-grid .v2-cal-cell.today .v2-cal-day-num {
    width: 34px;
    height: 34px;
    font-size: 17px;
    box-shadow: 0 2px 8px rgba(157, 128, 63, 0.35);   /* soft gold disc, no hard offset */
}
.v2-comms-grid .v2-cal-comms {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0;
    width: 100%;
}

/* Soft tag: solid channel fill, white text + white icon, gentle shadow, rounded */
.v2-comm-cell-item {
    --c: var(--ch-other);
    --sh: rgba(43, 71, 80, 0.20);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--c);
    box-shadow: 0 3px 9px var(--sh);
    text-align: left;
}
.v2-comm-cell-item.channel-email        { --c: var(--ch-email);        --sh: rgba(147, 72, 98, 0.30); }
.v2-comm-cell-item.channel-text,
.v2-comm-cell-item.channel-sms          { --c: var(--ch-text);         --sh: rgba(138, 100, 32, 0.30); }
.v2-comm-cell-item.channel-snail-mail,
.v2-comm-cell-item.channel-print,
.v2-comm-cell-item.channel-print-mail,
.v2-comm-cell-item.channel-direct-mail  { --c: var(--ch-snail-mail);   --sh: rgba(87, 138, 114, 0.30); }
.v2-comm-cell-item.channel-social-media,
.v2-comm-cell-item.channel-social       { --c: var(--ch-social-media); --sh: rgba(90, 120, 168, 0.30); }
.v2-comm-cell-item.channel-ajp          { --c: var(--ch-ajp); }
.v2-comm-cell-item.channel-leadership-newsletter { --c: var(--ch-leadership); }
.v2-comm-cell-item.channel-community-cal-email   { --c: var(--ch-community); }
.v2-comm-cell-item.channel-other        { --c: var(--ch-other); }
.v2-comm-cell-item.is-overdue {
    outline: 2.5px solid var(--coral, #c1614a);
    outline-offset: 1.5px;
}
.v2-comm-cname {
    font-family: 'brother-1816', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Channel icon rides directly on the colored tag — thin, white, no chip box */
.v2-comm-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: #fff;
}
.v2-comm-chip svg { width: 18px; height: 18px; stroke-width: 2; }
.v2-comm-cell-overflow {
    font-family: 'brother-1816', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6b8693;
    padding: 1px 2px 0;
}

/* ── Send rows: status anchor + filled channel chip (comm-status.js, 2026-06-24) ──
   Status leads (answers "did you finish it?" first); glyph + shape + color on
   every state, never color-only. Used by the comms list rows AND the program
   drawer comm rows. */
.v2-send-row { display: flex; align-items: center; gap: 12px; }
.v2-send-row .v2-week-event { flex: 1; min-width: 0; }
.v2-send-campaign {
    font-family: 'brother-1816', sans-serif;
    font-size: 15px; font-weight: 700;
    color: #143a44; text-align: left; line-height: 1.25;
    background: none; border: none; padding: 0; cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-send-campaign:hover { color: #375DFE; text-decoration: underline; }
.v2-send-meta {
    font-family: 'brother-1816', sans-serif;
    font-size: 13px; font-weight: 500; color: #2c5460; margin-top: 2px;
}
.v2-send-row--nodate .v2-send-meta { color: #6b8693; }

/* filled channel chip (channel color bg, white glyph) for white-bg rows */
.v2-send-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; color: #fff;
    box-shadow: 0 1px 3px rgba(20, 58, 68, 0.18);
}
.v2-send-chip svg { width: 17px; height: 17px; stroke-width: 2; }

/* status badge — glyph + label, leading anchor */
.v2-send-status {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'brother-1816', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 9px 4px 7px; border-radius: 7px; white-space: nowrap;
}
.v2-send-status-glyph { display: inline-flex; }
.v2-send-status-glyph svg { width: 14px; height: 14px; }
.v2-send-status.v2-st-sent      { background: #e1f0ee; color: #0c6b5e; }                          /* quiet, resolved */
.v2-send-status.v2-st-planned   { background: #ffffff; color: #2c5460; box-shadow: inset 0 0 0 1.5px #cfd9dc; }  /* hollow ring */
.v2-send-status.v2-st-overdue   { background: #a34a38; color: #ffffff; }                          /* the loud one */
.v2-send-status.v2-st-cancelled { background: #eef1f2; color: #6b8693; text-decoration: line-through; }

/* program drawer comm row — fit the new badge + chip */
.v2-drawer-comm { display: flex; align-items: center; gap: 11px; }
.v2-drawer-comm .v2-drawer-comm-main { flex: 1; min-width: 0; }

/* ── Program drawer: marketing plan summary + crystallized activities (2026-06-25) ── */
.v2-plan-grid { display: flex; flex-direction: column; gap: 7px; }
.v2-plan-row { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.v2-plan-label { flex: 0 0 92px; font-weight: 700; color: #2c5460; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.v2-plan-val { flex: 1; color: #143a44; min-width: 0; }
.v2-plan-empty { color: #aeb4b9; }

.v2-activity-list { display: flex; flex-direction: column; }
.v2-activity-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid #eef2f2; }
.v2-activity-row:last-child { border-bottom: none; }
.v2-act-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
.v2-act-icon svg { width: 15px; height: 15px; stroke-width: 2.4; }
.v2-act--done .v2-act-icon    { background: #e1f0ee; color: #0c6b5e; }
.v2-act--planned .v2-act-icon { background: #ffffff; color: #2c5460; box-shadow: inset 0 0 0 1.5px #cfd9dc; }
.v2-act--none .v2-act-icon    { background: #f1f4f5; color: #aeb4b9; }
.v2-act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v2-act-label { font-weight: 700; font-size: 14px; color: #143a44; }
.v2-act-detail { font-size: 12.5px; color: #6b8693; }
.v2-act-status { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.v2-act--done .v2-act-status    { color: #0c6b5e; }
.v2-act--planned .v2-act-status { color: #2c5460; }
.v2-act--none .v2-act-status    { color: #aeb4b9; }

.v2-manage-divider { height: 1px; background: #e2e9ea; margin: 22px 0; }

/* Legend = solid pills matching the tags (single icon source: channels.js) */
.v2-comms-grid + * .v2-legend-chip,
.v2-legend .v2-legend-chip.channel-email,
.v2-legend .v2-legend-chip.channel-text,
.v2-legend .v2-legend-chip.channel-snail-mail,
.v2-legend .v2-legend-chip.channel-social-media { color: #fff; }
.v2-legend-chip.channel-email        { background: var(--ch-email);        border-color: var(--ch-email);        color: #fff; }
.v2-legend-chip.channel-text,
.v2-legend-chip.channel-sms          { background: var(--ch-text);         border-color: var(--ch-text);         color: #fff; }
.v2-legend-chip.channel-snail-mail,
.v2-legend-chip.channel-print,
.v2-legend-chip.channel-print-mail,
.v2-legend-chip.channel-direct-mail  { background: var(--ch-snail-mail);   border-color: var(--ch-snail-mail);   color: #fff; }
.v2-legend-chip.channel-social-media,
.v2-legend-chip.channel-social       { background: var(--ch-social-media); border-color: var(--ch-social-media); color: #fff; }
.v2-legend-chip .v2-comm-chip { background: none; color: #fff; }
.v2-legend-chip .v2-comm-chip svg { width: 13px; height: 13px; }

.v2-cal-comm-icon {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Calendar navigation */
.v2-cal-nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.v2-cal-nav-title {
    font-family: 'Bitter', serif;
    font-size: 30px;
    font-weight: 700;
    color: #143a44;
    text-transform: none;
    letter-spacing: -0.01em;
}

.v2-cal-nav-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════════ */

.v2-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.v2-filter-bar--inline {
    margin-bottom: 0;
}

.v2-filter-select {
    font-family: var(--font-body);
    font-size: var(--text-small);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--ink-80);
    cursor: pointer;
}

.v2-filter-select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px var(--teal-bg);
}

.v2-search-input {
    font-family: var(--font-body);
    font-size: var(--text-body);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--ink-80);
    flex: 1;
    min-width: 200px;
}

.v2-search-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px var(--teal-bg);
}
.v2-cal-search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--ink-10);
}
.v2-search-input--compact {
    min-width: 140px;
    max-width: 200px;
    flex: 0 1 auto;
    font-size: var(--text-small);
    padding: var(--space-1) var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   CHANNEL FILTER PILLS
   ═══════════════════════════════════════════════════════════════ */

.v2-channel-pills {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.v2-channel-pill {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-full);
    background: white;
    color: var(--ink-60);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.v2-channel-pill:hover {
    border-color: var(--ink-20);
    background: var(--ink-05);
}

.v2-channel-pill.active {
    background: #375DFE;
    color: var(--white);
    border-color: #375DFE;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW MODE BUTTONS (Comms Calendar)
   ═══════════════════════════════════════════════════════════════ */

.v2-view-mode-btns {
    display: flex;
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.v2-view-mode-btn {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-3);
    border: none;
    background: white;
    color: var(--ink-60);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-right: 1px solid var(--ink-10);
}

.v2-view-mode-btn:last-child {
    border-right: none;
}

.v2-view-mode-btn:hover {
    background: var(--ink-05);
}

.v2-view-mode-btn.active {
    background: #375DFE;
    color: var(--white);
    font-weight: var(--font-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL STYLES (for ds-modal pattern)
   ═══════════════════════════════════════════════════════════════ */

.ds-modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 19, 24, 0.5);
    backdrop-filter: blur(2px);
}

.ds-modal {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    max-height: 85vh;
    overflow-y: auto;
    animation: v2-modal-in 0.2s ease;
}

.ds-modal-md { width: 90%; max-width: 540px; }
.ds-modal-lg { width: 90%; max-width: 700px; }

.ds-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--ink-10);
}

.ds-modal-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.ds-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ink-40);
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.ds-modal-close:hover {
    background: var(--ink-05);
    color: var(--ink-80);
}

.ds-modal-body {
    padding: var(--space-5);
}

.ds-modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--ink-10);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@keyframes v2-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   EVENTS TABLE (Manage Events)
   ═══════════════════════════════════════════════════════════════ */

.v2-events-table {
    width: 100%;
    border-collapse: collapse;
}

.v2-events-table th {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--paper);
    text-align: left;
    padding: 15px 14px;
    border-bottom: none;
    background: #143a44;
    border-right: 1px solid rgba(250,250,250,0.06);
    position: sticky;
    top: 0;
}

.v2-events-table th:last-child {
    border-right: none;
}

/* ── Manage board: RACI gate marks — checkbox metaphor, never a red X ── */
.v2-th-mark { text-align: center; width: 92px; }
.v2-td-mark { text-align: center; }
/* Filled green square = done, empty outline square = not yet. Reads as ticked/unticked, no legend hunt. */
.v2-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
.v2-mark--done { background: #4C9C2E; color: #ffffff; }
.v2-mark--none { background: transparent; border: 1.5px solid #cbd3d8; }
.v2-mark-link { background: none; border: 0; padding: 0; cursor: pointer; }
.v2-mark-toggle { background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 6px; }
.v2-mark-toggle:hover { background: #eef3f4; }
/* "Behind" accent — near date, kickoff not done. Warning, not alarm. No red X, no cream tint. */
.v2-events-table tr.v2-row-behind td:first-child { box-shadow: inset 3px 0 0 #B49759; }
.v2-legend-behind { display: inline-block; width: 4px; height: 15px; background: #B49759; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: middle; }

/* Distinct data-load error state (not the same as a calm, empty week) */
.v2-data-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fdecea;
    border: 1px solid #e7b8af;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.v2-data-error-text { font-family: var(--font-body); font-size: 14px; color: #8a3d2e; }
.v2-mark-legend {
    font-family: var(--font-body);
    font-size: 12px;
    color: #6b7780;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 2px;
}
.v2-mark-legend .v2-mark { margin-left: 8px; }
.v2-mark-legend .v2-mark:first-child { margin-left: 0; }

/* "Last synced" freshness label next to the Sync control */
.v2-sync-freshness {
    font-family: var(--font-body);
    font-size: 12px;
    color: #6b7780;
    align-self: center;
    margin-left: 4px;
}

/* ── Re-link control (attach a comm to its program) ── */
/* Also worn by <a href="mailto:"> (report-a-change, 2026-07-02): the
   inline-block + border-box + no-underline lines keep the anchor form
   pixel-identical to the button form. */
.v2-relink-btn {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #375DFE;
    background: none;
    border: 1px dashed #b8c2c8;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
}
.v2-relink-btn:hover { background: #f1f6f8; border-color: #375DFE; }
.v2-drawer-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: #6b7780;
    margin-bottom: 10px;
}
.v2-relink-list {
    max-height: 46vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}
.v2-report-text { width: 100%; min-height: 96px; resize: vertical; margin-top: 8px; }
.v2-report-actions { margin-top: 10px; }

/* ── Communications channel filter chips (L2) ── */
.v2-chan-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px 2px; }
.v2-chan-chip {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #4a6b75;
    background: #fff;
    border: 1px solid #d5dde0;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
}
.v2-chan-chip:hover { border-color: #375DFE; color: #375DFE; }
.v2-chan-chip.active { background: #375DFE; border-color: #375DFE; color: #fff; }

.v2-events-table td {
    font-size: 14px;
    line-height: 1.45;
    padding: 14px 14px;
    border-bottom: 1px solid var(--ink-10);
    border-right: 1px solid var(--ink-10);
    vertical-align: top;
}

.v2-events-table td:last-child {
    border-right: none;
}

.v2-events-table tbody tr:nth-child(even):not(.v2-expand-row) td {
    background: #fcfcfd;
}

.v2-events-table tr:hover td {
    background: var(--ink-05);
}

.v2-events-table .event-name-cell {
    font-weight: var(--font-semibold);
    color: var(--ink);
    cursor: pointer;
}

.v2-events-table .event-name-cell:hover {
    color: var(--literary-blue);
}

/* Tier badge in table */
.v2-tier-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
}

/* Tier badges — muted semantic */
.v2-tier-badge.tier-marquee   { background: #f8e8e4; color: #c1614a; }
.v2-tier-badge.tier-medium    { background: #e4f0e6; color: #2741C0; }
.v2-tier-badge.tier-small     { background: #f3eddf; color: #9a8450; }
.v2-tier-badge.tier-series    { background: #ebeae6; color: #6a7a6b; }
.v2-tier-badge.tier-committee { background: #ebeae6; color: #6a7a6b; }
.v2-tier-badge.tier-ongoing   { background: #e4f0e6; color: #2741C0; }

/* Table column widths */
.v2-th-icon  { width: 3%; }
.v2-th-name  { width: 30%; }
.v2-th-when  { width: 18%; }
.v2-th-staff { width: 13%; }
.v2-th-tier  { width: 10%; }
.v2-th-date  { width: 13%; }
.v2-th-num   { width: 8%; }

/* Table cell types */
.v2-td-expand {
    text-align: center;
    cursor: pointer;
    color: var(--ink-40);
    font-size: 10px;
}

.v2-td-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* "When" column — date + tier badge together (Guy's spec: Program · Date+Tier · gates) */
.v2-td-when { white-space: nowrap; }
.v2-when-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 13px; }
.v2-td-when .v2-tier-badge { vertical-align: middle; }
.v2-drawer-status-actions { display: flex; gap: 8px; }

.v2-table-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--ink-40);
}

.v2-table-empty svg {
    display: inline-block;
    margin-bottom: var(--space-2);
    opacity: 0.4;
}

.v2-table-empty .v2-empty-text {
    margin: 0;
}

/* Clickable table rows */
.v2-events-table tr[data-action="toggle-event"] {
    cursor: pointer;
}

.v2-events-table tr.expanded td {
    background: var(--literary-blue-bg);
    font-weight: var(--font-semibold);
}

/* Expandable row content */
.v2-expand-row {
    background: var(--ink-05);
}

.v2-expand-row td {
    padding: 0;
}

.v2-expand-content {
    padding: var(--space-5) var(--space-6);
}

/* Sections within expanded rows */
.v2-expand-section {
    margin-bottom: var(--space-4);
}

.v2-expand-heading {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--ink-80);
    margin: 0 0 var(--space-2) 0;
}

/* Task group (channel/phase grouping) */
.v2-task-group {
    margin-bottom: var(--space-3);
}

.v2-task-group-label {
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--ink-60);
    margin-bottom: var(--space-1);
}

/* Task row */
.v2-task-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-small);
}

.v2-task-bullet {
    color: var(--ink-20);
}

.v2-task-name {
    flex: 1;
    color: var(--ink-80);
}

.v2-task-owner {
    color: var(--ink-40);
    width: 60px;
}

.v2-task-due {
    font-family: var(--font-mono);
    color: var(--ink-40);
    width: 80px;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE-LEVEL UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Page header row (title + action button) */
.v2-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.v2-page-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

/* Filter row (pills + controls) */
.v2-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Larger empty text variant */
.v2-empty-text--large {
    font-size: var(--text-large);
}

/* Page count label (parenthetical count next to title) */
.v2-page-count {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-60);
}

/* Header actions group */
.v2-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Small text on buttons */
.v2-btn-sm-text {
    font-size: var(--text-small);
}

/* Load more centered container */
.v2-load-more {
    text-align: center;
    padding: var(--space-4);
}

/* Standalone summary bar (not inside a section) */
.v2-summary-bar--standalone {
    border-radius: var(--radius-md);
    border: 1px solid var(--ink-10);
    margin-top: var(--space-3);
}

.v2-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3) 0;
}

.v2-active-filter-chip {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-70);
    background: var(--ink-05);
    border: 1px solid var(--ink-10);
    border-radius: 2px;
    padding: 3px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CALENDAR UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* ICS export row */
.v2-cal-export {
    text-align: right;
    margin-top: var(--space-3);
}

/* Inline icon inside buttons */
.v2-btn-icon {
    vertical-align: -2px;
    margin-right: 4px;
}

/* Section top spacing modifier */
.v2-section--spaced {
    margin-top: var(--space-5);
}

/* ── Calendar List Range Toggle ────── */
.v2-cal-list-range-toggle {
    display: flex;
    gap: 2px;
    padding: var(--space-1) 0 var(--space-3);
}

.v2-cal-list-range-toggle .v2-toggle-btn {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-40);
    background: transparent;
    border: 1px solid var(--ink-10);
    border-radius: 3px;
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.v2-cal-list-range-toggle .v2-toggle-btn:hover {
    color: var(--ink-60);
    border-color: var(--ink-20);
}

.v2-cal-list-range-toggle .v2-toggle-btn.active {
    background: #143a44;
    color: #ffffff;
    border-color: #143a44;
    font-weight: 500;
}

/* ── Communications "Next Week" peek (eng review 8C) ──────
   Visually subordinate, non-interactive preview shown under the This Week list.
   Items kept legible (mild de-emphasis, not the design memo's 0.62 opacity, which
   would risk failing text contrast); the uppercase label carries the subordination. */
.v2-comms-peek {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--ink-10);
}

.v2-comms-peek-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-40);
    margin-bottom: var(--space-2);
}

.v2-comms-peek-items {
    opacity: 0.82;
}

.v2-comms-peek-empty {
    font-family: var(--font-body);
    font-size: 13px;
    font-style: italic;
    color: var(--ink-40);
    padding: var(--space-1) 0;
}

/* ── Calendar Month Group Labels ────── */
.v2-cal-month-group {
    margin-bottom: var(--space-2);
}

.v2-cal-month-group + .v2-cal-month-group {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink-10);
}

.v2-cal-month-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-40);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

/* ── Loading State ────── */
.v2-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    gap: var(--space-4);
}

.v2-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #375DFE;
    border-radius: 50%;
    animation: v2-spin 0.8s linear infinite;
}

@keyframes v2-spin {
    to { transform: rotate(360deg); }
}

.v2-loading-text {
    color: var(--ink-40);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Empty States (illustration + text) ────── */
.v2-empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.v2-empty-state svg {
    display: block;
    margin: 0 auto var(--space-3);
    opacity: 0.45;
}

.v2-empty-state--inline {
    padding: var(--space-4) var(--space-2);
}

.v2-empty-text {
    color: var(--ink-40);
    font-size: var(--text-body);
    margin: 0;
}

/* Inline tier badge with left margin */
.v2-tier-badge--inline {
    margin-left: 8px;
}

/* Meta text (staff name, secondary info) */
.v2-meta-text {
    color: var(--ink-40);
    font-size: var(--text-small);
    margin-left: 8px;
}

/* Date badge (Field Guide style) */
.v2-event-date-badge {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    line-height: 1;
    color: #ffffff;
}
.v2-event-date-badge.tier-marquee   { background: #c1614a; }
.v2-event-date-badge.tier-medium    { background: #375DFE; }
.v2-event-date-badge.tier-small     { background: #c4a76c; }
.v2-event-date-badge.tier-series    { background: #6b8693; }
.v2-event-date-badge.tier-ongoing   { background: #6b8693; }
.v2-event-date-badge.tier-committee { background: #9aa9b0; }
.v2-event-date-badge .month {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.v2-event-date-badge .day {
    font-size: 20px;
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   THIS WEEK PREVIEW
   ═══════════════════════════════════════════════════════════════ */

.v2-week-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

.v2-week-item:last-child {
    border-bottom: none;
}

.v2-week-date {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--ink-60);
    width: 60px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.v2-week-event {
    flex: 1;
    min-width: 0;
}

.v2-week-event-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 var(--space-1) 0;
}

.v2-week-event-comms {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px solid var(--ink-10);
}

.v2-week-comm {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    color: var(--ink-60);
}

/* ═══════════════════════════════════════════════════════════════
   SUMMARY BAR
   ═══════════════════════════════════════════════════════════════ */

.v2-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    background: var(--ink-05);
    border-top: 1px solid var(--ink-10);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: var(--text-small);
    color: var(--ink-60);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.v2-summary-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.v2-summary-stat strong {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION TOAST
   ═══════════════════════════════════════════════════════════════ */

.v2-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-body);
    animation: v2-toast-in 0.3s ease;
    max-width: 400px;
}

.v2-toast-success { background: var(--teal-bg); color: var(--success-dark); border: 1px solid var(--teal); }
.v2-toast-error   { background: var(--rust-bg); color: var(--error-dark); border: 1px solid var(--rust); }
.v2-toast-warning { background: var(--gold-bg); color: var(--warning-dark); border: 1px solid var(--gold); }
.v2-toast-info    { background: var(--info-light); color: var(--info); border: 1px solid var(--info); }

@keyframes v2-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE COMPONENTS
   Mockup-matching styles for calendar tab
   ═══════════════════════════════════════════════════════════════ */

/* ── Calendar Day Number (Bitter serif, centered) ── */
.fg-cal-num {
    font-family: 'Bitter', serif;
    font-size: 19px;
    font-weight: 500;
    color: #143a44;
}

.fg-cal-num--today {
    font-weight: 800;
    color: #ffffff;
    background: #c4a76c;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-cal-cell.other-month .fg-cal-num {
    color: #cdd3d6;
}

/* ── Calendar Dots (small colored circles) ── */
.fg-cal-dots {
    display: flex;
    gap: 5px;
    margin-top: 6px;
    justify-content: center;
}

.fg-cal-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Past days read as past (dimmed number + faint wash), events stay legible */
.v2-cal-cell.is-past .fg-cal-num { opacity: 0.4; }
.v2-cal-cell.is-past { background: #fafbfb; }

/* Brand True palette (2026-06-30 placeholder for Guy's own palette): true JPSA blue/gold/slate;
   Marquee stays coral (warm = urgent); green is reserved for the "done" checkbox, not tiers. */
.fg-cal-dot.tier-marquee   { background: #c1614a; }
.fg-cal-dot.tier-medium    { background: #00609C; }
.fg-cal-dot.tier-small     { background: #B49759; }
.fg-cal-dot.tier-committee { background: #64748b; }
.fg-cal-dot.tier-series    { background: #64748b; }
.fg-cal-dot.tier-ongoing   { background: #64748b; }

/* ── Event Name Inside Calendar Cell ── */
.fg-cal-event-name {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #4a6b75;
    margin-top: 3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fg-cal-more {
    font-weight: 400;
    color: #9aa9b0;
    font-size: 9px;
}

/* ── Nav Buttons (circular) ── */
.fg-nav-btn {
    font-family: 'Karla', sans-serif;
    background: #eee9df;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #4a6b75;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.fg-nav-btn:hover {
    background: #375DFE;
    color: #ffffff;
}

/* ── Legend (dot + label row) ── */
.fg-legend {
    display: flex;
    gap: 20px;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    color: #6b8693;
    font-weight: 500;
    margin: 4px 0 0;
}

.fg-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Diamond Ornament Rule ── */
.fg-ornament-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

.fg-ornament-rule::before,
.fg-ornament-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d9d4c8;
}

.fg-diamond {
    width: 6px;
    height: 6px;
    background: #c4a76c;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ── Two-Column Layout ── */
.fg-two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 36px;
}

/* ── Date Badge (colored square with month + day) ── */
.fg-date-badge {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Bitter', serif;
    line-height: 1;
    color: #ffffff;
}

.fg-date-badge.tier-marquee   { background: #c1614a; }
.fg-date-badge.tier-medium    { background: #375DFE; }
.fg-date-badge.tier-small     { background: #c4a76c; }
.fg-date-badge.tier-committee { background: #6b8693; }
.fg-date-badge.tier-series    { background: #6b8693; }
.fg-date-badge.tier-ongoing   { background: #6b8693; }

.fg-date-badge-month {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fg-date-badge-day {
    font-size: 20px;
    font-weight: 800;
}

/* ── Event Item (badge + info row) ── */
.fg-event-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

.fg-event-item:last-child {
    border-bottom: none;
}

.fg-event-info {
    flex: 1;
    min-width: 0;
}

.fg-event-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #143a44;
}

.fg-event-desc {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    color: #6b8693;
    margin-top: 2px;
}

.fg-event-staff {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    color: #9aa9b0;
    margin-top: 4px;
    font-weight: 500;
}

/* ── Tier Label (tiny uppercase pill) ── */
.fg-tier-label {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 6px;
}

.fg-tier-label.tier-marquee   { background: #f8e8e4; color: #c1614a; }
.fg-tier-label.tier-medium    { background: #e4f0e6; color: #2741C0; }
.fg-tier-label.tier-small     { background: #f3eddf; color: #9a8450; }
.fg-tier-label.tier-committee { background: #ebeae6; color: #6a7a6b; }
.fg-tier-label.tier-series    { background: #ebeae6; color: #6a7a6b; }
.fg-tier-label.tier-ongoing   { background: #ebeae6; color: #6a7a6b; }

/* ── Sidebar Cards ── */
.fg-sidebar-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.fg-sidebar-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #143a44;
}

.fg-sidebar-icon {
    width: 20px;
    height: 20px;
    background: #375DFE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.fg-sidebar-icon--gold {
    background: #c4a76c;
}

/* ── TL;DR — "What you need to know" (plain-language lines, not stat tiles) ── */
.fg-tldr {
    display: flex;
    flex-direction: column;
}

.fg-tldr-line {
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #143a44;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f2;
}

.fg-tldr-line:first-child { padding-top: 0; }
.fg-tldr-line:last-child { padding-bottom: 0; border-bottom: 0; }
.fg-tldr-line strong { font-weight: 700; }
.fg-tldr-line--attn,
.fg-tldr-line--attn strong { color: #c1614a; }

/* ── Stat Grid (2x2) ── */
.fg-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fg-stat-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.fg-stat-number {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 800;
    color: #143a44;
}

.fg-stat-alert {
    color: #c1614a;
}

.fg-stat-label {
    font-family: 'Karla', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9aa9b0;
    margin-top: 2px;
}

/* ── Alert Items ── */
.fg-alert-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f4f6f8;
}

.fg-alert-item:last-child {
    border-bottom: none;
}

.fg-alert-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.fg-alert-critical { background: #c1614a; }
.fg-alert-warning  { background: #c4a76c; }
.fg-alert-info     { background: #375DFE; }

.fg-alert-title {
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #143a44;
}

.fg-alert-detail {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    color: #6b8693;
    margin-top: 1px;
}

/* ── Footer ── */
.fg-footer {
    margin-top: 24px;
    padding: 20px 0;
    text-align: center;
    position: relative;
}

.fg-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 1px;
    background: #d9d4c8;
}

.fg-footer-text {
    font-family: 'Bitter', serif;
    font-size: 12px;
    color: #9aa9b0;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .v2-header-inner {
        padding: var(--space-3) var(--space-4);
    }

    .v2-content {
        padding: 0 var(--space-4);
    }

    .v2-tab-bar-inner {
        padding: 0 var(--space-4);
    }
}

@media (max-width: 768px) {
    .v2-header-inner {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .v2-header-right {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }

    .v2-tab-bar-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .v2-tab {
        padding: var(--space-3) var(--space-3);
        font-size: var(--text-small);
    }

    .v2-tab-icon {
        display: none;
    }

    .v2-cal-cell {
        min-height: 70px;
        max-height: 90px;
    }

    .v2-cal-layout {
        flex-direction: column;
    }
    .v2-cal-side-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--ink-10);
        max-height: none;
    }

    .v2-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .v2-search-input {
        min-width: unset;
    }

    /* Field Guide responsive — stack two-col on mobile */
    .fg-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fg-date-badge {
        width: 44px;
        height: 44px;
    }

    .fg-date-badge-day {
        font-size: 18px;
    }

    .fg-cal-event-name {
        font-size: 9px;
    }
}

/* ========================================
   REPORTS FAB (floating action button)
   ======================================== */

.v2-reports-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.v2-reports-fab:hover {
    background: var(--ink-80);
}

.v2-reports-fab.hidden {
    display: none;
}

/* Report tile hover */
.v2-report-tile:hover {
    box-shadow: var(--shadow-sm);
}

/* Report result markdown styling */
#report-result-content h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    margin: 20px 0 8px;
    color: var(--ink);
}

#report-result-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--ink-80);
}

#report-result-content p {
    margin: 0 0 10px;
}

#report-result-content ul,
#report-result-content ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

#report-result-content li {
    margin-bottom: 4px;
}

#report-result-content strong {
    font-weight: 600;
}

#report-result-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

#report-result-content th,
#report-result-content td {
    padding: 6px 10px;
    border: 1px solid var(--ink-10);
    text-align: left;
}

#report-result-content th {
    background: var(--ink-05);
    font-weight: 600;
}

/* ─── Settings Modal ────────────────────────────────── */

.v2-settings-modal {
    width: 90vw;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.v2-settings-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ink-10);
    padding: 0 var(--space-6, 24px);
}

.v2-settings-nav-btn {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: none;
    background: transparent;
    color: var(--ink-40);
    font-size: var(--text-body, 14px);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.v2-settings-nav-btn:hover {
    color: var(--ink-80);
}

.v2-settings-nav-btn.active {
    color: var(--ink);
    border-bottom-color: var(--teal);
}

.v2-settings-section {
    padding: var(--space-2, 8px) 0;
}

.v2-tier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
}

.v2-tier-card {
    padding: var(--space-4, 16px);
    background: var(--paper);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-md);
}

.v2-reference-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small, 13px);
}

.v2-reference-table th,
.v2-reference-table td {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--ink-10);
    text-align: left;
}

.v2-reference-table th {
    background: var(--ink-05);
    font-weight: 600;
    color: var(--ink-80);
}

.v2-reference-table td {
    color: var(--ink-60);
}

.v2-admin-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
}

.v2-admin-info-card {
    text-align: center;
    padding: var(--space-4, 16px);
    background: var(--paper);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .v2-settings-modal {
        width: 95vw;
        max-height: 90vh;
    }

    .v2-tier-grid {
        grid-template-columns: 1fr 1fr;
    }

    .v2-admin-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* (Old comms dashboard, urgency alerts, command bar, event summary,
   mini calendar CSS removed — comms tab now reuses v2-cal-* classes) */

/* ═══════════════════════════════════════════════════════════════════════════
   Communication Plan Generator
   ═══════════════════════════════════════════════════════════════════════════ */

.cpg-section {
    margin-bottom: var(--space-6, 24px);
    padding: var(--space-5, 20px);
    background: var(--color-paper, #fafafa);
    border: 1px solid var(--ink-200, #e8e9ed);
    border-radius: var(--radius-card, 10px);
}

.cpg-header {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
}

.cpg-title {
    font-family: var(--font-display);
    font-size: var(--text-section, 20px);
    color: var(--ink, #111318);
    margin: 0;
}

.cpg-badge {
    font-size: var(--text-label, 9px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide, 1px);
    color: var(--teal, #3a9d8f);
    background: var(--teal-50, #f0faf7);
    border: 1px solid var(--teal-200, #a8e4d4);
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
}

.cpg-step { margin-top: var(--space-4, 16px); }

.cpg-label {
    display: block;
    font-size: var(--text-small, 13px);
    font-weight: 500;
    color: var(--ink-600, #43464f);
    margin-bottom: var(--space-2, 8px);
}

.cpg-textarea {
    width: 100%;
    min-height: 160px;
    padding: var(--space-3, 12px);
    font-family: var(--font-body);
    font-size: var(--text-body, 14px);
    color: var(--ink, #111318);
    background: white;
    border: 1px solid var(--ink-200, #e8e9ed);
    border-radius: var(--radius-sm, 6px);
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
}

.cpg-textarea:focus {
    outline: none;
    border-color: var(--teal, #3a9d8f);
    box-shadow: 0 0 0 2px var(--teal-100, #d4f2ea);
}

.cpg-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
}

.cpg-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: var(--text-small, 13px);
    font-weight: 500;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cpg-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.cpg-btn-primary {
    background: var(--teal, #3a9d8f);
    color: white;
    border-color: var(--teal, #3a9d8f);
}

.cpg-btn-primary:hover:not(:disabled) { background: var(--teal-600, #165c4d); }

.cpg-btn-secondary {
    background: white;
    color: var(--ink-600, #43464f);
    border-color: var(--ink-200, #e8e9ed);
}

.cpg-btn-secondary:hover:not(:disabled) { background: var(--ink-50, #f8f9fa); }

/* Extraction Preview */
.cpg-extraction { border-top: 1px solid var(--ink-150, #ecedf0); padding-top: var(--space-4, 16px); }
.cpg-step-header { margin-bottom: var(--space-3, 12px); }
.cpg-step-title { font-family: var(--font-display); font-size: var(--text-body-lg, 16px); margin: 0 0 4px; color: var(--ink, #111318); }
.cpg-step-note { font-size: var(--text-small, 13px); color: var(--ink-400, #8a8d98); }
.cpg-fields { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.cpg-field-row { display: flex; gap: var(--space-3, 12px); }
.cpg-field { flex: 1; }
.cpg-field-wide { flex: 2; }
.cpg-field-full { width: 100%; }
.cpg-input {
    width: 100%;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: var(--text-small, 13px);
    color: var(--ink, #111318);
    background: white;
    border: 1px solid var(--ink-200, #e8e9ed);
    border-radius: var(--radius-sm, 6px);
    box-sizing: border-box;
}
.cpg-input:focus { outline: none; border-color: var(--teal, #3a9d8f); box-shadow: 0 0 0 2px var(--teal-100, #d4f2ea); }
.cpg-tier-reason { font-size: var(--text-small, 13px); color: var(--ink-500, #5a5d68); font-style: italic; margin: 0; }

/* Comm Plan Preview Table */
.cpg-plan-preview { border-top: 1px solid var(--ink-150, #ecedf0); padding-top: var(--space-4, 16px); }
.cpg-table-wrap { overflow-x: auto; margin: var(--space-3, 12px) 0; }
.cpg-table { width: 100%; border-collapse: collapse; font-size: var(--text-small, 13px); }
.cpg-table th {
    text-align: left; padding: 6px 8px; font-weight: 600; font-size: var(--text-label, 9px);
    text-transform: uppercase; letter-spacing: var(--ls-wide, 1px); color: var(--ink-400, #8a8d98);
    border-bottom: 2px solid var(--ink-200, #e8e9ed);
}
.cpg-table td { padding: 8px; border-bottom: 1px solid var(--ink-100, #f3f4f6); vertical-align: top; }
.cpg-td-num { width: 30px; color: var(--ink-300, #c5c7cf); font-family: var(--font-mono); }
.cpg-td-date { width: 100px; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.cpg-td-title { font-weight: 500; color: var(--ink, #111318); }
.cpg-td-owner { white-space: nowrap; }
.cpg-td-audience { max-width: 180px; color: var(--ink-500, #5a5d68); font-size: 12px; }
.cpg-td-notes { font-size: 12px; color: var(--ink-400, #8a8d98); font-style: italic; }
.cpg-notes-row td { padding-top: 0; border-bottom: 1px solid var(--ink-100, #f3f4f6); }
.cpg-channel-pill {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-full, 9999px);
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}
.cpg-ch-email { background: var(--blue-50, #eef6f8); color: var(--blue-500, #375DFE); }
.cpg-ch-social { background: var(--rust-50, #fef5f1); color: var(--rust-500, #c75b4a); }
.cpg-ch-print { background: var(--ink-100, #f3f4f6); color: var(--ink-600, #43464f); }
.cpg-ch-web { background: var(--gold-50, #fdf8ee); color: var(--gold-500, #8a6e1e); }
.cpg-ch-sms { background: var(--rust-50, #fef5f1); color: var(--rust, #c75b4a); }
.cpg-ch-media { background: var(--ink-100, #f3f4f6); color: var(--ink, #111318); }
.cpg-ch-other { background: var(--ink-50, #f8f9fa); color: var(--ink-500, #5a5d68); }
.cpg-btn-icon {
    background: none; border: none; cursor: pointer; font-size: 18px; color: var(--ink-300, #c5c7cf);
    padding: 0 4px; line-height: 1;
}
.cpg-btn-icon:hover { color: var(--rust, #c75b4a); }

/* Gap Analysis */
.cpg-gaps { margin: var(--space-4, 16px) 0; padding: var(--space-3, 12px); background: var(--ink-50, #f8f9fa); border-radius: var(--radius-sm, 6px); }
.cpg-gaps-title { font-size: var(--text-small, 13px); font-weight: 600; margin: 0 0 8px; color: var(--ink-600, #43464f); }
.cpg-gap { font-size: var(--text-small, 13px); padding: 4px 0; }
.cpg-gap-warning { color: var(--rust, #c75b4a); }
.cpg-gap-critical { color: var(--rust-600, #963d20); font-weight: 600; }
.cpg-gap-success { color: var(--teal, #3a9d8f); }

/* CPG — Generating spinner state */
.cpg-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10, 40px) var(--space-6, 24px);
    gap: var(--space-4, 16px);
}

.cpg-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ink-200, #e8e9ed);
    border-top-color: var(--teal, #3a9d8f);
    border-radius: 50%;
    animation: cpg-spin 0.8s linear infinite;
}

@keyframes cpg-spin {
    to { transform: rotate(360deg); }
}

.cpg-status-text {
    font-size: var(--text-body-lg, 16px);
    font-weight: 600;
    color: var(--ink-800, #252830);
    text-align: center;
}

.cpg-status-sub {
    font-size: var(--text-small, 13px);
    color: var(--ink-400, #8a8d98);
    text-align: center;
}

/* CPG — Metadata summary (read-only) */
.cpg-metadata-summary {
    background: var(--ink-50, #f8f9fa);
    border: 1px solid var(--ink-200, #e8e9ed);
    border-radius: var(--radius-sm, 6px);
    padding: var(--space-5, 20px);
    margin-bottom: var(--space-4, 16px);
}

.cpg-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3, 12px) var(--space-4, 16px);
}

.cpg-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cpg-meta-wide {
    grid-column: span 1;
}

.cpg-meta-full {
    grid-column: 1 / -1;
}

.cpg-meta-label {
    font-size: var(--text-small, 13px);
    font-weight: 600;
    color: var(--ink-400, #8a8d98);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cpg-meta-value {
    font-size: var(--text-body, 14px);
    color: var(--ink-800, #252830);
}

/* CPG — Feedback area */
.cpg-feedback-area {
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--ink-150, #ecedf0);
}

.cpg-textarea-sm {
    min-height: 60px;
    font-size: var(--text-body, 14px);
}

/* Comms Review Panel */
.comms-review-item:hover {
    background: var(--warm-50, #fafaf9);
}

/* ═══════════════════════════════════════════════════════════════
   THIN DRAWER (T9) — program / comm detail. Reuses ds-modal anatomy;
   focus trap + Esc + focus-return come from T8 trapFocus.
   ═══════════════════════════════════════════════════════════════ */

/* In-place text trigger: a real <button> that reads as the item's title.
   font:inherit drops the UA button chrome so it looks like the title text. */
.v2-trigger-text {
    font: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.v2-trigger-text--block { display: block; width: 100%; }
.v2-trigger-text:hover { text-decoration: underline; text-underline-offset: 2px; }
.v2-trigger-text:focus-visible {
    outline: 2px solid #375DFE;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Drawer header: title + chips stack on the left, close pins top-right */
.v2-drawer .ds-modal-header { align-items: flex-start; }
.v2-drawer-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.v2-drawer-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.v2-drawer-status {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--ink-05, #f1f2f4);
    color: var(--ink-60, #5b616e);
}
.v2-drawer-status--today    { background: #d8e7eb; color: #063b49; }
.v2-drawer-status--upcoming { background: #eef2f5; color: #143a44; }
.v2-drawer-status--past     { background: #f1f2f4; color: #8a8f99; }
.v2-drawer-status--ongoing  { background: #f3eddf; color: #9a8450; }

/* Channel pill — colors arrive inline from the locked --ch-* tokens */
.v2-drawer-chip {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}

/* Meta rows */
.v2-drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-4);
}
.v2-drawer-meta-row { display: flex; gap: 12px; align-items: baseline; }
.v2-drawer-meta-label {
    flex: 0 0 64px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-40, #8a8f99);
}
.v2-drawer-meta-value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--ink, #1a1a1a);
}
.v2-drawer-rel { color: var(--ink-40, #8a8f99); font-size: 13px; }

/* "Next:" line */
.v2-drawer-next {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: var(--space-4);
    background: #f7f5ef;
    border-left: 3px solid #c4a76c;
    border-radius: 6px;
}
.v2-drawer-next-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9a8450;
    flex-shrink: 0;
}
.v2-drawer-next-text { font-size: 14px; font-weight: 600; color: var(--ink, #1a1a1a); }

/* Section (linked comms / program block) */
.v2-drawer-section { margin-top: var(--space-4); }
.v2-drawer-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-60, #5b616e);
    margin-bottom: 10px;
}
.v2-drawer-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ink-05, #f1f2f4);
    color: var(--ink-60, #5b616e);
    font-size: 11px;
}
.v2-drawer-empty,
.v2-drawer-unlinked {
    font-size: 13px;
    color: var(--ink-40, #8a8f99);
    font-style: italic;
}

/* Linked-comm rows — each a clickable button into that comm's drawer */
.v2-drawer-comm-list { display: flex; flex-direction: column; gap: 6px; }
.v2-drawer-comm {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--ink-10, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.v2-drawer-comm:hover { border-color: var(--ink-20, #d4d7dc); box-shadow: var(--shadow-sm); }
.v2-drawer-comm:focus-visible { outline: 2px solid #375DFE; outline-offset: 1px; }
.v2-drawer-comm .comm-channel-icon { width: 28px; height: 28px; font-size: 14px; flex-shrink: 0; }
.v2-drawer-comm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v2-drawer-comm-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-drawer-comm-sub { font-size: 12px; color: var(--ink-50, #6b717d); }

/* Program link inside a comm drawer */
.v2-drawer-program-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--ink-10, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #375DFE;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.v2-drawer-program-link:hover { border-color: #375DFE; box-shadow: var(--shadow-sm); }
.v2-drawer-program-link:focus-visible { outline: 2px solid #375DFE; outline-offset: 1px; }
.v2-drawer-program-arrow { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   ATTENTION STRIP (T10) — slim band above the Programs calendar.
   White chrome (no background band); two severity chips + collision note.
   ═══════════════════════════════════════════════════════════════ */
.v2-attention-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ink-10, #e5e7eb);
}
.v2-strip-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-40, #8a8f99);
}
.v2-strip-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.v2-strip-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}
button.v2-strip-chip { cursor: pointer; transition: box-shadow var(--transition-fast), filter var(--transition-fast); }
button.v2-strip-chip:hover { filter: brightness(0.97); box-shadow: var(--shadow-sm); }
button.v2-strip-chip:focus-visible { outline: 2px solid #375DFE; outline-offset: 2px; }
.v2-strip-num { font-family: 'Bitter', serif; font-weight: 700; font-size: 15px; line-height: 1; }

/* kickoff = gold tint, at-risk = coral tint (locked severity tints) */
.v2-strip-chip--kickoff { background: #f3eddf; color: #9a8450; border-color: rgba(196, 167, 108, 0.35); }
.v2-strip-chip--risk    { background: #f8e8e4; color: #c1614a; border-color: rgba(193, 97, 74, 0.30); }
.v2-strip-chip.is-zero {
    background: transparent;
    color: var(--ink-40, #9aa0aa);
    border-color: var(--ink-10, #e5e7eb);
}
.v2-strip-chip.is-zero .v2-strip-num { color: var(--ink-30, #b4b9c1); }

.v2-strip-collision {
    background: none;
    border: 0;
    padding: 4px 4px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: #c1614a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.v2-strip-collision:hover { text-decoration: underline; text-underline-offset: 2px; }
.v2-strip-collision:focus-visible { outline: 2px solid #375DFE; outline-offset: 2px; border-radius: 3px; }
.v2-strip-collision .v2-strip-num { color: #c1614a; }

.v2-strip-clear {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #4c7a52;
}

/* ============================================================
   Palette: Cobalt + Berry  (approved by Guy, 2026-07-01)
   Header = Riptide Cobalt navy; primary/interactive = cobalt;
   tiers/accents mixed from Berry Pop + Riptide Cobalt.
   ============================================================ */
:root{
    --bg-header: #1A2240;
    --color-primary: #375DFE;
    --color-primary-hover: #2741C0;
    --color-primary-active: #1A2240;
    --color-primary-bg: #eef2ff;
    --color-info: #375DFE;
    --color-info-bg: #eef2ff;
    --color-success: #375DFE;
    --color-success-bg: #eef2ff;
    --teal-bg: #eef2ff;
}
/* Bigger, more substantial header */
.v2-header { background: #1A2240; padding-top: 22px; padding-bottom: 22px; }
.v2-header-logo img { height: 56px; }
.v2-header-title { font-size: 30px; }
/* Active tab = cobalt */
.v2-tab.active { background: #375DFE; border-color: #375DFE; color: #fff; box-shadow: 0 3px 10px rgba(55,93,254,0.30); }
.v2-tab.active:hover { background: #2741C0; border-color: #2741C0; }
/* Tier pills / labels (soft bg + readable text) */
.v2-legend-chip.tier-marquee, .v2-cal-event-dot.tier-marquee, .v2-tier-badge.tier-marquee, .fg-tier-label.tier-marquee { background: #f6e7ec; color: #9E2B50; border-color: rgba(158,43,80,0.25); }
.v2-legend-chip.tier-medium, .v2-cal-event-dot.tier-medium, .v2-tier-badge.tier-medium, .v2-tier-badge.tier-ongoing, .fg-tier-label.tier-medium, .fg-tier-label.tier-ongoing { background: #e9edff; color: #2741C0; border-color: rgba(55,93,254,0.25); }
.v2-legend-chip.tier-small, .v2-cal-event-dot.tier-small, .v2-tier-badge.tier-small, .fg-tier-label.tier-small { background: #eef1fb; color: #4a5aa0; border-color: rgba(157,176,232,0.40); }
.v2-legend-chip.tier-committee, .v2-cal-event-dot.tier-committee, .v2-tier-badge.tier-committee, .fg-tier-label.tier-committee { background: #f3e9ee; color: #6E1E3A; border-color: rgba(110,30,58,0.22); }
/* Solid tier fills (calendar dots + date badges) */
.fg-cal-dot.tier-marquee, .v2-event-date-badge.tier-marquee, .fg-date-badge.tier-marquee { background: #9E2B50; }
.fg-cal-dot.tier-medium, .v2-event-date-badge.tier-medium, .fg-date-badge.tier-medium { background: #375DFE; }
.fg-cal-dot.tier-small, .v2-event-date-badge.tier-small, .fg-date-badge.tier-small { background: #9DB0E8; }
.fg-cal-dot.tier-committee, .fg-cal-dot.tier-ongoing, .v2-event-date-badge.tier-committee, .v2-event-date-badge.tier-ongoing, .fg-date-badge.tier-committee, .fg-date-badge.tier-ongoing, .fg-date-badge.tier-series { background: #6E1E3A; }
/* Today = berry disc + periwinkle ring (both calendars) */
.v2-cal-cell.today { box-shadow: inset 0 0 0 1px #9DB0E8; }
.v2-cal-cell.today .v2-cal-day-num, .fg-cal-num--today, .v2-comms-grid .v2-cal-cell.today .v2-cal-day-num { background: #9E2B50; color: #fff; border-color: #9E2B50; }

/* ============================================================
   Polish pass  (Guy, 2026-07-01) — micro-interactions, button
   depth, focus rings, font consistency. No layout changes.
   ============================================================ */
/* Smooth state changes on interactive surfaces */
.v2-tab, .v2-cal-cell, .fg-event-item, .v2-header-icon-btn, .v2-header-sync,
.ds-btn, .v2-btn-sm-text, .v2-btn-icon, .fg-sidebar-card {
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .12s ease, color .15s ease;
}
/* Buttons inherit the UI face (kills the V1 Plus Jakarta leak on .ds-btn) */
.ds-btn { font-family: inherit; }
/* Primary buttons: subtle depth, hover lift, honest press */
.ds-btn-primary { box-shadow: 0 1px 2px rgba(26,34,64,.14); }
.ds-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(55,93,254,.26); }
.ds-btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(26,34,64,.14); }
/* Header icon buttons: rounded, gentle hover */
.v2-header-icon-btn { border-radius: 8px; }
.v2-header-icon-btn:hover { background: rgba(255,255,255,.14); }
/* Calendar cells: faint cobalt-tinted hover so they read as clickable */
.v2-cal-cell:hover { background: #f6f8ff; }
/* Unified, consistent cobalt focus ring */
.v2-tab:focus-visible, .ds-btn:focus-visible, .v2-cal-cell:focus-visible,
.v2-header-icon-btn:focus-visible, .v2-header-sync:focus-visible,
.v2-btn-sm-text:focus-visible, .v2-btn-icon:focus-visible {
    outline: 2px solid #375DFE; outline-offset: 2px; border-radius: 8px;
}
/* Sidebar cards: soft, consistent elevation */
.fg-sidebar-card { box-shadow: var(--shadow-sm); }

/* Channel legend + comm chips: drop the thin line icons (read as "AI/jagged");
   the solid color pill + bold Brother 1816 label carries it. (Guy, 2026-07-01) */
.v2-comm-chip { display: none; }
.v2-legend-chip { font-weight: 700; letter-spacing: 0.3px; padding-left: 12px; padding-right: 12px; }

/* ============================================================
   Manage — program cards (2026-07-02 rebuild). Table → cards,
   slim clickable progress pipeline, two-column drawer.
   ============================================================ */
.v2-prog-list { display: flex; flex-direction: column; gap: 10px; }
.v2-prog-empty { text-align: center; padding: 44px 20px; }

.v2-prog-card {
    background: #fff; border: 1px solid #e9ebf1; border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20,25,45,0.04); overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.v2-prog-card:hover { box-shadow: 0 6px 18px rgba(20,25,45,0.08); }
.v2-prog-card.flag { border-left: 4px solid #9E2B50; }
.v2-prog-card.past { opacity: .72; }

.v2-prog-head {
    display: grid; grid-template-columns: 1.5fr 132px 1fr 28px;
    align-items: center; gap: 22px; padding: 18px 22px; cursor: pointer;
}
.v2-prog-name { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: #1f2733; }
.v2-prog-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 9px; vertical-align: middle; }
.v2-prog-swatch.tier-marquee { background: #9E2B50; }
.v2-prog-swatch.tier-medium  { background: #375DFE; }
.v2-prog-swatch.tier-small   { background: #9DB0E8; }
.v2-prog-swatch.tier-committee, .v2-prog-swatch.tier-internal, .v2-prog-swatch.tier-ongoing, .v2-prog-swatch.tier-series { background: #6E1E3A; }
.v2-prog-sub { font-size: 13px; color: #71798a; margin-top: 6px; }

.v2-prog-cd { font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: #1f2733; }
.v2-prog-cd.risk { color: #9E2B50; }
.v2-prog-cd.past { color: #9aa2b1; font-weight: 600; }
.v2-prog-date { font-size: 12.5px; color: #71798a; margin-top: 3px; }

.v2-prog-bar { display: flex; gap: 3px; height: 8px; }
.v2-prog-seg { flex: 1; height: 8px; padding: 0; border: 0; border-radius: 3px; background: #e4e7ef; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.v2-prog-seg.on { background: #375DFE; }
.v2-prog-seg:hover { transform: scaleY(1.55); }
.v2-prog-seg:focus-visible { outline: 2px solid #375DFE; outline-offset: 2px; }
.v2-prog-meta { font-size: 12.5px; color: #71798a; font-weight: 600; margin-top: 8px; }
.v2-prog-meta.done { color: #2741C0; }
.v2-prog-chev { color: #aeb5c4; font-size: 15px; text-align: center; }

.v2-prog-drawer {
    border-top: 1px solid #e9ebf1; background: linear-gradient(180deg,#fbfcff,#fff);
    padding: 20px 24px 24px; display: grid; grid-template-columns: 1fr 300px; gap: 30px;
}
.v2-prog-rail { border-left: 1px solid #e9ebf1; padding-left: 26px; }
.v2-stage-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.v2-stage-chip {
    font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px;
    border-radius: 8px; border: 1.5px solid #dfe3ec; color: #98a0b0; background: #fff;
    cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.v2-stage-chip.on { background: #375DFE; border-color: #375DFE; color: #fff; }
.v2-stage-chip:hover { border-color: #375DFE; }
.v2-stage-chip:focus-visible { outline: 2px solid #375DFE; outline-offset: 2px; }

.v2-past-divider { display: flex; align-items: center; gap: 10px; margin: 20px 4px 6px; }
.v2-past-divider span { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: #9aa2b1; }
.v2-past-divider::after { content: ""; flex: 1; height: 1px; background: #e9ebf1; }

@media (max-width: 860px) {
    .v2-prog-head { grid-template-columns: 1fr auto; gap: 12px 18px; }
    .v2-prog-progress { grid-column: 1 / -1; }
    .v2-prog-chev { display: none; }
    .v2-prog-drawer { grid-template-columns: 1fr; }
    .v2-prog-rail { border-left: 0; padding-left: 0; border-top: 1px solid #e9ebf1; padding-top: 18px; }
}

/* ── Staleness banner (T1, 2026-07-02) — honest sync-health surface.
   Gold "notice" family (same tokens as the kickoff chip), calm, no animation.
   Distinct from .v2-data-error (red = connection problem). ── */
.v2-stale-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f3eddf;
    border: 1px solid rgba(196, 167, 108, 0.35);
    border-radius: 10px;
    color: #9a8450;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 10px 16px;
    margin-bottom: 14px;
}
.v2-stale-banner strong { color: #7c6a3f; font-weight: 700; }

/* ── Timing on the face (T2, 2026-07-02) ──
   Stage-chip weeks sublabel, tier-reference swatch, and the "Tiers & timelines"
   legend link that surfaces the reference Hava said was buried. */
.v2-stage-chip-wk {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #98a0b0;
    line-height: 1.2;
    margin-top: 1px;
}
.v2-stage-chip.on .v2-stage-chip-wk { color: rgba(255, 255, 255, 0.7); }
.v2-tier-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;       /* LTR: swatch sits left of the tier name */
    vertical-align: baseline;
}
.v2-legend-tiers-link {
    margin-left: auto;       /* LTR flex row: push the link to the far right */
    font-size: 12.5px;
}
.fg-legend .v2-legend-tiers-link { margin-left: 12px; }

/* ── Communications Plan section + seed confirm modal (T4, 2026-07-02) ── */
.v2-plan-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.v2-seed-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}
.v2-seed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e9ebf1;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
}
.v2-seed-row:hover { border-color: #9DB0E8; }
.v2-seed-check { accent-color: #375DFE; }
.v2-seed-title { flex: 1; font-size: 13.5px; color: #1f2733; }
.v2-seed-date { font-size: 12.5px; color: #71798a; font-variant-numeric: tabular-nums; }

/* ── Reported changes (N2) — Guy's inbox rows in the Manage drawer ── */
.v2-report-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #f0d9e1;
    background: #fdf7f9;
    border-radius: 8px;
    margin-bottom: 6px;
}
.v2-report-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.v2-report-text { font-size: 13.5px; color: #1f2733; }
.v2-report-meta { font-size: 11.5px; color: #98a0b0; }

/* Integrations honesty note (feedback round 1) */
.v2-integrations-note { font-size: 11.5px; color: #98a0b0; margin: -4px 0 8px; line-height: 1.45; }

/* Final-check strip chip (T8/A10) — berry family; gold = kickoff, coral = at-risk */
.v2-strip-chip--final { background: #f6e7ec; color: #9E2B50; border-color: rgba(158, 43, 80, 0.25); }
/* Teams link on the Emails stage row (B5d/A14) */
.v2-stage-chip-link { display: block; font-size: 11.5px; color: #375DFE; text-decoration: none; padding: 2px 4px; }
.v2-stage-chip-link:hover { text-decoration: underline; }

/* A13 — plain-language timeline position line in both program drawers */
.v2-drawer-timeline-line {
    font-size: 12.5px;
    color: #71798a;
    padding: 6px 2px 10px;
    border-bottom: 1px solid #f0f2f6;
    margin-bottom: 10px;
}
.v2-drawer-timeline-line strong { color: #2741C0; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   safePersist failure surface (W1, 2026-07-03 — approved plan)
   ONE honest failure banner: fixed top-center overlay mounted in
   #save-error-root (a shell node OUTSIDE the per-tab re-renders),
   .v2-data-error color family, role=alert. Persistent until acted
   on: Esc does not dismiss, focus is never stolen, updates in
   place on repeat failures. Actions are >=44px touch targets.
   ══════════════════════════════════════════════════════════════ */
#save-error-root {
    position: fixed;
    top: 112px;               /* clears the taller navy header */
    left: 50%;
    transform: translateX(-50%);
    z-index: 350;             /* above tab content, below toasts (z-300 is Tailwind-scoped) */
    width: min(560px, calc(100vw - 32px));
    pointer-events: none;     /* the root never blocks clicks; the banner itself does */
}
#save-error-root .v2-save-error { pointer-events: auto; }
.v2-save-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fdecea;
    border: 1px solid #e7b8af;
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
    box-shadow: 0 10px 28px rgba(26, 34, 64, 0.22);
}
.v2-save-error-text { font-family: var(--font-body); font-size: 14px; color: #8a3d2e; line-height: 1.45; }
.v2-save-error-hint { font-weight: 400; }
.v2-save-error-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.v2-save-error-actions .ds-btn { min-height: 44px; min-width: 72px; }
.v2-save-error-dismiss {
    min-height: 44px;
    min-width: 44px;
    border: none;
    background: transparent;
    color: #8a3d2e;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}
.v2-save-error-dismiss:hover { background: rgba(138, 61, 46, 0.08); }
.v2-save-error-dismiss:focus-visible { outline: 2px solid #375DFE; outline-offset: 2px; }

/* In-flight write (approved control state): visible pending, no animation.
   pointer-events off so a mid-flight tap is a no-op even before the disabled
   attribute lands; the pendingWrites guard is the real gate. */
.v2-pending { opacity: 0.6; pointer-events: none; }