/*
 * control.css — the "control center" design (2026-10 redesign).
 *
 * Loaded on every page after the classic stylesheets. EVERY rule that changes
 * the page is scoped to html[data-ui="control"] (set before first paint by
 * assets/js/ui-boot.js), so the classic design — and the no-JS fallback,
 * where data-ui is never set — render exactly as before. The only unscoped
 * rules style the design switch itself, which exists in both designs.
 *
 * Colours: the tokens below are the only colour literals in this file. The
 * classic palette tokens (--cream, --ink, --red, …) are re-pointed at them,
 * so classic page content (tool bodies, hubs, glossary…) takes the look without
 * per-page CSS. Light only for now (Dieter Rams direction, approved 2026-10-07):
 * prefers-color-scheme is not consulted. Contrast (WCAG AA): every text token
 * ≥ 4.5:1 on --bg, --surface and --surface-3; --border-input ≥ 3:1 (1.4.11).
 * --signal and --grc are fill colours only (bars, dots), never text.
 */

/* Kanji badges (ラ 激 弁 サ 定 全, 本日のセット …): a 36-glyph subset of
   Noto Sans CJK JP (SIL OFL 1.1), ~6 KB, self-hosted. */
@font-face {
    font-family: 'CR Kanji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cr-kanji-400.woff2') format('woff2');
    unicode-range: U+3000-30FF, U+4E00-9FFF;
}

/* Instrument Sans (SIL OFL 1.1, latin subset, variable weight), self-hosted. */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-var.woff2') format('woff2');
}

html[data-ui="control"] {
    color-scheme: light;

    /* ── Design tokens: light "Rams" palette (2026-10-07) ───────────── */
    --bg: #E9E8E4;            /* ground */
    --rail: #E9E8E4;
    --surface: #F6F5F2;       /* panel: modules, bars */
    --surface-2: #F0EFEB;
    --surface-3: #DEDCD5;     /* track: empty bars, pressed */
    --tile: #FBFAF8;          /* cards inside a panel */
    --line-soft: #E3E1DB;     /* rules inside a panel */
    --done: #3A3A36;          /* finished step / opened item */
    --border: #D3D1CA;        /* hairline */
    --border-strong: #C4C2BA;
    --border-input: #7A7870;
    --text: #1C1C1A;          /* ink */
    --text-2: #4D4C47;
    --muted: #5C5B55;
    --signal: #E2580F;        /* fills only (bars, dots): 3.4:1, never text */
    --accent: #A93D08;        /* signal, darkened for text + white labels */
    --accent-hover: #8F3306;
    --on-accent: #FFFFFF;
    --ink-btn: #1C1C1A;       /* main action: near-black with a signal dot */
    --on-ink: #FBFAF8;
    --grc: #B7790B;           /* GRC fills */
    --grc-text: #7F5305;
    --ok: #276B43;
    --ok-fill: #2F7D4F;
    --warn: #7F5305;
    --bad: #B42318;
    --code: #EFEEEA;
    --scrim: rgba(28, 28, 26, 0.36);
    --wash: rgba(28, 28, 26, 0.04);
    --wash-strong: rgba(28, 28, 26, 0.08);
    --accent-wash: rgba(226, 88, 15, 0.10);
    --ok-wash: rgba(47, 125, 79, 0.12);
    --warn-wash: rgba(183, 121, 11, 0.14);
    --bad-wash: rgba(180, 35, 24, 0.10);

    --font-ui: 'Instrument Sans', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-code: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --font-kanji: 'CR Kanji', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --tap: 44px;
    --tap-primary: 48px;

    /* ── Classic tokens, re-pointed (classic content inherits the look) ── */
    --cream: var(--bg);
    --cream-dark: var(--surface);
    --cream-darker: var(--border);
    --ink: var(--text);
    --ink-light: var(--text-2);
    --ink-muted: var(--muted);
    --ink-faint: var(--muted);
    --ink-faint-decorative: var(--border-strong);
    /* Classic --red drives tool labels, tabs and main buttons in 144 tool
       bodies: in the Rams look those are ink (colour is kept for state).
       Links keep the accent through the low-specificity rule below. */
    --red: var(--text);
    --red-hover: #000;
    --red-dim: var(--wash-strong);
    --border-control: var(--border-input);
    --color-error: var(--bad);
    --color-success: var(--ok);
    --color-warning: var(--warn);
    --color-success-bg: var(--ok-wash);
    --color-error-bg: var(--bad-wash);
    --color-error-bg-strong: var(--bad-wash);
    --color-warning-bg: var(--warn-wash);
    --color-accent-bg-subtle: var(--accent-wash);
    --color-link: var(--accent); --color-link-hover: var(--accent-hover);
    --sev-low: var(--text-2);     --sev-low-bg: var(--wash-strong);
    --sev-medium: var(--warn);    --sev-medium-bg: var(--warn-wash);
    --sev-high: var(--accent);    --sev-high-bg: var(--accent-wash);
    --sev-critical: var(--bad);   --sev-critical-bg: var(--bad-wash);
    --sev-good: var(--ok);        --sev-good-bg: var(--ok-wash);
    --ok-bg: var(--ok-wash);      --ok-line: var(--ok);
    --warn-bg: var(--warn-wash);  --warn-line: var(--warn);
    --err-bg: var(--bad-wash);    --err-line: var(--bad);
    --info: var(--text-2); --info-bg: var(--wash-strong); --info-line: var(--border-input);
    --purple: var(--text-2); --purple-bg: var(--wash-strong); --purple-line: var(--border-input);
    --teal: var(--text-2); --teal-bg: var(--wash-strong);
    --code-bg: var(--code);
    --code-ink: var(--text);
    --on-dark: var(--text);
    /* shell.css aliases */
    --bg-2: var(--surface);
    --bg-3: var(--surface-3);
    --line: var(--border);
    --line-strong: var(--border-strong);
    --cat-house: var(--accent); --cat-spicy: var(--accent); --cat-compliance: var(--grc-text);
    --cat-side: var(--ok); --cat-workflow: var(--text-2);
    /* typography: one professional family pair */
    --font-sans: var(--font-ui);
    --font-serif: var(--font-ui);
    --font-display: var(--font-ui);
    --font-body: var(--font-ui);
    --font-heading: var(--font-ui);
    --font-accent: var(--font-ui);
    --font-mono: var(--font-code);
    --radius: var(--r-sm);

    scroll-padding-top: 0;
    height: 100%;
}

/* ── Page frame: the page never scrolls, panes do ───────────────────── */
html[data-ui="control"] body {
    --rail-w: 236px;
    --top-h: 72px;
    --foot-h: 56px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --pad: 24px;
    margin: 0;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
}
html[data-ui="control"] body[data-cx-page="tool"] { --rail-w: 72px; --top-h: 64px; }

/* Classic chrome off; new chrome on (it ships with [hidden] for no-JS). */
html[data-ui="control"] #site-header,
html[data-ui="control"] .cr-uisw--header,
html[data-ui="control"] .cr-uisw--footer { display: none; }
html[data-ui="control"] .cx-rail[hidden],
html[data-ui="control"] .cx-top[hidden],
html[data-ui="control"] .cx-foot[hidden] { display: flex; }

html[data-ui="control"] body > .container {
    position: fixed;
    top: var(--top-h);
    bottom: calc(var(--foot-h) + var(--safe-b));
    left: var(--rail-w);
    right: 0;
    max-width: none;
    margin: 0;
    padding: var(--pad);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
html[data-ui="control"] body > .container > main { max-width: 1180px; margin: 0 auto; }

/* Links: accent, at the same specificity as the classic `a` rule, so any
   component rule (cards, nav, buttons) still wins. */
:where(html[data-ui="control"]) a { color: var(--accent); }
:where(html[data-ui="control"]) a:hover { color: var(--accent-hover); }
/* Links in running text are underlined, not told apart by colour alone (WCAG 1.4.1). */
:where(html[data-ui="control"]) :is(p, li, dd, td, figcaption) > a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ── Focus, selection, motion ─────────────────────────────────────── */
html[data-ui="control"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ui="control"] ::selection { background: var(--accent); color: var(--on-accent); }
html[data-ui="control"] .skip-link { background: var(--accent); color: var(--on-accent); border-radius: var(--r-sm); }

/* ── Shared bits ──────────────────────────────────────────────────── */
html[data-ui="control"] .cx-ico { width: 22px; height: 22px; flex: none; }
html[data-ui="control"] .cx-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: none; padding: 0;
    background: transparent; color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer;
}
html[data-ui="control"] .cx-iconbtn:hover { background: var(--surface-2); }
html[data-ui="control"] .cx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
html[data-ui="control"] .cx-mode { display: inline-flex; align-items: center; gap: 8px; }
html[data-ui="control"] .cx-mode { color: var(--text-2); }
html[data-ui="control"] .cx-mode--browser .cx-dot { background: var(--ok-fill); }
html[data-ui="control"] .cx-mode--server .cx-dot { background: var(--signal); }
html[data-ui="control"] .cx-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: none;
    font-family: var(--font-kanji); font-size: 15px; font-weight: 400; line-height: 1;
    color: var(--accent); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px;
}
html[data-ui="control"] .cx-badge:not(:lang(ja)) { letter-spacing: 0; }
html[data-ui="control"] .cx-badge .cx-ico { width: 18px; height: 18px; stroke-width: 1.75; }

/* ── Left rail ────────────────────────────────────────────────────── */
html[data-ui="control"] .cx-rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
    width: var(--rail-w);
    flex-direction: column; gap: 4px;
    padding: 16px 10px calc(12px + var(--safe-b));
    background: var(--rail);
    border-right: 1px solid var(--border);
    overflow-y: auto; overscroll-behavior: contain;
}
html[data-ui="control"] .cx-rail__head { display: flex; align-items: center; gap: 8px; min-height: 56px; margin-bottom: 8px; }
html[data-ui="control"] .cx-brand {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: var(--tap);
    padding: 0 4px; color: var(--text); text-decoration: none; border-radius: var(--r-sm);
}
html[data-ui="control"] .cx-brand__logo { width: 40px; height: 40px; flex: none; border-radius: 10px; }
html[data-ui="control"] .cx-brand__text { display: flex; flex-direction: column; min-width: 0; }
html[data-ui="control"] .cx-brand__name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
html[data-ui="control"] .cx-brand__tag { font-size: 13px; color: var(--muted); line-height: 1.3; }
html[data-ui="control"] .cx-rail__close { display: none; }
html[data-ui="control"] .cx-rail__title {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 4px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
}
html[data-ui="control"] .cx-rail__title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
html[data-ui="control"] .cx-rail__title--more { margin-top: 14px; }
html[data-ui="control"] .cx-nav { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-ui="control"] .cx-nav > li { position: relative; z-index: 1; }
/* Selection plate: one element that glides to the active row (control.js
   sets --ind-y / --ind-h). Colour marks state only: the active badge lights
   up, the others stay quiet. */
html[data-ui="control"] .cx-nav > li.cx-nav__ind {
    position: absolute; z-index: 0; left: 0; right: 0; top: 0;
    height: var(--ind-h, 0px); transform: translateY(var(--ind-y, 0px));
    background: var(--surface); border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0; pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s ease;
}
html[data-ui="control"] .cx-nav > li.cx-nav__ind.is-on { opacity: 1; }
html[data-ui="control"] .cx-nav > li.cx-nav__ind.is-instant { transition: none; }
html[data-ui="control"] .cx-nav__row {
    display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 8px 0 4px;
    color: var(--text-2); text-decoration: none; border-radius: var(--r-md);
    font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
    transition: color 0.16s ease, background-color 0.16s ease;
}
html[data-ui="control"] .cx-nav__row:hover { background: var(--wash); color: var(--text); }
html[data-ui="control"] .cx-nav__row.is-active { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
html[data-ui="control"] .cx-nav--ind .cx-nav__row.is-active { box-shadow: none; }
html[data-ui="control"] .cx-nav--ind .cx-nav__row.is-active { background: transparent; }
html[data-ui="control"] .cx-nav__row .cx-badge {
    color: var(--muted); background: transparent; border-color: var(--border);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
html[data-ui="control"] .cx-nav__row:hover .cx-badge { color: var(--accent); border-color: var(--border-strong); }
html[data-ui="control"] .cx-nav__row.is-active .cx-badge { color: var(--accent); background: transparent; border-color: var(--border-strong); }
html[data-ui="control"] .cx-nav__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="control"] .cx-nav__n { font-family: var(--font-code); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 0.16s ease; }
html[data-ui="control"] .cx-nav__row.is-active .cx-nav__n { color: var(--text-2); }
html[data-ui="control"] .cx-nav__link {
    display: flex; align-items: center; min-height: var(--tap); padding: 0 8px 0 46px;
    color: var(--text-2); text-decoration: none; border-radius: var(--r-md); font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
    transition: color 0.16s ease, background-color 0.16s ease;
}
html[data-ui="control"] .cx-nav__link:hover { color: var(--text); background: var(--wash); }
html[data-ui="control"] .cx-nav__link.is-active { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
html[data-ui="control"] .cx-nav--ind .cx-nav__link.is-active { box-shadow: none; }
html[data-ui="control"] .cx-nav--ind .cx-nav__link.is-active { background: transparent; }
html[data-ui="control"] .cx-rail__foot { margin-top: auto; padding-top: 12px; }

/* Icon-only rail on tool pages (wide screens): names stay in the
   accessibility tree, only visually hidden. */
@media (min-width: 1024px) {
    html[data-ui="control"] body[data-cx-page="tool"] .cx-rail { padding-left: 10px; padding-right: 10px; align-items: center; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-rail__head { justify-content: center; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-brand { flex: none; padding: 0; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-brand__text,
    html[data-ui="control"] body[data-cx-page="tool"] .cx-nav__name {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-rail__title,
    html[data-ui="control"] body[data-cx-page="tool"] .cx-nav__n,
    html[data-ui="control"] body[data-cx-page="tool"] .cx-nav--more,
    html[data-ui="control"] body[data-cx-page="tool"] .cx-rail__title--more,
    html[data-ui="control"] body[data-cx-page="tool"] .cx-rail__foot { display: none; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-nav__row { width: 52px; min-height: 48px; justify-content: center; padding: 0; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-nav__row .cx-badge { width: 36px; height: 36px; background: transparent; border-color: transparent; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-nav__row.is-active .cx-badge { color: var(--accent); background: transparent; border-color: transparent; }
}

/* ── Top bar ──────────────────────────────────────────────────────── */
html[data-ui="control"] .cx-top {
    position: fixed; top: 0; left: var(--rail-w); right: 0; z-index: 20;
    height: var(--top-h);
    align-items: center; gap: 16px;
    padding: 0 var(--pad);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
html[data-ui="control"] .cx-top__burger,
html[data-ui="control"] .cx-top__brand { display: none; }
html[data-ui="control"] .cx-top__brand img { display: block; width: 32px; height: 32px; border-radius: 8px; }
html[data-ui="control"] .cx-search {
    display: flex; align-items: center; gap: 12px; flex: 1; max-width: 560px; min-height: 48px;
    padding: 0 16px; color: var(--muted); text-decoration: none;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
}
html[data-ui="control"] .cx-search:hover { border-color: var(--border-input); color: var(--text-2); }
html[data-ui="control"] .cx-search__label { flex: 1; }
html[data-ui="control"] .cx-kbd {
    font-family: var(--font-code); font-size: 12px; color: var(--muted);
    padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 6px;
}
/* Workspace switch: Tools | GRC, each with its accent dot. */
html[data-ui="control"] .cx-ws { display: flex; gap: 2px; padding: 2px; flex: none; background: var(--bg); border-radius: var(--r-md); }
html[data-ui="control"] .cx-ws__a {
    display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px;
    font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: var(--r-sm);
}
html[data-ui="control"] .cx-ws__a:hover { color: var(--text); background: var(--wash-strong); }
html[data-ui="control"] .cx-ws__a[aria-current="page"] { color: var(--text); font-weight: 600; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
html[data-ui="control"] .cx-ws__a .cx-dot { width: 7px; height: 7px; background: var(--signal); }
html[data-ui="control"] .cx-ws__a--grc .cx-dot { background: var(--grc); }
html[data-ui="control"] .cx-top__date { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Bottom strip ─────────────────────────────────────────────────── */
html[data-ui="control"] .cx-foot {
    position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 20;
    height: calc(var(--foot-h) + var(--safe-b));
    padding: 0 var(--pad) var(--safe-b);
    align-items: center; gap: 16px;
    background: var(--surface); border-top: 1px solid var(--border);
    font-size: 14px; color: var(--muted);
}
html[data-ui="control"] .cx-foot p { margin: 0; }
html[data-ui="control"] .cx-foot__promise { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="control"] .cx-foot__info {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 10px;
    font: inherit; color: var(--text-2); background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
html[data-ui="control"] .cx-foot__info .cx-ico { width: 18px; height: 18px; }
html[data-ui="control"] .cx-foot__info:hover, html[data-ui="control"] .cx-foot__info[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
html[data-ui="control"] .cx-foot .cx-legend { margin-left: auto; display: flex; gap: 20px; white-space: nowrap; }

/* Classic footer as a sheet above the strip (all links + legal note kept). */
html[data-ui="control"] #site-footer { display: none; }
html[data-ui="control"] #site-footer.is-sheet-open {
    display: block;
    position: fixed; left: var(--rail-w); right: 0; z-index: 40;
    bottom: calc(var(--foot-h) + var(--safe-b));
    max-height: min(72dvh, 620px); overflow: auto; overscroll-behavior: contain;
    margin: 0; padding: 8px 0 0;
    background: var(--surface); border-top: 1px solid var(--border-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
html[data-ui="control"] #site-footer .sf__inner { max-width: 1180px; }
html[data-ui="control"] #site-footer a { display: inline-flex; align-items: center; min-height: 32px; }
html[data-ui="control"] #site-footer li a { min-height: var(--tap); }

/* ── Design switch (both designs) ─────────────────────────────────── */
.cr-uisw {
    display: inline-flex; gap: 2px; padding: 2px;
    border: 1px solid var(--line-strong); border-radius: 12px;
}
.cr-uisw[hidden] { display: none; }
.cr-uisw__btn {
    min-height: 44px; min-width: 44px; padding: 0 12px;
    font: inherit; font-size: 14px; line-height: 1; white-space: nowrap;
    color: inherit; background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.cr-uisw__btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cr-uisw__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-uisw--footer { margin-top: 0.6rem; }
/* Classic header: only the way out ("New view"), compact, so the nav keeps its width. */
.cr-uisw--header { padding: 0; border: 0; }
.cr-uisw--header [data-cr-ui-set="classic"] { display: none; }
.cr-uisw--header .cr-uisw__btn { border: 1px solid var(--accent); color: var(--accent); font-size: 13px; font-weight: 600; padding: 0 8px; border-radius: var(--radius); }
/* The classic header row already runs out of width between 1024 and 1279px
   (pre-existing); there it lives in the Tools menu panel and the footer. Under 1024px the
   row is inside the hamburger menu, where it fits again. */
@media (min-width: 1024px) and (max-width: 1365.98px) { .cr-uisw--header { display: none !important; } }
.cr-uisw--mega { margin-top: 0.8rem; }
html[data-ui="control"] .cr-uisw--mega { display: none; }
html[data-ui="control"] .cr-uisw { border-color: var(--border); color: var(--text-2); background: var(--bg); border-radius: var(--r-md); }
html[data-ui="control"] .cr-uisw__btn { border-radius: var(--r-sm); }
html[data-ui="control"] .cr-uisw__btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
html[data-ui="control"] .cr-uisw__btn:not([aria-pressed="true"]):hover { background: var(--surface-2); color: var(--text); }
html[data-ui="control"] .cr-uisw--rail { width: 100%; }
html[data-ui="control"] .cr-uisw--rail .cr-uisw__btn { flex: 1; }

/* ── Live job progress (both designs; assets/js/job-progress.js) ─────
   One segment per real stage: done = dark, running = signal (measured fill
   or a moving block when the length is unknown), to do = track. */
.crp-host[hidden] { display: none; }
.crp-host { margin: 14px 0 0; container-type: inline-size; }
.crp {
    --crp-track: var(--surface-3, var(--cream-darker, #DEDCD5));
    --crp-done: var(--done, var(--ink, #3A3A36));
    --crp-now: var(--signal, var(--red, #E2580F));
    --crp-fail: var(--bad, var(--color-error, #B42318));
    display: flex; flex-direction: column; gap: 8px;
}
.crp__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.crp__label { font-weight: 600; color: var(--text, var(--ink)); min-width: 0; overflow-wrap: anywhere; }
.crp.is-over .crp__label { font-weight: 500; }
.crp__time { flex: none; font-family: var(--font-code, var(--font-mono, monospace)); font-size: 12px; color: var(--muted, var(--ink-muted)); font-variant-numeric: tabular-nums; }
.crp__bar { display: grid; grid-template-columns: repeat(var(--crp-n, 5), minmax(0, 1fr)); gap: 4px; }
.crp__seg { position: relative; height: 6px; border-radius: 1px; background: var(--crp-track); overflow: hidden; }
.crp__seg > i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--crp-now); transition: width 0.2s linear; }
.crp__seg.is-done { background: var(--crp-done); }
.crp__seg.is-fail { background: var(--crp-fail); }
.crp__seg.is-indet > i { width: 40%; animation: crp-slide 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes crp-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.crp__steps { display: grid; grid-template-columns: repeat(var(--crp-n, 5), minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.3; color: var(--muted, var(--ink-muted)); }
.crp__steps li { min-width: 0; overflow-wrap: anywhere; }
.crp__steps li.is-now { color: var(--text, var(--ink)); font-weight: 600; }
.crp__steps li.is-done { color: var(--text-2, var(--ink-light)); }
.crp--compact .crp__steps { display: none; }
/* Too narrow for one name per segment: the label names the running step
   and the counter says which of how many. */
@container (max-width: 559.98px) { .crp__steps { display: none; } }
@media (max-width: 719.98px) { .crp__steps { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .crp__seg.is-indet > i { animation: none; width: 100%; opacity: 0.55; }
    .crp__seg > i { transition: none; }
}

/* Home "Running" module: scans running in the visitor's other tabs. */
html[data-ui="control"] .cxr[hidden] { display: none; }
html[data-ui="control"] .cxr__meta { font-family: var(--font-code); font-size: 12px; color: var(--muted); }
html[data-ui="control"] .cxr__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px 36px; }
html[data-ui="control"] .cxr__job { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html[data-ui="control"] .cxr__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html[data-ui="control"] .cxr__tool { font-size: 16px; font-weight: 600; }
html[data-ui="control"] .cxr__target { font-family: var(--font-code); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
html[data-ui="control"] .cxr__note { margin: 0; font-size: 12px; color: var(--muted); }

/* ── Utilities (both designs) ─────────────────────────────────────── */
.cx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html:not([data-ui="control"]) .cx-only { display: none !important; }
html[data-ui="control"] .cx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 0 18px;
    font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
    color: var(--text); background: transparent;
    border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer;
}
html[data-ui="control"] .cx-btn:hover { background: var(--surface-2); border-color: var(--border-input); }
/* Main action: near-black with a signal dot, like a power button (one per screen). */
html[data-ui="control"] .cx-btn--primary { background: var(--ink-btn); color: var(--on-ink); border-color: var(--ink-btn); }
html[data-ui="control"] .cx-btn--primary::before,
html[data-ui="control"] .cxo__go::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
html[data-ui="control"] .cx-btn--primary:hover { background: #000; border-color: #000; }

/* ── Home: omnibox in the top bar ─────────────────────────────────── */
html[data-ui="control"] .cxo {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; max-width: 980px;
    min-height: 52px; margin: 0; padding: 4px 4px 4px 16px;
    background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-lg);
}
html[data-ui="control"] .cxo:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ui="control"] .cxo > .cx-ico { color: var(--muted); }
html[data-ui="control"] .cxo input[type="search"] {
    flex: 1; min-width: 0; min-height: var(--tap); margin: 0; padding: 0;
    font-family: var(--font-code); font-size: 16px; color: var(--text);
    background: transparent; border: 0; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
}
html[data-ui="control"] .cxo input[type="search"]::placeholder { color: var(--muted); opacity: 1; font-family: var(--font-ui); }
html[data-ui="control"] .cxo__detect { flex: none; max-width: 46%; min-width: 0; }
html[data-ui="control"] .cxo__detect[hidden] { display: none; }
html[data-ui="control"] .cxo__chip {
    display: flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 14px;
    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 14px; color: var(--text-2); text-decoration: none;
    background: var(--surface-3); border-radius: var(--r-sm);
}
html[data-ui="control"] .cxo__chip strong { color: var(--text); font-weight: 600; }
html[data-ui="control"] a.cxo__chip:hover { color: var(--text); background: var(--border); }
html[data-ui="control"] .cxo__go {
    flex: none; min-height: var(--tap); padding: 0 20px;
    font: inherit; font-size: 16px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--on-ink); background: var(--ink-btn); border: 0; border-radius: var(--r-md); cursor: pointer;
}
html[data-ui="control"] .cxo__go:hover { background: #000; }

/* Narrow / portrait: the detection chip drops under the omnibox like an
   autocomplete hint (out of flow: no shift, the input keeps its width). */
@media (orientation: portrait), (max-width: 1023.98px) {
    html[data-ui="control"] .cxo { position: relative; }
    html[data-ui="control"] .cxo__detect { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; max-width: 100%; }
    html[data-ui="control"] .cxo__chip { border: 1px solid var(--border-strong); box-shadow: 0 6px 16px rgba(28, 28, 26, .12); }
}

/* ── Home: control-center grid ────────────────────────────────────── */
html[data-ui="control"] body[data-cx-page="home"] > .container > main { max-width: none; }
html[data-ui="control"] body[data-cx-page="home"] main > :not(.cxh) { display: none !important; }
html[data-ui="control"] .cxh[hidden] { display: grid; }
html[data-ui="control"] .cxh {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch;
    min-height: 100%;
}
html[data-ui="control"] .cxh__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html[data-ui="control"] .cxh__sec { padding: 18px 20px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
html[data-ui="control"] .cxh__sec[hidden], html[data-ui="control"] .cxh__more[hidden] { display: none; }
html[data-ui="control"] .cxh__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
html[data-ui="control"] .cxh__label {
    margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
}
/* Rams look: no kanji ornaments (the rail badges are line icons). */
html[data-ui="control"] .cxh__jp,
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] .jp-label { display: none; }
html[data-ui="control"] .cxh__more {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px;
    font-size: 14px; color: var(--accent); text-decoration: none; white-space: nowrap;
}
html[data-ui="control"] .cxh__more:hover { text-decoration: underline; }
html[data-ui="control"] .cxh__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
html[data-ui="control"] .cxh__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-ui="control"] .cxh__grid > li { display: flex; min-width: 0; }
html[data-ui="control"] .cxh__empty { grid-column: 1 / -1; color: var(--muted); }
html[data-ui="control"] .cxt {
    display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; min-height: 132px;
    padding: 14px 16px; text-decoration: none; color: var(--text);
    background: var(--tile); border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
html[data-ui="control"] .cxt:hover { border-color: var(--border-strong); background: #fff; }
html[data-ui="control"] .cxt__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
html[data-ui="control"] .cxt__desc {
    font-size: 14px; line-height: 1.4; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-ui="control"] .cxt .cx-mode { margin-top: auto; font-size: 13px; }
html[data-ui="control"] .cxt--flow { min-height: 112px; }
html[data-ui="control"] .cxt--flow .cxt__name { font-size: 17px; }

html[data-ui="control"] .cxh__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Modules: panels with a caps label; Today's set uses count marks (one per real item). */
html[data-ui="control"] .cxs {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
html[data-ui="control"] .cxs:last-child { flex: 1; }
html[data-ui="control"] .cxs p { margin: 0; }
html[data-ui="control"] .cxs__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
html[data-ui="control"] .cxs__head .cxh__more { min-height: 32px; font-size: 13px; color: var(--text-2); }
html[data-ui="control"] .cxs__count { font-family: var(--font-code); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
html[data-ui="control"] .cx-marks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
html[data-ui="control"] .cx-marks > span { height: 6px; border-radius: 1px; background: var(--surface-3); transition: background-color 0.2s ease; }
html[data-ui="control"] .cx-marks > span.is-done { background: var(--done); }
html[data-ui="control"] .cxs__set, html[data-ui="control"] .cxs__list { list-style: none; margin: 0; padding: 0; }
html[data-ui="control"] .cxs__set li + li, html[data-ui="control"] .cxs__list li + li { border-top: 1px solid var(--line-soft); }
html[data-ui="control"] .cxs__set a {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: var(--tap); padding: 10px 0; color: var(--text); text-decoration: none;
}
html[data-ui="control"] .cxs__ring { width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--done); transition: background-color 0.2s ease; }
html[data-ui="control"] .cxs__set a.is-done .cxs__ring { background: var(--done); }
html[data-ui="control"] .cxs__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-ui="control"] .cxs__state { font-family: var(--font-code); font-size: 12px; color: var(--muted); }
html[data-ui="control"] .cxs__cve { font-family: var(--font-code); font-weight: 500; }
html[data-ui="control"] .cxs__flag { font-size: 12px; font-weight: 600; color: var(--bad); }
html[data-ui="control"] .cxs__full { align-self: flex-start; min-height: 32px; padding: 0; font-size: 13px; color: var(--text-2); }
html[data-ui="control"] .cxs__list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; min-height: var(--tap); text-decoration: none; }
html[data-ui="control"] .cxs__list--dated a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; }
html[data-ui="control"] .cxs__date { grid-row: span 2; padding-top: 2px; font-family: var(--font-code); font-size: 12px; color: var(--muted); white-space: nowrap; }
html[data-ui="control"] .cxs__name { font-size: 15px; font-weight: 600; color: var(--text); }
html[data-ui="control"] .cxs__note { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html[data-ui="control"] :is(.cxs__list, .cxs__set) a:hover .cxs__name { color: var(--accent); }

@media (min-width: 1024px) and (max-width: 1279.98px) {
    /* the wide rail leaves no room for the promise next to the switch + legend (it stays in the footer sheet) */
    html[data-ui="control"] body:not([data-cx-page="tool"]) .cx-foot__promise { display: none; }
}
@media (max-width: 1279.98px) {
    html[data-ui="control"] .cxh { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="control"] .cxh__side { display: none; }
}
@media (orientation: portrait), (max-width: 899.98px) {
    html[data-ui="control"] .cxh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="control"] .cxh { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="control"] .cxt { min-height: 112px; }
    html[data-ui="control"] .cxh__side { display: flex; }
    html[data-ui="control"] .cxs:last-child { flex: none; }
}
@media (max-width: 719.98px) {
    html[data-ui="control"] .cxo { padding-left: 12px; min-height: 48px; }
    html[data-ui="control"] .cxo > .cx-ico { display: none !important; }
    html[data-ui="control"] .cxo__detect { left: auto; right: 0; max-width: calc(100vw - 32px); }
    html[data-ui="control"] .cxo__go { padding: 0 14px; font-size: 15px; }
    html[data-ui="control"] .cxt { min-height: 104px; padding: 12px; }
    html[data-ui="control"] .cxh__grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
    html[data-ui="control"] .cxh__grid { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="control"] .cxt { min-height: 0; }
}

/* ── Tool pages: the workspace (built by control.js from the tool's own nodes) ── */
/* Until the workspace is mounted the tool body stays invisible (no layout
   shift); if the script never runs, it is revealed after 1.5 s anyway. */
@keyframes cx-reveal { to { visibility: visible; } }
html[data-ui="control"]:not(.cx-ws-ready) body[data-cx-page="tool"] #main-content { visibility: hidden; animation: cx-reveal 0s 1.5s forwards; }
html[data-ui="control"] body[data-cx-page="tool"] > .container > main { max-width: none; }
html[data-ui="control"] .cx-parts { display: none !important; }
/* Emptied wrappers stay rendered (clipped, not display:none) so their own
   show/hide state (modes, tabs) can still be read by the followers. */
html[data-ui="control"] main[data-cx-fit="split"] > :not(.cxw),
html[data-ui="control"] main[data-cx-fit="wide"] > :not(.cxw) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; }
html[data-ui="control"] .cx-off { display: none !important; }

html[data-ui="control"] .cxw__label {
    margin: 0 0 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
}

/* Header row: breadcrumb / H1 · mode chip · share · star */
html[data-ui="control"] .cxw .tool-header {
    display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0; padding: 8px var(--pad);
    text-align: left; background: var(--bg); border-bottom: 1px solid var(--border);
}
html[data-ui="control"] .cxw .tool-header > * { margin: 0; }
html[data-ui="control"] .cxw .tool-header .back-link,
html[data-ui="control"] .cxw .tool-header .cr-pin-btn,
html[data-ui="control"] .cxw .tool-header .cr-badge,
html[data-ui="control"] .cxw .tool-header .tool-icon-large { display: none !important; }
html[data-ui="control"] .cxw .tool-header h1 {
    flex: 0 1 auto; min-width: 0; font-family: var(--font-ui); font-size: 22px; font-weight: 600; line-height: 1.25;
    color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ui="control"] .cx-crumb {
    display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: var(--tap);
    font-size: 15px; color: var(--muted); text-decoration: none; white-space: nowrap;
}
html[data-ui="control"] .cx-crumb:hover { color: var(--text); }
html[data-ui="control"] .cx-chip {
    margin-left: auto !important; flex: 0 1 auto; min-width: 0; min-height: 36px; padding: 0 14px;
    font-size: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
html[data-ui="control"] .cx-chip__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="control"] .cxw .tool-header .cx-chip { order: 1; }
html[data-ui="control"] .cxw .tool-header .share-wrapper { flex: none; order: 2; }
html[data-ui="control"] .cxw .tool-header .cx-star { order: 3; }
html[data-ui="control"] .cxw button, html[data-ui="control"] .cxw .btn, html[data-ui="control"] .cxw label,
html[data-ui="control"] .cxw .mode-tab { font-family: var(--font-ui); }
/* Share: an icon button next to the star (the label stays as its accessible name). */
html[data-ui="control"] .cxw .tool-header .share-trigger {
    width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; justify-content: center;
    color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
html[data-ui="control"] .cxw .tool-header .share-trigger:hover { background: var(--surface-2); }
html[data-ui="control"] .cxw .tool-header .share-trigger__icon { width: 20px; height: 20px; }
html[data-ui="control"] .cxw .tool-header .share-trigger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html[data-ui="control"] .cx-star { width: var(--tap); height: var(--tap); }
html[data-ui="control"] .cx-star[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
html[data-ui="control"] .cx-star[aria-pressed="true"] .cx-ico { fill: currentColor; }

/* Panes */
html[data-ui="control"] .cxw__in { padding: 20px var(--pad); min-width: 0; }
html[data-ui="control"] .cxw__in > * { max-width: 100%; }
/* The input pane is narrow whatever the viewport, so layouts the tools size by
   viewport media queries get their one-column form here (container query). */
html[data-ui="control"] .cxw__in { container: cx-in / inline-size; }
html[data-ui="control"] .cxw__in :is(select, textarea, input[type="file"]) { max-width: 100%; }
html[data-ui="control"] .cxw__in :is(.mode-tabs, .cdb-filters, .cdb-fw-pills) { flex-wrap: wrap; }
html[data-ui="control"] .cxw__in .mode-tab { white-space: normal; flex-shrink: 1; max-width: 100%; }
html[data-ui="control"] .cxw__in :is(fieldset, :has(> select)) { min-width: 0; }
html[data-ui="control"] .cxw__in .regex-pattern-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
html[data-ui="control"] .cxw__in .regex-pattern-row > input:not(.regex-flags) { flex: 1 1 auto; width: auto; }
html[data-ui="control"] .cxw__in .regex-pattern-row > #regexPattern { min-width: 0; }
html[data-ui="control"] .cxw__in .regex-pattern-row > .regex-flags { flex: 0 0 64px; width: 64px; }
@container cx-in (max-width: 560px) {
    html[data-ui="control"] .cxw__in :is(.cb-row, .irg-row, .cm-filter-grid, .tprm-keep, .pdg-keep, .tz-input-grid, .tri-grid, .totp-settings) { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="control"] .cxw__in div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
html[data-ui="control"] .cxw__in .tool-input-section,
html[data-ui="control"] .cxw__in .algorithm-section { margin: 0 0 16px; padding: 0; background: transparent; border: 0; box-shadow: none; }
html[data-ui="control"] .cxw__in textarea,
html[data-ui="control"] .cxw__in input[type="text"],
html[data-ui="control"] .cxw__in input[type="url"],
html[data-ui="control"] .cxw__in input[type="search"],
html[data-ui="control"] .cxw__in :is(input:not([type]), input[type="number"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]),
html[data-ui="control"] .cxw__in select {
    min-height: var(--tap); background: var(--surface); color: var(--text);
    border: 1px solid var(--border-input); border-radius: var(--r-md); font-family: var(--font-code); font-size: 15px;
}
html[data-ui="control"] .cxw__in label:has(> input[type="checkbox"]),
html[data-ui="control"] .cxw__in label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; min-height: var(--tap); margin: 0; }
html[data-ui="control"] .cxw__in .options-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
/* "Field + button" rows: the field keeps a usable width, the button wraps below when the pane is narrow. */
html[data-ui="control"] .cxw__in :is(div, form, span):has(> :is(input[type="text"], input[type="url"], input[type="search"], input:not([type]))):has(> :is(button, .btn)) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-ui="control"] .cxw__in :is(div, form, span):has(> :is(button, .btn)) > :is(input[type="text"], input[type="url"], input[type="search"], input:not([type])) { flex: 1 1 200px; width: auto; min-width: 0; margin: 0; }
/* touch targets: every remaining control in the input pane is at least 44px tall */
html[data-ui="control"] .cxw__in :is(button, input[type="color"], input[type="range"], input[type="file"]:not(.sr-only)) { min-height: var(--tap); }
html[data-ui="control"] .cxw__in input[type="color"] { min-width: var(--tap); }
html[data-ui="control"] .cxw__in input[type="checkbox"],
html[data-ui="control"] .cxw__in input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
html[data-ui="control"] .cxw .btn { min-height: var(--tap); border-radius: var(--r-md); }
html[data-ui="control"] .cxw__in .btn-primary { min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 700; }
html[data-ui="control"] .cxw .mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; }
html[data-ui="control"] .cxw .mode-tab { min-height: var(--tap); border-radius: var(--r-sm); }

html[data-ui="control"] .cxw__out { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
html[data-ui="control"] .cxw__tabs { display: flex; gap: 4px; padding: 8px var(--pad) 0; border-bottom: 1px solid var(--border); flex: none; }
html[data-ui="control"] .cxw__tab {
    min-height: var(--tap); padding: 0 16px; margin-bottom: -1px;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
    background: transparent; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; cursor: pointer;
}
html[data-ui="control"] .cxw__tab:hover { color: var(--text); }
html[data-ui="control"] .cxw__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
html[data-ui="control"] .cxw__panels { flex: 1; min-height: 0; position: relative; }
html[data-ui="control"] .cxw__panel { padding: 20px var(--pad) 24px; }
html[data-ui="control"] .cxw__panel[hidden] { display: none; }
html[data-ui="control"] .cxw__panel > * { max-width: 100%; }
html[data-ui="control"] .cxw__panel:focus-visible { outline-offset: -2px; }
html[data-ui="control"] .cxw__empty { margin: 8px 0; padding: 20px; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
html[data-ui="control"] .cxw__empty[hidden] { display: none; }
html[data-ui="control"] .cxw__panel--guide .lead { font-size: 16px; color: var(--text-2); margin: 0 0 16px; }
html[data-ui="control"] .cxw__panel--guide > .tool-guide,
html[data-ui="control"] .cxw__panel--guide > .tool-faq,
html[data-ui="control"] .cxw__panel--guide > .related-tools,
html[data-ui="control"] .cxw__panel--guide > .gl-related,
html[data-ui="control"] .cxw__panel--guide > .cr-use-next { margin: 0 0 24px; max-width: 860px; }

html[data-ui="control"] .cxw__bar {
    display: flex; align-items: center; gap: 12px; flex: none; min-height: 72px;
    padding: 12px var(--pad) calc(12px + var(--safe-b, 0px)); background: var(--bg); border-top: 1px solid var(--border);
}
html[data-ui="control"] .cxw__acts { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
html[data-ui="control"] .cxw__acts > * { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html[data-ui="control"] .cxw__acts .btn { min-height: 48px; padding: 0 18px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
html[data-ui="control"] .cxw__acts .btn:hover { background: var(--surface-2); }
html[data-ui="control"] .cx-next { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
html[data-ui="control"] .cx-next:hover { text-decoration: underline; }

/* Page fit: tools without an input/result split keep their own page under the header row. */
html[data-ui="control"] .cxw--page { margin: 0 calc(-1 * var(--pad)) 16px; }
/* legibility floor for the shared small-print classes (tool-specific ones are left as they are) */
html[data-ui="control"] body[data-cx-page="tool"] :is(.related-tool-desc, .cr-use-next__card-reason, .cr-use-next__send, .cr-use-next__jp, .tool-input-section .input-hint, .tool-input-section .hint, .scope-note, .share-trigger__label) { font-size: 12px; }
/* links inside running text are told apart by more than colour (WCAG 1.4.1) */
html[data-ui="control"] body[data-cx-page="tool"] #main-content :is(p, li, dd, td, blockquote, span, small, em, strong) > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
html[data-ui="control"] .cxw__intro { padding: 12px var(--pad) 0; max-width: 900px; color: var(--text-2); }
html[data-ui="control"] .cxw__intro > * { margin: 0 0 8px; }
html[data-ui="control"] .cxw__intro .lead { font-size: 16px; }
html[data-ui="control"] main[data-cx-fit="page"] .tool-header { border-bottom: 0; }
html[data-ui="control"] .cxw--page .cxw__head { border-bottom: 1px solid var(--border); }

html[data-ui="control"] .cxw__recent { margin-top: 24px; }
html[data-ui="control"] .cxw__recent[hidden] { display: none; }
html[data-ui="control"] .cxw__recent ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
html[data-ui="control"] .cxw__recent li { border-bottom: 1px solid var(--border); }
html[data-ui="control"] .cxw__recent-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0;
    font: inherit; color: var(--text); background: transparent; border: 0; cursor: pointer; text-align: left;
}
html[data-ui="control"] .cxw__recent-row:hover .cxw__recent-v { color: var(--accent); }
html[data-ui="control"] .cxw__recent-v { font-family: var(--font-code); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="control"] .cxw__recent-tag { font-weight: 700; color: var(--warn); }
html[data-ui="control"] .cxw__recent-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* Landscape / desktop: one screen, panes scroll */
@media (min-width: 1024px) {
    html[data-ui="control"] body[data-cx-page="tool"] { --top-h: 0px; }
    html[data-ui="control"] body[data-cx-page="tool"] .cx-top { display: none; }
    html[data-ui="control"] body[data-cx-page="tool"] > .container { padding: 0; overflow: hidden; }
    html[data-ui="control"] body[data-cx-page="tool"] > .container:has(main[data-cx-fit="none"]) { padding: var(--pad); overflow: auto; }
    html[data-ui="control"] body[data-cx-page="tool"] > .container:has(main[data-cx-fit="page"]) { overflow: auto; }
    html[data-ui="control"] body[data-cx-page="tool"] main:has(> .cxw) { height: 100%; }
    html[data-ui="control"] body[data-cx-page="tool"] main[data-cx-fit="page"] { height: auto; padding: 0 var(--pad) var(--pad); }
    html[data-ui="control"] .cxw.cxw--page { display: block; height: auto; position: sticky; top: 0; z-index: 5; background: var(--bg); }
    html[data-ui="control"] .cxw {
        display: grid; height: 100%;
        grid-template-columns: 380px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }
    html[data-ui="control"] .cxw__head { grid-column: 1 / -1; }
    html[data-ui="control"] .cxw__in { overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--border); }
    html[data-ui="control"] .cxw__panels { overflow: auto; overscroll-behavior: contain; }
    /* Wide tools (maps, editors, big tables): input on top, results full width */
    html[data-ui="control"] .cxw--wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
    html[data-ui="control"] .cxw--wide .cxw__in {
        display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; align-items: start;
        border-right: 0; border-bottom: 1px solid var(--border); max-height: 40dvh; padding-top: 14px; padding-bottom: 6px;
    }
    html[data-ui="control"] .cxw--wide .cxw__in > * { grid-column: 1; }
    html[data-ui="control"] .cxw--wide .cxw__in > .cxw__recent { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    html[data-ui="control"] .cxw { grid-template-columns: 340px minmax(0, 1fr); }
    html[data-ui="control"] .cxw--wide { grid-template-columns: minmax(0, 1fr); }
    html[data-ui="control"] .cx-crumb { display: none; }
}

/* Portrait tablet / phone: one column, the bar stays at the bottom */
@media (max-width: 1023.98px) {
    html[data-ui="control"] body[data-cx-page="tool"] > .container { padding: 0; }
    html[data-ui="control"] body[data-cx-page="tool"] > .container:has(main[data-cx-fit="none"]) { padding: var(--pad); }
    html[data-ui="control"] body[data-cx-page="tool"] main[data-cx-fit="page"] { padding: 0 var(--pad) var(--pad); }
    html[data-ui="control"] .cxw { display: flex; flex-direction: column; min-height: 100%; }
    html[data-ui="control"] .cxw.cxw--page { display: block; min-height: 0; }
    html[data-ui="control"] .cxw .tool-header { flex-wrap: wrap; row-gap: 4px; }
    html[data-ui="control"] .cx-crumb { display: none; }
    html[data-ui="control"] .cxw__in { border-bottom: 1px solid var(--border); }
    html[data-ui="control"] .cxw__out { flex: 1; }
    /* Sticky bottom bar of equal buttons: the tool's actions + Next */
    html[data-ui="control"] .cxw__bar { position: sticky; bottom: 0; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
    html[data-ui="control"] .cxw__acts, html[data-ui="control"] .cxw__acts > :not(.cx-off) { display: contents !important; }
    html[data-ui="control"] .cxw__acts .btn, html[data-ui="control"] .cxw__bar .cx-next {
        width: 100%; min-width: 0; min-height: 52px; padding: 0 8px; margin: 0;
        justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        border: 1px solid var(--border-strong); border-radius: var(--r-md);
    }
    html[data-ui="control"] .cxw__bar .cx-next { color: var(--accent); }
}
@media (max-width: 719.98px) {
    html[data-ui="control"] .cxw .tool-header h1 { font-size: 19px; white-space: normal; flex-basis: 100%; }
    html[data-ui="control"] .cx-chip { margin-left: 0 !important; }
    html[data-ui="control"] .cx-chip__x { display: none; }
    html[data-ui="control"] .cxw__acts .btn, html[data-ui="control"] .cxw__bar .cx-next { white-space: normal; line-height: 1.2; font-size: 14px; }
    html[data-ui="control"] .cxw .tool-header .share-wrapper { margin-left: auto; }
}

/* ── Tool window as panels (Rams phase 3): input and result are two plates
   on the page ground, the header row stays on the ground. ────────────── */
html[data-ui="control"] .cxw:not(.cxw--page) { background: var(--bg); }
html[data-ui="control"] .cxw:not(.cxw--page) .cxw__in,
html[data-ui="control"] .cxw__out {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
html[data-ui="control"] .cxw__out { overflow: clip; }
html[data-ui="control"] .cxw:not(.cxw--page) .cxw__in::before {
    content: "Input" / ""; display: block; margin: 0 0 14px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
html[data-ui="control"] .cxw--wide .cxw__in::before { grid-column: 1; }
html[data-ui="control"] .cxw__tabs { background: var(--surface-2); padding-top: 6px; }
html[data-ui="control"] .cxw__tab[aria-selected="true"] { background: var(--surface); border-color: var(--border); border-bottom: 2px solid var(--accent); }
html[data-ui="control"] .cxw__bar { background: var(--surface); }
html[data-ui="control"] .cx-crumb { font-size: 14px; }
html[data-ui="control"] .cxw .tool-header .cx-chip { background: transparent; border-color: transparent; padding: 0 4px; color: var(--text-2); }
@media (min-width: 1024px) {
    html[data-ui="control"] .cxw:not(.cxw--page) { padding: 0 16px 16px; column-gap: 16px; }
    html[data-ui="control"] .cxw:not(.cxw--page) .cxw__head { margin: 0 -16px 16px; }
    html[data-ui="control"] .cxw:not(.cxw--page) .cxw__in { border-right: 1px solid var(--border); }
    html[data-ui="control"] .cxw--wide:not(.cxw--page) { row-gap: 16px; }
    html[data-ui="control"] .cxw--wide:not(.cxw--page) .cxw__head { margin-bottom: 0; }
    html[data-ui="control"] .cxw--wide .cxw__in { border-bottom: 1px solid var(--border); }
}
@media (max-width: 1023.98px) {
    html[data-ui="control"] .cxw:not(.cxw--page) { gap: 12px; padding-bottom: 12px; }
    html[data-ui="control"] .cxw:not(.cxw--page) .cxw__in,
    html[data-ui="control"] .cxw__out { margin: 0 12px; }
    html[data-ui="control"] .cxw__out { overflow: visible; }
}

/* The running job in the Result panel: step counter, segmented bar and a
   row per stage with the time the browser saw it take. */
html[data-ui="control"] .cxw__job[hidden] { display: none; }
html[data-ui="control"] .cxw__job { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--line-soft); container-type: inline-size; }
html[data-ui="control"] .crp--detail { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 10px; align-items: end; }
html[data-ui="control"] .crp--detail > .crp__top, html[data-ui="control"] .crp--detail > .crp__bar { grid-column: 2; }
html[data-ui="control"] .crp--detail > .crp__big {
    grid-row: 1 / span 2; font-family: var(--font-code); font-size: 34px; line-height: 1; font-weight: 500;
    color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
html[data-ui="control"] .crp--detail .crp__label { font-size: 15px; }
html[data-ui="control"] .crp--detail .crp__seg { height: 8px; }
html[data-ui="control"] .crp--detail > .crp__rows {
    grid-column: 1 / -1; display: block; margin: 4px 0 0; border-top: 1px solid var(--line-soft); font-size: 14px;
}
html[data-ui="control"] .crp__rows li {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted);
}
html[data-ui="control"] .crp__rows li:last-child { border-bottom: 0; }
html[data-ui="control"] .crp__rows li.is-done { color: var(--text-2); }
html[data-ui="control"] .crp__rows li.is-now { color: var(--text); font-weight: 600; }
html[data-ui="control"] .crp__rows li.is-fail { color: var(--bad); font-weight: 600; }
html[data-ui="control"] .crp__idx, html[data-ui="control"] .crp__dt { font-family: var(--font-code); font-size: 12px; font-variant-numeric: tabular-nums; }
html[data-ui="control"] .crp__idx { color: var(--muted); }
html[data-ui="control"] .crp__rows li.is-now .crp__idx { color: var(--accent); }
html[data-ui="control"] .crp--detail.is-single > .crp__big,
html[data-ui="control"] .crp--detail.is-single > .crp__rows { display: none; }
html[data-ui="control"] .crp--detail.is-single > :is(.crp__top, .crp__bar) { grid-column: 1 / -1; }
/* the stage rows stay on every width (the narrow-width rule hides the strip only) */
@container (max-width: 559.98px) { html[data-ui="control"] .crp--detail:not(.is-single) > .crp__rows { display: block; } }
@media (max-width: 719.98px) {
    html[data-ui="control"] .crp--detail:not(.is-single) > .crp__rows { display: block; }
    html[data-ui="control"] .crp--detail > .crp__big { font-size: 28px; }
}

/* ── Narrow widths: rail becomes a drawer ─────────────────────────── */
@media (max-width: 1023.98px) {
    html[data-ui="control"] body,
    html[data-ui="control"] body[data-cx-page="tool"] { --rail-w: 0px; --pad: 16px; --top-h: 64px; }
    html[data-ui="control"] .cx-rail {
        width: min(300px, 86vw); z-index: 60;
        transform: translateX(-100%); visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
        box-shadow: none;
    }
    html[data-ui="control"] .cx-rail.is-open { transform: none; visibility: visible; transition: transform 0.2s ease; }
    html[data-ui="control"] .cx-rail__close { display: inline-flex; }
    html[data-ui="control"] .cx-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
    html[data-ui="control"] .cx-top__burger,
    html[data-ui="control"] .cx-top__brand { display: inline-flex; }
    html[data-ui="control"] .cx-foot { gap: 8px; }
    html[data-ui="control"] .cx-foot .cr-uisw { display: none; } /* switch lives in the drawer */
}
@media (max-width: 719.98px) {
    html[data-ui="control"] .cx-top__date,
    html[data-ui="control"] .cx-ws, /* GRC stays one tap away in the drawer (Sections) */
    html[data-ui="control"] .cx-kbd,
    html[data-ui="control"] .cx-foot__promise { display: none; }
    html[data-ui="control"] .cx-legend { gap: 12px; }
    html[data-ui="control"] .cx-foot__info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
}

/* ── Hub pages (GRC, cheat sheets, glossary, awareness, certifications) ──
   One screen: a compact header row, the tab bar, one scrolling panel.
   control.js builds the tabs from [data-cx-hub-tab] marks (fit "hub"). */
html[data-ui="control"] body[data-cx-page="page"] > .container:has(main[data-cx-fit="hub"]) { overflow: hidden; padding-bottom: 0; }
html[data-ui="control"] main[data-cx-fit="hub"] { height: 100%; display: flex; flex-direction: column; }
html[data-ui="control"] main[data-cx-fit="hub"] > :not(.cx-hub--on):not(:has(.cx-hub--on)) { display: none !important; }
html[data-ui="control"] main[data-cx-fit="hub"] :has(.cx-hub--on),
html[data-ui="control"] main[data-cx-fit="hub"] > :has(.cx-hub--on),
html[data-ui="control"] .cx-hub--on {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0;
}
html[data-ui="control"] .cx-hub--on > *,
html[data-ui="control"] main[data-cx-fit="hub"] :has(.cx-hub--on) > :not(.cx-hub--on):not(:has(.cx-hub--on)) { flex: none; }
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] .page-disclaimer {
    flex-basis: 100%; padding: 0; margin: 2px 0 0; font-family: var(--font-ui); font-size: 12px; color: var(--muted); background: none; border: 0; letter-spacing: 0;
}
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-hide] { display: none !important; }
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px;
    margin: 0; padding: 0 0 12px; text-align: left; background: none; border: 0;
}
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] > * { margin: 0; }
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] h1 {
    font-family: var(--font-ui); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--text);
}
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] .tagline { flex-basis: 100%; font-size: 14px; color: var(--muted); max-width: none; }
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-bar] { margin: 0 0 10px; padding: 0; }
html[data-ui="control"] .cx-hub__tabs {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border);
}
html[data-ui="control"] .cx-hub__tab {
    flex: none; min-height: var(--tap); padding: 0 14px; margin-bottom: -1px; white-space: nowrap;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
    background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; cursor: pointer;
}
html[data-ui="control"] .cx-hub__tab:hover { color: var(--text); }
html[data-ui="control"] .cx-hub__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--hub-accent, var(--accent)); }
/* Section tint: a hub can opt into its category colour (data-cx-hub-tone). Chrome only — content keeps semantic colours. */
html[data-ui="control"] main[data-cx-fit="hub"]:has([data-cx-hub-tone="compliance"]) { --hub-accent: var(--cat-compliance); }
html[data-ui="control"] .cx-hub--q .cx-hub__tab { opacity: 0.6; }
html[data-ui="control"] .cx-hub--on .cx-hub__panels {
    flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 2px 24px;
}
html[data-ui="control"] .cx-hub__panel[hidden] { display: none; }
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] .cert-hero-cta { flex-basis: 100%; margin: 6px 0 0; }
html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] .cert-hero-cta .btn {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0;
}
@media (max-width: 1023.98px) {
    /* the tab bar scrolls sideways: fade its edge so more tabs read as "more" */
    html[data-ui="control"] .cx-hub__tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
    html[data-ui="control"] .cx-hub__tab { padding: 0 12px; }
}
@media (max-width: 719.98px) {
    html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] .tagline { display: none; }
    html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-head] h1 { font-size: 21px; }
    html[data-ui="control"] main[data-cx-fit="hub"] [data-cx-hub-bar] :is(.cs-label, .gl-label, .cs-count, .gl-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
html[data-ui="control"] .cx-hub__panel:focus-visible { outline-offset: -2px; }
html[data-ui="control"] .cx-hub__panel > :first-child { margin-top: 0; }
/* The tab names the part; its own heading is only needed while searching every tab. */
html[data-ui="control"] .cx-hub--on:not(.cx-hub--q) .cx-hub__panel > [data-cx-hub-tab]:is(h2, h3),
html[data-ui="control"] .cx-hub--on:not(.cx-hub--q) .cx-hub__panel > [data-cx-hub-tab] .cx-hub-h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-ui="control"] .cx-hub--q .cx-hub__panel + .cx-hub__panel { margin-top: 18px; }
/* Cards as dashboard tiles (same look as the home grid). */
html[data-ui="control"] .cx-hub--on .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0; }
html[data-ui="control"] .cx-hub--on .hub-card {
    display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 14px 16px; margin: 0; opacity: 1; transform: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); text-decoration: none; box-shadow: none;
}
html[data-ui="control"] .cx-hub--on a.hub-card:hover { border-color: var(--hub-accent, var(--border-input)); background: var(--surface-2); }
html[data-ui="control"] .cx-hub--on .hub-card .card-icon { display: none; }
html[data-ui="control"] .cx-hub--on .hub-card .card-title { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; margin: 0; }
html[data-ui="control"] .cx-hub--on .hub-card .card-desc {
    margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); max-height: 2.8em;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-ui="control"] .cx-hub--on .hub-card .card-meta { margin-top: auto; padding-top: 4px; }
html[data-ui="control"] .cx-hub--on .hub-card .format-badge { display: none; }

@media (prefers-reduced-motion: reduce) {
    html[data-ui="control"] *, html[data-ui="control"] *::before, html[data-ui="control"] *::after {
        transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
    }
}

/* Print: the content only, no chrome, normal flow. */
@media print {
    html[data-ui="control"] body { height: auto; overflow: visible; background: Canvas; color: CanvasText; }
    html[data-ui="control"] .cx-rail, html[data-ui="control"] .cx-top, html[data-ui="control"] .cx-foot, html[data-ui="control"] .cx-scrim { display: none !important; }
    html[data-ui="control"] body > .container { position: static; overflow: visible; padding: 0; }
    html[data-ui="control"] main[data-cx-fit="hub"], html[data-ui="control"] .cx-hub--on, html[data-ui="control"] .cx-hub--on .cx-hub__panels { display: block; height: auto; overflow: visible; }
    html[data-ui="control"] .cx-hub__tabs { display: none; }
    html[data-ui="control"] .cx-hub__panel[hidden] { display: block; }
}

/* ── GRC workspace overview (Rams phase 4): /grc first tab, new view only.
   Amber marks fills only (--grc); text stays ink or --grc-text (AA). ── */
/* empty marks: light track with a hairline, so the amber fill keeps 3:1 against it (1.4.11) */
html[data-ui="control"] .grc-ws { --gws-fill: var(--grc); --gws-track: var(--surface-2); }
html[data-ui="control"] .gws__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    padding: 14px 20px; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--grc); border-radius: var(--r-lg);
}
html[data-ui="control"] .gws__label {
    margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
}
html[data-ui="control"] .gws__eng-name { margin: 2px 0 0; font-size: 18px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
html[data-ui="control"] .gws__acts { display: flex; flex-wrap: wrap; gap: 10px; }
html[data-ui="control"] .gws__btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    color: var(--text); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-md); text-decoration: none; cursor: pointer;
}
html[data-ui="control"] .gws__btn:hover { background: var(--surface-2); color: var(--text); }
html[data-ui="control"] .gws__btn--ink { background: var(--ink-btn); color: var(--on-ink); border-color: var(--ink-btn); }
html[data-ui="control"] .gws__btn--ink:hover { background: #000; color: var(--on-ink); }
html[data-ui="control"] .gws__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html[data-ui="control"] .gws__panel { min-width: 0; padding: 16px 20px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
html[data-ui="control"] .gws__ph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
html[data-ui="control"] .gws__meta { font-family: var(--font-code); font-size: 12px; color: var(--muted); text-align: right; }
html[data-ui="control"] .gws__rows, html[data-ui="control"] .gws__tiers, html[data-ui="control"] .gws__risks,
html[data-ui="control"] .gws__levels, html[data-ui="control"] .gws__next { list-style: none; margin: 0; padding: 0; }

/* Readiness: name · n / total, then one mark per item */
html[data-ui="control"] .gws__row + .gws__row { border-top: 1px solid var(--line-soft); }
html[data-ui="control"] .gws__row-a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; color: var(--text); text-decoration: none;
}
html[data-ui="control"] .gws__row-a:hover .gws__row-name strong { text-decoration: underline; }
html[data-ui="control"] .gws__row-name { display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
html[data-ui="control"] .gws__row-sub { font-size: 13px; color: var(--muted); }
html[data-ui="control"] .gws__row-n { font-family: var(--font-code); font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; align-self: start; }
html[data-ui="control"] .gws__marks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 2px; height: 8px; }
html[data-ui="control"] .gws__marks > i { background: var(--gws-track); border-radius: 1px; box-shadow: inset 0 0 0 1px var(--border); }
html[data-ui="control"] .gws__marks > i.is-on { box-shadow: none; }
html[data-ui="control"] .gws__marks > i.is-on { background: var(--gws-fill); }

/* CSF tiers: 4 cells, filled up to the mean tier */
html[data-ui="control"] .gws__tier { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3.2em; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; }
html[data-ui="control"] .gws__tier + .gws__tier { border-top: 1px solid var(--line-soft); }
html[data-ui="control"] .gws__tier-name { min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="control"] .gws__tier-name b { display: inline-block; width: 2.2em; font-family: var(--font-code); font-weight: 600; color: var(--text); }
html[data-ui="control"] .gws__scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
html[data-ui="control"] .gws__scale > i {
    height: 10px; border-radius: 1px;
    background: linear-gradient(to right, var(--gws-fill) calc(var(--f, 0) * 100%), var(--gws-track) 0);
    box-shadow: inset 0 0 0 1px var(--border);
}
html[data-ui="control"] .gws__tier-v { font-family: var(--font-code); font-size: 13px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* Risk register */
html[data-ui="control"] .gws__levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
html[data-ui="control"] .gws__lvl { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); border-top: 3px solid var(--border-strong); }
html[data-ui="control"] .gws__lvl--critical { border-top-color: var(--bad); }
html[data-ui="control"] .gws__lvl--high { border-top-color: var(--signal); }
html[data-ui="control"] .gws__lvl--medium { border-top-color: var(--grc); }
html[data-ui="control"] .gws__lvl-k { font-size: 12px; color: var(--muted); }
html[data-ui="control"] .gws__lvl b { font-family: var(--font-code); font-size: 20px; font-weight: 500; color: var(--text); }
html[data-ui="control"] .gws__risk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
html[data-ui="control"] .gws__risk-t { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
html[data-ui="control"] .gws__risk-id { font-family: var(--font-code); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
html[data-ui="control"] .gws__step-t { min-width: 0; overflow-wrap: anywhere; }
html[data-ui="control"] .gws__pill { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
html[data-ui="control"] .gws__pill--critical { color: var(--bad); }
html[data-ui="control"] .gws__pill--high { color: var(--accent); }
html[data-ui="control"] .gws__pill--medium { color: var(--grc-text); }

/* Next steps */
html[data-ui="control"] .gws__next { counter-reset: gws; }
html[data-ui="control"] .gws__step + .gws__step { border-top: 1px solid var(--line-soft); }
html[data-ui="control"] .gws__step-a {
    display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 0;
    color: var(--text); text-decoration: none; font-size: 14px;
}
html[data-ui="control"] .gws__step-a::before { counter-increment: gws; content: counter(gws, decimal-leading-zero); font-family: var(--font-code); font-size: 12px; color: var(--muted); }
html[data-ui="control"] .gws__step-a:hover .gws__step-t { text-decoration: underline; }
html[data-ui="control"] .gws__step-tool { font-size: 12px; color: var(--grc-text); white-space: nowrap; }
html[data-ui="control"] .gws__empty { margin: 0; padding: 6px 0; font-size: 14px; color: var(--muted); }

html[data-ui="control"] .gws__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 16px 0 0; }
html[data-ui="control"] .gws__foot p { margin: 0; max-width: 70ch; font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
    html[data-ui="control"] .gws__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
    html[data-ui="control"] .gws__head, html[data-ui="control"] .gws__panel { padding-left: 14px; padding-right: 14px; }
    html[data-ui="control"] .gws__tier { grid-template-columns: 2.4em minmax(0, 1fr) 2.6em; }
    html[data-ui="control"] .gws__tier-name { font-size: 0; }
    html[data-ui="control"] .gws__tier-name b { font-size: 14px; }
    html[data-ui="control"] .gws__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui="control"] .gws__acts, html[data-ui="control"] .gws__acts .gws__btn { flex: 1 1 auto; justify-content: center; }
}