/* Press Archiver — design tokens + base components.
 * Sourced from !NewDesign/variant-c (Variant C, oxide / editorial). All
 * tokens live here so HTML stays free of palette literals. Component
 * classes use the vc- prefix; legacy inline styles in HTML are migrated
 * over to these classes incrementally.
 */

/* ── Tokens ───────────────────────────────────────────────────────── */
:root{
  /* Surfaces */
  --cream:   #f6f5f1;   /* app body bg */
  --paper:   #fbfaf6;   /* elevated surfaces (top bar, side panels) */
  --paper-2: #f0eee6;   /* hover / muted surfaces */
  /* Ink */
  --ink:    #1b1b1a;
  --ink-2:  #4a4844;
  --ink-3:  #8a877f;
  --ink-4:  #b8b5ab;
  /* Rules */
  --rule:   #e6e3d9;
  --rule-2: #d8d4c6;
  /* Oxide brand accent */
  --accent:      #c8553d;
  --accent-soft: rgba(200,85,61,.08);
  --accent-mid:  rgba(200,85,61,.18);
  /* Status */
  --warn: #a06b00;
  --ok:   #5a7a3e;

  /* Workflow mode colours (cool + warm split, mirrors variant-c) */
  --vc-do:      #0f172a;
  --vc-prep:    #0d9488;
  --vc-segment: #c46a18;
  --vc-ocr:     #2f8a3e;
  --vc-group:   #7c3aed;
  --vc-export:  #2f8a3e;
  --vc-danger:  #c8553d;
  --vc-ok:      #2f8a3e;

  /* Mode-tint backgrounds */
  --vc-prep-bg:    rgba(13,148,136,.07);
  --vc-segment-bg: rgba(196,106,24,.09);
  --vc-ocr-bg:     rgba(47,138,62,.08);
  --vc-group-bg:   rgba(124,58,237,.07);
  --vc-export-bg:  rgba(47,138,62,.07);

  /* Typography */
  --font:  'Inter', -apple-system, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  /* Density — cozy (default) */
  --d-tb-h:    44px;   /* top bar height */
  --d-row-h:   28px;   /* row / button height */
  --d-pad:     10px;
  --d-text:    12px;
  --d-text-sm: 11px;
  --d-text-lbl: 10px;

  /* ── Legacy alias mapping ──
   * Older inline styles still reference --bg / --surface / --s2 / --text /
   * --dim / --border / --a2. These now resolve into the variant-c palette
   * so unconverted markup looks roughly right while we migrate component
   * by component.
   */
  --bg:      var(--cream);
  --surface: var(--paper);
  --s2:      var(--paper-2);
  --text:    var(--ink);
  --dim:     var(--ink-3);
  --border:  var(--rule);
  --a2:      var(--accent);
  --poly:    var(--vc-group);
}

/* ── Body / app shell ─────────────────────────────────────────────── */
html, body{ height:100%; margin:0; }
body{
  font-family: var(--font);
  font-size: var(--d-text);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.vc-btn{
  height: var(--d-row-h);
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--d-text-sm);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.vc-btn:hover{ background: var(--paper-2); color: var(--ink); }
.vc-btn:focus{ outline: none; border-color: var(--ink-4); }
.vc-btn[disabled]{ opacity:.45; cursor:not-allowed; }

.vc-btn-soft   { background: var(--paper-2); border-color: var(--rule);   color: var(--ink); }
.vc-btn-soft:hover{ background: var(--rule); }
.vc-btn-outline{ background: var(--paper); border-color: var(--rule-2); color: var(--ink); }
.vc-btn-outline:hover{ background: var(--paper-2); border-color: var(--ink-4); }
.vc-btn-primary{ background: var(--ink); border-color: var(--ink); color: var(--cream); font-weight: 600; }
.vc-btn-primary:hover{ filter: brightness(1.15); color: var(--cream); }
.vc-btn-accent { background: var(--accent); border-color: var(--accent); color:#fff; font-weight: 600; }
.vc-btn-accent:hover{ filter: brightness(1.05); }
.vc-btn-danger { color: var(--accent); }
.vc-btn-danger:hover{ background: var(--accent-soft); border-color: var(--accent-mid); color: var(--accent); }

.vc-btn.is-active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.vc-btn-icon{ width: var(--d-row-h); padding: 0; justify-content: center; }
.vc-btn-sm  { height: 24px; font-size: var(--d-text-lbl); padding: 0 8px; }
.vc-btn-xs  { height: 20px; font-size: var(--d-text-lbl); padding: 0 6px; }
.vc-btn-block{ width: 100%; justify-content: center; }

/* ── Top bar ──────────────────────────────────────────────────────── */
.vc-tb{
  height: var(--d-tb-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--d-pad);
  flex-shrink: 0;
}
.vc-tb-brand{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  margin-right: 4px;
}
.vc-tb-brand:hover{ background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }

.vc-bcrumb{
  display: flex; align-items: center; gap: 6px;
  font-size: var(--d-text-sm);
  margin: 0 8px 0 4px;
}
.vc-bc-name{ font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing:-.005em; }
.vc-bc-mid { color: var(--ink-2); }
.vc-bc-cur { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.vc-bc-sep { color: var(--ink-4); }

.vc-tb-sep{
  width: 1px;
  align-self: stretch;
  background: var(--rule);
  margin: 8px 4px;
}

/* Workflow tabs — editorial style: monochrome + coloured underline on active */
.vc-wf-pair{ display: inline-flex; align-items: center; }
.vc-wf{
  height: var(--d-tb-h);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--d-text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.vc-wf:hover{ background: var(--paper-2); color: var(--ink); }
.vc-wf.is-active{ background: var(--cream); color: var(--ink); font-weight: 700; }
.vc-wf[disabled]{ opacity:.45; cursor:not-allowed; }

/* Mode-accent underline + hover-text-color for active state */
.vc-wf-prep.is-active   { border-bottom-color: var(--vc-prep);    color: var(--vc-prep);    }
.vc-wf-segment.is-active{ border-bottom-color: var(--vc-segment); color: var(--vc-segment); }
.vc-wf-ocr.is-active    { border-bottom-color: var(--vc-ocr);     color: var(--vc-ocr);     }
.vc-wf-group.is-active  { border-bottom-color: var(--vc-group);   color: var(--vc-group);   }
.vc-wf-export.is-active { border-bottom-color: var(--vc-export);  color: var(--vc-export);  }

.vc-wf-prep:hover    { color: var(--vc-prep);    }
.vc-wf-segment:hover { color: var(--vc-segment); }
.vc-wf-ocr:hover     { color: var(--vc-ocr);     }
.vc-wf-group:hover   { color: var(--vc-group);   }
.vc-wf-export:hover  { color: var(--vc-export);  }

/* Do It All — dark slab primary */
.vc-wf-do{
  height: 32px;
  padding: 0 14px;
  background: var(--vc-do);
  color: var(--cream);
  border-radius: 5px;
  font-weight: 700;
  border-bottom: none;
}
.vc-wf-do:hover{ background:#000; color: var(--cream); }

/* ⚡ paired run-now button */
.vc-wf-zap{
  height: var(--d-tb-h);
  width: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.vc-wf-zap:hover{ background: var(--paper-2); color: var(--ink); }
.vc-wf-pair.vc-wf-prep    .vc-wf.is-active + .vc-wf-zap{ border-bottom-color: var(--vc-prep);    color: var(--vc-prep);    }
.vc-wf-pair.vc-wf-segment .vc-wf.is-active + .vc-wf-zap{ border-bottom-color: var(--vc-segment); color: var(--vc-segment); }

/* ── Side panel headers ───────────────────────────────────────────── */
.vc-panel-hdr{
  height: 36px;
  padding: 0 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.vc-panel-hdr-ico{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: #fff;
  background: var(--ink);
  flex-shrink: 0;
}
.vc-panel-hdr-ico.is-prep   { background: var(--vc-prep);    }
.vc-panel-hdr-ico.is-segment{ background: var(--vc-segment); }
.vc-panel-hdr-ico.is-ocr    { background: var(--vc-ocr);     }
.vc-panel-hdr-ico.is-group  { background: var(--vc-group);   }
.vc-panel-hdr-ico.is-export { background: var(--vc-export);  }

.vc-panel-hdr-lbl{
  flex: 1;
  font-size: var(--d-text-lbl);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Options panel sections ───────────────────────────────────────── */
.vc-sec-lbl{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 2px 0 4px;
}
/* mode tints for section labels (applied by data-mode on the panel root) */
[data-mode="prep"]    .vc-sec-lbl{ color: var(--vc-prep);    }
[data-mode="segment"] .vc-sec-lbl{ color: var(--vc-segment); }
[data-mode="ocr"]     .vc-sec-lbl{ color: var(--vc-ocr);     }
[data-mode="group"]   .vc-sec-lbl{ color: var(--vc-group);   }
[data-mode="export"]  .vc-sec-lbl{ color: var(--vc-export);  }

.vc-sec-hint{
  font-size: 10px;
  color: var(--ink-3);
  margin: -2px 0 4px;
}

/* Radio rows */
.vc-radio{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  font-size: var(--d-text-sm);
  color: var(--ink);
  border-radius: 4px;
  user-select: none;
}
.vc-radio:hover{ background: var(--paper-2); }
.vc-radio-dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  flex-shrink: 0;
  position: relative;
}
.vc-radio.is-on .vc-radio-dot{ border-color: var(--ink); }
.vc-radio.is-on .vc-radio-dot::after{
  content: ''; position: absolute;
  inset: 2px; border-radius: 50%;
  background: var(--ink);
}
[data-mode="prep"]    .vc-radio.is-on .vc-radio-dot{ border-color: var(--vc-prep);    }
[data-mode="prep"]    .vc-radio.is-on .vc-radio-dot::after{ background: var(--vc-prep);    }
[data-mode="segment"] .vc-radio.is-on .vc-radio-dot{ border-color: var(--vc-segment); }
[data-mode="segment"] .vc-radio.is-on .vc-radio-dot::after{ background: var(--vc-segment); }
[data-mode="ocr"]     .vc-radio.is-on .vc-radio-dot{ border-color: var(--vc-ocr);     }
[data-mode="ocr"]     .vc-radio.is-on .vc-radio-dot::after{ background: var(--vc-ocr);     }
[data-mode="group"]   .vc-radio.is-on .vc-radio-dot{ border-color: var(--vc-group);   }
[data-mode="group"]   .vc-radio.is-on .vc-radio-dot::after{ background: var(--vc-group);   }

.vc-radio-lbl{ flex: 1; }
.vc-radio-gear{
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.vc-radio-gear:hover{ background: var(--paper-2); color: var(--ink); }

/* Checkbox rows */
.vc-check-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  cursor: pointer;
  font-size: var(--d-text-sm);
  color: var(--ink);
  user-select: none;
}
.vc-check-box{
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-4);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
}
.vc-check-row.is-on .vc-check-box{ background: var(--ink); border-color: var(--ink); }
[data-mode="segment"] .vc-check-row.is-on .vc-check-box{ background: var(--vc-segment); border-color: var(--vc-segment); }
[data-mode="ocr"]     .vc-check-row.is-on .vc-check-box{ background: var(--vc-ocr);     border-color: var(--vc-ocr);     }
[data-mode="group"]   .vc-check-row.is-on .vc-check-box{ background: var(--vc-group);   border-color: var(--vc-group);   }

/* Run / Cleanup buttons */
.vc-run{
  width: 100%;
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-size: var(--d-text);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: filter .12s, background .12s;
}
.vc-run:hover{ filter: brightness(1.1); }
.vc-run[disabled]{ opacity:.45; cursor:not-allowed; }
.vc-run.is-ok{ background: var(--vc-ok); }
[data-mode="prep"]    .vc-run{ background: var(--vc-prep);    }
[data-mode="segment"] .vc-run{ background: var(--vc-segment); }
[data-mode="ocr"]     .vc-run{ background: var(--vc-ocr);     }
[data-mode="group"]   .vc-run{ background: var(--vc-group);   }
[data-mode="export"]  .vc-run{ background: var(--vc-export);  }

.vc-cleanup{
  width: 100%;
  height: 30px;
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--d-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.vc-cleanup:hover{ background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }
.vc-cleanup-count{
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

/* Danger Zone */
.vc-danger-zone{
  border: 1px solid rgba(200,85,61,.35);
  background: rgba(200,85,61,.05);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.vc-danger-zone-title{
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
}
.vc-danger-zone-subtitle{
  font-size: 10px;
  font-style: italic;
  color: var(--ink-3);
  margin-top: -2px;
}
.vc-danger-action{
  width: 100%;
  height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-family: var(--font);
  font-size: var(--d-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.vc-danger-action:hover{ background: var(--accent-soft); }

/* Visibility row */
.vc-vis{
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--rule);
}
.vc-vis-cell{
  flex: 1;
  height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.vc-vis-cell:hover{ background: var(--paper-2); color: var(--ink); }
.vc-vis-cell.is-on{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
[data-mode="prep"]    .vc-vis-cell.is-on{ background: var(--vc-prep);    border-color: var(--vc-prep);    color:#fff; }
[data-mode="segment"] .vc-vis-cell.is-on{ background: var(--vc-segment); border-color: var(--vc-segment); color:#fff; }
[data-mode="ocr"]     .vc-vis-cell.is-on{ background: var(--vc-ocr);     border-color: var(--vc-ocr);     color:#fff; }
[data-mode="group"]   .vc-vis-cell.is-on{ background: var(--vc-group);   border-color: var(--vc-group);   color:#fff; }

/* ── Status bar ───────────────────────────────────────────────────── */
.vc-status{
  height: 22px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 14px;
  font-size: 10px;
  color: var(--ink-3);
  font-family: var(--mono);
  flex-shrink: 0;
}

/* ── Tooltip info chip (reused from groupingCfgDlg in _36_1_27) ───── */
.cfg-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--rule-2); color:var(--ink-2);
  font-size:9px; font-weight:700;
  cursor:help;
  margin-left:4px;
  user-select:none;
  font-family:var(--mono);
  flex-shrink:0;
}
.cfg-info:hover{ background: var(--accent); color:#fff; }

/* ── Cards (Library grid + Issues + Pages) ────────────────────────── */
.vc-card{
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color .12s, box-shadow .12s;
}
.vc-card:hover{ border-color: var(--ink-4); }
.vc-card.is-sel{ box-shadow: 0 0 0 1.5px var(--accent); border-color: var(--accent); }
.vc-card-thumb{
  width: 100%;
  aspect-ratio: 0.72;
  background: #f7f3e8;
  border-bottom: 1px solid var(--rule-2);
  display: block;
  object-fit: cover;
}
.vc-card-body{
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vc-card-name{
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-card-meta{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Letter chips ─────────────────────────────────────────────────── */
.vc-chip{
  height: 30px;
  min-width: 30px;
  padding: 0 9px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 5px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.vc-chip:hover{ background: var(--paper-2); color: var(--ink); }
.vc-chip.is-on{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ── Form inputs ──────────────────────────────────────────────────── */
.vc-input, .vc-select, .vc-num{
  height: var(--d-row-h);
  padding: 0 8px;
  border: 1px solid var(--rule-2);
  background: var(--cream);
  border-radius: 5px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--d-text-sm);
  width: 100%;
}
.vc-num{ font-family: var(--mono); text-align: right; padding: 0 6px; }
.vc-input:focus, .vc-select:focus, .vc-num:focus{
  outline: none; border-color: var(--ink);
}

/* ── Library route (full-screen, .vcl-app) ────────────────────────────
 * Ported from !NewDesign/variant-c-library.css. Triggered by adding the
 * `.on` class to #libOverlay (which now carries class="vcl-app").
 */
.vcl-app{
  position: fixed; inset: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 500;
}
.vcl-app.on{ display: flex; }

/* ── Top bar ─────────────────────────────────────────────────────── */
.vcl-tb{
  flex-shrink: 0;
  height: 56px;
  padding: 0 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 14px;
}
.vcl-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.vcl-brand > svg{ color: var(--accent); }
.vcl-brand-name{
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}
.vcl-brand-accent{ color: var(--accent); }
.vcl-brand-sep{
  width: 1px;
  height: 18px;
  background: var(--rule-2);
  margin: 0 4px;
}
.vcl-brand-count{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.vcl-back{
  width: 34px; height: 34px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.vcl-back:hover{ background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }

/* ── Main split ──────────────────────────────────────────────────── */
.vcl-main{ flex: 1; display: flex; min-height: 0; }

/* ── Left rail ───────────────────────────────────────────────────── */
.vcl-side{
  width: 280px;
  flex-shrink: 0;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vcl-side-lbl{
  padding: 14px 16px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vcl-search{
  margin: 0 12px 12px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--rule-2);
  background: var(--cream);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
}
.vcl-search input{
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink);
}
.vcl-search input::placeholder{ color: var(--ink-4); }
.vcl-side-list{
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vcl-side-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.vcl-side-row:hover{ background: var(--cream); }
.vcl-side-row.is-current,
.vcl-side-row.is-sel{
  background: var(--accent-soft);
  border-color: transparent;
}
.vcl-side-row.is-current .vcl-side-thumb,
.vcl-side-row.is-sel    .vcl-side-thumb{
  box-shadow: 0 0 0 1.5px var(--accent);
}
.vcl-side-thumb{
  width: 36px; height: 44px;
  background: #f7f3e8;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.vcl-side-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.vcl-side-meta{ min-width: 0; flex: 1; }
.vcl-side-name{
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.vcl-side-sub{
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vcl-side-foot{
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vcl-side-all{
  width: 100%;
  height: 34px;
  border-radius: 5px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s, color .12s;
}
.vcl-side-all:hover{ background: #000; border-color: #000; }
.vcl-side-new{
  width: 100%;
  height: 32px;
  border-radius: 5px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s, border-color .12s;
}
.vcl-side-new:hover{ background: var(--paper-2); border-color: var(--ink-4); }
.vcl-side-user{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.vcl-avatar{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vcl-user-meta{ min-width: 0; flex: 1; }
.vcl-user-email{
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcl-user-gear{
  width: 32px; height: 32px;
  border: 1px solid var(--rule-2);
  background: var(--cream);
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.vcl-user-gear:hover{ background: var(--paper-2); border-color: var(--ink-4); color: var(--ink); }

/* ── Content area ────────────────────────────────────────────────── */
.vcl-content{
  flex: 1;
  min-width: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vcl-h1-row{
  flex-shrink: 0;
  padding: 22px 28px 12px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.vcl-h1{
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.1;
}
.vcl-h1-actions{
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.vcl-toolbar{
  flex-shrink: 0;
  padding: 0 28px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vcl-letters{ display: flex; gap: 4px; }
.vcl-chip{
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 5px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.vcl-chip:hover{ background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }
.vcl-chip.is-on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.vcl-yearwrap{ display: inline-flex; align-items: center; gap: 6px; }
.vcl-yearlbl{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}
.vcl-yearinput{
  width: 70px; height: 30px;
  padding: 0 8px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
}
.vcl-yearinput::placeholder{ color: var(--ink-4); }
.vcl-yearinput:focus{ outline: none; border-color: var(--ink); }
.vcl-yeardash{ color: var(--ink-4); font-size: 12px; }
.vcl-sort{
  height: 30px;
  padding: 0 22px 0 10px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  border-radius: 5px;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  appearance: none;
}
.vcl-sort:focus{ outline: none; border-color: var(--ink); }
.vcl-count{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  padding-left: 4px;
}

/* ── Grid ────────────────────────────────────────────────────────── */
.vcl-grid{
  flex: 1;
  overflow-y: auto;
  padding: 4px 28px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px 18px;
  align-content: start;
}
.vcl-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  border-radius: 7px;
  padding: 0;
  transition: transform .12s;
}
.vcl-card:hover .vcl-card-thumb{ border-color: var(--ink-4); }
.vcl-card.is-current .vcl-card-thumb,
.vcl-card.is-sel     .vcl-card-thumb{
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent);
}
.vcl-card-thumb{
  aspect-ratio: 0.72;
  background: #f7f3e8;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: border-color .12s, box-shadow .12s;
}
.vcl-card-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.vcl-card-body{ padding: 0 2px; }
.vcl-card-name{
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcl-card-meta{
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mode-section overrides ───────────────────────────────────────────
 * Legacy inline styles on radios / checkboxes / Run buttons inside the
 * mode panels carry hard-coded colours from the dark-theme era. These
 * !important overrides re-tint them with the workflow accent so the
 * existing markup picks up the new palette without per-element edits.
 * Migrate inline styles to .vc-* classes incrementally; these overrides
 * fall away as elements move over.
 */
[data-mode="segment"] input[type="radio"],
[data-mode="segment"] input[type="checkbox"]{ accent-color: var(--vc-segment) !important; }
[data-mode="ocr"]     input[type="radio"],
[data-mode="ocr"]     input[type="checkbox"]{ accent-color: var(--vc-ocr)     !important; }
[data-mode="group"]   input[type="radio"],
[data-mode="group"]   input[type="checkbox"]{ accent-color: var(--vc-group)   !important; }
[data-mode="prep"]    input[type="radio"],
[data-mode="prep"]    input[type="checkbox"]{ accent-color: var(--vc-prep)    !important; }
[data-mode="export"]  input[type="radio"],
[data-mode="export"]  input[type="checkbox"]{ accent-color: var(--vc-export)  !important; }

/* Run buttons keep their existing IDs; recolour via id selectors that
   beat the inline background/color/border. */
#bAutoDetectGo, button.btn[id^="bRun"], #bRunOcr{ font-family: var(--font); }
#segSec button.btn[style*="background:#d97706"],
#segSec button.btn[style*="background:#fb923c"]{ background: var(--vc-segment) !important; border-color: var(--vc-segment) !important; color:#fff !important; }
#ocrSec   button.btn[style*="background:#16a34a"]{ background: var(--vc-ocr)     !important; border-color: var(--vc-ocr)     !important; color:#fff !important; }
#groupingSec button.btn[style*="background:#a78bfa"],
#groupingSec button.btn[style*="background:#7c3aed"]{ background: var(--vc-group)   !important; border-color: var(--vc-group)   !important; color:#fff !important; }
#strPanel button.btn[style*="background:#16a34a"]{ background: var(--vc-prep)   !important; border-color: var(--vc-prep)   !important; color:#fff !important; }
#exportSec button.btn[style*="background:#16a34a"]{ background: var(--vc-export) !important; border-color: var(--vc-export) !important; color:#fff !important; }

/* Section labels: re-tint legacy lbl spans inside mode panels. */
[data-mode="segment"] .lbl[style*="color:#d97706"],
[data-mode="segment"] [style*="color:#d97706"]{ color: var(--vc-segment) !important; }
[data-mode="ocr"]     .lbl[style*="color:#16a34a"],
[data-mode="ocr"]     [style*="color:#16a34a"]{ color: var(--vc-ocr)     !important; }
[data-mode="group"]   .lbl[style*="color:#7c3aed"],
[data-mode="group"]   .lbl[style*="color:#a78bfa"]{ color: var(--vc-group)   !important; }
[data-mode="prep"]    .lbl[style*="color:#16a34a"]{ color: var(--vc-prep)    !important; }
[data-mode="export"]  .lbl[style*="color:#16a34a"]{ color: var(--vc-export)  !important; }

/* ── v0.5.02 Volumes UI ───────────────────────────────────────────────
 *  - Volume "year" cards live inside .libIssuesGrid alongside issue cards;
 *    they reuse .libIssueCard sizing and overlay a big year-shaped label.
 *  - Selection chip + Actions dropdown live in vcl-h1-row.
 *  - Issue cards now carry a circular .libIssueCardCheck in the top-left
 *    that toggles multi-select without navigating.
 */
.vcl-app .vc-volume-card .vc-volume-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  text-align: center;
  padding: 0 8px;
  word-break: break-word;
}
.vcl-app .vc-volume-card.is-unsorted .vc-volume-overlay{
  font-size: 22px;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vcl-app .vc-volume-card .libIssueCardTop{
  background: #f7f3e8;
}

/* Multi-select round checkbox in top-left of every issue card. */
.vcl-app .libIssueCardCheck{
  position: absolute;
  top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  z-index: 4;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}
/* Delete button — legacy CSS pins it to top:6px;left:6px, which collides
   with the multi-select checkbox above. Inside .vcl-app push it to the
   top-RIGHT corner instead. Also move the gear (⚙ edit) to bottom-RIGHT
   so the bottom-left stays clear for the status dot + Edit button. */
.vcl-app .libIssueCardDel{
  left: auto !important;
  right: 6px !important;
  top: 6px !important;
}
.vcl-app .libIssueCardOpt{
  left: auto !important;
  right: 6px !important;
  bottom: 6px !important;
}
.vcl-app .libIssueCardCheck:hover{ border-color: var(--ink-2); }
.vcl-app .libIssueCardCheck.on{
  background: var(--accent);
  border-color: var(--accent);
}
.vcl-app .libIssueCardCheck.on::after{
  content: ''; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}
.vcl-app .libIssueCard.is-sel{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px; }

/* Selection chip + Actions dropdown (top-row controls in libMainTitle). */
.vc-selection-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--accent-mid);
}
.vc-selection-chip button{
  width: 22px; height: 22px;
  background: transparent;
  border: none;
  color: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.vc-selection-chip button:hover{ background: var(--accent-mid); }

.vc-actions-wrap{ position: relative; display: inline-flex; }
.vc-actions-btn{
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 5px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.vc-actions-btn:hover{ background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }
.vc-actions-btn[disabled]{ opacity: .4; cursor: not-allowed; }
.vc-actions-btn .chev{ font-size: 10px; }
.vc-actions-menu{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  z-index: 600;
  padding: 4px;
}
.vc-actions-item{
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.vc-actions-item:hover{ background: var(--paper-2); }

/* ── Library breadcrumb chips (inside libMainTitle) ─────────────────── */
.vcl-app .libCrumb{
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  transition: color .12s;
}
.vcl-app .libCrumb:hover{ color: var(--accent); }
.vcl-app .libCrumbSep{
  color: var(--ink-4);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  padding: 0 8px;
}

/* ── Issue card "Edit" button — bottom-left over the thumb, dark slab ──
 * Only meaningful path into the editor from the new card design (the rest
 * of the card opens the pages-grid view in the library). Tucked into the
 * thumb's bottom-left corner like the status dot is.
 */
.vcl-app .libIssueCardEdit{
  position: absolute;
  bottom: 8px;
  left: 32px; /* clear the status dot at left:8px */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  background: rgba(0,0,0,.78);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
  letter-spacing: .02em;
  transition: background .12s;
}
.vcl-app .libIssueCardEdit:hover{ background: #000; }

/* ── Library issue cards re-skinned to match .vcl-card size + look ──
 * renderIssues() emits .libIssueCard / .libIssueCardTop / .libIssueCardBody
 * / .libIssueTitle / .libIssuesGrid. We restyle them to mirror the
 * variant-c newspaper grid: 180px wide cards, 0.72 aspect thumb with thin
 * rule border, no outer card border, Source Serif title + mono meta.
 */
.vcl-app .libIssuesGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px 18px;
  padding: 0;
}
.vcl-app .libIssueCard{
  background: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  overflow: visible !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform .12s;
  position: relative;
}
.vcl-app .libIssueCard:hover .libIssueCardTop{ border-color: var(--ink-4); }
.vcl-app .libIssueCard.is-current .libIssueCardTop,
.vcl-app .libIssueCard.is-sel     .libIssueCardTop{
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent);
}
.vcl-app .libIssueCardTop{
  aspect-ratio: 0.72 !important;
  background: #f7f3e8 !important;
  border: 1px solid var(--rule-2) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative;
  transition: border-color .12s, box-shadow .12s;
}
.vcl-app .libIssueCardBody{ padding: 0 2px !important; }
.vcl-app .libIssueTitle{
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.005em;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.vcl-app .libIssueTitle .num{
  color: var(--accent);
  font-family: var(--mono);
}
.vcl-app .libIssueTitle .date{
  color: var(--ink-3);
  font-weight: 400;
  font-size: 11px;
  font-family: var(--mono);
}

/* ── Structure panel tree (legacy .pr/.prh/.prn/... markup re-skinned) ──
 * The renderPanel() in HTML emits .pr (region card), .prh (region header),
 * .prn (region-number circle), .prns (region name), .prl (lines container),
 * .plr (line row), .plt (line num column), .pln (line-number circle),
 * .pta (line-text textarea). Plus .org-group / .org-group-hdr / .org-group-arrow
 * / .org-group-body for the grouped view. We re-skin all of them here to
 * match variant-c's .vc-gr / .vc-reg / .vc-line look without touching the
 * render JS.
 */

/* Group card ─ replaces .org-group */
#rpl .org-group{
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 7px;
  margin: 0 0 6px;
  overflow: hidden;
  padding: 0;
}
#rpl .org-group-hdr{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--paper-2) !important;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
}
#rpl .org-group-hdr > span{ color: inherit !important; }
#rpl .org-group-hdr .org-group-arrow{
  font-size: 9px;
  color: var(--ink-3) !important;
  width: 10px;
}
/* "Group N" name — inline style sets color:#f472b6, we override to ink. */
#rpl .org-group-hdr > span:nth-child(2){
  font-weight: 700 !important;
  color: var(--ink) !important;
}
/* "N reg." meta — override inline dim to mono. */
#rpl .org-group-hdr > span:nth-child(3){
  font-size: 10px !important;
  color: var(--ink-3) !important;
  font-family: var(--mono);
}
/* Type pill ("article", "stack" …) — override inline pink with neutral cream. */
#rpl .org-group-hdr > span:last-child{
  margin-left: auto !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2) !important;
  background: var(--cream) !important;
  border: 1px solid var(--rule);
  padding: 1px 7px !important;
  border-radius: 999px !important;
}
#rpl .org-group-body{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
#rpl .org-group-body.collapsed{ display: none; }

/* Region card ─ replaces .pr */
#rpl .pr{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin: 6px 6px 0;
  padding: 6px 8px;
}
#rpl .org-group .pr:last-child{ margin-bottom: 6px; }
/* Flat (non-grouped) view: cards sit directly in #rpl with no enclosing card. */
#rpl > .pr{ margin: 0 0 6px; }

#rpl .prh{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  padding-bottom: 4px;
  cursor: pointer;
}
#rpl .prh.sel{ outline: 1.5px solid var(--accent); outline-offset: -1px; border-radius: 4px; }
#rpl .prn{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vc-segment) !important;
  color: #fff !important;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#rpl .prns{ font-weight: 600; color: var(--ink); }
#rpl .prns > span{ font-size: 11px !important; color: var(--ink) !important; font-weight: 600; font-family: var(--font) !important; }
#rpl .prh > span:last-child{
  margin-left: auto !important;
  font-family: var(--mono);
  font-size: 10px !important;
  color: var(--ink-3) !important;
}

#rpl .prl{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
}

/* Line row ─ replaces .plr / .plt / .pln / .pta */
#rpl .plr{
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  border: none;
}
#rpl .plr.sel .pta{ border-color: var(--accent); background: var(--cream); }
#rpl .plr.do .pta{ border-color: var(--ink-4); background: var(--cream); }

#rpl .plt{
  display: inline-flex;
  align-items: flex-start;
  cursor: grab;
}
#rpl .pln{
  width: 15px; height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink-4) !important;
  color: #fff !important;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

#rpl .pta{
  flex: 1;
  min-width: 0;
  width: 100%;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  line-height: 1.4;
  word-break: break-word;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 5px !important;
  padding: 4px 8px !important;
  color: var(--ink-2) !important;
  resize: none;
  outline: none;
}
#rpl .pta:focus{ border-color: var(--accent) !important; background: var(--cream) !important; color: var(--ink) !important; }
#rpl .plr:hover .pta{ border-color: var(--ink-4); }

/* ── Tab strip (for cfgDlg modals) ────────────────────────────────── */
.vc-tabs{
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin: -4px 0 8px;
  gap: 0;
}
.vc-tab{
  flex: 1;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  background: transparent;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--font);
  transition: color .12s, border-color .12s;
  user-select: none;
}
.vc-tab:hover{ color: var(--ink); }
.vc-tab.active{ color: var(--accent); border-bottom-color: var(--accent); }