/* ==========================================================================
   Design tokens.
   Every component rule below reads semantic tokens only, never raw colours,
   so a theme is a palette swap. "Paper" (light) is the base theme; the dark
   theme re-declares the palette layer and nothing else. Rust sets
   `data-theme` on <html> at startup from storage or `prefers-color-scheme`.
   ========================================================================== */
:root {
  color-scheme:light;

  /* Type scale. 11px is the floor for UI text; nothing smaller carries meaning. */
  --text-2xs:10px; --text-xs:11px; --text-sm:12px; --text-base:13px;
  --text-md:15px; --text-lg:18px; --text-xl:22px;

  /* Shape and control metrics */
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --control-h:34px; --control-h-sm:28px;

  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular","Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;
  --rail-width:264px; --split-left:50%;

  /* --- Palette: Paper ---------------------------------------------------- */
  /* Text ramp. ink-faint is the smallest readable step: 4.7:1 on paper. */
  --paper:#f2eee4; --paper-light:#fbf9f3;
  --ink:#1d201c; --ink-soft:#454a43; --ink-faint:#666a60; --ink-muted:#8b8f84;
  --placeholder:#666a60; --code-ink:#23261f; --gutter-ink:#8e9287;

  --line:rgba(41,44,38,.16); --line-strong:rgba(41,44,38,.32); --line-soft:rgba(41,44,38,.08);

  /* Surfaces. Input cards sit above the page, output cards sit below it, so
     the two halves of every tool read as different kinds of thing. */
  --surface-card:rgba(255,255,255,.6);
  --surface-output:rgba(41,44,38,.035);
  --surface-raise:rgba(255,255,255,.42);
  --surface-raise-hover:rgba(255,255,255,.74);
  --surface-inset:rgba(41,44,38,.055);
  --surface-disabled:rgba(41,44,38,.03);
  --surface-dialog:#f8f5ec;
  --overlay-paper:rgba(242,238,228,.94);
  --overlay-scrim:rgba(29,31,27,.44);
  --scroll-thumb:rgba(76,76,68,.28); --scroll-thumb-hover:rgba(76,76,68,.46);

  --seal:#9b3e31; --on-ink-accent:#e2b0a4;
  --ok:#55604f; --moss:var(--ok); --warn:#7d5f2f;
  --tint-ok:rgba(85,96,79,.09); --border-ok:rgba(85,96,79,.42);
  --tint-warn:rgba(125,95,47,.1); --border-warn:rgba(125,95,47,.4);
  --tint-danger:rgba(155,62,49,.08); --border-danger:rgba(155,62,49,.42);
  --tint-accent:rgba(155,62,49,.06);

  --diff-add-ink:#2f5b40; --diff-add-line:#5f8a6d; --diff-add-bg:rgba(91,132,102,.13);
  --diff-del-ink:#8c3a30; --diff-del-line:#a85f53; --diff-del-bg:rgba(164,80,67,.11);
  --diff-file-ink:#4c5850; --diff-file-bg:rgba(63,72,63,.07);
  --diff-meta-ink:#6d5029; --diff-meta-bg:rgba(160,125,70,.1);

  --shadow:0 1px 2px rgba(51,44,34,.05),0 10px 30px rgba(51,44,34,.05);
  --shadow-pop:0 20px 45px rgba(28,30,25,.18),0 2px 6px rgba(28,30,25,.09);
  --shadow-dialog:0 36px 110px rgba(18,20,17,.28),0 2px 7px rgba(18,20,17,.1);
  --glow-1:rgba(118,119,105,.065); --glow-2:rgba(122,103,76,.05);
  --grain-1:rgba(85,78,66,.08); --grain-2:rgba(85,78,66,.04); --grain-opacity:.14;
}

/* --- Palette: Ink (dark) -------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme:dark;

  --paper:#191b18; --paper-light:#131410;
  --ink:#eae6db; --ink-soft:#bcb8ac; --ink-faint:#979286; --ink-muted:#7b776c;
  --placeholder:#979286; --code-ink:#e4e0d5; --gutter-ink:#6e6a5f;

  --line:rgba(234,230,219,.15); --line-strong:rgba(234,230,219,.3); --line-soft:rgba(234,230,219,.07);

  --surface-card:rgba(255,255,255,.04);
  --surface-output:rgba(0,0,0,.26);
  --surface-raise:rgba(255,255,255,.06);
  --surface-raise-hover:rgba(255,255,255,.12);
  --surface-inset:rgba(255,255,255,.05);
  --surface-disabled:rgba(255,255,255,.03);
  --surface-dialog:#21231f;
  --overlay-paper:rgba(25,27,24,.94);
  --overlay-scrim:rgba(8,9,8,.64);
  --scroll-thumb:rgba(234,230,219,.2); --scroll-thumb-hover:rgba(234,230,219,.36);

  --seal:#d1705c; --on-ink-accent:#9b3e31;
  --ok:#8fa088; --warn:#d0a463;
  --tint-ok:rgba(143,160,136,.14); --border-ok:rgba(143,160,136,.36);
  --tint-warn:rgba(208,164,99,.13); --border-warn:rgba(208,164,99,.34);
  --tint-danger:rgba(209,112,92,.14); --border-danger:rgba(209,112,92,.36);
  --tint-accent:rgba(209,112,92,.1);

  --diff-add-ink:#8fc7a1; --diff-add-line:#4f7d61; --diff-add-bg:rgba(93,168,120,.14);
  --diff-del-ink:#e59182; --diff-del-line:#8f4a3f; --diff-del-bg:rgba(214,105,88,.14);
  --diff-file-ink:#a9b0a6; --diff-file-bg:rgba(200,215,200,.06);
  --diff-meta-ink:#d6b47e; --diff-meta-bg:rgba(198,158,92,.12);

  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.28);
  --shadow-pop:0 20px 45px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
  --shadow-dialog:0 36px 110px rgba(0,0,0,.62),0 2px 7px rgba(0,0,0,.4);
  --glow-1:rgba(120,132,116,.05); --glow-2:rgba(150,120,80,.045);
  --grain-1:rgba(255,255,255,.03); --grain-2:rgba(255,255,255,.02); --grain-opacity:.5;
}
* { box-sizing:border-box; }
/* Chromium paints its platform scrollbar - stepper arrows and all - unless the
   page draws one, so only Firefox was honouring the thin bars this shell asked
   for. The thumb is a rounded sliver held off the edge by a transparent border,
   and thickens on hover, while the full track stays grabbable. */
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner { background:transparent; }
*::-webkit-scrollbar-button { display:none; width:0; height:0; }
*::-webkit-scrollbar-thumb {
  border:3px solid transparent; border-radius:10px;
  background:var(--scroll-thumb); background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover { border-width:2px; background:var(--scroll-thumb-hover); background-clip:content-box; }
html { height:100%; scroll-behavior:smooth; overflow:hidden; }
body {
  margin:0; color:var(--ink); height:100%; min-height:0; overflow:hidden; font-family:var(--sans);
  background:
    radial-gradient(circle at 12% 8%,var(--glow-1),transparent 24rem),
    radial-gradient(circle at 82% 90%,var(--glow-2),transparent 28rem),
    var(--paper);
}
.app-root {
  width:100%; height:100dvh; min-height:0; overflow:hidden;
  display:grid; grid-template-rows:72px minmax(0,1fr);
}
body::before {
  content:""; position:fixed; inset:0; z-index:-4; opacity:var(--grain-opacity); pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,var(--grain-1) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,var(--grain-2) 0 1px,transparent 1px 6px);
}
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link {
  position:fixed; top:8px; left:12px; z-index:200; padding:9px 12px; transform:translateY(-160%);
  border:1px solid var(--line-strong); color:var(--paper-light); background:var(--ink);
  font:650 var(--text-sm) var(--sans); text-decoration:none; transition:transform 120ms ease;
}
.skip-link:focus { transform:translateY(0); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role=separator]:focus-visible {
  outline:2px solid color-mix(in srgb,var(--seal) 62%,transparent);
  outline-offset:2px;
}
.site-header {
  height:100%; min-height:0; padding:0 clamp(20px,3vw,48px); display:flex; align-items:center;
  justify-content:space-between; gap:24px; border-bottom:1px solid var(--line);
}
.brand {
  display:inline-flex; align-items:center; gap:10px; padding:0; border:0;
  color:var(--ink); background:transparent; cursor:pointer; text-decoration:none;
}
.brand-logo { width:34px; height:34px; display:block; flex:0 0 auto; }
.brand-branch {
  padding-left:10px; border-left:1px solid var(--line-strong); color:var(--seal);
  font:700 var(--text-sm) var(--mono); letter-spacing:.09em;
}
.header-meta { display:flex; align-items:center; gap:10px; font-size:var(--text-xs); }
.header-version { color:var(--ink-faint); font:600 var(--text-xs) var(--mono); letter-spacing:.06em; }
/* The privacy promise is the product's main claim, so the shell states it. */
.header-privacy {
  display:inline-flex; align-items:center; gap:6px; padding-right:4px; color:var(--ink-soft);
  font:500 var(--text-xs) var(--sans); letter-spacing:.01em;
}
.header-privacy i {
  width:6px; height:6px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px var(--tint-ok);
}
.worker-state i {
  width:5px; height:5px; border-radius:50%; background:var(--moss);
  box-shadow:0 0 0 4px var(--tint-ok);
}
.back-link {
  display:inline-flex; align-items:center; gap:5px; height:var(--control-h-sm); padding:0 10px;
  border-radius:var(--radius-sm); color:var(--ink-soft); text-decoration:none;
  font:600 var(--text-xs) var(--sans); letter-spacing:.02em;
}
.back-link:hover { color:var(--ink); background:var(--surface-raise); }
.back-link span { color:var(--seal); }
.header-action {
  display:inline-flex; align-items:center; gap:6px; height:var(--control-h-sm); padding:0 10px;
  border:1px solid transparent; border-radius:var(--radius-sm); background:transparent;
  color:var(--ink-soft); cursor:pointer; font:600 var(--text-xs) var(--sans); letter-spacing:.02em;
  transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease;
}
.header-action:hover { color:var(--ink); background:var(--surface-raise); border-color:var(--line); }
/* Pressed toggles (Focus, theme) read as switched on, not merely hovered. */
.header-action[aria-pressed="true"] {
  color:var(--seal); border-color:var(--border-danger); background:var(--tint-danger);
}
.header-action .glyph { display:inline-flex; font-size:var(--text-base); line-height:1; }
.header-action .glyph svg.hidden { display:none; }
.header-action .glyph svg {
  display:block; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
kbd {
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 5px;
  background:var(--surface-raise); color:var(--ink-soft); font:600 var(--text-2xs) var(--mono);
}
.layout {
  width:100%; display:grid; grid-template-columns:var(--rail-width) 7px minmax(0,1fr);
  height:100%; min-height:0; overflow:hidden;
}
.tool-rail {
  height:100%; min-width:0; padding:22px 22px 18px; border-right:1px solid var(--line);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden;
}
.rail-resize { cursor:col-resize; position:relative; z-index:12; touch-action:none; user-select:none; }
.rail-resize::after {
  content:""; position:absolute; top:0; bottom:0; left:3px; width:1px;
  background:transparent; transition:.15s;
}
.rail-resize:hover::after,.rail-resize:focus-visible::after { background:var(--seal); }
.rail-heading {
  display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-faint);
  font:600 var(--text-xs) var(--mono); letter-spacing:.1em; margin-bottom:10px;
}
.rail-actions { display:flex; gap:4px; }
.key-hint {
  min-height:var(--control-h-sm); display:inline-flex; align-items:center; justify-content:center;
  gap:5px; border:1px solid var(--line); background:var(--surface-raise);
  border-radius:var(--radius-sm); padding:0 8px; color:var(--ink-soft);
  font:600 var(--text-xs) var(--mono); cursor:pointer;
  transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease;
}
.key-hint:hover:not(:disabled) { color:var(--ink); background:var(--surface-raise-hover); border-color:var(--line-strong); }
.key-hint:disabled { opacity:.4; cursor:not-allowed; }

/* Filtering 17 tools in place beats scrolling the rail or opening the palette. */
.rail-search { position:relative; flex:0 0 auto; margin-bottom:8px; }
.rail-search input {
  width:100%; height:var(--control-h-sm); padding:0 8px 0 26px; border-radius:var(--radius-sm);
  font:500 var(--text-sm) var(--sans);
}
.rail-search-mark {
  position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--ink-faint);
  font:var(--text-sm) var(--sans); pointer-events:none;
}
.rail-empty { padding:14px 10px; color:var(--ink-faint); font:450 var(--text-sm)/1.6 var(--sans); }
.rail-navigation { min-width:0; min-height:0; display:flex; flex-direction:column; }
.tool-nav {
  min-height:0; display:flex; flex-direction:column; gap:2px; overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:contain;
}
.nav-entry { flex:0 0 auto; min-width:0; }
.nav-row { display:flex; align-items:center; min-width:0; border-radius:2px; }
.nav-row .nav-item { min-width:0; flex:1; }
.nav-order-toggle { margin-left:auto; display:flex; align-items:center; gap:5px; }
.nav-order-toggle[aria-pressed="true"] { color:var(--seal); border-color:var(--seal); }
.nav-order-toolbar { flex:0 0 auto; padding:0 0 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.nav-order-toolbar p { margin:0 0 8px; color:var(--ink-soft); font:500 var(--text-sm)/1.55 var(--mono); }
.nav-order-actions { display:flex; flex-direction:column; gap:3px; padding-right:3px; }
.nav-order-actions .key-hint { min-width:28px; min-height:28px; font-size:12px; }
.nav-drag-handle { flex:0 0 12px; color:var(--ink-faint); text-align:center; cursor:grab; }
.is-reordering .nav-row { cursor:grab; }
.is-reordering .nav-item { grid-template-columns:24px minmax(0,1fr); gap:6px; padding-left:3px; }
.is-reordering .nav-glyph { width:24px; }
.is-reordering .nav-copy { overflow-wrap:anywhere; }
.nav-row.dragging { opacity:.45; }
.nav-row.drop-target { outline:2px solid var(--seal); outline-offset:-2px; background:var(--surface-raise-hover); }
.nav-item {
  width:100%; min-height:50px; padding:8px 10px 8px 12px; display:grid;
  grid-template-columns:30px 1fr; gap:10px; align-items:center; text-align:left;
  border:1px solid transparent; border-radius:var(--radius-md);
  background:transparent; cursor:pointer; position:relative;
  transition:background-color 120ms ease,border-color 120ms ease;
}
.nav-item:hover { background:var(--surface-raise); }
.nav-item.active { background:var(--tint-accent); border-color:var(--border-danger); }
.nav-item.active strong { color:var(--seal); }
.nav-item.active::before {
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 2px 2px 0; background:var(--seal);
}
.nav-glyph {
  width:30px; color:var(--ink-faint); text-align:center;
  font:700 var(--text-sm)/1 var(--mono); letter-spacing:-.03em;
}
.nav-item:hover .nav-glyph,.nav-item.active .nav-glyph { color:var(--seal); }
.nav-copy { min-width:0; }
.nav-item strong,.nav-item small {
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.nav-item strong { color:var(--ink); font:600 var(--text-base)/1.3 var(--sans); }
.nav-item small { margin-top:2px; color:var(--ink-faint); font:450 var(--text-xs)/1.4 var(--mono); }
/* Arranging is the one mode where the full label matters more than the row height. */
.is-reordering .nav-item strong,.is-reordering .nav-item small { white-space:normal; }
.nav-divider {
  height:30px; display:flex; align-items:end; gap:8px; padding:0 10px 7px 12px;
  color:var(--ink-faint); font:600 var(--text-xs) var(--mono); letter-spacing:.1em;
}
.nav-divider::after { content:""; flex:1; height:1px; margin-bottom:4px; background:var(--line); }
.rail-foot {
  min-height:38px; margin-top:10px; padding-top:10px; display:flex; align-items:center; gap:9px;
  flex-wrap:wrap;
  border-top:1px solid var(--line); color:var(--ink-faint);
}
.rail-foot a {
  color:inherit; text-decoration:none; font:600 var(--text-xs) var(--mono); letter-spacing:.08em;
}
.rail-foot a:hover { color:var(--seal); }
.copyright-mark {
  width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line-strong);
  border-radius:50%; color:var(--seal); font:600 12px/1 var(--serif);
}
.layout.rail-collapsed .tool-rail { padding-left:13px; padding-right:13px; }
.layout.rail-collapsed .rail-heading>span,.layout.rail-collapsed .nav-copy,
.layout.rail-collapsed .nav-divider,
.layout.rail-collapsed .rail-actions button:last-child { display:none; }
.layout.rail-collapsed .rail-heading { justify-content:center; }
.layout.rail-collapsed .nav-item { grid-template-columns:1fr; justify-items:center; }
.layout.rail-collapsed .nav-item { padding-left:8px; }
.layout.rail-collapsed .rail-search { display:none; }
.layout.rail-collapsed .rail-foot { justify-content:center; }
.layout.rail-collapsed .rail-foot a { display:none; }
.layout.rail-collapsed .nav-order-label { display:none; }
.layout.rail-collapsed .rail-foot { flex-wrap:wrap; }
.layout.rail-collapsed .nav-order-toggle { margin-left:0; }
.workspace {
  --workspace-right-padding:clamp(22px,3vw,50px);
  min-width:0; min-height:0; height:100%; overflow:hidden;
  display:flex; flex-direction:column; padding:16px clamp(22px,3vw,50px) 12px;
}
.workspace-head {
  min-height:42px; flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between;
  gap:28px; margin-bottom:12px;
}
/* The tool name is the page's only real heading, so it is sized like one. */
.workspace-title {
  margin:0; display:flex; align-items:center; gap:10px; color:var(--ink);
  font:650 var(--text-lg)/1.25 var(--sans); letter-spacing:-.01em;
}
.workspace-index {
  flex:0 0 auto; padding:2px 7px; border:1px solid var(--border-danger); border-radius:var(--radius-sm);
  color:var(--seal); background:var(--tint-danger); font:600 var(--text-xs)/1.5 var(--mono);
  letter-spacing:.06em;
}
.workspace-subtitle { margin:4px 0 0; color:var(--ink-soft); font:450 var(--text-base)/1.5 var(--sans); }
.tool-panel { display:none; min-height:0; contain:layout style; }
.tool-panel.active {
  display:block; flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-gutter:stable;
  margin-right:calc(-1 * var(--workspace-right-padding));
  padding-right:var(--workspace-right-padding);
}
.action-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:9px; min-height:48px; margin-bottom:10px; }
.action-spacer { flex:1; }
.control-group { display:grid; gap:5px; min-width:144px; }
.control-group.small { min-width:108px; }
.field-label { color:var(--ink-faint); font:600 var(--text-xs) var(--mono); letter-spacing:.07em; text-transform:uppercase; }
select,input {
  height:var(--control-h); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  outline:0; color:var(--ink); background:var(--surface-raise); padding:0 10px;
  font:500 var(--text-base) var(--mono);
  transition:border-color 120ms ease,background-color 120ms ease;
}
select:hover,input:hover { border-color:color-mix(in srgb,var(--seal) 45%,var(--line-strong)); }
input::placeholder { color:var(--placeholder); }
.ink-select { position:relative; min-width:150px; }
.control-group .ink-select,.time-convert .ink-select { width:100%; min-width:0; }
.ink-select-trigger {
  width:100%; height:var(--control-h); display:grid; grid-template-columns:minmax(0,1fr) 15px;
  align-items:center; gap:8px; padding:0 10px; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); background:var(--surface-raise); color:var(--ink);
  text-align:left; cursor:pointer;
  font:500 var(--text-base) var(--mono); transition:border-color 140ms ease,background-color 140ms ease;
}
.ink-select-trigger:hover,.ink-select-trigger.open {
  border-color:var(--seal); background:var(--surface-raise-hover);
}
.ink-select-trigger i {
  width:7px; height:7px; justify-self:center; border-right:1px solid var(--seal);
  border-bottom:1px solid var(--seal); transform:rotate(45deg) translateY(-2px);
  transition:transform 160ms ease;
}
.ink-select-trigger.open i { transform:rotate(225deg) translate(-1px,-1px); }
.ink-select-menu {
  position:absolute; z-index:90; top:calc(100% + 7px); left:-7px; width:max(calc(100% + 14px),170px);
  max-height:260px; overflow-y:auto; padding:7px;
  border:1px solid var(--line-strong); color:var(--ink);
  background:
    radial-gradient(ellipse at 105% -5%,color-mix(in srgb,var(--ink) 12%,transparent),transparent 38%),
    radial-gradient(ellipse at -8% 110%,color-mix(in srgb,var(--warn) 8%,transparent),transparent 38%),
    repeating-linear-gradient(0deg,var(--grain-1) 0 1px,transparent 1px 4px),
    var(--surface-dialog);
  box-shadow:var(--shadow-pop);
  transform-origin:top left; animation:ink-select-in 150ms cubic-bezier(.2,.75,.25,1) both;
}
.ink-select-menu::before {
  content:""; position:absolute; top:0; left:8px; width:62%; height:2px; opacity:.72;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12% 72%,transparent);
}
.ink-select-option {
  width:100%; min-height:36px; display:grid; grid-template-columns:23px 1fr; align-items:center;
  position:relative; isolation:isolate; gap:5px; padding:5px 9px 5px 5px; overflow:hidden;
  border:0; border-bottom:1px solid var(--line-soft); background:transparent; color:var(--ink);
  text-align:left; cursor:pointer; font:550 11px var(--sans);
}
.ink-select-option:last-child { border-bottom:0; }
.ink-select-option::before {
  content:""; position:absolute; z-index:-1; inset:2px 0; opacity:0; transform:scaleX(.82); transform-origin:left;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 13%,transparent),color-mix(in srgb,var(--ink) 4%,transparent) 78%,transparent);
  transition:opacity 120ms ease,transform 150ms ease;
}
.ink-select-option.active::before,.ink-select-option:hover::before { opacity:1; transform:scaleX(1); }
.ink-select-option.selected { color:var(--seal); }
.ink-select-check {
  width:19px; height:19px; display:grid; place-items:center; color:var(--seal);
  border:1px solid transparent; font:600 11px/1 var(--serif);
}
.ink-select-option.selected .ink-select-check {
  border-color:var(--border-danger); background:var(--tint-accent); transform:rotate(-2deg);
}
@keyframes ink-select-in {
  from { opacity:0; transform:translateY(-4px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.ink-btn {
  height:var(--control-h); padding:0 14px; border-radius:var(--radius-md);
  border:1px solid var(--line-strong); color:var(--ink); background:var(--surface-raise);
  cursor:pointer; font:600 var(--text-base) var(--sans); letter-spacing:.005em; white-space:nowrap;
  transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease;
}
.ink-btn:hover { background:var(--surface-raise-hover); }
.ink-btn:disabled { opacity:.45; cursor:not-allowed; }
.ink-btn.primary { min-width:112px; color:var(--paper-light); background:var(--ink); border-color:var(--ink); }
.ink-btn.primary:hover { background:color-mix(in srgb,var(--ink) 88%,var(--seal)); border-color:color-mix(in srgb,var(--ink) 88%,var(--seal)); }
.ink-btn.primary span { color:var(--on-ink-accent); margin-left:6px; }
.worker-state {
  display:flex; align-items:center; gap:7px; height:34px; color:var(--ink-faint);
  font:600 var(--text-xs) var(--mono); letter-spacing:.08em;
}
.worker-state.busy i { background:var(--warn); }
.editor-split {
  display:grid; grid-template-columns:minmax(260px,var(--split-left)) 8px minmax(260px,1fr);
  height:calc(100dvh - 250px); min-height:420px; max-height:calc(100dvh - 170px);
  position:relative;
}
.editor-split.drag-over::after {
  content:"Drop file to load"; position:absolute; inset:10px; display:grid; place-items:center;
  z-index:20; border:1px dashed var(--seal); background:var(--overlay-paper);
  color:var(--seal); font:700 12px var(--mono); letter-spacing:.12em; pointer-events:none;
}
.split-pane { min-width:0; height:100%; }
.split-resize { cursor:col-resize; position:relative; display:flex; align-items:center; justify-content:center; touch-action:none; user-select:none; }
.split-resize::before { content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.split-resize span { position:relative; width:3px; height:42px; border-radius:2px; background:var(--line-strong); }
.split-resize:hover span,.split-resize.resizing span,.split-resize:focus-visible span { background:var(--seal); }
.paper-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
/* Two-card tools hand their width split to the reader, the way the formatter's
   editor already does: the middle track is the grab bar, not a gap. */
.paper-grid.split-grid {
  gap:0; grid-template-columns:minmax(240px,var(--split-left,50%)) 10px minmax(240px,1fr);
}
.paper-grid.split-grid>.paper-card { min-width:0; }
.utility-grid { min-height:58vh; }
/* Input cards sit above the page (raised, shadowed); output cards sit in it
   (sunken, no shadow) so the two halves of a tool never read as the same. */
.paper-card {
  min-width:0; position:relative; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface-card); box-shadow:var(--shadow);
}
.paper-card.output-card { background:var(--surface-output); box-shadow:none; }
.paper-head {
  height:44px; padding:0 12px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; border-bottom:1px solid var(--line); position:relative; z-index:2;
}
.paper-head>div:first-child { display:flex; gap:8px; align-items:center; min-width:0; }
.paper-no {
  flex:0 0 auto; min-width:18px; text-align:center; color:var(--seal);
  font:600 var(--text-xs)/1 var(--mono); letter-spacing:.04em;
}
.paper-label {
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--ink-soft); font:600 var(--text-xs) var(--mono); letter-spacing:.07em; text-transform:uppercase;
}
/* A dragged split can leave a pane narrow: the label and the byte count give up
   their room first, so the actions never end up under the title. */
.paper-meta { display:flex; align-items:center; gap:14px; min-width:0; color:var(--ink-faint); font:500 var(--text-xs) var(--mono); }
.paper-meta>span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.paper-actions {
  display:flex; gap:5px; align-items:center; min-width:0; flex:0 1 auto;
  overflow-x:auto; scrollbar-width:none;
}
.paper-actions::-webkit-scrollbar { display:none; }
.paper-actions>* { flex:0 0 auto; }
.paper-actions i { display:none; }
.paper-actions button,.paper-copy {
  min-height:var(--control-h-sm); border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-raise); padding:4px 10px; color:var(--ink-soft);
  cursor:pointer; font:600 var(--text-xs) var(--sans);
  transition:color 120ms ease,border-color 120ms ease,background-color 120ms ease,transform 120ms ease;
}
.paper-actions button:hover,.paper-copy:hover {
  color:var(--seal); border-color:color-mix(in srgb,var(--seal) 38%,transparent);
  background:color-mix(in srgb,var(--seal) 6%,var(--paper-light)); transform:translateY(-1px);
}
.paper-actions button:active,.paper-copy:active { transform:translateY(0); }
.code-editor {
  width:100%; height:calc(100% - 42px); min-height:420px; resize:none; border:0; outline:0;
  display:block; background:transparent; color:var(--code-ink); padding:15px 16px; caret-color:var(--seal);
  font:450 var(--text-base)/1.62 var(--mono); tab-size:2; position:relative; z-index:1;
  white-space:pre; overflow:auto; overscroll-behavior:contain;
}
.code-editor::placeholder { color:var(--placeholder); }
.code-editor.has-lines { padding-left:48px; }
.code-editor.utility-editor { min-height:58vh; height:100%; }
.code-editor.short { min-height:120px; height:auto; resize:vertical; }
/* Stacked tools scroll the whole panel, so splitting them would only trade one
   scrollbar for another: the reader drags the report's bottom edge instead. */
.paper-card.resizable-pane>.code-editor,
.paper-card.resizable-pane>.diff-view {
  height:var(--pane-height); min-height:0; max-height:none; resize:none;
}
.pane-resize {
  height:11px; position:relative; display:flex; align-items:center; justify-content:center;
  cursor:row-resize; touch-action:none; user-select:none;
}
.pane-resize::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); }
.pane-resize span { position:relative; width:42px; height:3px; border-radius:2px; background:var(--line-strong); }
.pane-resize:hover span,.pane-resize.resizing span,.pane-resize:focus-visible span { background:var(--seal); }
.code-editor.medium { min-height:260px; height:auto; resize:vertical; }
.line-numbers {
  position:absolute; z-index:1; left:0; top:42px; bottom:0; width:36px; padding:15px 8px 15px 0;
  border-right:1px solid var(--line-soft); color:var(--gutter-ink);
  text-align:right; white-space:pre; user-select:none; pointer-events:none;
  font:450 var(--text-base)/1.62 var(--mono); overflow:hidden;
}
.paper-card.large-data .line-numbers { display:none; }
.paper-card.large-data .code-editor.has-lines { padding-left:16px; }
.editor-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:30px; }
.status-line {
  min-height:28px; display:flex; align-items:center; gap:9px; color:var(--ink-soft);
  font:500 var(--text-xs) var(--mono);
}
.status-brush { width:24px; height:1px; background:var(--line-strong); }
.status-line.ok { color:var(--moss); }
.status-line.error { color:var(--seal); }
.status-line.warn { color:var(--warn); }
.editor-hints { display:flex; gap:14px; color:var(--ink-faint); font:500 var(--text-xs) var(--mono); }
.bottom-actions { min-height:56px; display:flex; align-items:center; gap:9px; }
.sanitizer-actions { align-items:center; }
.sanitizer-coverage {
  display:flex; flex-wrap:wrap; gap:5px; max-width:340px; padding-top:15px;
}
.sanitizer-coverage span {
  padding:4px 6px; border:1px solid var(--line); border-radius:2px;
  color:var(--ink-faint); background:var(--surface-raise);
  font:650 var(--text-xs) var(--mono); letter-spacing:.08em;
}
.sanitizer-grid .code-editor { min-height:58vh; }
.meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:10px; }
.meta-item { border-top:1px solid var(--line); padding:9px 1px 4px; }
.meta-item span { color:var(--ink-faint); font:600 var(--text-xs) var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.meta-item strong { display:block; margin-top:5px; color:var(--ink); overflow-wrap:anywhere; font:500 var(--text-base)/1.5 var(--mono); }
.time-paper { border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); padding:22px 0; }
.current-time { display:grid; grid-template-columns:160px 1fr auto; align-items:center; gap:18px; }
.current-time strong { font:500 clamp(28px,4vw,46px) var(--serif); }
.time-convert { display:grid; grid-template-columns:minmax(0,1fr) 170px auto; gap:11px; margin-top:26px; }
.result-box {
  margin:20px 0 0; padding:16px 18px; min-height:110px; border-left:2px solid var(--seal);
  background:var(--surface-raise); color:var(--ink); white-space:pre-wrap; font:450 var(--text-base)/1.7 var(--mono);
}
.utility-form { padding-bottom:20px; }
.utility-form-row {
  display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;
  align-items:end; gap:14px;
}
.utility-form-row .control-group { min-width:0; }
.utility-form-row input { width:100%; }
.cron-form-row { grid-template-columns:minmax(220px,1.35fr) minmax(180px,1fr) minmax(160px,.75fr) auto; }
.result-heading { display:flex; align-items:center; justify-content:space-between; margin-top:26px; }
.result-heading .paper-actions { min-height:24px; }
.compact-result { margin-top:8px; }
.utility-form .result-box { margin-top:8px; }
.utility-output { margin-top:12px; }
.diff-input-grid .code-editor { min-height:300px; }
.diff-source-editor {
  --diff-gutter-width:calc(5ch + 8px);
  position:relative; overflow:hidden; font:450 var(--text-base)/1.62 var(--mono);
}
.diff-source-editor .line-numbers { top:0; width:var(--diff-gutter-width); }
.diff-source-editor .line-numbers pre { margin:0; font:inherit; }
.diff-source-editor .code-editor.has-lines { padding-left:calc(var(--diff-gutter-width) + 12px); }
.diff-source-editor.large-data .line-numbers { display:none; }
.diff-source-editor.large-data .code-editor.has-lines { padding-left:16px; }
.diff-mode-hint { margin:0 0 10px; color:var(--ink-soft); font:450 var(--text-xs)/1.5 var(--sans); }
.diff-output { margin-top:10px; }
.diff-view {
  min-height:360px; max-height:58vh; margin:0; padding:13px 0; overflow:auto; overscroll-behavior:contain;
  background:transparent; color:var(--code-ink); white-space:pre; tab-size:2;
  font:500 12px/1.58 var(--mono);
}
.diff-view code { display:block; min-width:max-content; font:inherit; }
.diff-line {
  display:block; position:relative; min-width:100%; padding:0 16px 0 0;
  border-left:2px solid transparent;
}
/* The change marker sits after the two line-number gutters. It is positioned
   rather than ordered so it stays a ::before of the line itself. */
.diff-line::before {
  content:" "; position:absolute; left:10ch; width:2ch; text-align:center;
  -webkit-user-select:none; user-select:none;
}
.diff-line.added::before { content:"+"; }
.diff-line.removed::before { content:"-"; }
.diff-gutter {
  display:inline-block; box-sizing:border-box; width:5ch; padding-right:1ch;
  color:var(--gutter-ink); text-align:right; -webkit-user-select:none; user-select:none;
}
.diff-sign { display:inline-block; width:2ch; -webkit-user-select:none; user-select:none; }
.diff-line.added .diff-gutter,.diff-line.removed .diff-gutter { color:var(--gutter-ink); }
.diff-line.added {
  color:var(--diff-add-ink); border-left-color:var(--diff-add-line); background:var(--diff-add-bg);
}
.diff-line.removed {
  color:var(--diff-del-ink); border-left-color:var(--diff-del-line); background:var(--diff-del-bg);
}
.diff-line.file { color:var(--diff-file-ink); background:var(--diff-file-bg); font-weight:700; }
.diff-line.meta { color:var(--diff-meta-ink); background:var(--diff-meta-bg); font-weight:650; }
.diff-line.context { color:var(--ink-soft); }
.diff-placeholder { display:block; padding:3px 16px; color:var(--placeholder); }
.diff-meta { margin-top:10px; }
.jwt-input-grid .code-editor { min-height:210px; }
.jwt-actions { border-bottom:1px solid var(--line); flex-wrap:wrap; }
.jwt-badge {
  min-width:96px; padding:5px 9px; border:1px solid var(--line-strong); border-radius:2px;
  color:var(--ink-faint); text-align:center; font:700 var(--text-xs) var(--mono); letter-spacing:.09em;
}
.jwt-badge.claims.active,.jwt-badge.signature.verified {
  color:var(--moss); border-color:var(--border-ok); background:var(--tint-ok);
}
.jwt-badge.claims.no-time-claims,.jwt-badge.signature.unsecured,
.jwt-badge.signature.unsupported,.jwt-badge.signature.unverified {
  color:var(--warn); border-color:var(--border-warn); background:var(--tint-warn);
}
.jwt-badge.claims.expired,.jwt-badge.claims.not-active,.jwt-badge.claims.future-issued,
.jwt-badge.claims.invalid,.jwt-badge.signature.failed {
  color:var(--seal); border-color:var(--border-danger); background:var(--tint-danger);
}
.jwt-skew { width:118px; }
.jwt-skew input { width:100%; }
.hash-grid .code-editor { min-height:210px; }
.hash-source.inactive { color:var(--ink-faint); background:var(--surface-disabled); cursor:not-allowed; }
.hash-file-label {
  max-width:280px; overflow:hidden; color:var(--ink-faint); text-overflow:ellipsis; white-space:nowrap;
  font:550 var(--text-xs) var(--mono);
}
.hash-options-card { min-height:253px; }
.hash-fields { display:grid; align-content:start; gap:22px; padding:23px 16px; }
.hash-fields .control-group { min-width:0; }
.hash-fields input { width:100%; padding-right:3px; }
.hash-fields input:disabled { opacity:.42; cursor:not-allowed; }
.hash-actions { border-bottom:1px solid var(--line); flex-wrap:wrap; }
.hash-badge {
  min-width:96px; padding:5px 9px; border:1px solid var(--line-strong); border-radius:2px;
  color:var(--ink-faint); text-align:center; font:700 var(--text-xs) var(--mono); letter-spacing:.09em;
}
.hash-badge.match,.hash-badge.digest {
  color:var(--moss); border-color:var(--border-ok); background:var(--tint-ok);
}
.hash-badge.mismatch,.hash-badge.invalid {
  color:var(--seal); border-color:var(--border-danger); background:var(--tint-danger);
}
.hash-progress {
  height:20px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:var(--surface-disabled); color:var(--ink-faint); font:700 var(--text-xs) var(--mono);
}
.hash-progress span {
  display:block; height:100%; background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 45%,transparent),var(--ok));
  transition:width 120ms linear;
}
.hash-progress strong { position:absolute; inset:0; display:grid; place-items:center; }
.hash-output { margin-top:10px; }
.hash-meta:empty { display:none; }
.certificate-input .code-editor { min-height:250px; }
.certificate-actions { border-bottom:1px solid var(--line); }
.certificate-badge {
  min-width:78px; padding:5px 9px; border:1px solid var(--line-strong); border-radius:2px;
  color:var(--ink-faint); text-align:center; font:700 var(--text-xs) var(--mono); letter-spacing:.08em;
}
.certificate-badge.valid { color:var(--moss); border-color:var(--border-ok); background:var(--tint-ok); }
.certificate-badge.expiring { color:var(--warn); border-color:var(--border-warn); background:var(--tint-warn); }
.certificate-badge.expired,.certificate-badge.not-yet-valid,.certificate-badge.error {
  color:var(--seal); border-color:var(--border-danger); background:var(--tint-danger);
}
.certificate-meta:empty { display:none; }
.certificate-meta .meta-item strong { max-height:64px; overflow:auto; }
.certificate-output { margin-top:10px; }
.certificate-output .code-editor { min-height:390px; }
.manifest-input .code-editor,.container-input .code-editor { min-height:390px; }
.manifest-actions,.container-actions { border-bottom:1px solid var(--line); }
.container-actions .ink-select { min-width:170px; }
.lint-badge {
  min-width:82px; padding:5px 9px; border:1px solid var(--line-strong); border-radius:2px;
  color:var(--ink-faint); text-align:center; font:700 var(--text-xs) var(--mono); letter-spacing:.08em;
}
.lint-badge.pass { color:var(--moss); border-color:var(--border-ok); background:var(--tint-ok); }
.lint-badge.warn { color:var(--warn); border-color:var(--border-warn); background:var(--tint-warn); }
.lint-badge.syntax { color:var(--warn); border-color:var(--border-warn); background:var(--tint-warn); }
.lint-badge.fail { color:var(--seal); border-color:var(--border-danger); background:var(--tint-danger); }
.lint-scope { color:var(--ink-faint); font:550 var(--text-xs) var(--mono); }
.manifest-meta:empty,.container-meta:empty { display:none; }
.manifest-output,.container-output { margin-top:10px; }
.manifest-output .code-editor,.container-output .code-editor { min-height:390px; }
.env-input-grid .code-editor { min-height:330px; }
.env-actions { border-bottom:1px solid var(--line); }
.env-meta:empty { display:none; }
.env-output { margin-top:10px; }
.env-output .code-editor { min-height:390px; }
.log-input .code-editor { min-height:390px; }
.log-source.inactive { color:var(--ink-faint); background:var(--surface-disabled); cursor:not-allowed; }
.log-file-label {
  max-width:300px; overflow:hidden; color:var(--ink-faint); text-overflow:ellipsis; white-space:nowrap;
  font:550 var(--text-xs) var(--mono);
}
.log-actions { border-bottom:1px solid var(--line); flex-wrap:wrap; }
.log-meta:empty { display:none; }
.log-output { margin-top:10px; }
.log-output .code-editor { min-height:440px; }
.markdown-grid { min-height:calc(100dvh - 240px); }
.markdown-grid .paper-card { min-height:520px; }
.markdown-textarea {
  min-height:calc(100dvh - 330px); height:calc(100% - 44px);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.markdown-preview {
  height:calc(100% - 42px); min-height:calc(100vh - 268px); padding:24px clamp(20px,3vw,42px);
  overflow:auto; color:var(--ink); overflow-wrap:anywhere; font:400 15px/1.7 var(--sans);
}
.markdown-preview>:first-child { margin-top:0; }
.markdown-preview>:last-child { margin-bottom:0; }
.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,
.markdown-preview h4,.markdown-preview h5,.markdown-preview h6 {
  margin:1.35em 0 .55em; color:var(--ink); font-family:var(--serif); line-height:1.2;
}
.markdown-preview h1 { padding-bottom:.28em; border-bottom:1px solid var(--line); font-size:2em; }
.markdown-preview h2 { padding-bottom:.22em; border-bottom:1px solid var(--line); font-size:1.55em; }
.markdown-preview h3 { font-size:1.25em; }
.markdown-preview h4 { font-size:1.08em; }
.markdown-preview h5 { font-size:.96em; letter-spacing:.025em; }
.markdown-preview h6 { color:var(--ink-faint); font-size:.88em; letter-spacing:.055em; text-transform:uppercase; }
.markdown-preview p,.markdown-preview ul,.markdown-preview ol { margin:.8em 0; }
.markdown-preview ul,.markdown-preview ol { padding-left:1.6em; }
.markdown-preview li+li { margin-top:.25em; }
.markdown-preview code {
  padding:.12em .32em; border:1px solid var(--line); border-radius:2px;
  background:var(--surface-inset); font:500 .88em/1.5 var(--mono);
}
.markdown-preview pre:not(.mermaid) {
  margin:1em 0; padding:14px 16px; overflow:auto; border:1px solid var(--line);
  border-radius:3px; background:var(--surface-inset); font:500 12px/1.65 var(--mono);
}
.markdown-preview pre:not(.mermaid) code { padding:0; border:0; background:transparent; font:inherit; }
.markdown-preview .mermaid {
  min-height:84px; margin:1.2em 0; padding:18px; overflow:auto; border:1px solid var(--line);
  border-radius:3px; background:var(--surface-raise-hover); color:var(--ink); text-align:center;
  font:500 12px/1.6 var(--mono);
}
.markdown-preview .mermaid svg { display:block; max-width:100%; height:auto; margin:auto; }
.markdown-preview .mermaid[data-mermaid-error] { color:var(--seal); text-align:left; white-space:pre-wrap; }
.markdown-preview .table-scroll { max-width:100%; margin:1.15em 0; overflow-x:auto; border:1px solid var(--line); border-radius:3px; }
.markdown-preview table { width:100%; min-width:420px; border-collapse:collapse; background:var(--surface-raise); font-size:.92em; }
.markdown-preview th,.markdown-preview td { padding:.62em .82em; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:top; }
.markdown-preview th:last-child,.markdown-preview td:last-child { border-right:0; }
.markdown-preview tbody tr:last-child td { border-bottom:0; }
.markdown-preview th { color:var(--ink); background:var(--surface-inset); font-weight:700; }
.markdown-preview .align-left { text-align:left; }
.markdown-preview .align-center { text-align:center; }
.markdown-preview .align-right { text-align:right; }
.markdown-preview a { color:var(--seal); text-underline-offset:2px; }
.markdown-preview img {
  display:block; max-width:100%; height:auto; margin:1.2em auto;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-card);
}
.markdown-preview input[type=checkbox] { width:auto; height:auto; margin-right:.45em; accent-color:var(--seal); }
/* --- Document actions (PDF import / print) -------------------------------- */
.document-actions { flex-wrap:wrap; align-items:center; gap:10px; }
.pdf-file-label {
  display:inline-flex; align-items:center; justify-content:center; min-width:124px;
}
.pdf-file-label:hover { background:var(--surface-raise-hover); }

/* An inline label keeps the row on one baseline; a label stacked above a single
   control left the whole bar looking half-aligned. */
.inline-field { display:flex; align-items:center; gap:8px; min-width:0; }
.inline-label {
  color:var(--ink-faint); font:600 var(--text-xs) var(--mono);
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
.inline-field .ink-select { min-width:172px; }

.file-chip {
  display:inline-flex; align-items:center; gap:8px; max-width:min(320px,32vw);
  height:var(--control-h-sm); padding:0 12px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface-raise); color:var(--ink-soft);
  font:500 var(--text-xs) var(--mono);
}
.file-chip i {
  flex:0 0 auto; color:var(--seal); font:600 var(--text-2xs) var(--mono);
  font-style:normal; letter-spacing:.08em;
}
.file-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.action-divider { flex:0 0 auto; width:1px; height:22px; background:var(--line-strong); }
.pdf-meta:empty { display:none; }

/* The preview is laid out as the page that will be printed: one column, page
   width, page margins. Its colours stay with the app's theme on screen - a
   white sheet in a dark workspace is unpleasant to write against - and the
   printed palette is applied in the print block below. */
.print-sheet {
  max-width:190mm; min-height:60vh; margin:0 auto; padding:16mm 14mm;
  font:400 11.5pt/1.6 var(--serif);
}
.print-sheet h1,.print-sheet h2,.print-sheet h3,
.print-sheet h4,.print-sheet h5,.print-sheet h6 { font-family:var(--sans); }

@media print {
  /* One printed artefact: the sheet. Everything the app draws around it is
     screen furniture, and the browser's own PDF export handles the rest. */
  @page { margin:16mm 14mm; }
  html,body { height:auto; overflow:visible; background:#fff; }
  body::before { display:none; }
  .site-header,.tool-rail,.rail-resize,.split-resize,.pane-resize,.workspace-head,.command-backdrop,
  .skip-link,.no-print { display:none !important; }
  .app-root,.layout,.workspace,.tool-panel.active,.paper-grid {
    display:block !important; height:auto !important; max-height:none !important;
    min-height:0 !important; overflow:visible !important; padding:0 !important;
    margin:0 !important; background:#fff !important;
  }
  .paper-card.markdown-output {
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    overflow:visible !important; background:#fff !important;
  }
  /* Ink on paper, whichever theme the writer was using. */
  .print-sheet {
    --paper:#fff; --paper-light:#fff;
    --ink:#15171a; --ink-soft:#3c4149; --ink-faint:#5d636b; --ink-muted:#6f757d;
    --line:rgba(20,22,26,.16); --line-strong:rgba(20,22,26,.3); --line-soft:rgba(20,22,26,.08);
    --surface-card:#fff; --surface-raise:#f4f4f2; --surface-inset:rgba(20,22,26,.05);
    --seal:#8f382c; --code-ink:#1c1f24;
    max-width:none; min-height:0; margin:0; padding:0;
    color:var(--ink); background:#fff; font-size:11pt; overflow:visible;
  }
  .print-sheet h1,.print-sheet h2,.print-sheet h3,
  .print-sheet h4,.print-sheet h5,.print-sheet h6 {
    break-after:avoid-page; page-break-after:avoid; color:#000;
  }
  .print-sheet p,.print-sheet li { orphans:3; widows:3; }
  .print-sheet pre,.print-sheet table,.print-sheet .mermaid,.print-sheet blockquote {
    break-inside:avoid; page-break-inside:avoid;
  }
  .print-sheet .table-scroll { overflow:visible !important; }
  .print-sheet img,.print-sheet svg { max-width:100%; }
  .print-sheet a { color:#000; text-decoration:underline; }
  /* A printed link is useless without its target. */
  .print-sheet a[href^="http"]::after {
    content:" (" attr(href) ")"; font-size:.82em; color:#444; word-break:break-all;
  }
}

.release-dialog {
  width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px);
  margin:auto; padding:clamp(20px,5vw,32px); overflow-y:auto;
  border:1px solid var(--line-strong); border-top:3px solid var(--seal);
  border-radius:var(--radius-sm); color:var(--ink); background:var(--surface-dialog);
  box-shadow:var(--shadow-dialog); font-family:var(--sans);
}
.release-dialog::backdrop { background:var(--overlay-scrim); backdrop-filter:blur(5px); }
.release-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.release-kicker { color:var(--seal); font:700 var(--text-xs) var(--mono); letter-spacing:.12em; }
.release-version { color:var(--ink-faint); font:600 var(--text-xs) var(--mono); }
.release-dialog h2 { margin:20px 0 12px; font:650 clamp(22px,5vw,28px)/1.2 var(--sans); letter-spacing:-.035em; }
.release-dialog p,.release-features { color:var(--ink-soft); font:450 var(--text-base)/1.65 var(--sans); }
.release-features { padding-left:20px; margin:18px 0; }
.release-features li + li { margin-top:8px; }
.release-dialog .release-tip { padding-top:16px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:var(--text-sm); }
.release-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:24px; }

.command-backdrop {
  position:fixed; inset:0; z-index:100; display:grid; place-items:start center;
  padding:clamp(48px,14vh,132px) 16px 28px; overflow-y:auto;
  background:
    radial-gradient(ellipse at 50% 16%,color-mix(in srgb,var(--paper) 24%,transparent) 0,transparent 37%),
    radial-gradient(ellipse at 18% 78%,rgba(13,18,14,.24) 0,transparent 32%),
    var(--overlay-scrim);
  backdrop-filter:blur(8px) saturate(.68);
  animation:command-backdrop-in 180ms ease-out both;
}
.command-dialog {
  width:min(570px,100%); position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line-strong); color:var(--ink);
  background:
    linear-gradient(102deg,color-mix(in srgb,var(--ink) 4%,transparent),transparent 17%,var(--surface-raise) 52%,transparent 82%),
    var(--surface-dialog);
  box-shadow:var(--shadow-dialog);
  animation:command-dialog-in 240ms cubic-bezier(.2,.8,.2,1) both;
}
.command-dialog::before {
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.52;
  background:
    radial-gradient(ellipse at 103% 8%,color-mix(in srgb,var(--ink) 18%,transparent),transparent 29%),
    radial-gradient(ellipse at -7% 93%,color-mix(in srgb,var(--ink) 12%,transparent),transparent 31%),
    repeating-linear-gradient(0deg,var(--grain-1) 0 1px,transparent 1px 4px);
  mix-blend-mode:multiply;
}
.command-dialog::after {
  content:""; position:absolute; z-index:4; top:0; left:6%; width:45%; height:3px;
  pointer-events:none; opacity:.75;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12% 67%,var(--line) 88%,transparent);
  filter:blur(.25px);
}
.command-heading {
  min-height:84px; display:flex; align-items:center; justify-content:space-between;
  padding:15px 22px 12px 24px; position:relative;
}
.command-heading::after {
  content:""; position:absolute; left:24px; right:24px; bottom:0; height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 34%,transparent),color-mix(in srgb,var(--ink) 11%,transparent) 72%,transparent);
}
.command-title { display:block; }
.command-kicker {
  display:block; margin-bottom:3px; color:var(--seal);
  font:700 var(--text-xs) var(--mono); letter-spacing:.1em;
}
.command-title strong {
  font:500 27px/.95 var(--serif); letter-spacing:.035em;
  text-shadow:none;
}
.command-seal {
  width:38px; height:38px; display:grid; place-items:center; transform:rotate(-2deg);
  border:2px double var(--seal); color:var(--seal); background:var(--tint-accent);
  box-shadow:inset 0 0 0 3px var(--surface-dialog);
  font:600 20px/1 var(--serif);
}
.command-search {
  min-height:52px; display:grid; grid-template-columns:32px 1fr auto; align-items:center;
  margin:10px 16px 5px; padding:0 9px; border:1px solid var(--line);
  background:var(--surface-raise);
  box-shadow:inset 0 1px 0 var(--surface-raise-hover);
  transition:border-color 150ms ease,box-shadow 150ms ease,background-color 150ms ease;
}
.command-search:focus-within {
  border-color:var(--border-danger); background:var(--surface-raise);
  box-shadow:inset 3px 0 0 var(--seal),var(--shadow);
}
.command-search-mark {
  width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:var(--seal);
  background:radial-gradient(circle,var(--tint-danger),transparent 70%); font:20px var(--serif);
}
.command-search input {
  width:100%; height:48px; border:0; padding:0 8px; color:var(--ink); background:transparent;
  font:500 13px var(--sans);
}
.command-search input:focus-visible { outline:0; }
.command-search input::placeholder { color:var(--placeholder); font-style:italic; }
.command-search button {
  border:1px solid var(--line); border-radius:2px; background:var(--surface-raise); color:var(--ink-faint);
  padding:5px 7px; cursor:pointer; font:650 var(--text-xs) var(--mono); letter-spacing:.08em;
}
.command-search button:hover { color:var(--seal); border-color:var(--border-danger); }
.command-results {
  max-height:min(360px,43vh); overflow-y:auto; padding:6px 16px 8px;
}
.command-result {
  width:100%; min-height:51px; display:grid; grid-template-columns:36px 1fr auto; align-items:center;
  gap:10px; position:relative; isolation:isolate; padding:6px 11px 6px 7px; overflow:hidden;
  border:0; border-bottom:1px solid var(--line-soft); background:transparent; color:var(--ink);
  text-align:left; cursor:pointer; transition:color 140ms ease,transform 140ms ease;
}
.command-result::before {
  content:""; position:absolute; z-index:-1; inset:3px 0; opacity:0; transform:scaleX(.88); transform-origin:left;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--ink) 12%,transparent),color-mix(in srgb,var(--ink) 4%,transparent) 76%,transparent),
    radial-gradient(ellipse at 15% 50%,color-mix(in srgb,var(--ink) 10%,transparent),transparent 72%);
  transition:opacity 140ms ease,transform 180ms ease;
}
.command-result::after {
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  background:var(--seal); opacity:0; transform:scaleY(.35); transition:opacity 140ms ease,transform 160ms ease;
}
.command-result:hover::before,.command-result.selected::before { opacity:1; transform:scaleX(1); }
.command-result:hover::after,.command-result.selected::after { opacity:.78; transform:scaleY(1); }
.command-result:hover,.command-result.selected { transform:translateX(1px); }
.command-result b { display:block; color:var(--ink); font:600 var(--text-base) var(--sans); letter-spacing:.01em; }
.command-result small { display:block; color:var(--ink-faint); margin-top:3px; font:450 var(--text-xs) var(--mono); letter-spacing:.02em; }
.command-result .glyph {
  width:32px; height:32px; display:grid; place-items:center; position:relative; color:var(--seal);
  border:1px solid var(--border-danger); font:750 11px/1 var(--mono); letter-spacing:-.04em;
}
.command-result.selected .glyph { border-color:var(--border-danger); background:var(--tint-accent); }
.command-result-no { color:var(--ink-muted); font:500 var(--text-xs) var(--mono); letter-spacing:.12em; }
.command-result.selected .command-result-no { color:var(--seal); }
.command-empty {
  min-height:108px; display:grid; place-items:center; padding:18px 12px; color:var(--ink-faint);
  font:italic 12px var(--serif);
}
.command-foot {
  min-height:37px; display:flex; align-items:center; gap:13px; padding:0 22px;
  border-top:1px solid var(--line); color:var(--ink-faint); font:600 var(--text-xs) var(--mono);
  letter-spacing:.08em; text-transform:uppercase;
}
.command-foot span { display:flex; align-items:center; gap:5px; }
.command-foot kbd { min-width:22px; text-align:center; background:var(--surface-raise); }
.command-foot i { flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
@keyframes command-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes command-dialog-in {
  from { opacity:0; transform:translateY(-10px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.visually-hidden {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
.app-root.focus-mode .site-header,
.app-root.focus-mode .tool-rail,
.app-root.focus-mode .rail-resize,
.app-root.focus-mode .workspace-head { display:none; }
.app-root.focus-mode { grid-template-rows:minmax(0,1fr); }
.app-root.focus-mode .layout { display:block; height:100%; min-height:0; }
.app-root.focus-mode .workspace { --workspace-right-padding:16px; padding:14px 16px; }
.app-root.focus-mode .editor-split { height:calc(100dvh - 92px); max-height:none; min-height:0; }
@media(max-width:900px) {
  .nav-order-label { display:none; }
  .rail-foot { flex-wrap:wrap; }
  .nav-order-toggle { margin-left:0; }
  .layout:has(.is-reordering) { grid-template-columns:250px minmax(0,1fr); }
  .is-reordering .nav-copy { display:block; }
  .is-reordering .nav-item { justify-items:stretch; }
  .layout { grid-template-columns:72px minmax(0,1fr); }
  .tool-rail { padding:12px 10px; }
  .rail-resize,.nav-copy,.nav-divider,.rail-search { display:none; }
  .rail-heading { justify-content:center; margin-bottom:8px; }
  .rail-heading>span,.rail-actions button:first-child { display:none; }
  .nav-item { grid-template-columns:1fr; justify-items:center; }
  .rail-foot { justify-content:center; }
  .rail-foot a { display:none; }
  .workspace { --workspace-right-padding:18px; padding-left:18px; padding-right:18px; }
  .paper-grid { grid-template-columns:1fr; }
  .paper-grid.split-grid { grid-template-columns:1fr; gap:10px; }
  .markdown-grid { min-height:0; }
  .markdown-grid .paper-card { min-height:420px; }
  .markdown-textarea,.markdown-preview { min-height:378px; }
  .editor-split { height:auto; max-height:none; grid-template-columns:1fr; gap:10px; }
  .split-resize { display:none; }
  .split-pane { height:50vh; min-height:360px; }
  .worker-state { display:none; }
  .utility-form-row,.cron-form-row { grid-template-columns:1fr 1fr; }
}
@media(max-width:650px) {
  .app-root { grid-template-rows:62px minmax(0,1fr); }
  .site-header { height:100%; padding:0 14px; }
  .header-action,.back-link { display:none; }
  .layout { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
  .tool-rail {
    position:relative; z-index:20; flex:0 0 53px; width:100%; height:53px; padding:7px 10px;
    overflow:hidden; border-right:0; border-bottom:1px solid var(--line);
    background:var(--overlay-paper); backdrop-filter:blur(10px);
  }
  .tool-rail { grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:1fr; gap:8px; }
  .rail-heading { margin:0; align-self:center; }
  .tool-rail.is-reordering .rail-heading { display:none; }
  .tool-nav { width:100%; min-width:0; flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .rail-navigation { overflow:hidden; }
  .nav-row .nav-item { flex:0 0 auto; min-width:62px; }
  .rail-foot { flex-wrap:nowrap; }
  .tool-rail.is-reordering {
    flex-basis: min(55vh,360px); height:min(55vh,360px);
    grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
  }
  .is-reordering .tool-nav { flex-direction:column; overflow-x:hidden; overflow-y:auto; }
  .is-reordering .nav-row .nav-item { flex:1; }
  .is-reordering .nav-order-actions { flex-direction:row; }
  .is-reordering .nav-order-actions .key-hint { min-width:44px; min-height:44px; }
  .is-reordering .nav-order-label { display:inline; }
  .is-reordering .nav-order-toggle { margin-left:auto; min-height:32px; }
  .tool-rail.is-reordering .rail-foot { border-left:0; border-top:1px solid var(--line); padding:5px 0 0; }
  .nav-item { width:auto; min-width:62px; min-height:40px; padding:6px 10px; }
  .nav-item.active::before { top:5px; bottom:5px; }
  .rail-foot,.layout.rail-collapsed .rail-foot {
    height:100%; min-height:0; margin:0; padding:0 0 0 8px; justify-content:flex-start;
    border-top:0; border-left:1px solid var(--line);
  }
  .rail-foot a,.layout.rail-collapsed .rail-foot a { display:inline; }
  .copyright-mark { width:22px; height:22px; font-size:11px; }
  .workspace { --workspace-right-padding:8px; flex:1 1 auto; width:100%; height:auto; min-height:0; padding:12px 8px 8px 12px; }
  .workspace-head { min-height:37px; margin-bottom:6px; }
  .action-bar { display:grid; grid-template-columns:1fr 1fr; }
  .control-group,.control-group.small { min-width:0; }
  .action-spacer { display:none; }
  .action-bar .ink-btn.primary { grid-column:span 2; }
  .sanitizer-coverage { display:none; }
  .editor-hints,.paper-meta>span { display:none; }
  .current-time,.time-convert { grid-template-columns:1fr; }
  .utility-form-row,.cron-form-row { grid-template-columns:1fr; }
  .diff-actions { grid-template-columns:1fr 1fr; }
  .diff-actions .ink-btn.primary { grid-column:span 2; }
  .diff-context-group { grid-column:span 2; }
  .meta-grid.diff-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lint-scope { display:none; }
  .manifest-actions,.container-actions,.env-actions,.log-actions { flex-wrap:wrap; }
  .manifest-actions .ink-btn.primary,.container-actions .ink-btn.primary,
  .env-actions .ink-btn.primary,.log-actions .ink-btn.primary { margin-left:auto; }
  .meta-grid { grid-template-columns:1fr; }
  .command-backdrop { padding:28px 10px 18px; align-items:start; }
  .command-heading { min-height:79px; padding:14px 17px 11px; }
  .command-heading::after { left:17px; right:17px; }
  .command-title strong { font-size:25px; }
  .command-seal { width:35px; height:35px; font-size:17px; }
  .command-search { margin-left:9px; margin-right:9px; }
  .command-results { max-height:calc(100vh - 238px); padding-left:9px; padding-right:9px; }
  .command-foot { padding:0 14px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.001s!important; animation-duration:.001s!important; }
}

.worker-state.busy i { background:var(--warn); }

/* Mindmap controls float above the canvas instead of reserving rows. */
.mindmap-tool { position:relative; isolation:isolate; min-height:280px; height:100%; }
.mindmap-actions,.mindmap-zoom {
  position:absolute; z-index:3; display:flex; align-items:center; gap:2px; padding:4px;
  border:1px solid var(--line-strong); border-radius:9px; background:var(--paper-light); box-shadow:var(--shadow);
}
.mindmap-actions { top:12px; left:12px; }
.mindmap-tool .ink-btn { height:28px; min-width:28px; padding:0 7px; font-size:var(--text-xs); }
.mindmap-actions>.ink-btn { width:28px; padding:0; font-size:17px; }
.mindmap-actions>.ink-btn.primary { min-width:28px; }
.mindmap-actions>.ink-btn:not(.primary),.mindmap-zoom>.ink-btn { border-color:transparent; background:transparent; }
.mindmap-actions>.ink-btn:hover,.mindmap-zoom>.ink-btn:hover { background:var(--surface-raise-hover); }
.mindmap-menu-panel {
  position:absolute; left:0; top:calc(100% + 6px); width:260px; max-width:calc(100vw - 50px);
  max-height:calc(100dvh - 240px); overflow:auto; padding:5px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--surface-dialog); box-shadow:var(--shadow-pop);
}
.mindmap-menu-panel button {
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:32px;
  padding:7px 9px; border:0; border-radius:5px; background:transparent; color:var(--ink); text-align:left;
  font:500 var(--text-xs) var(--sans); cursor:pointer;
}
.mindmap-menu-panel button:hover { background:var(--surface-raise-hover); }
.mindmap-menu-panel button:disabled { opacity:.4; cursor:not-allowed; }
.mindmap-menu-panel kbd { color:var(--ink-faint); font:400 var(--text-xs) var(--mono); white-space:nowrap; }
.mindmap-menu-panel hr { margin:4px 6px; border:0; border-top:1px solid var(--line); }
/* An unbounded canvas: the drawing is translated and scaled, never scrolled.
   The dot grid's size and offset follow the camera inline. */
.mindmap-canvas {
  position:relative; display:block; width:100%; height:100%; min-height:280px; overflow:hidden; overflow:clip;
  touch-action:none; border:1px solid var(--line-strong); border-radius:12px; cursor:grab;
  background-color:var(--paper-light);
  background-image:radial-gradient(var(--line-strong) .7px,transparent .7px);
  background-size:20px 20px;
}
.mindmap-canvas:focus-visible { outline:2px solid var(--seal); outline-offset:2px; }
.mindmap-canvas.dragging { cursor:grabbing; user-select:none; }
.mindmap-canvas.space-pan:not(.dragging), .mindmap-canvas.space-pan:not(.dragging) .mindmap-topic { cursor:grab; }
.mindmap-drawing { position:absolute; left:0; top:0; transform-origin:0 0; }
.mindmap-edges { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.branch-0 { --branch:var(--seal); }
.branch-1 { --branch:var(--ok); }
.branch-2 { --branch:var(--ink-soft); }
.branch-3 { --branch:var(--warn); }
.branch-4 { --branch:var(--ink-faint); }
.mindmap-branch { fill:none; stroke:var(--branch); stroke-width:2; stroke-linecap:round; opacity:.7; }
.mindmap-arrow { fill:var(--branch); opacity:.7; }
.mindmap-topic {
  position:absolute; width:216px; height:76px; resize:none; padding:11px 16px;
  border:1px solid color-mix(in srgb,var(--branch) 65%,var(--line)); border-radius:12px;
  background:var(--paper); color:var(--ink); box-shadow:0 3px 12px var(--line-soft);
  text-align:center; align-content:center; font:550 14px/18px var(--sans); overflow:hidden; cursor:text;
  transition:border-color 120ms,box-shadow 120ms;
}
.mindmap-topic:hover { border-color:var(--branch); }
.mindmap-topic.selected { box-shadow:0 0 0 3px color-mix(in srgb,var(--branch) 18%,transparent); border-color:var(--branch); }
.mindmap-topic:focus-visible { outline:2px solid var(--branch); outline-offset:3px; }
.mindmap-topic.mindmap-root { background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:650; }
.mindmap-root::placeholder { color:var(--paper); }
.mindmap-footer {
  position:absolute; z-index:2; left:14px; bottom:12px; max-width:calc(100% - 190px);
  display:flex; align-items:center; flex-wrap:wrap; gap:3px 10px; pointer-events:none;
  padding:3px 6px; border-radius:5px; background:var(--overlay-paper); font-size:var(--text-xs); color:var(--ink-faint);
}
.mindmap-save { color:var(--ink-soft); }
.mindmap-count { color:var(--ink-faint); font-family:var(--mono); }
.mindmap-notice { flex-basis:100%; margin:0; color:var(--ink-faint); font-size:var(--text-xs); line-height:1.4; }
.mindmap-zoom { right:12px; bottom:12px; }
.mindmap-zoom>.mindmap-zoom-level { width:48px; padding:0; font-family:var(--mono); font-weight:500; }
.mindmap-help {
  position:absolute; z-index:4; top:56px; left:12px; width:390px; max-width:calc(100% - 24px);
  max-height:calc(100% - 76px); overflow:auto; border:1px solid var(--line-strong); border-radius:9px;
  padding:12px 14px; background:var(--surface-dialog); box-shadow:var(--shadow-pop); font-size:var(--text-xs); color:var(--ink-soft);
}
.mindmap-help header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--ink); }
.mindmap-help dl { margin:0 0 12px; }
.mindmap-help dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line-soft); }
.mindmap-help dd { margin:0; text-align:right; }
.mindmap-help kbd { font:400 var(--text-xs) var(--mono); color:var(--ink-faint); }
.mindmap-help p { margin:0 0 8px; line-height:1.6; }
@media(max-width:700px) {
  .mindmap-actions { top:8px; left:8px; }
  .mindmap-zoom { right:8px; bottom:8px; }
  .mindmap-footer { left:8px; bottom:54px; max-width:calc(100% - 16px); }
  .mindmap-help { top:58px; left:8px; max-width:calc(100% - 16px); }
}
@media(pointer:coarse) {
  .mindmap-tool .ink-btn { height:36px; min-width:36px; }
  .mindmap-actions>.ink-btn { width:36px; }
  .mindmap-menu-panel button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .mindmap-topic { transition:none; } }

.mindmap-topic:not(:focus) { cursor:grab; touch-action:none; }
.mindmap-canvas.dragging .mindmap-topic { cursor:grabbing; }

/* Encrypted clip sharing sits above the existing Config Diff panes. */
.clip-panel { border:1px solid var(--line); border-radius:6px; margin-bottom:12px; padding:10px 12px; font-size:12px; }
.clip-panel summary { cursor:pointer; color:var(--ink-soft); }
.clip-panel[open] summary { margin-bottom:8px; color:var(--ink); }
.clip-panel .diff-mode-hint { margin:0 0 10px; line-height:1.6; }
.clip-controls { display:grid; grid-template-columns:minmax(110px,.9fr) minmax(280px,2.1fr) minmax(96px,.7fr) auto; align-items:end; gap:10px; }
.clip-key-row { display:flex; min-width:0; gap:6px; }
.clip-key-row .ink-btn { padding:0 9px; }
.clip-key-row .clip-input { flex:1; min-width:0; }
.clip-field { display:flex; flex-direction:column; min-width:0; gap:4px; }
/* The shared listbox carries its own min-width, which overflows this grid track
   and collides with the buttons unless the field overrides it. */
.clip-field .ink-select { width:100%; min-width:0; }
.clip-panel .field-label { margin:0; font-size:10px; line-height:1.3; }
.clip-input { width:100%; min-width:0; height:32px; padding:5px 8px; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:4px; font:inherit; font-size:13px; }
.clip-input:focus-visible { outline:2px solid var(--ink-muted); outline-offset:2px; }
.clip-input:disabled { color:var(--ink-soft); }
.clip-panel .ink-btn { height:32px; padding:0 11px; font-size:12px; white-space:nowrap; }
.clip-actions { display:flex; gap:6px; }
.clip-status { margin:10px 0 0; min-width:0; line-height:1.5; overflow-wrap:anywhere; color:var(--ink-soft); }
.clip-status[data-tone="ok"] { color:var(--ok); }
.clip-status[data-tone="error"] { color:var(--warn); }
@media(max-width:700px) {
  .clip-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .clip-actions .ink-btn { flex:1; }
  .clip-panel { padding:10px; }
}
@media(pointer:coarse) {
  .clip-panel .ink-btn, .clip-input { min-height:40px; }
}
.config-diff-tool textarea[readonly] { cursor: text; }

/* Wide invisible strokes keep connections easy to select at any zoom level. */
.mindmap-edge-hit { fill:none; stroke:transparent; stroke-width:18; pointer-events:stroke; cursor:pointer; vector-effect:non-scaling-stroke; }
.mindmap-edge-hit:focus-visible { outline:none; stroke:var(--branch); stroke-width:5; stroke-opacity:.3; }
.mindmap-branch.selected { stroke-width:4; opacity:1; filter:drop-shadow(0 0 3px var(--branch)); }
.mindmap-arrow.selected { opacity:1; }
.mindmap-actions>.ink-btn.active { background:var(--ink); color:var(--paper); }
.mindmap-canvas.connecting .mindmap-topic { cursor:crosshair; }
.mindmap-topic.connection-source { outline:2px dashed var(--branch); outline-offset:5px; }

/* Connection handle, link preview, drop ghost and snap guides. The handle is
   counter-scaled so it stays an easy 18px target at any zoom. */
.mindmap-handle {
  position:absolute; z-index:2; width:18px; height:18px; border:2px solid var(--paper); border-radius:50%;
  background:var(--seal); box-shadow:0 1px 4px var(--line-strong); cursor:crosshair; touch-action:none; transform-origin:0 50%;
}
.mindmap-handle::after { content:""; position:absolute; inset:-9px; border-radius:50%; }
.mindmap-handle:hover { background:var(--ink); }
.mindmap-canvas.linking, .mindmap-canvas.linking .mindmap-topic { cursor:crosshair; }
.mindmap-link-preview { fill:none; stroke:var(--seal); stroke-width:2; stroke-dasharray:6 5; }
.mindmap-link-arrow { fill:var(--seal); }
.mindmap-ghost {
  position:absolute; width:216px; height:76px; border:2px dashed var(--seal); border-radius:12px;
  background:color-mix(in srgb,var(--seal) 7%,transparent); pointer-events:none;
}
.mindmap-topic.link-target { outline:3px solid var(--seal); outline-offset:3px; }
.mindmap-guide { fill:none; stroke:var(--seal); stroke-width:1; stroke-dasharray:4 4; opacity:.8; }
.mindmap-marquee { fill:color-mix(in srgb,var(--seal) 12%,transparent); stroke:var(--seal); stroke-width:1; stroke-dasharray:4 3; pointer-events:none; }
@media(pointer:coarse) { .mindmap-handle { width:26px; height:26px; } }

/* Grok debugger */
.grok-workspace { display:flex; flex-direction:column; gap:16px; min-width:0; }
.grok-toolbar { margin:0; flex-wrap:wrap; }
.grok-pattern { min-height:96px; height:112px; }
.grok-options { display:flex; flex-wrap:wrap; gap:12px 24px; padding:12px 16px; border-top:1px solid var(--line); }
.grok-options label { display:flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--ink-soft); }
.grok-library { border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-card); padding:12px 16px; }
.grok-library summary { cursor:pointer; font-size:var(--text-sm); color:var(--ink-soft); }
.grok-search { width:100%; margin:12px 0; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--paper-light); color:var(--ink); font:inherit; }
.grok-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.grok-suggestions button { font-family:var(--mono); font-size:var(--text-xs); }
.grok-help { margin:12px 0 0; padding:0 4px; font-size:var(--text-sm); line-height:1.6; color:var(--ink-faint); }
.grok-inputs, .grok-results { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.grok-summary { font:600 var(--text-xs) var(--mono); color:var(--ink-soft); letter-spacing:.02em; }
.grok-summary.ok { color:var(--ok); }
.grok-summary.warn { color:var(--warn); }
.grok-summary.error { color:var(--seal); }
.grok-preview { min-height:240px; max-height:400px; overflow:auto; padding:12px; }
.grok-line { display:grid; grid-template-columns:24px 66px minmax(0,1fr); gap:8px; padding:6px 8px; align-items:baseline; border-left:2px solid transparent; border-radius:var(--radius-sm); }
.grok-line:not(.grok-unmatched) { background:var(--tint-ok); border-left-color:var(--border-ok); }
.grok-unmatched { background:var(--tint-danger); border-left-color:var(--border-danger); }
.grok-line-number { color:var(--ink-faint); font:var(--text-xs) var(--mono); }
.grok-match-label { color:var(--ok); font:700 var(--text-2xs) var(--mono); letter-spacing:.04em; }
.grok-unmatched .grok-match-label { color:var(--seal); }
.grok-line code { white-space:pre-wrap; overflow-wrap:anywhere; font:var(--text-sm)/1.7 var(--mono); }
.grok-highlight { background:var(--diff-add-bg); color:var(--diff-add-ink); box-shadow:inset 0 0 0 1px var(--diff-add-line); border-radius:3px; padding:0 2px; font-weight:600; }
.grok-unmatched code { color:var(--ink-faint); }
.grok-results .grok-help { padding:0 16px 12px; }
.grok-expanded { height:140px; margin-top:12px; overflow-wrap:anywhere; }
@media (max-width:800px) { .grok-inputs, .grok-results { grid-template-columns:minmax(0,1fr); } }

/* A quiet companion, outside the app grid. All artwork stays inside its hit box. */
.monk-sticker {
  --monk-outline:#685749; --monk-skin:#ebd2b7; --monk-robe:#b5a080;
  --monk-wood:#bb8c60; --monk-blush:#c99079; --monk-highlight:#f7e9d5;
  position:fixed; right:24px; bottom:24px; z-index:9999;
  width:min(104px,100vw); height:min(104px,100dvh); padding:0; border:0;
  border-radius:12px; background:transparent; color:var(--ink-soft);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  overflow:hidden; contain:layout style; transition-property:none;
}
.monk-sticker.dragging { cursor:grabbing; }
.monk-sticker[hidden] { display:none; }
.monk-sticker:focus-visible { outline-offset:-2px; }
.monk-sticker > * { pointer-events:none; }
.monk-art { display:block; width:100%; height:100%; stroke:var(--monk-outline); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.monk-shadow { fill:var(--ink); stroke:none; opacity:.08; }
.monk-robe { fill:var(--monk-robe); }
.monk-skin { fill:var(--monk-skin); }
.monk-wood { fill:var(--monk-wood); }
.monk-cushion { fill:var(--moss); }
.monk-fold,.monk-carving { opacity:.6; }
.monk-highlight { stroke:var(--monk-highlight); stroke-width:2.5; }
.monk-cheek { stroke:var(--monk-blush); stroke-width:2.5; opacity:.55; }
.monk-dot { fill:var(--monk-outline); stroke:none; opacity:.5; }
.monk-stick { stroke-width:3.5; }
.monk-body { transform-origin:51px 99px; }
.monk-head { transform-origin:51px 62px; }
.monk-arm { transform-origin:65px 70px; }
.monk-mallet { transform-origin:74px 74px; }
.monk-motion { stroke:var(--warn); opacity:0; }
.monk-sticker.reacting .monk-arm { animation:monk-quick-tap var(--monk-tap-duration,180ms) ease-out; }
.monk-sticker.reacting .monk-mallet { animation:monk-quick-tip var(--monk-tap-duration,180ms) ease-out; }
.monk-sticker.reacting .monk-head { animation:monk-quick-nod var(--monk-tap-duration,180ms) ease-out; }
.monk-sticker.reacting .monk-body { animation:monk-quick-bounce var(--monk-tap-duration,180ms) ease-out; }
.monk-sticker.reacting .monk-motion { animation:monk-quick-impact var(--monk-tap-duration,180ms) ease-out; }
.monk-sticker.reacting.tap-alternate .monk-arm { animation-name:monk-quick-tap-alt; }
.monk-sticker.reacting.tap-alternate .monk-mallet { animation-name:monk-quick-tip-alt; }
.monk-sticker.reacting.tap-alternate .monk-head { animation-name:monk-quick-nod-alt; }
.monk-sticker.reacting.tap-alternate .monk-body { animation-name:monk-quick-bounce-alt; }
.monk-sticker.reacting.tap-alternate .monk-motion { animation-name:monk-quick-impact-alt; }
.monk-sticker.dragging .monk-art * { animation-play-state:paused; }
/* Strike at the input, then recoil once. Paired names allow immediate restart
   even during rapid input, with no forced reflow or queued strikes. */
@keyframes monk-quick-tap { 0% { transform:rotate(30deg); } 45% { transform:rotate(-18deg); } 100% { transform:rotate(0); } }
@keyframes monk-quick-tap-alt { 0% { transform:rotate(30deg); } 45% { transform:rotate(-18deg); } 100% { transform:rotate(0); } }
@keyframes monk-quick-tip { 0% { transform:rotate(7deg); } 45% { transform:rotate(-8deg); } 100% { transform:rotate(0); } }
@keyframes monk-quick-tip-alt { 0% { transform:rotate(7deg); } 45% { transform:rotate(-8deg); } 100% { transform:rotate(0); } }
@keyframes monk-quick-nod { 0% { transform:rotate(3deg); } 100% { transform:rotate(0); } }
@keyframes monk-quick-nod-alt { 0% { transform:rotate(3deg); } 100% { transform:rotate(0); } }
@keyframes monk-quick-bounce { 0% { transform:translateY(1px); } 100% { transform:translateY(0); } }
@keyframes monk-quick-bounce-alt { 0% { transform:translateY(1px); } 100% { transform:translateY(0); } }
@keyframes monk-quick-impact { 0% { opacity:.7; } 100% { opacity:0; } }
@keyframes monk-quick-impact-alt { 0% { opacity:.7; } 100% { opacity:0; } }
@media (max-width:600px) {
  .monk-sticker { width:min(84px,100vw); height:min(84px,100dvh); right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .monk-sticker .monk-art * { animation:none !important; }
}

.grok-options select { max-width:100%; padding:5px 8px; color:var(--ink); background:var(--paper-light); border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:inherit; }

/* ==========================================================================
   Draw — a hand-drawn diagram canvas.
   The controls float over the canvas instead of reserving rows, so the drawing
   surface is the whole panel. Geometry comes from Rust as SVG path data; these
   rules only carry colour, weight and the chrome around it.
   ========================================================================== */
.draw-tool { position:relative; isolation:isolate; min-height:320px; height:100%; }
/* Palette index 0 follows the interface ink, so a drawing reads in both themes. */
.draw-tool { --draw-ink:var(--ink); }
.draw-toolbar,.draw-actions,.draw-zoom,.draw-panel {
  position:absolute; z-index:3; display:flex; align-items:center; gap:2px; padding:4px;
  border:1px solid var(--line-strong); border-radius:9px; background:var(--paper-light); box-shadow:var(--shadow);
}
.draw-toolbar { top:12px; left:50%; transform:translateX(-50%); max-width:calc(100% - 24px); flex-wrap:wrap; justify-content:center; }
.draw-actions { top:12px; left:12px; }
.draw-zoom { right:12px; bottom:12px; }
.draw-tool .ink-btn { height:30px; min-width:30px; padding:0 7px; font-size:var(--text-xs); }
.draw-toolbar>.ink-btn,.draw-actions>.ink-btn { width:32px; padding:0; }
.draw-toolbar>.ink-btn,.draw-actions>.ink-btn:not(.primary),.draw-zoom>.ink-btn {
  border-color:transparent; background:transparent;
}
.draw-toolbar>.ink-btn:hover,.draw-actions>.ink-btn:hover,.draw-zoom>.ink-btn:hover { background:var(--surface-raise-hover); }
.draw-tool-btn { position:relative; }
.draw-toolbar>.ink-btn.active { background:var(--ink); color:var(--paper-light); border-color:var(--ink); }
/* The digit shortcut, small enough to read as a hint rather than a label. */
.draw-tool-key {
  position:absolute; right:2px; bottom:0; font:500 var(--text-2xs)/1 var(--mono);
  color:var(--ink-muted); pointer-events:none;
}
.draw-toolbar>.ink-btn.active .draw-tool-key { color:var(--on-ink-accent); }
.draw-toolbar-split { width:1px; height:20px; margin:0 4px; background:var(--line); }
.draw-icon { display:block; width:20px; height:20px; margin:auto; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }

.draw-menu-panel {
  position:absolute; left:0; top:calc(100% + 6px); width:250px; max-width:calc(100vw - 50px);
  max-height:calc(100dvh - 240px); overflow:auto; padding:5px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--surface-dialog); box-shadow:var(--shadow-pop);
}
.draw-menu-panel button {
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:32px;
  padding:7px 9px; border:0; border-radius:5px; background:transparent; color:var(--ink); text-align:left;
  font:500 var(--text-xs) var(--sans); cursor:pointer;
}
.draw-menu-panel button:hover { background:var(--surface-raise-hover); }
.draw-menu-panel kbd { color:var(--ink-faint); font:400 var(--text-xs) var(--mono); white-space:nowrap; }
.draw-menu-panel hr { margin:4px 6px; border:0; border-top:1px solid var(--line); }

/* Style panel. It edits the selection, or sets up the next shape when nothing
   is selected, so it stays open while a drawing tool is active. */
.draw-panel {
  top:56px; left:12px; width:202px; flex-direction:column; align-items:stretch; gap:10px; padding:10px;
  max-height:calc(100% - 128px); overflow:auto; overscroll-behavior:contain;
}
.draw-field { display:flex; flex-direction:column; gap:5px; }
.draw-field-label { color:var(--ink-faint); font:600 var(--text-2xs)/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.draw-choices { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.draw-swatch {
  width:24px; height:24px; padding:0; border:1px solid var(--line-strong); border-radius:5px;
  background:var(--swatch); cursor:pointer;
}
/* The "no background" swatch shows the canvas through a diagonal rule. */
.draw-swatch.empty {
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--line-strong) 50%,transparent calc(50% + 1px)),
    var(--paper-light);
}
.draw-swatch.active,.draw-choice.active { outline:2px solid var(--seal); outline-offset:2px; }
.draw-swatch:hover,.draw-choice:hover { border-color:var(--ink-muted); }
.draw-choice {
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; flex:none;
  border:1px solid transparent; border-radius:5px; background:var(--surface-inset); color:var(--ink);
  cursor:pointer;
}
.draw-choice.active { background:var(--surface-raise-hover); }
.draw-choice.danger { color:var(--seal); }
.draw-choice-text { font:600 var(--text-xs) var(--sans); }
.draw-range { width:100%; accent-color:var(--seal); }

/* An unbounded canvas: the drawing is translated and scaled, never scrolled.
   The dot grid's size and offset follow the camera inline. */
.draw-canvas {
  position:relative; display:block; width:100%; height:100%; min-height:320px; overflow:hidden; overflow:clip;
  touch-action:none; border:1px solid var(--line-strong); border-radius:12px; cursor:default;
  background-color:var(--paper-light);
  background-image:radial-gradient(var(--line-strong) .7px,transparent .7px);
  background-size:20px 20px;
}
.draw-canvas:focus-visible { outline:2px solid var(--seal); outline-offset:2px; }
.draw-canvas.sketching { cursor:crosshair; }
.draw-canvas.erasing { cursor:cell; }
.draw-canvas.grab { cursor:grab; }
.draw-canvas.dragging { cursor:grabbing; user-select:none; }
.draw-scene { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.draw-line,.draw-hatch { stroke-linecap:round; stroke-linejoin:round; }
.draw-text { dominant-baseline:auto; white-space:pre; }
/* Only the resize grips take pointer events; everything else is hit-tested in
   Rust against the real geometry rather than the rendered path. */
.draw-grip { fill:var(--paper-light); stroke:var(--seal); pointer-events:all; }
.draw-selection>rect { fill:none; stroke:var(--seal); opacity:.85; }
/* A selected line is reshaped by its own points rather than by a box: the ends
   attach to shapes, the midpoints add a point where they are dragged. */
.draw-point { fill:var(--paper-light); stroke:var(--seal); pointer-events:all; cursor:grab; }
.draw-point.end { fill:var(--seal); stroke:var(--paper-light); }
.draw-midpoint { fill:var(--paper-light); stroke:var(--seal); opacity:.55; pointer-events:all; cursor:copy; }
.draw-midpoint:hover { opacity:1; }
.draw-canvas.dragging .draw-point { cursor:grabbing; }
/* The shape a line end would attach to if it were dropped now. */
.draw-bind { fill:none; stroke:var(--seal); stroke-dasharray:6 4; opacity:.75; }
.draw-marquee { fill:color-mix(in srgb,var(--seal) 12%,transparent); stroke:var(--seal); stroke-dasharray:4 3; }

/* The live text box sits over the canvas in screen coordinates, styled to
   match the glyphs it replaces so committing the text does not shift it. */
.draw-text-input {
  position:absolute; z-index:2; margin:0; padding:0; border:0; outline:0; resize:none; overflow:hidden;
  background:transparent; white-space:pre; overflow-wrap:normal;
}
.draw-text-input:focus-visible { outline:1px dashed var(--seal); outline-offset:3px; }

.draw-footer {
  position:absolute; z-index:2; left:12px; bottom:14px; display:flex; flex-wrap:wrap; gap:4px 12px;
  max-width:min(460px,calc(100% - 190px)); color:var(--ink-faint); font-size:var(--text-xs); pointer-events:none;
}
.draw-save { color:var(--ink-soft); }
.draw-count { color:var(--ink-faint); font-family:var(--mono); }
.draw-notice { flex-basis:100%; margin:0; color:var(--ink-faint); font-size:var(--text-xs); line-height:1.4; }
.draw-zoom>.draw-zoom-level { width:52px; padding:0; font-family:var(--mono); font-weight:500; }

.draw-help {
  position:absolute; z-index:4; top:56px; left:12px; width:330px; max-width:calc(100% - 24px);
  max-height:calc(100% - 96px); overflow:auto; padding:14px 16px; border:1px solid var(--line-strong);
  border-radius:11px; background:var(--surface-dialog); box-shadow:var(--shadow-pop);
  color:var(--ink-soft); font-size:var(--text-xs);
}
.draw-help header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--ink); }
.draw-help dl { margin:0 0 12px; }
.draw-help dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line-soft); }
.draw-help dd { margin:0; text-align:right; }
.draw-help kbd { font:400 var(--text-xs) var(--mono); color:var(--ink-faint); }
.draw-help p { margin:0 0 8px; line-height:1.6; }

@media(max-width:860px) {
  /* The panel would cover the drawing on a narrow screen, so it becomes a
     horizontal strip under the toolbar instead. */
  .draw-panel {
    top:auto; left:12px; right:12px; bottom:56px; width:auto; flex-direction:row; flex-wrap:wrap;
    align-items:flex-start; gap:8px 14px; max-height:132px;
  }
  .draw-footer { left:12px; bottom:14px; max-width:calc(100% - 150px); }
  .draw-footer .draw-notice { display:none; }
}
@media(max-width:700px) {
  .draw-toolbar,.draw-actions { top:8px; }
  .draw-actions { left:8px; }
  .draw-zoom { right:8px; bottom:8px; }
  .draw-help { top:52px; left:8px; }
}
@media(pointer:coarse) {
  .draw-tool .ink-btn { height:38px; min-width:38px; }
  .draw-toolbar>.ink-btn,.draw-actions>.ink-btn { width:38px; }
  .draw-menu-panel button { min-height:44px; }
  .draw-choice { width:34px; height:34px; }
  .draw-swatch { width:30px; height:30px; }
}