/*
 * SWiM /app/ stylesheet — plain CSS, no build step.
 *
 * The design tokens are ported VERBATIM from frontend/src/index.css (:root and
 * .dark blocks). They were already plain custom properties there; Tailwind only
 * aliased them. Keeping the same names means a page ported from React keeps its
 * colours by construction.
 *
 * The .dark block is dormant — no toggle exists anywhere in the SPA either —
 * but ported now so the two shells can never drift apart on what dark means.
 *
 * The print blocks are ported verbatim too. The whole PDF-export pattern
 * ([data-printable] / [data-print-only] / .no-print) depends on them, and
 * Phase 3's server-rendered lists will reuse it unchanged.
 */

/* Inter Variable — the SAME latin woff2 the React bundle serves, vendored
   per the pinned-assets policy (see vendor/README). The body font stack
   already named "Inter Variable" first; until now nothing loaded it and the
   /app pages fell back to the system font. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/app/static/vendor/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --background: oklch(0.99 0.004 235);
    --foreground: oklch(0.18 0.035 250);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0.035 250);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.18 0.035 250);
    --primary: oklch(0.52 0.17 245);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.95 0.018 235);
    --secondary-foreground: oklch(0.30 0.05 250);
    --muted: oklch(0.96 0.012 235);
    --muted-foreground: oklch(0.50 0.03 245);
    --accent: oklch(0.93 0.04 240);
    --accent-foreground: oklch(0.30 0.05 250);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.91 0.018 235);
    --input: oklch(0.93 0.02 235);
    --ring: oklch(0.52 0.17 245);
    --chart-1: oklch(0.62 0.18 240);
    --chart-2: oklch(0.55 0.16 200);
    --chart-3: oklch(0.65 0.16 165);
    --chart-4: oklch(0.70 0.15 80);
    --chart-5: oklch(0.65 0.18 40);
    --radius: 0.625rem;
    --sidebar: oklch(0.20 0.05 250);
    --sidebar-foreground: oklch(0.95 0.012 235);
    --sidebar-primary: oklch(0.55 0.17 245);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.28 0.04 245);
    --sidebar-accent-foreground: oklch(0.95 0.012 235);
    --sidebar-border: oklch(0.30 0.05 250);
    --sidebar-ring: oklch(0.55 0.17 245);
}

.dark {
    --background: oklch(0.15 0.035 250);
    --foreground: oklch(0.95 0.012 235);
    --card: oklch(0.20 0.04 250);
    --card-foreground: oklch(0.95 0.012 235);
    --popover: oklch(0.20 0.04 250);
    --popover-foreground: oklch(0.95 0.012 235);
    --primary: oklch(0.60 0.18 245);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.28 0.04 245);
    --secondary-foreground: oklch(0.95 0.012 235);
    --muted: oklch(0.28 0.04 245);
    --muted-foreground: oklch(0.65 0.04 245);
    --accent: oklch(0.30 0.06 245);
    --accent-foreground: oklch(0.95 0.012 235);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.60 0.18 245);
    --chart-1: oklch(0.62 0.18 240);
    --chart-2: oklch(0.55 0.16 200);
    --chart-3: oklch(0.65 0.16 165);
    --chart-4: oklch(0.70 0.15 80);
    --chart-5: oklch(0.65 0.18 40);
    --sidebar: oklch(0.18 0.04 250);
    --sidebar-foreground: oklch(0.95 0.012 235);
    --sidebar-primary: oklch(0.60 0.18 245);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.28 0.04 245);
    --sidebar-accent-foreground: oklch(0.95 0.012 235);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.60 0.18 245);
}

/* Base — the @layer base rules from index.css, @apply rewritten as plain CSS. */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
}

html {
    font-family: "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    color: var(--foreground);
    background:
        radial-gradient(ellipse 80% 60% at 80% -10%, oklch(0.93 0.06 235 / 0.35), transparent 60%),
        radial-gradient(ellipse 70% 50% at -10% 110%, oklch(0.93 0.06 245 / 0.30), transparent 60%),
        linear-gradient(180deg, oklch(0.98 0.018 235) 0%, oklch(0.99 0.006 235) 50%, oklch(0.98 0.020 240) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Shell chrome — just enough for the foundation page. Real component styles
 * arrive with the pages that need them, phase by phase. */
.app-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.app-nav a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.875rem;
}

.app-nav a:hover {
    text-decoration: underline;
}

.app-nav .spacer {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.app-main {
    /* Full width with small margins, like the Meter Tracking Dashboard
       (its max-w-[110rem] px-6). Stephen, 2026-08-13: every /app/ page. */
    max-width: 110rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.4);
    padding: 1.25rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.8);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.text-muted {
    color: var(--muted-foreground);
}

/* Printing — verbatim from index.css. */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Printing any overlay that offers a PDF.
 *
 * When a printable overlay is open, print ONLY it. Without this the page behind
 * the overlay prints too, and a driver gets three pages of dashboard before the
 * first address.
 *
 * visibility rather than display: keeping the ancestors laid out is what lets
 * the drawer position itself at the top of the page. display:none on a parent
 * would take the drawer with it.
 */
@media print {
    body:has([data-printable]) * {
        visibility: hidden;
    }
    body:has([data-printable]) [data-printable],
    body:has([data-printable]) [data-printable] * {
        visibility: visible;
    }
    body:has([data-printable]) [data-printable] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    /* Repeat the column headers on every page — a route that runs over a page
     * break is otherwise a table of unlabelled numbers. */
    [data-printable] thead {
        display: table-header-group;
    }
    [data-printable] tr {
        break-inside: avoid;
    }

    /* ListExport's PDF button builds its own sheet holding EVERY filtered row
     * and marks it data-print-only. While that exists it is the only thing
     * printed — otherwise the page's own paginated table (also data-printable)
     * prints too, and the file opens with 50 rows followed by the 409 it was
     * asked for. */
    body:has([data-print-only]) [data-printable]:not([data-print-only]) {
        display: none !important;
    }
    [data-print-only] {
        display: block !important;
    }
}

/* Login */
.login-card {
    max-width: 24rem;
    margin: 15vh auto 0;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 1rem;
}

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.login-card input,
.lookup-add input,
.lookup-edit input {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) * 0.8);
    background: var(--background);
    font: inherit;
}

.form-error {
    color: var(--destructive);
    font-size: 0.875rem;
}

/* Admin lookups */
.lookup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 1rem 0;
}

.lookup-tabs a {
    padding: 0.375rem 0.75rem;
    border-radius: calc(var(--radius) * 0.8);
    background: var(--muted);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.875rem;
}

.lookup-tabs a.active {
    background: var(--primary);
    color: var(--primary-foreground);
}

.lookup-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lookup-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.lookup-rows {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.lookup-rows li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--border);
}

.lookup-rows li.inactive .lookup-name {
    opacity: 0.5;
    text-decoration: line-through;
}

.lookup-rows code {
    background: var(--muted);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.drag-handle {
    cursor: grab;
    color: var(--muted-foreground);
    user-select: none;
}

.lookup-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 0.375rem;
}

.lookup-edit {
    display: inline-flex;
    gap: 0.375rem;
}

.btn-danger {
    color: var(--destructive);
}

[x-cloak] {
    display: none !important;
}

/* Phase 3 — table pages */
.stat-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.stat-block {
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.4);
    padding: 0.875rem;
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-block:hover {
    border-color: color-mix(in oklab, var(--primary) 50%, transparent);
}

.stat-block.active {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--primary) 5%, var(--card));
}

.stat-block.alert {
    border-color: oklch(0.65 0.2 20);
}

.stat-label { font-weight: 600; font-size: 0.875rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-hint  { font-size: 0.6875rem; color: var(--muted-foreground); }

.list-controls { margin-bottom: 0.75rem; }
.list-controls-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.list-controls-bar .spacer { margin-left: auto; }
.list-controls input[type="search"] {
    padding: 0.45rem 0.625rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) * 0.8);
    background: var(--background);
    font: inherit;
    width: 16rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.filter-row select,
.filter-row input {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) * 0.8);
    background: var(--background);
    font: inherit;
    font-size: 0.8125rem;
}

.filter-where {
    width: 3.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.filter-apply { margin-top: 0.5rem; }

.table-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.table-meta .spacer { margin-left: auto; }

.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.data-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.th-sort {
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-transform: inherit;
}

.th-sort:hover, .th-sort.active { color: var(--foreground); }

.data-table td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table tr:last-child td { border-bottom: 0; }
.table-empty { text-align: center; padding: 2rem !important; }

.serial-link {
    font-family: ui-monospace, monospace;
    color: var(--primary);
    text-decoration: none;
}
.serial-link:hover { text-decoration: underline; }

.pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    font-size: 0.8125rem;
}

.pager-jump { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); }
.pager-jump input {
    width: 4.5rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) * 0.6);
    font: inherit;
}

.col-picker { position: relative; display: inline-block; }
.col-picker summary { list-style: none; }
.col-picker summary::-webkit-details-marker { display: none; }
.col-picker-menu {
    position: absolute;
    left: 0;   /* under the button — right:0 flew to the screen edge */
    z-index: 20;
    margin-top: 0.25rem;
    width: 14rem;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.8);
    padding: 0.5rem;
    box-shadow: 0 8px 24px oklch(0 0 0 / 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
}

.print-table td, .print-table th { white-space: normal; }

/* Run history */
.run-status {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--muted);
}
.run-ok { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.run-failed, .run-error { background: oklch(0.92 0.06 20); color: oklch(0.4 0.14 20); }
.run-refused { background: oklch(0.94 0.06 80); color: oklch(0.42 0.1 80); }
.run-file { font-family: ui-monospace, monospace; font-size: 0.75rem; }

/* History change-type chips */
.chip-insert { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.chip-delete { background: oklch(0.92 0.06 20); color: oklch(0.4 0.14 20); }
.chip-update { background: var(--muted); }

/* Meter Score */
[x-cloak] { display: none !important; }
.section-label {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.band-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.band-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--card);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.band-card:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.08); }
.band-card.active { outline: 2px solid var(--primary); }
.band-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; }
.band-count { font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.band-bar { display: block; height: 0.375rem; border-radius: 999px; background: oklch(0 0 0 / 0.05); overflow: hidden; }
.band-bar > span { display: block; height: 100%; border-radius: 999px; }
.band-pct { font-size: 0.75rem; }
.band-critical { border-color: oklch(0.85 0.08 20); background: oklch(0.97 0.02 20); }
.band-critical .band-bar > span { background: oklch(0.63 0.21 20); }
.band-poor { border-color: oklch(0.87 0.08 55); background: oklch(0.97 0.02 55); }
.band-poor .band-bar > span { background: oklch(0.7 0.18 55); }
.band-watch { border-color: oklch(0.89 0.08 85); background: oklch(0.97 0.02 85); }
.band-watch .band-bar > span { background: oklch(0.8 0.16 85); }
.band-healthy { border-color: oklch(0.87 0.07 160); background: oklch(0.97 0.02 160); }
.band-healthy .band-bar > span { background: oklch(0.7 0.15 160); }
.band-chip-critical { background: oklch(0.92 0.06 20); color: oklch(0.4 0.14 20); }
.band-chip-poor { background: oklch(0.93 0.06 55); color: oklch(0.42 0.12 55); }
.band-chip-watch { background: oklch(0.94 0.06 85); color: oklch(0.42 0.1 85); }
.band-chip-healthy { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.reason-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.reason-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.reason-chip:hover { box-shadow: 0 1px 4px oklch(0 0 0 / 0.08); }
.reason-chip.active { border-color: var(--primary); outline: 1px solid var(--primary); }
.sev {
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--muted);
    color: var(--muted-foreground);
}
.sev-critical { background: oklch(0.92 0.06 20); color: oklch(0.4 0.14 20); }
.sev-major { background: oklch(0.93 0.06 55); color: oklch(0.42 0.12 55); }
.sev-cumulative { background: oklch(0.93 0.05 240); color: oklch(0.42 0.1 240); }
.sev-unscored { background: oklch(0.93 0.05 300); color: oklch(0.42 0.1 300); }
.score-num { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.125rem; font-size: 0.75rem; }
.seg button { border: 0; background: none; padding: 0.25rem 0.625rem; border-radius: 0.375rem; cursor: pointer; color: var(--muted-foreground); font: inherit; }
.seg button.active { background: var(--primary); color: var(--primary-foreground); }
.btn-xs { padding: 0.125rem 0.5rem; font-size: 0.75rem; }
.ticket-link { font-size: 0.75rem; color: var(--primary); }
.mono { font-family: ui-monospace, monospace; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(0 0 0 / 0.5);
    padding: 1rem;
}
.modal {
    width: 100%;
    max-width: 32rem;
    background: var(--card);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 40px oklch(0 0 0 / 0.2);
}
.modal h3 { margin: 0 0 0.25rem; }
.modal form label { display: block; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; }
.modal form input, .modal form select, .modal form textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--background);
    font: inherit;
    font-size: 0.875rem;
}
.modal-serial { margin-top: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; background: var(--muted); font-size: 0.75rem; display: flex; gap: 0.5rem; }
.modal-actions { margin-top: 1.25rem; display: flex; justify-content: flex-end; gap: 0.5rem; }
.form-error { color: oklch(0.5 0.19 25); font-size: 0.875rem; margin: 0.5rem 0 0; }
.form-ok { color: oklch(0.45 0.12 160); font-size: 0.875rem; margin: 0.5rem 0 0; }

/* Meter Counts */
.tone-good { color: oklch(0.55 0.13 160); }
.tone-bad { color: oklch(0.6 0.13 70); }
.check-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.row-mismatch { background: oklch(0.97 0.03 85 / 0.5); }
.delta { font-weight: 600; color: oklch(0.5 0.12 70); }
.drill-num {
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    font-variant-numeric: tabular-nums;
    text-decoration: underline dotted; text-underline-offset: 4px;
}
.drill-num:hover { opacity: 0.7; }
.gap-cell { width: 10rem; }
.gap-bar { display: block; height: 0.5rem; border-radius: 0.25rem; background: var(--muted); overflow: hidden; }
.gap-bar > span { display: block; height: 100%; border-radius: 0.25rem; }
.gap-umbs { background: oklch(0.8 0.16 85); }
.gap-ready { background: oklch(0.7 0.13 240); }
.modal-wide { max-width: 56rem; }
.modal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.modal-scroll { max-height: 60vh; overflow-y: auto; margin-top: 0.5rem; }

/* Readings dashboard */
.code-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.code-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--card);
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.code-card:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.08); }
.code-card.active { outline: 2px solid var(--primary); background: oklch(from var(--primary) l c h / 0.05); }
.code-card.card-bad { border-color: oklch(0.85 0.08 20); background: oklch(0.97 0.02 20); }
.code-card.card-warn { border-color: oklch(0.87 0.09 85); background: oklch(0.97 0.03 85); }
.code-head { font-weight: 600; display: flex; justify-content: space-between; gap: 0.5rem; }
.warn-dot { color: oklch(0.6 0.18 25); }
.card-warn .warn-dot { color: oklch(0.62 0.13 70); }
.code-count { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.not-in-billing { color: oklch(0.55 0.19 20); font-size: 0.8125rem; }
.two-col { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.bucket-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-top: 0.375rem; }
.bucket-label { width: 8rem; flex-shrink: 0; color: var(--muted-foreground); }
.bucket-bar { flex: 1; height: 1rem; border-radius: 0.25rem; background: var(--muted); overflow: hidden; }
.bucket-bar > span { display: block; height: 100%; border-radius: 0.25rem; }
.bucket-expected { background: oklch(0.7 0.15 160 / 0.6); }
.bucket-late { background: oklch(0.8 0.16 85); }
.bucket-n { width: 2.5rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bucket-tag { width: 4rem; flex-shrink: 0; font-size: 0.6875rem; color: oklch(0.45 0.12 160); }
.card-warn-border { border-color: oklch(0.85 0.1 85); }
.unbilled-stat { text-align: right; font-size: 1.25rem; line-height: 1.2; }
.unbilled-stat .text-muted { font-size: 0.6875rem; }
.unbilled-notes { font-size: 0.8125rem; }

/* Billing cycles */
.cycle-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.cycle-head { display: flex; justify-content: space-between; align-items: center; }
.dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; display: inline-block; }
.dot-good, .fill-good { background: oklch(0.7 0.15 160); }
.dot-warn, .fill-warn { background: oklch(0.8 0.16 85); }
.dot-bad, .fill-bad { background: oklch(0.65 0.19 20); }
.bar-line { display: flex; justify-content: space-between; font-size: 0.75rem; margin: 0.5rem 0 0.25rem; }
.cycle-lines { margin-top: 0.75rem; font-size: 0.875rem; }
.cycle-line { display: flex; justify-content: space-between; padding: 0.125rem 0; color: inherit; text-decoration: none; }
a.cycle-line:hover { text-decoration: underline; }
.cycle-total { border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0.375rem; color: var(--muted-foreground); }
.cycle-send { width: 100%; margin-top: 0.75rem; color: var(--primary); }
.cycle-totals { border: 2px solid oklch(from var(--primary) l c h / 0.3); background: oklch(from var(--primary) l c h / 0.05); }
a.stat-block { text-decoration: none; color: inherit; }
.route-group summary { cursor: pointer; font-size: 0.9375rem; padding: 0.25rem 0; }
.route-group { margin-bottom: 0.75rem; }
.cutoff-form { display: flex; align-items: end; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.875rem; }
.cutoff-form label { display: flex; flex-direction: column; gap: 0.25rem; }
@media print { .route-group summary { list-style: none; font-weight: 700; } }

/* Meter Locator */
.locator-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.locator-bar select, .locator-bar input {
    padding: 0.5rem 0.75rem; border: 1px solid var(--border);
    border-radius: 0.5rem; background: var(--background); font: inherit; font-size: 0.875rem;
}
.locator-bar input[type="search"] { flex: 1; max-width: 32rem; }
.locator-empty { border-style: dashed; text-align: center; padding: 3rem; }
.locator-panels { display: flex; flex-direction: column; gap: 1rem; }
.src-panel { border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; background: var(--card); }
.src-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; background: oklch(0.94 0.01 260); }
.src-badge { border-radius: 999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; background: oklch(0 0 0 / 0.06); color: var(--muted-foreground); }
.src-hit { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.src-miss { padding: 0.75rem 1rem; font-style: italic; margin: 0; }
.src-pager { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-top: 1px solid var(--border); font-size: 0.75rem; }
.src-blue-0 { background: oklch(0.93 0.05 250); color: oklch(0.35 0.1 255); }
.src-blue-1, .src-blue-2 { background: oklch(0.96 0.025 250); color: oklch(0.35 0.1 255); }
.src-red-0 { background: oklch(0.93 0.05 20); color: oklch(0.35 0.11 20); }
.src-red-1, .src-red-2 { background: oklch(0.96 0.025 20); color: oklch(0.35 0.11 20); }
.src-green-0 { background: oklch(0.93 0.05 160); color: oklch(0.32 0.08 160); }
.src-green-1, .src-green-2 { background: oklch(0.96 0.025 160); color: oklch(0.32 0.08 160); }
.src-violet-0 { background: oklch(0.89 0.07 300); color: oklch(0.35 0.1 300); }
.src-violet-1 { background: oklch(0.93 0.05 300); color: oklch(0.35 0.1 300); }
.src-violet-2 { background: oklch(0.96 0.025 300); color: oklch(0.35 0.1 300); }
.src-amber-0 { background: oklch(0.9 0.08 85); color: oklch(0.35 0.09 70); }
.src-amber-1 { background: oklch(0.94 0.05 85); color: oklch(0.35 0.09 70); }
.src-amber-2 { background: oklch(0.97 0.025 85); color: oklch(0.35 0.09 70); }
.src-slate-0 { background: oklch(0.9 0.01 260); }
.src-slate-1, .src-slate-2 { background: oklch(0.94 0.008 260); }
.row-merged { background: oklch(0.97 0.03 85 / 0.6); color: var(--muted-foreground); }
.struck { text-decoration: line-through; }
.issues-panel { padding: 0; overflow: hidden; margin-bottom: 1rem; }
.issues-clean { margin-bottom: 1rem; font-size: 0.875rem; }
.issues-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.issues-open { color: var(--primary); font-size: 0.75rem; font-weight: 500; }
.issue-row { padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; display: block; color: inherit; text-decoration: none; }
.issue-row:last-child { border-bottom: 0; }
a.issue-row:hover { background: oklch(0 0 0 / 0.03); }
.issue-healed { background: oklch(0 0 0 / 0.02); color: var(--muted-foreground); }
.issue-when { float: right; font-size: 0.75rem; }
.issue-detail { margin: 0.125rem 0 0; font-size: 0.75rem; }
.linklike { border: 0; background: none; font: inherit; font-size: 0.75rem; cursor: pointer; }
.linklike:hover { text-decoration: underline; }

/* Data Sources tabs */
.src-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.src-tab {
    border: 0; border-radius: 0.5rem; padding: 0.375rem 0.75rem;
    font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
    opacity: 0.7;
}
.src-tab:hover { opacity: 1; }
.src-tab.active { opacity: 1; outline: 2px solid var(--primary); outline-offset: 2px; }
.src-tab-n { font-size: 0.75rem; opacity: 0.7; margin-left: 0.25rem; }

/* Workflow monitoring */
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.wf-card { display: block; color: inherit; text-decoration: none; }
.wf-card:hover { border-color: oklch(from var(--primary) l c h / 0.4); box-shadow: 0 4px 12px oklch(0 0 0 / 0.08); }
.wf-head { display: flex; justify-content: space-between; align-items: start; gap: 0.75rem; }
.wf-sub { margin: 0.25rem 0 0; font-size: 0.75rem; display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.wf-upd { color: oklch(0.5 0.13 250); }
.wf-view { display: inline-block; margin-top: 0.75rem; color: var(--primary); font-size: 0.875rem; font-weight: 500; }
.run-running { background: oklch(0.93 0.05 250); color: oklch(0.4 0.1 250); }
.run-none { background: var(--muted); color: var(--muted-foreground); }
.alert-card {
    display: flex; gap: 0.75rem; align-items: start;
    border: 1px solid var(--border); border-radius: 0.75rem;
    padding: 1rem; margin-bottom: 0.75rem; font-size: 0.875rem;
    background: var(--card);
}
.alert-refused { border-color: oklch(0.75 0.13 20 / 0.5); background: oklch(0.98 0.01 20); }
.alert-drift { border-color: oklch(0.85 0.1 85); background: oklch(0.98 0.02 85); }
.alert-body { flex: 1; min-width: 0; }
.alert-body p { margin: 0.25rem 0 0; }
.alert-title { font-weight: 600; margin: 0; }
.alert-fine { font-size: 0.75rem; }
.alert-cols { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.banner-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.inline-form { display: inline; }

/* Support Tickets */
.tab-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 1.5rem 0 1rem; }
.tab-nav a {
    padding: 0.5rem 1rem; margin-bottom: -1px; font-size: 0.875rem; font-weight: 500;
    color: var(--muted-foreground); text-decoration: none; border-bottom: 2px solid transparent;
}
.tab-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-nav a:hover { color: var(--foreground); }
.ticket-grid { display: grid; gap: 1rem; }
@media (min-width: 1100px) { .ticket-grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.ticket-row { cursor: pointer; }
.row-selected { background: oklch(from var(--primary) l c h / 0.05); }
.view-chip {
    background: oklch(from var(--primary) l c h / 0.05); color: var(--primary);
    padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem;
    margin: 0 0 0.75rem;
}
.status-open { background: oklch(0.93 0.05 250); color: oklch(0.4 0.1 250); }
.status-in_progress { background: oklch(0.94 0.06 85); color: oklch(0.42 0.1 85); }
.status-resolved { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.status-on_hold, .status-closed { background: var(--muted); color: var(--muted-foreground); }
.ticket-empty { text-align: center; padding: 3rem 1rem; font-size: 0.875rem; }
.ticket-detail { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; }
.detail-sub { margin: 0.25rem 0 0; font-size: 0.75rem; }
.detail-body { margin: 0.5rem 0 0; white-space: pre-wrap; }
.detail-section { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.detail-label {
    display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    color: var(--muted-foreground); margin-bottom: 0.375rem;
}
.detail-fine { font-size: 0.75rem; margin: 0.25rem 0 0; }
.ticket-detail select, .ticket-detail input:not([type=checkbox]) {
    padding: 0.375rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem;
    background: var(--background); font: inherit; font-size: 0.8125rem; max-width: 100%;
}
.flag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.flag-item { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; font-size: 0.75rem; }
.flag-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.flag-evidence summary { cursor: pointer; color: var(--primary); }
.flag-evidence summary:hover { text-decoration: underline; }
.flag-actions { margin-top: 0.5rem; }
.flag-act-row { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.bulk-bar {
    display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
    background: var(--muted); border-radius: 0.5rem; padding: 0.5rem; margin-bottom: 0.5rem;
    font-size: 0.75rem;
}
.correct-box {
    margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--muted); padding: 0.5rem;
    display: flex; flex-direction: column; gap: 0.375rem; align-items: start;
}
.serial-hint { font-size: 0.6875rem; margin: 0; }
.evidence { border: 1px solid var(--border); border-radius: 0.5rem; background: oklch(0 0 0 / 0.02); padding: 0.5rem; margin-top: 0.375rem; }
.evidence-card { background: var(--card); border-radius: 0.375rem; padding: 0.375rem 0.5rem; margin-top: 0.375rem; }
.evidence-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.75rem; margin: 0.25rem 0 0; font-size: 0.6875rem; }
.evidence-fields dt, .evidence-fields dd { margin: 0; }
.dropzone { border: 1px dashed var(--border); border-radius: 0.5rem; padding: 0.5rem; outline: none; }
.dropzone.drag, .dropzone:focus { border-color: var(--primary); background: oklch(from var(--primary) l c h / 0.05); }
.attach-list { list-style: none; margin: 0.375rem 0 0; padding: 0; font-size: 0.75rem; }
.attach-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0; }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.75rem; }
.comment-list li { background: var(--muted); border-radius: 0.375rem; padding: 0.5rem; }
.comment-list p { margin: 0.125rem 0; }
.comment-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.comment-form input { flex: 1; }
.history-list { font-size: 0.6875rem; padding-left: 1rem; margin: 0; }
.park-box { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.report-section { margin-bottom: 1rem; }
.report-section > strong { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; font-size: 0.875rem; margin-bottom: 0.5rem; }
.report-row { cursor: pointer; }
.report-row:hover { background: oklch(0 0 0 / 0.03); }

/* Meter tracking */
.tcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tcard { border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; background: var(--card); font-size: 0.875rem; }
.tcard-off { opacity: 0.6; }
.tcard-sub { font-size: 0.75rem; font-style: italic; margin: 0.125rem 0 0; }
.tcard-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-top: 0.25rem; }
.tcard-counts { margin-top: 0.75rem; }
.tcard-small { font-size: 0.75rem; }
.tcard-n { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcard-n-sm { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcard-break, .tcard-children { border-top: 1px solid oklch(0 0 0 / 0.08); margin-top: 0.75rem; padding-top: 0.5rem; }
.tcard-child { margin-top: 0.5rem; }
.tcard-blue { background: oklch(0.97 0.02 250); border-color: oklch(0.9 0.04 250); }
.tcard-red { background: oklch(0.97 0.02 20); border-color: oklch(0.9 0.04 20); }
.tcard-green { background: oklch(0.97 0.02 160); border-color: oklch(0.9 0.04 160); }
.tcard-violet { background: oklch(0.97 0.02 300); border-color: oklch(0.9 0.04 300); }
.tcard-amber { background: oklch(0.97 0.03 85); border-color: oklch(0.9 0.06 85); }
.tcard-slate { background: oklch(0.98 0.005 260); }
.state-chip {
    display: inline-block; border-radius: 999px; padding: 0.125rem 0.5rem;
    font-size: 0.75rem; font-weight: 500;
    background: oklch(from var(--primary) l c h / 0.1); color: var(--primary);
    margin: 0.0625rem 0.125rem 0.0625rem 0;
}
.meter-row summary { list-style: none; cursor: pointer; }
.meter-row summary::-webkit-details-marker { display: none; }
.meter-cells {
    display: grid; grid-template-columns: 1.5rem 12rem 14rem 1fr;
    align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
}
.meter-row summary:hover .meter-cells { background: oklch(0 0 0 / 0.03); }
.meter-row[open] .meter-chev { transform: rotate(90deg); }
.meter-chev { display: inline-block; transition: transform 0.1s; color: var(--muted-foreground); }
.meter-panel-slot { padding: 0.75rem; background: oklch(0 0 0 / 0.02); border-top: 1px solid var(--border); }
.mpanel { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Group workspaces */
/* The Open-tickets card reads as URGENT, and must never share the active
   block's blue — Stephen mistook one for the other. Red, on every PM page. */
.ws-tickets-card { border-color: oklch(0.75 0.13 20 / 0.6); background: oklch(0.97 0.025 20); text-decoration: none; color: inherit; }
.ws-tickets-card .code-count { color: oklch(0.5 0.19 25); }

/* UMBS Billing */
.umbs-group td { background: var(--muted); font-size: 0.8125rem; padding: 0.375rem 0.75rem; }

/* Transfers admin */
.sftp-row { margin-bottom: 0.75rem; }
.sftp-form { display: flex; flex-direction: column; gap: 0.625rem; margin: 0.75rem 0; font-size: 0.875rem; }
.sftp-form label { display: block; font-weight: 500; }
.sftp-form input:not([type=checkbox]), .sftp-form select, .sftp-form textarea {
    display: block; width: 100%; margin-top: 0.25rem;
    padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--background); font: inherit; font-size: 0.8125rem;
}
.job-form { max-width: 56rem; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.chip-check {
    display: inline-block; min-width: 1.9rem; text-align: center;
    padding: 0.125rem 0.375rem; border-radius: 0.375rem;
    background: var(--muted); color: var(--muted-foreground);
    font-size: 0.6875rem; cursor: pointer; font-weight: 500;
}
.chip-check.on { background: var(--primary); color: var(--primary-foreground); }

/* Data repair */
.raw-row {
    margin: 0; font-family: ui-monospace, monospace; font-size: 0.625rem;
    max-width: 40rem; max-height: 8rem; overflow: auto; white-space: pre-wrap;
    background: var(--muted); border-radius: 0.375rem; padding: 0.375rem;
}

/* Header brand */
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.brand img { height: 3rem; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.9375rem; }
.brand-text .text-muted { font-size: 0.625rem; }
.app-nav > a:not(.brand) { color: var(--muted-foreground); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 0.375rem 0.625rem; border-radius: 0.5rem; }
.app-nav > a:not(.brand):hover { color: var(--foreground); background: var(--muted); }

/* Dashboard + hub */
.project-card { text-decoration: none; color: inherit; }
.hub-stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
a.stat-block:hover { border-color: oklch(from var(--primary) l c h / 0.4); }
.stage-planning { background: oklch(0.93 0.05 250); color: oklch(0.4 0.1 250); }
.stage-installation, .stage-install { background: oklch(0.94 0.06 85); color: oklch(0.42 0.1 85); }
.stage-operational { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.stage-complete, .stage-completed { background: oklch(0.93 0.05 300); color: oklch(0.42 0.1 300); }

/* Card-shaped links: never underlined, never visited-purple. */
a.code-card, a.stat-block, a.wf-card, a.cycle-line, a.reason-chip,
a.issue-row, a.ticket-link, .code-card a, .stat-block a {
    text-decoration: none;
    color: inherit;
}
a.code-card:visited, .code-card a:visited, a.stat-block:visited {
    color: inherit;
}
.code-card .wf-view, .code-card a.wf-view { color: var(--primary); }
.project-card { position: relative; }
.stretch-link::after { content: ""; position: absolute; inset: 0; }
.overlay-link { position: relative; z-index: 1; }
.overlay-link:hover { text-decoration: underline; }
.stage-installing { background: oklch(0.94 0.06 85); color: oklch(0.42 0.1 85); }
.stage-maintenance { background: oklch(0.92 0.06 160); color: oklch(0.35 0.09 160); }
.stage-unknown { background: var(--muted); color: var(--muted-foreground); }
.code-head .run-status { flex-shrink: 0; }

/* The top bar: full-width surface, content constrained like the React header
   (max-w-7xl), slender, sticky. The bar keeps this width on every page even
   when the page content itself runs wider. */
.app-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: oklch(from var(--card) l c h / 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 0;
    display: block;
}
.nav-inner {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
}
.brand img { height: 2.75rem; }
.nav-links { display: flex; gap: 0.25rem; margin-left: 1.5rem; }
.nav-links a {
    color: var(--muted-foreground); text-decoration: none;
    font-size: 0.875rem; font-weight: 500;
    padding: 0.375rem 0.625rem; border-radius: 0.5rem;
}
.nav-links a:hover { color: var(--foreground); background: var(--muted); }
.nav-user {
    margin-left: auto; text-align: right; font-size: 0.875rem;
    display: flex; flex-direction: column; line-height: 1.3;
}
.nav-user .text-muted { font-size: 0.6875rem; }

/* Badges in card headers must not stretch to the title's height — flex
   children stretch by default, which inflated every chip into an oval the
   height of a three-line project name. */
.code-head { align-items: flex-start; }
.code-head .run-status, .code-head .sev { align-self: flex-start; margin-top: 0.125rem; white-space: nowrap; }

/* The color palette. One list of families; cards, swatches and the sources'
   src-*/tcard-* classes all derive from it. Extending the palette means
   adding a family HERE and to PALETTE in web/appearance.py. */
.tcard-teal { background: oklch(0.97 0.02 200); border-color: oklch(0.9 0.04 200); }
.tcard-orange { background: oklch(0.97 0.02 55); border-color: oklch(0.9 0.05 55); }
.tcard-cyan { background: oklch(0.97 0.02 220); border-color: oklch(0.9 0.04 220); }
.tcard-pink { background: oklch(0.97 0.02 350); border-color: oklch(0.9 0.04 350); }
.tcard-lime { background: oklch(0.97 0.03 130); border-color: oklch(0.9 0.05 130); }
.tcard-red { background: oklch(0.97 0.02 20); border-color: oklch(0.9 0.04 20); }
.tcard-none { background: var(--card); border-color: var(--border); }
.src-teal-0 { background: oklch(0.92 0.05 200); } .src-teal-1, .src-teal-2 { background: oklch(0.96 0.025 200); }
.src-orange-0 { background: oklch(0.92 0.06 55); } .src-orange-1, .src-orange-2 { background: oklch(0.96 0.03 55); }
.src-cyan-0 { background: oklch(0.92 0.05 220); } .src-cyan-1, .src-cyan-2 { background: oklch(0.96 0.025 220); }
.src-pink-0 { background: oklch(0.92 0.05 350); } .src-pink-1, .src-pink-2 { background: oklch(0.96 0.025 350); }
.src-lime-0 { background: oklch(0.92 0.07 130); } .src-lime-1, .src-lime-2 { background: oklch(0.96 0.035 130); }

/* Swatch picker */
.swatches { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.swatch {
    width: 1.5rem; height: 1.5rem; border-radius: 0.375rem;
    border: 2px solid transparent; cursor: pointer; padding: 0;
}
.swatch.on { border-color: var(--foreground); }
.sw-none { background: var(--card); border: 2px dashed var(--border); }
.sw-blue { background: oklch(0.9 0.06 250); } .sw-green { background: oklch(0.9 0.06 160); }
.sw-amber { background: oklch(0.92 0.08 85); } .sw-red { background: oklch(0.9 0.06 20); }
.sw-violet { background: oklch(0.9 0.06 300); } .sw-slate { background: oklch(0.92 0.01 260); }
.sw-teal { background: oklch(0.9 0.05 200); } .sw-orange { background: oklch(0.9 0.07 55); }
.sw-cyan { background: oklch(0.9 0.05 220); } .sw-pink { background: oklch(0.9 0.05 350); }
.sw-lime { background: oklch(0.9 0.08 130); }

/* Wider dashboard cards: long project names must not wrap word by word. */
.code-cards.wide { grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); }

/* Project cards tinted by stage — the pop Stephen asked for. */
.ptint-installing { background: oklch(0.98 0.015 85); border-color: oklch(0.9 0.05 85); }
.ptint-maintenance { background: oklch(0.98 0.015 160); border-color: oklch(0.9 0.04 160); }
.ptint-planning { background: oklch(0.98 0.015 250); border-color: oklch(0.9 0.04 250); }
.ptint-operational { background: oklch(0.98 0.015 160); border-color: oklch(0.9 0.04 160); }
.ptint-complete, .ptint-completed { background: oklch(0.98 0.015 300); border-color: oklch(0.9 0.04 300); }

/* Palette extension — Stephen: wider so already-used colors need not repeat. */
.tcard-indigo { background: oklch(0.97 0.02 275); border-color: oklch(0.9 0.04 275); }
.tcard-sky { background: oklch(0.97 0.02 235); border-color: oklch(0.9 0.04 235); }
.tcard-gold { background: oklch(0.97 0.03 95); border-color: oklch(0.9 0.06 95); }
.tcard-mint { background: oklch(0.97 0.025 175); border-color: oklch(0.9 0.045 175); }
.tcard-plum { background: oklch(0.97 0.02 325); border-color: oklch(0.9 0.04 325); }
.tcard-coral { background: oklch(0.97 0.025 30); border-color: oklch(0.9 0.05 30); }
.sw-indigo { background: oklch(0.9 0.06 275); } .sw-sky { background: oklch(0.9 0.05 235); }
.sw-gold { background: oklch(0.92 0.08 95); } .sw-mint { background: oklch(0.9 0.05 175); }
.sw-plum { background: oklch(0.9 0.05 325); } .sw-coral { background: oklch(0.9 0.06 30); }
.src-indigo-0 { background: oklch(0.92 0.05 275); } .src-indigo-1, .src-indigo-2 { background: oklch(0.96 0.025 275); }
.src-sky-0 { background: oklch(0.92 0.05 235); } .src-sky-1, .src-sky-2 { background: oklch(0.96 0.025 235); }
.src-gold-0 { background: oklch(0.92 0.07 95); } .src-gold-1, .src-gold-2 { background: oklch(0.96 0.035 95); }
.src-mint-0 { background: oklch(0.92 0.05 175); } .src-mint-1, .src-mint-2 { background: oklch(0.96 0.025 175); }
.src-plum-0 { background: oklch(0.92 0.05 325); } .src-plum-1, .src-plum-2 { background: oklch(0.96 0.025 325); }
.src-coral-0 { background: oklch(0.92 0.06 30); } .src-coral-1, .src-coral-2 { background: oklch(0.96 0.03 30); }

/* Deep variants — Stephen: 'you can get more different colors'. Same
   hues at a stronger tint; backgrounds stay light enough (L >= 0.88)
   that the standard dark text passes contrast on every one. */
.tcard-blue-deep { background: oklch(0.9 0.07 250); border-color: oklch(0.78 0.09000000000000001 250); }
.tcard-green-deep { background: oklch(0.9 0.07 160); border-color: oklch(0.78 0.09000000000000001 160); }
.tcard-amber-deep { background: oklch(0.9 0.09 85); border-color: oklch(0.78 0.11 85); }
.tcard-red-deep { background: oklch(0.9 0.07 20); border-color: oklch(0.78 0.09000000000000001 20); }
.tcard-violet-deep { background: oklch(0.9 0.07 300); border-color: oklch(0.78 0.09000000000000001 300); }
.tcard-slate-deep { background: oklch(0.9 0.02 260); border-color: oklch(0.78 0.04 260); }
.tcard-teal-deep { background: oklch(0.9 0.06 200); border-color: oklch(0.78 0.08 200); }
.tcard-orange-deep { background: oklch(0.9 0.08 55); border-color: oklch(0.78 0.1 55); }
.tcard-pink-deep { background: oklch(0.9 0.06 350); border-color: oklch(0.78 0.08 350); }
.tcard-lime-deep { background: oklch(0.9 0.09 130); border-color: oklch(0.78 0.11 130); }
.sw-blue-deep { background: oklch(0.82 0.11000000000000001 250); }
.sw-green-deep { background: oklch(0.82 0.11000000000000001 160); }
.sw-amber-deep { background: oklch(0.82 0.13 85); }
.sw-red-deep { background: oklch(0.82 0.11000000000000001 20); }
.sw-violet-deep { background: oklch(0.82 0.11000000000000001 300); }
.sw-slate-deep { background: oklch(0.82 0.06 260); }
.sw-teal-deep { background: oklch(0.82 0.1 200); }
.sw-orange-deep { background: oklch(0.82 0.12 55); }
.sw-pink-deep { background: oklch(0.82 0.1 350); }
.sw-lime-deep { background: oklch(0.82 0.13 130); }
.src-blue-deep-0 { background: oklch(0.86 0.07 250); } .src-blue-deep-1, .src-blue-deep-2 { background: oklch(0.93 0.035 250); }
.src-green-deep-0 { background: oklch(0.86 0.07 160); } .src-green-deep-1, .src-green-deep-2 { background: oklch(0.93 0.035 160); }
.src-amber-deep-0 { background: oklch(0.86 0.09 85); } .src-amber-deep-1, .src-amber-deep-2 { background: oklch(0.93 0.045 85); }
.src-red-deep-0 { background: oklch(0.86 0.07 20); } .src-red-deep-1, .src-red-deep-2 { background: oklch(0.93 0.035 20); }
.src-violet-deep-0 { background: oklch(0.86 0.07 300); } .src-violet-deep-1, .src-violet-deep-2 { background: oklch(0.93 0.035 300); }
.src-slate-deep-0 { background: oklch(0.86 0.02 260); } .src-slate-deep-1, .src-slate-deep-2 { background: oklch(0.93 0.01 260); }
.src-teal-deep-0 { background: oklch(0.86 0.06 200); } .src-teal-deep-1, .src-teal-deep-2 { background: oklch(0.93 0.03 200); }
.src-orange-deep-0 { background: oklch(0.86 0.08 55); } .src-orange-deep-1, .src-orange-deep-2 { background: oklch(0.93 0.04 55); }
.src-pink-deep-0 { background: oklch(0.86 0.06 350); } .src-pink-deep-1, .src-pink-deep-2 { background: oklch(0.93 0.03 350); }
.src-lime-deep-0 { background: oklch(0.86 0.09 130); } .src-lime-deep-1, .src-lime-deep-2 { background: oklch(0.93 0.045 130); }
.project-logo { max-height: 3.5rem; max-width: 12rem; object-fit: contain; }
.card-logo { max-height: 2rem; max-width: 8rem; object-fit: contain; align-self: flex-start; }

/* Visibility chips: filled = hidden from that target. */
.vis-chip.active { background: oklch(0.55 0.15 20); border-color: oklch(0.55 0.15 20); color: white; }


/* ---- Phones: the portal itself, not just the field app. PMs open ticket
   links and lists from their phones — the desktop layout must degrade to
   stacked cards, wrapping controls and scrolling tables, never a sideways-
   scrolling page. Purely additive; desktop is untouched. ---- */
@media (max-width: 720px) {
  .app-main { padding-left: 0.75rem; padding-right: 0.75rem; }
  h1 { font-size: 1.25rem; }
  .nav-inner { flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0.4rem 0.75rem; }
  .nav-user { display: none; }           /* name/role: nice, not essential */
  .nav-links { margin-left: 0.25rem; }
  .code-cards, .code-cards.wide { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .stat-blocks { flex-wrap: wrap; }
  .list-controls-bar { flex-wrap: wrap; }
  .filter-row { flex-wrap: wrap; }
  .table-meta { flex-wrap: wrap; }
  /* Tables: scroll inside their card, never the page. */
  .card, .table-scroll { max-width: 100%; overflow-x: auto; }
}

.col-picker-menu.cp-right { left: auto; right: 0; }
/* The ACTIVE block: one fixed look on every list on every page — deep navy,
   deliberately absent from the Appearance palette so no card family can
   ever be confused with "selected". */
.code-card.active { border-color: #1e3a5f !important; box-shadow: inset 0 0 0 2px #1e3a5f; background: #fff !important; }

.ws-tabs a { cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.tab-dot { width: 0.65rem; height: 0.65rem; display: inline-block; border-radius: 3px; }

/* ---- PM dashboard card grid — the polished look, no React ---- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.dash-card {
  background: #fff;
  border: 1px solid oklch(0.93 0.008 260);
  border-top: 3px solid var(--dash-accent, var(--primary));
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem 0.875rem;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.04);
  display: flex;
  flex-direction: column;
  min-height: 9rem;
  transition: box-shadow 0.2s, transform 0.2s;
}
.dash-card:hover {
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.06), 0 10px 24px oklch(0 0 0 / 0.09);
  transform: translateY(-1px);
}
/* the section color rides the top accent + the header dot, not a wash */
.dash-card.tcard-red    { --dash-accent: oklch(0.62 0.16 20); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-card.tcard-blue   { --dash-accent: oklch(0.58 0.15 250); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-card.tcard-green  { --dash-accent: oklch(0.6 0.14 160); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-card.tcard-violet { --dash-accent: oklch(0.58 0.15 300); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-card.tcard-amber  { --dash-accent: oklch(0.7 0.14 85); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-card.tcard-teal   { --dash-accent: oklch(0.6 0.12 200); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-card.tcard-slate  { --dash-accent: oklch(0.6 0.02 260); background: #fff; border-color: oklch(0.93 0.008 260); }
.dash-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
}
.dash-head strong {
  letter-spacing: 0.01em;
}
.dash-head strong::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dash-accent, var(--primary));
  margin-right: 0.375rem;
  vertical-align: baseline;
}
.dash-head .spacer { flex: 1; }
.card-drag {
  cursor: grab;
  color: oklch(0.82 0.01 260);
  font-size: 0.75rem;
  letter-spacing: -0.1em;
  user-select: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.dash-card:hover .card-drag { opacity: 1; }
.dash-card.sortable-ghost { opacity: 0.4; }
.dash-menu-wrap { position: relative; }
.dash-menu-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: #64748b;
  padding: 0 0.25rem;
  border-radius: 0.375rem;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.dash-card:hover .dash-menu-btn { opacity: 1; }
.dash-menu-btn:hover { background: oklch(0.95 0.008 260); }
.dash-menu {
  position: absolute;
  right: 0;
  top: 1.5rem;
  z-index: 30;
  background: #fff;
  border: 1px solid oklch(0.92 0.01 260);
  border-radius: 0.625rem;
  box-shadow: 0 8px 28px oklch(0 0 0 / 0.14);
  min-width: 13rem;
  padding: 0.25rem;
}
.dash-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.4375rem 0.5625rem;
  border-radius: 0.4375rem;
}
.dash-menu button:hover { background: oklch(0.96 0.008 260); }
.dash-menu-label {
  font-size: 0.625rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.375rem 0.5625rem 0.125rem;
  border-top: 1px solid oklch(0.95 0.005 260);
  margin-top: 0.25rem;
}
.dash-body {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.5rem;
  padding: 0.375rem 0.375rem 0.5rem;
  margin: 0 -0.375rem;
  transition: background 0.15s;
}
a.dash-body:hover { background: oklch(from var(--primary) l c h / 0.04); }
a.dash-body:hover .dash-open { opacity: 1; }
.dash-count {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dash-hint {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.4;
  margin-top: 0.1875rem;
}
.dash-open {
  display: inline-block;
  margin-top: 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}

/* ---- column width grips on every list ---- */
.col-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}
.col-grip:hover { background: rgb(30 58 95 / 0.18); }

/* ---- blocks-as-tabs: flat bar + sliding blue indicator ----
   The CodePen style Stephen pointed at (2026-09-05), in SWiM blue: no
   boxes, medium labels, and a 3px indicator that GLIDES under the active
   tab (positioned by swimArmTabs in base.html). */
.ws-blocktabs {
  position: relative;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
  row-gap: 0;
  gap: 0;
  border-bottom: 2px solid oklch(0.92 0.01 260);
  align-items: flex-end;
}
.ws-blocktabs a {
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted-foreground);
  font-weight: 500;
  border-radius: 0.375rem 0.375rem 0 0;
  transition: color 0.18s, background 0.18s;
  text-decoration: none;
  border-bottom: none;
  margin-bottom: 0;
}
.ws-blocktabs a:hover {
  color: var(--primary);
  background: oklch(from var(--primary) l c h / 0.06);
}
.ws-blocktabs a.active { color: var(--primary); font-weight: 700; }
.tab-slide {
  position: absolute;
  height: 3px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, width;
  pointer-events: none;
  left: 0;
  top: 0;
}
.tab-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.6875rem;
  background: oklch(0.93 0.012 260);
  border-radius: 0.625rem;
  padding: 0.0625rem 0.375rem;
  transition: background 0.18s, color 0.18s;
}
.ws-blocktabs a.active .tab-count {
  background: var(--primary);
  color: #fff;
}
.ws-blocktabs .spacer { flex: 1; }

/* dashboard cards' tab strips: same pen style, smaller */
.dash-tabs {
  position: relative;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 2px solid oklch(0.93 0.008 260);
  margin-bottom: 0.5rem;
  align-items: flex-end;
}
.dash-tabs a {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 500;
  border-radius: 0.375rem 0.375rem 0 0;
  transition: color 0.18s, background 0.18s;
}
.dash-tabs a:hover {
  color: var(--primary);
  background: oklch(from var(--primary) l c h / 0.06);
}
.dash-tabs a.active { color: var(--primary); font-weight: 700; }

/* ---- quick-filter chips ---- */
.qf-wrap { display: inline-flex; align-items: center; gap: 0.125rem; }
.qf-x {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}
.qf-x:hover { color: oklch(0.5 0.15 20); background: oklch(0.95 0.02 20); }
.qf-add { border-style: dashed; }
.qf-form { margin: 0.375rem 0; display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }

/* ================= ETEC PM PILOT (ws-pilot) =================
   The Clarity anatomy with the pen's pill tabs in blue, scoped to the
   etec_pm dashboard until Stephen approves it everywhere. */

/* keep both layouts working off one markup: the surface wrapper is
   invisible by default and becomes the white card only under the pilot */
.dash-surface { display: contents; }

.ws-pilot .dash-surface {
  display: block;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.04);
  flex: 1;
}
.ws-pilot .dash-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
.ws-pilot .dash-card:hover { transform: none; box-shadow: none; }
.ws-pilot .dash-card:hover .dash-surface {
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.06), 0 10px 24px oklch(0 0 0 / 0.09);
}

/* the strip ON TOP of the card: ⋮⋮ · section label · tabs ······ ⋯ */
.ws-pilot .dash-top {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  padding: 0 0.125rem;
  margin-bottom: 0.4375rem;
  min-height: 1.75rem;
}
.ws-pilot .dash-top .spacer { flex: 1; }
.ws-pilot .card-drag { opacity: 0.5; }
.ws-pilot .dash-card:hover .card-drag { opacity: 1; }
.ws-pilot .dash-menu-btn { opacity: 0.6; }
.ws-pilot .dash-seclabel {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ws-pilot .dash-secdot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dash-accent, var(--primary));
}

/* the pen's nav pills, in blue */
.ws-pilot .dash-tabs,
.ws-pilot .ws-blocktabs {
  border-bottom: none;
  gap: 0.375rem;
  row-gap: 0.375rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0;
  position: static;
}
.ws-pilot .dash-tabs a,
.ws-pilot .ws-blocktabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #888;
  padding: 0.3125rem 0.6875rem;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.ws-pilot .dash-tabs a:hover, .ws-pilot .dash-tabs a:focus,
.ws-pilot .ws-blocktabs a:hover, .ws-pilot .ws-blocktabs a:focus {
  background: oklch(0.62 0.13 245);
  color: #fff;
  border-color: oklch(0.62 0.13 245);
}
.ws-pilot .dash-tabs a.active,
.ws-pilot .ws-blocktabs a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 700;
}
.ws-pilot .ws-blocktabs a .tab-count { background: oklch(0.94 0.01 260); }
.ws-pilot .ws-blocktabs a.active .tab-count,
.ws-pilot .ws-blocktabs a:hover .tab-count {
  background: oklch(1 0 0 / 0.22);
  color: #fff;
}
.ws-pilot .tab-slide { display: none; }
.ws-pilot .ws-blocktabs { padding: 0; margin: 0.625rem 0 0.75rem; }

/* the pen's fade on pane switch */
@keyframes swim-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
.ws-pilot .dash-body { animation: swim-fade 0.3s ease-in-out; }

/* pilot header: one tight row */
.dash-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}
.dash-header .spacer { flex: 1; }
.dash-h1 { margin: 0; font-size: 1.375rem; }
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #888;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.pill-btn:hover {
  background: oklch(0.62 0.13 245);
  border-color: oklch(0.62 0.13 245);
  color: #fff;
}
.pill-btn-solid {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pill-btn-solid:hover { background: oklch(0.45 0.16 245); border-color: oklch(0.45 0.16 245); }

/* previews can never blow the card out */
.dash-preview { display: block; max-height: 13rem; overflow: hidden; }
.dash-mini {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.375rem;
  font-size: 0.625rem;
  table-layout: fixed;
}
.dash-mini th {
  text-align: left;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.5625rem;
  padding: 0.125rem 0.375rem 0.125rem 0;
  border-bottom: 1px solid oklch(0 0 0 / 0.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-mini td {
  padding: 0.1875rem 0.375rem 0.1875rem 0;
  border-bottom: 1px solid oklch(0 0 0 / 0.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* pilot alignment: single-row scrollable tab strips + equal-height
   surfaces per grid row, so cards line up like Clarity's */
.ws-pilot .dash-grid { align-items: stretch; }
.ws-pilot .dash-top { flex-wrap: nowrap; min-height: 2rem; }
.ws-pilot .dash-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.ws-pilot .dash-tabs::-webkit-scrollbar { display: none; }
.ws-pilot .dash-seclabel { flex-shrink: 0; }

/* folder tabs: the active tab is white and ATTACHED to the card surface */
.ws-pilot .dash-top { margin-bottom: 0; align-items: flex-end; }
.ws-pilot .dash-tabs a {
  border-radius: 0.375rem 0.375rem 0 0;
  border-bottom: none;
  background: oklch(0.97 0.005 260 / 0.7);
  position: relative;
  top: 1px;
}
.ws-pilot .dash-tabs a.active {
  background: #fff;
  color: var(--foreground);
  border-color: #e5e5e5;
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--primary);
  z-index: 2;
}
.ws-pilot .dash-tabs a:hover:not(.active) {
  background: oklch(0.62 0.13 245);
  color: #fff;
  border-color: oklch(0.62 0.13 245);
}
.ws-pilot .dash-surface { border-radius: 0 0.375rem 0.375rem 0.375rem; }

/* ============ ETEC PM v2 — the reference layout (2026-09-07) ============ */
/* KPI strip: Overall Progress + the five headline numbers */
.kpi-strip {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0.625rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.kpi-value {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.kpi-hint { font-size: 0.625rem; }
.kpi-bar {
  display: block;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: oklch(0.93 0.01 220);
  overflow: hidden;
  margin-top: 0.25rem;
}
.kpi-fill {
  display: block;
  height: 100%;
  border-radius: 0.25rem;
  background: oklch(0.42 0.09 220);
}
@media (max-width: 1200px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }

/* full-width segmented page tabs */
.page-tabs {
  display: flex;
  background: oklch(0.945 0.006 240);
  border-radius: 0.5rem;
  padding: 0.1875rem;
  margin-bottom: 1rem;
  gap: 0.1875rem;
}
.page-tabs a {
  flex: 1;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.page-tabs a:hover { color: var(--foreground); }
.page-tabs a.active {
  background: #fff;
  color: var(--foreground);
  font-weight: 700;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
}

/* group cards: two columns, white, thin borders, rows inside */
.ws-pilot .gcard-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) { .ws-pilot .gcard-grid { grid-template-columns: 1fr; } }
.ws-pilot .gcard-grid .dash-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0.5rem 0.75rem 0.625rem;
  box-shadow: none;
  min-height: 0;
}
.ws-pilot .gcard-grid .dash-card:hover {
  transform: none;
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.06);
}
.gcard-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0;
}
.gcard-head .spacer { flex: 1; }
.gcard-chev {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted-foreground);
  transform: rotate(90deg);
  transition: transform 0.15s;
  padding: 0 0.25rem;
  line-height: 1;
}
.gcard-chev.closed { transform: rotate(0deg); }
.gcard-name { font-size: 0.875rem; }
.gcard-badge {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--muted-foreground);
  background: oklch(0.955 0.006 240);
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0.0625rem 0.4375rem;
  font-variant-numeric: tabular-nums;
}
.gcard-body { padding-top: 0.25rem; }
.glist-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  margin: 0.1875rem 0;
  background: oklch(0.975 0.004 240);
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  font-size: 0.8125rem;
  transition: background 0.12s;
}
.glist-row:hover { background: oklch(0.94 0.012 240); }
.glist-ic { font-size: 0.75rem; opacity: 0.7; }
.glist-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glist-count {
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0.0625rem 0.4375rem;
}
.glist-count.gc-hot {
  background: oklch(0.97 0.02 20);
  border-color: oklch(0.88 0.06 20);
  color: oklch(0.5 0.15 20);
}
.glist-unpin {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.6875rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  opacity: 0;
}
.glist-row:hover .glist-unpin { opacity: 1; }
.glist-unpin:hover { color: oklch(0.5 0.15 20); }
.glist-add { margin-top: 0.25rem; }
.glist-add-btn {
  width: 100%;
  border: 1px dashed #d3d8df;
  background: none;
  border-radius: 0.375rem;
  padding: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.glist-add-btn:hover { background: oklch(0.975 0.004 240); color: var(--foreground); }
.glist-add-panel {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.25rem 0.125rem;
}

/* =====================================================================
   DESIGN SYSTEM v4 — from the Claude Design handoff (README, 2026-09-08).
   Tokens are the design's authoritative values, verbatim. They live
   alongside the older oklch tokens; new chrome uses these, existing pages
   keep rendering off the old ones until each is ported.
   ===================================================================== */
:root {
  /* neutrals */
  --d-page: #eef4fa;
  --d-canvas: #f4f8fc;
  --d-surface: #ffffff;
  --d-border: #e3e8ef;
  --d-hairline: #eef1f5;
  --d-divider: #f4f6f9;
  --d-hover: #f8fafc;
  --d-track: #f2f4f7;
  --d-tint: #eaf2fd;
  --d-tint-soft: #f7fafd;
  --d-line: #d7dee8;
  /* text */
  --d-ink: #101828;
  --d-ink-2: #344054;
  --d-muted: #475467;
  --d-subtle: #667085;
  --d-faint: #98a2b3;
  --d-disabled: #c0c7d1;
  --d-placeholder: #9db4d1;
  /* brand */
  --d-brand: #1a5eb8;
  --d-brand-hover: #164f9c;
  --d-brand-2: #2a7fd4;
  --d-brand-3: #7aa9dc;
  --d-link: #1660c9;
  --d-link-hover: #0f4a9c;
  /* accents */
  --d-amber: #fbbf24;
  --d-amber-ink: #7c4a03;
  --d-warn: #b45309;
  --d-warn-tint: #fef0e6;
  --d-caution-tint: #fdf6e3;
  --d-caution-ink: #8a6d1f;
  --d-caution-line: #f0dfa8;
  --d-caution-box: #fbf0d0;
  --d-ok: #256d42;
  --d-ok-tint: #eaf6ee;
  /* type */
  --d-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --d-mono: ui-monospace, Menlo, monospace;
  /* radii */
  --d-r-swatch: 3px;
  --d-r-sm: 5px;
  --d-r-ctl: 7px;
  --d-r-card: 8px;
  --d-r-menu: 9px;
  --d-r-page: 10px;
  --d-r-modal: 12px;
  --d-r-pill: 999px;
  /* shadows */
  --d-sh-card: 0 1px 2px rgba(16, 24, 40, .05);
  --d-sh-menu: 0 10px 28px rgba(16, 24, 40, .16);
  --d-sh-modal: 0 24px 60px rgba(16, 24, 40, .28);
  --d-sh-drag: drop-shadow(0 14px 28px rgba(16, 24, 40, .22));
  /* grid engine — must match grid.js */
  --d-cols: 12;
  --d-gap: 12px;
  --d-row: 40px;
  --d-unit: 52px;
  /* shell */
  --d-topbar-h: 48px;
  --d-rail-w: 68px;
}

/* ---------- app shell: top bar · icon rail ---------- */
.shell-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--d-topbar-h);
  padding: 0 16px;
  background: var(--d-surface);
  border-bottom: 1px solid var(--d-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.shell-burger {
  width: 26px;
  height: 26px;
  border: 1px solid var(--d-line);
  border-radius: 6px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--d-muted);
  font-size: 13px;
  flex: none;
}
.shell-burger:hover { background: #f2f6fb; }
.shell-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.shell-brand img { height: 24px; width: auto; display: block; }
.shell-brand b { font: 700 14px var(--d-font); color: var(--d-brand); }
.shell-ver { font: 10.5px var(--d-mono); color: var(--d-faint); }
.shell-top .spacer { flex: 1; }
.proj-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--d-border);
  border-radius: var(--d-r-ctl);
  font: 12px var(--d-font);
  color: var(--d-ink);
  cursor: pointer;
  background: var(--d-surface);
  text-decoration: none;
}
.proj-chip:hover { background: var(--d-tint-soft); }
.proj-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--d-brand); flex: none;
}
.proj-chip .caret { font-size: 9px; color: var(--d-faint); }

.shell-body { display: flex; align-items: stretch; min-height: calc(100vh - var(--d-topbar-h)); }
.shell-rail {
  width: var(--d-rail-w);
  flex: none;
  background: var(--d-surface);
  border-right: 1px solid var(--d-border);
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: auto;
}
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 2px 6px;
  border-radius: var(--d-r-menu);
  cursor: pointer;
  flex: none;
  text-decoration: none;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.rail-item:hover { background: var(--d-tint); }
.rail-item .ic {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--d-tint); border: 1px solid #dbe6f3;
}
.rail-item .lbl {
  font: 9px var(--d-font);
  letter-spacing: .01em;
  color: var(--d-subtle);
  max-width: 58px;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-item.active { background: var(--d-brand); }
.rail-item.active .ic { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); }
.rail-item.active .lbl { color: #fff; font-weight: 600; }
.rail-item.admin {
  background: var(--d-caution-tint);
  border-color: var(--d-caution-line);
}
.rail-item.admin .ic { background: var(--d-caution-box); border-color: var(--d-caution-line); }
.rail-item.admin .lbl { color: var(--d-caution-ink); font-weight: 600; }
.rail-item.admin.active { background: var(--d-caution-ink); border-color: var(--d-caution-ink); }
.rail-item.admin.active .ic { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); }
.rail-item.admin.active .lbl { color: #fff; }
.rail-spacer { flex: 1; min-height: 8px; }
.rail-foot {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 3px; border-top: 1px solid var(--d-hairline);
}
.rail-foot .who { font: 9px/1.2 var(--d-font); color: var(--d-faint); text-align: center; }
.rail-signout {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; border-radius: var(--d-r-ctl); cursor: pointer;
  border: none; background: none;
}
.rail-signout:hover { background: #f2f6fb; }
.rail-signout .glyph {
  width: 16px; height: 12px; border: 1.5px solid var(--d-subtle);
  border-right-color: transparent; border-radius: 2px; box-sizing: border-box;
}
.rail-signout .lbl { font: 9px var(--d-font); color: var(--d-subtle); }
.avatar {
  border-radius: 50%; background: var(--d-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
  font: 600 11.5px var(--d-font);
  width: 30px; height: 30px;
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--d-canvas); }

/* CSS-drawn rail glyphs (README: 22px box / 10px glyph; swap for a sprite later) */
.g { width: 10px; height: 10px; flex: none; box-sizing: border-box; --gc: var(--d-brand); }
.rail-item.active .g, .rail-item.admin.active .g { --gc: #fff; }
.rail-item.admin .g { --gc: var(--d-caution-ink); }
.g-grid {
  background:
    linear-gradient(var(--gc), var(--gc)) 0 0/4px 4px no-repeat,
    linear-gradient(var(--gc), var(--gc)) 6px 0/4px 4px no-repeat,
    linear-gradient(var(--gc), var(--gc)) 0 6px/4px 4px no-repeat,
    linear-gradient(var(--gc), var(--gc)) 6px 6px/4px 4px no-repeat;
}
.g-path { height: 9px; border-left: 2px solid var(--gc); border-bottom: 2px solid var(--gc); }
.g-plus {
  background:
    linear-gradient(var(--gc), var(--gc)) center/2px 10px no-repeat,
    linear-gradient(var(--gc), var(--gc)) center/10px 2px no-repeat;
}
.g-dot { border-radius: 50%; background: var(--gc); width: 9px; height: 9px; }
.g-tri {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid var(--gc);
}
.g-pill { height: 7px; border-radius: var(--d-r-pill); border: 2px solid var(--gc); }
.g-bars {
  background:
    linear-gradient(var(--gc), var(--gc)) 0 100%/2px 6px no-repeat,
    linear-gradient(var(--gc), var(--gc)) 4px 100%/2px 10px no-repeat,
    linear-gradient(var(--gc), var(--gc)) 8px 100%/2px 8px no-repeat;
}
.g-page { border: 1.5px solid var(--gc); border-radius: 1px; width: 8px; height: 10px; }
.g-ring { border-radius: 50%; border: 2px solid var(--gc); }
.g-q {
  border-radius: 50%; border: 1.5px solid var(--gc);
  background: linear-gradient(var(--gc), var(--gc)) center 6.5px/1.5px 1.5px no-repeat;
}

/* The rail owns the left edge now, so the content column fills what is
   left instead of centring itself in the viewport. */
.shell-main > .app-main {
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.5rem 2rem;
  flex: 1;
  min-width: 0;
}
@media (max-width: 900px) {
  .shell-rail { display: none; }
  .shell-main > .app-main { padding: 1rem 0.75rem 1.5rem; }
}

/* ---------- block canvas: the 12-column grid ---------- */
.gb-grid { position: relative; border-radius: 6px; }
.gb {
  position: absolute;
  display: flex;
  flex-direction: column;
  transition: left .17s ease, top .17s ease, width .17s ease, height .17s ease;
  z-index: 2;
}
.gb.dragging { z-index: 40; transition: none; filter: var(--d-sh-drag); }
/* An open menu lifts its whole block above resting neighbours (2) while
   still passing under a block being dragged (40). */
.gb.raised { z-index: 30; }
.gb-ghost {
  position: absolute;
  border: 1.5px dashed var(--d-brand);
  background: rgba(26, 94, 184, .07);
  border-radius: var(--d-r-card);
  z-index: 1;
  pointer-events: none;
}
.gb-grid.editing .gb-grip { color: var(--d-brand); cursor: grab; }
.gb-grip {
  padding: 0 4px 6px;
  font-size: 11px;
  color: var(--d-line);
  cursor: default;
  flex: none;
  touch-action: none;
  background: none;
  border: none;
}
.gb-rz-corner, .gb-rz-right, .gb-rz-bottom { display: none; touch-action: none; }
.gb-grid.editing .gb-rz-corner,
.gb-grid.editing .gb-rz-right,
.gb-grid.editing .gb-rz-bottom { display: block; position: absolute; z-index: 6; }
.gb-rz-corner {
  right: -3px; bottom: -3px; width: 16px; height: 16px;
  border-radius: 4px; border: 1.5px solid var(--d-brand);
  background: #fff; cursor: nwse-resize;
}
.gb-rz-right {
  right: -2px; top: 44px; bottom: 24px; width: 5px;
  border-radius: 3px; background: rgba(26, 94, 184, .28); cursor: ew-resize;
}
.gb-rz-bottom {
  left: 24px; right: 24px; bottom: -2px; height: 5px;
  border-radius: 3px; background: rgba(26, 94, 184, .28); cursor: ns-resize;
}
@media (max-width: 900px) {
  /* Narrow: one column in saved order, no dragging (design option 1e). */
  .gb-grid { height: auto !important; background-image: none !important; }
  .gb {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 12rem;
    margin-bottom: 12px;
    transform: none !important;
  }
  .gb-grip, .gb-rz-corner, .gb-rz-right, .gb-rz-bottom { display: none !important; }
}

/* ---------- project selector (design screen 1a) ---------- */
.sel-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.sel-head .spacer { flex: 1; }
.sel-title { font: 700 26px/1.1 var(--d-font); color: var(--d-ink); }
.sel-sub { font: 12.5px var(--d-font); color: var(--d-subtle); margin-top: 5px; }
.sel-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sel-search {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--d-line);
  border-radius: var(--d-r-ctl); background: var(--d-surface);
}
.sel-search input {
  border: none; outline: none; background: transparent;
  font: 12px var(--d-font); color: var(--d-ink); width: 210px;
}
.sel-mag {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--d-faint); box-sizing: border-box; flex: none;
}
.sel-label { font: 11.5px var(--d-font); color: var(--d-faint); }
.sel-count { font: 11.5px var(--d-font); color: var(--d-faint); }
.seg { display: flex; background: var(--d-track); border-radius: var(--d-r-ctl); padding: 2px; }
.seg button {
  padding: 4px 10px; border: none; background: none; cursor: pointer;
  border-radius: var(--d-r-sm); font: 11.5px var(--d-font); color: var(--d-subtle);
}
.seg button.on {
  background: var(--d-surface); font-weight: 600; color: var(--d-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.sel-group { margin-bottom: 22px; }
.sel-ghead {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 2px 10px; cursor: pointer; background: none; border: none;
  text-align: left;
}
.sel-caret {
  width: 0; height: 0; flex: none;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid var(--d-faint);
  transform-origin: 2px 50%;
  transition: transform .15s;
}
.sel-caret.down { transform: rotate(90deg); }
.sel-glabel { font: 600 12.5px var(--d-font); color: var(--d-ink); }
.sel-gcount {
  font: 600 10.5px var(--d-font); color: var(--d-muted);
  background: #e8eef6; border-radius: var(--d-r-pill); padding: 2px 8px;
}
.sel-rule { flex: 1; height: 1px; background: rgba(16, 24, 40, .09); margin-left: 4px; }
.sel-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.sel-card {
  width: 292px; min-height: 196px; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 14px;
  border-radius: var(--d-r-page); border: 1px solid;
  position: relative;
}
.sel-card .spacer { flex: 1; min-height: 10px; }
.sel-card-top { display: flex; align-items: flex-start; gap: 10px; }
.sel-logo {
  width: 76px; height: 26px; border-radius: 4px; flex: none;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(16, 24, 40, .12);
  object-fit: contain;
}
.sel-logo.ph {
  display: flex; align-items: center; justify-content: center;
  font: 700 8.5px var(--d-mono); color: var(--d-placeholder);
}
.sel-name { font: 700 14px/1.3 var(--d-font); color: var(--d-ink); margin-top: 11px; }
.sel-no { font: 11.5px var(--d-mono); color: var(--d-subtle); margin-top: 5px; }
.sel-desc { font: 12px/1.5 var(--d-font); color: var(--d-muted); margin-top: 5px; }
.sel-meta { font: 12px var(--d-font); color: var(--d-subtle); }
.sel-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sel-card-foot .spacer { flex: 1; min-height: 0; }
.sel-open { font: 600 12.5px var(--d-font); color: var(--d-link); text-decoration: none; }
.sel-details { font: 12px var(--d-font); color: var(--d-muted); text-decoration: none; position: relative; z-index: 2; }
.sel-chip {
  font: 600 10.5px var(--d-font); padding: 3px 9px;
  border-radius: var(--d-r-pill); white-space: nowrap; flex: none;
}
/* the design's four stage tints: card bg / border / chip bg / chip ink */
.sel-card.st-planning    { background: #e9f4f9; border-color: #cde3ed; }
.sel-card.st-installing  { background: #fdeeed; border-color: #f5d5d1; }
.sel-card.st-maintenance { background: #eaf6ee; border-color: #cfe6d8; }
.sel-card.st-closeout    { background: #f3f4f7; border-color: #e2e4ea; }
.sel-chip.st-planning    { background: #d5e9f2; color: #175b73; }
.sel-chip.st-installing  { background: #f9dcd8; color: #9c3d34; }
.sel-chip.st-maintenance { background: #d8efe1; color: #226944; }
.sel-chip.st-closeout    { background: #eceef4; color: #4a4f5e; }
.sel-table { padding: 0; border-radius: var(--d-r-page); overflow: hidden; }
.sel-tr {
  display: flex; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--d-divider);
  font: 12.5px var(--d-font); color: var(--d-ink-2);
  align-items: center; text-decoration: none;
}
.sel-tr:hover { background: var(--d-hover); }
.sel-th {
  padding: 10px 14px; border-bottom: 1px solid var(--d-hairline);
  font: 600 11px var(--d-font); color: var(--d-faint); letter-spacing: .03em;
}
.sel-th:hover { background: none; }
.sel-tr .lnk { color: var(--d-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-tr .muted { color: var(--d-subtle); }
.sel-tr .mono { font: 11.5px var(--d-mono); color: var(--d-subtle); }
.sel-empty {
  background: var(--d-surface); border: 1px dashed var(--d-line);
  border-radius: var(--d-r-page); padding: 34px; text-align: center;
  font: 12.5px var(--d-font); color: var(--d-faint);
}
.sel-auto {
  max-width: 520px; background: var(--d-surface);
  border: 1px solid var(--d-border); border-radius: var(--d-r-page);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.sel-auto-head { display: flex; align-items: center; gap: 10px; font: 700 14px var(--d-font); color: var(--d-ink); }
.sel-auto-body { font: 12.5px/1.6 var(--d-font); color: var(--d-muted); margin: 0; }
.sel-auto .btn-primary { align-self: flex-start; }

/* ---------- the block canvas: bar, tab strip, card, renderers ---------- */
.board-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 14px; flex-wrap: wrap;
}
.board-bar .spacer { flex: 1; }
.board-title {
  font: 700 15px var(--d-font); color: var(--d-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-crumb { font: 11px var(--d-font); color: var(--d-faint); }
.board-note { font: 11.5px var(--d-font); color: var(--d-faint); }
.board-pill {
  display: flex; align-items: center; gap: 6px; padding: 4px 9px;
  border: 1px solid var(--d-line); border-radius: var(--d-r-pill);
  font: 11.5px var(--d-font); color: var(--d-muted);
}
.board-btn {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px;
  border: 1px solid var(--d-line); border-radius: var(--d-r-ctl);
  font: 12px var(--d-font); color: var(--d-ink-2);
  background: var(--d-surface); cursor: pointer;
}
.board-btn:hover { background: #f2f6fb; }
.board-btn.on { border-color: var(--d-brand); background: var(--d-tint); color: var(--d-brand); font-weight: 600; }
.board-btn .muted { color: var(--d-faint); }
.board-btn .caret { font-size: 9px; color: var(--d-faint); }
.board-menu {
  position: absolute; top: 36px; right: 0; z-index: 60;
  background: var(--d-surface); border: 1px solid var(--d-border);
  border-radius: var(--d-r-menu); box-shadow: var(--d-sh-menu); padding: 6px;
  min-width: 214px;
}
.board-menu-cap {
  font: 600 10px var(--d-font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--d-faint); padding: 6px 8px 4px;
}
.board-menu-item {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  padding: 6px 8px; font: 12px var(--d-font); color: var(--d-ink-2);
  border-radius: 6px; cursor: pointer; background: none; border: none;
  text-align: left; text-decoration: none;
}
.board-menu-item:hover { background: #f2f6fb; }
.board-menu-item.on { color: var(--d-brand); font-weight: 600; background: #f2f6fb; }
.board-menu-item .meta { font: 10px var(--d-font); color: var(--d-faint); }
.board-menu-rule { height: 1px; background: var(--d-hairline); margin: 5px 0; }
.board-save { display: flex; gap: 4px; padding: 4px 6px; }
.board-save input { flex: 1; min-width: 0; font: 11.5px var(--d-font); padding: 3px 6px; }
.board-save select { font: 11px var(--d-font); }

.gb-strip {
  display: flex; align-items: flex-end; height: 29px;
  padding-left: 2px; position: relative; flex: none;
}
/* The spacer takes the LEFTOVER width; the tabs take what they need
   first. Both were flex:1, so the spacer grew to half the strip doing
   nothing and the last tab was clipped with room sitting empty beside it
   (Stephen, image 2, 2026-08-26). */
.gb-strip .spacer { flex: 1 1 0; min-width: 0; }
.gb-tabs {
  display: flex; gap: 2px; align-items: flex-end;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.gb-tab {
  display: flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--d-r-ctl) var(--d-r-ctl) 0 0;
  font: 11.5px var(--d-font); color: var(--d-subtle);
  background: transparent; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  /* Shrink rather than disappear: when a block really is too narrow for
     its tabs, every tab narrows and ellipsises, so you can still see that
     each one is there. Losing the last tab entirely reads as a bug. */
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  position: relative; z-index: 1;
}
.gb-tab > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-tab.active {
  background: var(--d-surface); color: var(--d-ink); font-weight: 600;
  border-color: var(--d-border); border-bottom-color: var(--d-surface);
  margin-bottom: -1px; z-index: 3;
}
.gb-viewdot { width: 5px; height: 5px; border-radius: 50%; background: var(--d-warn); flex: none; }
.gb-chev {
  width: 22px; height: 24px; margin-bottom: 2px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--d-r-sm); border: none; cursor: pointer;
  background: var(--d-brand); color: #fff; font: 600 10px var(--d-font);
}
.gb-chev.open { background: var(--d-amber); color: var(--d-amber-ink); }
.gb-tabmenu { top: 28px; width: 252px; }

.gb-card {
  flex: 1; min-height: 0; background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 0 var(--d-r-card) var(--d-r-card) var(--d-r-card);
  box-shadow: var(--d-sh-card);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.gb-slot { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gb-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px 5px; }
.gb-title {
  font: 600 12.5px var(--d-font); color: var(--d-ink);
  text-decoration: none; border-bottom: 1px dotted #cdd8e6;
  max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-grid.editing .gb-title { border-bottom: none; pointer-events: none; }
.gb-count {
  font: 600 10px var(--d-font); color: var(--d-muted);
  background: var(--d-track); border-radius: var(--d-r-pill); padding: 1px 6px;
}
.gb-head .spacer { flex: 1; }
.gb-seg { display: flex; background: var(--d-track); border-radius: 6px; padding: 2px; flex: none; }
.gb-seg a {
  padding: 3px 8px; border-radius: 4px; font: 10.5px var(--d-font);
  color: var(--d-subtle); text-decoration: none;
}
.gb-seg a.on {
  background: var(--d-surface); font-weight: 600; color: var(--d-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.gb-body { flex: 1; overflow: auto; padding: 0 8px 8px; min-height: 0; }
.gb-empty { font: 11.5px var(--d-font); color: var(--d-faint); padding: 6px; }
.gb-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: var(--d-r-sm); font: 13px var(--d-font);
  border-bottom: 1px solid var(--d-divider); text-decoration: none; color: inherit;
}
.gb-row:hover { background: var(--d-hover); }
.gb-row .sw { width: 13px; height: 13px; border-radius: var(--d-r-swatch); background: #dbe6f3; flex: none; }
.gb-row .lb { color: var(--d-link); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-row .pill {
  font: 600 11px var(--d-font); color: var(--d-muted); background: var(--d-track);
  border-radius: var(--d-r-pill); padding: 2px 8px; flex: none;
  font-variant-numeric: tabular-nums;
}
.gb-kpi-wrap { display: flex; align-items: baseline; gap: 9px; padding: 4px; }
.gb-kpi { font: 700 32px/1 var(--d-font); color: var(--d-ink); font-variant-numeric: tabular-nums; }
.gb-kpi.warn { color: var(--d-warn); }
.gb-kpi.good { color: var(--d-good, #15803d); }
/* A tile whose number has rows behind it. Inherits colour so the number
   keeps its warn/good tone instead of turning link-blue. */
a.gb-kpi-link { display: block; text-decoration: none; color: inherit; }
a.gb-kpi-link:hover .gb-kpi { text-decoration: underline; }
.gb-cap { font: 12px var(--d-font); color: var(--d-subtle); padding: 0 4px; display: block; }
.gb-bar {
  margin: 8px 4px 4px; height: 9px; border-radius: var(--d-r-pill);
  background: #e8eef6; overflow: hidden;
}
/* A block with no visible tab strip gets that height back, so its card
   is square-cornered against nothing. */
.gb.notabs > .gb-card { border-top-left-radius: var(--d-r-card); }
/* Progress must FIT its 3-row block, not scroll inside it. Adding the
   "72,029 of 74,300" line under the bar pushed it past the height and
   .gb-body's overflow:auto answered with a scrollbar — which is not an
   answer for a card whose whole job is to be read at a glance. Clip
   instead, and take the slack out of the number's line box. */
.gb-body.is-progress { overflow: hidden; padding-bottom: 4px; }
.gb-body.is-progress .gb-kpi-wrap { padding: 0 4px; }
.gb-body.is-progress .gb-kpi { font-size: 28px; }
.gb-body.is-progress .gb-cap { line-height: 1.25; }
.gb-bar span {
  display: block; height: 100%; border-radius: var(--d-r-pill);
  background: linear-gradient(90deg, var(--d-brand), var(--d-brand-2));
}
.gb-chart { display: flex; align-items: center; gap: 14px; padding: 6px 4px; }
.gb-donut { position: relative; width: 100px; height: 100px; border-radius: 50%; flex: none; }
.gb-donut .hole {
  position: absolute; inset: 22px; background: var(--d-surface); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gb-donut b { font: 700 14px var(--d-font); color: var(--d-ink); }
.gb-donut i { font: 9.5px var(--d-font); color: var(--d-faint); font-style: normal; }
.gb-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gb-leg {
  display: flex; align-items: center; gap: 7px; font: 11.5px var(--d-font);
  color: var(--d-ink-2); text-decoration: none;
}
.gb-leg .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.gb-leg .lb { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-leg .vl { font-weight: 600; font-variant-numeric: tabular-nums; }
.gb-table { font: 11.5px var(--d-font); }
.gb-tr {
  display: flex; gap: 8px; padding: 7px 6px;
  border-bottom: 1px solid var(--d-divider); color: var(--d-ink-2);
  text-decoration: none;
}
.gb-tr:hover { background: var(--d-hover); }
.gb-th {
  color: var(--d-faint); font-weight: 600;
  border-bottom: 1px solid var(--d-hairline); padding: 5px 6px;
}
.gb-th:hover { background: none; }
.gb-tr .lnk { color: var(--d-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-ticket {
  display: flex; align-items: center; gap: 9px; padding: 7px 6px;
  border-bottom: 1px solid var(--d-divider); font: 12px var(--d-font);
  text-decoration: none; color: inherit;
}
.gb-ticket:hover { background: var(--d-hover); }
.gb-ticket .pri {
  font: 600 9.5px var(--d-font); letter-spacing: .04em; padding: 2px 6px;
  border-radius: 4px; flex: none;
}
.gb-ticket .p-high, .gb-ticket .p-urge { background: var(--d-warn-tint); color: var(--d-warn); }
.gb-ticket .p-med { background: var(--d-caution-tint); color: var(--d-caution-ink); }
.gb-ticket .p-low, .gb-ticket .p-norm { background: #eef2f7; color: var(--d-subtle); }
.gb-ticket .id { font: 10.5px var(--d-mono); color: var(--d-faint); flex: none; }
.gb-ticket .lb { flex: 1; color: var(--d-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-ticket .meta { color: var(--d-faint); flex: none; }

/* ---------- add-block picker + card menu ---------- */
.board-btn.primary {
  background: var(--d-brand); border-color: var(--d-brand);
  color: #fff; font-weight: 600;
}
.board-btn.primary:hover { background: var(--d-brand-hover); }
/* The modal must never be taller than the window: it grew past the top of
   the viewport once the section tiles were generated per group, and the
   overlay centres it, so the overflow went somewhere unreachable. Head and
   foot are pinned; everything between them scrolls in ONE place. */
.pick-modal {
  width: 720px; max-width: 100%; background: var(--d-surface);
  border-radius: var(--d-r-modal); box-shadow: var(--d-sh-modal);
  overflow: hidden;
  max-height: min(86vh, 900px);
  display: flex; flex-direction: column;
}
.pick-body { overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.pick-head {
  padding: 12px 14px; border-bottom: 1px solid var(--d-hairline);
  display: flex; align-items: center; gap: 10px; flex: none;
  font: 700 14px var(--d-font); color: var(--d-ink);
}
.pick-head .text-muted { font: 11.5px var(--d-font); }
.pick-find {
  flex: 1; min-width: 0; max-width: 260px;
  border: 1px solid var(--d-border); border-radius: var(--d-r-sm);
  padding: 5px 9px; font: 12px var(--d-font); color: var(--d-ink);
  background: var(--d-surface);
}
.pick-find:focus { outline: none; border-color: var(--d-brand); }
.pick-x {
  flex: none; width: 26px; height: 26px; border: none; background: none;
  cursor: pointer; color: var(--d-faint); font-size: 13px;
  border-radius: var(--d-r-sm);
}
.pick-x:hover { background: var(--d-track); color: var(--d-ink); }
.pick-sect + .pick-sect { border-top: 1px solid var(--d-hairline); }
.pick-cap {
  padding: 11px 16px 0; font: 600 11px var(--d-font); color: var(--d-faint);
  text-transform: uppercase; letter-spacing: .04em;
}
.pick-grid {
  padding: 8px 16px 14px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 700px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
.pick-tile {
  width: 100%; border: 1px solid var(--d-border); border-radius: var(--d-r-menu);
  padding: 9px; cursor: pointer; background: var(--d-surface);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.pick-tile:hover { border-color: var(--d-brand); background: var(--d-tint-soft); }
.pick-label { font: 600 11.5px var(--d-font); color: var(--d-ink-2); }
.pick-thumb {
  height: 44px; border-radius: var(--d-r-sm); border: 1px solid var(--d-border);
  display: block;
}
/* Section tiles are generated per board (th-sec-{role}-{section}), so the
   thumb matches on the prefix rather than an enumerated list that would go
   stale the moment a workspace gains a section. */
.pick-thumb.th-issues, .pick-thumb.th-across,
.pick-thumb[class*="th-sec-"] {
  background: repeating-linear-gradient(#eef2f7 0 7px, #fff 7px 12px);
}
.pick-thumb.th-kpi { background: var(--d-tint-soft); box-shadow: inset 0 0 0 12px #fff; }
.pick-thumb.th-progress { background: var(--d-tint-soft); box-shadow: inset 0 22px 0 -18px #dbe6f3; }
.pick-thumb.th-tickets { background: repeating-linear-gradient(#eef2f7 0 8px, #fff 8px 14px); }
.pick-thumb.th-umbs_total, .pick-thumb.th-umbs_installed,
.pick-thumb.th-umbs_pending, .pick-thumb.th-issue_meters {
  background: var(--d-tint-soft); box-shadow: inset 0 0 0 12px #fff;
}

/* "Add any Tracking Overview total" — a long, project-specific list, so
   it scrolls inside the modal rather than pushing the footer off. */
/* No inner scroll — it lives in .pick-body's. The feed groups FLOW in
   columns rather than stacking: most have one or two numbers, and a
   full-width row each turned this into a mostly-empty scroll. */
.pick-totwrap {
  padding: 6px 16px 12px;
  columns: 3; column-gap: 18px;
}
@media (max-width: 700px) { .pick-totwrap { columns: 1; } }
.pick-totgrp { break-inside: avoid; margin-bottom: 10px; }
.pick-totcap {
  font: 600 10.5px var(--d-font); color: var(--d-faint);
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 0 3px;
}
.pick-tot {
  width: 100%; border: 1px solid transparent; border-radius: var(--d-r-sm);
  padding: 5px 7px; cursor: pointer; background: none; text-align: left;
  display: flex; align-items: baseline; gap: 8px;
  font: 12px var(--d-font); color: var(--d-ink-2);
}
.pick-tot:hover { border-color: var(--d-brand); background: var(--d-tint-soft); }
/* Narrow columns: a long count name must ellipsis rather than push the
   number out of its column. The full text stays in the title attribute. */
.pick-tot .nm {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-tot .vl {
  font-variant-numeric: tabular-nums; color: var(--d-faint); font-weight: 600;
}
.pick-foot {
  padding: 10px 16px; border-top: 1px solid var(--d-hairline);
  font: 11.5px var(--d-font); color: var(--d-faint);
}
.gb-dots {
  width: 22px; height: 24px; margin-bottom: 2px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--d-faint); font-size: 13px; border-radius: var(--d-r-sm);
}
.gb-dots:hover { background: var(--d-track); }
.gb-cardmenu { top: 28px; right: 0; width: 214px; }
/* A tab row in the » menu: the tab itself, plus its remove. */
.tabmenu-row { display: flex; align-items: stretch; gap: 2px; }
.tabmenu-row > .board-menu-item { flex: 1; min-width: 0; }
.tabmenu-x {
  flex: none; width: 24px; border: none; background: none; cursor: pointer;
  color: var(--d-faint); font-size: 11px; border-radius: var(--d-r-sm);
}
.tabmenu-x:hover { background: var(--d-tint-soft); color: var(--d-bad, #b42318); }
.board-hidden {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; font: 11.5px var(--d-font); color: var(--d-faint);
}

/* ---------- notes · files · bookmarks · recent ---------- */
.gb-notes { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.gb-notes textarea {
  width: 100%; border: 1px solid var(--d-border); border-radius: 6px;
  font: 12.5px/1.7 var(--d-font); color: var(--d-muted);
  padding: 6px 8px; resize: vertical; box-sizing: border-box;
}
.gb-notes button { align-self: flex-start; }
.gb-drop {
  margin: 4px; border: 1.5px dashed var(--d-line); border-radius: var(--d-r-card);
  background: #fbfcfe; min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; font: 11.5px var(--d-font); color: var(--d-faint); padding: 8px;
}
.gb-drop.over { border-color: var(--d-brand); background: var(--d-tint); }
.gb-drop-box {
  width: 22px; height: 22px; border: 1px solid var(--d-line);
  border-radius: var(--d-r-sm); background: var(--d-surface);
}
.linkish {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--d-link); font: inherit; text-decoration: underline;
}
.gb-file {
  display: flex; align-items: center; gap: 8px; padding: 6px;
  border-bottom: 1px solid var(--d-divider); font: 12px var(--d-font);
}
.gb-file .lb { color: var(--d-link); flex: 1; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-file .meta { font: 10.5px var(--d-font); color: var(--d-faint); }
.gb-x {
  border: none; background: none; cursor: pointer; color: var(--d-faint);
  font-size: 13px; padding: 0 3px; border-radius: 3px;
}
.gb-x:hover { color: var(--d-warn); background: var(--d-warn-tint); }
.gb-addbm { margin-top: 6px; }
.gb-addbm summary { font: 11.5px var(--d-font); color: var(--d-faint); cursor: pointer; padding: 4px 6px; }
.gb-recent {
  display: flex; gap: 9px; padding: 7px 6px; border-radius: 6px;
  align-items: flex-start; text-decoration: none;
}
.gb-recent:hover { background: var(--d-hover); }
.gb-recent .sw { width: 13px; height: 13px; border-radius: var(--d-r-swatch); background: #e6edf6; flex: none; margin-top: 2px; }
.gb-recent .lb { display: block; font: 12.5px var(--d-font); color: var(--d-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-recent .meta { display: block; font: 10.5px var(--d-font); color: var(--d-faint); }

/* ---------- admin dashboard on the board chrome ---------- */
.adm-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 14px;
}
.adm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 1200px) {
  .adm-kpis { grid-template-columns: repeat(2, 1fr); }
  .adm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .adm-kpis, .adm-grid { grid-template-columns: 1fr; }
}
.adm-card { display: flex; flex-direction: column; }
.adm-card .gb-strip { height: 27px; }
.adm-card .gb-tab { cursor: default; }
.adm-card .gb-card { flex: none; }
.adm-wide { margin-top: 14px; }
.adm-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 6px;
  border-bottom: 1px solid var(--d-divider); border-radius: 6px;
  text-decoration: none; color: inherit;
}
.adm-item:hover { background: var(--d-hover); }
.adm-item .sw {
  width: 13px; height: 13px; border-radius: var(--d-r-swatch);
  background: #dbe6f3; flex: none; margin-top: 2px;
}
.adm-item .txt { min-width: 0; flex: 1; }
.adm-item .lb { display: block; font: 600 12.5px var(--d-font); color: var(--d-link); }
.adm-item .ds { display: block; font: 11.5px/1.45 var(--d-font); color: var(--d-faint); }
.adm-item .pill {
  font: 600 10px var(--d-font); color: var(--d-muted); background: var(--d-track);
  border-radius: var(--d-r-pill); padding: 2px 7px; flex: none;
  font-variant-numeric: tabular-nums;
}
.adm-demos { display: flex; gap: 12px; margin-top: 11px; flex-wrap: wrap; }
.adm-demo {
  width: 240px; border: 1px solid var(--d-border);
  border-radius: var(--d-r-card); padding: 10px;
}
.adm-demo .nm { font: 600 12.5px var(--d-font); color: var(--d-ink); }
.adm-demo .no { font: 11px var(--d-mono); color: var(--d-warn); margin: 3px 0 9px; }

/* the board's "Viewing as" switcher */
.board-asseg a {
  padding: 4px 10px; border-radius: var(--d-r-sm);
  font: 11.5px var(--d-font); color: var(--d-subtle); text-decoration: none;
}
.board-asseg a.on {
  background: var(--d-surface); font-weight: 600; color: var(--d-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.board-asnote { font: 400 11.5px var(--d-font); color: var(--d-faint); }

/* ---------- Admin -> Backups block ---------- */
.bk-head {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 4px 4px 10px; border-bottom: 1px solid var(--d-divider);
}
.bk-head .spacer { flex: 1; }
.bk-stat { display: flex; flex-direction: column; gap: 1px; }
.bk-stat .lbl {
  font: 600 10px var(--d-font); letter-spacing: .05em;
  text-transform: uppercase; color: var(--d-faint);
}
.bk-stat .val { font: 700 15px var(--d-font); color: var(--d-ink); }
.bk-stat .sub { font: 11px var(--d-font); color: var(--d-subtle); }
.bk-shelf { margin-top: 6px; }
.bk-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 4px;
  border-bottom: 1px solid var(--d-divider); font: 11.5px var(--d-font);
}
.bk-row .nm { flex: 1; color: var(--d-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-row .sz { color: var(--d-muted); font-variant-numeric: tabular-nums; }
.bk-row .ag { color: var(--d-faint); font-variant-numeric: tabular-nums; min-width: 4rem; text-align: right; }
.bk-row.partial { background: var(--d-warn-tint); }
.bk-foot { font-size: 11px; padding: 8px 4px 2px; }

/* A page card: the whole block is one link to a page. These are what the
   rail's sections are made of now that its hover fly-out is gone. */
.gb-page {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 6px 4px 8px; text-decoration: none; color: inherit;
  border-radius: var(--d-r-sm);
}
.gb-page:hover { background: var(--d-tint-soft); }
.gb-page .nm { font: 600 13.5px var(--d-font); color: var(--d-ink); }
.gb-page .ds {
  font: 12px/1.45 var(--d-font); color: var(--d-subtle); flex: 1;
}
.gb-page .go { font: 600 11.5px var(--d-font); color: var(--d-brand); }
.pick-thumb[class*="th-page-"] {
  background: var(--d-tint-soft);
  box-shadow: inset 0 0 0 1px var(--d-border), inset 0 14px 0 -10px #dbe6f3;
}
.pick-thumb[class*="th-guide-"] {
  background: repeating-linear-gradient(#f4f7fb 0 6px, #fff 6px 11px);
}

/* Guide-for-this-page, in the top bar. It used to ride on the rail's FAQ
   item, which now opens the FAQ dashboard instead. */
.shell-help {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--d-border); background: var(--d-surface);
  color: var(--d-subtle); font: 600 12px var(--d-font); text-decoration: none;
  margin-right: 10px;
}
.shell-help:hover { border-color: var(--d-brand); color: var(--d-brand); }
.rail-foot .who.nm {
  font: 600 9.5px/1.25 var(--d-font); color: var(--d-ink-2);
  max-width: 60px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- chart styles: donut · bars · columns · stacked ----------
   All plain CSS. The donut is the original conic-gradient; the other
   three exist because a donut is the wrong shape for long labels, for a
   short block, or for a list with a long tail. */
.gb-bars { display: flex; flex-direction: column; gap: 5px; padding: 4px 2px; }
.gb-barrow {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font: 12px var(--d-font); color: var(--d-ink-2); border-radius: var(--d-r-sm);
  padding: 1px 3px;
}
.gb-barrow:hover { background: var(--d-tint-soft); }
.gb-barrow .lb {
  flex: 0 0 40%; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.gb-barrow .tr {
  flex: 1; height: 10px; background: #eef2f7; border-radius: var(--d-r-pill);
  overflow: hidden;
}
.gb-barrow .fl { display: block; height: 100%; border-radius: var(--d-r-pill); }
.gb-barrow .vl {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--d-ink);
}

.gb-cols {
  display: flex; align-items: flex-end; gap: 8px; height: 100%;
  padding: 6px 4px 2px; min-height: 90px;
}
.gb-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; height: 100%; text-decoration: none;
  font: 11px var(--d-font); color: var(--d-subtle);
}
.gb-col .vl {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--d-ink);
  font-size: 11.5px;
}
.gb-col .tr {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  background: #f4f7fb; border-radius: var(--d-r-sm); overflow: hidden;
}
.gb-col .fl { width: 100%; border-radius: var(--d-r-sm) var(--d-r-sm) 0 0; }
.gb-col .lb {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-stack { padding: 6px 4px; }
.gb-stack .tr {
  display: flex; height: 16px; border-radius: var(--d-r-pill);
  overflow: hidden; background: #eef2f7;
}
.gb-stack .seg { display: block; height: 100%; }
.gb-stack .seg:hover { filter: brightness(1.12); }
.gb-legend.row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.gb-legend.row .gb-leg { flex: none; }

/* Chart options, in the card rather than the ⋯ menu — only the body knows
   the live row labels the tick list is built from. */
.gb-gear {
  border: none; background: none; cursor: pointer; color: var(--d-faint);
  font-size: 12px; padding: 0 2px; border-radius: var(--d-r-sm); flex: none;
}
.gb-gear:hover { background: var(--d-track); color: var(--d-ink); }
.gb-opts {
  position: absolute; right: 8px; top: 30px; z-index: 5; width: 236px;
  background: var(--d-surface); border: 1px solid var(--d-border);
  border-radius: var(--d-r-menu); box-shadow: var(--d-sh-modal);
  padding: 9px 10px; font: 12px var(--d-font);
}
.gb-opts .row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gb-opts .row .cap { flex: 0 0 46px; color: var(--d-subtle); }
.gb-opts select { flex: 1; font: 12px var(--d-font); padding: 3px 5px; }
.gb-opts .row.chk { gap: 6px; }
.gb-opts .cap { color: var(--d-faint); font-size: 11px; margin: 6px 0 3px; }
.gb-opts .ticks { max-height: 132px; overflow-y: auto; margin-bottom: 8px; }
.gb-opts .tick {
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
  color: var(--d-ink-2);
}
.gb-opts .tick .lb {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-opts .tick .vl {
  font-variant-numeric: tabular-nums; color: var(--d-faint); font-size: 11px;
}

/* ---- the picker's three steps ---- */
.pick-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font: 11.5px var(--d-font); color: var(--d-faint);
}
.pick-crumb button {
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--d-brand); font: 11.5px var(--d-font);
}
.pick-crumb span { text-transform: capitalize; }
.pick-types {
  padding: 8px 16px 14px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 700px) { .pick-types { grid-template-columns: repeat(2, 1fr); } }
.pick-type {
  border: 1px solid var(--d-border); border-radius: var(--d-r-menu);
  padding: 10px 11px; cursor: pointer; background: var(--d-surface);
  display: flex; flex-direction: column; gap: 3px; text-align: left;
}
.pick-type:hover { border-color: var(--d-brand); background: var(--d-tint-soft); }
.pick-type .nm { font: 600 13px var(--d-font); color: var(--d-ink); }
.pick-type .ds { font: 11.5px/1.4 var(--d-font); color: var(--d-subtle); }

.pick-how { padding: 12px 16px 16px; }
.how-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.how-pick {
  border: 1px solid var(--d-border); border-radius: var(--d-r-pill);
  padding: 4px 11px; cursor: pointer; background: var(--d-surface);
  font: 12px var(--d-font); color: var(--d-ink-2);
}
.how-pick:hover { border-color: var(--d-brand); }
.how-pick.on {
  background: var(--d-brand); border-color: var(--d-brand); color: #fff;
  font-weight: 600;
}
.how-chk {
  display: flex; align-items: flex-start; gap: 7px; margin: 4px 0 8px;
  font: 12px/1.4 var(--d-font); color: var(--d-ink-2);
}
.how-note { font: 11.5px/1.5 var(--d-font); color: var(--d-faint); margin: 0 0 12px; }
/* Step-2 tiles are buttons in a grid now, not forms wrapping buttons. */
.pick-grid > .pick-tile { width: 100%; }

/* ---- blocks scale their type down instead of chopping words ----------
   Stephen, 2026-08-27 (image of "Act…" tabs and a KPI): "Block need to be
   able to be made smaller and font should scale down if made smaller so
   words don't get chopped to ...". Container queries, so each block
   responds to ITS OWN width — two blocks on one board can be different
   sizes and each stays readable. */
.gb-slot { container-type: inline-size; }

@container (max-width: 300px) {
  .gb-tab { font-size: 10.5px; padding: 4px 7px; }
  .gb-title { font-size: 11.5px; max-width: 70%; }
  /* A caption may wrap on a narrow block; a chopped word helps nobody. */
  .gb-cap, .gb-row .lb { white-space: normal; overflow-wrap: anywhere; }
}
@container (max-width: 200px) {
  .gb-tab { font-size: 9.5px; padding: 3px 5px; gap: 3px; }
  .gb-title { font-size: 10.5px; }
}

/* A warning that ends in "…" withholds exactly the part that says what is
   wrong. These rows wrap at ANY block width — Stephen, 2026-08-27: "words
   still cut off with ... instead of wrapping". */
.gb-row.gb-wrap { align-items: flex-start; }
.gb-row.gb-wrap .lb { white-space: normal; overflow-wrap: anywhere; }

/* ---- block colors, strong enough to SEE -------------------------------
   The tcard-* families are a 97%-lightness wash meant for big page cards;
   on a small dashboard block they read as "nothing changed" — Stephen,
   2026-08-27, after picking plum and (correctly) seeing no difference.
   Blocks get a deeper fill and a solid top bar in the family's own hue, so
   a colored block is unmistakably colored at any size. */
.gb-card.tcard-blue { background: oklch(0.945 0.045 250); border-color: oklch(0.82 0.09 250); border-top: 3px solid oklch(0.62 0.16 250); }
.gb-card.tcard-green { background: oklch(0.945 0.045 160); border-color: oklch(0.82 0.09 160); border-top: 3px solid oklch(0.62 0.16 160); }
.gb-card.tcard-amber { background: oklch(0.945 0.045 85); border-color: oklch(0.82 0.09 85); border-top: 3px solid oklch(0.62 0.16 85); }
.gb-card.tcard-red { background: oklch(0.945 0.045 20); border-color: oklch(0.82 0.09 20); border-top: 3px solid oklch(0.62 0.16 20); }
.gb-card.tcard-violet { background: oklch(0.945 0.045 300); border-color: oklch(0.82 0.09 300); border-top: 3px solid oklch(0.62 0.16 300); }
.gb-card.tcard-teal { background: oklch(0.945 0.045 200); border-color: oklch(0.82 0.09 200); border-top: 3px solid oklch(0.62 0.16 200); }
.gb-card.tcard-orange { background: oklch(0.945 0.045 55); border-color: oklch(0.82 0.09 55); border-top: 3px solid oklch(0.62 0.16 55); }
.gb-card.tcard-cyan { background: oklch(0.945 0.045 220); border-color: oklch(0.82 0.09 220); border-top: 3px solid oklch(0.62 0.16 220); }
.gb-card.tcard-pink { background: oklch(0.945 0.045 350); border-color: oklch(0.82 0.09 350); border-top: 3px solid oklch(0.62 0.16 350); }
.gb-card.tcard-lime { background: oklch(0.945 0.045 130); border-color: oklch(0.82 0.09 130); border-top: 3px solid oklch(0.62 0.16 130); }
.gb-card.tcard-indigo { background: oklch(0.945 0.045 275); border-color: oklch(0.82 0.09 275); border-top: 3px solid oklch(0.62 0.16 275); }
.gb-card.tcard-sky { background: oklch(0.945 0.045 235); border-color: oklch(0.82 0.09 235); border-top: 3px solid oklch(0.62 0.16 235); }
.gb-card.tcard-gold { background: oklch(0.945 0.045 95); border-color: oklch(0.82 0.09 95); border-top: 3px solid oklch(0.62 0.16 95); }
.gb-card.tcard-mint { background: oklch(0.945 0.045 175); border-color: oklch(0.82 0.09 175); border-top: 3px solid oklch(0.62 0.16 175); }
.gb-card.tcard-plum { background: oklch(0.945 0.045 325); border-color: oklch(0.82 0.09 325); border-top: 3px solid oklch(0.62 0.16 325); }
.gb-card.tcard-coral { background: oklch(0.945 0.045 30); border-color: oklch(0.82 0.09 30); border-top: 3px solid oklch(0.62 0.16 30); }
.gb-card.tcard-blue-deep { background: oklch(0.885 0.085 250); border-color: oklch(0.74 0.13 250); border-top: 3px solid oklch(0.53 0.17 250); }
.gb-card.tcard-green-deep { background: oklch(0.885 0.085 160); border-color: oklch(0.74 0.13 160); border-top: 3px solid oklch(0.53 0.17 160); }
.gb-card.tcard-amber-deep { background: oklch(0.885 0.085 85); border-color: oklch(0.74 0.13 85); border-top: 3px solid oklch(0.53 0.17 85); }
.gb-card.tcard-red-deep { background: oklch(0.885 0.085 20); border-color: oklch(0.74 0.13 20); border-top: 3px solid oklch(0.53 0.17 20); }
.gb-card.tcard-violet-deep { background: oklch(0.885 0.085 300); border-color: oklch(0.74 0.13 300); border-top: 3px solid oklch(0.53 0.17 300); }
.gb-card.tcard-teal-deep { background: oklch(0.885 0.085 200); border-color: oklch(0.74 0.13 200); border-top: 3px solid oklch(0.53 0.17 200); }
.gb-card.tcard-orange-deep { background: oklch(0.885 0.085 55); border-color: oklch(0.74 0.13 55); border-top: 3px solid oklch(0.53 0.17 55); }
.gb-card.tcard-pink-deep { background: oklch(0.885 0.085 350); border-color: oklch(0.74 0.13 350); border-top: 3px solid oklch(0.53 0.17 350); }
.gb-card.tcard-lime-deep { background: oklch(0.885 0.085 130); border-color: oklch(0.74 0.13 130); border-top: 3px solid oklch(0.53 0.17 130); }
.gb-card.tcard-slate { background: oklch(0.95 0.008 260); border-color: oklch(0.84 0.015 260); border-top: 3px solid oklch(0.55 0.02 260); }
.gb-card.tcard-slate-deep { background: oklch(0.9 0.012 260); border-color: oklch(0.76 0.02 260); border-top: 3px solid oklch(0.45 0.025 260); }

/* A block that will catch the dragged tab says so. */
.gb.tab-over .gb-card { outline: 2px dashed var(--d-link, #2563eb); outline-offset: -2px; }

/* ---- number tiles fit the block, whatever its size --------------------
   Stephen, 2026-08-28: "Blocks should be able to go smaller...there alot
   of dead space and the ones with text should wrap or scal font smaller to
   fit." The KPI figure scales with its OWN block's width (cqw — .gb-slot
   is the container), captions wrap at every size instead of clipping, and
   the wrap trims its padding so a 2-row tile holds a number, a caption and
   nothing wasted. These land late in the file, so they win over both the
   32px base and the older breakpoint steps. */
/* FULL SIZE until it literally cannot fit — wrap first, shrink last
   (Stephen, 2026-08-28: "no need to scale the font down when there is all
   of the empty space"). A three-digit figure at 32px is ~75px wide, so
   only a container too narrow for THAT gets a smaller face. */
.gb-kpi { font-size: 32px; }
.gb-cap { white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
          font-size: 12px; }
@container (max-width: 112px) { .gb-kpi { font-size: 25px; } }
@container (max-width: 84px)  { .gb-kpi { font-size: 19px; } .gb-cap { font-size: 10.5px; } }
.gb-kpi-wrap { flex-wrap: wrap; row-gap: 0; }
/* No max-height container query here: that needs container-type: size,
   and size containment on a flex child whose height comes from the card
   is a layout gamble the 2-row tile does not need — head + figure +
   caption already fit in ~92px. */

/* The progress tile stacks FOUR things — figure, caption, bar, tally — so
   it is the one place the 12px caption made the stack taller than the
   block and clipped the tally (Stephen, 2026-08-28, image of "70,793 of
   75,579" cut in half). Its captions take the compact face; the plain
   number tiles, with one caption and room to spare, keep full size. */
.gb-body.is-progress .gb-cap { font-size: 10px; }

/* ---- KB screenshots ---------------------------------------------------- */
.kb-shot { margin: 0.75rem 0 1rem; }
.kb-shot img {
  max-width: 100%; display: block;
  border: 1px solid var(--d-border); border-radius: 0.5rem;
  box-shadow: var(--d-sh-card);
}
.kb-shot figcaption {
  font-size: 0.75rem; color: var(--d-subtle);
  margin-top: 0.375rem; line-height: 1.4;
}
@media print { .kb-shot img { box-shadow: none; } }

/* ---- Data Sources Status tiles ----------------------------------------- */
.fs-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fs-tile {
  /* wide and short (Stephen 2026-09-02): sized so the stats line and a
     typical filename hold ONE line each; only the warning note wraps */
  flex: 1 1 19rem; min-width: 17rem; max-width: 26rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.5rem 0.625rem; border-radius: 0.5rem;
  border: 1px solid; text-decoration: none; color: inherit;
  font-size: 0.75rem; line-height: 1.35;
}
.fs-ok    { background: oklch(0.97 0.03 150); border-color: oklch(0.85 0.08 150); }
.fs-late  { background: oklch(0.97 0.03 25);  border-color: oklch(0.85 0.09 25); }
.fs-quiet { background: var(--d-bg-2, #f6f7f9); border-color: var(--d-border); }
.fs-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.fs-head strong { font-size: 0.8125rem; }
.fs-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.fs-ok .fs-dot    { background: oklch(0.62 0.17 150); }
.fs-late .fs-dot  { background: oklch(0.58 0.2 25); }
.fs-quiet .fs-dot { background: oklch(0.7 0 0); }
.fs-ok .fs-ago   { color: oklch(0.45 0.12 150); }
.fs-late .fs-ago { color: oklch(0.45 0.16 25); }
.fs-stats { font-size: 0.6875rem; color: var(--d-subtle);
            white-space: nowrap; }
.fs-stats b { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.03em;
              color: var(--d-subtle); margin-left: 0.25rem; }
.fs-stats b:first-child { margin-left: 0; }
.fs-file { font-size: 0.6875rem; color: var(--d-subtle);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-note { font-size: 0.6875rem; font-weight: 700;
           color: oklch(0.45 0.16 25); }

/* aging: over a day old with NO expectation set — noticeable, not alarming */
.fs-aging { background: oklch(0.97 0.04 75); border-color: oklch(0.85 0.1 75); }
.fs-aging .fs-dot { background: oklch(0.68 0.15 70); }
.fs-aging .fs-ago { color: oklch(0.5 0.13 70); }

/* ---- Feed Expectations: readable rows, site-shaped ---------------------- */
.fe-grid td, .fe-grid th { padding: 0.375rem 0.625rem; }
.fe-grid tbody tr:nth-child(even) { background: var(--d-bg-2, #f6f7f9); }
.fe-grid tbody tr:hover { background: oklch(0.96 0.02 250); }
.fe-grid thead th { position: sticky; top: 0; background: var(--d-bg, #fff);
                    z-index: 1; }
.fe-grid input[type="number"] { font-size: 0.8125rem; }

/* feed_status All / Problems chips */
.fs-modes { margin-bottom: 0.375rem; display: flex; gap: 0.25rem; }
.fs-mode { font-size: 0.6875rem; padding: 0.1rem 0.55rem; cursor: pointer;
           border: 1px solid var(--d-border); border-radius: 999px;
           background: var(--d-bg, #fff); color: var(--d-subtle); }
.fs-mode.on { background: oklch(0.45 0.1 250); color: #fff;
              border-color: oklch(0.45 0.1 250); }

/* ---- Heading blocks: bare typed section titles -------------------------- */
.gb-heading-card { background: transparent !important; border: none !important;
                   box-shadow: none !important; }
.gb-headline { display: flex; align-items: center; height: 100%;
               font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
               overflow: hidden; }
.gh-s  { font-size: 0.9375rem; }
.gh-m  { font-size: 1.25rem; }
.gh-l  { font-size: 1.625rem; }
.gh-xl { font-size: 2.125rem; }
.ht-blue { color: oklch(0.48 0.15 250); }
.ht-green { color: oklch(0.48 0.14 160); }
.ht-amber { color: oklch(0.48 0.13 85); }
.ht-red { color: oklch(0.48 0.16 20); }
.ht-violet { color: oklch(0.48 0.15 300); }
.ht-slate { color: oklch(0.48 0.03 260); }
.ht-teal { color: oklch(0.48 0.12 200); }
.ht-orange { color: oklch(0.48 0.15 60); }
.ht-cyan { color: oklch(0.48 0.12 220); }
.ht-pink { color: oklch(0.48 0.15 350); }
.ht-lime { color: oklch(0.48 0.14 130); }
.ht-indigo { color: oklch(0.48 0.15 275); }
.ht-sky { color: oklch(0.48 0.13 235); }
.ht-gold { color: oklch(0.48 0.12 90); }
.ht-mint { color: oklch(0.48 0.11 165); }
.ht-plum { color: oklch(0.48 0.12 325); }
.ht-coral { color: oklch(0.48 0.14 35); }

/* A heading block's card header would eat the single row and leave the
   text a 5px strip — hide it in view mode; edit mode needs the grip. */
.gb-heading-card .gb-head { display: none; }
.gb-grid.editing .gb-heading-card .gb-head { display: flex; }
.gb-heading-card .gb-body { padding: 0 0.25rem; }

/* the Problems block's all-clear: good news said plainly, in green */
.fs-clear { color: oklch(0.45 0.12 150); font-weight: 600;
            font-size: 0.8125rem; margin: 0.25rem 0; }

/* Find Issues line 2: the block's real FROM/JOIN/WHERE, small and honest */
.ws-sql { font-size: 0.6875rem; line-height: 1.45; color: var(--d-subtle);
          background: var(--d-bg-2, #f6f7f9); border: 1px solid var(--d-border);
          border-radius: 0.375rem; padding: 0.5rem 0.625rem;
          margin: 0.375rem 0 0; max-height: 11rem; overflow: auto;
          white-space: pre; }

/* ---- Stacked boards: one readable column below tablet width ------------- */
.gb-grid.stacked { display: flex; flex-direction: column; gap: 12px;
                   height: auto !important; }
.gb-grid.stacked .gb { position: static !important; width: 100% !important; }
@media (max-width: 720px) {
  /* Arranging is desk work; phones read the board. */
  .board-bar .board-btn, .board-bar form, .board-bar .board-menu-host,
  .board-bar [data-edit-only] { display: none !important; }
  .board-bar { flex-wrap: wrap; }
}