/* Copyright (c) 2026 Dutch P2P. All rights reserved.
 * Matlock — Command Center web mirror (/<lang>/app) and Manual (/<lang>/manual).
 * Tokens only (tokens.css): zero raw hex, weights <= 600, radii <= 6px, no shadows, no blur.
 * Nothing zooms, re-centers or auto-scrolls: smooth scrolling is switched off for this page. */

html:has(.cc-body) { scroll-behavior: auto; }
.cc-body, .cc-body * { scroll-behavior: auto; }
.cc-body {
  --mlk-canvas: rgb(19, 21, 23);
  --mlk-canvas-sink: rgb(24, 27, 32);
  --cc-rail-bg: rgb(24, 27, 32);
  --mlk-panel: rgb(30, 34, 40);
  --mlk-panel-hover: rgb(38, 43, 51);
  --mlk-line: rgb(46, 52, 62);
  --mlk-border-active: rgb(62, 70, 84);
  --mlk-tx-primary: rgb(227, 230, 234);
  --mlk-tx-secondary: rgb(154, 160, 166);
  --mlk-tx-disabled: rgb(107, 114, 128);
  --mlk-accent: rgb(138, 180, 248);
  --mlk-accent-dim: rgba(138, 180, 248, 0.14);
  display: block; overflow-x: hidden; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary);
}
.cc-body[data-cc-theme="day"] {
  --mlk-canvas: rgb(248, 249, 250);
  --mlk-canvas-sink: rgb(241, 243, 244);
  --cc-rail-bg: rgb(241, 243, 244);
  --mlk-panel: rgb(255, 255, 255);
  --mlk-panel-hover: rgb(232, 234, 237);
  --mlk-line: rgb(218, 220, 224);
  --mlk-border-active: rgb(189, 193, 198);
  --mlk-tx-primary: rgb(32, 33, 36);
  --mlk-tx-secondary: rgb(95, 99, 104);
  --mlk-tx-disabled: rgb(112, 117, 122);
  --mlk-accent: rgb(26, 115, 232);
  --mlk-accent-dim: rgba(26, 115, 232, 0.12);
  --mlk-alert-pass: rgb(24, 128, 56);
  --mlk-alert-warn: rgb(183, 106, 0);
  --mlk-alert-error: rgb(217, 48, 37);
}
.cc-body[data-cc-theme="day"] .btn-primary { background-color: var(--mlk-accent); color: rgb(255, 255, 255); border-color: var(--mlk-accent); }
.cc-body * { scrollbar-width: thin; scrollbar-color: var(--mlk-border-active) transparent; }

@media (prefers-reduced-motion: reduce) {
  .cc-body, .cc-body *, .cc-body *::before, .cc-body *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- App frame ---------------------------------------------------------- */
.cc-app { display: flex; flex-direction: column; min-height: 100vh; }
.cc-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr) 304px; flex: 1; min-height: 0; }
.cc-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cc-muted { color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-small); }
.cc-lead { font-size: var(--mlk-fs-lead); color: var(--mlk-tx-primary); max-width: var(--mlk-width-prose); }
.cc-hint { display: block; color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-regular); margin-top: 2px; }

@media (min-width: 1081px) {
  .cc-app { height: 100vh; overflow: hidden; }
  .cc-rail-left, .cc-rail-right { overflow-y: auto; min-height: 0; }
}

/* ---- Top bar ------------------------------------------------------------ */
.cc-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px 14px; background-color: var(--mlk-panel); border-bottom: 1px solid var(--mlk-line); }
.cc-topbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cc-topbar-project { flex: 0 1 auto; min-width: 0; }
.cc-topbar-end { margin-inline-start: auto; }
.cc-mode-tag { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); letter-spacing: var(--mlk-ls-mono); text-transform: uppercase; }
.cc-project-pill, .cc-engine-badge, .cc-score-chip, .cc-pro-pill {
  display: inline-flex; align-items: center; padding: 5px 10px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro);
  color: var(--mlk-tx-secondary); background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm);
}
.cc-project-pill { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-engine-badge[data-engine="wasm"] { color: var(--mlk-alert-pass); border-color: var(--mlk-alert-pass); }
.cc-engine-badge[data-engine="fallback"] { color: var(--mlk-alert-warn); border-color: var(--mlk-alert-warn); }
.cc-score-chip { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); }
.cc-pro-pill[data-tier="pro"] { color: var(--mlk-tx-primary); border-color: var(--mlk-accent); }
.cc-app .btn { padding: 6px 11px; white-space: nowrap; }
.cc-panels .btn, .cc-rail-left .btn, .cc-rail-right .btn, .cc-body dialog .btn, .cc-mini-btn, .cc-chip {
  white-space: normal; height: auto; max-width: 100%; overflow-wrap: break-word;
}
.cc-pro-pill { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1700px) { .cc-mode-tag { display: none; } }
.cc-app .btn:disabled, .cc-mini-btn:disabled, .cc-app .btn[disabled] {
  color: var(--mlk-tx-disabled); background-color: transparent; border: 1px dashed var(--mlk-line); cursor: not-allowed; pointer-events: none;
}
.cc-app .btn-block { padding: 10px 14px; font-size: var(--mlk-fs-small); }
.cc-app .btn.cc-upgrade, .cc-mini-btn.cc-upgrade { color: var(--mlk-tx-secondary); border-style: dashed; }
.cc-progress-bar { height: 2px; background-color: transparent; }
.cc-progress-bar[data-state="running"] { background-color: var(--mlk-accent); }
.cc-progress-bar[data-state="pass"] { background-color: var(--mlk-alert-pass); }
.cc-progress-bar[data-state="error"] { background-color: var(--mlk-alert-error); }
.cc-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 18px; font-size: var(--mlk-fs-small); border-bottom: 1px solid var(--mlk-line); color: var(--mlk-tx-secondary); background-color: var(--mlk-canvas-sink); }
.cc-banner strong { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); }
.cc-banner-warn { border-inline-start: 3px solid var(--mlk-alert-warn); color: var(--mlk-tx-primary); }
.cc-banner-info { border-inline-start: 3px solid var(--mlk-accent); }
.cc-banner[hidden] { display: none; }

/* ---- Rails -------------------------------------------------------------- */
.cc-rail-left, .cc-rail-right { background-color: var(--cc-rail-bg, var(--mlk-panel)); padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.cc-rail-left { border-inline-end: 1px solid var(--mlk-line); }
.cc-rail-right { border-inline-start: 1px solid var(--mlk-line); }
.cc-rail-group, .cc-subj-list { display: flex; flex-direction: column; gap: 2px; }
.cc-rail-heading { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-disabled); text-transform: uppercase; margin-bottom: 6px; }
.cc-nav-btn, .cc-subj-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; text-align: start;
  background: transparent; border: 1px solid transparent; border-radius: var(--mlk-radius-sm); color: var(--mlk-tx-secondary);
  font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); cursor: pointer;
}
.cc-nav-btn:hover, .cc-subj-btn:hover { background-color: var(--mlk-panel-hover); color: var(--mlk-tx-primary); }
.cc-nav-btn.is-active, .cc-subj-btn.is-active { background-color: var(--mlk-canvas); border-color: var(--mlk-border-active); color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); }
.cc-count { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 1px 7px; }
.cc-rail-note p { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); margin-bottom: 8px; }
.cc-rail-links { display: flex; flex-direction: column; gap: 4px; font-size: var(--mlk-fs-micro); }
.cc-score-box { background-color: var(--mlk-canvas); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); padding: 16px; }
.cc-score-line { display: flex; align-items: baseline; gap: 8px; }
.cc-est-wrap { position: relative; display: inline-flex; align-items: center; }
.cc-est-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); line-height: 1;
  color: var(--mlk-tx-secondary); background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active);
  border-radius: var(--mlk-radius-sm); cursor: pointer;
}
.cc-est-badge:hover, .cc-est-badge:focus-visible { color: var(--mlk-tx-primary); border-color: var(--mlk-accent); background-color: var(--mlk-panel-hover); }
.cc-est-tip {
  position: absolute; z-index: 8; inset-block-start: calc(100% + 6px); inset-inline-end: 0; min-width: 210px; max-width: 270px;
  padding: 8px 10px; background-color: var(--mlk-panel); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active);
  border-radius: var(--mlk-radius-sm); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-regular);
  line-height: var(--mlk-lh-snug); white-space: normal; text-align: start;
}
.cc-est-badge[hidden], .cc-est-tip[hidden] { display: none; }
.cc-score-big { font-size: calc(var(--mlk-fs-hero) * 1.6); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-hero); line-height: 1; font-variant-numeric: tabular-nums; color: var(--mlk-tx-primary); }
.cc-score-of { color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-body); }
.cc-grade-badge { margin-top: 10px; display: inline-block; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 3px 9px; }
.cc-grade-badge[data-grade="pass"] { color: var(--mlk-alert-pass); border-color: var(--mlk-alert-pass); }
.cc-grade-badge[data-grade="warn"] { color: var(--mlk-alert-warn); border-color: var(--mlk-alert-warn); }
.cc-grade-badge[data-grade="error"] { color: var(--mlk-alert-error); border-color: var(--mlk-alert-error); }
.cc-score-note { margin-top: 10px; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); }
.cc-hbar { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cc-hbar-head { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); }
.cc-hbar-track { display: block; width: 100%; height: 6px; background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); overflow: hidden; }
.cc-hbar-fill { fill: var(--mlk-accent); background-color: var(--mlk-accent); }
.cc-hbar[data-tone="pass"] .cc-hbar-fill { fill: var(--mlk-alert-pass); background-color: var(--mlk-alert-pass); }
.cc-hbar[data-tone="warn"] .cc-hbar-fill { fill: var(--mlk-alert-warn); background-color: var(--mlk-alert-warn); }
.cc-hbar[data-tone="error"] .cc-hbar-fill { fill: var(--mlk-alert-error); background-color: var(--mlk-alert-error); }
.cc-star-icon { display: inline-block; width: 14px; height: 14px; vertical-align: middle; flex-shrink: 0; }
.cc-star-icon path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.cc-star-btn[aria-pressed="true"] .cc-star-icon path, .is-starred .cc-star-icon path { fill: var(--mlk-accent); stroke: var(--mlk-accent); }
.cc-term-cli { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background-color: var(--mlk-panel); border-bottom: 1px solid var(--mlk-line); }
.cc-term-prompt { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); color: var(--mlk-accent); font-weight: var(--mlk-fw-semibold); }
.cc-term-cli-input { flex: 1 1 auto; min-width: 140px; padding: 4px 8px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); }
.cc-failed-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); }
.cc-failed-list li { display: flex; justify-content: space-between; gap: 8px; }
.cc-failed-list strong { color: var(--mlk-alert-error); font-weight: var(--mlk-fw-semibold); font-family: var(--mlk-font-mono); }
.cc-stat-list { border-top: 1px solid var(--mlk-line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cc-stat-row { display: flex; justify-content: space-between; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); }
.cc-stat-row strong { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-medium); font-family: var(--mlk-font-mono); }
.cc-rail-actions { display: flex; flex-direction: column; gap: 8px; }

/* ---- Center stage ------------------------------------------------------- */
.cc-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.cc-toast { position: absolute; inset-block-start: 8px; inset-inline-end: 12px; z-index: 5; max-width: 420px; padding: 8px 14px; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); font-size: var(--mlk-fs-small); }
.cc-toast[hidden] { display: none; }
.cc-runline { padding: 10px 18px; border-bottom: 1px solid var(--mlk-line); background-color: var(--mlk-canvas-sink); }
.cc-runline-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cc-capsules { list-style: none; display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.cc-capsule { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 6px 10px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); font-size: var(--mlk-fs-small); }
.cc-capsule-name { font-weight: var(--mlk-fw-semibold); }
.cc-capsule-state { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-micro); }
.cc-capsule[data-state="pass"] { border-color: var(--mlk-alert-pass); }
.cc-capsule[data-state="pass"] .cc-capsule-state { color: var(--mlk-alert-pass); }
.cc-capsule[data-state="fail"] { border-color: var(--mlk-alert-error); }
.cc-capsule[data-state="fail"] .cc-capsule-state { color: var(--mlk-alert-error); }
.cc-capsule[data-state="skip"] .cc-capsule-state, .cc-capsule[data-state="running"] .cc-capsule-state { color: var(--mlk-alert-warn); }
.cc-panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }
.cc-panel[hidden] { display: none; }
.cc-panel-head { margin-bottom: 10px; }
.cc-card { background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.cc-card-title { font-size: var(--mlk-fs-badge); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); color: var(--mlk-tx-primary); }
h3.cc-card-title { font-size: var(--mlk-fs-lead); }
.cc-card-sub { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); margin-bottom: 8px; }
.cc-card-head-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cc-subhead { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-secondary); text-transform: uppercase; }
.cc-note { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); margin-bottom: 12px; max-width: none; }
.cc-note-strong { color: var(--mlk-tx-primary); border-inline-start: 3px solid var(--mlk-accent); padding: 8px 12px; background-color: var(--mlk-canvas-sink); }
.cc-lock-note { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); padding: 8px 12px; border: 1px dashed var(--mlk-border-active); border-radius: var(--mlk-radius-sm); max-width: none; }
.cc-lock-note[hidden], .cc-empty-state[hidden] { display: none; }
.cc-status-line { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); max-width: none; }
.cc-empty-hero { padding: 28px 8px; display: flex; flex-direction: column; gap: 14px; }
.cc-empty-state { padding: 14px; color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-small); text-align: center; border: 1px dashed var(--mlk-line); border-radius: var(--mlk-radius-md); }
.cc-link-btn { background: none; border: none; padding: 0; color: var(--mlk-accent); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---- Forms -------------------------------------------------------------- */
.cc-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.cc-form-row > * { flex: 1 1 180px; min-width: 0; }
.cc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cc-field-label { display: block; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); }
.cc-input, .cc-select {
  width: 100%; padding: 8px 10px; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active);
  border-radius: var(--mlk-radius-sm); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-small);
}
.cc-input::placeholder { color: var(--mlk-tx-disabled); }
.cc-input:disabled { color: var(--mlk-tx-disabled); border-style: dashed; }
.cc-term-input { font-family: var(--mlk-font-mono); resize: vertical; }
.cc-narrow { max-width: 150px; flex: 0 1 150px; }
.cc-toolbar .cc-select { width: auto; min-width: 170px; }
.cc-search { max-width: 360px; }
.cc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-check, .cc-radio { display: flex; align-items: flex-start; gap: 9px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-primary); cursor: pointer; }
.cc-check input, .cc-radio input { margin-top: 3px; accent-color: var(--mlk-accent); }
.cc-check-group { display: flex; flex-direction: column; gap: 8px; }
.cc-fieldset { border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.cc-fieldset legend { padding-inline: 6px; }
.cc-mini-btn {
  padding: 4px 10px; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active);
  border-radius: var(--mlk-radius-sm); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); cursor: pointer;
}
.cc-mini-btn:hover { border-color: var(--mlk-accent); background-color: var(--mlk-panel-hover); }
.cc-chip-row, .cc-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip, .cc-pill-chip { padding: 5px 11px; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); font-size: var(--mlk-fs-small); cursor: pointer; }
.cc-pill-chip { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); }
.cc-chip:hover, .cc-pill-chip:hover { border-color: var(--mlk-accent); }
.cc-code-block { background-color: var(--mlk-canvas-sink); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); padding: 12px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); line-height: var(--mlk-lh-spec); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.cc-warn-list { list-style: none; display: flex; flex-direction: column; gap: 4px; color: var(--mlk-alert-warn); font-size: var(--mlk-fs-small); }
.cc-warn-list:empty { display: none; }

/* ---- Cards, steps, libraries -------------------------------------------- */
.cc-step-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cc-step-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 12px; background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); }
.cc-step-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-step-title { font-weight: var(--mlk-fw-semibold); font-size: var(--mlk-fs-small); overflow-wrap: anywhere; }
.cc-step-tools { display: flex; gap: 6px; }
.cc-step-cmd { grid-column: 1 / -1; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); overflow-wrap: anywhere; }
.cc-step-row .cc-check { grid-column: 1 / -1; color: var(--mlk-tx-secondary); }
.cc-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cc-lib-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); }
.cc-lib-title { font-weight: var(--mlk-fw-semibold); font-size: var(--mlk-fs-small); }
.cc-lib-note { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); max-width: none; }
.cc-lib-code { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); overflow-wrap: anywhere; max-height: 5.5em; overflow: hidden; }
.cc-lib-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cc-badge-admin { align-self: flex-start; font-size: var(--mlk-fs-micro); color: var(--mlk-alert-warn); border: 1px solid var(--mlk-alert-warn); border-radius: var(--mlk-radius-sm); padding: 1px 7px; }
.cc-simple-list { display: flex; flex-direction: column; gap: 6px; }
.cc-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); font-size: var(--mlk-fs-small); }
.cc-list-row[hidden] { display: none; }
.cc-list-text { overflow-wrap: anywhere; min-width: 0; }
.cc-row-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.cc-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cc-type-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: start; background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); color: var(--mlk-tx-primary); cursor: pointer; }
.cc-type-tile:hover, .cc-type-tile.is-active { border-color: var(--mlk-accent); background-color: var(--mlk-panel-hover); }
.cc-type-name { font-weight: var(--mlk-fw-semibold); font-size: var(--mlk-fs-body); }
.cc-type-desc { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); }
.cc-link-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--mlk-fs-small); }
.cc-steps-text { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); }

/* ---- Results ------------------------------------------------------------ */
.cc-summary-strip { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); margin-bottom: 10px; max-width: none; }
.cc-stale-notice {
  padding: 8px 12px; margin-bottom: 10px; background-color: var(--mlk-canvas-sink); color: var(--mlk-tx-secondary);
  border: 1px solid var(--mlk-border-active); border-inline-start: 3px solid var(--mlk-accent); border-radius: var(--mlk-radius-sm);
  font-size: var(--mlk-fs-small); max-width: none;
}
.cc-stale-notice[hidden], .cc-ledger-checks[hidden] { display: none; }
.cc-ledger-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cc-ledger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); font-size: var(--mlk-fs-small);
}
.cc-ledger-row[data-just-fixed="true"] { border-color: var(--mlk-alert-pass); background-color: var(--mlk-canvas); }
.cc-ledger-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cc-ledger-label { font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); }
.cc-fixed-pill { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-alert-pass); border: 1px solid var(--mlk-alert-pass); border-radius: var(--mlk-radius-sm); padding: 1px 7px; }
.cc-passing-group, .cc-na-group { background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); }
.cc-passing-group .cc-ledger-row, .cc-na-group .cc-ledger-row { margin: 4px 10px 8px; background-color: var(--mlk-canvas); }
.cc-fix-cmd-chip { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); margin-inline-end: 6px; }
.cc-accordions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cc-subject-group, .cc-rule-group { background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); }
.cc-rule-group { margin: 6px 10px; background-color: var(--mlk-canvas); }
.cc-subject-group[hidden], .cc-rule-group[hidden], .cc-finding-row[hidden] { display: none; }
.cc-subject-summary, .cc-rule-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: var(--mlk-fw-semibold); font-size: var(--mlk-fs-small); }
.cc-rule-summary { font-weight: var(--mlk-fw-medium); }
.cc-finding-row { padding: 10px 14px; border-top: 1px solid var(--mlk-line); display: flex; flex-direction: column; gap: 6px; position: relative; }
.cc-finding-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cc-finding-loc { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-alert-warn); overflow-wrap: anywhere; }
.cc-finding-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-finding-snippet { background-color: var(--mlk-canvas-sink); padding: 8px 10px; border-radius: var(--mlk-radius-sm); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); overflow-x: auto; }
.cc-finding-fix { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); max-width: none; }
.cc-menu { display: flex; flex-direction: column; align-self: flex-start; min-width: 260px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); padding: 4px; }
.cc-menu[hidden] { display: none; }
.cc-menu-item { text-align: start; padding: 7px 10px; background: transparent; border: none; border-radius: var(--mlk-radius-sm); color: var(--mlk-tx-primary); font-size: var(--mlk-fs-small); cursor: pointer; }
.cc-menu-item:hover { background-color: var(--mlk-panel-hover); }
.cc-area-row { display: flex; justify-content: space-between; padding: 10px 14px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); font-size: var(--mlk-fs-small); }
.cc-area-row strong { font-family: var(--mlk-font-mono); font-weight: var(--mlk-fw-semibold); }

/* ---- Output viewport (looks like PowerShell) ---------------------------- */
.cc-output { flex: 0 0 auto; height: 252px; display: flex; flex-direction: column; border-top: 1px solid var(--mlk-border-active); background-color: var(--mlk-canvas-sink); }
.cc-output-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 6px 14px; background-color: var(--mlk-panel); border-bottom: 1px solid var(--mlk-line); }
.cc-tabs { display: flex; gap: 2px; }
.cc-tab { padding: 5px 12px; background: transparent; border: 1px solid transparent; border-radius: var(--mlk-radius-sm); color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); cursor: pointer; }
.cc-tab.is-active { color: var(--mlk-tx-primary); border-color: var(--mlk-border-active); background-color: var(--mlk-canvas); font-weight: var(--mlk-fw-semibold); }
.cc-output-title { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-micro); font-family: var(--mlk-font-mono); }
.cc-output-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.cc-output-tools [hidden] { display: none; }
.cc-find { width: 150px; padding: 4px 8px; font-size: var(--mlk-fs-micro); }
.cc-output-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cc-out-pane { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 14px; font-family: var(--mlk-font-mono); }
.cc-out-pane[hidden] { display: none; }
#ccOutPaneOutput { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 12px; overflow: hidden; }
.cc-term { background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 8px 10px; min-height: 0; height: 100%; overflow: auto; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-primary); }
.cc-ln { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-snug); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--mlk-tx-primary); }
.cc-ln-err { color: var(--mlk-alert-error); }
.cc-ln-pass { color: var(--mlk-alert-pass); }
.cc-ln-warn { color: var(--mlk-alert-warn); }
.cc-ln-dim { color: var(--mlk-tx-disabled); }
.cc-ln-step { color: var(--mlk-accent); }
.cc-ln-hit { background-color: var(--mlk-accent-dim); }
.cc-paste-row { display: flex; flex-direction: column; gap: 6px; min-height: 0; font-family: var(--mlk-font-sans); }
.cc-paste-row .cc-term-input { flex: 1 1 auto; min-height: 48px; resize: none; }
.cc-paste-row .cc-toolbar { align-items: flex-start; }

/* ---- Manual page -------------------------------------------------------- */
.mn-wrap { width: 100%; max-width: var(--mlk-width-site); margin-inline: auto; padding: 28px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; flex: 1; }
.mn-toc { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; padding-inline-end: 8px; }
.mn-toc-title { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); letter-spacing: var(--mlk-ls-mono); text-transform: uppercase; margin-bottom: 8px; }
.mn-toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mn-toc a { display: block; padding: 4px 8px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); text-decoration: none; border-inline-start: 2px solid var(--mlk-line); }
.mn-toc a:hover { color: var(--mlk-tx-primary); border-color: var(--mlk-accent); }
.mn-toc .mn-l3 a { padding-inline-start: 20px; font-size: var(--mlk-fs-micro); }
.mn-body { min-width: 0; }
.mn-body h1 { font-size: var(--mlk-fs-hero); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-hero); line-height: var(--mlk-lh-tight); margin-bottom: 16px; }
.mn-body h2 { font-size: var(--mlk-fs-h2); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--mlk-line); }
.mn-body h3 { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); margin: 28px 0 10px; }
.mn-body h4 { font-size: var(--mlk-fs-badge); font-weight: var(--mlk-fw-semibold); margin: 20px 0 8px; }
.mn-body p, .mn-body li { color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); margin-bottom: 10px; font-size: var(--mlk-fs-body); }
.mn-body li > p { margin-bottom: 4px; }
.mn-body strong { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); }
.mn-body ul, .mn-body ol { padding-inline-start: 22px; margin-bottom: 12px; }
.mn-body code { font-family: var(--mlk-font-mono); font-size: 0.875em; background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 1px 5px; color: var(--mlk-tx-primary); overflow-wrap: anywhere; }
.mn-body pre { background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); padding: 14px; overflow-x: auto; margin-bottom: 14px; }
.mn-body pre code { background: none; border: none; padding: 0; font-size: var(--mlk-fs-small); white-space: pre; }
.mn-body blockquote { border-inline-start: 3px solid var(--mlk-accent); padding: 4px 14px; margin-bottom: 12px; color: var(--mlk-tx-secondary); }
.mn-body hr { border: none; border-top: 1px solid var(--mlk-line); margin: 24px 0; }
.mn-table { overflow-x: auto; margin-bottom: 14px; }
.mn-body table { border-collapse: collapse; width: 100%; font-size: var(--mlk-fs-small); }
.mn-body th, .mn-body td { text-align: start; vertical-align: top; padding: 8px 10px; border: 1px solid var(--mlk-line); color: var(--mlk-tx-secondary); }
.mn-body th { background-color: var(--mlk-panel); color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); }
.mn-note { color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-small); margin-bottom: 16px; }

/* ---- Two check-everything cards, parts, routines, review ------------------ */
.cc-card-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 10px; text-align: start; background-color: var(--mlk-canvas); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); color: var(--mlk-tx-primary); cursor: pointer; margin-bottom: 6px; }
.cc-card-btn strong { font-size: var(--mlk-fs-body); font-weight: var(--mlk-fw-semibold); }
.cc-card-btn small { color: var(--mlk-tx-secondary); font-size: var(--mlk-fs-micro); }
.cc-card-btn:hover { background-color: var(--mlk-panel-hover); }
.cc-card-btn.is-active { border-color: var(--mlk-accent); }
.cc-parts { width: 100%; border-collapse: collapse; font-size: var(--mlk-fs-small); }
.cc-parts th { text-align: start; padding: 6px 8px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-disabled); border-bottom: 1px solid var(--mlk-line); text-transform: uppercase; }
.cc-parts td { padding: 6px 8px; border-bottom: 1px solid var(--mlk-line); color: var(--mlk-tx-secondary); }
.cc-parts td:first-child { color: var(--mlk-tx-primary); width: 34%; }
.cc-parts td:last-child, .cc-parts th:last-child { text-align: end; }
.cc-parts tr[data-state="pass"] .cc-part-state { color: var(--mlk-alert-pass); }
.cc-parts tr[data-state="fail"] .cc-part-state { color: var(--mlk-alert-error); }
.cc-parts tr[data-state="ni"] .cc-part-state { color: var(--mlk-alert-warn); }
.cc-verdict { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 3px 9px; }
.cc-verdict[data-verdict="ready"] { color: var(--mlk-alert-pass); border-color: var(--mlk-alert-pass); }
.cc-verdict[data-verdict="not"] { color: var(--mlk-alert-error); border-color: var(--mlk-alert-error); }
.cc-verdict[data-verdict="partial"], .cc-verdict[data-verdict="provisional"] { color: var(--mlk-alert-warn); border-color: var(--mlk-alert-warn); }
.cc-your-checks { margin-top: 10px; border-top: 1px solid var(--mlk-line); padding-top: 8px; }
.cc-your-checks[hidden], .cc-score-note[hidden] { display: none; }
.cc-risk { display: inline-block; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 1px 8px; }
.cc-risk-system { color: var(--mlk-alert-error); border-color: var(--mlk-alert-error); }
.cc-risk-files, .cc-risk-unread { color: var(--mlk-alert-warn); border-color: var(--mlk-alert-warn); }
.cc-risk-network { color: var(--mlk-accent); border-color: var(--mlk-accent); }
.cc-risk-read { color: var(--mlk-alert-pass); border-color: var(--mlk-alert-pass); }
.cc-risk-tag { color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-micro); }
.cc-term-flat { height: auto; max-height: none; }
.cc-ln-actions { padding: 2px 0 6px; }
.cc-badge-info { align-self: flex-start; font-size: var(--mlk-fs-micro); color: var(--mlk-accent); border: 1px solid var(--mlk-accent); border-radius: var(--mlk-radius-sm); padding: 1px 7px; }
.cc-details { border-top: 1px solid var(--mlk-line); padding-top: 8px; margin-top: 6px; }
.cc-details summary { cursor: pointer; padding: 6px 0; font-weight: var(--mlk-fw-semibold); font-size: var(--mlk-fs-small); }
.cc-status-warn { color: var(--mlk-alert-warn); }
.cc-lib-tile.is-likely, .cc-profile { border-color: var(--mlk-accent); }
.cc-review { padding: 10px 12px; border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); background-color: var(--mlk-canvas-sink); margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.cc-review[hidden] { display: none; }
.cc-routine { display: flex; flex-direction: column; }

/* ---- Value history and Test integrity -- tokens only ---- */
.cc-val-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); }
.cc-val-swatch { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--mlk-border-active); vertical-align: middle; margin-inline-end: 6px; }
.cc-val-swatch-found { border-top-color: var(--mlk-alert-error); }
.cc-val-swatch-fixed { border-top-color: var(--mlk-alert-pass); }
.cc-val-swatch-open { border-top-color: var(--mlk-accent); }
.cc-chart-host { width: 100%; min-height: 230px; contain-intrinsic-size: auto 230px; }
.cc-chart { display: block; width: 100%; height: 230px; overflow: visible; }
.cc-chart-grid { stroke: var(--mlk-line); stroke-width: 1; shape-rendering: crispEdges; }
.cc-chart-text { fill: var(--mlk-tx-disabled); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); }
.cc-chart-start { fill: var(--mlk-tx-secondary); }
.cc-chart-line { fill: none; stroke: var(--mlk-border-active); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cc-chart-found { stroke: var(--mlk-alert-error); }
.cc-chart-fixed { stroke: var(--mlk-alert-pass); }
.cc-chart-open, .cc-chart-score { stroke: var(--mlk-accent); }
.cc-chart-dot { fill: var(--mlk-accent); stroke: var(--mlk-canvas); stroke-width: 1; }
.cc-chart-dot.is-partial { fill: var(--mlk-canvas); stroke: var(--mlk-alert-warn); stroke-width: 2; }
.cc-chart-dot.is-start { stroke: var(--mlk-tx-primary); stroke-width: 2; }
.cc-chart-dot.is-selected { fill: var(--mlk-tx-primary); stroke: var(--mlk-accent); stroke-width: 2; }
.cc-chart-dot.is-off { display: none; }
.cc-chart.is-pro .cc-chart-dot { cursor: pointer; }
.cc-val-run { display: block; width: 100%; text-align: start; padding: 8px 10px; background-color: var(--mlk-canvas); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); cursor: pointer; }
.cc-val-run:hover { border-color: var(--mlk-accent); }
.cc-val-run.is-selected { color: var(--mlk-tx-primary); border-color: var(--mlk-accent); }
.cc-val-run[hidden] { display: none; }
#ccValEmpty[hidden], #ccValBody[hidden], .cc-integ-rail[hidden] { display: none; }
.cc-integ-rail { border-top: 1px solid var(--mlk-line); padding-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cc-integ-rail .cc-rail-heading { margin-bottom: 0; color: var(--mlk-alert-error); }
.cc-integ-rail .cc-score-note { margin-top: 0; color: var(--mlk-tx-secondary); }
.cc-integ-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-inline-start: 3px solid var(--mlk-alert-warn); border-radius: var(--mlk-radius-sm); }
.cc-integ-row[hidden] { display: none; }
.cc-integ-row[data-state="suspicious"] { border-inline-start-color: var(--mlk-alert-error); background-color: var(--mlk-canvas-sink); }
.cc-integ-row[data-state="ok"], .cc-integ-row[data-state="restored"] { border-inline-start-color: var(--mlk-alert-pass); }
.cc-integ-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cc-integ-kind { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); }
.cc-integ-name { font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); overflow-wrap: anywhere; }
.cc-integ-state { margin-inline-start: auto; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-alert-warn); }
.cc-integ-row[data-state="suspicious"] .cc-integ-state { color: var(--mlk-alert-error); }
.cc-integ-row[data-state="ok"] .cc-integ-state, .cc-integ-row[data-state="restored"] .cc-integ-state { color: var(--mlk-alert-pass); }
.cc-integ-meta, .cc-integ-where { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); max-width: none; overflow-wrap: anywhere; }
.cc-integ-where[hidden] { display: none; }
.cc-integ-badge { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-alert-error); border: 1px solid var(--mlk-alert-error); border-radius: var(--mlk-radius-sm); padding: 1px 7px; }

/* ---- Restore preview and test snapshot -- tokens only ---- */
.cc-snap-row { display: flex; flex-direction: column; gap: 8px; }
.cc-snap-row[hidden], .cc-snap-offer[hidden], .cc-app .btn[hidden] { display: none; }
.cc-snap-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cc-events { white-space: pre-line; }
.cc-dialog { margin: auto; width: min(760px, 94vw); max-height: 92vh; overflow: auto; box-sizing: border-box; background-color: var(--mlk-panel); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); padding: 16px; }
.cc-dialog[open] { display: flex; flex-direction: column; gap: 10px; }
.cc-dialog::backdrop { background-color: var(--mlk-canvas); opacity: 0.8; }
.cc-restore-preview { flex: 0 0 auto; height: 300px; overflow: auto; background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 8px 10px; }
.cc-restore-preview[hidden] { display: none; }
.cc-restore-status { min-height: 2.6em; }
.cc-restore-preview .cc-ln { white-space: pre; overflow-wrap: normal; }
[dir="rtl"] :is(.mn-body pre, .cc-code-block, .cc-term, .cc-restore-preview) { direction: ltr; text-align: left; unicode-bidi: isolate; }
[dir="rtl"] :is(.mn-body code, .cc-step-cmd, .cc-lib-code, .cc-finding-loc, .cc-finding-snippet, .cc-term-input, .cc-fix-cmd-chip) { direction: ltr; unicode-bidi: isolate; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 1080px) {
  .cc-grid { grid-template-columns: 1fr; }
  .cc-rail-left, .cc-rail-right { border-inline: none; border-bottom: 1px solid var(--mlk-line); }
  .cc-rail-left { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .cc-rail-left .btn-block { width: auto; }
  .cc-rail-group { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .cc-nav-btn { width: auto; }
  .cc-rail-note { display: none; }
  .cc-panels { overflow: visible; padding: 14px; }
  .cc-output { height: auto; }
  #ccOutPaneOutput { display: flex; flex-direction: column; overflow: visible; }
  .cc-term { height: auto; min-height: 90px; max-height: 240px; }
  .cc-paste-row .cc-term-input { min-height: 80px; }
  .cc-toast { position: fixed; inset-block-start: auto; inset-block-end: 12px; inset-inline: 12px; max-width: none; }
  .mn-wrap { grid-template-columns: 1fr; padding: 18px; }
  .mn-toc { position: static; max-height: 260px; }
}

@media print {
  .cc-topbar, .cc-banner, .cc-rail-left, .cc-runline, .cc-output, .cc-progress-bar, .cc-toolbar, .cc-finding-actions, .cc-mini-btn, .cc-est-badge, .cc-est-tip, .mn-toc { display: none !important; }
  .cc-app { height: auto; overflow: visible; }
  .cc-grid { display: block; }
  .cc-body, .cc-stage, .cc-panels, .cc-subject-group, .cc-rule-group, .cc-finding-row, .mn-body { background-color: white !important; color: black !important; overflow: visible !important; }
}

/* RTL fix (Arabic): same rule for the Command Center labels (no letter spacing, sans stack with Arabic letters). */
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: normal !important; }
html[dir="rtl"] :is(.cc-mode-tag, .cc-rail-heading, .cc-subhead, .cc-field-label, .cc-grade-badge, .cc-verdict, .cc-risk, .cc-output-title, .cc-parts th, .mn-toc-title, .cc-integ-kind, .cc-integ-state, .cc-integ-badge) { font-family: var(--mlk-font-sans); text-transform: none; }

/* Desktop feature preview: desktop-only features stay visible but inactive, under the badge "Only in the desktop app". */
.cc-shop-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  max-width: none;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--mlk-border-active);
  border-radius: var(--mlk-radius-sm);
  background-color: var(--mlk-canvas-sink);
  font-size: var(--mlk-fs-small);
  color: var(--mlk-tx-secondary);
}
.is-desktop-only > :not(.cc-shop-note):not(.desktop-only-badge) { opacity: 0.5; filter: grayscale(1); user-select: none; }
tr.is-desktop-only > td { opacity: 1; filter: none; color: var(--mlk-tx-disabled); }
tr.is-desktop-only > td > :not(.desktop-only-badge) { opacity: 0.5; filter: grayscale(1); }
.is-desktop-only > .desktop-only-badge { margin-bottom: 6px; }
.is-desktop-only button:disabled,
.is-desktop-only input:disabled,
.is-desktop-only select:disabled,
.is-desktop-only textarea:disabled { cursor: not-allowed; }

/* Phones (under 768px): every Command Center control is at least 44px high, with room between them. */
@media (max-width: 767px) {
  .cc-mini-btn, .cc-nav-btn, .cc-tab, .cc-subj-btn, .cc-input, .cc-btn { min-height: 44px; }
  .cc-muted { font-size: 0.875rem; }
}