/* ============================================================
   UHC Costing Workbench
   "Ledger × Atlas" — paper warmth, hairline rules, tabular figures
   ============================================================ */

:root {
  /* Surface — clean cool grays */
  --paper:        #f8fafc;
  --paper-deep:   #f1f5f9;
  --surface:      #ffffff;
  --surface-alt:  #f8fafc;

  /* Ink — slate ramp */
  --ink:          #0f172a;
  --ink-soft:     #334155;
  --ink-mute:     #64748b;
  --ink-faint:    #cbd5e1;

  /* Borders */
  --rule:         #e2e8f0;
  --rule-soft:    #f1f5f9;

  /* Section header dark slate (modern accordion headers) */
  --header-bg:    #1e293b;
  --header-bg-hover: #334155;

  /* Primary — modern indigo */
  --accent:       #6366f1;
  --accent-hover: #4f46e5;
  --accent-tint:  #eef2ff;

  /* Semantic — vivid but tasteful */
  --warn:         #d97706;
  --warn-tint:    #fef3c7;
  --danger:       #dc2626;
  --danger-tint:  #fee2e2;
  --ok:           #059669;
  --ok-tint:      #d1fae5;
  --modified:     #f59e0b;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Legacy aliases (kept for JS that still references --line/--muted/--bg/--panel) */
  --bg:     var(--paper);
  --panel:  var(--surface);
  --muted:  var(--ink-mute);
  --line:   var(--rule);
  --accent-2: var(--modified);

  /* Type — unified sans (IBM Plex Sans family for both display and body) */
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
  --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;

  font-family: var(--font-body);
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs-base); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

table, .num, .mono, [data-num], .nowrap { font-variant-numeric: tabular-nums; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--s-2);
  color: var(--ink);
}
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); font-weight: 600; }
h3 { font-size: var(--fs-md); font-weight: 600; }
h4 { font-size: var(--fs-base); font-weight: 600; }

p { margin: 0 0 var(--s-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 var(--s-1);
}

.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.mono  { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }
.nowrap { white-space: nowrap; }

/* ============================================================
   Buttons
   ============================================================ */
button {
  font: 600 var(--fs-sm)/1 var(--font-body);
  letter-spacing: -0.005em;
  padding: 8px 14px;
  min-height: 32px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.05s;
}
button:hover { background: var(--paper-deep); border-color: var(--ink-faint); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { background: var(--surface); border-color: var(--rule); }

button.primary, .primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);
}
button.primary:hover, .primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

button.ghost, .ghost {
  border-color: var(--rule);
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  box-shadow: none;
}
button.ghost:hover, .ghost:hover {
  background: var(--paper-deep);
  color: var(--ink);
  border-color: var(--ink-faint);
}

button.full, .full { width: 100%; }

.mini-button {
  font: 500 var(--fs-xs) var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 24px;
  padding: 3px 8px;
}

/* Publish — primary accent, a bit larger */
#publishBtn {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
}
#publishBtn:hover:enabled {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
#publishBtn:disabled { opacity: 0.55; cursor: progress; }

#publishStatus {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ============================================================
   Inputs
   ============================================================ */
input, select, textarea {
  font: 500 var(--fs-sm)/1.4 var(--font-body);
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 100%;
  border-radius: var(--r-md);
  min-height: 32px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input[type="number"], .num-input {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
textarea { min-height: 64px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
label > input, label > select, label > textarea {
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.topbar__logo {
  height: 44px;
  width: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.topbar__title { min-width: 0; }
.topbar h1 {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}

.top-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   Tabs — editorial underline
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  overflow-x: auto;
}
.tab {
  font: 600 var(--fs-sm)/1 var(--font-body);
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-mute);
  border-radius: 0;
  letter-spacing: 0;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tab:hover { background: var(--paper-deep); color: var(--ink); border-color: transparent; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }

/* ============================================================
   Layout
   ============================================================ */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 110px);
}
/* Left filter/list rail is no longer used. Package selection lives in
   Direktori (browse + click) and the breadcrumb picker dropdown at the
   top of Workbench. Hidden across all tabs. */
.layout > .filters {
  display: none;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border-right: 1px solid var(--rule);
  max-height: calc(100vh - 110px);
  overflow: hidden;
}
.filters-controls {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.filter-actions {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

.workspace {
  min-width: 0;
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
}

.pane { display: none; min-height: 0; }
.pane.active { display: block; }

#pane-directory.active,
#pane-workbench.active {
  display: block;
}

#pane-workbench.active .wb-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s-4);
  align-items: start;
}

/* ============================================================
   Workbench list (left rail)
   ============================================================ */
.wb-list-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow: hidden;
}
.wb-list-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.wb-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  border-top: 1px solid var(--rule);
}
.wb-list-item {
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  display: grid;
  gap: 2px;
  transition: background 0.1s;
}
.wb-list-item:hover { background: var(--paper-deep); }
.wb-list-item.selected {
  background: var(--accent-tint);
  color: var(--accent-hover);
}
.wb-list-item.selected .wb-list-title { color: var(--accent-hover); }
.wb-list-title {
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--ink);
}
.wb-list-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.wb-list-badges { display: inline-flex; gap: var(--s-1); align-items: center; }
.wb-list-cost {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.wb-modified-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--modified);
}

/* ============================================================
   Editor + preview surfaces
   ============================================================ */
.wb-editor,
.wb-preview {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 0;
}
.wb-editor { padding: 0; }
.wb-preview {
  position: sticky;
  top: var(--s-3);
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--s-4);
}

/* Inner padding for editor body — breadcrumb is outside this padding */
.wb-editor-body { padding: var(--s-4); }

@media (max-width: 1100px) {
  #pane-workbench.active { grid-template-columns: minmax(0, 1fr); }
  .wb-preview { position: static; }
}

/* ============================================================
   Breadcrumb (sticky atop editor)
   ============================================================ */
.crumb {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.crumb__back {
  font: 600 var(--fs-sm)/1 var(--font-body);
  letter-spacing: 0;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.crumb__back:hover {
  background: var(--paper-deep);
  border-color: var(--ink-faint);
  color: var(--ink);
}
.crumb__back::before { content: ''; }
.crumb__pickerwrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 4px 8px 4px 12px;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.crumb__pickerlabel {
  font: 600 var(--fs-xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.crumb__picker {
  width: auto;
  max-width: 460px;
  min-width: 240px;
  min-height: 30px;
  padding: 4px 8px;
  font: 500 var(--fs-sm) var(--font-body);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  flex: 1 1 auto;
}
.crumb__path {
  margin-left: auto;
  font: 500 var(--fs-xs)/1.3 var(--font-body);
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}
.crumb__group {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--ink-mute);
}
.crumb__sep {
  color: var(--ink-faint);
}
.crumb__current {
  font: 600 var(--fs-base)/1.2 var(--font-body);
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* legacy .wb-back button is no longer rendered, but keep style harmless */
.wb-back { display: none; }

/* ============================================================
   Tables — ledger
   ============================================================ */
.table-wrap {
  width: 100%;
  max-height: 66vh;
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font: 600 var(--fs-xs)/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: left;
  padding: var(--s-2) var(--s-3);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody td {
  padding: 6px var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
tbody tr { background: transparent; }
tbody tr:hover { background: var(--paper-deep); }
tbody tr.selected { background: var(--accent-tint); }

td.num, th.num, .col-num,
td:has(input[type="number"]) {
  font-variant-numeric: tabular-nums;
}

th.sortable-th {
  cursor: pointer;
  user-select: none;
}
th.sortable-th:hover {
  color: var(--ink);
  background: var(--paper-deep);
}
th.sortable-th.active {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}
th.sortable-th .sort-arrow {
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.7;
}
th.sortable-th.active .sort-arrow {
  color: var(--accent);
  opacity: 1;
}

/* Editable tables (in editor) */
.editor-table input,
.editor-table select {
  min-width: 96px;
  border-color: transparent;
  background: transparent;
}
.editor-table input:hover, .editor-table select:hover {
  background: var(--surface-alt);
  border-color: var(--rule-soft);
}
.editor-table input:focus, .editor-table select:focus {
  background: var(--surface);
  border-color: var(--ink);
}
.editor-table .text-input { min-width: 180px; }

/* ============================================================
   Status — pills restyled as text + colored underline
   (keeps existing JS .pill class names working)
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  font: 600 var(--fs-xs) var(--font-body);
  letter-spacing: 0;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  color: var(--ink-soft);
  border-radius: 999px;
  white-space: nowrap;
}
.pill.warn   { color: var(--warn);   background: var(--warn-tint);   border-color: var(--warn-tint); }
.pill.danger { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-tint); }
.pill.ok     { color: var(--ok);     background: var(--ok-tint);     border-color: var(--ok-tint); }

/* ============================================================
   Cost preview — KV ledger
   ============================================================ */
.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-2) 0;
}
.kv dt {
  margin: 0;
  font: 500 var(--fs-xs)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  align-self: baseline;
}
.kv dd {
  margin: 0;
  font: 500 var(--fs-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.kv__big dd {
  font: 500 var(--fs-lg)/1.1 var(--font-display);
}

/* ============================================================
   Bar chart row
   ============================================================ */
.bar-list { display: grid; gap: var(--s-2); }
.bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  gap: var(--s-3);
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.bar-row > strong {
  font: 500 var(--fs-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bar-track { height: 6px; background: var(--paper-deep); }
.bar-fill  { height: 100%; background: var(--accent); }
.bar-fill--warn   { background: #f59e0b; }
.bar-fill--danger { background: var(--danger, #dc2626); }

.quality-dim-section {
  margin-top: var(--s-5);
}
.quality-dim-section__title {
  font: 600 var(--fs-lg)/1.2 var(--font-body);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.005em;
}
.quality-bars .bar-row strong { color: var(--ink-soft); }
.quality-bars .bar-row .muted.xs {
  font: 500 11px var(--font-mono);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Accordion (action detail in package editor)
   ============================================================ */
details.section {
  border-bottom: 1px solid var(--rule);
}
details.section > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  user-select: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before {
  content: '+';
  font: 600 var(--fs-base)/1 var(--font-mono);
  color: var(--ink-mute);
  width: 14px;
  text-align: center;
}
details.section[open] > summary::before { content: '−'; }
details.section > summary > h3 {
  margin: 0;
  font: 600 var(--fs-base)/1.3 var(--font-body);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.section__count {
  margin-left: auto;
  font: 400 var(--fs-xs)/1.3 var(--font-body);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Toolbar / form layout
   ============================================================ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.toolbar-left, .toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-2);
}
.section-title h3 {
  margin: 0;
  font: 500 var(--fs-sm)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.action-title { display: grid; gap: 4px; }

/* ============================================================
   Panels / metrics
   ============================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  padding: var(--s-4);
}
.panel.tight { padding: 0; overflow: hidden; }

.grid { display: grid; gap: var(--s-3); }
.grid.two   { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.55fr); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metric-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.metric {
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.metric span {
  display: block;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.metric strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Callout / split list
   ============================================================ */
.split-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.callout {
  border-left: 2px solid var(--ink);
  background: var(--surface-alt);
  padding: var(--s-2) var(--s-3);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px var(--s-3);
  background: var(--surface-alt, #f1f5f9);
  border-bottom: 1px solid var(--rule, #e2e8f0);
}
.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--rule, #e2e8f0);
  color: var(--ink-soft, #475569);
  text-decoration: none;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
}
.ref-chip--atc {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.ref-chip--ivd {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
  font-family: inherit;
}
.ref-chip--equip {
  font-family: inherit;
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #155e75;
}
.ref-chip--equip em {
  font: 500 10px/1 var(--font-mono, "IBM Plex Mono", monospace);
  font-style: normal;
  margin-left: 4px;
  padding: 1px 5px;
  background: rgba(21, 94, 117, 0.08);
  border-radius: 3px;
  color: #0e4a5c;
}
.ref-chip--equip-capital {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}
.ref-chip--equip-capital em {
  background: rgba(109, 40, 217, 0.08);
  color: #4c1d95;
}
.ref-chip--equip-single {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.ref-chip--equip-single em {
  background: rgba(21, 128, 61, 0.08);
  color: #14532d;
}
.ref-chip--equip-reuse {
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #155e75;
}
.ref-chip--life {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
  font-family: inherit;
}
.ref-chip--prog {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #115e59;
  font-family: inherit;
}
.ref-chip--sdg {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
  font-weight: 600;
}
.ref-chip--link:hover {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #fff;
}

.who-refs {
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.who-refs > summary {
  font: 600 var(--fs-xs) var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.who-refs > summary::before { content: '▸ '; transition: transform 80ms ease; display: inline-block; }
.who-refs[open] > summary::before { transform: rotate(90deg); }
.who-refs ol {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.5;
}
.who-refs ol li { margin-bottom: 4px; }
.who-refs__meta {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-soft);
}
.who-refs__meta strong { color: var(--ink); }
.who-refs__pkgchip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* ============================================================
   Workbench Index (package directory landing)
   ============================================================ */
.wb-index {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 0;
}
.wb-index__header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  justify-content: space-between;
}
.wb-index__header h2 {
  font: 600 var(--fs-2xl)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0;
}
.wb-index__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.wb-index__filters input,
.wb-index__filters select {
  width: auto;
  min-width: 180px;
}
.wb-index table {
  width: 100%;
}
.wb-index thead th {
  background: var(--paper-deep);
  position: sticky;
  top: 0;
}
.wb-index tbody tr {
  cursor: pointer;
}
.wb-index tbody tr:hover {
  background: var(--paper-deep);
}
.wb-index td.pkg-name {
  max-width: 380px;
}
.wb-index td.pkg-name strong {
  display: block;
  font-weight: 500;
}
.wb-index td.pkg-name .pkg-id {
  display: block;
  font: 500 var(--fs-xs) var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ============================================================
   Detail back-link / save bar
   ============================================================ */
.wb-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font: 500 var(--fs-xs) var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  padding: 0;
  min-height: 0;
  cursor: pointer;
}
.wb-back:hover {
  background: transparent;
  color: var(--ink);
}
.wb-back::before { content: '←'; margin-right: 4px; }

.wb-save-bar {
  position: sticky;
  bottom: 0;
  margin: var(--s-4) calc(-1 * var(--s-4)) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-top: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  z-index: 4;
}
.wb-save-bar__hint {
  font: 400 var(--fs-xs) var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* ============================================================
   Dual input (aspirational + real-world)
   ============================================================ */
label.dual {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-soft);
  display: block;
}
.dual__label {
  font: 500 var(--fs-xs) var(--font-body);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--s-1);
}
.dual__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dual__col {
  display: grid;
  gap: 2px;
}
.dual__hint {
  font: 500 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 1px;
  border-bottom: 1.5px solid currentColor;
  width: fit-content;
}
.dual__col--asp .dual__hint  { color: var(--accent); }
.dual__col--real .dual__hint { color: var(--danger); }
.dual__col--asp input  { border-bottom: 2px solid var(--accent); }
.dual__col--real input { border-bottom: 2px solid var(--danger); }

.diff-revert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font: 500 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px dashed var(--ink-mute);
  color: var(--ink-mute);
  padding: 3px 6px;
  min-height: 0;
  border-radius: 1px;
  cursor: pointer;
  width: fit-content;
}
.diff-revert:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-deep);
}

/* ============================================================
   Preview dual columns (aspirational | real)
   ============================================================ */
.kv-dual {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px var(--s-2);
  margin: 0 0 var(--s-3);
  padding: var(--s-2) 0;
  align-items: baseline;
}
.kv-dual__head {
  font: 500 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
  padding-bottom: 2px;
}
.kv-dual__head--asp  { color: var(--accent); border-bottom: 1.5px solid var(--accent); }
.kv-dual__head--real { color: var(--danger); border-bottom: 1.5px solid var(--danger); }
.kv-dual dt {
  font: 500 var(--fs-xs)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.kv-dual dd {
  margin: 0;
  font: 500 var(--fs-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.kv-dual dd.asp  { color: var(--accent); }
.kv-dual dd.real { color: var(--danger); }
.kv-dual__big dd {
  font: 500 var(--fs-md)/1.1 var(--font-display);
}
.kv-dual__gap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding-top: var(--s-2);
  margin-top: var(--s-1);
  border-top: 1px solid var(--rule);
  font: 500 var(--fs-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.kv-dual__gap strong {
  font-weight: 600;
}

/* ============================================================
   Incomplete-data highlight (red signal)
   ============================================================ */
tr.is-incomplete {
  box-shadow: inset 3px 0 0 var(--danger);
  background: rgba(138, 39, 39, 0.04);
}
tr.is-incomplete:hover {
  background: rgba(138, 39, 39, 0.08);
}
tr.is-incomplete td:first-child .pkg-id::after {
  content: '· incomplete';
  margin-left: 6px;
  color: var(--danger);
  font-weight: 600;
}

.wb-list-item.is-incomplete {
  box-shadow: inset 3px 0 0 var(--danger);
}
.wb-list-item.is-incomplete.selected {
  box-shadow: inset 3px 0 0 var(--danger);
  border-left-color: var(--danger);
}

details.section.is-incomplete {
  border-left: 3px solid var(--danger);
  padding-left: var(--s-2);
  margin-left: calc(-1 * (var(--s-2) + 3px));
  background: rgba(138, 39, 39, 0.025);
}
details.section.is-incomplete > summary > h3 {
  color: var(--danger);
}
details.section.is-incomplete > summary::before {
  color: var(--danger);
}

/* Quality tab: stack panels vertically */
#pane-quality .grid.two {
  grid-template-columns: minmax(0, 1fr);
}

/* ============================================================
   Home / landing page
   ============================================================ */
.layout[data-tab="home"] { grid-template-columns: minmax(0, 1fr); }
.layout[data-tab="home"] > .filters { display: none; }
#pane-home.active { display: block; }

.home-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--s-2);
  display: grid;
  gap: var(--s-6);
}

.home-hero {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-8) var(--s-8) var(--s-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s-6);
  align-items: center;
}
.home-hero__text { min-width: 0; }
.home-hero__illust {
  display: flex;
  justify-content: center;
}
.hero-illust {
  width: 100%;
  max-width: 360px;
  height: auto;
}
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero__illust { display: none; }
}
.home-hero h1 {
  font-size: var(--fs-2xl);
  margin: var(--s-2) 0 var(--s-3);
  letter-spacing: -0.02em;
}
.home-hero__lede {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 760px;
  line-height: 1.55;
}
.home-hero__welcome { margin-top: var(--s-3); }
.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.home-cta button { font-size: var(--fs-sm); padding: 10px 16px; }

.home-section h2 {
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.home-section .metric-row { margin-bottom: 0; }

.home-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.home-steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 36px);
  position: relative;
  font-size: var(--fs-base);
  line-height: 1.55;
}
.home-steps li::before {
  content: counter(step);
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  width: 24px; height: 24px;
  background: var(--accent);
  color: #fff;
  font: 600 var(--fs-sm)/24px var(--font-body);
  text-align: center;
  border-radius: 999px;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}
.home-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.home-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
}
.home-card__icon svg { display: block; }
.home-card h3 {
  font-size: var(--fs-md);
  margin: 0 0 var(--s-2);
}
.home-card p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.home-list {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 16px);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* asp/real coloring on home (small marker chips) */
.cw-asp, .cw-real {
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
}
.cw-asp  { color: var(--accent); background: var(--accent-tint); }
.cw-real { color: var(--danger); background: var(--danger-tint); }

/* ============================================================
   Helper banner (dismissable contextual help)
   ============================================================ */
.helper-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
}
.helper-banner__body {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.helper-banner__body ol {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
  line-height: 1.6;
}
.helper-banner__body strong { color: var(--accent-hover); }

/* ============================================================
   Workbench Index — hierarchical groups + portfolio summary
   ============================================================ */
.wb-index__portfolio {
  padding: var(--s-3) var(--s-5);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
}
.wb-index__portfolio .kv-dual {
  margin: 0;
  padding: 0;
}

.wb-index__groups {
  padding: 0;
}

/* "Recently edited" pinned strip */
.wb-index__recent {
  padding: var(--s-3) var(--s-5) var(--s-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
}
.wb-index__recent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
}
.wb-index__recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-2);
}
.recent-card {
  display: grid;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  cursor: pointer;
  text-align: left;
  border-radius: 1px;
  min-height: 0;
  transition: border-color 0.12s;
}
.recent-card:hover {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}
.recent-card.is-incomplete {
  border-left: 3px solid var(--danger);
  padding-left: calc(var(--s-3) - 2px);
}
.recent-card__title {
  font: 600 var(--fs-sm)/1.3 var(--font-body);
  color: var(--ink);
}
.recent-card__meta,
.recent-card__cost,
.recent-card__ago {
  font: 500 var(--fs-xs) var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.recent-card__cost .asp { color: var(--accent); }
.recent-card__cost .real { color: var(--danger); }
.recent-card__ago {
  margin-top: 2px;
  text-transform: uppercase;
}

/* Keyboard focus highlight */
.kbd-focus,
tr.kbd-focus,
.recent-card.kbd-focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-tint) !important;
}

details.group {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin: 0 var(--s-3) var(--s-3);
  background: var(--surface);
  overflow: hidden;
}
details.group:first-of-type { margin-top: var(--s-3); }

details.group > summary.group__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  user-select: none;
  background: var(--surface);
  color: var(--ink);
  transition: background 0.12s;
}
details.group > summary.group__summary:hover {
  background: var(--paper-deep);
}
details.group > summary.group__summary::-webkit-details-marker { display: none; }
details.group > summary.group__summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--ink-mute);
  text-align: center;
  transition: transform 0.15s;
}
details.group[open] > summary.group__summary {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
details.group[open] > summary.group__summary::before {
  transform: rotate(90deg);
}

.group__title {
  font: 600 var(--fs-md)/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: inherit;
}
.group__stats {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.group__stat {
  font: 500 var(--fs-sm) var(--font-mono);
  letter-spacing: 0.04em;
  color: inherit;
  opacity: 0.85;
}
details.group > summary.group__summary .group__stat.asp,
details.group > summary.group__summary .group__stat.real {
  font-weight: 600;
  opacity: 1;
}
.group__stat.asp  { color: var(--accent); }
.group__stat.real { color: var(--danger); }

.group__stat--gap {
  color: inherit;
  font-weight: 700;
  padding-left: var(--s-3);
  border-left: 1px solid currentColor;
  opacity: 1;
}
details.group > .table-wrap {
  margin: 0;
}
details.group .table-wrap table {
  border-top: 0;
}
details.group .table-wrap thead th {
  background: var(--surface-alt);
}

/* Subgroup accordion (nested inside group) — lighter visual */
.subgroups {
  padding: 0;
  background: var(--surface);
}
details.subgroup {
  border-top: 1px solid var(--rule);
}
details.subgroup:first-child { border-top: 0; }
details.subgroup > summary.subgroup__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-5) var(--s-3) calc(var(--s-5) + 24px);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  user-select: none;
  background: var(--surface);
  color: var(--ink);
  transition: background 0.12s;
}
details.subgroup > summary.subgroup__summary:hover {
  background: var(--paper-deep);
}
details.subgroup > summary.subgroup__summary::-webkit-details-marker { display: none; }
details.subgroup > summary.subgroup__summary::before {
  content: '▶';
  font-size: 9px;
  color: var(--ink-mute);
  margin-left: -32px;
  transition: transform 0.15s;
}
details.subgroup[open] > summary.subgroup__summary {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
details.subgroup[open] > summary.subgroup__summary::before {
  transform: rotate(90deg);
}
.subgroup__title {
  font: 600 var(--fs-sm)/1.3 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ============================================================
   Bulk apply summary
   ============================================================ */
.bulk-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) 0;
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* ============================================================
   Library nested sections
   ============================================================ */
.lib-wrap {
  display: grid;
  gap: var(--s-3);
}

/* New: sidebar nav + content shell (replaces accordion stack) */
.lib-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.lib-nav {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-2);
  display: grid;
  gap: 2px;
  position: sticky;
  top: var(--s-3);
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.lib-nav__item {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  min-height: 0;
  box-shadow: none;
  color: var(--ink-soft);
  width: 100%;
  transition: background-color 80ms ease;
}
.lib-nav__item:hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.lib-nav__item.active,
.lib-nav__item.active:hover {
  background: var(--accent-tint);
  color: var(--accent-hover);
}
.lib-nav__title {
  font: 600 var(--fs-sm) var(--font-body);
}
.lib-nav__count {
  font: 500 var(--fs-xs) var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.lib-nav__item.active .lib-nav__count { color: var(--accent); }

.lib-content {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  min-width: 0;
}
.lib-content__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.lib-content__head h2 { margin: 0; font-size: var(--fs-lg); }
.lib-content__head .lib-nav__count {
  background: var(--paper-deep);
  padding: 2px 8px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .lib-shell { grid-template-columns: 1fr; }
  .lib-nav { position: static; max-height: none; }
}

/* ============================================================
   Workbench action picker — sidebar nav + single-action detail
   (replaces the action accordion stack — see Library shell pattern)
   ============================================================ */
.action-shell {
  margin-top: var(--s-3);
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}
.action-nav {
  position: sticky;
  /* The breadcrumb (~56px) is also sticky at top:0 — sit just below it. */
  top: 60px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
.action-nav__item {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  border-radius: var(--r-sm, 4px);
}
.action-nav__item.active {
  border-left-color: var(--accent);
}
.action-nav__item.is-incomplete:not(.active) {
  background: rgba(239, 68, 68, 0.04);
}
.action-nav__title {
  font: 600 var(--fs-sm)/1.3 var(--font-body);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.action-nav__item.active .action-nav__title { color: var(--accent-hover); }
.action-nav__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 500 var(--fs-xs)/1 var(--font-mono);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.action-nav__cost { color: var(--ink-soft); }
.action-nav__item.active .action-nav__cost { color: var(--accent); }
.action-nav__badge {
  font: 500 10px/1.4 var(--font-body);
  color: var(--danger, #dc2626);
  background: rgba(239, 68, 68, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
  align-self: flex-start;
  margin-top: 2px;
}

.action-content {
  padding: 0;
  /* Establish stacking context so the sticky head sits above body content */
  position: relative;
}
.action-content__head {
  position: sticky;
  /* Same offset as .action-nav so the title bar parks right under the
     breadcrumb when scrolling deep into the resource tables. */
  top: 60px;
  z-index: 3;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 6px 10px -8px rgba(15, 23, 42, 0.18);
}
.action-content__head h2 {
  margin: 4px 0 6px;
  font: 600 var(--fs-lg)/1.25 var(--font-body);
}
.action-content__meta {
  font-variant-numeric: tabular-nums;
}
.action-content__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.action-stepper__pos {
  font: 600 var(--fs-xs) var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.action-content__body {
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.action-content__body > .form-grid:first-child {
  margin-top: 0;
}
.action-content__body .editor-table-wrap {
  margin-top: var(--s-4);
}

@media (max-width: 1100px) {
  .action-shell { grid-template-columns: 1fr; }
  .action-nav { max-height: 320px; }
}

/* Pagination control bar */
.paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  margin-top: var(--s-3);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.paging__info { white-space: nowrap; }
.paging__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.paging__page {
  padding: 0 var(--s-2);
  color: var(--ink-mute);
}
.paging__size {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.paging__size select {
  width: auto;
  min-width: 70px;
  min-height: 28px;
  padding: 4px 8px;
}
details.lib {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  overflow: hidden;
}
details.lib > summary.lib__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-5);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  user-select: none;
  background: var(--surface);
  color: var(--ink);
  transition: background 0.12s;
}
details.lib > summary.lib__summary:hover {
  background: var(--paper-deep);
}
details.lib > summary.lib__summary::-webkit-details-marker { display: none; }
details.lib > summary.lib__summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform 0.15s;
}
details.lib[open] > summary.lib__summary {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
details.lib[open] > summary.lib__summary::before {
  transform: rotate(90deg);
}
.lib__title {
  font: 600 var(--fs-md)/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: inherit;
}
.lib__count {
  font: 500 var(--fs-xs) var(--font-body);
  color: var(--ink-mute);
  background: var(--paper-deep);
  padding: 2px 8px;
  border-radius: 999px;
}
.lib__body {
  padding: var(--s-5) var(--s-5) var(--s-5);
  background: var(--surface);
}

/* ============================================================
   Dual bar chart (Scenarios)
   ============================================================ */
.dbar {
  display: grid;
  gap: var(--s-1);
}
.dbar--header {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--rule);
}
.dbar-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: var(--s-3);
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.dbar-row--clickable { cursor: pointer; transition: background 0.1s; }
.dbar-row--clickable:hover { background: var(--paper-deep); }
.dbar-row--clickable:hover .dbar-row__label { color: var(--accent); }
.dbar-row--clickable .dbar-row__label::after {
  content: ' →';
  color: var(--ink-faint);
  font-weight: 600;
}

.outputs-scope {
  display: flex;
  align-items: end;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.outputs-scope label {
  flex: 1;
  min-width: 280px;
  margin-bottom: 0;
}
.dbar-row__label {
  display: grid;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.dbar-row__label > strong {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbar-row__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: var(--s-2);
  align-items: center;
}
.dbar-row__head {
  display: block !important;
  font: 500 var(--fs-xs)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  padding-bottom: 2px;
}
.dbar-row__head--asp  { color: var(--accent); border-bottom: 1.5px solid var(--accent); }
.dbar-row__head--real { color: var(--danger); border-bottom: 1.5px solid var(--danger); }
.dbar-row__track {
  height: 8px;
  background: var(--paper-deep);
}
.dbar-row__fill { height: 100%; }
.dbar-row__fill--asp  { background: var(--accent); }
.dbar-row__fill--real { background: var(--danger); }
.dbar-row__bar > strong {
  font: 500 var(--fs-sm) var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dbar-row__bar > strong.asp  { color: var(--accent); }
.dbar-row__bar > strong.real { color: var(--danger); }

/* Metric strong color override */
.metric strong.asp  { color: var(--accent); }
.metric strong.real { color: var(--danger); }

/* ============================================================
   Decorative — used sparingly
   ============================================================ */
.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
  position: relative;
  text-align: center;
}
.divider::before {
  content: '§';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 var(--s-2);
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: var(--fs-md);
}

/* ============================================================
   User badge + login overlay
   ============================================================ */
.user-badge {
  font: 500 var(--fs-xs) var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.user-badge__role {
  padding: 2px 6px;
  background: var(--header-bg);
  color: var(--paper);
  border-radius: 1px;
  font-weight: 600;
}
.user-badge__role--admin {
  background: var(--accent);
}

.diff-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(20, 17, 12, 0.5);
  z-index: 1100;
  padding: var(--s-5);
}
.diff-card {
  background: var(--surface);
  border: 2px solid var(--header-bg);
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.diff-header {
  padding: var(--s-4) var(--s-5);
  background: var(--paper-deep);
  border-bottom: 2px solid var(--header-bg);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.diff-header h2 { margin: 0; font-size: var(--fs-xl); }
#diffContent {
  overflow-y: auto;
  padding: var(--s-4) var(--s-5) var(--s-5);
  flex: 1;
}
.diff-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.diff-summary .metric {
  padding: var(--s-3);
}
.diff-summary .metric strong { font-size: var(--fs-lg); }
.diff-section {
  margin-bottom: var(--s-4);
}
.diff-section__head {
  font: 600 var(--fs-md) var(--font-display);
  margin: 0 0 var(--s-2);
  padding: 4px var(--s-2);
  background: var(--paper-deep);
  border-left: 3px solid var(--header-bg);
}
.diff-entry {
  border: 1px solid var(--rule);
  background: var(--surface-alt);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
}
.diff-entry__head {
  font-weight: 600;
  margin-bottom: 4px;
}
.diff-entry__head .mono {
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: var(--s-2);
}
.diff-entry--added {
  border-left: 3px solid var(--ok);
}
.diff-entry--removed {
  border-left: 3px solid var(--danger);
}
.diff-entry--modified {
  border-left: 3px solid var(--accent);
}
.diff-fields {
  display: grid;
  gap: 2px;
  font: 500 var(--fs-xs) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.diff-field {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: var(--s-3);
  padding: 2px 0;
}
.diff-field__name { color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.diff-field__old { color: var(--danger); }
.diff-field__new { color: var(--ok); }
.diff-field__old::before { content: '−'; margin-right: 6px; opacity: 0.6; }
.diff-field__new::before { content: '+'; margin-right: 6px; opacity: 0.6; }

.diff-field--conflict {
  background: rgba(168, 92, 0, 0.06);
  margin: 0 calc(-1 * var(--s-2));
  padding: 4px var(--s-2);
}
.diff-field__conflict {
  display: inline-block;
  font-size: 9px;
  font-family: var(--font-mono);
  background: var(--warn);
  color: var(--paper);
  padding: 1px 4px;
  margin-left: var(--s-2);
  border-radius: 1px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.diff-entry--conflict {
  background: rgba(168, 92, 0, 0.05);
  border-left-color: var(--warn) !important;
}

/* Cherry-pick toolbar (above sections in admin mode) */
.cp-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.cp-footer {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 2px solid var(--header-bg);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Per-field checkbox visual */
input.cp-field {
  width: auto;
  min-height: 0;
  margin: 0 var(--s-2) 0 0;
  vertical-align: middle;
  accent-color: var(--accent);
}

.suggestion-row--overlap {
  background: rgba(168, 92, 0, 0.04);
}

.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 243, 236, 0.97);
  z-index: 1000;
  padding: var(--s-6);
  background-image:
    linear-gradient(to right,  rgba(20,17,12,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,17,12,0.025) 1px, transparent 1px);
  background-size: 24px 24px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-8) var(--s-6);
  width: 100%;
  max-width: 400px;
  position: relative;
}
.login-close-btn {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-mute);
  cursor: pointer;
  min-height: 0;
  box-shadow: none;
}
.login-close-btn:hover {
  background: var(--paper-deep);
  color: var(--ink);
  border-color: transparent;
}
.login-card h1 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--s-2);
}
.login-card__icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
}
.login-card__logo {
  height: 72px;
  width: 72px;
  object-fit: contain;
  margin-bottom: var(--s-3);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.login-error {
  margin-top: var(--s-3);
  font: 500 var(--fs-sm) var(--font-mono);
  color: var(--danger);
  min-height: 18px;
}

.login-modes {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.login-mode-btn {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  color: var(--ink-mute);
  font: 600 var(--fs-sm) var(--font-body);
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}
.login-mode-btn:hover {
  background: var(--paper-deep);
  color: var(--ink);
  border-color: transparent;
}
.login-mode-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* Admin user-mgmt forms inside Library */
.admin-form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: end;
}
.admin-form-row label { margin-bottom: 0; }
@media (max-width: 720px) {
  .admin-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Toast
   ============================================================ */
#toast {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  display: none;
  max-width: 360px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--accent);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .filters {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    max-height: none;
  }
  .grid.two, .grid.three, .metric-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions, .top-actions button { width: 100%; }
  .form-grid, .form-grid.two, .form-grid.three, .split-list {
    grid-template-columns: 1fr;
  }
  .workspace { padding: var(--s-3); }
}