/* ═══════════════════════════════════════════════════════════════════════════
   2026 DESKTOP OVERHAUL — all rules gated at ≥769px (tablet + desktop).
   Mobile (≤768px) rules above stay untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Theme-button icon swap: show only the target-state icon. Sun = currently
   dark, clicking goes to light; Moon = currently light, clicking goes to dark.
   Declared outside the media query so the rule applies wherever the button
   is rendered (desktop only today, but keeps us flexible). */
.header-theme-btn .theme-icon-sun { display: none; }
.header-theme-btn .theme-icon-moon { display: inline-block; }
[data-theme="dark"] .header-theme-btn .theme-icon-sun { display: inline-block; }
[data-theme="dark"] .header-theme-btn .theme-icon-moon { display: none; }

/* Sidebar stays hidden on everything below 1024px even after JS strips the
   [hidden] attribute. The ≥1024px block below flips it back on. */
.app-sidebar { display: none; }

@media (min-width: 769px) {

    /* ── Body + canvas ────────────────────────────────────────────────── */
    body {
        background: var(--canvas);
        color: var(--ink);
        font-size: var(--t-base);
        line-height: 1.55;
        margin-left: var(--sidebar-w);
    }

    /* Keep home/settings panels on canvas bg, no mobile top-padding */
    #home-panel,
    #settings-panel {
        background: var(--canvas);
    }

    /* Mobile home-page reserved top padding for its own fixed header bar —
       we hide that on desktop (existing rule), but also reset the home-content
       padding so our main top strip drives the offset. */
    .home-content { padding-top: 0; }

    /* ── Sidebar (fixed left, 240px) ──────────────────────────────────── */
    .app-sidebar {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        background: var(--surface);
        border-right: 1px solid var(--border);
        z-index: 101;
        padding: 28px 14px 14px;
        overflow-y: auto;
    }
    .app-sidebar[hidden] { display: flex !important; }

    .sidebar-brand {
        padding: 0 6px 12px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 16px;
    }
    .sidebar-brand-link {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
    }
    .sidebar-logo {
        width: 32px;
        height: 32px;
        border-radius: var(--r-sm);
        flex-shrink: 0;
    }
    .sidebar-brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        min-width: 0;
    }
    .sidebar-brand-title {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        font-size: 18px;
        letter-spacing: 1.2px;
        color: var(--ink);
    }
    .sidebar-brand-sub {
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        letter-spacing: 0.6px;
        margin-top: 2px;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-height: 0;
    }
    .sidebar-section-divider {
        height: 1px;
        background: var(--border);
        margin: 14px 6px;
    }
    .sidebar-row {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 40px;
        padding: 0 14px;
        border-radius: var(--r-md);
        color: var(--ink-muted);
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-sm);
        font-weight: 500;
        letter-spacing: 0.1px;
        position: relative;
        transition: background var(--dur-med) var(--ease),
                    color var(--dur-med) var(--ease);
        text-align: left;
        width: 100%;
    }
    .sidebar-row-secondary {
        color: var(--ink-subtle);
        font-size: var(--t-xs);
        font-weight: 500;
        letter-spacing: 0.4px;
    }
    .sidebar-row:hover {
        background: var(--surface-hover);
        color: var(--ink);
    }
    .sidebar-row:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }
    .sidebar-row-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--ink-subtle);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-row-icon svg { width: 18px; height: 18px; }
    .sidebar-row-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar-row-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 7px;
        border-radius: var(--r-full);
        background: var(--accent);
        color: #fff;
        font-size: var(--t-xs);
        font-weight: 600;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0;
    }
    .sidebar-row.is-active {
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 600;
    }
    .sidebar-row.is-active .sidebar-row-icon { color: var(--accent); }
    .sidebar-row.is-active::before {
        content: "";
        position: absolute;
        left: -14px;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 var(--r-sm) var(--r-sm) 0;
        background: var(--accent);
        animation: sidebar-indicator-in var(--dur-med) var(--ease);
    }
    @keyframes sidebar-indicator-in {
        from { transform: translateX(-3px); opacity: 0; }
        to   { transform: translateX(0);     opacity: 1; }
    }

    /* Footer user chip */
    .sidebar-footer {
        margin-top: 10px;
        border-top: 1px solid var(--border);
        padding-top: 12px;
    }
    .sidebar-user-chip {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        background: var(--surface);
        border-radius: var(--r-md);
        cursor: pointer;
        color: var(--ink);
        text-align: left;
        transition: background var(--dur-med) var(--ease),
                    box-shadow var(--dur-med) var(--ease),
                    border-color var(--dur-med) var(--ease);
    }
    .sidebar-user-chip:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-sm);
    }
    .sidebar-user-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
    .sidebar-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-sm);
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        letter-spacing: 0.4px;
    }
    .sidebar-user-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
        flex: 1;
    }
    .sidebar-user-name {
        font-size: var(--t-sm);
        color: var(--ink);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar-user-role {
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        letter-spacing: 0.4px;
        text-transform: capitalize;
        margin-top: 1px;
    }
    .sidebar-user-chevron {
        width: 14px;
        height: 14px;
        color: var(--ink-subtle);
        flex-shrink: 0;
    }

    /* ── Top strip (trimmed 56px site-header) ─────────────────────────── */
    .site-header {
        background: var(--surface);
        color: var(--ink);
        height: var(--topstrip-h);
        padding: 0 var(--sp-6);
        box-shadow: none;
        border-bottom: 1px solid var(--border);
        left: var(--sidebar-w);
        right: 0;
    }
    .site-header .header-brand-group { display: none; }
    .site-header .header-nav-desktop { gap: var(--sp-3); }
    .site-header .header-nav-desktop .nav-link { display: none !important; }
    .site-header .header-divider { display: none; }
    .header-page-title {
        display: block;
        flex: 1;
        text-align: left;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xl);
        font-weight: 600;
        color: var(--ink);
        letter-spacing: 0;
        padding: 0;
    }
    .header-sub-bar { display: none; }

    /* Icon buttons on the strip — ghost on white */
    .site-header .header-icon-btn {
        width: 38px;
        height: 38px;
        background: transparent;
        border: 1px solid var(--border);
        color: var(--ink-muted);
        border-radius: var(--r-full);
        transition: background var(--dur-med) var(--ease),
                    border-color var(--dur-med) var(--ease),
                    color var(--dur-med) var(--ease),
                    box-shadow var(--dur-med) var(--ease);
    }
    .site-header .header-icon-btn:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        color: var(--ink);
    }
    .site-header .header-icon-btn:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }
    .site-header .header-icon-btn svg { width: 18px; height: 18px; }
    .site-header .header-icon-badge {
        top: -2px;
        right: -2px;
        min-width: 10px;
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: 50%;
        background: var(--danger);
        color: transparent;
        box-shadow: 0 0 0 2px var(--surface);
    }

    /* Bell + popover anchor */
    .header-bell-wrap {
        position: relative;
        display: inline-flex;
    }

    /* Create button — one bold primary on the strip */
    .site-header #header-create-btn.header-icon-btn {
        width: auto;
        height: 38px;
        padding: 0 16px 0 18px;
        border-radius: var(--r-md);
        background: var(--accent);
        color: #fff;
        border: 1px solid transparent;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-sm);
        font-weight: 600;
        letter-spacing: 0.2px;
        gap: 8px;
    }
    .site-header #header-create-btn.header-icon-btn::before {
        content: "Create";
        order: 1;
    }
    .site-header #header-create-btn.header-icon-btn svg {
        width: 16px;
        height: 16px;
        order: 2;
    }
    .site-header #header-create-btn.header-icon-btn:hover {
        background: #22588f;
        border-color: transparent;
        color: #fff;
        box-shadow: var(--shadow-sm);
    }
    .site-header #header-create-btn.header-icon-btn:focus-visible {
        box-shadow: var(--shadow-focus);
        background: var(--accent);
        color: #fff;
    }
    .site-header #header-create-btn.header-icon-btn:active {
        transform: scale(0.98);
        transition: transform var(--dur-fast) var(--ease);
    }
    /* Job-focused state — Create is "armed" for the open card. Green
       reads as additive/safe (red would mislead as destructive). */
    .site-header #header-create-btn.header-icon-btn.has-focused-job,
    .site-header #header-create-btn.header-icon-btn.has-focused-job:focus-visible {
        background: var(--green);
        border-color: transparent;
    }
    .site-header #header-create-btn.header-icon-btn.has-focused-job:hover {
        background: #1e8449;
    }

    /* Create dropdown — floating white card with soft shadow */
    .site-header .create-menu.user-menu {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-lg2);
        min-width: 220px;
        padding: 6px;
        top: calc(100% + 6px);
    }
    .site-header .create-menu .user-menu-item {
        color: var(--ink);
        padding: 10px 12px;
        border-radius: var(--r-sm);
        font-size: var(--t-sm);
    }
    .site-header .create-menu .user-menu-item:hover {
        background: var(--surface-hover);
        color: var(--ink);
    }

    /* User menu — floats upward from sidebar chip */
    body > #user-menu.user-menu {
        position: fixed;
        top: auto;
        bottom: 74px;
        right: auto;
        left: 14px;
        width: calc(var(--sidebar-w) - 28px);
        min-width: 0;
        background: var(--surface);
        color: var(--ink);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-lg2);
        padding: 6px;
    }
    body > #user-menu.user-menu .user-menu-header { padding: 10px 12px 8px; }
    body > #user-menu.user-menu .user-menu-name { color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
    body > #user-menu.user-menu .user-menu-role { color: var(--ink-subtle); }
    body > #user-menu.user-menu .user-menu-divider { background: var(--border); }
    body > #user-menu.user-menu .user-menu-item {
        color: var(--ink);
        padding: 10px 12px;
        border-radius: var(--r-sm);
        font-size: var(--t-sm);
    }
    body > #user-menu.user-menu .user-menu-item:hover { background: var(--surface-hover); color: var(--ink); }
    body > #user-menu.user-menu .user-menu-item-danger { color: var(--danger); }
    body > #user-menu.user-menu .user-menu-item-danger:hover { background: var(--danger-soft); color: var(--danger); }
    body > #user-menu.user-menu .user-menu-hint { color: var(--ink-subtle); }

    /* ── Alerts popover ───────────────────────────────────────────────── */
    .alerts-popover {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 360px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-lg2);
        z-index: 200;
        padding: 8px;
        max-height: 70vh;
        overflow-y: auto;
        transform-origin: top right;
        animation: alerts-pop-in var(--dur-med) var(--ease);
    }
    @keyframes alerts-pop-in {
        from { opacity: 0; transform: translateY(-4px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .alerts-popover[hidden] { display: none; }
    .alerts-popover-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 8px 10px 6px;
    }
    .alerts-popover-title {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-lg);
        font-weight: 600;
        color: var(--ink);
    }
    .alerts-popover-count {
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        font-family: 'DM Mono', monospace;
        letter-spacing: 0.4px;
    }
    .alerts-popover-list {
        display: flex;
        flex-direction: column;
    }
    .alerts-popover-row {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 10px 10px;
        border-radius: var(--r-sm);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        color: var(--ink);
        text-decoration: none;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-sm);
        transition: background var(--dur-fast) var(--ease);
    }
    .alerts-popover-row:hover { background: var(--surface-hover); }
    .alerts-popover-row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
    .alerts-popover-icon {
        width: 28px;
        height: 28px;
        border-radius: var(--r-full);
        background: var(--accent-soft);
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .alerts-popover-icon svg { width: 14px; height: 14px; }
    .alerts-popover-icon.is-danger  { background: var(--danger-soft);  color: var(--danger);  }
    .alerts-popover-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
    .alerts-popover-icon.is-success { background: var(--success-soft); color: var(--success); }
    .alerts-popover-text { min-width: 0; }
    .alerts-popover-title-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ink);
        font-weight: 500;
    }
    .alerts-popover-time {
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        font-family: 'DM Mono', monospace;
        letter-spacing: 0.3px;
    }
    .alerts-popover-empty {
        padding: 20px 12px;
        text-align: center;
        color: var(--ink-subtle);
        font-size: var(--t-sm);
    }
    .alerts-popover-footer {
        margin-top: 6px;
        padding: 8px 10px;
        border-top: 1px solid var(--border);
        text-align: right;
    }
    .alerts-popover-footer-link {
        font-size: var(--t-sm);
        font-weight: 600;
        color: var(--accent);
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: var(--r-sm);
        transition: background var(--dur-fast) var(--ease);
    }
    .alerts-popover-footer-link:hover { background: var(--accent-soft); }

    /* ── Main content area ────────────────────────────────────────────── */
    .main-wrap {
        max-width: 1400px;
        padding: calc(var(--topstrip-h) + var(--sp-8)) var(--sp-8) var(--sp-12);
    }

    /* Home page content spacing (home-panel sits outside main-wrap) */
    .home-page { padding: 0; }
    .home-content {
        padding: calc(var(--topstrip-h) + var(--sp-8)) var(--sp-8) var(--sp-12);
        max-width: 1400px;
        margin: 0 auto;
        gap: var(--sp-6);
    }

    /* Settings page: align with main content offset */
    #settings-panel .settings-content,
    .settings-content {
        padding: calc(var(--topstrip-h) + var(--sp-8)) var(--sp-8) var(--sp-12);
        max-width: 1400px;
        margin: 0 auto;
    }
    .settings-header { display: none; }

    /* ── Hero stats ───────────────────────────────────────────────────── */
    .home-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--sp-6);
        transition: box-shadow var(--dur-med) var(--ease);
    }
    .home-card-title {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        font-weight: 600;
        color: var(--ink-subtle);
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-bottom: var(--sp-4);
    }
    .home-welcome {
        padding: 0 0 var(--sp-2);
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-2xl);
        font-weight: 600;
        color: var(--ink);
    }
    .home-welcome .home-refresh {
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--r-full);
        width: 36px;
        height: 36px;
        color: var(--ink-muted);
    }
    .home-welcome .home-refresh:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        color: var(--ink);
    }

    .home-card-tiles { padding: var(--sp-6); }
    .home-card-tiles .home-tiles { gap: var(--sp-4); }
    .home-tiles {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sp-4);
    }
    .home-tile {
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: var(--sp-5);
        min-height: 120px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        transition: background var(--dur-med) var(--ease),
                    border-color var(--dur-med) var(--ease),
                    box-shadow var(--dur-med) var(--ease),
                    transform var(--dur-med) var(--ease);
    }
    /* Tile reading order: eyebrow label (top) → big number (bottom). The
       mobile markup appends label last, so reorder via flex on desktop. */
    .home-tile .home-tile-label {
        order: 1;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin: 0 0 var(--sp-2);
    }
    .home-tile .home-tile-value { order: 2; margin-top: auto; }
    .home-tile .home-tile-period { order: 0; }
    .home-tile[onclick] { cursor: pointer; }
    .home-tile[onclick]:hover {
        background: var(--surface);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
    .home-tile-icon {
        top: var(--sp-4);
        right: var(--sp-4);
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: var(--r-full);
    }
    .home-tile-period {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        margin-bottom: var(--sp-2);
    }
    .home-tile-value {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        font-size: var(--t-stat);
        color: var(--ink);
        line-height: 1;
        letter-spacing: 0.4px;
        margin-top: var(--sp-2);
    }
    .home-tile-label {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-sm);
        color: var(--ink-muted);
        font-weight: 500;
        margin-top: 4px;
    }

    @media (max-width: 1279px) {
        .home-tiles {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Mid-size tablet (769–1023px): sidebar is on, viewport is narrow.
       Tighten padding, let pipeline pills wrap, shrink big numbers a hair. */
    @media (max-width: 1023px) {
        body { font-size: var(--t-sm); }
        .main-wrap {
            padding: calc(var(--topstrip-h) + var(--sp-6)) var(--sp-5) var(--sp-8);
        }
        .home-content,
        #settings-panel .settings-content,
        .settings-content {
            padding: calc(var(--topstrip-h) + var(--sp-6)) var(--sp-5) var(--sp-8);
            gap: var(--sp-5);
        }
        .home-pipeline {
            display: flex;
            flex-wrap: wrap;
            gap: var(--sp-3);
        }
        .home-pipeline-pill {
            flex: 1 1 calc(33% - var(--sp-3));
            min-width: 110px;
        }
        .home-tile-value { font-size: 28px; }
        .stat-value { font-size: 28px; }
        .job-header { padding: 16px var(--sp-4); }
        .site-header { padding: 0 var(--sp-4); }
        .header-page-title { font-size: var(--t-lg); }
    }

    /* Pipeline pills (home page) */
    .home-pipeline {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--sp-3);
    }
    .home-pipeline-pill {
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: var(--sp-4);
        transition: background var(--dur-med) var(--ease),
                    border-color var(--dur-med) var(--ease),
                    box-shadow var(--dur-med) var(--ease);
    }
    .home-pipeline-pill:hover {
        background: var(--surface);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-sm);
    }
    .home-pipeline-count {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        font-size: 30px;
        letter-spacing: 0.3px;
    }
    .home-pipeline-label {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    /* Activity feed */
    .home-activity-row {
        border-top-color: var(--border);
        font-size: var(--t-sm);
        padding: var(--sp-3) 0;
    }
    .home-activity-time { color: var(--ink-subtle); }
    .home-activity-who  { color: var(--ink); font-weight: 500; }
    .home-activity-verb { color: var(--ink-muted); }
    .home-activity-ctx  { color: var(--ink-subtle); }
    .home-activity-chip {
        background: var(--accent-soft);
        color: var(--accent);
        font-family: 'DM Mono', monospace;
        font-size: var(--t-xs);
        font-weight: 500;
        padding: 2px 8px;
    }

    /* ── Stats bar (Jobs view) ────────────────────────────────────────── */
    .stats-bar { gap: var(--sp-3); }
    .stat-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--sp-3) var(--sp-4);
        position: relative;
        overflow: hidden;
        transition: box-shadow var(--dur-med) var(--ease),
                    border-color var(--dur-med) var(--ease);
    }
    .stat-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--border-strong);
    }
    .stat-card.sort-active {
        border-color: var(--accent);
        background: var(--surface);
    }
    .stat-card.sort-active .stat-label { color: var(--accent); }
    .stat-label {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        color: var(--ink-subtle);
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-bottom: 2px;
    }
    .stat-value {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        font-size: 24px;
        color: var(--ink);
        letter-spacing: 0.4px;
        line-height: 1.1;
    }
    .stat-value.green { color: var(--success); }
    .stat-value.red   { color: var(--danger); }

    /* ── Filter bar ───────────────────────────────────────────────────── */
    .filter-bar {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--sp-2) var(--sp-3);
    }
    .filter-search {
        background-color: var(--surface-sunken);
        border-color: var(--border);
        font-size: var(--t-sm);
        color: var(--ink);
    }
    .filter-search:focus {
        border-color: var(--accent);
        box-shadow: var(--shadow-focus);
    }
    .filter-select {
        background-color: var(--surface-sunken);
        border-color: var(--border);
        font-size: var(--t-sm);
        color: var(--ink);
    }
    .filter-select:focus { border-color: var(--accent); }

    /* ── Action panel (jobs page) ─────────────────────────────────────── */
    .action-panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--sp-3) var(--sp-4);
    }
    .action-title {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        font-size: var(--t-xl);
        color: var(--ink);
        letter-spacing: 0.6px;
    }

    /* ── Job cards ────────────────────────────────────────────────────── */
    .job-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-left: 4px solid transparent;
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--sp-4);
        transition: box-shadow var(--dur-med) var(--ease),
                    transform var(--dur-med) var(--ease),
                    border-color var(--dur-med) var(--ease);
    }
    .job-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
    .job-header {
        padding: 22px var(--sp-6);
        min-height: 80px;
    }
    .job-header:hover { background: var(--surface-hover); }
    .job-num {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        font-size: 24px;
        color: var(--brand);
        letter-spacing: 1px;
    }

    .job-section-label {
        font-family: 'Bebas Neue', 'DM Sans', sans-serif;
        color: var(--ink);
    }
    .job-section-divider::after {
        background: linear-gradient(90deg, var(--border-strong), var(--border));
    }

    .qa-btn {
        border-radius: var(--r-full);
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--ink-muted);
        font-size: var(--t-sm);
        padding: 6px 14px;
        height: 32px;
        transition: background var(--dur-fast) var(--ease),
                    border-color var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease);
        box-shadow: var(--shadow-xs);
    }
    .qa-btn:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        color: var(--ink);
        box-shadow: var(--shadow-sm);
    }
    .qa-btn.qa-secondary {
        background: var(--accent-soft);
        border-color: transparent;
        color: var(--accent);
    }
    .qa-btn.qa-secondary:hover {
        background: var(--accent-soft);
        color: var(--accent);
    }
    .qa-btn.qa-collect {
        background: var(--success-soft);
        border-color: transparent;
        color: var(--success);
    }
    .qa-btn.qa-collect:hover { background: var(--success-soft); color: var(--success); }

    /* ── Tables (modern hairlines, DM Mono numbers) ──────────────────── */
    .main-wrap table,
    #transactions-panel table,
    #contacts-panel table,
    .data-table {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        width: 100%;
    }
    .main-wrap table thead th,
    #transactions-panel table thead th,
    #contacts-panel table thead th,
    .data-table thead th {
        background: var(--surface-sunken);
        color: var(--ink-muted);
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        text-align: left;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        height: 44px;
    }
    .main-wrap table tbody td,
    #transactions-panel table tbody td,
    #contacts-panel table tbody td,
    .data-table tbody td {
        padding: 16px;
        border-bottom: 1px solid var(--border);
        color: var(--ink);
        font-size: var(--t-sm);
        height: 52px;
    }
    .main-wrap table tbody tr:last-child td,
    #transactions-panel table tbody tr:last-child td,
    #contacts-panel table tbody tr:last-child td,
    .data-table tbody tr:last-child td { border-bottom: none; }
    .main-wrap table tbody tr:hover td,
    #transactions-panel table tbody tr:hover td,
    #contacts-panel table tbody tr:hover td,
    .data-table tbody tr:hover td {
        background: var(--surface-hover);
    }
    .main-wrap table .num,
    #transactions-panel table .num,
    .data-table .num {
        font-family: 'DM Mono', monospace;
        text-align: right;
    }

    /* Status pills — soft bg, strong text (modern) */
    .badge-active, .badge-inspect,
    .progress-ready, .progress-progress {
        border-radius: var(--r-full);
        padding: 4px 12px;
        font-family: 'DM Sans', sans-serif;
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: 0.3px;
        background: var(--accent-soft);
        color: var(--accent);
    }

    /* ── Site footer ──────────────────────────────────────────────────── */
    .site-footer {
        background: var(--surface);
        border-top: 1px solid var(--border);
        color: var(--ink-subtle);
        font-size: var(--t-xs);
        padding: var(--sp-6) var(--sp-8);
    }

    /* ── Motion polish ────────────────────────────────────────────────── */
    button, a, .qa-btn, .home-tile, .home-pipeline-pill,
    .stat-card, .job-card, .sidebar-row, .sidebar-user-chip {
        transition-timing-function: var(--ease);
    }
    button:active { transform: scale(0.99); }
    .site-header #header-create-btn.header-icon-btn:focus-visible,
    button:focus-visible,
    a:focus-visible {
        outline: none;
    }

    /* Panel switch animation */
    #home-panel:not([style*="display: none"]),
    #job-list:not([style*="display: none"]),
    #schedule-panel:not([style*="display: none"]),
    #analytics-page:not([style*="display: none"]),
    #contacts-panel:not([style*="display: none"]),
    #transactions-panel:not([style*="display: none"]),
    #settings-panel:not([style*="display: none"]) {
        animation: panel-in var(--dur-med) var(--ease);
    }
    @keyframes panel-in {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Dark-mode polish for the desktop overhaul ──────────────────────── */
@media (min-width: 769px) {
    [data-theme="dark"] .site-header {
        background: var(--surface);
        border-bottom-color: var(--border);
    }
    [data-theme="dark"] .app-sidebar { background: var(--surface); border-right-color: var(--border); }
    [data-theme="dark"] .sidebar-row { color: var(--ink-muted); }
    [data-theme="dark"] .sidebar-row:hover { background: var(--surface-hover); color: var(--ink); }
    [data-theme="dark"] .sidebar-row.is-active { background: var(--accent-soft); color: var(--accent); }
    [data-theme="dark"] .site-header .header-icon-btn {
        background: transparent;
        border-color: var(--border);
        color: var(--ink-muted);
    }
    [data-theme="dark"] .site-header .header-icon-btn:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        color: var(--ink);
    }
    [data-theme="dark"] .site-header #header-create-btn.header-icon-btn {
        background: var(--accent); color: #fff; border-color: transparent;
    }
    [data-theme="dark"] .site-header #header-create-btn.header-icon-btn:hover {
        background: #6AAAF0;
    }
    [data-theme="dark"] .site-header #header-create-btn.header-icon-btn.has-focused-job,
    [data-theme="dark"] .site-header #header-create-btn.header-icon-btn.has-focused-job:focus-visible {
        background: var(--green);
    }
    [data-theme="dark"] .site-header #header-create-btn.header-icon-btn.has-focused-job:hover {
        background: #58D68D;
    }
    [data-theme="dark"] .home-tile {
        background: var(--surface-sunken);
        border-color: var(--border);
    }
    [data-theme="dark"] .home-tile[onclick]:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
    }
    [data-theme="dark"] .home-tile-value { color: var(--ink); }
    [data-theme="dark"] .home-tile-label { color: var(--ink-muted); }
    [data-theme="dark"] .home-card { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] .stat-value { color: var(--ink); }
    [data-theme="dark"] .job-card { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] .job-header:hover { background: var(--surface-hover); }
    [data-theme="dark"] .qa-btn {
        background: var(--surface);
        border-color: var(--border);
        color: var(--ink-muted);
    }
    [data-theme="dark"] .qa-btn:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
        color: var(--ink);
    }
    [data-theme="dark"] .home-pipeline-pill {
        background: var(--surface-sunken);
        border-color: var(--border);
    }
    [data-theme="dark"] .home-pipeline-pill:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
    }
    [data-theme="dark"] .site-footer {
        background: var(--surface);
        border-top-color: var(--border);
        color: var(--ink-subtle);
    }
    [data-theme="dark"] .alerts-popover { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] body > #user-menu.user-menu {
        background: var(--surface);
        border-color: var(--border);
    }
    [data-theme="dark"] body > #user-menu.user-menu .user-menu-item:hover {
        background: var(--surface-hover);
    }
    [data-theme="dark"] .site-header .create-menu.user-menu {
        background: var(--surface);
        border-color: var(--border);
    }
    [data-theme="dark"] .site-header .create-menu .user-menu-item { color: var(--ink); }
    [data-theme="dark"] .site-header .create-menu .user-menu-item:hover { background: var(--surface-hover); color: var(--ink); }
    [data-theme="dark"] .sidebar-user-chip { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] .sidebar-user-chip:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
    }
    [data-theme="dark"] .sidebar-brand-title { color: var(--ink); }
    [data-theme="dark"] .header-page-title { color: var(--ink); }
    [data-theme="dark"] .filter-bar { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] .action-panel { background: var(--surface); border-color: var(--border); }
    [data-theme="dark"] .main-wrap table,
    [data-theme="dark"] #transactions-panel table,
    [data-theme="dark"] #contacts-panel table,
    [data-theme="dark"] .data-table {
        background: var(--surface);
        border-color: var(--border);
    }
    [data-theme="dark"] .main-wrap table thead th,
    [data-theme="dark"] #transactions-panel table thead th,
    [data-theme="dark"] #contacts-panel table thead th,
    [data-theme="dark"] .data-table thead th {
        background: var(--surface-sunken);
        color: var(--ink-muted);
        border-bottom-color: var(--border);
    }
    [data-theme="dark"] .main-wrap table tbody td,
    [data-theme="dark"] #transactions-panel table tbody td,
    [data-theme="dark"] #contacts-panel table tbody td,
    [data-theme="dark"] .data-table tbody td {
        color: var(--ink);
        border-bottom-color: var(--border);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Section cards — the uniform collapsed/expanded shell used by every section
   inside the job card body. Each card: icon badge, title, chevron. Tapping
   the header toggles expand; one section open at a time (accordion via
   toggleSection). Timeline gets an extra strip under the header for the
   mini milestone dots + progress text. Floating close pill inherits its
   tint from whichever section is open.
   ══════════════════════════════════════════════════════════════════════ */

.section-card {
    --sc-tint-bg: rgba(41, 104, 166, 0.12);
    --sc-tint-fg: #2968A6;
    background: var(--white, #ffffff);
    border: 1px solid var(--gray-1, #E4E8ED);
    border-radius: 14px;
    margin: 0 0 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 27, 45, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.section-card:hover { box-shadow: 0 3px 8px rgba(15, 27, 45, 0.08); }
.section-card.open  {
    border-color: var(--gray-2, #D1D7DF);
    box-shadow:
        inset 2px 0 0 var(--sc-tint-fg),
        0 5px 16px rgba(15, 27, 45, 0.10);
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-height: 56px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: background 0.12s ease;
}
.section-card-header:hover { background: rgba(15, 27, 45, 0.02); }
.section-card.open .section-card-header {
    background: linear-gradient(90deg, var(--sc-tint-bg), rgba(255,255,255,0));
}

.section-card-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-tint-bg);
    color: var(--sc-tint-fg);
}
.section-card-icon svg { display: block; }
.section-card.open .section-card-icon {
    background: var(--sc-tint-fg);
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 27, 45, 0.16);
}

.section-card-title {
    flex: 1 1 auto;
    min-width: 0;
}
.section-card-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #1A2433);
    line-height: 1.2;
    letter-spacing: 0.1px;
}
.section-card-summary {
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gray-3, #7A8694);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section-card-summary strong {
    color: var(--text, #1A2433);
    font-weight: 700;
}
.section-card.open .section-card-summary {
    white-space: normal;
}
[data-theme="dark"] .section-card-summary { color: #8896A6; }
[data-theme="dark"] .section-card-summary strong { color: #E6EAF0; }

.section-card-chevron {
    flex: 0 0 auto;
    color: var(--gray-3, #7A8694);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.section-card.open .section-card-chevron {
    color: var(--sc-tint-fg);
    transform: rotate(180deg);
}

.section-card-extra { padding: 0 16px 12px; }

.section-card-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--gray-1, #E4E8ED);
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(246,248,251,0.72), rgba(255,255,255,0));
}
.section-card-body .inline-edit-actions,
.section-card-body .section-actions {
    margin-bottom: 10px;
}
.section-card-body .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.section-card-body .empty-state {
    padding: 16px 4px;
}

/* Per-section tints applied via [data-section] on the icon badge AND as
   CSS custom properties on the card root so other elements (timeline dot,
   floating close pill) can pick up the same accent. */
.section-card[data-section="milestones"] { --sc-tint-bg: rgba(124, 59, 240, 0.13); --sc-tint-fg: #7C3BF0; }
.section-card[data-section="payments"]   { --sc-tint-bg: rgba(31, 157, 85, 0.13);  --sc-tint-fg: #1F9D55; }
.section-card[data-section="regulatory"] { --sc-tint-bg: rgba(201, 122, 0, 0.13);  --sc-tint-fg: #C97A00; }
.section-card[data-section="materials"]  { --sc-tint-bg: rgba(213, 106, 21, 0.13); --sc-tint-fg: #D56A15; }
.section-card[data-section="calendar"]   { --sc-tint-bg: rgba(12, 148, 136, 0.13); --sc-tint-fg: #0C9488; }
.section-card[data-section="contacts"]   { --sc-tint-bg: rgba(41, 104, 166, 0.13); --sc-tint-fg: #2968A6; }
.section-card[data-section="scope"]      { --sc-tint-bg: rgba(71, 85, 105, 0.15);  --sc-tint-fg: #475569; }
.section-card[data-section="docs"]       { --sc-tint-bg: rgba(37, 99, 235, 0.13);  --sc-tint-fg: #2563EB; }
.section-card[data-section="photos"]     { --sc-tint-bg: rgba(124, 77, 240, 0.13); --sc-tint-fg: #7C4DF0; }
.section-card[data-section="gmail"]      { --sc-tint-bg: rgba(209, 63, 103, 0.13); --sc-tint-fg: #D13F67; }
.section-card[data-section="myhours"]    { --sc-tint-bg: rgba(79, 70, 229, 0.13);  --sc-tint-fg: #4F46E5; }

/* Dark theme — cards step up with a single border-color nudge instead of
   shadows (which muddy on dark). Brighten the tint a touch for contrast. */
[data-theme="dark"] .section-card {
    background: #1A2332;
    border-color: #2A3545;
    box-shadow: none;
}
[data-theme="dark"] .section-card:hover { border-color: #3A4658; }
[data-theme="dark"] .section-card.open  {
    border-color: #4A5668;
    background: #1C2638;
    box-shadow:
        inset 2px 0 0 var(--sc-tint-fg),
        0 6px 18px rgba(0,0,0,0.4);
}
[data-theme="dark"] .section-card-header:hover { background: rgba(255, 255, 255, 0.025); }
[data-theme="dark"] .section-card.open .section-card-header {
    background: linear-gradient(90deg, var(--sc-tint-bg), rgba(28,38,56,0));
}
[data-theme="dark"] .section-card-body {
    border-top-color: #2A3545;
    background: linear-gradient(180deg, rgba(15,27,45,0.22), rgba(28,38,56,0));
}
[data-theme="dark"] .section-card-name { color: #E6EAF0; }
[data-theme="dark"] .section-card-chevron { color: #8896A6; }

[data-theme="dark"] .section-card[data-section="milestones"] { --sc-tint-bg: rgba(155, 105, 255, 0.18); --sc-tint-fg: #B89AFF; }
[data-theme="dark"] .section-card[data-section="payments"]   { --sc-tint-bg: rgba(46, 204, 113, 0.18);  --sc-tint-fg: #5EDB97; }
[data-theme="dark"] .section-card[data-section="regulatory"] { --sc-tint-bg: rgba(234, 162, 52, 0.18);  --sc-tint-fg: #F0B868; }
[data-theme="dark"] .section-card[data-section="materials"]  { --sc-tint-bg: rgba(240, 141, 60, 0.18);  --sc-tint-fg: #F5A973; }
[data-theme="dark"] .section-card[data-section="calendar"]   { --sc-tint-bg: rgba(45, 191, 175, 0.18);  --sc-tint-fg: #5EDBCE; }
[data-theme="dark"] .section-card[data-section="contacts"]   { --sc-tint-bg: rgba(106, 170, 240, 0.18); --sc-tint-fg: #8BC0F5; }
[data-theme="dark"] .section-card[data-section="scope"]      { --sc-tint-bg: rgba(148, 163, 184, 0.20); --sc-tint-fg: #B0BDCC; }
[data-theme="dark"] .section-card[data-section="docs"]       { --sc-tint-bg: rgba(96, 165, 250, 0.18);  --sc-tint-fg: #89BCF8; }
[data-theme="dark"] .section-card[data-section="photos"]     { --sc-tint-bg: rgba(167, 139, 250, 0.18); --sc-tint-fg: #C0A8FA; }
[data-theme="dark"] .section-card[data-section="gmail"]      { --sc-tint-bg: rgba(244, 114, 148, 0.18); --sc-tint-fg: #F88FAD; }
[data-theme="dark"] .section-card[data-section="myhours"]    { --sc-tint-bg: rgba(129, 124, 235, 0.18); --sc-tint-fg: #A29EF1; }

/* Timeline mini-strip shown under the header whether collapsed or open. */
.timeline-strip {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-bottom: 6px;
}
.timeline-strip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gray-2, #D1D7DF);
    flex: 0 0 auto;
}
.timeline-strip-dot.done { background: #1F9D55; }
.timeline-strip-dot.current {
    background: var(--sc-tint-fg, #7C3BF0);
    box-shadow: 0 0 0 3px rgba(124, 59, 240, 0.22);
}
.timeline-strip-line {
    flex: 1 1 6px;
    height: 2px;
    background: var(--gray-1, #E4E8ED);
    min-width: 6px;
    border-radius: 2px;
}
.timeline-strip-line.done { background: #1F9D55; }
.timeline-strip-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--gray-3, #7A8694);
    line-height: 1.35;
}
.timeline-strip-progress strong { color: var(--text, #1A2433); font-weight: 600; }
.timeline-next { color: var(--sc-tint-fg, #7C3BF0); font-weight: 500; }
[data-theme="dark"] .timeline-strip-progress { color: #8896A6; }
[data-theme="dark"] .timeline-strip-progress strong { color: #E6EAF0; }
[data-theme="dark"] .timeline-strip-line { background: #2A3545; }
[data-theme="dark"] .timeline-strip-dot  { background: #3A4658; }
[data-theme="dark"] .timeline-strip-dot.done { background: #4CD592; }
[data-theme="dark"] .timeline-strip-dot.current {
    background: #4A90D9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.32);
}
[data-theme="dark"] .timeline-strip-line.done { background: #4CD592; }

/* Empty-state timeline — faded outlined dots, tappable to expand + add */
.timeline-strip.timeline-strip-empty { cursor: pointer; }
.timeline-strip-dot.empty {
    background: transparent;
    border: 1.5px dashed var(--gray-2, #D1D7DF);
    width: 9px;
    height: 9px;
    box-sizing: border-box;
}
.timeline-strip-empty-label {
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s;
}
.timeline-strip-empty-label:hover { opacity: 1; }
.timeline-strip-empty-label .timeline-next {
    color: var(--text-lt, #7A8694);
    font-style: italic;
    font-weight: 500;
}
[data-theme="dark"] .timeline-strip-dot.empty { border-color: #3A4658; }

/* Vertical connected timeline (expanded Milestones view). */
.vtimeline {
    position: relative;
    padding: 6px 0 2px;
    list-style: none;
    margin: 0;
}
.vtimeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--gray-1, #E4E8ED);
}
.vtimeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 6px;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.vtimeline-item.editable { cursor: pointer; }
.vtimeline-item.editable:hover { background: rgba(15, 27, 45, 0.03); }
.vtimeline-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--white, #fff);
    border: 2px solid var(--gray-2, #D1D7DF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    position: relative;
    z-index: 1;
    transition: all 0.15s ease;
}
.vtimeline-item.done .vtimeline-dot {
    background: #1F9D55;
    border-color: #1F9D55;
    color: #fff;
}
.vtimeline-item.current .vtimeline-dot {
    background: var(--white, #fff);
    border-color: var(--sc-tint-fg, #7C3BF0);
    box-shadow: 0 0 0 5px rgba(124, 59, 240, 0.15);
    color: var(--sc-tint-fg, #7C3BF0);
}
.vtimeline-item.overdue .vtimeline-dot {
    background: var(--white, #fff);
    border-color: #C0392B;
    color: #C0392B;
}
.vtimeline-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1A2433);
    line-height: 1.35;
}
.vtimeline-item.upcoming .vtimeline-label {
    color: var(--gray-3, #7A8694);
    font-weight: 500;
}
.vtimeline-item.current .vtimeline-label {
    color: var(--sc-tint-fg, #7C3BF0);
}
.vtimeline-item.overdue .vtimeline-label { color: #C0392B; }
.vtimeline-meta {
    font-size: 12px;
    color: var(--gray-3, #7A8694);
    margin-top: 3px;
    line-height: 1.35;
    word-break: break-word;
}
.vtimeline-date {
    font-size: 12px;
    color: var(--gray-3, #7A8694);
    font-feature-settings: 'tnum';
    white-space: nowrap;
    padding-top: 4px;
}
.vtimeline-item.done .vtimeline-date { color: #1F9D55; }
.vtimeline-item.overdue .vtimeline-date { color: #C0392B; }
.vtimeline-footer {
    padding: 10px 6px 2px;
    font-size: 12px;
    color: var(--gray-3, #7A8694);
}

[data-theme="dark"] .vtimeline::before { background: #2A3545; }
[data-theme="dark"] .vtimeline-dot { background: #1A2332; border-color: #3A4658; }
[data-theme="dark"] .vtimeline-item.current .vtimeline-dot { background: #1A2332; }
[data-theme="dark"] .vtimeline-item.overdue .vtimeline-dot { background: #1A2332; }
[data-theme="dark"] .vtimeline-label { color: #E6EAF0; }
[data-theme="dark"] .vtimeline-item.upcoming .vtimeline-label { color: #8896A6; }
[data-theme="dark"] .vtimeline-meta { color: #8896A6; }
[data-theme="dark"] .vtimeline-date { color: #8896A6; }
[data-theme="dark"] .vtimeline-item.editable:hover { background: rgba(255, 255, 255, 0.025); }
[data-theme="dark"] .vtimeline-footer { color: #8896A6; }

/* Reorder mode — adds a drag handle column to each item, suppresses the
   click-to-toggle hover affordance, and wraps the list in a tinted
   panel so the mode change is visually obvious. SortableJS adds
   .vtimeline-ghost / .vtimeline-chosen / .vtimeline-drag during a drag
   to give the moving item lift and the placeholder a dashed silhouette. */
.vtimeline-reorder {
    padding: 8px 0;
    background: rgba(124, 59, 240, 0.04);
    border: 1px dashed rgba(124, 59, 240, 0.30);
    border-radius: 12px;
    overflow: hidden;
}
.vtimeline-reorder .vtimeline-item {
    grid-template-columns: 26px 1fr auto 52px;
    cursor: default;
    padding-right: 0;
}
.vtimeline-reorder .vtimeline-item:hover { background: transparent; }
.vtimeline-drag-handle {
    align-self: stretch;
    width: 52px;
    position: relative;
    padding: 0;
    margin: 0;
    color: #8E8E93;
    background: rgba(0, 0, 0, 0.05);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.vtimeline-drag-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform: translateY(-50%);
    box-shadow:
        0 -8px 0 currentColor,
        0  8px 0 currentColor;
}
.vtimeline-drag-handle:hover {
    color: var(--sc-tint-fg, #7C3BF0);
    background: rgba(124, 59, 240, 0.10);
}
.vtimeline-drag-handle:active {
    cursor: grabbing;
    color: #007AFF;
    background: rgba(0, 122, 255, 0.18);
}
.vtimeline-reorder-hint {
    padding: 8px 12px 10px;
    font-size: 12px;
    color: var(--gray-3, #7A8694);
}

/* Sortable.js drag states */
.vtimeline-ghost {
    opacity: 0.35;
    background: rgba(124, 59, 240, 0.10);
    border: 1px dashed rgba(124, 59, 240, 0.45);
    border-radius: 10px;
}
.vtimeline-chosen { background: rgba(124, 59, 240, 0.06); }
.vtimeline-drag {
    box-shadow: 0 12px 32px rgba(15, 27, 45, 0.22);
    background: var(--white, #fff);
    border-radius: 10px;
    transform: scale(1.02);
}

[data-theme="dark"] .vtimeline-reorder {
    background: rgba(124, 59, 240, 0.08);
    border-color: rgba(124, 59, 240, 0.40);
}
[data-theme="dark"] .vtimeline-drag-handle {
    color: #8E8E93;
    background: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .vtimeline-drag-handle:hover {
    color: #B795F5;
    background: rgba(124, 59, 240, 0.20);
}
[data-theme="dark"] .vtimeline-reorder-hint { color: #8896A6; }
[data-theme="dark"] .vtimeline-drag {
    background: #1F2937;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* Timeline dial panel — circular progress + status pill + ETA + labeled
   horizontal strip. Shown whenever the Milestones section is expanded, on
   both mobile (stacks the hstrip below the dial) and desktop (side-by-side
   with generous gap). */
.timeline-dial-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    padding: 6px 4px 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--gray-1, #E4E8ED);
}
@media (min-width: 769px) {
    .timeline-dial-panel {
        flex-direction: row;
        gap: 28px;
        align-items: center;
        padding: 4px 4px 18px;
        margin-bottom: 12px;
    }
}

.timeline-dial-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-dial-bg {
    stroke: var(--gray-1, #E4E8ED);
}
.timeline-dial-fg {
    stroke: var(--sc-tint-fg, #7C3BF0);
    transition: stroke-dashoffset 0.5s ease;
}
.timeline-dial-pct {
    fill: var(--text, #1A2433);
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
}
.timeline-dial-label {
    fill: var(--gray-3, #7A8694);
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
}
.timeline-dial-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.timeline-status {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.timeline-status-ontrack,
.timeline-status-complete {
    background: #CFEDD8;
    color: #0F5A2D;
    border-color: #1F9D55;
}
.timeline-status-behind {
    background: #FBD0D0;
    color: #931515;
    border-color: #C0392B;
}
.timeline-dial-eta {
    font-size: 12.5px;
    color: var(--gray-3, #7A8694);
}
/* Compact dots+lines rail in the open timeline — visually identical to the
   closed-card .jc-rail. Hidden on mobile; the vertical list below is the
   canonical timeline there. */
.timeline-hstrip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    height: 14px;
}
@media (max-width: 768px) {
    .timeline-hstrip { display: none; }
}
.timeline-hstrip-node {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-2, #D1D7DF);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.timeline-hstrip-node.done    { background: #1F9D55; }
.timeline-hstrip-node.current { background: var(--blue, #2E75B6); box-shadow: 0 0 0 2px rgba(46, 117, 182, 0.22); }
.timeline-hstrip-node.overdue { background: #C0392B; box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.22); }
.timeline-hstrip-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--gray-1, #E4E8ED);
    min-width: 4px;
    border-radius: 2px;
}
.timeline-hstrip-line.done { background: #1F9D55; }
[data-theme="dark"] .timeline-hstrip-node { background: #3A4658; }
[data-theme="dark"] .timeline-hstrip-line { background: #2A3545; }
[data-theme="dark"] .timeline-hstrip-node.done { background: #4CD592; }
[data-theme="dark"] .timeline-hstrip-node.current {
    background: #4A90D9;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.32);
}
[data-theme="dark"] .timeline-hstrip-node.overdue {
    background: #E74C3C;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.32);
}
[data-theme="dark"] .timeline-hstrip-line.done { background: #4CD592; }

/* When the Milestones section is open, the dial's labeled hstrip replaces
   the mini collapsed strip under the card header. */
.section-card.open[data-section="milestones"] .section-card-extra {
    display: none;
}

[data-theme="dark"] .timeline-dial-panel { border-bottom-color: #2A3545; }
[data-theme="dark"] .timeline-dial-bg { stroke: #2A3545; }
[data-theme="dark"] .timeline-dial-pct { fill: #E6EAF0; }
[data-theme="dark"] .timeline-dial-label { fill: #8896A6; }
[data-theme="dark"] .timeline-hstrip-line { background: #2A3545; }
[data-theme="dark"] .timeline-hstrip-dot { background: #3A4658; }
[data-theme="dark"] .timeline-hstrip-label { color: #8896A6; }
[data-theme="dark"] .timeline-hstrip-node.done .timeline-hstrip-label,
[data-theme="dark"] .timeline-hstrip-node.current .timeline-hstrip-label,
[data-theme="dark"] .timeline-hstrip-node.overdue .timeline-hstrip-label {
    color: #E6EAF0;
}
[data-theme="dark"] .timeline-hstrip-node.done .timeline-hstrip-dot { background: #4CD592; }
[data-theme="dark"] .timeline-hstrip-line.done { background: #4CD592; }
[data-theme="dark"] .timeline-dial-eta { color: #8896A6; }
[data-theme="dark"] .timeline-status-ontrack,
[data-theme="dark"] .timeline-status-complete {
    background: rgba(76, 213, 146, 0.22);
    color: #7EE0A1;
}
[data-theme="dark"] .timeline-status-behind {
    background: rgba(231, 76, 60, 0.25);
    color: #F5A39A;
}

/* Floating close-section pill — picks up whichever section is open via
   a CSS variable set on <body> by syncFloatingCollapseButton(). */
.mobile-collapse-btn {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    z-index: 7000;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    border: none;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    background: var(--close-pill-bg, rgba(41, 104, 166, 0.96));
    color: var(--close-pill-fg, #ffffff);
    box-shadow: 0 8px 20px rgba(15, 27, 45, 0.22);
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.mobile-collapse-btn:hover { box-shadow: 0 10px 24px rgba(15, 27, 45, 0.28); }
.mobile-collapse-btn:active { transform: scale(0.97); }
.mobile-collapse-btn svg { display: block; }
[data-theme="dark"] .mobile-collapse-btn {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}