/* The control panel (/mc-stats/aeronautica/control/; the mc-control run). On top of Kit's tokens
   (/theme/css/) and the dashboard's live.css, whose .pd-* rules draw the Admin tab's player card
   and health cards here too. Desktop is mockup A ("Cockpit"): header, the two health cards
   across, the console and Who's playing side by side, the tool panels under them. At 760 px and
   below it is mockup C's phone layout: a full-screen console with vitals chips, a Power menu and
   the panels as bottom sheets. Retro is chrome only: square corners, ridges, its font. The
   console is dark in every theme (--con-*: this panel's own). */

:root {
  --mcc-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace);
  --con-bg: #000010; --con-bar: #0b0420; --con-fg: #e4e4ec; --con-dim: #9d95bd; --con-rule: #2a1846;
  --con-info: #a9b4c6; --con-warn: #ffd75e; --con-warn-bg: rgba(255, 215, 94, .12);
  --con-err: #ff8f86; --con-err-bg: rgba(255, 110, 100, .16); --con-chat: #7fe3c8; --con-cmd: #c9b0ff;
  --con-coord: #82c8ff; --con-debug: #8c93a3;
}
/* The crash responder's orange (control/responder.py's `claude` stage): Kit has no orange status
   token, so the panel keeps its own trio per theme, on the pattern of --warning / -soft / -soft-text,
   each text pair at least 4.5:1 (Retro here, Clean light and dark below). The mascot keeps Claude
   Code's own terracotta in every theme. */
:root { --mcc-claude: #ff8a3d; --mcc-claude-soft: #331400; --mcc-claude-soft-text: #ffb27a; --mcc-bot: #d77757; --mcc-bot-eye: #1d1210; }
:root[data-theme="clean"] { --mcc-claude: #c2410c; --mcc-claude-soft: #fff0e6; --mcc-claude-soft-text: #9a3412; }
:root[data-theme="clean"][data-scheme="dark"] { --mcc-claude: #e0784a; --mcc-claude-soft: #3a1a0c; --mcc-claude-soft-text: #ffc09c; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="clean"]:not([data-scheme="light"]) { --mcc-claude: #e0784a; --mcc-claude-soft: #3a1a0c; --mcc-claude-soft-text: #ffc09c; }
}
:root[data-theme="clean"] {
  --con-bg: #14171d; --con-bar: #1b1f27; --con-fg: #dde2ea; --con-dim: #949cab; --con-rule: #262b35; --con-info: #9fb0c8;
}
:root[data-theme="clean"][data-scheme="dark"] { --con-bg: #0a0b0f; --con-bar: #121319; --con-rule: #20222b; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="clean"]:not([data-scheme="light"]) { --con-bg: #0a0b0f; --con-bar: #121319; --con-rule: #20222b; }
}

body.mcc { overflow-x: hidden; }
.mcc main.ck { padding: 18px 24px 28px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 1680px; margin: 0 auto; }
.mcc h1, .mcc h2, .mcc h3 { margin: 0; }
.mcc-noscript { padding: 24px; }

/* ---- header */
.ck-head { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.ck-title { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.ck-title h1 { font-size: 24px; font-weight: 650; letter-spacing: -.015em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; line-height: 1.25; }
.ck-title .meta { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.power { display: flex; gap: 8px; flex-wrap: wrap; }
.mcc .btn.pmenu { display: none; }
.mcc-banner, .mcc-offline { flex: 1 1 100%; margin: 0; padding: 10px 14px; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-soft-text); border-radius: var(--radius-sm, 8px); font-size: 14px; }

/* ---- controls (the mockups' .btn, .seg, .field) */
.mcc .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border-alt); background: var(--surface); color: var(--text); border-radius: var(--radius-sm, 8px);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.2; }
.mcc .btn:hover:not([disabled]) { background: var(--surface-alt); }
.mcc .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
.mcc .btn.primary:hover:not([disabled]) { background: var(--accent-hover, var(--accent)); }
.mcc .btn.danger { color: var(--danger-soft-text); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-alt)); }
.mcc .btn.danger.solid { background: var(--danger); color: var(--danger-text, #fff); border-color: var(--danger); }
.mcc .btn.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.mcc .btn[disabled] { opacity: .45; cursor: not-allowed; }
.mcc .btn .caret::after { content: "\25BE"; font-size: 11px; opacity: .8; margin-left: 2px; }
.mcc .btn .ico { font-size: 13px; line-height: 1; width: 1em; text-align: center; }
@media (pointer: coarse) { .mcc .btn { min-height: 44px; } .mcc .btn.sm { min-height: 36px; } }
:root:not([data-theme="clean"]) .mcc .btn { border: 3px outset var(--border); border-radius: 0; }
:root:not([data-theme="clean"]) .mcc .btn.primary { background: var(--accent); color: #001a00; border-color: #66ff66; font-weight: bold; }
:root:not([data-theme="clean"]) .mcc .btn.danger { color: #ff9aaa; border-color: #ff3355; }
:root:not([data-theme="clean"]) .mcc .btn.danger.solid { background: #ff3355; color: #1a0006; }

.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: calc(var(--radius-sm, 8px) + 2px); }
.seg button { border: 0; background: transparent; padding: 0 12px; min-height: 32px; border-radius: var(--radius-sm, 8px); cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--surface-raised, var(--surface)); color: var(--text); box-shadow: var(--shadow-1); border: 1px solid var(--border-alt); }
:root:not([data-theme="clean"]) .seg { border: 2px inset var(--border); border-radius: 0; }
:root:not([data-theme="clean"]) .seg button { border-radius: 0; }
:root:not([data-theme="clean"]) .seg button[aria-selected="true"] { background: var(--accent); color: #001a00; border: 0; }
.field { display: grid; gap: 4px; margin-top: 12px; }
.field > span { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.mcc-dialog .input { min-height: 38px; padding: 0 10px; border: 1px solid var(--border-alt); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); width: 100%; min-width: 0; font: inherit; }
.mcc-dialog .input.mono { font-family: var(--mcc-mono); }
:root:not([data-theme="clean"]) .mcc-dialog .input { border: 2px inset var(--border); border-radius: 0; }

/* ---- the status pill */
.spill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border-alt); background: var(--surface-alt); color: var(--text-muted); letter-spacing: 0; }
.spill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.spill.running { background: var(--success-soft); color: var(--success-soft-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.spill.running::before { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.spill.stopping { background: var(--warning-soft); color: var(--warning-soft-text); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.spill.stopping::before { background: var(--warning); }
.spill.down::before { background: transparent; border: 2px solid var(--text-faint); width: 6px; height: 6px; }
.spill.crashed { background: var(--danger-soft); color: var(--danger-soft-text); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.spill.crashed::before { background: var(--danger); }
/* The crash recovery's stages (control.js pillFor): systemd's first restart yellow, its second red,
   the crash responder orange with the mascot in place of the dot. */
.spill.restart1 { background: var(--warning-soft); color: var(--warning-soft-text); border-color: var(--warning); }
.spill.restart1::before { background: var(--warning); }
.spill.restart2 { background: var(--danger-soft); color: var(--danger-soft-text); border-color: var(--danger); }
.spill.restart2::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }
.spill.claude { background: var(--mcc-claude-soft); color: var(--mcc-claude-soft-text); border-color: var(--mcc-claude); padding-left: 7px; }
.spill.claude::before { display: none; }
.spill .bot { width: 20px; height: 14px; margin: -2px 0; }
:root:not([data-theme="clean"]) .spill { border-radius: 0; border: 2px solid currentColor; }
:root:not([data-theme="clean"]) .spill::before { border-radius: 0; }

/* ---- cards and the health row */
.mcc .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 12px); box-shadow: var(--shadow-1); padding: 14px 16px; min-width: 0; margin: 0; }
:root:not([data-theme="clean"]) .mcc .card { border: 3px ridge var(--border); border-radius: 0; box-shadow: none; }
.card-h { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-h h2 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.card-h .grow { flex: 1; }
.card-h .fine, .faint { font-size: 12.5px; color: var(--text-muted); }
.ck-health.pd-health { margin: 0; }
.ck-health .pd-hosts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
@media (min-width: 1100px) {
  .ck-slot .ck-health .pd-hosts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .ck-slot .ck-health [data-host-slot="Aeronautica"] .kv { grid-template-columns: 6.6rem minmax(0, 1fr) 6.6rem minmax(0, 1fr); }
  .ck-slot .ck-health [data-host-slot="Aeronautica"] .kv .note { display: block; margin-left: 0; font-size: 12.5px; }
}

/* ---- Who's playing */
.ck-players { max-height: 520px; display: flex; flex-direction: column; padding: 14px 16px 6px; }
.ck-players .plist { overflow: auto; flex: 1; margin: 0 -16px; padding: 0 16px; }
.offline-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.plist .empty { margin: 4px 0 12px; }
.avatar { --c: #666; width: 36px; height: 36px; flex: none; border-radius: 8px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 55%, #000) 0 28%, var(--c) 28%);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; text-shadow: 0 1px 0 rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.avatar.s { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
.avatar.off { filter: grayscale(1); opacity: .7; }
:root:not([data-theme="clean"]) .avatar { border-radius: 0; }
.dim { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.dim::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--d, #888); flex: none; }
.dim.ow { --d: #3f9a4a; } .dim.ne { --d: #c8452e; } .dim.en { --d: #9b6bd6; } .dim.ae { --d: #4fb3e8; }
.mcc button.xyz, .mcc button.plink { border: 0; background: none; padding: 0; cursor: pointer; color: var(--link); text-decoration: underline dotted; text-underline-offset: 3px; font: inherit; }
.mcc button.xyz { font-family: var(--mcc-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.prow:first-child { border-top: 0; padding-top: 2px; }
.prow .avatar { grid-row: span 3; }
.prow .nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; min-width: 0; }
.prow .nm .faint { font-weight: 400; }
.prow .badge { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--border-alt); background: var(--surface-alt); color: var(--text-muted); }
:root:not([data-theme="clean"]) .prow .badge { border-radius: 0; }
.prow .loc { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.prow .vits { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.prow .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prow.off .nm .plink { color: var(--text-muted); }
.vit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vit.low { color: var(--danger-soft-text); font-weight: 600; }
.bar { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: var(--lv-track); overflow: hidden; }
.bar > i { display: block; height: 100%; }
.bar.hp > i { background: var(--lv-warn); } .bar.food > i { background: var(--lv-food); }
:root:not([data-theme="clean"]) .bar { border-radius: 0; }

/* ---- FX-D: the phone's sheets as lists of headings (sheet-sections.js wraps each panel of a
   many-panel sheet in a <details class="sheet-sec">; QA2 F8), and 44 px tap targets on the phone
   outside Files, Mods and the dialogs (QA1 F4, QA2 F7). Inline console tokens keep their line
   height and get a 44 px hit area around them instead. */
.sheet-b:has(> .sheet-sec) { gap: 0; }
.sheet-sec { border-bottom: 1px solid var(--border); min-width: 0; }
.sheet-sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); }
.sheet-sec > summary::-webkit-details-marker { display: none; }
.sheet-sec > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; }
.sheet-sec[open] > summary::after { transform: rotate(45deg); }
.sheet-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mcc .sheet-b > .sheet-sec > [data-panel] { border: 0; box-shadow: none; background: none; padding: 0 0 16px; border-radius: 0; }
.sheet-sec > [data-panel] > .card-h > h2 { display: none; }
.sheet-sec > [data-panel] > .card-h:not(:has(> :not(h2))) { display: none; }
:root:not([data-theme="clean"]) .sheet-sec { border-bottom: 2px ridge var(--border); }
/* iOS zooms the page into any text box under 16 px when it is focused (and leaves it zoomed),
   so on a touch screen every box the panel has is 16 px: the keyboard only lifts it. */
@media (pointer: coarse) {
  .mcc :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
}
@media (max-width: 760px) {
  .sheet-b [data-panel]:not([data-panel="files"]):not([data-panel="mods"]) .btn { min-height: 44px; }
  .sheet-b [data-panel]:not([data-panel="files"]):not([data-panel="mods"]) :is(select, input:not([type="checkbox"]):not([type="radio"])) { min-height: 44px; font-size: 16px; }
  .sheet-b [data-panel]:not([data-panel="files"]):not([data-panel="mods"]) summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; }
  .mcc .prow button.plink, .mcc .prow button.xyz { min-height: 44px; display: inline-flex; align-items: center; }
  .mcc .sheet-h .seg button, .mcc .dock .btn { min-height: 44px; }
  .mcc .sheet-x { width: 44px; height: 44px; }
  .mcc .con-tools .ib, .mcc .con-tools .con-as, .mcc .con-cmd .pr, .mcc .con-cmd .wh { height: 44px; min-width: 44px; }
  .mcc .con-cmd .to { height: 36px; }
  .mcc .con-sugg .opt { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .mcc .con-sugg .nx { min-height: 40px; line-height: 38px; max-width: 9.5em; }
  .mcc .con-tools .con-as { font-size: 16px; }
  /* 24 px rows, so a token's 44 px hit area reaches no neighbouring row's middle (a tap on a
     name lands on that name, not on the mask in the line under it). */
  .ck-con .con-body { line-height: 24px; }
  .ck-con .ipmask, .ck-con button.plink, .ck-con button.xyz { position: relative; }
  .ck-con .ipmask::after, .ck-con button.plink::after, .ck-con button.xyz::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* ---- the desktop board (board.js, the mc-control-layout run's item B): every card a .ck-slot,
   placed absolutely by Kit's packer once board.js has packed (.packed); before that, and on a
   phone, the slots flow. A card the layout hides (.ck-off) takes no room. Packed, every slot is
   its fixed height (board.js's DEFAULT_HEIGHTS) and its panel fills it and scrolls inside, so a
   card's contents never move the board; Mods, Files, Activity and Who's playing scroll their
   lists under a header that stays put, and the console its lines. */
.ck-board { position: relative; min-width: 0; }
.ck-board > .ck-slot { min-width: 0; scroll-margin-top: 16px; }
.ck-board.packed > .ck-slot { position: absolute; }
/* item E's drag handle: the card's name, off screen until edit mode (the panel's own heading is
   the title on screen, so the name never shows twice) */
.ck-card-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 761px) {
  .ck-board.packed > .ck-slot { display: flex; flex-direction: column; }
  .ck-board > .ck-slot.ck-off, .ck-board > .ck-slot:has(> [data-panel]:empty) { display: none; }
  .ck-board.packed > .ck-slot > .ck-card-head { flex: none; }
  .ck-board.packed > .ck-slot > [data-panel] { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
  /* a panel holding one .card (Teleports, Warps, Player actions) has it fill the slot */
  .ck-board.packed > .ck-slot > [data-panel]:not(.card, [data-panel="mods"], [data-panel="files"]):has(> .card:only-child) { display: flex; flex-direction: column; }
  .ck-board.packed > .ck-slot > [data-panel]:not(.card, [data-panel="mods"], [data-panel="files"]) > .card:only-child { flex: 1 0 auto; }
  /* Server health's two host cards stretch to the slot's height too */
  .ck-board.packed > .ck-slot > [data-panel="health"] { display: flex; flex-direction: column; }
  .ck-board.packed > .ck-slot > [data-panel="health"] > .pd-hosts { flex: 1 0 auto; align-items: stretch; }
  .ck-board.packed > .ck-slot > [data-panel="health"] > .pd-hosts > .mcc-host { display: flex; flex-direction: column; }
  .ck-board.packed > .ck-slot > [data-panel="health"] > .pd-hosts > .mcc-host > * { flex: 1 0 auto; }
  .ck-board .ck-con { height: 520px; }
  .ck-board.packed .ck-con { height: auto; overflow: hidden; }
  .ck-board :is([data-panel="mods"], [data-panel="files"], [data-panel="audit"]) { max-height: 560px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
  .ck-board :is([data-panel="mods"], [data-panel="files"]) > .card { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .ck-board :is([data-panel="mods"], [data-panel="files"]) > .card > *, .ck-board [data-panel="audit"] > * { flex: none; }
  .ck-board :is(.md-list, .fb-list, .act-feed) { flex: 1 1 auto; min-height: 0; max-height: none; }
  .ck-board.packed .ck-players { max-height: none; }
}

/* ---- edit mode (board-edit.js, item E): the header's Edit layout, the bar with the tray, Reset
   and Done, and on each card its .ck-card-head shown as a bar on top: the grip and name (the drag
   handle), Narrower / the width / Wider, and − (hide). Desktop only: a phone never sees it. */
.ck-head > .ck-edit-btn { order: 2; }
.ck-edit-btn[aria-pressed="true"] { border-color: var(--accent); }
.ck-edit-btn[hidden] { display: none; }    /* until me answers with a Minecraft name (board-edit.js) */
.ck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.ck-editbar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--accent); border-radius: var(--radius, 12px); background: var(--surface); }
.ck-editbar[hidden] { display: none; }
.ck-edit-hint { margin: 0; font-size: 13px; color: var(--text-muted); flex: 1 1 24rem; }
.ck-tray { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-right: auto; }
.ck-tray .fine { font-size: 12.5px; color: var(--text-muted); }
.ck-card-head .grip, .ck-card-head .tools { display: none; }
.ck-editing .ck-board .ck-card-head { position: static; width: auto; height: auto; clip-path: none; overflow: visible; display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 6px 4px 10px; margin-bottom: 6px; border: 1px dashed var(--accent); border-radius: var(--radius-sm, 8px);
  background: var(--surface-alt); color: var(--text); cursor: grab; font-size: 13px; font-weight: 600; user-select: none; touch-action: none; }
.ck-editing .ck-card-head .grip { display: inline; color: var(--text-muted); font-weight: 400; }
.ck-editing .ck-card-head .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-editing .ck-card-head .tools { display: inline-flex; align-items: center; gap: 4px; }
.ck-card-head .hb { min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid var(--border-alt); background: var(--surface); color: var(--text); border-radius: 6px; font: inherit; line-height: 1; cursor: pointer; }
.ck-card-head .hb:hover:not([disabled]) { background: var(--surface-alt); }
.ck-card-head .hb[disabled] { opacity: .4; cursor: not-allowed; }
.ck-card-head .w { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 400; min-width: 3.2em; text-align: center; }
.ck-editing .ck-board .ck-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-board.ck-dragging, .ck-board.ck-dragging * { cursor: grabbing; }
.ck-board > .ck-slot.ck-lifted { z-index: 5; box-shadow: var(--shadow-2, 0 14px 32px rgba(0, 0, 0, .28)); }
.ck-placeholder { position: absolute; border: 2px dashed var(--accent); border-radius: var(--radius, 12px); background: color-mix(in srgb, var(--accent) 8%, transparent); pointer-events: none; }
:root:not([data-theme="clean"]) :is(.ck-editbar, .ck-editing .ck-board .ck-card-head, .ck-card-head .hb, .ck-placeholder) { border-radius: 0; }
@media (max-width: 760px) { .mcc .ck-edit-btn, .ck-editbar { display: none; } }

/* ---- the header's Notifications control (push.js, the mc-push-alerts run's slice M): hidden until
   push-key says the NUC can push and the service worker is there; data-state on, off, blocked or
   ios-install. A dot when on. On a phone it is a 44 px bell beside Power (its name stays
   "Notifications" for a screen reader). */
.ck-head > #mcc-push { order: 2; position: relative; }
.mcc #mcc-push[hidden] { display: none; }
.mcc #mcc-push[data-state="on"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success, var(--accent)); flex: none; }
.mcc #mcc-push[data-state="blocked"] { color: var(--text-muted); }
.mcc-menu[aria-label="Notifications"] button[disabled] { opacity: .8; cursor: default; white-space: normal; }
/* The unseen count on the bell (push.js's setUnseen), and the newest alerts in its menu: an unseen
   one bold with a dot, its time on the right. */
.mcc #mcc-push .mcc-push-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger, #d33); color: var(--danger-text, #fff); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.mcc #mcc-push[data-unseen]::before { display: none; }
.mcc-menu[aria-label="Notifications"] { max-width: min(360px, calc(100vw - 16px)); }
.mcc-menu .mcc-alert span { white-space: normal; overflow-wrap: anywhere; }
.mcc-menu .mcc-alert small { white-space: nowrap; flex: none; }
.mcc-menu .mcc-alert.new span { font-weight: 700; }
.mcc-menu .mcc-alert.new span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }
:root:not([data-theme="clean"]) :is(.mcc #mcc-push .mcc-push-n, .mcc-menu .mcc-alert.new span::before) { border-radius: 0; }
:root:not([data-theme="clean"]) .mcc #mcc-push[data-state="on"]::before { border-radius: 0; }
@media (max-width: 760px) {
  .ck-head > #mcc-push { order: 0; flex: none; width: 44px; min-height: 44px; padding: 0; margin-right: 12px; font-size: 0; gap: 0; }
  .ck-head > #mcc-push .caret { display: none; }
  .ck-head > #mcc-push::after { content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a1.5 1.5 0 0 0-1.5 1.5v.7A6.5 6.5 0 0 0 5.5 10.5V15l-2 2.5V19h17v-1.5l-2-2.5v-4.5a6.5 6.5 0 0 0-5-6.3v-.7A1.5 1.5 0 0 0 12 2zm-2.5 18a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a1.5 1.5 0 0 0-1.5 1.5v.7A6.5 6.5 0 0 0 5.5 10.5V15l-2 2.5V19h17v-1.5l-2-2.5v-4.5a6.5 6.5 0 0 0-5-6.3v-.7A1.5 1.5 0 0 0 12 2zm-2.5 18a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .mcc #mcc-push[data-state="on"]::before { position: absolute; top: 7px; right: 7px; }
  .ck-head > #mcc-push .mcc-push-n { position: absolute; top: 2px; right: 0; }
  .ck-head .pmenu:has(~ #mcc-push:not([hidden])) { margin-right: 6px; }
}

/* ---- the console (dark in every theme) */
.ck-con { height: 520px; min-width: 0; }
.con { height: 100%; background: var(--con-bg); color: var(--con-fg); border: 1px solid var(--con-rule); border-radius: var(--radius, 12px); display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 0; container: con / inline-size; }
:root:not([data-theme="clean"]) .con { border: 3px ridge var(--border); border-radius: 0; }
.con-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--con-bar); border-bottom: 1px solid var(--con-rule); font-size: 13px; }
.con-tools .ttl { font-weight: 600; font-size: 13.5px; margin-right: 4px; display: flex; gap: 8px; align-items: center; }
.con-tools .ttl .fn { font-family: var(--mcc-mono); font-weight: 400; color: var(--con-dim); font-size: 12px; }
.con-tools .fx { display: contents; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #9fe6b4; font-weight: 600; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3fbf66; box-shadow: 0 0 0 3px rgba(63,191,102,.25); }
.live.paused { color: var(--con-warn); }
.live.paused::before { background: var(--con-warn); box-shadow: none; border-radius: 1px; }
.lvls { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--con-rule); background: transparent; color: var(--con-dim); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip[aria-pressed="true"] { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--con-fg); }
.chip[aria-pressed="true"]::before { content: "\2713"; font-size: 11px; }
.chip .ct { font-weight: 400; color: var(--con-dim); font-variant-numeric: tabular-nums; }
.chip.c-warn[aria-pressed="true"] { color: var(--con-warn); } .chip.c-err[aria-pressed="true"] { color: var(--con-err); }
.con-srcs { position: relative; display: inline-flex; }
.chip.c-src[aria-expanded="true"] { color: var(--con-fg); border-color: rgba(255,255,255,.18); }
.chip.c-src.off { color: var(--con-warn); }
.chip.c-src.off::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--con-warn); }
.con-srcmenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; min-width: 9rem; background: var(--con-bg, #111); border: 1px solid var(--con-rule); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.con-srcmenu[hidden] { display: none; }
:root:not([data-theme="clean"]) .con-srcmenu { border-radius: 0; }
.con-ck { display: flex; align-items: center; gap: 7px; min-height: 28px; color: var(--con-fg); cursor: pointer; font-size: 12.5px; font-weight: 600; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.con-ck input { margin: 0; width: 15px; height: 15px; accent-color: var(--con-cmd); cursor: pointer; }
.con-ck:has(input:not(:checked)) { color: var(--con-dim); }
@media (pointer: coarse) { .con-ck { min-height: 44px; } }
.chip.c-chat[aria-pressed="true"] { color: var(--con-chat); } .chip.c-chat[data-chat="off"] { text-decoration: line-through; } .chip.c-cmd[aria-pressed="true"] { color: var(--con-cmd); }
:root:not([data-theme="clean"]) .chip { border-radius: 0; }
.con-search { flex: 1 1 5rem; min-width: 0; max-width: 260px; height: 28px; border-radius: 999px; border: 1px solid var(--con-rule); background: rgba(255,255,255,.04); color: var(--con-fg); padding: 0 12px; font: inherit; font-size: 12.5px; }
.con-search::placeholder { color: var(--con-dim); }
:root:not([data-theme="clean"]) .con-search { border-radius: 0; }
.con-tools .con-say { display: flex; align-items: center; gap: 6px; color: var(--con-dim); font-size: 12px; }
.con-tools .con-as { height: 28px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--con-rule); background: var(--con-bar); color: inherit; font: inherit; font-size: 12px; }
.con-tools .sp { flex: 1; }
.con-tools .ib { height: 28px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--con-rule); background: transparent; color: var(--con-dim); cursor: pointer; font: inherit; font-size: 12px; }
.con-tools .fbtn { display: none; }
.con-mid { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.con-body { flex: 1; overflow: auto; font-family: var(--mcc-mono); font-size: 12.5px; line-height: 1.6; padding: 6px 0 10px; min-height: 0; scrollbar-color: #3a3f4b transparent; }
.ln { display: grid; grid-template-columns: 60px 46px minmax(0, 1fr); column-gap: 10px; padding: 1px 12px; align-items: start; }
.ln:hover { background: rgba(255,255,255,.035); }
.ln .t { color: var(--con-dim); font-variant-numeric: tabular-nums; }
.ln .lv { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-align: center; border-radius: 4px; line-height: 17px; margin-top: 1.5px; font-family: var(--font-body); }
.ln .msg { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.ln .src { color: var(--con-dim); margin-right: 8px; }
.lv.info { color: var(--con-info); box-shadow: inset 0 0 0 1px rgba(160,176,200,.28); }
.lv.debug { color: var(--con-debug); box-shadow: inset 0 0 0 1px rgba(140,147,163,.25); }
.lv.warn { color: var(--con-warn); background: var(--con-warn-bg); box-shadow: inset 0 0 0 1px rgba(255,215,94,.35); }
.lv.err { color: var(--con-err); background: var(--con-err-bg); box-shadow: inset 0 0 0 1px rgba(255,140,130,.4); }
.lv.chat { color: var(--con-chat); box-shadow: inset 0 0 0 1px rgba(127,227,200,.35); }
.lv.cmd { color: var(--con-cmd); background: rgba(201,176,255,.12); box-shadow: inset 0 0 0 1px rgba(201,176,255,.4); }
.ln.debug .msg { color: var(--con-debug); }
.ln.warn { background: linear-gradient(90deg, rgba(255,215,94,.07), transparent 60%); }
.ln.warn .msg { color: #f4e2ae; }
.ln.err { background: linear-gradient(90deg, rgba(255,110,100,.10), transparent 70%); }
.ln.err .msg { color: #ffc2bc; }
.ln.chat .msg { color: #d8f5ec; }
.ln.hist { opacity: .78; }
.hist-sep { margin: 6px 12px; padding-top: 4px; border-top: 1px dashed var(--con-dim); color: var(--con-dim); font-family: var(--font-body); font-size: 11px; text-align: center; }
.ln.cmd { margin-top: 4px; }
.ln.cmd .msg { color: #e6dcff; }
.ln.cmd .by { color: var(--con-cmd); font-weight: 600; }
.ln.res .lv { color: var(--con-cmd); font-size: 13px; box-shadow: none; background: none; }
.ln.res .msg { color: #c9cfda; border-left: 2px solid rgba(201,176,255,.35); padding-left: 10px; }
.ln.res.bad .msg { color: var(--con-err); border-left-color: rgba(255,140,130,.5); }
.ln.res + .ln:not(.res) { margin-top: 4px; }
.con button.plink { color: inherit; font-weight: 600; text-decoration-color: rgba(255,255,255,.45); font-family: inherit; font-size: inherit; }
.con button.xyz { color: var(--con-coord); font-size: inherit; text-decoration-color: rgba(130,200,255,.55); }
.ipmask { border: 1px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.05); color: var(--con-dim); font: inherit; padding: 0 4px; border-radius: 4px; cursor: pointer; }
.ipmask:hover { color: var(--con-fg); border-color: rgba(255,255,255,.55); }
.ip-shown { color: #ffd2a8; background: rgba(255,170,90,.12); padding: 0 4px; border-radius: 4px; }
:root:not([data-theme="clean"]) .ipmask, :root:not([data-theme="clean"]) .ip-shown, :root:not([data-theme="clean"]) .ln .lv { border-radius: 0; }
.con-new { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 3; border: 0; border-radius: 999px; padding: 7px 14px; background: #0a66d8; color: #fff; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.45); white-space: nowrap; }
:root:not([data-theme="clean"]) .con-new { border-radius: 0; background: #ffee00; color: #000; border: 2px outset #fff; }
.con-cmd { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--con-bar); border-top: 1px solid var(--con-rule); }
.con-cmd .pr { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; color: var(--con-cmd); font-family: var(--mcc-mono); font-weight: 700; font-size: 15px; }
.con-cmd .pr:hover { border-color: var(--con-rule); }
.con-cmd .pr .bub { display: none; fill: #ff9a1f; }
.con-cmd .pr.chat .sl { display: none; }
.con-cmd .pr.chat .bub { display: block; }
.con-cmd.chat input { border-color: rgba(255, 154, 31, .55); }
.con-cmd input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--con-rule); border-radius: 8px; background: rgba(255,255,255,.04); color: var(--con-fg); font-family: var(--mcc-mono); font-size: 13.5px; padding: 0 10px; }
.con-cmd input::placeholder { color: var(--con-dim); }
.con-cmd input:focus { outline: 2px solid #64a9ff; outline-offset: 0; border-color: transparent; }
.con-cmd input:disabled { opacity: .6; }
.con-cmd .hint { font-size: 11.5px; color: var(--con-dim); white-space: nowrap; }
.con-cmd .hint kbd { font: inherit; font-size: 10.5px; border: 1px solid var(--con-rule); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; margin: 0 1px; color: var(--con-fg); }
.con-cmd .send { height: 34px; padding: 0 14px; border-radius: 8px; border: 0; background: #0a66d8; color: #fff; font: inherit; font-weight: 600; cursor: pointer; font-size: 13.5px; }
.con-cmd .send:disabled { opacity: .4; cursor: not-allowed; }
:root:not([data-theme="clean"]) .con-cmd input { border-radius: 0; }
:root:not([data-theme="clean"]) .con-cmd .send { border-radius: 0; background: #00ff00; color: #001a00; }
/* Whisper mode (whisper.js): the "@" toggle in chat mode, the "To <Name>" chip, the line in
   vanilla's whisper grey. */
.con-cmd .wh { flex: none; min-width: 28px; height: 28px; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; color: var(--con-dim); font-family: var(--mcc-mono); font-weight: 700; font-size: 15px; }
.con-cmd .wh:hover { border-color: var(--con-rule); }
.con-cmd .wh[aria-pressed="true"] { color: #e8e8f0; background: rgba(200, 200, 215, .16); border-color: rgba(200, 200, 215, .4); font-style: italic; }
.con-cmd .to-row { display: contents; }
.con-cmd .wh[hidden], .con-cmd .to-row[hidden] { display: none; }
.con-cmd .to { flex: 0 1 auto; min-width: 0; max-width: 14em; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid rgba(200, 200, 215, .4); background: rgba(200, 200, 215, .1); color: var(--con-fg); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.con-cmd .to .lbl { color: var(--con-dim); }
.con-cmd .to b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-style: italic; }
.con-cmd .to .x { color: var(--con-dim); font-size: 14px; line-height: 1; }
.con-cmd .to.pick { border-style: dashed; }
.con-cmd .to.pick .x { display: none; }
.con-cmd .to.off b { color: var(--con-dim); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.con-cmd.chat.whisper input { border-color: rgba(200, 200, 215, .55); font-style: italic; color: #d4d4de; }
.con-cmd.chat.whisper input::placeholder { font-style: italic; }
:root:not([data-theme="clean"]) .con-cmd :is(.wh, .to) { border-radius: 0; }
/* Name completion (complete.js): the suggestion strip right above the command line, over the
   log's last line, scrolled sideways when it holds more than fits. */
.con-sugg { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 5; display: flex; gap: 6px; padding: 6px 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--con-bar); border-top: 1px solid var(--con-rule); box-shadow: 0 -6px 14px rgba(0, 0, 0, .35); }
.con-sugg::-webkit-scrollbar { display: none; }
.con-sugg[hidden] { display: none; }
.con-sugg .opt { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--con-rule); background: rgba(255, 255, 255, .05); color: var(--con-fg); font-family: var(--mcc-mono); font-size: 13px; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.con-sugg .opt:hover { border-color: rgba(255, 255, 255, .3); }
.con-sugg .opt.top { border-color: rgba(100, 169, 255, .55); }
.con-sugg .opt[aria-selected="true"] { background: #0a66d8; border-color: #0a66d8; color: #fff; }
.con-sugg .opt .dot { width: 7px; height: 7px; border-radius: 50%; background: #3fbf66; }
.con-sugg .none { color: var(--con-dim); font-size: 12.5px; line-height: 32px; white-space: nowrap; }
/* The command grammar's hint chips (complete.js): what goes next, seen but never picked. */
.con-sugg .opts { display: contents; }
.con-sugg .nx { flex: none; display: inline-block; line-height: 30px; min-height: 32px; box-sizing: border-box; max-width: 16em; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--con-rule); color: var(--con-dim); font-family: var(--mcc-mono); font-size: 12.5px; font-style: italic; white-space: nowrap; cursor: default; user-select: none; -webkit-user-select: none; }
:root:not([data-theme="clean"]) .con-sugg .opt, :root:not([data-theme="clean"]) .con-sugg .nx { border-radius: 0; }
:root:not([data-theme="clean"]) .con-sugg .opt.top { border-color: #ffee00; }
:root:not([data-theme="clean"]) .con-sugg .opt[aria-selected="true"] { background: #00ff00; border-color: #00ff00; color: #001a00; }
:root:not([data-theme="clean"]) .con-sugg .opt[aria-selected="true"] .dot { background: #001a00; }
@container con (max-width: 620px) {
  .con-tools .fx { display: none; }
  .con-tools .fbtn { display: inline-flex; align-items: center; }
  .con.fopen .con-tools .fx { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; order: 10; }
  .con.fopen .con-tools .fx .con-search { max-width: none; }
  .ln { grid-template-columns: 38px 40px minmax(0, 1fr); column-gap: 7px; padding: 1px 8px; }
  .ln .t .s, .ln .src, .con-cmd .hint, .con-tools .ttl .fn { display: none; }
  .con-body { font-size: 12px; }
  /* Whisper's "To" chip takes a row of its own above the line, so the box keeps its width. */
  .con-cmd.whisper { flex-wrap: wrap; row-gap: 6px; }
  .con-cmd .to-row { display: flex; order: -1; flex: 1 0 100%; min-width: 0; }
  .con-cmd .to { max-width: 100%; }
}
@container con (max-width: 900px) { .ln .src { display: none; } }
/* The board's console (8 of 12 columns, about 920 px at 1440) keeps its toolbar on one row
   (QA4 F8): the file name goes first, as it does on a phone, then the "Say as" word (the
   dropdown keeps its aria-label and title). */
@container con (max-width: 1100px) { .con-tools .ttl .fn { display: none; } }
@container con (max-width: 980px) { .con-tools .con-say > span { display: none; } }

/* Claude Code's mascot (control.js claudeBot): a hop and a blink, still for reduced motion. */
.bot { flex: none; overflow: visible; display: inline-block; vertical-align: middle; }
.bot .bot-f { fill: var(--mcc-bot); }
.bot .bot-k { fill: var(--mcc-bot-eye); }
.bot .bot-b { animation: mcc-bot-hop 1.6s steps(2, jump-none) infinite; }
.bot .bot-e { transform-box: fill-box; transform-origin: center; animation: mcc-bot-blink 4.2s infinite; }
@keyframes mcc-bot-hop { 0%, 55%, 100% { transform: translateY(0); } 70%, 85% { transform: translateY(-1px); } }
@keyframes mcc-bot-blink { 0%, 90%, 100% { transform: scaleY(1); } 93%, 96% { transform: scaleY(.15); } }
@media (prefers-reduced-motion: reduce) { .bot .bot-b, .bot .bot-e { animation: none; } }

/* The crash responder's chat view (console.js): the conversation over the console's own dark. */
.con-chatmid { background: var(--con-bg); }
.con-chat { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; scrollbar-color: #3a3f4b transparent; }
.cm-empty { margin: auto; color: var(--con-dim); font-size: 13px; text-align: center; }
.cm { display: flex; gap: 8px; align-items: flex-start; max-width: min(92%, 760px); }
.cm .bub { min-width: 0; padding: 7px 11px 8px; border-radius: 12px; border: 1px solid; }
.cm .who { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; margin-bottom: 2px; color: var(--con-dim); }
.cm .who b { font-weight: 700; }
.cm .t { color: var(--con-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.cm .tx { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm.claude .bub { background: rgba(215, 119, 87, .13); border-color: rgba(215, 119, 87, .42); color: #f5e6df; border-top-left-radius: 4px; }
.cm.claude .who b { color: #f0a587; }
.cm .bot.av { width: 26px; height: 18px; margin-top: 4px; }
.cm.human { align-self: flex-end; }
.cm.human .bub { background: rgba(100, 169, 255, .13); border-color: rgba(100, 169, 255, .4); color: #e2ecff; border-top-right-radius: 4px; }
.cm.human .who b { color: #9cc8ff; }
.cm.pending .bub { border-style: dashed; opacity: .8; }
.cm.tool { gap: 10px; align-items: baseline; padding-left: 34px; font-family: var(--mcc-mono); font-size: 12px; color: var(--con-dim); }
.cm.tool .tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cm.start { align-self: stretch; max-width: none; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px dashed var(--con-rule); border-radius: 10px; color: var(--con-dim); font-size: 12.5px; }
.cm.start .who { margin: 0; font-weight: 600; }
.live.claude { color: #f0a587; }
.live.claude::before { background: var(--mcc-bot); box-shadow: 0 0 0 3px rgba(215, 119, 87, .3); }
.con-tools .con-view { display: inline-flex; align-items: center; gap: 6px; color: #f0a587; border-color: rgba(215, 119, 87, .5); }
.con-tools .con-view .bot { width: 16px; height: 11px; }
/* The log's own tools mean nothing to the chat: hidden there, so the toolbar keeps one row. */
.con.chatview .con-tools :is(.fx, .con-say, .fbtn, .ib:not(.con-view)) { display: none !important; }
.con-chatbar input { font-family: var(--font-body); }
.con-chatbar .bot.sm { width: 24px; height: 16px; }
.con-chatbar input:focus { outline-color: var(--mcc-bot); }
.con-chatbar .send { background: #b9562f; }
.con-chatbar .ro { margin: 0; padding: 6px 2px; color: var(--con-dim); font-size: 13px; }
:root:not([data-theme="clean"]) .cm .bub, :root:not([data-theme="clean"]) .cm.start { border-radius: 0; }
:root:not([data-theme="clean"]) .con-chatbar .send { background: #ff8a3d; color: #1a0a00; }

/* The down state (D17): the last log greyed under a card. */
.con.down .con-body { opacity: .45; }
.con-down { position: absolute; inset: 46px 0 52px; display: grid; place-items: center; padding: 16px; z-index: 4; }
.down-card { background: var(--surface-raised, var(--surface)); color: var(--text); border: 1px solid var(--border-alt); border-radius: var(--radius, 12px); padding: 16px 18px; max-width: 460px; width: 100%; box-shadow: var(--shadow-3); font-family: var(--font-body); }
.down-card.crashed { border-color: var(--danger); }
.down-card h3 { margin: 0 0 6px; font-size: 16px; }
.down-card p { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; }
.down-card .crash-head { color: var(--danger-soft-text); background: var(--danger-soft); font-family: var(--mcc-mono); font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-sm, 8px); overflow-wrap: anywhere; }
.down-card .crash-mod b, .down-card .crash-who b { color: var(--text); }
.down-card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.down-card.r1 { border-color: var(--warning); }
.down-card.cl { border-color: var(--mcc-claude); }
.down-card .stage { padding: 7px 10px; border-radius: var(--radius-sm, 8px); font-size: 13.5px; font-weight: 500; }
.down-card .stage.r1 { background: var(--warning-soft); color: var(--warning-soft-text); }
.down-card .stage.r2 { background: var(--danger-soft); color: var(--danger-soft-text); }
.down-card .stage.cl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--mcc-claude-soft); color: var(--mcc-claude-soft-text); font-weight: 600; }
.down-card .stage.cl .btn { margin-left: auto; }
:root:not([data-theme="clean"]) .down-card { border: 4px double var(--border-alt); border-radius: 0; }
:root:not([data-theme="clean"]) .down-card.r2 { border-color: var(--danger); }
:root:not([data-theme="clean"]) .down-card.r1 { border-color: var(--warning); }
:root:not([data-theme="clean"]) .down-card.cl { border-color: var(--mcc-claude); }
:root:not([data-theme="clean"]) .down-card .stage { border-radius: 0; }
:root:not([data-theme="clean"]) .down-card .crash-head { border-radius: 0; }
.crash-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mcc-mono); font-size: 12px; line-height: 1.5; max-height: 65vh; overflow: auto; }

/* ---- menus, dialogs, toasts */
.mcc-menu { position: absolute; z-index: 4000; min-width: 220px; max-width: calc(100vw - 16px); background: var(--surface-raised, var(--surface)); color: var(--text); border: 1px solid var(--border-alt); border-radius: var(--radius, 12px); box-shadow: var(--shadow-3); padding: 6px; font-size: 14px; }
.mcc-menu h4 { margin: 4px 8px 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.mcc-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 8px 10px; border-radius: var(--radius-sm, 8px); cursor: pointer; }
.mcc-menu button:hover:not([disabled]), .mcc-menu button:focus-visible { background: var(--surface-alt); }
.mcc-menu button[disabled] { opacity: .45; cursor: not-allowed; }
.mcc-menu button small { color: var(--text-faint); font-size: 12px; }
.mcc-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
.mcc-menu .danger { color: var(--danger-soft-text); }
:root:not([data-theme="clean"]) .mcc-menu { border: 3px ridge var(--border); border-radius: 0; }
:root:not([data-theme="clean"]) .mcc-menu button { border-radius: 0; }

dialog.mcc-dialog { border: 0; padding: 0; background: transparent; color: var(--text); width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); overflow: visible; }
dialog.mcc-dialog.wide { width: min(980px, calc(100vw - 32px)); }
dialog.mcc-dialog::backdrop { background: var(--scrim, rgba(0,0,0,.4)); }
.dlg { background: var(--surface-raised, var(--surface)); color: var(--text); border: 1px solid var(--border-alt); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 48px); }
:root:not([data-theme="clean"]) .dlg { border: 4px double var(--border-alt); border-radius: 0; }
.dlg-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dlg-h h2 { font-size: 17px; font-weight: 600; flex: 1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dlg-h .x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-alt); cursor: pointer; font-size: 16px; color: var(--text-muted); flex: none; }
:root:not([data-theme="clean"]) .dlg-h .x { border-radius: 0; }
.dlg-b { padding: 16px 18px; overflow: auto; flex: 1; min-height: 0; }
.dlg-text { margin: 0; }
.dlg-f { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-alt); }
.card-dialog .dlg-b { padding: 12px; }
.card-dialog .pd-player { margin: 0; box-shadow: none; }
@media (max-width: 600px) {
  dialog.mcc-dialog, dialog.mcc-dialog.wide { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; }
  dialog.mcc-dialog .dlg { border-radius: 18px 18px 0 0; max-height: 92dvh; }
  :root:not([data-theme="clean"]) dialog.mcc-dialog .dlg { border-radius: 0; }
}
.mcc-toasts { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 5000; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
.mcc-toast { background: var(--surface-raised, var(--surface)); color: var(--text); border: 1px solid var(--border-alt); border-radius: var(--radius, 12px); box-shadow: var(--shadow-3); padding: 10px 14px; font-size: 14px; }
.mcc-toast.bad { border-color: var(--danger); color: var(--danger-soft-text); background: var(--danger-soft); }
:root:not([data-theme="clean"]) .mcc-toast { border: 3px ridge var(--border); border-radius: 0; }
/* FX-B: a toast raised while a modal dialog is open sits inside that dialog (control.js), still
   fixed to the viewport's top; on a phone it is narrower and smaller so two stay on the header. */
dialog .mcc-toasts { position: fixed; }
@media (max-width: 760px) {
  .mcc-toasts { top: 8px; width: calc(100vw - 24px); gap: 6px; }
  .mcc-toast { padding: 7px 12px; font-size: 13.5px; line-height: 1.3; }
}

/* A notification's offer (the pwa-extras run's item 2; control.js's OFFERS): a bar fixed to the
   viewport, outside #mcc so a phone's open sheet leaves it usable. On a desktop it floats at the
   bottom centre; on a phone it sits above the dock, or above the open sheet. */
.mcc-offer { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4500; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  width: max-content; max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box; padding: 10px 12px 10px 14px; font-size: 14px;
  background: var(--surface-raised, var(--surface)); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius, 12px); box-shadow: var(--shadow-3); }
.mcc-offer.bad { border-color: var(--danger); }
.mcc-offer.bad .mcc-offer-msg { color: var(--danger-soft-text); }
.mcc-offer-msg { flex: 1 1 14em; min-width: 0; }
.mcc-offer-acts { display: flex; gap: 8px; margin-left: auto; }
.mcc-offer .btn[disabled] { opacity: .6; cursor: default; }
:root:not([data-theme="clean"]) .mcc-offer { border: 3px ridge var(--border); border-radius: 0; }
@media (max-width: 760px) {
  .mcc-offer { left: 12px; right: 12px; transform: none; width: auto; max-width: none; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.sheet-open .mcc-offer { bottom: calc(74dvh + 8px); }
  .mcc .mcc-offer .btn { min-height: 44px; }
}

/* FX-B: the skip link to the command line, shown only while it has the focus (QA1 F10). */
.mcc a.skip { position: absolute; left: 12px; top: 8px; z-index: 6000; padding: 8px 14px; background: var(--surface-raised, var(--surface)); color: var(--link);
  border: 2px solid var(--accent); border-radius: var(--radius-sm, 8px); font-weight: 600; transform: translateY(-200%); }
.mcc a.skip:focus { transform: none; }
:root:not([data-theme="clean"]) .mcc a.skip { border-radius: 0; }

/* FX-B: the Activity panel (audit.js): who did what, newest first. */
.act-feed { list-style: none; margin: 0 -16px; padding: 0 16px; max-height: 420px; overflow: auto; border-top: 1px solid var(--border); }
.act-feed li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.act-feed li.empty { display: block; }
.act-feed .tm { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; padding-top: 1px; white-space: nowrap; }
.act-feed .by { font-weight: 600; }
.act-feed .res { display: block; color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.act-feed li.bad .res { color: var(--danger-soft-text); }
.act-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--border-alt); background: var(--surface-alt); color: var(--text-muted); }
.act-badge.bad { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-soft-text); }
.act-more { display: flex; justify-content: center; margin-top: 10px; }
.act-more:has(> [hidden]:only-child) { display: none; }
.act-note { margin: 8px 0 0; font-size: 13px; }
:root:not([data-theme="clean"]) .act-badge { border-radius: 0; }
@media (max-width: 760px) {
  .act-feed { max-height: none; overflow: visible; margin: 0; padding: 0; }
  .act-feed li { grid-template-columns: 4.6rem minmax(0, 1fr); }
}

/* Boots and crashes (crashes.js): the Activity feed's rows, a crashed or died one a button that
   opens its report and log, each scrolled to the crash's first line, which is marked. */
.cr-sum { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-loop { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger-soft-text); font-weight: 600; font-size: 13.5px; border-radius: var(--radius-sm, 8px); }
.cr-feed li:has(> .cr-open) { display: block; padding: 0; }
.cr-open { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 7px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cr-open:hover, .cr-open:focus-visible { background: var(--surface-alt); }
.cr-ran { color: var(--text-muted); font-size: 12.5px; }
.act-badge.ok { border-color: color-mix(in srgb, var(--success, #2e7d32) 50%, var(--border-alt)); }
.crash-dlg .crash-hl { margin: 0 0 6px; font-family: var(--mcc-mono); font-size: 12.5px; color: var(--danger-soft-text); background: var(--danger-soft); padding: 8px 10px; border-radius: var(--radius-sm, 8px); overflow-wrap: anywhere; }
.crash-dlg .crash-tabs { margin: 8px 0 4px; }
.crash-dlg .crash-note { margin: 4px 0 6px; }
.crash-dlg .crash-view, .crash-dlg .crash-lines { width: 100%; min-width: 0; box-sizing: border-box; }
.crash-lines .cl.anchor { background: var(--danger-soft); color: var(--danger-soft-text); box-shadow: inset 3px 0 0 var(--danger); }
:root:not([data-theme="clean"]) :is(.cr-loop, .crash-dlg .crash-hl) { border-radius: 0; }
@media (max-width: 760px) { .cr-open { grid-template-columns: 4.6rem minmax(0, 1fr); } }

/* ---- files and mods (phase 9): the file list, the editor, the mods list */
[data-panel="files"], [data-panel="mods"] { min-width: 0; }
.fb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-family: var(--mcc-mono); font-size: 13px; margin: -2px 0 8px; min-width: 0; }
.fb-crumb { border: 0; background: none; padding: 2px 4px; font: inherit; color: var(--link); cursor: pointer; border-radius: 4px; overflow-wrap: anywhere; }
.fb-crumb:hover { text-decoration: underline; }
.fb-crumb.here { color: var(--text); cursor: default; font-weight: 600; }
.fb-sep { color: var(--text-faint); }
.fb-ro { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; font-family: var(--font-sans, inherit); border: 1px solid var(--border-alt); background: var(--surface-alt); color: var(--text-muted); white-space: nowrap; }
.mcc .fb-filter { width: 100%; min-width: 0; min-height: 34px; padding: 0 10px; border: 1px solid var(--border-alt); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; margin-bottom: 8px; }
.fb-list, .md-list { max-height: 460px; overflow: auto; border-top: 1px solid var(--border); margin: 0 -16px; padding: 0 16px; }
.fb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); min-height: 34px; }
.fb-name { display: flex; align-items: center; gap: 8px; min-width: 0; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.fb-name:hover:not([disabled]) .fb-n { text-decoration: underline; }
.fb-name.dir { font-weight: 600; }
.fb-name[disabled] { color: var(--text-faint); cursor: not-allowed; }
.fb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fb-ico { width: 1em; flex: none; color: var(--text-muted); font-family: var(--mcc-mono); text-align: center; }
.fb-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-size { min-width: 4.5em; text-align: right; }
.fb-time { min-width: 4.5em; text-align: right; }
.fb-dl { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-muted); text-decoration: none; }
a.fb-dl:hover { background: var(--surface-alt); color: var(--text); }
.fb-note, .fb-empty { margin: 8px 0 0; font-size: 12.5px; }
:root:not([data-theme="clean"]) .fb-ro, :root:not([data-theme="clean"]) .mcc .fb-filter { border-radius: 0; }
dialog.fe-dialog { width: min(1200px, calc(100vw - 32px)); }
.fe-dialog .dlg-b, .fe-hist .dlg-b { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fe-note { margin: 0; font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm, 8px); background: var(--surface-alt); color: var(--text-muted); }
.fe-warn { font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-soft-text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fe-warn[hidden] { display: none; }
.fe-ed { display: flex; height: min(62vh, 640px); min-height: 240px; border: 1px solid var(--border-alt); border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--surface); font-family: var(--mcc-mono); font-size: 13px; line-height: 1.5; }
.fe-gut { margin: 0; padding: 8px 8px 8px 6px; min-width: 3.2em; text-align: right; color: var(--text-faint); background: var(--surface-alt); border-right: 1px solid var(--border); overflow: hidden; user-select: none; font: inherit; flex: none; }
.fe-ta { flex: 1; min-width: 0; margin: 0; padding: 8px 10px; border: 0; resize: none; outline: none; background: transparent; color: var(--text); font: inherit; white-space: pre; overflow: auto; tab-size: 4; }
.fe-ed:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.fe-ed.ro .fe-ta { color: var(--text-muted); }
.fe-status { margin: 0; font-size: 12.5px; }
.fe-vers { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow: auto; }
.fe-ver { border: 1px solid var(--border-alt); background: var(--surface); color: var(--text); border-radius: var(--radius-sm, 8px); padding: 4px 9px; font: inherit; font-size: 13px; cursor: pointer; }
.fe-ver[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft, var(--surface-alt)); }
.fe-diff-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fe-diff-h .grow { flex: 1; }
.fe-diff { margin: 0; max-height: 52vh; overflow: auto; font-family: var(--mcc-mono); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 6px 0; background: var(--surface); }
.fe-diff .dl { display: block; padding: 0 10px; white-space: pre; }
.fe-diff .dl.add { background: var(--success-soft); color: var(--success-soft-text); }
.fe-diff .dl.del { background: var(--danger-soft); color: var(--danger-soft-text); }
.fe-diff .dl.gap { color: var(--text-faint); font-style: italic; }
:root:not([data-theme="clean"]) .fe-ed, :root:not([data-theme="clean"]) .fe-diff, :root:not([data-theme="clean"]) .fe-ver,
:root:not([data-theme="clean"]) .fe-note, :root:not([data-theme="clean"]) .fe-warn { border-radius: 0; }
:root:not([data-theme="clean"]) .fe-ed { border: 2px inset var(--border); }
/* Retro filled a disabled Save like a live one: no fill, a dashed edge (as tp.css's Teleport). */
:root:not([data-theme="clean"]) .fe-dialog .btn.primary[disabled] { background: transparent; border: 2px dashed var(--border-alt); color: var(--text-muted); }
.md-wait { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 7px 10px; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-soft-text); border-radius: var(--radius-sm, 8px); font-size: 13.5px; font-weight: 500; }
.md-wait[hidden] { display: none; }
.md-tools { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.md-tools .fb-filter { flex: 1 1 220px; width: auto; }
.md-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.md-main { flex: 1; min-width: 0; }
.md-nm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.md-sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-sub code { font-family: var(--mcc-mono); font-size: 12px; }
.md-row.off .md-nm b { color: var(--text-muted); font-weight: 500; }
/* "Removed recently": the holding folder, folded under the list, each jar with Restore */
.md-held { flex: 0 0 auto; margin-top: 8px; }
.md-held > summary { cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 13px; padding: 4px 0; }
.md-held > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.md-held > p { margin: 2px 0 6px; font-size: 12.5px; }
.md-heldlist { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.md-heldrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.md-heldrow .md-main { flex: 1 1 auto; min-width: 0; }
.md-acts { display: flex; gap: 6px; flex: none; }
.md-prog { width: 100%; }
.md-hosts { font-size: 12.5px; margin: 6px 0 0; overflow-wrap: anywhere; }
.md-file { margin-top: 2px; max-width: 100%; font: inherit; font-size: 14px; }
:root:not([data-theme="clean"]) .md-wait { border-radius: 0; border: 2px solid var(--warning); }
/* FX-C: a jar's note, the Add dialog's refusal, Show all, and the file input styled as a .btn */
.md-note { margin-top: 2px; font-size: 12.5px; color: var(--warning-soft-text); overflow-wrap: anywhere; }
.md-err { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--danger-soft-text); overflow-wrap: anywhere; }
.md-err:empty { display: none; }
.md-err::before { content: "\2715  "; }
:root:not([data-theme="clean"]) .md-err { color: #ff9aaa; }
.mcc .md-all { width: 100%; margin: 10px 0 4px; }
.md-file::file-selector-button { min-height: 36px; margin-right: 10px; padding: 0 14px; border: 1px solid var(--border-alt); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm, 8px); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.md-file::file-selector-button:hover { background: var(--surface-alt); }
:root:not([data-theme="clean"]) .md-file::file-selector-button { border: 3px outset var(--border); border-radius: 0; }
@media (max-width: 760px) {
  .fb-list, .md-list { max-height: none; overflow: visible; }
  .fb-time { display: none; }
  .md-row, .md-heldrow { flex-wrap: wrap; }
  .md-sub { white-space: normal; overflow-wrap: anywhere; }
  .md-acts { width: 100%; justify-content: flex-end; }
  .fe-ed { height: 58dvh; font-size: 16px; }   /* iOS zooms into a field under 16 px */
  .mcc .fb-filter, .md-add .input { font-size: 16px; }   /* FX-C: the same for the filters and the link field */
  .fb-row { grid-template-columns: minmax(0, 1fr) auto 44px; padding: 0; }   /* FX-C: 44 px tap targets */
  .fb-name { min-height: 44px; }
  .fb-dl { width: 44px; height: 44px; }
  .fb-crumb { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
}

/* ---- the vitals chips: in the header on both layouts (a desktop's go to their card, board.js
   and control.js's toCard; a phone's open a sheet) */
.vchips { display: flex; flex-wrap: wrap; min-width: 0; gap: 6px; align-items: center; order: 1; }
.ck-head > .power { order: 2; }
.ck-head > .mcc-banner, .ck-head > .mcc-offline, .ck-head > .mcc-alerts { order: 3; }
.vchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); font: inherit; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text); flex: none; }
.vchip:hover { border-color: var(--border-alt); }
.vchip .k { color: var(--text-muted); font-size: 12px; }
.vchip b { font-weight: 600; }
.vchip.warn { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-soft-text); }
.vchip.warn .k { color: var(--warning-soft-text); }
.vchip .heads { display: inline-flex; align-items: center; padding-left: 6px; align-self: center; }
.vchip .heads .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface-alt); }
:root:not([data-theme="clean"]) .vchip { border-radius: 0; border: 2px solid var(--border-alt); }

/* ---- the phone's parts, hidden on a desktop */
.dock, .grab { display: none; }
.sheet[hidden] { display: none; }

/* ---- a narrow desktop: the board has six columns (board.js); a little less padding */
@media (max-width: 1000px) and (min-width: 761px) { .mcc main.ck { padding: 14px 14px 24px; } }

/* ---- a phone: mockup C, the console is the page */
@media (max-width: 760px) {
  .mcc main.ck { display: flex; flex-direction: column; gap: 0; padding: 0; height: calc(100dvh - var(--wp-site-nav-h, 0px)); min-height: 520px; }
  .ck-head { padding: 8px 0 0; gap: 8px 0; background: var(--surface); flex: none; }
  .ck-title { padding-left: 12px; }
  .ck-head .pmenu { margin-right: 12px; }
  .ck-title .crumbs, .ck-title .meta { display: none; }
  .ck-title h1 { font-size: 18px; gap: 10px; flex-wrap: nowrap; }
  .ck-title h1 .spill { font-size: 12.5px; }
  .ck-head .power { display: none; }
  .mcc .btn.pmenu { display: inline-flex; flex: none; }
  .vchips { flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 0 12px 8px; border-bottom: 1px solid var(--border); order: 0; }
  .vchips::-webkit-scrollbar { display: none; }
  :root:not([data-theme="clean"]) .vchips { border-bottom: 3px ridge var(--border); }
  .mcc-banner, .mcc-offline { border-radius: 0; border-inline: 0; }
  .ck-board { display: contents; }
  .ck-slot { display: none; }
  .ck-slot[data-slot="console"] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .ck-con { flex: 1; height: auto; min-height: 0; }
  .ck-con .con { border-radius: 0; border-inline: 0; border-bottom: 0; }
  .dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); flex: none; }
  .dock .btn { min-height: 40px; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 74dvh; z-index: 60; background: var(--surface); border-top: 1px solid var(--border-alt); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-3); display: flex; flex-direction: column; }
  :root:not([data-theme="clean"]) .sheet { border-radius: 0; border-top: 4px double var(--border-alt); }
  .grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--border-alt); margin: 8px auto 0; }
  .sheet-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .sheet-h .seg { flex: 1; min-width: 0; }
  .sheet-h .seg button { flex: 1; padding: 0 6px; }
  .sheet-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-alt); cursor: pointer; color: var(--text-muted); flex: none; font: inherit; }
  :root:not([data-theme="clean"]) .sheet-x { border-radius: 0; }
  .sheet-b { flex: 1; overflow: auto; padding: 14px 14px 24px; display: grid; gap: 14px; align-content: start; }
  .sheet-b .ck-players { height: auto; max-height: none; border: 0; box-shadow: none; padding: 0; background: none; }
  .sheet-b .ck-players .plist { overflow: visible; margin: 0; padding: 0; }
  .sheet-b .pd-hosts { grid-template-columns: minmax(0, 1fr); }
  .sheet-empty { margin: 8px 2px; }
}

/* ---------- restarts and backups (phase 5: restarts.js, backups.js) ---------- */
.rs-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-soft-text); border-radius: var(--radius-sm, 8px); font-size: 14px; }
.rs-pending[hidden] { display: none; }
.rs-pending .grow { flex: 1 1 12rem; min-width: 0; }
.rs-pending b { font-variant-numeric: tabular-nums; }
.rs-sub { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.rs-list { list-style: none; margin: 0; padding: 0; }
.rs-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.rs-list li:first-child { border-top: 0; }
.rs-list li.muted { color: var(--text-muted); }
.rs-list .grow { flex: 1 1 12rem; min-width: 0; }
.rs-file { display: block; font-family: var(--mcc-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.rs-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rs-note { margin: 0 0 8px; font-size: 13px; }
.rs-note[hidden], .rs-acts .btn[hidden] { display: none; }
.rs-preview { margin: 12px 0 0; font-size: 13px; }
.mcc-dialog .check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.mcc-dialog .days { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mcc-dialog .days .check { margin-top: 6px; }
:root:not([data-theme="clean"]) .rs-pending { border-radius: 0; }

/* ---- Modrinth in the Mods card (the mc-modrinth run: mods.js's tabs and Installed extras,
   modrinth.js's Browse, Pack, project sheet, dry run and pack diff). On the board the open tab
   fills the card and its list scrolls inside, so the slot keeps its fixed height. Icons from
   cdn.modrinth.com are refused by the /mc-stats CSP (img-src 'self'), so .mr-tile is a letter. */
.md-tabs { display: flex; margin: 0 0 10px; }
.md-tabs button { flex: 1 1 0; }
.md-pane[hidden] { display: none; }
.md-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); border-radius: var(--radius-sm, 8px); font-size: 13.5px; }
.md-offer[hidden] { display: none; }
.md-offer-t { flex: 1 1 16rem; min-width: 0; }
.md-offer-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.md-upd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 8px; font-size: 13px; }
.md-upd .grow { flex: 1; }
.md-loading { margin: 0 0 6px; font-size: 13px; }
.md-up { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.md-sel { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.md-uplist, .md-reqby, .mr-add, .mr-already, .mp-mods, .mp-ovs { list-style: none; margin: 8px 0; padding: 0; }
.md-uplist li, .md-reqby li, .mr-add li, .mr-already li, .mp-mods li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
.mr-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm, 8px);
  background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 700; font-size: 16px; object-fit: cover; }
.mr-tile.sm { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
.mr-tile.lg { width: 56px; height: 56px; font-size: 24px; }
.mr-badge { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.6; border: 1px solid var(--border-alt); background: var(--surface-alt); color: var(--text-muted); white-space: nowrap; }
.mr-badge.ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-soft); color: var(--success-soft-text); }
.mr-badge.new { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-soft-text); }
.mr-badge.warn { border-color: color-mix(in srgb, var(--warning) 50%, transparent); background: var(--warning-soft); color: var(--warning-soft-text); }
.mr-badge.pack { border-style: dashed; color: var(--text); }
.mr-badge.side.unsupported { opacity: .75; }
.mr-link { font-size: 12.5px; color: var(--link); white-space: nowrap; }
.mr-tools .mr-q { flex: 1 1 200px; min-width: 0; min-height: 34px; padding: 0 10px; border: 1px solid var(--border-alt); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.mr-sort { min-height: 34px; padding: 0 8px; border: 1px solid var(--border-alt); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.mr-ctx, .mr-status { margin: 6px 0 0; font-size: 12.5px; }
.mr-status:empty { display: none; }
.mr-hits, .mp-body { max-height: 460px; overflow: auto; border-top: 1px solid var(--border); margin: 8px -16px 0; padding: 0 16px; }
.mr-hit, .mp-ver, .mp-head { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mr-main { flex: 1; min-width: 0; }
.mr-nm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
.mr-title { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--link); cursor: pointer; text-align: left; }
.mr-title:hover { text-decoration: underline; }
.mr-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.mr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; }
.mr-acts { flex: none; display: flex; gap: 6px; align-items: center; }
.mr-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 2px; font-size: 12.5px; }
.mr-fname { font-family: var(--mcc-mono); font-size: 12px; overflow-wrap: anywhere; }
.mr-why { margin-top: 2px; font-size: 12.5px; }
.mr-sub { margin: 14px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); }
.mr-phead { display: flex; gap: 12px; align-items: flex-start; }
.mr-pdesc { margin: 0 0 4px; font-size: 14px; }
.mr-inst { margin: 10px 0 0; font-size: 13.5px; }
.mr-vinfo { margin-top: 6px; }
.mr-clients, .mr-note { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-soft-text); border-radius: var(--radius-sm, 8px); font-size: 13.5px; }
.mr-note { border-color: var(--border-alt); background: var(--surface-alt); color: var(--text); }
.mr-note[hidden] { display: none; }
.mr-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius-sm, 8px); font-size: 13.5px; }
.mr-warn.bad { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger-soft-text); }
.mr-warn ul { margin: 6px 0 0; padding-left: 18px; }
.mr-cl { margin-top: 6px; font-size: 13px; }
.mr-cl > summary, .mp-sec > summary, .mp-diffbox > summary, .mp-older > summary, .mp-upload > summary { cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 13px; padding: 4px 0; }
.mr-cl > summary:focus-visible, .mp-sec > summary:focus-visible, .mp-diffbox > summary:focus-visible, .mp-older > summary:focus-visible, .mp-upload > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Markdown from Modrinth: text only (modrinth.js builds it with textContent), styled small. */
.mr-md { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.mr-md > :first-child { margin-top: 0; }
.mr-md p, .mr-md ul, .mr-md ol, .mr-md blockquote, .mr-md pre { margin: 6px 0; }
.mr-md ul, .mr-md ol { padding-left: 20px; }
.mr-md .mr-h { margin: 12px 0 4px; font-size: 14px; font-weight: 700; }
.mr-md blockquote { padding-left: 10px; border-left: 3px solid var(--border-alt); color: var(--text-muted); }
.mr-md code { font-family: var(--mcc-mono); font-size: 12.5px; background: var(--surface-alt); padding: 0 3px; border-radius: 4px; }
.mr-md pre.mr-code { overflow: auto; padding: 8px 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
.mr-md pre.mr-code code { background: none; padding: 0; }
.mr-md a { color: var(--link); }
.mr-md hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.mr-cl .mr-md, .md-update .mr-md { max-height: 40vh; overflow: auto; }
.mp-head { align-items: center; }
.mp-vers { min-width: 0; }
.mp-ver.newer .mr-nm > b { color: var(--accent-soft-text); }
.mp-older, .mp-upload { margin: 8px 0; }
.mp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-row .mp-ref { flex: 1 1 240px; min-height: 34px; padding: 0 10px; border: 1px solid var(--border-alt); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; min-width: 0; }
.mp-link { margin: 10px 0 0; }
.mp-kinds { margin: 0 0 8px; max-width: 100%; }   /* the Pack tab's kind: Modrinth modpack / Shared instance */
.mp-head .mp-kind { font-size: 12.5px; overflow-wrap: anywhere; }   /* a linked shared instance, where a project has its Modrinth link */
.mp-sec { margin: 8px 0; }
.mp-ovrow { padding: 6px 0; border-bottom: 1px solid var(--border); }
.mp-ovh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.mp-ovh code { font-family: var(--mcc-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.mcc-dialog .mp-ovh .check { margin-top: 0; }
.mcc-dialog .mp-rmrow { margin-top: 0; align-items: flex-start; }
.mcc-dialog .mp-rmrow input { margin-top: 3px; }
.mp-sec.skipov li { padding: 4px 0; }
.mp-sec.skipov code { font-family: var(--mcc-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.md-err .btn { margin-left: 6px; }
.mp-diff { max-height: 40vh; }
.fe-diff .dl.hdr { color: var(--text-muted); font-weight: 600; }
:root:not([data-theme="clean"]) :is(.md-offer, .mr-tile, .mr-badge, .mr-clients, .mr-note, .mr-warn, .mr-tools .mr-q, .mr-sort, .mp-row .mp-ref, .mr-md pre.mr-code, .mr-md code) { border-radius: 0; }
:root:not([data-theme="clean"]) .md-offer { border: 2px solid var(--accent); }
:root:not([data-theme="clean"]) .mr-tile { border: 2px ridge var(--border); }
:root:not([data-theme="clean"]) :is(.mr-tools .mr-q, .mr-sort, .mp-row .mp-ref) { border: 2px inset var(--border); }
@media (min-width: 761px) {
  .ck-board [data-panel="mods"] > .card > .md-pane:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ck-board [data-panel="mods"] > .card > .md-pane > * { flex: none; }
  .ck-board [data-panel="mods"] > .card > .md-pane > :is(.md-list, .mr-hits, .mp-body) { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
}
@media (max-width: 760px) {
  .mr-hits, .mp-body { max-height: none; overflow: visible; }
  .mr-hit, .mp-ver { flex-wrap: wrap; }
  .mr-hit .mr-acts, .mp-ver .mr-acts { width: 100%; justify-content: flex-end; }
  .mcc :is(.mr-tools .mr-q, .mr-sort, .mp-row .mp-ref, .mr-vsel) { font-size: 16px; min-height: 44px; }
  .sheet-b [data-panel="mods"] :is(.md-tabs button, .md-offer .btn, .md-upd .btn, .mr-hit .btn, .mr-pager .btn, .mp-ver .btn, .mp-head .btn, .mp-row .btn, .md-row .btn, .mp-kinds button) { min-height: 44px; }
  .sheet-b [data-panel="mods"] .mr-title { min-height: 44px; display: inline-flex; align-items: center; }
  .sheet-b [data-panel="mods"] :is(.mr-cl, .mp-older, .mp-upload) > summary { min-height: 44px; display: flex; align-items: center; }
  .md-sel { width: 22px; height: 22px; }
}
/* push alerts slice E: the Alerts card (alerts.js): This device, Built-in alerts, My rules, History */
.al-card .al-sec { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); }
.al-card .al-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.al-card h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 8px; }
.al-card .al-state { margin: 0 0 8px; font-size: 14px; }
.al-card .al-state[data-al-state="blocked"] { color: var(--danger-soft-text); }
.al-card .al-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.al-card .al-actions[hidden] { display: none; }
.al-devices { list-style: none; margin: 0; padding: 0; }
.al-devices li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.al-devices li:last-child { border-bottom: 0; }
.al-dev-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.al-dev-t > span:last-child { flex-basis: 100%; font-size: 12.5px; }
.al-dev-b { display: flex; gap: 6px; flex: none; }
.al-badge, .al-unseen { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text, #fff); vertical-align: 1px; }
:root:not([data-theme="clean"]) :is(.al-badge, .al-unseen) { color: #001a00; }
.al-unseen { margin-right: 6px; }
.al-bad { color: var(--danger-soft-text); }
.al-prefs { display: grid; gap: 2px; }
.al-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; font-size: 14px; cursor: pointer; }
.al-pref input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.al-pref .fine { font-size: 12px; }
.al-history .pd-table { width: 100%; table-layout: fixed; }
.al-history .pd-table th:first-child { width: 6.4rem; }
.al-history .pd-table th:nth-child(2) { width: 38%; }
.al-history .pd-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.al-history .al-tm { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.al-history .al-new { font-weight: 600; }
.al-history .al-b { color: var(--text-muted); }
.al-history .tablewrap { overflow-x: visible; }
:root:not([data-theme="clean"]) :is(.al-badge, .al-unseen) { border-radius: 0; }
@media (max-width: 760px) {
  .al-pref { min-height: 44px; }
  .al-pref input { width: 22px; height: 22px; }
  .al-history .pd-table th:first-child { width: 4.8rem; }
  .al-history .pd-table th:nth-child(2) { width: 40%; }
  .al-history .pd-btn, .al-history select { min-height: 44px; }
}

/* push alerts slice G: Keep awake in the console toolbar */
.con-tools #mcc-wake { height: 28px; min-height: 28px; padding: 0 9px; font-size: 12px; font-weight: 400; border-radius: 6px; background: transparent; color: var(--con-dim); border-color: var(--con-rule); }
:root:not([data-theme="clean"]) .con-tools #mcc-wake { border-radius: 0; }
.con-tools #mcc-wake[aria-pressed="true"] { background: var(--con-rule); color: inherit; border-color: currentColor; }
.con-tools #mcc-wake[hidden] { display: none; }
/* the search box keeps a readable width; the rest of the bar gives way (it wraps before the box shrinks) */
.con-tools .con-search { min-width: 4.5rem; flex-basis: 4.5rem; }   /* 72 px: room for the Sources menu in the one row */
/* ...and the bar is a little tighter, so the box can be 96 px and Keep awake still fits one row */
@media (min-width: 761px) { .con-tools { gap: 4px; } .con-tools .chip { padding: 0 5px; } .con-tools .lvls { gap: 3px; } .con-tools .ttl { margin-right: 0; } .con-tools #mcc-wake { padding: 0 7px; } }
/* a phone: a sun, not the words, so the bar stays one row (the label is in aria-label) */
@media (max-width: 760px) {
  .mcc .con-tools #mcc-wake { height: 44px; min-width: 44px; padding: 0; font-size: 0; }
  .con-tools { gap: 6px; }
  .con-tools #mcc-wake::before { content: "\2600"; font-size: 18px; }
}
/* a desktop card under 1000 px: the same sun at 28 px, so the Sources menu fits the one row (Will, 2026-10-20) */
@container con (max-width: 999px) {
  .con-tools #mcc-wake { width: 28px; min-width: 28px; padding: 0; font-size: 0; justify-content: center; }
  .con-tools #mcc-wake::before { content: "\2600"; font-size: 15px; }
}

/* push alerts slice F: My rules and the rule editor (rule-editor.js) */
.re-rules .sr, .re-dialog .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.re-bar { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.re-bar .btn[hidden] { display: none; }
.re-list { list-style: none; margin: 0; padding: 0; }
.re-list > li { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; min-width: 0; }
.re-list > li:last-child { border-bottom: 0; }
.re-list > li.empty { display: block; color: var(--text-muted); }
.re-rule.off .re-name, .re-rule.off .re-q { opacity: .65; }
.re-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.re-name { overflow-wrap: anywhere; min-width: 0; }
.re-sw { display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.re-sw input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.re-q { display: block; font-family: var(--mcc-mono); font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; white-space: pre-wrap; background: none; padding: 0; }
.re-facts { font-size: 12.5px; }
.re-off { font-size: 12.5px; color: var(--danger-soft-text); }
.re-tag { display: inline-block; font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); }
.re-owner { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.re-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.re-others { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.re-others[hidden] { display: none; }
.re-others h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
:root:not([data-theme="clean"]) .re-tag { border-radius: 0; }

.re-dialog .re-builder { border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 8px 10px 10px; margin: 12px 0 0; min-width: 0; }
.re-dialog .re-builder legend { font-size: 13px; color: var(--text-muted); font-weight: 500; padding: 0 4px; }
.re-dialog .re-builder.locked { background: var(--surface-alt); }
.re-join { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; margin-bottom: 6px; }
.re-join label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.re-join input { margin: 0; accent-color: var(--accent); }
.re-rows { display: grid; gap: 6px; }
.re-row { display: grid; grid-template-columns: auto minmax(0, 9rem) minmax(0, 9rem) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.re-row .input { min-width: 0; }
.re-row .input[hidden] { display: none; }
.re-row .input[data-re="value"][hidden] + .re-x { grid-column: 5; }
.re-not { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.re-not input { margin: 0; accent-color: var(--accent); }
.re-x { padding: 0 9px; min-width: 44px; }
.re-rowbar { margin-top: 6px; }
.re-rowbar .btn[disabled] { display: none; }
.re-lock { margin: 6px 0 0; font-size: 13.5px; }
.re-lock[hidden] { display: none; }
.re-lock .linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.re-dialog textarea.input { min-height: 4.5em; padding: 6px 10px; resize: vertical; line-height: 1.4; }
.re-err { margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger-soft-text); font-size: 13px; display: grid; gap: 4px; min-width: 0; }
.re-err[hidden] { display: none; }
.re-row[data-re-bad] [data-re="value"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.re-offnote { margin: 6px 0 0; }
.re-caret { display: grid; font-family: var(--mcc-mono); font-size: 12.5px; white-space: pre; overflow-x: auto; line-height: 1.3; }
.re-caret-m { font-weight: 700; }
.re-pair { display: flex; flex-wrap: wrap; align-items: end; gap: 0 16px; }
.re-pair > .field { flex: 1 1 14rem; }
.re-pair .re-on { margin-top: 12px; min-height: 38px; }
.re-places { margin: 6px 0 0; line-height: 1.7; overflow-wrap: anywhere; }
.re-places code { font-family: var(--mcc-mono); font-size: 12px; padding: 1px 4px; border-radius: 4px; background: var(--surface-alt); white-space: nowrap; }
.re-prev { margin-top: 14px; }
.re-sum { margin: 8px 0 6px; font-size: 14px; }
.re-sum[hidden], .re-con[hidden], .re-msg[hidden] { display: none; }
.re-dialog .re-con { height: auto; max-height: 16rem; overflow: auto; padding: 6px 0; font-family: var(--mcc-mono); font-size: 12.5px; line-height: 1.45; display: block; }
.re-con .re-none { margin: 4px 12px; color: var(--con-dim); }
.re-msg { margin: 12px 0 0; font-size: 14px; }
.re-msg.bad { color: var(--danger-soft-text); }
.re-dialog .dlg-f .grow { flex: 1; }
:root:not([data-theme="clean"]) :is(.re-dialog .re-builder, .re-err, .re-places code) { border-radius: 0; }
@media (max-width: 760px) {
  .re-sw { min-height: 44px; min-width: 44px; justify-content: center; }
  .re-sw input { width: 22px; height: 22px; }
  .re-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
  .re-row .input[data-re="value"] { grid-column: 1 / -1; grid-row: 2; }
  .re-row .input[data-re="value"][hidden] + .re-x { grid-column: auto; }
  .re-dialog .btn, .mcc .re-dialog .btn.sm, .re-dialog .btn.sm, .re-dialog .input, .re-dialog .dlg-h .x { min-height: 44px; }
  .re-dialog .dlg-h .x { width: 44px; }
  .re-dialog :is(.re-join label, .re-not, .re-on) { min-height: 44px; }
  .re-dialog :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; }
  .re-lock .linkish { min-height: 44px; }
  .re-dialog .dlg-f { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .re-dialog .dlg-b { padding: 12px 14px; }
}

/* ---- Share (share.js): the console's toolbar, its crash card and the player card dialog */
.share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.share-btn .share-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.con-cmd .con-share { color: var(--con-dim); border-color: var(--con-rule); }
.con-cmd .con-share .share-lb { display: none; }
/* Whispering on a narrow console, the "To" chip needs the room: Share comes back with chat or commands. */
@container con (max-width: 700px) { .con-cmd.whisper .con-share { display: none; } }
.mcc-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; font-size: 13px; }
.mcc-share-tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); }
.mcc-share-tick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.mcc-share-tick .muted { color: var(--text-muted); }
@media (max-width: 760px) {
  .mcc-share-row .btn, .mcc-share-tick { min-height: 44px; }
  .down-card .acts .btn { min-height: 44px; }
}

/* wpcontrol card (wpcontrol.js): the state box reuses .rs-pending, bots .rs-list, audit .act-feed */
.wpc-state.off { border-color: var(--border); background: var(--surface-alt); color: var(--text-muted); }
.wpc-audit-h { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.wpc-audit-h .rs-sub { margin: 0; }
.wpc-who { max-width: 14rem; min-height: 32px; }
.wpc-audit { max-height: none; }
:root:not([data-theme="clean"]) .wpc-state, :root:not([data-theme="clean"]) .wpc-who { border-radius: 0; }