/* ============================================================
   workspace.css — Tilix-like chrome: tabs, tiling panes, splitters,
   the per-pane triple-button, detach, and the CRT effect overlay.
   All effects are compositor-only (transform/opacity) so it "runs like
   tilix" even with the phosphor look turned up.
   ============================================================ */

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  font-size: var(--font-size);
  background: var(--bg);
  color: var(--text);
  text-shadow: var(--phosphor-text-glow);
  height: 100dvh;
  overflow: hidden;
  zoom: var(--ui-scale);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   THE SCREENS — IMT Field-Terminal CRT stack, ONE TUBE PER PANE.
   The workspace chrome (topbar, tabs, pane heads/file names, splitters,
   line-number gutters) is the SOLID console housing — no glass on it.
   Each .pane-body is an embedded CRT: its own curvature falloff, phosphor
   bloom, scanlines, flicker, and rolling tracking band, clipped to the
   screen. All strengths come from the tier-3 dials in theme.css.
   ============================================================ */
.pane-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  /* light source: upper-left at ~35%. The vignette pivots toward the light
     (bottom-right corner falls off darkest) and the bloom is an elongated
     diagonal smear — two offset ellipses, not a centered circle — with a
     small white glass glint riding its upper-left shoulder. */
  background:
    radial-gradient(ellipse at 38% 32%,
      transparent 22%,
      rgb(0 0 0 / var(--crt-mid)) 60%,
      rgb(0 0 0 / var(--crt-corner)) 100%),
    radial-gradient(ellipse 72% 50% at 35% 30%,
      rgb(var(--phosphor-rgb) / var(--crt-bloom)) 0,
      rgb(var(--phosphor-rgb) / calc(var(--crt-bloom) * .39)) 26%,
      transparent 60%),
    radial-gradient(ellipse 30% 16% at 24% 16%,
      rgb(255 255 255 / calc(var(--crt-bloom) * .30)) 0,
      rgb(255 255 255 / calc(var(--crt-bloom) * .10)) 45%,
      transparent 72%),
    repeating-linear-gradient(to bottom,
      rgb(0 0 0 / var(--crt-scan-dark)) 0,
      rgb(0 0 0 / var(--crt-scan-dark)) 1px,
      transparent 1px,
      transparent 4px);
  box-shadow:
    inset 0 0 46px rgb(0 0 0 / var(--crt-inset-1)),
    inset 0 0 110px rgb(0 0 0 / var(--crt-inset-2)),
    inset 0 0 22px rgb(var(--phosphor-rgb) / var(--crt-inset-glow));
  opacity: var(--crt-opacity);
  animation: var(--crt-flicker-anim);
}

.pane-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  pointer-events: none;
  z-index: 6;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgb(var(--phosphor-rgb) / .048) 36%,
      rgb(255 255 255 / .018) 50%,
      rgb(var(--phosphor-rgb) / .042) 64%,
      transparent 100%),
    repeating-linear-gradient(to bottom,
      rgb(0 0 0 / .48) 0,
      rgb(0 0 0 / .48) 2px,
      transparent 2px,
      transparent 4px);
  opacity: var(--crt-track-opacity);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 76%, transparent 100%);
  transform: translate3d(0, var(--crt-track-resting), 0);
  will-change: transform;
  animation: var(--crt-track-anim);
}

/* desync the tubes — siblings track on their own clocks, like real hardware */
.split > .node:last-child .pane-body::after { animation-duration: 8.7s; animation-delay: -3.2s; }
.split .split > .node:first-child .pane-body::after { animation-duration: 7.9s; animation-delay: -1.4s; }

@keyframes md-crt-tracking {
  from { transform: translate3d(0, -220px, 0); }
  to   { transform: translate3d(0, calc(100vh + 220px), 0); }
}

@keyframes md-crt-flicker {
  0%, 100% { opacity: calc(var(--crt-opacity) - .02); }
  18%      { opacity: calc(var(--crt-opacity) + .02); }
  19%      { opacity: calc(var(--crt-opacity) - .08); }
  20%      { opacity: calc(var(--crt-opacity) + .01); }
  63%      { opacity: calc(var(--crt-opacity) - .04); }
  64%      { opacity: calc(var(--crt-opacity) + .04); }
}

/* ============================================================ workspace shell */
.workspace { display: flex; flex-direction: column; height: 100dvh; }

/* ---- top bar: brand + tabs + theme menu ---- */
/* ============================================================
   THE SHELL SURFACE — light catches the TOP of each frame piece and
   falls off downward (top ~10% of the assembly is lit).
   One master falloff curve: full gloss at the top of the bar → zero by
   120px down. The bar (28px tall) renders the 0–28px stretch of that
   curve; the rail below renders 28–120px — the alphas meet at exactly
   gloss×.77 on both sides of the joint, so the L-piece is continuous
   through the corner BY CONSTRUCTION. No fixed attachment, no filters.
   ============================================================ */
.pane-head {
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / var(--frame-gloss)) 0,
      rgb(255 255 255 / calc(var(--frame-gloss) * .77)) 100%),
    var(--frame-bg);
}
.gutter {
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / calc(var(--frame-gloss) * .77)) 0,
      rgb(255 255 255 / 0) 92px),
    var(--frame-bg);
}
.topbar {
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / var(--frame-gloss)) 0,
      rgb(255 255 255 / calc(var(--frame-gloss) * .66)) 100%),
    var(--frame-bg);
}
.splitter {
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / var(--frame-gloss)) 0,
      rgb(255 255 255 / 0) 120px),
    var(--frame-bg);
}

.topbar {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 10px;
  border-bottom: 1px solid var(--frame-border);
  box-shadow: inset 0 -12px 22px -12px rgb(var(--phosphor-rgb) / calc(var(--frame-underglow) * .7));
  color: var(--frame-text);
  text-shadow: none;
  /* keep the bar (and its dropdown theme panel) above the panes area */
  position: relative; z-index: 200;
}
.brand {
  font-family: var(--font-mono); font-weight: 800; font-size: 13px;
  letter-spacing: .5px; color: var(--accent);
  text-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .8);
  white-space: nowrap; padding-right: 6px;
}
.brand .blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- tab strip ---- */
.tabstrip { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; height: 100%; }
.tabstrip::-webkit-scrollbar { height: 0; }
.tab {
  display: flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 8px 0 11px; max-width: 220px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--frame-text-faint);
  font-family: var(--font-mono); font-size: 12.5px;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.tab:hover { background: rgb(var(--frame-accent-rgb) / .10); color: var(--frame-text); }
.tab.is-active {
  background: rgb(var(--frame-accent-rgb) / .16); color: var(--frame-text);
  border-color: var(--frame-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--frame-gloss) * .8)),
              0 0 var(--glow-radius) rgb(var(--frame-accent-rgb) / .22);
}
.tab .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.tab .label { overflow: hidden; text-overflow: ellipsis; }
.tab .x { opacity: .5; font-size: 14px; line-height: 1; padding: 0 2px; }
.tab .x:hover { opacity: 1; color: var(--danger); }
.tab.drag-over { border-color: var(--accent); }
.tab-add {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--frame-border); border-radius: var(--radius-sm);
  background: transparent; color: var(--frame-text-faint); cursor: pointer; font-size: 15px;
}
.tab-add:hover { color: var(--frame-accent); border-color: var(--frame-accent); }

/* ============================================================ tiling area */
.panes { position: relative; flex: 1; min-height: 0; padding: 8px; }
.node { position: absolute; inset: 0; }
.node.split { display: flex; }
.node.split.row { flex-direction: row; }
.node.split.col { flex-direction: column; }
.node.split > .node { position: relative; inset: auto; flex: 1 1 0; min-width: 0; min-height: 0; }

/* splitter handle — drag to resize, like tilix dividers */
.splitter { flex: 0 0 12px; position: relative; z-index: 2;
  /* console rail between two tubes — surface from the shared specular field,
     plus a faint phosphor wash caught from both neighbours */
  box-shadow: inset 0 0 10px rgb(var(--phosphor-rgb) / calc(var(--frame-underglow) * .35));
}
.splitter.row { cursor: col-resize; }
.splitter.col { cursor: row-resize; }
.splitter::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--frame-border);
}
.splitter.row::after { width: 1px; }
.splitter.col::after { height: 1px; }
.splitter:hover::after, .splitter.dragging::after { background: var(--accent); box-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .6); }

/* ---- leaf pane ---- */
.pane {
  /* the shell: complement-coloured bezel border; the glass lives in .pane-body */
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgb(255 255 255 / calc(var(--frame-gloss) * .6));
}
.pane.is-focused { box-shadow: var(--shadow-panel), 0 0 0 1px rgb(var(--frame-accent-rgb) / .45), 0 0 var(--glow-radius) rgb(var(--frame-accent-rgb) / .25); }

.pane-head {
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 6px 0 10px; flex: 0 0 auto;
  /* shell bar — surface comes from the shared fixed specular field above.
     NO bottom border/shadow: the rail below is the same moulded piece. */
  border-bottom: 0;
  cursor: grab;
  /* file name etc. belong to the solid housing — crisp, no tube glow */
  text-shadow: none;
}
.pane-head:active { cursor: grabbing; }
.pane-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--frame-text); letter-spacing: .4px;
}
.pane-title::before { content: "▸ "; color: var(--frame-accent); }

/* the triple-button cluster (split-right / split-down / detach) + close */
.pane-tools { display: flex; align-items: center; gap: 2px; }
.pane-tools button {
  display: grid; place-items: center; width: 22px; height: 20px;
  border: 0; background: transparent; color: var(--frame-text-faint);
  cursor: pointer; border-radius: 4px;
}
.pane-tools button:hover { color: var(--frame-accent); background: rgb(var(--frame-accent-rgb) / .14); }
.pane-tools button.close:hover { color: var(--danger); }
.pane-tools svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.pane-body {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  /* NO filter here: it would tint the rail relative to the bar outside.
     The spec contrast/saturate pop is applied to the tube content below. */
}
.editor .src, .screen > .preview, .screen > .filetree { filter: var(--panel-filter); }

/* drop overlay shown while dragging a pane head */
.pane.drop-target::before {
  content: ""; position: absolute; inset: 0; z-index: 5;
  background: rgb(var(--theme-accent-rgb) / .12);
  border: 1.5px dashed var(--accent); border-radius: var(--radius);
  pointer-events: none;
}

/* ============================================================ pane content */
.term {
  height: 100%; padding: 10px 12px; overflow-y: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  color: var(--text);
}
.term .ln { white-space: pre-wrap; word-break: break-word; }
.term .pfx { color: var(--accent); text-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .7); }
.term .muted { color: var(--text-muted); }
.term .ok { color: var(--accent-strong); }
.term .warn { color: var(--warn); }
.term .err { color: var(--danger); }
.term-input-row { display: flex; gap: 6px; align-items: baseline; }
.term-input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; caret-color: var(--accent); }

.cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom; background: var(--accent); animation: blink 1.1s steps(1) infinite; box-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .7); }

/* generic info panel content */
.panel-pad { padding: 14px 16px; height: 100%; overflow-y: auto; }
.panel-pad h2 { font-family: var(--font-mono); font-size: 15px; color: var(--accent-strong); margin-bottom: 6px; text-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .5); }
.panel-pad p { color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; font-family: var(--font-mono); font-size: 12px; }
.kv dt { color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.kv dd { color: var(--text); }

/* ============================================================ theme menu
   Spec-faithful port of the IMT navbar theme menu (style.css §theme-menu):
   trigger = active-theme icon + live swatch dot · panel = THEME icon grid
   + SEED COLOUR wheel/swatches + reset link. Tooltips are title attrs.
   ============================================================ */
.theme-menu { display: inline-flex; position: relative; z-index: 130; }

.theme-menu-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  appearance: none; min-height: 1.85rem; padding: .2rem .42rem;
  border: 1px solid var(--frame-border); border-radius: 999px;
  background: color-mix(in srgb, var(--frame-bg) 84%, transparent);
  color: var(--frame-text); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.theme-menu-trigger:hover,
.theme-menu.is-open .theme-menu-trigger {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--text);
}
.theme-menu-trigger-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 1.05rem; width: 1.05rem; font-family: var(--font-mono); font-size: .8rem; font-weight: 800; }
.theme-menu-trigger-icon svg { display: block; height: 1.05rem; width: 1.05rem; }
.theme-menu-trigger-swatch {
  display: block; height: .62rem; width: .62rem; border-radius: 999px;
  background: var(--theme-accent, var(--accent));
  border: 1px solid rgb(0 0 0 / .18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38),
              0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .55);
}

.theme-menu-panel {
  position: absolute; inset-block-start: calc(100% + .55rem); inset-inline-end: 0; z-index: 1000;
  display: flex; flex-direction: column; gap: .75rem;
  width: min(17.5rem, calc(100vw - 1rem)); padding: .72rem;
  background: color-mix(in srgb, var(--surface) 96%, #000);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow-panel);
}
.theme-menu-panel[hidden] { display: none; }
.theme-menu-section { display: grid; gap: .45rem; }
.theme-menu-label {
  color: var(--text-muted); font-family: var(--font-mono);
  font-size: .68rem; font-weight: 800; line-height: 1; text-transform: uppercase;
}

/* THEME — 4 icon buttons in a grid, tooltip = title attr */
.theme-switcher { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-switcher-btn {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; height: 2.4rem; min-width: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-muted); cursor: pointer; font-family: var(--font-mono);
  font-size: .9rem; font-weight: 800;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.theme-switcher-btn:hover,
.theme-switcher-btn.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--text);
  box-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .25);
}
.theme-switcher-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.theme-switcher-icon svg { display: block; }

/* SEED COLOUR — colour wheel + round swatches (+ Default badge) */
.palette-switcher { display: inline-flex; align-items: center; gap: .42rem; }
.palette-color { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 1.65rem; width: 1.65rem; }
.palette-color input {
  appearance: none; background: transparent; border: 0; padding: 0;
  height: 1.45rem; width: 1.45rem; cursor: pointer;
}
.palette-color .wheel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 1.18rem; height: 1.18rem; border-radius: 999px; pointer-events: none;
  background: conic-gradient(from 0deg, #ff3b3b, #ff9b3b, #ffe53b, #5bff3b, #3bffd5, #3b8bff, #7b3bff, #ff3bd5, #ff3b3b);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
.palette-switcher-btn {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; height: 1.45rem; width: 1.45rem; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.palette-switcher-btn > span[style*="--swatch"] {
  display: block; height: .9rem; width: .9rem; border-radius: 999px;
  background: var(--swatch);
  border: 1px solid rgb(0 0 0 / .18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
}
.palette-switcher-btn:hover,
.palette-switcher-btn.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
.palette-switcher-btn-default { position: relative; }
.palette-switcher-btn .palette-default-badge { display: none; }
.palette-switcher-btn-default.is-active .palette-default-badge {
  position: absolute; inset-block-start: calc(100% + .32rem); inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 20;
  display: inline-flex; align-items: center; pointer-events: none; white-space: nowrap;
  padding: .22rem .38rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: 0 8px 18px rgb(0 0 0 / .3);
  color: var(--text); font-size: .58rem; font-weight: 800;
  letter-spacing: .06em; line-height: 1; text-transform: uppercase;
}

/* reset link — "Reset to <theme> default" (clears the Default badge's lane) */
.theme-reset {
  appearance: none; background: none; border: 0; padding: 0;
  margin-block-start: .6rem;
  color: var(--text-faint); font-family: var(--font-mono); font-size: .72rem;
  cursor: pointer; text-align: left;
}
.theme-reset:hover { color: var(--accent); text-decoration: underline; }

/* ---- ui-scale pill: A ──────● A 106% (lives in the topbar) ---- */
.ui-scale-control {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid var(--frame-border); border-radius: 999px;
  background: color-mix(in srgb, var(--frame-bg) 84%, transparent);
}
.ui-scale-mark { color: var(--frame-text); font-family: var(--font-mono); font-size: .72rem; font-weight: 800; line-height: 1; }
.ui-scale-mark-large { font-size: .95rem; }
.ui-scale-slider { accent-color: var(--accent); cursor: ew-resize; inline-size: clamp(4rem, 6vw, 6.5rem); }
.ui-scale-value {
  color: var(--text-muted); font-family: var(--font-mono);
  font-size: .68rem; font-variant-numeric: tabular-nums; font-weight: 800;
  line-height: 1; min-width: 2.18rem; text-align: right;
}

/* ============================================================ editor pane
   The source surface. In the browser reference this is a <textarea>; in the
   native app it becomes the rope-backed GPUI editor core (see docs/PLAN.md §2 D1).
   ============================================================ */
.editor { display: flex; height: 100%; min-height: 0; background: var(--panel); }
/* the line-counter rail — EVERY screen wears one, and it is one continuous
   piece with the pane's top bar (no seam: the head has no bottom border over
   the rail; the screen content carries the top border instead). */
.gutter {
  flex: 0 0 auto; min-width: 34px; padding: 12px 8px 12px 12px; text-align: right;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  color: var(--frame-text-faint); user-select: none;
  border-right: 1px solid var(--frame-border);
  /* surface comes from the shared fixed specular field (one piece with the
     bar above); only the screen's glow on the right edge is rail-local */
  box-shadow: inset -12px 0 18px -12px rgb(var(--phosphor-rgb) / var(--frame-underglow));
  white-space: pre;
  overflow: hidden;
  /* line numbers are part of the SOLID frame — sit above the pane's glass */
  position: relative; z-index: 7;
  text-shadow: none;
}

/* generic railed screen: [gutter | content] */
.screen { display: flex; height: 100%; min-height: 0; }
.screen > .preview, .screen > .filetree { flex: 1; min-width: 0; }
.editor .src {
  flex: 1; min-width: 0; padding: 12px 14px;
  background: transparent; border: 0; outline: 0; resize: none;
  /* the screen's edge against the shell bar above it, with the tube's own
     glow washing up against it (the underglow that left the head) */
  border-top: 1px solid var(--frame-border);
  box-shadow: inset 0 10px 16px -10px rgb(var(--phosphor-rgb) / calc(var(--frame-underglow) * .7));
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  color: var(--text); caret-color: var(--accent);
  tab-size: 2; white-space: pre; overflow: auto;
}
.screen > .preview, .screen > .filetree {
  border-top: 1px solid var(--frame-border);
  box-shadow: inset 0 10px 16px -10px rgb(var(--phosphor-rgb) / calc(var(--frame-underglow) * .7));
}
.editor .src::placeholder { color: var(--text-faint); }

/* ============================================================ preview pane
   Rendered Markdown. In the native app: comrak AST -> GPUI elements (NO webview).
   ============================================================ */
.preview {
  height: 100%; overflow-y: auto; padding: 16px 22px;
  font-family: var(--font); font-size: 14.5px; line-height: 1.7; color: var(--text);
}
.preview > :first-child { margin-top: 0; }
.preview h1, .preview h2, .preview h3, .preview h4 {
  font-family: var(--font-mono); color: var(--accent-strong); line-height: 1.3;
  margin: 1.3em 0 .5em; text-shadow: 0 0 var(--glow-radius) rgb(var(--theme-accent-rgb) / .35);
}
.preview h1 { font-size: 1.7em; border-bottom: 1px solid var(--border); padding-bottom: .25em; }
.preview h2 { font-size: 1.4em; border-bottom: 1px solid var(--border); padding-bottom: .2em; }
.preview h3 { font-size: 1.18em; }
.preview h4 { font-size: 1.02em; color: var(--accent); }
.preview p, .preview ul, .preview ol, .preview blockquote, .preview pre, .preview table { margin: .65em 0; }
.preview ul, .preview ol { padding-left: 1.5em; }
.preview li { margin: .2em 0; }
.preview li input[type="checkbox"] { margin-right: .5em; accent-color: var(--accent); }
.preview a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgb(var(--theme-accent-rgb) / .4); }
.preview a:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }
.preview strong { color: var(--text); font-weight: 700; }
.preview em { color: var(--text); }
.preview del { color: var(--text-faint); }
.preview code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--surface-alt); color: var(--accent-strong);
  padding: .12em .4em; border-radius: 4px; border: 1px solid var(--border);
}
.preview pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; overflow-x: auto;
}
.preview pre code { background: none; border: 0; padding: 0; color: var(--text); }
.preview blockquote {
  border-left: 3px solid var(--accent); padding: .2em 0 .2em 1em;
  color: var(--text-muted); background: var(--accent-soft); border-radius: 0 4px 4px 0;
}
.preview hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.preview table { border-collapse: collapse; width: 100%; font-size: .92em; }
.preview th, .preview td { border: 1px solid var(--border); padding: .4em .7em; text-align: left; }
.preview th { background: var(--surface-alt); color: var(--accent-strong); font-family: var(--font-mono); }

/* ============================================================ file-tree pane */
.filetree { height: 100%; overflow-y: auto; padding: 8px 6px; font-family: var(--font-mono); font-size: 12.5px; }
.filetree .ft-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.filetree .ft-row:hover { background: var(--surface-alt); color: var(--text); }
.filetree .ft-row.is-active { background: var(--accent-soft); color: var(--accent-strong); }
.filetree .ft-row.dir { color: var(--text); }
.filetree .ft-ico { color: var(--accent); width: 1.1em; display: inline-block; text-align: center; }
.filetree .ft-row.indent-1 { padding-left: 22px; }
.filetree .ft-row.indent-2 { padding-left: 36px; }