/* Pulse360 GLOBAL design system — SINGLE SOURCE OF TRUTH for app-wide styling.
   Dedicated, git-tracked stylesheet linked ONCE in base.html; every page that extends
   base inherits it automatically. NO per-page / inline CSS — all new rules go HERE.
   (Extracted 2026-07-03 from base.html's two inline <style> blocks: the residual/base
   layer + the #p-theme master. Loaded AFTER Bootstrap so it re-themes every element;
   change a token/rule here → the whole app updates at once.) */

/* ============================================================
   LAYER 1 — residual/base element + component styles
   ============================================================ */
        :root {
            --primary-color: var(--p-text);
            --success-color: #198754;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --dark-color: #1a1a1a;
            --light-color: var(--p-surface-2);
        }
        /* 2026-05-04: shrink Bootstrap tooltips so dashboard health
           explanations don't dominate the screen. Bootstrap default is
           14px / 200px max-width — scaled to a denser inline density. */
        .tooltip-inner {
            font-size: 10.5px !important;
            line-height: 1.45;
            max-width: 320px;
            text-align: left;
            padding: 6px 9px;
        }
        .btn-primary {
            background-color: var(--p-accent) !important;
            border-color: var(--p-accent) !important;
        }
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--p-accent-hover) !important;
            border-color: var(--p-accent-hover) !important;
        }

        body {
            background-color: var(--light-color);
            font-family: var(--p-font);
            font-size: 11px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 12px;
        }
        
        /* 2026-07-02 redesign: the dark top navbar + white .nav-link styles
           were removed — the chrome is now the hybrid rail + top bar defined in
           static/css/pulse360-theme.css. (The old .nav-link white!important rule
           would have made in-page Bootstrap nav-tabs invisible on white.) */

        .sidebar {
            background-color: #fff;
            border-right: 1px solid #e3e6f0;
            padding: 2rem 0;
        }
        
        .sidebar .nav-link {
            color: var(--dark-color) !important;
            padding: 0.75rem 1.5rem;
            border-left: 3px solid transparent;
            transition: all 0.2s;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background-color: #f0f3f7;
            border-left-color: var(--primary-color);
            color: var(--primary-color) !important;
        }
        
        .main-content {
            padding: 1.5rem;
        }
        
        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }
        
        .card-header {
            background-color: var(--p-surface-2);
            border-bottom: 1px solid var(--p-border);
            font-weight: 700;
            font-size: 12px;
        }
        
        .card-body {
            font-weight: 400;
        }
        
        .badge-health {
            font-size: 11px;
            padding: 0.3rem 0.45rem;
            border-radius: 0.25rem;
            white-space: nowrap;
        }
        
        .badge-critical {
            background-color: #f8d7da;
            color: #842029;
        }

        .badge-warning {
            background-color: #fff3cd;
            color: #664d03;
        }

        .badge-success {
            background-color: #d1e7dd;
            color: #0f5132;
        }
        
        .progress-bar-custom {
            background: linear-gradient(90deg, #0066cc, #00cc66);
        }
        
        .metric-card {
            background: #fff;
            border-radius: 0.5rem;
            padding: 1.2rem;
            text-align: center;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        
        .metric-card h3 {
            font-size: 1.1rem;                 /* ASK-FONTS 2026-08-17: was 1.6rem — app scale */
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }
        
        .metric-card p {
            font-size: 0.8rem;
            color: var(--p-muted);
            margin-bottom: 0;
        }
        
        .table-hover tbody tr:hover {
            background-color: var(--p-surface-2) !important;
        }

        .table {
            font-size: 11px;
        }

        /* One consistent, compact table-heading style across the whole app (small +
           uppercase-ish weight). Individual pages must NOT override this with inline font. */
        .table thead th {
            font-size: 11px;
            font-weight: 650;
            vertical-align: top;
        }

        /* Sticky table headers — headers stay pinned when scrolling. The OPAQUE background +
           padding-box clip + z-index keep the header from overlapping the first row when the
           table (border-collapse) is scrolled. */
        .table-responsive {
            max-height: 75vh;
            overflow-y: auto;
        }
        .table-responsive thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            background-color: var(--p-surface-2);
            background-clip: padding-box;
            box-shadow: inset 0 -1px 0 var(--p-border);
        }
        /* the header cell must be fully opaque so scrolled rows never show through */
        .table-responsive thead tr { background-color: var(--p-surface-2); }
        
        .table tbody td {
            font-weight: 400;
        }

        .table-bordered > :not(caption) > * {
            border-color: var(--p-border);
        }

        .filter-section .form-control,
        .filter-section .form-select {
            font-size: 11px;
            padding: 0.35rem 0.6rem;
            min-height: 32px;
        }

        .filter-section .form-label {
            font-size: 12px;
        }

        .filter-section .btn {
            font-size: 12px;
            padding: 0.35rem 0.75rem;
        }

        .accordion-button.no-caret::after {
            display: none;
        }

        .accordion-toggle-icon {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: #eef2f7;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #5c6b7a;
            font-size: 0.75rem;
        }
        
        .pagination {
            gap: 0.5rem;
        }
        
        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .page-link {
            color: var(--primary-color);
        }
        
        .page-link:hover {
            color: var(--primary-color);
            background-color: #f0f3f7;
            border-color: var(--p-border);
        }
        
        .filter-section {
            background-color: #fff;
            padding: 1.1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .filter-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--p-text);
            margin-bottom: 0.75rem;
        }
        
        .task-progress {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .task-badge {
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            font-weight: 600;
        }
        
        .task-done { background-color: #d4edda; color: #155724; }
        .task-progress-status { background-color: #fff3cd; color: #856404; }
        .task-todo { background-color: #f8d7da; color: #721c24; }

        .info-tooltip {
            color: var(--p-muted);
            margin-left: 0.35rem;
            cursor: pointer;
        }

        .info-tooltip:hover {
            color: var(--primary-color);
        }
        
        /* Commits Calendar */
        .commits-calendar {
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            gap: 4px;
            margin-bottom: 8px;
        }
        
        .commit-day {
            aspect-ratio: 1;
            border-radius: 3px;
            cursor: pointer;
            transition: transform 0.2s;
            min-height: 20px;
        }
        
        .commit-day:hover {
            transform: scale(1.1);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        @media (max-width: 768px) {
            .commits-calendar {
                grid-template-columns: repeat(10, 1fr);
            }
        }

        .project-detail .project-title {
            font-size: 16px;                   /* ASK-FONTS 2026-08-17: was 22px — app scale */
            font-weight: 700;
            color: var(--p-text);
        }

        .project-detail .project-description {
            font-size: 12px;
            color: var(--p-muted);
        }

        .project-detail .project-header .btn {
            padding: 0.35rem 0.85rem;
            font-size: 12px;
        }

        .project-detail .header-dates {
            font-size: 11px;
            color: var(--p-muted);
        }

        .summary-card {
            background: #fff;
            border: 1px solid var(--p-border);
            border-radius: 0.65rem;
            padding: 0.95rem 1rem;
            height: 100%;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
        }

        .summary-label {
            font-size: 11px;
            color: var(--p-muted);
            margin-bottom: 0.4rem;
            font-weight: 500;
            text-transform: none;
        }

        .summary-value {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
        }

        .summary-text {
            font-size: 11px;
            font-weight: 600;
            color: var(--p-text);
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
        }

        .status-healthy {
            background: #d1e7dd;
            color: #0f5132;
        }

        .status-risk {
            background: #fff3cd;
            color: #664d03;
        }

        .status-critical {
            background: #f8d7da;
            color: #842029;
        }

        /* VPE-GAP-6 — official-status pill states (SOP §17). */
        .status-official-pending {
            background: var(--p-surface-2);
            color: var(--p-muted);
        }

        .status-csat-pending {
            background: #e2e3e5;
            color: #41464b;
        }

        /* VPE-GAP-9 — the official-status trend glyph beside the pill (only ▲ improving / ▼ worsening). */
        .official-trend {
            font-size: 0.85em;
            line-height: 1;
        }
        .official-trend.trend-up { color: #146c43; }
        .official-trend.trend-down { color: #b02a37; }

        /* ARCHIVED read-only banner (operator 2026-08-03) — a calm, unmistakable strip above the PM
           header; the project's data stays visible but every write control is hidden. */
        .pm-archived-banner {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; border-radius: 8px;
            background: var(--p-surface-2); border: 1px solid var(--p-border);
            border-left: 4px solid var(--p-muted);
            color: var(--p-text); font-size: 13px; line-height: 1.4;
        }
        .pm-archived-banner i { font-size: 16px; color: var(--p-muted); flex-shrink: 0; }
        .pm-archived-banner strong { color: var(--p-text); }
        /* ⌘K palette: an archived project result is badged so it reads as read-only at a glance. */
        .p-cmdk-arch {
            margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .3px;
            text-transform: uppercase; padding: 1px 6px; border-radius: 4px;
            background: var(--p-surface-2); color: var(--p-muted); border: 1px solid var(--p-border);
        }

        /* VPE-GAP-4/5 c2 — the weekly PM confirmation card (a light overlay; the 1-click ritual). */
        .pm-confirm-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1080;
        }
        .pm-confirm-overlay[hidden] { display: none; }
        .pm-confirm-card {
            background: var(--p-surface);
            border-radius: 8px;
            max-width: 460px;
            width: 92%;
            padding: 16px 18px;
            box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
        }
        .pm-confirm-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .pm-confirm-intro { font-size: 12px; color: var(--p-muted); margin: 0 0 12px; }
        .pm-confirm-facts { font-size: 13px; margin-bottom: 12px; }
        .pm-confirm-detail { color: var(--p-muted); font-size: 12px; margin-top: 6px; }
        .pm-csat-picker { display: flex; gap: 6px; }
        .pm-csat-btn {
            flex: 1;
            padding: 7px 0;
            border: 1px solid var(--p-border);
            border-radius: 6px;
            background: var(--p-surface-2);
            color: var(--p-text);
            cursor: pointer;
            font-weight: 600;
        }
        .pm-csat-btn.sel {
            background: var(--p-accent-2);
            color: #fff;
            border-color: var(--p-accent-2);
        }
        .pm-confirm-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 14px;
        }
        /* VPE-GAP-8 — the recovery-plan block (shown inside the confirm card only when Red). */
        .pm-recovery {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--p-border);
        }
        .pm-recovery-h { font-size: 12px; font-weight: 600; color: #b02a37; margin-bottom: 8px; }

        /* Contract-renewals "beyond" tail — collapsed by default (no-crowding). */
        .cr-beyond > summary {
            cursor: pointer;
            font-size: 12px;
            color: var(--p-muted);
            padding: 8px 14px;
        }
        .cr-beyond > summary:hover { color: var(--p-text); }

        .overview-list {
            display: grid;
            gap: 0.5rem;
        }

        .overview-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 11px;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            display: inline-block;
        }

        .avatar-circle {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: var(--p-border);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: var(--p-text);
            font-size: 12px;
        }

        .resource-table thead th {
            background: var(--p-surface-2);
            color: var(--p-muted);
            font-weight: 600;
            font-size: 11px;
            border-bottom: 1px solid var(--p-border);
        }

        .resource-table td,
        .resource-table th {
            padding: 0.65rem 0.85rem;
            vertical-align: middle;
        }

        .resource-group {
            background: #eef2f7;
            font-weight: 600;
            color: var(--p-text);
        }

        .resource-member {
            background: #fff;
        }

        .group-title {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-weight: 600;
            color: var(--p-text);
            font-size: 12px;
        }

        .resource-header {
            font-weight: 700;
            color: var(--p-text);
        }
        
        .footer {
            background-color: var(--dark-color);
            color: #fff;
            padding: 2rem 0;
            margin-top: 3rem;
            text-align: center;
            font-size: 0.875rem;
        }

        .footer-credit {
            font-size: 0.72rem;
            color: rgba(255, 255, 255, 0.55);
            margin-top: 0.4rem;
            margin-bottom: 0;
            letter-spacing: 0.02em;
        }

        /* Global Loading Overlay */
        #loadingOverlay {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.7);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
        }
        #loadingOverlay.active {
            display: flex;
        }
        .loading-overlay-content {
            text-align: center;
        }
        .loading-overlay-text {
            margin-top: 0.75rem;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-color);
            letter-spacing: 0.02em;
        }

        /* Operator-locked May 19 2026: pastel badges used by Active
           Alerts chips across all dashboards. */
        .badge-pastel-danger  { background-color: #f8d7da; color: #842029; }
        .badge-pastel-warning { background-color: #fff3cd; color: #664d03; }
        .badge-pastel-info    { background-color: #cff4fc; color: #055160; }
        .badge-pastel-success { background-color: #d1e7dd; color: #0a3622; }

        /* Operator-locked May 19 2026: layer-accordion-header styles moved
           from templates/index.html to here so Exec + Manager dashboards
           inherit the same look. Used by Active Alerts + Analytics
           accordions across all 3 dashboards. */
        .layer-accordion-header {
            background: var(--p-surface-2);
            border: 1px solid var(--p-border);
            border-radius: 6px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background-color 0.15s, border-color 0.15s;
            text-decoration: none;
            display: flex;
            align-items: center;
            width: 100%;
        }
        .layer-accordion-header:hover {
            background: #eef2f6;
            border-color: var(--p-border);
            text-decoration: none;
        }
        .layer-accordion-header .layer-color-bar {
            width: 4px;
            height: 22px;
            border-radius: 3px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        .layer-accordion-header .layer-title {
            font-size: 13px;
            font-weight: 600;
            flex-grow: 1;
            display: flex;
            align-items: center;
        }
        .layer-accordion-header .layer-chevron {
            font-size: 14px;
            color: var(--p-muted);
            transition: transform 0.2s;
            margin-left: 8px;
        }
        .layer-accordion-header .layer-hint {
            font-size: 11px;
            color: var(--p-muted);
            font-weight: 400;
            margin-left: 10px;
        }


/* ============================================================
   LAYER 2 — #p-theme master (2026-07-02 redesign, principle #7):
   ONE design system, element/component rules → every page inherits.
   ============================================================ */
:root{
  /* neutrals — grounded light data canvas (Sigma Solve brand, 2026-07-24) */
  --p-bg:#eef1f8; --p-surface:#ffffff; --p-surface-2:#f4f7fc; --p-surface-3:#eaeef6;
  --p-text:#111a33; --p-muted:#59637a; --p-faint:#8a93a8;
  --p-border:#e2e8f2; --p-border-strong:#d3dae8; --p-hairline:#eef1f8;
  /* brand accents — Sigma Solve: Deep Blue primary, Sky Cyan secondary, Neon Orange sparing */
  --p-accent:#0047FB; --p-accent-hover:#0038c9; --p-accent-weak:#e6edff; --p-accent-line:#0047FB;
  --p-accent-2:#0047FB; --p-accent-2-weak:#e6edff;
  --p-cyan:#00AEEF; --p-cyan-weak:#e5f7fe; --p-cyan-ink:#0a7ba9;
  --p-highlight:#FF4D06; --p-highlight-weak:#ffe9e1;
  --p-gradient:linear-gradient(120deg,#0047FB,#00AEEF);
  /* dark navy-blue brand chrome (top bar + rail) — the deep-brand frame */
  --p-topbar-a:#0c1330; --p-topbar-b:#0a0f22;
  --p-rail-a:#151b42; --p-rail-b:#0a1026;
  --p-chrome-ink:#eef2fb; --p-chrome-muted:#a6aecb; --p-chrome-faint:#6b7599; --p-chrome-hair:rgba(255,255,255,.08);
  --p-chrome-nav-active-bg:rgba(0,71,251,.26); --p-chrome-nav-active-ic:#7fb2ff;
  /* muted semantic status set (dots/pills, not row fills) */
  --p-todo:var(--p-faint); --p-prog:#0047FB; --p-review:#c99a3a; --p-block:#c0607a; --p-done:#3f9e77;
  --p-danger:#c0607a; --p-warning:#c99a3a; --p-success:#3f9e77; --p-info:#0047FB;
  /* shape + shadow + type */
  --p-radius:10px; --p-radius-sm:7px; --p-radius-xs:5px;
  --p-shadow:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
  --p-shadow-lg:0 8px 28px rgba(16,24,40,.14);
  --p-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* chrome geometry */
  --p-topbar-h:50px; --p-rail-w:212px; --p-rail-w-collapsed:58px;
  /* Bootstrap variable bridges so BS components pick up our palette */
  --bs-primary:#0047FB; --bs-primary-rgb:0,71,251;
  --bs-link-color:#0047FB; --bs-link-hover-color:#0038c9;
  --bs-body-color:#111a33; --bs-body-bg:#eef1f8;
  --bs-border-color:#e2e8f2;
}

/* ---------- base elements ---------- */
body.p-chrome{background:var(--p-bg); color:var(--p-text); font-family:var(--p-font); font-size:12.5px; line-height:1.5; -webkit-font-smoothing:antialiased; padding:0; margin:0}
body.p-chrome h1,body.p-chrome h2,body.p-chrome h3,body.p-chrome h4,body.p-chrome h5,body.p-chrome h6{color:var(--p-text); font-weight:650; letter-spacing:-.2px; line-height:1.25;}
body.p-chrome h1{font-size:19px} body.p-chrome h2{font-size:16px} body.p-chrome h3{font-size:14px} body.p-chrome h4,body.p-chrome h5,body.p-chrome h6{font-size:13px}
body.p-chrome a:not(.p-nav):not(.p-brand){color:var(--p-accent-2); text-decoration:none}
/* Rail items keep their own text color regardless of the global link blue
   (operator 2026-07-02: Dashboard Admin/Exec/PM were rendering blue while sibling
   items were dark — the global link rule was beating plain .p-nav on specificity).
   Now every non-active rail item is the same calm text color; only .p-nav.active is blue. */
body.p-chrome a:hover{color:#1e58c9}
body.p-chrome hr{border-color:var(--p-border); opacity:1}
/* Operator 2026-07-02: checkbox/radio borders were too faint app-wide (Bootstrap default
   rgba(0,0,0,.25) over light surfaces) — darken + slightly thicken so they clearly read as
   controls. Checked/focus keep the master blue. Applies to every .form-check-input everywhere. */
body.p-chrome .form-check-input{border:1.5px solid #9aa6b2}
body.p-chrome .form-check-input:checked{background-color:var(--p-accent-2); border-color:var(--p-accent-2)}
body.p-chrome .form-check-input:focus{border-color:var(--p-accent-2); box-shadow:0 0 0 .18rem rgba(0,71,251,.20)}
body.p-chrome small,body.p-chrome .small{font-size:11.5px}
body.p-chrome ::selection{background:var(--p-accent-weak)}
body.p-chrome .text-muted{color:var(--p-muted)!important}

/* =====================================================================
   CHROME — hybrid: fixed top bar + collapsible left rail + content
   ===================================================================== */
/* --- top bar --- */
.p-topbar{position:fixed; top:0; left:0; right:0; height:var(--p-topbar-h); z-index:1035; display:flex; align-items:center; gap:14px; padding:0 14px; background:linear-gradient(180deg,var(--p-topbar-a),var(--p-topbar-b)); border-bottom:1px solid var(--p-chrome-hair)}
.p-topbar::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:linear-gradient(90deg,var(--p-accent),var(--p-cyan) 26%,transparent 62%); opacity:.9}
.p-brand{display:flex; align-items:center; gap:8px; font-weight:750; font-size:14px; color:#fff; letter-spacing:-.3px; white-space:nowrap; text-decoration:none}
.p-brand:hover{color:#fff}
.p-brand .p-mk{width:20px; height:20px; border-radius:6px; background:var(--p-gradient); display:inline-grid; place-items:center; color:#fff; font-size:12px; font-weight:800; letter-spacing:0; box-shadow:0 2px 8px rgba(0,71,251,.4)}
.p-railtoggle{width:30px; height:30px; border:1px solid var(--p-chrome-hair); background:rgba(255,255,255,.04); color:var(--p-chrome-muted); border-radius:8px; display:grid; place-items:center; cursor:pointer; font-size:14px; flex:none}
.p-railtoggle:hover{background:rgba(255,255,255,.09); color:#fff}
.p-crumb{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--p-chrome-muted); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.p-crumb a{color:var(--p-chrome-muted)} .p-crumb a:hover{color:#fff}
.p-crumb .sep{color:var(--p-chrome-faint)}
.p-crumb .cur{color:#fff; font-weight:600}
.p-search{margin-left:auto; display:flex; align-items:center; gap:8px; width:clamp(150px,26vw,320px); background:rgba(255,255,255,.05); border:1px solid var(--p-chrome-hair); border-radius:9px; padding:6px 10px; color:var(--p-chrome-faint); font-size:12.5px; cursor:text}
.p-search:hover{border-color:rgba(255,255,255,.18)}
.p-search .kbd{margin-left:auto; font-family:var(--p-font); font-size:10.5px; background:rgba(255,255,255,.07); border:1px solid var(--p-chrome-hair); border-radius:5px; padding:1px 6px; color:var(--p-chrome-muted)}
.p-tb-actions{display:flex; align-items:center; gap:9px; flex:none}
.p-iconbtn{width:32px; height:32px; border-radius:8px; border:1px solid var(--p-chrome-hair); background:rgba(255,255,255,.04); color:var(--p-chrome-muted); display:grid; place-items:center; cursor:pointer; font-size:15px; position:relative; text-decoration:none}
.p-iconbtn:hover{background:rgba(255,255,255,.09); color:#fff}
.p-iconbtn .dot{position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--p-highlight); box-shadow:0 0 0 2px var(--p-topbar-b)}
.p-avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#2a1c66,#140a3a); color:#fff; font-size:11px; font-weight:650; display:grid; place-items:center; text-decoration:none; flex:none}
.p-user{display:flex; align-items:center; gap:8px; cursor:default}
.p-uname{font-size:12.5px; color:#eef2fb; font-weight:600; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:760px){.p-uname{display:none}}
/* dark-chrome link-color guards — beat the global body.p-chrome a:hover blue rule */
body.p-chrome .p-topbar a:not(.p-brand){color:var(--p-chrome-muted)}
body.p-chrome .p-topbar a:not(.p-brand):hover{color:#fff}
/* --- rail --- */
.p-rail{position:fixed; top:var(--p-topbar-h); left:0; bottom:0; width:var(--p-rail-w); z-index:1030; background:linear-gradient(184deg,var(--p-rail-a),var(--p-rail-b)); border-right:1px solid var(--p-chrome-hair); padding:8px 8px 14px; overflow-y:auto; overflow-x:hidden; font-size:12.5px; transition:width .16s ease}
.p-rail::-webkit-scrollbar{width:8px} .p-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px}
.p-nav{display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:8px; color:var(--p-chrome-muted); text-decoration:none; position:relative; line-height:1.15; white-space:nowrap}
.p-nav:hover{background:rgba(255,255,255,.06); color:#fff}
.p-nav .ic{width:17px; text-align:center; color:var(--p-chrome-faint); font-size:14px; flex:none}
.p-nav.lens{font-weight:600}
.p-nav.sub{padding-left:26px; color:#8b95bd; font-size:12px}
.p-nav.sub .ic{font-size:12px}
.p-nav.pillar{font-weight:650; margin-top:2px}
.p-nav .badge-count{margin-left:auto; flex:none; background:rgba(255,255,255,.1); color:#dfe3ff; font-size:10px; font-weight:700; border-radius:20px; padding:0 6px; min-width:18px; height:16px; line-height:16px; text-align:center}
.p-nav.active .badge-count{background:var(--p-accent-2); color:#fff}
/* Active nav on the dark rail = electric-blue tint + white text + gradient accent bar. */
.p-nav.active{background:var(--p-chrome-nav-active-bg); color:#fff; font-weight:600}
.p-nav.active .ic{color:var(--p-chrome-nav-active-ic)}
.p-nav.active::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--p-gradient)}
/* dark-rail link-color guards — beat the global body.p-chrome a:hover blue rule */
body.p-chrome .p-nav:hover,body.p-chrome .p-nav.active{color:#fff}
.p-railgrp{font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--p-chrome-faint); font-weight:700; padding:13px 9px 4px}
.p-railgrp:first-child{padding-top:6px}
.p-rail .p-collapse{margin-top:14px; padding-top:10px; border-top:1px solid var(--p-chrome-hair); color:var(--p-chrome-faint); font-size:11px}
body.p-rail-collapsed .p-rail{width:var(--p-rail-w-collapsed)}
body.p-rail-collapsed .p-nav .p-label,
body.p-rail-collapsed .p-railgrp,
body.p-rail-collapsed .p-nav.sub,
body.p-rail-collapsed .p-nav .badge-count,
body.p-rail-collapsed .p-collapse .p-label{display:none}
body.p-rail-collapsed .p-nav{justify-content:center; padding-left:9px; padding-right:9px}
/* --- content --- */
.p-main{margin-left:var(--p-rail-w); margin-top:var(--p-topbar-h); min-height:calc(100vh - var(--p-topbar-h)); transition:margin-left .16s ease; display:flex; flex-direction:column}
body.p-rail-collapsed .p-main{margin-left:var(--p-rail-w-collapsed)}
/* Sigma-brand reskin 2026-07-24: content is CONTAINED + centered (max-width) so
   the app reads elevated/professional on wide monitors instead of edge-to-edge
   sprawl. Supersedes the 2026-07-02 fill-width note below (operator's new brand
   direction). The cap is generous so wide data tables still fit; only ultra-wide
   screens gain balanced side margins. Tables wider than this still scroll inside
   .table-responsive. */
.p-content{flex:1 0 auto; width:100%; max-width:1480px; margin-inline:auto; padding:24px 22px 20px}
/* Operator-locked 2026-07-02: max content area — collapse the redundant inner
   gutter (pages wrap in .main-content, which added another 1.5rem each side on
   top of .p-content). Under the chrome the ONLY horizontal gutter is .p-content's
   16px, so content fills the width. Non-chrome (login/public) keep their 1.5rem. */
.p-chrome .main-content{padding:0}
/* Canonical page-LEAD subtitle — one look for EVERY no-heading page (operator
   2026-07-02: "the subtitle has to be the same across all pages where there is
   no heading"). Darker + medium weight so it anchors the page, never a faint caption. */
.p-chrome .p-lead{font-size:14.5px; color:var(--p-text); font-weight:500; letter-spacing:-.1px; line-height:1.4}
@media (max-width:900px){
  .p-rail{width:var(--p-rail-w-collapsed)}
  .p-main{margin-left:var(--p-rail-w-collapsed)}
  body.p-rail-open .p-rail{width:var(--p-rail-w)}
}

/* =====================================================================
   CONTEXT STRIP — ONE thin global bar (sources · freshness · last sync).
   Replaces the old 3 stacked banners (disclaimer/welcome/freshness) + the
   per-page snapshot banner. Slim, token-styled, calm — never bulky.
   ===================================================================== */
.p-ctxbar{display:flex; align-items:center; gap:9px; height:29px; padding:0 20px; background:var(--p-surface); border-bottom:1px solid var(--p-border); font-size:11.5px; color:var(--p-faint); white-space:nowrap; overflow:hidden}
.p-ctxbar .src{display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis}
.p-ctxbar .src i{color:var(--p-faint); font-size:12px}
.p-ctxbar .src b{color:var(--p-muted); font-weight:600}
.p-ctxbar .sp{margin-left:auto}
.p-ctxbar .fresh{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.p-ctxbar .fresh .d{width:7px; height:7px; border-radius:50%; display:inline-block}
.p-ctxbar .fresh.ok{color:var(--p-success)} .p-ctxbar .fresh.ok .d{background:var(--p-success)}
.p-ctxbar .fresh.stale{color:#b45309} .p-ctxbar .fresh.stale .d{background:var(--p-warning)}
.p-ctxbar .sync{display:inline-flex; align-items:center; gap:5px; color:var(--p-muted)}
.p-ctxbar .sync i{font-size:12px}
.p-ctxbar .sep{color:var(--p-border-strong)}
@media (max-width:820px){.p-ctxbar .src .full{display:none}}

/* =====================================================================
   COMPONENTS — re-theme Bootstrap + shared custom classes (scoped to chrome)
   ===================================================================== */
/* Card look is AUTHORITATIVE from the master (operator 2026-07-02: "if a page has
   inline card CSS it won't use the global — ensure cards use the global"). bg /
   3-side border / radius / shadow are forced so per-page inline redefinitions
   (border:none; box-shadow; border-radius) can't diverge them. border-left is left
   overridable so semantic priority accents still show — those should use the master
   .p-a-{red,orange,amber,green,blue} classes; any inline border-left also wins. */
.p-chrome .card{background:var(--p-surface)!important; border-top:1px solid var(--p-border)!important; border-right:1px solid var(--p-border)!important; border-bottom:1px solid var(--p-border)!important; border-left:3px solid var(--p-accent-2); border-radius:var(--p-radius)!important; box-shadow:var(--p-shadow)!important; margin-bottom:1.1rem}
/* nested/inner cards stay flat (only the outer content card carries the accent bar) */
.p-chrome .card .card{border-left-width:1px; border-left-color:var(--p-border)}
/* Consistent card typography app-wide (operator 2026-07-02 #8: "card fonts not
   consistent"). font-size forced so per-page inline sizes can't diverge the header
   band; padding stays page-controllable. .card-title normalized too. */
.p-chrome .card-header{background:var(--p-surface); border-bottom:1px solid var(--p-border); font-weight:650; font-size:13px !important; padding:.7rem .95rem}
.p-chrome .card-title{font-size:14px; font-weight:650; color:var(--p-text)}
.p-chrome .card-footer{background:var(--p-surface); border-top:1px solid var(--p-border)}
.p-chrome .btn{border-radius:var(--p-radius-sm); font-size:12.5px; font-weight:550; padding:.42rem .85rem; transition:background-color .12s,border-color .12s,color .12s}
.p-chrome .btn-primary{background-color:var(--p-accent)!important; border-color:var(--p-accent)!important; color:#fff!important}
.p-chrome .btn-primary:hover,.p-chrome .btn-primary:focus{background-color:var(--p-accent-hover)!important; border-color:var(--p-accent-hover)!important; color:#fff!important}
.p-chrome .btn-outline-primary{color:var(--p-accent)!important; border-color:var(--p-accent)!important; background:transparent!important}
.p-chrome .btn-outline-primary:hover{background:var(--p-accent-weak)!important; color:var(--p-accent)!important}
.p-chrome .btn-outline-secondary{color:var(--p-text)!important; border-color:var(--p-border-strong)!important; background:var(--p-surface)!important}
.p-chrome .btn-outline-secondary:hover{background:var(--p-surface-2)!important; color:var(--p-text)!important; border-color:var(--p-border-strong)!important}
.p-chrome .btn-sm{font-size:11.5px; padding:.3rem .6rem}
.p-chrome .btn-link{color:var(--p-accent-2)!important}
/* Pagination = BLUE (operator 2026-07-02: "paging should be blue" — reduce orange). */
.p-chrome .page-item.active .page-link{background-color:var(--p-accent-2)!important; border-color:var(--p-accent-2)!important; color:#fff!important}
.p-chrome .page-link{color:var(--p-accent-2)!important}
.p-chrome .page-link:hover{color:var(--p-accent-2)!important; background:var(--p-surface-2)!important; border-color:var(--p-border)!important}
/* NO GREEN BUTTONS (operator-locked): success/export/approve buttons are BLUE (secondary utility);
   the primary CTA stays orange (.btn-primary). Status badges/dots keep green — those aren't buttons. */
.p-chrome .btn-success{background-color:var(--p-accent-2)!important; border-color:var(--p-accent-2)!important; color:#fff!important}
.p-chrome .btn-success:hover,.p-chrome .btn-success:focus{background-color:#1e58c9!important; border-color:#1e58c9!important; color:#fff!important}
.p-chrome .btn-outline-success{color:var(--p-accent-2)!important; border-color:var(--p-accent-2)!important; background:transparent!important}
.p-chrome .btn-outline-success:hover,.p-chrome .btn-outline-success:focus{background:var(--p-accent-2-weak)!important; color:#1e4fa8!important; border-color:var(--p-accent-2)!important}
.p-chrome .btn-danger{background-color:var(--p-danger)!important; border-color:var(--p-danger)!important; color:#fff!important}
.p-chrome .btn-warning{background-color:var(--p-warning)!important; border-color:var(--p-warning)!important; color:#fff!important}
.p-chrome .btn-outline-danger{color:var(--p-danger)!important; border-color:var(--p-danger)!important; background:transparent!important}
/* btn-check toggle groups (Flexible/Fixed timeline, etc.): the theme's !important .btn-outline-*
   rules above defeat Bootstrap's default checked-state fill, so a SELECTED radio looked identical to
   an unselected one — it read as "not selectable". Restore a clear checked appearance for every
   btn-check toggle on .p-chrome pages. (2026-07-13) */
.p-chrome .btn-check:checked+.btn-outline-primary{background:var(--p-accent)!important; color:#fff!important; border-color:var(--p-accent)!important}
.p-chrome .btn-check:checked+.btn-outline-secondary{background:var(--p-text)!important; color:#fff!important; border-color:var(--p-text)!important}
.p-chrome .btn-check:checked+.btn-outline-success{background:var(--p-accent-2)!important; color:#fff!important; border-color:var(--p-accent-2)!important}
.p-chrome .table{font-size:12px; color:var(--p-text); --bs-table-bg:var(--p-surface)}
.p-chrome .table thead th{font-size:11px; font-weight:650; color:var(--p-muted); text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--p-border); background:var(--p-surface-2)}
.p-chrome .table tbody td{border-bottom:1px solid var(--p-hairline); vertical-align:middle}
.p-chrome .table-hover tbody tr:hover{background:#fafbfc!important}
.p-chrome .table-responsive{max-height:76vh; overflow-y:auto; border-radius:var(--p-radius)}
.p-chrome .table-responsive thead tr{background:var(--p-surface-2)}
.p-chrome .table-responsive thead th{position:sticky; top:0; z-index:3; background:var(--p-surface-2); background-clip:padding-box; box-shadow:inset 0 -1px 0 var(--p-border); vertical-align:top}
.p-chrome .dense .table td,.p-chrome .dense .table th,.p-chrome .table.dense td,.p-chrome .table.dense th{padding:.34rem .6rem}
.p-chrome .dense .table thead th,.p-chrome .table.dense thead th{font-size:10px}
.p-chrome .badge{font-weight:600; border-radius:var(--p-radius-xs)}
/* Global table utility classes (NO per-page inline styles — operator-locked 2026-07-03).
   Numeric cells right-align + tabular-nums; identity cell reserves width; sub-caption + badges. */
.p-chrome .table td.num,.p-chrome .table th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.p-chrome .table td.center,.p-chrome .table th.center{text-align:center}
/* identity cell: let long emails/skills wrap; column width is controlled by the fixed-layout colgroup. */
.p-chrome .table td.identity{overflow-wrap:anywhere}
.p-chrome .table td.nowrap,.p-chrome .table th.nowrap{white-space:nowrap}
.p-chrome .table .cell-sub{font-size:11px; color:var(--p-muted); line-height:1.35}
.p-chrome .table .th-sub{display:block; margin-top:2px; font-size:9.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--p-muted)}
/* skill chips MUST wrap — Bootstrap's .badge sets white-space:nowrap, which would blow a long skill
   string out of the column; override so chips wrap inside the (fixed) column. */
.p-chrome .badge-skill{background:var(--p-surface-2); color:var(--p-muted); font-weight:500; font-size:10.5px; margin-right:3px; white-space:normal; word-break:break-word}
.p-chrome .badge-tl-excluded{background:#fff3cd; color:#664d03; font-weight:600}
.p-chrome .skills-wrap{margin-top:4px; line-height:1.7}
/* Dense data tables: opt-in fixed layout so columns keep defined widths and content WRAPS to fit
   (auto-layout lets a wide identity/skills cell starve the metric columns). Widths via <col> classes. */
.p-chrome .table.table-fixed{table-layout:fixed}
.p-chrome col.colw-32{width:32%}
.p-chrome col.colw-23{width:23%}
.p-chrome col.colw-15{width:15%}
.p-chrome .progress.slim{height:10px}
.p-chrome .cursor-help{cursor:help}
/* data-driven bar: the per-row VALUE is passed via the --w custom property (a data binding,
   not presentational inline style); the WIDTH rule itself lives here in the global system. */
.p-chrome .progress-bar.databar{width:var(--w,0)}
.p-chrome .status-pill{display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:999px; font-size:11px; font-weight:600}
.p-chrome .status-dot{width:9px; height:9px; border-radius:999px; display:inline-block}
/* Timeline task bars (Calendar + Gantt) — ONE controlled status palette with guaranteed
   text contrast. `!important` on color defeats the global content-link rule that would
   otherwise tint <a>-based bars blue (unreadable on colored fills). */
.p-chrome .pm-status-bar{color:#fff!important; border:0!important}
.p-chrome .pm-status-bar.st-backlog{background:#94a3b8}
.p-chrome .pm-status-bar.st-in_progress{background:#3b82f6}
.p-chrome .pm-status-bar.st-blocked{background:#e11d48}
.p-chrome .pm-status-bar.st-done{background:#16a34a}
.p-chrome .pm-status-bar.st-cancelled{background:#cbd5e1; color:#475569!important}
/* Gantt assignee initials chip (who owns the bar). */
.p-chrome .pm-gantt-assignee{width:20px; height:20px; min-width:20px; border-radius:50%; background:var(--p-accent-2); color:#fff; font-size:9px; font-weight:600; display:inline-flex; align-items:center; justify-content:center}
/* small legend swatch reusing the same status palette */
.p-chrome .pm-status-key{display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:2px}
.p-chrome .form-control,.p-chrome .form-select{font-size:12.5px; border-color:var(--p-border-strong); border-radius:var(--p-radius-sm); color:var(--p-text)}
.p-chrome .form-control:focus,.p-chrome .form-select:focus{border-color:var(--p-accent); box-shadow:0 0 0 3px var(--p-accent-weak)}
.p-chrome .form-label{font-size:12px; font-weight:600; color:var(--p-text)}
.p-chrome .form-check-input:checked{background-color:var(--p-accent); border-color:var(--p-accent)}
.p-chrome .nav-tabs{border-bottom:1px solid var(--p-border)}
.p-chrome .nav-tabs .nav-link{color:var(--p-muted); border:0; border-bottom:2px solid transparent; font-size:12.5px; font-weight:550; padding:.5rem .85rem}
.p-chrome .nav-tabs .nav-link:hover{color:var(--p-text); border-bottom-color:var(--p-border-strong)}
.p-chrome .nav-tabs .nav-link.active{color:var(--p-accent); background:transparent; border-bottom-color:var(--p-accent)}
.p-chrome .nav-pills .nav-link.active{background:var(--p-accent-2); color:#fff}
.p-seg{display:inline-flex; background:var(--p-surface-2); border:1px solid var(--p-border); border-radius:9px; padding:2px}
.p-seg .p-seg-btn{font-size:12px; padding:5px 12px; border:0; background:transparent; color:var(--p-muted); border-radius:7px; font-weight:550; text-decoration:none}
.p-seg .p-seg-btn.active{background:var(--p-accent-2); color:#fff; font-weight:600}
.p-kpi{background:var(--p-surface); border:1px solid var(--p-border); border-top:2px solid var(--p-accent-2); border-radius:var(--p-radius); padding:12px 14px; box-shadow:var(--p-shadow)}
.p-kpi .l{font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--p-muted); font-weight:700}
.p-kpi .n{font-size:23px; font-weight:720; letter-spacing:-.5px; margin:5px 0 3px; line-height:1}
.p-kpi .n small{font-size:12px; font-weight:500; color:var(--p-muted)}
.p-kpi .s{font-size:11.5px; color:var(--p-muted)}
.p-kpi .l .bi{font-size:10px; color:var(--p-faint); cursor:help}
/* KPI status top-border by purpose (Playbook 'elite' look) */
.p-kpi.k-blue{border-top-color:var(--p-accent-2)}
.p-kpi.k-green{border-top-color:var(--p-success)}
.p-kpi.k-amber{border-top-color:var(--p-warning)}
.p-kpi.k-red{border-top-color:var(--p-danger)}
.p-kpi.k-orange{border-top-color:var(--p-accent)}
/* purposeful CARD left-accent (info=blue default; green/orange/red/amber by meaning) */
.p-chrome .card.p-a-green{border-left-color:var(--p-success)}
.p-chrome .card.p-a-orange{border-left-color:var(--p-accent)}
.p-chrome .card.p-a-red{border-left-color:var(--p-danger)}
.p-chrome .card.p-a-amber{border-left-color:var(--p-warning)}
.p-chrome .card.p-a-blue{border-left-color:var(--p-accent-2)}
.p-chrome .dropdown-menu{border:1px solid var(--p-border); border-radius:var(--p-radius); box-shadow:var(--p-shadow-lg); font-size:12.5px; padding:5px}
.p-chrome .dropdown-item{border-radius:var(--p-radius-sm); padding:.45rem .6rem; font-size:12.5px; color:var(--p-text)}
.p-chrome .dropdown-item:hover,.p-chrome .dropdown-item:focus{background:var(--p-surface-2); color:var(--p-text)}
.p-chrome .dropdown-item.active,.p-chrome .dropdown-item:active{background:var(--p-accent-weak); color:var(--p-accent)}
.p-chrome .modal-content{border:0; border-radius:var(--p-radius); box-shadow:var(--p-shadow-lg)}
.p-chrome .page-item.active .page-link{background:var(--p-accent); border-color:var(--p-accent); color:#fff}
.p-chrome .page-item.disabled .page-link{color:var(--p-faint)}
.p-chrome .page-link{color:var(--p-accent); border-radius:var(--p-radius-sm)}
.p-chrome .page-link:hover{color:var(--p-accent-hover); background:var(--p-surface-2)}

/* section label (reusable across inner pages: accent bar + uppercase label + hairline) */
.p-sec{display:flex; align-items:center; margin:16px 0 12px}
.p-sec .bar{width:4px; height:18px; border-radius:3px; background:var(--p-accent-2); flex:none}
.p-sec .lbl{margin-left:9px; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p-accent-2); white-space:nowrap}
.p-sec .rule{flex:1; height:1px; background:var(--p-border); margin-left:14px}
/* AI briefing hero card (light, on-palette — replaces the old dark-navy gradient) */
.p-briefing{background:linear-gradient(135deg,#ffffff 0%,var(--p-accent-2-weak) 100%); border:1px solid #d7e3fb; border-left:3px solid var(--p-accent-2); border-radius:var(--p-radius); padding:14px 16px; box-shadow:var(--p-shadow); display:flex; align-items:flex-start; gap:11px; margin-bottom:1rem}
.p-briefing .ic{font-size:17px; color:var(--p-accent-2); margin-top:1px; flex:none}
.p-briefing p{margin:0; font-size:13px; line-height:1.6; color:var(--p-text)}
/* footer (light, not dark) */
.p-footer{margin-top:auto; padding:18px 20px; text-align:center; color:var(--p-faint); font-size:11.5px; border-top:1px solid var(--p-border); background:var(--p-surface)}
.p-footer .credit{font-style:italic; opacity:.85; margin-top:3px}
/* empty state */
.p-empty{text-align:center; color:var(--p-muted); padding:40px 20px}
.p-empty .ic{font-size:32px; color:var(--p-faint); margin-bottom:8px; display:block}
/* view-as / read-only context indicator (admin/exec impersonation) */
.p-viewas{display:inline-flex; align-items:center; gap:2px; font-size:12px; color:var(--p-muted); border:1px solid var(--p-border); border-left:3px solid var(--p-accent-2); background:var(--p-surface-2); border-radius:var(--p-radius-sm); padding:5px 11px}
.p-viewas .bi-eye-fill{color:var(--p-accent-2)}
.p-viewas strong{color:var(--p-text)}


/* ============================================================================
   KNOWLEDGEBASE — the in-app help center (storybook landing + per-page articles).
   Reached from the top-right "?" ; visible to everyone. Global theme only —
   NO inline CSS in the knowledgebase templates (operator rule NODUP-PM-4a).
   ========================================================================== */
.kb-page{max-width:960px;margin:0 auto;padding:8px 4px 48px;color:var(--p-text);font-size:14px}

/* Hero */
.kb-hero{text-align:center;padding:22px 12px 10px}
.kb-hero-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--p-accent);background:var(--p-accent-weak);
  border:1px solid var(--p-accent-line);padding:5px 12px;border-radius:999px}
.kb-hero-title{font-size:30px;line-height:1.18;font-weight:700;margin:16px 0 8px;color:var(--p-text)}
.kb-hero-sub{font-size:15px;color:var(--p-muted);max-width:620px;margin:0 auto;line-height:1.55}
.kb-hero-note{margin:14px auto 0;max-width:560px;font-size:13px;color:var(--p-warning)}

/* Storybook scenes */
.kb-story{margin:34px 0 8px;display:flex;flex-direction:column;gap:20px}
.kb-scene{display:flex;align-items:center;gap:26px;background:var(--p-surface);
  border:1px solid var(--p-border);border-left:4px solid var(--p-accent-2);
  border-radius:var(--p-radius);padding:22px 26px;box-shadow:var(--p-shadow)}
.kb-scene:nth-child(even){flex-direction:row-reverse;border-left:1px solid var(--p-border);
  border-right:4px solid var(--p-accent)}
.kb-scene-icon{position:relative;flex:0 0 auto;width:92px;height:92px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--p-accent-2);
  background:var(--p-accent-2-weak);border:1px solid var(--p-accent-line)}
.kb-scene:nth-child(even) .kb-scene-icon{color:var(--p-accent);background:var(--p-accent-weak)}
.kb-scene-num{position:absolute;top:-8px;left:-8px;width:26px;height:26px;border-radius:50%;
  background:var(--p-text);color:#fff;font-size:13px;font-weight:700;display:flex;
  align-items:center;justify-content:center}
.kb-scene-body{flex:1 1 auto;min-width:0}
.kb-kicker{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-accent);margin-bottom:4px}
.kb-scene:nth-child(even) .kb-kicker{color:var(--p-accent-2)}
.kb-scene-title{font-size:20px;font-weight:700;margin:0 0 8px;color:var(--p-text)}
.kb-scene-text{font-size:14.5px;line-height:1.58;color:var(--p-text);margin:0 0 10px}
.kb-scene-aside{font-size:13px;line-height:1.5;color:var(--p-muted);margin:0;font-style:italic}
.kb-scene-aside .bi{color:var(--p-accent-2);font-style:normal;margin-right:4px}

/* Reveal-on-scroll (only when JS is on — kb-js gate keeps content visible without JS) */
.kb-js .kb-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease}
.kb-js .kb-reveal.kb-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.kb-js .kb-reveal{opacity:1;transform:none;transition:none}}

/* House rules band */
.kb-promises{margin:34px 0;padding:22px 24px;border-radius:var(--p-radius);
  background:var(--p-surface-2);border:1px solid var(--p-border)}
.kb-promises-title{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--p-muted);text-align:center;margin-bottom:16px}
.kb-promises-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px}
.kb-promise{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--p-text)}
.kb-promise .bi{flex:0 0 auto;font-size:17px;color:var(--p-success);margin-top:1px}

/* Article index */
.kb-index{margin-top:38px}
.kb-index-head{text-align:center;margin-bottom:22px}
.kb-index-title{font-size:22px;font-weight:700;margin:0 0 6px;color:var(--p-text)}
.kb-index-sub{font-size:14px;color:var(--p-muted);margin:0;max-width:600px;margin-inline:auto;line-height:1.5}
.kb-sec{margin-bottom:26px}
.kb-sec-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-accent-2);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--p-border)}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kb-card{display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none;
  background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius-sm);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.kb-card:hover{border-color:var(--p-accent-2);box-shadow:var(--p-shadow-lg);transform:translateY(-2px)}
.kb-card-icon{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:19px;color:var(--p-accent-2);
  background:var(--p-accent-2-weak)}
.kb-card-main{flex:1 1 auto;min-width:0}
.kb-card-title{font-size:14.5px;font-weight:600;color:var(--p-text);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.kb-card-about{font-size:12.5px;color:var(--p-muted);line-height:1.42;margin-top:3px}
.kb-card-chev{flex:0 0 auto;color:var(--p-muted);font-size:14px}
.kb-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px}
.kb-badge-coming{color:var(--p-accent);background:var(--p-accent-weak);border:1px solid var(--p-accent-line)}

/* Article page */
.kb-article-page{max-width:760px}
.kb-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--p-muted);
  text-decoration:none;margin:6px 0 18px}
.kb-back:hover{color:var(--p-accent-2)}
.kb-article-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.kb-article-icon{flex:0 0 auto;width:56px;height:56px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:26px;color:var(--p-accent-2);
  background:var(--p-accent-2-weak);border:1px solid var(--p-accent-line)}
.kb-article-title{font-size:24px;font-weight:700;margin:2px 0 0;color:var(--p-text);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kb-qa{display:flex;flex-direction:column;gap:14px}
.kb-qa-block{background:var(--p-surface);border:1px solid var(--p-border);
  border-left:3px solid var(--p-accent-2);border-radius:var(--p-radius-sm);padding:16px 18px}
.kb-qa-q{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--p-accent-2);margin-bottom:6px}
.kb-qa-a{font-size:14.5px;line-height:1.6;color:var(--p-text);margin:0}
/* KB answer formatting — numbered/bulleted runs become real lists (no wall of text). */
.kb-qa-a .kb-fmt-intro{margin:0 0 9px}
.kb-qa-a .kb-fmt-ol,.kb-qa-a .kb-fmt-ul{margin:0;padding-left:22px}
.kb-qa-a .kb-fmt-ol>li,.kb-qa-a .kb-fmt-ul>li{margin:0 0 7px;line-height:1.55}
.kb-qa-a .kb-fmt-ol>li:last-child,.kb-qa-a .kb-fmt-ul>li:last-child{margin-bottom:0}
.kb-qa-a>p{margin:0}
.kb-open{margin-top:22px}
.kb-open-note{margin-top:22px;font-size:13px;color:var(--p-muted);display:flex;align-items:center;gap:8px}

/* In-place article popup (clicking a "Page by page" card) — reuses .kb-qa/.kb-article-head/.kb-open
   inside the panel so the popup body reads exactly like the full article page. */
.kb-modal{position:fixed;inset:0;z-index:1080;display:flex;align-items:flex-start;justify-content:center;
  padding:6vh 16px 24px;background:rgba(17,24,39,.55);overflow-y:auto}
.kb-modal[hidden]{display:none}
body.kb-modal-open{overflow:hidden}
.kb-modal-panel{position:relative;width:100%;max-width:640px;background:var(--p-surface);
  border:1px solid var(--p-border);border-radius:16px;box-shadow:var(--p-shadow-lg);
  padding:24px 24px 22px;animation:kb-modal-in .14s ease}
@keyframes kb-modal-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.kb-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--p-border);background:var(--p-surface-2);color:var(--p-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1}
.kb-modal-close:hover{color:var(--p-text);border-color:var(--p-accent-2)}

/* Responsive */
@media (max-width:640px){
  .kb-scene,.kb-scene:nth-child(even){flex-direction:column;text-align:center;gap:14px}
  .kb-scene-aside{text-align:center}
  .kb-promises-grid{grid-template-columns:1fr}
  .kb-hero-title{font-size:24px}
  .kb-modal{padding:3vh 10px 16px}
  .kb-modal-panel{padding:20px 18px 18px}
}

/* ============================================================================
   DELIVERY ALIGNMENT — the Command Center page (DA-EXPLAIN home). Loud explain-first
   section + worst-first ranked list with a named WHY per row. Global theme only.
   ========================================================================== */
.da-page{max-width:1080px;margin:0 auto;color:var(--p-text)}/* ASK-FONTS 2026-08-17: dropped the 14px bump → inherits the app base */

/* ① Explain-first — COLLAPSED by default (lean, data-first: operator 2026-08-02) */
.da-explain{background:linear-gradient(180deg,var(--p-accent-2-weak),var(--p-surface));
  border:1px solid var(--p-border);border-left:4px solid var(--p-accent-2);
  border-radius:var(--p-radius);padding:11px 18px;margin-bottom:12px;box-shadow:var(--p-shadow)}
.da-explain-summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:700;color:var(--p-text)}
.da-explain-summary::-webkit-details-marker{display:none}
.da-explain-summary::before{content:"\F285";font-family:"bootstrap-icons";font-weight:400;
  font-size:12px;color:var(--p-muted);transition:transform .15s;flex:0 0 auto}
.da-explain[open] .da-explain-summary::before{transform:rotate(90deg)}
.da-explain-summary .bi-clipboard-check{color:var(--p-accent-2)}
.da-explain-summary-sub{font-weight:400;font-size:12px;color:var(--p-muted)}
.da-explain-summary .da-explain-kb{margin-left:auto}
.da-explain[open] .da-legend{margin-top:14px}
.da-explain-kb{flex:0 0 auto;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--p-accent-2);
  border:1px solid var(--p-accent-line);background:var(--p-surface);padding:5px 12px;border-radius:999px}
.da-explain-kb:hover{background:var(--p-accent-2-weak)}
.da-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;margin-bottom:12px}
.da-legend-item{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--p-muted);line-height:1.4}
.da-legend-item .da-chip{flex:0 0 auto;margin-top:1px}
.da-explain-foot{font-size:12px;color:var(--p-muted);margin:0;line-height:1.5;padding-top:10px;border-top:1px solid var(--p-border)}
.da-explain-foot .bi{color:var(--p-accent-2)}
/* slipping / baseline-moved compact warning line (the two signals with no filter chip) */
.da-warnline{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.da-warn-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--p-warning-dark,#b45309);background:var(--p-warning-weak,#fef3c7);
  border:1px solid var(--p-warning,#f59e0b);border-radius:999px;padding:4px 12px}
@media (max-width:760px){.da-explain-summary-sub{display:none}}

/* status chips */
.da-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.da-chip-bad{color:#fff;background:var(--p-danger)}
.da-chip-warn{color:#5a4200;background:var(--p-warning)}
.da-chip-good{color:#fff;background:var(--p-success)}
.da-chip-muted{color:var(--p-muted);background:var(--p-surface-3);border:1px solid var(--p-border)}

/* ② Official SOP §17 health axis (DA-UNIFY 2026-07-30) — the per-row official pill + its reason
   (a colour is meaningless without the why) + the official R/A/G filter chips. The standalone KPI
   cards were retired (the filter chips carry their own counts); ASK-DA-SLEEK (2026-08-17) removed
   the last orphaned `.da-kpi-*` / `.da-metric-*` rules. Colours reuse danger/warning/success. */
.da-official{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap}
.da-official-red{color:#fff;background:var(--p-danger)}
.da-official-amber{color:#5a4200;background:var(--p-warning)}
.da-official-green{color:#fff;background:var(--p-success)}
.da-official-pending{color:var(--p-muted);background:var(--p-surface-3);border:1px solid var(--p-border)}
.da-official-why{margin:2px 0 8px;font-size:13px;color:var(--p-text);padding:6px 11px;border-radius:6px;
  border-left:3px solid var(--p-border);background:var(--p-surface-2)}
.da-official-why strong{text-transform:uppercase;letter-spacing:.02em;font-size:12px}
.da-official-why-red{border-left-color:var(--p-danger)}
.da-official-why-red strong{color:var(--p-danger)}
.da-official-why-amber{border-left-color:var(--p-warning)}
.da-official-why-amber strong{color:var(--p-warning-dark,#b45309)}
.da-official-why-green{border-left-color:var(--p-success)}
.da-official-why-green strong{color:var(--p-success)}
.da-official-why-pending{border-left-color:var(--p-border)}
.da-official-why-pending strong{color:var(--p-muted)}
.da-filter-red.is-active{border-color:var(--p-danger);color:var(--p-danger)}
.da-filter-amber.is-active{border-color:var(--p-warning);color:var(--p-warning-dark,#b45309)}
.da-filter-green.is-active{border-color:var(--p-success);color:var(--p-success)}

/* ③ Ranked list */
.da-list{display:flex;flex-direction:column;gap:10px}
.da-row{display:flex;align-items:flex-start;gap:16px;background:var(--p-surface);
  border:1px solid var(--p-border);border-left:4px solid var(--p-border-strong);
  border-radius:var(--p-radius-sm);padding:15px 18px}
.da-row.da-state-bad{border-left-color:var(--p-danger)}
.da-row.da-state-warn{border-left-color:var(--p-warning)}
.da-row.da-state-good{border-left-color:var(--p-success)}
.da-row.da-state-muted{border-left-color:var(--p-muted)}
.da-row-main{flex:1 1 auto;min-width:0}
.da-row-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.da-row-name{font-size:14px;font-weight:600;color:var(--p-text)}/* ASK-FONTS 2026-08-17: was 15px */
/* ASK-DA-SLEEK (2026-08-17): ONE muted micro-line replaces the old 6-metric strip + the bulleted
   `.da-why` reasons list. Secondary spans (`.da-sub`) sit inline separated by a · pseudo-divider. */
.da-submeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;
  color:var(--p-muted);line-height:1.5}
.da-submeta .da-sub-cov{color:var(--p-text)}
.da-submeta .da-sub-cov strong{color:var(--p-accent);font-weight:700}
.da-submeta .da-sub-dim{color:var(--p-muted)}
.da-submeta .da-sub{display:inline-flex;align-items:center;gap:3px;color:var(--p-muted)}
.da-submeta .da-sub .bi{font-size:11px;opacity:.75}
.da-submeta .da-sub-warn{color:var(--p-warning-dark,#b45309);font-weight:600}
.da-submeta>:not(:first-child)::before{content:"·";margin-right:8px;color:var(--p-border-strong);font-weight:400}
.da-row-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.da-empty{text-align:center;padding:40px;color:var(--p-muted);font-size:14px}
.da-empty .bi{display:block;font-size:28px;margin-bottom:8px;opacity:.5}
.da-filter-empty{display:none;padding:28px}
.da-filter-empty[hidden]{display:none}
.da-filter-empty:not([hidden]){display:block}
.da-filter-empty .bi{display:inline;font-size:15px;margin:0 4px 0 0}

/* DA-FILTERS — Command Center step + alignment filter chips (client-side; global theme only). */
.da-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:0 0 16px;padding:12px 14px;background:var(--p-surface-2);
  border:1px solid var(--p-border);border-radius:10px}
.da-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.da-filter-label{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;color:var(--p-muted);margin-right:2px}
.da-filter-chip{display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;line-height:1;padding:6px 11px;border-radius:999px;
  border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text);
  cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,color .12s}
.da-filter-chip:hover{border-color:var(--p-accent-2);color:var(--p-accent-2)}
/* !important: the global content-link rule (body.p-chrome a:not(...) — specificity 0,2,2)
   outranks this 0,2,0 selector and painted the active chip's text ACCENT-BLUE on the
   accent-blue fill → the chip read as an unlabeled "blue dot" (operator bug 2026-07-27).
   Same battle as .pm-status-bar; white must win. */
.da-filter-chip.is-active{background:var(--p-accent-2);border-color:var(--p-accent-2);color:#fff !important}
.da-filter-chip.is-active .da-filter-count{background:rgba(255,255,255,.28);color:#fff}
.da-filter-count{display:inline-block;min-width:16px;text-align:center;
  font-size:11px;font-weight:600;padding:1px 5px;border-radius:999px;
  background:var(--p-surface-3);color:var(--p-muted)}
.da-filter-meta{display:flex;align-items:center;gap:10px;margin-left:auto}
.da-showing{font-size:12px;color:var(--p-muted)}
.da-filter-clear{font-size:12px;background:none;border:none;color:var(--p-accent-2);
  cursor:pointer;padding:2px 4px;text-decoration:none}
.da-filter-clear:hover{text-decoration:underline}
/* COHERENCE PASS (2026-07-22): Delivery Alignment pagination (25/page) */
.da-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px}
.da-pager-meta{font-size:12.5px;color:var(--p-muted)}

@media (max-width:720px){
  .da-legend{grid-template-columns:1fr}
  .da-row{flex-direction:column}
  .da-row-actions{flex-direction:row}
  .da-filter-meta{margin-left:0;width:100%}
}

/* ============================================================================
   REPORTS (ASK-REPORTS 2026-08-17) — the three downloadable transaction
   registers (Timesheet / Change-Request log / Client-acceptance log). A lean
   filter bar + a scannable table + a totals footer + an Export-to-Excel button.
   Global theme only — NO inline CSS; the three report templates share these.
   ========================================================================== */
.rep-page{font-size:13px;color:var(--p-text)}
.rep-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px;margin:0 0 6px}
.rep-head h1{font-size:16px;font-weight:700;margin:0;color:var(--p-text)}
.rep-head .rep-sub{font-size:12px;color:var(--p-muted);margin:2px 0 0}
.rep-export{margin-left:auto}
.rep-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  background:var(--p-surface-2);border:1px solid var(--p-border);border-radius:10px;
  padding:12px 14px;margin:10px 0 14px}
.rep-field{display:flex;flex-direction:column;gap:4px}
.rep-field label{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;color:var(--p-muted)}
.rep-field input,.rep-field select{font-size:13px;padding:5px 9px;
  border:1px solid var(--p-border);border-radius:7px;background:var(--p-surface);color:var(--p-text)}
.rep-filters .rep-actions{display:flex;gap:8px;margin-left:auto}
.rep-meta{font-size:12.5px;color:var(--p-muted);margin:0 0 8px}
.rep-meta strong{color:var(--p-text)}
.rep-table-wrap{overflow-x:auto;border:1px solid var(--p-border);border-radius:10px}
.rep-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rep-table th{position:sticky;top:0;background:var(--p-surface-2);text-align:left;
  font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.03em;
  color:var(--p-muted);padding:9px 12px;border-bottom:1px solid var(--p-border);white-space:nowrap}
.rep-table td{padding:8px 12px;border-bottom:1px solid var(--p-line);color:var(--p-text);
  vertical-align:top}
.rep-table tbody tr:hover{background:var(--p-surface-2)}
.rep-table .rep-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-table tfoot td{padding:10px 12px;font-weight:700;background:var(--p-accent-2-weak);
  border-top:2px solid var(--p-border)}
.rep-empty{padding:26px;text-align:center;color:var(--p-muted);font-size:13px}
/* ASK-FIX 2026-08-18: grouped timesheet sections (a card per person/date/project with a subtotal) */
.rep-group{margin:0 0 14px}
.rep-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 12px;background:var(--p-surface-2);border:1px solid var(--p-border);
  border-bottom:none;border-radius:10px 10px 0 0}
.rep-group-title{font-size:13px;font-weight:700;color:var(--p-text)}
.rep-group-sub{font-size:12px;color:var(--p-muted);white-space:nowrap}
.rep-group-sub strong{color:var(--p-text)}
.rep-group .rep-table-wrap{border-radius:0 0 10px 10px}
.rep-grand{font-size:13px;color:var(--p-text);text-align:right;margin:4px 2px 0}
/* person × date grid — sticky first column + muted zero cells */
.rep-matrix .rep-sticky-col{position:sticky;left:0;background:var(--p-surface-2);z-index:1;
  min-width:150px;font-weight:600}
.rep-matrix td.rep-sticky-col{background:var(--p-surface)}
.rep-matrix tbody tr:hover td.rep-sticky-col{background:var(--p-surface-2)}
.rep-matrix .rep-col-total{font-weight:700;background:var(--p-accent-2-weak)}
.rep-matrix .rep-zero{color:var(--p-line)}
.rep-yes{color:var(--p-success);font-weight:600}
.rep-no{color:var(--p-muted)}
.rep-chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;
  background:var(--p-surface-2);border:1px solid var(--p-border);color:var(--p-muted)}

/* ============================================================================
   REQUIREMENTS TAB (DA-CC) — the per-project requirement × delivery matrix.
   Explain-first + coverage summary + expandable per-requirement rows (native
   <details>, no JS) showing status, the WHY, acceptance criteria, confirmed +
   dedup'd suggested tasks. Global theme only.
   ========================================================================== */
.req-tab{font-size:13.5px;color:var(--p-text)}
.req-explain{background:var(--p-accent-2-weak);border:1px solid var(--p-accent-line);
  border-radius:var(--p-radius-sm);padding:12px 16px;margin-bottom:14px}
.req-explain-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.req-explain-title{font-weight:700;color:var(--p-text);display:flex;align-items:center;gap:7px}
.req-explain-title .bi{color:var(--p-accent-2)}
.req-explain-link{font-size:12px;font-weight:600;text-decoration:none;color:var(--p-accent-2)}
.req-explain-link:hover{text-decoration:underline}
.req-explain-lead{font-size:13px;line-height:1.5;color:var(--p-text);margin:8px 0 0}

.req-summary{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.req-kpi{flex:1 1 auto;min-width:96px;background:var(--p-surface);border:1px solid var(--p-border);
  border-radius:var(--p-radius-sm);padding:10px 12px;text-align:center}
.req-kpi-n{display:block;font-size:20px;font-weight:700;color:var(--p-text)}
.req-kpi-l{font-size:11px;color:var(--p-muted);text-transform:uppercase;letter-spacing:.03em}
.req-kpi-key .req-kpi-n{color:var(--p-accent)}
.req-kpi-dim .req-kpi-n{color:var(--p-muted)}
/* P2.2 — Awaiting-QA / QA-attention glance nudges (amber / red accent, never a block). */
.req-kpi-await{border-color:var(--p-warning,#f59e0b)}
.req-kpi-await .req-kpi-n{color:var(--p-warning-dark,#b45309)}
.req-kpi-attn{border-color:var(--p-danger,#dc3545)}
.req-kpi-attn .req-kpi-n{color:var(--p-danger,#dc3545)}

.req-list{display:flex;flex-direction:column;gap:6px}
.req-row{background:var(--p-surface);border:1px solid var(--p-border);
  border-left:3px solid var(--p-border-strong);border-radius:var(--p-radius-sm)}
.req-row.req-covered{border-left-color:var(--p-success)}
.req-row.req-uncovered{border-left-color:var(--p-danger)}
.req-row.req-oos{border-left-color:var(--p-muted)}
.req-sum{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none}
.req-sum::-webkit-details-marker{display:none}
.req-sum::before{content:"\F285";font-family:"bootstrap-icons";color:var(--p-muted);font-size:12px;transition:transform .15s}
details[open] .req-sum::before{transform:rotate(90deg)}
.req-key{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--p-accent-2);font-family:var(--p-font);min-width:62px}
.req-title{flex:1 1 auto;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-badge{flex:0 0 auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px}
.req-badge-covered{color:#fff;background:var(--p-success)}
.req-badge-uncovered{color:#fff;background:var(--p-danger)}
.req-badge-oos{color:var(--p-muted);background:var(--p-surface-3);border:1px solid var(--p-border)}
.req-sugg-count{flex:0 0 auto;font-size:11px;color:var(--p-accent);background:var(--p-accent-weak);
  padding:2px 8px;border-radius:999px}
.req-body{padding:4px 16px 14px 40px;border-top:1px solid var(--p-border)}
.req-why{font-size:12.5px;line-height:1.45;color:var(--p-text);margin:10px 0}
.req-why .bi{color:var(--p-accent-2);margin-right:5px}
.req-sub{margin-top:10px}
.req-sub-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--p-muted);margin-bottom:5px}
.req-sub-note{font-weight:500;text-transform:none;letter-spacing:0;color:var(--p-muted)}
.req-ac,.req-tasks{margin:0;padding-left:2px;list-style:none;display:flex;flex-direction:column;gap:4px}
.req-ac li{font-size:12.5px;line-height:1.45;color:var(--p-text);padding-left:14px;position:relative}
.req-ac li::before{content:"•";position:absolute;left:0;color:var(--p-accent-2)}
.req-tasks li{font-size:12.5px;line-height:1.45;color:var(--p-text)}
.req-tasks .bi-check-circle-fill{color:var(--p-success);margin-right:5px}
.req-tasks .bi-lightbulb{color:var(--p-accent);margin-right:5px}
.req-shared{font-size:11px;color:var(--p-muted);font-style:italic}
.req-empty{text-align:center;padding:40px 20px;color:var(--p-muted)}
.req-empty .bi{font-size:30px;opacity:.5;display:block;margin-bottom:8px}
.req-empty-cta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* Requirements tab — confirm-a-suggestion button (DA-REQ-TAB write-action) */
.req-confirm{margin-left:8px;font-size:11px;font-weight:600;color:var(--p-accent-2);
  background:var(--p-accent-2-weak);border:1px solid var(--p-accent-line);border-radius:999px;
  padding:2px 10px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.req-confirm:hover{background:var(--p-accent-2);color:#fff}
.req-confirm:disabled{opacity:.5;cursor:default}
.req-confirm .bi{font-size:11px;margin-right:2px}
.req-dismiss{margin-left:6px;font-size:11px;font-weight:600;color:var(--p-muted);
  background:var(--p-surface-2);border:1px solid var(--p-border);border-radius:999px;
  padding:2px 10px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.req-dismiss:hover{background:var(--p-danger,#dc3545);color:#fff;border-color:var(--p-danger,#dc3545)}
.req-dismiss:disabled{opacity:.5;cursor:default}
.req-dismiss .bi{font-size:11px;margin-right:2px}

/* P2.1 — QA verification (one-click Pass/Fail/Blocked). Non-blocking; Awaiting-QA is a loud nudge. */
.req-qa{border-left:3px solid var(--p-border);padding-left:10px}
.req-qa-awaiting{border-left-color:var(--p-warning,#f59e0b)}
.req-qa-failed{border-left-color:var(--p-danger,#dc3545)}
.req-qa-blocked{border-left-color:var(--p-warning,#f59e0b)}
.req-qa-verified{border-left-color:var(--p-success,#198754)}
.req-qa-chip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:10.5px;
  font-weight:600;text-transform:none;letter-spacing:0;padding:2px 9px;border-radius:999px}
.req-qa-chip .bi{font-size:11px}
.req-qa-ok{background:var(--p-success-weak,#e6f4ea);color:var(--p-success,#198754)}
.req-qa-bad{background:var(--p-danger-weak,#fdeaea);color:var(--p-danger,#dc3545)}
.req-qa-warn{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-qa-await{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-qa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.req-verify{font-size:11px;font-weight:600;border-radius:999px;padding:3px 12px;cursor:pointer;
  border:1px solid var(--p-border);background:var(--p-surface);transition:background .12s,color .12s,border-color .12s}
.req-verify .bi{font-size:11px;margin-right:2px}
.req-verify:disabled{opacity:.5;cursor:default}
.req-verify-pass{color:var(--p-success,#198754)}
.req-verify-pass:hover{background:var(--p-success,#198754);color:#fff;border-color:var(--p-success,#198754)}
.req-verify-fail{color:var(--p-danger,#dc3545)}
.req-verify-fail:hover{background:var(--p-danger,#dc3545);color:#fff;border-color:var(--p-danger,#dc3545)}
.req-verify-blocked{color:var(--p-warning-dark,#b45309)}
.req-verify-blocked:hover{background:var(--p-warning,#f59e0b);color:#fff;border-color:var(--p-warning,#f59e0b)}

/* ── P2.6 opt-in QA hard gate — the toggle bar + the accountable "waive" (accepted-without-verification).
   Slate for waive (honest: NOT a green pass); global theme tokens only, no inline CSS. */
.req-qa-waived{background:var(--p-surface-2,#f0f2f5);color:var(--p-muted,#64748b)}
.req-verify-waive{color:var(--p-muted,#64748b)}
.req-verify-waive:hover{background:var(--p-muted,#64748b);color:#fff;border-color:var(--p-muted,#64748b)}
/* P3.2 — delivery funnel (In scope → Covered → Built → Verified → Accepted). Bar width bound via the
   --fw custom property (data value, compliant no-inline-CSS pattern). */
.req-funnel{margin:10px 0 6px;padding:10px 14px;border:1px solid var(--p-border);border-radius:8px;
  background:var(--p-surface)}
.req-funnel-h{font-size:12px;font-weight:700;color:var(--p-text);margin-bottom:8px}
.req-funnel-h .bi{margin-right:4px}
.req-funnel-stuck{color:var(--p-danger,#dc3545);font-weight:700}
.req-funnel-bars{display:flex;flex-direction:column;gap:4px}
.req-funnel-row{display:grid;grid-template-columns:78px 1fr 62px;align-items:center;gap:10px}
.req-funnel-label{font-size:11px;color:var(--p-muted,#64748b);font-weight:600;text-align:right}
.req-funnel-track{height:14px;border-radius:4px;background:var(--p-surface-2,#f0f2f5);overflow:hidden}
.req-funnel-fill{display:block;height:100%;width:var(--fw,0);border-radius:4px;
  background:var(--p-accent-2,#0047FB);transition:width .3s ease}
.req-funnel-n{font-size:11px;font-weight:700;color:var(--p-text);white-space:nowrap}
.req-funnel-drop{font-size:10px;font-weight:600;color:var(--p-danger,#dc3545)}
.req-funnel-row-stuck .req-funnel-label{color:var(--p-danger,#dc3545)}
.req-funnel-row-stuck .req-funnel-fill{background:var(--p-danger,#dc3545)}
.req-funnel-legend{font-size:10px;color:var(--p-muted,#64748b);margin-top:8px;line-height:1.4}

/* P3.3 — the PUBLIC client-facing acceptance ledger (standalone page, NOT the app shell). Clean,
   branded, print-friendly. All styling lives here (no inline CSS on the share template). */
.share-body{margin:0;background:var(--p-surface-2,#f0f2f5);color:var(--p-text,#1e293b);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.share-wrap{max-width:820px;margin:0 auto;padding:28px 20px 48px}
.share-head{text-align:center;padding:20px 0 8px;border-bottom:1px solid var(--p-border);margin-bottom:22px}
.share-brand{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-accent,#0047FB)}
.share-title{font-size:24px;font-weight:800;margin:8px 0 4px;color:var(--p-text,#1e293b)}
.share-sub{font-size:13px;color:var(--p-muted,#64748b)}
.share-section{margin:24px 0}
.share-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--p-muted,#64748b);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--p-border)}
.share-card{background:var(--p-surface,#fff);border:1px solid var(--p-border);border-radius:10px;
  padding:14px 16px;margin-bottom:12px}
.share-card-accepted{border-left:4px solid var(--p-success,#198754)}
.share-card-pending{border-left:4px solid var(--p-accent-2,#0047FB)}
/* VPE-B3 — the weekly client-summary card (leads the share page). */
.share-card-weekly{border-left:4px solid var(--p-accent,#0047FB)}
.share-weekly-asof{font-size:11.5px;color:var(--p-muted,#64748b);white-space:nowrap}
.share-weekly-status{font-size:14px;font-weight:600;color:var(--p-text,#1e293b);margin:2px 0 10px}
.share-weekly-block{margin:0 0 10px}
.share-weekly-block:last-child{margin-bottom:0}
.share-weekly-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--p-muted,#64748b);margin:0 0 3px}
.share-weekly-block p{margin:0;font-size:13.5px;line-height:1.5;color:var(--p-text,#334155)}
.share-weekly-decisions{white-space:normal}
/* VPE-GAP-12 — "waiting on you" list on the public share page. */
.share-waits{list-style:none;margin:0;padding:0}
.share-waits li{font-size:13.5px;line-height:1.5;color:var(--p-text,#334155);padding:4px 0;border-top:1px solid var(--p-border,#e5e7eb)}
.share-waits li:first-child{border-top:none}
.share-waits-what{font-weight:600}
.share-waits-by,.share-waits-age{color:var(--p-muted,#64748b);font-size:12.5px}
.share-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px}
.share-card-label{font-size:15px;font-weight:700;color:var(--p-text,#1e293b)}
.share-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;
  padding:3px 11px;border-radius:999px;white-space:nowrap}
.share-chip-accepted{background:rgba(25,135,84,.12);color:var(--p-success,#198754)}
.share-chip-pending{background:rgba(0,71,251,.10);color:var(--p-accent-2,#0047FB)}
.share-reqs{list-style:none;margin:0;padding:0}
.share-req{padding:8px 0;border-top:1px solid var(--p-border)}
.share-req:first-child{border-top:0}
.share-req-statement{font-size:13.5px;font-weight:600;color:var(--p-text,#1e293b)}
.share-crit{margin:5px 0 0;padding-left:18px}
.share-crit li{font-size:12px;color:var(--p-muted,#64748b);line-height:1.5}
.share-empty{background:var(--p-surface,#fff);border:1px solid var(--p-border);border-radius:10px;
  padding:28px;text-align:center;color:var(--p-muted,#64748b);font-size:13.5px}
.share-foot{margin-top:32px;padding-top:16px;border-top:1px solid var(--p-border);
  font-size:11.5px;color:var(--p-muted,#64748b);text-align:center;line-height:1.5}
/* P3.3-2 — the client self-accept control on a pending window (added with the write action). */
.share-accept{margin-top:12px;padding-top:12px;border-top:1px dashed var(--p-border)}
.share-accept-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.share-accept-name{flex:1 1 240px;min-width:0;padding:8px 11px;border:1px solid var(--p-border);
  border-radius:7px;font-size:13px}
.share-accept-btn{background:var(--p-success,#198754);color:#fff;border:0;border-radius:7px;
  padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.share-accept-btn:hover{filter:brightness(1.06)}
.share-accept-hint{font-size:11.5px;color:var(--p-muted,#64748b);margin-top:7px}
.share-accept-final{font-size:11.5px;font-weight:600;color:var(--p-success,#198754);margin-top:7px}
.req-gate{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:10px 0 6px;padding:9px 14px;border:1px solid var(--p-border);border-radius:8px;background:var(--p-surface)}
.req-gate-on{border-left:3px solid var(--p-success,#198754)}
.req-gate-off{border-left:3px solid var(--p-border)}
.req-gate-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.req-gate-title{font-size:12px;font-weight:700;color:var(--p-text)}
.req-gate-title .bi{margin-right:4px}
.req-gate-desc{font-size:10.5px;color:var(--p-muted,#64748b)}
.req-gate-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req-gate-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:999px}
.req-gate-block{background:var(--p-danger-weak,#fdeaea);color:var(--p-danger,#dc3545)}
.req-gate-waived{background:var(--p-surface-2,#f0f2f5);color:var(--p-muted,#64748b)}
.req-gate-toggle{font-size:11px;font-weight:600;border-radius:999px;padding:3px 14px;cursor:pointer;
  border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text);transition:background .12s,color .12s}
.req-gate-toggle .bi{margin-right:3px}
.req-gate-toggle:hover{background:var(--p-accent-2,#0047FB);color:#fff;border-color:var(--p-accent-2,#0047FB)}
.req-gate-toggle:disabled{opacity:.5;cursor:default}

/* VPE-GAP-10 — readiness gate panel on the Requirements tab */
.req-ready{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius-sm);
  padding:10px 14px;margin-bottom:14px;border-left:3px solid var(--p-border)}
.req-ready-ready{border-left-color:var(--p-success,#198754)}
.req-ready-conditional{border-left-color:var(--p-warning,#fd7e14)}
.req-ready-not_ready{border-left-color:var(--p-danger,#dc3545);background:var(--p-danger-weak,#fdeaea)}
.req-ready-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.req-ready-title{font-size:12.5px;font-weight:700;color:var(--p-text)}
.req-ready-title .bi{margin-right:4px}
.req-ready-ready .req-ready-title .bi{color:var(--p-success,#198754)}
.req-ready-conditional .req-ready-title .bi{color:var(--p-warning-dark,#b45309)}
.req-ready-not_ready .req-ready-title .bi{color:var(--p-danger,#dc3545)}
.req-ready-desc{font-size:10.5px;color:var(--p-muted,#64748b)}
.req-ready-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req-ready-btn{font-size:11px;font-weight:600;border-radius:999px;padding:3px 13px;cursor:pointer;
  border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text);transition:background .12s,color .12s}
.req-ready-btn .bi{margin-right:3px}
.req-ready-btn:hover{background:var(--p-accent-2,#0047FB);color:#fff;border-color:var(--p-accent-2,#0047FB)}
.req-ready-btn:disabled{opacity:.5;cursor:default}
.req-ready-go:hover{background:var(--p-success,#198754);border-color:var(--p-success,#198754)}

/* ── P3.1 client-acceptance ledger (cadence-based). Collapsed <details>; global tokens only, no inline CSS. */
/* P3.3-3 — the internal "Share with client" control (inside the acceptance-ledger panel). */
.req-share{border:1px solid var(--p-border);border-radius:8px;background:var(--p-surface-2,#f0f2f5);
  padding:10px 12px;margin-bottom:12px}
.req-share-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-size:12px;font-weight:700;color:var(--p-text)}
.req-share-h .bi{margin-right:3px}
.req-share-live{font-size:11px;font-weight:600;color:var(--p-success,#198754)}
.req-share-off{font-size:11px;font-weight:600;color:var(--p-muted,#64748b)}
.req-share-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.req-share-gen,.req-share-revoke,.req-share-copy{font-size:11.5px;font-weight:600;border-radius:7px;
  padding:5px 12px;cursor:pointer;border:1px solid var(--p-border);background:var(--p-surface)}
.req-share-gen{border-color:var(--p-accent-2,#0047FB);color:var(--p-accent-2,#0047FB)}
.req-share-gen:hover{background:var(--p-accent-2,#0047FB);color:#fff}
.req-share-revoke{color:var(--p-danger,#dc3545)}
.req-share-revoke:hover{background:var(--p-danger,#dc3545);color:#fff;border-color:var(--p-danger,#dc3545)}
.req-share-out{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.req-share-url{flex:1 1 320px;min-width:0;padding:6px 10px;border:1px solid var(--p-border);
  border-radius:7px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--p-surface)}
.req-share-copy{border-color:var(--p-accent-2,#0047FB);color:var(--p-accent-2,#0047FB)}
.req-share-copy:hover{background:var(--p-accent-2,#0047FB);color:#fff}
.req-share-once{flex-basis:100%;font-size:10.5px;color:var(--p-muted,#64748b);line-height:1.4;margin-top:2px}
.req-accept{margin:10px 0 6px;border:1px solid var(--p-border);border-radius:8px;background:var(--p-surface);overflow:hidden}
.req-accept-h{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:9px 14px;font-size:12px;font-weight:700;color:var(--p-text)}
.req-accept-h::-webkit-details-marker{display:none}
.req-accept-h .bi{margin-right:2px}
.req-accept-cadence{font-size:10.5px;font-weight:500;color:var(--p-muted,#64748b)}
.req-accept-chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 8px;border-radius:999px}
.req-accept-ready{background:var(--p-accent-2-weak,#e6effd);color:var(--p-accent-2,#0047FB)}
.req-accept-done{background:var(--p-success-weak,#e6f4ea);color:var(--p-success,#198754)}
.req-accept-draft{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-accept-body{padding:4px 14px 12px;border-top:1px solid var(--p-border)}
.req-accept-cadence-form{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0}
.req-accept-label{font-size:11px;font-weight:600;color:var(--p-text)}
.req-accept-cadence-sel,.req-accept-cadence-note,.req-accept-contact,.req-accept-note{
  font-size:11px;padding:3px 8px;border:1px solid var(--p-border);border-radius:6px;background:var(--p-surface);color:var(--p-text)}
.req-accept-cadence-note{min-width:240px;flex:1 1 220px}
.req-accept-contact{min-width:200px}
.req-accept-note{min-width:160px;flex:1 1 140px}
.req-accept-btn{font-size:11px;font-weight:600;border-radius:999px;padding:3px 14px;cursor:pointer;
  border:1px solid var(--p-accent-2,#0047FB);background:var(--p-accent-2,#0047FB);color:#fff}
.req-accept-btn:hover{background:var(--p-accent-2-hover,#245bd0)}
.req-accept-start-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:6px 0 10px}
.req-accept-start{font-size:11px;font-weight:600;border-radius:999px;padding:4px 14px;cursor:pointer;
  border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text)}
.req-accept-start:hover:not(:disabled){background:var(--p-accent-2,#0047FB);color:#fff;border-color:var(--p-accent-2,#0047FB)}
.req-accept-start:disabled{opacity:.5;cursor:default}
.req-accept-hint,.req-accept-empty{font-size:10.5px;color:var(--p-muted,#64748b)}
.req-accept-empty{padding:8px 0}
.req-accept-ev{border:1px solid var(--p-border);border-radius:8px;padding:8px 12px;margin:8px 0}
.req-accept-ev-accepted{border-left:3px solid var(--p-success,#198754)}
.req-accept-ev-draft{border-left:3px solid var(--p-warning,#f59e0b)}
.req-accept-ev-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--p-text)}
.req-accept-count{font-size:10.5px;color:var(--p-muted,#64748b)}
.req-accept-reqs{margin:6px 0 4px;padding-left:16px;font-size:11px;color:var(--p-text)}
.req-accept-reqs li{margin:1px 0}
.req-accept-key{font-weight:600;color:var(--p-accent-2,#0047FB);margin-right:4px}
.req-accept-signoff-form{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.req-accept-note-shown{font-size:10.5px;color:var(--p-muted,#64748b);margin-top:4px}

/* ── Change Requests Slice 1 — capture a mid-flight client change + its assessed timeline impact.
   The governed alternative to silent scope creep. Global theme tokens only, no inline CSS. */
.req-kpi-cr{border-color:var(--p-warning,#f59e0b)}
.req-kpi-cr .req-kpi-n{color:var(--p-warning-dark,#b45309)}
.req-cr{margin:10px 0 6px;border:1px solid var(--p-border);border-radius:8px;background:var(--p-surface);overflow:hidden}
/* ---- VPE-B3 (2026-07-22): weekly client summary panel (Requirements tab) ---- */
.req-wk{margin:10px 0 6px;border:1px solid var(--p-border);border-radius:8px;background:var(--p-surface);overflow:hidden}
.req-wk-h{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:9px 14px;font-size:12px;font-weight:700;color:var(--p-text)}
.req-wk-h::-webkit-details-marker{display:none}
.req-wk-h .bi{margin-right:2px}
.req-wk-week{font-size:11px;font-weight:500;color:var(--p-muted,#64748b)}
.req-wk-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;margin-left:auto}
.req-wk-published{background:rgba(25,135,84,.12);color:var(--p-success,#198754)}
.req-wk-draft{background:rgba(0,71,251,.10);color:var(--p-accent,#0047FB)}
.req-wk-body{padding:10px 14px 12px;border-top:1px solid var(--p-border)}
.req-wk-explain{font-size:11.5px;color:var(--p-muted,#64748b);margin:0 0 10px;line-height:1.5}
.req-wk-form{display:flex;flex-direction:column;gap:8px}
.req-wk-label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600;color:var(--p-muted,#64748b)}
.req-wk-optional{font-weight:400;text-transform:none}
.req-wk-input,.req-wk-textarea{font-size:13px;font-weight:400;color:var(--p-text);border:1px solid var(--p-border);
  border-radius:6px;padding:6px 9px;width:100%;background:var(--p-surface,#fff);font-family:inherit}
.req-wk-textarea{resize:vertical;line-height:1.5}
.req-wk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.req-wk-status{font-size:11.5px;color:var(--p-muted,#64748b)}
.req-wk-url{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12px}
.req-wk-url-label{font-weight:600;color:var(--p-muted,#64748b)}
.req-wk-url-input{flex:1 1 220px;min-width:180px;font-size:12px;border:1px solid var(--p-border);border-radius:6px;padding:5px 8px;background:var(--p-surface-2,#f0f2f5)}
/* ---- VPE-N-6 (2026-07-20): Requirements-tab calm-open ---- */
/* The visible 3-chip glance strip (uncovered / awaiting QA / open CRs). */
.req-glance{margin-bottom:10px}
/* BRAND-REBRAND (2026-07-24): the four secondary tool disclosures (Details ·
   Change requests · Weekly summary · Acceptance ledger) rest as a calm 2-up
   grid of collapsed tiles instead of a wall of stacked full-width bars. An
   OPENED tile spans the full width so its content (funnel / forms) never
   cramps. No feature dropped — resting-state density only. */
/* Flex (not grid) so the collapsed tiles stay a clean 2-up in the resting state, but a lone
   trailing collapsed tile GROWS to fill its row instead of leaving a dangling blank cell whenever
   a sibling is opened full-width (operator whitespace-balance fix 2026-07-29). basis calc(50%-6px)
   = exactly two per 1244px row (a third can't fit); flex-grow reflows any lone tile to full width. */
.req-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-bottom:14px}
.req-tools>details{flex:1 1 calc(50% - 6px);min-width:280px;margin:0}
.req-tools>details[open]{flex-basis:100%}
@media (max-width:900px){.req-tools>details{flex-basis:100%}}
/* The one-click "Details" disclosure holding the funnel + secondary chips
   + QA-gate control + map-before-work nudge. Mirrors the .req-cr details
   shape so every disclosure on the tab reads the same. */
.req-details{border:1px solid var(--p-border);border-radius:10px;background:var(--p-surface,#fff);margin:0 0 12px}
.req-details-h{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:9px 14px;font-size:12px;font-weight:700;color:var(--p-text)}
.req-details-h::-webkit-details-marker{display:none}
.req-details-h .bi{margin-right:2px}
.req-details-body{padding:10px 14px 12px;border-top:1px solid var(--p-border)}
.req-details-body .req-funnel{margin-top:0}

.req-cr-h{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:9px 14px;font-size:12px;font-weight:700;color:var(--p-text)}
.req-cr-h::-webkit-details-marker{display:none}
.req-cr-h .bi{margin-right:2px}
.req-cr-chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 8px;border-radius:999px}
.req-cr-open{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-cr-body{padding:8px 14px 12px;border-top:1px solid var(--p-border)}
.req-cr-explain{font-size:11px;color:var(--p-muted,#64748b);margin:2px 0 10px}
.req-cr-form{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:10px;border:1px dashed var(--p-border);border-radius:8px}
.req-cr-formrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.req-cr-title,.req-cr-kind,.req-cr-source,.req-cr-effort,.req-cr-date,.req-cr-excerpt{
  font-size:11px;padding:4px 8px;border:1px solid var(--p-border);border-radius:6px;background:var(--p-surface);color:var(--p-text)}
.req-cr-title{flex:1 1 260px;min-width:200px}
.req-cr-effort{width:150px}
.req-cr-excerpt{width:100%;resize:vertical}
.req-cr-actions{display:flex;justify-content:flex-end}
.req-cr-log{font-size:11px;font-weight:600;border-radius:999px;padding:4px 14px;cursor:pointer;
  border:1px solid var(--p-accent-2,#0047FB);background:var(--p-accent-2,#0047FB);color:#fff}
.req-cr-log:hover:not(:disabled){background:var(--p-accent-2-hover,#245bd0)}
.req-cr-log:disabled{opacity:.5;cursor:default}
/* CR-DOC (2026-08-16): supporting-document inputs + the paperclip chip that links to the stored doc. */
.req-cr-doc{flex:1 1 240px;min-width:180px;font-size:11px;color:var(--p-text)}
.req-cr-doclink{flex:1 1 240px;min-width:180px;font-size:11px;padding:4px 8px;border:1px solid var(--p-border);border-radius:6px;background:var(--p-surface);color:var(--p-text)}
.req-cr-doc-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--p-accent-2,#0047FB);text-decoration:none}
.req-cr-doc-chip:hover{text-decoration:underline}
.req-cr-doc-chip .bi{font-size:11px}
.req-cr-empty{font-size:10.5px;color:var(--p-muted,#64748b);padding:6px 0}
.req-cr-item{border:1px solid var(--p-border);border-left:3px solid var(--p-warning,#f59e0b);
  border-radius:8px;padding:8px 12px;margin:8px 0}
.req-cr-item-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--p-text)}
.req-cr-key{font-weight:700;color:var(--p-accent-2,#0047FB)}
.req-cr-item-title{font-weight:600}
.req-cr-status{font-size:10px;font-weight:600;padding:1px 8px;border-radius:999px;
  background:var(--p-surface-2,#f0f2f5);color:var(--p-muted,#64748b)}
.req-cr-status-assessed{background:var(--p-accent-2-weak,#e6effd);color:var(--p-accent-2,#0047FB)}
.req-cr-status-rebaselined{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-cr-status-absorbed,.req-cr-status-rejected,.req-cr-status-deferred{background:var(--p-surface-2,#f0f2f5);color:var(--p-muted,#64748b)}
.req-cr-kindlbl{font-size:10.5px;color:var(--p-muted,#64748b)}
.req-cr-meta{font-size:10.5px;color:var(--p-muted,#64748b);margin-top:3px}
.req-cr-quote{margin:6px 0 4px;padding:4px 10px;border-left:2px solid var(--p-border);
  font-size:11px;font-style:italic;color:var(--p-text)}
.req-cr-impact{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--p-warning-dark,#b45309)}
.req-cr-impact-none{font-weight:500;color:var(--p-muted,#64748b)}
.req-cr-item-actions{margin-top:6px}
.req-cr-assess{font-size:11px;font-weight:600;border-radius:999px;padding:3px 12px;cursor:pointer;
  border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text)}
.req-cr-assess:hover:not(:disabled){background:var(--p-accent-2,#0047FB);color:#fff;border-color:var(--p-accent-2,#0047FB)}
.req-cr-assess:disabled{opacity:.5;cursor:default}
/* Slice 2 — the governed decision + client sign-off. */
.req-cr-item-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.req-cr-decide-group{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.req-cr-decide{font-size:10.5px;font-weight:600;border-radius:999px;padding:3px 10px;cursor:pointer;
  border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text)}
.req-cr-decide:hover:not(:disabled){background:var(--p-accent-2,#0047FB);color:#fff;border-color:var(--p-accent-2,#0047FB)}
.req-cr-decide:disabled{opacity:.5;cursor:default}
.req-cr-newdate{font-size:10.5px;padding:3px 6px;border:1px solid var(--p-border);border-radius:6px;
  background:var(--p-surface);color:var(--p-text)}
.req-cr-bill-lbl{font-size:10.5px;color:var(--p-muted,#64748b);display:inline-flex;align-items:center;gap:4px}
.req-cr-signoff-form{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.req-cr-contact{font-size:10.5px;padding:3px 8px;border:1px solid var(--p-border);border-radius:6px;
  background:var(--p-surface);color:var(--p-text);min-width:200px}
.req-cr-signoff{font-size:10.5px;font-weight:600;border-radius:999px;padding:3px 12px;cursor:pointer;
  border:1px solid var(--p-success,#198754);background:var(--p-success,#198754);color:#fff}
.req-cr-signoff:hover:not(:disabled){background:var(--p-success-dark,#146c43)}
.req-cr-signoff:disabled{opacity:.5;cursor:default}
.req-cr-decision{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:11px}
.req-cr-rebase{color:var(--p-warning-dark,#b45309);font-weight:600}
.req-cr-bill{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309);
  font-size:10px;font-weight:600;padding:1px 8px;border-radius:999px}
.req-cr-signed{color:var(--p-success,#198754);font-weight:600}
.req-cr-dnote{color:var(--p-muted,#64748b);font-style:italic}

/* ── P2.3 scope-drift ledger (DA-SCOPE-DRIFT) — per-requirement + the glance rollup. A finding, never
   a gate; the billable flag is the scope-creep signal. Global theme tokens only, no inline CSS. */
.req-kpi-scope{border-color:var(--p-accent-2,#0047FB)}
.req-kpi-scope .req-kpi-n{color:var(--p-accent-2,#0047FB)}
.req-scope{border-left:3px solid var(--p-border);padding-left:10px}
.req-scope-chip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:10.5px;
  font-weight:600;text-transform:none;letter-spacing:0;padding:2px 9px;border-radius:999px}
.req-scope-bill{background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-scope-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:5px}
.req-scope-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.req-scope-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:1px 8px;border-radius:999px;background:var(--p-surface-2);color:var(--p-muted)}
.req-scope-clarified{background:var(--p-surface-2);color:var(--p-muted)}
.req-scope-expanded{background:var(--p-danger-weak,#fdeaea);color:var(--p-danger,#dc3545)}
.req-scope-narrowed{background:var(--p-accent-2-weak,#e7effd);color:var(--p-accent-2,#0047FB)}
.req-scope-waived{background:var(--p-surface-3,#e9ecef);color:var(--p-muted)}
.req-scope-bill-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;
  padding:1px 7px;border-radius:999px;background:var(--p-warning-weak,#fef6e6);color:var(--p-warning-dark,#b45309)}
.req-scope-summary{color:var(--p-text)}
.req-scope-date{margin-left:auto;font-size:10.5px;color:var(--p-muted);white-space:nowrap}
.req-scope-excerpt{flex-basis:100%;font-size:11.5px;font-style:italic;color:var(--p-muted);
  border-left:2px solid var(--p-border);padding-left:8px;margin-top:2px}
.req-scope-form{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.req-scope-input-type,.req-scope-input-summary{font-size:11.5px;border:1px solid var(--p-border);
  border-radius:6px;padding:3px 8px;background:var(--p-surface);color:var(--p-text)}
.req-scope-input-summary{flex:1 1 200px;min-width:160px}
.req-scope-bill-check{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--p-muted);cursor:pointer}
.req-scope-record{font-size:11px;font-weight:600;border-radius:999px;padding:3px 12px;cursor:pointer;
  border:1px solid var(--p-accent-2,#0047FB);background:var(--p-surface);color:var(--p-accent-2,#0047FB);
  transition:background .12s,color .12s}
.req-scope-record .bi{font-size:11px;margin-right:2px}
.req-scope-record:hover{background:var(--p-accent-2,#0047FB);color:#fff}
.req-scope-record:disabled{opacity:.5;cursor:default}
/* ── P2.4 ghost-work nudge (internal repos only; never fires for client/none repos, P6-A). Amber
   warning line + glance chip. A nudge, never a gate. Global theme tokens only, no inline CSS. */
.req-kpi-ghost{border-color:var(--p-warning,#f59e0b)}
.req-kpi-ghost .req-kpi-n{color:var(--p-warning-dark,#b45309)}
.req-ghost{font-size:12px;line-height:1.5;color:var(--p-warning-dark,#b45309);
  background:var(--p-warning-weak,#fef6e6);border:1px solid var(--p-warning,#f59e0b);
  border-radius:8px;padding:7px 10px}
.req-ghost .bi{margin-right:4px}
/* ── P2.5 checkpoint-1 soft nudge (requirements-mapped-before-work) + the out-of-scope escape hatch.
   A heads-up banner + a per-row park/bring-back control. Never a gate. Global theme tokens, no inline CSS. */
.req-nudge{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;
  color:var(--p-warning-dark,#b45309);background:var(--p-warning-weak,#fef6e6);
  border:1px solid var(--p-warning,#f59e0b);border-radius:8px;padding:9px 12px;margin-bottom:12px}
.req-nudge .bi{font-size:15px;margin-top:1px}
.req-oos-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--p-muted)}
.req-oos-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.req-scope-oos,.req-scope-back{font-size:11px;font-weight:600;border-radius:999px;padding:3px 11px;
  cursor:pointer;border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-muted);
  transition:background .12s,color .12s,border-color .12s}
.req-scope-oos .bi,.req-scope-back .bi{font-size:11px;margin-right:2px}
.req-scope-oos:hover{background:var(--p-surface-2);color:var(--p-text)}
.req-scope-back{color:var(--p-accent-2,#0047FB);border-color:var(--p-accent-2,#0047FB)}
.req-scope-back:hover{background:var(--p-accent-2,#0047FB);color:#fff}

/* ── Delivery Journey stepper (DA-JOURNEY) — slim per-project 4-step lifecycle on the PM header.
   ① SOW → ② Launch → ③ Requirements → ④ Delivery. ✓ done · ● current · ○ pending · — N/A.
   Navigational/status aid (no noise) — global theme tokens only, NO inline CSS on the header. */
.dj-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-top:8px}
.dj-step{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;line-height:1;
  padding:3px 9px 3px 4px;border-radius:999px;border:1px solid transparent;color:var(--p-muted)}
.dj-step .dj-num{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;font-size:10px;font-weight:700;background:var(--p-surface-2);color:var(--p-muted)}
.dj-step.dj-done{color:var(--p-text)}
.dj-step.dj-done .dj-num{background:var(--p-success,#198754);color:#fff}
.dj-step.dj-active .dj-num,.dj-step.dj-pending .dj-num{background:var(--p-surface-3,#e9ecef);color:var(--p-muted)}
.dj-step.dj-na{opacity:.45}
.dj-step.dj-current{background:var(--p-accent-2-weak);border-color:var(--p-accent-line);color:var(--p-text);font-weight:600}
.dj-step.dj-current .dj-num{background:var(--p-accent-2);color:#fff}
.dj-arrow{color:var(--p-border);font-size:14px;line-height:1;user-select:none}
.dj-next{margin-top:5px;font-size:11.5px;color:var(--p-muted)}
.dj-next .dj-next-lbl{text-transform:uppercase;letter-spacing:.4px;font-size:9.5px;font-weight:700;
  color:var(--p-accent-2);margin-right:4px}
.dj-next .dj-owner{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--p-surface-2);color:var(--p-text);font-size:10px;font-weight:600}
/* VPE-GAP-10 — readiness chip beside the header journey (only rendered when NOT ready — calm otherwise) */
.dj-ready{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10.5px;font-weight:700;
  padding:2px 9px;border-radius:999px}
.dj-ready .bi{font-size:11px}
.dj-ready-not{background:var(--p-danger-weak,#fdeaea);color:var(--p-danger,#dc3545)}
.dj-ready-cond{background:var(--p-surface-2);color:var(--p-warning-dark,#b45309)}
/* ---- VPE-GAP-1/2 (2026-07-22): owner + aging chips on every red (kept in the row HEAD). The
   step/AE chips moved to the muted `.da-submeta` micro-line (ASK-DA-SLEEK 2026-08-17). ---- */
.da-owner{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;line-height:1;
  padding:3px 9px;border-radius:999px;background:var(--p-surface-2);color:var(--p-text);border:1px solid var(--p-border)}
.da-owner .bi{font-size:11px;opacity:.7}
.da-owner-role{color:var(--p-muted);font-weight:500}

/* FRONT-DOOR #12/#13a — Pre-Sign SOW blockers-only triage (Questions tab) */
.fde-triage-summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11.5px;
  color:var(--p-muted);padding:8px 12px;background:var(--p-surface-2);border:1px solid var(--p-border);
  border-radius:0.5rem}
.fde-triage-summary strong{color:var(--p-text)}
.fde-tri-sep{color:var(--p-border)}
.fde-tri-blocker strong{color:#b91c1c}
.fde-tri-adv strong{color:#b45309}
.fde-tri-cleared strong{color:#059669}
.fde-section-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:var(--p-text);margin:14px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--p-border)}
.fde-blockers-head{border-bottom-color:#fca5a5}
.fde-advisories-head{border-bottom-color:var(--p-border)}
.fde-count-pill{font-size:10px;font-weight:700;line-height:1;padding:3px 9px;border-radius:999px}
.fde-count-blocker{background:#fee2e2;color:#991b1b}
.fde-count-adv{background:#fef3c7;color:#92400e}
.fde-count-clear{background:#d1fae5;color:#065f46}
.fde-cat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:700;text-transform:uppercase;color:var(--p-muted);letter-spacing:0.05em;
  margin-bottom:0.5rem;padding-bottom:0.25rem;border-bottom:1px solid var(--p-border)}
.fde-cat-count{display:inline-block;font-size:9px;font-weight:700;padding:1px 7px;margin-left:4px;
  border-radius:999px;background:var(--p-surface-2);color:var(--p-muted);border:1px solid var(--p-border)}
.fde-bulk-actions{display:inline-flex;gap:6px}

/* FRONT-DOOR #12/#13 — SOW recommended-team suggestions on the People tab */
.pm-sow-sugg-head{font-size:12px;font-weight:700;color:var(--p-text);margin-bottom:2px}
.pm-sow-sugg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:6px;border:1px dashed var(--p-border);border-radius:0.5rem;
  background:var(--p-surface-2)}
.pm-sow-sugg-info{min-width:220px;flex:1 1 auto}
.pm-sow-sugg-actions{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}

/* FRONT-DOOR Slice 5 — the SOW chip in the project header (admin/exec/PM: view/download anytime) */
.pm-sow-chip{display:inline-flex;align-items:center;font-size:12px;line-height:1;padding:2px 8px;
  border:1px solid var(--p-border);border-radius:999px;color:var(--p-muted);text-decoration:none;
  background:var(--p-surface-2)}
.pm-sow-chip:hover{color:var(--p-text);border-color:var(--p-accent-2);background:var(--p-surface)}
/* muted "No SOW" state — always visible for admin/exec/PM even when none is bound (operator 2026-08-18) */
.pm-sow-chip-none{color:var(--p-muted);background:transparent;border-style:dashed;cursor:default;opacity:.75}
.pm-sow-chip-none:hover{color:var(--p-muted);border-color:var(--p-border);background:transparent}

/* project-header meta line (operator live 2026-08-18: "it's all looking like 1 big line") — each fact
   is a segment that never breaks mid-phrase, separated by a spaced dimmed dot; the leading label
   (Managed by / AE:) is muted so the value reads as the emphasis. Wraps BETWEEN segments on narrow width. */
.pm-header-meta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:2px}
.pm-header-meta .pm-meta-seg{white-space:nowrap}
.pm-header-meta .pm-meta-lbl{color:var(--p-muted)}
.pm-header-meta .pm-meta-sep{margin:0 .6rem;color:var(--p-border)}

/* ── Handover / project brief — a professional one-page delivery brief (operator 2026-08-18: "look and
   feel is not professional at all"). Renders as ONE flowing document (NOT a stack of cards): a readable
   measure, sections led by uppercase blue-accent eyebrow labels separated by hairline rules for clear
   hierarchy, a highlighted "Where to start" callout (the #1 thing a new PM needs), clean lists. No card
   chrome on the doc itself so it drops cleanly into both the ⋯-menu modal body AND the printable page.
   Theme tokens only. The .pm-brief-* classes were referenced but never styled — hence the bare look. ── */
.pm-brief-doc{max-width:860px; color:var(--p-text); font-size:14px; line-height:1.62}
.pm-brief-doc .pm-brief-p{margin:0 0 .55rem; color:var(--p-text); line-height:1.62}
.pm-brief-doc .pm-brief-p:last-child{margin-bottom:0}
.pm-brief-doc .pm-brief-p strong{font-weight:650; color:var(--p-text)}
/* section eyebrow: uppercase blue-accent label with a hairline rule above + generous top gap */
.pm-brief-doc .pm-brief-h{display:flex; align-items:center; gap:.5rem; margin:1.5rem 0 .55rem;
  padding-top:.9rem; border-top:1px solid var(--p-border); font-size:10.5px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--p-accent-2)}
.pm-brief-doc .pm-brief-h::before{content:""; width:14px; height:2px; border-radius:2px;
  background:var(--p-accent-2); flex:0 0 auto}
/* the "Where to start" callout — the single most actionable line for a new PM */
.pm-brief-doc .pm-brief-start{margin:.65rem 0 0; padding:.5rem .75rem; border-radius:8px;
  background:var(--p-accent-2-weak); border-left:3px solid var(--p-accent-2)}
.pm-brief-doc .pm-brief-list{margin:.15rem 0 .55rem; padding-left:1.15rem}
.pm-brief-doc .pm-brief-list li{margin-bottom:.22rem; line-height:1.55}
.pm-brief-doc .pm-brief-list:last-child{margin-bottom:0}
@media print{.pm-brief-doc .pm-brief-h{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .pm-brief-doc .pm-brief-start{-webkit-print-color-adjust:exact; print-color-adjust:exact}}

/* Project Launch card (operator 2026-08-13: the old fixed 12-col row placed 7 fields at
   col-md-2 → only 6 fit → Category orphaned alone on its own line = "looking horrible").
   Auto-fit grid: fields become equal >=150px columns that pack as many as fit and wrap
   into balanced rows with no orphan. Global, zero inline. */
.pm-launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 12px;align-items:end}
/* External is a FLAG on its own switch line (operator live 2026-08-18: "the checkbox in middle of
   dropdowns is not looking good") — pulled out of the classification select row. */
.pm-external-switch .form-check-input{cursor:pointer}
.pm-external-switch .form-check-label{cursor:pointer}
.pm-launch-route{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:11px;
  border-radius:999px;padding:3px 10px;white-space:nowrap;line-height:1.4}
.pm-launch-route.rA{background:#e7f5ec;color:#166534;border:1px solid #b7e0c4}   /* Pre-Sign Scan — SOW ready */
.pm-launch-route.rT{background:#eef2ff;color:#3a4fb8;border:1px solid #cdd6f7}   /* new request via Tickets */
.pm-launch-route.rH{background:#f3e9fb;color:#7a3db8;border:1px solid #ddc7f0}   /* new request via HubSpot */

/* FRONT-DOOR #12 — guided onboarding flow strip on the Pre-Sign SOW Scan (on-ramp A) */
.fde-flow-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:8px 14px;background:var(--p-surface-2);border:1px solid var(--p-border);border-radius:0.5rem}
.fde-flow-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:600}
.fde-step{display:inline-flex;align-items:center;gap:6px;color:var(--p-muted)}
.fde-step-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:999px;font-size:10px;font-weight:700;background:var(--p-border);color:var(--p-text)}
.fde-step-done{color:#059669}
.fde-step-done .fde-step-n{background:#059669;color:#fff}
.fde-step-active{color:var(--p-text)}
.fde-step-active .fde-step-n{background:var(--p-accent-2);color:#fff}
.fde-step-todo{color:var(--p-muted)}
.fde-step-arrow{color:var(--p-border);font-weight:700}
.fde-flow-cta{flex-shrink:0}
.da-age{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;line-height:1;
  padding:3px 9px;border-radius:999px;background:var(--p-surface-2);color:var(--p-muted);border:1px solid transparent}
.da-age .bi{font-size:11px}
.da-age-hot{background:rgba(220,38,38,.10);color:var(--p-danger,#dc2626)}

/* ── DA-CARD — the Delivery Alignment card on the admin + exec dashboards (a pointer into the
   Command Center; global theme, no inline CSS). */
.da-card .card-body{padding:16px 18px}
.da-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.da-card-title{font-size:15px;font-weight:700;color:var(--p-text);display:flex;align-items:center;gap:7px}
.da-card-title .bi{color:var(--p-accent-2)}
.da-card-sub{font-size:12px;color:var(--p-muted);margin-top:2px}
.da-card-kpis{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 4px;font-size:12px}
.da-card-kpi{color:var(--p-muted)} .da-card-kpi b{font-size:15px;margin-right:3px}
.da-card-kpi.da-k-bad b{color:var(--p-danger,#dc3545)}
.da-card-kpi.da-k-warn b{color:var(--p-warning,#fd7e14)}
.da-card-kpi.da-k-good b{color:var(--p-success,#198754)}
.da-card-kpi.da-k-muted b{color:var(--p-text)}
.da-card-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--p-border)}
.da-card-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--p-border)}
.da-card-row:last-child{border-bottom:0}
.da-card-name{font-weight:600;color:var(--p-text);text-decoration:none;font-size:13px}
.da-card-name:hover{color:var(--p-accent-2);text-decoration:underline}
.da-card-metric{font-size:11.5px;color:var(--p-muted)}
.da-card-why{flex-basis:100%;font-size:11.5px;color:var(--p-muted);opacity:.9}
.da-card-empty{padding:12px 0;color:var(--p-muted);font-size:12.5px}

/* ── PER-PROJECT WORKLOAD (Option-C mockup A, operator 2026-07-27): rounded PILL cells with gaps +
   avatar monograms + a top legend, replacing the edge-to-edge full-cell pastel fills that read as a
   "crumbled up" heatmap blob. The .pp-wl-{state} colour classes (in _shell.html) now sit on the inner
   pill, not the <td>, so cells separate cleanly. Global theme, no inline CSS. */
.pp-wl-table{border-collapse:separate;border-spacing:0}
.pp-wl-table thead th{border:0;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--p-muted);padding:8px 6px}
.pp-wl-table tbody td{border:0;border-top:1px solid var(--p-hair,#eef1f5);padding:6px}
.pp-wl-table tbody tr:first-child td{border-top:0}
.pp-wl-cell{text-align:center;background:transparent !important;--bs-table-bg:transparent}
.pp-wl-pill{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:66px;padding:7px 10px;border-radius:11px;line-height:1.15;font-weight:700;font-size:13px}
.pp-wl-pill .wl-sub{font-size:10px;font-weight:500;opacity:.82;margin-top:1px}
/* compact single-value pill for the denser org-workload grid (many columns) */
.pp-wl-pill-c{min-width:44px;padding:4px 9px;border-radius:9px;font-size:12px;font-weight:700;flex-direction:row}
.pp-wl-person{display:flex;align-items:center;gap:9px}
.pp-wl-ava{width:30px;height:30px;border-radius:50%;background:var(--p-accent-2-weak);color:var(--p-accent);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.pp-wl-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--p-muted);margin:4px 0 12px}
.pp-wl-legend .sw{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px}
.pp-wl-legend .sw-green{background:#d1e7dd}
.pp-wl-legend .sw-amber{background:#fff3cd}
.pp-wl-legend .sw-red{background:#f8d7da}

/* ── LEADERSHIP HERO (decided-design mockup D, operator 2026-07-27): a clean scannable hero at the
   very top — one featured gradient band (portfolio health + the SINGLE "Open command center" CTA),
   a 4-tile KPI row, then two panels (things-to-look-at | recovering & wins). "Hero on top, keep
   widgets below" — the detailed widgets stay in the zones underneath. Global theme, no inline CSS. */
.lead-hero{margin-bottom:22px}
.lead-featured{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--p-gradient);color:#fff;border-radius:var(--p-radius);
  padding:14px 20px;margin-bottom:14px;box-shadow:0 6px 20px rgba(0,71,251,.18)}
.lead-featured-ic{font-size:20px;opacity:.95}
.lead-featured-lead{font-weight:700;font-size:15px;letter-spacing:.01em}
.lead-featured-counts{display:flex;flex-wrap:wrap;gap:6px 20px;margin-right:auto;font-size:13px}
.lead-featured-c{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* the R/A/G counts are clickable deep-links into the command center, filtered to that colour
   (operator 2026-07-30). White on the gradient — beat the global link-colour rule. */
a.lead-featured-c{color:#fff !important;text-decoration:none;cursor:pointer}
a.lead-featured-c:hover{text-decoration:underline;text-underline-offset:3px}
.lead-featured-c b{font-size:17px;font-weight:800;line-height:1}
.lead-featured-c .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.lead-featured-c .dot-red{background:#ffd7dd}
.lead-featured-c .dot-amber{background:#ffe6ad}
.lead-featured-c .dot-green{background:#b9f0d6}
.lead-featured-c .dot-pending{background:rgba(255,255,255,.6)}
.lead-featured-cta{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--p-accent) !important;
  font-weight:700;font-size:13px;border-radius:999px;padding:8px 16px;text-decoration:none;white-space:nowrap}
.lead-featured-cta:hover{background:#eef2ff;color:var(--p-accent) !important}
.lead-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media (max-width:900px){.lead-kpis{grid-template-columns:repeat(2,1fr)}}
.lead-kpi{background:var(--p-surface);border:1px solid var(--p-border);border-left:3px solid var(--p-accent-2);
  border-radius:var(--p-radius-sm);padding:12px 16px;text-decoration:none;display:block}
.lead-kpi:hover{border-color:var(--p-accent-2)}
.lead-kpi-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--p-muted);
  display:flex;align-items:center;gap:5px}
.lead-kpi-n{font-size:20px;font-weight:800;line-height:1.05;margin-top:6px;color:var(--p-text)}/* ASK-FONTS 2026-08-17: was 26px */
.lead-kpi-sub{font-size:11px;color:var(--p-muted);margin-top:3px}
.lead-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.lead-panels{grid-template-columns:1fr}}

/* ── DA-CARD → RIBBON (operator 2026-07-10): a compact one-line band (counts per category → the
   command center), scalable to any portfolio size. Mirrors the Review-Requests ribbon; global theme. */
.da-ribbon-link{text-decoration:none;display:block}
.da-ribbon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 14px;
  background:var(--p-accent-2-weak,#eef4ff);border:1px solid var(--p-accent-line,#c7d7f5);
  border-radius:var(--p-radius-sm);font-size:12.5px;color:var(--p-text)}
.da-ribbon:hover{border-color:var(--p-accent-2)}
.da-ribbon-ic{font-size:16px;color:var(--p-accent-2)}
.da-ribbon-lead{font-weight:700;color:var(--p-text)}
.da-ribbon-counts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-right:auto}
.da-rc{color:var(--p-muted)} .da-rc b{font-size:14px;margin-right:3px;color:var(--p-text)}
.da-rc.da-rc-bad b{color:var(--p-danger,#dc3545)}
.da-rc.da-rc-warn b{color:var(--p-warning,#fd7e14)}
.da-rc.da-rc-good b{color:var(--p-success,#198754)}
.da-rc.da-rc-muted b{color:var(--p-text)}
.da-ribbon-btn{pointer-events:none}

/* ── VPE-GAP-7 — EM Weekly Compliance Review (SOP §27; admin/exec). Exceptions expanded, clean weeks fold. */
.em-page{max-width:1000px;margin:0 auto;font-size:14px;color:var(--p-text)}
.em-explain{background:linear-gradient(180deg,var(--p-accent-2-weak),var(--p-surface));
  border:1px solid var(--p-border);border-left:4px solid var(--p-accent-2);
  border-radius:var(--p-radius);padding:18px 22px;margin-bottom:16px;box-shadow:var(--p-shadow)}
.em-explain-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.em-explain-title{font-size:18px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px}
.em-explain-title .bi{color:var(--p-accent-2)}
.em-explain-kb{flex:0 0 auto;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--p-accent-2);
  border:1px solid var(--p-accent-line);background:var(--p-surface);padding:5px 12px;border-radius:999px}
.em-explain-kb:hover{background:var(--p-accent-2-weak)}
.em-explain-lead{font-size:14px;line-height:1.55;margin:10px 0 0;max-width:860px}
.em-explain-scope{font-size:12.5px;line-height:1.5;margin:10px 0 0;max-width:860px;color:var(--p-muted);
  border-left:3px solid var(--p-accent-line);padding-left:10px}
.em-explain-scope .bi{color:var(--p-accent-2)}
.em-kpis{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.em-kpi{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius-sm);
  padding:10px 16px;text-align:center;min-width:96px}
.em-kpi-n{font-size:22px;font-weight:700;line-height:1}
.em-kpi-l{font-size:11px;color:var(--p-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.03em}
.em-kpi-bad .em-kpi-n{color:var(--p-danger)}
.em-kpi-warn .em-kpi-n{color:var(--p-warning-dark,#b45309)}
.em-kpi-good .em-kpi-n{color:var(--p-success)}
.em-kpi-week{margin-left:auto;font-size:12.5px;color:var(--p-muted)}
.em-list{display:flex;flex-direction:column;gap:12px}
.em-row{background:var(--p-surface);border:1px solid var(--p-border);border-left:4px solid var(--p-border);
  border-radius:var(--p-radius-sm);padding:14px 16px}
.em-row-noncompliant{border-left-color:var(--p-danger)}
.em-row-partial{border-left-color:var(--p-warning)}
.em-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.em-pm{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.em-pm-name{font-size:15px;font-weight:700}
.em-auto{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:2px 8px;border-radius:999px}
.em-auto-noncompliant{color:#fff;background:var(--p-danger)}
.em-auto-partial{color:#5a4200;background:var(--p-warning)}
.em-auto-compliant{color:#fff;background:var(--p-success)}
.em-done{font-size:11.5px;font-weight:600;color:var(--p-success);display:inline-flex;align-items:center;gap:3px}
.em-facts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--p-muted)}
.em-chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.em-chip-red{color:#fff;background:var(--p-danger)}
.em-chip-warn{color:#5a4200;background:var(--p-warning)}
.em-chip-bad{color:#fff;background:#7a1420}
.em-verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--p-border)}
.em-verdict-lbl{font-size:12.5px;font-weight:600;color:var(--p-muted)}
.em-pick{display:inline-flex;gap:0;border:1px solid var(--p-border);border-radius:999px;overflow:hidden}
.em-vbtn{border:0;background:var(--p-surface);color:var(--p-muted);font-size:12.5px;font-weight:600;
  padding:5px 13px;cursor:pointer;border-right:1px solid var(--p-border)}
.em-vbtn:last-child{border-right:0}
.em-vbtn.sel.em-vbtn-good{background:var(--p-success);color:#fff}
.em-vbtn.sel.em-vbtn-warn{background:var(--p-warning);color:#5a4200}
.em-vbtn.sel.em-vbtn-bad{background:var(--p-danger);color:#fff}
.em-note{flex:1 1 200px;min-width:160px;font-size:13px;padding:5px 10px;border:1px solid var(--p-border);
  border-radius:var(--p-radius-sm);background:var(--p-surface);color:var(--p-text)}
.em-caught{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius-sm);
  padding:16px 18px;color:var(--p-success);font-weight:600;display:flex;align-items:center;gap:8px}
.em-compliant{margin-top:16px;background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius-sm)}
.em-compliant>summary{cursor:pointer;padding:12px 16px;font-size:13px;font-weight:600;color:var(--p-muted);list-style:none}
.em-compliant>summary::-webkit-details-marker{display:none}
.em-compliant>summary::before{content:"\F285";font-family:"bootstrap-icons";margin-right:8px;font-size:12px;transition:transform .15s}
.em-compliant[open]>summary::before{transform:rotate(90deg)}
.em-compliant-list{margin:0;padding:0 18px 14px 40px;list-style:none;display:flex;flex-direction:column;gap:6px}
.em-compliant-list li{font-size:13px}
.em-compliant-list .em-pm-name{font-size:13.5px}

/* ── DA-LEDGER — the traceability CHAIN inside a requirement row (folded internal alignment ledger):
   SOW clause → task(s) → code proof → QA → status. Global theme, no inline CSS. */
.req-chain{display:flex;flex-direction:column;gap:0;margin:8px 0 10px;padding:10px 12px;
  background:var(--p-surface-2);border:1px solid var(--p-border);border-radius:var(--p-radius-sm,6px)}
.req-chain-step{display:flex;align-items:flex-start;gap:9px;padding:5px 0;position:relative}
.req-chain-step:not(:last-child)::after{content:"";position:absolute;left:9px;top:24px;bottom:-5px;
  width:2px;background:var(--p-border)}
.req-chain-n{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;font-size:11px;font-weight:700;background:var(--p-surface-3,#e9ecef);color:var(--p-muted);z-index:1}
.req-chain-n.req-chain-ok{background:var(--p-success,#198754);color:#fff}
.req-chain-n.req-chain-no{background:var(--p-warning,#fd7e14);color:#fff}
.req-chain-n.req-chain-na{background:var(--p-surface-3,#e9ecef);color:var(--p-muted)}
.req-chain-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--p-muted)}
.req-chain-val{font-size:12.5px;color:var(--p-text);line-height:1.45}
.req-chain-val.req-chain-muted{color:var(--p-muted);font-style:italic}
.req-chain-src{color:var(--p-muted);font-size:11px}


/* ---- BRAND-REBRAND (2026-07-24): sign-in flow (login / verify / no-access) ----
   Single-source dark indigo hero (Option C). The three login-flow pages use the
   .login-* / .no-access-* classes and inherit this — no per-page <style> block,
   no drift. Rendered with base.html chrome suppressed (show_menu_links=False). */
.login-wrapper,.no-access-wrapper{min-height:86vh;display:flex;align-items:center;justify-content:center;padding:44px 16px;
  background:radial-gradient(1200px 520px at 82% -14%,rgba(0,90,255,.42),transparent 56%),
    radial-gradient(900px 480px at 4% 114%,rgba(0,174,239,.28),transparent 56%),
    linear-gradient(160deg,#160b45,#080522 72%);}
.login-card{background:rgba(24,15,60,.60);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);border-radius:18px;box-shadow:0 34px 80px rgba(0,0,0,.55);
  padding:36px 32px 28px;width:100%;max-width:400px;text-align:center;color:#eef2fb;}
.login-brand{display:flex;align-items:center;justify-content:center;gap:11px;font-size:26px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.5px;}
.login-brand .p-mk{width:40px;height:40px;border-radius:12px;background:linear-gradient(120deg,#0047FB,#00AEEF);display:inline-grid;place-items:center;color:#fff;font-size:22px;font-weight:800;box-shadow:0 6px 18px rgba(0,71,251,.5);}
.login-brand i{font-size:26px;color:#7fb2ff;}
.login-tagline{font-size:13px;color:#b3aae0;margin-bottom:28px;}
.login-heading{font-size:19px;font-weight:700;color:#fff;margin-bottom:6px;}
.login-subheading{font-size:13px;color:#b3aae0;margin-bottom:22px;}
.login-card .form-label{font-weight:600;font-size:12.5px;text-align:left;display:block;color:#b3aae0;margin-bottom:6px;}
.login-card .form-control{font-size:15px;border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;}
.login-card .form-control::placeholder{color:#8a83b8;}
.login-card .form-control:focus{background:rgba(255,255,255,.09);border-color:rgba(90,139,255,.7);box-shadow:0 0 0 .2rem rgba(0,71,251,.25);color:#fff;}
.login-card .btn-primary{font-size:16px;border-radius:10px;padding:12px 0;font-weight:700;background:linear-gradient(120deg,#0047FB,#00AEEF)!important;border:none!important;color:#fff!important;box-shadow:0 8px 20px -8px rgba(0,71,251,.6);transition:filter .2s;}
.login-card .btn-primary:hover{filter:brightness(1.06);}
.login-card .alert{font-size:13px;text-align:left;}
.login-footer{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;color:#8078b0;line-height:1.5;}
.login-footer strong{color:#b3aae0;}
.login-footer a{color:#8ab4ff;}
.or-divider{display:flex;align-items:center;gap:12px;color:#8078b0;font-size:12px;margin:4px 0 18px;}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14);}
.no-access-card{background:rgba(24,15,60,.60);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:18px;box-shadow:0 34px 80px rgba(0,0,0,.55);padding:40px 36px;width:100%;max-width:480px;text-align:center;color:#eef2fb;}
.no-access-icon{width:64px;height:64px;margin:0 auto 16px;background:rgba(255,196,0,.14);color:#ffcf5a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;}
.no-access-card h1{font-size:22px;font-weight:800;color:#fff;margin:0 0 12px;}
.no-access-card p{font-size:14px;line-height:1.5;color:#b3aae0;margin:8px 0;}
.no-access-card .meta{margin-top:18px;font-size:12px;color:#8078b0;}
.no-access-card a.btn{font-size:14px;font-weight:700;border-radius:10px;padding:11px 20px;margin-top:22px;background:linear-gradient(120deg,#0047FB,#00AEEF);color:#fff;text-decoration:none;display:inline-block;box-shadow:0 8px 20px -8px rgba(0,71,251,.6);transition:filter .2s;}
.no-access-card a.btn:hover{filter:brightness(1.06);}
.no-access-card .support{font-size:13px;margin-top:14px;color:#b3aae0;}
.no-access-card .support a{color:#8ab4ff;text-decoration:none;}
.no-access-card .support a:hover{text-decoration:underline;}

/* ── VPE-GAP-13 — governance coverage card (leadership dashboards). The fill width is bound via the
   --gov-pct custom property (a DATA value, the compliant no-inline-CSS pattern; the width RULE lives
   here). Blue→cyan brand gradient fill = the road to retiring Asana. */
.gov-card{border:1px solid var(--p-border);border-left:3px solid var(--p-accent-2);border-radius:10px;
  background:var(--p-surface);padding:14px 16px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.gov-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gov-ic{color:var(--p-accent-2)}
.gov-title{font-size:15px;font-weight:700;color:var(--p-text)}
.gov-sub{font-size:12px;color:var(--p-muted)}
.gov-fraction{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:10px 0 8px;font-size:13px;color:var(--p-text)}
.gov-n{font-size:22px;font-weight:800;line-height:1;color:var(--p-accent-2)}
.gov-of{color:var(--p-muted)}
.gov-m{font-size:16px;font-weight:700}
.gov-word{color:var(--p-muted)}
.gov-pctnum{margin-left:auto;font-size:15px;font-weight:800;color:var(--p-text)}
.gov-track{height:12px;border-radius:6px;background:var(--p-surface-2,#f0f2f5);overflow:hidden}
.gov-fill{display:block;height:100%;width:var(--gov-pct,0);border-radius:6px;
  background:linear-gradient(120deg,var(--p-accent,#0047FB),var(--p-cyan,#00AEEF));transition:width .3s ease}
.gov-foot{margin-top:8px;font-size:12px}
.gov-remaining{color:var(--p-muted)}
.gov-done{color:var(--p-success,#198754);font-weight:600}
.gov-done .bi{margin-right:3px}

/* ── VPE-GAP-6 — official-status (SOP §17) portfolio rollup ribbon (leadership dashboards). Mirrors
   .da-ribbon; the counts carry stoplight semantics (Red/Amber/Green/pending). NO inline CSS. */
.ofr-link{text-decoration:none;display:block}
.ofr-ribbon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 14px;
  background:var(--p-surface-2,#f0f2f5);border:1px solid var(--p-border);
  border-radius:var(--p-radius-sm);font-size:12.5px;color:var(--p-text)}
.ofr-ribbon:hover{border-color:var(--p-accent-2)}
.ofr-ic{font-size:16px;color:var(--p-accent-2)}
.ofr-lead{font-weight:700;color:var(--p-text)}
.ofr-counts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-right:auto}
.ofr-c{color:var(--p-muted)} .ofr-c b{font-size:14px;margin-right:3px;color:var(--p-text)}
.ofr-c-red b{color:var(--p-danger,#dc3545)}
.ofr-c-amber b{color:var(--p-warning,#fd7e14)}
.ofr-c-green b{color:var(--p-success,#198754)}
.ofr-c-pending b{color:var(--p-muted,#64748b)}
.ofr-btn{pointer-events:none}

/* ── VPE-GAP-3 — Needs-decision card (exec-rung ladder climbers) on leadership dashboards. NO inline CSS. */
.nd-link{text-decoration:none;display:block}
.nd-card{border:1px solid var(--p-border);border-left:3px solid var(--p-danger,#dc3545);border-radius:10px;
  background:var(--p-surface);padding:12px 16px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.nd-card:hover{border-color:var(--p-danger,#dc3545)}
.nd-head{display:flex;align-items:center;gap:8px}
.nd-ic{color:var(--p-danger,#dc3545)}
.nd-title{font-size:15px;font-weight:700;color:var(--p-text)}
.nd-count{margin-left:auto;font-size:12px;font-weight:800;color:#fff;background:var(--p-danger,#dc3545);
  border-radius:999px;padding:1px 9px;min-width:22px;text-align:center}
.nd-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.nd-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px}
.nd-name{font-weight:600;color:var(--p-text)}
.nd-owner{color:var(--p-muted)}
.nd-age{margin-left:auto;font-size:11px;font-weight:700;color:var(--p-danger,#dc3545);
  background:rgba(220,38,38,.10);border-radius:999px;padding:1px 8px}

/* ── VPE-C3 — Wins tile (recognition) on leadership dashboards. Green, celebratory but calm. NO inline CSS. */
.wins-tile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;
  background:var(--p-success-weak,#e8f6ee);border:1px solid var(--p-success,#198754);
  border-radius:var(--p-radius-sm);font-size:12.5px;color:var(--p-text)}
.wins-emoji{font-size:16px}
.wins-lead{font-weight:700;color:var(--p-success-dark,#0f5132)}
.wins-body{display:flex;flex-wrap:wrap;gap:6px 10px;color:var(--p-muted)}
.wins-item b{color:var(--p-success,#198754);margin-right:3px}
.wins-dot{color:var(--p-muted)}