/* GroveSignal dashboard - "forest floor" theme.
   A canopy-dark sidebar over a pale lichen ground, moss-green accent, bark
   for secondary actions, rowan red for danger, autumn amber for warnings.
   Tokens: bare :root is the light palette; the media block covers "auto"
   (no explicit choice); the data-theme blocks are the manual toggle.
   Every colour goes through a token. System fonts only (the CSP has no
   font-src). NO transitions or animations anywhere - photosensitivity rule. */
:root {
    color-scheme: light dark;
    --bg: #f2f4ee;
    --card: #fbfcf9;
    --fg: #1b241d;
    --muted: #55655a;
    --line: #d5dccf;
    --border: #d5dccf;
    --border-strong: #b3bfb2;
    --accent: #2f6b45;
    --accent-strong: #24553a;
    --accent-soft: #e3eee5;
    --accent-bright: #8fd0a5;
    --on-accent: #ffffff;
    --secondary: #6b5a4a;
    --danger: #a53a3a;
    --danger-text: #a53a3a;
    --warn: #9a5f1c;
    --canopy: #1e3326;
    --canopy-fg: #dfe8e0;
    --canopy-muted: #9db3a2;
    --canopy-line: rgba(223, 232, 224, 0.14);
    --canopy-hover: rgba(223, 232, 224, 0.08);
    --canopy-active: #2f6b45;
    --input-bg: #ffffff;
    --code-bg: #e9eee6;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #101712; --card: #182119; --fg: #e3eae2; --muted: #9aa99e;
        --line: #2a362d; --border: #2a362d; --border-strong: #3b4a3f;
        --accent: #6fb98a; --accent-strong: #8fd0a5; --accent-soft: #1f3327; --on-accent: #0f1a13;
        --secondary: #7d6a58; --danger: #b44b4b; --danger-text: #d98080; --warn: #d4923f;
        --canopy: #0b120d; --canopy-fg: #d6e0d7; --canopy-muted: #8a9c8e;
        --input-bg: #121b15; --code-bg: #1f2a22;
    }
}
:root[data-theme="dark"] {
    --bg: #101712; --card: #182119; --fg: #e3eae2; --muted: #9aa99e;
    --line: #2a362d; --border: #2a362d; --border-strong: #3b4a3f;
    --accent: #6fb98a; --accent-strong: #8fd0a5; --accent-soft: #1f3327; --on-accent: #0f1a13;
    --secondary: #7d6a58; --danger: #b44b4b; --danger-text: #d98080; --warn: #d4923f;
    --canopy: #0b120d; --canopy-fg: #d6e0d7; --canopy-muted: #8a9c8e;
    --input-bg: #121b15; --code-bg: #1f2a22;
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    background: var(--bg);
    color: var(--fg);
}
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.9em; }
pre { background: var(--code-bg); padding: 0.6rem 0.75rem; border-radius: 0.4rem; overflow-x: auto; font-size: 0.82rem; }
details > summary { cursor: pointer; }
.shell { max-width: 60rem; margin: 0 auto; padding: 2rem 1rem; }

/* ---- Buttons ------------------------------------------------------------- */
/* One height for every button: .small only narrows the padding and the
   type, so a small and a normal button side by side line up. */
.button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.25rem; box-sizing: border-box;
    background: var(--accent);
    color: var(--on-accent);
    padding: 0.35rem 1.1rem;
    border-radius: 0.45rem;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
}
button.button { border: 0; cursor: pointer; font: inherit; font-weight: 600; margin: 0.2rem 0.3rem 0.2rem 0; }
.button:hover { background: var(--accent-strong); }
.button.small { padding: 0.25rem 0.65rem; font-size: 0.85rem; }
/* Toggle labels read "slider, then text" everywhere, whatever the DOM order. */
.card label:has(input[type="checkbox"]) > input[type="checkbox"] { order: -1; }
/* Two weights plus red: the filled accent is the main action of a card;
   "secondary" (alias "ghost") is a bordered, unfilled button for every
   other action - Cancel, Back, copy, export, customize, pause, the
   unselected side of a filter pair. Bark fill is no longer used on
   buttons, so red stands out as the one colour that means "destructive". */
/* Every button has a fill: solid accent for the main action, a soft
   accent tint for the rest, so a row of mixed buttons reads as one set. */
.button.secondary, .button.ghost { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid transparent; }
button.button.secondary, button.button.ghost { border: 1px solid transparent; }
.button.secondary:hover, .button.ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.button.danger { background: var(--danger); color: #ffffff; }
.button.danger:hover { opacity: 0.88; }

/* ---- Cards and text ------------------------------------------------------ */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
}
.card h2 { margin-top: 0; }
.card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 600;
}
.card h3 + .hint { margin-top: 0; margin-bottom: 0.75rem; }
.card h4 { margin: 0.75rem 0 0.35rem; font-size: 0.95rem; }
.error { color: var(--danger-text); }
.ok { color: var(--accent); }
.hint { font-size: 0.88rem; color: var(--muted); }
/* Display name with the @login on its own line beneath it (viewer and follower lists). */
.name-stack { display: inline-flex; flex-direction: column; line-height: 1.25; vertical-align: middle; }
.name-stack .hint { font-size: 0.8rem; font-weight: 400; }

/* ---- Forms --------------------------------------------------------------- */
form.card label { display: block; margin: 0.5rem 0 0.15rem; font-weight: 500; }
form.card input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.4rem;
    background: var(--input-bg);
    color: inherit;
    font: inherit;
}
form.card button { margin-top: 0.9rem; }
/* Inside ordinary cards a plain label is a field caption (own line); a
   label wrapping a checkbox stays inline so several fit on one row. */
.card label:not(:has(input)) { display: block; margin: 0.6rem 0 0.15rem; font-weight: 500; font-size: 0.92rem; }
.card label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.3rem 1rem 0.3rem 0; }
.card input[type="text"], .card input[type="number"], .card input[type="email"], .card input[type="url"], .card input[type="password"],
.card select, .card textarea {
    width: auto; min-width: 14rem; max-width: 100%;
    padding: 0.45rem 0.6rem; margin: 0.25rem 0.5rem 0.25rem 0;
    border: 1px solid var(--border-strong); border-radius: 0.4rem;
    background: var(--input-bg); color: inherit; font: inherit;
}
.card textarea { width: 100%; }
/* File pickers: the browser's own button is restyled as a secondary
   button (two rules - an unknown pseudo-element would void a shared one). */
.card input[type="file"] { display: block; width: 100%; margin: 0.25rem 0; font: inherit; font-size: 0.95rem; color: var(--muted); }
.card input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; min-height: 2.25rem; padding: 0.35rem 1.1rem; margin: 0 0.6rem 0 0;
    border: 1px solid transparent; border-radius: 0.45rem; background: var(--accent-soft); color: var(--accent-strong); cursor: pointer;
}
.card input[type="file"]::-webkit-file-upload-button {
    font: inherit; font-weight: 600; min-height: 2.25rem; padding: 0.35rem 1.1rem; margin: 0 0.6rem 0 0;
    border: 1px solid transparent; border-radius: 0.45rem; background: var(--accent-soft); color: var(--accent-strong); cursor: pointer;
}
/* Every checkbox is drawn as a slider pill (no motion: the knob simply
   sits left or right). Labels keep wrapping them for the click target. */
input[type="checkbox"], .card input[type="checkbox"], form.card input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    position: relative; flex: 0 0 auto; width: 2.4rem; height: 1.35rem; margin: 0; padding: 0;
    border-radius: 1rem; border: 1px solid var(--border-strong); background: var(--line); cursor: pointer;
    vertical-align: middle;
}
input[type="checkbox"]::before {
    content: ""; position: absolute; top: 0.14rem; left: 0.16rem; width: 0.95rem; height: 0.95rem;
    border-radius: 50%; background: var(--card);
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { left: auto; right: 0.16rem; background: var(--on-accent); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
.sim-out { background: var(--code-bg); padding: 0.75rem; border-radius: 0.4rem; overflow-x: auto; font-size: 0.82rem; white-space: pre-wrap; }
.lang-select {
    width: auto; min-width: 0 !important; padding: 0.3rem 0.4rem; font-size: 0.85rem;
    border: 1px solid var(--border-strong); border-radius: 0.4rem;
    background: var(--input-bg); color: inherit; font-family: inherit;
}
form.card .lang-select { float: right; margin-left: 0.35rem; }

/* ---- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-top: 0.75rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
/* Row hover is a neutral tint, not the button tint, so the row's buttons
   stay visible; they also gain their accent border while the row is lit. */
tbody tr:hover { background: var(--code-bg); }
tbody tr:hover .button.secondary, tbody tr:hover .button.ghost { border-color: var(--accent); }

/* ---- Account screens (sign-in, sessions) --------------------------------- */
.app-shell { min-height: 100vh; }
/* Auth screens render straight into #app (inside .app-shell). */
#app > form.card { max-width: 26rem; margin: 1rem auto 2rem; padding: 1.5rem 1.75rem; }
#app > form.card input:not([type="checkbox"]) { width: 100%; min-width: 0; margin: 0 0 0.25rem; }
#app > form.card .lang-select { float: right; width: auto; margin: 0 0 0 0.35rem; }
#app > form.card h2 { clear: none; margin: 0.25rem 0 0.75rem; font-size: 1.35rem; }
#app > form.card a { display: block; margin-top: 0.75rem; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 3.5rem 0 0; font-weight: 700; font-size: 1.35rem; color: var(--accent); }
.login-brand .brand-mark { color: var(--accent); }
#app > .topbar, #app > .card { max-width: 60rem; margin-left: auto; margin-right: auto; }
.topbar { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0 0.5rem; flex-wrap: wrap; }
.topbar strong { margin-right: auto; font-size: 1.1rem; }

/* ---- App layout: canopy sidebar + content column ------------------------- */
.layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    background: var(--canopy); color: var(--canopy-fg);
    /* No bottom padding: the sticky footer supplies it, so nothing scrolls
       through a gap beneath the footer. */
    padding: 1rem 0.75rem 0; display: flex; flex-direction: column; gap: 1rem;
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    scrollbar-width: thin;
}
.brand {
    display: flex; align-items: center; gap: 0.5rem;
    color: inherit; text-decoration: none; font-weight: 700; font-size: 1.12rem; letter-spacing: 0.01em;
    padding: 0.25rem 0.5rem;
}
.brand-mark { display: inline-flex; color: var(--accent-bright); }
/* Channel block under the brand: label, avatar + name (picker or static box), "Provider - Role". */
.channel-block { display: flex; flex-direction: column; gap: 0.3rem; padding: 0 0.25rem 0.25rem; }
.channel-current { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.channel-current .channel-pick { flex: 1 1 auto; min-width: 0; }
.channel-pick.is-static { cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-meta { font-size: 0.78rem; color: var(--canopy-muted); padding: 0 0.25rem; }
.channel-pick {
    width: 100%; padding: 0.4rem 0.5rem; border-radius: 0.4rem; font: inherit; font-size: 0.9rem;
    border: 1px solid var(--canopy-line); background: var(--canopy-hover); color: inherit;
}
.nav-section { display: flex; flex-direction: column; gap: 0.1rem; }
.nav-label {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--canopy-muted); padding: 0.25rem 0.5rem 0.35rem;
}
.nav-link {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.6rem; border-radius: 0.4rem; color: inherit; text-decoration: none;
    border-left: 3px solid transparent; font-size: 0.95rem;
}
.nav-link:hover, .nav-link:focus-visible { background: var(--canopy-hover); outline: none; }
.nav-link.active { background: var(--canopy-active); border-left-color: var(--accent-bright); color: #ffffff; }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid var(--canopy-muted); flex: none; }
.status-dot.is-on { background: var(--accent-bright); border-color: var(--accent-bright); }
.status-dot.is-partial { background: var(--warn); border-color: var(--warn); }
.status-dot.is-always { border-color: transparent; background: var(--canopy-muted); }
/* Footer: a two-by-two grid - language and theme on one line, Account and
   Sign out on the next - so nothing wraps at the sidebar's width. */
.sidebar-foot {
    margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
    padding: 0.6rem 0.25rem 0; border-top: 1px solid var(--canopy-line);
    /* Pinned to the window's bottom edge when the group list is taller than
       the window, so Sign out and the theme switch never scroll away. */
    position: sticky; bottom: 0; background: var(--canopy); padding-bottom: 1rem;
}
.sidebar-foot .lang-select, .sidebar-foot .button {
    width: 100%; min-width: 0; margin: 0; min-height: 2.25rem; box-sizing: border-box; text-align: center;
}
.sidebar-foot .lang-select { background: var(--canopy-hover); border-color: var(--canopy-line); color: inherit; }
.sidebar-foot .button.secondary { background: var(--canopy-hover); color: inherit; border: 1px solid var(--canopy-line); }
/* Slim bar with a Menu toggle and the drawer's backdrop; only the drawer layout shows them. */
.stack-bar, .nav-scrim { display: none; }
/* The content column is capped and centered in the space beside the
   sidebar, so wide screens do not leave everything hugging the left. */
.content { padding: 1.25rem 2rem 3rem; max-width: 80rem; width: 100%; min-width: 0; margin: 0 auto; }
.pagebar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding-bottom: 0.75rem; border-bottom: 2px solid var(--accent); margin-bottom: 0.75rem;
}
.pagebar h2 { margin: 0; font-size: 1.35rem; font-weight: 600; }
.pagebar-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex: none; }
.page-title { flex: 1 1 20rem; min-width: 0; }
.section-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 0.75rem; }

/* ---- Modules landing ----------------------------------------------------- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.module-tile { margin: 0; display: flex; flex-direction: column; }
.module-tile .hint { flex: 1; margin: 0 0 0.5rem; }
.module-tile-foot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.status-badge {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
    padding: 0.15rem 0.55rem; border-radius: 1rem; margin-right: auto; white-space: nowrap;
    border: 1px solid var(--border-strong); color: var(--muted);
}
.status-badge.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.status-badge.is-partial { color: var(--warn); border-color: var(--warn); }
.status-badge.is-bad { color: var(--danger-text); border-color: var(--danger); }

/* ---- Command simulator --------------------------------------------------- */
.sim-group { border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.4rem 0.75rem 0.6rem; margin: 0.5rem 0; }
.sim-group > summary { font-weight: 600; cursor: pointer; padding: 0.25rem 0; }
.sim-group .field { margin-top: 0.35rem; }
.sim-flags { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.35rem 0; }
.sim-flag { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0 0; font-weight: 500; }
.sim-verdict { font-weight: 600; margin: 0.9rem 0 0.25rem; overflow-wrap: anywhere; }
.sim-steps { border-top: 1px solid var(--line); }
.sim-step { display: grid; grid-template-columns: 5.5rem 10rem minmax(0, 1fr); gap: 0.3rem 0.75rem; align-items: start; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.sim-step.is-muted { color: var(--muted); }
.sim-step .status-badge { margin-right: 0; justify-self: start; margin-top: 0.15rem; }
.sim-step-name { font-weight: 600; }
.sim-step-detail { min-width: 0; overflow-wrap: anywhere; }
.sim-step-detail pre.sim-out { margin: 0.35rem 0 0; }
.sim-responses { display: flex; flex-direction: column; gap: 0.35rem; }
.sim-response { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.sim-response .status-badge { margin-right: 0; }
.sim-response-text { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.sim-response.is-out .sim-response-text { color: var(--muted); text-decoration: line-through; }
.sim-response.is-selected .sim-response-text { font-weight: 600; }
.sim-output { display: inline-block; background: var(--code-bg); padding: 0.35rem 0.6rem; border-radius: 0.45rem; }
.sim-raw { margin-top: 0.75rem; }
.sim-raw > summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 720px) {
    .sim-step { grid-template-columns: auto minmax(0, 1fr); }
    .sim-step-detail { grid-column: 1 / -1; }
}

/* ---- Log lines (audit trail, system log) --------------------------------- */
/* Desktop: time | badge + key/text + meta | actor | chevron on one line. */
.log-list { margin-top: 0.5rem; }
.log-line { border-bottom: 1px solid var(--line); }
.log-line:last-child { border-bottom: 0; }
.log-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 0.75rem; align-items: center; padding: 0.5rem 0; list-style: none; }
.log-head::-webkit-details-marker { display: none; }
details.log-line > .log-head { cursor: pointer; }
.log-foot { display: contents; }
.log-time { order: 1; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-main { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.log-main .status-badge { margin-right: 0; }
.log-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; background: var(--code-bg); padding: 0.1rem 0.45rem; border-radius: 0.3rem; overflow-wrap: anywhere; }
.log-text { min-width: 0; overflow-wrap: anywhere; }
.log-meta { color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.log-actor { order: 3; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.log-chev { order: 4; display: inline-flex; width: 16px; color: var(--muted); }
.log-line[open] .log-chev svg { transform: rotate(90deg); }
.log-line > pre.sim-out { margin: 0 0 0.6rem; }

/* ---- Small screens ------------------------------------------------------- */
/* Drawer layout (tablet portrait, narrow desktop window): a slim bar
   with the brand and a Menu button leads the page, and the sidebar keeps
   its desktop shape but lives off-canvas on the left - Menu, or a swipe
   in from the left edge, shows it over a backdrop; the backdrop, a swipe
   left, Escape or a page pick hides it. It appears in place, no sliding
   (no-motion rule). 1rem inputs prevent the iOS focus-zoom. */
@media (max-width: 900px) {
    /* minmax(0, ...) matters: a bare 1fr lets the column grow to the widest
       table or tab strip and the whole page scrolls sideways on a phone.
       Two explicit rows: without them the bar row takes half the free height. */
    .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .stack-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
        position: sticky; top: 0; z-index: 20; padding: 0.35rem 0.75rem;
        background: var(--canopy); color: var(--canopy-fg); border-bottom: 1px solid var(--canopy-line);
    }
    .stack-menu {
        display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 0.8rem;
        border: 1px solid var(--canopy-line); border-radius: 0.45rem; background: var(--canopy-hover); color: inherit;
        font: inherit; font-weight: 600; cursor: pointer;
    }
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; width: min(15rem, 85vw); max-height: none; z-index: 45; /* 15rem = the desktop column */
        box-shadow: 0 0 0 1px var(--canopy-line), 0.5rem 0 1.5rem rgba(0, 0, 0, 0.35);
    }
    /* The drawer's brand sits exactly where the bar's does: same top
       padding, same 2.75rem row, so opening the drawer moves nothing. */
    .sidebar { padding-top: 0.35rem; }
    .sidebar > .brand { min-height: 2.75rem; box-sizing: border-box; }
    .layout:not(.nav-open) .sidebar { display: none; }
    .layout.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(27, 36, 29, 0.45); }
    .content { padding: 1rem 0.75rem 2rem; }
}
@media (max-width: 720px), ((max-height: 500px) and (hover: none)) {
    .shell { padding: 1rem 0.75rem; }
    .topbar { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .topbar strong { margin-right: 0; }
    .topbar .button { margin: 0; text-align: center; }
    form.card input, .card input[type="text"], .card input[type="number"], .card input[type="email"],
    .card input[type="url"], .card input[type="password"], .card select, .card textarea {
        font-size: 1rem; min-height: 2.75rem;
    }
    .card input[type="text"], .card input[type="number"], .card input[type="email"],
    .card input[type="url"], .card input[type="password"], .card select {
        min-width: 0; width: 100%; margin-right: 0;
    }
    /* One height for every button on a touch screen: "Add tier" and
       "Save" side by side must match, and 44px is the tap minimum. */
    .button, .button.small { min-height: 2.75rem; }
    .card input[type="file"]::file-selector-button { min-height: 2.75rem; }
    .card input[type="file"]::-webkit-file-upload-button { min-height: 2.75rem; }
    th, td { padding: 0.55rem 0.5rem; }
}

/* ---- Chat alerts rows: toggle + template on one line ---------------------- */
/* One block per chat alert: toggle, built-in line + sample, event
   placeholders, then the custom line with its Preview button. */
.alert-row { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.alert-row:last-of-type { border-bottom: 0; }
/* The label may wrap onto two lines; the Customize button keeps its place at the right. */
.alert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.card .alert-head label { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; align-items: flex-start; }
.card .alert-head label > input[type="checkbox"] { margin-top: 0.15rem; }
.alert-head > .button { flex: 0 0 auto; margin: 0; }
.alert-summary { margin: 0.15rem 0 0; }
.alert-summary .alert-line { color: var(--fg); }
.alert-summary .tag { margin-left: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.alert-details { margin: 0.5rem 0 0 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--accent-soft); }
.alert-details > p.hint { margin: 0.2rem 0; }
.alert-lines code { margin-right: 0.35rem; }
.alert-tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.card .alert-tools > input.alert-template { flex: 1 1 18rem; min-width: 12rem; margin: 0; }
.alert-preview { margin: 0.3rem 0 0; font-size: 0.9rem; }
.alert-preview:empty { display: none; }
.card label.alert-threshold { margin: 0.4rem 0 0; }
/* ---- Spam filters: protection levels + one card per filter --------------- */
.level-card h3 .tag { margin-left: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.level-bar { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; }
.level-bar .level {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 7rem;
    padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--card);
    color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.level-bar .level:hover { color: var(--fg); border-color: var(--border-strong); }
.level-bar .level.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.level-bar .level:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shield { width: 2rem; height: 2rem; }
.shield .shield-outline { fill: none; stroke: currentColor; stroke-width: 1.6; }
.shield .shield-fill { fill: currentColor; opacity: 0.85; }
.level-desc { text-align: center; margin: 0.5rem 0 0; }
.filter-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.filter-list > .card { margin: 0; }
.filter-row.is-on { border-color: var(--accent); }
.filter-head { display: flex; align-items: center; gap: 0.9rem; }
.filter-icon {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.filter-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.filter-text strong { font-size: 0.98rem; }
.filter-head .chevron { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); padding: 0.35rem; cursor: pointer; border-radius: 0.4rem; }
.filter-head .chevron:hover { color: var(--fg); background: var(--accent-soft); }
.filter-row.is-open .chevron svg { transform: rotate(180deg); }
.filter-body { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.filter-group { margin-bottom: 1rem; }
.filter-group h4 { margin: 0 0 0.1rem; font-size: 0.95rem; }
.filter-group > p.hint { margin: 0 0 0.5rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem 1rem; margin: 0.25rem 0 0.75rem; }
.field-grid + .field-grid { margin-top: 0; }
.field-grid .field { margin: 0; }
.field-grid .field.span-2 { grid-column: 1 / -1; }
.card .field-grid input[type="number"], .card .field-grid input[type="text"], .card .field-grid input[type="url"], .card .field-grid select, .card .field-grid textarea { width: 100%; min-width: 0; margin: 0; }
.field-grid .field > label { margin-top: 0; }
.field-grid .field > p.hint { margin: 0.2rem 0 0; }
.field-grid .field[hidden] { display: none; }
.filter-controls { margin-top: 0.5rem; }

/* The filter's on/off switch in the card head: just the slider, no text. */
.card label.switch { display: inline-flex; margin: 0; flex: 0 0 auto; }
@media (max-width: 720px) {
    .filter-head { flex-wrap: wrap; }
    .filter-text { flex-basis: calc(100% - 3.3rem); }
}

/* ---- Utility classes (replace per-element inline styles) ----------------- */
.card input.wide, .card textarea.wide, .card select.wide { width: 100%; min-width: 0; }
.card input.short { width: 7em; min-width: 0; }
.stack { margin-top: 0.75rem; }
.gap-left { margin-left: 0.5rem; }
.inline-link { display: inline-block; margin-left: 0.75rem; }
.mono { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.card label.inline-label { display: inline-flex; margin-right: 0.9rem; }
img.avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; vertical-align: middle; }
/* Default profile picture for viewers without one: same circle, silhouette. */
.avatar-default {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: 50%; vertical-align: middle;
    background: var(--accent-soft); color: var(--accent);
}
.media-thumb { max-height: 2.5rem; max-width: 6rem; }
.media-thumb-wide { max-width: 12rem; }

/* Streamer cell: avatar before the display name, login as a muted suffix. */
.streamer-cell { display: inline-flex; align-items: center; gap: 0.5rem; }
.streamer-cell img { flex: 0 0 auto; }

/* ---- Grouped sidebar (collapsible sections with icons) ------------------- */
.nav-group {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.45rem 0.5rem; border: 0; border-radius: 0.4rem; background: transparent;
    color: var(--canopy-fg); font: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer;
}
.nav-group:hover, .nav-group:focus-visible { background: var(--canopy-hover); outline: none; }
.nav-icon { display: inline-flex; color: var(--accent-bright); }
.nav-group-text { flex: 1; }
.nav-chevron { display: inline-flex; color: var(--canopy-muted); }
.nav-section.is-collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-section.is-collapsed .nav-items { display: none; }
.nav-items { display: flex; flex-direction: column; gap: 0.05rem; padding-left: 1.55rem; }
.nav-items .nav-link { padding: 0.32rem 0.55rem; font-size: 0.92rem; border-left: 0; }
.nav-items .nav-link.active { background: var(--canopy-active); color: #ffffff; }

/* ---- Page header: title + one-line description, then a tab strip -------- */
.page-title { display: flex; flex-direction: column; gap: 0.2rem; }
.pagebar h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; }
.page-desc { margin: 0; color: var(--muted); font-size: 0.92rem; }
.pagebar { border-bottom: 0; padding-bottom: 0.25rem; margin-bottom: 0.5rem; align-items: flex-start; }
.tab-strip { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0.25rem 0 1rem; }
.tab-strip .tab {
    padding: 0.55rem 0.9rem; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-strip .tab:hover { color: var(--fg); }
.tab-strip .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Search box above a list of cards, and the Previous / range / Next row
   under a paged table. */
.list-toolbar { display: flex; gap: 0.5rem; align-items: center; margin: 0.25rem 0 0.5rem; }
.list-toolbar input[type="search"] {
    flex: 1 1 18rem; max-width: 28rem; min-width: 0;
    padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 0.4rem;
    background: var(--input-bg); color: inherit; font: inherit;
}
/* Previous at the left, Next at the right, the range centred between them. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.6rem; }
.pager .hint { flex: 1 1 auto; text-align: center; }
.pager .button { margin: 0; }
/* Command editor: one block per answer, a thin rule between answers. */
/* Warning banner (a condition to fix, e.g. the worker has stopped): amber
   edge, no fill change on hover, no motion. */
.banner { border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 0.6rem; background: var(--card); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.banner > strong { display: block; margin-bottom: 0.2rem; }
.banner > p { margin: 0.2rem 0; }
.banner.warn > strong { color: var(--warn); }
/* Editor title with its Back button on the same line. */
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.editor-head h3 { margin: 0; }
.editor-head .button { margin: 0; }
.answer-row { padding: 0.5rem 0; }
.card .answer-row textarea { width: 100%; min-height: 2.4rem; resize: vertical; overflow: hidden; line-height: 1.4; }
.answer-row + .answer-row { margin-top: 0.35rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
/* Custom placeholder rows: name, kind, value, remove; then the tag to paste
   and a one-line hint for the chosen kind. */
.ph-row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.ph-row .ph-value { flex: 1 1 16rem; min-width: 0; }
.ph-row .ph-value input, .ph-row .ph-value textarea { width: 100%; min-width: 0; margin-right: 0; }
.ph-row .ph-tag, .ph-row .ph-kind-hint { flex-basis: 100%; margin: 0; }
.ph-row .ph-tag:empty { display: none; }
/* Editor pages: one field per block; a field-row keeps small paired inputs
   (quiet hours from / to) on one line. */
.field { margin: 0 0 0.35rem; }
.field-row { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.field-row input[type="time"] { margin: 0.25rem 0; }
.landing-group { margin: 1.25rem 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.landing-group:first-child { margin-top: 0.25rem; }

/* Sidebar selects: the native option list must not fall back to the
   browser's white sheet under light text. */
.sidebar select { color-scheme: dark; }
.channel-pick, .sidebar-foot .lang-select { background: var(--canopy); }
.channel-pick option, .sidebar-foot .lang-select option { background: var(--canopy); color: var(--canopy-fg); }

/* Command editor: the rule an answer applies under (system commands). */
.rule-summary { margin: 0.15rem 0 0.5rem; font-size: 0.85rem; }
.rule-summary::before { content: "↳ "; color: var(--accent); }

/* ---- Overview dashboard: live strip, period tiles, event feed ------------ */
.live-strip { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.live-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 14rem; min-width: 0; }
.live-viewers { font-weight: 600; font-variant-numeric: tabular-nums; }
.pill {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 1rem; border: 1px solid var(--border-strong); color: var(--muted);
}
.pill.is-live { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.period-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0.5rem; }
.period-bar select {
    padding: 0.35rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 0.4rem;
    background: var(--input-bg); color: inherit; font: inherit;
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; margin: 0 0 0.75rem; }
.stat { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.1rem; align-content: start; padding: 0.85rem 1rem; }
.stat > :not(.stat-icon) { grid-column: 2; }
.stat-icon {
    grid-column: 1; grid-row: 1 / span 4; align-self: start;
    display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center;
    border-radius: 0.5rem; background: var(--accent-soft); color: var(--accent);
}
/* Values never break mid-word: a long one (a chatter's name) shrinks and
   clips with an ellipsis; the full text is in the title attribute. */
.stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value.is-text { font-size: 1.15rem; line-height: 1.3; }
.stat-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.stat-sub { font-size: 0.82rem; color: var(--muted); }
.stat-delta {
    justify-self: start; margin-top: 0.25rem; padding: 0.05rem 0.5rem; border-radius: 1rem;
    font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--code-bg); color: var(--muted);
}
.stat-delta.is-up { background: var(--accent-soft); color: var(--accent); }
.stat-delta.is-down { color: var(--danger-text); }
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-badge {
    flex: 0 0 auto; min-width: 6rem; text-align: center;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 0.3rem; border: 1px solid transparent; background: var(--code-bg); color: var(--muted);
}
.feed-row.is-follow .feed-badge { background: var(--accent-soft); color: var(--accent); }
.feed-row.is-sub .feed-badge { background: transparent; border-color: var(--warn); color: var(--warn); }
.feed-row.is-money .feed-badge { background: var(--secondary); color: #ffffff; }
.feed-row.is-raid .feed-badge { background: var(--accent); color: var(--on-accent); }
.feed-row.is-mod .feed-badge { background: transparent; border-color: var(--danger); color: var(--danger-text); }
.feed-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem; align-items: baseline; }
.feed-detail { color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.feed-time { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .feed-badge { min-width: 0; }
}

/* Viewer status tags (follower, sub, regular, VIP, mod) in the viewer lists. */
.status-tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.status-tags .tag {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
    padding: 0.1rem 0.45rem; border-radius: 1rem; border: 1px solid var(--border-strong); color: var(--muted);
}
.status-tags .tag.is-follower { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.status-tags .tag.is-sub { border-color: var(--warn); color: var(--warn); }
.status-tags .tag.is-broadcaster { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.status-tags .tag.is-bot { background: var(--secondary); border-color: var(--secondary); color: #ffffff; }
.nowrap { white-space: nowrap; }
.list-toolbar select {
    padding: 0.45rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 0.4rem;
    background: var(--input-bg); color: inherit; font: inherit;
}

/* 2FA QR code: white tile in every theme so any scanner reads it. */
.qr-box { display: inline-block; padding: 0.5rem; margin: 0.25rem 0 0.5rem; background: #ffffff; border-radius: 0.4rem; line-height: 0; }
.qr-box svg { display: block; max-width: 100%; height: auto; }

/* Danger zone: the one irreversible card on a settings page. */
.card.danger-zone { border-color: var(--danger); }
.card.danger-zone h3 { color: var(--danger-text); }

/* ---- Pocket: the phone shell (<= 720px) --------------------------------- */
/* The sidebar gives way to a canopy top bar (channel pill, page title,
   account) and a fixed five-tab bottom bar; sheets replace drawers. Both
   bars are always in the DOM and hidden here on wider screens. No motion. */
.pocket-top, .pocket-tabs, .pocket-only, td.is-chevron { display: none; }
/* Row details sheet: the table's own cells, borrowed while it is open. */
.sheet-fields { display: flex; flex-direction: column; }
.sheet-fields td { display: block; padding: 0.45rem 0; border: 0; border-bottom: 1px solid var(--line); }
.sheet-fields td[data-label] { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline; }
/* The stacked-table twin of this rule lives inside the phone media block:
   on desktop a table's header row carries the labels. */
.sheet-fields td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
}
/* Action buttons: room between them, equal widths, one row per two or three. */
.sheet-fields td.is-action { border-bottom: 0; padding-top: 0.7rem; }
.sheet-fields td.is-action, .sheet-fields td.is-action > span { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sheet-fields td.is-action > span { width: 100%; }
.sheet-fields td .button { margin: 0; min-height: 2.75rem; flex: 1 1 7rem; }
.sheet-fields td:empty { display: none; }
/* A labelled cell holding controls (overlay settings, a points adjustment)
   stacks them: label on top, then one control per line, full width. */
.sheet-fields td[data-label]:has(input, select), .sheet-fields td.is-action:has(input, select) { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
.sheet-fields td[data-label]:has(input, select) > span { display: flex; flex-direction: column; gap: 0.5rem; }
.sheet-fields td label { display: flex; align-items: center; gap: 0.5rem; margin: 0; min-height: 2.75rem; font-weight: 500; }
.sheet-fields td label > input[type="checkbox"] { order: -1; }
.sheet-fields input[type="text"], .sheet-fields input[type="number"], .sheet-fields input[type="email"], .sheet-fields input[type="url"], .sheet-fields select {
    width: 100%; min-width: 0; min-height: 2.75rem; margin: 0; padding: 0.45rem 0.6rem; font: inherit; font-size: 1rem;
    border: 1px solid var(--border-strong); border-radius: 0.4rem; background: var(--input-bg); color: inherit;
}
.sheet-fields td.is-action:has(input, select) .button { flex: 1 1 auto; }
.sheet-fields td.is-action:has(input, select) > span { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(27, 36, 29, 0.45); }
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 80vh; overflow-y: auto;
    background: var(--card); color: var(--fg); border: 1px solid var(--line); border-bottom: 0;
    border-radius: 0.9rem 0.9rem 0 0; padding: 0.4rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
.sheet-handle { width: 2.25rem; height: 0.25rem; border-radius: 0.125rem; background: var(--border-strong); margin: 0 auto 0.6rem; }
.sheet h3 { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; font-weight: 600; }
.sheet-list { display: flex; flex-direction: column; }
.sheet-list + .sheet-list { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.25rem; }
.sheet-row {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.1rem; padding: 0.25rem 0;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: inherit;
    font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; cursor: pointer;
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row.is-static { cursor: default; }
.sheet-row.is-danger { color: var(--danger-text); font-weight: 600; }
.sheet-row.is-current strong { color: var(--accent); }
.sheet-icon { display: inline-flex; flex: none; color: var(--accent); }
.sheet-chevron { display: inline-flex; flex: none; color: var(--muted); }
.sheet-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sheet-sub { font-size: 0.84rem; color: var(--muted); }
.sheet-row .status-tags { margin-left: 0.35rem; }
.sheet-row img.avatar, .sheet-row .avatar-default { width: 2.25rem; height: 2.25rem; flex: none; }
.sheet-row .lang-select { margin-left: auto; }
.pocket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.pocket-grid .button { margin: 0; min-height: 2.75rem; }
.pocket-row { display: flex; align-items: center; gap: 0.6rem; min-height: 3.2rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.pocket-row:last-child { border-bottom: 0; }
.pocket-row .button { margin: 0; min-height: 2.75rem; flex: none; }
.pocket-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pocket-text strong, .pocket-text .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px), ((max-height: 500px) and (hover: none)) {
    .sidebar { display: none; }
    .stack-bar { display: none; }
    .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    /* Nothing inside a card may widen the page: charts scale, long tokens wrap. */
    .card { overflow-wrap: anywhere; }
    .card svg { max-width: 100%; height: auto; }
    .list-toolbar { flex-wrap: wrap; }
    /* Tables built by table(): stacked rows. The first cell is the row's
       title; every other cell shows its column header as a small label. */
    .table-wrap.is-stack table, .table-wrap.is-stack tbody, .table-wrap.is-stack tr, .table-wrap.is-stack td { display: block; }
    .table-wrap.is-stack thead { display: none; }
    .table-wrap.is-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
    .table-wrap.is-stack tr:last-child { border-bottom: 0; }
    .table-wrap.is-stack tbody tr:hover { background: transparent; }
    .table-wrap.is-stack td { flex: 1 1 100%; min-width: 0; padding: 0.1rem 0; border: 0; }
    .table-wrap.is-stack td:empty { display: none; }
    /* Essentials only: lead (toggle) + title + chevron on the first line,
       the summary value below; everything else waits in the row's sheet. */
    .table-wrap.is-stack td.is-lead { flex: 0 0 auto; order: 1; }
    .table-wrap.is-stack td.is-title { flex: 1 1 0; order: 2; font-weight: 600; font-size: 1rem; }
    .table-wrap.is-stack td.is-chevron { display: inline-flex; flex: 0 0 auto; order: 3; color: var(--muted); padding: 0; }
    .table-wrap.is-stack td.is-summary { order: 4; }
    .table-wrap.is-stack td.pocket-hide { display: none; }
    /* Log lines: the line first, time and actor on a second row, chevron spanning both. */
    .log-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main chev" "foot chev"; row-gap: 0.2rem; padding: 0.6rem 0; }
    .log-main { grid-area: main; }
    .log-chev { grid-area: chev; }
    .log-foot { grid-area: foot; display: flex; justify-content: space-between; gap: 0.6rem; min-width: 0; }
    .log-actor { overflow: hidden; text-overflow: ellipsis; }
    .table-wrap.is-stack td.is-summary > .summary-text { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .table-wrap.is-stack td[data-label]:not(.is-summary), .table-wrap.is-stack td.is-action { display: none; }
    .table-wrap.is-stack tr.has-details { cursor: pointer; }
    .table-wrap.is-stack tr.has-details:active { background: var(--accent-soft); }
    /* Labelled cells: header on the left, value on the right. */
    .table-wrap.is-stack td[data-label] { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline; }
    .table-wrap.is-stack td[data-label]::before {
        content: attr(data-label);
        font-size: 0.68rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
    }
    .table-wrap.is-stack td .button { margin: 0.2rem 0.35rem 0.1rem 0; }
    /* Hand-built tables keep their natural width and scroll inside the wrapper instead of crushing their columns. */
    .table-wrap:not(.is-stack) table { width: max-content; min-width: 100%; }
    .pocket-only { display: block; }
    .pocket-top {
        display: flex; align-items: center; gap: 0.5rem; position: sticky; top: 0; z-index: 30;
        min-height: 3rem; padding: 0 0.6rem; background: var(--canopy); color: var(--canopy-fg);
    }
    .pocket-channel {
        display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 1 45%; min-width: 0; min-height: 2.25rem;
        padding: 0.2rem 0.5rem 0.2rem 0.25rem; border-radius: 1rem; border: 1px solid var(--canopy-line);
        background: var(--canopy-hover); color: inherit; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    }
    .pocket-channel img.avatar, .pocket-channel .avatar-default { width: 1.4rem; height: 1.4rem; flex: none; }
    .pocket-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pocket-chevron { display: inline-flex; color: var(--canopy-muted); }
    .pocket-title { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pocket-action { flex: none; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--canopy-fg); border-radius: 0.5rem; }
    .pocket-tabs {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        padding-bottom: env(safe-area-inset-bottom); background: var(--canopy); border-top: 1px solid var(--canopy-line);
    }
    .pocket-tab {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
        min-height: 3.5rem; border: 0; border-top: 3px solid transparent; background: none; color: var(--canopy-muted);
        font: inherit; font-size: 0.7rem; font-weight: 600; text-decoration: none; cursor: pointer;
    }
    .pocket-tab.active { color: #ffffff; border-top-color: var(--accent-bright); }
    .pocket-tab-icon { display: inline-flex; }
    .content { padding: 0.75rem 0.75rem calc(5rem + env(safe-area-inset-bottom)); }
    .pagebar { display: none; }
    /* The strip scrolls sideways; a soft fade on the right edge says so. */
    .tab-strip {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }
    .tab-strip .tab { flex: none; }
    .tab-strip .tab:last-child { margin-right: 2.5rem; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The hidden attribute must beat every display rule (e.g. .button). */
[hidden] { display: none !important; }

/* ---- Pocket, phone held sideways: short and touch-only ------------------ */
/* Same shell, less chrome: the bars shrink so ~390px of height keeps room
   for content; the tab labels sit beside their icons. */
@media (max-height: 500px) and (hover: none) {
    .pocket-top { min-height: 2.75rem; }
    .pocket-tab { flex-direction: row; gap: 0.4rem; min-height: 2.75rem; }
    .content { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
    .sheet { max-height: 92vh; }
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pocket-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Viewer identity is one unit, independent of table column distribution. */
.viewer-identity { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.viewer-identity > .avatar { flex: 0 0 2rem; }
/* Names clip with an ellipsis instead of breaking mid-word; the name column
   keeps enough room that an ordinary handle never needs to. */
.viewer-identity .name-stack { min-width: 0; max-width: 11rem; }
/* The display name may wrap at a space onto a second line, never inside a
   word; the login stays on one line and clips with an ellipsis. */
.viewer-identity .name-stack > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; }
.viewer-identity .name-stack > .hint { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-empty { margin: 0.75rem 0 0.25rem; }
@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (hover: hover) {
    .viewer-table th:not(:first-child), .viewer-table td:not(:first-child) { width: 1%; white-space: nowrap; }
    .viewer-table th:first-child { padding-left: 3.35rem; }
}

@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (hover: hover) {
    .loyalty-board th:not(:nth-child(2)), .loyalty-board td:not(:nth-child(2)) { width: 1%; white-space: nowrap; }
    .loyalty-board th:nth-child(2) { padding-left: 3.35rem; }
}

/* Viewer profile: identity, summary, controls, then readable activity. */
.viewer-card .viewer-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0; }
.viewer-card-heading .viewer-identity { flex: 1 1 14rem; }
.viewer-card-heading .viewer-identity > .avatar { flex-basis: 2.75rem; width: 2.75rem; height: 2.75rem; }
.viewer-card-heading strong { font-size: 1.25rem; }
.viewer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.viewer-stats > div { background: var(--accent-soft); border-radius: 0.5rem; padding: 0.85rem 1rem; min-width: 0; }
.viewer-stats dt, .viewer-dates dt { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.3rem; }
.viewer-stats dd { margin: 0; font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.viewer-details { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.viewer-points { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem 0.75rem; flex: 1 1 19rem; max-width: 28rem; min-width: 0; }
.viewer-points h3, .viewer-points [role="status"] { grid-column: 1 / -1; margin: 0; }
.viewer-card .viewer-points label { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; font-size: 0.88rem; }
.viewer-card .viewer-points input { width: 100%; min-width: 0; margin: 0; }
.viewer-card .viewer-points button { margin: 0; min-height: 2.5rem; }
.viewer-points [role="status"]:empty { display: none; }
.viewer-account-details { flex: 1 1 18rem; min-width: 0; }
.viewer-dates { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0 0 0.75rem; }
.viewer-dates dd { margin: 0; font-size: 0.9rem; }
.viewer-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-history { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 1.25rem; }
.viewer-messages { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.viewer-messages li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.5rem 1.25rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.viewer-messages li:last-child { border-bottom: 0; }
.viewer-messages .viewer-date { color: var(--muted); font-size: 0.82rem; }
.viewer-messages p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.viewer-empty { margin: 0.75rem 0 0; }
@media (max-width: 600px) {
    .viewer-stats { gap: 0.4rem; }
    .viewer-stats > div { padding: 0.7rem 0.5rem; }
    .viewer-stats dd { font-size: 1.1rem; }
    .viewer-card .viewer-points button { min-height: 2.75rem; }
    .viewer-messages li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* Chat history keeps authors together and gives message text the space. */
.chat-history-table { margin-top: 0.75rem; }
.chat-history-table table { table-layout: fixed; }
.chat-history-table th:first-child { width: 25%; padding-left: 3.35rem; }
.chat-history-table th:nth-child(2) { width: 10.5rem; }
.chat-author { min-width: 0; overflow-wrap: anywhere; }
.chat-time { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-message { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px), ((max-height: 500px) and (hover: none)) {
    .chat-history-table table, .chat-history-table tbody { display: block; }
    .chat-history-table thead { display: none; }
    .chat-history-table tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
    .chat-history-table td { display: block; padding: 0; border: 0; }
    .chat-history-table td:not(:first-child) { margin-left: 2.75rem; }
    .chat-history-table td:nth-child(2) { margin-top: 0.15rem; margin-bottom: 0.35rem; }
    .chat-history-table tbody tr:hover { background: transparent; }
}

.viewer-status-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.viewer-card .viewer-status-actions .button { margin: 0; background: transparent; color: var(--accent); border: 1px solid var(--border-strong); }
.viewer-card .viewer-status-actions .button:hover { background: var(--accent-soft); opacity: 1; }
@media (max-width: 600px) {
    .viewer-status-actions { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0.65rem; }
}

.loyalty-row-actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.loyalty-action-icon { display: inline-flex; flex: none; }
.loyalty-row-actions .loyalty-row-action { margin: 0; gap: 0.5rem; min-height: 2.75rem; }
@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (hover: hover) {
    .loyalty-row-actions { flex-wrap: nowrap; }
    .loyalty-row-actions .loyalty-row-action { width: 2.75rem; padding: 0; }
    .loyalty-action-label { display: none; }
}
@media (min-width: 721px) and (max-width: 1100px) and (min-height: 501px), (min-width: 721px) and (max-width: 1100px) and (hover: hover) {
    .loyalty-row-actions { display: inline-grid; grid-template-columns: repeat(2, 2.75rem); }
    .loyalty-row-actions > :only-child { grid-column: 2; }
}

/* Familiar table actions use icons; mobile sheets retain their text. */
.table-action-icon { display: inline-flex; flex: none; }
.button.table-icon-action { gap: 0.5rem; min-height: 2.75rem; }
@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (hover: hover) {
    .button.table-icon-action { width: 2.75rem; padding: 0; }
    .table-icon-action .table-action-label { display: none; }
}
.sheet .table-icon-action .table-action-label { display: inline; }
.sheet .button.table-icon-action { width: auto; padding: 0.35rem 0.65rem; }

/* Keep row actions against the trailing table edge on desktop/tablet. */
@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (hover: hover) {
    table td.is-action, table td:last-child:has(.button) { text-align: right; width: 1%; white-space: nowrap; }
    table td.is-action > span { text-align: right; }
    table td.is-action .button:last-child, table td:last-child > .button:last-child { margin-right: 0; }
    table td.is-action .loyalty-row-actions { justify-content: flex-end; }
}

/* Mixed text/icon table actions share geometry and alignment. */
table .button, .sheet-fields .button { min-height: 2.75rem; border: 1px solid transparent; border-radius: 0.45rem; white-space: nowrap; }
.table-icon-action { min-height: 2.75rem; }
@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (hover: hover) {
    table td.is-action > span:has(> .button):not(.loyalty-row-actions) { display: inline-flex; align-items: center; gap: 0.25rem; }
    table td.is-action > span:has(> .button):not(.loyalty-row-actions) > .button { margin: 0; }
}
/* Timer editor: scoped sections retain the dashboard theme and motion policy. */
.card.timer-editor { padding: 1.5rem; }
.timer-editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.timer-editor-header h3 { margin: 0.9rem 0 0.4rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.timer-editor-header .hint { margin: 0; }
.card.timer-editor .timer-editor-status { flex-shrink: 0; padding: 0.65rem 0.8rem; margin: 0; font-weight: 600; }
.timer-editor-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr); gap: 1.5rem; align-items: start; }
.timer-editor-main, .timer-editor-sidebar { min-width: 0; display: grid; gap: 1.25rem; }
.timer-editor-section { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 0.65rem; }
.timer-editor-section h4 { margin: 0 0 0.65rem; font-size: 1.05rem; }
.timer-editor-section > .hint { margin: 0.4rem 0 0.8rem; }
.timer-editor .field + .field { margin-top: 1rem; }
.timer-editor .field > .hint { margin: 0.4rem 0 0; font-size: 0.82rem; }
.card.timer-editor input:not([type="checkbox"]), .card.timer-editor select, .card.timer-editor textarea { width: 100%; min-width: 0; margin: 0.25rem 0 0; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.4rem; color: var(--fg); background: var(--input-bg); font: inherit; }
.card.timer-editor textarea { resize: vertical; }
.timer-editor-interval { background: var(--bg); padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; margin-bottom: 0.75rem; }
.card.timer-editor .timer-editor-interval label { margin: 0 0 0.45rem; font-weight: 600; font-size: 0.9rem; }
.card.timer-editor input:disabled { color: var(--muted); background: var(--code-bg); }
.timer-editor-quiet-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; min-width: 0; }
.card.timer-editor .timer-editor-quiet-times label { display: block; min-width: 0; margin: 0; }
/* WebKit time controls must shrink within their grid cell, including on iPadOS. */
.card.timer-editor .timer-editor-quiet-times input[type="time"] { display: block; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; max-width: 100%; min-height: 2.75rem; box-sizing: border-box; }
.timer-editor-quiet-times input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
@media (max-width: 600px) { .timer-editor-quiet-times { grid-template-columns: minmax(0, 1fr); } }
.card.timer-editor .timer-editor-message { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); }
.card.timer-editor .timer-editor-message textarea { min-height: 8rem; margin: 0; line-height: 1.5; overflow: auto; }
.timer-editor-message .button { align-self: flex-end; }
.timer-editor-message .hint { margin: 0; }
.timer-editor-footer { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: flex-start; gap: 0.5rem; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.timer-editor [hidden] { display: none !important; }
@media (max-width: 1100px) {
    .timer-editor-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .card.timer-editor { padding: 1rem; }
    .timer-editor-header { flex-wrap: wrap; }
    .timer-editor-section { padding: 0.9rem; }
    .timer-editor-footer { flex-direction: column; }
    .timer-editor-footer .button { width: 100%; margin: 0; }
}

.timer-category-search, .timer-category-item { display: flex; align-items: center; gap: 0.6rem; }
.timer-category-search input { flex: 1; }
.timer-category-item { justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.timer-category-item span { min-width: 0; overflow-wrap: anywhere; }
.timer-category-item .button { flex-shrink: 0; }
.timer-category-results { max-height: 18rem; overflow-y: auto; }
/* Command editing uses the same section hierarchy as the timer editor. */
.card.command-editor { padding: 1.5rem; }
.command-editor-header { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.command-editor-header h3 { margin: 0.9rem 0 0.4rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.command-editor-header .hint { margin: 0; }
.command-editor-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(17rem, 1fr); gap: 1.5rem; align-items: start; }
.command-editor-main, .command-editor-sidebar { display: grid; gap: 1.25rem; min-width: 0; }
.command-editor-section { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 0.65rem; }
.command-editor-section h4 { margin: 0 0 0.65rem; font-size: 1.05rem; }
.command-editor-section > .hint { margin: 0.4rem 0 0.8rem; }
.command-editor .command-editor-field { min-width: 0; }
.command-editor-field + .command-editor-field { margin-top: 1rem; }
.card.command-editor .command-editor-field > label { display: block; margin: 0; font-weight: 600; font-size: 0.9rem; }
.command-editor-field > .hint { margin: 0.4rem 0 0; font-size: 0.82rem; }
.card.command-editor input, .card.command-editor select, .card.command-editor textarea { display: block; width: 100%; min-width: 0; margin: 0.3rem 0 0; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.4rem; color: var(--fg); background: var(--input-bg); font: inherit; font-weight: 400; }
.card.command-editor input:disabled, .card.command-editor textarea:read-only { color: var(--muted); background: var(--code-bg); }
.command-editor-response { min-width: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); }
.card.command-editor .command-editor-response textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
.command-editor-response-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.command-editor-response-options > .command-editor-field { margin: 0; }
.command-editor-response-options > .button { justify-self: start; margin: 0; }
.command-editor-response-options > .rule-summary, .command-editor-response-options > em { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.command-editor-rules { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.command-editor-rules:empty { display: none; }
.command-editor-rules > .button { justify-self: start; margin: 0; }
.command-editor-rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; align-items: end; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.4rem; }
.command-editor-rule > .command-editor-field { margin: 0; }
.command-editor-rule > .button { justify-self: end; margin: 0; }
.command-editor-restore .button { display: block; max-width: 100%; margin: 0.5rem 0 0; white-space: normal; }
.command-editor-footer { display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: 0.5rem; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.command-editor-footer .button { margin: 0; }
.command-editor-history { overflow-x: auto; }
.commands-list-toolbar { display: flex; gap: 0.75rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.card .commands-list-toolbar input { flex: 1 1 16rem; min-width: 0; margin: 0; }
.commands-list-toolbar .button { margin: 0; }
.commands-list-maintenance { display: flex; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.commands-list-maintenance .button { margin: 0; }
@media (max-width: 900px) {
    .command-editor-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .card.command-editor { padding: 1rem; }
    .command-editor-section, .command-editor-response { padding: 0.75rem; }
    .command-editor-rule, .command-editor-response-options { grid-template-columns: minmax(0, 1fr); }
    .command-editor-footer, .commands-list-toolbar { flex-direction: column; align-items: stretch; }
    .command-editor-footer .button { width: 100%; }
    .card .commands-list-toolbar input { flex-basis: auto; width: 100%; }
}
.command-editor-rule-actions:empty { display: none; }
.command-editor-rule-actions { margin-top: 0.75rem; }
.command-editor-rule-actions .button { margin: 0; }

/* Command simulator: isolated from the shared moderation simulator. */
.card.command-simulator { padding: 1.5rem; }
.command-simulator-header { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.command-simulator-header h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.command-simulator-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.command-simulator-main, .command-simulator-sidebar { display: grid; gap: 1.25rem; min-width: 0; }
.command-simulator-section, .command-simulator .sim-group { border: 1px solid var(--line); border-radius: 0.65rem; padding: 1.15rem; margin: 0; min-width: 0; }
.command-simulator-section h4, .command-simulator-results h4 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.command-simulator .sim-group summary { margin-bottom: 0.85rem; font-weight: 600; }
.card.command-simulator input:not([type="checkbox"]), .card.command-simulator select { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0.35rem 0 0; padding: 0.65rem 0.75rem; font: inherit; color: var(--fg); background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 0.4rem; }
.command-simulator .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.command-simulator .field, .command-simulator .sim-step-detail { min-width: 0; }
.command-simulator-sidebar .field-grid { grid-template-columns: minmax(0, 1fr); }
.command-simulator .sim-flags { gap: 0.5rem; margin-top: 0.75rem; }
.command-simulator .sim-flag { padding: 0.5rem; }
.card.command-simulator .command-simulator-runs { display: block; margin-top: 1rem; }
.command-simulator-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.5rem; }
.command-simulator-results { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1.25rem; min-width: 0; }
.command-simulator .sim-verdict { padding: 1rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; }
.command-simulator .sim-out { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.command-simulator .sim-step, .command-simulator .sim-response { overflow-wrap: anywhere; }
.command-simulator [hidden] { display: none !important; }
@media (max-width: 1100px) { .command-simulator-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .card.command-simulator { padding: 1rem; }
    .command-simulator-section, .command-simulator .sim-group { padding: 0.9rem; }
    .command-simulator .field-grid { grid-template-columns: minmax(0, 1fr); }
    .command-simulator-actions .button { width: 100%; margin: 0; }
    .command-simulator .sim-step { grid-template-columns: minmax(0, 1fr); }
    .command-simulator .sim-response { flex-wrap: wrap; }
}

@media (min-width: 601px) { .command-simulator .sim-step { grid-template-columns: 9rem minmax(8rem, 0.3fr) minmax(0, 1fr); } }
/* Counter editors share the timer and command section hierarchy. */
.card.counter-editor { padding: 1.5rem; }
.counter-editor-header { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.counter-editor-header h3 { margin: 0.9rem 0 0.4rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.counter-editor-header .hint { margin: 0; }
.counter-editor-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.counter-editor-main, .counter-editor-sidebar { display: grid; gap: 1.25rem; min-width: 0; }
.counter-editor-section { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 0.65rem; overflow-wrap: anywhere; }
.counter-editor-section h4 { margin: 0 0 0.65rem; font-size: 1.05rem; }
.counter-editor-section > .hint { margin: 0.5rem 0 1rem; }
.counter-editor-field { min-width: 0; }
.card.counter-editor .counter-editor-field > label, .card.counter-editor .counter-command > label { display: block; margin: 0; font-weight: 600; font-size: 0.9rem; }
.card.counter-editor input:not([type="checkbox"]), .card.counter-editor select { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0.35rem 0 0; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.4rem; color: var(--fg); background: var(--input-bg); font: inherit; }
.counter-bounds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.counter-command { margin-top: 0.85rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); min-width: 0; }
.counter-command .hint { margin: 0.3rem 0 0.5rem; font-size: 0.82rem; }
.counter-command-input { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.counter-command-input > span { color: var(--muted); }
.card.counter-editor .counter-command-input input { margin: 0; flex: 1; }
.card.counter-editor label.counter-editor-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0; margin: 0.8rem 0; background: transparent; }
.counter-current { margin: 0.75rem 0 0; font-size: 3rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.counter-controls { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.counter-controls .button { margin: 0; }
.counter-editor-section .table-wrap { max-width: 100%; overflow-x: auto; }
.counter-editor-footer { display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: 0.5rem; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.counter-editor-footer .button { margin: 0; }
@media (max-width: 900px) {
    .counter-editor-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .card.counter-editor { padding: 1rem; }
    .counter-editor-section { padding: 0.85rem; }
    .counter-bounds { grid-template-columns: minmax(0, 1fr); }
    .counter-editor-footer { flex-direction: column; }
    .counter-editor-footer .button { width: 100%; }
}

/* Keep list actions together even when the table gives their cell minimal width. */
.counter-controls.counter-row-controls { flex-wrap: nowrap; width: max-content; }
.counter-row-controls > .button { flex: 0 0 auto; }

/* Quotes list, deleted tab and editor share the dashboard theme. */
.quotes-toolbar { display: flex; gap: 0.75rem; justify-content: space-between; align-items: center; }
.quotes-toolbar input { flex: 1; min-width: 0; }
.quotes-row-actions { display: inline-flex; flex-wrap: nowrap; gap: 0.4rem; width: max-content; }
.quotes-row-actions .button { flex: 0 0 auto; margin: 0; }
.quotes-list td:nth-child(2), .quotes-history td:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.quotes-export-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.quotes-export-actions .button { margin: 0; }
.card.quote-editor { padding: 1.5rem; }
.quote-editor-header { border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; padding-bottom: 1rem; }
.quote-editor-header h3 { font-size: 1.15rem; margin: 1rem 0 0; }
.quote-editor-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.quote-editor-section { min-width: 0; border: 1px solid var(--line); border-radius: 0.65rem; padding: 1.15rem; }
.quote-editor-context .hint { margin-top: 0; line-height: 1.6; overflow-wrap: anywhere; }
.card.quote-editor input, .card.quote-editor textarea { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0.4rem 0 1rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.4rem; background: var(--input-bg); color: var(--fg); font: inherit; }
.card.quote-editor textarea { min-height: 12rem; resize: vertical; line-height: 1.5; }
.quote-editor-footer { display: flex; flex-direction: row-reverse; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.quote-editor-footer .button { margin: 0; }
@media (max-width: 1100px) { .quote-editor-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .card.quote-editor { padding: 1rem; }
    .quote-editor-section { padding: 0.9rem; }
    .quotes-toolbar, .quote-editor-footer { flex-direction: column; align-items: stretch; }
    .quotes-toolbar input, .quotes-toolbar .button { width: 100%; margin: 0; }
}

/* Chat alert cards and editor, scoped to preserve other alert surfaces. */
.card.chat-alerts-page { padding: 1.5rem; }
.chat-alerts-header { padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.chat-alerts-header h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.chat-alerts-page .alert-row { border: 1px solid var(--line); border-radius: 0.65rem; padding: 1.15rem; margin: 0 0 1rem; }
.chat-alerts-page .alert-row:last-of-type { border-bottom: 1px solid var(--line); }
.chat-alerts-page .alert-summary { margin: 0.75rem 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.chat-alerts-page .alert-details { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; padding: 1rem 0 0; margin-top: 1rem; border-left: 0; border-top: 1px solid var(--line); }
.chat-alert-editor, .chat-alert-reference { min-width: 0; }
.chat-alert-reference { padding: 1rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); overflow-wrap: anywhere; }
.chat-alert-reference .hint { margin-top: 0; }
.chat-alert-reference code { white-space: pre-wrap; overflow-wrap: anywhere; }
.card.chat-alerts-page textarea.alert-template, .card.chat-alerts-page .alert-threshold input { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0.4rem 0; padding: 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.4rem; color: var(--fg); background: var(--input-bg); font: inherit; }
.card.chat-alerts-page textarea.alert-template { min-height: 8rem; resize: vertical; line-height: 1.5; }
.chat-alerts-page .alert-tools { gap: 0.5rem; margin: 0.75rem 0; }
.chat-alerts-page .alert-tools .button { margin: 0; }
.chat-alerts-page .alert-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-alerts-page .alert-threshold { display: block; }
.chat-alerts-footer { display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--line); }
.chat-alerts-page [hidden] { display: none !important; }
@media (max-width: 1100px) { .chat-alerts-page .alert-details { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .card.chat-alerts-page { padding: 1rem; }
    .chat-alerts-page .alert-row { padding: 0.9rem; }
    .chat-alerts-page .alert-head { flex-wrap: wrap; }
    .chat-alerts-footer .button { width: 100%; margin: 0; }
}

.card.shoutouts-page { padding: 1.5rem; }
.shoutouts-page > h3, .shoutouts-header h3 { font-size: 1.15rem; }
.shoutouts-header h3 { margin: 1rem 0 0.5rem; }
.shoutouts-header { border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; padding-bottom: 0.75rem; }
.shoutouts-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.shoutouts-section { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 0.65rem; }
.shoutouts-section h4 { margin-top: 0; }
.shoutouts-message + .shoutouts-message { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.card.shoutouts-page textarea { display: block; width: 100%; min-width: 0; min-height: 8rem; margin: 0.4rem 0 0.75rem; padding: 0.75rem; font: inherit; line-height: 1.5; resize: vertical; background: var(--input-bg); color: var(--fg); border: 1px solid var(--border-strong); border-radius: 0.4rem; }
.card.shoutouts-page .shoutouts-options > label { display: flex; margin: 0 0 1rem; }
.shoutouts-page .alert-preview { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.shoutouts-page .hint { overflow-wrap: anywhere; }
.shoutouts-footer { display: flex; flex-direction: row-reverse; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.25rem; }
.shoutouts-footer .button { margin: 0; }
.shoutouts-row-actions { display: inline-flex; flex-wrap: nowrap; gap: 0.4rem; width: max-content; }
.shoutouts-row-actions .button { margin: 0; flex: 0 0 auto; }
.shoutouts-add { display: flex; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.shoutouts-add input { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .shoutouts-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .card.shoutouts-page { padding: 1rem; }
    .shoutouts-section { padding: 0.9rem; }
    .shoutouts-footer, .shoutouts-add { flex-direction: column; }
    .shoutouts-footer .button, .shoutouts-add input, .shoutouts-add .button { width: 100%; margin: 0; }
}

/* Moderation forms and filter panels. */
.moderation-page { padding: 1.5rem; min-width: 0; }
.moderation-page > h3 { font-size: 1.15rem; margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.moderation-editor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; margin: 1.25rem 0; }
.moderation-section, .moderation-page .filter-group { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: .65rem; }
.moderation-section h4 { margin: 0 0 1rem; }
.moderation-page input:not([type=checkbox]), .moderation-page select, .moderation-page textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.moderation-page label:has(input[type=checkbox]) { background: transparent; }
.moderation-page .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.moderation-page .filter-body { padding-top: 1.25rem; margin-top: 1.25rem; }
.moderation-page .filter-group { margin-bottom: 1rem; }
.moderation-footer, .moderation-page .filter-controls { display: flex; justify-content: flex-end; gap: .75rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.25rem; }
.moderation-footer .button, .moderation-page .filter-controls .button { margin: 0; }
.moderation-row-actions { display: inline-flex; flex-wrap: nowrap; width: max-content; gap: .4rem; }
.moderation-row-actions .button { flex: 0 0 auto; margin: 0; }
@media (max-width: 900px) { .moderation-editor { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
 .moderation-page { padding: 1rem; }
 .moderation-page .field-grid { grid-template-columns: minmax(0, 1fr); }
 .moderation-page .filter-group, .moderation-section { padding: 1rem; }
 .moderation-footer .button, .moderation-page .filter-controls .button { width: 100%; }
 .moderation-page .filter-head { gap: .5rem; }
 .moderation-page .filter-text { min-width: 0; overflow-wrap: anywhere; }
}

.moderation-create-footer { border-top: 0; padding-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }

.moderation-escalation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moderation-escalation-grid .moderation-field > label { margin-top: 0; }
@media (max-width: 600px) { .moderation-escalation-grid { grid-template-columns: minmax(0, 1fr); } }

/* Shared Chatbot secondary pages. Keep layout separate from API behavior. */
:is(.chatbot-panel, .community-panel, .tools-panel) { padding: 1.5rem; min-width: 0; }
:is(.chatbot-panel, .community-panel, .tools-panel) > h3 { font-size: 1.15rem; margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
:is(.chatbot-panel, .community-panel, .tools-panel) > input:not([type=checkbox]), :is(.chatbot-panel, .community-panel, .tools-panel) > select, :is(.chatbot-panel, .community-panel, .tools-panel) > textarea { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
:is(.chatbot-panel, .community-panel, .tools-panel) label:has(input[type=checkbox]) { background: transparent; }
:is(.chatbot-form-actions, .community-form-actions, .tools-form-actions) { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
:is(.chatbot-form-actions, .community-form-actions, .tools-form-actions) .button { margin: 0; }
.chatbot-domain-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.chatbot-domain-row input { flex: 1; width: 100%; min-width: 0; }
.chatbot-domain-row .button { flex: 0 0 auto; margin: 0; }
.chatbot-row-actions { display: inline-flex; flex-wrap: nowrap; gap: .4rem; width: max-content; }
.chatbot-row-actions .button { flex: 0 0 auto; margin: 0; }
.command-simulator-actions { border-top: 0; padding-top: 0; }
@media (max-width: 600px) {
 :is(.chatbot-panel, .community-panel, .tools-panel) { padding: 1rem; }
 :is(.chatbot-form-actions, .community-form-actions, .tools-form-actions) .button { width: 100%; }
 .chatbot-domain-row { flex-wrap: wrap; }
}

/* Loyalty and community forms share bounded, responsive columns. */
.community-panel .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; margin-top: 1rem; }
.community-tier-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.community-tier-row input, .community-trigger input:not([type=checkbox]), .community-trigger select { width: 100%; min-width: 0; box-sizing: border-box; }
.community-trigger { border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; margin: 1rem 0; }
.community-trigger-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: center; }
.community-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 10rem; max-width: 22rem; }
.community-row-actions .button, .community-tier-row .button { margin: 0; }
.community-row-actions select { width: 100%; min-width: 0; }
@media (max-width: 600px) {
 .community-panel .field-grid, .community-tier-row, .community-trigger-fields { grid-template-columns: minmax(0, 1fr); }
 .community-panel .field-grid .span-2 { grid-column: auto; }
 .community-row-actions { min-width: 0; }
}

/* Streaming tools and reports retain specialized charts and timelines. */
.tools-panel .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tools-panel .hint, .tools-panel code { overflow-wrap: anywhere; }
.tools-panel audio, .tools-panel video { max-width: 100%; }
.tools-control-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.tools-control-actions .button { margin: 0; }
.tools-control-actions select { min-width: 0; max-width: 100%; }
.tools-row-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 10rem; max-width: 24rem; }
.tools-row-actions .button { margin: 0; }
@media (max-width: 600px) {
 .tools-panel .field-grid { grid-template-columns: minmax(0, 1fr); }
 .tools-panel .field-grid .span-2 { grid-column: auto; }
 .tools-control-actions { align-items: stretch; flex-direction: column; }
 .tools-control-actions .button, .tools-control-actions select { width: 100%; }
 .tools-row-actions { min-width: 0; }
}

/* Compact icon groups must not wrap inside narrow table action cells. */
.tools-row-actions.tools-icon-actions { flex-wrap: nowrap; width: max-content; min-width: 0; max-width: none; }
.tools-icon-actions > .button { flex: 0 0 auto; }

/* Consistency pass 2026-09-14: one card-title size app-wide (.card h3 =
   1.15rem, panels add a divider); short numeric fields stop stretching to
   the card width; module tiles align their action rows; a panel head can
   carry the card's main action beside the title. */
:is(.chatbot-panel, .community-panel, .tools-panel, .moderation-page) > input[type="number"] { max-width: 14rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; }
.panel-head .button { margin: 0; }
.tools-inline-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.tools-inline-controls select { flex: 1 1 12rem; min-width: 0; width: auto; margin: 0; }
.module-grid { align-items: stretch; }
.module-tile { display: flex; flex-direction: column; }
.module-tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.module-tile-foot .status-badge { flex: 0 1 auto; white-space: nowrap; }
.module-tile-actions { display: inline-flex; gap: 0.4rem; flex: 0 0 auto; margin-left: auto; }
.module-tile-foot .button { margin: 0; flex: 0 0 auto; }
.shoutouts-add-block > label { display: block; margin: 0.6rem 0 0.15rem; font-weight: 500; font-size: 0.92rem; }

.public-settings-section { border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; margin: 1rem 0; min-width: 0; }
.public-settings-section h4 { margin: 0 0 1rem; }
.public-settings-section > label:has(input[type=checkbox]) { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; background: transparent; }
.public-settings-section > input:not([type=checkbox]) { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.public-settings-section > a { display: block; margin-top: 1rem; overflow-wrap: anywhere; }

/* Shared accounts keep channel-specific status and controls together. */
.account-links-table { margin-top: .75rem; container-type: inline-size; }
.account-links-table td { vertical-align: top; }
.account-links-table table { table-layout: fixed; }
.account-links-table th:nth-child(1) { width: 24%; }
.account-links-table th:nth-child(2) { width: 12%; }
.account-links-table th:nth-child(3) { width: 14%; }
/* This cell contains connection details as well as actions: override the
   generic last-column action rule, including its :has() specificity. */
.account-links-table table td:last-child:has(.button),
.account-links-table table td:last-child { width: auto; white-space: normal; text-align: left; }
.account-links-table td { overflow-wrap: anywhere; }
.account-links-table .viewer-identity > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.account-connection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; }
.account-connection + .account-connection { border-top: 1px solid var(--line); }
.account-connection-details { flex: 1 1 12rem; display: grid; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.account-connection-meta { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; }
.account-connection-meta .status-badge { margin-right: 0; }
.account-connection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; margin-left: auto; max-width: 100%; }
.account-connection-actions .button { margin: 0; }
@container (max-width: 900px) {
    .account-links-table table, .account-links-table tbody { display: block; width: 100%; }
    .account-links-table thead { display: none; }
    .account-links-table tbody tr:hover { background: transparent; }
    .account-links-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
    .account-links-table td { display: block; padding: 0; border: 0; }
    .account-links-table td:first-child { flex: 1 1 15rem; }
    .account-links-table td:last-child { flex: 1 1 100%; }
    .account-links-table .account-platform, .account-links-table .account-purpose { color: var(--muted); }
}
@container (max-width: 480px) {
    .account-connection { align-items: stretch; flex-direction: column; }
    .account-connection-details { flex: 0 1 auto; }
    .account-connection-actions { align-self: flex-end; }
}