/* Light theme tuned for projector readability:
   - Near-white background, near-black text (strong contrast)
   - Accents: deep blue (interactive), forest green (safe), crimson (unsafe)
   - Avoid pure white / pure black, which can look washed-out on projectors.
*/
:root {
  --bg:        #fbfbfa;
  --bg-2:      #ffffff;
  --bg-3:      #f1f3f5;
  --bg-code:   #fdfaf2;       /* warm parchment-y editor background  */
  --fg:        #1a1d23;
  --fg-dim:    #5b6573;
  --fg-faint:  #8b94a3;
  --border:    #d5dae2;
  --border-2:  #b8bfc9;

  /* ---- Okabe-Ito palette (color-vision-deficiency friendly) ------
     These eight hues remain pairwise distinct in deuteranopia,
     protanopia, and tritanopia. We use them everywhere a status or
     state distinction matters. https://jfly.uni-koeln.de/color/ */
  --ok-blue:      #0072B2;
  --ok-orange:    #E69F00;
  --ok-bluegreen: #009E73;
  --ok-vermillion:#D55E00;
  --ok-purple:    #CC79A7;
  --ok-skyblue:   #56B4E9;
  --ok-yellow:    #F0E442;

  /* Run A / Run B are the canonical Okabe-Ito 2-category pair
     (blue + orange) — the most CVD-distinguishable two colors. */
  --accent:    var(--ok-blue);    /* Run A */
  --accent-b:  var(--ok-orange);  /* Run B */

  /* Status / event hues — all CVD-safe */
  --bad:       var(--ok-vermillion);
  --warn:      var(--ok-orange);
  --good:      var(--ok-bluegreen);

  /* Syntax-highlight palette */
  --hl-comment:  #6a737d;
  --hl-keyword:  #8a1d3b;
  --hl-builtin:  var(--ok-blue);
  --hl-const:    var(--ok-vermillion);
  --hl-number:   var(--ok-bluegreen);
  --hl-ident:    #1a1d23;
  --hl-op:       var(--ok-purple);
  --hl-punct:    #4a4f57;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  --shadow-card: 0 1px 2px rgba(20,28,40,0.04), 0 1px 3px rgba(20,28,40,0.06);
  --shadow-edit: inset 0 0 0 1px var(--border);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

/* ===== Top bar ===== */
.topbar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 24px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.topbar h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
  color: var(--fg);
}
.subtitle { color: var(--fg-dim); font-size: 14px; }
.spacer { flex: 1; }
.repo-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.repo-link:hover { text-decoration: underline; }

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 24px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* ===== Program section ===== */
.program {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.program-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.program-head label { color: var(--fg-dim); font-size: 13px; }
.example-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: var(--bg-3);
  color: var(--fg-dim);
  border: 1px solid var(--border);
}
/* Example tag — symbols carry the meaning ("✗", "✓", "i"), so the
   colour can be lost without losing the signal. */
.example-tag.unsafe { color: #fff; background: var(--bad);    border-color: var(--bad);    }
.example-tag.unsafe::before { content: "✗ "; }
.example-tag.safe   { color: #fff; background: var(--good);   border-color: var(--good);   }
.example-tag.safe::before   { content: "✓ "; }
.example-tag.info   { color: #fff; background: var(--accent); border-color: var(--accent); }
.example-tag.info::before   { content: "ⓘ "; }

/* ===== Form controls ===== */
select, input[type="number"] {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
}
select:focus, input[type="number"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
input[type="number"] { width: 5.5em; }

button {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
button:hover { border-color: var(--accent); }
button.primary {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-color: var(--accent);
  padding: 8px 18px;
  font-size: 14px;
}
button.primary:hover { filter: brightness(1.08); }
button.ghost {
  background: transparent;
  color: var(--fg-dim);
  border-color: transparent;
}
button.ghost:hover { color: var(--fg); background: var(--bg-3); }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ===== Code editor =================================================
   Textarea-over-pre overlay: an absolutely-positioned <pre> shows the
   syntax-highlighted version of the source; the <textarea> sits on top
   with transparent text (only the caret/selection are visible). For
   this to work cross-browser, every box-affecting CSS property must be
   IDENTICAL between the two elements: font, line-height, padding,
   border, white-space, tab-size, letter-spacing, word-break. */
.editor-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-code);
  overflow: hidden;
  position: relative;
}

.code-editor {
  position: relative;
  isolation: isolate;       /* fresh stacking context — Safari z-index safety */
  /* Font metrics are set here and inherited by both children */
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  -moz-tab-size: 2;
  tab-size: 2;
  letter-spacing: 0;
}

.code-editor pre.highlight,
.code-editor textarea#source {
  /* Safari resets form-element fonts; set them explicitly. */
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0;
  -moz-tab-size: 2;
  tab-size: 2;
  /* Same box model */
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 14px 16px;
  /* Same wrapping behaviour */
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  width: 100%;
  min-height: 240px;
}

.code-editor pre.highlight {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: auto;
  color: var(--hl-ident);
  background: transparent;
  pointer-events: none;
  /* Keep the pre underneath the textarea visually */
  z-index: 1;
}
.code-editor pre.highlight code {
  /* code element inside <pre> must not add its own font/padding */
  font: inherit;
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
  display: block;
}

.code-editor textarea#source {
  position: relative;
  display: block;
  background: transparent;
  /* Make the typed text invisible; the <pre> renders the colored version.
     Both color and -webkit-text-fill-color are needed for full coverage. */
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--fg);
  resize: vertical;
  outline: none;
  z-index: 2;
}
/* Selection: show a tinted block but keep the underlying glyph invisible
   so we don't double up over the highlighted <pre> below. */
.code-editor textarea#source::selection {
  background: rgba(31, 91, 215, 0.22);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.code-editor textarea#source::-moz-selection {
  background: rgba(31, 91, 215, 0.22);
  color: transparent;
}
/* If for any reason the highlight overlay is missing or empty, fall back
   to showing the textarea text directly (defensive). */
.code-editor.no-highlight textarea#source {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
}

/* Syntax highlight token classes */
.tok-comment { color: var(--hl-comment); font-style: italic; }
.tok-keyword { color: var(--hl-keyword); font-weight: 600; }
.tok-builtin { color: var(--hl-builtin); font-weight: 600; }
.tok-const   { color: var(--hl-const);   font-weight: 600; }
.tok-number  { color: var(--hl-number); }
.tok-op      { color: var(--hl-op); }
.tok-punct   { color: var(--hl-punct); }
.tok-ident   { color: var(--hl-ident); }

/* ===== Explanation panel ===== */
.explanation {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.explanation h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.explanation p, .explanation li {
  font-size: 13.5px;
  color: var(--fg);
  margin: 6px 0;
}
.explanation strong { color: var(--fg); font-weight: 600; }
.explanation em     { color: var(--fg); font-style: italic; }
.explanation code {
  font-family: var(--mono);
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 0px 5px;
  border-radius: 3px;
  font-size: 12.5px;
  color: var(--fg);
}

/* ===== Run panes ===== */
.runs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;   /* panes keep their own natural height */
}
@media (max-width: 900px) { .runs { grid-template-columns: 1fr; } }

.run {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-card);
  align-content: start; /* inner rows keep their content height */
}
.run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.run-label {
  font-weight: 700;
  letter-spacing: 0.6px;
  background: var(--accent);
  color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11.5px;
}
.run[data-side="B"] .run-label { background: var(--accent-b); }
.run-head label {
  color: var(--fg-dim);
  font-size: 12.5px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.run-button {
  align-self: start;
  padding: 7px 16px;
  font-weight: 600;
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}
.run-button:hover { background: var(--accent); color: #fff; }
.run[data-side="B"] .run-button {
  border-color: var(--accent-b);
  color: #8a5500;          /* darker orange for AA contrast on white */
}
.run[data-side="B"] .run-button:hover {
  background: var(--accent-b);
  color: #fff;
}
/* Run-B label badge: orange background needs dark text for AA contrast */
.run[data-side="B"] .run-label {
  background: var(--accent-b);
  color: #2a1c00;
}
/* Event colors: each event tag in a distinct CVD-safe hue */
.events li.cast  { color: var(--ok-purple); }
.events li.mfail { color: var(--bad);   font-weight: 600; }
/* malloc (--good, bluish green) and observe (--accent, blue) stay as-is */

.output {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-code);
  padding: 12px 14px;
  min-height: 170px;
  font-family: var(--mono);
  font-size: 12.8px;
  color: var(--fg);
}
.status {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.2px;
}
.status[data-empty="true"] {
  color: var(--fg-faint);
  font-style: italic;
  font-weight: 400;
}
.status.error { color: var(--bad);  }
.status.ok    { color: var(--good); }
.status.error::before { content: "\2717\00a0 "; }
.status.ok::before    { content: "\2713\00a0 "; }
.result { margin-top: 6px; color: var(--fg); }
.result.empty { display: none; }
.events {
  margin: 10px 0 0 0;
  padding-left: 22px;
  color: var(--fg-dim);
}
.events li { padding: 2px 0; }
.events li.observe { color: var(--accent);   font-weight: 600; }
.events li.malloc  { color: var(--good); }
.events li.mfail   { color: var(--warn); }
.events li.free    { color: var(--fg-dim); }
.events li.cast    { color: var(--accent-b); }

/* ===== Run buttons ===== */
.run-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;  /* don't let buttons stretch vertically */
}
.run-buttons button { align-self: center; }

/* ===== Stepper UI ===== */
.stepper {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}
/* The HTML `hidden` attribute is overridden by our `display: grid` —
   restore the standard behaviour explicitly. */
.stepper[hidden] { display: none; }
.stepper-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stepper-controls button {
  padding: 4px 9px;
  font-size: 13px;
  min-width: 30px;
}
.step-counter {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  padding: 0 6px;
  min-width: 70px;
  text-align: center;
}
.step-desc {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 10px;
  color: var(--fg);
  min-height: 1.5em;
  word-break: break-word;
}
.step-desc.error {
  color: var(--bad);
  border-color: var(--bad);
  background: #fff5f5;
}
.step-desc.done {
  color: var(--good);
  border-color: var(--good);
  background: #f3fbf6;
}

.step-panels {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2.2fr;
  gap: 10px;
}
@media (max-width: 700px) { .step-panels { grid-template-columns: 1fr; } }

.panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Variables table */
.vars-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
}
.vars-table th, .vars-table td {
  padding: 3px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.vars-table th {
  font-weight: 600;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vars-table tr:last-child td { border-bottom: none; }
.vars-table .v-addr  { color: var(--fg-dim); width: 4.5em; }
.vars-table .v-value { color: var(--accent); font-weight: 600; }
.vars-table .v-value.inaccessible { color: var(--bad); font-style: italic; font-weight: 500; }

/* Heap grid: each cell is addr:value */
.heap-legend {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-dim);
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Keep each swatch + label pair together on one line. */
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
/* Heap-cell visual language ----------------------------------------
   Each cell encodes up to three independent signals; we use a
   different visual channel for each so a single-channel impairment
   (color blindness) still leaves the message readable:
     1. Persistent state  →  background hue + glyph in the cell
     2. This-step change  →  thick coloured outline + ▲/▽ corner mark
     3. Variable binding  →  named label next to the value
   Colors are drawn from the Okabe-Ito palette. */
.cell-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--border-2);
  position: relative;
  text-align: center;
  font-size: 10px;
  line-height: 12px;
  flex-shrink: 0;
}
/* All glyphs below are chosen from Latin-1 / common Unicode ranges that
   render in the same monospace font as the surrounding text (no font
   fallback). */
.sw-accessible   { background: var(--bg-code); }
.sw-inaccessible { background: #fbe6e0; border-color: var(--ok-vermillion); color: var(--ok-vermillion); }
.sw-inaccessible::before { content: "×"; font-weight: 700; }
.sw-null         { background: #f6e6f1; border-color: var(--ok-purple); color: var(--ok-purple); }
.sw-null::before { content: "ø"; font-weight: 700; }
.sw-read         { background: var(--bg-code); border-style: dashed; border-color: var(--ok-skyblue); }
.sw-read::before { content: "·"; color: var(--ok-skyblue); font-weight: 700; line-height: 10px; }
.sw-written      { background: #fff; border: 2px solid var(--ok-bluegreen); color: var(--ok-bluegreen); line-height: 10px; }
.sw-written::before { content: "↑"; font-weight: 700; }
.sw-cleared      { background: #fff; border: 2px solid var(--ok-orange); color: var(--ok-orange); line-height: 10px; }
.sw-cleared::before { content: "↓"; font-weight: 700; }
.sw-alloc        { background: #e0f1fb; border-color: var(--ok-skyblue); color: var(--ok-skyblue); }
.sw-alloc::before { content: "+"; font-weight: 700; }

.heap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  max-height: 240px;
  overflow-y: auto;
}
.heap-cell {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  padding: 3px 6px;
  background: var(--bg-code);
  white-space: nowrap;
  display: flex;
  gap: 4px;
  align-items: baseline;
  min-height: 22px;
}
.heap-cell .addr,
.heap-cell .value,
.heap-cell .name  {
  /* Force the same monospace font for every span — Latin-1 glyphs
     (× ø ↑ ↓ + ·) inherit it cleanly and don't fall back. */
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.heap-cell .addr  { color: var(--fg-dim); font-size: 10.5px; min-width: 1.8em; }
.heap-cell .value { color: var(--fg); font-weight: 600; }
.heap-cell .name  { color: var(--accent); font-size: 10px; margin-left: auto;
                    font-weight: 600; letter-spacing: 0.3px; }

/* Persistent state */
.heap-cell.inaccessible {
  background: #fbe6e0;
  border-color: var(--ok-vermillion);
}
.heap-cell.inaccessible .value {
  color: var(--ok-vermillion);
  font-style: italic;
}
.heap-cell.is-null {
  background: #f6e6f1;
  border-color: var(--ok-purple);
}
.heap-cell.is-null .value { color: var(--ok-purple); }

/* This-step change: thick outline + corner glyph */
.heap-cell.written  { outline: 2px solid var(--ok-bluegreen); outline-offset: -1px; }
.heap-cell.cleared  { outline: 2px solid var(--ok-orange);    outline-offset: -1px; }
.heap-cell.written::after,
.heap-cell.cleared::after,
.heap-cell.alloc-fresh::after,
.heap-cell.freed-fresh::after {
  position: absolute;
  top: -2px; right: 1px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}
.heap-cell.written::after { content: "↑"; color: var(--ok-bluegreen); }
.heap-cell.cleared::after { content: "↓"; color: var(--ok-orange); }

/* Freshly allocated range (this step's malloc covers these cells, even
   if the values happen not to change) — light sky-blue tint with "+". */
.heap-cell.alloc-fresh {
  background: #e0f1fb;
  border-color: var(--ok-skyblue);
}
.heap-cell.alloc-fresh::after { content: "+"; color: var(--ok-skyblue); top: -3px; }
/* Freshly freed range from a no-op-style free (cells still accessible
   but the program logically released them) — orange dashed border. */
.heap-cell.freed-fresh {
  border-style: dashed;
  border-color: var(--ok-orange);
}
.heap-cell.freed-fresh::after { content: "−"; color: var(--ok-orange); }

/* Cells *read* by the current instruction — a dashed sky-blue border.
   Distinct from "written" (solid green outline) and from "alloc-fresh"
   (sky-blue fill). Reads don't change cell content, so we use a border
   style rather than a background tint. */
.heap-cell.read {
  border-style: dashed;
  border-color: var(--ok-skyblue);
}
/* When a cell is both a variable AND read, keep the var blue shadow
   plus the dashed read border. The .is-var box-shadow already provides
   that combination naturally. */

/* Variable binding: name label on the right */
.heap-cell.is-var { box-shadow: 0 0 0 1px var(--accent); }
.heap-cell.is-var .value { color: var(--accent); }

.heap-region-label {
  grid-column: 1 / -1;
  font-size: 10.5px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0 2px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 2px;
}

/* Heap cells are clickable to reveal a detail panel */
.heap-cell { cursor: pointer; }
.heap-cell.selected {
  box-shadow: 0 0 0 2px var(--fg);
  z-index: 1;
}

.heap-hint {
  font-size: 11px;
  color: var(--fg-faint);
  font-style: italic;
  margin-bottom: 4px;
}

/* Cell detail panel: appears below the heap grid when a cell is selected */
.cell-detail {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
}
.cell-detail[hidden] { display: none; }
.cell-detail-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.cell-detail-header .cd-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
}
.cell-detail-header .cd-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  line-height: 1;
}
.cell-detail-header .cd-close:hover { color: var(--fg); }
.cd-label { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.cd-value { color: var(--fg); }
.cd-value.accessible   { color: var(--good); font-weight: 600; }
.cd-value.inaccessible { color: var(--bad);  font-weight: 600; font-style: italic; }
.cd-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  margin-right: 4px;
  border: 1px solid;
}
.cd-tag.null     { background: #f6e6f1; border-color: var(--ok-purple); color: var(--ok-purple); }
.cd-tag.var      { background: #e3eef9; border-color: var(--accent); color: var(--accent); }
.cd-tag.read     { background: var(--bg-code); border-style: dashed; border-color: var(--ok-skyblue); color: var(--ok-skyblue); }
.cd-tag.written  { background: #e6f5ec; border-color: var(--ok-bluegreen); color: var(--ok-bluegreen); }
.cd-tag.cleared  { background: #fff1e0; border-color: var(--ok-orange); color: var(--ok-orange); }
.cd-tag.alloc    { background: #e0f1fb; border-color: var(--ok-skyblue); color: var(--ok-skyblue); }
.cd-tag.freed    { background: #fff1e0; border-color: var(--ok-orange); color: var(--ok-orange); }
.cd-empty { color: var(--fg-faint); font-style: italic; }
.cd-history {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.cd-history .cd-label { display: block; margin-bottom: 3px; }
.cd-history ul { list-style: none; margin: 0; padding: 0; }
.cd-history li {
  font-size: 11.5px;
  color: var(--fg-dim);
  padding: 1px 0;
}
.cd-history li .cd-step {
  color: var(--fg); font-weight: 600; min-width: 5em; display: inline-block;
}
.cd-history li .cd-action { color: var(--fg); }
.cd-history li.kind-write   .cd-action { color: var(--ok-bluegreen); }
.cd-history li.kind-clear   .cd-action { color: var(--ok-orange); }
.cd-history li.kind-read    .cd-action { color: var(--ok-skyblue); }
.cd-history li.kind-malloc  .cd-action { color: var(--ok-skyblue); }
.cd-history li.kind-free    .cd-action { color: var(--ok-orange); }

/* ===== Actions row ===== */
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
button.primary.outlined {
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 6px 16px;
}
button.primary.outlined:hover { background: var(--accent); color: #fff; }
.loading {
  color: var(--fg-dim);
  font-size: 13px;
}
.loading.hidden { display: none; }

footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 30px;
  color: var(--fg-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
footer em { color: var(--fg); font-style: italic; }