/* generated by Baerilog/tools/build.py - do not edit */
/* style.css - the shared visual language, and then Baerilog/simulator.html's own
   additions. Rules specific to the practice site live in practice.css. */
    /* =====================================================================
       The shared visual language for every app in this repo: GitHub's Primer,
       light and dark. This file is the source of truth and is inlined as the
       FIRST block of each app's <style> tag - byte for byte, checked by
       tools/check_theme.py, because the hand-paste convention had quietly rotted
       into four different variants before that check existed.

       Two token sets, and the split matters:

         page tokens    (--canvas-*, --fg-*, --border-*, --accent-*, ...)
                        redefined under prefers-color-scheme: dark, so every
                        light surface follows the reader's OS.

         panel tokens   (--panel-*) the SAME in both modes. The editors,
                        consoles, listings, register grids and memory tables are
                        dark either way - a dark code block on a light page, the
                        way GitHub renders one - so they must not flip. They use
                        GitHub's dark code colours rather than the page ones.

       Anything app-specific belongs in that app's own additions section below
       this block, never here.
       ===================================================================== */
    :root {
      /* Renders the browser's own chrome - form controls, scrollbars - for the
         active mode. Without it a number input keeps its light-mode look on a
         dark page, which is the one part of this CSS cannot reach. */
      color-scheme: light dark;

      --canvas-default: #ffffff;
      --canvas-subtle: #f6f8fa;
      --border-default: #d1d9e0;
      --border-muted: #d8dee4;
      --fg-default: #1f2328;
      --fg-muted: #59636e;
      --fg-on-emphasis: #ffffff;
      --accent-fg: #0969da;
      --accent-subtle: #ddf4ff;
      --success-fg: #1a7f37;
      --success-subtle: #dafbe1;
      --danger-fg: #cf222e;
      --danger-subtle: #ffebe9;
      --attention-fg: #9a6700;
      --btn-primary-bg: #1f883d;
      --btn-primary-hover: #1a7f37;
      --header-bg: #24292f;
      --header-fg: #ffffff;
      --header-muted: rgba(255, 255, 255, 0.7);
      --shadow-overlay: 0 8px 24px rgba(31, 35, 40, 0.2);
      --radius: 6px;
      --radius-lg: 12px;

      /* Dark panels, identical in both modes - GitHub's dark code colours. */
      --panel-bg: #0d1117;
      --panel-bg-alt: #161b22;
      --panel-bg-hi: #21262d;
      --panel-fg: #e6edf3;
      --panel-dim: #8b949e;
      --panel-line: #30363d;
      --panel-blue: #79c0ff;
      --panel-green: #7ee787;
      --panel-red: #ff7b72;
      --panel-yellow: #d29922;
      --panel-purple: #d2a8ff;

      /* The waveform trace colours, as ONE token holding the whole list: the
         renderers split it, so the palette lives here with every other colour
         rather than as eight tokens or a JS array. Primer's data colours. */
      --wave-palette: #0969da,#1a7f37,#9a6700,#cf222e,#8250df,#1b7c83,#bc4c00,#6e7781;

      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
                   Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                   "Liberation Mono", monospace;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --canvas-default: #0d1117;
        --canvas-subtle: #161b22;
        --border-default: #3d444d;
        --border-muted: #2f353d;
        --fg-default: #e6edf3;
        --fg-muted: #9198a1;
        --accent-fg: #4493f8;
        --accent-subtle: #121d2f;
        --success-fg: #3fb950;
        --success-subtle: #0f2417;
        --danger-fg: #f85149;
        --danger-subtle: #2d1214;
        --attention-fg: #d29922;
        --btn-primary-bg: #238636;
        --btn-primary-hover: #2ea043;
        --header-bg: #010409;
        --header-fg: #e6edf3;
        --header-muted: #9198a1;
        --shadow-overlay: 0 8px 24px rgba(1, 4, 9, 0.85);
        --wave-palette: #79c0ff,#7ee787,#d29922,#ff7b72,#d2a8ff,#56d4dd,#ffa657,#8b949e;
      }
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-sans);
      font-size: 14px;
      line-height: 1.5;
      background: var(--canvas-default);
      color: var(--fg-default);
      padding: 0 0 32px;
    }

    /* --- the header bar, on every app: dark in light mode too, as github.com's is --- */
    .gh-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--header-bg);
      color: var(--header-fg);
      border-bottom: 1px solid var(--border-default);
      margin-bottom: 24px;
    }
    .gh-header-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .gh-mark {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--header-fg);
      text-decoration: none;
      font-weight: 600;
      flex-shrink: 0;
    }
    /* The bae wordmark is 2.21:1, so it is sized by HEIGHT with the width left to
       follow - the old placeholder mark was square, and giving this one a square box
       squashes it.

       The invert is UNCONDITIONAL, and that is not a shortcut: --header-bg is
       #24292f in light mode and #010409 in dark, so this bar is dark in BOTH and the
       black artwork has to become white in both. Putting the filter inside a
       prefers-color-scheme block - the obvious reading of "invert it when the
       background is dark" - would leave the logo black on a dark bar in light mode.
       Anywhere the logo lands on a light surface, drop the filter rather than
       adding a query here. */
    .gh-mark svg { height: 18px; width: auto; filter: invert(1); }
    .gh-nav { display: flex; gap: 14px; margin-left: auto; font-size: 13px; flex-wrap: wrap; }
    .gh-nav a { color: var(--header-muted); text-decoration: none; }
    .gh-nav a:hover { color: var(--header-fg); }
    .gh-nav a.here { color: var(--header-fg); font-weight: 600; }

    h1 {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--fg-default);
    }
    h1 a { color: inherit; text-decoration: none; }
    h1 a:hover { text-decoration: underline; }
    .subtitle {
      text-align: center;
      font-size: 13px;
      color: var(--fg-muted);
      margin-bottom: 24px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }
    /* Primer's Box: a 1px edge instead of a shadow, 6px corners. */
    .card {
      background: var(--canvas-default);
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      padding: 0 16px 16px;
    }
    .card.full { grid-column: 1 / -1; }
    /* The h2 is the Box header, so it escapes the card's own padding. */
    .card h2 {
      font-size: 14px;
      font-weight: 600;
      color: var(--fg-default);
      background: var(--canvas-subtle);
      border-bottom: 1px solid var(--border-default);
      border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
      margin: 0 -16px 12px;
      padding: 10px 16px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .card-collapse-btn {
      cursor: pointer;
      font-size: 8px;
      font-weight: 600;
      color: var(--fg-muted);
      user-select: none;
      flex-shrink: 0;
      margin-right: 6px;
      width: 14px;
      height: 14px;
      border: 1px solid var(--border-default);
      border-radius: 3px;
      background: var(--canvas-default);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .card-collapse-btn:hover { border-color: var(--fg-muted); color: var(--fg-default); }
    .card.collapsed > *:not(:first-child) { display: none !important; }
    /* A collapsed card is its header and nothing else, so the header keeps all
       four corners and the empty space below it goes away. */
    .card.collapsed { padding-bottom: 0; }
    .card.collapsed h2 {
      margin-bottom: 0;
      border-bottom: none;
      border-radius: calc(var(--radius) - 1px);
    }
    .header-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }
    .layout-toggle {
      display: flex;
      gap: 4px;
    }
    .layout-btn {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 20px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      color: var(--fg-muted);
      background: var(--canvas-default);
    }
    .layout-btn:hover { border-color: var(--fg-muted); color: var(--fg-default); }
    .layout-btn.active { border-color: var(--accent-fg); color: var(--accent-fg); }
    .layout-btn svg { width: 13px; height: 13px; display: block; }
    .grid.stack-editor-console .layout-pair { grid-column: 1 / -1; }
    .card p {
      font-size: 12px;
      color: var(--fg-muted);
      margin-bottom: 14px;
    }
    canvas { width: 100% !important; }
    .legend-row {
      display: flex;
      gap: 18px;
      justify-content: center;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--fg-default);
    }
    .dot {
      width: 10px; height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .badge-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    /* Primer's Label. */
    .badge {
      background: var(--canvas-subtle);
      border: 1px solid var(--border-muted);
      border-radius: 2em;
      padding: 3px 11px;
      font-size: 12px;
      color: var(--fg-muted);
    }
    .badge span { font-weight: 600; color: var(--fg-default); }
    .badge.error span { color: var(--danger-fg); }

    /* --- toolbar groups (zoom controls, range inputs) --- */
    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--canvas-subtle);
      border: 1px solid var(--border-muted);
      border-radius: var(--radius);
      padding: 5px 8px;
    }
    .toolbar-group .btn.secondary { background: var(--canvas-default); }
    .toolbar-group .btn.secondary:hover { background: var(--border-muted); }
    .toolbar-group .num-input { background: var(--canvas-default); width: 84px; }
    .icon-btn { padding: 5px 10px; font-weight: 600; }
    .zoom-level {
      font-size: 11px;
      color: var(--fg-muted);
      font-variant-numeric: tabular-nums;
      min-width: 40px;
      text-align: center;
    }
    .num-input.error { border-color: var(--danger-fg); box-shadow: 0 0 0 2px var(--danger-subtle) inset; }

    /* --- the (?) help popover on a card header ---
       Shared because every card uses it now: a card's title carries a ? and the
       detail lives behind it, rather than as a paragraph above the content. The
       popup is a dark panel in BOTH colour modes, like the other inset surfaces,
       and `white-space: nowrap` is what stops it wrapping mid-phrase - which is why
       its content is written as one fact per line rather than as prose. The handler
       is generic (any .help-icon toggles its nextElementSibling), so nothing here
       is per-card. --- */
    .help-wrap {
      position: relative;
      display: inline-flex;
    }
    .help-icon {
      cursor: pointer;
      font-size: 9px;
      font-weight: 700;
      color: var(--fg-muted);
      user-select: none;
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      border: 1px solid var(--fg-muted);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
    }
    .help-icon:hover { border-color: var(--fg-default); color: var(--fg-default); }
    .help-popup {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 6px;
      width: max-content;
      max-width: 480px;
      background: var(--panel-bg);
      color: var(--panel-fg);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.5;
      padding: 8px 10px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      z-index: 10;
      cursor: default;
    }
    /* One <div> per fact, wrapping, with a hanging indent so a line that runs on
       aligns under its own text and not under the bullet. The rule this replaced was
       `white-space: nowrap`, which suited synthesis's short lines and made any longer
       one overflow the box and render OUTSIDE the dark background. */
    .help-popup > div { padding-left: 11px; text-indent: -11px; }
    .help-popup > div + div { margin-top: 3px; }
    .help-popup.visible { display: block; }

    /* --- radix picker popup for waveform value column --- */
    .radix-popup {
      position: fixed;
      display: none;
      background: var(--canvas-default);
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      padding: 8px;
      font-size: 12px;
      box-shadow: var(--shadow-overlay);
      z-index: 1000;
      min-width: 130px;
    }
    .radix-popup-title {
      font-weight: 600;
      font-size: 12px;
      color: var(--fg-default);
      padding: 4px 8px 6px;
    }
    .radix-opt {
      padding: 6px 8px;
      border-radius: var(--radius);
      color: var(--fg-default);
      cursor: pointer;
    }
    .radix-opt:hover { background: var(--canvas-subtle); }
    .radix-opt.selected {
      color: var(--accent-fg);
      border: 1px solid var(--accent-fg);
      font-weight: 600;
    }

    /* --- module hierarchy browser card (sits left of the waveform/netlist viewer) --- */
    .split-row {
      grid-column: 1 / -1;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .split-row > .card:first-child { flex: 0 0 220px; width: 220px; }
    .split-row > .card:last-child { flex: 1 1 auto; min-width: 0; }
    .split-row.hierarchy-collapsed > .card:first-child { display: none; }
    .hierarchy-tree { font-size: 12px; }
    .hierarchy-node-row {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 6px;
      border-radius: var(--radius);
      cursor: pointer;
      color: var(--fg-default);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hierarchy-node-row:hover { background: var(--canvas-subtle); }
    .hierarchy-node-row.active { background: var(--accent-subtle); color: var(--accent-fg); font-weight: 600; }
    .hierarchy-node-type { color: var(--fg-muted); font-size: 10px; font-family: var(--font-mono); }
    .hierarchy-fold-box {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-default);
      border-radius: 3px;
      color: var(--fg-muted);
      font: 700 12px/1 var(--font-mono);
      cursor: pointer;
    }
    .hierarchy-fold-box:hover { border-color: var(--fg-muted); color: var(--fg-default); }
    .hierarchy-fold-spacer { flex-shrink: 0; width: 14px; height: 14px; }
    .hierarchy-node-icon {
      width: 13px;
      height: 13px;
      color: var(--fg-muted);
      flex-shrink: 0;
    }
    .hierarchy-children { margin-left: 12px; border-left: 1px solid var(--border-default); padding-left: 6px; }

              /* --- additions for editor / console / waveform, same visual language --- */
    /* Expand: the waveform row breaks out of .grid's max-width to the full body
       content width, leaving every other card centred at 1100px. This is an
       app-specific rule and stays out of style.css even though .split-row itself
       lives there, since only this app has the control. --wave-bleed is set from
       MEASURED geometry rather than the usual calc(50% - 50vw) trick, because
       100vw includes the vertical scrollbar - which on any platform with classic
       (non-overlay) scrollbars makes the row wider than the body's content box
       and pops a horizontal scrollbar the moment you expand.
       document.documentElement.clientWidth excludes it. */
    .split-row.wave-expanded {
      margin-left: calc(-1 * var(--wave-bleed, 0px));
      margin-right: calc(-1 * var(--wave-bleed, 0px));
    }
    .hierarchy-node-row.off { color: var(--border-muted); }
    .hierarchy-node-row.off .hierarchy-node-icon { color: var(--border-muted); }
    .hierarchy-signal-list { margin-left: 15px; padding: 2px 0 4px; }
    .hierarchy-signal-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 6px;
      border-radius: 4px;
      font-size: 11px;
      color: var(--fg-default);
      cursor: pointer;
      user-select: none;
    }
    .hierarchy-signal-item:hover { background: var(--canvas-subtle); }
    .hierarchy-signal-item.off { color: var(--border-muted); }
    .hierarchy-signal-icon { width: 16px; height: 10px; flex-shrink: 0; color: var(--fg-default); }
    .hierarchy-signal-item.off .hierarchy-signal-icon { color: var(--border-muted); opacity: 0.4; }
    .toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    select, .btn, .num-input {
      font-family: inherit;
      font-size: 12px;
      border: none;
      border-radius: 8px;
      padding: 7px 12px;
      background: var(--canvas-subtle);
      color: var(--fg-default);
      cursor: pointer;
    }
    select { flex: 1 1 auto; min-width: 120px; }
    .num-input { width: 64px; cursor: text; text-align: center; }
    .btn {
      background: var(--btn-primary-bg);
      color: var(--fg-on-emphasis);
      font-weight: 600;
      transition: background 0.15s ease;
    }
    .btn:hover { background: var(--btn-primary-hover); }
    .btn.secondary { background: var(--canvas-subtle); color: var(--fg-default); }
    .btn.secondary:hover { background: var(--border-default); }
    .btn.outline { background: var(--canvas-default); color: var(--accent-fg); border: 1.5px solid var(--accent-fg); }
    .btn.outline:hover { background: var(--accent-subtle); }
    .btn:disabled { background: var(--border-muted); cursor: default; }
    .time-label { font-size: 12px; color: var(--fg-muted); margin-right: -2px; }

    .editor-wrap {
      display: flex;
      background: var(--panel-bg);
      border-radius: var(--radius);
      overflow: hidden;
      height: 360px;
    }
    .gutter {
      flex-shrink: 0;
      width: 38px;
      padding: 12px 6px 12px 0;
      text-align: right;
      font: 12px/1.55 "SF Mono", Menlo, Consolas, monospace;
      color: var(--panel-dim);
      background: var(--panel-bg-alt);
      overflow: hidden;
      user-select: none;
      white-space: pre;
    }
    textarea#codeInput {
      flex: 1 1 auto;
      resize: none;
      border: none;
      outline: none;
      background: transparent;
      color: var(--border-default);
      font: 12px/1.55 "SF Mono", Menlo, Consolas, monospace;
      padding: 12px 12px 12px 8px;
      tab-size: 2;
      white-space: pre;
      overflow: auto;
    }
    .editor-hierarchy-row {
      display: flex;
      gap: 10px;
      align-items: stretch;
    }
    .editor-hierarchy-row .editor-wrap { flex: 1 1 auto; min-width: 0; }
    .editor-hierarchy-panel {
      flex: 0 0 150px;
      width: 150px;
      background: var(--panel-bg-alt);
      border-radius: var(--radius);
      padding: 6px;
      overflow-y: auto;
      font: 12px "SF Mono", Menlo, Consolas, monospace;
    }
    .editor-hierarchy-row.hierarchy-collapsed .editor-hierarchy-panel { display: none; }
    .editor-module-row {
      padding: 5px 8px;
      border-radius: 6px;
      color: var(--fg-muted);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .editor-module-row:hover { background: var(--panel-bg-hi); color: var(--panel-fg); }
    .editor-module-row.active { background: var(--panel-bg-hi); color: var(--panel-blue); font-weight: 600; }
    .editor-sync-warning {
      font-size: 12px;
      color: var(--panel-red);
      margin-bottom: 12px;
    }
    .console-box {
      height: 360px;
      overflow-y: auto;
      background: var(--panel-bg);
      border-radius: var(--radius);
      padding: 12px 14px;
      font: 12px/1.6 "SF Mono", Menlo, Consolas, monospace;
      color: var(--panel-green);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .console-box .err { color: var(--panel-red); }
    .console-box .info { color: var(--panel-dim); }
    .console-box .time-tag { color: var(--panel-blue); }

    #waveScroll { overflow-x: auto; border-radius: var(--radius); }
    /* touch-action: pan-y leaves vertical page scrolling to the browser while
       reserving horizontal gestures for the swipe-to-scroll / drag-to-zoom
       handlers below - without it the browser would pan the page instead. */
    canvas#waveCanvas { display: block; background: var(--canvas-default); touch-action: pan-y; }
    .wave-empty {
      font-size: 12px;
      color: var(--fg-muted);
      text-align: center;
      padding: 40px 0;
    }
    .wave-tooltip {
      position: fixed;
      display: none;
      background: var(--panel-bg);
      color: var(--panel-fg);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-family: "SF Mono", Menlo, Consolas, monospace;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      z-index: 1001;
      pointer-events: none;
      white-space: nowrap;
    }

    /* --- CPU / memory model card ---
       The register block fills COLUMN-major in FOUR groups of eight (r0-r7,
       r8-r15, r16-r23, r24-r31), each group carrying its own "Expected | DUT"
       header. Under grid-auto-flow: column it is the ROW count that drives the
       wrap - the same trap verify/index.html and the emulator's register grid
       both document - so the template is 9 rows (header + 8) by 4 columns, and
       changing either count means changing the other.

       pc/sp/sreg live in a SEPARATE container below rather than as more grid
       items: they span the full width, and a 37th item in a 4x9 grid would start
       a fifth column instead. The two containers share a rounded frame between
       them (12px on the top corners, 12px on the bottom). */
    .model-bind {
      font: 11px/1.7 "SF Mono", Menlo, Consolas, monospace;
      color: var(--fg-default);
      background: var(--canvas-subtle);
      border-radius: var(--radius);
      padding: 8px 12px;
      margin-bottom: 12px;
    }
    .model-bind b { color: var(--fg-default); font-weight: 600; }
    .model-bind .miss { color: var(--danger-fg); }
    .model-bind .alias { color: var(--fg-muted); }
    .model-verdict {
      font-size: 12px;
      border-radius: var(--radius);
      padding: 10px 12px;
      margin-bottom: 12px;
      background: var(--canvas-subtle);
      color: var(--fg-default);
    }
    .model-verdict.pass { background: var(--success-subtle); color: var(--success-fg); }
    .model-verdict.fail { background: var(--danger-subtle); color: var(--danger-fg); }
    .model-verdict b { font-weight: 600; }
    .model-verdict .mono { font-family: "SF Mono", Menlo, Consolas, monospace; }
    .compare-grid {
      display: grid; grid-auto-flow: column;
      grid-template-rows: repeat(9, auto); grid-template-columns: repeat(4, 1fr);
      gap: 1px; background: var(--panel-bg); border-radius: var(--radius) 12px 0 0; overflow: hidden;
      font: 12px/1.6 "SF Mono", Menlo, Consolas, monospace;
    }
    /* Half width cannot hold four groups, so it becomes two of sixteen - and the
       row count has to move with the column count or the items keep flowing
       9-per-column and the arrangement is silently wrong. */
    .card:not(.full) .compare-grid { grid-template-rows: repeat(17, auto); grid-template-columns: repeat(2, 1fr); }
    .cmp-row { display: grid; grid-template-columns: 4ch 1fr 3.5ch; gap: 8px; padding: 3px 12px; background: var(--panel-bg-alt); }
    .cmp-row .rn { color: var(--panel-blue); }
    .cmp-row .rv { color: var(--panel-fg); text-align: right; }
    .cmp-row .rv.ref { color: var(--panel-dim); }
    .cmp-row.hdr { background: var(--panel-bg); color: var(--panel-dim); font-size: 11px; }
    .cmp-row.hdr .rv { color: var(--panel-dim); }
    /* changed by this instruction - the same "about to be written" green the
       other apps use for a pending write */
    .cmp-row.chg { background: var(--panel-bg-hi); }
    .cmp-row .was { color: var(--panel-dim); }
    .cmp-row .now { color: var(--panel-green); }
    .cmp-row.diff { background: rgba(255,59,48,0.22); }
    .cmp-row.diff .rv, .cmp-row.diff .rv.ref, .cmp-row.diff .now { color: var(--panel-red); font-weight: 700; }
    .compare-foot {
      background: var(--panel-bg); border-radius: 0 0 12px 12px; overflow: hidden;
      font: 12px/1.6 "SF Mono", Menlo, Consolas, monospace;
      border-top: 1px solid var(--panel-line);
    }
    .cmp-foot { display: grid; grid-template-columns: 6ch 1fr 8ch; gap: 8px; padding: 3px 12px; background: var(--panel-bg-alt); }
    .cmp-foot + .cmp-foot { border-top: 1px solid var(--panel-bg); }
    .cmp-foot .rn { color: var(--panel-blue); }
    .cmp-foot .rv { color: var(--panel-fg); text-align: center; }
    .cmp-foot .rv.ref { color: var(--panel-dim); text-align: right; }
    .cmp-foot .was { color: var(--panel-dim); }
    .cmp-foot .now { color: var(--panel-green); }
    .cmp-foot.diff { background: rgba(255,59,48,0.22); }
    .cmp-foot.diff .rv, .cmp-foot.diff .rv.ref, .cmp-foot.diff .now { color: var(--panel-red); font-weight: 700; }
    /* a flag letter: uppercase and bright when set, lowercase and dim when clear -
       two encodings of one bit, so the row survives greyscale and colour blindness */
    .flag { color: var(--fg-default); }
    .flag.on { color: var(--border-default); }
    .cmp-foot.diff .flag { color: var(--panel-red); }
    .cmp-foot.diff .flag.on { color: var(--panel-red); font-weight: 700; }

    /* --- memory viewer card --- */
    .mem-radix-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--fg-default);
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }
    .mem-radix-toggle input { cursor: pointer; }
    .mem-file-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .mem-file-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--canvas-subtle);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--fg-default);
    }
    .mem-file-chip .mem-file-remove {
      cursor: pointer;
      color: var(--fg-muted);
      font-weight: 700;
    }
    .mem-file-chip .mem-file-remove:hover { color: var(--danger-fg); }
    .memory-table-wrap {
      max-height: 320px;
      overflow-y: auto;
      border-radius: var(--radius);
      background: var(--panel-bg);
    }
    table.memory-table {
      width: 100%;
      border-collapse: collapse;
      font: 12px/1.6 "SF Mono", Menlo, Consolas, monospace;
      color: var(--border-default);
    }
    table.memory-table th {
      position: sticky;
      top: 0;
      background: var(--panel-bg-alt);
      text-align: left;
      padding: 6px 12px;
      color: var(--panel-dim);
      font-weight: 600;
    }
    table.memory-table td {
      padding: 4px 12px;
      border-top: 1px solid var(--panel-bg-hi);
    }
    table.memory-table td.mem-addr { color: var(--accent-fg); }
    table.memory-table td.mem-hint { color: var(--fg-muted); }

    @media (max-width: 760px) {
      .grid { grid-template-columns: 1fr; }
    }
    .footer {
      text-align: center;
      font-size: 12px;
      color: var(--fg-muted);
      margin-top: 24px;
    }
    .footer a { color: var(--fg-muted); text-decoration: none; }
    .footer a:hover { color: var(--accent-fg); }