:root {
  --bg: #f6f7f9;
  --panel-bg: #ffffff;
  --text: #1a1d23;
  --muted: #5b6472;
  --border: #d8dce2;
  --accent: #3b6ff0;
  --accent-text: #ffffff;
  --danger: #d24545;
  --row-blocked: #fdeaea;
  --row-start: #eef2fb;
  --warn: #8a5a00;
  --warn-bg: #fff6e0;
  --warn-border: #e8b950;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel-bg: #1d2026;
    --text: #e7e9ee;
    --muted: #9aa3b2;
    --border: #333842;
    --accent: #6d93f7;
    --accent-text: #0c1220;
    --danger: #ef6a6a;
    --row-blocked: #3a1f22;
    --row-start: #202a41;
    --warn: #f0c368;
    --warn-bg: #2e2413;
    --warn-border: #6b5320;
  }
}

* { box-sizing: border-box; }

html, body {
  /* safety net: nothing on this page should ever force page-wide
     horizontal scroll/zoom -- wide content (the steps table) scrolls
     inside its own .steps-scroll container instead. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

#app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.header-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.header-actions button {
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.header-actions button:hover { background: var(--border); }

.lang-switcher-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.lang-switcher-label select {
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
}

h1 { margin: 0 0 4px; font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
h3 { font-size: 0.95rem; margin: 16px 0 8px; color: var(--muted); }

.subtitle { color: var(--muted); margin: 0 0 20px; }

#site-footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel[hidden] { display: none; }

.input-with-mode { display: flex; gap: 6px; margin-top: auto; }
.input-with-mode input { flex: 1 1 auto; min-width: 0; }
.input-with-mode select {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  color: var(--text);
  font-size: 0.82rem;
}

.exp-chart {
  margin: 16px 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-bg);
}
.exp-chart[hidden] { display: none; }

/* The "this is an upper bound" callout on the Time to Sing Count tab. Sits
   above the inputs, not below the result, so it's read before the number is
   produced rather than as a footnote to it. */
.disclaimer {
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 20px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.disclaimer strong { color: var(--warn); }

.count-steps-table { max-width: 720px; }

.threshold-intro { color: var(--muted); margin: 12px 0 6px; }
.threshold-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 520px;
  font-size: 0.9rem;
}
.threshold-table th, .threshold-table td {
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--border);
}
.threshold-table th { color: var(--muted); font-weight: 600; }
.threshold-table tr.threshold-target td { font-weight: 700; color: var(--accent); }

.stn-eval-table-wrap { overflow-x: auto; max-width: 100%; }
.stn-eval-table { width: 100%; max-width: none; }
.stn-eval-table td { white-space: nowrap; }
.stn-eval-table th { text-align: left; white-space: nowrap; vertical-align: bottom; }
.stn-eval-table th .stn-eval-th-sub {
  display: block;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--muted);
  white-space: nowrap;
}
.stn-eval-table th.group-this-level, .stn-eval-table td.group-this-level {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.stn-eval-table th.group-cumulative, .stn-eval-table td.group-cumulative {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.stn-eval-table th.first-col, .stn-eval-table td.first-col { border-left: 2px solid var(--border); }
.stn-eval-table th.stn-eval-worth-it-col, .stn-eval-table td.stn-eval-worth-it-col {
  width: 1%;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.stn-eval-worth-it { color: var(--accent); font-weight: 700; cursor: help; }
.stn-eval-table td.stn-eval-net { font-weight: 600; }
.stn-eval-table th.stn-eval-net { cursor: help; }
.stn-eval-table th.stn-eval-group {
  text-align: center;
  cursor: help;
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}
.stn-eval-table td.stn-eval-empty { color: var(--muted); }
.stn-eval-table tr.stn-eval-clickable { cursor: pointer; }
.stn-eval-table tr.stn-eval-clickable:hover td,
.stn-eval-table tr.stn-eval-clickable:focus-visible td { background: var(--row-hover, rgba(127, 127, 127, 0.12)); }
.stn-eval-table tr.stn-eval-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stn-eval-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
}
.stn-eval-back:hover { border-color: var(--accent); }
.stn-eval-table th.stn-eval-status-col, .stn-eval-table td.stn-eval-status-col {
  width: 1%;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.stn-eval-status-green { color: #2e9e44; font-weight: 700; cursor: help; }
.stn-eval-status-yellow { color: #c99a12; font-weight: 700; cursor: help; }
.stn-eval-status-red { color: #d1453d; font-weight: 700; cursor: help; }

#stn-eval-ascension, #stn-eval-level { width: 4em; }

/* Table <-> Graph segmented toggle for the single-node evaluator output. */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle[hidden] { display: none; }
.view-toggle-btn {
  border: none;
  border-radius: 0;
  background: var(--panel-bg);
  color: var(--muted);
  padding: 6px 14px;
  cursor: pointer;
  margin: 0;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn.toggle-on { background: var(--accent); color: #fff; }

/* Highlighted decision levels: highest net and furthest still-positive. */
.stn-eval-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.stn-eval-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}
.stn-eval-badge-best { background: rgba(46, 158, 68, 0.16); color: #2e9e44; }
.stn-eval-badge-furthest { background: rgba(201, 154, 18, 0.16); color: #c99a12; }
.stn-eval-table tr.stn-eval-row-best td { background: rgba(46, 158, 68, 0.08); }
.stn-eval-table tr.stn-eval-row-furthest td { box-shadow: inset 0 0 0 9999px rgba(201, 154, 18, 0.06); }

/* Net-time-saved graph. */
.stn-eval-graph {
  margin: 16px 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-bg);
}
.stn-eval-graph[hidden] { display: none; }
.stn-eval-graph-legend { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.stn-eval-graph-readout {
  margin: 10px 0 4px;
  font-weight: 600;
  min-height: 1.4em;
}
.stn-eval-graph-slider { display: flex; flex-direction: column; gap: 4px; }
.stn-eval-graph-slider input[type="range"] { width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: var(--muted);
  gap: 4px;
}

label.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.label-text { display: inline-flex; align-items: center; gap: 5px; }

.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex: none;
}
.info-icon:hover, .info-icon:focus-visible {
  color: var(--text);
  border-color: var(--text);
}

.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  max-width: 240px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  padding: 6px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.1s ease, transform 0.1s ease;
  z-index: 20;
}
.info-icon:hover::after, .info-icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

label > input[type="number"], label > input[type="text"] {
  margin-top: auto;
}

input[type="number"], input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text);
  font-size: 0.9rem;
}

.tree-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tree-node {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.tree-node > span { font-weight: 600; min-width: 52px; }
.node-io { display: flex; align-items: center; gap: 4px; }
.io-sep { color: var(--muted); font-weight: 600; }
.tree-node input { width: 82px; }
.tree-node input.asc { text-align: right; }
.tree-node input.lvl { text-align: left; }
/* hide number spinners so the placeholder text has room to show */
.tree-node input::-webkit-outer-spin-button,
.tree-node input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tree-node input { -moz-appearance: textfield; appearance: textfield; }


.actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

button {
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.danger, .icon-btn.danger { color: var(--danger); border-color: var(--danger); }

.status { margin-top: 12px; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.status.error { color: var(--danger); }

.empty-hint { color: var(--muted); font-size: 0.9rem; }

#scenarios {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scenario-manager {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manager-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.warning-icon { color: var(--warn); font-size: 0.95rem; flex-shrink: 0; }
.manager-title { font-weight: 600; min-width: 140px; }
.manager-stats { color: var(--muted); flex: 1; min-width: 160px; }
.manager-buttons { display: flex; gap: 6px; }
.manager-buttons button { padding: 4px 10px; font-size: 0.78rem; }
.manager-buttons button.toggle-on {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 700;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
}

.compare-pane { min-width: 0; }

.empty-pane {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.slot-badge {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.scenario-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.title-input {
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  padding: 4px 6px;
  border-radius: 6px;
  flex: 1;
  min-width: 180px;
}
.title-input:hover, .title-input:focus { border-color: var(--border); background: var(--bg); }

.scenario-buttons { display: flex; gap: 8px; }
.scenario-buttons button { padding: 5px 10px; font-size: 0.78rem; }

.scenario-summary {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.scenario-summary strong { color: var(--text); }

.scenario-warning { padding: 8px 10px; margin: 0 0 10px; font-size: 0.78rem; }

.steps-scroll {
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.steps-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
  table-layout: auto;
}
.steps-table th, .steps-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.steps-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  color: var(--muted);
  font-weight: 600;
  z-index: 1;
}
.steps-table tr.start-row { background: var(--row-start); }
.steps-table tr.blocked-row { background: var(--row-blocked); color: var(--danger); }
.steps-table select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 0.74rem;
  max-width: 78px;
}
.mult-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.mult-main { font-weight: 600; }
.delta { color: var(--muted); font-size: 0.7rem; }

.tm-sub { color: var(--muted); font-size: 0.68rem; }

.tree-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.72rem;
  gap: 1px;
}

.icon-btn {
  padding: 2px 6px;
  font-size: 0.85rem;
  line-height: 1;
  margin-right: 2px;
}

@media (max-width: 480px) {
  .steps-table { font-size: 0.68rem; }
  .steps-table th, .steps-table td { padding: 3px 3px; }
  .steps-table select { max-width: 58px; font-size: 0.66rem; }
  .icon-btn { padding: 1px 5px; margin-right: 1px; }
}

.scenario-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.scenario-footer button { font-size: 0.8rem; padding: 6px 10px; }
.scenario-footer .step-count { width: 60px; }

/* "Grind to mult [___] [Add Sings until reached]" -- separated from the
   add-steps row above it by a rule, since it's a different kind of edit
   (fill in N steps for me, vs. add exactly what I asked for). */
.grind-goal-row {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  flex-wrap: wrap;
}
.grind-goal-label { font-size: 0.8rem; color: var(--muted); }
.grind-goal-row .grind-goal-input { width: 80px; }

.grind-goal-status {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1em;
}
.grind-goal-status:empty { min-height: 0; }

.error { color: var(--danger); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal {
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-header h3 { margin: 0; font-size: 1rem; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 0 6px;
}
.modal-meta { font-size: 0.85rem; opacity: 0.8; margin: 6px 0 12px; }
.summary-list { margin: 0; padding-left: 22px; }
.summary-list li { margin: 6px 0; line-height: 1.4; }

/* Indeterminate "busy" bar shown while a search / evaluation runs. The search
   has no meaningful linear progress metric, so the fill sweeps across on a
   loop rather than tracking a percentage. */
.progress-bar {
  height: 4px;
  margin: 10px 0 4px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--accent);
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}
@keyframes progress-indeterminate {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill { animation-duration: 2.2s; }
}