/* Custom CSS for IGNIFY Administration */

/* ============================================================================
 * Phase 4.5 Slice D.4 — Visual system tokens
 * ============================================================================
 *
 * Design tokens for the admin UI. New surfaces should consume these via
 * `var(--token-name)` instead of hardcoded values. Existing rules below
 * use hardcoded values; they continue to work and migrate opportunistically
 * to tokens as they're touched.
 *
 * Vocabulary
 * ----------
 *   --color-*        Raw palette swatches (warm teal primary + warm-stone
 *                    neutrals). Use the SEMANTIC tokens (--surface-*,
 *                    --text-*, --border-*) in component code; reach into
 *                    raw palette only when a semantic doesn't fit.
 *
 *   --surface-*      Background fills for distinct UI layers (page, card,
 *                    inset). Layered light-to-dark when multiple stack.
 *
 *   --text-*         Foreground colors for text. `default` for body copy,
 *                    `muted` for secondary, `inverse` for dark surfaces.
 *
 *   --border-*       Hairline + emphasis borders. `default` for cards;
 *                    `strong` for active/focus states.
 *
 *   --status-*       Semantic intent colors (success, warning, danger,
 *                    info) — applied to badges, alerts, status pills.
 *
 *   --font-*         Family stacks + weight scale. Inter is the primary
 *                    face; system fallback chain is comprehensive so the
 *                    UI remains crisp before Inter loads.
 *
 *   --space-*        4px base scale (0.5x, 1x, 2x, 3x, 4x, 6x, 8x, 12x).
 *                    Use these for padding/margin/gap; never inline px.
 *
 *   --radius-*       Border-radius scale: sm (cards), md (buttons),
 *                    lg (dialogs), pill (badges, chips).
 *
 *   --shadow-*       Elevation: e1 (resting card), e2 (hover/active),
 *                    e3 (popover), e4 (dialog overlay).
 *
 *   --transition-*   Animation primitives: `fast` (focus ring, hover),
 *                    `base` (content fades), `slow` (drawer slide).
 *
 * Naming convention: every token is BCP-style kebab-case; semantic
 * tokens come BEFORE raw palette references in the file so the
 * cascade resolution path is visible at a glance.
 * ============================================================================ */
:root {
    /* ── Raw palette — COCKPIT REBRAND (2026-06-11) ─────────────────────
     * The legacy var NAMES are kept (20k LOC reference them) but their
     * VALUES now resolve to the IGNIFY cockpit brand: navy #0A183A
     * primary, yellow #FDD140 accent (fills only), paper #FAF8F2, warm
     * sand insets, cool ink neutrals. Source of truth:
     * ignify-stack/docs/strategy/admin_cockpit_design_prompt.md +
     * the design-system cockpit bundle (tokens.css).
     * "teal" is now an alias ramp for the navy primary. */
    --color-teal-50:  #FFFAE8;   /* emphasis wash → yellow-50 */
    --color-teal-100: #E3E8F4;   /* navy-100 */
    --color-teal-200: #C9CEDC;
    --color-teal-300: #2A4180;   /* navy-500 */
    --color-teal-400: #1B2F66;   /* navy-600 */
    --color-teal-500: #0A183A;   /* primary → navy-800 */
    --color-teal-600: #8A6A00;   /* link shade → yellow-700 (AA on paper) */
    --color-teal-700: #13234E;   /* navy-700 */
    --color-teal-800: #0A183A;
    --color-teal-900: #060F28;

    /* ── Raw palette ─ ink neutrals on warm paper/sand ─────────────────── */
    --color-stone-50:  #FAF8F2;  /* paper */
    --color-stone-100: #F3F0E7;  /* sand-100 */
    --color-stone-200: #EAE6D8;  /* sand-200 */
    --color-stone-300: #C9CEDC;  /* ink-200 */
    --color-stone-400: #A6ACC0;  /* ink-300 */
    --color-stone-500: #7C849C;  /* ink-400 */
    --color-stone-600: #4A5470;  /* ink-600 */
    --color-stone-700: #2A3354;
    --color-stone-800: #1B2440;  /* ink-900 */
    --color-stone-900: #0A183A;

    /* ── Status / intent palette (cockpit semantic ramps) ──────────────── */
    --color-success-bg:    #D6F0E5;
    --color-success-fg:    #059669;
    --color-warning-bg:    #FCEFCB;
    --color-warning-fg:    #C77D08;
    --color-danger-bg:     #FCE3E1;
    --color-danger-fg:     #DC2626;
    --color-info-bg:       #DEE9FC;
    --color-info-fg:       #2563EB;

    /* ── Semantic surface ──────────────────────────────────────────────── */
    --surface-page:        var(--color-stone-50);
    --surface-card:        #FFFFFF;
    --surface-inset:       var(--color-stone-100);
    --surface-overlay:     rgba(31, 30, 26, 0.45);
    --surface-emphasis:    var(--color-teal-50);

    /* ── Semantic text ─────────────────────────────────────────────────── */
    --text-default:        var(--color-stone-800);
    --text-muted:          var(--color-stone-600);
    --text-subtle:         var(--color-stone-500);
    --text-inverse:        var(--color-stone-50);
    --text-link:           var(--color-teal-600);
    --text-link-hover:     var(--color-teal-700);
    --text-on-primary:     #FFFFFF;

    /* ── Semantic border ───────────────────────────────────────────────── */
    --border-default:      var(--color-stone-200);
    --border-strong:       var(--color-stone-300);
    --border-focus:        var(--color-teal-500);

    /* ── Semantic status (for badges, alerts, status pills) ────────────── */
    --status-success-bg:   var(--color-success-bg);
    --status-success-fg:   var(--color-success-fg);
    --status-warning-bg:   var(--color-warning-bg);
    --status-warning-fg:   var(--color-warning-fg);
    --status-danger-bg:    var(--color-danger-bg);
    --status-danger-fg:    var(--color-danger-fg);
    --status-info-bg:      var(--color-info-bg);
    --status-info-fg:      var(--color-info-fg);

    /* ── Typography ────────────────────────────────────────────────────── */
    /* Cockpit canon: Outfit for body/UI, Plus Jakarta Sans for display/
     * headings, IBM Plex Mono for ids/numbers. Fallback chain keeps the
     * UI crisp before the webfonts resolve. */
    --font-sans:           'Outfit', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', Roboto, 'Helvetica Neue', Arial,
                           sans-serif;
    --font-display:        'Plus Jakarta Sans', -apple-system,
                           BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:           'IBM Plex Mono', 'SF Mono', Menlo, Consolas,
                           'Liberation Mono', monospace;

    --font-size-xs:        12px;
    --font-size-sm:        13px;
    --font-size-base:      14px;
    --font-size-md:        15px;
    --font-size-lg:        17px;
    --font-size-xl:        20px;
    --font-size-2xl:       24px;
    --font-size-3xl:       30px;
    --font-size-4xl:       36px;

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    --line-height-tight:   1.25;
    --line-height-base:    1.5;
    --line-height-loose:   1.75;

    /* ── Spacing scale (4px base) ──────────────────────────────────────── */
    --space-0:             0;
    --space-px:            1px;
    --space-0_5:           2px;   /* 0.5x */
    --space-1:             4px;
    --space-2:             8px;
    --space-3:             12px;
    --space-4:             16px;
    --space-5:             20px;
    --space-6:             24px;
    --space-8:             32px;
    --space-10:            40px;
    --space-12:            48px;
    --space-16:            64px;
    --space-20:            80px;
    --space-24:            96px;

    /* ── Border radius ─────────────────────────────────────────────────── */
    --radius-none:         0;
    --radius-sm:           4px;   /* cards, inputs */
    --radius-md:           6px;   /* buttons */
    --radius-lg:           10px;  /* dialogs, sheets */
    --radius-xl:           16px;  /* hero panels */
    --radius-pill:         9999px; /* badges, chips */

    /* ── Shadows (elevation) ───────────────────────────────────────────── */
    --shadow-e1:           0 1px 2px rgba(31, 30, 26, 0.06),
                           0 1px 1px rgba(31, 30, 26, 0.04);
    --shadow-e2:           0 2px 6px rgba(31, 30, 26, 0.08),
                           0 1px 2px rgba(31, 30, 26, 0.04);
    --shadow-e3:           0 8px 16px rgba(31, 30, 26, 0.10),
                           0 2px 4px rgba(31, 30, 26, 0.06);
    --shadow-e4:           0 16px 32px rgba(31, 30, 26, 0.14),
                           0 4px 8px rgba(31, 30, 26, 0.08);
    --shadow-focus-ring:   0 0 0 3px rgba(253, 209, 64, 0.45);

    /* ── Transitions ───────────────────────────────────────────────────── */
    --transition-fast:     120ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-base:     200ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow:     300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ============================================================================
 * COCKPIT TOKENS (2026-06-11) — 3-tier, ported verbatim from the Claude
 * Design cockpit bundle (cockpit/tokens.css). New cockpit surfaces consume
 * these; the legacy "--color- / --surface- / --text-" names above now
 * resolve to the same palette, so both vocabularies agree.
 * (NB: never write a star-slash glob inside a CSS comment — it terminates
 * the comment and the trailing junk swallows the next rule block.)
 * ============================================================================ */
/* tier 1 · primitives */
:root{
  --ck-navy-900:#060F28; --ck-navy-800:#0A183A; --ck-navy-700:#13234E;
  --ck-navy-600:#1B2F66; --ck-navy-500:#2A4180; --ck-navy-100:#E3E8F4;
  --ck-yellow-500:#FDD140; --ck-yellow-600:#EAB81F; --ck-yellow-700:#8A6A00;
  --ck-yellow-100:#FEF3C9; --ck-yellow-50:#FFFAE8;
  --ck-ink-900:#1B2440; --ck-ink-600:#4A5470; --ck-ink-400:#7C849C;
  --ck-ink-300:#A6ACC0; --ck-ink-200:#C9CEDC;
  --ck-paper:#FAF8F2; --ck-white:#FFFFFF;
  --ck-sand-100:#F3F0E7; --ck-sand-200:#EAE6D8;
  --ck-green-600:#059669; --ck-green-100:#D6F0E5;
  --ck-amber-600:#C77D08; --ck-amber-500:#F59E0B; --ck-amber-100:#FCEFCB;
  --ck-red-600:#DC2626;  --ck-red-500:#EF4444;  --ck-red-100:#FCE3E1;
  --ck-blue-600:#2563EB; --ck-blue-100:#DEE9FC;
  --ck-violet-600:#7C3AED; --ck-violet-100:#EBE2FB;
  --ck-teal-600:#0D9488; --ck-teal-100:#CCF0EC;
  --ck-pink-600:#DB2777; --ck-pink-100:#FBE2EE;
  --ck-r-sm:8px; --ck-r-md:12px; --ck-r-lg:16px; --ck-r-tile:14px;
  --ck-r-xl:20px; --ck-r-pill:999px;
  --ck-sh-1:0 1px 2px rgba(10,24,58,.04),0 1px 3px rgba(10,24,58,.05);
  --ck-sh-2:0 2px 4px -1px rgba(10,24,58,.05),0 4px 10px -2px rgba(10,24,58,.07);
  --ck-sh-3:0 6px 16px -4px rgba(10,24,58,.10),0 16px 32px -8px rgba(10,24,58,.14);
  --ck-dur-quick:120ms; --ck-dur-std:240ms; --ck-dur-emph:360ms;
  --ck-ease:cubic-bezier(.4,0,.2,1); --ck-ease-out:cubic-bezier(.33,1,.68,1);
  --ck-font-display:var(--font-display);
  --ck-font-body:var(--font-sans);
  --ck-font-mono:var(--font-mono);
}
/* tier 2 · semantic */
:root{
  --bg-app:var(--ck-paper); --bg-surface:var(--ck-white);
  --bg-sunken:var(--ck-sand-100); --bg-inverse:var(--ck-navy-800);
  --fg-1:var(--ck-ink-900); --fg-2:var(--ck-ink-600); --fg-3:var(--ck-ink-400);
  --fg-inverse:#F4F6FC;
  --line-1:rgba(27,36,64,.10); --line-2:rgba(27,36,64,.16);
  --accent-fill:var(--ck-yellow-500);   /* fills/highlights ONLY */
  --accent-text:var(--ck-yellow-700);   /* AA text/link shade    */
  --accent-soft:var(--ck-yellow-100);
  --primary:var(--ck-navy-800);
  --ok:var(--ck-green-600);   --ok-soft:var(--ck-green-100);
  --warn:var(--ck-amber-600); --warn-soft:var(--ck-amber-100);
  --danger:var(--ck-red-600); --danger-soft:var(--ck-red-100);
  --info:var(--ck-blue-600);  --info-soft:var(--ck-blue-100);
  --ai:var(--ck-violet-600);  --ai-soft:var(--ck-violet-100);  --ai-text:var(--ai);
  --focus-ring:0 0 0 3px rgba(253,209,64,.45);
}
/* tier 3 · component */
:root{
  --nav-w:236px; --nav-item-h:36px;
  --nav-active-bg:var(--accent-soft); --nav-active-fg:var(--ck-navy-800);
  --nav-badge-bg:var(--ck-navy-800);
  --header-h:56px; --chip-h:22px; --table-row-h:46px;
  --card-r:var(--ck-r-lg); --btn-h:36px; --btn-r:10px; --drawer-w:460px;
  --env-prod:var(--ck-red-600); --env-dev:var(--ck-ink-400);
  --sev-critical:var(--ck-red-600);   --sev-critical-soft:var(--ck-red-100);
  --sev-high:var(--ck-amber-600);     --sev-high-soft:var(--ck-amber-100);
  --sev-medium:var(--ck-blue-600);    --sev-medium-soft:var(--ck-blue-100);
  --sev-low:var(--ck-ink-400);        --sev-low-soft:var(--ck-sand-100);
  --dom-chat:var(--ck-teal-600);   --dom-chat-soft:var(--ck-teal-100);
  --dom-rpt:var(--ck-violet-600);  --dom-rpt-soft:var(--ck-violet-100);
  --dom-sched:var(--ck-blue-600);  --dom-sched-soft:var(--ck-blue-100);
  --dom-bill:var(--ck-green-600);  --dom-bill-soft:var(--ck-green-100);
  --dom-gcal:var(--ck-amber-600);  --dom-gcal-soft:var(--ck-amber-100);
  --dom-comm:var(--ck-pink-600);   --dom-comm-soft:var(--ck-pink-100);
  --dom-auth:var(--ck-ink-600);    --dom-auth-soft:var(--ck-sand-100);
}

/* ============================================================================
 * D.4 dogfood — refactor body + page surface to consume tokens.
 * Existing class rules below this block continue to use hardcoded values;
 * they're untouched so this slice ships zero risk to current screens.
 * Migrate them opportunistically as surfaces are touched.
 * ============================================================================ */

body {
    font-family: var(--font-sans);
    background: var(--surface-page);
    color: var(--text-default);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    overflow-x: hidden;
}

/* Layout Styles */
.nav-md .container.body {
    margin: 0;
    width: 100%;
}

.nav-md .main_container {
    position: relative;
    width: 100%;
}

.nav-md .main_container .left_col {
    width: 230px;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    overflow-y: auto;
}

.nav-md .container.body .right_col {
    margin-left: 230px;
    width: calc(100% - 230px);
    padding: 20px;
    min-height: 100vh;
}

/* Responsive */
@media (max-width: 991px) {
    .nav-md .container.body .right_col {
        margin-left: 0;
        width: 100%;
    }
    
    .nav-md .main_container .left_col {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .nav-md .main_container .left_col.active {
        transform: translateX(0);
    }
}

/* Sidebar Styles */
.left_col {
    background: #013B69;
    color: white;
}

.left_col .scroll-view {
    height: 100%;
    padding-bottom: 60px;
}

/* Navigation Title */
.navbar.nav_title {
    background: white;
    border: 0;
    margin-bottom: 0;
    padding: 0;
    height: 65px;
    display: flex;
    align-items: center;
}

.navbar.nav_title a.site_title {
    color: #013B69 !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    width: 100%;
}

.navbar.nav_title a.site_title img {
    border-radius: 50%;
    margin-right: 10px;
}

/* Profile Section */
.profile {
    background: rgba(255, 255, 255, 0.1);
    margin: 0 15px 20px;
    padding: 15px;
    border-radius: 10px;
}

.profile_pic {
    float: left;
    margin-right: 15px;
}

.profile_img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
}

.profile_info {
    overflow: hidden;
}

.profile_info span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.profile_info h2 {
    font-size: 16px;
    color: white;
    margin: 0;
    font-weight: 300;
}

/* Sidebar Menu */
.main_menu_side {
    padding: 0;
}

.side-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu > li > a {
    color: rgba(255, 255, 255, 0.9);
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.side-menu > li > a:hover,
.side-menu > li.active > a {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.side-menu > li > a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Child Menu */
.child_menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.2);
    display: none;
}

.side-menu > li.active .child_menu {
    display: block;
}

.child_menu li a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    padding: 10px 15px 10px 45px;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.child_menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Top Navigation */
.top_nav {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    width: calc(100% - 230px);
    height: 65px;
    margin-left: 230px;
}

@media (max-width: 991px) {
    .top_nav {
        width: 100%;
        margin-left: 0;
    }
}

.nav_menu {
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.nav.toggle {
    display: flex;
    align-items: center;
}

#menu_toggle {
    color: #013B69;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
}

/* Main Content */
.right_col {
    margin-top: 65px;
    padding-top: 20px;
}

/* Tiles */
.tile_count {
    margin-bottom: 30px;
}

.tile_stats_count {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.count_top {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    display: block;
    font-weight: 500;
}

.count {
    font-size: 32px;
    font-weight: bold;
    color: #013B69;
    line-height: 1;
}

/* Panels */
.x_panel {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
}

.x_title {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

.x_title h2 {
    margin: 0;
    font-size: 18px;
    color: #013B69;
    font-weight: 500;
}

.x_content {
    padding: 20px;
}

/* Tables */
.table {
    margin-bottom: 0;
}

.table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #013B69;
    color: #013B69;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.table td {
    vertical-align: middle;
    font-size: 14px;
}

/* Buttons */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #013B69;
    border-color: #013B69;
}

.btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
}

.btn-success {
    background: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background: #218838;
    border-color: #218838;
    transform: translateY(-1px);
}

/* Forms */
.form-control {
    border-radius: 6px;
    border: 2px solid #e9ecef;
    padding: 10px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #013B69;
    box-shadow: 0 0 0 0.2rem rgba(1, 59, 105, 0.25);
}

/* Badge */
.badge {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 15px;
}

.badge-success {
    background: #28a745;
    color: white;
}

/* Footer */
footer {
    background: white;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    margin-top: 40px;
    color: #666;
    font-size: 13px;
}

/* Utilities */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.pull-right {
    float: right;
}

.text-muted {
    color: #6c757d;
}

/* Loading and Error States */
.loading {
    text-align: center;
    padding: 50px;
    color: #666;
}

.loading i {
    font-size: 24px;
    margin-right: 10px;
}

.error {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #f5c6cb;
}

.error i {
    margin-right: 8px;
}

/* Page Title */
.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.title_left h3 {
    margin: 0;
    color: #013B69;
    font-weight: 500;
}

.title_right {
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .title_right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Notifications */
.notification {
    position: relative;
    margin-bottom: 15px;
    z-index: 1050;
}

.notification .btn-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.notification .btn-close:hover {
    opacity: 1;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.alert-error,
.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Navigation active states */
.side-menu > li.active > a {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.side-menu > li.active .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Mobile responsive improvements */
@media (max-width: 991px) {
    .left_col {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .left_col.active {
        transform: translateX(0);
    }
    
    .tile_stats_count {
        margin-bottom: 15px;
    }
    
    .x_panel {
        margin-bottom: 20px;
    }
    
    .profile_info h2 {
        font-size: 14px;
    }
    
    .side-menu > li > a {
        padding: 15px;
        font-size: 16px;
    }
}
/* ============================================================================
 * COCKPIT COMPONENTS (2026-06-11) — ported from the design-system cockpit
 * bundle (cockpit/cockpit.css), prefixed `ck-` so they can't collide with
 * legacy classes. Shared by the shell + Today and every future cockpit
 * surface (tickets/costs/outreach/...). Dense-but-calm: state via tokens +
 * chips, not banners. No emojis. Phosphor icons.
 * ============================================================================ */
.ck-mono{font-family:var(--ck-font-mono);font-variant-numeric:tabular-nums}
.ck-muted{color:var(--fg-2)}.ck-faint{color:var(--fg-3)}

.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--btn-h);padding:0 14px;border-radius:var(--btn-r);border:0;cursor:pointer;text-decoration:none;
  font-family:var(--ck-font-body);font-weight:600;font-size:13px;white-space:nowrap;transition:transform 80ms var(--ck-ease),background-color var(--ck-dur-quick),box-shadow var(--ck-dur-quick)}
.ck-btn:active{transform:scale(.97)}
.ck-btn i{font-size:15px}
.ck-btn-primary{background:var(--accent-fill);color:var(--ck-navy-800);box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.ck-btn-primary:hover{background:var(--ck-yellow-600)}
.ck-btn-navy{background:var(--ck-navy-800);color:#fff}
.ck-btn-navy:hover{background:var(--ck-navy-700)}
.ck-btn-ghost{background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg-1)}
.ck-btn-ghost:hover{background:var(--bg-sunken)}
.ck-btn-quiet{background:transparent;color:var(--fg-2)}
.ck-btn-quiet:hover{background:var(--bg-sunken);color:var(--fg-1)}
.ck-btn-danger{background:var(--danger);color:#fff}
.ck-btn-danger:hover{filter:brightness(.94)}
/* Trust & Safety: per-message redact / per-participant eject — quiet until row hover. */
.ts-msg-act{opacity:0;border:0;background:transparent;color:var(--fg-3);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:6px;transition:opacity .12s,background .12s}
.ts-msg:hover .ts-msg-act{opacity:1}
.ts-msg-act:hover{background:var(--danger-soft);color:var(--danger)}
.ts-redacted{color:var(--fg-3);font-style:italic}
.ck-btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.ck-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.ck-card{background:var(--bg-surface);border-radius:var(--card-r);box-shadow:inset 0 0 0 1px var(--line-1),var(--ck-sh-1)}
.ck-card-pad{padding:16px}
.ck-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-1)}
.ck-card-h .t{font-family:var(--ck-font-display);font-weight:700;font-size:13.5px}

.ck-chip{display:inline-flex;align-items:center;gap:5px;height:var(--chip-h);padding:0 8px;border-radius:7px;font-size:11px;font-weight:600;white-space:nowrap}
.ck-chip i{font-size:12px}
.ck-chip-sev-critical{background:var(--sev-critical-soft);color:var(--sev-critical)}
.ck-chip-sev-high{background:var(--sev-high-soft);color:var(--sev-high)}
.ck-chip-sev-medium{background:var(--sev-medium-soft);color:var(--sev-medium)}
.ck-chip-sev-low{background:var(--sev-low-soft);color:var(--sev-low)}
.ck-chip-ok{background:var(--ok-soft);color:var(--ok)}
.ck-chip-warn{background:var(--warn-soft);color:var(--warn)}
.ck-chip-danger{background:var(--danger-soft);color:var(--danger)}
.ck-chip-info{background:var(--info-soft);color:var(--info)}
.ck-chip-ai{background:var(--ai-soft);color:var(--ai)}
.ck-chip-neutral{background:var(--bg-sunken);color:var(--fg-2)}
.ck-chip-src{background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg-2)}

.ck-sla{font-family:var(--ck-font-mono);font-size:10.5px}
.ck-sla-ok{background:var(--bg-sunken);color:var(--fg-2)}
.ck-sla-warn{background:var(--warn-soft);color:var(--warn)}
.ck-sla-breach{background:var(--danger);color:#fff}

.ck-cat{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-family:var(--ck-font-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;cursor:pointer}
.ck-cat:hover{filter:brightness(.96)}
/* Compact catalog cell: one chip + a "+N" affordance; full list on hover. */
.ck-cat-cell{display:inline-flex;align-items:center;gap:5px;max-width:100%}
.ck-cat-cell .ck-cat{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-cat-more{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px;border:1px solid var(--border-1);
  background:var(--bg-sunken);color:var(--fg-2);border-radius:6px;font-family:var(--ck-font-mono);font-size:10.5px;font-weight:600;cursor:pointer;flex:none}
.ck-cat-more:hover{background:var(--ck-yellow-100,#fff7d6);border-color:var(--ck-yellow-600,#caa400);color:var(--fg-1)}
.ck-cat-more i{font-size:10px}
.ck-cat-morepop{position:fixed;z-index:1200;display:flex;flex-wrap:wrap;gap:6px;max-width:340px;padding:10px;
  background:var(--bg-surface,#fff);border:1px solid var(--border-1);border-radius:12px;
  box-shadow:0 12px 34px rgba(10,24,58,.16);opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s;pointer-events:auto}
.ck-cat-morepop.show{opacity:1;transform:none}

.ck-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:600}
.ck-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.ck-pill-neutral{background:var(--bg-sunken);color:var(--fg-2)}
.ck-pill-info{background:var(--info-soft);color:var(--info)}
.ck-pill-ok{background:var(--ok-soft);color:var(--ok)}
.ck-pill-warn{background:var(--warn-soft);color:var(--warn)}
.ck-pill-danger{background:var(--danger-soft);color:var(--danger)}
.ck-pill-navy{background:var(--ck-navy-800);color:#fff}

.ck-kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:5px;background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--line-1);font-family:var(--ck-font-mono);font-size:10px;color:var(--fg-3)}

.ck-avatar{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ck-font-display);font-weight:700;font-size:10px;background:var(--ck-navy-100);color:var(--ck-navy-700);box-shadow:inset 0 0 0 1px var(--line-1)}

.ck-env{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;font-family:var(--ck-font-mono);font-size:11px;font-weight:700;letter-spacing:.08em}
.ck-env-prod{background:var(--env-prod);color:#fff}
.ck-env-prod::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:ck-envpulse 2s var(--ck-ease) infinite}
@keyframes ck-envpulse{0%,100%{opacity:1}50%{opacity:.4}}
.ck-env-dev{background:var(--bg-sunken);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.ck-env-staging{background:var(--warn-soft);color:var(--warn)}
.ck-env-local{background:var(--info-soft);color:var(--info)}

/* KPI cards */
.ck-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
@media(max-width:1400px){.ck-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.ck-kpis{grid-template-columns:repeat(2,1fr)}}
.ck-kpi{padding:13px 15px;display:block;color:inherit;text-decoration:none;transition:box-shadow var(--ck-dur-quick),transform var(--ck-dur-quick) var(--ck-ease)}
a.ck-kpi:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--ck-sh-2);transform:translateY(-1px)}
.ck-kpi .l{font-family:var(--ck-font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3)}
.ck-kpi .v{font-family:var(--ck-font-display);font-weight:700;font-size:24px;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--fg-1)}
.ck-kpi .m{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;color:var(--fg-3);flex-wrap:wrap}
.ck-kpi .delta{font-weight:600}
.ck-kpi .delta.up{color:var(--ok)}.ck-kpi .delta.down{color:var(--danger)}

/* decision feed */
.ck-feed-grp{margin-bottom:18px}
.ck-feed-grp .gh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ck-fitem{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-surface);border-radius:var(--ck-r-md);
  box-shadow:inset 0 0 0 1px var(--line-1);margin-bottom:6px;transition:box-shadow var(--ck-dur-quick),transform var(--ck-dur-quick) var(--ck-ease)}
.ck-fitem:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--ck-sh-2)}
.ck-fitem .sum{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-1)}
.ck-fitem .sum b{font-weight:600}
.ck-fitem .age{font-family:var(--ck-font-mono);font-size:11px;color:var(--fg-3);white-space:nowrap}

/* funnel micro-viz */
.ck-funnel{display:flex;align-items:flex-end;gap:5px;height:54px}
.ck-funnel .bar{flex:1;border-radius:5px 5px 0 0;background:var(--ck-navy-100);position:relative;min-width:34px}
.ck-funnel .bar.hot{background:var(--accent-fill)}
.ck-funnel .bar span{position:absolute;top:-17px;left:0;right:0;text-align:center;font-family:var(--ck-font-mono);font-size:10px;color:var(--fg-2)}
.ck-funnel-lbls{display:flex;gap:5px;margin-top:5px}
.ck-funnel-lbls div{flex:1;text-align:center;font-size:10px;color:var(--fg-3);min-width:34px}

/* AI suggestion card — visually distinct, never "confirmed fact" */
.ck-ai-card{background:linear-gradient(180deg,var(--ai-soft),var(--bg-surface) 88%);border-radius:var(--ck-r-md);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.22);padding:13px 14px}
.ck-ai-tag{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;border-radius:6px;background:var(--ai);color:#fff;
  font-family:var(--ck-font-mono);font-size:9.5px;font-weight:700;letter-spacing:.08em}

/* empty / skeleton */
.ck-empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:44px 20px;text-align:center;color:var(--fg-3)}
.ck-empty i{font-size:26px;color:var(--ck-ink-300)}
.ck-empty .t{font-family:var(--ck-font-display);font-weight:700;font-size:14px;color:var(--fg-2)}

/* ============================================================================
 * COCKPIT — TICKETS (Phase 1, 2026-06-11). Components for the Tickets queue,
 * detail (3-col evidence|work|triage), and epic pages. ck- prefixed; ported
 * from the design-system bundle (cockpit.css) tickets/ticket-detail/epic.
 * ============================================================================ */
/* saved-view tabs */
.ck-views{display:flex;gap:4px;border-bottom:1px solid var(--line-1);margin-bottom:12px;flex-wrap:wrap;}
.ck-views button{height:34px;padding:0 12px;font-size:12.5px;font-weight:600;color:var(--fg-3);border:0;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;display:inline-flex;align-items:center;}
.ck-views button:hover{color:var(--fg-1);}
.ck-views button.on{color:var(--fg-1);border-bottom-color:var(--accent-fill);}
.ck-vc{font-family:var(--font-mono);font-size:10px;margin-left:5px;color:var(--fg-3);}
/* filter bar */
.ck-fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.ck-fsel{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--line-1);font-size:12px;font-weight:500;color:var(--fg-2);cursor:pointer;border:0;}
.ck-fsel:hover{box-shadow:inset 0 0 0 1px var(--line-2);}
.ck-fsel b{color:var(--fg-1);font-weight:600;}
.ck-fsel i{font-size:12px;color:var(--fg-3);}
/* table */
.ck-tbl{width:100%;border-collapse:collapse;}
.ck-tbl thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-1);white-space:nowrap;}
.ck-tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--line-1);vertical-align:middle;}
.ck-tbl tbody tr{transition:background-color var(--ck-dur-quick);}
.ck-tbl tbody tr:hover{background:var(--ck-yellow-50);}
.ck-tbl tbody tr:last-child td{border-bottom:0;}
/* Resizable columns — fixed layout so th widths are honoured; grip on the
   right edge of each header. Cells clip overflow so a narrowed column ellipses
   rather than wrapping. */
.ck-tbl-resz{table-layout:fixed;}
.ck-tbl-resz thead th{position:relative;overflow:hidden;text-overflow:ellipsis;}
.ck-tbl-resz tbody td{overflow:hidden;}
.ck-col-grip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:2;}
.ck-col-grip::after{content:"";position:absolute;top:50%;right:4px;transform:translateY(-50%);width:1px;height:14px;background:var(--line-2);transition:background .12s;}
.ck-col-grip:hover::after{background:var(--ck-yellow-600,#caa400);width:2px;}
body.ck-resizing{cursor:col-resize;user-select:none;}
body.ck-resizing .ck-tbl-resz tbody tr:hover{background:transparent;}
/* Inline row editors (assignee / status) — look like quiet text until hover. */
.ck-rowsel{max-width:100%;border:1px solid transparent;background:transparent;border-radius:7px;height:26px;padding:0 4px;
  font:inherit;font-size:12px;color:var(--fg-1);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:none;transition:border-color .12s,background .12s;}
.ck-rowsel:hover{border-color:var(--line-2);background:var(--bg-surface);}
.ck-rowsel:focus{outline:none;border-color:var(--ck-yellow-600,#caa400);background:var(--bg-surface);box-shadow:var(--focus-ring);}
.ck-rowsel-st{font-weight:600;}
/* Epics index grid. */
.ck-epic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:14px;}
.ck-epic-card{text-decoration:none;color:inherit;cursor:pointer;transition:transform var(--ck-dur-quick),box-shadow var(--ck-dur-quick);}
.ck-epic-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,24,58,.10);}
/* Investor Room metric pack. */
.inv-group{margin-bottom:18px;}
.inv-group-h{font-family:var(--ck-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 2px 10px;}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:12px;}
.inv-metric{display:flex;flex-direction:column;gap:6px;}
.inv-metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;}
.inv-metric-l{font-size:12.5px;font-weight:600;color:var(--fg-2);}
.inv-metric-v{font-family:var(--ck-font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg-1);line-height:1.1;}
.inv-spark{display:block;width:100%;height:26px;margin:-1px 0;opacity:.9;}
.inv-metric-h{font-size:11.5px;color:var(--fg-3);line-height:1.5;}
.inv-soft{opacity:.74;border-style:dashed;}
/* Curated PDF export — print only the metric pack, drop the cockpit chrome. */
@media print{
  .igs-sidebar,.igs-header,[data-noprint],.ck-scrim,.ck-toast{display:none!important;}
  .igs-main{margin:0!important;padding:0!important;max-width:none!important;}
  .igs-shell,.igs-main-col{display:block!important;}
  .inv-metric,.inv-group{break-inside:avoid;}
  .inv-metric{box-shadow:none!important;border:1px solid #d9d9d9!important;}
  .igs-page-eyebrow,.igs-page-title,.igs-page-subtitle{color:#000!important;}
}
/* status stepper */
.ck-steps{display:flex;gap:0;margin:10px 0 4px;}
.ck-step{flex:1;text-align:center;font-size:10.5px;font-weight:600;color:var(--fg-3);position:relative;padding-top:14px;}
.ck-step::before{content:"";position:absolute;top:4px;left:0;right:0;height:3px;background:var(--bg-sunken);}
.ck-step.done::before{background:var(--ok);}
.ck-step.cur::before{background:var(--accent-fill);}
.ck-step.cur{color:var(--fg-1);}
/* audit rows */
.ck-audit{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-1);font-size:12.5px;}
.ck-audit:last-child{border-bottom:0;}
.ck-audit .when{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);width:104px;flex:none;padding-top:2px;}
/* AI triage rows */
.ck-ai-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed rgba(124,58,237,.18);}
.ck-ai-row:last-child{border-bottom:0;}
.ck-ai-row .k{font-size:11px;color:var(--fg-3);width:74px;flex:none;}
.ck-ai-row .v{flex:1;min-width:0;font-size:12.5px;font-weight:600;}
.ck-ai-acts{display:flex;gap:4px;}
.ck-ai-acts button{height:22px;padding:0 8px;border-radius:6px;font-size:10.5px;font-weight:700;border:0;cursor:pointer;}
.ck-ai-accept{background:var(--ai);color:#fff;}
.ck-ai-over{background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--fg-2);}
/* Accept applied in place — row checks off, no reload. */
.ck-ai-row.ck-ai-accepted{opacity:.72}
.ck-ai-row.ck-ai-accepted .v{text-decoration:none;color:var(--fg-3)}
.ck-ai-done{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:6px;font-size:10.5px;font-weight:700;background:var(--ok-soft,#dcfce7);color:var(--ok,#059669)}
.ck-ai-done i{font-size:13px}
/* Override → flash the rail control it points at. */
@keyframes ck-flash{0%,100%{box-shadow:inset 0 0 0 1px var(--line-2)}30%,60%{box-shadow:inset 0 0 0 2px var(--ck-yellow-600,#caa400),0 0 0 4px var(--ck-yellow-100,#fff7d6)}}
.ck-flash{animation:ck-flash 1.1s ease}
.ck-ai-why{font-size:11.5px;color:var(--fg-2);background:rgba(124,58,237,.06);border-radius:8px;padding:8px 10px;margin-top:6px;display:none;}
.ck-ai-why.open{display:block;}
/* progress bar (epic) */
.ck-target{position:relative;height:6px;border-radius:99px;background:var(--bg-sunken);}
.ck-target .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--accent-fill);}
/* evidence */
.ck-crumbline{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-2);padding:5px 8px;border-radius:7px;background:var(--bg-sunken);margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ck-shot{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;background:#0F1830;max-height:340px;position:relative;display:flex;align-items:center;justify-content:center;color:#8FA0C8;min-height:160px;}
.ck-shot img{max-width:100%;max-height:340px;display:block;}
/* forms (cockpit) */
.ck-field{display:flex;flex-direction:column;gap:6px;}
.ck-field label{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);}
.ck-inp,select.ck-inp,textarea.ck-inp{height:36px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-surface);padding:0 11px;font:inherit;font-size:13px;color:var(--fg-1);width:100%;}
textarea.ck-inp{height:auto;min-height:84px;padding:9px 11px;resize:vertical;}
.ck-inp:focus{outline:none;border-color:var(--ck-yellow-600);box-shadow:var(--focus-ring);}
/* modal + scrim + toast */
.ck-scrim{position:fixed;inset:0;background:rgba(10,24,58,.32);z-index:130;opacity:0;pointer-events:none;transition:opacity var(--ck-dur-std) var(--ck-ease);}
.ck-scrim.show{opacity:1;pointer-events:auto;}
.ck-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;z-index:131;width:600px;max-width:94vw;background:var(--bg-surface);border-radius:var(--ck-r-xl);box-shadow:var(--ck-sh-3);transition:all var(--ck-dur-std) var(--ck-ease-out);max-height:88vh;display:flex;flex-direction:column;}
.ck-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.ck-modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-1);}
.ck-modal-b{flex:1;overflow-y:auto;padding:18px;}
.ck-modal-f{padding:12px 18px;border-top:1px solid var(--line-1);display:flex;gap:8px;justify-content:flex-end;}
.ck-toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);opacity:0;z-index:140;background:var(--ck-navy-800);color:#fff;padding:10px 16px;border-radius:11px;font-size:13px;box-shadow:var(--ck-sh-3);transition:all var(--ck-dur-std) var(--ck-ease-out);display:flex;gap:9px;align-items:center;}
.ck-toast.show{opacity:1;transform:translate(-50%,0);}
.ck-toast i{color:var(--accent-fill);font-size:16px;}

/* ============================================================================
 * COCKPIT — CATALOG EXPLORER (Phase, 2026-06-11). Browse + dependency Map +
 * detail drawer over the 1,420-unit platform catalog. ck-cat- prefixed.
 * Design principle: disappears when you use it — restraint, soft motion,
 * obsessive spacing. The map is focus+context, never a hairball.
 * ============================================================================ */
.ck-cat-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ck-cat-search{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-radius:12px;
  background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--line-1);transition:box-shadow var(--ck-dur-quick) var(--ck-ease)}
.ck-cat-search:focus-within{box-shadow:inset 0 0 0 1px var(--ck-yellow-600),var(--focus-ring)}
.ck-cat-search i{font-size:17px;color:var(--fg-3)}
.ck-cat-search input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--fg-1);outline:none}
.ck-cat-search .ck-kbd{flex:none}
.ck-cat-seg{display:inline-flex;background:var(--bg-sunken);border-radius:11px;padding:3px;gap:2px}
.ck-cat-seg button{height:32px;padding:0 14px;border:0;background:transparent;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--fg-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--ck-dur-quick) var(--ck-ease)}
.ck-cat-seg button.on{background:var(--bg-surface);color:var(--fg-1);box-shadow:var(--ck-sh-1)}
.ck-cat-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ck-cat-fchip{height:28px;padding:0 11px;border-radius:99px;border:0;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--line-1);
  font:inherit;font-size:12px;font-weight:600;color:var(--fg-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:all var(--ck-dur-quick) var(--ck-ease)}
.ck-cat-fchip:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.ck-cat-fchip.on{background:var(--ck-navy-800);color:#fff;box-shadow:none}
.ck-cat-fchip .dot{width:8px;height:8px;border-radius:50%}

/* list / browse */
.ck-cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.ck-cat-card{text-align:left;background:var(--bg-surface);border:0;border-radius:var(--ck-r-md);box-shadow:inset 0 0 0 1px var(--line-1);
  padding:13px 15px;cursor:pointer;transition:box-shadow var(--ck-dur-quick),transform var(--ck-dur-quick) var(--ck-ease);display:block;width:100%}
.ck-cat-card:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--ck-sh-2);transform:translateY(-1px)}
.ck-cat-card .top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ck-cat-card .nm{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--fg-1);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-cat-card .sm{font-size:12px;line-height:1.5;color:var(--fg-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ck-cat-kind{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}

/* map */
.ck-cat-map{position:relative;border-radius:var(--ck-r-lg);overflow:hidden;background:
  radial-gradient(120% 120% at 50% 0%,var(--bg-surface),var(--bg-sunken) 140%);box-shadow:inset 0 0 0 1px var(--line-1);height:min(72vh,720px)}
.ck-cat-map svg{display:block;width:100%;height:100%;cursor:grab}
.ck-cat-map svg.drag{cursor:grabbing}
.ck-cat-edge{stroke-linecap:round;fill:none;transition:opacity var(--ck-dur-std) var(--ck-ease)}
.ck-cat-edge.depends{stroke:var(--ck-ink-300)}
.ck-cat-edge.calls_api{stroke:#9DB3E8}
.ck-cat-edge.anchor{stroke:var(--ck-yellow-600);stroke-dasharray:2 4}
.ck-cat-node{cursor:pointer}
.ck-cat-node circle{transition:r var(--ck-dur-std) var(--ck-ease-out),stroke-width var(--ck-dur-quick)}
.ck-cat-node text{font-family:var(--font-display);font-weight:600;fill:var(--fg-2);paint-order:stroke;
  stroke:var(--bg-app);stroke-width:3.5px;pointer-events:none;opacity:.6;transition:opacity var(--ck-dur-std)}
.ck-cat-node .ck-cat-id{font-family:var(--font-mono);font-weight:500}
.ck-cat-node:hover text{opacity:1}
.ck-cat-node:hover circle{stroke:var(--ck-navy-700);stroke-width:2.5px}
.ck-cat-node.dim{opacity:.16}
.ck-cat-node.focus text{opacity:1;font-weight:800;fill:var(--fg-1)}
.ck-cat-node.focus circle{stroke:var(--ck-navy-800);stroke-width:3px}
.ck-cat-map-bar{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:8px;pointer-events:none}
.ck-cat-crumb{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;
  background:color-mix(in oklab,var(--bg-surface) 88%,transparent);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-1),var(--ck-sh-1);
  font-size:12px;font-weight:600;color:var(--fg-2);cursor:pointer}
.ck-cat-crumb:hover{color:var(--fg-1)}
.ck-cat-legend{position:absolute;bottom:12px;left:12px;display:flex;flex-direction:column;gap:5px;pointer-events:none;
  background:color-mix(in oklab,var(--bg-surface) 86%,transparent);backdrop-filter:blur(8px);border-radius:10px;padding:9px 11px;
  box-shadow:inset 0 0 0 1px var(--line-1);font-size:10.5px;color:var(--fg-2)}
.ck-cat-legend .lg{display:flex;align-items:center;gap:7px}
.ck-cat-legend .ln{width:16px;height:2px;border-radius:2px}
.ck-cat-hint{position:absolute;bottom:12px;right:12px;font-size:11px;color:var(--fg-3);pointer-events:none;
  font-family:var(--font-mono)}

/* detail drawer (reuses ck-drawer scaffold below) */
/* width/margin !important override the legacy `.igs-main > *{width:100%;
   margin:auto}` shell rule when the drawer lives inside the content area. */
.ck-drawer{position:fixed;top:0;right:0;height:100vh;width:460px!important;max-width:94vw;margin:0!important;background:var(--bg-surface);z-index:131;
  box-shadow:var(--ck-sh-3);transform:translateX(102%);transition:transform var(--ck-dur-emph) var(--ck-ease-out);display:flex;flex-direction:column}
.ck-drawer.show{transform:none}
.ck-drawer-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-1)}
.ck-drawer-b{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.ck-drawer-f{padding:12px 18px;border-top:1px solid var(--line-1);display:flex;gap:8px}
.ck-cat-relgrid{display:flex;flex-direction:column;gap:5px}
.ck-cat-rel{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:var(--bg-sunken);cursor:pointer;
  transition:background var(--ck-dur-quick)}
.ck-cat-rel:hover{background:var(--ck-sand-200)}
.ck-cat-rel .nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* catalog chip popover (Tickets + anywhere) */
.ck-cat-pop{position:fixed;z-index:160;width:320px;max-width:92vw;background:var(--bg-surface);border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--line-1),var(--ck-sh-3);padding:13px 14px;opacity:0;transform:translateY(4px) scale(.98);
  pointer-events:none;transition:opacity var(--ck-dur-quick) var(--ck-ease),transform var(--ck-dur-quick) var(--ck-ease-out)}
.ck-cat-pop.show{opacity:1;transform:none;pointer-events:auto}
.ck-cat-pop .s{font-size:12px;line-height:1.55;color:var(--fg-2);margin:7px 0 10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Cockpit fixed overlays live inside .igs-main content, so the legacy
   `.igs-main > *{width:100%;max-width:1200px;margin:auto}` shell rule
   shrinks them to the 1200px content column (scrim greyed only the
   middle; modal/toast mis-sized). Force true viewport/intrinsic sizing. */
.ck-scrim{width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important}
.ck-modal{width:600px!important;max-width:94vw!important;margin:0!important}
.ck-toast{width:auto!important;max-width:none!important;margin:0!important}

/* ═══════════════════════════════════════════════════════════════════════
   IGNIFY Tickets cockpit — Claude Design reskin token layer (2026-06-26).
   Scoped to .igc so the design's --line/--surface/--line-2 etc. don't
   override the rest of the console. The reskinned ticket surfaces wrap
   their content in <div class="igc"> and use these vars directly, matching
   the design's inline styles 1:1. See memory tickets_cockpit_design_handoff.
   ═══════════════════════════════════════════════════════════════════════ */
.igc, .igs-shell{
  --r-sm:7px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-pill:999px;
  --ease:cubic-bezier(.32,.72,.31,1);--spring:cubic-bezier(.34,1.4,.5,1);
}
.igc{font-family:'Outfit',sans-serif;color:var(--text);}

/* LIGHT — verbatim from design line 26 */
.igc[data-theme="light"],.igs-shell[data-theme="light"]{
  --navy:#0A183A;--navy-2:#16264A;--ink:#0F1C3A;--text:#414B61;--muted:#79839B;--faint:#9AA3B6;
  --gold:#FDD140;--gold-fill:#FBD13E;--gold-acc:#EAB81F;--gold-link:#8C6E12;--gold-soft:#FEF7DC;--gold-line:#F0DCA0;--gold-fg:#6E5510;--gold-ic:#9A7A12;
  --canvas:#F4F6FA;--surface:#FFFFFF;--sunken:#EEF1F6;--line:#E7EAF1;--line-2:#EEF0F5;--line-strong:#D6DBE6;--sel:#FFFBEF;--chrome:#0F1C3A;
  --shadow-1:0 1px 2px rgba(16,28,58,.04),0 1px 3px rgba(16,28,58,.06);
  --shadow-2:0 4px 12px -2px rgba(16,28,58,.08),0 2px 6px -2px rgba(16,28,58,.05);
  --shadow-3:0 16px 40px -10px rgba(16,28,58,.20),0 6px 14px -6px rgba(16,28,58,.10);
  --ok-bg:#EAF7EF;--ok-bg2:#E2F3EA;--ok-border:#CBEBD6;--ok-fg:#0B6B45;--ok-fg2:#096B45;--ok-fg3:#3E8C66;--ok-dot:#15A05E;
  --warn-bg:#FBEFDD;--warn-bg2:#FBEFD7;--warn-fg:#8A5A06;--warn-fg2:#8A4A0A;--warn-dot:#D98324;
  --danger-bg:#FBE9E9;--danger-bg2:#FBE3E3;--danger-border:#F2C9C9;--danger-fg:#A81C1C;
  --info-bg:#E7F0FD;--info-fg:#1E55B8;--purple-bg:#ECEBFD;--purple-fg:#4036B5;--link-acc:#2C6BD8;
  --prod-bg:#FCEEEA;--prod-border:#F4D5CC;--prod-fg:#A8442E;--teams:#5B5FC7;
  --skeleton-1:#EEF1F6;--skeleton-2:#E4E8F0;
  --hover-veil:rgba(10,24,58,.018);--hover-veil-2:rgba(10,24,58,.022);--hover-veil-3:rgba(10,24,58,.025);
  --scroll:#D6DBE6;--scroll-h:#BCC3D2;--lane-shipped:#FAFCFA;--weekend:#FAFBFD;--col-bg:#F8F9FC;
  /* bridge → shell chrome var names */
  --bg-app:var(--canvas);--bg-surface:var(--surface);--bg-sunken:var(--sunken);
  --fg-1:var(--ink);--fg-2:var(--text);--fg-3:var(--muted);
  --line-1:var(--line);--line-2:var(--line-strong);
  --nav-active-bg:var(--sel);--nav-active-fg:var(--navy);--nav-badge-bg:var(--navy);
  --accent-fill:var(--gold-fill);
}
/* DARK — verbatim from design line 27 */
.igc[data-theme="dark"],.igs-shell[data-theme="dark"]{
  --navy:#22324F;--navy-2:#2B3E63;--ink:#EDF1F8;--text:#AFBAD0;--muted:#7F8BA6;--faint:#5C6884;
  --gold:#FDD140;--gold-fill:#FBD13E;--gold-acc:#F0C63E;--gold-link:#F3CC55;--gold-soft:rgba(253,209,64,.12);--gold-line:rgba(253,209,64,.30);--gold-fg:#F3CC55;--gold-ic:#EFC646;
  --canvas:#0A1120;--surface:#121C32;--sunken:#1B2640;--line:rgba(150,167,200,.15);--line-2:rgba(150,167,200,.09);--line-strong:rgba(150,167,200,.28);--sel:rgba(253,209,64,.10);--chrome:#1B2842;
  --shadow-1:0 1px 2px rgba(0,0,0,.34),0 1px 3px rgba(0,0,0,.36);
  --shadow-2:0 6px 16px -4px rgba(0,0,0,.5),0 2px 6px -2px rgba(0,0,0,.42);
  --shadow-3:0 22px 48px -12px rgba(0,0,0,.62),0 8px 18px -8px rgba(0,0,0,.5);
  --ok-bg:rgba(20,170,100,.15);--ok-bg2:rgba(20,170,100,.15);--ok-border:rgba(20,170,100,.34);--ok-fg:#5FD49C;--ok-fg2:#5FD49C;--ok-fg3:#57B98A;--ok-dot:#1FB46B;
  --warn-bg:rgba(225,150,55,.16);--warn-bg2:rgba(225,150,55,.16);--warn-fg:#ECB063;--warn-fg2:#ECB063;--warn-dot:#E29A3E;
  --danger-bg:rgba(220,80,80,.15);--danger-bg2:rgba(220,80,80,.15);--danger-border:rgba(220,80,80,.36);--danger-fg:#F08C8C;
  --info-bg:rgba(70,125,225,.18);--info-fg:#82AAEE;--purple-bg:rgba(120,108,228,.20);--purple-fg:#AEA2F2;--link-acc:#6FA0F0;
  --prod-bg:rgba(212,90,60,.18);--prod-border:rgba(212,90,60,.36);--prod-fg:#E89E88;--teams:#8E91F2;
  --skeleton-1:#172238;--skeleton-2:#202E4B;
  --hover-veil:rgba(255,255,255,.04);--hover-veil-2:rgba(255,255,255,.05);--hover-veil-3:rgba(255,255,255,.06);
  --scroll:rgba(150,167,200,.22);--scroll-h:rgba(150,167,200,.34);--lane-shipped:rgba(20,170,100,.06);--weekend:rgba(255,255,255,.018);--col-bg:#0E1729;
  /* Tickets neutral status pills (closed / won't fix) — pale light chips would
     render bright on the dark canvas; give them a subtle dark-neutral chip.
     Light leaves these UNSET so the inline var(--stp-*, #hex) fallback keeps
     light byte-identical. */
  --stp-closed-bg:rgba(150,167,200,.14);--stp-closed-fg:#A6B0C6;--stp-wontfix-bg:rgba(150,167,200,.11);--stp-wontfix-fg:#9AA0B2;
  /* bridge → shell chrome var names */
  --bg-app:var(--canvas);--bg-surface:var(--surface);--bg-sunken:var(--sunken);
  --fg-1:var(--ink);--fg-2:var(--text);--fg-3:var(--muted);
  --line-1:var(--line);--line-2:var(--line-strong);
  --nav-active-bg:var(--sel);--nav-active-fg:var(--gold-fg);--nav-badge-bg:var(--navy-2);
  --accent-fill:var(--gold-fill);
}
/* Suppress the theme cross-fade during the initial paint + the toggle flip */
.igc-notrans, .igc-notrans *{transition:none !important}
.igc *{box-sizing:border-box}
.igc ::-webkit-scrollbar{width:10px;height:10px}
.igc ::-webkit-scrollbar-thumb{background:var(--scroll,#D6DBE6);border-radius:999px;border:3px solid transparent;background-clip:content-box}
.igc ::-webkit-scrollbar-thumb:hover{background:var(--scroll-h,#BCC3D2);background-clip:content-box}
@keyframes ig-shimmer{0%{background-position:-680px 0}100%{background-position:680px 0}}
@keyframes ig-spin{to{transform:rotate(360deg)}}
@keyframes ig-toast{0%{opacity:0;transform:translate(-50%,14px) scale(.97)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes ig-fade{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ig-pop{0%{opacity:0;transform:translateY(8px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ig-now{0%,100%{opacity:.55}50%{opacity:1}}

/* Tickets cockpit: full-bleed — override the shell's 1200px content cap and
   centering gutter so the ticket surfaces fill the whole work area (founder
   ask 2026-06-27: "fill the entire empty space so we have more room"). */
.igs-main > .igc{max-width:none;margin:0;width:100%;}
.igs-main:has(> .igc){padding:0;}

/* List inline-edit affordance — editable cells get a subtle hover chip so it
   reads as "click to edit" (ID / SLA / Updated stay static, no .ig-edit). */
.igc .ig-row .ig-edit{cursor:pointer;border-radius:8px;transition:background .12s var(--ease),box-shadow .12s var(--ease)}
.igc .ig-row .ig-edit:hover{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* Cockpit: links + chips in the reskinned surfaces are styled by COLOR, never
   underlined — kills the underline under icons/links inside cards (founder 2026-06-27). */
.igc a, .igc a:hover{text-decoration:none}
a.ck-chip, .ck-chip{text-decoration:none}

/* On reskinned (.igc) cockpit pages the page's own sticky subheader IS the title
   bar (search lives in it) — suppress the separate global top header so there's
   no redundant/empty top strip (founder 2026-06-27: blend search into the
   Tickets title bar, no lonely top navbar). Non-reskinned pages keep the header. */


/* ── Tickets Board (Phase 5+) drag-and-drop. Token-driven; light+dark safe. */
.tkb-card{transition:box-shadow .14s ease,border-color .14s ease,transform .12s ease,opacity .12s ease}
.tkb-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.tkb-card:focus-visible{outline:none;border-color:var(--gold-acc);box-shadow:0 0 0 3px var(--gold-soft)}
.tkb-card.tkb-dragging{opacity:.45;cursor:grabbing}
.tkb-card .tkb-drag-handle{position:absolute;left:6px;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:12px;color:var(--faint);opacity:0;cursor:grab;transition:opacity .14s ease}
.tkb-card:hover .tkb-drag-handle,.tkb-card:focus-visible .tkb-drag-handle{opacity:.8}
.tkb-card.tkb-breaching{box-shadow:inset 3px 0 0 0 var(--danger-fg),var(--shadow-1)}
.tkb-drop.tkb-drop-on{outline:2px dashed var(--gold-acc);outline-offset:-2px;background:var(--sel);border-radius:11px}
.tkb-qa{height:34px;border:1.5px dashed var(--line-strong);border-radius:10px;background:transparent;padding:0 11px;font:inherit;font-size:12.5px;color:var(--ink);outline:none;transition:border-color .14s ease,background .14s ease}
.tkb-qa::placeholder{color:var(--faint)}
.tkb-qa:focus{border-style:solid;border-color:var(--gold-acc);background:var(--surface);box-shadow:0 0 0 3px var(--gold-soft)}


/* ── Tickets Week: dependency-tie gesture (cadence-camp, not Gantt) ── */
/* The link nub: a small grip on a bar's right edge that, when dragged onto
   another bar, ties the two tickets together. Hidden until the bar is hovered
   so the default gesture (reschedule) stays primary. */
.igc .tkw-bar .tkw-linknub{position:absolute;top:50%;right:-6px;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--link-acc,var(--info-fg));
  border:1px solid var(--link-acc,var(--info-fg));box-shadow:var(--shadow-1);opacity:0;pointer-events:none;
  cursor:crosshair;transition:opacity .12s var(--ease);z-index:5}
.igc .tkw-bar:hover .tkw-linknub{opacity:1;pointer-events:auto}
/* While a link drag is in flight every OTHER bar dash-rings as a valid target. */
.igc .tkw-bar.tkw-linkmode{outline:2px dashed var(--gold-line);outline-offset:1px;border-radius:9px}


/* ═══════════════════════════════════════════════════════════════════════
   Auth / transition full-screen states (2026-06-28)
   Used by handleAuthCallback ('Signing you in…'), renderError, and the
   renderLanding fallback. Full-viewport, vertically + horizontally centered,
   themed off the .igc token system (navy/gold, Plus Jakarta Sans display +
   Outfit body). Reuses the shared ig-spin keyframe. data-theme is set on the
   .igc wrapper inline so the surface themes correctly before the shell mounts.
   ═══════════════════════════════════════════════════════════════════════ */
.igc-authstate{
  position:fixed; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  padding:6vh 1.25rem;
  background:var(--canvas);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.igc-authstate-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:380px; width:100%;
  animation:ig-fade .5s var(--ease) both;
}
.igc-authstate-logo{
  height:46px; width:auto; max-width:78vw; display:block;
  margin-bottom:2rem;
}
.igc-authstate-eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-fg);
  margin-bottom:.6rem;
}
.igc-authstate-spinner{
  width:30px; height:30px; border-radius:50%;
  border:2.5px solid var(--line-strong);
  border-top-color:var(--gold-acc);
  animation:ig-spin .72s linear infinite;
  margin-bottom:1.6rem;
}
.igc-authstate-icon{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r-pill);
  font-size:1.5rem; margin-bottom:1.25rem;
}
.igc-authstate-icon-warn{ background:var(--danger-bg); color:var(--danger-fg); }
.igc-authstate-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.55rem; font-weight:700; line-height:1.2; letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 .55rem;
}
.igc-authstate-sub{
  font-family:'Outfit',sans-serif;
  font-size:.98rem; line-height:1.55; color:var(--muted);
  margin:0; max-width:34ch;
}
.igc-authstate-sub-danger{ color:var(--danger-fg); }
.igc-authstate-btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1.75rem; height:42px; padding:0 1.5rem;
  border-radius:var(--r-pill);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; font-weight:700;
  text-decoration:none; cursor:pointer; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink);
  transition:transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.igc-authstate-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); text-decoration:none; }
.igc-authstate-btn-primary{
  background:var(--gold-fill); color:var(--navy); border-color:transparent;
}
.igc-authstate-btn-primary:hover{ background:var(--gold-acc); color:var(--navy); }
@media (prefers-reduced-motion:reduce){
  .igc-authstate-spinner{ animation-duration:1.4s; }
  .igc-authstate-card{ animation:none; }
}


/* ══════════════════════════════════════════════════════════════════
   COCKPIT MOBILE RESPONSIVENESS (2026-06-28)
   Make every admin.ignify.us cockpit page phone-usable WITHOUT changing
   the desktop design. EVERYTHING below is gated behind @media(max-width:768px)
   (and 480px where called out) so >=769px renders byte-identically.
   Inline-styled grids are overridden with media-scoped !important — a
   stylesheet !important wins over a non-!important style attribute — so the
   page render functions are untouched. Selectors hook stable markup already
   present: .igs-* shell classes, .igc[data-testid=...] wrappers, #rops-grid /
   #rops-rail, .igs-tksw, .ts-tab. Tokens (--surface/--line/--ink/--muted/
   --shadow-*/--r-*/--ease) carry light+dark parity.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── SHELL: app bar / drawer (completes the rules in _shellStyles()) ── */
  /* The off-canvas sidebar drawer + hamburger live in _shellStyles(); here we
     just make the open drawer a touch narrower than the viewport and give the
     rail foot a comfortable hit area. */
  .igs-sidebar{max-width:86vw;}
  .igs-rail-foot .igs-rail-icon{width:36px;height:36px;}
  /* keep the app-bar from forcing horizontal page scroll */
  .igs-appbar{overflow:hidden;}
  .igs-ab-actions{gap:4px;}

  /* ── GENERIC COCKPIT PAGE: sticky subheaders wrap, padding tightens ──
     Every .igc page's first sticky row is the title+controls subheader. Force
     it to wrap and align left so nothing clips on a phone. The flanking
     flex:1 spacers (used to centre the absolute tickets switcher) collapse so
     wrapped rows pack tightly instead of leaving a dead gap. */
  .igc[data-testid] > div[style*="sticky"]{
    flex-wrap:wrap!important;
    row-gap:9px!important;
    padding-left:14px!important;padding-right:14px!important;
  }
  .igc[data-testid] > div[style*="sticky"] > div[style*="flex:1"]{flex-basis:0!important;min-width:0!important;}
  /* page body gutters: trim the 18px inner padding a hair on phones */
  .igc[data-testid] > div[id$="-body"]{padding-left:14px!important;padding-right:14px!important;}

  /* ── TICKETS: the absolutely-centred List/Week/Board/Epics switcher ──
     On desktop .igs-tksw floats dead-centre (position:absolute;left:50%). On a
     phone that overlaps the title + New-ticket button, so we un-absolute it and
     let it drop onto its own full-width row below the title. */
  .igc .igs-tksw{position:static!important;left:auto!important;transform:none!important;
    order:9;flex-basis:100%;display:flex;justify-content:center;margin-top:2px;}
  /* the switcher segmented control may itself overflow on the tiniest phones —
     allow it to scroll horizontally rather than clip */
  .igc .igs-tksw > div{max-width:100%;overflow-x:auto;}

  /* Tickets list table: never clip — the table already lives in an overflow:auto
     wrapper; ensure the grid keeps its intended min track widths so columns
     stay legible and the user scrolls horizontally. (No desktop change: the
     wrapper is overflow:auto at all sizes.) */
  .igc [data-testid="admin-tickets-page"] #tk-grid{min-width:760px;}
  /* filter bar chips already flex-wrap; give them breathing room */
  .igc [data-testid="admin-tickets-page"] #tk-grid + *,
  .igc [data-testid="admin-tickets-page"] #tk-chips{max-width:100%;}

  /* Tickets WEEK timeline: 196px owner gutter + 7-day track is far wider than a
     phone. Wrap the whole grid in horizontal scroll by giving the body a
     min-width and letting #tkw-body's parent scroll. */
  .igc [data-testid="admin-tickets-week"] #tkw-body{overflow-x:auto;}
  .igc [data-testid="admin-tickets-week"] #tkw-grid{min-width:720px;}

  /* Tickets BOARD already scrolls horizontally (min-width:min-content columns);
     just trim the fixed body height so columns aren't unreachably short. */
  .igc [data-testid="admin-tickets-board"] #tkb-cols{min-width:max-content;}

  /* ── CUSTOMERS (#rops-grid): single column + modal rail ──
     The page JS already collapses the grid to one column < 1100px and turns the
     rail into a fixed off-canvas panel toggled by #rops-rail-toggle. Here we (a)
     keep the open rail inside the viewport, (b) add a dim veil behind it, and
     (c) make the toggle a proper tap target. The desktop two-column layout
     (>=1100px) is set inline by JS and untouched. */
  #rops-grid{grid-template-columns:minmax(0,1fr)!important;}
  #rops-rail{width:min(86vw,320px)!important;max-width:86vw!important;}
  #rops-rail.rops-rail-open ~ #rops-inspector::before,
  #rops-rail.rops-rail-open + #rops-inspector::before{content:'';}
  /* veil behind the open directory rail (rail is position:fixed via JS) */
  #rops-wrap:has(#rops-rail.rops-rail-open)::after{content:'';position:fixed;inset:0;
    z-index:44;background:rgba(10,24,58,.34);}
  #rops-rail-toggle{min-width:40px!important;min-height:40px!important;}
  /* subheader crumb can ellipsize hard on a phone */
  #rops-wrap #rops-crumb{white-space:normal!important;}
  /* inspector inner padding trim */
  #rops-inspector{min-height:auto!important;}

  /* ── TRUST & SAFETY: stack the Reports split-pane; scroll the tool tabs ──
     The Reports tab is a 300px+1fr grid (list left, detail right). On a phone
     stack to one column: the report list first, the detail pane below, each
     full width. The detail pane's own 'Select a report' empty-state already
     reads as the return affordance; we add a faint divider so the seam is
     obvious. The 3 tool tabs (Reports/Investigate/Conversations) can overflow
     the row, so let that row scroll horizontally. */
  .igc[data-testid="admin-trust-safety-page"] #ts-tool > div[style*="grid-template-columns:300px"]{
    display:block!important;
  }
  .igc[data-testid="admin-trust-safety-page"] #ts-rep-list{
    border-right:none!important;border-bottom:1px solid var(--line)!important;
    max-height:46vh;overflow:auto;
  }
  .igc[data-testid="admin-trust-safety-page"] #ts-rep-pane{padding:14px!important;}
  /* the tool-tab row is the 44px-high flex row right under the subheader */
  .igc[data-testid="admin-trust-safety-page"] > div[style*="height:44px"]{
    overflow-x:auto;gap:18px!important;
  }
  .igc[data-testid="admin-trust-safety-page"] .ts-tab{flex:none;}
  /* T&S two-column report/detail sub-grids (1fr 1fr) collapse */
  .igc[data-testid="admin-trust-safety-page"] div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* ── TICKET DETAIL + EPIC DETAIL: stack the 1fr + 352px right rail ──
     Ticket detail renders into #td-body; epic detail into #ep-body. Both use a
     content + 352px sidebar grid. Stack to one column so the right rail drops
     below the content. */
  #td-body div[style*="352px"],
  #ep-body div[style*="352px"]{grid-template-columns:1fr!important;}
  /* their inner 1fr 1fr fact grids collapse too */
  #td-body div[style*="grid-template-columns:1fr 1fr"],
  #ep-body div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}

  /* ── /me: stack the 2fr + 1.3fr profile/aside grid ── */
  .igc[data-testid="me-page"] div[style*="2fr"]{grid-template-columns:1fr!important;}

  /* ── WIDE TWO-COLUMN REPORT GRIDS across pages ──
     Traffic, Costs, Prospects analytics, Investor Room and others render inline
     'grid-template-columns:1fr 1fr' report pairs. Collapse them to one column
     so each table/card gets full width instead of being crushed. Scoped to .igc
     page wrappers so only cockpit pages are affected. */
  .igc[data-testid] div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  .csb-grid,.msb-grid{grid-template-columns:1fr!important;}
  .ov-trend-grid{grid-template-columns:1fr!important;}

  /* ── PROSPECTS / RECORDS-style wide ROW grids: horizontal scroll ──
     The Growth (prospects) table rows are fixed multi-track grids inside a
     content column. Wrap the rows + header in a horizontal scroller by giving
     them a min-width and letting the page body scroll. */
  .igc[data-testid="admin-prospects-page"] #gr-body,
  .igc[data-testid="admin-prospects-page"] .gr-list{overflow-x:auto;}
  .igc[data-testid="admin-prospects-page"] .gr-row{min-width:760px;}

  /* ── GENERIC TABLES inside cockpit pages get a scroll affordance ──
     Any .igs-table that would overflow gets wrapped via overflow on its parent;
     since we can't add a DOM wrapper from CSS, make the table itself scroll
     within a max-width and keep cells from wrapping awkwardly. */
  .igc .igs-table,.igs-table{display:block;overflow-x:auto;white-space:nowrap;}

  /* ── POPOVERS / FLYOUT MENUS → near-full-width sheets, reachable ──
     App-bar popovers + the avatar menu are position:fixed and already cap to
     calc(100vw-24px); pin them to a comfortable sheet width and away from the
     very edge. */
  .igs-pop{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;}
  .igs-ab-menu{width:min(280px,calc(100vw - 20px))!important;}

  /* ── FORM ROWS / DRAWERS: already flex-wrap; ensure inputs go full width ── */
  .igs-form-row{gap:0.7rem;}
  .igs-bdrawer{width:100%!important;max-width:100%!important;}
}

/* ── PHONE (<=480px): the tightest tier ──────────────────────────────── */
@media (max-width: 480px) {
  /* ⌘K reachable (gap closure 2026-07-02): instead of hiding search outright,
     collapse it to a 40px icon-only button — the placeholder text + kbd hint
     go, the tap target stays. (width/height/padding/gap are set by the shell's
     runtime <style>, which wins document order → !important.) */
  .igs-ab-searchwrap{flex:0 0 auto!important;min-width:40px;}
  .igs-ab-search{width:40px!important;min-width:40px;height:40px!important;padding:0!important;gap:0!important;justify-content:center;cursor:pointer;}
  .igs-ab-search span,.igs-ab-search kbd{display:none!important;}
  /* drop the 'N shipped this week' pill to just its pulse dot (text already
     hidden at 768; here we can hide the whole pill to save room) */
  .igs-ab-shipped,.igs-ab-pill{padding:0 8px;}
  /* page body gutters tighten further */
  .igc[data-testid] > div[id$="-body"]{padding-left:11px!important;padding-right:11px!important;}
  .igc[data-testid] > div[style*="sticky"]{padding-left:11px!important;padding-right:11px!important;}
  /* KPI grids → single column on the smallest phones (overview already does
     this at 420; this catches other repeat() KPI strips) */
  .ck-kpis{grid-template-columns:1fr!important;}
  /* tickets list: allow a slightly narrower min so less horizontal scroll */
  .igc [data-testid="admin-tickets-page"] #tk-grid{min-width:680px;}
}


/* ============================================================================
 * MOBILE GAP CLOSURE 2026-07-02 — second pass over the 2026-06-28 layer.
 * Same contract: desktop renders byte-identical; every rule below is gated
 * behind @media (max-width:768px) / (max-width:480px) / (pointer:coarse).
 * Overrides of INLINE styles use the established [style*="…"] {…!important}
 * idiom; overrides of the shell/page runtime <style> tags use !important
 * because those tags come after this stylesheet in document order.
 * ============================================================================ */
@media (max-width: 768px) {
  /* ── C: iOS zoom guard — Safari auto-zooms the page when a focused control
     is <16px; force 16px on form controls (covers #ck-cmdk-q too: element
     selector + !important beats its inline font-size:15px). */
  input,select,textarea,.igs-form-input,.igs-form-select{font-size:16px!important;}

  /* ── D: safe-area — keep page content and the fixed off-canvas sidebar
     clear of the iOS home indicator; comfy rows in the avatar/bell menus. */
  .igs-main{padding-bottom:calc(56px + env(safe-area-inset-bottom))!important;}
  .igs-sidebar{height:100dvh!important;padding-bottom:env(safe-area-inset-bottom);}
  .igs-ab-menu button{min-height:42px;}

  /* ── G: tickets. Bulk-action bar is inline fixed-center + fixed 50px high —
     pin it to both edges and let the selects wrap (left/transform/height/
     padding are inline → !important). */
  #tk-bulk{left:8px!important;right:8px;transform:none!important;width:auto;height:auto!important;flex-wrap:wrap;padding:8px 9px!important;}
  /* quarter + gantt: the 196px sticky owner gutter is a third of a phone */
  .igc .tkq-gut,.igc .tkg-lane-gut{width:120px;}
  .igc .tkq-bg{left:120px;}
  /* week view: the real min track sits INLINE on #tkw-grid's PARENT (the
     min-width:720px rule further up no-ops against it) — retarget it */
  .igc [data-testid="admin-tickets-week"] div[style*="min-width:980px"]{min-width:760px!important;}
  /* board: inline height:calc(100vh - 250px) strands columns behind browser
     chrome — size to content within the visible (dynamic) viewport */
  .igc [data-testid="admin-tickets-board"] div[style*="100vh - 250px"]{height:auto!important;max-height:calc(100dvh - 200px);}
  /* board drag handle is hover-revealed — give touch a resting cue */
  .tkb-card .tkb-drag-handle{opacity:.5;}

  /* ── I: customers (remote-ops). Billing invoice rows: six rigid grid tracks
     crush at phone width and push the P0 Refund button out of reach — wrap. */
  #rops-body div[style*="90px 1fr auto 90px"]{display:flex!important;flex-wrap:wrap;gap:6px 12px!important;}
  /* reports rows likewise */
  #rops-body div[style*="grid-template-columns:90px 1fr 90px"]{display:flex!important;flex-wrap:wrap;}
  /* overview stat strip + economics/skeleton 3-up grids → 2-up */
  #rops-body div[style*="1.3fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;}
  #rops-body div[style*="repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}
  /* identity strip: inline position:sticky occludes a third of the screen
     while scrolling the inspector (stylesheet !important beats inline) */
  #rops-identity{position:static!important;}
  /* lesson-card + billing actions: 26px inline heights → >=38px tap targets
     (min-height wins over an inline height, no !important needed) */
  #rops-body .rops-attended,#rops-body .rops-comp,#rops-body .rops-cancel,
  #rops-body .rops-resched,#rops-body .rops-markpaid,#rops-body .rops-refund,
  #rops-body a[href*="calendar.ics"]{min-height:38px;}

  /* ── K: investor room — the sticky inline toolbar stacks under the appbar
     and eats the phone viewport; let it scroll away */
  .igc[data-testid="admin-investor-page"] div[style*="top:57px"]{position:static!important;}

  /* ── M/N/O: wide tables keep legible track widths inside their existing
     overflow:auto wrappers (admins roster / trust-safety / cost center) */
  .igc .rl-tbl{min-width:720px;}
  .igc .ts-tbl{display:block;overflow-x:auto;white-space:nowrap;}
  #cost-body table{min-width:640px;}

  /* ── P: alerts — card header row wraps instead of crushing the actions */
  .al-card-row{flex-wrap:wrap;}

  /* tickets view switcher: icon-only on phones (labels overflowed) */
  .igc .igs-tksw .tksw-t{display:none;}
  .igc .igs-tksw a,.igc .igs-tksw span[title]{padding:0 10px!important;}

  /* ── Q: roadmap metric chip rail becomes a swipe rail instead of a tall
     wrapped block (base flex-wrap:wrap lives in the page <style> → !important) */
  .igc .rm-strip{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .igc .rm-strip .rm-chip{flex:none;}

  /* ── JS item 2 companion: roadmap mobile list. The list is ALWAYS rendered
     alongside the SVG inside .rm-scroll (so the existing data-rmi click and
     keyboard delegation covers it); visibility is CSS-only — the SVG hides
     here, the list hides on desktop (rule after the base rm-m block below) —
     which keeps a phone→desktop resize correct without re-rendering. Palette
     mirrors the SVG. 2026-07-02: the SVG is back as a VERTICAL serpentine
     (desktop-only); !important because the page <style> tag comes after this
     stylesheet in document order and the svg carries inline display:block. */
  .igc .rm-scroll svg{display:none!important;}
}

/* ── Roadmap vertical timeline — ALL viewports (2026-07-02 founder ask).
   Navy/gold canon; desktop gets a centered column + a gold spine; the
   ★ YOU ARE HERE pill sits inline in the flow (never occluded). ── */
.igc .rm-mlist{display:flex;flex-direction:column;gap:8px;padding:16px 12px 22px;overflow-x:hidden;position:relative;max-width:720px;margin:0 auto;}
.igc .rm-mph{margin:14px 2px 2px;}
.igc .rm-mph:first-child{margin-top:2px;}
.igc .rm-mph-t{color:#FDD140;font-size:13px;font-weight:800;letter-spacing:2.4px;font-family:'Plus Jakarta Sans',sans-serif;}
.igc .rm-mph-d{color:#6C82A8;font-size:11.5px;font-weight:600;margin-top:2px;}
.igc .rm-mcard{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;text-align:left;background:#122449;border:1px solid #28406C;border-radius:12px;padding:13px 16px;cursor:pointer;font-family:inherit;transition:border-color 150ms var(--ease-out,ease),transform 150ms var(--ease-out,ease);}
.igc .rm-mcard:hover{border-color:#4A6699;transform:translateY(-1px);}
.igc .rm-mcard.rm-mgate{background:#0E1D3D;border-color:#FDD140;}
.igc .rm-mrow{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.igc .rm-mw{color:#FDD140;font-size:10.5px;font-weight:700;letter-spacing:.6px;}
.igc .rm-mst{font-size:10px;font-weight:800;letter-spacing:.5px;white-space:nowrap;}
.igc .rm-mt{color:#F4F1E8;font-size:14.5px;font-weight:700;line-height:1.35;font-family:'Plus Jakarta Sans',sans-serif;}
.igc .rm-md{color:#A9BAD8;font-size:12px;line-height:1.5;}
.igc .rm-mown{display:inline-flex;align-items:center;gap:6px;color:#6C82A8;font-size:10px;font-weight:700;letter-spacing:.4px;}
.igc .rm-mflag{color:#F5B84D;font-size:9.5px;font-weight:800;white-space:nowrap;}
.igc .rm-mdest{margin-top:12px;text-align:center;color:#F4F1E8;font-size:15px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;display:flex;flex-direction:column;gap:4px;padding:18px 12px;border:1px dashed #FDD140;border-radius:12px;}
.igc .rm-mdest span{color:#FDD140;font-size:11px;font-weight:600;}
.igc .rm-mhere{display:flex;align-items:center;gap:10px;margin:6px 0;}
.igc .rm-mhere span{background:#FDD140;color:#0A183A;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 12px;border-radius:999px;box-shadow:0 0 18px rgba(253,209,64,.45);flex:none;}
.igc .rm-mhere::after{content:"";flex:1;border-top:2px dashed #FDD140;opacity:.55;}

/* Desktop >768px: the vertical serpentine SVG (back 2026-07-02) is the one
   renderer — hide the card list (the SVG hides ≤768px in the gap-closure
   block above). max-width lets the fixed 940px canvas scale down gracefully
   in narrow desktop windows instead of clipping inside .rm-canvas. */
@media (min-width: 768.02px) {
  .igc .rm-mlist{display:none;}
  .igc .rm-scroll svg{max-width:100%;height:auto;}
}

/* ── GAP CLOSURE, phone tier (<=480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  /* ── A: appbar fit — brand collapses to the favicon (fallback markup already
     ships the .igs-ab-icon img); shipped-pill + vsep go entirely. */
  .igs-ab-logo,.igs-ab-tag,.igs-ab-pill,.igs-ab-vsep{display:none!important;}
  .igs-ab-icon{display:block!important;}
  .igs-ab-actions{gap:2px!important;}

  /* ── E: Today feed rows — summary takes the full first line; action buttons
     wrap under it as >=38px targets */
  .ov-frow{flex-wrap:wrap;}
  .ov-fsum{flex-basis:100%!important;order:-1;}
  .ov-fbtn{min-height:38px;}
  #ov-refresh{width:40px!important;height:40px!important;}

  /* ── F: overview arrears rows — tighter month/amount gutters */
  .ov-arr-row{grid-template-columns:40px 1fr 70px!important;}

  /* ── G: month-view chips go dot-only (the 3px lane color bar + chip box
     stay; id + title hide) */
  .igc .tkm-chip .tkm-t,.igc .tkm-chip .tkm-id{display:none;}

  /* ── H: epic member rows — keep id · title · avatar · chevron; severity +
     status are one tap away inside the ticket (cols/gap are inline → !important) */
  #ep-body .ep-row{grid-template-columns:96px minmax(0,1fr) 38px 22px!important;gap:8px!important;}
  #ep-body .ep-row > span:nth-child(3),
  #ep-body .ep-row > span:nth-child(4){display:none;}

  /* ── J: global search — cap the stacked rail so the inspector stays
     reachable; kv grids single-column; 3-up stats → 2-up; trim inspector pad */
  .sx-rail #sx-list{max-height:40vh;overflow-y:auto;}
  .sx-kv{grid-template-columns:1fr!important;}
  #sx-inspector div[style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
  #sx-inspector > div{padding:14px!important;}
  #sx-limit{display:none;}

  /* ── L: billing hub — drawer form fields go full-width; template modal card
     uses the whole phone width */
  .igs-form-row .igs-form-group{min-width:100%;}
  #tpl-modal-overlay{padding:12px!important;}
  #tpl-modal-overlay .igs-card{max-width:calc(100vw - 24px)!important;}
}

/* ── GAP CLOSURE, touch input (any width) ──────────────────────────────── */
@media (pointer: coarse) {
  /* ── Q: catalog map labels are hover-revealed at .6 opacity — touch has no
     hover, keep them readable (later in file than the base rule → wins) */
  .ck-cat-node text{opacity:1;}
}


/* ============================================================================
 * DARK-MODE accent/soft token remap (2026-06-28). The base :root (lines ~234-262)
 * points the accent + *-soft tokens at LIGHT primitives (--ck-*-100 / --ck-*-600);
 * the dark theme block (~1191) overrides surface/text tokens but NOT these, so
 * soft chips + the AI triage card rendered light-on-light in dark mode. Re-map
 * here, scoped to [data-theme="dark"] so LIGHT renders byte-identical.
 * (founder: "triage isn't legible in dark mode")
 * ============================================================================ */
.igc[data-theme="dark"], .igs-shell[data-theme="dark"]{
  /* AI accent: keep --ai as the white-on-violet FILL (.ck-ai-tag/.ck-ai-accept);
     --ai-text is the LIGHT violet for foreground/text/link/icon uses on dark. */
  --ai:#7C3AED;                      /* fill stays saturated for white text */
  --ai-text:#B9A8F5;                 /* light violet for text/links/icons on dark */
  --ai-soft:rgba(124,58,237,.22);    /* dark translucent violet card/chip bg */
  /* soft chip backgrounds -> dark translucent tints (mirror the dark *-bg hues) */
  --ok-soft:rgba(20,170,100,.18);
  --warn-soft:rgba(225,150,55,.18);
  --danger-soft:rgba(220,80,80,.18);
  --info-soft:rgba(70,125,225,.20);
  --sev-critical-soft:rgba(220,80,80,.18);
  --sev-high-soft:rgba(225,150,55,.18);
  --sev-medium-soft:rgba(70,125,225,.20);
  --sev-low-soft:var(--sunken);
  /* chip foregrounds -> light shades so they read on the dark tints above
     (base --ok/--warn/--danger/--info/--sev-* are saturated 600s, too dark on dark) */
  --ok:#5FD49C; --warn:#ECB063; --danger:#F08C8C; --info:#82AAEE;
  --sev-critical:#F08C8C; --sev-high:#ECB063; --sev-medium:#82AAEE; --sev-low:var(--muted);
}
/* AI card surface + the hard-coded violet rgba literals -> dark-appropriate */
.igc[data-theme="dark"] .ck-ai-card, .igs-shell[data-theme="dark"] .ck-ai-card{
  background:linear-gradient(180deg,rgba(124,58,237,.20),var(--bg-surface) 88%);
  box-shadow:inset 0 0 0 1px rgba(150,130,245,.34);
}
.igc[data-theme="dark"] .ck-ai-row, .igs-shell[data-theme="dark"] .ck-ai-row{ border-bottom-color:rgba(150,130,245,.22); }
.igc[data-theme="dark"] .ck-ai-why, .igs-shell[data-theme="dark"] .ck-ai-why{ background:rgba(124,58,237,.16); }
/* .ck-chip-ai uses var(--ai) as TEXT (base 849) -> too dark on dark; use --ai-text */
.igc[data-theme="dark"] .ck-chip-ai, .igs-shell[data-theme="dark"] .ck-chip-ai{ color:var(--ai-text); }


/* ═══════════════════════════════════════════════════════════════════════
   Tickets Calendar — Month view (Phase 1)
   A fixed 6-week (42-cell) grid so the board height never jumps month to
   month. Faithful to the .igc token system; every soft fill uses a token
   that already carries a [data-theme=dark] value (see the dark block below).
   Chips reuse the .tkw-bar class for the click->detail contract but define
   their own month geometry via .tkm-chip.
   ═══════════════════════════════════════════════════════════════════════ */
.igc .tkm-wrap{border-top:1px solid var(--line)}
.igc .tkm-dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line-2)}
.igc .tkm-dow-c{padding:7px 10px;font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;text-align:left;border-left:1px solid var(--line-2)}
.igc .tkm-dow-c:first-child{border-left:none}
.igc .tkm-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:104px}
.igc .tkm-cell{position:relative;border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:4px 5px 5px;min-width:0}
.igc .tkm-cell:nth-child(7n+1){border-left:none}
.igc .tkm-cell.tkm-drop-on{box-shadow:inset 0 0 0 2px var(--gold-acc);border-radius:2px;z-index:3}
.igc .tkm-head{display:flex;justify-content:flex-end;align-items:center;height:20px;margin-bottom:2px}
.igc .tkm-num{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.igc .tkm-num.tkm-today{color:var(--navy);background:var(--gold-fill);min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center}
.igc .tkm-chips{display:flex;flex-direction:column;gap:3px;min-width:0}
/* Month chip: reuses .tkw-bar semantics, own compact geometry (~22px). */
.igc .tkm-chip{display:flex;align-items:center;gap:6px;height:22px;padding:0 7px 0 0;border-radius:6px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-1);cursor:grab;overflow:hidden;min-width:0;position:relative}
.igc .tkm-chip::before{content:"";flex:none;width:3px;align-self:stretch;margin-right:5px;border-radius:6px 0 0 6px;background:var(--tkm-sw,var(--muted))}
.igc .tkm-chip:hover{border-color:var(--line-strong)}
.igc .tkm-chip .tkm-id{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;font-family:var(--ck-font-mono,monospace);white-space:nowrap;flex:none}
.igc .tkm-chip .tkm-t{font-size:11.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.igc .tkm-chip .tkm-dot{width:6px;height:6px;border-radius:50%;flex:none}
.igc .tkm-chip .tkm-ck{flex:none;color:var(--ok-fg)}
/* Shipped: muted done treatment (subtle green tint + check). */
.igc .tkm-chip.tkm-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.9}
.igc .tkm-chip.tkm-done .tkm-t{color:var(--ok-fg3)}
/* Overdue (not shipped/closed): inset danger left rule over the severity swatch. */
.igc .tkm-chip.tkm-overdue::before{background:var(--danger-fg);width:3px;margin-right:5px}
.igc .tkm-chip.tkm-overdue{border-color:var(--danger-border)}
/* '+N more' pill. */
.igc .tkm-more{align-self:flex-start;margin-top:1px;height:18px;padding:0 7px;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;border-radius:5px;cursor:pointer}
.igc .tkm-more:hover{background:var(--sunken);color:var(--ink)}
/* Day popover — in-flow absolute overlay anchored to the cell. */
.igc .tkm-cell .tkm-pop{position:absolute;top:24px;left:4px;z-index:40;width:230px;max-width:calc(100vw - 40px);max-height:280px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:8px}
.igc .tkm-pop-h{display:flex;align-items:center;gap:7px;padding:2px 4px 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink)}
.igc .tkm-pop-n{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);background:var(--sunken);border-radius:var(--r-pill);min-width:18px;height:18px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
.igc .tkm-pop-b{display:flex;flex-direction:column;gap:4px}
.igc .tkm-pop-b .tkm-chip{height:26px}

/* Dark-mode: the base cell/off-month/weekend/today all use tokens that
   already carry dark values (--surface/--sunken/--weekend/--gold-fill/
   --navy/--gold-acc). Only the NEW soft fills need explicit reinforcement so
   the shipped tint + overdue border read correctly on the dark canvas. */
.igc[data-theme="dark"] .tkm-chip.tkm-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.85}
.igc[data-theme="dark"] .tkm-chip.tkm-done .tkm-t{color:var(--ok-fg3)}
.igc[data-theme="dark"] .tkm-chip.tkm-overdue{border-color:var(--danger-border)}
.igc[data-theme="dark"] .tkm-num.tkm-today{color:var(--navy);background:var(--gold-fill)}

/* Month calendar chip-ID status colors — dark-mode legible variants. Light
   leaves these UNSET so the inline var(--tks-*, #hex) fallback stays byte-identical;
   dark defines lightened values (the r107 dark-contrast trap, foreground form). */
.igc[data-theme="dark"] .tkm-chip, .igs-shell[data-theme="dark"] .tkm-chip{
  --tks-new:#96A3BC;--tks-triage:#6FA0F0;--tks-assigned:#9E95F0;--tks-in_progress:#E0A860;--tks-blocked:#EE8585;--tks-in_review:#52C0B2;--tks-shipped:#52C88E;
}


/* ===========================================================================
   P2 Quarter view — a continuous 13-week roadmap band. New .tkq-* namespace;
   .tkw-*/.tkm-* untouched. Owner gutter reuses the Week gutter geometry (196px).
   Point tickets = fixed ~13px diamonds; ranged = min-width bars; shipped =
   muted+check; overdue = --danger ring. Light values are byte-identical
   (unset tokens fall back to the inline #hex); dark overrides follow.
   =========================================================================== */
.igc .tkq-wrap{border-top:1px solid var(--line);background:var(--surface)}
.igc .tkq-scroll{overflow-x:auto;overflow-y:hidden}
.igc .tkq-inner{min-width:900px;position:relative}
/* pinned owner gutter (sticky left over the horizontal scroll) */
.igc .tkq-gut{width:196px;flex:none;padding:10px 14px;display:flex;align-items:center;gap:10px;border-right:1px solid var(--line-2);background:var(--surface);position:sticky;left:0;z-index:4}
.igc .tkq-gut-hd{height:100%;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);align-items:center}
/* two-tier ruler */
.igc .tkq-ruler{display:flex;position:sticky;top:0;z-index:9;background:var(--surface);border-bottom:1px solid var(--line)}
.igc .tkq-band{flex:1;position:relative;min-width:0}
.igc .tkq-ruler-band{height:46px}
.igc .tkq-mo-row{position:absolute;top:0;left:0;right:0;height:24px}
.igc .tkq-wk-row{position:absolute;bottom:0;left:0;right:0;height:20px}
.igc .tkq-mo{position:absolute;top:0;height:24px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;color:var(--ink);border-left:1px solid var(--line-strong);overflow:hidden}
.igc .tkq-mo:first-child{border-left:none}
.igc .tkq-wk{position:absolute;bottom:0;height:20px;transform:translateX(-50%)}
.igc .tkq-wk-l{font-size:9.5px;font-weight:600;letter-spacing:.2px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
/* lanes + band background gridlines */
.igc .tkq-lanes{position:relative}
.igc .tkq-lane{display:flex;border-bottom:1px solid var(--line-2);position:relative;z-index:1;min-height:48px}
.igc .tkq-lane-band{padding:7px 0}
.igc .tkq-bg{position:absolute;left:196px;right:0;top:0;bottom:0;pointer-events:none;z-index:0}
.igc .tkq-gl{position:absolute;top:0;bottom:0;width:1px}
.igc .tkq-gl-mo{background:var(--line-strong)}
.igc .tkq-gl-wk{background:var(--line-2)}
.igc .tkq-today{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--gold-acc);box-shadow:0 0 0 1px rgba(255,255,255,.5);z-index:2}
/* point diamond: fixed ~13px rotated square, centered vertically in the lane */
.igc .tkq-dia{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:2px;transform:rotate(45deg);background:var(--tkq-fill,#EDEFF3);border:2px solid var(--tkq-sv,#8A93A6);box-shadow:var(--shadow-1);cursor:grab;z-index:3;display:flex;align-items:center;justify-content:center}
.igc .tkq-dia:hover{filter:brightness(.98);box-shadow:0 0 0 3px var(--sel),var(--shadow-1)}
.igc .tkq-dia-ck{transform:rotate(-45deg)}
/* ranged bar: thin rounded, min-width so it never collapses; severity left edge */
.igc .tkq-bar{position:absolute;top:50%;min-width:22px;height:16px;margin-top:-8px;border-radius:8px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-1);cursor:grab;overflow:hidden;display:flex;align-items:center;gap:4px;padding:0 6px 0 0;z-index:3}
.igc .tkq-bar::before{content:"";flex:none;width:3px;align-self:stretch;margin-right:5px;border-radius:8px 0 0 8px;background:var(--tkq-sw,var(--muted))}
.igc .tkq-bar:hover{border-color:var(--line-strong)}
.igc .tkq-bar-id{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--ck-font-mono,monospace);white-space:nowrap;flex:none}
.igc .tkq-bar .tkq-ck{flex:none;color:var(--ok-fg);margin-left:5px}
/* shipped (muted done) + overdue (danger ring) */
.igc .tkq-dia.tkq-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.9}
.igc .tkq-bar.tkq-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.92}
.igc .tkq-bar.tkq-done::before{background:var(--ok-dot)}
.igc .tkq-dia.tkq-overdue{box-shadow:0 0 0 2px var(--danger-fg),var(--shadow-1)}
.igc .tkq-bar.tkq-overdue{border-color:var(--danger-border)}
.igc .tkq-bar.tkq-overdue::before{background:var(--danger-fg)}
/* cluster '+N' chip + its popover */
.igc .tkq-cluster{position:absolute;top:50%;transform:translate(-50%,-50%);height:18px;min-width:24px;padding:0 6px;border:1px solid var(--line-strong);background:var(--sunken);color:var(--ink);font-family:inherit;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;border-radius:var(--r-pill);cursor:pointer;z-index:4;box-shadow:var(--shadow-1)}
.igc .tkq-cluster:hover{background:var(--surface);border-color:var(--gold-acc)}
.igc .tkq-cluster.tkq-overdue{border-color:var(--danger-border);color:var(--danger-fg)}
.igc .tkq-pop{position:absolute;top:26px;z-index:40;width:238px;max-width:calc(100vw - 40px);max-height:280px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:8px}
.igc .tkq-pop-h{padding:2px 4px 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink)}
.igc .tkq-pop-b{display:flex;flex-direction:column;gap:3px}
.igc .tkq-pop-row{display:flex;align-items:center;gap:8px;width:100%;height:28px;padding:0 8px;border:1px solid var(--line-2);background:var(--surface);border-radius:6px;cursor:pointer;text-align:left}
.igc .tkq-pop-row:hover{border-color:var(--line-strong);background:var(--sunken)}
.igc .tkq-pop-sv{width:3px;height:15px;border-radius:2px;flex:none}
.igc .tkq-pop-id{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--ck-font-mono,monospace);white-space:nowrap;flex:none}
.igc .tkq-pop-t{font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
/* drag snap guide */
.igc .tkq-guide{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--gold-acc);pointer-events:none;z-index:5;opacity:.9}

/* Dark-mode: reinforce the NEW soft fills (diamond status tint, shipped tint,
   bar bg, cluster chip, popover). Base tokens (--surface/--sunken/--line*/
   --gold-acc/--ok-*/--danger-*) already carry dark values. The diamond fill is
   driven by --tkqf-{status} tints defined ONLY under [data-theme=dark] so the
   light inline var(--tkqf-*, st.b) fallback stays byte-identical (r107 trap). */
.igc[data-theme="dark"] .tkq-dia.tkq-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.85}
.igc[data-theme="dark"] .tkq-bar.tkq-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.88}
.igc[data-theme="dark"] .tkq-mo{color:var(--ink)}
.igc[data-theme="dark"] .tkq-cluster{background:var(--sunken);border-color:var(--line-strong);color:var(--ink)}
/* dark diamond status fills (muted, legible on the dark canvas) + chip-ID/label
   status colors, reusing the P1 --tks-{status} idiom for the ranged bar id + pop id. */
.igc[data-theme="dark"] .tkq-lane-band, .igc[data-theme="dark"] .tkq-pop, .igs-shell[data-theme="dark"] .tkq-lane-band{
  --tkqf-new:#2A3550;--tkqf-triage:#233A5E;--tkqf-assigned:#2E2A55;--tkqf-in_progress:#4A3620;--tkqf-blocked:#4A2626;--tkqf-in_review:#1E4440;--tkqf-shipped:#1E4433;
  --tks-new:#96A3BC;--tks-triage:#6FA0F0;--tks-assigned:#9E95F0;--tks-in_progress:#E0A860;--tks-blocked:#EE8585;--tks-in_review:#52C0B2;--tks-shipped:#52C88E;
}


/* ===========================================================================
   P3 Calendar craft polish (Week/Month/Quarter). Interaction-only: keyboard
   shortcuts + jump-to-date popover + drag polish + 'today' affordance. No
   render geometry is changed. Namespaced .tkcal-*; reuses the existing
   dark-safe tokens so [data-theme=dark] is handled by the token values, with
   explicit reinforcement for the new popover fill below.
   =========================================================================== */
/* jump-to-date: the range label reads as a tappable control */
.igc .tkcal-crumb{cursor:pointer;border-radius:6px;padding:1px 5px;margin:0 -5px;transition:background .12s var(--ease),color .12s var(--ease)}
.igc .tkcal-crumb:hover{background:var(--sunken);color:var(--ink)}
.igc .tkcal-crumb b{pointer-events:none}
/* in-flow absolute popover anchored under the crumb (NOT fixed; SPA scrolls) */
.igc .tkcal-jump{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:212px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:10px}
.igc .tkcal-jp-nav{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.igc .tkcal-jp-lbl{flex:1;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.igc .tkcal-jp-step{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:7px;cursor:pointer;transition:border-color .12s var(--ease),color .12s var(--ease)}
.igc .tkcal-jp-step:hover{border-color:var(--gold-acc);color:var(--ink)}
.igc .tkcal-jp-f{display:flex;gap:6px}
.igc .tkcal-jp-go{flex:1;height:30px;border:none;border-radius:7px;background:var(--navy);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-1)}
.igc .tkcal-jp-go:hover{filter:brightness(1.06)}
.igc .tkcal-jp-now{height:30px;padding:0 12px;flex:none;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.igc .tkcal-jp-now:hover{border-color:var(--line-strong);color:var(--ink)}
/* 'today' affordance: on offset 0 the Today button reads muted (you are here) */
.igc #tkw-today.tkcal-here{color:var(--faint);cursor:default}
/* drag polish (additive, CSS-only). All three modes already set data-drag on
   the source AND already paint their drop highlight in --gold-acc; here we (a)
   add a dashed 'origin' ring to the faded source and (b) give the drop
   highlights a short transition so the magnet feels intentional. */
.igc .tkw-bar[data-drag="1"],
.igc .tkm-chip[data-drag="1"],
.igc .tkq-dia[data-drag="1"],
.igc .tkq-bar[data-drag="1"]{outline:1.5px dashed var(--line-strong);outline-offset:1px}
.igc .tkw-track{transition:box-shadow .12s var(--ease)}
.igc .tkm-cell.tkm-drop-on{transition:box-shadow .12s var(--ease)}
.igc .tkq-guide{transition:left .06s linear}
/* Dark-mode reinforcement for the NEW jump popover fill/steppers. The base
   tokens (--surface/--line/--sunken/--navy/--gold-acc/--muted/--ink/--faint)
   already carry dark values; this just nudges the hover/label for legibility. */
.igc[data-theme="dark"] .tkcal-crumb:hover{background:var(--sunken)}
.igc[data-theme="dark"] .tkcal-jump{background:var(--surface);border-color:var(--line)}
.igc[data-theme="dark"] .tkcal-jp-step:hover{border-color:var(--gold-acc)}
.igc[data-theme="dark"] .tkw-bar[data-drag="1"],
.igc[data-theme="dark"] .tkm-chip[data-drag="1"],
.igc[data-theme="dark"] .tkq-dia[data-drag="1"],
.igc[data-theme="dark"] .tkq-bar[data-drag="1"]{outline-color:var(--line-strong)}


/* ===========================================================================
   Tickets Calendar — CLOSED / WON'T FIX reveal (2026-07-01, founder ask).
   Closed items are hidden by default; when the shared filter reveals them they
   render FADED (neutral --sunken/--muted, ~.55 opacity) with a check / x glyph.
   Deliberately DISTINCT from the green 'shipped' done treatment (--ok tokens).
   Namespaced .tkm-closed / .tkq-closed / .tkw-closed; all base tokens already
   carry dark values, with an explicit dark block for the soft fills below.
   =========================================================================== */
/* Month chip */
.igc .tkm-chip.tkm-closed{background:var(--sunken);border-color:var(--line);opacity:.55}
.igc .tkm-chip.tkm-closed .tkm-t{color:var(--muted)}
.igc .tkm-chip.tkm-closed::before{background:var(--line-strong)}
.igc .tkm-chip.tkm-closed .tkm-xg{flex:none;color:var(--muted)}
.igc .tkm-chip.tkm-closed:hover{opacity:.78;border-color:var(--line-strong)}
/* Quarter diamond + ranged bar */
.igc .tkq-dia.tkq-closed{opacity:.55;box-shadow:var(--shadow-1)}
.igc .tkq-dia.tkq-closed:hover{opacity:.8;filter:none}
.igc .tkq-bar.tkq-closed{background:var(--sunken);border-color:var(--line);opacity:.6}
.igc .tkq-bar.tkq-closed::before{background:var(--line-strong)}
.igc .tkq-bar.tkq-closed .tkq-bar-id{color:var(--muted)}
.igc .tkq-bar.tkq-closed:hover{opacity:.82;border-color:var(--line-strong)}
.igc .tkq-ck-closed,.igc .tkq-dia-ck-closed{color:var(--muted)}
/* Week bar (faded closed treatment; opacity + neutral rail carried inline) */
.igc .tkw-bar.tkw-closed{cursor:pointer}
.igc .tkw-bar.tkw-closed:hover{opacity:.78 !important}

/* Dark-mode reinforcement: the faded fills read on the dark canvas. --sunken/
   --muted/--faint/--line* already flip in the dark token block; these keep the
   opacity + neutral text explicit so closed never blends into the grid. */
.igc[data-theme="dark"] .tkm-chip.tkm-closed{background:var(--sunken);border-color:var(--line-strong);opacity:.5}
.igc[data-theme="dark"] .tkm-chip.tkm-closed .tkm-t{color:var(--muted)}
.igc[data-theme="dark"] .tkq-bar.tkq-closed{background:var(--sunken);border-color:var(--line-strong);opacity:.55}
.igc[data-theme="dark"] .tkq-dia.tkq-closed{opacity:.5}
.igc[data-theme="dark"] .tkw-bar.tkw-closed{opacity:.5}


/* ── Ticket PEEK popover (Calendar, 2026-07-01). In-flow absolute inside
   #tkw-body (SPA scrolls → NOT position:fixed). Dark-safe via .igc tokens; the
   node carries its own [data-theme] so it renders correctly even though it is
   appended to #tkw-body. Anchored + viewport-flipped in JS (_tkPeek). */
.igc .tkpk{position:absolute;z-index:60;width:300px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);box-shadow:var(--shadow-3);padding:12px 13px 11px;animation:ig-pop .14s var(--ease,cubic-bezier(.2,.7,.2,1));font-family:'Outfit',sans-serif}
.igc .tkpk-top{display:flex;align-items:center;gap:8px}
.igc .tkpk-id{font-family:var(--ck-font-mono,'IBM Plex Mono',monospace);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.igc .tkpk-status{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill,999px);font-size:11px;font-weight:700;white-space:nowrap;flex:none}
.igc .tkpk-sev{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.igc .tkpk-sev-dot{width:8px;height:8px;border-radius:50%;flex:none}
.igc .tkpk-x{margin-left:auto;width:22px;height:22px;border:none;background:transparent;color:var(--faint);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.igc .tkpk-x:hover{background:var(--sunken);color:var(--text)}
.igc .tkpk-title{margin:9px 0 10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.igc .tkpk-meta{display:flex;flex-direction:column;gap:7px}
.igc .tkpk-mrow{display:flex;align-items:center;gap:10px;min-height:20px}
.igc .tkpk-ml{width:82px;flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
.igc .tkpk-mv{flex:1;min-width:0;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.igc .tkpk-as{display:inline-flex;align-items:center;gap:7px;min-width:0}
.igc .tkpk-as-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.igc .tkpk-env{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-family:var(--ck-font-mono,monospace);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--sunken);color:var(--muted)}
.igc .tkpk-env-prod{background:var(--prod-bg);color:var(--prod-fg)}
.igc .tkpk-env-dev{background:var(--info-bg);color:var(--info-fg)}
.igc .tkpk-linked{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--muted)}
.igc .tkpk-foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2)}
.igc .tkpk-qs{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0}
.igc .tkpk-qs-l{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--faint);flex:none}
.igc .tkpk-qs-sel{flex:1;min-width:0;height:30px;border:1px solid var(--line);border-radius:var(--r-md,9px);background:var(--surface);padding:0 8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.igc .tkpk-qs-sel:hover{border-color:var(--line-strong)}
.igc .tkpk-open{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 8px 0 12px;border:none;border-radius:var(--r-md,9px);background:var(--navy);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-1);flex:none}
.igc .tkpk-open:hover{filter:brightness(1.06)}
.igc[data-theme="dark"] .tkpk-open{background:var(--navy-2)}
.igc[data-theme="dark"] .tkpk-open:hover{filter:brightness(1.12)}

/* Peek card: dark-mode legible ticket-ID status colors (mirrors the .tkm-chip dark --tks map; the peek is not inside .tkm-chip so it needs its own). */
.igc[data-theme="dark"] .tkpk, .igs-shell[data-theme="dark"] .tkpk{--tks-new:#96A3BC;--tks-triage:#6FA0F0;--tks-assigned:#9E95F0;--tks-in_progress:#E0A860;--tks-blocked:#EE8585;--tks-in_review:#52C0B2;--tks-shipped:#52C88E;}


/* ===========================================================================
   P4 Gantt view — RUNWAY model. A continuous 13-week band (reuses the Quarter
   .tkq-wrap/.tkq-scroll/.tkq-inner/.tkq-ruler/.tkq-gut/.tkq-band/.tkq-bg shell)
   where EVERY ticket is a runway bar (createdAt -> planned/shipped) stacked on
   packed rows per owner/epic lane. New .tkg-* namespace; .tkw-*/.tkm-*/.tkq-*
   render untouched. Dark-safe: soft status fills come from --tkgf-{status}
   defined ONLY under [data-theme=dark] so the light inline var(--tkgf-*, st.b)
   fallback stays intact (the r107 trap).
   =========================================================================== */
.igc .tkg-wrap{background:var(--surface)}
/* lane = pinned gutter + a variable-height band that grows with packed rows */
.igc .tkg-lane{display:flex;border-bottom:1px solid var(--line-2);position:relative;z-index:1;min-height:48px}
.igc .tkg-lane-gut{width:196px;flex:none;position:sticky;left:0;z-index:4;background:var(--surface);border-right:1px solid var(--line-2);display:flex;align-items:center}
.igc .tkg-lane-gut .tkq-gut{position:static;border-right:none;background:transparent;width:100%}
.igc .tkg-lane-band{padding:6px 0;position:relative;min-width:0}
/* runway bar: absolute at (left = f0, top = row*26). MIN width keeps degenerate
   (same-day) spans clickable. Fill = dark-safe status tint; 3px severity left
   edge via ::before; id + title truncate; grab cursor. */
.igc .tkg-bar{position:absolute;height:22px;min-width:26px;border-radius:7px;background:var(--tkg-fill,#EDEFF3);border:1px solid var(--line-2);box-shadow:var(--shadow-1);cursor:grab;overflow:hidden;display:flex;align-items:center;gap:5px;padding:0 8px 0 0;z-index:6}
.igc .tkg-bar::before{content:"";flex:none;width:3px;align-self:stretch;margin-right:6px;border-radius:7px 0 0 7px;background:var(--tkg-sw,var(--muted))}
.igc .tkg-bar:hover{border-color:var(--line-strong);z-index:15}
.igc .tkg-bar-id{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--ck-font-mono,monospace);white-space:nowrap;flex:none}
.igc .tkg-bar-t{font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.igc .tkg-bar .tkg-ck{flex:none;color:var(--ok-fg);margin-left:2px}
.igc .tkg-bar .tkg-link-glyph{flex:none;color:var(--link-acc,var(--info-fg));opacity:.7;margin-left:auto}
/* clipped-at-edge chevron/fade: a subtle gradient toward the clipped side */
.igc .tkg-bar.tkg-clipL{border-top-left-radius:2px;border-bottom-left-radius:2px}
.igc .tkg-bar.tkg-clipR{border-top-right-radius:2px;border-bottom-right-radius:2px}
.igc .tkg-bar.tkg-clipL::before{background:linear-gradient(to right,transparent,var(--tkg-sw,var(--muted)))}
.igc .tkg-bar.tkg-clipR::after{content:"";position:absolute;top:0;right:0;bottom:0;width:14px;background:linear-gradient(to right,transparent,var(--tkg-fill,#EDEFF3));pointer-events:none}
/* shipped -> green muted+check; closed/wont_fix -> faded neutral+check/x */
.igc .tkg-bar.tkg-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.92}
.igc .tkg-bar.tkg-done::before{background:var(--ok-dot)}
.igc .tkg-bar.tkg-closed{background:var(--sunken);border-color:var(--line);opacity:.6}
.igc .tkg-bar.tkg-closed::before{background:var(--line-strong)}
.igc .tkg-bar.tkg-closed .tkg-bar-id,.igc .tkg-bar.tkg-closed .tkg-bar-t{color:var(--muted)}
.igc .tkg-bar.tkg-closed:hover{opacity:.82;border-color:var(--line-strong)}
/* overdue -> danger right marker + border */
.igc .tkg-bar.tkg-overdue{border-color:var(--danger-border)}
.igc .tkg-bar .tkg-od{position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--danger-fg);border-radius:0 7px 7px 0}
/* link-drop affordance (reuses the Week dashed ring token) */
.igc .tkg-bar.tkw-linkmode{outline:2px dashed var(--gold-line);outline-offset:1px;border-radius:9px}
/* '+N more' overflow chip pinned to the last visible row of a dense lane */
.igc .tkg-more{position:absolute;left:6px;height:20px;padding:0 9px;border:1px solid var(--line-strong);background:var(--sunken);color:var(--ink);font-family:inherit;font-size:10.5px;font-weight:700;border-radius:var(--r-pill);cursor:pointer;z-index:7;box-shadow:var(--shadow-1)}
.igc .tkg-more:hover{background:var(--surface);border-color:var(--gold-acc)}
.igc .tkg-pop{z-index:40}
/* the group toggle segmented control lives in the toolbar (inline-styled) */

/* Dark-mode: soft status fills for the runway bars, driven by --tkgf-{status}
   defined ONLY here so the light inline var(--tkgf-*, st.b) fallback is
   byte-identical. Also reuse the P1 --tks-{status} idiom for the bar id color.
   Base tokens (--surface/--sunken/--line*/--ok-*/--danger-*) already carry dark
   values. */
.igc[data-theme="dark"] .tkg-lane-band, .igs-shell[data-theme="dark"] .tkg-lane-band{
  --tkgf-new:#2A3550;--tkgf-triage:#233A5E;--tkgf-assigned:#2E2A55;--tkgf-in_progress:#4A3620;--tkgf-blocked:#4A2626;--tkgf-in_review:#1E4440;--tkgf-shipped:#1E4433;
  --tks-new:#96A3BC;--tks-triage:#6FA0F0;--tks-assigned:#9E95F0;--tks-in_progress:#E0A860;--tks-blocked:#EE8585;--tks-in_review:#52C0B2;--tks-shipped:#52C88E;
}
.igc[data-theme="dark"] .tkg-bar.tkg-done{background:var(--ok-bg2);border-color:var(--ok-border);opacity:.88}
.igc[data-theme="dark"] .tkg-bar.tkg-closed{background:var(--sunken);border-color:var(--line-strong);opacity:.55}
.igc[data-theme="dark"] .tkg-bar.tkg-clipR::after{background:linear-gradient(to right,transparent,var(--tkg-fill,#2A3550))}
.igc[data-theme="dark"] .tkg-more{background:var(--sunken);border-color:var(--line-strong);color:var(--ink)}


/* FIX 3 (2026-07-01): the Gantt '+N more' popover reuses .tkq-pop, which pins
   top:26px. In a dense Gantt lane the '+N' chip sits at a variable top
   (row*26, up to ~130px), so drawGantt's openMore() now sets pop.style.top to
   the chip's offsetTop in JS. top:auto lets that inline value win (it beats the
   .tkq-pop top:26px without needing !important since .tkg-pop is more specific
   here only via the JS-set inline style; the inline style always wins). */
.igc .tkg-pop{top:auto}

/* Ticket-detail rail: inline 'new epic' input row (manual epic assign).
   All colors resolve through the .igc[data-theme] token blocks (--surface /
   --line / --navy / --ink), so LIGHT and DARK both render correctly with no
   separate [data-theme=dark] override needed. Kept minimal — the input +
   button already carry inline token styles matching the td-* rail controls. */
.igc .td-epic-new{margin-top:2px}
.igc .td-epic-new #td-epic-new-go:disabled{opacity:.6;cursor:default}

/* ═══════════════════════════════════════════════════════════════════════
   FOUNDATION TIER (2026-07-02, design-elevation Week 0) — the ONE canon.
   The .igc[data-theme] blocks above stay the color source of truth; this
   block adds the missing semantic tokens (type scale, motion, density,
   accent budget) and ALIASES the two older vocabularies (radius/shadow/
   transition legacy names and the ck-r/ck-sh/ck-dur names) onto the
   .igc scale so legacy CSS snaps into line without edits. Never define a
   4th vocabulary — extend THIS one. Rules (design canon):
     · gold ≤10% of any view: primary action, active nav/tab, headline
       number, focus ring — never routine chrome ("gold thread")
     · elevation = surface step, not border; hairline --line only on
       inputs, selected rows, active tabs
     · type: exactly 5 sizes / 3 weights; display font only at section/
       title/KPI; .tnum on every numeric value
     · motion: nothing >400ms; <100ms interactions don't animate;
       skeleton only for waits >500ms; spinner only on the clicked control
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* type scale — the only 5 sizes for new code */
  --fs-caption:11px; --fs-dense:12.5px; --fs-body:14px; --fs-section:18px; --fs-title:24px;
  /* motion — the only 3 durations + 1 entrance curve for new code */
  --dur-fast:150ms; --dur-med:200ms; --dur-slow:300ms;
  --ease-out:cubic-bezier(.2,0,0,1);
  /* density: 4px grid multiplier; compact mode sets .8 (persisted per user) */
  --density:1; --row-h:calc(40px * var(--density));
  /* legacy generation → .igc canon (values, not var() — :root can't see .igc scope) */
  --radius-sm:7px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --transition-fast:150ms cubic-bezier(.2,0,0,1);
  --transition-base:200ms cubic-bezier(.2,0,0,1);
  --transition-slow:300ms cubic-bezier(.2,0,0,1);
  /* ck generation → .igc canon */
  --ck-r-sm:7px; --ck-r-md:10px; --ck-r-tile:14px; --ck-r-lg:14px; --ck-r-xl:18px;
  --ck-dur-quick:150ms; --ck-dur-std:200ms; --ck-dur-emph:300ms;
}
.igc{
  --accent:var(--gold); --accent-ink:#0A183A;
  --accent-soft:color-mix(in oklab, var(--gold) 14%, transparent);
}

/* ── global focus ring (the gold thread's keyboard leg) ─────────────── */
.igc :focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--canvas), 0 0 0 4px color-mix(in oklab, var(--gold) 55%, transparent);
  border-radius:var(--r-sm);
}

/* ── engineered numbers ─────────────────────────────────────────────── */
.igc .tnum{font-variant-numeric:tabular-nums}

/* ── kbd token (cmd-K hints, shortcut overlays) ─────────────────────── */
.igc kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--sunken);border:1px solid var(--line);border-radius:6px;
  font-family:var(--font-mono,ui-monospace);font-size:11px;color:var(--muted);
}

/* ── chip primitive (PRIMITIVE 1) — one status vocabulary ───────────────
   Usage: <span class="stc" style="--stc:var(--ok-fg)">…</span>
   12%-alpha tinted bg + full-contrast same-hue text + optional dot span.
   Works in both themes automatically because --ok-fg etc. flip with the
   .igc[data-theme] blocks. Never solid-saturated at table density. */
.igc .stc{
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 9px;border-radius:var(--r-md);
  background:color-mix(in oklab, var(--stc, var(--muted)) 12%, transparent);
  color:var(--stc, var(--muted));
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.04em;
  white-space:nowrap;
}
.igc .stc .stc-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.igc .stc.stc-filled{background:var(--stc,var(--muted));color:var(--surface)}

/* ── card primitive (PRIMITIVE 2) — borderless, elevation by surface ── */
.igc .c-card{background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-1)}
.igc .c-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.igc .c-card-h .c-card-t{font-size:var(--fs-caption);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.igc .c-card-hover{transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);cursor:pointer}
.igc .c-card-hover:hover{background:var(--sunken);box-shadow:var(--shadow-2)}

/* ── row primitive (PRIMITIVE 7) — CSS hover/focus parity, no JS swaps ── */
.igc .rl-row{min-height:var(--row-h);transition:background var(--dur-fast) var(--ease-out)}
.igc .rl-row:hover,.igc .rl-row:focus-visible{background:var(--sunken)}
.igc .rl-row.rl-sel{background:var(--sel);box-shadow:inset 2px 0 0 var(--gold)}

/* ── async-state kit (PRIMITIVE 4) — the ONLY skeleton system ────────── */
.igc .sk{position:relative;overflow:hidden;background:var(--skeleton-1);border-radius:var(--r-sm)}
.igc .sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--skeleton-2),transparent);
  animation:sk-sweep 1.2s var(--ease-out) infinite}
@keyframes sk-sweep{to{transform:translateX(100%)}}
.igc .sk-line{height:12px;margin:6px 0}
.igc .sk-row{height:var(--row-h);border-radius:var(--r-md);margin:6px 0}
.igc .sk-card{height:96px;border-radius:var(--r-lg)}
.igc .empty-calm{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 18px;text-align:center}
.igc .empty-calm .ec-ic{width:44px;height:44px;border-radius:50%;background:var(--accent-soft,var(--gold-soft));display:flex;align-items:center;justify-content:center;color:var(--gold-ic);font-size:20px}
.igc .empty-calm .ec-t{font-family:var(--font-display,'Plus Jakarta Sans');font-size:15px;font-weight:700;color:var(--ink)}
.igc .empty-calm .ec-s{font-size:var(--fs-dense);color:var(--muted);max-width:340px}
.igc .err-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--danger-bg);color:var(--danger-fg);font-size:var(--fs-dense)}
.igc .err-card button{margin-left:auto;height:28px;padding:0 11px;border-radius:var(--r-md);border:1px solid var(--danger-border,transparent);background:var(--surface);color:var(--danger-fg);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}

/* ── stat tile (PRIMITIVE 8) ────────────────────────────────────────── */
.igc .stat-tile .st-l{font-size:var(--fs-caption);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.igc .stat-tile .st-v{font-family:var(--font-display,'Plus Jakarta Sans');font-size:var(--fs-title);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.igc .stat-tile .st-s{font-size:var(--fs-caption);color:var(--muted)}

/* ── freshness stamp (SIGNATURE 3) ──────────────────────────────────── */
.igc .fresh{font-family:var(--font-mono,ui-monospace);font-size:10.5px;color:var(--faint)}
.igc .fresh.fresh-stale{color:var(--warn-fg)}

/* ── motion & a11y floor ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .igc *,.igc *::before,.igc *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── SIGNATURE 4 — view transition on page swap (2026-07-02) ─────────── */
@keyframes pg-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pg-enter { animation: pg-enter var(--dur-med, 200ms) var(--ease-out, cubic-bezier(.2,0,0,1)); }
@media (prefers-reduced-motion: reduce){ .pg-enter { animation: none; } }

/* ── CONTENT CALENDAR (/admin/content, 2026-07-02) — month grid + editor.
   Tokens carry light+dark parity; brand-icon filter chips + status-striped
   item chips. ─────────────────────────────────────────────────────────── */
.igc .cc-flabel{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-right:1px;}
.igc .cc-fchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:var(--r-pill,999px);border:1px solid var(--line);background:var(--surface);color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast,150ms) var(--ease-out,ease),color var(--dur-fast,150ms) var(--ease-out,ease),border-color var(--dur-fast,150ms) var(--ease-out,ease),transform var(--dur-fast,150ms) var(--ease-out,ease);}
.igc .cc-fchip:hover{background:var(--sunken);color:var(--ink);transform:translateY(-1px);}
.igc .cc-fchip:active{transform:translateY(0);}
.igc .cc-fchip.on{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-link);box-shadow:inset 0 0 0 1px var(--gold-line);}
.igc .cc-fchip.on .ph{color:var(--gold-link);}
.igc .cc-fchip.cc-clear{color:var(--danger-fg);border-style:dashed;}
.igc .cc-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-top:8px;padding:0 1px;}
.igc .cc-dow-c{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;padding:4px 10px 7px;}
.igc .cc-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:126px;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);background:var(--surface);}
.igc .cc-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 7px 5px;overflow:hidden;position:relative;transition:background var(--dur-fast,150ms) var(--ease-out,ease);}
.igc .cc-cell:nth-child(7n){border-right:none;}
.igc .cc-cell:hover{background:color-mix(in srgb, var(--sunken) 55%, transparent);}
.igc .cc-cell.cc-off{background:transparent;}
.igc .cc-cell.cc-off .cc-num{color:var(--faint);opacity:.6;}
.igc .cc-num{font-size:12.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:1px;}
.igc .cc-num.cc-today{background:var(--gold);color:var(--navy);font-weight:800;box-shadow:0 1px 4px color-mix(in srgb, var(--gold) 45%, transparent);}
.igc .cc-chips{display:flex;flex-direction:column;gap:3px;margin-top:3px;}
.igc .cc-chip{display:flex;align-items:center;gap:6px;width:100%;text-align:left;height:23px;padding:0 7px 0 11px;border:none;border-radius:7px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:transform var(--dur-fast,150ms) var(--ease-out,ease),box-shadow var(--dur-fast,150ms) var(--ease-out,ease),background var(--dur-fast,150ms) var(--ease-out,ease);animation:cc-chip-in var(--dur-med,200ms) var(--ease-out,ease) both;}
.igc .cc-chip::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--cc-sw,var(--muted));}
.igc .cc-chip:hover{background:var(--sunken);transform:translateX(1px);box-shadow:inset 0 0 0 1px var(--line-strong),0 2px 6px rgba(10,24,58,.08);}
.igc .cc-chip-p{font-size:12.5px;color:var(--muted);flex:none;}
.igc .cc-chip-t{font-size:11.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1px;}
.igc .cc-more{margin-top:2px;font-size:11px;color:var(--gold-link);background:none;border:none;cursor:pointer;font-weight:600;padding:1px 6px;font-family:inherit;border-radius:5px;transition:background var(--dur-fast,150ms) var(--ease-out,ease);}
.igc .cc-more:hover{background:var(--gold-soft);}
@keyframes cc-chip-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.igc .cc-pop{position:absolute;z-index:40;left:4px;top:26px;width:220px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-3);padding:8px;display:flex;flex-direction:column;gap:3px;}
.igc .cc-pop-h{font-size:var(--fs-caption);color:var(--muted);font-weight:700;padding:0 4px 4px;}
/* editor overlay */
.cc-ov{position:fixed;inset:0;z-index:10070;background:rgba(6,12,28,.44);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:44px 16px;overflow-y:auto;animation:cc-ov-in var(--dur-med,200ms) var(--ease-out,ease);}
.cc-ed{width:568px;max-width:100%;background:var(--bg-surface,var(--surface));border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(6,12,28,.5);display:flex;flex-direction:column;max-height:86vh;animation:cc-ed-in var(--dur-med,200ms) var(--spring,cubic-bezier(.2,.8,.2,1));transform-origin:center top;}
.cc-ed-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:var(--ink);}
.cc-ed-x{border:none;background:none;color:var(--faint);cursor:pointer;font-size:17px;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast,150ms) var(--ease-out,ease),color var(--dur-fast,150ms) var(--ease-out,ease);}
.cc-ed-x:hover{background:var(--sunken);color:var(--ink);}
.cc-ed-b{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:13px;}
.cc-ed-b label{font-size:10px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)!important;gap:5px!important;}
.cc-ed-b .ck-inp{font-size:13px;color:var(--ink);}
.cc-ed-f{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--line);}
.cc-igni{border:1px solid var(--gold-line);background:linear-gradient(180deg, var(--gold-soft), color-mix(in srgb, var(--gold-soft) 55%, transparent));border-radius:12px;padding:11px 12px;box-shadow:0 1px 0 color-mix(in srgb, var(--gold) 22%, transparent) inset;}
.cc-igni .cc-igni-btn{transition:transform var(--dur-fast,150ms) var(--ease-out,ease);}
.cc-igni .cc-igni-btn:active{transform:scale(.97);}
@keyframes cc-ov-in{from{opacity:0}to{opacity:1}}
@keyframes cc-ed-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* view switcher (segmented) */
.igc .cc-viewsw{display:inline-flex;gap:1px;background:var(--sunken);border:1px solid var(--line);border-radius:9px;padding:2px;}
.igc .cc-viewsw button{border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--muted);padding:4px 12px;border-radius:7px;cursor:pointer;transition:background var(--dur-fast,150ms) var(--ease-out,ease),color var(--dur-fast,150ms) var(--ease-out,ease);}
.igc .cc-viewsw button:hover{color:var(--ink);}
.igc .cc-viewsw button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);}
/* week view */
.igc .cc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.igc .cc-wcol{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;}
.igc .cc-wcol.cc-wend{background:color-mix(in srgb, var(--sunken) 45%, var(--surface));}
.igc .cc-whd{display:flex;align-items:baseline;justify-content:space-between;padding:9px 11px;border-bottom:1px solid var(--line);}
.igc .cc-wdow{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;}
.igc .cc-wnum{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.igc .cc-whd.cc-wtoday .cc-wnum{background:var(--gold);color:var(--navy);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.igc .cc-wbody{padding:8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;}
/* day + agenda */
.igc .cc-day{max-width:760px;display:flex;flex-direction:column;gap:8px;}
.igc .cc-agenda{max-width:820px;display:flex;flex-direction:column;gap:6px;}
.igc .cc-ag-day{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 3px;display:flex;align-items:center;gap:8px;}
.igc .cc-ag-wk{font-size:10px;font-weight:700;color:var(--gold-link);background:var(--gold-soft);border-radius:999px;padding:1px 8px;letter-spacing:0;}
/* expanded row (week/day/agenda) */
.igc .cc-row{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;padding:9px 11px 9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;position:relative;overflow:hidden;font-family:inherit;transition:background var(--dur-fast,150ms) var(--ease-out,ease),border-color var(--dur-fast,150ms) var(--ease-out,ease),transform var(--dur-fast,150ms) var(--ease-out,ease);animation:cc-chip-in var(--dur-med,200ms) var(--ease-out,ease) both;}
.igc .cc-row::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--cc-sw,var(--muted));}
.igc .cc-row:hover{background:var(--sunken);border-color:var(--line-strong);transform:translateY(-1px);}
.igc .cc-row-p{font-size:15px;color:var(--muted);flex:none;margin-top:1px;}
.igc .cc-row-main{min-width:0;flex:1;}
.igc .cc-row-t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;display:flex;align-items:center;gap:7px;}
.igc .cc-row-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.igc .cc-row-b{font-size:12px;color:var(--faint);margin-top:5px;line-height:1.5;white-space:pre-wrap;}
.igc .cc-row-over::before{background:var(--danger-fg);}
.igc .cc-row{padding-right:34px;}
.igc .cc-row-post{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);opacity:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity var(--dur-fast,150ms) var(--ease-out,ease),background var(--dur-fast,150ms) var(--ease-out,ease),color var(--dur-fast,150ms) var(--ease-out,ease),border-color var(--dur-fast,150ms) var(--ease-out,ease);}
.igc .cc-row:hover .cc-row-post{opacity:1;}
.igc .cc-row-post:hover{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-fg);}
.igc .cc-cell.cc-drop-on,.igc .cc-wcol.cc-drop-on{box-shadow:inset 0 0 0 2px var(--gold);background:var(--gold-soft)!important;}
.igc .cc-dragging{opacity:.4;}
.igc .cc-chip-over .cc-chip-t{color:var(--danger-fg);}
.igc .cc-over-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--danger-fg);background:var(--danger-bg, rgba(196,33,33,.12));border-radius:999px;padding:1px 7px;}
/* IGNI CMO staged ghosts (2026-07-09) — uncommitted items previewed on the
   calendar by the CMO drawer. Dashed gold, non-interactive affordance. */
.igc .cc-chip.cc-staged{box-shadow:none;border:1.5px dashed var(--gold);background:var(--gold-soft);cursor:default;}
.igc .cc-row.cc-staged{box-shadow:none;border:1.5px dashed var(--gold);background:var(--gold-soft);cursor:default;}
.igc .cc-staged .cc-chip-t,.igc .cc-staged .cc-row-t{color:var(--gold-fg);}
@media (prefers-reduced-motion:reduce){ .igc .cc-chip{animation:none;} .igc .cc-row{animation:none;} .cc-ed,.cc-ov{animation:none;} }
@media (max-width:768px){ .igc .cc-grid{grid-auto-rows:98px;border-radius:10px;} .igc .cc-chip-t{font-size:11px;} .cc-ov{padding:0;align-items:stretch;} .cc-ed{border-radius:0;max-height:100vh;width:100%;} }