/* The original BuildChecker Web stylesheet (tool_build_checker_web 06f108f,
   src/web/public/styles/dashboard.css), followed by Dashboard's additions. One
   file, no build step; Server owns every verdict and this sheet only places it. */
.table-wrap { overflow-x: auto; min-width: 0; }
.table-wrap:focus-visible, .automation-table-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.table-wrap > table:not(.grid) { width: 100%; min-width: 1000px; }
.monitor-ref { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-jobs { max-width: 34rem; margin-top: 4px; overflow-wrap: anywhere; }
.relay-targets { display: grid; gap: 20px; margin: 24px 0; }
.relay-target { border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
.relay-facts { margin: 0; }
.relay-facts > div { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.5fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.relay-facts dt { color: var(--fg-label); }
.relay-facts dd { margin: 0; overflow-wrap: anywhere; }

:root, .theme-preview {
    /* Base palette shared by the page and isolated appearance-preview swatches. */
    --console-bar: 44px;
    --bg: #fafafa; --bg-panel: #fff; --bg-row-alt: #fafbff; --bg-header: #f4f4f4;
    --fg: #222; --fg-muted: #888; --fg-label: #555;
    --border: #ddd; --border-soft: #eee; --link: #2563eb;
    --status-ok: #16a34a; --status-error: #dc2626; --status-warn: #a16207;
    --accent-bg: #2563eb; --accent-fg: #fff; --overlay: rgba(0,0,0,.45);
    --alert-wash: rgba(220,38,38,.08); --warn-wash: rgba(161,98,7,.10);
    --pill-ready-bg: #2a7; --pill-ready-fg: #fff;
    --pill-blocked-bg: #c60; --pill-blocked-fg: #fff;
    --pill-alert-bg: #b3261e; --pill-alert-fg: #fff;
    --strong-error-bg: #dc2626;
    --pill-progress-bg: #999; --pill-progress-fg: #fff;
    --pill-live-fg: #fff5f5;
    --category-will-bg: #dbeafe; --category-will-fg: #1e40af;
    --category-approved-bg: #cffafe; --category-approved-fg: #155e63;
    --category-auto-bg: #dcfce7; --category-auto-fg: #166534;
    --category-intervention-bg: #fee2e2; --category-intervention-fg: #991b1b;
    --category-merged-bg: #e2e8f0; --category-merged-fg: #334155;
    --category-none-bg: #ececec; --category-none-fg: #555;
    --highlight-done-bg: #fef3c7; --highlight-done-fg: #92400e;
    --highlight-testok-bg: #dbeafe; --highlight-testok-fg: #1e40af;
    --highlight-wip-bg: #ececec; --highlight-wip-fg: #555;
    --highlight-unpaired-bg: #f3f4f6; --highlight-unpaired-fg: #888;
    --badge-error-bg: #4c1d1d; --badge-error-fg: #fecaca;
    --badge-warn-bg: #422006; --badge-warn-fg: #facc15;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]), :root[data-theme="original"], .theme-preview[data-theme="original"] {
        --bg: #0e0f12; --bg-panel: #16181d; --bg-row-alt: #1a1d23; --bg-header: #20232a;
        --fg: #e7e9ec; --fg-muted: #8e9097; --fg-label: #b0b2b8;
        --border: #2a2d34; --border-soft: #232730; --link: #7aa2ff;
        --status-ok: #4ade80; --status-error: #f87171; --status-warn: #facc15;
        --accent-bg: #7aa2ff;
        --strong-error-bg: #f87171;
        --category-will-bg: #1e3a5f; --category-will-fg: #7fb3ff;
        --category-approved-bg: #1e4d4d; --category-approved-fg: #7fe0e0;
        --category-auto-bg: #1e4d2b; --category-auto-fg: #7fe09a;
        --category-intervention-bg: #5f1e1e; --category-intervention-fg: #ff9a9a;
        --category-merged-bg: #33414d; --category-merged-fg: #bbccdd;
        --category-none-bg: #3a3a3a; --category-none-fg: #bbb;
        --highlight-done-bg: #4a2a00; --highlight-done-fg: #ffc06a;
        --highlight-testok-bg: #1e3a5f; --highlight-testok-fg: #7fb3ff;
        --highlight-wip-bg: #3a3a3a; --highlight-wip-fg: #bbb;
        --highlight-unpaired-bg: #2e2e2e; --highlight-unpaired-fg: #888;
        color-scheme: dark;
    }
}
/* Darcula is taken from the installed Xcode theme: editor #2b2b2b, current line
   #323232, text #a9b7c6, selection #214284, plus its blue/green/amber/red accents.
   UI surfaces are a small tonal expansion of those source-editor colours. */
:root[data-theme="darcula"], .theme-preview[data-theme="darcula"] {
    --bg: #2b2b2b; --bg-panel: #313335; --bg-row-alt: #323232; --bg-header: #3c3f41;
    --fg: #a9b7c6; --fg-muted: #a5aaaf; --fg-label: #bcbec4;
    --border: #4b4e50; --border-soft: #414249; --link: #79a9cf;
    --status-ok: #a5c261; --status-error: #ff6b6b; --status-warn: #efb759;
    --accent-bg: #356d99; --accent-fg: #fff; --overlay: rgba(0,0,0,.58);
    --alert-wash: rgba(247,74,74,.12); --warn-wash: rgba(239,183,89,.12);
    --pill-ready-bg: #3f7139; --pill-ready-fg: #fff;
    --pill-blocked-bg: #93520f; --pill-blocked-fg: #fff;
    --pill-alert-bg: #a62f2f; --pill-alert-fg: #fff;
    --strong-error-bg: #a62f2f;
    --pill-progress-bg: #5c6064; --pill-progress-fg: #fff;
    --pill-live-fg: #fff;
    --category-will-bg: #214284; --category-will-fg: #d4e2f4;
    --category-approved-bg: #294b50; --category-approved-fg: #a5d7d8;
    --category-auto-bg: #354a32; --category-auto-fg: #b9d58a;
    --category-intervention-bg: #5a2929; --category-intervention-fg: #ffaaaa;
    --category-merged-bg: #3c3f41; --category-merged-fg: #c5c9ce;
    --category-none-bg: #323232; --category-none-fg: #a9b7c6;
    --highlight-done-bg: #4b3928; --highlight-done-fg: #efb759;
    --highlight-testok-bg: #214284; --highlight-testok-fg: #d4e2f4;
    --highlight-wip-bg: #3c3f41; --highlight-wip-fg: #bcbec4;
    --highlight-unpaired-bg: #313335; --highlight-unpaired-fg: #a5aaaf;
    --badge-error-bg: #5a2929; --badge-error-fg: #ffaaaa;
    --badge-warn-bg: #4b3928; --badge-warn-fg: #efb759;
    color-scheme: dark;
}
/* A neutral fixed-light option for bright rooms. It is intentionally less blue-white
   than Original, while keeping the same semantic hierarchy and alarm meanings. */
:root[data-theme="light"], .theme-preview[data-theme="light"] {
    --bg: #f5f3ed; --bg-panel: #fffefa; --bg-row-alt: #f8f6f0; --bg-header: #ece9e1;
    --fg: #292d32; --fg-muted: #62686e; --fg-label: #4b5157;
    --border: #c9c6bd; --border-soft: #e2ded4; --link: #1756a9;
    --status-ok: #237a3b; --status-error: #b42318; --status-warn: #875700;
    --accent-bg: #1756a9; --accent-fg: #fff; --overlay: rgba(31,35,40,.40);
    --alert-wash: rgba(180,35,24,.08); --warn-wash: rgba(135,87,0,.10);
    --pill-ready-bg: #237a3b; --pill-ready-fg: #fff;
    --pill-blocked-bg: #9a5b00; --pill-blocked-fg: #fff;
    --pill-alert-bg: #b42318; --pill-alert-fg: #fff;
    --strong-error-bg: #b42318;
    --pill-progress-bg: #62676d; --pill-progress-fg: #fff;
    --pill-live-fg: #fff;
    --category-will-bg: #dbeafe; --category-will-fg: #163d85;
    --category-approved-bg: #d6f3f3; --category-approved-fg: #155e63;
    --category-auto-bg: #dcf3df; --category-auto-fg: #1d6430;
    --category-intervention-bg: #fbe1df; --category-intervention-fg: #8e1b14;
    --category-merged-bg: #e2e7ec; --category-merged-fg: #344453;
    --category-none-bg: #e7e5df; --category-none-fg: #4b5157;
    --highlight-done-bg: #faedc5; --highlight-done-fg: #7a4700;
    --highlight-testok-bg: #dbeafe; --highlight-testok-fg: #163d85;
    --highlight-wip-bg: #e7e5df; --highlight-wip-fg: #4b5157;
    --highlight-unpaired-bg: #efede7; --highlight-unpaired-fg: #62686e;
    --badge-error-bg: #fbe1df; --badge-error-fg: #8e1b14;
    --badge-warn-bg: #faedc5; --badge-warn-fg: #7a4700;
    color-scheme: light;
}
/* Xcode Low Key uses quiet olive, navy and plum syntax colours. Its white editor,
   pale sage current line and grey-green selection become visibly green UI surfaces. */
:root[data-theme="low-key"], .theme-preview[data-theme="low-key"] {
    --bg: #eef3ed; --bg-panel: #fbfcfa; --bg-row-alt: #f3f5f4; --bg-header: #dfe8df;
    --fg: #141814; --fg-muted: #566054; --fg-label: #353d34;
    --border: #bcc8bb; --border-soft: #d4ded3; --link: #303696;
    --status-ok: #2f7134; --status-error: #9b254b; --status-warn: #765500;
    --accent-bg: #3d467d; --accent-fg: #fff; --overlay: rgba(30,42,29,.40);
    --alert-wash: rgba(155,37,75,.08); --warn-wash: rgba(118,85,0,.10);
    --pill-ready-bg: #2f7134; --pill-ready-fg: #fff;
    --pill-blocked-bg: #835d00; --pill-blocked-fg: #fff;
    --pill-alert-bg: #9b254b; --pill-alert-fg: #fff;
    --strong-error-bg: #9b254b;
    --pill-progress-bg: #566054; --pill-progress-fg: #fff;
    --pill-live-fg: #fff;
    --category-will-bg: #dfe4f6; --category-will-fg: #262c6a;
    --category-approved-bg: #d6ece5; --category-approved-fg: #235e55;
    --category-auto-bg: #dcebd7; --category-auto-fg: #315f2c;
    --category-intervention-bg: #f1dce6; --category-intervention-fg: #762544;
    --category-merged-bg: #e1e6df; --category-merged-fg: #3d483b;
    --category-none-bg: #e8ece7; --category-none-fg: #4a5448;
    --highlight-done-bg: #eee5c7; --highlight-done-fg: #674b00;
    --highlight-testok-bg: #dfe4f6; --highlight-testok-fg: #262c6a;
    --highlight-wip-bg: #e1e6df; --highlight-wip-fg: #3d483b;
    --highlight-unpaired-bg: #e8ece7; --highlight-unpaired-fg: #566054;
    --badge-error-bg: #f1dce6; --badge-error-fg: #762544;
    --badge-warn-bg: #eee5c7; --badge-warn-fg: #674b00;
    color-scheme: light;
}
/* Xcode Printing is intentionally monochrome. The editor's white-to-grey range is
   widened across dashboard surfaces, while labels and icons keep status legible. */
:root[data-theme="printing"], .theme-preview[data-theme="printing"] {
    --bg: #e9e9e9; --bg-panel: #fff; --bg-row-alt: #f4f4f4; --bg-header: #dedede;
    --fg: #111; --fg-muted: #565656; --fg-label: #303030;
    --border: #b8b8b8; --border-soft: #d1d1d1; --link: #353535;
    --status-ok: #3f3f3f; --status-error: #111; --status-warn: #555;
    --accent-bg: #333; --accent-fg: #fff; --overlay: rgba(0,0,0,.42);
    --alert-wash: rgba(0,0,0,.07); --warn-wash: rgba(0,0,0,.05);
    --pill-ready-bg: #3f3f3f; --pill-ready-fg: #fff;
    --pill-blocked-bg: #555; --pill-blocked-fg: #fff;
    --pill-alert-bg: #111; --pill-alert-fg: #fff;
    --strong-error-bg: #111;
    --pill-progress-bg: #666; --pill-progress-fg: #fff;
    --pill-live-fg: #fff;
    --category-will-bg: #dedede; --category-will-fg: #222;
    --category-approved-bg: #e7e7e7; --category-approved-fg: #333;
    --category-auto-bg: #d8d8d8; --category-auto-fg: #222;
    --category-intervention-bg: #ccc; --category-intervention-fg: #111;
    --category-merged-bg: #e1e1e1; --category-merged-fg: #333;
    --category-none-bg: #ededed; --category-none-fg: #444;
    --highlight-done-bg: #d3d3d3; --highlight-done-fg: #222;
    --highlight-testok-bg: #dedede; --highlight-testok-fg: #222;
    --highlight-wip-bg: #e1e1e1; --highlight-wip-fg: #333;
    --highlight-unpaired-bg: #ededed; --highlight-unpaired-fg: #565656;
    --badge-error-bg: #ccc; --badge-error-fg: #111;
    --badge-warn-bg: #d3d3d3; --badge-warn-fg: #222;
    color-scheme: light;
}
/* Xcode Spartan pairs a cool white editor with crimson comments and hot-magenta
   keywords. A faint lavender cast keeps it separate from the neutral Light theme. */
:root[data-theme="spartan"], .theme-preview[data-theme="spartan"] {
    --bg: #f4f2f6; --bg-panel: #fff; --bg-row-alt: #ededef; --bg-header: #e5e0e9;
    --fg: #111; --fg-muted: #5f5963; --fg-label: #302b33;
    --border: #c9c1ce; --border-soft: #ded8e2; --link: #4b2bc4;
    --status-ok: #2d7133; --status-error: #a00000; --status-warn: #805300;
    --accent-bg: #a90e5e; --accent-fg: #fff; --overlay: rgba(37,27,42,.42);
    --alert-wash: rgba(160,0,0,.08); --warn-wash: rgba(128,83,0,.10);
    --pill-ready-bg: #2d7133; --pill-ready-fg: #fff;
    --pill-blocked-bg: #8f5700; --pill-blocked-fg: #fff;
    --pill-alert-bg: #a00000; --pill-alert-fg: #fff;
    --strong-error-bg: #a00000;
    --pill-progress-bg: #5f5963; --pill-progress-fg: #fff;
    --pill-live-fg: #fff;
    --category-will-bg: #e5def7; --category-will-fg: #44258d;
    --category-approved-bg: #d9eced; --category-approved-fg: #205c60;
    --category-auto-bg: #dcebd7; --category-auto-fg: #315f2c;
    --category-intervention-bg: #f4dce8; --category-intervention-fg: #851149;
    --category-merged-bg: #e6e1e9; --category-merged-fg: #493f4e;
    --category-none-bg: #ededef; --category-none-fg: #554f58;
    --highlight-done-bg: #eee2c7; --highlight-done-fg: #694700;
    --highlight-testok-bg: #e5def7; --highlight-testok-fg: #44258d;
    --highlight-wip-bg: #e6e1e9; --highlight-wip-fg: #493f4e;
    --highlight-unpaired-bg: #f0edf2; --highlight-unpaired-fg: #5f5963;
    --badge-error-bg: #f1d6d6; --badge-error-fg: #820000;
    --badge-warn-bg: #eee2c7; --badge-warn-fg: #694700;
    color-scheme: light;
}
/* Xcode Sunset: the built-in theme's #fffce5 editor, golden current line and
   navy/red accents. Dashboard neutrals stay warm so the palette does not collapse
   back into the cooler Light theme. */
:root[data-theme="sunset"], .theme-preview[data-theme="sunset"] {
    --bg: #fffce5; --bg-panel: #fffef5; --bg-row-alt: #fdf5d3; --bg-header: #f7e9bb;
    --fg: #000; --fg-muted: #5d594e; --fg-label: #343126;
    --border: #d3c99f; --border-soft: #e8dfc3; --link: #4349ac;
    --status-ok: #2f7134; --status-error: #a91f17; --status-warn: #805300;
    --accent-bg: #4349ac; --accent-fg: #fff; --overlay: rgba(42,37,20,.42);
    --alert-wash: rgba(169,31,23,.09); --warn-wash: rgba(128,83,0,.11);
    --pill-ready-bg: #2f7134; --pill-ready-fg: #fff;
    --pill-blocked-bg: #8f5700; --pill-blocked-fg: #fff;
    --pill-alert-bg: #a91f17; --pill-alert-fg: #fff;
    --strong-error-bg: #a91f17;
    --pill-progress-bg: #5d594e; --pill-progress-fg: #fff;
    --pill-live-fg: #fff;
    --category-will-bg: #e2e5fa; --category-will-fg: #294277;
    --category-approved-bg: #d8efea; --category-approved-fg: #1b5f59;
    --category-auto-bg: #deefcf; --category-auto-fg: #315f2c;
    --category-intervention-bg: #f8d8cd; --category-intervention-fg: #8b1e14;
    --category-merged-bg: #e9e4cd; --category-merged-fg: #4c493e;
    --category-none-bg: #eee8d0; --category-none-fg: #575348;
    --highlight-done-bg: #f9df9c; --highlight-done-fg: #6f4700;
    --highlight-testok-bg: #e2e5fa; --highlight-testok-fg: #294277;
    --highlight-wip-bg: #eee8d0; --highlight-wip-fg: #575348;
    --highlight-unpaired-bg: #f4eed8; --highlight-unpaired-fg: #5d594e;
    --badge-error-bg: #f8d8cd; --badge-error-fg: #8b1e14;
    --badge-warn-bg: #f9df9c; --badge-warn-fg: #6f4700;
    color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; padding-bottom: var(--console-bar); background: var(--bg); color: var(--fg);
       font-family: var(--font); font-size: 14px; line-height: 1.4; }
a { color: var(--link); }
.muted { color: var(--fg-muted); }
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.page { flex: 1 1 auto; min-width: 0; padding: 16px; }

/* Viewport-height navigation; the module list scrolls independently of the page. */
.rail { flex: 0 0 240px; position: sticky; top: 0; height: calc(100vh - var(--console-bar));
        display: flex; flex-direction: column; padding: 16px 10px;
        background: var(--bg-panel); border-right: 1px solid var(--border); }
.module-item { display: flex; gap: 10px; align-items: flex-start; text-align: left;
               padding: 10px 12px; border: 1px solid transparent; border-radius: 8px;
               background: transparent; color: var(--fg); cursor: pointer; font: inherit; }
.module-item:hover { background: var(--bg-row-alt); }
.module-item--active { background: var(--bg-row-alt); border-color: var(--border); }
.module-item__icon { font-size: 18px; line-height: 1.2; }
.module-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.module-item__title { font-weight: 600; font-size: 13px; }
.module-item__meta { font-size: 11px; color: var(--fg-muted); }
.module-item__err { color: var(--status-error); }
/* The selected module's boards, indented under it: a board is one scan by that module,
   which is a level down, not a second strip of tabs beside its sections. */
.board-list, .platform-list, .monitor-project-list { display: flex; flex-direction: column; gap: 2px;
                              margin: 2px 0 6px 30px; }
.board-item, .platform-item, .monitor-project-item, .automation-item { text-align: left; padding: 4px 10px; border: 0;
              border-left: 2px solid var(--border);
              border-radius: 0 4px 4px 0; background: transparent; color: var(--fg-muted);
              cursor: pointer; font: inherit; font-size: 12px; }
.board-item:hover, .platform-item:hover, .monitor-project-item:hover, .automation-item:hover {
                      background: var(--bg-row-alt); color: var(--fg); }
.board-item--active, .platform-item--active, .monitor-project-item--active, .automation-item--active {
                      color: var(--fg); font-weight: 600; border-left-color: var(--link);
                      background: var(--bg-row-alt); }
.monitor-project-item { display: flex; align-items: center; gap: 6px; }
.monitor-project-item--has-active { color: var(--fg); }
.monitor-project-item__activity { display: inline-flex; align-items: center; gap: 4px;
                                  margin-left: auto; color: var(--status-warn);
                                  font-size: 10px; font-weight: 600; }
.monitor-project-item__activity .dot { width: 6px; height: 6px; }

/* Whether what is on screen is what the daemon has. An ssh tunnel does not refuse
   requests, it stops delivering them — and a page that stopped being updated looks
   exactly like a daemon with nothing to report. This says which one it is. */
.conn { display: flex; align-items: baseline; gap: 6px; font-size: 11px;
        color: var(--fg-muted); padding-bottom: 10px; }
.conn__age { font-variant-numeric: tabular-nums; }
/* Let a long module list shrink and scroll inside the navigation rail. */
.module-list { flex: 1 1 auto; min-height: 0; overflow-y: auto;
               display: flex; flex-direction: column; gap: 4px; }

/* panels + tables */
.panel { background: var(--bg-panel); border: 1px solid var(--border);
         border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.panel__header { display: flex; justify-content: space-between; align-items: center;
                 gap: 12px; padding: 10px 16px; background: var(--bg-header);
                 border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.panel__body { padding: 10px 16px; }

/* Automations is a daemon-owned projection, not a scheduled module. Its rows use the
   same palette as the rest of the dashboard, with severity supplied by the response. */
.automation-hero { border-left: 4px solid var(--border); }
.automation-hero.automation--success { border-left-color: var(--status-ok); }
.automation-hero.automation--warning { border-left-color: var(--status-warn); }
.automation-hero.automation--danger { border-left-color: var(--status-error); }
.automation-definition { min-width: 0; border-bottom: 1px solid var(--border-soft); }
.automation-definition:last-child { border-bottom: 0; }
.automation-definition__summary { position: relative; display: block;
                                  padding: 12px 16px 12px 34px; cursor: pointer; }
.automation-definition__summary::-webkit-details-marker { display: none; }
.automation-definition__summary::before { content: '▸'; position: absolute; left: 16px;
                                          color: var(--fg-muted); }
.automation-definition[open] > summary::before { content: '▾'; }
.automation-definition__summary:hover { background: var(--bg-row-alt); }
.automation-definition__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.automation-definition__title { font-weight: 700; }
.automation-rule { display: grid; grid-template-columns: minmax(0, 1.2fr) 24px minmax(0, 1fr);
                   align-items: baseline; gap: 8px; margin-top: 6px; font-size: 13px; }
.automation-label { color: var(--fg-muted); font-size: 10px; text-transform: uppercase;
                    margin-right: 8px; }
.automation-arrow { color: var(--fg-muted); text-align: center; }
.automation-error { display: block; margin-top: 6px; color: var(--status-error); font-size: 12px; }
.automation-definition__body { padding: 0 16px 12px 34px; }
.automation-status { display: inline-block; padding: 1px 7px; border-radius: 10px;
                     background: var(--bg-header); color: var(--fg-label);
                     font-size: 10px; font-weight: 700; white-space: nowrap; }
.automation-status.automation--success { background: var(--pill-ready-bg);
                                        color: var(--pill-ready-fg); }
.automation-status.automation--warning { background: var(--pill-blocked-bg);
                                        color: var(--pill-blocked-fg); }
.automation-status.automation--danger { background: var(--pill-alert-bg);
                                       color: var(--pill-alert-fg); }
.automation-status.automation--info { color: var(--link); }
.automation-count { color: var(--fg-muted); font-size: 10px; }
.automation-count.automation--warning { color: var(--status-warn); font-weight: 700; }
.automation-facts { margin: 0; font-size: 12px; }
.automation-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr);
                          gap: 8px; padding: 3px 0; }
.automation-facts dt { color: var(--fg-muted); }
.automation-facts dd { margin: 0; }
.automation-scopes { list-style: none; margin: 10px 0 0; padding: 8px 0 0;
                     border-top: 1px solid var(--border-soft); }
.automation-scope { display: grid; grid-template-columns: minmax(90px, auto) max-content 1fr;
                    gap: 8px; align-items: baseline; padding: 3px 0; font-size: 11px; }
.automation-scope__name { font-weight: 600; }
.automation-scope__detail { color: var(--fg-muted); }
.automation-table-scroll { overflow-x: auto; }
table.automation-table { min-width: 1000px; font-size: 12px; }
.automation-table td { overflow-wrap: anywhere; }
.automation-table .automation--danger td:first-child { box-shadow: inset 3px 0 var(--status-error); }
.automation-table .automation--warning td:first-child { box-shadow: inset 3px 0 var(--status-warn); }
.automation-subject { font-weight: 700; }
.automation-context { color: var(--fg-muted); font-size: 11px; font-weight: 400; }
.automation-diagnostics { margin-top: 4px; font-size: 12px; }
.automation-diagnostics > summary { cursor: pointer; color: var(--fg-muted); font-size: 11px; }
.automation-diagnostics[open] > summary { margin-bottom: 5px; }
.automation-summary { margin: 6px 0 0; color: var(--fg-muted); font-size: 12px; }
.automation-data { margin-top: 8px; }
.automation-data .automation-strip { margin-top: 0; }
.automation-empty { padding: 6px 0; font-size: 12px; }
.automation-strip { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.automation-strip > div { display: flex; gap: 6px; padding: 0; }
.automation-placeholder { margin-bottom: 10px; padding: 8px 10px; border-left: 3px solid var(--border);
                          background: var(--bg-row-alt); font-size: 12px; }
.automation-placeholder .automation-context { display: block; margin-top: 3px; }
.automation-scope-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                           margin-bottom: 8px; font-size: 12px; }
.automation-counts { display: flex; gap: 10px; margin-bottom: 6px; }
/* History: one labelled filter bar, then outcomes under day headings. */
.history-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px;
               border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.history-filter { display: flex; align-items: center; gap: 6px; color: var(--fg-muted); }
.history-filter select { color: var(--fg); background: var(--bg-panel); border: 1px solid var(--border);
                         border-radius: 5px; padding: 3px 6px; font: inherit; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.segmented > button { border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--fg-muted);
                      font: inherit; padding: 3px 10px; cursor: pointer; }
.segmented > button:last-child { border-right: 0; }
.segmented > button[aria-pressed="true"] { background: var(--bg-row-alt); color: var(--fg); font-weight: 600; }
.history-count { margin-left: auto; color: var(--fg-muted); }
.history-clear { padding: 2px 8px; font-size: 12px; }
table.grid.history-table { min-width: 0; font-size: 12px; }
table.grid.history-table td { overflow-wrap: anywhere; }
table.grid.history-table tr:nth-child(even) td { background: transparent; }
table.grid.history-table .history-day th { padding: 10px 10px 4px; background: transparent; border-bottom: 1px solid var(--border);
                                 color: var(--fg); font-size: 12px; text-transform: none; }
table.grid.history-table td.history-time { width: 1%; white-space: nowrap; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
table.grid.history-table .automation--danger td:first-child { box-shadow: inset 3px 0 var(--status-error); }
table.grid.history-table .automation--warning td:first-child { box-shadow: inset 3px 0 var(--status-warn); }
.history-manual { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--bg-header);
                  color: var(--fg-muted); font-size: 10px; font-weight: 600; }
@media (max-width: 640px) {
    .history-bar { gap: 8px; padding: 10px 12px; }
    .history-filter { flex: 1 1 140px; min-width: 0; }
    .history-filter select { flex: 1; min-width: 0; }
    .segmented { flex: 1 1 100%; }
    .segmented > button { flex: 1; padding: 6px 0; }
    .history-count { margin-left: 0; }
    table.grid.history-table, table.grid.history-table tbody { display: block; width: 100%; }
    table.grid.history-table thead { display: none; }
    table.grid.history-table tbody > tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 12px;
                                border-bottom: 1px solid var(--border-soft); }
    table.grid.history-table tbody > tr.history-day { display: block; padding: 10px 12px 4px; }
    table.grid.history-table td { display: block; padding: 0; border: 0; background: transparent !important; }
    table.grid.history-table .history-day th { display: block; padding: 0; border: 0; }
    table.grid.history-table td.history-time { width: auto; }
    table.grid.history-table td:nth-child(n+3) { grid-column: 1 / -1; }
}
.automation-overview summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
@media (max-width: 820px) {
    .automation-rule { grid-template-columns: 1fr; gap: 3px; }
    .automation-arrow { display: none; }
    .automation-definition__body { padding-left: 16px; }
    .automation-scope { grid-template-columns: minmax(90px, auto) max-content; }
    .automation-scope__detail { grid-column: 1 / -1; }
}
/* Preserve readable columns on every screen; only the table scrolls on a laptop. */
table.grid { width: 100%; min-width: 1000px; border-collapse: collapse; font-size: 13px; }
table.grid--wide { min-width: 1500px; }
table.grid th { text-align: left; padding: 6px 10px; background: var(--bg-header);
                border-bottom: 1px solid var(--border); font-size: 11px;
                text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.sort-button { width: 100%; padding: 0; border: 0; background: transparent;
               color: inherit; font: inherit; font-weight: inherit; text-align: left;
               cursor: pointer; }
table.grid td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
                vertical-align: top; }
table.grid tr:nth-child(even) td { background: var(--bg-row-alt); }
.empty-row td { color: var(--fg-muted); font-style: italic; }
.nowrap { white-space: nowrap; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tab { background: transparent; border: 1px solid var(--border); border-radius: 6px;
       color: var(--fg-muted); font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.tab--active { color: var(--fg); border-color: var(--link); background: var(--bg-row-alt); }
/* Two levels, and the difference is who has to act. Red is for a state nothing on a
   schedule will resolve; amber is for one the next run clears by itself. A tab that goes
   red for the second is a tab nobody reads on the day it means the first. */
.tab--alert { border-color: var(--status-error); color: var(--status-error); }
.tab--warn { border-color: var(--status-warn); color: var(--status-warn); }
/* The one tab row left in the content area. The board used to be a second strip above
   it, styled to look like a level above a level — it is one now, in the rail. */
.tabs--sections { margin-top: 4px; }
/* One block per story: a header line and, under it, that story's open work as a table.
   The four-column table this replaced held the work list inside a cell, so every story's
   merge requests aligned to nothing and the widest cell set a width the other rows then
   wasted. */
.feature { padding: 8px 16px; border-bottom: 1px solid var(--border-soft); }
.feature-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 16px 0; }
.feature-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
/* The name takes the middle and the progress line sits at the right margin, so the two
   ends of the header are fixed and only the prose between them moves. */
.feature-name { font-weight: 600; flex: 1 1 auto; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The inner table is the story's own, not the panel's, and is indented to say so: the
   feature is the subject and this is a level under it. Quieter rules than the panel's
   tables, so the blocks stay distinguishable from each other.
   The indent is the *wrapper's*, and the table is plain `width: 100%` inside it — the
   same width in every block, open or collapsed. It was the table's own before, as
   `margin-left: 22px; width: calc(100% - 22px)`, which the panel's `.grid { width: 100% }`
   could override. */
.grid--work { margin: 6px 0 0; width: 100%; font-size: 12px; table-layout: fixed; }
.grid--work td { padding: 2px 8px; border-bottom: 0; }
.grid--work th { padding: 2px 8px; font-size: 10px; background: transparent;
                 border-bottom: 1px solid var(--border-soft); }
.grid--work tr:nth-child(even) td { background: transparent; }
.work-more { margin-left: 22px; font-size: 11px; }
.work-more > summary { cursor: pointer; color: var(--fg-muted); text-transform: uppercase;
                     letter-spacing: .04em; padding-top: 6px; }
/* Table cells do not clip by default, and every cell in this table is `nowrap`: a merge
   status like `discussions_not_resolved` in a 10em column printed straight over the
   approvals beside it. Clipped with the full text on the hover, as everywhere else. */
.grid--work td { overflow: hidden; text-overflow: ellipsis; }
/* The one sentence in the Deployed column: a blocking subtask whose number is already in
   a shipped build. It wraps — it is prose, not a value. */
.deploy-note { white-space: normal; font-size: 10px; }
/* The App Store table's task name. That table lays out on its content, so a long summary
   would take the width from the columns beside it; cut at a readable line, with the whole
   of it on the hover. */
.taskname { max-width: 34ch; }
/* Cut, not wrapped: a story with fourteen merge requests should be fourteen lines, and
   the full text is on the hover as it is everywhere else on this page. */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What a table is, above it and never hidden — a column header says what a value is,
   never why anyone is looking at it. Words are the daemon's. Full width and one line
   of it: the reasoning behind a rule reads better in the legend under the table, and
   a paragraph here left a ragged block of empty panel beside itself. */
.intro { padding: 8px 16px; background: var(--bg-row-alt); color: var(--fg-label);
         border-bottom: 1px solid var(--border-soft); font-size: 12px; }
/* Only red draws the whole panel. Amber says its piece on the tab and in the line above
   the table; ringing the table as well made a refused build look like a failure. */
.panel--alert { border-color: var(--status-error); }
.alertbar { padding: 8px 16px; background: var(--alert-wash); color: var(--status-error);
            border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.warnbar { padding: 8px 16px; background: var(--warn-wash); color: var(--status-warn);
           border-bottom: 1px solid var(--border-soft); font-size: 12px; }
/* The quietest of the three: the sentence, in the warning's colour, with no wash behind
   it and nothing tinted around it. For what is worth saying and was nobody's mistake. */
.notebar { padding: 6px 16px; color: var(--status-warn);
           border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.workflow-states { display: flex; flex-wrap: wrap; gap: 8px; }
.workflow-state { flex: 1 1 280px; min-width: 0; padding: 8px 10px;
                  border: 1px solid var(--border-soft); border-radius: 6px;
                  background: var(--bg-row-alt); }
.workflow-state__head { display: flex; align-items: baseline; gap: 7px; }
.workflow-state__error { color: var(--status-error); font-size: 11px; margin-top: 3px; }
.workflow-state__empty { color: var(--fg-muted); font-size: 11px; margin-top: 3px; }
.decision-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.lifecycle-mr__signals, .lifecycle-effects { display: flex; flex-wrap: wrap;
                                             align-items: flex-start; gap: 5px 10px;
                                             margin-top: 5px; }
.lifecycle-mr__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lifecycle-task__summary { overflow: hidden; }
.lifecycle-task__summary .ellipsis { display: block; }
.lifecycle-task__title { color: var(--fg-muted); font-size: 10px; margin-top: 3px;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lifecycle-history__mrs { display: flex; flex-wrap: wrap; gap: 5px; }
.lifecycle-detail { color: var(--fg-muted); font-size: 10px; margin-top: 4px;
                    white-space: normal; }
.warn { color: var(--status-warn); }
.err { color: var(--status-error); }
/* Who approved, under the state. The bot's approval is the one you look for.
   nowrap because "🤖 qaworker approved ⓘ" broke after the name in a narrow column,
   leaving the mark that says "hover me" stranded on a line of its own. */
.approver { color: var(--fg-muted); font-size: 10px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
/* Keep each avatar and username together on one line. */
.person { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; white-space: nowrap; }
.person__avatar { position: relative; display: inline-grid; place-items: center; flex: none;
    width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
    background: var(--bg-header); color: var(--fg-label); border: 1px solid var(--border); }
.person__initials { font: 600 9px/1 var(--font); }
.person__avatar--robot .person__initials { font-size: 11px; }
.person__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.approver .person__avatar { width: 18px; height: 18px; }
.approver .person { margin-top: 2px; }
.approver--qa { color: var(--status-ok); font-weight: 600; }
/* The tester's own line, coloured by whether this MR's rules are waiting on it:
   a missing approval nobody asked for is not a warning. */
.approver--need { font-weight: 600; }
.approver--required { color: var(--status-warn); }
.approver--unknown { color: var(--fg-muted); }
/* Anything whose hover says more than it does, and the mark that says so. */
.has-hint { cursor: help; }
.hint { opacity: .5; font-size: 9px; vertical-align: 1px; }
.has-hint:hover .hint { opacity: 1; }
.approver--notNeeded { color: var(--fg-muted); font-weight: 400; font-style: italic; }
.chip { display: inline-block; padding: 0 6px; margin: 1px 2px 1px 0; border-radius: 10px;
        background: var(--bg-header); font-size: 11px; white-space: nowrap; }
/* Amber, not red: a task that keeps coming back is worth seeing and is nobody's alarm. */
.chip--churn { color: var(--status-warn); font-size: 10px; }
/* How far the subtask got, not whether it blocks. Test OK and Done are finished work —
   green — and everything else is in flight. The alarm rides beside the chip as its own
   mark: a state chip that doubles as a verdict paints "tested" as a problem.
   The green is mixed from the theme's own `--status-ok` rather than written out, so a
   dark palette gets a dark wash under a light green word instead of one fixed pair that
   is only legible on white. A browser without `color-mix` drops the background and keeps
   the theme's green on the chip's neutral surface, which is still readable.
   These sit *after* `.chip` on purpose: one class each, so source order decides, and
   above it the base's `background` won — dark green text on a dark grey chip. Same trap
   as `.pill--*` and the dark-mode block, both of which live at the end of what they
   modify for exactly this reason. */
.chip--finished { background: color-mix(in srgb, var(--status-ok) 18%, transparent);
                  color: var(--status-ok); font-weight: 600; }
.chip--inProgress { background: var(--bg-header); color: var(--fg-label); }
/* Where a task's code got to on the App Store. Deliberately one hue, going from a solid
   fill to nothing: the levels are a scale, not five unrelated states, and colouring the
   near end of it the way the alarm colours are used would read as a problem. Released is
   the only one that fills, because it is the only one that ends the story. Mixed from
   `--accent` so it follows the palette rather than pinning one blue that disappears on
   half the themes. Same source-order rule as the two chips above. */
.chip--deploy { color: var(--fg-label); }
.chip--deploy-released { background: color-mix(in srgb, var(--accent-bg) 22%, transparent);
                         color: var(--accent-bg); font-weight: 600; }
.chip--deploy-externalTesting { background: color-mix(in srgb, var(--accent-bg) 12%, transparent);
                                color: var(--accent-bg); }
.chip--deploy-internalTesting { background: color-mix(in srgb, var(--accent-bg) 8%, transparent);
                                color: var(--accent-bg); }
.chip--deploy-uploaded { background: var(--bg-header); color: var(--fg-label); }
.chip--deploy-processing { background: var(--bg-header); color: var(--fg-muted); font-style: italic; }
.chip--deploy-none { background: none; color: var(--fg-muted); }

/* Legends: collapsed by default and under the table — they earn their space when a row
   raises the question, which is after you have read one. */
.legend { margin-top: 8px; font-size: 12px; }
.legend summary { cursor: pointer; color: var(--fg-muted); }
/* Two columns: the term, and the sentence about it. A grid rather than a stack of
   flex rows because the alignment is a property of the *section* — every description
   starts at one x, and that x is the widest term in this legend and no wider. As flex
   rows each one began wherever its own term happened to end, which read as a ragged
   left edge down the whole list. */
.legend-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr);
               column-gap: 10px; row-gap: 6px; padding: 8px 4px;
               max-width: 110ch; align-items: baseline; color: var(--fg-muted); }
/* The row hands its two cells straight to the grid. It has to: a flex row made every
   inline element a flex item, so `<em>HPOA_State</em>` mid-sentence broke a paragraph
   into three columns, and the coloured words in "Red or amber" became two. */
.legend-item { display: contents; }
/* One cell holding the whole sentence, however much markup is inside it. */
.legend-text { min-width: 0; }
/* A paragraph with no term spans both columns instead of being squeezed into one. */
.legend-note { grid-column: 1 / -1; }

.pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px;
        font-weight: 600; white-space: nowrap; background: var(--bg-header); color: var(--fg-label); }
.pill--live { background: var(--strong-error-bg); color: var(--pill-live-fg); }
/* The Status column is a verdict about a build, so it is coloured like one: green where
   one could be cut, amber or red where one is refused, neutral where the question does
   not arise yet. Blocked is blocked either way — the colour says which half of the rule
   holds the story, and the blocker chips on the row name the subtask.

   These sit *after* `.pill` on purpose. They used to be up with the feature-table rules,
   which is before it, and a modifier that loses to its own base class is a modifier that
   does nothing — every status pill rendered in the base grey. Palettes only change the
   variables below, so they do not repeat these selectors or take part in that ordering. */
.pill--ready { background: var(--pill-ready-bg); color: var(--pill-ready-fg); }
.pill--blocked { background: var(--pill-blocked-bg); color: var(--pill-blocked-fg); }
.pill--sev-warn  { background: var(--pill-blocked-bg); color: var(--pill-blocked-fg); }
.pill--sev-alert { background: var(--pill-alert-bg); color: var(--pill-alert-fg); }
/* Not a verdict: work is under way and nothing has claimed to be finished. */
.pill--inProgress { background: var(--pill-progress-bg); color: var(--pill-progress-fg); }
/* Nothing under the story: outlined rather than filled, so a row with no work on it does
   not carry the same weight as one where work is happening. Themed vars, because unlike
   the four above it this pill is not a colour, it is an absence. */
.pill--empty { background: transparent; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--border-soft); }
/* Category and task-state colours, keyed by the daemon's keys — the key is data, the
   colour is styling. A category with no rule here still renders, just neutrally. */
.pill--willBeApproved     { background: var(--category-will-bg); color: var(--category-will-fg); }
.pill--alreadyApproved    { background: var(--category-approved-bg); color: var(--category-approved-fg); }
.pill--autoApproved       { background: var(--category-auto-bg); color: var(--category-auto-fg); }
.pill--needsIntervention  { background: var(--category-intervention-bg); color: var(--category-intervention-fg); }
.pill--allMerged          { background: var(--category-merged-bg); color: var(--category-merged-fg); }
.pill--noTransitionRecord { background: var(--category-none-bg); color: var(--category-none-fg); }
.pill--tiny { font-size: 9px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }
/* Passive CI hints stay lighter than approval and lifecycle verdicts. */
.pipeline-hint { display: inline-block; padding: 0 5px; border-radius: 8px;
    border: 1px solid var(--border-soft); font-size: 10px; font-weight: 400;
    white-space: nowrap; vertical-align: middle; color: var(--fg-label);
    background: transparent; text-decoration: none; }
.pipeline-hint--info { color: var(--category-will-fg); background: var(--category-will-bg); }
.pipeline-hint--warning { color: var(--highlight-done-fg); background: var(--highlight-done-bg); }
.pipeline-hint--danger { color: var(--category-intervention-fg); background: var(--category-intervention-bg); }
.pipeline-hint-line { margin-top: 3px; }
a.pipeline-hint:hover { text-decoration: underline; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
       vertical-align: middle; background: var(--fg-muted); }
.dot--ok { background: var(--status-ok); } .dot--err { background: var(--status-error); }
.dot--run { background: var(--status-warn); }
.countdown { font-variant-numeric: tabular-nums; color: var(--status-warn); }
.next-run-strip { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px; font-size: 12px; }
.next-run-strip.workflow-states { flex-direction: row; }
.next-run { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.next-run__op { font-weight: 600; }

/* buttons */
.btn { background: var(--bg-row-alt); border: 1px solid var(--border); border-radius: 4px;
       color: var(--fg); cursor: pointer; font: inherit; font-size: 11px;
       padding: 2px 8px; white-space: nowrap; }
.btn:hover { background: var(--border); }
.btn:disabled { opacity: .4; cursor: default; }
.btn--primary { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-fg); font-size: 12px; padding: 4px 12px; }
.spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor;
           border-right-color: transparent; border-radius: 50%; vertical-align: -1px;
           animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
button[aria-busy="true"] { opacity: .7; }

/* Every keyboard-reachable custom control gets one high-contrast focus treatment.
   `focus-visible` keeps pointer clicks from drawing a distracting permanent ring. */
:where(button, a, select, input, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
}

/* footer */
.app-footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 4px 24px;
              font-size: 11px; color: var(--fg-muted); }
.app-footer__ver { font-weight: 600; color: var(--fg); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 100; background: var(--overlay);
         display: flex; align-items: center; justify-content: center; padding: 16px;
         -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal__card { width: min(560px, 92vw); background: var(--bg-panel); border-radius: 10px;
               border: 1px solid var(--border); padding: 18px 20px; min-width: 0; max-width: 100%;
               max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
               overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere;
               box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal__title { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.modal__title--error { color: var(--status-error); }
/* pre-line, because the body is often the button's own tooltip — several lines with a
   bulleted rule list in it, which collapsed into one paragraph and read as a wall. */
.modal__body { font-size: 13px; color: var(--fg-label); line-height: 1.55;
               white-space: pre-line; max-height: 40vh; overflow: auto; }
.modal__note { margin-top: 12px; padding: 8px 10px; border-left: 3px solid var(--status-warn);
               background: var(--bg-row-alt); border-radius: 0 4px 4px 0; font-size: 12px;
               color: var(--fg-muted); }
.modal__detail { margin-top: 12px; padding: 8px 10px; max-height: 220px; overflow: auto;
                 background: var(--bg-header); border: 1px solid var(--border-soft);
                 border-radius: 4px; font-family: var(--mono); font-size: 11px;
                 white-space: pre-wrap; overflow-wrap: anywhere; }
.modal__field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 16px;
                font-size: 12px; color: var(--fg-muted); }
.modal__hint { margin-top: 4px; font-size: 11px; color: var(--fg-muted); opacity: .8; }
.modal__input { width: 100%; min-width: 0; max-width: 100%; padding: 8px; background: var(--bg-header);
                border: 1px solid var(--border); border-radius: 4px; color: var(--fg);
                font: inherit; letter-spacing: normal; }
select.modal__input { text-overflow: ellipsis; }
textarea.modal__input { font-family: var(--mono); resize: vertical; }
.modal__input[data-passcode] { font-family: var(--mono); letter-spacing: 2px; }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px;
                  align-items: center; }
.modal__actions .btn { max-width: 100%; white-space: normal; }
/* the what's-new dialog: two notes side by side, so the one being replaced and the one
   replacing it are read together rather than one above the fold of a table cell. */
.modal__card--wide { width: min(900px, 94vw); }
.wn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .wn { grid-template-columns: 1fr; } }
.wn__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
             font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
             color: var(--fg-muted); margin-bottom: 6px; }
.wn__box { height: 40vh; min-height: 180px; overflow: auto; padding: 8px 10px;
           background: var(--bg-header); border: 1px solid var(--border-soft);
           border-radius: 4px; font-size: 12px; line-height: 1.5;
           white-space: pre-wrap; overflow-wrap: anywhere; }
textarea.wn__box { width: 100%; resize: vertical; color: var(--fg); font-family: inherit; }
textarea.wn__box:focus { outline: 1px solid var(--accent-bg); }
.wn__over { color: var(--status-error); font-weight: 700; }
.wn__foot { margin-top: 10px; font-size: 11px; color: var(--fg-muted); }
.wn__status { margin-right: auto; font-size: 11px; }

.badge { padding: 0 5px; border-radius: 4px; background: var(--bg-header); font-size: 10px; }
.badge--err { background: var(--badge-error-bg); color: var(--badge-error-fg); }
.badge--warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.badge--ok { background: var(--bg-header); color: var(--fg-muted); }
.sec { font-size: 10px; text-transform: uppercase; color: var(--fg-muted); margin: 6px 0 2px; }
pre.json { margin: 0; padding: 6px 8px; overflow: auto; font-size: 11px;
           background: var(--bg-header); border-radius: 4px; white-space: pre-wrap;
           overflow-wrap: anywhere; }
/* A release note, printed as it was written: the line breaks are the author's. */
.note { font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Review pass: clear navigation, compact records and a usable narrow layout. */
[hidden] { display: none !important; }
:root { --nav-bg: #202630; --nav-fg: #f0f3f8; --nav-muted: #bcc5d2; --nav-accent: #f5bf62; }
:root[data-theme="light"], .theme-preview[data-theme="light"] { --bg: #f1f3f6; --bg-panel: #fff; --bg-row-alt: #f7f8fa; --bg-header: #e9edf3; --border: #cbd2dc; --border-soft: #e0e5ec; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { padding: 18px 24px 72px; }
.rail { flex-basis: 224px; height: 100dvh; background: var(--nav-bg); color: var(--nav-fg);
    --fg: var(--nav-fg); --fg-muted: var(--nav-muted); --fg-label: var(--nav-muted); --link: #a8c8ff;
    --bg-row-alt: #303a49; --bg-header: #303a49; --border: #485568; --border-soft: #384454; }
.brand { display: flex; gap: 9px; align-items: center; padding: 8px 8px 18px; font-size: 19px; font-weight: 700; }
.brand-mark { display: block; width: 32px; height: 32px; color: var(--nav-accent); }
.module-item { align-items: center; padding: 10px 8px; min-height: 44px; border-radius: 7px; }
.module-item__title { font-size: 14px; }
.module-item__icon { display: flex; width: 22px; flex: 0 0 22px; }
.module-item__icon svg { width: 22px; height: 22px; }
.module-item--active { background: #35404f; border-color: transparent; box-shadow: inset 3px 0 var(--nav-accent); }
.module-item__meta { font-size: 12px; }
.page-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.inventory-search { flex: 1 1 220px; max-width: 440px; }
.inventory-search input { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-panel); color: var(--fg); font: inherit; }
.inventory-search input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.module-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.module-toolbar h1 { margin: 0; font-size: 25px; letter-spacing: -.5px; line-height: 1.2; }
.module-toolbar__freshness { font-size: 12px; color: var(--fg-muted); }
.module-toolbar > .btn { margin-left: auto; }
.module-status { font-size: 12px; margin: 0 0 16px; border-bottom: 1px solid var(--border-soft); }
.module-status > summary { padding: 7px 0; color: var(--fg-muted); cursor: pointer; }
.module-status .next-run-strip { padding: 8px 0 12px; }
.panel__header { font-size: 15px; font-weight: 650; }
.intro { font-size: 12px; line-height: 1.45; padding-top: 7px; padding-bottom: 7px; }
.tabs--sections { gap: 8px; border-bottom: 1px solid var(--border); }
.tabs--sections .tab { border: 0; border-radius: 4px 4px 0 0; padding: 10px 12px; background: transparent; font-size: 14px; color: var(--fg-muted); }
.tabs--sections .tab--active { color: var(--fg); box-shadow: inset 0 -3px var(--link); background: var(--bg-panel); }
.tab-count--warn { color: var(--status-warn); }
.tab-count--alert { color: var(--status-error); }
table.grid, table.monitor-table { font-size: 14px; }
table.grid--wide { min-width: 0; width: 100%; }
table.record-table { min-width: 0 !important; width: 100%; }
.record-table td { vertical-align: top; overflow-wrap: anywhere; }
.record-table td.nowrap, .record-table .nowrap { white-space: normal; }
.task-id { display: inline-block; white-space: nowrap; overflow-wrap: normal; }
.test-ok-transition { display: flex; align-items: center; gap: 7px; margin-top: 9px; white-space: nowrap; }
/* Keep the actor's name available to assistive technology and in the avatar tooltip. */
.person--avatar-only .person > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.record-table td .muted, .record-table .lifecycle-detail { font-size: 12px; }
.record-table td { padding: 10px; }
.record-table th { font-size: 12px; }
.record-title { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; margin: 3px 0; }
.record-table .ellipsis { white-space: normal; overflow: visible; text-overflow: clip; }
.record-details { margin-top: 5px; font-size: 12px; }
.record-details summary { cursor: pointer; color: var(--link); padding: 4px 0; }
.record-details[open] > :not(summary) { margin-top: 6px; }
.record-details code { word-break: break-all; }
.grid--essential { table-layout: fixed; }
.grid--essential th:nth-child(1) { width: 24%; }
.grid--essential th:nth-child(2) { width: 27%; }
.grid--essential th:nth-child(3) { width: 14%; }
.grid--essential th:nth-child(4) { width: 15%; }
.grid--essential th:nth-child(5) { width: 20%; }
/* Boards with App Store data add a sixth build column. The five widths above already sum
   to 100%, so without its own share that column collapsed to zero width and its build list
   wrapped into an invisible strip hundreds of pixels tall that set every row's height. */
.grid--essential:not(.grid--mr-inventory):has(th:nth-child(6)) th:nth-child(1) { width: 19%; }
.grid--essential:not(.grid--mr-inventory):has(th:nth-child(6)) th:nth-child(2) { width: 22%; }
.grid--essential:not(.grid--mr-inventory):has(th:nth-child(6)) th:nth-child(3) { width: 12%; }
.grid--essential:not(.grid--mr-inventory):has(th:nth-child(6)) th:nth-child(4) { width: 13%; }
.grid--essential:not(.grid--mr-inventory):has(th:nth-child(6)) th:nth-child(5) { width: 18%; }
.grid--essential:not(.grid--mr-inventory):has(th:nth-child(6)) th:nth-child(6) { width: 16%; }
.grid--mr-inventory { min-width: 1050px; }
.grid--mr-inventory th:nth-child(1) { width: 28%; }
.grid--mr-inventory th:nth-child(2) { width: 21%; }
.grid--mr-inventory th:nth-child(3) { width: 14%; }
.grid--mr-inventory th:nth-child(4) { width: 19%; }
.grid--mr-inventory th:nth-child(5) { width: 18%; }
.grid--mr-inventory th:nth-child(6) { width: 70px; }
.report-status { overflow-wrap: anywhere; }
.mr-identity-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-top: 4px; font-size: 12px; }
.mr-identity-line .person { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.mr-branch { margin-top: 4px; }
.lifecycle-action { min-width: 44px; min-height: 44px; font-size: 19px; }
.lifecycle-action.pill--sev-alert { color: var(--status-error); border-color: var(--status-error); }
.lifecycle-action.pill--sev-warn { color: var(--status-warn); border-color: var(--status-warn); }
.grid--reports { table-layout: fixed; }
table.grid--reports th { white-space: normal; }
.grid--reports td.nowrap { white-space: nowrap; overflow-wrap: normal; }
.grid--reports .person { position: relative; max-width: 100%; white-space: normal; font-size: 13px; }
.grid--reports .approvers { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.report-warnings { padding: 8px 12px; overflow-wrap: anywhere; }
@media (min-width: 641px) {
    /* Nine report fields: reserve space for metadata; give the title the rest.
       Scroll inside the panel on tablets, then use the shared cards on phones. */
    table.grid--reports { min-width: 1360px !important; }
    .grid--reports th:nth-child(1) { width: 108px; }
    .grid--reports th:nth-child(3) { width: 54px; }
    .grid--reports th:nth-child(4) { width: 62px; }
    .grid--reports th:nth-child(5) { width: 170px; }
    .grid--reports th:nth-child(6) { width: 320px; }
    .grid--reports th:nth-child(7) { width: 80px; }
    .grid--reports th:nth-child(8) { width: 110px; }
    .grid--reports th:nth-child(9) { width: 124px; }
}
/* Pipeline / merge request · Source / person · State / progress · Timing. */
table.monitor-table { width: 100%; min-width: 0; table-layout: fixed; }
.monitor-table td { vertical-align: top; }
.monitor-table th:nth-child(1) { width: 34%; }
.monitor-table th:nth-child(2) { width: 26%; }
.monitor-table th:nth-child(3) { width: 24%; }
.monitor-table th:nth-child(4) { width: 16%; }
.monitor-table .monitor-ref { white-space: normal; overflow-wrap: anywhere; }
.monitor-author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; overflow: hidden; }
.monitor-types, .monitor-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.monitor-types { margin-top: 6px; }
.monitor-filters { justify-content: flex-start; }
.monitor-filter-summary { padding: 8px 12px; font-size: 12px; }
table.build-runs-table { min-width: 0; table-layout: fixed; }
.build-runs-table tbody[hidden] { display: none; }
.build-runs-table > thead > tr > th:nth-child(1) { width: 36%; }
.build-runs-table > thead > tr > th:nth-child(2) { width: 26%; }
.build-runs-table > thead > tr > th:last-child { width: 100px; }
.build-runs-table .build-group th { position: static; text-align: left; background: var(--bg); }
.build-runs-table .build-detail-row td { background: var(--bg-panel); }
.build-run-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.build-run-stack > * { max-width: 100%; }
.build-run-stack .record-title { margin: 0; }
.lifecycle-filter { font: inherit; background: var(--bg-panel); color: var(--fg); border: 1px solid var(--border); padding: 6px 9px; border-radius: 5px; cursor: pointer; opacity: .68; }
.lifecycle-filter:hover, .lifecycle-filter--active { opacity: 1; box-shadow: 0 0 0 1px currentColor; }
.lifecycle-filter--active { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.lifecycle-filter:hover { outline: 1px solid var(--link); }
.decision-counts { justify-content: flex-start; }
.people-summary { display: inline-block; position: relative; }
.people-summary summary { cursor: pointer; display: flex; align-items: center; min-height: 30px; gap: 4px; font-size: 12px; color: var(--fg-muted); }
.people-summary summary::-webkit-details-marker { display: none; }
.people-summary__avatars { display: inline-flex; padding-left: 4px; }
.people-summary__avatars .person { margin-left: -4px; }
.people-summary__avatars .person > span:last-child { display: none; }
.people-summary__avatars .person__avatar { border: 2px solid var(--bg-panel); width: 25px; height: 25px; }
.people-summary__names { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 5px; }

/* One shared approval row; rule counts stay in the expandable detail. */
.approval-summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.approval-summary::-webkit-details-marker { display: none; }
.approval-headline { white-space: nowrap; }
.approval-avatars { display: flex; align-items: center; gap: 3px; }
.approval-avatars:empty { display: none; }
.approval-avatars .person__avatar { width: 25px; height: 25px; }
.approval-avatars .person__avatar--robot { border: 2px solid var(--status-ok); }
.approval-avatars .person__avatar--robot::after { content: '✓'; position: absolute; right: 0; bottom: 0;
    background: var(--bg-panel); color: var(--status-ok); font: bold 10px/1 var(--font); }
.approval-overflow { font-size: 11px; color: var(--fg-muted); }
.approval-cue { font-size: 10px; }
.approval-cue--waiting { color: var(--status-warn); }
.approval-cue--complete { color: var(--status-ok); }
.approval-cue--unknown { color: var(--fg-muted); }
.approval-breakdown { margin-top: 8px; padding: 8px; border-left: 2px solid var(--border);
    background: var(--bg-row-alt); font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.approval-breakdown > * + * { margin-top: 4px; }
.report-details { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.report-details > summary { cursor: pointer; }
.report-explanation { margin-top: 6px; padding: 8px; border-left: 2px solid var(--border);
    background: var(--bg-row-alt); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.grid--reports td[hidden] { display: none; }
.grid--reports .report-explanation { max-width: 60ch; }
@media (max-width: 760px) {
    .grid--reports .report-details-open td[data-label="Status"] { grid-column: 1 / -1; }
}
.approval-names { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.approval-names .person { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.mobile-sort { display: none; }
.navigation-shade, #navigation-toggle, #navigation-close { display: none; }
.icon-button { border: 0; background: transparent; color: inherit; font: inherit; min-width: 44px; min-height: 44px; cursor: pointer; }
:root { --utility-width: 240px; --utility-bar-height: 40px; }
.utility-dock { position: fixed; right: 16px; bottom: 12px; z-index: 50; width: var(--utility-width); max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; }
.queue-card { height: var(--utility-bar-height); border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); font-size: 12px; overflow: hidden; }
.queue-card[open] { height: auto; }
.queue-card__header { height: calc(var(--utility-bar-height) - 2px); padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.queue-card__header::-webkit-details-marker { display: none; }
.queue-card__header::before { content: '▸'; color: var(--fg-muted); }
.queue-card[open] > .queue-card__header::before { content: '▾'; }
.queue-card__header strong { margin-right: auto; }
.queue-card__compact { display: none; min-width: 0; flex: 1 1 auto; align-items: center; gap: 6px; }
.queue-card__compact #activity-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-card__compact #activity-queued { flex: none; color: var(--fg-muted); }
.queue-card:not([open]) .queue-card__title { display: none; }
.queue-card:not([open]) .queue-card__compact { display: flex; }
.queue-card:not([open]) .conn > span:not(.dot) { display: none; }
.queue-card:not([open]) .conn { flex: none; }
.queue-card__body { min-height: calc(var(--utility-bar-height) * 2); max-height: min(50dvh, 380px); padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
#activity-observed { flex-shrink: 0; list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
#activity-observed li { padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
#activity-local-count { margin: 0; }
.live-activity { flex-shrink: 0; max-height: 180px; overflow: auto; overflow-wrap: anywhere; }
.live-activity h3 { margin: 2px 0 6px; font-size: 12px; }
.live-activity p { margin: 6px 0; }
.live-activity ul { list-style: none; margin: 0; padding: 0; }
.live-activity li { padding: 3px 0; border-top: 1px solid var(--border-soft); }
.queue-card .conn { justify-content: flex-end; flex-wrap: wrap; align-items: center; padding: 0; gap: 3px; font-size: 10px; }
#queue-status { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; overflow-wrap: anywhere; }
#queue-status > * { flex-shrink: 0; }
.activity-queue h3 { margin: 0 0 4px; font-size: 11px; color: var(--fg-muted); }
.activity-queue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.activity-queue li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: baseline; }
.activity-queue__state { font-size: 10px; color: var(--fg-muted); }
.activity-queue__state--running { color: var(--status-ok); font-weight: 600; }
/* Appearance lives in the corner of the activity card: reachable, never competing
   with the page's own controls. */
.theme-toggle { flex-shrink: 0; align-self: flex-end; margin-top: auto; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: 11px; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.theme-toggle:hover { color: var(--fg); background: var(--bg-row-alt); }
.theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.page { padding-bottom: calc(var(--utility-bar-height) * 2 + 36px); }
body:has(.queue-card[open]) .page { padding-bottom: calc(var(--utility-bar-height) * 4 + 36px); }
.modal__note:has(.theme-options) { border: 0; background: none; padding: 0; }
.theme-options { display: flex; flex-direction: column; gap: 7px; }
.theme-option { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.theme-option[aria-pressed="true"] { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.theme-option:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.theme-option__text { display: flex; flex-direction: column; gap: 3px; }
.theme-option__text strong { font-size: 14px; }
.theme-option__text > span { color: var(--fg-muted); }
.theme-option__check { visibility: hidden; color: var(--link); font-size: 17px; }
.theme-option[aria-pressed="true"] .theme-option__check { visibility: visible; }
.theme-preview { height: 50px; width: 96px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; display: flex; overflow: hidden; }
.theme-preview__nav { width: 20px; flex: none; background: var(--nav-bg); border-top: 5px solid var(--nav-accent); }
.theme-preview__content { flex: 1; padding: 7px; display: flex; flex-direction: column; gap: 4px; }
.theme-preview__heading { height: 4px; width: 65%; background: var(--link); border-radius: 1px; }
.theme-preview__row { height: 10px; border: 1px solid var(--border-soft); border-left: 3px solid var(--status-ok); background: var(--bg-panel); }
.theme-preview__row:last-child { border-left-color: var(--status-warn); background: var(--bg-row-alt); }
body { padding-bottom: 0; }
.modal__card--wide .modal__note:has(.crash-log) { padding: 0; border: 0; }
.build-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 12px; }
.build-summary dt { color: var(--fg-muted); font-size: 12px; }
.build-summary dd { margin: 3px 0 0; font-size: 14px; }
.build-log { width: 100%; min-height: 160px; max-height: 55vh; height: 280px; resize: vertical; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font: 12px/1.5 var(--mono); }
.build-log[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
.crash-log { height: 55vh; }
.build-log-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 6px; }
.technical-value { display: flex; gap: 8px; align-items: baseline; margin: 8px 0; }
.technical-value code { flex: 1; }
@media (max-width: 1100px) {
    .page { padding: 14px 18px calc(var(--utility-bar-height) * 2 + 36px); width: 100%; }
    body:has(.queue-card[open]) .page { padding-bottom: calc(var(--utility-bar-height) * 4 + 36px); }
    #navigation-toggle, #navigation-close { display: inline-block; }
    #navigation-close { margin-left: auto; }
    .rail { position: fixed; inset: 0 auto 0 0; width: min(300px, 88vw); z-index: 80; transform: translateX(-101%); visibility: hidden; height: 100dvh; }
    .navigation-open .rail { transform: none; visibility: visible; }
    .navigation-open .navigation-shade { display: block; position: fixed; inset: 0; z-index: 79; border: 0; background: rgba(0,0,0,.45); }
    body.navigation-open { overflow: hidden; }
}
@media (max-width: 640px) {
    :root { --utility-bar-height: 44px; }
    .page { padding: 10px 12px calc(var(--utility-bar-height) * 2 + 36px); }
    body:has(.queue-card[open]) .page { padding-bottom: calc(var(--utility-bar-height) * 4 + 36px); }
    .theme-toggle { padding: 4px 6px; }
    .utility-dock { right: 12px; }
    .page-tools { gap: 6px; }
    .inventory-search { flex-basis: 190px; }
    .inventory-search input { font-size: 14px; }
    .module-toolbar h1 { font-size: 23px; }
    .module-toolbar__freshness { flex-basis: 100%; order: 3; }
    .module-status { margin-bottom: 10px; }
    .panel__header { flex-wrap: wrap; gap: 6px; }
    .tabs--sections { flex-wrap: nowrap; overflow-x: auto; }
    .tabs--sections .tab { flex-shrink: 0; }
    .table-wrap { overflow-x: visible; }
    table.record-table, .record-table tbody { display: block; width: 100%; }
    .record-table colgroup, .record-table thead { display: none; }
    .record-table tbody > tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .record-table tbody > tr[hidden] { display: none; }
    .record-table td { display: block; padding: 6px 0; width: auto !important; border: 0; background: transparent !important; min-width: 0; }
    .record-table td:first-child, .record-table td:nth-child(2), .record-table td:last-child, .record-table td[colspan] { grid-column: 1 / -1; }
    .build-runs-table td:nth-child(2) { grid-column: auto; }
    .build-runs-table .build-group th { grid-column: 1 / -1; }
    .record-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--fg-muted); margin-bottom: 3px; }
    .record-table td:first-child::before { display: none; }
    .record-table td.cell-empty { display: none; }
    .record-table .monitor-ref { white-space: normal; }
    .record-table .btn, .page-tools > .btn, .module-toolbar > .btn { min-height: 44px; }
    .mobile-sort { display: flex; gap: 8px; align-items: center; padding: 8px 12px; font-size: 12px; color: var(--fg-muted); }
    .mobile-sort select { min-width: 0; max-width: 65%; color: var(--fg); background: var(--bg-panel); border: 1px solid var(--border); padding: 6px; border-radius: 5px; }
    .modal__card { width: calc(100vw - 20px); max-height: 94dvh; padding: 16px; }
    .modal__title { font-size: 18px; }
    .modal__card .btn { min-height: 44px; }
}

.builds-overview { padding: 12px 0; }
.build-run-detail { overflow-wrap: anywhere; padding: 0 4px 14px; }
.build-run-detail .btn { margin: 12px 8px 0 0; }
table.build-steps { table-layout: fixed; min-width: 0; }
.build-steps th:first-child { width: 27%; }
.build-steps th:nth-child(2) { width: 16%; }
.build-steps th:nth-child(3) { width: 12%; }
.build-run-detail .build-steps th, .build-run-detail .build-steps td { padding: 5px 8px; font-size: 12px; }
.build-steps th[scope="row"] { font-weight: 500; }
.build-steps tr[data-state="running"], .build-steps tr[data-state="waiting"] { color: var(--link); }
.build-steps tr[data-state="failed"], .build-steps tr[data-state="unknown"] { color: var(--status-error); }
.build-steps tr[data-state="skipped"] { color: var(--fg-muted); }
.build-detail-log { margin-top: 12px; }
.build-detail-log > summary { cursor: pointer; }
.build-detail-log li { margin: 6px 0; }
.build-steps td::before { display: none; }
@media (max-width: 640px) {
    .build-steps thead { display: table-header-group; }
    .build-steps tbody { display: table-row-group; }
    .build-steps tbody > tr { display: table-row; padding: 0; }
    .build-steps td { display: table-cell; }
}
.build-stage { margin: 12px 0; }

/* Dashboard additions to the original look: notices, command results and
   dataset freshness in the rail. */
#notice { margin: 0 0 12px; border-radius: 6px; }
#notice:empty { display: none; }
#commands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
#commands:empty::before { content: 'No commands yet'; color: var(--fg-muted); }
#commands li[data-state="unresolved"], #commands li[data-state="unknown"] { color: var(--status-warn); }
#commands li[data-state="refused"], #commands li[data-state="failed"] { color: var(--status-error); }
#commands li[data-state="confirmed"] { color: var(--status-ok); }
.board-item { display: flex; justify-content: space-between; gap: 6px; }
.board-item[data-freshness="stale"] .badge, .board-item[data-freshness="unverified"] .badge { color: var(--status-warn); }
.rail .badge { background: transparent; }
.intro ul { margin: 4px 0; padding-left: 18px; }
.intro .sec { margin-top: 0; }
.filter.intro { display: flex; gap: 8px; align-items: center; }
th[aria-sort="ascending"] .sort-button::after { content: " ▲"; }
th[aria-sort="descending"] .sort-button::after { content: " ▼"; }
td .btn + .btn { margin-left: 4px; }
.record-table tbody tr { cursor: pointer; }
table.grid tr[aria-selected] td { background: color-mix(in srgb, var(--link) 14%, var(--bg-panel)); }
@media (max-width: 640px) {
    /* A feature's census and verdict wrap under its name instead of being clipped. */
    .feature-head { flex-wrap: wrap; }
}

/* DAS-86: the Users page's profile cards sit side by side. */
.users-overview .relay-targets { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 12px 0 0; }

/* The shared status pill (pages/cells.js statusPill), in the original's
   .automation-status look. Those original rules above are kept verbatim but
   nothing emits .automation-status any more; edit these instead. */
.status-pill { display: inline-block; padding: 1px 7px; border-radius: 10px;
               background: var(--bg-header); color: var(--fg-label);
               font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-pill.status-pill--success { background: var(--pill-ready-bg); color: var(--pill-ready-fg); }
.status-pill.status-pill--warning { background: var(--pill-blocked-bg); color: var(--pill-blocked-fg); }
.status-pill.status-pill--danger { background: var(--pill-alert-bg); color: var(--pill-alert-fg); }
.status-pill.status-pill--info { color: var(--link); background: color-mix(in srgb, var(--link) 16%, transparent); }

/* From the reference comparison (DAS-87): subtask work tables size to their
   panel and become phone cards like the other record tables; neutral and info
   status pills stay readable on panel headers and in dark themes; sortable
   headers keep their table's letter case. */
table.grid--work { min-width: 0; }
.status-pill.status-pill--neutral { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.sort-button { text-transform: inherit; letter-spacing: inherit; }

/* The Debug console (debug.html): one viewport-high page whose title, tabs and
   controls stay put while only the rows scroll; dense monospace rows as in v5. */
.debug-console { display: flex; flex-direction: column; height: 100dvh; padding: 10px 16px 0; }
.debug-title { margin-bottom: 2px; }
.debug-title h1 { font-size: 20px; }
.debug-title > .btn { display: inline-flex; align-items: center; }
.debug-console .tabs--sections { margin: 0 0 4px; }
.debug-panel, .debug-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.debug-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; }
.debug-levels, .debug-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.debug-chips { padding-bottom: 4px; }
.debug-chips:empty { display: none; }
.debug-chip { border-radius: 10px; font-family: var(--mono); }
.debug-search { flex: 1 1 200px; min-width: 0; padding: 3px 8px; font: inherit; color: var(--fg);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
#log-health { cursor: help; font-size: 11px; }
#log-filters-button { anchor-name: --debug-filters; }
.debug-popover { position-anchor: --debug-filters; position-area: bottom span-right; position-try-fallbacks: flip-inline;
    inset: auto; margin: 4px 0; width: min(340px, calc(100vw - 16px)); padding: 10px; gap: 6px;
    background: var(--bg-panel); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px #0004; }
.debug-popover:popover-open { display: grid; }
.debug-popover label { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 8px; align-items: center; }
.debug-popover select, .debug-popover input { min-width: 0; font: inherit; padding: 3px 6px; color: var(--fg);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
.debug-rows { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--border); font: 12px/1.5 var(--mono); }
.debug-row { border-bottom: 1px solid var(--border-soft); }
.debug-row__head { display: flex; align-items: baseline; gap: 10px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.debug-row__head:hover { background: var(--bg-row-alt); }
.debug-row__head:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.debug-row--open > .debug-row__head { background: color-mix(in srgb, var(--link) 18%, transparent); box-shadow: inset 3px 0 var(--link); }
.debug-row__head > * { flex: none; overflow: hidden; text-overflow: ellipsis; }
.debug-time { width: 8ch; color: var(--fg-muted); }
.debug-level { width: 9ch; text-align: center; }
.debug-source { width: 22ch; }
.debug-op { width: 12ch; }
.debug-method { width: 4ch; }
.debug-text { flex: 1 1 0; min-width: 0; }
.debug-status { width: 7ch; text-align: right; }
.debug-ms { width: 7ch; text-align: right; color: var(--fg-muted); }
.debug-run { width: 7ch; }
.debug-run .btn { padding: 0 4px; line-height: 1.4; }
.debug-detail { padding: 2px 8px 10px calc(8ch + 18px); white-space: normal; }
.debug-detail pre.json { max-height: 320px; }
.debug-message { margin: 4px 0; }
.debug-empty { padding: 8px; margin: 0; }
.debug-grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.debug-grid th { position: sticky; top: 0; padding: 2px 8px; text-align: left; background: var(--bg-header); }
.debug-grid td { max-width: 40ch; padding: 1px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.debug-grid tr:nth-child(even) td { background: var(--bg-row-alt); }
/* A phone wraps a row to two lines: its facts, then operation and text. */
@media (max-width: 640px) {
    .debug-console { padding: 8px 8px 0; }
    .debug-row__head { flex-wrap: wrap; gap: 0 8px; }
    .debug-row__head::after { content: ''; order: 1; flex-basis: 100%; }
    .debug-source { flex: 1 1 0; width: auto; min-width: 0; }
    .debug-op, .debug-text { order: 2; }
    .debug-op { width: auto; max-width: 14ch; }
    .debug-level, .debug-status, .debug-ms { width: auto; }
    .debug-detail { padding-left: 8px; }
}
#debug-link { margin-top: 0; text-decoration: none; }
.debug-sheet { position: fixed; inset: auto 0 0; margin: 0; padding: 0; width: 100%; max-width: none;
    max-height: 85dvh; border: 1px solid var(--border); border-radius: 12px 12px 0 0;
    background: var(--bg-panel); color: var(--fg); font: inherit; box-shadow: 0 -6px 24px #0003; overflow: hidden; }
.debug-sheet[open] { display: flex; flex-direction: column; }
.debug-sheet::backdrop { background: #0002; }
.debug-sheet__handle { flex-shrink: 0; height: 24px; cursor: ns-resize; touch-action: none;
    display: flex; align-items: center; justify-content: center; }
.debug-sheet__handle::before { content: ''; width: 48px; height: 4px; border-radius: 4px; background: var(--fg-muted); }
.debug-sheet__handle:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.debug-sheet__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 4px; }
.debug-sheet__header h2 { margin: 0; font-size: 16px; }
.debug-sheet__header .btn { min-height: 36px; }
.debug-sheet__content { flex: 1 1 auto; min-height: 0; min-width: 0; }
.debug-sheet .debug-console { height: 100%; padding-top: 0; }
.debug-sheet .debug-title { display: none; }
.reader-login { width: min(100% - 2rem, 28rem); margin: 12dvh auto; padding: 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); display: grid; gap: .8rem; }
.reader-login h1, .reader-login p { margin: 0; }
.reader-login input { width: 100%; min-width: 0; min-height: 44px; padding: .6rem .75rem; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.reader-login .btn { min-height: 44px; }