/* ═════════════════════════════════════════════
   RMPAC ONE — User Panel styles.
   Uses tokens from ../style.css (same --red, --black, --font, etc.)
   so the panel reads as part of the AI site. Layout is sidebar +
   main content (60-40 split style admin shells).
   ═════════════════════════════════════════════ */

body.user-page {
    background: var(--black);
    color: var(--off-white);
    min-height: 100vh;
}
html.light body.user-page {
    background: #f5f5f7;
    color: #1a1a1a;
}

/* ── Auth gate ── */
.up-gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 10;
}
.up-gate-card {
    max-width: 440px;
    width: 100%;
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
}
html.light .up-gate-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
.up-gate-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
    margin-bottom: 12px;
}
.up-gate-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: var(--white);
}
html.light .up-gate-title { color: #0a0a0a; }
.up-gate-msg {
    font-size: 14px;
    color: var(--gray-light);
    margin-bottom: 24px;
    line-height: 1.5;
}
html.light .up-gate-msg { color: var(--gray-mid); }

/* ── Shell layout ── */
.up-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar main";
    min-height: 100vh;
}

/* Top bar */
.up-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--off-black);
    border-bottom: 1px solid var(--border);
}
html.light .up-topbar {
    background: #ffffff;
    border-bottom-color: rgba(0,0,0,0.08);
}
.up-topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.up-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-light);
    transition: background 0.18s, color 0.18s;
}
.up-back-link:hover {
    background: rgba(255,255,255,0.06);
    color: var(--white);
}
html.light .up-back-link { color: var(--gray-mid); }
html.light .up-back-link:hover {
    background: rgba(0,0,0,0.05);
    color: #0a0a0a;
}
/* Brand block — uses the same dual-image setup as the main rmpac.ai
   nav so the user panel header reads identical: oversized R icon
   followed by the "RMPAC ONE" letters PNG, with light/dark variants
   swapped by theme. Heights and offsets mirror .nav-logo-* in
   ../style.css exactly. */
.up-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--white);
}
html.light .up-brand { color: var(--black); }
.up-brand-logo {
    height: 48px;
    width: auto;
    flex-shrink: 0;
    display: block;
    position: relative;
    z-index: 101;
}
/* Two real assets, swapped by theme, mirroring .nav-logo-img in ../style.css. */
.up-brand-logo--light { display: none; }
html.light .up-brand-logo--dark { display: none; }
html.light .up-brand-logo--light { display: block; }
.up-brand-letters {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
    margin-left: 10px;
}
.up-brand-letters--light { display: none; }
html.light .up-brand-letters--dark { display: none; }
html.light .up-brand-letters--light { display: block; }

.up-topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.up-theme-toggle {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    color: var(--gray-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s, transform 0.18s;
}
.up-theme-toggle:hover {
    color: var(--white);
    transform: scale(1.1);
}
html.light .up-theme-toggle { color: var(--gray-mid); }
html.light .up-theme-toggle:hover { color: #0a0a0a; }
.up-theme-toggle svg { width: 16px; height: 16px; }
.up-theme-toggle .icon-sun { display: none; }
html.light .up-theme-toggle .icon-moon { display: none; }
html.light .up-theme-toggle .icon-sun { display: block; }

.up-tier-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--red);
    padding: 5px 11px;
    background: rgba(196, 23, 23, 0.12);
    border: 1px solid rgba(196, 23, 23, 0.4);
    border-radius: 100px;
}
.up-signout {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--off-white);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.up-signout:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.26);
}
html.light .up-signout {
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.14);
}
html.light .up-signout:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.26);
}

/* Sidebar */
.up-sidebar {
    grid-area: sidebar;
    background: var(--off-black);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    overflow-y: auto;
}
html.light .up-sidebar {
    background: #ffffff;
    border-right-color: rgba(0,0,0,0.08);
}
.up-sidebar-section { margin-bottom: 24px; }
.up-sidebar-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    /* Every group header is red (2026-09-14, Landon): the accent used to be on
       Preconstruction Intelligence alone, which read as though that group were
       special rather than as a consistent divider. The --accent modifier is
       gone with it; red IS the default now. */
    color: var(--red);
    padding: 0 12px 8px;
}
.up-nav { list-style: none; }
.up-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--off-white);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.up-nav-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.up-nav-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--white);
}
.up-nav-btn.is-active {
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
}
html.light .up-nav-btn { color: #1a1a1a; }
html.light .up-nav-btn:hover {
    background: rgba(0,0,0,0.04);
    color: #0a0a0a;
}
html.light .up-nav-btn.is-active {
    background: rgba(196, 23, 23, 0.1);
    color: var(--red);
}
.up-nav-btn span:first-of-type { flex: 1; }
.up-nav-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-mid);
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex: 0 0 auto;
}
html.light .up-nav-tag {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Coming-soon tools placeholder — same shape as the active launcher
   but the icon and CTA are dimmed and a status badge replaces the
   Launch button. */
.up-tools-launcher--soon .up-tools-launcher-icon {
    background: rgba(255, 255, 255, 0.04);
    color: var(--gray-light);
}
html.light .up-tools-launcher--soon .up-tools-launcher-icon {
    background: rgba(0, 0, 0, 0.04);
    color: var(--gray-mid);
}
.up-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 16px;
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-light);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html.light .up-soon-badge {
    color: var(--gray-mid);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}
/* Roadmap capability chips — the tools associated with a coming-soon phase. */
.up-soon-list {
    list-style: none;
    margin: 16px auto 6px;
    padding: 0;
    max-width: 480px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.up-soon-list li {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-light);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 6px 13px;
}
html.light .up-soon-list li {
    color: var(--gray-mid);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Roadmap modules — what a coming-soon phase actually contains. Replaces the
   flat chip list: a phase is a set of capabilities, and "Daily reports" as a
   bare chip tells a customer nothing about whether it does what they need. */
.up-modules { margin: 20px 0 6px; text-align: left; }
.up-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 10px;
}
.up-mod {
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.up-mod-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.up-mod-name { font-size: 13.5px; font-weight: 700; color: var(--white, #fff); }
.up-mod-desc { font-size: 12.5px; line-height: 1.55; color: var(--gray-light); }
.up-mod-note {
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--gray-light);
    background: rgba(255, 122, 69, 0.06);
    border: 1px solid rgba(255, 122, 69, 0.18);
}
.up-mod-note strong { color: #ff7a45; }
html.light .up-mod { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.08); }
html.light .up-mod-name { color: var(--black, #111); }
html.light .up-mod-desc, html.light .up-mod-note { color: var(--gray-mid); }
html.light .up-mod-note { background: rgba(194, 65, 12, 0.05); border-color: rgba(194, 65, 12, 0.16); }
html.light .up-mod-note strong { color: #c2410c; }
@media (max-width: 620px) { .up-mod-grid { grid-template-columns: 1fr; } }

/* Main area */
.up-main {
    grid-area: main;
    padding: 32px 40px 60px;
    overflow-y: auto;
}
.up-pane { display: none; }
.up-pane.is-active { display: block; }

.up-pane-header { margin-bottom: 32px; max-width: 720px; }
.up-pane-header--compact { margin-bottom: 16px; }
.up-pane--tool { display: none; flex-direction: column; height: calc(100vh - 64px - 64px); }
.up-pane--tool.is-active { display: flex; }
.up-tool-frame-wrap {
    flex: 1;
    min-height: 600px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--off-black);
}
html.light .up-tool-frame-wrap {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}
.up-tool-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.up-pane-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
    margin-bottom: 10px;
}
.up-pane-header h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 12px;
    color: var(--white);
}
html.light .up-pane-header h1 { color: #0a0a0a; }
.up-pane-sub-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--gray-light);
    margin-left: 6px;
    letter-spacing: -0.01em;
}
html.light .up-pane-sub-title { color: var(--gray-mid); }
.up-pane-header p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-light);
}
html.light .up-pane-header p { color: #44474d; }

/* Welcome cards */
/* ── The welcome page ────────────────────────────────────────────────────
   The landing since 2026-09-14, in place of the Executive Command Center.
   Deliberately quiet: generous space, one clear sentence at a time, and no
   number on screen that needs interpreting before you can get started. Every
   surface here carries its light-theme pair, the way the rest of this panel
   does. */
.up-hello { max-width: 740px; margin-bottom: 40px; }
.up-hello-title {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 6px 0 16px;
    color: var(--white);
}
html.light .up-hello-title { color: #0a0a0a; }
.up-hello-sub {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-light);
}
html.light .up-hello-sub { color: var(--gray-mid); }
.up-hello-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.up-hello-cta {
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}
.up-hello-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.up-hello-ghost {
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.up-hello-ghost:hover { border-color: rgba(196, 23, 23, 0.55); color: var(--red); }
html.light .up-hello-ghost { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.14); }

/* Section marker. A label, not a heading: it separates without shouting. */
.up-hello-sec { margin: 0 0 14px; }
.up-hello-sec-k {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-mid);
}

/* The map of the rest of the panel: what the sidebar means, in one line each,
   so a long nav list reads as a map rather than as clutter. */
.up-hello-map {
    margin: 0 0 32px;
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
html.light .up-hello-map { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); }
.up-hello-map-row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
}
.up-hello-map-row:last-child { border-bottom: 0; }
html.light .up-hello-map-row { border-bottom-color: rgba(0, 0, 0, 0.07); }
.up-hello-map-k { font-size: 13.5px; font-weight: 700; color: var(--white); }
html.light .up-hello-map-k { color: #0a0a0a; }
.up-hello-map-v { font-size: 13.5px; line-height: 1.6; color: var(--gray-light); }
html.light .up-hello-map-v { color: var(--gray-mid); }
.up-hello-foot {
    max-width: 680px;
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--gray-mid);
}

/* One column once the two-column map would squeeze either side. */
@media (max-width: 720px) {
    .up-hello-title { font-size: 30px; }
    .up-hello-map-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── Ask RMPAC ONE ───────────────────────────────────────────────────────
   The defining component of the welcome page, so it is the one surface here
   allowed a little presence: a red-edged panel with a soft glow in the corner.
   Everything inside stays quiet. Answers are rows you can open, not a wall of
   prose, because every one of them came from a record. */
.up-ask {
    position: relative;
    margin: 0 0 40px;
    padding: 26px 28px 22px;
    border-radius: 18px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(196, 23, 23, 0.16), transparent 55%), var(--off-black);
    border: 1px solid rgba(196, 23, 23, 0.35);
    box-shadow: 0 24px 60px -36px rgba(196, 23, 23, 0.55);
}
html.light .up-ask {
    background: radial-gradient(120% 140% at 0% 0%, rgba(196, 23, 23, 0.08), transparent 55%), #ffffff;
    border-color: rgba(196, 23, 23, 0.25);
    box-shadow: 0 24px 60px -40px rgba(196, 23, 23, 0.35);
}
.up-ask-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.up-ask-mark {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--red); color: #fff;
}
.up-ask-mark svg { width: 22px; height: 22px; }
.up-ask-kicker {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.up-ask-title { margin: 2px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--white); }
html.light .up-ask-title { color: #0a0a0a; }

.up-ask-form { display: flex; gap: 10px; align-items: stretch; }
.up-ask-input {
    flex: 1; min-width: 0; min-height: 56px; max-height: 180px; resize: vertical;
    padding: 14px 16px;
    font: inherit; font-size: 15px; line-height: 1.5; color: var(--white);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border); border-radius: 12px; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.up-ask-input:focus { border-color: rgba(196, 23, 23, 0.7); box-shadow: 0 0 0 3px rgba(196, 23, 23, 0.18); }
html.light .up-ask-input { color: #0a0a0a; background: #fafafa; border-color: rgba(0, 0, 0, 0.12); }
.up-ask-go {
    flex-shrink: 0; padding: 0 22px;
    font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
    color: #fff; background: var(--red); border: 1px solid var(--red); border-radius: 12px;
    cursor: pointer; transition: filter 0.15s, transform 0.15s;
}
.up-ask-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.up-ask-go:disabled { opacity: 0.6; cursor: progress; transform: none; }

.up-ask-suggest, .up-ask-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.up-ask-suggest-k, .up-ask-alt > span {
    margin-right: 2px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-mid);
}
.up-ask-chip {
    padding: 7px 12px;
    font: inherit; font-size: 12.5px; color: var(--gray-light);
    background: transparent; border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.up-ask-chip:hover { color: var(--white); border-color: rgba(196, 23, 23, 0.55); background: rgba(196, 23, 23, 0.08); }
html.light .up-ask-chip { color: #333333; border-color: rgba(0, 0, 0, 0.12); }
html.light .up-ask-chip:hover { color: var(--red); }

/* Answers, newest first. Older ones fade back but stay readable. */
.up-ask-out { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.up-ask-out:empty { display: none; }
.up-ask-a {
    padding: 16px 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
    animation: upAskIn 0.28s ease-out both;
}
html.light .up-ask-a { background: #fafafa; border-color: rgba(0, 0, 0, 0.08); }
.up-ask-a.is-older { opacity: 0.72; }
.up-ask-a.is-refused { border-style: dashed; }
@keyframes upAskIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .up-ask-a { animation: none; } }
.up-ask-q { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--white); }
html.light .up-ask-q { color: #0a0a0a; }
.up-ask-q-k {
    margin-right: 10px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.up-ask-think { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-light); }
.up-ask-text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray-light); }
html.light .up-ask-text { color: #2c2c30; }

.up-ask-items { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.up-ask-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l go" "d go";
    align-items: center; column-gap: 12px;
    width: 100%; padding: 10px 12px; text-align: left;
    font: inherit; color: inherit; background: transparent;
    border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.up-ask-item:hover { background: rgba(196, 23, 23, 0.06); border-color: rgba(196, 23, 23, 0.45); }
html.light .up-ask-item { border-color: rgba(0, 0, 0, 0.09); }
/* After the light rule, so its border colour cannot repaint the left edge. */
.up-ask-item.is-bad, html.light .up-ask-item.is-bad { border-left-color: var(--red); }
.up-ask-item.is-warn, html.light .up-ask-item.is-warn { border-left-color: #d98a0b; }
.up-ask-item-l { grid-area: l; font-size: 13.5px; font-weight: 700; color: var(--white); }
html.light .up-ask-item-l { color: #0a0a0a; }
.up-ask-item-d { grid-area: d; margin-top: 2px; font-size: 12.5px; color: var(--gray-light); overflow-wrap: anywhere; }
html.light .up-ask-item-d { color: var(--gray-mid); }
.up-ask-item-go { grid-area: go; font-size: 16px; color: var(--gray-mid); }
.up-ask-item:hover .up-ask-item-go { color: var(--red); }

.up-ask-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.up-ask-act {
    padding: 8px 14px;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--white);
    background: transparent; border: 1px solid rgba(196, 23, 23, 0.5); border-radius: 9px;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.up-ask-act:hover { color: #fff; background: var(--red); border-color: var(--red); }
html.light .up-ask-act { color: var(--red); }
html.light .up-ask-act:hover { color: #fff; }
.up-ask-via { margin-left: auto; font-size: 11.5px; color: var(--gray-mid); }
.up-ask-tag {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--gray-mid);
}
html.light .up-ask-tag { border-top-color: rgba(0, 0, 0, 0.07); }
.up-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 620px) {
    .up-ask { padding: 20px 18px 18px; }
    .up-ask-form { flex-direction: column; }
    .up-ask-go { padding: 12px 22px; }
}

/* ── Quick start: what do you want to do? ───────────────────────────────── */
.up-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
@media (max-width: 1180px) { .up-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .up-quick { grid-template-columns: minmax(0, 1fr); } }
.up-quick-btn {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px; text-align: left;
    font: inherit; color: var(--white);
    background: var(--off-black); border: 1px solid var(--border); border-radius: 14px;
    cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.up-quick-btn:hover { transform: translateY(-2px); border-color: rgba(196, 23, 23, 0.5); }
/* A painted button names its own text colour rather than inheriting one. */
html.light .up-quick-btn { color: #0a0a0a; background: #ffffff; border-color: rgba(0, 0, 0, 0.08); }
.up-quick-ico {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(196, 23, 23, 0.12); color: var(--red);
}
.up-quick-ico svg { width: 18px; height: 18px; }
.up-quick-btn.is-primary .up-quick-ico { background: var(--red); color: #fff; }
.up-quick-t { display: block; font-size: 14.5px; font-weight: 700; color: var(--white); }
html.light .up-quick-t { color: #0a0a0a; }
.up-quick-d { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--gray-light); }
html.light .up-quick-d { color: var(--gray-mid); }

/* The plan beside its usage. For staff applyTier() hides the card and the
   strip takes the whole row. */
.up-plan-row { display: flex; align-items: stretch; gap: 16px; margin-bottom: 40px; }
.up-plan-row .up-welcome-strip { flex: 1; margin-bottom: 0; }
.up-plan-card { flex: 0 0 300px; padding: 20px 22px; }
@media (max-width: 900px) {
    .up-plan-row { flex-direction: column; }
    .up-plan-card { flex-basis: auto; }
}

/* Four cards, in explicit columns rather than auto-fit. auto-fit resolved to
   three at the panel's width and left the fourth card orphaned on its own row
   beside a large gap; the counts below always divide four evenly. */
.up-welcome-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
@media (max-width: 1180px) {
    .up-welcome-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .up-welcome-cards { grid-template-columns: minmax(0, 1fr); }
}
.up-welcome-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 22px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s;
}
.up-welcome-card:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 23, 23, 0.5);
}
html.light .up-welcome-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
.up-welcome-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
    margin-bottom: 12px;
}
.up-welcome-card-icon svg { width: 20px; height: 20px; }
.up-welcome-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}
html.light .up-welcome-card-title { color: #0a0a0a; }
.up-welcome-card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-light);
}
html.light .up-welcome-card-desc { color: var(--gray-mid); }
.up-welcome-card-cta {
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}

/* Welcome strip. The margin matters now: the strip used to be the last thing
   on the page, so the section label that follows it sat flush against its
   bottom border. */
.up-welcome-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
}
html.light .up-welcome-strip {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
.up-welcome-strip-stat {
    padding: 22px 24px;
    border-right: 1px solid var(--border);
}
.up-welcome-strip-stat:last-child { border-right: 0; }
html.light .up-welcome-strip-stat { border-right-color: rgba(0,0,0,0.08); }
.up-welcome-strip-num {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--red);
    line-height: 1;
    margin-bottom: 6px;
}
.up-welcome-strip-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-mid);
}

/* Tools launcher */
.up-tools-launcher {
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    max-width: 640px;
}
html.light .up-tools-launcher {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
.up-tools-launcher-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
}
.up-tools-launcher-icon svg { width: 42px; height: 42px; }
.up-tools-launcher h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
    color: var(--white);
}
html.light .up-tools-launcher h2 { color: #0a0a0a; }
.up-tools-launcher p {
    font-size: 14px;
    color: var(--gray-light);
    margin-bottom: 24px;
}
html.light .up-tools-launcher p { color: var(--gray-mid); }
.up-tools-launcher-note {
    margin-top: 20px;
    padding: 14px 18px;
    background: rgba(196, 23, 23, 0.08);
    border: 1px solid rgba(196, 23, 23, 0.3);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--off-white);
    text-align: left;
}
html.light .up-tools-launcher-note { color: #1a1a1a; }
.up-tools-launcher-note strong { color: var(--red); display: block; margin-bottom: 4px; }
.up-tools-launcher-note a { color: var(--red); font-weight: 600; margin-left: 4px; }

/* Card / form */
.up-card {
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 16px;
    max-width: 720px;
}
html.light .up-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
.up-card-head { margin-bottom: 20px; }
.up-card-head h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 6px;
}
html.light .up-card-head h2 { color: #0a0a0a; }
.up-card-head p {
    font-size: 13px;
    color: var(--gray-light);
}
html.light .up-card-head p { color: var(--gray-mid); }
.up-card-head strong {
    color: var(--off-white);
    font-weight: 600;
}
html.light .up-card-head strong { color: #1a1a1a; }

.up-form { display: flex; flex-direction: column; gap: 14px; }
.up-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.up-field { display: flex; flex-direction: column; gap: 6px; }
.up-field label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-mid);
}
.up-field input,
.up-field select {
    background: var(--black);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--off-white);
    padding: 11px 13px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
html.light .up-field input,
html.light .up-field select {
    background: #ffffff;
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.12);
}
.up-field input:focus,
.up-field select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(196, 23, 23, 0.15);
}
.up-form-hint {
    font-size: 12px;
    color: var(--gray-light);
    line-height: 1.5;
}
html.light .up-form-hint { color: var(--gray-mid); }
.up-card-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
html.light .up-card-foot { border-top-color: rgba(0,0,0,0.08); }
.up-form-status {
    flex: 1;
    font-size: 13px;
    color: var(--gray-light);
}
html.light .up-form-status { color: var(--gray-mid); }
.up-form-status.is-success { color: #2f7a3d; }
.up-form-status.is-error { color: var(--red); }

/* Buttons */
.up-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.up-btn--primary {
    background: var(--red);
    color: #fff;
}
.up-btn--primary:hover:not(:disabled) {
    background: var(--red-dark);
    transform: translateY(-1px);
}
.up-btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.up-btn--secondary {
    background: rgba(255,255,255,0.06);
    color: var(--off-white);
    border: 1px solid rgba(255,255,255,0.12);
}
.up-btn--secondary:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
}
html.light .up-btn--secondary {
    color: #1a1a1a;
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
}
html.light .up-btn--secondary:hover {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.22);
}
.up-btn--ghost {
    background: transparent;
    color: var(--gray-light);
}
.up-btn--ghost:hover {
    background: rgba(255,255,255,0.04);
    color: var(--off-white);
}

/* Responsive */
@media (max-width: 880px) {
    .up-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "sidebar"
            "main";
    }
    .up-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 16px;
    }
    .up-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .up-nav-btn { width: auto; }
    .up-main { padding: 24px 20px 60px; }
    .up-welcome-strip { grid-template-columns: 1fr; }
    .up-welcome-strip-stat { border-right: 0; border-bottom: 1px solid var(--border); }
    .up-welcome-strip-stat:last-child { border-bottom: 0; }
    .up-row { grid-template-columns: 1fr; }
}

/* ── Project Analysis: folder hierarchy ─────────────────────────────────── */
.pa-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.pa-count { font-family: var(--font-mono); font-size: 12px; color: var(--gray-mid); }
.pa-btn {
    font-family: var(--font-mono); font-size: 12px; cursor: pointer;
    background: var(--off-black); color: var(--off-white);
    border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px;
}
.pa-btn:hover { border-color: var(--red); color: var(--white); }
html.light .pa-btn:hover { color: var(--black); }
.pa-btn--danger { color: var(--red); border-color: rgba(255,80,80,.4); }
.pa-btn--danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.pa-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pa-folder {
    text-align: left; cursor: pointer; display: block; width: 100%;
    background: var(--off-black); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; transition: border-color .12s ease, transform .12s ease;
}
.pa-folder:hover { border-color: var(--red); transform: translateY(-1px); }
.pa-folder-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pa-folder-ico { color: var(--red); flex: 0 0 auto; }
.pa-folder-name { font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.3; word-break: break-word; }
html.light .pa-folder-name { color: var(--black); }
.pa-folder-meta { font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pa-folder-badges { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pa-badge {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--off-white);
    background: rgba(255,255,255,.06); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 8px;
}
.pa-badge--total { background: var(--red); border-color: var(--red); color: #fff; }
.pa-state { font-size: 13px; color: var(--gray-mid); padding: 18px 2px; }
.pa-state.is-error { color: var(--red); }

.pa-back {
    background: none; border: 0; cursor: pointer; padding: 0; margin-bottom: 14px;
    font-family: var(--font-mono); font-size: 12px; color: var(--gray-light);
}
.pa-back:hover { color: var(--red); }
.pa-detail-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pa-detail-head h2 { font-size: 20px; color: var(--white); margin: 0 0 4px; word-break: break-word; }
html.light .pa-detail-head h2 { color: var(--black); }
.pa-detail-meta, .pa-viewer-title { font-family: var(--font-mono); font-size: 12px; color: var(--gray-mid); }
/* Project location — feeds the regional cost index used when pricing. */
.pa-location { border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 14px 16px; margin: 0 0 22px; background: rgba(255,255,255,.03); }
.pa-loc-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--off-white); margin-bottom: 10px; }
.pa-loc-hint { display: block; font-weight: 400; font-size: 11px; color: var(--gray-mid); margin-top: 2px; }
.pa-loc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pa-loc-city, .pa-loc-state, .pa-loc-zip {
    background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
    color: var(--white); font-size: 12.5px; padding: 7px 10px; font-family: inherit;
}
.pa-loc-city { flex: 1 1 190px; min-width: 130px; }
.pa-loc-state { flex: 0 0 84px; }
.pa-loc-zip { flex: 0 0 96px; }
.pa-loc-save {
    background: var(--red); border: none; border-radius: 8px; color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 8px 16px; cursor: pointer;
}
.pa-loc-save:hover { filter: brightness(1.08); }
.pa-loc-state-msg { font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); flex: 1 1 100%; }
.pa-loc-state-msg.is-warn { color: #f0aa32; }
.pa-loc-state-msg.is-ok { color: #4cd884; }
html.light .pa-location { border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.02); }
html.light .pa-loc-label { color: #1a1a1a; }
html.light .pa-loc-hint, html.light .pa-loc-state-msg { color: #6e6e73; }
html.light .pa-loc-city, html.light .pa-loc-state, html.light .pa-loc-zip {
    background: #fff; border-color: rgba(0,0,0,.16); color: #1a1a1a;
}

.pa-group { margin-bottom: 22px; }
.pa-group-title {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-light); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.pa-group-title span { color: var(--gray-mid); }
.pa-list { display: flex; flex-direction: column; gap: 6px; }
.pa-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--off-black); border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px;
}
.pa-row-main { flex: 1 1 auto; cursor: pointer; min-width: 0; }
.pa-row-name { font-size: 13px; color: var(--off-white); margin-bottom: 2px; word-break: break-word; }
.pa-row-sub { font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); }
.pa-row:hover { border-color: var(--red); }
.pa-row-dl {
    flex: 0 0 auto; cursor: pointer; background: none; border: 1px solid var(--border);
    color: var(--gray-mid); border-radius: 7px; height: 26px; padding: 0 10px; line-height: 1;
    font-family: var(--font-mono); font-size: 11px; white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.pa-row-dl:hover { border-color: var(--red); color: var(--off-white); }
.pa-row-dl:disabled { opacity: .6; cursor: default; }
html.light .pa-row-dl:hover { color: var(--black); }
.pa-row-del {
    flex: 0 0 auto; cursor: pointer; background: none; border: 1px solid var(--border);
    color: var(--gray-mid); border-radius: 7px; width: 26px; height: 26px; line-height: 1; font-size: 15px;
}
.pa-row-del:hover { border-color: var(--red); color: var(--red); }
.pa-empty-line { font-size: 12px; color: var(--gray-mid); font-style: italic; padding: 4px 2px; }

.pa-viewer-title { color: var(--white); font-size: 18px; font-family: inherit; margin: 0 0 14px; }
html.light .pa-viewer-title { color: var(--black); }
.pa-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pa-table th, .pa-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pa-table th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-light); }
.pa-table td.pa-num { font-family: var(--font-mono); white-space: nowrap; }
.pa-table tr:hover td { background: rgba(255,255,255,.02); }
.pa-viewer-totals { font-family: var(--font-mono); font-size: 12px; color: var(--gray-light); margin-top: 12px; }

/* Light-theme overrides: brand vars (--off-black/--border/--off-white) are fixed
 * for dark UI, so cards stay dark on white without these. */
html.light .pa-btn,
html.light .pa-folder,
html.light .pa-row { background: #ffffff; border-color: rgba(0,0,0,.12); color: #1a1a1a; }
html.light .pa-folder:hover,
html.light .pa-row:hover,
html.light .pa-btn:hover { border-color: var(--red); }
html.light .pa-row-name { color: #1a1a1a; }
html.light .pa-row-sub,
html.light .pa-folder-meta,
html.light .pa-detail-meta,
html.light .pa-viewer-totals { color: #6e6e73; }
html.light .pa-badge { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: #44474d; }
html.light .pa-row-del { border-color: rgba(0,0,0,.12); color: #6e6e73; }
html.light .pa-group-title,
html.light .pa-table th,
html.light .pa-table td { border-bottom-color: rgba(0,0,0,.1); }
html.light .pa-table th { color: #6e6e73; }
html.light .pa-table td { color: #1a1a1a; }
html.light .pa-table tr:hover td { background: rgba(0,0,0,.025); }

/* ── BOM viewer: header + category sections + match colors ── */
.pa-bom-head { margin-bottom: 14px; }
.pa-bom-proj { font-size: 16px; font-weight: 600; color: var(--white); word-break: break-word; }
html.light .pa-bom-proj { color: var(--black); }
.pa-bom-head-meta { font-family: var(--font-mono); font-size: 12px; color: var(--gray-mid); margin-top: 3px; }
.pa-export-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pa-cat { margin-bottom: 24px; }
.pa-cat-title {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--red); margin-bottom: 7px;
}
.pa-cat-title span { color: var(--gray-mid); }
.pa-m-direct { color: #36c46d; }
.pa-m-equiv { color: var(--off-white); }
html.light .pa-m-equiv { color: #1a1a1a; }
.pa-m-none { color: var(--gray-mid); }

/* ── Price Estimator ── */
.pe-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pe-choices { grid-template-columns: 1fr; } }
.pe-choice {
    display: block; text-align: left; padding: 22px 20px; border-radius: 12px;
    background: var(--off-black); border: 1px solid var(--border); color: var(--off-white);
    cursor: pointer; transition: border-color .15s, transform .12s;
}
.pe-choice:hover { border-color: var(--red); transform: translateY(-2px); }
.pe-choice svg { width: 28px; height: 28px; display: block; color: var(--red); margin-bottom: 14px; }
.pe-choice-title { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.pe-choice-sub { font-size: 12.5px; color: var(--gray-mid); line-height: 1.5; }
.pe-section-title {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-light); margin: 4px 0 12px;
}
.pe-bomlist { display: flex; flex-direction: column; gap: 8px; }
.pe-bomrow {
    display: block; text-align: left; padding: 12px 14px; border-radius: 9px;
    background: var(--off-black); border: 1px solid var(--border); color: var(--off-white);
    cursor: pointer; transition: border-color .15s;
}
.pe-bomrow:hover { border-color: var(--red); }
.pe-info-card {
    padding: 20px; border-radius: 12px; background: var(--off-black); border: 1px solid var(--border);
    font-size: 13px; color: var(--gray-light); line-height: 1.6;
}
.pe-info-card p { margin: 0 0 14px; }
.pe-result-head { margin-bottom: 20px; }
.pe-total-card {
    position: relative; overflow: hidden; padding: 24px 26px; border-radius: 16px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(229,57,53,.18), rgba(20,20,22,0) 55%), linear-gradient(135deg, #1c1c20, #131316);
    border: 1px solid rgba(229,57,53,.35);
    box-shadow: 0 18px 50px -28px rgba(229,57,53,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.pe-total-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-mid); }
.pe-total-amount {
    font-size: 40px; font-weight: 800; line-height: 1.05; margin: 6px 0 4px; letter-spacing: -.01em;
    background: linear-gradient(90deg, #ffffff 0%, #ffd9d6 60%, var(--red) 130%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--red);
}
.pe-total-name { font-size: 13.5px; color: var(--off-white); word-break: break-word; }
.pe-total-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pe-chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.pe-chip-cat { background: rgba(54,196,109,.14); border-color: rgba(54,196,109,.35); color: #4cd884; }
.pe-chip-est { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--gray-light); }
/* A total that covers a minority of the lines must not read as the answer. */
.pe-total-card.is-unusable { border: 1px solid rgba(240,90,60,.55); }
.pe-total-warn {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    color: #ff7a5c; background: rgba(240,90,60,.12); border: 1px solid rgba(240,90,60,.35);
    border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}
.pe-total-card.is-unusable .pe-total-amount { opacity: .55; }
html.light .pe-total-warn { color: #c0392b; background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.30); }

/* Lines that could not be priced are a call to action, not a footnote. */
.pe-chip-warn { background: rgba(240,170,50,.14); border-color: rgba(240,170,50,.42); color: #f0aa32; }
.pe-chip-soft { background: rgba(120,160,255,.12); border-color: rgba(120,160,255,.32); color: #8fb0ff; }
.pe-chip-param { background: rgba(120,160,255,.12); border-color: rgba(120,160,255,.32); color: #8fb0ff; }
html.light .pe-chip-param { background: rgba(60,100,200,.09); border-color: rgba(60,100,200,.26); color: #3d63b8; }
html.light .pe-src-param { background: rgba(60,100,200,.10); color: #3d63b8; }
html.light .pe-src-quote { background: rgba(200,90,30,.12); color: #b8551d; }
/* Where the rates came from and which region they were restated into. */
.pe-total-prov { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-light); margin-top: 12px; letter-spacing: .02em; }
.pe-total-foot { font-size: 11px; color: var(--gray-mid); margin-top: 14px; }

.pe-unpriced { border: 1px solid rgba(240,170,50,.32); background: rgba(240,170,50,.06); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.pe-unpriced-title { font-size: 12.5px; font-weight: 600; color: #f0aa32; margin-bottom: 10px; }
.pe-unpriced-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pe-unpriced-item { font-size: 12px; line-height: 1.45; }
.pe-unpriced-desc { color: var(--off-white); }
.pe-unpriced-why { font-family: var(--font-mono); font-size: 10.5px; color: #f0aa32; margin-top: 2px; }
.pe-unpriced-near { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-mid); margin-top: 2px; }

/* punchy price table */
.pe-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pe-table th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-light); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.pe-table td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; color: var(--off-white); }
.pe-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.018); }
.pe-table tbody tr:hover td { background: rgba(229,57,53,.06); }
.pe-c-qty { font-family: var(--font-mono); white-space: nowrap; color: var(--gray-light); }
.pe-c-unit { font-family: var(--font-mono); white-space: nowrap; text-align: right; color: var(--gray-light); }
.pe-c-ext { font-family: var(--font-mono); white-space: nowrap; text-align: right; font-weight: 700; color: #4cd884; }
.pe-c-desc { line-height: 1.45; }
.pe-table tfoot td { border-top: 2px solid rgba(229,57,53,.4); border-bottom: none; padding: 14px 12px; }
.pe-foot-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-light); text-align: right; }
.pe-foot-total { font-size: 16px; font-weight: 800; color: #4cd884; }
.pe-result-body { margin-top: 20px; }

/* category tags + per-row left accent */
.pe-tag {
    display: inline-block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-right: 7px; vertical-align: middle;
    border: 1px solid currentColor; line-height: 1.5;
}
.pe-cat-construction { color: #f0a23a; } .pe-rl-construction td:first-child { box-shadow: inset 3px 0 0 #f0a23a; }
.pe-cat-ev_charging  { color: #34c6c6; } .pe-rl-ev_charging  td:first-child { box-shadow: inset 3px 0 0 #34c6c6; }
.pe-cat-solar_wind   { color: #d8b832; } .pe-rl-solar_wind   td:first-child { box-shadow: inset 3px 0 0 #d8b832; }
.pe-cat-switchgear   { color: #6c8cff; } .pe-rl-switchgear   td:first-child { box-shadow: inset 3px 0 0 #6c8cff; }
.pe-cat-transformers { color: #b06cff; } .pe-rl-transformers td:first-child { box-shadow: inset 3px 0 0 #b06cff; }
.pe-cat-industrial_mro { color: #ff7a9c; } .pe-rl-industrial_mro td:first-child { box-shadow: inset 3px 0 0 #ff7a9c; }
.pe-cat-other        { color: #9aa0a6; } .pe-rl-other        td:first-child { box-shadow: inset 3px 0 0 #9aa0a6; }
.pe-tag[class*="pe-cat-"] { background: color-mix(in srgb, currentColor 14%, transparent); }

/* ── Project Analysis: single aligned BOM table ── */
.pa-bom-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.pa-col-qty { width: 92px; }
.pa-col-match { width: 36%; }
.pa-bom-table th {
    font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-light); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--off-black); z-index: 1;
}
.pa-bom-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; word-break: break-word; color: var(--off-white); }
.pa-bom-table tbody tr:not(.pa-grp):hover td { background: rgba(229,57,53,.05); }
.pa-grp td {
    background: rgba(255,255,255,.035); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
    padding: 10px 12px; font-weight: 600; color: var(--white); box-shadow: inset 3px 0 0 var(--gray-mid);
}
.pa-grp-n { font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); margin-left: 8px; }
.pa-c-qty { font-family: var(--font-mono); color: var(--gray-light); white-space: nowrap; }
.pa-c-desc { line-height: 1.5; }
.pa-c-loc { font-weight: 700; color: var(--off-white); }
.pa-c-spec { font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); white-space: nowrap; }
html.light .pa-c-loc { color: #1a1a1a; }
.pa-mb { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 4px; margin-right: 8px; vertical-align: middle; }
.pa-mbd { background: rgba(54,196,109,.16); color: #4cd884; }
.pa-mbe { background: rgba(108,140,255,.16); color: #8aa2ff; }
.pa-mbn { background: rgba(255,255,255,.06); color: var(--gray-mid); }
.pa-mb-prod { color: var(--off-white); }

html.light .pa-bom-table th { background: #ffffff; color: #6e6e73; border-bottom-color: rgba(0,0,0,.1); }
html.light .pa-bom-table td { color: #1a1a1a; border-bottom-color: rgba(0,0,0,.07); }
html.light .pa-bom-table tbody tr:not(.pa-grp):hover td { background: rgba(229,57,53,.05); }
html.light .pa-grp td { background: rgba(0,0,0,.035); color: var(--black); border-color: rgba(0,0,0,.1); }
html.light .pa-c-qty { color: #6e6e73; }
html.light .pa-mb-prod { color: #1a1a1a; }
html.light .pa-mbe { background: rgba(76,108,224,.14); color: #4054c8; }
html.light .pa-mbn { background: rgba(0,0,0,.06); color: #6e6e73; }
.pe-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pe-save-state { font-size: 12.5px; color: var(--gray-mid); }
.pe-src { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.pe-src-cat { background: rgba(54,196,109,.15); color: #36c46d; }
.pe-src-est { background: rgba(255,255,255,.08); color: var(--gray-mid); }
.pe-src-none { background: rgba(240,170,50,.16); color: #f0aa32; }
.pe-src-param { background: rgba(120,160,255,.14); color: #8fb0ff; }
/* QUOTE REQUIRED reads as a warning on purpose: the number beside it is a
   parametric range awaiting a fabricator quote, not a price to bid from. */
.pe-src-quote { background: rgba(230,120,60,.18); color: #ff9d5c; font-weight: 600; }
.pe-src-manual { background: rgba(54,196,109,.14); color: #4cd884; }
.pe-src-ext { background: rgba(80,200,210,.14); color: #59cdd8; }
.pe-src-mkt { background: rgba(240,170,50,.16); color: #f0aa32; }
/* A researched, sourced, dated rate — reads closer to the book than to the
   unsourced model estimate it replaced, so it is not styled as a warning. */
.pe-src-mat { background: rgba(90,170,230,.16); color: #5aaae6; }
html.light .pe-src-mkt { background: rgba(190,120,10,.12); color: #a86a08; }
.pe-chip-ext { background: rgba(80,200,210,.12); border-color: rgba(80,200,210,.32); color: #59cdd8; }
html.light .pe-src-ext, html.light .pe-chip-ext { background: rgba(20,130,140,.10); border-color: rgba(20,130,140,.28); color: #147f8c; }
.pe-src-research { background: rgba(150,120,220,.16); color: #b699f0; }
/* Researched figures always travel with their source. */
.pe-c-source { font-family: var(--font-mono); font-size: 10px; color: #b699f0; margin-top: 3px; letter-spacing: .02em; }
.pe-c-source a { color: #b699f0; text-decoration: underline; }
/* An unsourced model figure must never look like a researched one. */
.pe-c-source.is-estimate { color: #f0aa32; }
html.light .pe-c-source.is-estimate { color: #a86a08; }
/* Equipment ROM rollup — the order-of-magnitude read on a supply package. */
.pe-rom { border: 1px solid rgba(120,160,255,.30); background: rgba(120,160,255,.05); border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.pe-rom-title { font-size: 13px; font-weight: 600; color: #8fb0ff; margin-bottom: 4px; }
.pe-rom-head { font-family: var(--font-mono); font-size: 11px; color: var(--gray-light); margin-bottom: 12px; }
.pe-rom-scroll { overflow-x: auto; }
.pe-rom-table { font-size: 12px; min-width: 520px; }
.pe-rom-obs { margin: 12px 0 0; padding-left: 18px; font-size: 12px; color: var(--gray-light); line-height: 1.55; }
.pe-rom-obs li { margin-bottom: 4px; }
html.light .pe-rom { border-color: rgba(60,100,200,.28); background: rgba(60,100,200,.04); }
html.light .pe-rom-title { color: #3d63b8; }
html.light .pe-rom-head, html.light .pe-rom-obs { color: #4a4a4f; }

.pe-research-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pe-research-btn {
    background: rgba(150,120,220,.18); border: 1px solid rgba(150,120,220,.45); border-radius: 8px;
    color: #b699f0; font-size: 12.5px; font-weight: 600; padding: 7px 14px; cursor: pointer;
}
.pe-research-btn:hover:not(:disabled) { background: rgba(150,120,220,.28); }
.pe-research-btn:disabled { opacity: .55; cursor: default; }
.pe-research-state { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-mid); flex: 1 1 220px; }
.pe-research-state.is-ok { color: #4cd884; }
.pe-research-state.is-warn { color: #f0aa32; }
.pe-in.is-researched { border-color: rgba(150,120,220,.6); }
html.light .pe-src-research,
html.light .pe-c-source,
html.light .pe-c-source a { color: #6d4bb8; }
html.light .pe-research-btn { background: rgba(109,75,184,.10); border-color: rgba(109,75,184,.35); color: #6d4bb8; }
/* Rows waiting on you: readable, actionable, not greyed into invisibility. */
.pe-c-why { font-family: var(--font-mono); font-size: 10px; color: #f0aa32; margin-top: 3px; letter-spacing: .02em; }
.pe-in {
    background: rgba(0,0,0,.30); border: 1px solid rgba(240,170,50,.45); border-radius: 6px;
    color: var(--white); font-size: 12px; padding: 4px 7px; font-family: var(--font-mono); width: 88px;
}
.pe-in:focus { outline: none; border-color: #f0aa32; box-shadow: 0 0 0 2px rgba(240,170,50,.18); }
.pe-in-qty { width: 68px; }
.pe-row.is-unpriced { background: rgba(240,170,50,.05); }
html.light .pe-src-manual { background: rgba(31,157,87,.12); color: #1f9d57; }
html.light .pe-c-why { color: #a86a08; }
html.light .pe-in { background: #fff; border-color: rgba(190,120,10,.45); color: #1a1a1a; }
/* The audit trail under each line: book code, rate, vintage, region factor. */
.pe-c-basis { font-family: var(--font-mono); font-size: 10px; color: var(--gray-mid); margin-top: 3px; letter-spacing: .02em; }

html.light .pe-choice,
html.light .pe-bomrow,
html.light .pe-info-card { background: #ffffff; border-color: rgba(0,0,0,.12); color: #1a1a1a; }
html.light .pe-choice:hover,
html.light .pe-bomrow:hover { border-color: var(--red); }
html.light .pe-choice-title { color: var(--black); }
html.light .pe-choice-sub,
html.light .pe-info-card,
html.light .pe-save-state { color: #6e6e73; }
html.light .pe-src-est { background: rgba(0,0,0,.06); color: #6e6e73; }

html.light .pe-total-card {
    background: radial-gradient(120% 140% at 0% 0%, rgba(229,57,53,.10), rgba(255,255,255,0) 55%), #ffffff;
    border-color: rgba(229,57,53,.30);
    box-shadow: 0 18px 50px -30px rgba(229,57,53,.45);
}
html.light .pe-total-amount { background: linear-gradient(90deg, #1a1a1a 0%, #b3271f 90%, var(--red) 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.light .pe-total-name { color: #1a1a1a; }
html.light .pe-chip-est { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: #6e6e73; }
html.light .pe-chip-cat { color: #1f9d57; }
html.light .pe-chip-warn { background: rgba(190,120,10,.10); border-color: rgba(190,120,10,.30); color: #a86a08; }
html.light .pe-chip-soft { background: rgba(60,100,200,.09); border-color: rgba(60,100,200,.26); color: #3d63b8; }
html.light .pe-total-prov { color: #6e6e73; }
html.light .pe-unpriced { border-color: rgba(190,120,10,.28); background: rgba(190,120,10,.05); }
html.light .pe-unpriced-title,
html.light .pe-unpriced-why { color: #a86a08; }
html.light .pe-unpriced-desc { color: #1a1a1a; }
html.light .pe-unpriced-near,
html.light .pe-c-basis { color: #6e6e73; }
html.light .pe-src-none { background: rgba(190,120,10,.12); color: #a86a08; }
html.light .pe-table th,
html.light .pe-table td { border-bottom-color: rgba(0,0,0,.08); color: #1a1a1a; }
html.light .pe-table th,
html.light .pe-c-qty,
html.light .pe-c-unit { color: #6e6e73; }
html.light .pe-table tbody tr:nth-child(odd) td { background: rgba(0,0,0,.02); }
html.light .pe-table tbody tr:hover td { background: rgba(229,57,53,.05); }
html.light .pe-c-ext,
html.light .pe-foot-total { color: #1f9d57; }
html.light .pe-foot-label { color: #6e6e73; }

/* ── 7-day free trial banner ─────────────────────────────────────────── */
.up-trial {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 16px 20px; margin-bottom: 24px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--off-black);
}
.up-trial-main { flex: 1 1 320px; min-width: 0; }
.up-trial-title {
    font-size: 15px; font-weight: 700; color: var(--white);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.up-trial-sub { font-size: 12.5px; color: var(--gray-light); margin-top: 5px; line-height: 1.5; }
.up-trial-sub strong { color: var(--white); }
.up-trial-countdown {
    font-family: var(--font-mono); font-size: 11px; padding: 2px 9px; border-radius: 999px;
    background: rgba(54,196,109,.16); color: #4cd884; border: 1px solid rgba(54,196,109,.35);
}
.up-trial-status { font-size: 12px; margin-top: 8px; color: var(--gray-mid); }
.up-trial-status.is-error { color: var(--red); }
.up-trial-btn {
    flex: 0 0 auto; cursor: pointer; border: none; border-radius: 9px;
    padding: 11px 18px; font-size: 13px; font-weight: 600;
    background: var(--red); color: #fff; text-decoration: none; display: inline-block;
    transition: transform .12s, background .15s, border-color .15s;
}
.up-trial-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.up-trial-btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--off-white); }
.up-trial.is-offer  { border-color: rgba(229,57,53,.40); background: radial-gradient(120% 140% at 0% 0%, rgba(229,57,53,.16), transparent 60%), var(--off-black); }
.up-trial.is-active { border-color: rgba(54,196,109,.35); background: radial-gradient(120% 140% at 0% 0%, rgba(54,196,109,.12), transparent 60%), var(--off-black); }
.up-trial.is-ended  { border-color: var(--border); }

html.light .up-trial-title { color: var(--black); }
html.light .up-trial-sub { color: #44474d; }
html.light .up-trial-sub strong { color: var(--black); }
html.light .up-trial.is-offer  { background: radial-gradient(120% 140% at 0% 0%, rgba(229,57,53,.10), transparent 55%), #ffffff; }
html.light .up-trial.is-active { background: radial-gradient(120% 140% at 0% 0%, rgba(54,196,109,.10), transparent 55%), #ffffff; }
html.light .up-trial.is-ended  { background: #ffffff; }
html.light .up-trial-btn--ghost { color: #1a1a1a; border-color: rgba(0,0,0,.14); }

/* ── Subscription pane ─────────────────────────────────────────────────── */
.up-sub { max-width: 720px; }
.up-sub-card {
    padding: 22px 24px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--off-black);
}
.up-sub-plan { font-size: 16px; color: var(--off-white); }
.up-sub-plan strong { color: var(--white); font-weight: 700; }
.up-sub-plan .up-trial-countdown { margin-left: 8px; }
.up-sub-note { font-size: 13px; color: var(--gray-light); line-height: 1.55; margin-top: 8px; }
.up-sub-tag {
    margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
    color: var(--gray-light); border: 1px solid var(--border); background: var(--black);
}
html.light .up-sub-tag { color: #44474d; border-color: rgba(0,0,0,.14); background: #f2f3f5; }
.up-sub-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.up-sub-status { font-size: 12.5px; color: var(--gray-mid); }
.up-sub-status.is-error { color: var(--red); }
html.light .up-sub-card { background: #ffffff; border-color: rgba(0,0,0,.12); }
html.light .up-sub-plan { color: #1a1a1a; }
html.light .up-sub-plan strong { color: var(--black); }
html.light .up-sub-note { color: #44474d; }

/* ── Team seats (Pro) ──────────────────────────────────────────────────── */
.up-seats { max-width: 720px; margin-top: 16px; }
.up-seats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.up-seats-count { font-size: 12.5px; color: var(--gray-mid); white-space: nowrap; }
.up-seats-count strong { color: var(--off-white); font-weight: 700; }
.up-seats-add { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.up-seats-select {
    flex: 1 1 240px; min-width: 200px; cursor: pointer;
    padding: 10px 12px; border-radius: 9px; font-size: 13px;
    border: 1px solid var(--border); background: var(--black); color: var(--off-white);
}
.up-seats-hint { margin-top: 14px; font-size: 12.5px; color: var(--gray-mid); }
.up-seats-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.up-seats-empty { font-size: 12.5px; color: var(--gray-mid); padding: 4px 0; }
.up-seats-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--black);
}
.up-seats-name { font-size: 13.5px; color: var(--off-white); font-weight: 600; }
.up-seats-sub { font-size: 12px; color: var(--gray-mid); margin-top: 2px; }
.up-seats-remove {
    flex: 0 0 auto; cursor: pointer; border-radius: 8px;
    padding: 7px 12px; font-size: 12px; font-weight: 600;
    background: transparent; border: 1px solid var(--border); color: var(--gray-light);
    transition: color .15s, border-color .15s, background .15s;
}
.up-seats-remove:hover { color: var(--red); border-color: rgba(229,57,53,.45); background: rgba(229,57,53,.08); }
html.light .up-seats-count strong { color: #1a1a1a; }
html.light .up-seats-select { background: #ffffff; color: #1a1a1a; border-color: rgba(0,0,0,.14); }
html.light .up-seats-row { background: #f7f8fa; border-color: rgba(0,0,0,.10); }
html.light .up-seats-name { color: #1a1a1a; }
html.light .up-seats-remove { color: #44474d; border-color: rgba(0,0,0,.14); }

/* ── Module preview ───────────────────────────────────────────────────────
   Opening a capability shows the screen it will ship as. The rows are
   deliberately blank/dashed rather than plausible-looking records: a preview
   that a customer could mistake for their own data is worse than no preview. */
.up-mod { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.up-mod:hover { border-color: rgba(255,122,69,.45); background: rgba(255,122,69,.05); transform: translateY(-1px); }
.up-mod-open { display: inline-block; margin-top: 9px; font-size: 11.5px; font-weight: 700; color: #ff7a45; opacity: 0; transition: opacity .15s; }
.up-mod:hover .up-mod-open { opacity: 1; }
html.light .up-mod:hover { border-color: rgba(194,65,12,.35); background: rgba(194,65,12,.04); }
html.light .up-mod-open { color: #c2410c; }

.up-modview { margin-top: 4px; }
.up-modview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.up-modview-back { font: inherit; font-size: 13px; font-weight: 600; color: var(--gray-light); background: none; border: none; cursor: pointer; padding: 0; }
.up-modview-back:hover { color: #ff7a45; }
.up-modview-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-modview-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.up-modview-sub { font-size: 13.5px; line-height: 1.6; color: var(--gray-light); margin: 7px 0 14px; max-width: 80ch; }
.up-modview-banner { font-size: 12px; font-weight: 600; color: #ff7a45; background: rgba(255,122,69,.08); border: 1px solid rgba(255,122,69,.22); border-radius: 9px; padding: 9px 13px; margin-bottom: 14px; }
.up-modview-frame { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); }
html.light .up-modview-frame { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.015); }
html.light .up-modview-banner { color: #c2410c; background: rgba(194,65,12,.06); border-color: rgba(194,65,12,.18); }
html.light .up-modview-back:hover { color: #c2410c; }

.up-mvbar { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
html.light .up-mvbar { border-color: rgba(0,0,0,.08); }
.up-mvsearch { flex: 1 1 200px; min-width: 160px; font-size: 12.5px; color: var(--gray-mid); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 7px 11px; }
.up-mvchip { font-size: 11.5px; font-weight: 600; color: var(--gray-light); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 100px; padding: 5px 11px; }
.up-mvspacer { flex: 1; }
.up-mvbtn { font-size: 11.5px; font-weight: 700; color: #fff; background: #ff7a45; border-radius: 8px; padding: 7px 14px; white-space: nowrap; }
html.light .up-mvsearch, html.light .up-mvchip { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }
html.light .up-mvbtn { background: #c2410c; }

.up-mvtable-wrap { overflow-x: auto; }
.up-mvtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.up-mvtable th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.up-mvtable td { padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.05); }
html.light .up-mvtable th { border-color: rgba(0,0,0,.1); }
html.light .up-mvtable td { border-color: rgba(0,0,0,.05); }
.up-mvfill { display: block; height: 9px; width: 74px; border-radius: 4px; background: rgba(255,255,255,.09); }
.up-mvfill--wide { width: 130px; }
html.light .up-mvfill { background: rgba(0,0,0,.07); }
.up-mvdim, .up-mvmono, .up-mvnum { color: var(--gray-mid); }
.up-mvmono, .up-mvnum { font-family: var(--font-mono); font-size: 11.5px; }
.up-mvnum { display: block; text-align: right; }
.up-mvpill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: rgba(255,255,255,.08); color: var(--gray-light); white-space: nowrap; }
.up-mvpill.ok { background: rgba(20,168,106,.16); color: #2fbd85; }
.up-mvpill.warn { background: rgba(255,122,69,.14); color: #ff7a45; }
html.light .up-mvpill { background: rgba(0,0,0,.05); color: var(--gray-mid); }

.up-mvboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; padding: 13px; overflow-x: auto; }
.up-mvlane-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); margin-bottom: 9px; }
.up-mvlane-n { font-family: var(--font-mono); }
.up-mvcard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 11px; margin-bottom: 8px; }
.up-mvcard-t, .up-mvcard-s { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); }
.up-mvcard-t { width: 82%; margin-bottom: 7px; }
.up-mvcard-s { width: 52%; }
html.light .up-mvcard { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.08); }
html.light .up-mvcard-t, html.light .up-mvcard-s { background: rgba(0,0,0,.08); }

.up-mvdash { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 13px; }
.up-mvtile { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 13px; }
.up-mvtile-k { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); }
.up-mvtile-v { font-size: 25px; font-weight: 800; margin: 5px 0 9px; color: var(--gray-light); }
.up-mvspark { height: 26px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,122,69,.22), rgba(255,122,69,.05)); }
html.light .up-mvtile { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }

.up-mvsplit { display: grid; grid-template-columns: 1fr 220px; gap: 16px; padding: 15px; }
.up-mvcrit { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--gray-light); margin-bottom: 11px; }
.up-mvcrit span:first-child { flex: 1; }
.up-mvbar-track { flex: none; width: 110px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.up-mvbar-fill { display: block; width: 0; height: 100%; background: #ff7a45; }
.up-mvsplit-r { border-left: 1px solid rgba(255,255,255,.08); padding-left: 16px; }
.up-mvscore { font-size: 34px; font-weight: 800; color: var(--gray-light); }
.up-mvscore-l { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); margin-bottom: 9px; }
.up-mvreason { font-size: 12px; line-height: 1.55; color: var(--gray-mid); }
html.light .up-mvsplit-r { border-color: rgba(0,0,0,.08); }
html.light .up-mvbar-track { background: rgba(0,0,0,.07); }
@media (max-width: 640px) { .up-mvsplit { grid-template-columns: 1fr; } .up-mvsplit-r { border-left: none; padding-left: 0; } }

.up-mvchat { padding: 15px; }
.up-mvmsg { border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: 13px; max-width: 76%; }
.up-mvmsg--you { margin-left: auto; background: rgba(255,122,69,.12); border: 1px solid rgba(255,122,69,.22); color: var(--gray-light); }
.up-mvmsg--ai { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.up-mvmsg-b { display: block; height: 9px; border-radius: 4px; background: rgba(255,255,255,.1); margin-bottom: 8px; }
.up-mvmsg-b:nth-child(2) { width: 68%; }
.up-mvcite { display: block; font-size: 11.5px; color: var(--gray-mid); margin-top: 4px; }
.up-mvcompose { font-size: 12.5px; color: var(--gray-mid); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 11px 13px; margin-top: 14px; }
html.light .up-mvmsg--ai, html.light .up-mvcompose { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
html.light .up-mvmsg-b { background: rgba(0,0,0,.08); }

/* ── Module preview layouts ───────────────────────────────────────────────
   One renderer per shape of work. A submittal is a review cycle, a drawing
   set is a wall of sheets, a lookahead is bars against dates, a punch item is
   a photo — rendering all of them as the same grey table was what made 44
   different capabilities look like one. */
.up-mvld { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.up-mvld-list { border-right: 1px solid rgba(255,255,255,.08); max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.up-mvli { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.05); }
.up-mvli.is-sel { background: rgba(255,122,69,.09); box-shadow: inset 2px 0 0 #ff7a45; }
.up-mvli-b { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.up-mvld-detail { padding: 15px; }
.up-mvld-h { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.up-mvava { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#ff7a45,#c2410c); flex: none; opacity: .55; }
.up-mvava.sm { width: 20px; height: 20px; }
.up-mvthread { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.up-mvbubble { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 11px 13px; }
.up-mvbubble--ai { border-color: rgba(255,122,69,.25); background: rgba(255,122,69,.06); }
.up-mvfields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-mvfield { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--gray-mid); border-top: 1px solid rgba(255,255,255,.06); padding-top: 7px; }
html.light .up-mvld-list, html.light .up-mvli { border-color: rgba(0,0,0,.07); }
html.light .up-mvbubble { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }

.up-mvsteps { display: flex; align-items: center; padding: 16px 15px 6px; overflow-x: auto; }
.up-mvstep { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.up-mvstep-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); }
.up-mvstep.is-done .up-mvstep-dot { background: #2fbd85; border-color: #2fbd85; }
.up-mvstep.is-now .up-mvstep-dot { border-color: #ff7a45; box-shadow: 0 0 0 4px rgba(255,122,69,.18); }
.up-mvstep-l { font-size: 10.5px; font-weight: 700; color: var(--gray-mid); white-space: nowrap; }
.up-mvstep.is-now .up-mvstep-l { color: #ff7a45; }
.up-mvstep-line { flex: 1; height: 2px; min-width: 26px; background: rgba(255,255,255,.12); margin: 0 6px 22px; }
.up-mvsubrows { padding: 8px 15px 15px; }
.up-mvsubrow { display: grid; grid-template-columns: 40px minmax(0,1fr) 58px 110px 40px; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.up-mvrev { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-mid); }

.up-mvsheets { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 11px; padding: 14px; }
.up-mvsheet-thumb { aspect-ratio: 4/3; border-radius: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 9px; display: flex; flex-direction: column; gap: 5px; justify-content: flex-end; }
.up-mvsheet-thumb span { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.up-mvsheet-thumb span:nth-child(1) { width: 70%; } .up-mvsheet-thumb span:nth-child(2) { width: 45%; }
.up-mvsheet.is-super .up-mvsheet-thumb { opacity: .45; }
.up-mvsheet-n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; margin: 7px 0 4px; }
html.light .up-mvsheet-thumb { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); }
html.light .up-mvsheet-thumb span { background: rgba(0,0,0,.13); }

.up-mvtree { padding: 13px 15px; }
.up-mvtree-h { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 12.5px; font-weight: 600; }
.up-mvtree-c { color: #ff7a45; font-size: 10px; }
.up-mvtree-kid { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0 7px 24px; border-left: 1px solid rgba(255,255,255,.1); margin-left: 5px; }

.up-mvwf { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 18px 15px 13px; }
.up-mvwf-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.up-mvwf-bar { width: 100%; max-width: 76px; border-radius: 6px 6px 0 0; background: rgba(255,122,69,.4); }
.up-mvwf-bar.is-total { background: rgba(255,122,69,.75); }
.up-mvwf-bar.is-bad { background: rgba(220,60,60,.5); }
.up-mvwf-l { font-size: 10.5px; font-weight: 700; color: var(--gray-mid); margin-top: 8px; text-align: center; }

.up-mvdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; padding: 13px 15px 0; }
.up-mvday { text-align: center; padding: 11px 0; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.up-mvday.is-sel { border-color: #ff7a45; background: rgba(255,122,69,.1); }
.up-mvday-d { display: block; font-family: var(--font-mono); font-size: 13px; }
.up-mvday-n { display: block; color: #ff7a45; font-size: 15px; line-height: .6; height: 8px; }
.up-mvlogs { padding: 13px 15px 15px; }
.up-mvlog { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.06); }
.up-mvlog-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); width: 96px; flex: none; }
.up-mvlog-v { display: flex; gap: 7px; }

.up-mvphotos { display: grid; grid-template-columns: repeat(auto-fill,minmax(168px,1fr)); gap: 11px; padding: 14px; }
.up-mvphoto { border: 1px solid rgba(255,255,255,.08); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.03); }
.up-mvphoto-img { aspect-ratio: 4/3; background: linear-gradient(135deg,rgba(255,122,69,.16),rgba(255,255,255,.05)); position: relative; }
.up-mvpin { position: absolute; top: 9px; left: 9px; width: 21px; height: 21px; border-radius: 50%; background: #ff7a45; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.up-mvphoto-b { padding: 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.up-mvgantt { padding: 14px 15px; }
.up-mvgantt-head { display: grid; grid-template-columns: 172px repeat(8,1fr); font-size: 10px; font-weight: 700; color: var(--gray-mid); margin-bottom: 9px; }
.up-mvgantt-row { display: grid; grid-template-columns: 172px 1fr; align-items: center; gap: 12px; padding: 7px 0; }
.up-mvgantt-l { font-size: 12px; color: var(--gray-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-mvgantt-track { position: relative; height: 17px; border-radius: 5px; background: rgba(255,255,255,.05); }
.up-mvgantt-bar { position: absolute; top: 0; height: 100%; border-radius: 5px; background: rgba(255,122,69,.55); }
.up-mvgantt-bar.is-crit { background: rgba(220,60,60,.55); }
html.light .up-mvgantt-track { background: rgba(0,0,0,.05); }

.up-mvflow { display: flex; align-items: flex-start; gap: 6px; padding: 14px; overflow-x: auto; }
.up-mvfstage { flex: 1 0 152px; }
.up-mvfstage-h { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-mid); margin-bottom: 9px; }
.up-mvfcard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 10px; margin-bottom: 7px; display: flex; flex-direction: column; gap: 6px; }
.up-mvfarrow { color: #ff7a45; font-size: 19px; align-self: center; flex: none; }
html.light .up-mvfcard { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.08); }

.up-mvmatrix { padding: 14px 15px; }
.up-mvmx-row { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; }
.up-mvmx-head { border-top: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); }
.up-mvmx-k { color: var(--gray-light); }
.up-mvtick { color: #2fbd85; font-weight: 800; }

.up-mvtable--ledger tfoot td { font-size: 11px; color: var(--gray-mid); padding: 10px 13px; }
.up-mvtable--ledger .up-mvbar-track { width: 74px; }

.up-mvlt { padding: 15px; }
.up-mvlt-row { display: grid; grid-template-columns: 180px 1fr 62px; align-items: center; gap: 13px; padding: 9px 0; }
.up-mvlt-l { font-size: 12px; color: var(--gray-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-mvlt-track { position: relative; height: 15px; border-radius: 5px; background: rgba(255,255,255,.05); }
.up-mvlt-bar { display: block; height: 100%; border-radius: 5px; background: rgba(47,189,133,.5); }
.up-mvlt-bar.is-risk { background: rgba(220,60,60,.55); }
.up-mvlt-need { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #ff7a45; }
.up-mvlt-key { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--gray-mid); margin-top: 12px; }
.up-mvlt-need-k { width: 2px; height: 13px; background: #ff7a45; flex: none; }

.up-mvtracker { padding: 15px; }
.up-mvtrk { display: grid; grid-template-columns: 150px 1fr 92px; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.06); }
.up-mvtrk-line { display: flex; align-items: center; }
.up-mvtrk-node { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.15); flex: none; }
.up-mvtrk-node.is-done { background: #ff7a45; }
.up-mvtrk-seg { flex: 1; height: 2px; background: rgba(255,255,255,.12); }
.up-mvtrk-seg.is-done { background: #ff7a45; }

.up-mvdirgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 10px; padding: 14px; }
.up-mvdir { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.03); }
.up-mvdir-b { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.up-mvstars { font-size: 11px; color: #ff7a45; letter-spacing: 1px; }

.up-mvassets { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 10px; padding: 14px; }
.up-mvasset { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.03); }
.up-mvasset-ic { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,rgba(255,122,69,.35),rgba(255,122,69,.12)); flex: none; }
.up-mvasset-b { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.up-mvasset-w { width: 78px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.up-mvbar-fill.is-bad { background: #dc3c3c; }

.up-mvprojs { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 10px; padding: 0 13px 14px; }
.up-mvproj { border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.03); padding: 12px; }
.up-mvproj-h { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; }
.up-mvproj-m { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 10px; }
.up-mvproj-m .up-mvdim { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }

.up-mvaging { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 11px; padding: 14px; }
.up-mvage-h { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-mid); padding-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.1); margin-bottom: 9px; }
.up-mvage-h.is-hot { color: #dc3c3c; border-color: rgba(220,60,60,.5); }
.up-mvage-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; }

.up-mvchart { padding: 16px 15px 13px; }
.up-mvchart-plot { display: flex; align-items: flex-end; gap: 10px; height: 178px; }
.up-mvcol { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.up-mvcol-b { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255,122,69,.55); }
.up-mvcol-b--alt { background: rgba(255,255,255,.14); }
.up-mvchart-x { display: flex; gap: 10px; margin-top: 9px; }
.up-mvchart-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--gray-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.light .up-mvcol-b--alt { background: rgba(0,0,0,.12); }
html.light .up-mvphoto, html.light .up-mvdir, html.light .up-mvasset, html.light .up-mvproj { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
@media (max-width: 720px) { .up-mvld { grid-template-columns: 1fr; } .up-mvld-list { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); } .up-mvgantt-head, .up-mvgantt-row { grid-template-columns: 108px 1fr; } .up-mvlt-row { grid-template-columns: 110px 1fr 54px; } }

/* Directory + asset cards stack in two rows. Laid out as one horizontal strip
   (avatar + text + pill) the content was wider than its grid track, so every
   card's status pill overflowed into the next card's avatar. A card has to
   survive its own column width. */
.up-mvdirgrid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.up-mvdir { flex-direction: column; align-items: stretch; gap: 10px; }
.up-mvdir-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.up-mvdir-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.up-mvdir-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.up-mvdir .up-mvfill { max-width: 100%; }

.up-mvassets { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.up-mvasset { flex-direction: column; align-items: stretch; gap: 11px; }
.up-mvasset-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.up-mvasset-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.up-mvasset-w { width: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.up-mvasset-w .up-mvdim { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.up-mvasset-w .up-mvbar-track { flex: 1; max-width: 120px; }
.up-mvasset .up-mvfill { max-width: 100%; }

/* Nothing in a preview may spill out of its frame. */
.up-modview-frame > div { max-width: 100%; }
.up-mvfill { max-width: 100%; }

/* ── Preview layout fixes ─────────────────────────────────────────────────
   .up-mvbar-track is a <span>. Width and height are IGNORED on a non-replaced
   inline element, so in a plain block context (the project card) the track had
   no box at all and its display:block child escaped the inline box and
   rendered as a full-width slab hanging out the bottom of the card. It only
   ever looked right inside flex parents, which blockify their children.
   Blockify it explicitly and give it a sane default width. */
.up-mvbar-track { display: block; width: 100%; }
.up-mvcrit .up-mvbar-track { width: 110px; flex: none; }
.up-mvtable--ledger .up-mvbar-track { width: 74px; }
.up-mvasset-w .up-mvbar-track { width: auto; flex: 1; max-width: 120px; }
.up-mvproj .up-mvbar-track { margin-top: 2px; }

/* Tiles were stretching to a third of a 1650px screen each, which turned a
   four-tile KPI strip into three billboards. Cap the track width and let the
   row start from the left instead of filling. */
.up-mvdash { grid-template-columns: repeat(auto-fit, minmax(178px, 232px)); justify-content: start; }
.up-mvtile-v { font-size: 21px; margin: 4px 0 8px; }
.up-mvspark { height: 20px; }

/* The preview itself has a readable width. A register stretched across an
   ultrawide monitor is unreadable, not impressive. */
.up-modview { max-width: 1180px; }

/* ── Safety & Protection ──────────────────────────────────────────────────
   Certifications is the one part of this category that is usable today, so it
   sits ABOVE the roadmap block and is styled as a live resource, not a preview.
   The distinction has to be visible at a glance or the whole pane reads as
   "coming soon" and nobody clicks the links that already work. */
.sp-block { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; margin-bottom: 26px; background: rgba(255,255,255,.02); }
.sp-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sp-block-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; }
.sp-block-head p { font-size: 13.5px; line-height: 1.6; color: var(--gray-light); margin: 0; max-width: 72ch; }
.sp-live { flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #12a065; background: rgba(20,168,106,.14); border: 1px solid rgba(20,168,106,.3); border-radius: 100px; padding: 5px 12px; }


.sp-links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.08); }
.sp-links a { font-size: 12.5px; font-weight: 600; color: #ff7a45; text-decoration: none; }
.sp-links a:hover { text-decoration: underline; }
.sp-fineprint { font-size: 11.5px; line-height: 1.6; color: var(--gray-mid); margin: 14px 0 0; max-width: 78ch; }

html.light .sp-block { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.015); }
html.light .sp-cert { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.02); }
html.light .sp-cert:hover { border-color: #c2410c; background: rgba(194,65,12,.05); }
html.light .sp-cert-go, html.light .sp-links a { color: #c2410c; }
html.light .sp-links { border-color: rgba(0,0,0,.08); }
@media (max-width: 620px) { .sp-cert { flex-wrap: wrap; } .sp-cert-go { width: 100%; } }

/* Category filter + price, matching the provider's own taxonomy so a course
   found here is findable there. */
.sp-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.sp-tab { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 7px 14px; border-radius: 100px; cursor: pointer; color: var(--gray-light); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: .15s; }
.sp-tab:hover { color: var(--white,#fff); border-color: rgba(255,122,69,.5); }
.sp-tab.is-active { color: #fff; background: #ff7a45; border-color: #ff7a45; }
html.light .sp-tab { color: var(--gray-mid); background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
html.light .sp-tab:hover { color: var(--black,#111); border-color: rgba(194,65,12,.5); }
html.light .sp-tab.is-active { color: #fff; background: #c2410c; border-color: #c2410c; }
@media (max-width: 620px) { .sp-cert-buy { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } }

/* ── Certification carousel ───────────────────────────────────────────────
   The old grid was a wall of identical pale cards. Three things fix that:
   a per-category hue (--h) that the badge, top rule and hover glow all take,
   so cards are told apart at a glance; real depth instead of a flat fill; and
   a scroll-snap rail so the catalogue reads as a shelf you push through. */
.sp-rail { position: relative; margin: 4px -4px 0; }
.sp-track {
  display: flex; gap: 16px; padding: 14px 4px 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 4px;
  scrollbar-width: none; cursor: grab;
}
.sp-track::-webkit-scrollbar { display: none; }
.sp-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sp-track:focus-visible { outline: 2px solid hsl(20 90% 55%); outline-offset: 4px; border-radius: 14px; }

.sp-card {
  position: relative; flex: 0 0 268px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 9px;
  padding: 18px 18px 16px; border-radius: 15px; text-decoration: none; overflow: hidden;
  background:
    linear-gradient(165deg, hsl(var(--h) / .13), transparent 46%),
    var(--surface-1, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: transform .32s cubic-bezier(.2,.8,.25,1), box-shadow .32s, border-color .32s;
  animation: spIn .5s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: calc(var(--i) * 45ms);
  will-change: transform;
}
/* The category stripe. Reads as part of the card, not a bolt-on rail. */
.sp-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, hsl(var(--h)), hsl(var(--h) / .25));
}
.sp-card-glow {
  position: absolute; inset: -40% -30% auto; height: 150px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, hsl(var(--h) / .5), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.sp-card:hover { transform: translateY(-5px); border-color: hsl(var(--h) / .55); box-shadow: 0 14px 34px hsl(var(--h) / .2), 0 2px 6px rgba(0,0,0,.2); }
.sp-card:hover .sp-card-glow { opacity: .55; }
.sp-card:focus-visible { outline: 2px solid hsl(var(--h)); outline-offset: 3px; }
@keyframes spIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.sp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.sp-card-hours {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 50px; padding: 7px 10px; border-radius: 11px;
  font-family: var(--font-mono); font-size: 17px; font-weight: 800; line-height: 1;
  color: hsl(var(--h)); background: hsl(var(--h) / .14); border: 1px solid hsl(var(--h) / .3);
}
.sp-card-hours em { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: 3px; }
.sp-card-cat { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--h)); opacity: .85; }
.sp-card-name { font-size: 15px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; color: var(--white,#fff); }
.sp-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--gray-light); flex: 1; }
.sp-card-meta { font-size: 10.5px; color: var(--gray-mid); border-top: 1px solid rgba(255,255,255,.07); padding-top: 9px; }
.sp-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 2px; }
.sp-price { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.sp-price b { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--white,#fff); }
.sp-price s { font-size: 11.5px; color: var(--gray-mid); }
.sp-price--ask { font-size: 12.5px; font-weight: 700; color: hsl(var(--h)); }
.sp-card-go { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: hsl(var(--h)); }
.sp-card-go svg { width: 13px; height: 13px; transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.sp-card:hover .sp-card-go svg { transform: translateX(4px); }

/* Arrows sit over the rail edges and fade the cards out beneath them. */
.sp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--white,#fff); background: var(--surface-2, rgba(28,28,32,.9));
  border: 1px solid rgba(255,255,255,.16); cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: opacity .25s, transform .25s, background .25s;
}
.sp-arrow svg { width: 15px; height: 15px; }
.sp-arrow--prev { left: -6px; } .sp-arrow--next { right: -6px; }
.sp-arrow:hover:not(:disabled) { background: #ff7a45; border-color: #ff7a45; transform: translateY(-50%) scale(1.08); }
.sp-arrow:disabled { opacity: 0; pointer-events: none; }

.sp-railbar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 4px 0; }
.sp-railbar-fill { display: block; height: 100%; width: 30%; border-radius: 2px; background: linear-gradient(90deg,#ff7a45,#ffb545); transition: transform .18s ease-out, width .25s; }

/* Filter pills — the active one lights in the accent, not a grey fill. */
.sp-tab { transition: color .2s, background .2s, border-color .2s, transform .2s; }
.sp-tab:hover { transform: translateY(-1px); }
.sp-tab.is-active { box-shadow: 0 4px 14px rgba(255,122,69,.35); }

html.light .sp-card { background: linear-gradient(165deg, hsl(var(--h) / .10), transparent 46%), #fff; border-color: rgba(0,0,0,.09); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html.light .sp-card:hover { box-shadow: 0 14px 34px hsl(var(--h) / .18), 0 2px 6px rgba(0,0,0,.06); }
html.light .sp-card-name, html.light .sp-price b { color: #16181d; }
html.light .sp-card-meta { border-top-color: rgba(0,0,0,.07); }
html.light .sp-arrow { background: rgba(255,255,255,.94); color: #16181d; border-color: rgba(0,0,0,.12); }
html.light .sp-arrow:hover:not(:disabled) { background: #c2410c; border-color: #c2410c; color: #fff; }
html.light .sp-railbar { background: rgba(0,0,0,.08); }
html.light .sp-railbar-fill { background: linear-gradient(90deg,#c2410c,#ea8c1f); }

@media (prefers-reduced-motion: reduce) {
  .sp-card { animation: none; }
  .sp-card:hover { transform: none; }
  .sp-track { scroll-behavior: auto; }
}
@media (max-width: 560px) { .sp-card { flex-basis: 82vw; } .sp-arrow { display: none; } }

/* ── Forms & Templates library ────────────────────────────────────────────
   A document library is scanned, not read: the standard a form answers to
   (EM 385-1-1, NAVFAC 4330, SF-1428) is the thing an estimator searches for,
   so it gets its own line rather than being buried in the description. */
.fl-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.fl-cat { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 700; color: var(--gray-light); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 9px 15px; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.fl-cat:hover { transform: translateY(-1px); color: var(--white,#fff); }
.fl-cat.is-active { color: #fff; background: #ff7a45; border-color: #ff7a45; box-shadow: 0 4px 14px rgba(255,122,69,.3); }
.fl-cat-n { font-family: var(--font-mono); font-size: 10.5px; opacity: .75; }

.fl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 16px; }
.fl-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 5px; }
.fl-head p { font-size: 13.5px; line-height: 1.6; color: var(--gray-light); margin: 0; max-width: 78ch; }
.fl-count { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); white-space: nowrap; padding-top: 4px; }

.fl-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.fl-search { flex: 1 1 260px; min-width: 200px; font: inherit; font-size: 13.5px; color: var(--white,#fff); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 14px; }
.fl-search:focus { outline: none; border-color: #ff7a45; }
.fl-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-group { font: inherit; font-size: 12px; font-weight: 700; color: var(--gray-mid); background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 6px 13px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.fl-group:hover { color: var(--white,#fff); }
.fl-group.is-active { color: #fff; background: rgba(255,122,69,.18); border-color: #ff7a45; }

.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fl-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 19px 16px; border-radius: 14px; text-decoration: none; overflow: hidden;
  background: linear-gradient(168deg, hsl(var(--h) / .10), transparent 44%), rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s, border-color .3s;
  animation: flIn .45s cubic-bezier(.2,.8,.25,1) both; animation-delay: calc(var(--i) * 35ms);
}
.fl-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, hsl(var(--h)), hsl(var(--h) / .2)); }
.fl-card:hover { transform: translateY(-4px); border-color: hsl(var(--h) / .5); box-shadow: 0 14px 32px hsl(var(--h) / .18), 0 2px 6px rgba(0,0,0,.2); }
.fl-card:focus-visible { outline: 2px solid hsl(var(--h)); outline-offset: 3px; }
@keyframes flIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.fl-card-top { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.fl-fmt { font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; color: hsl(var(--h)); background: hsl(var(--h) / .14); border: 1px solid hsl(var(--h) / .3); border-radius: 5px; padding: 3px 8px; }
.fl-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-light); background: rgba(255,255,255,.07); border-radius: 100px; padding: 3px 9px; }
.fl-pages { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-mid); }
.fl-card-name { font-size: 15px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; color: var(--white,#fff); margin: 2px 0 0; }
.fl-std { font-family: var(--font-mono); font-size: 11px; color: hsl(var(--h)); letter-spacing: .01em; }
.fl-desc { font-size: 12.5px; line-height: 1.55; color: var(--gray-light); margin: 0; flex: 1; }
.fl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 11px; margin-top: 4px; }
.fl-group-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-mid); }
.fl-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: hsl(var(--h)); }
.fl-dl svg { width: 13px; height: 13px; transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.fl-card:hover .fl-dl svg { transform: translateY(2px); }

.fl-card.is-missing { border-color: rgba(224,160,60,.6); }
.fl-missing { display: block; font-size: 11.5px; font-weight: 600; color: #e0a03c; background: rgba(224,160,60,.1); border-radius: 7px; padding: 7px 10px; margin-top: 4px; }
.fl-empty { grid-column: 1/-1; font-size: 13.5px; color: var(--gray-mid); padding: 34px 0; text-align: center; }
.fl-note { font-size: 11.5px; line-height: 1.6; color: var(--gray-mid); margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); max-width: 90ch; }
.fl-note strong { color: var(--gray-light); }

html.light .fl-cat, html.light .fl-search { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
html.light .fl-cat.is-active { background: #c2410c; border-color: #c2410c; }
html.light .fl-card { background: linear-gradient(168deg, hsl(var(--h) / .08), transparent 44%), #fff; border-color: rgba(0,0,0,.09); }
html.light .fl-card-name { color: #16181d; }
html.light .fl-head, html.light .fl-card-foot, html.light .fl-note { border-color: rgba(0,0,0,.09); }
html.light .fl-group { border-color: rgba(0,0,0,.12); }
html.light .fl-tag { background: rgba(0,0,0,.05); }
html.light .fl-group.is-active { color: #c2410c; background: rgba(194,65,12,.09); border-color: #c2410c; }
@media (prefers-reduced-motion: reduce) { .fl-card { animation: none; } .fl-card:hover { transform: none; } }

/* ── Form editor ──────────────────────────────────────────────────────────
   Split view: the fields you fill on the left, the document itself on the
   right. Everything runs client-side, so a plan full of contract numbers and
   incident detail never leaves the browser. */
.fl-acts { display: inline-flex; align-items: center; gap: 7px; }
.fl-open, .fl-dl { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; border-radius: 7px; padding: 6px 11px; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.fl-open { color: #fff; background: hsl(var(--h)); border: 1px solid hsl(var(--h)); }
.fl-open:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fl-dl { color: hsl(var(--h)); background: none; border: 1px solid hsl(var(--h) / .4); }
.fl-dl:hover { background: hsl(var(--h) / .12); transform: translateY(-1px); }
.fl-dl svg { width: 12px; height: 12px; }
.fl-card:hover .fl-dl svg { transform: translateY(2px); }

body.fe-open { overflow: hidden; }
.fe, .fe-sig { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fe[hidden], .fe-sig[hidden] { display: none; }
.fe-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(4px); }
.fe-panel { position: relative; display: flex; flex-direction: column; width: min(1360px, 100%); height: min(92vh, 940px); background: var(--surface-1, #14171c); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; }
html.light .fe-panel { background: #fff; border-color: rgba(0,0,0,.12); }

.fe-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
html.light .fe-head { border-color: rgba(0,0,0,.1); }
.fe-head-t h2 { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.fe-std { font-family: var(--font-mono); font-size: 11px; color: #ff7a45; }
html.light .fe-std { color: #c2410c; }
.fe-actions { display: flex; align-items: center; gap: 8px; }
.fe-btn { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gray-light); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.fe-btn:hover { color: var(--white,#fff); transform: translateY(-1px); }
.fe-btn--primary { color: #fff; background: #ff7a45; border-color: #ff7a45; }
html.light .fe-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #3b3f46; }
html.light .fe-btn:hover { color: #16181d; }
html.light .fe-btn--primary { background: #c2410c; border-color: #c2410c; color: #fff; }
.fe-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--gray-light); background: none; border: 1px solid rgba(255,255,255,.12); cursor: pointer; }
.fe-x svg { width: 14px; height: 14px; }
.fe-x:hover { color: var(--white,#fff); }

.fe-body { flex: 1; display: grid; grid-template-columns: 340px minmax(0,1fr); min-height: 0; }
.fe-side { border-right: 1px solid rgba(255,255,255,.1); overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
html.light .fe-side { border-color: rgba(0,0,0,.1); }
.fe-side-status { font-size: 12px; line-height: 1.55; color: var(--gray-mid); background: rgba(255,255,255,.04); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.fe-side-status strong { color: #e0a03c; }
html.light .fe-side-status { background: rgba(0,0,0,.03); }
.fe-fields { display: flex; flex-direction: column; gap: 12px; }
.fe-f { display: flex; flex-direction: column; gap: 5px; }
.fe-lab { font-size: 11.5px; font-weight: 600; color: var(--gray-light); }
.fe-f input[type="text"], .fe-f select { width: 100%; font: inherit; font-size: 13px; color: var(--white,#fff); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 10px; }
.fe-f input[type="text"]:focus, .fe-f select:focus { outline: none; border-color: #ff7a45; }
.fe-f input:disabled { opacity: .6; font-style: italic; }
html.light .fe-f input[type="text"], html.light .fe-f select { color: #16181d; background: #fff; border-color: rgba(0,0,0,.15); }
.fe-f-row { display: flex; gap: 7px; align-items: center; }
.fe-f--check { flex-direction: row; align-items: center; gap: 9px; }
.fe-f--check input { accent-color: #ff7a45; width: 16px; height: 16px; }
.fe-f--check .fe-lab { margin: 0; }
.fe-sigbtn { flex: none; font: inherit; font-size: 11px; font-weight: 700; color: #ff7a45; background: rgba(255,122,69,.12); border: 1px solid rgba(255,122,69,.4); border-radius: 7px; padding: 7px 11px; cursor: pointer; }
.fe-sigbtn:hover { background: rgba(255,122,69,.22); }
html.light .fe-sigbtn { color: #c2410c; background: rgba(194,65,12,.08); border-color: rgba(194,65,12,.35); }

.fe-view { background: #2a2d33; min-height: 0; }
.fe-frame { width: 100%; height: 100%; border: 0; display: block; background: #2a2d33; }

.fe-sig { z-index: 310; }
.fe-sig-panel { position: relative; width: min(700px, 100%); background: var(--surface-1,#14171c); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
html.light .fe-sig-panel { background: #fff; border-color: rgba(0,0,0,.12); }
.fe-sig-panel h3 { font-size: 17px; font-weight: 800; margin: 0 0 5px; }
.fe-sig-panel p { font-size: 12.5px; color: var(--gray-mid); margin: 0 0 14px; }
.fe-sig-pad { width: 100%; height: 200px; background: #fff; border: 1px dashed rgba(0,0,0,.28); border-radius: 10px; cursor: crosshair; touch-action: none; }
.fe-sig-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.fe-sig-sp { flex: 1; }

@media (max-width: 900px) {
  .fe { padding: 0; }
  .fe-panel { height: 100vh; border-radius: 0; }
  .fe-body { grid-template-columns: 1fr; grid-template-rows: minmax(0,44%) minmax(0,56%); }
  .fe-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* ── Forms card footer + editor: alignment fixes ──────────────────────────
   The footer was a 3-across flex row (category tag + two buttons) inside a
   ~250px card. Everything wrapped: the category label broke onto two lines and
   "Open & fill" split mid-phrase. Stack it instead — tag on its own line, two
   equal-width buttons under it — so nothing wraps at any card width. */
.fl-card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.fl-group-tag { font-size: 9.5px; letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fl-card:not(:has(.fl-open)) .fl-acts { grid-template-columns: 1fr; }
.fl-open, .fl-dl { justify-content: center; white-space: nowrap; padding: 8px 10px; }

/* Editor empty state: when there is no PDF to show, the viewer pane must not
   sit there as a black rectangle with the browser's own "Failed to load"
   error in it. */
.fe-view { display: grid; place-items: center; }
.fe-frame[hidden] { display: none; }
.fe-empty { max-width: 44ch; padding: 28px; text-align: center; color: var(--gray-light); }
.fe-empty svg { width: 40px; height: 40px; color: var(--gray-mid); margin-bottom: 14px; }
.fe-empty h3 { font-size: 16px; font-weight: 750; margin: 0 0 7px; color: var(--white,#fff); }
.fe-empty p { font-size: 13px; line-height: 1.6; margin: 0; }
.fe-empty code { font-family: var(--font-mono); font-size: 11.5px; background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 4px; }
html.light .fe-view { background: #eceef1; }
html.light .fe-empty h3 { color: #16181d; }
html.light .fe-empty code { background: rgba(0,0,0,.06); }
.fe-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Workbook viewer — sheet tabs over a scrolling grid. */
.fl-card:not(:has(.fl-open)) .fl-acts { grid-template-columns: 1fr 1fr; }
.fe-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface-1,#14171c); }
html.light .fe-sheet { background: #fff; }
.fe-sheet[hidden] { display: none; }
.fe-view { position: relative; }
.fe-tabs { display: flex; gap: 2px; padding: 9px 12px 0; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.1); flex: none; }
html.light .fe-tabs { border-color: rgba(0,0,0,.1); }
.fe-tab { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--gray-mid); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 13px; cursor: pointer; white-space: nowrap; }
.fe-tab:hover { color: var(--white,#fff); }
.fe-tab.is-active { color: #ff7a45; border-bottom-color: #ff7a45; }
html.light .fe-tab:hover { color: #16181d; }
html.light .fe-tab.is-active { color: #c2410c; border-bottom-color: #c2410c; }
.fe-grid { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 12px; }
.fe-grid table { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fe-grid td, .fe-grid th { border: 1px solid rgba(255,255,255,.1); padding: 4px 8px; white-space: nowrap; color: var(--gray-light); max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.fe-grid tr:first-child td { font-weight: 700; color: var(--white,#fff); background: rgba(255,255,255,.04); position: sticky; top: 0; }
html.light .fe-grid td, html.light .fe-grid th { border-color: rgba(0,0,0,.1); color: #3b3f46; }
html.light .fe-grid tr:first-child td { color: #16181d; background: #f3f4f6; }

.fe-anysig { border-top: 1px solid rgba(255,255,255,.1); margin-top: 6px; padding-top: 14px; display: flex; flex-direction: column; gap: 5px; }
html.light .fe-anysig { border-color: rgba(0,0,0,.1); }
.fe-anysig select { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--white,#fff); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 10px; }
html.light .fe-anysig select { color: #16181d; background: #fff; border-color: rgba(0,0,0,.15); }

/* ── Preview is READ-ONLY ─────────────────────────────────────────────────
   Chrome's built-in PDF viewer happily accepts typing into form fields, but
   those keystrokes live inside the viewer and are invisible to pdf-lib — so
   anyone who filled the form on the right and hit "Download filled" got a
   blank document back. Make the preview non-interactive and say where to
   type, so the work cannot be lost that way. */
.fe-frame { pointer-events: none; }
.fe-view::after { content: "Preview — type in the panel on the left"; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff; background: rgba(0,0,0,.62); border-radius: 100px; padding: 5px 13px; pointer-events: none; }
.fe-sheet:not([hidden]) ~ .fe-frame, .fe-view:has(.fe-sheet:not([hidden]))::after { content: none; }

/* Formatting bar — acts on the focused field. */
.fe-fmt { position: sticky; top: -16px; z-index: 3; background: var(--surface-1,#14171c); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 9px 10px; margin-bottom: 14px; opacity: .55; transition: opacity .2s; }
.fe-fmt.is-live { opacity: 1; border-color: rgba(255,122,69,.4); }
html.light .fe-fmt { background: #fff; border-color: rgba(0,0,0,.12); }
.fe-fmt-for { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-mid); margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-fmt.is-live .fe-fmt-for { color: #ff7a45; }
html.light .fe-fmt.is-live .fe-fmt-for { color: #c2410c; }
.fe-fmt-row { display: flex; align-items: center; gap: 5px; }
.fe-fmt-font, .fe-fmt-size { font: inherit; font-size: 11.5px; color: var(--white,#fff); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 5px 6px; }
.fe-fmt-font { flex: 1; min-width: 0; }
.fe-fmt-size { width: 62px; }
html.light .fe-fmt-font, html.light .fe-fmt-size { color: #16181d; background: #fff; border-color: rgba(0,0,0,.15); }
.fe-fmt-b { width: 28px; height: 28px; display: grid; place-items: center; font: inherit; font-size: 12.5px; color: var(--gray-light); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; cursor: pointer; flex: none; }
.fe-fmt-b:hover { color: var(--white,#fff); }
.fe-fmt-b.is-on { color: #fff; background: #ff7a45; border-color: #ff7a45; }
.fe-fmt-gap { flex: 1; }
html.light .fe-fmt-b { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #3b3f46; }
html.light .fe-fmt-b.is-on { background: #c2410c; border-color: #c2410c; color: #fff; }

/* ── Page stage ───────────────────────────────────────────────────────────
   One page at a time, whole page visible, and scrolling snaps to the next.
   No paging buttons: scroll IS the navigation, which is what the browser's
   own viewer got wrong in a modal this size. */
.fe-body { grid-template-columns: 196px minmax(0,1fr); }
.fe-side { padding: 12px; }
.fe-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fe-thumbs[hidden] { display: none; }
.fe-thumb { position: relative; display: block; padding: 0; background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; overflow: hidden; cursor: pointer; line-height: 0; transition: border-color .2s, transform .2s, box-shadow .2s; }
.fe-thumb canvas { width: 100%; height: auto; display: block; background: #fff; }
.fe-thumb span { position: absolute; right: 3px; bottom: 3px; font-size: 9.5px; font-weight: 700; line-height: 1; color: #fff; background: rgba(0,0,0,.62); border-radius: 3px; padding: 2px 5px; }
.fe-thumb:hover { border-color: rgba(255,122,69,.6); transform: translateY(-1px); }
.fe-thumb.is-active { border-color: #ff7a45; box-shadow: 0 0 0 2px rgba(255,122,69,.28); }
html.light .fe-thumb { border-color: rgba(0,0,0,.14); }
html.light .fe-thumb.is-active { border-color: #c2410c; box-shadow: 0 0 0 2px rgba(194,65,12,.22); }

.fe-pages { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; background: #2f3238; }
.fe-pages[hidden] { display: none; }
html.light .fe-pages { background: #e9ebee; }
.fe-page { position: relative; height: 100%; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; padding: 20px; }
.fe-page-in { position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.45); animation: fePageIn .38s cubic-bezier(.2,.8,.25,1) both; }
@keyframes fePageIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.fe-page canvas { display: block; border-radius: 2px; }
.fe-pagenum { position: absolute; right: 16px; bottom: 14px; font-family: var(--font-mono); font-size: 10.5px; color: #fff; background: rgba(0,0,0,.55); border-radius: 100px; padding: 4px 10px; }

/* Field overlay — real inputs sitting on the page at the PDF's own coords. */
.fe-layer { position: absolute; inset: 0; }
.fe-fld { position: absolute; margin: 0; font-family: var(--font); color: #10233f; background: rgba(37,99,235,.07); border: 1px solid rgba(37,99,235,.28); border-radius: 2px; padding: 0 3px; outline: none; resize: none; line-height: 1.15; }
.fe-fld:hover { background: rgba(37,99,235,.13); }
.fe-fld:focus { background: #fff; border-color: #ff7a45; box-shadow: 0 0 0 2px rgba(255,122,69,.32); z-index: 2; }
.fe-fld[type="checkbox"], .fe-fld[type="radio"] { padding: 0; accent-color: #c2410c; cursor: pointer; }
textarea.fe-fld { padding: 2px 3px; }

/* Toolbar moves to the top of the stage now the rail owns the left. */
.fe-toolbar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(20,23,28,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1); }
.fe-toolbar[hidden] { display: none; }
html.light .fe-toolbar { background: rgba(255,255,255,.94); border-color: rgba(0,0,0,.1); }
.fe-toolbar .fe-fmt-for { margin: 0 8px 0 0; max-width: 190px; }
.fe-toolbar .fe-fmt-row { display: flex; align-items: center; gap: 5px; }
.fe-pages { padding-top: 0; }
.fe-page:first-child { padding-top: 60px; }

@media (max-width: 900px) {
  .fe-body { grid-template-columns: 1fr; grid-template-rows: 92px minmax(0,1fr); }
  .fe-thumbs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62px; overflow-x: auto; }
  .fe-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* ── Editor sizing + layout corrections ───────────────────────────────────
   1. The panel was capped at 1360×940 inside a 24px inset — on a large screen
      that left the page itself small. Use nearly the whole viewport.
   2. Page one sat low because I had padded it to clear an absolutely
      positioned toolbar. The toolbar is now part of the flow instead, so every
      page — including the first — centres identically.
   3. The overlay label said "type in the panel on the left", which stopped
      being true when fields moved onto the page. */
.fe { padding: 10px; }
.fe-panel { width: min(1900px, 99vw); height: min(97vh, 1300px); }
.fe-body { grid-template-columns: 210px minmax(0,1fr); }

.fe-view { display: flex; flex-direction: column; position: relative; }
.fe-toolbar { position: static; flex: none; }
.fe-pages { position: relative; inset: auto; flex: 1; min-height: 0; scroll-padding: 0; }
.fe-page { padding: 24px; }
.fe-page:first-child { padding-top: 24px; }
.fe-empty { margin: auto; }

.fe-view::after { content: "Page Preview"; }

/* Free placement — text and signatures dropped anywhere on a page, for
   templates that carry no form fields at all. */
.fe-pages.is-placing .fe-page-in { cursor: crosshair; }
.fe-pages.is-placing .fe-fld { pointer-events: none; }
.fe-fmt-add { width: auto !important; padding: 0 10px; font-size: 11px !important; font-weight: 700; white-space: nowrap; }
.fe-fmt-div { width: 1px; height: 18px; background: rgba(255,255,255,.16); margin: 0 3px; flex: none; }
html.light .fe-fmt-div { background: rgba(0,0,0,.16); }

.fe-note { position: absolute; transform: translate(0, -50%); display: flex; align-items: center; gap: 3px; z-index: 3; }
.fe-note input { font-family: var(--font); color: #111; background: rgba(255,255,255,.9); border: 1px dashed rgba(255,122,69,.7); border-radius: 3px; padding: 1px 4px; min-width: 130px; outline: none; }
.fe-note input:focus { background: #fff; border-style: solid; box-shadow: 0 0 0 2px rgba(255,122,69,.3); }
.fe-note--sig img { max-width: 190px; max-height: 70px; display: block; }
.fe-note-x { width: 16px; height: 16px; display: grid; place-items: center; font-size: 12px; line-height: 1; color: #fff; background: rgba(0,0,0,.55); border: none; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity .15s; flex: none; }
.fe-note:hover .fe-note-x, .fe-note:focus-within .fe-note-x { opacity: 1; }
.fe-note-x:hover { background: #dc3c3c; }

/* ── Stage chrome corrections ─────────────────────────────────────────────
   1. The toolbar floated as a centred pill because .fe-view still carried
      `place-items: center` from when it was a grid. On a flex column that
      resolves to align-items:center, which shrink-wraps every child — so the
      toolbar sized to its contents and hovered above the page instead of
      spanning the stage. Stretch the children.
   2. The stage scrollbar is redundant: the thumbnail rail already shows where
      you are, and scrolling snaps page to page.
   3. The area around the page and the stage behind it were two different
      greys. One surface, one colour. */
.fe-view { align-items: stretch; background: #2f3238; }
html.light .fe-view { background: #e9ebee; }

.fe-toolbar { width: 100%; margin: 0; border-radius: 0; background: var(--surface-1,#14171c); backdrop-filter: none; }
html.light .fe-toolbar { background: #fff; }

.fe-pages { background: transparent; scrollbar-width: none; -ms-overflow-style: none; }
.fe-pages::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Toolbar + note handling ──────────────────────────────────────────────
   Font names were clipped by a select sized for a narrow rail; the toolbar now
   spans the stage, so give it room. */
.fe-fmt-font { flex: 0 0 128px; min-width: 128px; }
.fe-fmt-size { width: 78px; }
.fe-fmt-b svg { width: 14px; height: 14px; }

/* Placing mode needs to look like placing mode: a dotted target the cursor
   carries, so it is obvious the next click drops something. */
.fe-pages.is-placing .fe-page-in { cursor: crosshair; outline: 2px dashed rgba(255,122,69,.65); outline-offset: 4px; }
.fe-pages.is-placing .fe-page-in::after { content: "Click where it goes"; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #fff; background: rgba(196,65,12,.92); border-radius: 100px; padding: 4px 12px; pointer-events: none; }

/* Placed items are draggable by a grip, so the input stays clickable for typing. */
.fe-note { border-radius: 4px; padding: 2px; }
.fe-note.is-dragging { opacity: .8; }
.fe-note-grip { width: 12px; align-self: stretch; min-height: 18px; border-radius: 3px 0 0 3px; background: repeating-linear-gradient(0deg, rgba(255,122,69,.85) 0 2px, transparent 2px 4px); cursor: grab; flex: none; opacity: 0; transition: opacity .15s; }
.fe-note:hover .fe-note-grip, .fe-note:focus-within .fe-note-grip { opacity: 1; }
.fe-note.is-dragging .fe-note-grip { cursor: grabbing; opacity: 1; }
.fe-note:hover, .fe-note:focus-within { outline: 1px dashed rgba(255,122,69,.6); }

/* ── Workbook viewer, rebuilt ─────────────────────────────────────────────
   An Excel-shaped grid: column letters, row numbers, real column widths,
   merged cells honoured, figures right-aligned. Both rails stay pinned while
   you scroll, which is the whole reason a spreadsheet has them. */
.fe-tabs { align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.fe-sheetsel { flex: 0 1 260px; min-width: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--white,#fff); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 7px 10px; }
html.light .fe-sheetsel { color: #16181d; background: #fff; border-color: rgba(0,0,0,.15); }
.fe-sheetnav { width: 30px; height: 30px; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--gray-light); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; cursor: pointer; flex: none; }
.fe-sheetnav:hover { color: var(--white,#fff); border-color: #ff7a45; }
html.light .fe-sheetnav { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.14); color: #3b3f46; }
.fe-sheetcount { font-size: 11.5px; color: var(--gray-mid); margin-left: auto; }

.fe-grid { padding: 0; background: #fff; }
html.light .fe-grid { background: #fff; }
.fe-grid-empty { padding: 40px; text-align: center; font-size: 13px; color: var(--gray-mid); }
table.fe-xl { border-collapse: separate; border-spacing: 0; font-size: 11.5px; color: #1f2328; background: #fff; table-layout: fixed; }
table.fe-xl th, table.fe-xl td { border-right: 1px solid #d6d9de; border-bottom: 1px solid #d6d9de; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
table.fe-xl td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.fe-xl thead th { position: sticky; top: 0; z-index: 3; height: 22px; text-align: center; font-size: 10.5px; font-weight: 600; color: #5b6270; background: #f1f3f5; border-bottom: 1px solid #b9bec6; }
table.fe-xl .fe-gutter { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; text-align: center; font-size: 10.5px; font-weight: 600; color: #5b6270; background: #f1f3f5; border-right: 1px solid #b9bec6; }
table.fe-xl thead th.fe-gutter { z-index: 4; }
table.fe-xl tbody tr:hover td { background: #f7f9fc; }

/* ── Placement ghost ──────────────────────────────────────────────────────
   Show the footprint of what is about to be dropped, at the cursor. Outlining
   the whole page answered "which page", which was never the question. */
.fe-pages.is-placing .fe-page-in { outline: none; }
.fe-pages.is-placing .fe-page-in::after { content: none; }
.fe-ghost { position: fixed; z-index: 400; pointer-events: none; width: 150px; height: 22px; transform: translate(0, -50%); border: 1.5px dashed #c2410c; border-radius: 3px; background: rgba(194,65,12,.10); }
.fe-ghost.is-sig { width: 180px; height: 46px; }
.fe-ghost-l { position: absolute; left: 0; top: -17px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c2410c; border-radius: 3px; padding: 2px 6px; white-space: nowrap; }

/* Sheets / printed-pages toggle for workbooks. */
.fe-viewtog { display: inline-flex; margin-left: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; overflow: hidden; flex: none; }
html.light .fe-viewtog { border-color: rgba(0,0,0,.14); }
.fe-viewtog button { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--gray-mid); background: none; border: none; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.fe-viewtog button:hover { color: var(--white,#fff); }
.fe-viewtog button.is-on { color: #fff; background: #ff7a45; }
html.light .fe-viewtog button:hover { color: #16181d; }
html.light .fe-viewtog button.is-on { background: #c2410c; color: #fff; }

/* Colour swatch in the toolbar. */
.fe-fmt-color { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); overflow: hidden; flex: none; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.06); }
.fe-fmt-color input { width: 40px; height: 40px; border: none; padding: 0; background: none; cursor: pointer; }
html.light .fe-fmt-color { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); }


/* A line carried in the total at an ASSUMED quantity of 1, because the takeoff
   never stated one. It is IN the number - so it is not styled as an error like
   an unpriced row - but the assumption has to be visible, hence the amber rail. */
.pe-row.is-assumed { background: rgba(240,170,50,.05); }
.pe-row.is-assumed .pe-c-qty { box-shadow: inset 2px 0 0 rgba(240,170,50,.75); }
.pe-c-assumed { color: #f0aa32; }

/* ══════════════════════════════════════════════════════════════════════════
   SUBMITTAL REGISTER - the first live execution module.

   The screen opens on WHAT IS LATE. A register sorted by section number is a
   filing cabinet; the only field that tells anyone to act today is the last
   date a package can go out and still land on site in time, so the layout
   leads with it.

   COLOURS FOLLOW THIS FILE'S CONVENTION: dark is the default, light mode is an
   explicit html.light override. An earlier version used admin.css's token
   names, which do not exist here, so every colour fell through to a hardcoded
   dark value and the whole register was invisible in light mode.
   ══════════════════════════════════════════════════════════════════════════ */

.sr-body { padding: 4px 0 24px; }
.sr-head { margin-bottom: 18px; }

.sr-headline {
    font-size: 15px; font-weight: 650; color: var(--white); line-height: 1.5;
    padding: 12px 14px; border-radius: 10px;
    border-left: 3px solid #14a86a; background: rgba(20, 168, 106, 0.10);
}
.sr-headline.is-late { border-left-color: var(--red); background: rgba(196, 23, 23, 0.12); color: #ff8f8f; }

.sr-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sr-stat {
    flex: 0 0 auto; min-width: 96px; padding: 10px 13px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--charcoal);
}
.sr-stat strong { display: block; font-size: 21px; font-weight: 800; line-height: 1.1; color: var(--white); }
.sr-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-light); }
.sr-stat.is-late { border-color: rgba(196, 23, 23, .45); }
.sr-stat.is-late strong { color: #ff6b6b; }
.sr-stat.is-soon strong { color: #e0a03b; }

.sr-unassigned {
    margin-top: 12px; padding: 11px 13px; border-radius: 9px; font-size: 13px; line-height: 1.55;
    color: #e0a03b; background: rgba(224, 135, 11, 0.10); border-left: 2px solid #e0870b;
}

.sr-list { display: flex; flex-direction: column; gap: 12px; }
.sr-pkg { border: 1px solid var(--border); border-radius: 12px; background: var(--charcoal); padding: 14px 15px; }
.sr-pkg.is-late { border-color: rgba(196, 23, 23, 0.45); }
.sr-pkg.is-soon { border-color: rgba(224, 135, 11, 0.40); }
.sr-pkg.is-done { opacity: .62; }

.sr-pkg-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.sr-section { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--white); }
.sr-divtitle { display: block; font-size: 12px; color: var(--gray-light); margin-top: 2px; }
.sr-pkg-sub { margin-top: 8px; font-size: 12px; color: var(--gray-light); }

.sr-when { text-align: right; }
.sr-badge {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 100px; white-space: nowrap;
    background: rgba(255, 255, 255, .08); color: var(--gray-light);
}
.sr-badge.is-late { background: rgba(196, 23, 23, .20); color: #ff6b6b; }
.sr-badge.is-soon { background: rgba(224, 135, 11, .18); color: #e0a03b; }
.sr-badge.is-done { background: rgba(20, 168, 106, .18); color: #2fc07d; }
.sr-by { display: block; font-size: 11px; color: var(--gray-light); margin-top: 4px; }

.sr-items { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sr-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px;
    padding: 8px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, .04); color: var(--white);
}
.sr-item.is-closed { opacity: .55; }
.sr-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--gray-light); }
.sr-type { font-weight: 650; color: var(--white); }
.sr-type em {
    font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--gray-light); margin-left: 6px;
}

.sr-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px;
    background: rgba(255, 255, 255, .08); color: var(--gray-light); }
.sr-status.s-approved, .sr-status.s-approved_as_noted { background: rgba(20, 168, 106, .18); color: #2fc07d; }
.sr-status.s-revise_resubmit, .sr-status.s-rejected { background: rgba(196, 23, 23, .18); color: #ff6b6b; }
.sr-status.s-submitted, .sr-status.s-under_review { background: rgba(56, 132, 255, .18); color: #6ba6ff; }

.sr-ball { font-size: 11.5px; color: var(--gray-light); }
.sr-rev { font-size: 11px; color: #e0a03b; }
.sr-overdue { font-size: 11px; font-weight: 700; color: #ff6b6b; }

.sr-actions { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sr-act {
    appearance: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
    padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border);
    background: transparent; color: var(--gray-light);
}
.sr-act:hover { border-color: var(--red); color: var(--white); }

.sr-empty { padding: 30px 4px; max-width: 62ch; color: var(--gray-light); }
.sr-empty h3 { font-size: 18px; margin: 0 0 8px; color: var(--white); }
.sr-empty p { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.sr-empty.is-err { color: #ff6b6b; }
.sr-start { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sr-start select, .sr-start input {
    background: var(--charcoal); border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 11px; font: inherit; font-size: 13px; color: var(--white);
}
.sr-field { display: flex; flex-direction: column; gap: 5px; }
.sr-field span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-light); }
.sr-note { font-size: 12px; color: var(--gray-light); margin-top: 12px; line-height: 1.55; }

/* A shipped module must stop reading like a roadmap item. */
.up-mod.is-live { border-color: rgba(20, 168, 106, 0.40); }
.up-mod-live {
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 100px; margin-left: 8px;
    background: rgba(20, 168, 106, 0.18); color: #2fc07d;
}

/* ── LIGHT MODE ───────────────────────────────────────────────────────────
   One override per rule that sets a colour, matching how the rest of this file
   works. Anything omitted here is a thing that will be invisible on white. */
html.light .sr-headline { color: var(--black); background: rgba(20, 168, 106, 0.09); }
html.light .sr-headline.is-late { color: #8a1512; background: rgba(196, 23, 23, 0.07); }

html.light .sr-stat { background: #fff; border-color: rgba(0, 0, 0, 0.10); }
html.light .sr-stat strong { color: var(--black); }
html.light .sr-stat span { color: var(--gray-mid); }
html.light .sr-stat.is-late strong { color: #c41717; }
html.light .sr-stat.is-soon strong { color: #b8751a; }

html.light .sr-unassigned { color: #8a5308; background: rgba(224, 135, 11, 0.08); }

html.light .sr-pkg { background: #fff; border-color: rgba(0, 0, 0, 0.10); }
html.light .sr-section { color: var(--black); }
html.light .sr-divtitle, html.light .sr-pkg-sub, html.light .sr-by { color: var(--gray-mid); }

html.light .sr-badge { background: rgba(0, 0, 0, 0.06); color: var(--gray-dark); }
html.light .sr-badge.is-late { background: rgba(196, 23, 23, .12); color: #c41717; }
html.light .sr-badge.is-soon { background: rgba(224, 135, 11, .14); color: #a8690f; }
html.light .sr-badge.is-done { background: rgba(20, 168, 106, .14); color: #0f7a4b; }

html.light .sr-item { background: #f6f6f7; color: var(--black); }
html.light .sr-num, html.light .sr-ball, html.light .sr-type em { color: var(--gray-mid); }
html.light .sr-type { color: var(--black); }

html.light .sr-status { background: rgba(0, 0, 0, 0.06); color: var(--gray-dark); }
html.light .sr-status.s-approved,
html.light .sr-status.s-approved_as_noted { background: rgba(20, 168, 106, .14); color: #0f7a4b; }
html.light .sr-status.s-revise_resubmit,
html.light .sr-status.s-rejected { background: rgba(196, 23, 23, .12); color: #c41717; }
html.light .sr-status.s-submitted,
html.light .sr-status.s-under_review { background: rgba(56, 132, 255, .12); color: #2b5fb8; }

html.light .sr-rev { color: #a8690f; }
html.light .sr-overdue { color: #c41717; }

html.light .sr-act { border-color: rgba(0, 0, 0, 0.14); color: var(--gray-dark); }
html.light .sr-act:hover { border-color: var(--red); color: var(--black); }

html.light .sr-empty { color: var(--gray-mid); }
html.light .sr-empty h3 { color: var(--black); }
/* The dark-mode error red is too pale to read on white. */
html.light .sr-empty.is-err { color: #c41717; }
html.light .sr-start select,
html.light .sr-start input { background: #fff; border-color: rgba(0, 0, 0, 0.14); color: var(--black); }
html.light .sr-field span, html.light .sr-note { color: var(--gray-mid); }

html.light .up-mod-live { background: rgba(20, 168, 106, 0.12); color: #0f7a4b; }

@media (max-width: 700px) {
    .sr-item { align-items: flex-start; }
    .sr-actions { margin-left: 0; width: 100%; }
    .sr-start select, .sr-start input, .sr-field { width: 100%; }
}

/* ── RFI register ─────────────────────────────────────────────────────────
   Shares the .sr-* shell. Only what an RFI has and a submittal does not. */

.rf-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.rf-impact {
    margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--gray-light);
    padding: 10px 12px; border-radius: 9px; background: rgba(255, 255, 255, .04);
}
.rf-impact strong { color: var(--white); }

.rf-origin {
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    margin-left: 8px; padding: 3px 8px; border-radius: 100px;
    background: rgba(56, 132, 255, .18); color: #6ba6ff;
}

.rf-question {
    margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--gray-light);
    white-space: pre-wrap;
}

/* Never presented as an answer: a starting point that cites what the documents
   already say, and a human sends it. */
.rf-suggested {
    margin-top: 11px; padding: 11px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.55;
    background: rgba(224, 135, 11, .08); border-left: 2px solid #e0870b; color: var(--gray-light);
}
.rf-suggested strong { color: #e0a03b; }
.rf-suggested p { margin: 6px 0 0; color: var(--gray-light); }

.rf-answer {
    margin-top: 11px; padding: 11px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.55;
    background: rgba(20, 168, 106, .08); border-left: 2px solid #14a86a; color: var(--gray-light);
}
.rf-answer strong { color: #2fc07d; }
.rf-answer p { margin: 6px 0 0; white-space: pre-wrap; }
.rf-delta { margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--white); }

.sr-status.s-open { background: rgba(224, 135, 11, .18); color: #e0a03b; }
.sr-status.s-answered { background: rgba(56, 132, 255, .18); color: #6ba6ff; }
.sr-status.s-closed { background: rgba(20, 168, 106, .18); color: #2fc07d; }
.sr-status.s-draft { background: rgba(255, 255, 255, .08); color: var(--gray-light); }

html.light .rf-impact { background: #f6f6f7; color: var(--gray-mid); }
html.light .rf-impact strong { color: var(--black); }
html.light .rf-origin { background: rgba(56, 132, 255, .12); color: #2b5fb8; }
html.light .rf-question { color: var(--gray-dark); }
html.light .rf-suggested { background: rgba(224, 135, 11, .07); color: var(--gray-dark); }
html.light .rf-suggested strong { color: #a8690f; }
html.light .rf-suggested p { color: var(--gray-dark); }
html.light .rf-answer { background: rgba(20, 168, 106, .07); color: var(--gray-dark); }
html.light .rf-answer strong { color: #0f7a4b; }
html.light .rf-delta { color: var(--black); }
html.light .sr-status.s-open { background: rgba(224, 135, 11, .14); color: #a8690f; }
html.light .sr-status.s-answered { background: rgba(56, 132, 255, .12); color: #2b5fb8; }
html.light .sr-status.s-closed { background: rgba(20, 168, 106, .14); color: #0f7a4b; }
html.light .sr-status.s-draft { background: rgba(0, 0, 0, .06); color: var(--gray-dark); }

/* ── EXECUTION FORM MODAL ─────────────────────────────────────────────────
   Replaces window.prompt, which gave one unlabelled line, no validation, no
   multi-line question, and browser chrome reading "www.rmpac.ai says". Built
   once because twelve modules need it. */

.xf-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px);
}
.xf-modal {
    width: min(560px, 100%); max-height: 88vh; overflow: auto;
    background: var(--charcoal); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.xf-head { padding: 20px 22px 0; }
.xf-head h3 { margin: 0; font-size: 19px; font-weight: 750; color: var(--white); }
.xf-lede { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--gray-light); }

.xf-body { padding: 18px 22px 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.xf-field { display: flex; flex-direction: column; gap: 6px; }
.xf-field.is-wide { grid-column: 1 / -1; }
.xf-field > span {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gray-light);
}
.xf-field > span em {
    font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--red); margin-left: 4px;
}
.xf-field input, .xf-field textarea, .xf-field select {
    background-color: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); border-radius: 9px;
    padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--white); width: 100%;
}
.xf-field textarea { resize: vertical; line-height: 1.55; }
.xf-field input:focus, .xf-field textarea:focus, .xf-field select:focus {
    outline: none; border-color: var(--red);
}
.xf-field small { font-size: 11.5px; color: var(--gray-light); line-height: 1.45; }

.xf-err {
    margin: 10px 22px 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
    background: rgba(196, 23, 23, .14); color: #ff8f8f;
}

/* Forms with sections: a heading row that spans the grid, a kicker above
   the title, a wider dialog, a mono field for codes. */
.xf-modal.is-lg { width: min(760px, 100%); }
.xf-kicker { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 7px; }
.xf-sec {
    grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border);
}
.xf-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.xf-sec b { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.xf-sec b::before { content: ""; display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--red); margin-right: 9px; vertical-align: 3px; }
.xf-sec small { font-size: 12px; line-height: 1.45; color: var(--gray-light); }
.xf-field input.is-mono { font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.xf-field input[type="date"] { color-scheme: dark; }
html.light .xf-field input[type="date"] { color-scheme: light; }
.xf-kbd { margin-right: auto; font-size: 11.5px; color: var(--gray-light); align-self: center; }
html.light .xf-sec b { color: var(--black); }
html.light .xf-sec small, html.light .xf-kbd { color: var(--gray-mid); }

/* THE JOB ID CHIP. The same look everywhere: header, card, drawer. */
.ws-job, .ws-meta .ws-job, .ws-card-m .ws-job, .fn-card-m .ws-job {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
    padding: 3px 10px; border-radius: 100px; white-space: nowrap;
    color: #ffb3b3; background: rgba(196,23,23,.13); border: 1px solid rgba(196,23,23,.45);
}
.ws-job::before { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--red); flex: 0 0 auto; }

/* What the assistant offers to do next, and what else it might have meant. */
.as-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.as-act { padding: 6px 12px; font-size: 12px; }
.as-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.as-alt > span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
html.light .as-alt > span { color: var(--gray-mid); }

/* The job's document boxes: one per category, each a docs.js mount. */
.ws-docgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.ws-docbox { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: rgba(255,255,255,.03); min-width: 0; }
html.light .ws-docbox { background: #fff; border-color: rgba(0,0,0,.09); }
/* Every pill in a meta row shares one height and one baseline: the chip,
   the plain spans and the "From OPP-009" button were three different
   heights and read as misaligned. */
.ws-meta { align-items: center; }
.ws-meta > span, .ws-meta > .ws-job, .ws-meta > .sr-act, .ws-meta > .cc-pill {
    display: inline-flex; align-items: center; box-sizing: border-box;
    min-height: 26px; padding-top: 0; padding-bottom: 0; line-height: 1.2; border-radius: 100px;
}
.ws-meta > .sr-act { font-size: 11.5px; padding-left: 10px; padding-right: 10px; }
.ws-meta > .pc-from { font-size: 11.5px; }
.ws-meta > .pc-from b { font-weight: 800; margin-left: 4px; }
.ws-job.is-sm { font-size: 10px; padding: 1px 7px 1px 6px; gap: 5px; }
.ws-job.is-sm::before { width: 5px; height: 5px; }
html.light .ws-job, html.light .ws-meta .ws-job, html.light .ws-card-m .ws-job, html.light .fn-card-m .ws-job {
    color: #a01212; background: rgba(196,23,23,.08); border-color: rgba(196,23,23,.35);
}
.rc-job { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.rc-job-n {
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
    border: 0; background: none; color: var(--gray-light); text-align: left;
}
.rc-job-n:hover { color: var(--white); text-decoration: underline; }
html.light .rc-job-n { color: var(--gray-mid); } html.light .rc-job-n:hover { color: var(--black); }

.xf-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 20px; }
.xf-cancel, .xf-ok {
    appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 650;
    padding: 10px 18px; border-radius: 9px; border: 1px solid var(--border);
    background: transparent; color: var(--gray-light);
}
.xf-cancel:hover { color: var(--white); }
.xf-ok { background: var(--red); border-color: var(--red); color: #fff; }
.xf-ok:hover { background: var(--red-dark); border-color: var(--red-dark); }
.xf-ok.is-danger { background: #a01212; border-color: #a01212; }

.sr-act.is-danger { border-color: rgba(196, 23, 23, .35); color: #ff8f8f; }
.sr-act.is-danger:hover { border-color: var(--red); background: rgba(196, 23, 23, .12); color: #fff; }
.sr-pkg-del { margin-top: 8px; display: inline-block; }

html.light .xf-modal { background: #fff; border-color: rgba(0, 0, 0, 0.12); }
html.light .xf-head h3 { color: var(--black); }
html.light .xf-lede, html.light .xf-field > span, html.light .xf-field small { color: var(--gray-mid); }
html.light .xf-field input,
html.light .xf-field textarea,
html.light .xf-field select { background-color: #fff; border-color: rgba(0, 0, 0, 0.16); color: var(--black); }
html.light .xf-err { background: rgba(196, 23, 23, .09); color: #c41717; }
html.light .xf-cancel { color: var(--gray-dark); border-color: rgba(0, 0, 0, 0.16); }
html.light .xf-cancel:hover { color: var(--black); }
html.light .sr-act.is-danger { color: #c41717; border-color: rgba(196, 23, 23, .3); }
html.light .sr-act.is-danger:hover { color: #fff; background: var(--red); }

@media (max-width: 560px) {
    .xf-body { grid-template-columns: 1fr; }
    .xf-foot { flex-direction: column-reverse; }
    .xf-cancel, .xf-ok { width: 100%; }
}

/* ── DRAWING REGISTER ─────────────────────────────────────────────────────
   The currency check leads: not "this might be stale" but "this was bid on
   Rev A, and Rev C has been current since 14 March". */

.dw-disc {
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    margin-left: 8px; padding: 3px 7px; border-radius: 5px;
    background: rgba(255, 255, 255, .08); color: var(--gray-light);
}

.dw-detail {
    margin-top: 10px; padding: 11px 13px; border-radius: 9px; font-size: 13px; line-height: 1.6;
    background: rgba(196, 23, 23, .10); border-left: 2px solid var(--red); color: #ff8f8f;
}

/* Unchecked is NOT current, and must never read as though it were. */
.sr-headline.dw-unknown {
    border-left-color: #8a8a92; background: rgba(255, 255, 255, .05); color: var(--gray-light);
}
.sr-headline.dw-unknown em {
    display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; opacity: .85;
}

.dw-stale {
    margin-top: 11px; padding: 11px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.55;
    background: rgba(196, 23, 23, .09); border-left: 2px solid var(--red); color: #ff8f8f;
}
.dw-stale strong { color: #fff; }

.dw-what { font-size: 11.5px; color: var(--gray-light); flex: 1 1 200px; min-width: 0; }

html.light .dw-disc { background: rgba(0, 0, 0, .06); color: var(--gray-dark); }
html.light .dw-detail { background: rgba(196, 23, 23, .07); color: #8a1512; }
html.light .sr-headline.dw-unknown { background: rgba(0, 0, 0, .04); color: var(--gray-mid); }
html.light .dw-stale { background: rgba(196, 23, 23, .06); color: #8a1512; }
html.light .dw-stale strong { color: #c41717; }
html.light .dw-what { color: var(--gray-mid); }

/* ── SPECIFICATION REGISTER ───────────────────────────────────────────────
   The compliance check leads. A section nobody has read reports as UNCHECKED,
   never as compliant, so the two can never be confused. */

.sp-findings { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.sp-finding {
    padding: 11px 13px; border-radius: 10px;
    background: rgba(255, 255, 255, .04); border-left: 2px solid var(--gray-light);
}
.sp-finding.is-late { background: rgba(196, 23, 23, .09); border-left-color: var(--red); }
.sp-finding.is-soon { background: rgba(224, 135, 11, .08); border-left-color: #e0870b; }
.sp-find-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-find-head strong { font-size: 13px; color: var(--white); }
.sp-find-head em { font-style: normal; font-size: 12.5px; color: var(--gray-light); }
.sp-find-desc { margin-top: 6px; font-size: 12.5px; color: var(--gray-light); }
.sp-find-why { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--gray-light); }

.sp-makers { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--gray-light); }
.sp-makers strong { color: var(--white); }
.sp-oreq {
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    margin-left: 6px; padding: 2px 7px; border-radius: 100px;
    background: rgba(56, 132, 255, .18); color: #6ba6ff;
}
.sp-nomakers {
    margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
    background: rgba(224, 135, 11, .08); color: #e0a03b;
}

html.light .sp-finding { background: rgba(0, 0, 0, .04); border-left-color: var(--gray-mid); }
html.light .sp-finding.is-late { background: rgba(196, 23, 23, .06); }
html.light .sp-finding.is-soon { background: rgba(224, 135, 11, .07); }
html.light .sp-find-head strong { color: var(--black); }
html.light .sp-find-head em,
html.light .sp-find-desc,
html.light .sp-find-why { color: var(--gray-mid); }
html.light .sp-makers { color: var(--gray-dark); }
html.light .sp-makers strong { color: var(--black); }
html.light .sp-oreq { background: rgba(56, 132, 255, .12); color: #2b5fb8; }
html.light .sp-nomakers { background: rgba(224, 135, 11, .07); color: #8a5308; }

/* ══════════════════════════════════════════════════════════════════════════
   EXECUTION MODULE SHELLS

   One design language, four structures:
     submittals  stepper    a pipeline; the eye follows work left to right
     rfis        listdetail a question is read, not scanned
     drawings    sheets     a drawing index is a grid, as it is on paper
     specs       tree       divisions contain sections; show the hierarchy
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared chrome ─────────────────────────────────────────────────────── */
.xm { display: flex; flex-direction: column; gap: 18px; }
.xm-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.xm-alert {
    flex: 1 1 340px; min-width: 0; padding: 12px 15px; border-radius: 11px;
    font-size: 14px; font-weight: 650; line-height: 1.45; color: var(--white);
    background: linear-gradient(135deg, rgba(20,168,106,.16), rgba(20,168,106,.06));
    border: 1px solid rgba(20,168,106,.3);
}
.xm-alert.is-bad {
    color: #ff9d9d;
    background: linear-gradient(135deg, rgba(196,23,23,.20), rgba(196,23,23,.06));
    border-color: rgba(196,23,23,.42);
}
.xm-alert.is-warn {
    color: #e8b464;
    background: linear-gradient(135deg, rgba(224,135,11,.18), rgba(224,135,11,.05));
    border-color: rgba(224,135,11,.36);
}
.xm-alert.is-mute {
    color: var(--gray-light);
    background: rgba(255,255,255,.04); border-color: var(--border);
}
.xm-alert small { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; opacity: .85; }

.xm-metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.xm-metric {
    min-width: 82px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid var(--border); background: rgba(255,255,255,.03);
}
.xm-metric b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--white); }
.xm-metric span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-light); }
.xm-metric.is-bad b { color: #ff6b6b; }
.xm-metric.is-bad { border-color: rgba(196,23,23,.4); }
.xm-metric.is-warn b { color: #e0a03b; }

.xm-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ══ SUBMITTALS: a pipeline ═══════════════════════════════════════════════
   Work moves left to right. Each package is a lane, and where the dots sit
   tells you where the package is without reading a word. */
.xs-pkg {
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: var(--charcoal);
}
.xs-pkg + .xs-pkg { margin-top: 12px; }
.xs-pkg.is-late { border-color: rgba(196,23,23,.45); }
.xs-pkg.is-done { opacity: .58; }

.xs-top {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px 16px; background: rgba(255,255,255,.03);
}
.xs-sec { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--white); }
.xs-title { font-size: 12.5px; color: var(--gray-light); }
.xs-clock { margin-left: auto; text-align: right; }
.xs-days { font-size: 22px; font-weight: 800; line-height: 1; color: var(--white); }
.xs-days.is-late { color: #ff6b6b; }
.xs-days.is-soon { color: #e0a03b; }
.xs-days small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gray-light); margin-top: 3px; }

.xs-lead {
    padding: 9px 16px; font-size: 11.5px; color: var(--gray-light);
    border-top: 1px solid var(--border); background: rgba(0,0,0,.14);
}
.xs-lead strong { color: var(--gray-light); }

/* The rail. Five stages, one row per submittal type. */
.xs-rail { padding: 6px 16px 14px; }
/* Name, track, actions. The five stages live inside the track so the row has
   three children rather than seven, and nothing can land in an implicit
   column it was never sized for. */
.xs-stages {
    display: grid; grid-template-columns: 170px minmax(0, 1fr) 172px; gap: 0;
    padding: 8px 0 6px; border-bottom: 1px solid var(--border);
}
.xs-track { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; min-width: 0; }
.xs-stage {
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gray-light); text-align: center;
}
.xs-stage:first-child { text-align: left; }

.xs-row {
    display: grid; grid-template-columns: 170px minmax(0, 1fr) 172px;
    align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.xs-row:last-child { border-bottom: 0; }
.xs-name { font-size: 12.5px; font-weight: 600; color: var(--white); padding-right: 10px; }
.xs-name em { display: block; font-style: normal; font-size: 10px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--gray-light); margin-top: 2px; }

.xs-node { position: relative; height: 22px; display: flex; align-items: center; justify-content: center; }
/* The connecting line runs behind the dots. */
.xs-node::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
    background: rgba(255,255,255,.07);
}
.xs-node:first-of-type::before { left: 50%; }
.xs-node:last-of-type::before { right: 50%; }
.xs-dot {
    position: relative; width: 11px; height: 11px; border-radius: 50%;
    background: var(--charcoal); border: 2px solid rgba(255,255,255,.18);
}
.xs-node.is-done .xs-dot { background: #14a86a; border-color: #14a86a; }
.xs-node.is-done::before { background: rgba(20,168,106,.35); }
.xs-node.is-now .xs-dot {
    width: 15px; height: 15px; background: var(--red); border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(196,23,23,.22);
}
.xs-node.is-bad .xs-dot { background: #e0870b; border-color: #e0870b; }

/* WRAP, never overflow. `justify-content: flex-end` on a flex container whose
   content is wider than it pushes that content out of the START edge, which is
   how these buttons ended up left of the card. Wrapping removes the condition
   rather than hiding the symptom. */
.xs-acts {
    display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
    padding-left: 10px; min-width: 0;
}

/* ══ RFIs: list and detail ════════════════════════════════════════════════
   A question is read, not scanned. */
.xr {
    display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px; align-items: start;
}
.xr-list {
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: var(--charcoal); max-height: 620px; overflow-y: auto;
}
.xr-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border);
    background: transparent; font: inherit; color: var(--white);
}
.xr-item:hover { background: rgba(255,255,255,.04); }
.xr-item.is-sel { background: rgba(196,23,23,.12); box-shadow: inset 3px 0 0 var(--red); }
.xr-item-top { display: flex; align-items: center; gap: 8px; }
.xr-no { font-family: var(--font-mono); font-size: 11.5px; color: var(--gray-light); }
.xr-age { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gray-light); }
.xr-age.is-bad { color: #ff6b6b; }
.xr-subj { margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.xr-meta { margin-top: 5px; font-size: 11px; color: var(--gray-light); }

.xr-detail {
    border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px;
    background: var(--charcoal); min-height: 320px;
}
.xr-d-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.xr-d-no { font-family: var(--font-mono); font-size: 20px; font-weight: 800; color: var(--white); }
.xr-d-subj { flex: 1 1 100%; font-size: 17px; font-weight: 700; color: var(--white); line-height: 1.35; }
.xr-block { margin-top: 18px; }
.xr-block h4 {
    margin: 0 0 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--gray-light);
}
.xr-block p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--white); white-space: pre-wrap; }
.xr-block.is-sug { padding: 12px 14px; border-radius: 10px;
    background: rgba(224,135,11,.08); border-left: 2px solid #e0870b; }
.xr-block.is-ans { padding: 12px 14px; border-radius: 10px;
    background: rgba(20,168,106,.08); border-left: 2px solid #14a86a; }
.xr-empty { padding: 60px 20px; text-align: center; color: var(--gray-light); font-size: 13.5px; }

/* ══ DRAWINGS: a sheet index ══════════════════════════════════════════════
   A drawing index is a grid on paper. It should be one here too. */
.xd-disc { margin-bottom: 20px; }
.xd-disc-h {
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--gray-light); margin-bottom: 10px;
}
.xd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.xd-sheet {
    position: relative; border: 1px solid var(--border); border-radius: 12px;
    background: var(--charcoal); padding: 13px 14px; min-height: 108px;
    display: flex; flex-direction: column; cursor: default;
    transition: border-color .15s ease, transform .15s ease;
}
.xd-sheet:hover { border-color: var(--border-strong, rgba(255,255,255,.2)); transform: translateY(-1px); }
.xd-sheet.is-stale { border-color: rgba(196,23,23,.5); background: rgba(196,23,23,.06); }
.xd-no { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--white); }
.xd-title { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--gray-light); flex: 1; }
.xd-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.xd-rev {
    font-family: var(--font-mono); font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 6px;
    background: rgba(20,168,106,.18); color: #2fc07d;
}
.xd-sheet.is-stale .xd-rev { background: rgba(196,23,23,.2); color: #ff6b6b; }
.xd-count { font-size: 10.5px; color: var(--gray-light); }
.xd-x {
    position: absolute; top: 8px; right: 8px; opacity: 0;
    appearance: none; border: 0; background: none; cursor: pointer;
    color: var(--gray-light); font-size: 15px; line-height: 1; padding: 3px 5px;
}
.xd-sheet:hover .xd-x { opacity: 1; }
.xd-x:hover { color: #ff6b6b; }
.xd-was {
    margin-top: 8px; font-size: 10.5px; line-height: 1.4; color: #ff8f8f;
    padding-top: 8px; border-top: 1px solid rgba(196,23,23,.25);
}

/* ══ SPECS: a tree ════════════════════════════════════════════════════════
   Divisions contain sections. Show that. */
.xt-div { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.xt-div-h {
    display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
    padding: 12px 15px; border: 0; background: rgba(255,255,255,.03); font: inherit; text-align: left;
}
.xt-div-h:hover { background: rgba(255,255,255,.06); }
.xt-caret { font-size: 10px; color: var(--gray-light); transition: transform .18s ease; }
.xt-div.is-open .xt-caret { transform: rotate(90deg); }
.xt-div-n { font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--white); }
.xt-div-t { font-size: 12.5px; color: var(--gray-light); }
.xt-div-c { margin-left: auto; font-size: 11px; color: var(--gray-light); }
.xt-body { display: none; padding: 4px 0 6px; }
.xt-div.is-open .xt-body { display: block; }

.xt-sec {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 15px 11px 38px; border-top: 1px solid var(--border);
}
.xt-sec-n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--white); min-width: 76px; }
.xt-sec-b { flex: 1; min-width: 0; }
.xt-sec-t { font-size: 12.5px; color: var(--white); }
.xt-makers { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }
.xt-chip {
    display: inline-block; margin: 3px 4px 0 0; padding: 2px 8px; border-radius: 100px;
    font-size: 10.5px; font-weight: 650;
    background: rgba(56,132,255,.16); color: #6ba6ff;
}
.xt-chip.is-eq { background: rgba(255,255,255,.07); color: var(--gray-light); }
.xt-none { margin-top: 5px; font-size: 11.5px; color: #e0a03b; }
.xt-acts { display: flex; gap: 6px; }

/* ── Light mode ───────────────────────────────────────────────────────── */
html.light .xm-alert { color: var(--black); }
html.light .xm-alert.is-bad { color: #8a1512; }
html.light .xm-alert.is-warn { color: #8a5308; }
html.light .xm-alert.is-mute { color: var(--gray-mid); background: rgba(0,0,0,.03); }
html.light .xm-metric { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .xm-metric b { color: var(--black); }
html.light .xm-metric span { color: var(--gray-mid); }
html.light .xm-metric.is-bad b { color: #c41717; }
html.light .xm-metric.is-warn b { color: #a8690f; }

html.light .xs-pkg, html.light .xr-list, html.light .xr-detail,
html.light .xd-sheet, html.light .xt-div { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .xs-top { background: rgba(0,0,0,.03); }
html.light .xs-lead { background: rgba(0,0,0,.02); color: var(--gray-mid); }
html.light .xs-sec, html.light .xs-days, html.light .xs-name,
html.light .xd-no, html.light .xt-div-n, html.light .xr-d-no,
html.light .xr-d-subj, html.light .xr-block p, html.light .xt-sec-t { color: var(--black); }
html.light .xs-title, html.light .xs-stage, html.light .xd-title, html.light .xd-count,
html.light .xt-div-t, html.light .xt-div-c, html.light .xt-makers,
html.light .xr-no, html.light .xr-meta, html.light .xr-age, html.light .xr-block h4,
html.light .xr-empty, html.light .xs-name em { color: var(--gray-mid); }
html.light .xs-days.is-late { color: #c41717; }
html.light .xs-days.is-soon { color: #a8690f; }
html.light .xs-dot { background: #fff; border-color: rgba(0,0,0,.18); }
html.light .xs-node::before { background: rgba(0,0,0,.08); }
html.light .xr-item { color: var(--black); }
html.light .xr-item:hover { background: rgba(0,0,0,.03); }
html.light .xr-item.is-sel { background: rgba(196,23,23,.07); }
html.light .xr-age.is-bad { color: #c41717; }
html.light .xd-sheet.is-stale { background: rgba(196,23,23,.05); }
html.light .xd-rev { background: rgba(20,168,106,.14); color: #0f7a4b; }
html.light .xd-sheet.is-stale .xd-rev { background: rgba(196,23,23,.12); color: #c41717; }
html.light .xd-was { color: #8a1512; }
html.light .xt-div-h { background: rgba(0,0,0,.03); }
html.light .xt-div-h:hover { background: rgba(0,0,0,.06); }
html.light .xt-sec-n { color: var(--black); }
html.light .xt-chip { background: rgba(56,132,255,.12); color: #2b5fb8; }
html.light .xt-chip.is-eq { background: rgba(0,0,0,.06); color: var(--gray-dark); }
html.light .xt-none { color: #a8690f; }
html.light .xr-block.is-sug { background: rgba(224,135,11,.07); }
html.light .xr-block.is-ans { background: rgba(20,168,106,.07); }

/* ══ CHANGES: a waterfall ═════════════════════════════════════════════════
   The question is not "what change orders exist", it is "where did the money
   go". A table cannot answer that; a waterfall can. Each bar starts where the
   last one ended, so a credit visibly steps DOWN and a pending amount visibly
   floats above the contract sum instead of hiding inside it. */
.cw { margin-bottom: 16px; }
.cw-head { margin-bottom: 12px; }
.cw-headline {
    padding: 10px 14px; border-left: 3px solid rgba(20, 168, 106, .6);
    border-radius: 0 8px 8px 0; background: rgba(20, 168, 106, .09);
    font-size: 13px; line-height: 1.5; color: var(--white);
}
.cw-headline.is-soon { border-left-color: #e0a03b; background: rgba(224, 135, 11, .10); color: #e8c07a; }
.cw-headline.is-late { border-left-color: var(--red); background: rgba(196, 23, 23, .12); color: #ff8f8f; }

.cw-chart {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; background: rgba(255,255,255,.02);
}
.cw-row {
    display: grid; grid-template-columns: 168px 1fr 128px; align-items: center;
    gap: 12px; padding: 5px 0;
}
.cw-label { font-size: 11.5px; font-weight: 650; color: var(--gray-light); }
.cw-track {
    position: relative; height: 20px; border-radius: 4px;
    background: rgba(255,255,255,.04);
}
.cw-bar {
    position: absolute; top: 3px; bottom: 3px; border-radius: 3px;
    background: rgba(255,255,255,.22); transition: width .35s ease, left .35s ease;
}
.cw-val {
    text-align: right; font-family: var(--font-mono); font-size: 13px;
    font-weight: 700; color: var(--white);
}
.cw-row.is-zero .cw-val { color: var(--gray-light); font-weight: 500; }

/* THE THREE KINDS OF MONEY, TOLD APART BY COLOUR.
   The contract sum is solid. Approved change is solid, because it is owed.
   Pending and disputed are HATCHED, because they are live and not owed, and a
   viewer must never be able to read them as part of the sum. */
.cw-base .cw-bar { background: rgba(255,255,255,.30); }
.cw-base .cw-label, .cw-subtotal .cw-label { color: var(--white); font-weight: 750; }
.cw-add .cw-bar { background: #2fc07d; }
.cw-add .cw-val { color: #2fc07d; }
.cw-credit .cw-bar { background: #6ba6ff; }
.cw-credit .cw-val { color: #6ba6ff; }
.cw-subtotal .cw-track { background: rgba(255,255,255,.06); }
.cw-subtotal .cw-bar { background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.5)); }
.cw-pending .cw-bar {
    background: repeating-linear-gradient(135deg, #e0a03b 0 5px, rgba(224,160,59,.30) 5px 10px);
}
.cw-pending .cw-val { color: #e0a03b; }
.cw-disputed .cw-bar {
    background: repeating-linear-gradient(135deg, #ff6b6b 0 5px, rgba(255,107,107,.28) 5px 10px);
}
.cw-disputed .cw-val { color: #ff6b6b; }
.cw-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.cw-total .cw-label { color: var(--white); font-weight: 800; }
.cw-total .cw-bar { background: linear-gradient(90deg, var(--red), #ff8f6b); }
.cw-total .cw-val { font-size: 15px; font-weight: 800; }
.cw-note {
    margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--gray-light);
}

/* Events on the left, orders on the right. They are different objects with
   different lifecycles and are routinely conflated, which is how a job ends up
   with costs nobody submitted. */
.cw-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.cw-col > h4 {
    margin: 0 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gray-light);
}

.ce, .co {
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
    margin-bottom: 9px; background: rgba(255,255,255,.02);
}
.ce.is-unpriced { border-left: 3px solid #e0a03b; }
.ce.is-dead { opacity: .5; }
.co.is-done { border-left: 3px solid #2fc07d; }
.co.is-soon { border-left: 3px solid #e0a03b; }
.co.is-late { border-left: 3px solid var(--red); }
.ce-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.ce-origin {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gray-light);
}
.ce-in {
    margin-left: auto; padding: 2px 8px; border-radius: 100px;
    font-size: 10px; font-weight: 650;
    background: rgba(56,132,255,.16); color: #6ba6ff;
}
.ce-t { font-size: 13px; font-weight: 650; line-height: 1.4; color: var(--white); }
.ce-d { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }
.ce-f { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.ce-money, .co-money {
    font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: #2fc07d;
}
.ce-money.is-credit, .co-money.is-credit { color: #6ba6ff; }
.co-money { display: block; margin: 6px 0; }
.ce-days {
    margin-left: 8px; font-family: var(--font-body, inherit); font-size: 11px;
    font-weight: 650; color: #e0a03b;
}
.ce-acts { margin-left: auto; display: inline-flex; gap: 6px; }
/* The basis is the sentence that gets argued over, so it is on the card rather
   than behind a click. */
.ce-basis {
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 10.5px; line-height: 1.5; color: var(--gray-light);
}
.co-evs { margin: 6px 0 2px; }

html.light .cw-headline { color: var(--black); background: rgba(20, 168, 106, .09); }
html.light .cw-headline.is-soon { color: #8a5308; background: rgba(224, 135, 11, .09); }
html.light .cw-headline.is-late { color: #8a1512; background: rgba(196, 23, 23, .07); }
html.light .cw-chart, html.light .ce, html.light .co { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .cw-track { background: rgba(0,0,0,.05); }
html.light .cw-subtotal .cw-track { background: rgba(0,0,0,.07); }
html.light .cw-bar, html.light .cw-base .cw-bar { background: rgba(0,0,0,.30); }
html.light .cw-subtotal .cw-bar { background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.48)); }
html.light .cw-add .cw-bar { background: #0f7a4b; }
html.light .cw-credit .cw-bar { background: #2b5fb8; }
html.light .cw-pending .cw-bar {
    background: repeating-linear-gradient(135deg, #a8690f 0 5px, rgba(168,105,15,.25) 5px 10px);
}
html.light .cw-disputed .cw-bar {
    background: repeating-linear-gradient(135deg, #c41717 0 5px, rgba(196,23,23,.22) 5px 10px);
}
html.light .cw-add .cw-val { color: #0f7a4b; }
html.light .cw-credit .cw-val { color: #2b5fb8; }
html.light .cw-pending .cw-val { color: #a8690f; }
html.light .cw-disputed .cw-val { color: #c41717; }
html.light .cw-val, html.light .cw-base .cw-label, html.light .cw-subtotal .cw-label,
html.light .cw-total .cw-label, html.light .ce-t { color: var(--black); }
html.light .cw-label, html.light .cw-note, html.light .cw-col > h4,
html.light .ce-origin, html.light .ce-d, html.light .ce-basis { color: var(--gray-mid); }
html.light .cw-total { border-top-color: rgba(0,0,0,.1); }
html.light .ce-basis { border-top-color: rgba(0,0,0,.07); }
html.light .ce-money, html.light .co-money { color: #0f7a4b; }
html.light .ce-money.is-credit, html.light .co-money.is-credit { color: #2b5fb8; }
html.light .ce-days { color: #a8690f; }
html.light .ce-in { background: rgba(56,132,255,.12); color: #2b5fb8; }

/* ══ OBSERVATIONS: a ladder, not a list ═══════════════════════════════════
   Quality control on federal work is a system you have to prove you operated,
   not a list of findings. Every feature of work carries three phases in order,
   so the control is drawn as three rungs with the order visible - and the rung
   that matters is a preparatory phase that cannot be climbed yet, because that
   is the question only this platform can answer. */
.ob-health {
    display: flex; align-items: center; gap: 16px;
    border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px;
    background: rgba(255,255,255,.02); margin-bottom: 10px;
}
.ob-health.is-bad { border-color: rgba(196,23,23,.4); background: rgba(196,23,23,.07); }
.ob-health.is-stop { border-color: var(--red); background: rgba(196,23,23,.14); }
.ob-h-n { font-family: var(--font-mono); font-size: 34px; font-weight: 850; line-height: 1; color: var(--white); }
.ob-health.is-bad .ob-h-n, .ob-health.is-stop .ob-h-n { color: #ff6b6b; }
.ob-h-b { display: flex; flex-direction: column; gap: 3px; }
.ob-h-b strong {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-light);
}
.ob-h-b span { font-size: 13px; line-height: 1.5; color: var(--white); }

.ob-findings { margin-bottom: 10px; }
.ob-finding {
    padding: 9px 13px; margin-bottom: 6px; border-radius: 0 8px 8px 0;
    border-left: 3px solid rgba(255,255,255,.2); background: rgba(255,255,255,.03);
    font-size: 12.5px; line-height: 1.55; color: var(--white);
}
.ob-finding.is-stop { border-left-color: var(--red); background: rgba(196,23,23,.14); color: #ff8f8f; }
.ob-finding.is-bad  { border-left-color: var(--red); background: rgba(196,23,23,.09); color: #ff8f8f; }
.ob-finding.is-warn { border-left-color: #e0a03b; background: rgba(224,135,11,.09); color: #e8c07a; }
.ob-finding.is-note { border-left-color: rgba(255,255,255,.25); }
.ob-finding em { font-style: normal; font-family: var(--font-mono); font-size: 11px; opacity: .8; }

.ob-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.ob-feature { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.ob-feature.is-blocked { border-color: rgba(224,135,11,.4); }
.ob-f-h {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 14px; background: rgba(255,255,255,.03);
}
.ob-f-t {
    flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px;
    border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.ob-f-sec { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--white); }
.ob-f-ttl { font-size: 12px; color: var(--gray-light); }

/* THE LADDER. The rungs are joined, because the order is not optional: an
   initial inspection before the preparatory meeting is not an early start, it
   is a phase that did not happen. */
.ob-ladder { display: flex; align-items: center; }
.ob-link { width: 16px; height: 2px; background: rgba(255,255,255,.14); }
.ob-rung {
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    min-width: 92px; padding: 7px 11px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
    background: transparent; font: inherit;
}
.ob-rung:hover { border-color: var(--red); }
.ob-r-l { font-size: 10.5px; font-weight: 700; color: var(--white); }
.ob-r-s {
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gray-light);
}
.ob-rung.is-held { border-color: rgba(47,192,125,.55); background: rgba(20,168,106,.12); }
.ob-rung.is-held .ob-r-s { color: #2fc07d; }
.ob-rung.is-ready { border-color: rgba(107,166,255,.6); background: rgba(56,132,255,.10); }
.ob-rung.is-ready .ob-r-s { color: #6ba6ff; }
.ob-rung.is-blocked { border-color: rgba(224,135,11,.6); background: rgba(224,135,11,.10); }
.ob-rung.is-blocked .ob-r-s { color: #e0a03b; }
.ob-rung.is-waiting { opacity: .45; }

.ob-f-b { padding: 13px 15px; border-top: 1px solid var(--border); }
.ob-ready {
    font-size: 12.5px; line-height: 1.55; color: #e8c07a; margin-bottom: 10px;
}
.ob-ready.is-ready { color: #2fc07d; }
.ob-blockers { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.ob-blocker {
    padding: 9px 12px; border-radius: 8px; border-left: 3px solid #e0a03b;
    background: rgba(224,135,11,.07);
}
.ob-blocker strong { display: block; font-size: 11.5px; color: var(--white); margin-bottom: 2px; }
.ob-blocker span { font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }
.ob-f-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--gray-light); }
.ob-f-meta .is-miss { color: #e0a03b; }
.ob-f-meta .sr-act { margin-left: auto; }

.ob-list > h4 {
    margin: 0 0 9px; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gray-light);
}
.ob-item {
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
    margin-bottom: 8px; background: rgba(255,255,255,.02);
}
.ob-item.is-stop { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.ob-item.is-closed { opacity: .55; }
.ob-i-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ob-kind {
    padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,.08); color: var(--gray-light);
}
.ob-kind.is-safety { background: rgba(196,23,23,.18); color: #ff8f8f; }
.ob-kind.is-quality { background: rgba(56,132,255,.16); color: #6ba6ff; }
.ob-type {
    margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gray-light);
}
.ob-i-d { font-size: 13px; line-height: 1.5; color: var(--white); }
.ob-i-aha, .ob-i-self {
    margin-top: 7px; padding: 7px 11px; border-radius: 7px;
    font-size: 11.5px; line-height: 1.5;
    background: rgba(224,135,11,.10); color: #e8c07a;
}
.ob-i-ca {
    margin-top: 7px; font-size: 11.5px; line-height: 1.55; color: var(--gray-light);
}
.ob-i-ca strong { color: #2fc07d; }
.ob-i-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }

html.light .ob-health, html.light .ob-feature, html.light .ob-item {
    background: #fff; border-color: rgba(0,0,0,.1);
}
html.light .ob-health.is-bad { background: rgba(196,23,23,.06); border-color: rgba(196,23,23,.35); }
html.light .ob-health.is-stop { background: rgba(196,23,23,.11); }
html.light .ob-health.is-bad .ob-h-n, html.light .ob-health.is-stop .ob-h-n { color: #c41717; }
html.light .ob-f-h { background: rgba(0,0,0,.035); }
html.light .ob-finding { background: rgba(0,0,0,.035); border-left-color: rgba(0,0,0,.2); }
html.light .ob-finding.is-stop, html.light .ob-finding.is-bad {
    color: #8a1512; background: rgba(196,23,23,.07); border-left-color: #c41717;
}
html.light .ob-finding.is-warn { color: #8a5308; background: rgba(224,135,11,.08); border-left-color: #a8690f; }
html.light .ob-rung { border-color: rgba(0,0,0,.14); }
html.light .ob-rung.is-held { border-color: rgba(15,122,75,.5); background: rgba(20,168,106,.10); }
html.light .ob-rung.is-held .ob-r-s { color: #0f7a4b; }
html.light .ob-rung.is-ready { border-color: rgba(43,95,184,.5); background: rgba(43,95,184,.08); }
html.light .ob-rung.is-ready .ob-r-s { color: #2b5fb8; }
html.light .ob-rung.is-blocked { border-color: rgba(168,105,15,.55); background: rgba(224,135,11,.09); }
html.light .ob-rung.is-blocked .ob-r-s { color: #a8690f; }
html.light .ob-link { background: rgba(0,0,0,.14); }
html.light .ob-blocker { background: rgba(224,135,11,.08); border-left-color: #a8690f; }
html.light .ob-ready { color: #8a5308; }
html.light .ob-ready.is-ready { color: #0f7a4b; }
html.light .ob-i-aha, html.light .ob-i-self { background: rgba(224,135,11,.09); color: #8a5308; }
html.light .ob-i-ca strong { color: #0f7a4b; }
html.light .ob-kind { background: rgba(0,0,0,.06); color: var(--gray-mid); }
html.light .ob-kind.is-safety { background: rgba(196,23,23,.12); color: #c41717; }
html.light .ob-kind.is-quality { background: rgba(56,132,255,.12); color: #2b5fb8; }
html.light .ob-f-b { border-top-color: rgba(0,0,0,.08); }
html.light .ob-h-n, html.light .ob-h-b span, html.light .ob-f-sec,
html.light .ob-r-l, html.light .ob-blocker strong, html.light .ob-i-d { color: var(--black); }
html.light .ob-h-b strong, html.light .ob-f-ttl, html.light .ob-r-s,
html.light .ob-blocker span, html.light .ob-f-meta, html.light .ob-list > h4,
html.light .ob-type, html.light .ob-i-ca { color: var(--gray-mid); }
html.light .ob-f-meta .is-miss { color: #a8690f; }

@media (max-width: 760px) {
    .ob-ladder { width: 100%; }
    .ob-rung { flex: 1; min-width: 0; }
}

/* ══ PUNCH: the defence, not the list ═════════════════════════════════════
   Every product renders a punch list as rows. The rows are not the problem;
   the argument about which of them are yours is. So the item card leads with
   its verdict, and a verdict DERIVED from a record is drawn differently from
   one a person asserted - a solid left rule against a dashed one. Sending a
   general contractor an assertion dressed as a citation is how a defence stops
   being believed, and the interface must not make that easy. */
.pn-ready {
    border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px;
    background: rgba(255,255,255,.02); margin-bottom: 12px;
}
.pn-ready.is-ready { border-color: rgba(47,192,125,.5); background: rgba(20,168,106,.08); }
.pn-ready-h { display: flex; align-items: center; gap: 16px; }
.pn-ready-n {
    font-size: 34px; font-weight: 850; line-height: 1; color: var(--white);
    font-family: var(--font-mono);
}
.pn-ready.is-ready .pn-ready-n { color: #2fc07d; }
.pn-ready-t { display: flex; flex-direction: column; gap: 3px; }
.pn-ready-t strong {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-light);
}
.pn-ready-t span { font-size: 13px; line-height: 1.5; color: var(--white); }
.pn-ready-track {
    height: 6px; margin-top: 12px; border-radius: 100px;
    background: rgba(255,255,255,.08); overflow: hidden;
}
.pn-ready-track span { display: block; height: 100%; background: #2fc07d; transition: width .4s ease; }
.pn-ready-subs { margin-top: 10px; font-size: 11.5px; color: var(--gray-light); }

/* Thirty rows of the same defect is one crew problem, and nobody ever adds up
   a register. */
.pn-clusters { margin: 16px 0; }
.pn-clusters h4 {
    margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gray-light);
}
.pn-cluster {
    display: flex; gap: 14px; align-items: flex-start;
    border: 1px solid rgba(224,135,11,.32); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px; background: rgba(224,135,11,.06);
}
.pn-cluster.is-one { border-color: rgba(196,23,23,.38); background: rgba(196,23,23,.07); }
.pn-cl-n {
    font-family: var(--font-mono); font-size: 26px; font-weight: 850; line-height: 1;
    color: #e0a03b; min-width: 44px;
}
.pn-cluster.is-one .pn-cl-n { color: #ff6b6b; }
.pn-cl-b { flex: 1; min-width: 0; }
.pn-cl-b strong { display: block; font-size: 13px; color: var(--white); }
.pn-cl-b span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--gray-light); }
.pn-cl-ns { margin-top: 6px; }

.pn-areas { display: flex; flex-direction: column; gap: 14px; }
.pn-area { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pn-area.is-blocking { border-color: rgba(196,23,23,.4); }
.pn-area-h {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 15px; background: rgba(255,255,255,.04);
}
.pn-area-h h4 { margin: 0; font-size: 14px; font-weight: 750; color: var(--white); }
.pn-area-c { font-size: 11.5px; color: var(--gray-light); }
.pn-area-h .sr-act { margin-left: auto; }
.pn-items { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }

.pn-item {
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
    background: rgba(255,255,255,.02);
}
.pn-item.is-blocking { box-shadow: inset 3px 0 0 var(--red); }
.pn-item.is-closed { opacity: .55; }
.pn-i-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pn-defect {
    margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gray-light);
}
.pn-blocks, .pn-late {
    font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
    color: #ff8f8f;
}
.pn-i-d { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--white); }
.pn-i-x { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }

/* A CITATION AND AN ASSERTION, DRAWN APART. */
.pn-verdict {
    margin-top: 9px; padding: 9px 12px; border-radius: 8px;
    border-left: 3px solid rgba(255,255,255,.2); background: rgba(255,255,255,.035);
}
.pn-verdict.is-done { border-left-color: #2fc07d; background: rgba(20,168,106,.09); }
.pn-verdict.is-late { border-left-color: var(--red); background: rgba(196,23,23,.10); }
.pn-verdict.is-soon { border-left-color: #e0a03b; background: rgba(224,135,11,.09); }
.pn-verdict.is-none { border-left-style: dashed; border-left-color: rgba(255,255,255,.22); }
/* Dashed, always, whatever the verdict: this one is somebody's word. */
.pn-verdict.is-asserted { border-left-style: dashed; }
.pn-v-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pn-v-src {
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--gray-light);
}
.pn-verdict.is-asserted .pn-v-src { color: #e0a03b; }
.pn-v-b { font-size: 12px; line-height: 1.55; color: var(--white); }

.pn-verif {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 11.5px; line-height: 1.5; color: var(--gray-light);
}
.pn-verif strong { color: #2fc07d; }
.pn-i-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.pn-i-m { font-size: 11px; color: var(--gray-light); }
.pn-i-f .up-btn { padding: 4px 10px; font-size: 11px; }

html.light .pn-ready, html.light .pn-area, html.light .pn-item {
    background: #fff; border-color: rgba(0,0,0,.1);
}
html.light .pn-ready.is-ready { border-color: rgba(15,122,75,.45); background: rgba(20,168,106,.07); }
html.light .pn-ready.is-ready .pn-ready-n { color: #0f7a4b; }
html.light .pn-ready-track { background: rgba(0,0,0,.08); }
html.light .pn-ready-track span { background: #0f7a4b; }
html.light .pn-area-h { background: rgba(0,0,0,.035); }
html.light .pn-item { border-color: rgba(0,0,0,.09); }
html.light .pn-verdict { background: rgba(0,0,0,.035); border-left-color: rgba(0,0,0,.2); }
html.light .pn-verdict.is-done { border-left-color: #0f7a4b; background: rgba(20,168,106,.08); }
html.light .pn-verdict.is-late { border-left-color: #c41717; background: rgba(196,23,23,.07); }
html.light .pn-verdict.is-soon { border-left-color: #a8690f; background: rgba(224,135,11,.08); }
html.light .pn-cluster { border-color: rgba(168,105,15,.35); background: rgba(224,135,11,.08); }
html.light .pn-cluster.is-one { border-color: rgba(196,23,23,.35); background: rgba(196,23,23,.06); }
html.light .pn-cl-n { color: #a8690f; }
html.light .pn-cluster.is-one .pn-cl-n { color: #c41717; }
html.light .pn-ready-n, html.light .pn-ready-t span, html.light .pn-area-h h4,
html.light .pn-cl-b strong, html.light .pn-i-d, html.light .pn-v-b { color: var(--black); }
html.light .pn-ready-t strong, html.light .pn-ready-subs, html.light .pn-area-c,
html.light .pn-clusters h4, html.light .pn-cl-b span, html.light .pn-defect,
html.light .pn-i-x, html.light .pn-v-src, html.light .pn-verif, html.light .pn-i-m {
    color: var(--gray-mid);
}
html.light .pn-verdict.is-asserted .pn-v-src { color: #a8690f; }
html.light .pn-blocks, html.light .pn-late { color: #c41717; }
html.light .pn-verif { border-top-color: rgba(0,0,0,.08); }
html.light .pn-verif strong { color: #0f7a4b; }

/* ══ DAILY LOGS: a calendar whose loudest cell is an empty one ════════════
   Every other product renders a day with no log as a day with no log. Here the
   hole is the finding, so it is drawn harder than a logged day: dashed, tinted
   and labelled. A register with three weeks of gaps is worthless in a claim,
   and the screen has to say so while the days can still be reconstructed. */
.dl-nav { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.dl-month { font-size: 15px; font-weight: 750; color: var(--white); min-width: 150px; }
.dl-key { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.dl-k { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--gray-light); }
.dl-kd { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dl-kd.is-log { background: rgba(255,255,255,.28); }
.dl-kd.is-gap { background: transparent; border: 1px dashed #e0a03b; }
.dl-kd.is-wx  { background: #6ba6ff; }
.dl-kd.is-dly { background: #ff6b6b; border-radius: 100px; }

.dl-cal { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.02); }
.dl-dow, .dl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dl-dow { margin-bottom: 6px; }
.dl-dow span {
    text-align: center; font-size: 10px; font-weight: 750; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gray-light);
}
.dl-cell {
    position: relative; min-height: 72px; padding: 7px 8px; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    border: 1px solid var(--border); border-radius: 8px;
    background: transparent; font: inherit; text-align: left;
    transition: border-color .15s ease, background .15s ease;
}
.dl-cell:hover { border-color: var(--red); }
.dl-cell.is-pad { border: 0; cursor: default; min-height: 0; }
.dl-cell.is-weekend { background: rgba(255,255,255,.015); }
.dl-cell.is-future { opacity: .35; cursor: default; }
.dl-cell.is-log { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
/* THE HOLE, drawn harder than anything else on the grid. */
.dl-cell.is-gap {
    border: 1px dashed rgba(224,135,11,.65); background: rgba(224,135,11,.06);
}
.dl-cell.is-wx { box-shadow: inset 3px 0 0 #6ba6ff; }
.dl-cell.is-nowork { background: rgba(255,255,255,.03); }
.dl-cell.is-sel { border-color: var(--red); box-shadow: 0 0 0 2px rgba(196,23,23,.25); }
.dl-d { font-size: 13px; font-weight: 750; color: var(--white); }
.dl-cell.is-weekend .dl-d, .dl-cell.is-future .dl-d { color: var(--gray-light); }
.dl-h { font-size: 10.5px; font-weight: 650; color: var(--gray-light); }
.dl-h.is-gap { color: #e0a03b; }
.dl-marks { margin-top: auto; display: flex; gap: 4px; }
.dl-dot { width: 7px; height: 7px; border-radius: 100px; display: inline-block; }
.dl-dot.is-dly { background: #ff6b6b; }
.dl-dot.is-del { background: #e0a03b; }
.dl-dot.is-ok  { background: #2fc07d; }
.dl-nowx { margin-top: 10px; }

/* Hours burned against hours BID. On its own it is a number. */
.dl-burn { margin-top: 4px; }
.dl-burn-t { font-size: 12px; color: var(--gray-light); margin-bottom: 5px; }
.dl-burn-track { height: 6px; border-radius: 100px; background: rgba(255,255,255,.08); overflow: hidden; }
.dl-burn-track span { display: block; height: 100%; background: #2fc07d; transition: width .4s ease; }
.dl-burn.is-over .dl-burn-track span { background: var(--red); }
.dl-burn.is-over .dl-burn-t { color: #ff8f8f; }

.dl-day {
    margin-top: 16px; border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 18px; background: rgba(255,255,255,.02);
}
.dl-day-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dl-day-h h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--white); }
.dl-day-none { font-size: 12.5px; line-height: 1.6; color: var(--gray-light); margin: 0 0 12px; }

/* Weather as an observation. The source names itself for what it is, because
   evidence that overstates itself is worse than none. */
.dl-wx {
    border: 1px solid rgba(107,166,255,.28); border-radius: 10px;
    padding: 11px 13px; background: rgba(56,132,255,.06); margin-bottom: 12px;
}
.dl-wx.is-wxday { border-color: rgba(107,166,255,.6); background: rgba(56,132,255,.12); }
.dl-wx.is-none {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border-color: var(--border); background: rgba(255,255,255,.02);
}
.dl-wx-nums { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; color: var(--white); }
.dl-wx-nums b { font-size: 20px; font-weight: 800; }
.dl-wx-nums span { font-size: 12px; color: var(--gray-light); }
.dl-wx-basis { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--white); }
.dl-wx.is-none .dl-wx-basis { margin-top: 0; color: var(--gray-light); }
.dl-wx-src { margin-top: 6px; font-size: 10px; color: var(--gray-light); }

.dl-block { margin-bottom: 12px; }
.dl-block h5, .dl-sec-h h5 {
    margin: 0 0 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gray-light);
}
.dl-block p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--white); white-space: pre-wrap; }
.dl-block small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--gray-light); }

.dl-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.dl-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.dl-sec-h h5 { display: flex; align-items: center; gap: 7px; }
.dl-sec-n {
    padding: 1px 7px; border-radius: 100px; font-size: 10px;
    background: rgba(255,255,255,.09); color: var(--white);
}
.dl-sec-h .sr-act { margin-left: auto; }
.dl-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; margin-bottom: 5px; border-radius: 8px;
    background: rgba(255,255,255,.03); font-size: 12px; color: var(--white);
}
.dl-row.is-bad { background: rgba(196,23,23,.10); }
.dl-row.is-delay { background: rgba(224,135,11,.08); }
.dl-row-m { font-family: var(--font-mono); font-weight: 750; min-width: 80px; }
.dl-row-t { flex: 1; min-width: 120px; }
.dl-row-s { font-size: 11px; color: var(--gray-light); }
.dl-row-x { font-size: 10.5px; color: var(--gray-light); }
.dl-row .sr-act { margin-left: auto; }
.dl-row .up-btn { padding: 4px 10px; font-size: 11px; }

html.light .dl-cal, html.light .dl-day { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .dl-cell { border-color: rgba(0,0,0,.08); }
html.light .dl-cell.is-log { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.14); }
html.light .dl-cell.is-weekend { background: rgba(0,0,0,.02); }
html.light .dl-cell.is-gap { border-color: rgba(168,105,15,.7); background: rgba(224,135,11,.09); }
html.light .dl-cell.is-nowork { background: rgba(0,0,0,.03); }
html.light .dl-kd.is-log { background: rgba(0,0,0,.28); }
html.light .dl-kd.is-gap { border-color: #a8690f; }
html.light .dl-kd.is-wx { background: #2b5fb8; }
html.light .dl-cell.is-wx { box-shadow: inset 3px 0 0 #2b5fb8; }
html.light .dl-h.is-gap { color: #a8690f; }
html.light .dl-month, html.light .dl-d, html.light .dl-day-h h4,
html.light .dl-block p, html.light .dl-wx-nums, html.light .dl-wx-basis,
html.light .dl-row, html.light .dl-sec-n { color: var(--black); }
html.light .dl-k, html.light .dl-h, html.light .dl-day-none, html.light .dl-block h5,
html.light .dl-sec-h h5, html.light .dl-block small, html.light .dl-wx-src,
html.light .dl-wx-nums span, html.light .dl-row-s, html.light .dl-row-x,
html.light .dl-burn-t { color: var(--gray-mid); }
html.light .dl-wx { border-color: rgba(43,95,184,.28); background: rgba(43,95,184,.06); }
html.light .dl-wx.is-wxday { border-color: rgba(43,95,184,.55); background: rgba(43,95,184,.11); }
html.light .dl-wx.is-none { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.02); }
html.light .dl-sec { border-top-color: rgba(0,0,0,.09); }
html.light .dl-sec-n { background: rgba(0,0,0,.07); }
html.light .dl-row { background: rgba(0,0,0,.035); }
html.light .dl-row.is-bad { background: rgba(196,23,23,.08); }
html.light .dl-row.is-delay { background: rgba(224,135,11,.10); }
html.light .dl-burn-track { background: rgba(0,0,0,.08); }
html.light .dl-burn-track span { background: #0f7a4b; }
html.light .dl-burn.is-over .dl-burn-t { color: #8a1512; }
html.light .dl-dot.is-ok { background: #0f7a4b; }
html.light .dl-dot.is-del { background: #a8690f; }
html.light .dl-dot.is-dly { background: #c41717; }

@media (max-width: 720px) {
    /* The grid stays seven wide, because a calendar that is not seven wide is
       a list. It gets shorter instead. */
    .dl-cell { min-height: 54px; padding: 5px; }
    .dl-h { display: none; }
    .dl-key { width: 100%; margin-left: 0; }
}

.sr-headline.is-soon {
    border-left-color: #e0a03b; background: rgba(224, 135, 11, .10); color: #e8c07a;
}
html.light .sr-headline.is-soon { color: #8a5308; background: rgba(224, 135, 11, .09); }
.up-btn.is-ghost { background: transparent; border: 1px solid var(--border); color: var(--white); }
.up-btn.is-ghost:hover { border-color: var(--red); }
html.light .up-btn.is-ghost { border-color: rgba(0,0,0,.14); color: var(--black); }

@media (max-width: 1000px) {
    .cw-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .cw-row { grid-template-columns: 1fr 96px; }
    /* The track is the first thing to go: the label and the number are what
       carry the meaning, and a 40px bar carries none. */
    .cw-track { display: none; }
}

@media (max-width: 900px) {
    .xr { grid-template-columns: 1fr; }
    .xr-list { max-height: 280px; }
    .xs-stages, .xs-row { grid-template-columns: 130px minmax(0, 1fr) 150px; }
}
@media (max-width: 620px) {
    .xs-stages { display: none; }
    .xs-row { grid-template-columns: 1fr; gap: 6px; }
    .xs-node, .xs-track { display: none; }
    .xs-acts { justify-content: flex-start; padding-left: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   SCHEDULE: planned against forecast, drawn as a distance

   A slip is a shape here, not a number somebody has to work out. The bar
   between the planned marker and the forecast marker IS the lateness, so a
   row that is nine weeks late looks nine weeks late.
   ═════════════════════════════════════════════════════════════════════════ */
.sc-hero {
    display: flex; align-items: center; gap: 18px; padding: 18px 22px;
    border: 1px solid var(--border); border-radius: 16px; margin-bottom: 12px;
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(47,192,125,.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -28px rgba(0,0,0,.9);
}
.sc-hero.is-warn {
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(224,160,59,.16), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    border-color: rgba(224,135,11,.34);
}
.sc-hero.is-bad {
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(196,23,23,.22), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    border-color: rgba(196,23,23,.42);
}
.sc-hero-n {
    font-family: var(--font-mono); font-size: 40px; font-weight: 850; line-height: .9;
    letter-spacing: -.03em; color: var(--white); font-variant-numeric: tabular-nums;
}
.sc-hero.is-warn .sc-hero-n { color: #e0a03b; }
.sc-hero.is-bad .sc-hero-n { color: #ff6b6b; }
.sc-hero-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-hero-b strong {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-light);
}
.sc-hero-b span { font-size: 13.5px; line-height: 1.5; color: var(--white); }

.sc-chart {
    border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
    margin-bottom: 18px;
}
.sc-axis {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-light);
    padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.sc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.sc-legend span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-light);
}
.sc-lg { width: 9px; height: 9px; border-radius: 100px; display: inline-block; }
.sc-lg.is-base { background: rgba(255,255,255,.32); }
.sc-lg.is-plan { background: #6ba6ff; }
.sc-lg.is-fc { background: #e0a03b; }
.sc-lg.is-act { background: #2fc07d; }
.sc-lg.is-today { width: 2px; height: 12px; border-radius: 0; background: var(--red); }

.sc-row {
    display: grid; grid-template-columns: 220px 1fr 92px; align-items: center;
    gap: 14px; padding: 7px 0; border-radius: 10px;
}
.sc-row.is-sel { background: rgba(255,255,255,.04); }
.sc-row.is-crit .sc-r-name { color: var(--white); font-weight: 700; }
.sc-r-h {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
    padding: 0 0 0 4px; min-width: 0;
}
.sc-r-n { font-family: var(--font-mono); font-size: 10px; color: var(--gray-light); }
.sc-r-name {
    font-size: 12.5px; color: var(--gray-light); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
}
.sc-crit {
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #ff8f8f;
}
.sc-track {
    position: relative; height: 22px; border-radius: 5px;
    background: rgba(255,255,255,.04);
}
.sc-today {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: var(--red); opacity: .8;
}
/* THE SLIP, as a distance. */
.sc-slip {
    position: absolute; top: 7px; height: 8px; border-radius: 100px;
    background: repeating-linear-gradient(135deg, #e0a03b 0 4px, rgba(224,160,59,.3) 4px 8px);
}
.sc-float {
    position: absolute; top: 8px; height: 6px; border-radius: 100px;
    background: rgba(47,192,125,.35);
}
.sc-mark {
    position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 100px;
    transform: translate(-50%, -50%); border: 2px solid var(--charcoal);
}
.sc-mark.is-base { background: rgba(255,255,255,.4); width: 8px; height: 8px; }
.sc-mark.is-plan { background: #6ba6ff; }
.sc-mark.is-fc { background: #e0a03b; box-shadow: 0 0 0 4px rgba(224,160,59,.14); }
.sc-mark.is-fc.is-late { background: #ff6b6b; box-shadow: 0 0 0 4px rgba(255,107,107,.16); }
.sc-mark.is-act { background: #2fc07d; box-shadow: 0 0 0 4px rgba(47,192,125,.14); }
.sc-r-v {
    font-size: 11px; font-weight: 700; text-align: right; color: var(--gray-light);
    font-variant-numeric: tabular-nums;
}
.sc-r-v.is-late { color: #ff8f8f; }
.sc-r-v.is-soon { color: #e0a03b; }

.sc-detail {
    grid-column: 1 / -1; margin: 6px 0 10px;
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.sc-d-v { font-size: 12.5px; line-height: 1.6; color: var(--white); margin-bottom: 11px; }
.sc-d-v.is-late { color: #ff8f8f; }
.sc-d-v.is-soon { color: #e8c07a; }
.sc-dates { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-date {
    padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,.04);
    display: flex; flex-direction: column; gap: 2px; min-width: 96px;
}
.sc-date span {
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-light);
}
.sc-date b { font-family: var(--font-mono); font-size: 12px; color: var(--white); }
.sc-date.is-none b { color: var(--gray-light); font-weight: 400; }
.sc-conf { font-size: 11px; line-height: 1.5; color: var(--gray-light); margin-bottom: 10px; }
.sc-deps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.sc-dep {
    display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px;
    background: rgba(255,255,255,.035); font-size: 12px; color: var(--white);
}
.sc-dep-k {
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-light); min-width: 118px;
}
.sc-dep .sr-act { margin-left: auto; }
.sc-acts { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.sc-acts .up-btn { padding: 6px 13px; font-size: 12px; }

.sc-look-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.sc-look-h h4 {
    margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gray-light);
}
.sc-look-h span { font-size: 12.5px; color: var(--white); }
.sc-look-h span.is-late { color: #ff8f8f; }
.sc-weeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sc-week {
    border: 1px solid var(--border); border-radius: 13px; padding: 12px 13px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.sc-w-h {
    display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
    font-size: 11.5px; font-weight: 750; color: var(--white);
}
.sc-w-h span { font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; color: var(--gray-light); }
.sc-li {
    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,.035); border-left: 2px solid rgba(255,255,255,.18);
}
.sc-li.is-submittal { border-left-color: #6ba6ff; }
.sc-li.is-milestone { border-left-color: #b58cff; }
.sc-li.is-dfow { border-left-color: #2fc07d; }
.sc-li.is-rfi { border-left-color: #e0a03b; }
.sc-li.is-over { background: rgba(196,23,23,.12); border-left-color: var(--red); }
.sc-li-d {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em;
    text-transform: uppercase; color: var(--gray-light);
}
.sc-li.is-over .sc-li-d { color: #ff8f8f; }
.sc-li-t { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--white); margin-top: 2px; }
.sc-li-x { font-size: 10.5px; line-height: 1.45; color: var(--gray-light); margin-top: 3px; }

html.light .sc-hero, html.light .sc-chart, html.light .sc-week {
    background: #fff; border-color: rgba(0,0,0,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px -26px rgba(0,0,0,.5);
}
html.light .sc-hero.is-warn { background: linear-gradient(180deg, rgba(224,135,11,.07), #fff); }
html.light .sc-hero.is-bad { background: linear-gradient(180deg, rgba(196,23,23,.07), #fff); }
html.light .sc-hero.is-warn .sc-hero-n { color: #a8690f; }
html.light .sc-hero.is-bad .sc-hero-n { color: #c41717; }
html.light .sc-track, html.light .sc-date, html.light .sc-dep, html.light .sc-li {
    background: rgba(0,0,0,.045);
}
html.light .sc-detail { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }
html.light .sc-row.is-sel { background: rgba(0,0,0,.035); }
html.light .sc-mark { border-color: #fff; }
html.light .sc-mark.is-base { background: rgba(0,0,0,.4); }
html.light .sc-mark.is-plan { background: #2b5fb8; }
html.light .sc-mark.is-fc { background: #a8690f; }
html.light .sc-mark.is-fc.is-late { background: #c41717; }
html.light .sc-mark.is-act { background: #0f7a4b; }
html.light .sc-lg.is-plan { background: #2b5fb8; }
html.light .sc-lg.is-fc { background: #a8690f; }
html.light .sc-lg.is-act { background: #0f7a4b; }
html.light .sc-lg.is-base { background: rgba(0,0,0,.32); }
html.light .sc-float { background: rgba(15,122,75,.3); }
html.light .sc-li.is-over { background: rgba(196,23,23,.08); }
html.light .sc-hero-n, html.light .sc-hero-b span, html.light .sc-date b,
html.light .sc-dep, html.light .sc-d-v, html.light .sc-w-h,
html.light .sc-li-t, html.light .sc-look-h span { color: var(--black); }
html.light .sc-hero-b strong, html.light .sc-axis, html.light .sc-legend span,
html.light .sc-r-n, html.light .sc-r-name, html.light .sc-r-v, html.light .sc-date span,
html.light .sc-conf, html.light .sc-dep-k, html.light .sc-look-h h4,
html.light .sc-w-h span, html.light .sc-li-d, html.light .sc-li-x { color: var(--gray-mid); }
html.light .sc-r-v.is-late, html.light .sc-d-v.is-late, html.light .sc-crit,
html.light .sc-look-h span.is-late { color: #c41717; }
html.light .sc-r-v.is-soon, html.light .sc-d-v.is-soon { color: #a8690f; }

@media (max-width: 1000px) {
    .sc-weeks { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .sc-row { grid-template-columns: 1fr 74px; }
    /* The track goes before the name does: on a phone the name and the verdict
       are what carry the meaning, and a 40px bar carries none. */
    .sc-track { display: none; }
    .sc-legend { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   POLISH LAYER

   Everything above defines what each module IS. This defines how the whole
   panel FEELS, in one place rather than twelve, so the modules stay visually
   related while each keeps its own shape.

   Three ideas:
     DEPTH    surfaces are lit from above - a hairline highlight on the top
              edge, a soft shadow underneath - instead of being flat fills.
     FIGURE   numbers are the loudest thing on a screen full of numbers:
              tabular, tighter, larger, and never re-flowing as they change.
     MOTION   things that arrive, arrive. Nothing moves that is not changing.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.xm-metric, .ce, .co, .pn-item, .pn-area, .ob-item, .ob-feature, .dl-day,
.cw-chart, .pn-ready, .ob-health, .dl-cal, .sc-chart, .sc-week, .sc-hero,
.pn-cluster, .ob-finding, .xf-modal {
    background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -22px rgba(0,0,0,.85);
}
html.light .xm-metric, html.light .ce, html.light .co, html.light .pn-item,
html.light .pn-area, html.light .ob-item, html.light .ob-feature, html.light .dl-day,
html.light .cw-chart, html.light .pn-ready, html.light .ob-health, html.light .dl-cal,
html.light .sc-chart, html.light .sc-week, html.light .sc-hero, html.light .xf-modal {
    background-image: linear-gradient(180deg, rgba(0,0,0,.018), rgba(0,0,0,0));
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 34px -30px rgba(0,0,0,.55);
}

/* ── The metric tile, which appears in every module ───────────────────── */
.xm-metric {
    position: relative; min-width: 96px; padding: 12px 15px 11px; border-radius: 13px;
    overflow: hidden;
    transition: transform .2s var(--ease-out, ease), border-color .2s ease;
}
.xm-metric::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.30), transparent 70%);
}
.xm-metric.is-bad::before { background: linear-gradient(90deg, #ff6b6b, transparent 70%); }
.xm-metric.is-warn::before { background: linear-gradient(90deg, #e0a03b, transparent 70%); }
.xm-metric:hover { transform: translateY(-1px); }
.xm-metric b {
    font-size: 25px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.xm-metric span { font-size: 9.5px; letter-spacing: .09em; margin-top: 2px; display: block; }
html.light .xm-metric::before { background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 70%); }
html.light .xm-metric.is-bad::before { background: linear-gradient(90deg, #c41717, transparent 70%); }
html.light .xm-metric.is-warn::before { background: linear-gradient(90deg, #a8690f, transparent 70%); }

/* ── Headlines ────────────────────────────────────────────────────────── */
.sr-headline, .cw-headline {
    position: relative; border-left: 0; padding: 13px 16px 13px 18px; border-radius: 12px;
    font-size: 14px; line-height: 1.55;
}
.sr-headline::before, .cw-headline::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 100px; background: #2fc07d;
}
.sr-headline.is-late::before, .cw-headline.is-late::before { background: var(--red); }
.sr-headline.is-soon::before, .cw-headline.is-soon::before { background: #e0a03b; }
.sr-headline.dw-unknown::before { background: rgba(255,255,255,.3); }
.sr-headline.is-err::before { background: var(--red); }

/* ── Buttons ──────────────────────────────────────────────────────────────
 *
 * A BUTTON WITH A BACKGROUND STATES ITS OWN TEXT COLOUR.
 *
 * style.css:83 sets `button { color: inherit }` globally, and `.up-btn` never
 * declared a colour of its own - only the `--primary` variant did, and the
 * execution modules all use the plain class. In dark mode it inherited
 * something near-white and looked correct by accident. Then the light ground
 * fix gave `.up-pane` a dark text colour, and every red button in the panel
 * inherited BLACK onto red.
 *
 * Two mistakes compounding: painting a button without dressing its text, and
 * changing an inherited colour that something was silently depending on. The
 * fix is the same for both - anything with a saturated background says what
 * colour its text is, in both themes, and does not ask its parent. */
/* The paint and the text colour are ONE rule. Splitting them across two
   selectors is how they drift apart again, which is precisely how this bug
   was introduced. */
.up-btn:not(.is-ghost):not(.up-btn--secondary):not(.up-btn--ghost),
html.light .up-btn:not(.is-ghost):not(.up-btn--secondary):not(.up-btn--ghost) {
    background-image: linear-gradient(180deg, #d92222, var(--red) 55%, var(--red-dark));
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 8px 20px -10px rgba(196,23,23,.75);
    transition: transform .16s var(--ease-out, ease), box-shadow .2s ease, filter .2s ease;
}

/* Same mistake, found by the same check: the preview mock-up's button is a
   solid orange with no text colour of its own. */
.up-mvbtn, html.light .up-mvbtn { color: #fff; }

/* The confirm button in every modal on the panel was a transparent ghost with
   grey text - visually identical to Cancel beside it, so the two actions with
   the most different consequences looked the same. */
.xf-ok, html.light .xf-ok {
    background: linear-gradient(180deg, #d92222, var(--red) 55%, var(--red-dark));
    border-color: var(--red-dark); color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 8px 20px -10px rgba(196,23,23,.7);
}
.xf-ok:hover { filter: brightness(1.08); }
.xf-ok.is-danger, html.light .xf-ok.is-danger {
    background: linear-gradient(180deg, #b81616, #8f0f0f);
    border-color: #8f0f0f; color: #fff;
}
.up-btn:not(.is-ghost):not(.up-btn--secondary):hover {
    filter: brightness(1.07);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 26px -10px rgba(196,23,23,.9);
}
.up-btn:active { transform: translateY(1px); }
.sr-act {
    border-radius: 8px; padding: 6px 11px;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.sr-act:hover { background: rgba(255,255,255,.05); }
html.light .sr-act:hover { background: rgba(0,0,0,.04); }
.up-btn.is-ghost {
    background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    transition: transform .16s var(--ease-out, ease), border-color .2s ease;
}
.up-btn.is-ghost:hover { transform: translateY(-1px); }
html.light .up-btn.is-ghost {
    background-image: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.01));
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.sr-badge {
    font-size: 10px; letter-spacing: .07em; padding: 4px 9px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.sr-badge.is-late { box-shadow: 0 0 0 1px rgba(255,107,107,.28) inset; }
.sr-badge.is-soon { box-shadow: 0 0 0 1px rgba(224,160,59,.28) inset; }
.sr-badge.is-done { box-shadow: 0 0 0 1px rgba(47,192,125,.28) inset; }

/* ── The form, which every module opens ───────────────────────────────── */
.xf-backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(6px); animation: xfIn .18s ease both; }
.xf-modal {
    border-radius: 20px;
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
    animation: xfUp .26s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes xfIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes xfUp {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}
.xf-field input, .xf-field select, .xf-field textarea {
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.xf-field input:focus, .xf-field select:focus, .xf-field textarea:focus {
    outline: none; border-color: rgba(196,23,23,.6);
    box-shadow: 0 0 0 3px rgba(196,23,23,.16);
}

/* ── Arrival ──────────────────────────────────────────────────────────── */
.up-modview { animation: modIn .3s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes modIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* Rows stagger in, but only the first handful: a list of two hundred punch
   items animating one by one is a loading screen, not a flourish. */
.ce, .co, .pn-item, .ob-item, .sc-row, .dl-day, .pn-area, .ob-feature {
    animation: rowIn .34s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ce:nth-child(n+9), .co:nth-child(n+9), .pn-item:nth-child(n+9),
.ob-item:nth-child(n+9), .sc-row:nth-child(n+9) { animation: none; }
.ce:nth-child(2), .co:nth-child(2), .pn-item:nth-child(2), .ob-item:nth-child(2),
.sc-row:nth-child(2), .pn-area:nth-child(2), .ob-feature:nth-child(2) { animation-delay: .03s; }
.ce:nth-child(3), .co:nth-child(3), .pn-item:nth-child(3), .ob-item:nth-child(3),
.sc-row:nth-child(3), .pn-area:nth-child(3), .ob-feature:nth-child(3) { animation-delay: .06s; }
.ce:nth-child(4), .co:nth-child(4), .pn-item:nth-child(4), .ob-item:nth-child(4),
.sc-row:nth-child(4), .pn-area:nth-child(4), .ob-feature:nth-child(4) { animation-delay: .09s; }
.ce:nth-child(n+5), .co:nth-child(n+5), .pn-item:nth-child(n+5),
.ob-item:nth-child(n+5), .sc-row:nth-child(n+5) { animation-delay: .12s; }

/* Somebody who has asked their system to stop moving things means it. */
@media (prefers-reduced-motion: reduce) {
    .up-modview, .ce, .co, .pn-item, .ob-item, .sc-row, .dl-day, .pn-area,
    .ob-feature, .xf-modal, .xf-backdrop { animation: none; }
    .xm-metric, .up-btn, .up-btn.is-ghost, .dl-cell, .ob-rung { transition: none; }
}

/* ── Interaction ──────────────────────────────────────────────────────── */
.ce, .co, .pn-item, .ob-item, .dl-cell, .ob-rung, .xt-div-h, .sc-r-h {
    transition: transform .18s var(--ease-out, ease), border-color .18s ease,
        background .18s ease, box-shadow .18s ease;
}
.pn-item:hover, .ce:hover, .co:hover, .ob-item:hover { border-color: rgba(255,255,255,.16); }
html.light .pn-item:hover, html.light .ce:hover, html.light .co:hover,
html.light .ob-item:hover { border-color: rgba(0,0,0,.18); }
.dl-cell:not(.is-pad):not(.is-future):hover { transform: translateY(-2px); }
.ob-rung:hover { transform: translateY(-1px); }

/* Keyboard users get the same affordances as pointer users. */
.dl-cell:focus-visible, .ob-rung:focus-visible, .sc-r-h:focus-visible,
.xt-div-h:focus-visible, .ob-f-t:focus-visible, .sr-act:focus-visible,
.up-btn:focus-visible {
    outline: 2px solid rgba(196,23,23,.75); outline-offset: 2px;
}

/* ── Figures ──────────────────────────────────────────────────────────── */
.cw-val, .ce-money, .co-money, .pn-ready-n, .ob-h-n, .sc-hero-n, .pn-cl-n,
.dl-h, .sc-r-v, .cw-label {
    font-variant-numeric: tabular-nums;
}
.pn-ready-n, .ob-h-n {
    font-size: 40px; letter-spacing: -.03em; line-height: .9;
}
.cw-val { font-size: 13.5px; letter-spacing: -.01em; }
.cw-total .cw-val { font-size: 17px; }

/* ── Panels ───────────────────────────────────────────────────────────── */
.pn-ready, .ob-health, .sc-hero, .cw-chart, .dl-cal, .sc-chart {
    border-radius: 16px;
}
.pn-ready, .ob-health { padding: 18px 22px; }
.ce, .co, .pn-item, .ob-item { border-radius: 12px; }
.pn-area, .ob-feature, .sc-week { border-radius: 14px; }

/* The area and feature headers read as headers rather than as another row. */
.pn-area-h, .ob-f-h {
    background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    border-bottom: 1px solid var(--border);
}
html.light .pn-area-h, html.light .ob-f-h {
    background-image: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.015));
    border-bottom-color: rgba(0,0,0,.07);
}

/* ── Signature elements ───────────────────────────────────────────────── */
/* The waterfall gets its gloss: money is the subject, so the bars are the
   most finished thing on that screen. */
.cw-bar { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset; }
.cw-total .cw-bar { box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 4px 14px -6px rgba(196,23,23,.8); }
.cw-add .cw-bar { box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 3px 12px -6px rgba(47,192,125,.7); }

/* A held rung glows faintly. Three green rungs in a row should feel finished. */
.ob-rung.is-held { box-shadow: 0 0 0 1px rgba(47,192,125,.18), 0 4px 14px -8px rgba(47,192,125,.6); }
.ob-rung.is-blocked { box-shadow: 0 0 0 1px rgba(224,160,59,.2); }

/* A logged day sits slightly proud; a hole is recessed. The calendar should
   read as holes before it reads as days. */
.dl-cell.is-log { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 16px -14px rgba(0,0,0,.9); }
.dl-cell.is-gap { box-shadow: 0 2px 10px -8px rgba(224,160,59,.9) inset; }

/* An item that blocks closeout, or a stop-work observation, should be findable
   from across the room. */
.pn-item.is-blocking, .ob-item.is-stop { box-shadow: inset 3px 0 0 var(--red), 0 8px 22px -18px rgba(196,23,23,.9); }

/* ── Empty states ─────────────────────────────────────────────────────── */
.sr-empty {
    padding: 34px 26px; border-radius: 14px; border: 1px dashed var(--border);
    background: rgba(255,255,255,.015);
}
.sr-empty.is-err {
    border-style: solid; border-color: rgba(196,23,23,.35); background: rgba(196,23,23,.08);
    padding: 13px 16px;
}
html.light .sr-empty { background: rgba(0,0,0,.015); border-color: rgba(0,0,0,.12); }
html.light .sr-empty.is-err { background: rgba(196,23,23,.06); border-color: rgba(196,23,23,.3); }
.xt-none {
    padding: 11px 13px; border-radius: 9px; border: 1px dashed var(--border);
    background: rgba(255,255,255,.012);
}
html.light .xt-none { border-color: rgba(0,0,0,.11); background: rgba(0,0,0,.012); }

/* ── The bar every module hangs its tools from ────────────────────────── */
.xm-bar {
    flex-direction: column; align-items: stretch; gap: 12px;
    padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.xm-bar .xm-metrics { gap: 10px; }
.xm-bar .xm-tools { margin-left: 0; }

/* ── Scrollbars, inside the panel only ────────────────────────────────── */
.sr-body ::-webkit-scrollbar, .xf-modal::-webkit-scrollbar { width: 10px; height: 10px; }
.sr-body ::-webkit-scrollbar-thumb, .xf-modal::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14); border-radius: 100px;
    border: 3px solid transparent; background-clip: content-box;
}
.sr-body ::-webkit-scrollbar-thumb:hover, .xf-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.24); background-clip: content-box;
}
html.light .sr-body ::-webkit-scrollbar-thumb, html.light .xf-modal::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18); background-clip: content-box;
}
.sr-body ::-webkit-scrollbar-track, .xf-modal::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgba(196,23,23,.35); color: #fff; }
html.light ::selection { background: rgba(196,23,23,.2); color: #0a0a0a; }

/* ═════════════════════════════════════════════════════════════════════════
   THE EXECUTION WORKSPACE

   A launcher grid says these are twelve products you visit one at a time and
   come back from. They are not: they share a project, a vocabulary and a set
   of records. So the rail never leaves the screen, the project header never
   leaves the screen, and there is no back button anywhere.

   THE RAIL CARRIES STATE. A module with three overdue RFIs behind it looks
   different from one with none, before you click it. Counts sit right-aligned
   in the row and an alert dot sits on the icon, so the shape of the rail tells
   you where the job hurts without reading a word of it.
   ═════════════════════════════════════════════════════════════════════════ */
.ws-boot {
    display: flex; align-items: center; gap: 12px; padding: 60px 0;
    font-size: 13px; color: var(--gray-light);
}
.ws-spin {
    width: 16px; height: 16px; border-radius: 100px;
    border: 2px solid rgba(255,255,255,.15); border-top-color: var(--red);
    animation: wsSpin .7s linear infinite;
}
@keyframes wsSpin { to { transform: rotate(360deg); } }
html.light .ws-spin { border-color: rgba(0,0,0,.12); border-top-color: var(--red); }

.ws-blank {
    max-width: 62ch; padding: 54px 34px; text-align: center; margin: 30px auto;
    border: 1px dashed var(--border); border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.ws-blank-i {
    width: 46px; height: 46px; margin: 0 auto 18px; color: var(--gray-light);
    display: grid; place-items: center; border-radius: 13px;
    border: 1px solid var(--border); background: rgba(255,255,255,.04);
}
.ws-blank-i svg { width: 24px; height: 24px; }
.ws-blank h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.ws-blank p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--gray-light); }
html.light .ws-blank { border-color: rgba(0,0,0,.13); background: linear-gradient(180deg, rgba(0,0,0,.02), transparent); }
html.light .ws-blank-i { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.03); color: var(--gray-mid); }
html.light .ws-blank h2 { color: var(--black); }
html.light .ws-blank p { color: var(--gray-mid); }

/* ── The project, which never leaves the screen ───────────────────────── */
.ws-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.ws-eyebrow {
    font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--red); margin-bottom: 7px;
}
html.light .ws-eyebrow { color: #c41717; }
.ws-id h1 {
    margin: 0; font-size: 30px; font-weight: 850; letter-spacing: -.03em; line-height: 1.1;
    color: var(--white);
}
.ws-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.ws-meta span {
    font-size: 11.5px; color: var(--gray-light);
    padding: 3px 10px; border-radius: 100px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
}
.ws-meta span.is-hot { color: #ff8f8f; border-color: rgba(196,23,23,.4); background: rgba(196,23,23,.1); }
.ws-switch {
    appearance: none; font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 9px 14px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--white);
}
html.light .ws-id h1 { color: var(--black); }
html.light .ws-meta span { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: var(--gray-mid); }
html.light .ws-meta span.is-hot { color: #c41717; background: rgba(196,23,23,.07); }
html.light .ws-switch { background: #fff; border-color: rgba(0,0,0,.13); color: var(--black); }

/* ── Five numbers a project manager acts on ───────────────────────────── */
.ws-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.ws-kpi {
    position: relative; overflow: hidden; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px 13px; border-radius: 14px; font: inherit;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 30px -26px rgba(0,0,0,.9);
    transition: transform .18s var(--ease-out, ease), border-color .18s ease;
}
.ws-kpi::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.3), transparent 65%);
}
.ws-kpi.is-warn::before { background: linear-gradient(90deg, #e0a03b, transparent 65%); }
.ws-kpi.is-bad::before { background: linear-gradient(90deg, #ff6b6b, transparent 65%); }
.ws-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.ws-kpi-l {
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-light);
}
.ws-kpi b {
    font-size: 26px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05;
    color: var(--white); font-variant-numeric: tabular-nums;
}
.ws-kpi.is-warn b { color: #e0a03b; }
.ws-kpi.is-bad b { color: #ff6b6b; }
.ws-kpi-s { font-size: 10.5px; color: var(--gray-light); }
.ws-kpi.is-bad .ws-kpi-s { color: #ff8f8f; }
html.light .ws-kpi {
    background: #fff; border-color: rgba(0,0,0,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -28px rgba(0,0,0,.5);
}
html.light .ws-kpi::before { background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 65%); }
html.light .ws-kpi.is-warn::before { background: linear-gradient(90deg, #a8690f, transparent 65%); }
html.light .ws-kpi.is-bad::before { background: linear-gradient(90deg, #c41717, transparent 65%); }
html.light .ws-kpi b { color: var(--black); }
html.light .ws-kpi.is-warn b { color: #a8690f; }
html.light .ws-kpi.is-bad b { color: #c41717; }
html.light .ws-kpi-l, html.light .ws-kpi-s { color: var(--gray-mid); }
html.light .ws-kpi.is-bad .ws-kpi-s { color: #c41717; }

/* ── The rail, which never goes away ──────────────────────────────────── */
.ws-body { display: grid; grid-template-columns: 218px 1fr; gap: 22px; align-items: start; }
.ws-rail {
    position: sticky; top: 88px;
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px; border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
/* THE RAIL IS A NAV, AND THE SITE STYLESHEET STYLES EVERY NAV.
 *
 * The panel page loads ../style.css before this file, and that sheet's bare
 * `nav` rule is the fixed site header: 68px tall, edge to edge, centred
 * flex row, blurred background. The rail is a <nav> too, so it inherited
 * every one of those properties this rule did not override. The card came
 * out 68px tall with its groups spilling out below it, which is what "The
 * pipeline" floating in its own box was. Every property the header rule
 * sets is pinned here at higher specificity, once, for both workspaces. */
nav.ws-rail {
    position: sticky; top: 88px; left: auto; right: auto; z-index: 1;
    height: auto; min-height: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
}
.ws-grp { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.ws-grp > span {
    padding: 6px 10px 4px; font-size: 9px; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; color: var(--gray-light); opacity: .7;
}
.ws-nav {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 9px; cursor: pointer; font: inherit;
    border: 1px solid transparent; background: transparent; text-align: left;
    color: var(--gray-light);
    transition: background .16s ease, color .16s ease;
}
.ws-nav > span { flex: 1; font-size: 12.5px; font-weight: 600; }
.ws-nav:hover { background: rgba(255,255,255,.05); color: var(--white); }
.ws-nav.is-on {
    background: linear-gradient(90deg, rgba(196,23,23,.22), rgba(196,23,23,.06));
    border-color: rgba(196,23,23,.32); color: var(--white);
}
.ws-nav.is-on .ws-i { color: #ff8f6b; }
.ws-i { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.ws-n {
    font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: 100px;
    background: rgba(255,255,255,.09); color: var(--gray-light);
}
.ws-nav.is-on .ws-n { background: rgba(255,255,255,.16); color: var(--white); }
/* The dot sits on the icon, not at the end of the row, so the rail's shape
   tells you where the job hurts without reading a word of it. */
.ws-dot {
    position: absolute; left: 20px; top: 7px; width: 6px; height: 6px; border-radius: 100px;
    background: #ff6b6b; box-shadow: 0 0 0 2px var(--charcoal);
}
.ws-nav.has-alert { color: var(--white); }
html.light .ws-rail { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
html.light .ws-nav { color: var(--gray-mid); }
html.light .ws-nav:hover { background: rgba(0,0,0,.04); color: var(--black); }
html.light .ws-nav.is-on {
    background: linear-gradient(90deg, rgba(196,23,23,.13), rgba(196,23,23,.03));
    border-color: rgba(196,23,23,.28); color: var(--black);
}
html.light .ws-nav.is-on .ws-i { color: #c41717; }
html.light .ws-nav.has-alert { color: var(--black); }
html.light .ws-grp > span { color: var(--gray-mid); }
html.light .ws-n { background: rgba(0,0,0,.07); color: var(--gray-mid); }
html.light .ws-nav.is-on .ws-n { background: rgba(0,0,0,.1); color: var(--black); }
html.light .ws-dot { box-shadow: 0 0 0 2px #fff; background: #c41717; }

.ws-main { min-width: 0; }
.ws-mod { min-width: 0; }
/* Inside the workspace a module is content, not a page: no top margin, no
   chrome, no title of its own. The rail already said where you are. */
.ws-mod .sr-body { padding: 0; }

/* ── The overview: what is wrong, worst first ─────────────────────────── */
.ws-ov { display: flex; flex-direction: column; gap: 26px; }
.ws-ov-s > h2 {
    margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gray-light);
}
.ws-ov-p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--gray-light); max-width: 72ch; }
.ws-alerts { display: flex; flex-direction: column; gap: 8px; }
.ws-alert {
    display: grid; grid-template-columns: 132px 1fr 18px; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 13px; cursor: pointer; font: inherit; text-align: left;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    transition: transform .16s var(--ease-out, ease), border-color .16s ease;
}
.ws-alert:hover { transform: translateX(3px); border-color: rgba(255,255,255,.2); }
.ws-alert.is-stop { border-color: var(--red); background: rgba(196,23,23,.14); }
.ws-alert.is-bad { border-color: rgba(196,23,23,.4); background: rgba(196,23,23,.07); }
.ws-alert.is-warn { border-color: rgba(224,135,11,.35); background: rgba(224,135,11,.06); }
.ws-alert-m {
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-light);
}
.ws-alert.is-stop .ws-alert-m, .ws-alert.is-bad .ws-alert-m { color: #ff8f8f; }
.ws-alert.is-warn .ws-alert-m { color: #e0a03b; }
.ws-alert-t { font-size: 13px; line-height: 1.5; color: var(--white); }
.ws-alert-go { font-size: 15px; color: var(--gray-light); text-align: right; }
.ws-clear {
    padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(47,192,125,.3);
    background: rgba(20,168,106,.07); font-size: 13px; line-height: 1.65; color: var(--gray-light);
}
.ws-clear b { color: #2fc07d; }
html.light .ws-alert { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .ws-alert.is-stop { background: rgba(196,23,23,.1); border-color: #c41717; }
html.light .ws-alert.is-bad { background: rgba(196,23,23,.05); border-color: rgba(196,23,23,.32); }
html.light .ws-alert.is-warn { background: rgba(224,135,11,.06); border-color: rgba(168,105,15,.3); }
html.light .ws-alert-t { color: var(--black); }
html.light .ws-alert-m, html.light .ws-alert-go, html.light .ws-ov-s > h2,
html.light .ws-ov-p, html.light .ws-clear { color: var(--gray-mid); }
html.light .ws-alert.is-stop .ws-alert-m, html.light .ws-alert.is-bad .ws-alert-m { color: #c41717; }
html.light .ws-alert.is-warn .ws-alert-m { color: #a8690f; }
html.light .ws-clear { background: rgba(20,168,106,.06); border-color: rgba(15,122,75,.28); }
html.light .ws-clear b { color: #0f7a4b; }

.ws-ag { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ws-ag-s {
    padding: 13px 15px; border-radius: 13px; border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.ws-ag-s h4 {
    margin: 0 0 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gray-light);
}
.ws-ag-l {
    font-size: 12px; line-height: 1.45; color: var(--white); padding: 5px 0;
    border-top: 1px solid var(--border);
}
.ws-ag-l:first-of-type { border-top: 0; }
.ws-ag-m { margin-top: 6px; font-size: 10.5px; color: var(--gray-light); }
html.light .ws-ag-s { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .ws-ag-l { color: var(--black); border-top-color: rgba(0,0,0,.07); }
html.light .ws-ag-s h4, html.light .ws-ag-m { color: var(--gray-mid); }

.ws-qs { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-q {
    font: inherit; font-size: 12.5px; cursor: pointer;
    padding: 8px 14px; border-radius: 100px;
    border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--gray-light);
    transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.ws-q:hover { border-color: var(--red); color: var(--white); transform: translateY(-1px); }
html.light .ws-q { background: #fff; border-color: rgba(0,0,0,.12); color: var(--gray-mid); }
html.light .ws-q:hover { color: var(--black); }

@media (max-width: 1040px) {
    .ws-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .ws-body { grid-template-columns: 1fr; }
    /* On a narrow screen the rail becomes a scrolling strip rather than
       disappearing: losing it is losing the only navigation there is. */
    .ws-rail, nav.ws-rail {
        position: static; flex-direction: row; overflow-x: auto; gap: 6px;
        padding: 8px; scrollbar-width: none;
    }
    .ws-rail::-webkit-scrollbar { display: none; }
    .ws-grp { flex-direction: row; margin-top: 0; gap: 6px; }
    .ws-grp > span { display: none; }
    .ws-nav { white-space: nowrap; }
    .ws-nav > span { flex: 0 0 auto; }
    .ws-dot { left: 18px; top: 5px; }
}
@media (max-width: 620px) {
    .ws-id h1 { font-size: 23px; }
    .ws-alert { grid-template-columns: 1fr; gap: 5px; }
    .ws-alert-go { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MEETINGS, TRANSMITTALS, AND THE ASSISTANT
   ═════════════════════════════════════════════════════════════════════════ */
.mt-agenda, .mt-items, .mt-list, .tr-gaps { margin-bottom: 20px; }
.mt-ag-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.mt-ag-h h4, .mt-items > h4, .mt-list > h4, .tr-gaps > h4 {
    margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gray-light);
}
.mt-ag-h span { font-size: 12.5px; color: var(--white); }
.mt-ag-s {
    border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; margin-bottom: 9px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.mt-ag-s h5 {
    margin: 0 0 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: #ff8f6b;
}
.mt-ag-l { padding: 8px 0; border-top: 1px solid var(--border); }
.mt-ag-l:first-of-type { border-top: 0; padding-top: 0; }
.mt-ag-t { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--white); }
.mt-ag-w { font-size: 11.5px; line-height: 1.5; color: var(--gray-light); margin-top: 3px; }

.mt-item, .mt-mtg {
    border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
/* An item carried three times is the finding, so it is drawn as one. */
.mt-item.is-stuck { border-color: rgba(196,23,23,.42); background: rgba(196,23,23,.08); }
.mt-item.is-late { box-shadow: inset 3px 0 0 #e0a03b; }
.mt-mtg.is-draft { border-style: dashed; }
.mt-i-h, .mt-m-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.mt-carried {
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 100px; background: rgba(196,23,23,.2); color: #ff8f8f;
}
.mt-i-d { font-size: 13px; line-height: 1.5; color: var(--white); }
.mt-i-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.mt-m-t { font-size: 13.5px; font-weight: 700; color: var(--white); }
.mt-m-k, .mt-m-d { font-size: 11px; color: var(--gray-light); }
.mt-m-d { margin-left: auto; font-family: var(--font-mono); }
.mt-m-n {
    font-size: 12px; line-height: 1.6; color: var(--gray-light); white-space: pre-wrap;
    margin: 7px 0 9px; max-height: 130px; overflow: auto;
}
html.light .mt-ag-s, html.light .mt-item, html.light .mt-mtg { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .mt-item.is-stuck { background: rgba(196,23,23,.06); border-color: rgba(196,23,23,.32); }
html.light .mt-ag-s h5 { color: #c2410c; }
html.light .mt-ag-l { border-top-color: rgba(0,0,0,.07); }
html.light .mt-ag-h span, html.light .mt-ag-t, html.light .mt-i-d, html.light .mt-m-t { color: var(--black); }
html.light .mt-ag-h h4, html.light .mt-items > h4, html.light .mt-list > h4,
html.light .tr-gaps > h4, html.light .mt-ag-w, html.light .mt-m-k,
html.light .mt-m-d, html.light .mt-m-n { color: var(--gray-mid); }
html.light .mt-carried { background: rgba(196,23,23,.14); color: #c41717; }

/* Said plainly, at the top of the screen, every time. A document module that
   looks like it kept your drawings and did not is worse than none. */
.tr-note {
    padding: 12px 15px; border-radius: 12px; margin-bottom: 16px;
    border: 1px dashed rgba(107,166,255,.35); background: rgba(56,132,255,.06);
    font-size: 12px; line-height: 1.6; color: var(--gray-light);
}
html.light .tr-note { border-color: rgba(43,95,184,.3); background: rgba(43,95,184,.05); color: var(--gray-mid); }
.tr-gap {
    display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: 11px;
    margin-bottom: 7px; border-left: 3px solid #e0a03b; background: rgba(224,135,11,.07);
}
.tr-gap.is-bad { border-left-color: var(--red); background: rgba(196,23,23,.08); }
.tr-gap-l { font-family: var(--font-mono); font-size: 12.5px; font-weight: 750; color: var(--white); }
.tr-gap-w { font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }
html.light .tr-gap { background: rgba(224,135,11,.07); border-left-color: #a8690f; }
html.light .tr-gap.is-bad { background: rgba(196,23,23,.06); border-left-color: #c41717; }
html.light .tr-gap-l { color: var(--black); }
html.light .tr-gap-w { color: var(--gray-mid); }

.tr-row {
    border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.tr-row.is-overdue { box-shadow: inset 3px 0 0 var(--red); }
.tr-row.is-acknowledged { opacity: .72; }
.tr-r-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.tr-subj { font-size: 13.5px; font-weight: 700; color: var(--white); }
.tr-purp {
    margin-left: auto; font-size: 10px; font-weight: 750; letter-spacing: .05em;
    text-transform: uppercase; color: var(--gray-light);
}
.tr-r-to { font-size: 11.5px; color: var(--gray-light); }
.tr-r-s { font-size: 12px; line-height: 1.55; color: var(--white); margin-top: 6px; }
.tr-contents { margin: 8px 0 4px; }
html.light .tr-row { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .tr-subj, html.light .tr-r-s { color: var(--black); }
html.light .tr-purp, html.light .tr-r-to { color: var(--gray-mid); }

/* ── Ask the job ──────────────────────────────────────────────────────── */
.as { display: flex; flex-direction: column; gap: 14px; }
.as-log {
    display: flex; flex-direction: column; gap: 14px;
    min-height: 260px; max-height: 58vh; overflow-y: auto; padding-right: 4px;
}
.as-intro { padding: 26px 4px; max-width: 68ch; }
.as-intro h3 { margin: 0 0 9px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.as-intro p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; color: var(--gray-light); }
.as-you { display: flex; justify-content: flex-end; }
.as-you span {
    max-width: 74%; padding: 10px 16px; border-radius: 16px 16px 4px 16px;
    font-size: 13px; line-height: 1.5; color: #fff;
    background: linear-gradient(180deg, #d92222, var(--red));
    box-shadow: 0 8px 20px -12px rgba(196,23,23,.9);
}
.as-it {
    max-width: 84%; padding: 15px 18px; border-radius: 16px 16px 16px 4px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.as-it.is-cant { border-style: dashed; }
.as-text { font-size: 13.5px; line-height: 1.65; color: var(--white); }
/* A sentence a project manager cannot check is a sentence they stop trusting
   after the first one that turns out to be wrong. */
.as-cites {
    display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
}
.as-cites-h {
    font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gray-light);
}
.as-cite {
    display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer; font: inherit;
    padding: 5px 11px; border-radius: 100px;
    border: 1px solid var(--border); background: rgba(255,255,255,.05);
    transition: border-color .16s ease, transform .16s ease;
}
.as-cite:hover { border-color: var(--red); transform: translateY(-1px); }
.as-cite b { font-family: var(--font-mono); font-size: 11.5px; color: var(--white); }
.as-cite span { font-size: 10.5px; color: var(--gray-light); }
.as-ask { display: flex; gap: 10px; }
.as-ask input {
    flex: 1; font: inherit; font-size: 13.5px; padding: 13px 17px; border-radius: 12px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--white);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.as-ask input::placeholder { color: var(--gray-light); opacity: .7; }
.as-ask input:focus {
    outline: none; border-color: rgba(196,23,23,.6); box-shadow: 0 0 0 3px rgba(196,23,23,.15);
}
html.light .as-it { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .as-cite { background: #fff; border-color: rgba(0,0,0,.12); }
html.light .as-ask input { background: #fff; border-color: rgba(0,0,0,.13); color: var(--black); }
html.light .as-intro h3, html.light .as-text, html.light .as-cite b { color: var(--black); }
html.light .as-intro p, html.light .as-cites-h, html.light .as-cite span { color: var(--gray-mid); }
html.light .as-cites { border-top-color: rgba(0,0,0,.08); }

/* ═════════════════════════════════════════════════════════════════════════
   CORRECTIONS

   Three things were wrong on screen, and two of them were bugs rather than
   taste.

   1. THE PANEL OVERFLOWED TO THE RIGHT. `.up-main` is the `1fr` column of the
      shell grid, and a grid item defaults to `min-width: auto` - it refuses to
      shrink below its content. A five-column KPI strip and a wide alert row
      therefore pushed the whole column past the viewport and took the sidebar
      with it. One line fixes it, and it was never visible on a wide screen.

   2. LIGHT MODE HAD NO SURFACES. Cards were #fff on a near-#fff ground with a
      4-percent border, so nothing read as a card: the rail looked like it
      ended after "Overview" because that was the only place a red pill gave
      its edge away. A panel needs a ground darker than its cards or it has no
      hierarchy at all, whatever the shadows say.

   3. IT WAS NOT ONE COMPONENT SET. Radii ran 8/9/10/11/12/13/14/16px, section
      headings were weaker than the body text under them, ghost buttons read as
      disabled, and the alert row parked its label 132px from its text. Those
      are separate mistakes that add up to the same impression, so they are
      fixed as one scale rather than one at a time.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. The overflow ──────────────────────────────────────────────────── */
.up-main { min-width: 0; }
.up-shell { max-width: 100vw; }
[data-exec-shell] {
    /* Beyond this the rail is stranded on one side of a very wide screen and
       the eye has to travel to find the content. */
    max-width: 1460px;
    min-width: 0;
}
[data-proc-shell] { max-width: 1460px; min-width: 0; }
.ws-strip { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.ws-main, .ws-body, .ws-ov, .ws-alerts { min-width: 0; }
.ws-alert-t { min-width: 0; overflow-wrap: anywhere; }

/* ── 2. THE TOKEN THAT WAS NEVER GIVEN A LIGHT VALUE ──────────────────────
 *
 * `--border` is defined once, in :root, as rgba(255,255,255,0.08). It is used
 * on a hundred and fifty dividers, card edges and rails across this panel, and
 * it was never redefined for light mode - so in light mode every one of them
 * was white on white and simply did not exist.
 *
 * That is why the light theme looked wrong "on every tab" rather than on one:
 * the places that looked right were the ones with a hand-written html.light
 * override, and everything else lost its edges. Patching them one at a time
 * treats a hundred and fifty symptoms of one cause.
 *
 * Scoped to the panel rather than added to style.css, because the marketing
 * site's light mode was designed around the current value and is not what is
 * being fixed here. */
html.light {
    --border: rgba(0, 0, 0, 0.10);
}

/* ── A ground to sit on ───────────────────────────────────────────────── */
html.light .up-main { background: #f4f5f7; }
html.light .up-pane { color: #1a1a1a; }
/* Cards can now be pure white and actually read as raised. */
html.light .ws-kpi, html.light .ws-rail, html.light .ws-alert, html.light .ws-ag-s,
html.light .xm-metric, html.light .ce, html.light .co, html.light .pn-item,
html.light .pn-area, html.light .ob-item, html.light .ob-feature, html.light .dl-day,
html.light .cw-chart, html.light .pn-ready, html.light .ob-health, html.light .dl-cal,
html.light .sc-chart, html.light .sc-week, html.light .sc-hero, html.light .mt-item,
html.light .mt-mtg, html.light .mt-ag-s, html.light .tr-row, html.light .as-it,
html.light .sr-empty, html.light .as-ask input, html.light .ws-q, html.light .as-cite {
    background: #fff;
    border-color: rgba(0,0,0,.09);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px -10px rgba(0,0,0,.28);
}
html.light .sr-empty { background: #fff; }
html.light .xt-none { background: #fafbfc; border-color: rgba(0,0,0,.1); }
html.light .ws-blank { background: #fff; border-color: rgba(0,0,0,.11); }

/* In dark mode the ground is already dark; what was missing was contrast
   between the card and it. */
.ws-kpi, .ws-rail, .ws-alert, .ws-ag-s, .xm-metric, .ce, .co, .pn-item, .pn-area,
.ob-item, .ob-feature, .dl-day, .cw-chart, .pn-ready, .ob-health, .dl-cal,
.sc-chart, .sc-week, .sc-hero, .mt-item, .mt-mtg, .mt-ag-s, .tr-row, .as-it {
    border-color: var(--border);
}

/* ── 3. One component set ─────────────────────────────────────────────── */
/* Radius scale: 10 for controls, 14 for cards, 18 for panels. Nothing else. */
.sr-act, .ws-q, .xf-cancel, .xf-ok, .up-btn, .as-ask input, .ws-switch { border-radius: 10px; }
.ws-q, .as-cite, .sr-badge, .xt-chip, .ws-n, .mt-carried { border-radius: 100px; }
.ws-kpi, .ws-alert, .ws-ag-s, .xm-metric, .ce, .co, .pn-item, .ob-item, .mt-item,
.mt-mtg, .mt-ag-s, .tr-row, .sc-week, .dl-day, .tr-gap, .sc-date, .sc-dep, .dl-row,
.pn-verdict, .ob-blocker, .sc-detail, .ws-clear, .tr-note, .sr-empty, .xt-none {
    border-radius: 14px;
}
.ws-rail, .pn-ready, .ob-health, .sc-hero, .cw-chart, .dl-cal, .sc-chart, .pn-area,
.ob-feature, .xf-modal, .ws-blank, .as-it { border-radius: 18px; }

/* Section headings led by a rule, so they outrank the body text under them
   instead of being the quietest thing on the screen. */
.ws-ov-s > h2, .mt-ag-h h4, .mt-items > h4, .mt-list > h4, .tr-gaps > h4,
.pn-clusters h4, .ob-list > h4, .sc-look-h h4, .cw-col > h4 {
    display: flex; align-items: center; gap: 9px;
    font-size: 11px; letter-spacing: .13em; color: var(--white);
}
.ws-ov-s > h2::before, .mt-ag-h h4::before, .mt-items > h4::before, .mt-list > h4::before,
.tr-gaps > h4::before, .pn-clusters h4::before, .ob-list > h4::before,
.sc-look-h h4::before, .cw-col > h4::before {
    content: ""; width: 14px; height: 2px; border-radius: 100px; flex: 0 0 auto;
    background: var(--red);
}
html.light .ws-ov-s > h2, html.light .mt-ag-h h4, html.light .mt-items > h4,
html.light .mt-list > h4, html.light .tr-gaps > h4, html.light .pn-clusters h4,
html.light .ob-list > h4, html.light .sc-look-h h4, html.light .cw-col > h4 {
    color: var(--black);
}

/* The project name is a name, not a headline. It was competing with the data. */
.ws-id h1 { font-size: 26px; letter-spacing: -.025em; }
.ws-head { align-items: center; padding-bottom: 16px; margin-bottom: 16px; }
.ws-eyebrow { font-size: 9.5px; letter-spacing: .18em; margin-bottom: 6px; }

/* The KPI is the loudest thing on the screen, and it should be. */
.ws-kpi { padding: 15px 17px 14px; gap: 4px; }
.ws-kpi b { font-size: 30px; }
.ws-strip { gap: 12px; margin-bottom: 22px; }

/* THE RAIL IS ONE COMPONENT REPEATED.
 *
 * Overview had a first-child border and a clipped radius on top of the active
 * state's red gradient and red border, which turned it into a boxed pill
 * sitting in a card while everything under it was a plain row. It read as two
 * different components stacked, which is exactly what it was.
 *
 * Now it is the same row as the others, and the divider belongs to the first
 * GROUP under it rather than to the button. */
.ws-rail { padding: 10px 8px; gap: 1px; }
.ws-rail > .ws-nav:first-child { border-radius: 10px; border-bottom: 0; margin: 0; padding: 9px 11px; }
.ws-rail > .ws-grp:first-of-type {
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border);
}
html.light .ws-rail > .ws-grp:first-of-type { border-top-color: rgba(0,0,0,.08); }
.ws-nav { padding: 9px 11px; border-radius: 10px; }
.ws-nav > span { font-size: 13px; }
.ws-grp { margin-top: 11px; }
.ws-grp > span { padding: 4px 11px 6px; letter-spacing: .14em; opacity: 1; }

/* The active row is a row that is active, not a button that arrived from a
   different design. A left bar and a quiet tint, no border, no gradient. */
.ws-nav.is-on {
    background: rgba(196,23,23,.14); border-color: transparent; color: var(--white);
    box-shadow: inset 2px 0 0 var(--red);
}
html.light .ws-nav.is-on {
    background: rgba(196,23,23,.08); border-color: transparent; color: var(--black);
    box-shadow: inset 2px 0 0 var(--red);
}

/* The alert row: label, text, arrow. The 132px column left a dead gap the
   width of a hand between the two things that had to be read together. */
.ws-alert { grid-template-columns: auto 1fr auto; gap: 13px; padding: 15px 17px; }
.ws-alert-m {
    padding: 4px 10px; border-radius: 100px; white-space: nowrap;
    background: rgba(255,255,255,.07); font-size: 9px;
}
.ws-alert.is-stop .ws-alert-m, .ws-alert.is-bad .ws-alert-m { background: rgba(196,23,23,.2); }
.ws-alert.is-warn .ws-alert-m { background: rgba(224,135,11,.18); }
html.light .ws-alert-m { background: rgba(0,0,0,.06); }
html.light .ws-alert.is-stop .ws-alert-m, html.light .ws-alert.is-bad .ws-alert-m {
    background: rgba(196,23,23,.11);
}
html.light .ws-alert.is-warn .ws-alert-m { background: rgba(224,135,11,.14); }

/* A ghost button that reads as disabled is worse than no button. */
.up-btn.is-ghost {
    border-color: rgba(255,255,255,.18); color: var(--white); font-weight: 650;
}
.up-btn.is-ghost:hover { border-color: var(--red); background-image: none; background: rgba(196,23,23,.1); }
html.light .up-btn.is-ghost { border-color: rgba(0,0,0,.16); color: var(--black); }
html.light .up-btn.is-ghost:hover { background: rgba(196,23,23,.07); border-color: var(--red); }

/* THE 330px TALL EMPTY BOX.
 *
 * `.xm-alert` was written as `flex: 1 1 340px` for a bar laid out in a ROW,
 * where 340px is a width. The polish layer turned `.xm-bar` into a column, and
 * in a column the main axis is vertical: the same declaration became "340px
 * tall, and grow from there". Two lines of text sat in a box the height of a
 * paragraph of them.
 *
 * A flex shorthand is only meaningful next to the direction of the container
 * it is in, and changing one without the other is how that happens. */
.xm-alert { flex: 0 0 auto; }

/* The module body sits on the same rhythm as the overview beside it. */
.ws-mod .xm { gap: 20px; }
.ws-mod .xm-bar { padding-bottom: 20px; }
.ws-ov { gap: 30px; }
.ws-ov-s > h2 { margin-bottom: 12px; }

/* Metrics were 96px wide with a 25px figure in them: cramped, and the labels
   wrapped to two lines at the width they were given. */
.xm-metric { min-width: 118px; }
.xm-metric span { white-space: nowrap; }

/* auto-FILL, not auto-fit: with one agenda section, auto-fit stretched a single
   card across the whole screen to hold two words. */
.ws-ag { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* The assistant's suggestion chips were the same weight as the body text they
   sat under, so the screen ended in a grey mass. */
.ws-q { font-weight: 600; padding: 9px 15px; }

@media (max-width: 1240px) {
    .up-main { padding: 26px 22px 60px; }
}
/* The rest of the scale, found by auditing the stylesheet rather than by eye:
   a 5,000 line file had eight different corner radii on things that are all
   the same kind of object, which is most of what "assembled rather than
   designed" actually looks like. */
.dl-cell, .ob-rung, .sc-li, .sc-date, .sc-dep, .dl-row, .ob-blocker,
.sr-start input, .sr-start select, .sr-item, .sr-unassigned, .ws-blank-i {
    border-radius: 10px;
}
.sr-pkg, .xm-alert, .cw-headline, .sr-headline, .tr-gap { border-radius: 14px; }

/* ═════════════════════════════════════════════════════════════════════════
   THE RECORD DRAWER

   Every module shipped with an action button on each row and almost no way to
   OPEN one. A drawing sheet had exactly one interaction available: delete.
   This is the missing half, built once rather than twelve times.

   It slides from the right rather than covering the screen, because you are
   reading a row IN a register and the register should still be behind it.
   ═════════════════════════════════════════════════════════════════════════ */
.rc-backdrop {
    position: fixed; inset: 0; z-index: 9997;
    display: flex; justify-content: flex-end;
    background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
    animation: xfIn .16s ease both;
}
.rc {
    width: min(620px, 100%); height: 100%; overflow-y: auto;
    background: var(--charcoal); border-left: 1px solid var(--border);
    box-shadow: -30px 0 80px -30px rgba(0,0,0,.8);
    animation: rcIn .26s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes rcIn { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
html.light .rc { background: #fff; border-left-color: rgba(0,0,0,.1); }

.rc-boot { display: flex; align-items: center; gap: 12px; padding: 40px 26px; color: var(--gray-light); }
.rc-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 22px 24px 18px; border-bottom: 1px solid var(--border);
    background: var(--charcoal);
}
html.light .rc-head { background: #fff; border-bottom-color: rgba(0,0,0,.08); }
.rc-head > div { flex: 1; min-width: 0; }
.rc-kind {
    display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.rc-head h3 {
    margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em;
    font-family: var(--font-mono); color: var(--white);
}
.rc-head p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--gray-light); }
.rc-x {
    font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
    border: 1px solid var(--border); background: transparent; color: var(--gray-light);
}
.rc-x:hover { border-color: var(--red); color: var(--white); }
html.light .rc-head h3 { color: var(--black); }
html.light .rc-head p, html.light .rc-boot { color: var(--gray-mid); }
html.light .rc-x { border-color: rgba(0,0,0,.13); color: var(--gray-mid); }
html.light .rc-x:hover { color: var(--black); }

.rc-body { padding: 20px 24px 40px; }
.rc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 22px; }
.rc-f {
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.04);
    min-width: 0;
}
.rc-f.is-long { grid-column: 1 / -1; }
.rc-f > span {
    font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-light);
}
.rc-f > b { font-size: 13px; font-weight: 650; color: var(--white); overflow-wrap: anywhere; }
.rc-f .rc-date, .rc-f .rc-num { font-family: var(--font-mono); }
.rc-long { font-size: 12.5px; line-height: 1.6; color: var(--white); white-space: pre-wrap; }
html.light .rc-f { background: #f6f7f9; }
html.light .rc-f > span { color: var(--gray-mid); }
html.light .rc-f > b, html.light .rc-long { color: var(--black); }

.rc-sec { margin-bottom: 22px; }
.rc-sec > h4 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 9px;
    font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--white);
}
.rc-sec > h4::before {
    content: ""; width: 14px; height: 2px; border-radius: 100px; background: var(--red); flex: 0 0 auto;
}
.rc-n {
    margin-left: auto; padding: 1px 8px; border-radius: 100px; font-size: 10px;
    background: rgba(255,255,255,.09); color: var(--gray-light); letter-spacing: 0;
}
html.light .rc-sec > h4 { color: var(--black); }
html.light .rc-n { background: rgba(0,0,0,.07); color: var(--gray-mid); }

.rc-sub {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    padding: 11px 13px; border-radius: 12px; margin-bottom: 6px;
    background: rgba(255,255,255,.035); border: 1px solid var(--border);
}
.rc-sub-f { font-size: 12px; color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.rc-sub-f i {
    display: block; font-style: normal; font-size: 8.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light);
}
html.light .rc-sub { background: #f6f7f9; border-color: rgba(0,0,0,.07); }
html.light .rc-sub-f { color: var(--black); }
html.light .rc-sub-f i { color: var(--gray-mid); }

/* What this record did to the bid. Stored since the first module, and shown on
   no screen anywhere until this one. */
.rc-line {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    padding: 10px 13px; border-radius: 12px; margin-bottom: 6px;
    background: rgba(255,255,255,.035); font-size: 12.5px; color: var(--white);
}
.rc-line > span:nth-child(2) { flex: 1; min-width: 140px; }
.rc-line b { font-family: var(--font-mono); font-size: 12px; }
.rc-rel {
    padding: 2px 9px; border-radius: 100px; font-size: 9.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    background: rgba(255,255,255,.09); color: var(--gray-light);
}
.rc-rel.is-adds { background: rgba(20,168,106,.2); color: #2fc07d; }
.rc-rel.is-removes { background: rgba(56,132,255,.2); color: #6ba6ff; }
.rc-rel.is-consumes { background: rgba(224,135,11,.2); color: #e0a03b; }
.rc-rel.is-buys { background: rgba(196,23,23,.22); color: #ff8a8a; }
html.light .rc-line { background: #f6f7f9; color: var(--black); }
html.light .rc-rel { background: rgba(0,0,0,.07); color: var(--gray-mid); }
html.light .rc-rel.is-adds { background: rgba(20,168,106,.14); color: #0f7a4b; }
html.light .rc-rel.is-removes { background: rgba(43,95,184,.14); color: #2b5fb8; }
html.light .rc-rel.is-consumes { background: rgba(224,135,11,.16); color: #a8690f; }
html.light .rc-rel.is-buys { background: rgba(196,23,23,.12); color: #c41717; }

.rc-hist { display: flex; flex-direction: column; }
.rc-h {
    display: grid; grid-template-columns: 92px 1fr 110px; gap: 12px; align-items: start;
    padding: 10px 0; border-top: 1px solid var(--border); font-size: 12px;
}
.rc-h:first-child { border-top: 0; }
.rc-h-a {
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #ff8f6b;
}
.rc-h-b { min-width: 0; }
.rc-h-m { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--white); }
.rc-h-n { display: block; margin-top: 3px; line-height: 1.5; color: var(--gray-light); overflow-wrap: anywhere; }
.rc-h-w {
    font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5;
    color: var(--gray-light); text-align: right; overflow-wrap: anywhere;
}
html.light .rc-h { border-top-color: rgba(0,0,0,.07); }
html.light .rc-h-a { color: #c2410c; }
html.light .rc-h-m { color: var(--black); }
html.light .rc-h-n, html.light .rc-h-w { color: var(--gray-mid); }

/* A record you can open should look like one before you click it. */
[data-open] { cursor: pointer; }
[data-open]:hover { border-color: rgba(255,255,255,.24); }
html.light [data-open]:hover { border-color: rgba(0,0,0,.22); }

@media (max-width: 620px) {
    .rc-fields { grid-template-columns: 1fr; }
    .rc-h { grid-template-columns: 1fr; gap: 3px; }
    .rc-h-w { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .rc, .rc-backdrop { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   THE PORTFOLIO

   Ordered by what is wrong with each job rather than by name or by date. A
   list sorted alphabetically makes you read all of it to find the one that
   needs you, which is the job the list was supposed to do for you.

   Each card leads with the PROBLEMS, in sentences. A health score between 0
   and 100 tells nobody which job to open first; three sentences do.
   ═════════════════════════════════════════════════════════════════════════ */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ws-card {
    position: relative; overflow: hidden; cursor: pointer; font: inherit; text-align: left;
    display: flex; flex-direction: column; gap: 11px;
    padding: 19px 21px; border-radius: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 34px -28px rgba(0,0,0,.9);
    transition: transform .18s var(--ease-out, ease), border-color .18s ease, box-shadow .18s ease;
}
.ws-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,.26), transparent 60%);
}
.ws-card.is-warn::before { background: linear-gradient(90deg, #e0a03b, transparent 60%); }
.ws-card.is-bad::before { background: linear-gradient(90deg, #ff6b6b, transparent 60%); }
.ws-card.is-stop::before { background: var(--red); }
.ws-card:hover {
    transform: translateY(-3px); border-color: rgba(255,255,255,.22);
    box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 26px 48px -28px rgba(0,0,0,1);
}
.ws-card-h { display: flex; align-items: flex-start; gap: 10px; }
.ws-card-h h3 {
    flex: 1; margin: 0; font-size: 16px; font-weight: 750; line-height: 1.3;
    letter-spacing: -.015em; color: var(--white);
}
.ws-card-m { display: flex; gap: 7px; flex-wrap: wrap; }
.ws-card-m span {
    font-size: 10.5px; color: var(--gray-light);
    padding: 2px 9px; border-radius: 100px; background: rgba(255,255,255,.06);
}
.ws-card-m span.is-hot { color: #ff8f8f; background: rgba(196,23,23,.14); }

.ws-card-f { display: flex; flex-direction: column; gap: 5px; }
.ws-flag {
    font-size: 12px; line-height: 1.45; color: var(--gray-light);
    padding-left: 13px; position: relative;
}
.ws-flag::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px;
    border-radius: 100px; background: rgba(255,255,255,.3);
}
.ws-flag.is-warn::before { background: #e0a03b; }
.ws-flag.is-bad::before { background: #ff6b6b; }
.ws-flag.is-stop::before { background: var(--red); box-shadow: 0 0 0 3px rgba(196,23,23,.25); }
.ws-flag.is-bad, .ws-flag.is-stop { color: var(--white); }
.ws-card-ok { font-size: 12px; line-height: 1.5; color: #2fc07d; }

.ws-card-n {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--border);
}
.ws-cn { display: flex; flex-direction: column; gap: 1px; }
.ws-cn b {
    font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--white);
    font-variant-numeric: tabular-nums;
}
.ws-cn i {
    font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--gray-light);
}
.ws-cn.is-bad b { color: #ff6b6b; }
.ws-cn.is-warn b { color: #e0a03b; }

.ws-nav-r { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* An empty masterlist is still the masterlist: the header stays, so the first
   screen you ever see is the same screen you see afterwards. */
.ws-empty {
    max-width: 62ch; margin: 8px auto 40px; padding: 46px 34px; text-align: center;
    border: 1px dashed var(--border); border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.ws-empty h2 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.ws-empty p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--gray-light); }
html.light .ws-empty {
    background: #fff; border-color: rgba(0,0,0,.12);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
html.light .ws-empty h2 { color: var(--black); }
html.light .ws-empty p { color: var(--gray-mid); }

html.light .ws-card {
    background: #fff; border-color: rgba(0,0,0,.09);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px -20px rgba(0,0,0,.4);
}
html.light .ws-card:hover { border-color: rgba(0,0,0,.2); box-shadow: 0 4px 10px rgba(0,0,0,.07), 0 22px 44px -26px rgba(0,0,0,.5); }
html.light .ws-card::before { background: linear-gradient(90deg, rgba(0,0,0,.2), transparent 60%); }
html.light .ws-card.is-warn::before { background: linear-gradient(90deg, #a8690f, transparent 60%); }
html.light .ws-card.is-bad::before { background: linear-gradient(90deg, #c41717, transparent 60%); }
html.light .ws-card-h h3, html.light .ws-cn b { color: var(--black); }
html.light .ws-card-m span { background: rgba(0,0,0,.05); color: var(--gray-mid); }
html.light .ws-card-m span.is-hot { background: rgba(196,23,23,.1); color: #c41717; }
html.light .ws-flag, html.light .ws-cn i { color: var(--gray-mid); }
html.light .ws-flag.is-bad, html.light .ws-flag.is-stop { color: var(--black); }
html.light .ws-flag.is-warn::before { background: #a8690f; }
html.light .ws-flag.is-bad::before { background: #c41717; }
html.light .ws-card-ok { color: #0f7a4b; }
html.light .ws-card-n { border-top-color: rgba(0,0,0,.08); }
html.light .ws-cn.is-bad b { color: #c41717; }
html.light .ws-cn.is-warn b { color: #a8690f; }

/* The empty state offers both ways out rather than naming a third place. */
.ws-blank-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* Said at the top of every module, because a demonstration nobody notices ends
   up in a customer conversation. */
.ws-demo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 100px; margin-bottom: 16px;
    border: 1px dashed rgba(107,166,255,.45); background: rgba(56,132,255,.08);
    font-size: 12px; line-height: 1.5; color: var(--gray-light);
}
.ws-demo-b {
    padding: 3px 11px; border-radius: 100px; font-size: 9.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    background: rgba(56,132,255,.22); color: #6ba6ff; white-space: nowrap;
}
.ws-demo > span:nth-child(2) { flex: 1; min-width: 200px; }
.ws-demo .sr-act { margin-left: auto; }
html.light .ws-demo {
    border-color: rgba(43,95,184,.4); background: rgba(43,95,184,.06); color: var(--gray-mid);
}
html.light .ws-demo-b { background: rgba(43,95,184,.15); color: #2b5fb8; }

/* ── The selectors a brace-counting audit found with no light rule ────────
 *
 * Found by parsing the stylesheet rather than by looking at it: an earlier
 * regex-based check mis-paired every block after an @media and cleared rules
 * that were plainly broken. Sixteen came back, and most of them were the same
 * mistake - a hard-coded rgba(255,255,255,...) divider, which is the token
 * problem above written out by hand. */
html.light .cw-row.is-zero .cw-val { color: var(--gray-mid); }
html.light .dl-dow span { color: var(--gray-mid); }
html.light .xt-caret { color: var(--gray-mid); }
html.light .xd-disc-h { color: var(--gray-mid); border-bottom-color: var(--border); }
html.light .xd-x { color: var(--gray-mid); }
html.light .xd-x:hover { color: #c41717; }
html.light .rc-kind { color: #c41717; }
/* A 55 percent black scrim over a white page is a different amount of dark
   from the same scrim over a black one. */
html.light .rc-backdrop { background: rgba(20, 22, 26, .38); }
html.light .sc-slip {
    background: repeating-linear-gradient(135deg, #a8690f 0 4px, rgba(168,105,15,.28) 4px 8px);
}
/* Buttons do not inherit colour from their container by default, so a
   transparent button on a white card was still rendering in the user agent's
   own text colour. */
.ob-f-t, .sc-r-h, .xt-div-h, .dl-cell, .ob-rung, .ws-nav, .ws-card { color: inherit; }
html.light .ws-head { border-bottom-color: var(--border); }
html.light .xm-bar { border-bottom-color: var(--border); }
html.light .xs-stages { border-bottom-color: var(--border); }

/* The two selectors the audit found with no light-mode rule at all. */
.ws-boot { color: var(--gray-light); }
html.light .ws-boot { color: var(--gray-mid); }
/* The one bubble that is deliberately identical in both themes: it is the red
   the whole panel is branded on, and it reads on either ground. Stated rather
   than left as an omission, so the next audit does not flag it again. */
html.light .as-you span {
    background: linear-gradient(180deg, #d92222, var(--red)); color: #fff;
}

@media (max-width: 560px) {
    .ws-strip { grid-template-columns: repeat(2, 1fr); }
    .ws-kpi b { font-size: 24px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   OPPORTUNITY INTELLIGENCE - THE BID BOARD

   Five columns that read left to right the way a pursuit moves: watching,
   reviewing, bidding, submitted, decided. Each column is tinted for what it
   means, each card is ordered by what is wrong with it, and the deadline is
   the loudest thing on the card because it is the thing that cannot move.

   The rail, header and strip are the execution workspace's own classes, so
   moving between the two panes does not feel like moving between products.
   ═════════════════════════════════════════════════════════════════════════ */
.ws-nav.is-soon { opacity: .62; }
.ws-nav.is-soon:hover { opacity: .9; }
/* Staff view-as strip: the same banner as the worked example, with a select. */
.op-viewas { align-items: center; flex-wrap: wrap; }
.op-viewas-l { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gray-light); margin-left: auto; }
.op-viewas select {
    font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px;
    border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--white); max-width: 260px;
}
html.light .op-viewas select { background: #fff; color: var(--black); border-color: rgba(0,0,0,.14); }
.op-next { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; background: transparent; border: 1px solid var(--border); }
.op-alerts { margin-bottom: 24px; }
.op-alerts .ws-alert-t b { font-weight: 750; color: var(--white); margin-right: 5px; }
html.light .op-alerts .ws-alert-t b, html.light .ws-alert .ws-alert-t b { color: var(--black, #111); }

.op-board {
    display: grid; grid-template-columns: repeat(5, minmax(224px, 1fr)); gap: 12px;
    align-items: start; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x proximity;
}
.op-col {
    position: relative; overflow: hidden; min-height: 240px; scroll-snap-align: start;
    display: flex; flex-direction: column; border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
}
.op-col::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,.28), transparent 70%);
}
.op-col.is-reviewing::before { background: linear-gradient(90deg, #e0a03b, transparent 70%); }
.op-col.is-bidding::before { background: linear-gradient(90deg, var(--red), transparent 70%); }
.op-col.is-submitted::before { background: linear-gradient(90deg, #6ba6ff, transparent 70%); }
.op-col.is-done::before { background: linear-gradient(90deg, #2fc07d, transparent 70%); }
.op-col-h {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 13px 14px 11px; border-bottom: 1px solid var(--border);
}
.op-col-n { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--white); }
.op-col-c {
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
    padding: 0 7px; border-radius: 100px; background: rgba(255,255,255,.09); color: var(--gray-light);
}
.op-col-v { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.op-col-v i { font-style: normal; font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-light); margin-left: 3px; }
.op-col-b { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.op-col-e { padding: 10px 6px 14px; font-size: 11.5px; line-height: 1.55; color: var(--gray-light); opacity: .8; }

.op-card {
    position: relative; overflow: hidden; cursor: pointer; font: inherit; text-align: left;
    display: flex; flex-direction: column; color: inherit;
    padding: 11px 13px 10px; border-radius: 12px;
    border: 1px solid var(--border); border-left: 3px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    transition: transform .16s var(--ease-out, ease), border-color .16s ease, background .16s ease;
}
.op-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.op-card.is-warn { border-left-color: #e0a03b; }
.op-card.is-bad { border-left-color: #ff6b6b; }
.op-card.is-stop { border-left-color: var(--red); box-shadow: -6px 0 18px -10px rgba(196,23,23,.8); }
.op-card-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 10px; color: var(--gray-light); }
.op-mono { font-family: var(--font-mono); letter-spacing: .02em; }
.op-agency { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-card h4 { margin: 5px 0 8px; font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--white); }
.op-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.op-chip {
    font-size: 10px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 100px;
    background: rgba(255,255,255,.07); color: var(--gray-light); white-space: nowrap;
}
.op-chip.is-warn { background: rgba(224,160,59,.16); color: #e0a03b; }
.op-chip.is-bad { background: rgba(255,107,107,.16); color: #ff8f8f; }
.op-chip.is-stop { background: var(--red); color: #fff; }
.op-chip.is-money { color: var(--white); font-weight: 750; font-variant-numeric: tabular-nums; }
.op-card .ws-card-f { margin-top: 9px; }
.op-card-f {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 10px; color: var(--gray-light);
}
.op-ball::before { content: "Ball: "; opacity: .7; }
.op-pill {
    padding: 2px 8px; border-radius: 100px; font-size: 9px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    background: rgba(255,255,255,.09); color: var(--gray-light);
}
.op-pill.is-go { background: rgba(20,168,106,.2); color: #2fc07d; }
.op-pill.is-no_go { background: rgba(255,255,255,.07); color: var(--gray-light); text-decoration: line-through; }
.op-pill.is-pending { background: rgba(224,160,59,.16); color: #e0a03b; }
.op-src { margin-left: auto; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6ba6ff; }
.op-done-g { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.op-done-l { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-light); padding: 2px 4px 0; }
.op-done-l.is-awarded { color: #2fc07d; }
.op-done-l.is-lost { color: #ff8f8f; }
.op-col.is-done .op-card { border-left-color: rgba(255,255,255,.1); opacity: .88; }
.op-col.is-done .op-done-g:first-child .op-card { opacity: 1; }

/* ── Find work ─────────────────────────────────────────────────────────── */
.op-disc-f {
    padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
}
.op-disc-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.op-disc-row.is-types { margin-top: 12px; align-items: center; gap: 6px 16px; }
.op-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; }
.op-f.is-wide { flex: 3 1 260px; }
.op-f > span { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.op-f input, .op-f select {
    font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--white);
}
.op-f input:focus, .op-f select:focus { outline: none; border-color: rgba(196,23,23,.6); box-shadow: 0 0 0 3px rgba(196,23,23,.15); }
.op-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-light); cursor: pointer; }
.op-check input { accent-color: var(--red); }
.op-disc-r { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.op-disc-h { font-size: 12px; color: var(--gray-light); padding: 2px 4px 6px; }
.op-disc-h b { color: var(--white); }
.op-disc-h .is-new { color: #2fc07d; font-weight: 700; }
.op-disc-h .is-open { color: var(--white); font-weight: 700; }

/* Every filter that narrowed the search, removable. */
.op-fbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 2px 4px 10px; }
.op-fbar.is-alone { padding-bottom: 14px; }
.op-fnote { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.op-fchip {
    display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 11.5px; font-weight: 600;
    padding: 4px 7px 4px 11px; border-radius: 100px; cursor: pointer;
    border: 1px solid rgba(196,23,23,.45); background: rgba(196,23,23,.12); color: #ffb3b3;
}
.op-fchip i { font-style: normal; font-size: 13px; line-height: 1; opacity: .75; }
.op-fchip:hover { background: rgba(196,23,23,.22); color: #fff; }
.op-fchip:hover i { opacity: 1; }
.op-fclear {
    font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 10px;
    border-radius: 100px; border: 1px solid var(--border); background: transparent; color: var(--gray-light);
}
.op-fclear:hover { border-color: var(--red); color: var(--white); }
html.light .op-fnote, html.light .op-fclear { color: var(--gray-mid); }
html.light .op-fchip { border-color: rgba(196,23,23,.35); background: rgba(196,23,23,.08); color: #a01212; }
html.light .op-fchip:hover { background: rgba(196,23,23,.16); color: #7d0e0e; }
html.light .op-fclear { border-color: rgba(0,0,0,.14); }
html.light .op-fclear:hover { border-color: var(--red); color: var(--black); }
html.light .op-disc-h .is-open { color: var(--black); }
.op-dim { color: var(--gray-light); }
.op-f.is-narrow { flex: 0 0 78px; }
.op-f input[name="center"] { text-transform: uppercase; letter-spacing: .08em; }
.op-where.is-office { font-style: italic; }
.op-rnote {
    font-size: 11.5px; line-height: 1.5; color: var(--gray-light);
    padding: 9px 12px; border-radius: 10px; margin: 0 0 8px;
    background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.op-rnote b { color: var(--white); }
.op-rnote.is-warn { border-color: rgba(230,167,0,.4); background: rgba(230,167,0,.08); }
.op-rnote.is-narrow { border-color: rgba(196,23,23,.35); background: rgba(196,23,23,.07); }
html.light .op-rnote.is-narrow { border-color: rgba(196,23,23,.3); background: rgba(196,23,23,.04); }
html.light .op-rnote { background: #f6f7f9; border-color: rgba(0,0,0,.08); color: var(--gray-mid); }
html.light .op-rnote b { color: var(--black); }

/* Pages. A list that stops at the fortieth row needs a way forward.
   THE PAGER IS A NAV, and style.css styles every nav as the fixed 68px site
   header, so every property of that rule is pinned here. Third time: the
   rail and the bid list needed the same. `html.light nav.op-pager` is needed
   for the background because `html.light nav` outranks a single class. */
nav.op-pager {
    position: static; height: auto; min-height: 0; z-index: auto;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap;
    padding: 10px 2px; margin: 4px 0 10px;
    background: none; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
}
html.light nav.op-pager { background: none; border-bottom: 0; }
nav.op-pager:last-child { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.op-pg-n { display: flex; align-items: center; gap: 4px; }
.op-pg {
    font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; padding: 6px 12px;
    border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--white);
}
.op-pg:hover:not(:disabled) { border-color: var(--red); }
.op-pg:disabled { opacity: .4; cursor: default; }
.op-pg.is-num { min-width: 34px; padding: 6px 9px; text-align: center; font-variant-numeric: tabular-nums; }
.op-pg.is-num.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.op-pg-gap { font-style: normal; color: var(--gray-light); padding: 0 2px; }
.op-pg-s { font-size: 11.5px; color: var(--gray-light); margin-left: auto; text-align: right; }
.op-pg-more {
    font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; padding: 0; margin-left: 4px;
    border: 0; background: none; color: #ff8f8f; text-decoration: underline;
}
.op-pg-more:hover { color: #fff; }
html.light .op-pg { background: #fff; border-color: rgba(0,0,0,.12); color: var(--black); }
html.light .op-pg.is-num.is-on { background: var(--red); border-color: var(--red); color: #fff; }
html.light .op-pg-s, html.light .op-pg-gap, html.light .op-dim { color: var(--gray-mid); }
html.light nav.op-pager:last-child { border-top-color: rgba(0,0,0,.08); }
html.light .op-pg-more { color: #c41717; }
html.light .op-pg-more:hover { color: #7d0e0e; }
@media (max-width: 720px) {
    .op-pg-s { margin-left: 0; width: 100%; text-align: left; }
}
.op-disc-hint {
    padding: 18px 20px; border-radius: 14px; border: 1px dashed var(--border);
    font-size: 13px; line-height: 1.65; color: var(--gray-light); max-width: 78ch;
}
.op-disc-hint b { color: var(--white); }
.op-res {
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start;
    padding: 13px 15px; border-radius: 14px; border: 1px solid var(--border);
    background: rgba(255,255,255,.035);
}
.op-res.is-tracked { opacity: .72; }
.op-res-m { min-width: 0; }
.op-res h4 { margin: 0 0 5px; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--white); }
.op-res-s { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--gray-light); margin-bottom: 8px; }
.op-res-a { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.op-res-a .up-btn { padding: 7px 14px; font-size: 12px; }
.op-res-a a.sr-act { text-decoration: none; }

/* ── One pursuit, in the drawer ───────────────────────────────────────── */
.op-rc-h {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 14px;
    padding: 22px 24px 16px; border-bottom: 1px solid var(--border); background: var(--charcoal);
}
.op-rc-h > div { flex: 1; min-width: 0; }
.op-rc-h h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--white); }
.op-rc-h .ws-meta { margin-top: 8px; }
.op-steps { display: flex; padding: 18px 20px 0; }
.op-step {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: none; border: 0; font: inherit; cursor: pointer; padding: 0;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-light);
}
.op-step::before { content: ""; position: absolute; top: 6px; left: 50%; right: -50%; height: 2px; background: var(--border); }
.op-step:last-child::before { display: none; }
.op-step i { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 100px; border: 2px solid var(--border); background: var(--charcoal); }
.op-step.is-past i { background: var(--red); border-color: var(--red); }
.op-step.is-past::before { background: var(--red); }
.op-step.is-now { color: var(--white); }
.op-step.is-now i { border-color: var(--red); box-shadow: 0 0 0 4px rgba(196,23,23,.25); }
.op-step:hover { color: var(--white); }
.op-closed { padding: 12px 24px 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-light); }
.op-closed.is-lost { color: #ff8f8f; }
.op-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 16px 24px 4px; }
.op-acts .sr-act.is-danger { color: #ff8f8f; margin-left: auto; }
.op-decision {
    margin: 12px 24px 0; padding: 11px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; color: var(--white);
    background: rgba(20,168,106,.12); border: 1px solid rgba(20,168,106,.3);
}
.op-decision.is-no_go { background: rgba(255,255,255,.04); border-color: var(--border); }
.op-decision b { margin-right: 6px; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }
.op-decision i { display: block; margin-top: 4px; font-style: normal; font-size: 10.5px; color: var(--gray-light); }
.op-rc-f { padding: 12px 24px 0; }
.op-flds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px 24px 0; }
.op-fld { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); min-width: 0; }
.op-fld > span { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.op-fld > b { font-size: 13px; font-weight: 650; color: var(--white); overflow-wrap: anywhere; }
.op-fld > b i { font-style: normal; font-weight: 400; color: var(--gray-light); }
.op-fld a { color: #6ba6ff; }
.op-notes { margin: 12px 24px 0; padding: 12px 13px; border-radius: 12px; background: rgba(255,255,255,.035); font-size: 12.5px; line-height: 1.6; color: var(--white); }
.op-act { padding: 22px 24px 40px; }
.op-act h4 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
    font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--white);
}
.op-act h4::before { content: ""; width: 14px; height: 2px; border-radius: 100px; background: var(--red); }
.op-act-l { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--gray-light); }
.op-act-l:first-of-type { border-top: 0; }
.op-act-l b { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ff8f6b; }
.op-act-l i { flex-basis: 100%; font-style: normal; line-height: 1.5; color: var(--white); }
.op-act-l em { margin-left: auto; font-style: normal; font-size: 10.5px; font-family: var(--font-mono); }
.op-soon .up-soon-badge { margin-top: 18px; }

/* ── A toast, for the modules ─────────────────────────────────────────── */
.op-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translateX(-50%) translateY(8px);
    max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px;
    background: var(--charcoal); color: var(--white); border: 1px solid var(--border);
    box-shadow: 0 12px 32px -12px rgba(0,0,0,.6); font-size: 12.5px; line-height: 1.45;
    opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.op-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.op-toast.is-bad { border-color: rgba(255,107,107,.5); }
html.light .op-toast { background: #fff; color: var(--black); border-color: rgba(0,0,0,.12); box-shadow: 0 12px 32px -14px rgba(0,0,0,.35); }

/* ── Light theme ──────────────────────────────────────────────────────── */
html.light .op-col { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
html.light .op-col::before { background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 70%); }
html.light .op-col.is-reviewing::before { background: linear-gradient(90deg, #a8690f, transparent 70%); }
html.light .op-col.is-bidding::before { background: linear-gradient(90deg, #c41717, transparent 70%); }
html.light .op-col.is-submitted::before { background: linear-gradient(90deg, #2b5fb8, transparent 70%); }
html.light .op-col.is-done::before { background: linear-gradient(90deg, #0f7a4b, transparent 70%); }
html.light .op-col-h { border-bottom-color: rgba(0,0,0,.08); }
html.light .op-col-n, html.light .op-col-v, html.light .op-card h4, html.light .op-res h4, html.light .op-fld > b,
html.light .op-notes, html.light .op-act h4, html.light .op-act-l i, html.light .op-rc-h h2, html.light .op-decision,
html.light .op-chip.is-money, html.light .op-disc-h b, html.light .op-disc-hint b, html.light .op-step.is-now, html.light .op-step:hover { color: var(--black); }
html.light .op-col-c, html.light .op-pill, html.light .op-chip { background: rgba(0,0,0,.06); color: var(--gray-mid); }
html.light .op-col-v i, html.light .op-col-e, html.light .op-card-t, html.light .op-card-f, html.light .op-done-l,
html.light .op-f > span, html.light .op-check, html.light .op-disc-h, html.light .op-disc-hint, html.light .op-res-s,
html.light .op-fld > span, html.light .op-fld > b i, html.light .op-act-l, html.light .op-closed, html.light .op-step,
html.light .op-decision i { color: var(--gray-mid); }
html.light .op-card { background: #fafbfc; border-color: rgba(0,0,0,.09); border-left-color: rgba(0,0,0,.18); }
html.light .op-card:hover { background: #fff; border-color: rgba(0,0,0,.2); }
html.light .op-card.is-warn { border-left-color: #a8690f; }
html.light .op-card.is-bad, html.light .op-card.is-stop { border-left-color: #c41717; }
html.light .op-chip.is-warn { background: rgba(168,105,15,.12); color: #a8690f; }
html.light .op-chip.is-bad { background: rgba(196,23,23,.1); color: #c41717; }
html.light .op-chip.is-stop { background: #c41717; color: #fff; }
html.light .op-pill.is-go { background: rgba(20,168,106,.14); color: #0f7a4b; }
html.light .op-pill.is-pending { background: rgba(168,105,15,.12); color: #a8690f; }
html.light .op-src, html.light .op-fld a { color: #2b5fb8; }
html.light .op-done-l.is-awarded { color: #0f7a4b; }
html.light .op-done-l.is-lost, html.light .op-closed.is-lost, html.light .op-acts .sr-act.is-danger { color: #c41717; }
html.light .op-card-f, html.light .op-act-l { border-top-color: rgba(0,0,0,.08); }
html.light .op-disc-f, html.light .op-res { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .op-f input, html.light .op-f select { background: #fff; border-color: rgba(0,0,0,.13); color: var(--black); }
html.light .op-disc-hint { border-color: rgba(0,0,0,.14); }
html.light .op-rc-h { background: #fff; border-bottom-color: rgba(0,0,0,.08); }
html.light .op-step::before { background: rgba(0,0,0,.12); }
html.light .op-step i { background: #fff; border-color: rgba(0,0,0,.2); }
html.light .op-step.is-past i, html.light .op-step.is-past::before { background: #c41717; border-color: #c41717; }
html.light .op-step.is-now i { border-color: #c41717; box-shadow: 0 0 0 4px rgba(196,23,23,.15); }
html.light .op-fld, html.light .op-notes { background: #f6f7f9; }
html.light .op-decision { background: rgba(20,168,106,.1); border-color: rgba(20,168,106,.25); }
html.light .op-decision.is-no_go { background: #f6f7f9; border-color: rgba(0,0,0,.08); }
html.light .op-act-l b { color: #c2410c; }
html.light .op-next { border-color: rgba(0,0,0,.14); }

@media (max-width: 1100px) {
    .op-board { grid-template-columns: repeat(5, 240px); }
}
@media (max-width: 620px) {
    .op-flds { grid-template-columns: 1fr; }
    .op-res { grid-template-columns: 1fr; }
    .op-res-a { flex-direction: row; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCUREMENT INTELLIGENCE, the shell's own pieces (prefix pc-).
   The rail, strip, head, alerts and cards reuse the ws- classes; these are
   the picker cards, the week sections, the money card and the supplier
   drawer. Every module ships its own stylesheet under its own prefix.
   ═══════════════════════════════════════════════════════════════════════════ */
.pc-card-n { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.pc-card-n span { font-size: 12px; color: var(--gray-light); }
.pc-card-n span b { display: block; font-size: 15px; font-weight: 800; color: var(--white); font-family: var(--font-mono); }
.pc-card-n span.is-bad b { color: #ff8a8a; }
.pc-card-n span.is-warn b { color: #e0a03b; }
.pc-sec { margin: 0 0 18px; }
.pc-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-light); }
.pc-sec h3 b { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 8px; border-radius: 100px; background: rgba(255,255,255,.09); color: var(--white); }
.pc-sec h3 b.is-bad, .pc-sec h3 b.is-stop { background: rgba(196,23,23,.22); color: #ff8a8a; }
.pc-sec h3 b.is-warn { background: rgba(224,135,11,.2); color: #e0a03b; }
.pc-sec .ws-alert.is-ok { border-left-color: #2fc07d; }
.pc-sec-e { font-size: 12.5px; color: var(--gray-mid); padding: 6px 0 2px; }
.pc-open { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-light); white-space: nowrap; }
.pc-open:hover { color: var(--white); text-decoration: underline; }
.pc-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.pc-money-t { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.035); }
.pc-money-t span { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-light); }
.pc-money-t b { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 20px; font-weight: 800; color: var(--white); }
.pc-money-t i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--gray-mid); }
.pc-money-t.is-bad b { color: #ff8a8a; }
.pc-money-t.is-warn b { color: #e0a03b; }
.pc-money-t.is-ok b { color: #2fc07d; }
.pc-schema { border-color: #e0a03b; }
.pc-schema code { font-family: var(--font-mono); font-size: 12px; }
.pc-head-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-from { font-family: var(--font-mono); font-size: 12px; }
.pc-rc .pc-flds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.pc-fld { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); }
.pc-fld span { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-light); }
.pc-fld b { display: block; margin-top: 2px; font-size: 13px; color: var(--white); }
.pc-grade { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.09); color: var(--gray-light); }
.pc-grade.is-reliable { background: rgba(20,168,106,.2); color: #2fc07d; }
.pc-grade.is-watch { background: rgba(224,135,11,.2); color: #e0a03b; }
.pc-grade.is-slipping { background: rgba(196,23,23,.22); color: #ff8a8a; }
.pc-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pc-list-r { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: 12.5px; color: var(--white); }
.pc-list-r i { font-style: normal; color: var(--gray-mid); }
.pc-none { font-size: 12.5px; color: var(--gray-mid); padding: 6px 0; }

html.light .pc-card-n span { color: var(--gray-mid); }
html.light .pc-card-n span b { color: var(--black); }
html.light .pc-card-n span.is-bad b { color: #c41717; }
html.light .pc-card-n span.is-warn b { color: #a8690f; }
html.light .pc-sec h3 { color: var(--gray-mid); }
html.light .pc-sec h3 b { background: rgba(0,0,0,.07); color: var(--black); }
html.light .pc-sec h3 b.is-bad, html.light .pc-sec h3 b.is-stop { background: rgba(196,23,23,.1); color: #c41717; }
html.light .pc-sec h3 b.is-warn { background: rgba(224,135,11,.16); color: #a8690f; }
html.light .pc-sec .ws-alert.is-ok { border-left-color: #0f7a4b; }
html.light .pc-sec-e { color: var(--gray-mid); }
html.light .pc-open { color: var(--gray-mid); }
html.light .pc-open:hover { color: var(--black); }
html.light .pc-money-t { background: #fff; border-color: rgba(0,0,0,.1); }
html.light .pc-money-t span { color: var(--gray-mid); }
html.light .pc-money-t b { color: var(--black); }
html.light .pc-money-t.is-bad b { color: #c41717; }
html.light .pc-money-t.is-warn b { color: #a8690f; }
html.light .pc-money-t.is-ok b { color: #0f7a4b; }
html.light .pc-schema { border-color: #a8690f; }
html.light .pc-fld { background: #f6f7f9; }
html.light .pc-fld span { color: var(--gray-mid); }
html.light .pc-fld b { color: var(--black); }
html.light .pc-grade { background: rgba(0,0,0,.07); color: var(--gray-mid); }
html.light .pc-grade.is-reliable { background: rgba(20,168,106,.14); color: #0f7a4b; }
html.light .pc-grade.is-watch { background: rgba(224,135,11,.16); color: #a8690f; }
html.light .pc-grade.is-slipping { background: rgba(196,23,23,.1); color: #c41717; }
html.light .pc-list-r { background: #f6f7f9; color: var(--black); }
html.light .pc-list-r i { color: var(--gray-mid); }
html.light .pc-none { color: var(--gray-mid); }

@media (max-width: 620px) {
    .pc-rc .pc-flds { grid-template-columns: 1fr; }
}

/* ── Risk & Compliance: one pane, four tabs ──────────────────────────────
   Certifications, Toolbox Talks, Insurance and Bonding share a pane under
   Construction Intelligence. The tab strip is the only new chrome; each
   panel is the pane it used to be, minus its own header. */
.rk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -8px 0 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.rk-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--gray-light, #aeaeb2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rk-tab svg { width: 15px; height: 15px; }
.rk-tab:hover { color: #fff; border-color: rgba(255,255,255,.12); }
.rk-tab.is-active { color: #fff; background: rgba(196, 23, 23, .16); border-color: rgba(196, 23, 23, .45); }
.rk-tab .up-nav-tag { margin-left: 2px; }
.rk-panel { display: none; }
.rk-panel.is-active { display: block; }
.rk-intro { color: var(--gray-light, #aeaeb2); font-size: 14px; line-height: 1.5; max-width: 760px; margin: 0 0 22px; }
html.light .rk-tabs { border-bottom-color: rgba(0,0,0,.09); }
html.light .rk-tab { color: #55555c; }
html.light .rk-tab:hover { color: #111; border-color: rgba(0,0,0,.12); }
html.light .rk-tab.is-active { color: #111; background: rgba(196, 23, 23, .08); }
html.light .rk-intro { color: #55555c; }
/* ── The shared dialog, refined ────────────────────────────────────────────
   Selects lose the native arrow and the native border for a drawn chevron,
   every field gets one focus ring, and light mode gets fields that read as
   fields rather than as the page. */
.xf-modal { border-radius: 18px; }
.xf-head { padding-top: 24px; }
.xf-head h3 { letter-spacing: -0.015em; font-size: 20px; }
.xf-lede { max-width: 52ch; }
.xf-body { padding-top: 20px; gap: 16px 14px; }
/* background-color, never the background shorthand, on these three: the
   shorthand resets background-repeat and the select's drawn chevron tiles
   across the whole field. */
.xf-field input, .xf-field textarea, .xf-field select {
    background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); border-radius: 11px;
    padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.xf-field input:hover, .xf-field textarea:hover, .xf-field select:hover { border-color: rgba(255,255,255,.22); }
.xf-field input:focus, .xf-field textarea:focus, .xf-field select:focus {
    border-color: var(--red); box-shadow: 0 0 0 3px rgba(196,23,23,.18); background-color: rgba(255,255,255,.06);
}
.xf-field select {
    -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 14px 14px !important;
}
.xf-field select option { background: #1c1c1e; color: #f2f2f4; }
.xf-field input::placeholder, .xf-field textarea::placeholder { color: rgba(255,255,255,.32); }
.xf-field > span { letter-spacing: .07em; }
.xf-foot { border-top: 1px solid rgba(255,255,255,.07); margin-top: 14px; padding-top: 16px; }
.xf-cancel { border-color: transparent; }
.xf-cancel:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html.light .xf-modal { box-shadow: 0 40px 90px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); }
html.light .xf-lede, html.light .xf-field > span, html.light .xf-field small { color: #5f5f66; }
html.light .xf-field input, html.light .xf-field textarea, html.light .xf-field select {
    background-color: #f6f6f8; border-color: rgba(0,0,0,.12); color: #111;
}
html.light .xf-field input:hover, html.light .xf-field textarea:hover, html.light .xf-field select:hover { border-color: rgba(0,0,0,.22); }
html.light .xf-field input:focus, html.light .xf-field textarea:focus, html.light .xf-field select:focus { background-color: #fff; border-color: var(--red); box-shadow: 0 0 0 3px rgba(196,23,23,.14); }
html.light .xf-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a6a72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
html.light .xf-field select option { background: #fff; color: #111; }
html.light .xf-field input::placeholder, html.light .xf-field textarea::placeholder { color: rgba(0,0,0,.35); }
html.light .xf-foot { border-top-color: rgba(0,0,0,.08); }
html.light .xf-cancel { color: #55555c; }
html.light .xf-cancel:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #111; }
/* ── Your vendors (Profile Settings) ─────────────────────────────────────
   The company's directory as a list you can read, search and act on, with
   the adding done in the shared dialog rather than in a bare textarea. */
.vd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.vd-head > div:first-child { flex: 1 1 360px; }
.vd-tools { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.vd-bar { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.vd-search { flex: 1 1 260px; max-width: 420px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; color: var(--white, #fff); }
.vd-search:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(196,23,23,.18); }
.vd-count { font-size: 12.5px; color: var(--gray-light, #aeaeb2); white-space: nowrap; }
.vd-bar .cc-link { margin-left: auto; }
.vd-list { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; overflow: hidden; max-height: 520px; overflow-y: auto; }
.vd-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.vd-row:last-child { border-bottom: 0; }
.vd-row:hover { background: rgba(255,255,255,.035); }
.vd-row.is-demo { opacity: .7; }
.vd-avatar { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: #fff; background: linear-gradient(135deg, rgba(196,23,23,.9), rgba(122,14,14,.9)); letter-spacing: .02em; }
.vd-row.is-demo .vd-avatar { background: rgba(255,255,255,.12); color: var(--gray-light, #aeaeb2); }
.vd-main { flex: 1 1 auto; min-width: 0; }
.vd-name { font-weight: 650; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vd-name em { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.vd-trade { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(196,23,23,.14); color: #ff8f8f; }
.vd-sub { font-size: 12.5px; color: var(--gray-light, #aeaeb2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-none { opacity: .7; }
.vd-stars { color: #e6a700; font-size: 12px; letter-spacing: 1px; }
.vd-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.vd-empty { padding: 26px 16px; color: var(--gray-light, #aeaeb2); font-size: 13.5px; line-height: 1.5; }
.vd-empty b { color: var(--white, #fff); }
.vd-status { margin-top: 10px; min-height: 18px; }
.xf-field input[type="file"] { padding: 8px; }
html.light .vd-search { background: #f6f6f8; border-color: rgba(0,0,0,.12); color: #111; }
html.light .vd-list { border-color: rgba(0,0,0,.09); }
html.light .vd-row { border-bottom-color: rgba(0,0,0,.07); }
html.light .vd-row:hover { background: rgba(0,0,0,.03); }
html.light .vd-row.is-demo .vd-avatar { background: rgba(0,0,0,.08); color: #55555c; }
html.light .vd-trade { color: var(--red); background: rgba(196,23,23,.09); }
html.light .vd-count, html.light .vd-sub, html.light .vd-empty, html.light .vd-name em { color: #5f5f66; }
html.light .vd-empty b { color: #111; }
@media (max-width: 720px) {
    .vd-row { flex-wrap: wrap; }
    .vd-acts { width: 100%; justify-content: flex-end; }
}