/* DUDE.AI — page-specific classes for the migrated React pages (scream skin).
   [S3] Copied from the design-reference mocks' embedded <style> blocks:
   - dashboard-global.html → .wsgrid (workspace navigation cards)
   - signin.html → .stage/.left/.right, namespaced here as .signin-stage
   plus small dash-/signin-/flash- helpers the React pages need (the Hono pages
   used Tailwind utilities for these). Requires styles.css + scream-app.css first. */

/* ---------- /app/dashboard ---------- */
.wsgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px,2.5vw,32px); }
/* [D1] Whole-tile workspace-card link (the Hono tile is ONE anchor,
   dashboard.tsx:248 `block … hover:border-gold`). Pairs with .panel. */
a.ws-cardlink { display: block; color: inherit; text-decoration: none; }
a.ws-cardlink:hover { border-color: var(--scream-yellow); }
@media (max-width: 1080px) { .wsgrid { grid-template-columns: 1fr; } }

/* Small mono meta line/link (the Hono `text-xs text-muted uppercase tracking-wider
   hover:text-gold` pattern): dev-filter toggle, section labels, small links. */
.dash-meta { font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); text-decoration: none; }
a.dash-meta:hover { color: var(--scream-yellow); }
.dash-agents { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cream-dim); text-transform: uppercase; white-space: nowrap; flex-wrap: wrap; }
.dash-agents .on { color: var(--ok); }
.dash-agents .off { color: rgba(234,224,203,0.35); }

/* Workspace-card foot links (Board / Tasks / Members / Agents / Workflows / Open). */
.dash-links { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(234,224,203,0.15); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dash-links a { font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--scream-yellow); text-decoration: none; }
.dash-links a:hover { color: var(--cream); }
.dash-links a.dim { color: var(--cream-dim); }
.dash-links a.dim:hover { color: var(--cream); }

/* Query-param flash line (ok / err) — scream take on the Hono <Flash>. */
.flashline { font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 800; letter-spacing: 0.04em; border: 1.5px solid var(--ok); color: var(--ok); background: rgba(91,214,107,0.06); box-shadow: 3px 3px 0 rgba(0,0,0,0.7); padding: 10px 14px; margin: 0 0 16px; }
.flashline.err { border-color: var(--scream-red); color: var(--scream-red); background: rgba(255,59,48,0.06); }
/* [74b18a70] warn: a REVERSIBLE condition (a disabled agent) must not wear the same colour as a
   terminal one (a revoked agent). Uses the existing --scream-yellow token rather than a new hue. */
.flashline.warn { border-color: var(--scream-yellow); color: var(--scream-yellow); background: rgba(240,197,63,0.07); }

/* ---------- /app/login ---------- */
/* The signin mock's two-panel .stage, namespaced. Layout's fullWidth <main> pads
   by --bleed-pad; the negative margin restores the mock's full-bleed split while
   .left/.right re-apply the same gutter inside. */
.signin-stage { min-height: calc(100vh - 56px); display: grid; grid-template-columns: 1.2fr 1fr; margin: 0 calc(-1 * var(--bleed-pad)); }
@media (max-width: 980px) { .signin-stage { grid-template-columns: 1fr; } }
.signin-stage .left { padding: clamp(40px,6vw,90px) var(--bleed-pad); display: flex; flex-direction: column; justify-content: center; border-right: 1.5px solid rgba(234,224,203,0.15); }
.signin-stage .right { padding: clamp(40px,6vw,90px) var(--bleed-pad); display: flex; flex-direction: column; justify-content: center; background: #070605; }
@media (max-width: 980px) {
  .signin-stage .left { border-right: none; border-bottom: 1.5px solid rgba(234,224,203,0.15); min-height: 0; padding: clamp(28px,5vw,60px) var(--bleed-pad); justify-content: flex-start; }
}

/* Collapsible API-token fallback (the Hono <details> under the OTP card). */
.signin-token { margin-top: 14px; }
.signin-token > summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.signin-token > summary:hover { color: var(--scream-yellow); }
.signin-token > summary::-webkit-details-marker { display: none; }

/* ---------- [S4] /app/workspaces/:wid/tasks (list) ---------- */
/* Status multi-select popover — the Hono <details> dropdown in scream chrome. */
.filter-pop { position: relative; display: inline-block; }
.filter-pop > summary { list-style: none; cursor: pointer; user-select: none; }
.filter-pop > summary::-webkit-details-marker { display: none; }
.filter-pop-menu { position: absolute; margin-top: 6px; z-index: 30; min-width: 14rem; background: var(--scream-panel, #14100C); border: 1.5px solid rgba(234,224,203,0.3); box-shadow: 4px 4px 0 rgba(0,0,0,0.7); padding: 12px 14px; }
.filter-pop-menu label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.filter-pop-menu label:hover { color: var(--scream-yellow); }
.filter-pop-menu input[type="checkbox"] { accent-color: var(--scream-yellow); }
.filter-pop-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(234,224,203,0.15); }
.filter-pop-foot button { background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.filter-pop-foot button:hover { color: var(--scream-yellow); }

/* ---------- [S4] /app/workspaces/:wid/tasks/new + task detail ---------- */
/* Acceptance-criteria builder rows (the alarmbox rows from the task-new mock). */
.crit-row { border: 1.5px solid rgba(234,224,203,0.25); background: #0A0807; padding: 10px 12px; }
.crit-main { display: flex; align-items: center; gap: 10px; }
.crit-main .crit-kind { width: auto; flex: none; padding: 7px 10px; font-size: 0.75rem; }
.crit-main .crit-text { flex: 1; padding: 7px 10px; font-size: 0.8125rem; }
.crit-req { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); white-space: nowrap; }
.crit-req input { accent-color: var(--scream-yellow); }
.crit-remove { background: none; border: none; cursor: pointer; font-family: var(--font-mono); color: var(--scream-red); font-weight: 800; font-size: 0.875rem; padding: 0 2px; }
.crit-metric { margin-top: 8px; display: grid; grid-template-columns: 4fr 2fr 6fr; gap: 8px; }
.crit-metric .fin { padding: 7px 10px; font-size: 0.75rem; }
@media (max-width: 720px) { .crit-main { flex-wrap: wrap; } .crit-metric { grid-template-columns: 1fr; } }

/* Alarmbox (criteria) — red-alert framed panel per the task-new mock. */
.alarmbox { border: 1.5px solid var(--scream-red); background: rgba(255,59,48,0.05); box-shadow: 4px 4px 0 rgba(0,0,0,0.7); padding: 16px 18px; }
.alarmbox .bt { font-family: var(--font-display); color: var(--cream); text-transform: uppercase; }

/* ---------- [S4] task detail ---------- */
/* Secondary meta line (type · iteration · id · created · duration). */
.task-meta { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--cream-dim); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-meta code { color: var(--cream); font-size: 0.6875rem; }

/* Section-filter chips (Show: All / Input / Output). */
.td-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.td-chip { cursor: pointer; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; border: 1.5px solid rgba(234,224,203,0.3); background: transparent; color: var(--cream-dim); }
.td-chip:hover { color: var(--scream-yellow); }
.td-chip.on { border-color: var(--scream-yellow); color: var(--scream-yellow); }

/* Verification-band label (Input / Output / Acceptance / Timeline). */
.band-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; padding-left: 8px; margin: 18px 0 10px; }

/* Roles grid — Creator / Assignee / Reviewer (+ Security officer) cells. */
.roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 980px) { .roles-grid { grid-template-columns: 1fr; } }

/* Markdown body on scream ground (description + timeline comment bodies). */
.prose-scream { font-size: 0.84375rem; line-height: 1.65; color: var(--cream); }
.prose-scream a { color: var(--scream-yellow); }
.prose-scream code { color: var(--cream); }

/* Pre-submit edit fieldsets. */
.edit-fieldset { border: 1.5px solid rgba(234,224,203,0.22); padding: 12px 14px; margin: 0 0 14px; }

/* Composite-formula disclosure. */
.formula-pre { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cream-dim); background: #0A0807; border: 1px solid rgba(234,224,203,0.15); padding: 10px 12px; margin: 8px 0 0; overflow-x: auto; }

/* Attachment cards (Input / Output / unclassified grids). */
.att-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 980px) { .att-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .att-grid { grid-template-columns: 1fr; } }
.att-card { border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.att-card img { width: 100%; height: 128px; object-fit: cover; background: #070605; display: block; }
.att-card img:hover { opacity: 0.85; }
.att-card .att-file { display: flex; align-items: center; justify-content: center; height: 128px; background: #070605; font-size: 1.875rem; text-decoration: none; }
.att-card .att-meta { padding: 8px 10px; }
.att-card .att-name { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card .att-sub { margin: 4px 0 0; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--cream-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.att-card .att-delete { border: none; border-top: 1px solid rgba(234,224,203,0.15); background: transparent; cursor: pointer; width: 100%; padding: 5px 0; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--scream-red); }
.att-card .att-delete:hover { background: rgba(255,59,48,0.1); }

/* In-page image lightbox for attachment previews. */
.img-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; }
.img-modal img { max-width: 100%; max-height: 100%; box-shadow: 6px 6px 0 rgba(0,0,0,0.8); border: 1.5px solid rgba(234,224,203,0.3); }
.img-modal button { position: absolute; top: 18px; right: 22px; background: none; border: 1.5px solid rgba(234,224,203,0.4); color: var(--cream); font-family: var(--font-mono); font-weight: 800; font-size: 0.875rem; padding: 6px 10px; cursor: pointer; }
.img-modal button:hover { border-color: var(--scream-yellow); color: var(--scream-yellow); }

/* ================================================================== */
/* ---------- [S5] workspace overview + agents + agent detail + kpis + /me ---------- */
/* APPEND-ONLY section. Ported from the design-reference mocks' per-page
   <style> blocks (agents.html .agentcard/.arow/.kpis; agent-detail.html
   .kgrid/.ftable/.presence; agent-kpis.html .kgrid(5)/pre.json) plus the
   small helpers the React S5 pages need. Do not touch S3/S4 rules above. */

/* agents.html — roster cards + per-card KPI strip */
.agentcard { border: 1.5px solid rgba(234,224,203,0.22); background: var(--scream-panel, #14100C); box-shadow: 4px 4px 0 rgba(0,0,0,0.7); padding: 18px; margin-bottom: 16px; }
.arow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 1.5px; background: rgba(234,224,203,0.12); border: 1.5px solid rgba(234,224,203,0.12); margin-top: 14px; }
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kpis > div { background: #0C0907; padding: 10px 12px; min-width: 0; }
.kpis .v { font-family: var(--font-display); font-size: 1.1875rem; color: var(--cream); }
.kpis .k { font-family: var(--font-mono); font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; color: var(--cream-dim); text-transform: uppercase; margin-top: 3px; }

/* agent-detail.html / agent-kpis.html — KPI grid (7-col detail, 5-col kpis, 3-col usage) */
.kgrid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1.5px; background: rgba(234,224,203,0.12); border: 1.5px solid rgba(234,224,203,0.12); }
@media (max-width: 1200px) { .kgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kgrid.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1100px) { .kgrid.cols-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.kgrid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kgrid > div { background: #0C0907; padding: 12px 14px; min-width: 0; }
.kgrid .v { font-family: var(--font-display); font-size: 1.375rem; color: var(--cream); }
.kgrid .k { font-family: var(--font-mono); font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; color: var(--cream-dim); text-transform: uppercase; margin-top: 4px; }
.ftable { display: grid; grid-template-columns: 1.7fr 0.8fr 0.5fr 0.5fr 0.8fr; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(234,224,203,0.12); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--cream); align-items: baseline; }
.presence { display: flex; gap: 2px; }
.presence span { flex: 1; height: 22px; background: var(--ok); opacity: 0.85; }
.s5-presence { border: 1.5px solid rgba(234,224,203,0.15); }
.s5-presence span { opacity: 1; }
pre.json, .s5-pre { background: #0A0807; border: 1.5px solid rgba(234,224,203,0.25); padding: 16px; font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 700; color: var(--cream-dim); line-height: 1.65; overflow-x: auto; margin: 0; white-space: pre-wrap; word-break: break-word; }
pre.json .y { color: var(--scream-yellow); }

/* overview KPI tiles — statgrid variant that tolerates sub-pills */
.s5-tiles .cellx a { color: inherit; }
.s5-tiles .cellx a:hover .lab { color: var(--scream-yellow); }

/* generic row-link (recent tasks) */
.s5-rowlink { display: flex; align-items: center; gap: 12px; padding: 5px 8px; margin: 0 -8px; text-decoration: none; color: var(--cream); min-width: 0; }
.s5-rowlink:hover { background: rgba(234,224,203,0.06); }
.s5-rowlink-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84375rem; }

/* presence dot */
.s5-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: rgba(234,224,203,0.25); flex-shrink: 0; }
.s5-dot.on { background: var(--ok); }

/* 24h presence barcode on roster cards */
.s5-barcode { display: flex; gap: 1px; height: 12px; border: 1px solid rgba(234,224,203,0.2); overflow: hidden; margin-bottom: 8px; }
.s5-barcode span { flex: 1; background: rgba(234,224,203,0.12); }
.s5-barcode span.on { background: var(--ok); }

/* roster grid + card-as-link */
.s5-roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1080px) { .s5-roster-grid { grid-template-columns: 1fr; } }
.s5-agentcard-link { display: block; text-decoration: none; color: var(--cream); margin-bottom: 0; transition: border-color 0.12s var(--ease); }
.s5-agentcard-link:hover { border-color: var(--scream-yellow); }
.s5-agentcard-link.is-disabled { border-color: rgba(216,65,46,0.72); background: linear-gradient(135deg, rgba(216,65,46,0.09), transparent 42%), var(--scream-panel, #14100C); }
.s5-agent-paused { display: inline-flex; align-items: center; border: 1px solid var(--scream-red); color: var(--scream-red); padding: 2px 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }

/* small mono chips (runtime / provider account) */
.s5-chip-mono { display: inline-block; border: 1px solid rgba(234,224,203,0.3); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; padding: 2px 6px; }

/* hero reliability wrapper on the agent detail page */
.s5-headline-wrap { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(234,224,203,0.3); padding: 3px 8px; }

/* metric cards (workspace overview metrics panel) */
.s5-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1200px) { .s5-metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .s5-metrics-grid { grid-template-columns: 1fr; } }
.s5-metric-card { position: relative; border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; padding: 12px 14px; min-width: 0; }
.s5-metric-card:hover { border-color: rgba(247,181,0,0.5); }
.s5-metric-card.is-muted { opacity: 0.5; }
.s5-metric-link { position: absolute; inset: 0; z-index: 0; }
.s5-metric-inner { position: relative; z-index: 1; pointer-events: none; }
.s5-metric-inner svg { pointer-events: auto; }
.s5-metric-eye { position: absolute; top: 6px; right: 6px; z-index: 2; background: none; border: none; cursor: pointer; font-size: 0.75rem; color: var(--cream-dim); padding: 2px 4px; }
.s5-metric-eye:hover { color: var(--scream-yellow); }
.s5-metric-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cream-dim); }
.s5-metric-kind { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.s5-scope-badge { font-size: 0.59375rem; line-height: 1; padding: 2px 5px; border: 1px solid rgba(234,224,203,0.3); color: var(--cream-dim); flex-shrink: 0; }
.s5-scope-badge.scoped { border-color: rgba(247,181,0,0.5); color: var(--scream-yellow); }
.s5-metric-label { margin: 0 0 8px; font-size: 0.84375rem; font-weight: 600; color: var(--cream); line-height: 1.35; }
.s5-metric-value { font-family: var(--font-display); font-size: 1.75rem; color: var(--scream-yellow); line-height: 1; margin-bottom: 4px; }
.s5-metric-value.dim { color: rgba(234,224,203,0.35); }
.s5-metric-sub { margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cream-dim); }
.s5-metric-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 700; }
.s5-spark-labels { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.625rem; color: var(--cream-dim); margin-top: 2px; }
.s5-freshness { margin: 0 0 8px; font-family: var(--font-mono); font-size: 0.65625rem; color: rgba(234,224,203,0.45); }

/* performance tab: summary tiles + comparison cards + meter bar */
.s5-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5px; background: rgba(234,224,203,0.12); border: 1.5px solid rgba(234,224,203,0.12); margin-bottom: 16px; }
@media (max-width: 1080px) { .s5-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.s5-summary-grid .cellx { background: #0C0907; padding: 12px 14px; min-width: 0; }
.s5-summary-grid .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s5-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1200px) { .s5-compare-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .s5-compare-grid { grid-template-columns: 1fr; } }
.s5-compare-card { border: 1.5px solid rgba(234,224,203,0.22); background: var(--scream-panel, #14100C); box-shadow: 4px 4px 0 rgba(0,0,0,0.7); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s5-meterbar { height: 6px; background: rgba(234,224,203,0.15); overflow: hidden; }
.s5-meterbar span { display: block; height: 100%; }
.s5-chiprow { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; color: var(--cream-dim); }
.s5-chiprow span { border: 1px solid rgba(234,224,203,0.2); padding: 2px 7px; white-space: nowrap; }

/* reliability role/domain drilldown grids */
.s5-relgrid { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0 14px; align-items: center; font-family: var(--font-mono); }
.s5-relgrid.head { font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); border-bottom: 1px solid rgba(234,224,203,0.2); padding-bottom: 4px; margin-bottom: 4px; }
.s5-relgrid.row { font-size: 0.8125rem; padding: 6px 0; cursor: pointer; list-style: none; }
.s5-relgrid.row:hover { background: rgba(234,224,203,0.05); }
.s5-relgrid.row::-webkit-details-marker { display: none; }
.s5-reldetails { border-bottom: 1px solid rgba(234,224,203,0.1); }
.s5-relgrid5 { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 0 14px; align-items: center; font-family: var(--font-mono); }
.s5-relgrid5.head { font-size: 0.59375rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(234,224,203,0.4); margin-bottom: 2px; }
.s5-relgrid5.row { font-size: 0.75rem; padding: 3px 0; }

/* legend swatch (presence / throughput) */
.s5-legend { display: inline-block; width: 8px; height: 12px; vertical-align: middle; margin-right: 5px; background: rgba(234,224,203,0.12); }
.s5-legend.on { background: var(--ok); }

/* key→value row (custom/composite KPIs) */
.s5-kvrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(234,224,203,0.1); }

/* inline edit rows (spaces / allowlist / adjustments) */
.s5-editrow { border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; padding: 10px 12px; }

/* link-styled buttons (remove / revoke / archive / restore / void) */
.s5-linkbtn { background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-dim); }
.s5-linkbtn:hover { color: var(--cream); }
.s5-linkbtn.red { color: var(--scream-red); }
.s5-linkbtn.red:hover { color: #ff6b61; }
.s5-linkbtn.ok { color: var(--ok); }
.s5-linkbtn.warn { color: #E8923B; }
.s5-linkbtn.yellow { color: var(--scream-yellow); }

/* collapsed <details> summaries (add member / edit identity / rotate token) */
.s5-summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); }
.s5-summary:hover { color: var(--scream-yellow); }
.s5-summary::-webkit-details-marker { display: none; }

/* one-time token display (rotate flows) */
.s5-token { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 700; color: var(--cream); background: #0A0807; border: 1.5px solid rgba(234,224,203,0.25); padding: 12px 14px; word-break: break-all; margin-bottom: 10px; }

/* outline-red danger button (danger zone / revoke) */
.btn-scream.red { background: transparent; border-color: var(--scream-red); color: var(--scream-red); }
.btn-scream.red:hover { background: rgba(255,59,48,0.12); }

/* danger zone panel accent */
.s5-danger { border-color: var(--scream-red) !important; }

/* responsive form grids collapse on small screens */
@media (max-width: 900px) { .s5-formgrid { grid-template-columns: 1fr !important; } }

/* ================================================================== */
/* ---------- [S6] apps + broadcasts + incidents + knowledge bases + vault + metrics ---------- */
/* APPEND-ONLY section. Ported from the design-reference mocks' per-page
   <style> blocks (kb-browse.html .tree; metric-detail.html .child/.bars —
   adapted below as .s6-browse-tree/.s6-treefile; the child cards reuse the
   S5 .s5-metric-card) plus the small helpers the S6 React pages need. Do
   not touch the S3/S4/S5 rules above. */

/* breadcrumb line — the Hono "← {w.name} / Section" row in scream mono */
.s6-crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); }
.s6-crumbs a { color: var(--cream-dim); text-decoration: none; }
.s6-crumbs a:hover { color: var(--scream-yellow); }
.s6-crumbs .s6-crumb-here { color: var(--scream-yellow); }

/* collapsed <details> blocks (Advanced / Built-in packs / grant form) */
.s6-details { border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; }
.s6-details > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 800; letter-spacing: 0.06em; color: var(--cream-dim); }
.s6-details > summary:hover { color: var(--scream-yellow); }
.s6-details > summary::-webkit-details-marker { display: none; }

/* fieldsets (scope pickers / scope groups) */
.s6-fieldset { border: 1.5px solid rgba(234,224,203,0.22); padding: 12px 14px; margin: 0; min-width: 0; }
.s6-fieldset legend { font-family: var(--font-mono); font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); padding: 0 6px; }

/* apps create-form scope grid + checklist rows */
.s6-scopegrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 980px) { .s6-scopegrid { grid-template-columns: 1fr; } }
.s6-scopecheck { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 0.8125rem; color: var(--cream-dim); }
.s6-scopecheck:hover { color: var(--cream); }
.s6-scopecheck input { accent-color: var(--scream-yellow); margin-top: 3px; flex-shrink: 0; }
.s6-scopedesc { display: block; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cream-dim); margin-top: 2px; }

/* danger-zone <details> (workspace:admin) */
.s6-danger-details { border: 1.5px solid var(--scream-red); background: rgba(255,59,48,0.05); margin-top: 16px; }
.s6-danger-details > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 800; letter-spacing: 0.06em; color: var(--scream-red); }
.s6-danger-details > summary::-webkit-details-marker { display: none; }
.s6-danger-details .s6-scopecheck input { accent-color: var(--scream-red); }

/* in-page confirm modals (revoke app / grant admin / delete metric) */
.s6-modal-back { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; padding: 24px; }
.s6-modal { max-width: 460px; width: 100%; background: var(--scream-panel, #14100C); border: 2px solid rgba(234,224,203,0.35); box-shadow: 6px 6px 0 rgba(0,0,0,0.8); }
.s6-modal-danger { border-color: var(--scream-red); }
.s6-modal-head { padding: 14px 18px; border-bottom: 1.5px solid rgba(255,59,48,0.5); background: rgba(255,59,48,0.12); font-family: var(--font-display); font-size: 1.125rem; text-transform: uppercase; color: var(--cream); }
.s6-modal-body { padding: 16px 18px; font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 700; color: var(--cream-dim); line-height: 1.6; }
.s6-modal-foot { padding: 12px 18px; border-top: 1.5px solid rgba(255,59,48,0.4); display: flex; justify-content: flex-end; gap: 12px; }
.s6-modal-foot .btn-scream { padding: 9px 15px; font-size: 0.75rem; }

/* small pill buttons (vault row actions: rotate / download / archive) */
.s6-minibtn { cursor: pointer; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; border: 1.5px solid rgba(234,224,203,0.4); color: var(--cream-dim); }
.s6-minibtn:hover { border-color: var(--cream); color: var(--cream); }
.s6-minibtn.yellow { border-color: rgba(240,197,63,0.6); color: var(--scream-yellow); }
.s6-minibtn.yellow:hover { background: rgba(240,197,63,0.12); }
.s6-minibtn.ok { border-color: rgba(91,214,107,0.6); color: var(--ok); }
.s6-minibtn.ok:hover { background: rgba(91,214,107,0.1); }
.s6-minibtn.red { border-color: rgba(255,59,48,0.6); color: var(--scream-red); }
.s6-minibtn.red:hover { background: rgba(255,59,48,0.1); }
.s6-minibtn[disabled] { opacity: 0.35; cursor: not-allowed; }
summary.s6-minibtn { list-style: none; }
summary.s6-minibtn::-webkit-details-marker { display: none; }
.s6-inline-details { display: inline-block; text-align: left; }

/* native file inputs on scream ground */
.s6-file { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cream); }
.s6-file::file-selector-button { margin-right: 8px; padding: 6px 10px; background: #0A0807; border: 1.5px solid rgba(234,224,203,0.3); color: var(--cream); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.s6-file::file-selector-button:hover { border-color: var(--scream-yellow); color: var(--scream-yellow); }

/* body links in tables (broadcast history / event task links) */
.s6-bodylink:hover { color: var(--scream-yellow) !important; }

/* kb-browse two-pane grid + tree (kb-browse.html .tree, adapted) */
.s6-browse-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
@media (max-width: 980px) { .s6-browse-grid { grid-template-columns: 1fr; } }
.s6-browse-tree { border-right: 1.5px solid rgba(234,224,203,0.15); padding-right: 12px; max-height: 600px; overflow: auto; }
@media (max-width: 980px) { .s6-browse-tree { border-right: none; border-bottom: 1.5px solid rgba(234,224,203,0.15); padding: 0 0 12px; } }
/* [K3] Rendered as an <a> (react-router Link) now — text-decoration/box-sizing
   keep the old button look. */
.s6-treefile { display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: none; cursor: pointer; padding: 3px 6px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--cream-dim); text-decoration: none; }
.s6-treefile:hover { color: var(--cream); background: rgba(240,197,63,0.05); }
.s6-treefile.on { background: rgba(240,197,63,0.15); color: var(--scream-yellow); }

/* metrics custom-form mode-picker cards (Hono .mode-radio labels) */
.s6-modecard { display: block; border: 1.5px solid rgba(234,224,203,0.25); padding: 12px 14px; cursor: pointer; min-width: 0; }
.s6-modecard:hover { border-color: rgba(240,197,63,0.6); }
.s6-modecard input { accent-color: var(--scream-yellow); }

/* metrics inline edit row */
.s6-editrow-tr td { border-top: 1px solid rgba(234,224,203,0.1); }

/* metric-detail child cards' bar strip (metric-detail.html .bars) — kept for
   the mock's visual vocabulary; the child cards reuse .s5-metric-card. */
.s6-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-top: 12px; }
.s6-bars span { flex: 1; background: var(--scream-yellow); opacity: 0.9; min-height: 2px; }
.s6-bars span.dimb { background: rgba(234,224,203,0.3); }

/* ================================================================== */
/* ---------- [S7] global admin cluster (users · agents · broadcasts ·
   knowledge bases · audit · monitoring · service accounts · usage ·
   settings) ---------- */
/* APPEND-ONLY section. Style reference: design-reference/DUDE-AI-DS/ui_kits/
   work-os/pages/admin-*.html (they reuse the shared scream vocabulary —
   panel/tbl/tag/fin/flabel/rangebtn/chip/statgrid); the helpers below cover
   the page-specific pieces the S7 React pages need (filter rows, the agents
   workspace popover + segmented control + mobile stacking, the audit
   metadata disclosure + pager, monitoring banner/tiles/rule rows, usage
   bars/heatmap chips, token reveal box). Do not touch the sections above. */

/* shared filter row (users/audit/agents) */
.s7-filter-row { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }

/* create-user style form grid */
.s7-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; align-items: end; }
@media (max-width: 900px) { .s7-formgrid { grid-template-columns: 1fr; } }
.s7-field { display: block; min-width: 0; }

/* compact inline controls (inline user edit row, audit per-page select) */
.fin.s7-inline { width: auto; padding: 5px 9px; font-size: 0.78125rem; }

/* one-time token boxes (user create/rotate, SA mint/rotate) */
.s7-code { display: block; background: #0A0807; border: 1.5px solid rgba(234,224,203,0.3); padding: 10px 12px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--cream); word-break: break-all; margin-bottom: 4px; }

/* agents workspace-popover (the Hono <details id="ws-popover"> checklist) */
.s7-popover { position: relative; }
.s7-popover > summary { cursor: pointer; user-select: none; list-style: none; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border: 1.5px solid rgba(234,224,203,0.4); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.s7-popover > summary:hover { border-color: var(--scream-yellow); }
.s7-popover > summary::-webkit-details-marker { display: none; }
.s7-popover-body { position: absolute; margin-top: 4px; z-index: 20; background: var(--scream-panel, #14100C); border: 1.5px solid rgba(234,224,203,0.35); padding: 12px; min-width: 224px; max-width: calc(100vw - 32px); box-shadow: 4px 4px 0 rgba(0,0,0,0.7); max-height: 384px; overflow-y: auto; }
.s7-popover-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(234,224,203,0.22); font-size: 0.75rem; }
.s7-popover-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 0.75rem; cursor: pointer; }
.s7-popover-item:hover { color: var(--scream-yellow); }
.s7-popover-item input { accent-color: var(--scream-yellow); height: 16px; width: 16px; flex-shrink: 0; }

/* Any/Online/Offline segmented control */
.s7-segwrap { height: 32px; display: inline-flex; align-items: stretch; border: 1.5px solid rgba(234,224,203,0.4); overflow: hidden; }
.s7-seg { padding: 0 12px; display: inline-flex; align-items: center; background: transparent; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.s7-seg:hover { color: var(--scream-yellow); background: rgba(240,197,63,0.06); }
.s7-seg.on { background: var(--scream-yellow); color: #0A0807; cursor: default; }

/* [b8b3e6a7] agents matrix: table on wide screens, stacked cards under 900px.
   Raised from 768px to the app's other admin-table breakpoint (.s7-audit-table
   uses 900px) — eight columns of real content (avatar+handle+chip, workspace,
   a linked task list) need more room than the narrower threshold left them.
   `table-layout: fixed` + the colgroup widths below are what actually stop the
   table from growing past its container; the breakpoint is the second line of
   defense for windows too narrow to honor those widths at all. */
.s7-agents-cards { display: none; }
@media (max-width: 900px) {
  .s7-agents-table { display: none; }
  .s7-agents-cards { display: flex; flex-direction: column; gap: 8px; }
}
.s7-agent-card { border: 1.5px solid rgba(234,224,203,0.22); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.s7-agents-table table { table-layout: fixed; width: 100%; }
.s7-agents-table td { overflow: hidden; }

/* filter chip buttons (monitoring incident chips, usage range selector) */
.s7-chipbtn { cursor: pointer; padding: 6px 12px; background: transparent; border: 1.5px solid rgba(234,224,203,0.4); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); }
.s7-chipbtn:hover { color: var(--scream-yellow); border-color: var(--scream-yellow); }
.s7-chipbtn.on { background: rgba(240,197,63,0.15); color: var(--scream-yellow); border-color: rgba(240,197,63,0.6); cursor: default; }

/* audit pager + metadata disclosure */
.s7-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.s7-audit-table { table-layout: fixed; }
@media (max-width: 900px) { .s7-audit-table { table-layout: auto; } }
.s7-meta { max-width: 100%; }
.s7-meta > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 4px; color: var(--cream-dim); font-size: 0.6875rem; }
.s7-meta > summary:hover { color: var(--scream-yellow); }
.s7-meta > summary::-webkit-details-marker { display: none; }
.s7-meta-caret { color: rgba(240,197,63,0.6); display: inline-block; transition: transform 0.12s; }
.s7-meta-caret.open { transform: rotate(90deg); }
.s7-meta-preview { font-family: var(--font-mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s7-meta-pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); color: var(--cream-dim); background: rgba(0,0,0,0.25); padding: 8px; font-size: 0.6875rem; overflow-x: auto; }

/* monitoring: state banner + stat tiles + phase cards + rules list */
.s7-state-banner { margin-bottom: 12px; padding: 12px; font-size: 0.875rem; border: 1.5px solid rgba(240,197,63,0.45); background: rgba(240,197,63,0.08); color: var(--cream-dim); line-height: 1.55; }
.s7-state-banner.ok { border-color: rgba(91,214,107,0.45); background: rgba(91,214,107,0.08); }
.s7-tile { border: 1.5px solid rgba(234,224,203,0.22); background: var(--scream-panel, #14100C); padding: 14px 16px; min-width: 0; }
.s7-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .s7-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.s7-phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px) { .s7-phase-grid { grid-template-columns: 1fr; } }
.s7-purge-banner { margin-bottom: 12px; border: 1.5px solid rgba(255,59,48,0.5); background: rgba(255,59,48,0.1); padding: 12px; }
.s7-trigchip { padding: 2px 8px; border: 1px solid rgba(234,224,203,0.35); font-size: 0.71875rem; white-space: nowrap; color: var(--cream); }
.s7-trigchip.cleared { border-color: rgba(234,224,203,0.18); color: rgba(234,224,203,0.45); text-decoration: line-through; }
.s7-rules-list { border: 1.5px solid rgba(234,224,203,0.22); margin-bottom: 20px; font-size: 0.875rem; }
.s7-rules-list > details + details { border-top: 1px solid rgba(234,224,203,0.18); }
.s7-rules-list summary::-webkit-details-marker { display: none; }
.s7-rule-summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; padding: 8px 12px; cursor: pointer; list-style: none; }
.s7-rule-summary:hover { background: rgba(240,197,63,0.05); }
.s7-rule-edit { padding: 4px 12px 12px; background: rgba(0,0,0,0.25); }
.s7-rule-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; align-items: end; }
@media (max-width: 900px) { .s7-rule-grid { grid-template-columns: 1fr 1fr; } }
.s7-policy-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; gap: 12px; align-items: end; }
@media (max-width: 900px) { .s7-policy-grid { grid-template-columns: 1fr 1fr; } }
.s7-addrule-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; gap: 8px; align-items: end; }
@media (max-width: 900px) { .s7-addrule-grid { grid-template-columns: 1fr 1fr; } }
.fin.s7-num { display: block; margin-top: 4px; width: 96px; padding: 5px 8px; font-size: 0.8125rem; }

/* usage: summary tiles, workspace bars, sortable headers, stale chip */
.s7-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .s7-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .s7-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.s7-bar-track { flex: 1; background: #0A0807; border: 1px solid rgba(234,224,203,0.18); height: 12px; overflow: hidden; }
.s7-bar-fill { height: 100%; background: rgba(240,197,63,0.75); }
.s7-bar-fill.other { background: rgba(234,224,203,0.35); }
.s7-sortlink { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.s7-sortlink:hover { color: var(--scream-yellow); }
.s7-stale-chip { margin-left: 6px; padding: 1px 4px; font-size: 0.625rem; border: 1px solid rgba(245,166,35,0.7); color: #F5A623; }

/* settings: per-prompt section */
.s7-prompt-section { border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; padding: 16px; }

/* transfer-ownership warning button (yellow-outline block button) */
.s7-warnbtn { display: inline-flex; align-items: center; padding: 8px 14px; border: 1.5px solid rgba(240,197,63,0.6) !important; font-size: 0.8125rem !important; }

/* hard-delete confirm input (red accent) */
.fin.s7-danger-input { border-color: rgba(255,59,48,0.6); color: #FFD9D6; }
.fin.s7-danger-input:focus { border-color: var(--scream-red); }

/* broadcast detail: body <pre> + receipts split */
.s7-pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--cream); border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; padding: 12px; line-height: 1.6; margin: 0; word-break: break-word; }
.s7-twocol { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 768px) { .s7-twocol { grid-template-columns: 1fr; } }
.s7-receipts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.875rem; }
.s7-receipts li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(234,224,203,0.18); padding-bottom: 4px; }

/* agents matrix density — the Hono table is text-sm with slim cells; the
   default .tbl padding pushed "Last seen" off the 1440 viewport. */
.s7-agents-table th { padding: 8px 10px; }
.s7-agents-table td { padding: 9px 10px; font-size: 0.78125rem; }

/* audit Action badge: the shared .tag nowraps — inside the fixed Action
   column long action names (platform.provider_accounts.…) must wrap like the
   Hono badge's break-all instead of bleeding into the Target column. */
.s7-audit-table .tag { white-space: normal; word-break: break-all; }

/* ── [b08435ac] workflow editor inside the shell ─────────────────────────────
   Desktop: defs list · canvas · inspector three-up. Narrow (drawer mode, same
   1100px breakpoint as the sidenav): the three regions stack and scroll as one
   column — the canvas keeps a real working height, nothing clips, and no
   page-level scrollbar nests inside another. */
/* [31d5e703 Workflows IA] Editor is now a dedicated page — the definitions list
   moved to the catalogue route, so the grid is canvas + inspector (was 260px list
   + 1fr canvas + 320px inspector). */
.wfgrid { display: grid; grid-template-columns: 1fr 320px; gap: 0; }
/* [23f006d2 · c_sidehide1] No selection, no manual Details toggle → the right
   column isn't rendered (see WorkflowEditor.tsx) AND the grid track it would
   have occupied collapses too, so the canvas genuinely gets the released
   width rather than an empty 320px gutter. */
.wfgrid--closed { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
  .wfgrid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 1fr) minmax(160px, 34vh);
    overflow-y: auto;
  }
  .wfgrid > * { border-left: none !important; border-right: none !important; border-bottom: 1.5px solid rgba(234, 224, 203, 0.18); }
  /* Closed on narrow too: no reserved second row for an unrendered panel. */
  .wfgrid--closed { grid-template-rows: 1fr; }
}