:root{
  --app-bg:#ffffff;
  --app-surface:#ffffff;
  --app-surface-alt:#f5f5f5;
  --app-surface-muted:#f0f0f0;
  --app-sidebar:#ffffff;
  --app-topbar:#ffffff;
  --app-border:#000000;
  --app-border-soft:#999999;
  --app-border-faint:#cccccc;
  --app-input-border:#2563eb;
  --app-text:#000000;
  --app-text-muted:#555555;
  --app-text-subtle:#666666;
  --app-accent:#000000;
  --app-accent-contrast:#ffffff;
  --app-accent-soft:#e8e8e8;
  --app-result:#000000;
  --app-result-muted:#222222;
  --app-danger:#444444;
  --app-warning:#555555;
  --app-focus-ring:rgba(0,0,0,.12);
  --app-shadow:0 18px 40px rgba(0,0,0,.12);
  --app-radius-sm:8px;
  --app-radius-md:12px;
  --app-radius-lg:14px;
  --app-gap:12px;
  --app-gap-lg:20px;
  --app-font-body:Georgia,"Times New Roman",Times,serif;
  --app-font-ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --app-font-mono:"Courier New",Courier,monospace;

  --bg:var(--app-bg);
  --panel:var(--app-surface);
  --panel2:var(--app-surface-alt);
  --line:var(--app-border-soft);
  --text:var(--app-text);
  --muted:var(--app-text-muted);
  --accent:var(--app-accent);
  --gold:var(--app-result);
  --danger:var(--app-danger);
}

body[data-skin="courtroom"]{
  --app-bg:#ffffff;
  --app-surface:#ffffff;
  --app-surface-alt:#f5f5f5;
  --app-surface-muted:#eeeeee;
  --app-sidebar:#ffffff;
  --app-topbar:#ffffff;
  --app-border:#000000;
  --app-border-soft:#999999;
  --app-border-faint:#cccccc;
  --app-input-border:#1e40af;
  --app-text:#000000;
  --app-text-muted:#555555;
  --app-text-subtle:#666666;
  --app-accent:#000000;
  --app-accent-contrast:#ffffff;
  --app-accent-soft:#e8e8e8;
  --app-result:#000000;
  --app-result-muted:#222222;
  --app-danger:#444444;
  --app-warning:#555555;
  --app-focus-ring:rgba(0,0,0,.12);
  --app-shadow:0 18px 40px rgba(0,0,0,.12);
  --app-radius-sm:8px;
  --app-radius-md:12px;
  --app-radius-lg:14px;
  --app-font-body:Georgia,"Times New Roman",Times,serif;
  --app-font-ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --app-font-mono:"Courier New",Courier,monospace;
  --bg:var(--app-bg);
  --panel:var(--app-surface);
  --panel2:var(--app-surface-alt);
  --line:var(--app-border-soft);
  --text:var(--app-text);
  --muted:var(--app-text-muted);
  --accent:var(--app-accent);
  --gold:var(--app-result);
  --danger:var(--app-danger);
}

body[data-skin="lab-night"]{
  --app-bg:#120e0b;
  --app-surface:#1a1410;
  --app-surface-alt:#211912;
  --app-surface-muted:#261d16;
  --app-sidebar:#17110d;
  --app-topbar:#120e0b;
  --app-border:#8e734e;
  --app-border-soft:#5c4a36;
  --app-border-faint:#3d3023;
  --app-input-border:#56d4ff;
  --app-text:#f1dcc1;
  --app-text-muted:#b59f85;
  --app-text-subtle:#998872;
  --app-accent:#f5b454;
  --app-accent-contrast:#1a1410;
  --app-accent-soft:#2b2118;
  --app-result:#56d4ff;
  --app-result-muted:#f5b454;
  --app-danger:#d27b6b;
  --app-warning:#f5b454;
  --app-focus-ring:rgba(86,212,255,.18);
  --app-shadow:0 18px 40px rgba(0,0,0,.42);
  --app-radius-sm:10px;
  --app-radius-md:14px;
  --app-radius-lg:16px;
  --app-font-body:Georgia,"Times New Roman",Times,serif;
  --app-font-ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --app-font-mono:"Courier New",Courier,monospace;
  --bg:var(--app-bg);
  --panel:var(--app-surface);
  --panel2:var(--app-surface-alt);
  --line:var(--app-border-soft);
  --text:var(--app-text);
  --muted:var(--app-text-muted);
  --accent:var(--app-accent);
  --gold:var(--app-result);
  --danger:var(--app-danger);
}

body[data-skin="print"]{
  --app-bg:#ffffff;
  --app-surface:#ffffff;
  --app-surface-alt:#fafafa;
  --app-surface-muted:#f6f6f6;
  --app-sidebar:#ffffff;
  --app-topbar:#ffffff;
  --app-border:#333333;
  --app-border-soft:#a8a8a8;
  --app-border-faint:#d5d5d5;
  --app-input-border:#2563eb;
  --app-text:#222222;
  --app-text-muted:#666666;
  --app-text-subtle:#777777;
  --app-accent:#333333;
  --app-accent-contrast:#ffffff;
  --app-accent-soft:#ededed;
  --app-result:#111111;
  --app-result-muted:#333333;
  --app-danger:#555555;
  --app-warning:#555555;
  --app-focus-ring:rgba(0,0,0,.08);
  --app-shadow:0 12px 28px rgba(0,0,0,.08);
  --app-radius-sm:6px;
  --app-radius-md:10px;
  --app-radius-lg:12px;
  --app-font-body:Georgia,"Times New Roman",Times,serif;
  --app-font-ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --app-font-mono:"Courier New",Courier,monospace;
  --bg:var(--app-bg);
  --panel:var(--app-surface);
  --panel2:var(--app-surface-alt);
  --line:var(--app-border-soft);
  --text:var(--app-text);
  --muted:var(--app-text-muted);
  --accent:var(--app-accent);
  --gold:var(--app-result);
  --danger:var(--app-danger);
}

*{box-sizing:border-box}
html{background:var(--app-bg)}
body{margin:0;font-family:var(--app-font-body);background:var(--app-bg);color:var(--app-text)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--app-border);background:var(--app-topbar);gap:12px;position:sticky;top:0;z-index:40}
.brand{font-weight:700;letter-spacing:.02em;font-family:var(--app-font-body)}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{background:var(--app-surface-alt);color:var(--text);border:1px solid var(--app-border-soft);border-radius:8px;padding:8px 12px;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--app-accent-contrast)}
.btn.primary{background:var(--app-accent);border-color:var(--app-border);color:var(--app-accent-contrast)}
.btn.good{background:var(--app-surface-alt);border-color:var(--app-border-soft)}
.btn.danger{background:var(--app-surface-alt);border-color:var(--app-border-soft)}
.btn.small{padding:6px 9px;font-size:12px}
.layout{display:grid;grid-template-columns:320px 1fr 370px;height:calc(100vh - 57px)}
.left,.center,.right{overflow:auto;padding:12px}
.left{border-right:1px solid var(--line);background:var(--app-sidebar)}
.right{border-left:1px solid var(--line);background:var(--app-sidebar)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.panel h3,.panel h4{margin:0 0 10px}
.muted{color:var(--muted)}
input,select,textarea{width:100%;background:var(--app-surface-muted);border:2px solid var(--app-input-border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:11pt;font-weight:600;font-family:inherit}
/* v149.14.2 — Entry affordance. All interactive form controls now use a
 * per-skin blue border (--app-input-border) at 2px so users immediately
 * see where input is expected. White fill stays on Print/Courtroom so the
 * blue outline reads against the page. Checkboxes and radios get an
 * outline treatment since the native control inside varies by platform. */
body[data-skin="courtroom"] input,
body[data-skin="courtroom"] select,
body[data-skin="courtroom"] textarea,
body[data-skin="print"] input,
body[data-skin="print"] select,
body[data-skin="print"] textarea{
  background:#ffffff;
}
/* Checkboxes and radio buttons — 2px blue outline around native control.
 * accent-color tints the native checkmark/dot to match.
 * outline-offset gives breathing room so the ring doesn't crowd the box. */
input[type="checkbox"],input[type="radio"]{
  width:auto;
  outline:2px solid var(--app-input-border);
  outline-offset:2px;
  accent-color:var(--app-input-border);
  border:none;
  background:transparent;
  padding:0;
}
input[type="checkbox"]:focus,input[type="radio"]:focus{
  outline-width:3px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--app-input-border);box-shadow:0 0 0 3px var(--app-focus-ring)}
textarea{min-height:88px;resize:vertical}
.folder{margin-top:10px}
.folder-title{font-weight:700;color:var(--accent);padding:8px;border-radius:8px;background:var(--app-surface-alt);border:1px solid var(--app-border-soft)}
.folder-items{padding:8px 0 0 10px}
.eq-item{padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent;margin-bottom:6px}
.eq-item:hover{background:var(--app-accent-soft);border-color:var(--app-border)}
.eq-item.active{background:var(--app-accent-soft);border-color:var(--app-accent)}
.eq-sub{font-size:12px;color:var(--muted);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.result-card{background:var(--panel2);border:1px solid var(--app-border-soft);border-radius:12px;padding:12px}
.result-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.result-value{font-size:26px;color:var(--gold);font-weight:800;margin-top:6px}
.formula{font-family:Consolas,Monaco,monospace;background:var(--app-surface-muted);border:1px solid var(--app-border-soft);border-radius:10px;padding:10px;color:var(--app-text)}
.steps{font-family:Consolas,Monaco,monospace;white-space:pre-wrap;line-height:1.5;background:var(--app-surface-muted);border:1px solid var(--app-border-soft);border-radius:10px;padding:10px}
.saved-item{padding:10px;border-radius:10px;border:1px solid var(--app-border-soft);background:var(--app-surface-muted);margin-bottom:8px;cursor:pointer;user-select:none}
.saved-item.active{border-color:var(--app-accent);background:var(--app-accent-soft)}
.saved-item.multisel{border-color:var(--app-result);background:#3b2f0b}
.saved-title{font-weight:700}
.saved-sub{font-size:12px;color:var(--muted);margin-top:4px}
.tiny{font-size:12px}
.status{padding:7px 10px;border-radius:999px;background:var(--app-surface-muted);border:1px solid var(--app-border-soft)}
.report-preview{white-space:pre-wrap;line-height:1.45;background:var(--app-accent-contrast);color:var(--app-text);border-radius:12px;padding:14px;min-height:200px}
.split{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--app-accent-soft);border:1px solid var(--app-border);color:var(--app-text)}
.small-actions,.bulkbar{display:flex;gap:6px;flex-wrap:wrap}
.empty{padding:20px;border:1px dashed var(--app-border-soft);border-radius:12px;color:var(--muted);text-align:center}
.tabs-wrap{position:sticky;top:0;z-index:20;background:var(--bg);padding-bottom:10px}
.tabs{display:flex;gap:6px;overflow:auto;padding:0 0 6px}
.tab{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#0a1324;border:1px solid var(--app-border-soft);cursor:pointer;white-space:nowrap}
.tab.active{background:var(--app-accent-soft);border-color:var(--app-accent)}
.tab.unsaved::after{content:"●";font-size:12px;color:var(--app-result)}
.tab .close{opacity:.7;font-weight:700;cursor:pointer}
.workspace-titlebar{display:grid;grid-template-columns:1fr 220px auto;gap:10px;align-items:end}
.note{padding:10px;border-left:3px solid var(--accent);background:#0f172a;border-radius:0 8px 8px 0;color:var(--app-text);font-size:13px}
.mt8{margin-top:8px}.mt10{margin-top:10px}.no-margin{margin:0}
.vehicle-row{display:grid;grid-template-columns:88px 1fr 32px;gap:8px;align-items:end;margin-bottom:8px}
.vehicle-code{background:var(--app-accent-soft);border:1px solid var(--app-border);border-radius:8px;padding:8px 10px;text-align:center;font-weight:700}
.vehicle-remove{height:38px}
@media (max-width: 1200px){ .layout{grid-template-columns:280px 1fr 320px} }

.bulk-vehicle-select{min-width:180px;max-width:240px;width:auto}


.context-menu{
  position:fixed;
  z-index:9999;
  min-width:220px;
  background:var(--app-sidebar);
  border:1px solid var(--app-border-soft);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  padding:6px;
}
.context-menu.hidden{display:none}
.context-item{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  color:var(--text);
  border:none;
  border-radius:8px;
  padding:9px 10px;
  cursor:pointer;
}
.context-item:hover{background:var(--app-accent-soft)}
.context-sep{height:1px;background:var(--app-border-soft);margin:6px 4px}
.context-subtitle{
  font-size:11px;
  color:var(--muted);
  padding:6px 10px 4px;
  text-transform:uppercase;
  letter-spacing:.06em;
}


.modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.66);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.modal.hidden{display:none}
.modal-card{
  width:min(440px, calc(100vw - 32px));
  background:var(--app-sidebar);
  border:1px solid var(--app-border-soft);
  border-radius:14px;
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

.status.warn{border-color:var(--app-warning);color:var(--app-text)}


.tabs-meta{margin-bottom:6px}
.meta-good{color:var(--app-text)}
.meta-bad{color:var(--app-text-muted)}


.group-block{border:1px solid var(--app-border-soft);border-radius:12px;background:#0a1324;margin-bottom:10px;overflow:hidden}
.group-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--app-accent-soft);border-bottom:1px solid var(--app-border-soft)}
.group-title{font-weight:700;color:var(--app-text);cursor:pointer}
.group-header-actions{display:flex;gap:6px;align-items:center}
.group-body{padding:10px}
.group-collapsed .group-body{display:none}
.group-dropzone{border:1px dashed var(--app-border-soft);border-radius:8px;padding:10px;text-align:center;color:var(--app-text-muted);margin-top:8px}
.saved-item.ungrouped{border-style:dashed}

.group-header-actions .btn{min-width:32px}

.saved-item.dragging{opacity:.45;border-color:var(--app-accent)}
.group-block.drop-target{outline:2px solid var(--app-accent);outline-offset:2px}
.group-body.drop-target{background:var(--app-accent-soft)}
.ungrouped-drop.drop-target{outline:2px dashed var(--app-accent);outline-offset:2px;background:var(--app-accent-soft)}


.group-tree{display:flex;flex-direction:column;gap:10px}
.group-level-1{margin-left:18px}
.group-level-2{margin-left:36px}
.group-level-3{margin-left:54px}
.group-level-4{margin-left:72px}
.group-block.subgroup{border-color:#3b4b60}
.group-title-wrap{display:flex;align-items:center;gap:8px}
.twisty{font-size:12px;color:var(--app-text-muted);min-width:10px}


.group-color-0{border-left:5px solid var(--app-border)}
.group-color-1{border-left:5px solid var(--app-border-soft)}
.group-color-2{border-left:5px solid var(--app-border)}
.group-color-3{border-left:5px solid var(--app-border-soft)}
.group-color-4{border-left:5px solid var(--app-border-soft)}
.group-color-5{border-left:5px solid var(--app-border-soft)}
.group-color-6{border-left:5px solid var(--app-border-soft)}
.group-color-7{border-left:5px solid var(--app-border-faint)}
.saved-item.group-tinted-0{background:var(--app-accent-soft)}
.saved-item.group-tinted-1{background:var(--app-surface-alt)}
.saved-item.group-tinted-2{background:var(--app-surface-alt)}
.saved-item.group-tinted-3{background:var(--app-surface-alt)}
.saved-item.group-tinted-4{background:var(--app-surface-alt)}
.saved-item.group-tinted-5{background:var(--app-surface-alt)}
.saved-item.group-tinted-6{background:var(--app-surface-alt)}
.saved-item.group-tinted-7{background:var(--app-surface-alt)}
.group-children{margin-top:8px}


/* v93 stable: visible, restrained group coloring */
.group-color-0{border-left:6px solid var(--app-border) !important;background:rgba(96,165,250,.06) !important}
.group-color-1{border-left:6px solid var(--app-border-soft) !important;background:rgba(52,211,153,.06) !important}
.group-color-2{border-left:6px solid var(--app-border) !important;background:rgba(251,191,36,.06) !important}
.group-color-3{border-left:6px solid var(--app-border-soft) !important;background:rgba(244,114,182,.06) !important}
.group-color-4{border-left:6px solid var(--app-border-soft) !important;background:rgba(167,139,250,.06) !important}
.group-color-5{border-left:6px solid var(--app-border-soft) !important;background:rgba(251,113,133,.06) !important}
.group-color-6{border-left:6px solid var(--app-border-soft) !important;background:rgba(34,211,238,.06) !important}
.group-color-7{border-left:6px solid var(--app-border-faint) !important;background:rgba(203,213,225,.06) !important}

.saved-item.group-tinted-0{background:var(--app-accent-soft) !important}
.saved-item.group-tinted-1{background:var(--app-surface-alt) !important}
.saved-item.group-tinted-2{background:var(--app-surface-alt) !important}
.saved-item.group-tinted-3{background:var(--app-surface-alt) !important}
.saved-item.group-tinted-4{background:var(--app-surface-alt) !important}
.saved-item.group-tinted-5{background:var(--app-surface-alt) !important}
.saved-item.group-tinted-6{background:var(--app-surface-alt) !important}
.saved-item.group-tinted-7{background:var(--app-surface-alt) !important}

.group-children{margin-top:8px}


/* v101 drag scroll zones + group picker support */
#savedList{
  max-height: calc(100vh - 320px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.drag-scroll-zone{
  border: 1px dashed var(--app-border-soft);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--app-text-muted);
  background: var(--app-surface-alt);
}
.drag-scroll-zone.active{
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-text);
}

.group-picker-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.group-picker-dialog{
  width: min(560px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: var(--app-text);
  border: 1px solid var(--app-border-soft);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 24px 50px rgba(0,0,0,.22);
}
.group-picker-title{
  font-weight: 700;
  margin-bottom: 10px;
}
.group-picker-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.group-picker-item{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--app-border-soft);
  background: var(--app-surface-muted);
  color: #e5eef9;
  border-radius: 10px;
  cursor: pointer;
}
.group-picker-item:hover{
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}
.group-picker-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.group-picker-input{
  width: 100%;
  margin-top: 8px;
}


/* v102 picker dialogs */
.picker-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.picker-dialog{
  width:min(700px,94vw);
  max-height:86vh;
  overflow:auto;
  background:var(--app-text);
  border:1px solid var(--app-border-soft);
  border-radius:16px;
  padding:16px;
  box-shadow:0 28px 60px rgba(0,0,0,.32);
}
.picker-title{
  font-weight:700;
  margin-bottom:8px;
}
.picker-sub{
  font-size:12px;
  color:var(--app-text-muted);
  margin-bottom:12px;
}
.picker-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.picker-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:320px;
  overflow:auto;
  border:1px solid var(--app-border-soft);
  border-radius:12px;
  padding:10px;
  background:var(--app-surface-muted);
}
.picker-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--app-border-soft);
  border-radius:10px;
  background:#0f172a;
  color:#e5eef9;
  cursor:pointer;
}
.picker-item:hover,
.picker-item.active{
  border-color:var(--app-accent);
  background:var(--app-accent-soft);
}
.picker-item .small{
  display:block;
  margin-top:4px;
}
.picker-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.picker-input{
  width:100%;
  margin-top:8px;
}
.picker-note{
  margin-top:10px;
  font-size:12px;
  color:var(--app-text-muted);
}


/* v103 move group/subgroup controls */
.group-picker-item.danger-like:hover{
  border-color:var(--app-warning);
  background:#241406;
}


/* v104 group editing cleanup */
.group-header{
  align-items:flex-start;
}
.group-title-wrap{
  flex:1 1 auto;
  min-width:0;
}
.group-title{
  display:inline-block;
  max-width:100%;
  word-break:break-word;
}
.group-header-actions{
  display:none !important;
}
.group-inline-edit{
  width:100%;
  max-width:100%;
  margin-top:2px;
  padding:6px 8px;
  border:1px solid var(--app-accent);
  border-radius:8px;
  background:var(--app-surface-muted);
  color:#e5eef9;
}


/* v105 overflow + full subgroup picker fix */
#vehicleManager{
  max-height: min(42vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.vehicle-row{
  display:grid;
  grid-template-columns: 92px minmax(0,1fr) 44px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.vehicle-row input{
  min-width:0;
  width:100%;
}
.context-menu{
  max-width: min(340px, calc(100vw - 16px));
  max-height: min(78vh, 680px);
  overflow:auto;
}
.picker-list{
  max-height:min(42vh, 360px);
}
.picker-item.indent-1{padding-left:24px}
.picker-item.indent-2{padding-left:36px}
.picker-item.indent-3{padding-left:48px}
.picker-item.indent-4{padding-left:60px}


/* v107 unified picker + right pane readability */
#savedList{
  max-height: calc(100vh - 320px);
  overflow: auto;
  padding-right: 4px;
}
.group-tree{
  gap: 8px;
}
.group-level-1{margin-left:14px}
.group-level-2{margin-left:26px}
.group-level-3{margin-left:34px}
.group-level-4{margin-left:40px}
.group-block{
  overflow: hidden;
}
.group-title-wrap{
  min-width: 0;
}
.group-title{
  line-height: 1.28;
  white-space: normal;
  overflow-wrap: anywhere;
}
.saved-item{
  min-width: 0;
}
.saved-title{
  line-height: 1.28;
  white-space: normal;
  overflow-wrap: anywhere;
}
.saved-sub{
  white-space: normal;
  overflow-wrap: anywhere;
}
.group-body{
  padding-right: 2px;
}
.group-children{
  margin-top: 6px;
  border-left: 1px dashed rgba(148,163,184,.35);
  padding-left: 8px;
}

.picker-tree-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(48vh, 420px);
  overflow:auto;
  border:1px solid var(--app-border-soft);
  border-radius:12px;
  padding:10px;
  background:var(--app-surface-muted);
}
.picker-tree-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--app-border-soft);
  border-radius:10px;
  background:#0f172a;
  color:#e5eef9;
  cursor:pointer;
}
.picker-tree-item:hover,
.picker-tree-item.active{
  border-color:var(--app-accent);
  background:var(--app-accent-soft);
}
.picker-tree-item .small{
  display:block;
  margin-top:4px;
}
.picker-indent-0{padding-left:12px}
.picker-indent-1{padding-left:26px}
.picker-indent-2{padding-left:40px}
.picker-indent-3{padding-left:54px}
.picker-indent-4{padding-left:68px}


/* v108 layout cleanup / vehicle dialog */
.vehicle-modal-card{
  width:min(820px, 94vw);
  max-height:82vh;
  overflow:auto;
}
#vehicleManager{
  max-height:min(52vh, 560px);
  overflow:auto;
  padding-right:4px;
}
.vehicle-row{
  display:grid;
  grid-template-columns: 92px minmax(0,1fr) 44px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.vehicle-row input{
  min-width:0;
  width:100%;
}
.left .panel h3{
  margin-bottom:6px;
}

/* v109 vehicle system */
.vehicle-row{
  display:grid;
  grid-template-columns: 92px minmax(0,1fr) 40px 40px 44px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.vehicle-code-input{
  width:100%;
  text-align:center;
  font-weight:700;
}
/* v149.15 — vehicle name is now a dblclick-editable span (was input).
 * Style to roughly match an input visually so users see it as the name
 * field — 11pt, bold, padded, subtle boundary — while the pencil-icon
 * hover affordance from .editable-name tells them it's clickable. */
.vehicle-name-label{
  display:inline-block;
  padding:8px 10px;
  font-size:11pt;
  font-weight:600;
  color:var(--text);
  background:transparent;
  border-radius:6px;
  min-height:1.2em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:text;
}
.vehicle-order-btn{
  min-width:36px;
}

/* v113 dev log + save/save as */
.devlog-modal-card{
  width:min(1100px, 96vw);
  max-height:86vh;
  overflow:auto;
}
.devlog-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.devlog-box{
  border:1px solid var(--app-border-soft);
  border-radius:12px;
  background:var(--app-surface-muted);
  padding:12px;
  min-height:180px;
  white-space:pre-wrap;
  line-height:1.45;
}
@media (max-width: 900px){
  .devlog-grid{grid-template-columns:1fr}
}

/* v114 recovery */
.recovery-modal-card{
  width:min(1100px, 96vw);
  max-height:86vh;
  overflow:auto;
}
.recovery-item{
  border:1px solid var(--app-border-soft);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:8px;
  background:#0f172a;
}
.recovery-item .small{
  display:block;
  margin-top:4px;
  color:var(--app-text-muted);
}
.recovery-actions-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* v118 clean dev log */
.devlog-accordion .section{
  border:1px solid var(--app-border-soft);
  border-radius:10px;
  margin-bottom:10px;
  background:var(--app-surface-muted);
}
.devlog-accordion .header{
  padding:10px 12px;
  cursor:pointer;
  font-weight:600;
  background:var(--app-text);
}
.devlog-accordion .body{
  padding:10px 14px;
  display:none;
}
.devlog-accordion .body.open{
  display:block;
}
.devlog-accordion .item{
  margin:5px 0;
  line-height:1.4;
}
.devlog-accordion .high{color:#f87171;}
.devlog-accordion .medium{color:var(--app-border);}
.devlog-accordion .low{color:var(--app-border-soft);}


/* v119 bottom panel redesign */
.bottom-workspace{
  margin-top: 14px;
  padding: 0 12px 12px 12px;
}
.bottom-grid{
  display:grid;
  grid-template-columns: 1fr 1.25fr 1.1fr;
  gap:12px;
}
.bottom-box{
  border:1px solid var(--app-border-soft);
  border-radius:12px;
  background:var(--app-surface-muted);
  min-height:220px;
  padding:12px;
  white-space:pre-wrap;
  line-height:1.45;
  overflow:auto;
}
.bottom-notes{
  width:100%;
  min-height:220px;
  border:1px solid var(--app-border-soft);
  border-radius:12px;
  background:var(--app-surface-muted);
  color:#e5eef9;
  padding:12px;
  resize:vertical;
}
.activity-log{
  min-height:120px;
  max-height:220px;
}
.activity-entry{
  padding:6px 0;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.activity-entry:last-child{
  border-bottom:none;
}
.report-order-group{
  margin-bottom:10px;
}
.report-order-group-title{
  font-weight:700;
  margin-bottom:4px;
}
.report-order-item{
  padding-left:12px;
  line-height:1.35;
}
.summary-row{
  margin-bottom:6px;
}
@media (max-width: 1100px){
  .bottom-grid{grid-template-columns:1fr}
}


/* v123 tab-state fix */
.tab.unsaved{
  background:#2a1f08 !important;
  border-color:var(--app-warning) !important;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.22);
}
.tab.active.unsaved{
  background:#3a2a0d !important;
  border-color:var(--app-border) !important;
}
.tab.unsaved .tab-title,
.tab.active.unsaved .tab-title{
  color:var(--app-text) !important;
}
.tab.unsaved::after{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-left:8px;
  border-radius:999px;
  background:var(--app-result);
  box-shadow:0 0 0 1px rgba(250,204,21,.45);
  vertical-align:middle;
}

#saveBtn{
  transition:background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}
#saveBtn.clean{
  background:var(--app-surface-alt) !important;
  border-color:var(--app-border-soft) !important;
  color:var(--app-border-faint) !important;
}
#saveBtn.dirty{
  background:var(--app-border-soft) !important;
  border-color:#16a34a !important;
  color:#ffffff !important;
}


/* v125 close-all unsaved sequence */
#confirmModal .modal-card{
  max-width: 640px;
}


/* v127 dedicated close-all modal */
#closeAllUnsavedModal .modal-card{
  max-width:680px;
}

/* v128 stability */
#autosaveStatus.warn{
  border-color:var(--app-warning);
}


/* v130 close-all patch */
#closeAllUnsavedModal .modal-card{max-width:680px;}
#closeAllUnsavedHeader{user-select:none;}


/* v132 modal drag fix */

#closeAllUnsavedModal .modal-card .split{
  cursor: move;
  user-select: none;
}
#closeAllUnsavedModal .modal-card .split button{
  cursor: pointer;
}


/* v133 drag activation fix */
#closeAllUnsavedModal .modal-card{
  will-change: left, top;
}


/* v135 safer stability patch */
.recovery-banner{
  margin:10px 12px 0 12px;
  padding:10px 12px;
  border:1px solid var(--app-border-soft);
  border-radius:10px;
  background:#132033;
  color:#e5eef9;
}
.recovery-banner.hidden{display:none;}
.recovery-banner .split{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.recovery-banner .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


/* v136 layout/banner/modal anchor fix */
.recovery-banner{
  width: calc(100% - 24px);
  box-sizing: border-box;
}
#closeAllUnsavedHeader{
  cursor: move;
  user-select: none;
}
#closeAllUnsavedHeader button{
  cursor: pointer;
}


/* v137 right pane scroll fix */
#savedCalculationsList,
.saved-calculations-list,
.saved-items {
  padding-bottom: 100px !important;
}

.saved-pane,
#savedPane,
.saved-container {
  overflow-y: auto;
  scroll-padding-bottom: 100px;
}

.saved-item:last-child {
  margin-bottom: 60px;
}

.recovery-banner[data-level="warning"]{
  border-color:var(--app-warning);
  background:#3b2a08;
  color:#fff4d6;
}


.skin-control{display:flex;align-items:center;gap:6px;font-family:var(--app-font-ui);font-size:10pt}
.skin-control label{font-size:9pt;letter-spacing:.05em;text-transform:uppercase;color:var(--app-text-muted)}
.skin-control select{width:auto;min-width:140px;font-family:var(--app-font-ui)}
.top-actions{font-family:var(--app-font-ui)}
.btn{font-family:var(--app-font-ui);border-radius:var(--app-radius-sm)}
.btn:hover{border-color:var(--app-accent);color:var(--app-accent-contrast);background:var(--app-accent)}
.btn.primary{background:var(--app-accent);border-color:var(--app-border);color:var(--app-accent-contrast)}
.btn.good,.btn.danger{color:var(--app-text)}
.layout{grid-template-columns:320px 1fr 370px;height:calc(100vh - 61px)}
.left,.center,.right{background:var(--app-sidebar)}
.panel{background:var(--app-surface);border-color:var(--app-border-soft);border-radius:var(--app-radius-lg);box-shadow:none}
.panel h3,.panel h4,.field label,.tag,.status,.note,.folder-title,.tabs-meta,.result-label,.modal-card h3{font-family:var(--app-font-ui)}
.status{background:var(--app-surface-alt);border:1px solid var(--app-border-soft);color:var(--app-text)}
input,select,textarea{background:var(--app-surface);border:2px solid var(--app-input-border);color:var(--app-text);font-family:var(--app-font-mono)}
select,button,.field label,.muted,.tiny,.note,.tag{font-family:var(--app-font-ui)}
textarea{font-family:var(--app-font-body)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--app-input-border);box-shadow:0 0 0 3px var(--app-focus-ring)}
.folder-title,.note,.tab,.saved-item,.group-block,.result-card,.formula,.steps,.report-preview,.modal-card,.context-menu,.group-picker-dialog{background:var(--app-surface);color:var(--app-text)}
.folder-title,.tab,.saved-item,.group-block,.result-card,.formula,.steps,.report-preview,.modal-card,.context-menu,.group-picker-dialog,.group-picker-item,.context-item{border-color:var(--app-border-soft)}
.eq-item.active,.tab.active,.saved-item.active,.unc-toggle.active,.group-block.drop-target,.ungrouped-drop.drop-target,.drag-scroll-zone.active{border-color:var(--app-border)}
.eq-item.active,.tab.active,.saved-item.active,.group-body.drop-target,.drag-scroll-zone.active{background:var(--app-accent-soft)}
.result-value{color:var(--app-result);font-family:var(--app-font-mono)}
.formula,.steps,.result-value,.conv,.build,.result-range,.f-effective .val{font-family:var(--app-font-mono)}
.report-preview{border:1px solid var(--app-border-soft)}
.modal{background:rgba(0,0,0,.5)}
.modal-card{background:var(--app-surface);border:1px solid var(--app-border);box-shadow:var(--app-shadow)}
.context-menu{background:var(--app-surface);border:1px solid var(--app-border);box-shadow:var(--app-shadow)}
.group-picker-dialog{background:var(--app-surface);border:1px solid var(--app-border);box-shadow:var(--app-shadow)}

.prefs-modal-shell.hidden{display:none}
.prefs-modal-shell{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center}
.prefs-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.prefs-modal{position:relative;z-index:1;max-width:760px;width:calc(100vw - 40px);max-height:calc(100vh - 60px);margin:0;background:var(--app-surface);border:2px solid var(--app-border);display:flex;flex-direction:column;box-shadow:var(--app-shadow);overflow:hidden}
.prefs-modal-header{padding:18px 24px 14px;border-bottom:2px solid var(--app-border);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:var(--app-surface)}
.prefs-modal-header-titles h2{margin:0;font-family:var(--app-font-body);font-size:16pt;font-weight:700}
.prefs-modal-subtitle{margin-top:3px;font-family:var(--app-font-ui);font-size:9pt;color:var(--app-text-muted);letter-spacing:.05em;text-transform:uppercase}
.prefs-modal-header-actions{display:flex;gap:8px;flex-shrink:0}
.prefs-tab-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--app-border);background:var(--app-surface)}
.prefs-tab-btn{background:var(--app-surface);color:var(--app-text);border:none;border-right:1px solid var(--app-border-soft);padding:10px 8px;font-family:var(--app-font-body);font-size:11pt;cursor:pointer;text-align:center}
.prefs-tab-btn:last-child{border-right:none}
.prefs-tab-btn:hover{background:var(--app-surface-alt)}
.prefs-tab-btn.active{background:var(--app-accent);color:var(--app-accent-contrast);font-weight:700}
.prefs-tab-label{font-family:var(--app-font-body);font-size:11pt}
.prefs-tab-sublabel{display:block;font-family:var(--app-font-ui);font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;opacity:.8}
.prefs-modal-body{flex:1;overflow-y:auto;padding:20px 24px;background:var(--app-surface)}
.prefs-pane{display:none}
.prefs-pane.active{display:block}
.prefs-group{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--app-border-faint)}
.prefs-group:last-child{margin-bottom:0;border-bottom:none}
.prefs-group-hd{font-family:var(--app-font-ui);font-size:9pt;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--app-text);margin-bottom:12px;padding-bottom:4px;border-bottom:1px solid var(--app-border)}
.prefs-placeholder{padding:14px 16px;background:var(--app-surface-alt);border:1px solid var(--app-border-soft);font-family:var(--app-font-ui);font-size:10pt;color:var(--app-text-muted)}
.prefs-modal-footer{padding:14px 24px;border-top:2px solid var(--app-border);display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--app-surface)}
.prefs-footer-notes{font-family:var(--app-font-ui);font-size:9pt;color:var(--app-text-muted);font-style:italic}
.prefs-footer-actions{display:flex;gap:8px}


.prefs-row{display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:start;padding:10px 0}
.prefs-row + .prefs-row{border-top:1px dotted var(--app-border-faint)}
.prefs-row-stack{grid-template-columns:1fr}
.prefs-label{font-family:var(--app-font-body);font-size:11pt;color:var(--app-text);line-height:1.35}
.prefs-desc{display:block;font-family:var(--app-font-ui);font-size:9pt;color:var(--app-text-muted);margin-top:3px;font-style:italic;line-height:1.4}
.prefs-control{font-family:var(--app-font-mono);font-size:11pt}
.prefs-control input[type="text"],.prefs-control input[type="number"],.prefs-control select{width:100%;padding:5px 8px;font-family:var(--app-font-mono);font-size:11pt;border:2px solid var(--app-input-border);background:var(--app-surface);color:var(--app-text);font-variant-numeric:tabular-nums;border-radius:8px}
.prefs-control select{font-family:var(--app-font-ui);font-size:10pt}
.prefs-control input:focus,.prefs-control select:focus{outline:2px solid var(--app-input-border);outline-offset:-1px}
.prefs-control .is-readonly{background:var(--app-surface-alt)}
.prefs-check{display:flex;align-items:center}
.prefs-check label{display:flex;align-items:center;gap:8px;font-family:var(--app-font-ui);font-size:10pt}
.prefs-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--app-accent);margin:0}
.prefs-radio-group{display:flex;gap:8px;flex-wrap:wrap}
.prefs-radio-group label{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--app-border-soft);border-radius:999px;font-family:var(--app-font-ui);font-size:9pt;background:var(--app-surface-alt);cursor:pointer}
.prefs-radio-group input{width:auto;margin:0}
.prefs-decimal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:8px;background:var(--app-surface-alt);border:1px solid var(--app-border-soft);border-radius:10px}
.prefs-decimal-cell{display:flex;flex-direction:column;gap:3px}
.prefs-decimal-cell label{font-family:var(--app-font-ui);font-size:8.5pt;color:var(--app-text-muted);letter-spacing:.04em;text-transform:uppercase}
.prefs-decimal-cell input{text-align:center}
.prefs-skin-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.prefs-skin-tile{border:1px solid var(--app-border-soft);padding:0;cursor:pointer;text-align:left;background:var(--app-surface);position:relative;border-radius:12px;overflow:hidden}
.prefs-skin-tile.selected{border:2px solid var(--app-border)}
.prefs-skin-preview{padding:10px 12px;min-height:68px}
.prefs-skin-label{padding:6px 10px;background:var(--app-surface);border-top:1px solid var(--app-border-soft);font-family:var(--app-font-ui);font-size:9pt;font-weight:600;letter-spacing:.05em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.prefs-skin-badge{font-size:7.5pt;background:var(--app-accent);color:var(--app-accent-contrast);padding:1px 5px;letter-spacing:.08em;border-radius:999px}
.prefs-skin-preview-text{font-family:var(--app-font-body);font-size:10pt}
.prefs-skin-preview-value{font-family:var(--app-font-mono);font-size:14pt;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.prefs-skin-tile.courtroom .prefs-skin-preview{background:#fff;color:#000}
.prefs-skin-tile.courtroom .prefs-skin-preview-text,.prefs-skin-tile.courtroom .prefs-skin-preview-value{color:#000}
.prefs-skin-tile.lab-night .prefs-skin-preview{background:#1a1410;color:#f5b454}
.prefs-skin-tile.lab-night .prefs-skin-preview-text{color:#998872}
.prefs-skin-tile.lab-night .prefs-skin-preview-value{color:#56d4ff;text-shadow:0 0 8px rgba(86,212,255,.5)}
.prefs-skin-tile.print .prefs-skin-preview{background:#fff;color:#333}
.prefs-skin-tile.print .prefs-skin-preview-text{color:#555}
.prefs-skin-tile.print .prefs-skin-preview-value{color:#111}
body[data-skin="lab-night"] .prefs-radio-group label{background:var(--app-accent-soft)}
body[data-skin="lab-night"] .prefs-control .is-readonly{background:#221a13}
@media (max-width: 760px){.prefs-row{grid-template-columns:1fr}.prefs-skin-tiles{grid-template-columns:1fr}.prefs-decimal-grid{grid-template-columns:repeat(2,1fr)}}

body[data-skin="lab-night"] .result-value{ text-shadow:0 0 10px rgba(86,212,255,.35)}
body[data-skin="lab-night"] .topbar, body[data-skin="lab-night"] .panel, body[data-skin="lab-night"] .modal-card, body[data-skin="lab-night"] .prefs-modal{box-shadow:var(--app-shadow)}
body[data-skin="print"] .topbar, body[data-skin="print"] .panel, body[data-skin="print"] .modal-card, body[data-skin="print"] .prefs-modal{box-shadow:none}

/* v142 Formula Tree */
.formula-tree{display:flex;flex-direction:column;gap:4px}
.tree-cat{border-radius:8px}
.tree-cat-title{display:flex;align-items:center;gap:6px;padding:7px 8px;cursor:pointer;border-radius:8px;background:var(--app-surface-alt);border:1px solid var(--app-border-soft);font-family:var(--app-font-ui);user-select:none}
.tree-cat-title:hover{border-color:var(--app-accent)}
.tree-caret{display:inline-block;width:12px;font-size:11px;color:var(--app-text-muted);text-align:center;flex-shrink:0}
.tree-cat-name{flex:1;font-weight:600;color:var(--app-text);line-height:1.25;overflow-wrap:anywhere}
.tree-cat-children{display:none;padding:4px 0 4px 14px;border-left:1px dashed var(--app-border-faint);margin:2px 0 2px 10px}
.tree-cat.open > .tree-cat-children{display:flex;flex-direction:column;gap:2px}
.tree-depth-1 > .tree-cat-title{font-size:12.5px;padding:6px 8px}
.tree-depth-2 > .tree-cat-title{font-size:12px;padding:5px 8px;background:transparent;border-color:var(--app-border-faint)}
.formula-tree .eq-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent;margin:1px 0;font-size:13px;line-height:1.3;font-family:var(--app-font-ui)}
.formula-tree .eq-item:hover{background:var(--app-accent-soft);border-color:var(--app-border-soft)}
.formula-tree .eq-item.active{background:var(--app-accent-soft);border-color:var(--app-accent)}
.formula-tree .eq-name{flex:1;overflow-wrap:anywhere}
.eq-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:700;flex-shrink:0;font-family:var(--app-font-ui)}
.eq-badge-impl{background:var(--app-accent);color:var(--app-accent-contrast);border:1px solid var(--app-border)}
.eq-badge-planned{background:transparent;color:var(--app-text-subtle);border:1px solid var(--app-border-faint)}

/* v142 Planned-equation placeholder workspace */
.planned-placeholder-panel{display:flex;flex-direction:column;gap:10px}
.planned-placeholder-message{border:1px dashed var(--app-border-soft);border-radius:10px;padding:18px 16px;background:var(--app-surface-alt)}
.planned-placeholder-heading{font-family:var(--app-font-body);font-weight:700;font-size:16px;color:var(--app-text);margin-bottom:6px}
.planned-placeholder-body{font-family:var(--app-font-body);color:var(--app-text-muted);line-height:1.5}

/* v143 skin-aware contrast fix for unsaved tab pills and disabled Save button.
 *
 * The v123 block (lines 848-886 above) hardcoded dark amber backgrounds
 * (#2a1f08, #3a2a0d) on .tab.unsaved and .tab.active.unsaved with !important.
 * Those colors read correctly in the Lab Night skin (dark background, dark warm
 * tab, light text) but produce unreadable dark-on-dark text in the Courtroom
 * and Print skins (which use --app-text black/near-black).
 *
 * Below we override the tab background and Save button colors for Courtroom
 * and Print only. Lab Night is intentionally not targeted and retains the
 * original v123 appearance. !important is required here to beat the v123
 * !important declarations; attribute-scoped selectors provide the necessary
 * specificity lift.
 *
 * Unsaved state is communicated in Courtroom/Print via the warning border and
 * the existing dot indicator (line 862 ::after), not via background fill.
 */
body[data-skin="courtroom"] .tab.unsaved,
body[data-skin="print"] .tab.unsaved{
  background:var(--app-surface) !important;
}
body[data-skin="courtroom"] .tab.active.unsaved,
body[data-skin="print"] .tab.active.unsaved{
  background:var(--app-accent-soft) !important;
}
body[data-skin="courtroom"] #saveBtn.clean,
body[data-skin="print"] #saveBtn.clean{
  background:var(--app-surface) !important;
  border-color:var(--app-border) !important;
  color:var(--app-text-subtle) !important;
}

/* =========================================================================
 * v145 / Phase T1 — Solver-template framework styling.
 * Scoped under .czpweb-solver-block to avoid bleed into legacy equation
 * panels. Uses the existing CSS variable palette so Courtroom / Lab Night /
 * Print skins all carry through without special-casing.
 * ========================================================================= */

.czpweb-solver-block {
  margin-bottom: 16px;
}
.czpweb-solver-block + .czpweb-solver-block {
  padding-top: 12px;
  border-top: 1px solid var(--app-border-faint);
}

.czpweb-solver-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-muted);
  margin-bottom: 8px;
}

.czpweb-solve-for-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.czpweb-solve-for-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--app-border-soft);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--app-text);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.czpweb-solve-for-option:hover {
  border-color: var(--app-border);
}
.czpweb-solve-for-option input[type="radio"] {
  margin: 0;
  accent-color: var(--app-accent);
}
.czpweb-solve-for-option input[type="radio"]:checked + .czpweb-solve-for-label {
  font-weight: 600;
}
.czpweb-solve-for-option:has(input[type="radio"]:checked) {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}
.czpweb-solve-for-label strong {
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  font-size: 1.05em;
}

/* v149.30 — pre-input selectors (radio groups + dropdowns) for modifiers
 * that affect which inputs/solver branch applies. First used by
 * Speed-at-Distance for accel/decel direction + grade direction. Styled
 * to match the solve-for radios so the whole input area feels cohesive. */
.czpweb-modifier-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.czpweb-modifier-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--app-border-soft);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--app-text);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.czpweb-modifier-option:hover { border-color: var(--app-border); }
.czpweb-modifier-option input[type="radio"] {
  margin: 0;
  accent-color: var(--app-accent);
}
.czpweb-modifier-option:has(input[type="radio"]:checked) {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}
.czpweb-modifier-select-block {
  display: flex;
  align-items: center;
}
.czpweb-modifier-select-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--app-text);
}
.czpweb-modifier-select-label select {
  padding: 6px 10px;
  border: 1px solid var(--app-border-soft);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.95rem;
}
.czpweb-solver-warning {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--app-warning-soft, #fff4d6);
  border-left: 3px solid var(--app-warning, #c18400);
  border-radius: var(--app-radius-sm);
  font-size: 0.9rem;
  color: var(--app-text);
}

.czpweb-hero-result {
  text-align: center;
}
.czpweb-hero-result .result-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-muted);
  margin-bottom: 4px;
}
.czpweb-hero-result .result-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--app-result);
  line-height: 1.1;
}
.czpweb-hero-result .result-secondary,
.result-card .result-secondary {
  font-size: 1rem;
  color: var(--app-text-subtle);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* v146 / Phase T2 — Pipeline-template styling.
 * Scoped under .czpweb-pipeline-* so it cannot bleed into Solver
 * (.czpweb-solver-*), legacy equations (.grid2/.result-card/.result-grid),
 * or hero result (.czpweb-hero-result). CSS variables carry skin colors
 * through unchanged (Courtroom / Lab Night / Print). */

.czpweb-pipeline-block {
  margin-bottom: 14px;
}
.czpweb-pipeline-block:last-child {
  margin-bottom: 0;
}
.czpweb-pipeline-section-title {
  font-family: var(--app-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-muted);
  margin-bottom: 8px;
}

/* v149.10 — Panel header that has an actions slot on the right.
 * Used by the Inputs panel to host the "Load example" affordance
 * in a less-prominent location than inline-above-inputs (v149.8). */
.czpweb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.czpweb-panel-title {
  margin: 0 0 6px 0;
}
.czpweb-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* v149.10 — Textbook example loader. Collapsed by default as a small
 * text-button in the Inputs panel header actions slot. Clicking
 * reveals a popover with the dropdown + Load button. Popover collapses
 * on Load click, on × click, on second toggle click. */
.czpweb-textbook-link {
  font-family: var(--app-font-ui);
  font-size: 0.78rem;
  padding: 3px 8px;
  background: transparent;
  color: var(--app-text-muted, #666);
  border: 1px solid var(--app-border, #d0d0d6);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.czpweb-textbook-link:hover {
  background: var(--app-surface-alt, #f7f7fa);
  color: var(--app-text, #000);
  border-color: var(--app-text-muted, #999);
}
.czpweb-textbook-link[aria-expanded="true"] {
  background: var(--app-surface-alt, #eef0f5);
  color: var(--app-text, #000);
  border-color: var(--app-text-muted, #999);
}
.czpweb-textbook-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--app-border, #b0b0b8);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 40;
  white-space: nowrap;
}
.czpweb-textbook-popover[hidden] {
  display: none;
}
.czpweb-textbook-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--app-text, #000);
  white-space: nowrap;
}
.czpweb-textbook-select {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 3px 6px;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--app-border, #b0b0b8);
  border-radius: 4px;
  color: var(--app-text, #000);
}
.czpweb-textbook-close {
  background: transparent;
  border: none;
  color: var(--app-text-muted, #888);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.czpweb-textbook-close:hover {
  color: var(--app-text, #000);
}

/* v149.8 — PASS/FAIL badge on output cards when tab was loaded from a
 * textbook example. Renders inside the result-card below the value.
 * Hover tooltip (via title attribute) shows diff details. */
.czpweb-textbook-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--app-font-ui);
  white-space: nowrap;
}
.czpweb-textbook-pass {
  background: #d9f5df;
  color: #1a6e3a;
  border: 1px solid #6fb485;
}
.czpweb-textbook-fail {
  background: #fde0e0;
  color: #8a1f1f;
  border: 1px solid #c56c6c;
}

/* 2-column equal-status output grid. All K outputs have the same visual
 * weight; no hero treatment (unlike Solver). auto-flow distributes cards
 * evenly; at K=5 the last row is a single card. */
.czpweb-pipeline-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.czpweb-pipeline-output-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 10px 12px;
}
.czpweb-pipeline-output-card .result-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  margin-bottom: 4px;
}
.czpweb-pipeline-output-card .result-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--app-result);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .czpweb-pipeline-result-grid {
    grid-template-columns: 1fr;
  }
}

/* v148 reference library + solver wrap + grouped pipeline */
.czpweb-solve-for-group,
.czpweb-solver-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.czpweb-solve-for-option,
.czpweb-solver-mode-card {
  min-width: 140px;
  flex: 1 1 140px;
  white-space: normal;
}
.czpweb-step-block { display:grid; grid-template-columns:auto 1fr; gap:8px; margin-bottom:10px; }
.step-num { font-weight:700; }
.step-purpose { font-weight:600; margin-bottom:2px; }
.step-detail { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.czpweb-formula-line { margin-bottom: 10px; }
.czpweb-refs { margin-top: 14px; }
.czpweb-refs-title { font-weight: 700; margin-bottom: 6px; }
.czpweb-pipeline-group-wrap { display:grid; gap:12px; }

/* v149.34 — Version-mismatch badge. Shown above the result area when a
 * saved calc's stamped calcVersion differs from current BUILD_VERSION.
 * Amber warning aesthetic (stops short of red, which would imply
 * something is broken — nothing is broken, the stored output is
 * authoritative-as-of-save and we're preserving it intentionally). */
.czpweb-version-mismatch-badge {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #d97706;
  border-left-width: 4px;
  border-radius: var(--app-radius-sm, 6px);
  background: rgba(217, 119, 6, 0.06);
  font-size: 0.88rem;
  line-height: 1.4;
}
.czpweb-version-mismatch-text {
  flex: 1 1 auto;
  color: var(--app-text, #222);
}
.czpweb-version-mismatch-text strong {
  color: #92400e;
}
.czpweb-version-mismatch-recompute {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid #d97706;
  border-radius: var(--app-radius-sm, 6px);
  background: #fff;
  color: #92400e;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}
.czpweb-version-mismatch-recompute:hover {
  background: #d97706;
  color: #fff;
}
.czpweb-version-mismatch-recompute:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 2px;
}

.czpweb-pipeline-group summary { cursor:pointer; font-weight:700; margin-bottom:8px; }

/* v149.32 — Angle glossary (360 Momentum). Collapsible details above the
 * main results. Styled to match the warning/info aesthetic but softer —
 * this is informational, not a warning. */
.czpweb-angle-glossary {
  border: 1px solid var(--app-border-soft, #e0e0e0);
  border-radius: var(--app-radius-sm, 6px);
  background: var(--app-surface-alt, #f9f9fb);
  padding: 0;
  overflow: hidden;
}
.czpweb-angle-glossary > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text, #222);
  list-style: none;
  user-select: none;
}
.czpweb-angle-glossary > summary::-webkit-details-marker { display: none; }
.czpweb-angle-glossary > summary:hover {
  background: var(--app-hover-soft, rgba(0,0,0,.03));
}
.czpweb-angle-glossary[open] > summary {
  border-bottom: 1px solid var(--app-border-soft, #e0e0e0);
}
.czpweb-angle-glossary-body {
  padding: 12px 14px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--app-text, #222);
}
.czpweb-angle-glossary-diagram-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border-soft, #e0e0e0);
  border-radius: var(--app-radius-sm, 6px);
}
.czpweb-angle-diagram {
  max-width: 420px;
  width: 100%;
  height: auto;
  color: var(--app-text, #222);
}
.czpweb-angle-glossary-caption {
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.8;
  text-align: center;
  max-width: 480px;
}
.czpweb-angle-glossary-section { margin-bottom: 14px; }
.czpweb-angle-glossary-section:last-child { margin-bottom: 0; }
.czpweb-angle-glossary-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-soft, #555);
  margin-bottom: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--app-border-soft, #e0e0e0);
}
.czpweb-angle-glossary-list {
  margin: 0;
  padding: 0;
}
.czpweb-angle-glossary-list dt {
  margin-top: 8px;
  font-weight: 500;
}
.czpweb-angle-glossary-list dt:first-child { margin-top: 0; }
.czpweb-angle-glossary-list dd {
  margin: 2px 0 0 0;
  padding-left: 14px;
  opacity: 0.92;
  font-size: 0.86rem;
}
.czpweb-angle-glossary-list dt em {
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.8;
}

/* v149.33 — PDOF/ΔV terminology disambiguation callout. Visually distinct
 * from the regular glossary sections because this is the single most
 * important sentence for courtroom defensibility. */
.czpweb-angle-glossary-pdof-callout {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: var(--app-surface, #fff);
  border-left: 3px solid #b45309;
  border-radius: var(--app-radius-sm, 6px);
  font-size: 0.86rem;
  line-height: 1.5;
}
.czpweb-angle-glossary-pdof-callout strong:first-child {
  color: #b45309;
}

/* v149.33 — closing physics-anchor sentence. Deemphasized but always visible
 * when glossary is expanded. Anchors the calculation's foundation. */
.czpweb-angle-glossary-anchor {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border-soft, #e0e0e0);
  border-radius: var(--app-radius-sm, 6px);
  font-size: 0.82rem;
  font-style: italic;
  opacity: 0.9;
  text-align: center;
}
.result-subvalue { margin-top: 4px; font-size: .95em; }
.result-note { margin-top: 8px; font-size: .9em; line-height: 1.35; opacity: .9; }
.czpweb-warning { margin-top: 8px; padding: 8px 10px; border: 1px solid #b91c1c; color: #b91c1c; background: rgba(185,28,28,.08); border-radius: 8px; }
.czpweb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; padding: 4vh 4vw; overflow:auto; }
.czpweb-modal-content { background: var(--panel, #fff); color: inherit; border: 1px solid var(--line, #ccc); border-radius: 12px; padding: 18px; max-width: 1100px; margin: 0 auto; }
.czpweb-ref-layout { display:grid; grid-template-columns: 1fr 1.2fr; gap: 18px; }
.czpweb-ref-book-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.czpweb-ref-book-card { border:1px solid var(--line,#ccc); border-radius:12px; padding:10px; }
.czpweb-ref-book-cover img { width:100%; max-width:180px; height:auto; display:block; margin:0 auto 8px; }
.czpweb-ref-book-fallback { width:180px; height:270px; margin:0 auto 8px; border:1px dashed var(--line,#ccc); display:flex; align-items:center; justify-content:center; }
.czpweb-ref-chip { display:inline-block; min-width:54px; text-align:center; font-size:.75rem; padding:2px 6px; border-radius:999px; background:#ddd; margin-right:6px; }
.czpweb-ref-chip.user { background:#f3d9ff; }
.czpweb-ref-chip.admin { background:#d8f5d1; }
.czpweb-ref-line { margin-bottom:8px; }
@media (max-width: 900px) { .czpweb-ref-layout { grid-template-columns:1fr; } }

/* =========================================================================
 * v149 — Vector Sum Analysis submodule (per D-031)
 * Rendered by the Pipeline renderer when momentum_360 has a v149Submodule.
 * Skin-variable based: Courtroom, Lab Night, Print all inherit correctly
 * because every color is sourced from --app-* tokens defined per-skin.
 * Hex-color fallbacks exist after var() calls for ancient-browser safety.
 * ========================================================================= */
.czpweb-vsum-group {
  border: 1px solid var(--app-border-soft, #999);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--app-surface-alt, #f5f5f5);
  color: var(--app-text, inherit);
}
.czpweb-vsum-group > summary {
  font-weight: 700;
  color: var(--app-accent, inherit);
  cursor: pointer;
}
.czpweb-vsum-body { padding: 8px 2px 2px; }
.czpweb-vsum-heading {
  margin: 14px 0 6px;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--app-text-muted, #666);
}
.czpweb-vsum-heading:first-child { margin-top: 4px; }

.czpweb-vsum-validation-table,
.czpweb-vsum-geom-table,
.czpweb-vsum-components-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
  font-size: 0.95em;
  color: var(--app-text, inherit);
  background: transparent;
}
.czpweb-vsum-validation-table th,
.czpweb-vsum-validation-table td,
.czpweb-vsum-geom-table td,
.czpweb-vsum-components-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--app-border-faint, #ccc);
  text-align: left;
  vertical-align: top;
}
.czpweb-vsum-validation-table th {
  font-weight: 700;
  background: var(--app-surface-muted, #eee);
  color: var(--app-accent, inherit);
  border-bottom: 2px solid var(--app-border-soft, #999);
}
.czpweb-vsum-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--app-font-mono, 'Courier New', Courier, monospace);
}
.czpweb-vsum-label { font-weight: 600; }

.czpweb-vsum-note {
  font-size: 0.85em;
  color: var(--app-text-muted, #666);
  margin: 4px 0 10px;
  line-height: 1.4;
}

/* Pills — two-tone with readable contrast on both light and dark skins.
 * The background colors are semi-transparent so they tint against whatever
 * the skin provides beneath, while the text and border pick opaque colors
 * that are dark enough to read on light bg and light enough on dark bg.
 * Using currentColor-relative values keeps contrast predictable. */
.czpweb-validation-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  background: transparent;
}
.czpweb-validation-pass {
  color: #1d7a1d;                     /* dark green — readable on light bg */
  background: rgba(46, 160, 67, 0.18);
}
.czpweb-validation-warning {
  color: #a85a10;                     /* dark amber — readable on light bg */
  background: rgba(245, 180, 84, 0.22);
}
/* Dark-skin overrides: Lab Night is the app's dark skin. The pill text
 * colors from the default block are chosen to read on light backgrounds,
 * so on dark skins we need brighter foregrounds. Selector matches the
 * app's own skin wiring: body[data-skin="lab-night"]. */
body[data-skin="lab-night"] .czpweb-validation-pass {
  color: #7ce07c;
  background: rgba(124, 224, 124, 0.14);
}
body[data-skin="lab-night"] .czpweb-validation-warning {
  color: #ffbf6e;
  background: rgba(255, 191, 110, 0.16);
}

/* ---- v149 Vector Diagram ---------------------------------------------- */
/* The diagram uses three color slots exposed as CSS custom properties so
 * each skin can override them. Defaults below are Courtroom-friendly
 * (readable on white). Lab Night and Print provide overrides further
 * down. */
.czpweb-vsum-diagram-wrap {
  --vsum-color-v1:    #d22f2f;            /* Vehicle 1 — red   (v149.3) */
  --vsum-color-v2:    #1f6feb;            /* Vehicle 2 — blue  (v149.3) */
  --vsum-color-res:   #6b2aa8;            /* Resultant — violet */
  --vsum-color-axis:  var(--app-text-muted, #666);
  --vsum-color-close: var(--app-border-faint, #ccc);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
}
.czpweb-vsum-diagram {
  width: 100%;
  max-width: 460px;
  height: auto;
  background: transparent;
}
.czpweb-vsum-diagram .vsum-axis {
  stroke: var(--vsum-color-axis);
  stroke-width: 1;
  opacity: 0.6;
}
.czpweb-vsum-diagram .vsum-tick {
  stroke: var(--vsum-color-axis);
  stroke-width: 1;
  opacity: 0.5;
}
.czpweb-vsum-diagram .vsum-axis-label {
  fill: var(--vsum-color-axis);
  font-family: var(--app-font-ui, sans-serif);
  font-size: 11px;
  font-style: italic;
}
.czpweb-vsum-diagram .vsum-scale-text {
  fill: var(--vsum-color-axis);
  font-family: var(--app-font-mono, monospace);
  font-size: 10px;
}
.czpweb-vsum-diagram .vsum-closer {
  stroke: var(--vsum-color-close);
  stroke-width: 1;
  stroke-dasharray: 1 3;     /* dotted (v149.3) — distinct from the 6 4 dash used for post-impact vectors */
  opacity: 0.7;
}
.czpweb-vsum-diagram .vsum-vec {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
}
.czpweb-vsum-diagram .vsum-vec-v1  { stroke: var(--vsum-color-v1); }
.czpweb-vsum-diagram .vsum-vec-v2  { stroke: var(--vsum-color-v2); }
.czpweb-vsum-diagram .vsum-vec-res { stroke: var(--vsum-color-res); stroke-width: 3; }
/* Arrowhead fills — match each vector's stroke color so heads don't
 * render black when CSS variables fail to cascade into <defs>. */
.czpweb-vsum-diagram .vsum-arrow-v1  { fill: var(--vsum-color-v1); }
.czpweb-vsum-diagram .vsum-arrow-v2  { fill: var(--vsum-color-v2); }
.czpweb-vsum-diagram .vsum-arrow-res { fill: var(--vsum-color-res); }
.czpweb-vsum-diagram .vsum-vec-label {
  font-family: var(--app-font-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--app-surface-alt, #f5f5f5);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.czpweb-vsum-diagram .vsum-label-v1  { fill: var(--vsum-color-v1); }
.czpweb-vsum-diagram .vsum-label-v2  { fill: var(--vsum-color-v2); }
.czpweb-vsum-diagram .vsum-label-res { fill: var(--vsum-color-res); }
/* v149.3: magnitude sub-line — smaller, slightly lower weight, same
 * color as the parent label. Two-line labels put the symbol on the
 * first line and "magnitude @ angle" on the second. */
.czpweb-vsum-diagram .vsum-vec-label-mag {
  font-size: 9.5px;
  font-weight: 500;
  font-family: var(--app-font-mono, monospace);
}
.czpweb-vsum-diagram .vsum-origin {
  fill: var(--app-text, #000);
  stroke: var(--app-surface-alt, #f5f5f5);
  stroke-width: 1.5;
}

/* Legend row beneath the diagram */
.czpweb-vsum-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  font-size: 0.85em;
  color: var(--app-text-muted, #666);
  max-width: 520px;
}
.czpweb-vsum-legend .vsum-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.czpweb-vsum-legend .vsum-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.czpweb-vsum-legend .vsum-swatch-v1  { background: var(--vsum-color-v1); }
.czpweb-vsum-legend .vsum-swatch-v2  { background: var(--vsum-color-v2); }
.czpweb-vsum-legend .vsum-swatch-res { background: var(--vsum-color-res); height: 4px; }

/* Per-skin color overrides — Lab Night uses brighter foregrounds so
 * vectors stay visible against the dark amber surface. Print uses
 * grayscale-friendly variants since color-printed depositions often
 * end up photocopied. */
body[data-skin="lab-night"] .czpweb-vsum-diagram-wrap {
  --vsum-color-v1:  #ff6b6b;            /* Red-bright for V1 on dark bg */
  --vsum-color-v2:  #56d4ff;            /* Cyan-bright for V2 on dark bg (blue family) */
  --vsum-color-res: #ff9ff0;            /* Pink-bright for resultant */
}
body[data-skin="lab-night"] .czpweb-vsum-diagram .vsum-vec-label {
  stroke: var(--app-surface-alt, #211912);
}
body[data-skin="lab-night"] .czpweb-vsum-diagram .vsum-origin {
  stroke: var(--app-surface-alt, #211912);
}
body[data-skin="print"] .czpweb-vsum-diagram-wrap {
  --vsum-color-v1:  #222;
  --vsum-color-v2:  #555;
  --vsum-color-res: #000;
  --vsum-color-close: #aaa;
}

/* ---- v149.1 Zoom slider + Motion Preview controls --------------------- */
.czpweb-vsum-diagram-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: var(--app-text, inherit);
}
.czpweb-vsum-zoom-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--app-text-muted, #666);
}
.czpweb-vsum-zoom-slider {
  width: 160px;
  vertical-align: middle;
}
.czpweb-vsum-zoom-value {
  font-family: var(--app-font-mono, monospace);
  min-width: 3.6em;
  font-size: 0.85rem;
  color: var(--app-text, inherit);
}
.czpweb-vsum-anim-btn,
.czpweb-vsum-report-btn {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 5px 12px;
  background: var(--app-surface-muted, #eee);
  color: var(--app-text, inherit);
  border: 1px solid var(--app-border-soft, #999);
  border-radius: 6px;
  cursor: pointer;
}
.czpweb-vsum-anim-btn:hover,
.czpweb-vsum-report-btn:hover {
  background: var(--app-accent-soft, #e8e8e8);
  border-color: var(--app-accent, currentColor);
}
/* Scaler div uses CSS variable so zoom applies via transform. Using
 * transform instead of width keeps the SVG's internal coordinate
 * system stable, which means label positions stay correct under zoom.
 * v149.5: Changed approach entirely. Previous version used
 * transform: scale() on the SVG wrapper, which at zoom > 1 clipped
 * against the parent panel boundary (rendering invisible) and at
 * zoom < 1 left empty space below. Now we scale the SVG's displayed
 * width directly — SVG's own coordinate system handles the scaling
 * internally without any transform-origin or overflow issues. The
 * diagram box reserves space for max zoom so sibling content
 * (legend, note) doesn't jump. */
.czpweb-vsum-diagram-scalerbox {
  /* Reserved space for the diagram at max zoom. Centers the SVG
   * regardless of actual zoom level. */
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin: 8px 0;
}
.czpweb-vsum-diagram-scaler {
  /* No CSS transform. Width driven by CSS variable set from slider. */
  width: calc(320px * var(--vsum-zoom, 1));
  max-width: 100%;
  transition: width 120ms ease;
}
.czpweb-vsum-diagram-scaler .czpweb-vsum-diagram {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Scale bar (on-diagram cartographic-style) ------------------------ */
.czpweb-vsum-diagram .vsum-scalebar-line {
  stroke: var(--app-text, #000);
  stroke-width: 2;
}
.czpweb-vsum-diagram .vsum-scalebar-cap {
  stroke: var(--app-text, #000);
  stroke-width: 2;
}
.czpweb-vsum-diagram .vsum-scalebar-text {
  fill: var(--app-text, #000);
  font-family: var(--app-font-mono, monospace);
  font-size: 10px;
}
/* Lab Night: scale bar needs lighter color against dark background */
body[data-skin="lab-night"] .czpweb-vsum-diagram .vsum-scalebar-line,
body[data-skin="lab-night"] .czpweb-vsum-diagram .vsum-scalebar-cap {
  stroke: var(--app-text, #f1dcc1);
}
body[data-skin="lab-night"] .czpweb-vsum-diagram .vsum-scalebar-text {
  fill: var(--app-text, #f1dcc1);
}

/* ==========================================================================
 * v149.3 — Print stylesheet
 *
 * File → Print (Ctrl+P) on the 360 Momentum page with Vector Sum Analysis
 * expanded should yield a clean, one-to-two-page report. We:
 *   - Hide app chrome: topbar, formula-tree sidebar, tab switcher, save/
 *     session-controls, dev-log, preferences. None of these belong on
 *     paper.
 *   - Force the Vector Sum Analysis <details> open so the validation
 *     panel, geometry check, components table, and Vector Diagram
 *     are all visible even if the user printed with the group collapsed.
 *   - Hide interactive controls that don't translate to paper: zoom
 *     slider, Motion Preview button, Open Project / Save Project buttons,
 *     skin selector.
 *   - Force page colors: white background, black text — overrides Lab
 *     Night skin which would otherwise print as dark-on-dark.
 *   - Let the page breaks fall between major sections where possible.
 *
 * For a fully-controlled print layout, use the "Generate Report Page"
 * button which opens a new window with a portrait-optimized layout.
 * This stylesheet covers the "just hit Ctrl+P" path as a convenience.
 * ========================================================================== */
@media print {
  /* Force a white/black color scheme for ink economy and readability */
  body, body[data-skin] {
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide app chrome */
  .topbar, #topbar,
  nav, .nav, .sidebar, #sidebar,
  .tab-switcher, .tabs, #tabs,
  .prefs-modal, #prefsModal,
  #workspaceTitle ~ .small-actions,
  .formula-tree-panel, #formulaTreePanel,
  .tree-panel, .left-panel, .right-panel,
  button, .btn,
  .czpweb-vsum-zoom-label,
  .czpweb-vsum-anim-btn,
  .czpweb-vsum-report-btn,
  .czpweb-vsum-diagram-controls,
  #devLog, .dev-log,
  .saved-list-panel, .vehicle-select-panel,
  .references-panel {
    display: none !important;
  }

  /* Force Vector Sum Analysis group open so all output is visible
   * regardless of user's collapsed/expanded state at print time. */
  details.czpweb-vsum-group,
  details.czpweb-pipeline-group {
    display: block !important;
  }
  details.czpweb-vsum-group > summary,
  details.czpweb-pipeline-group > summary {
    display: list-item !important;
  }
  details.czpweb-vsum-group[open] > div,
  details.czpweb-vsum-group > div {
    display: block !important;
  }

  /* Diagram colors — override Lab Night / Print skin vars to a
   * high-contrast light-surface scheme that prints well on ink. */
  .czpweb-vsum-diagram-wrap {
    --vsum-color-v1: #000 !important;
    --vsum-color-v2: #000 !important;
    --vsum-color-res: #000 !important;
    --vsum-color-axis: #555 !important;
    --vsum-color-close: #999 !important;
    break-inside: avoid;
  }

  /* Zoom transform must be reset for print or it may clip pages */
  .czpweb-vsum-diagram-scaler {
    transform: none !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Keep tables together where possible */
  .czpweb-vsum-validation-table,
  .czpweb-vsum-geom-table,
  .czpweb-vsum-components-table {
    page-break-inside: avoid;
    break-inside: avoid;
    color: #000 !important;
    background: #fff !important;
  }

  /* PASS/WARNING pills print as text with a ring — not backgrounds */
  .czpweb-validation-pill {
    background: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }

  /* Margins: let the browser's default print margins apply;
   * don't fight them with specific page rules. */

  /* Hyperlink URLs inlined for paper — commented out by default because
   * it can expand text oddly; uncomment if wanted:
   * a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
   */
}

/* ===========================================================
 * v149.12 — Compact build banner
 * ===========================================================
 * Replaces the v149.11 behavior of rendering the entire
 * BUILD_TIMESTAMP inline in the topbar, which grew into
 * paragraphs and dominated the header. Now shows a compact
 * "CZPWeb v149.X · YYYY-MM-DD ▾" label with a ▾ toggle;
 * clicking reveals the full notes in a collapsed block.
 *
 * Structure:
 *   .brand (id=buildInfo)
 *     .czpweb-build-banner-row
 *       .czpweb-build-label    ← compact version + date
 *       .czpweb-build-toggle   ← ▾ / ▴ button
 *     .czpweb-build-notes      ← hidden by default, click to show
 */
.czpweb-build-banner-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.czpweb-build-label {
  font-weight: 700;
  letter-spacing: .02em;
  font-family: var(--app-font-body);
  white-space: nowrap;
}
.czpweb-build-toggle {
  background: transparent;
  border: 1px solid var(--app-border, #d0d0d6);
  color: var(--app-text-muted, #666);
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  font-family: var(--app-font-ui);
}
.czpweb-build-toggle:hover {
  background: var(--app-surface-alt, #f0f2f7);
  color: var(--app-text, #000);
  border-color: var(--app-text-muted, #999);
}
.czpweb-build-toggle[aria-expanded="true"] {
  background: var(--app-surface-alt, #eef0f5);
  color: var(--app-text, #000);
  border-color: var(--app-text-muted, #888);
}
.czpweb-build-notes {
  display: block;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--app-surface-alt, #f7f7fa);
  border: 1px solid var(--app-border, #d0d0d6);
  border-radius: 4px;
  font-family: var(--app-font-ui);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--app-text, #000);
  letter-spacing: 0;
  max-width: 680px;
  white-space: normal;
}
.czpweb-build-notes[hidden] {
  display: none;
}

/* =========================================================================
 * v149.15 — Double-click-to-rename editable-name affordance
 * v149.15.1 — Stronger visual affordance: custom pencil cursor, pencil glyph
 * visible inline (not just on hover), brighter hover state.
 * ========================================================================= */
.editable-name {
  /* Custom pencil cursor — inline SVG data URL, 20x20, hotspot at top-left
   * of pencil tip. Falls back to 'text' I-beam if SVG cursor unsupported. */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M3 17l3.5-1 9.5-9.5L13 3 3.5 12.5 3 17z M12 4l3 3' fill='%23fcd34d' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/></svg>") 2 17, text;
  position: relative;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
/* Always-visible pencil glyph after the name, so users don't have to guess.
 * Hover makes it pop harder. */
.editable-name::after {
  content: " ✎";
  font-size: 0.75em;
  color: var(--app-input-border);
  opacity: 0.55;
  margin-left: 4px;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  display: inline-block;
}
.editable-name:hover {
  background: var(--app-accent-soft);
  outline: 2px dashed var(--app-input-border);
  outline-offset: 2px;
}
.editable-name:hover::after {
  opacity: 1;
  transform: scale(1.25);
}
.editable-name.is-editing {
  background: transparent;
  outline: none;
  padding: 0;
}
.editable-name.is-editing::after {
  content: none;
}
/* The input that replaces the text during edit — inherits typography so
 * the in-place swap is visually minimal, just gets an editing border. */
.editable-name-input {
  font: inherit;
  color: inherit;
  background: var(--app-surface);
  border: 2px solid var(--app-input-border);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 0;
  width: auto;
  min-width: 200px;
  font-weight: inherit;
}
/* Scope-specific sizing for each target — the input should roughly match
 * the size of the text it replaces. */
#worksheetTitle.is-editing + .editable-name-input,
.editable-name-input.scope-worksheet-title {
  font-size: 1.17em;
  font-weight: bold;
  min-width: 320px;
}
.editable-name-input.scope-tab-label {
  font-size: inherit;
  min-width: 120px;
  max-width: 280px;
}
.editable-name-input.scope-vehicle-name {
  min-width: 180px;
  flex: 1;
}
.editable-name-input.scope-saved-item {
  font-weight: 700;
  min-width: 180px;
}
/* Dev-log-style toast that informs first-time users about the rename feature.
 * Positioned bottom-center, fades in, dismissable. */
.rename-tip-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--app-surface);
  color: var(--app-text);
  border: 2px solid var(--app-input-border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-family: var(--app-font-ui);
  font-size: 10pt;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  animation: rename-tip-fade-in 240ms ease-out;
  max-width: 480px;
}
.rename-tip-toast[hidden] { display: none; }
.rename-tip-toast button {
  background: transparent;
  border: none;
  color: var(--app-text-muted);
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 2px 6px;
}
.rename-tip-toast button:hover { color: var(--app-text); }
@keyframes rename-tip-fade-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Layout support for the new workspace title block — aligns title + sub
 * into a flex column, and the three items (block, vehicle field, actions)
 * into a row. Keeps the vehicle dropdown and Save buttons where they were. */
.workspace-titlebar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.workspace-title-block { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 2px; }

/* v149.16 — Equation-name hint under a renamed worksheet title.
 * Only displayed when the user has set a customTitle. Small, muted,
 * monospaced for the eq-name portion to distinguish the label from
 * the identifier. */
.worksheet-eq-name {
  margin-top: 2px;
  font-size: 9pt;
  color: var(--app-text-subtle, var(--muted));
  font-style: italic;
  letter-spacing: 0.02em;
}
.worksheet-eq-name[hidden] { display: none; }

/* v149.17 — Topbar Project menu host. Positions the dropdown below the
 * trigger button. Reuses existing .context-menu styling for the panel,
 * so skin-switching stays consistent. */
.menu-host {
  position: relative;
  display: inline-block;
}
.menu-host .context-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  z-index: 500;
}
.menu-host .context-subtitle {
  font-family: var(--app-font-ui);
  font-size: 9pt;
  color: var(--muted);
  padding: 6px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Save button in topbar: use the .good style (matches the inline workspace
 * save button) so it reads as "action button" not "primary accent". */
#saveProjectBtn {
  font-weight: 600;
}

/* v149.18 — Compact autosave-status pill states + brand filename.
 *
 * Four states replace the old "Autosave active · File X · N unsaved · Last
 * save ..." prose. Each is one glyph + a few words, colored by severity.
 * Tooltip (title attribute) carries the full precise timestamp.
 */
#autosaveStatus.status.status-clean {
  border-color: #16a34a;
  color: #16a34a;
  background: #f0fdf4;
}
#autosaveStatus.status.status-dirty {
  border-color: var(--app-warning, #b45309);
  color: var(--app-warning, #b45309);
  background: #fffbeb;
  font-weight: 600;
}
#autosaveStatus.status.status-never {
  border-color: var(--app-border-soft);
  color: var(--app-text-muted);
  background: var(--app-surface-muted);
  font-style: italic;
}
#autosaveStatus.status.status-failed {
  border-color: #b91c1c;
  color: #b91c1c;
  background: #fef2f2;
  font-weight: 700;
}
/* Lab Night overrides — flip the pale fills to dark/transparent so the pill
 * reads on the dark background. */
body[data-skin="lab-night"] .status.status-clean {
  background: transparent;
  color: #4ade80;
  border-color: #4ade80;
}
body[data-skin="lab-night"] .status.status-dirty {
  background: transparent;
  color: #fbbf24;
  border-color: #fbbf24;
}
body[data-skin="lab-night"] .status.status-never {
  background: transparent;
  color: var(--app-text-muted);
}
body[data-skin="lab-night"] .status.status-failed {
  background: transparent;
  color: #f87171;
  border-color: #f87171;
}
/* Brand filename — appears next to "CZPWeb" in the topbar when a project
 * file is loaded. Muted so the product name stays the visual anchor. */
.brand-filename {
  color: var(--app-text-muted);
  font-weight: 400;
  font-size: 0.92em;
  margin-left: 2px;
}

/* =========================================================================
 * v149.19 — Workspace action cluster hierarchy pass
 *
 * - Save is now visually primary (uses .btn.primary — skin accent)
 * - Save As New is demoted to standard .btn
 * - References moved out of the button cluster, relocated inline with the
 *   equation subtitle as a subtle icon-link (conceptually: "open the refs
 *   for THIS equation")
 * - #editStateTag ("New worksheet" / "Editing saved item") relocated from
 *   the button row (where new users were trying to click it) up next to
 *   the h3 title, where worksheet state belongs conceptually
 * ========================================================================= */

/* Title row: h3 + state tag side-by-side, tag sits at the end.
 * Flex-wrap so long titles don't push the tag off-screen. */
.worksheet-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.worksheet-state-tag {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  opacity: 0.75;
}

/* Subtitle row: the equation subtitle text + the References link sit on the
 * same line. Subtitle expands, References sits at the end. Flex-wrap so
 * narrow viewports stack cleanly. */
.worksheet-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.worksheet-sub-row #worksheetSub {
  flex: 1;
  min-width: 120px;
}

/* References link — looks like a link but tap target is button-sized.
 * Deliberately NOT .btn so it doesn't visually compete with Save/Save As. */
.references-link {
  background: transparent;
  border: none;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--app-text-muted);
  cursor: pointer;
  font-family: var(--app-font-ui);
  font-size: 10pt;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 120ms, background-color 120ms;
  white-space: nowrap;
  flex-shrink: 0;
}
.references-link:hover,
.references-link:focus {
  color: var(--app-input-border);
  background: var(--app-accent-soft);
  outline: none;
}
.references-link-icon { font-size: 13px; }
.references-link-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Lab Night / dark-skin adjustment — the emoji renders too dark against
 * the dark fill; muted text color + hover-cyan treatment read better. */
body[data-skin="lab-night"] .references-link {
  color: var(--app-text-muted);
}
body[data-skin="lab-night"] .references-link:hover,
body[data-skin="lab-night"] .references-link:focus {
  color: var(--app-result);
  background: var(--app-accent-soft);
}

/* Elevate Save in the workspace .small-actions context specifically. The
 * .btn.primary base rule already handles color, but we want a little extra
 * weight + a subtle shadow so the primary action pops against the
 * workspace panel fill. Scoped to avoid affecting other .primary buttons
 * (e.g., in the topbar). */
.workspace-titlebar .small-actions .btn.primary {
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.workspace-titlebar .small-actions .btn.primary:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}

/* =========================================================================
 * v149.20 — Workspace header compression.
 *
 * Panel used to be 3 stacked rows (~120px tall):
 *   Row A: title + state tag
 *   Row B: subtitle row (sub + References link)
 *   Row C: vehicle field + Save/Save As buttons
 *
 * New layout is 2 rows (~78px tall):
 *   Row 1: [Title ✎] [STATE TAG]       —spacer—       [Save] [Save As New]
 *   Row 2: [Subtitle / eq hint]        —spacer—       [📖 References] [Vehicle ▾]
 *
 * Panel is now ~40px shorter, giving more vertical room for inputs/results.
 * ========================================================================= */
.workspace-panel-v20 {
  padding: 8px 14px;
  margin-bottom: 8px;
}
.workspace-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.workspace-row-1 {
  min-height: 32px;
}
.workspace-row-2 {
  margin-top: 2px;
  min-height: 22px;
}
/* Left block grows to push right block to the end */
.workspace-row-1 .worksheet-title-row,
.workspace-row-2 .worksheet-sub-block {
  flex: 1;
  min-width: 200px;
}
.workspace-save-actions {
  flex-shrink: 0;
}
.workspace-row-2-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Subtitle block stacks the primary subtitle and eq-name hint vertically */
.worksheet-sub-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Compact vehicle field — the Vehicle label sits above the select in the
 * old layout but for row 2 we want a single-row "Vehicle: [dropdown]" so
 * it fits alongside the References link. */
.vehicle-field-compact {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.vehicle-field-compact label {
  margin: 0;
  font-size: 10pt;
  color: var(--app-text-muted);
  font-family: var(--app-font-ui);
  white-space: nowrap;
}
.vehicle-field-compact select {
  width: auto;
  min-width: 180px;
  max-width: 260px;
  font-size: 10pt;
  padding: 4px 8px;
}

/* =========================================================================
 * v149.21 — Workspace header metadata strip (Row 2 flattening)
 *
 * Row 2 used to be split left/right with a growing subtitle block on the
 * left and a hugging Refs+Vehicle block on the right. That still used two
 * visual columns with gap between them, wasting space.
 *
 * Now Row 2 is ONE horizontal flex strip. Every item is a sibling with a
 * thin dot separator between. Wraps cleanly on narrow viewports.
 *
 * Ordering (left→right):
 *   Subtitle · Equation hint · 📖 References · Vehicle: [dropdown]
 *
 * The [hidden] attribute on the equation-hint removes it from the flow
 * completely (via display:none), so no dangling separator when untitled.
 * ========================================================================= */

.workspace-panel-v21 { /* scoping anchor; inherits padding etc. from v20 */ }

.workspace-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-top: 4px;
}

/* Explicit dot separators via <span class="meta-sep">·</span> in markup.
 * Only the eq-hint separator is toggle-able (via #worksheetEqNameSep hidden
 * flag, managed in JS renderWorksheetTitleArea). Other separators are
 * always present because their adjacent items are always visible. */
.workspace-meta-strip .meta-sep {
  color: var(--app-text-subtle, var(--muted));
  opacity: 0.55;
  font-weight: 600;
  user-select: none;
}
.workspace-meta-strip .meta-sep[hidden] { display: none; }

/* Subtitle — primary context, stays visible */
.workspace-meta-strip .meta-sub {
  color: var(--app-text-muted);
  font-family: var(--app-font-ui);
}

/* Equation-hint — italic, same size as subtitle, shown only when renamed */
.workspace-meta-strip .meta-eq-hint {
  color: var(--app-text-subtle, var(--muted));
  font-style: italic;
  font-family: var(--app-font-ui);
}

/* References link override — use baseline alignment in a strip, no bg tint
 * on hover so it doesn't look like a button pill */
.workspace-meta-strip .references-link {
  padding: 0 2px;
  border-radius: 4px;
}

/* Vehicle inline label + dropdown */
.workspace-meta-strip .meta-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.workspace-meta-strip .meta-vehicle-label {
  font-size: 10pt;
  color: var(--app-text-muted);
  font-family: var(--app-font-ui);
  margin: 0;
  white-space: nowrap;
}
.workspace-meta-strip .meta-vehicle-select {
  width: auto;
  min-width: 150px;
  max-width: 240px;
  font-size: 10pt;
  padding: 3px 8px;
  /* Inherits the global 2px blue input border from v149.14.2 */
}

/* =========================================================================
 * v149.23 — Panel density pass (hygiene items 9 + 11)
 *
 * Goal: reclaim ~60-80px of vertical chrome across a typical 8-panel view
 * without hurting readability. Three levers:
 *
 *   1. Panel padding     12px → 10px    (saves ~32px across 8 panels)
 *   2. Panel margin      12px → 8px     (saves ~32px across 8 panels)
 *   3. Heading margin    10px → 7px     (saves ~24px across 8 panels)
 *
 * Also sets explicit h3/h4 font-sizes so headings are predictable across
 * browsers (they were browser-default, which varies).
 *
 * Exceptions preserved:
 *   - .workspace-panel-v20 keeps its tighter v149.21 padding (8/14)
 *   - .left .panel h3 keeps its 6px margin (v108+ history)
 *   - The worksheet title h3 ignores these rules (.no-margin class)
 * ========================================================================= */

.panel { padding: 10px; margin-bottom: 8px; }
.panel h3, .panel h4 { margin: 0 0 7px; }
.panel h3:not(.no-margin) { font-size: 13pt; font-weight: 700; letter-spacing: 0.01em; }
.panel h4 { font-size: 11pt; font-weight: 600; }
/* Left pane a little tighter still — less content per panel, can breathe less */
.left .panel { padding: 9px 10px; margin-bottom: 7px; }
/* Saved Calculations and Report Preview: their panels can be slightly
 * taller internally (they contain lists/content), but the heading style
 * matches the global h3 rule above — no override needed now that they're
 * h3 not h4. */

/* =========================================================================
 * v149.25 — Tree highlight pulse animation.
 *
 * Fires on tab-change auto-reveal so the eye catches the newly highlighted
 * equation after scrollIntoView. Gentle — 1.2 seconds, 2 pulses of
 * accent-color box-shadow halo. Respects prefers-reduced-motion.
 * ========================================================================= */
@keyframes czpweb-tree-pulse {
  0%   { box-shadow: 0 0 0 0 var(--app-accent, #2563eb); }
  50%  { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25); }
  100% { box-shadow: 0 0 0 0 var(--app-accent, #2563eb); }
}
.eq-item.tree-pulse {
  animation: czpweb-tree-pulse 0.6s ease-out 2;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .eq-item.tree-pulse { animation: none; }
}

/* =========================================================================
 * v149.26 — Expression input support styling.
 *
 * Fields became type=text (v149.26). Expression preview "= 155" renders
 * below the input as a small muted line. Invalid expressions get a red
 * outline + tooltip; browser's native tooltip via title=""  attribute.
 * ========================================================================= */
.field.expr-field { position: relative; }
.field.expr-field .expr-preview {
  font-size: 10pt;
  color: var(--app-text-subtle, var(--muted));
  margin-top: 3px;
  font-family: var(--app-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  padding-left: 2px;
}
.field.expr-field.expr-invalid input[data-field] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc262640 !important;
}