* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --sidebar: 360px; --context: 340px; }   /* left nav + right contextual panel widths */
html, body { height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
body { display: flex; }

#sidebar {
  width: var(--sidebar); height: 100vh; overflow-y: auto;
  background: #fffdf7; color: #22281f; padding: 18px 16px; flex-shrink: 0;
  direction: rtl;   /* moves the scrollbar to the LEFT (outer) edge; content is set back to ltr below */
}
#sidebar > * { direction: ltr; }

/* custom scrollbars on the outer edge of each panel (#2): sidebar scrollbar on the left (via the
   rtl flip above), context scrollbar on its right (the default). Themed to match the panels. */
#sidebar::-webkit-scrollbar, #context::-webkit-scrollbar { width: 10px; }
#sidebar::-webkit-scrollbar-track, #context::-webkit-scrollbar-track { background: #ece8dc; }
#sidebar::-webkit-scrollbar-thumb, #context::-webkit-scrollbar-thumb {
  background: #cfcabb; border-radius: 6px; border: 2px solid #ece8dc; }
#sidebar::-webkit-scrollbar-thumb:hover, #context::-webkit-scrollbar-thumb:hover { background: #b9b3a1; }
#sidebar, #context { scrollbar-width: thin; scrollbar-color: #cfcabb #ece8dc; }   /* firefox */
#sidebar h1 { font-size: 18px; font-weight: 700; }
#sidebar h1 span { color: #2f6b3f; }
#sidebar .sub { font-size: 12px; color: #6f7468; margin: 2px 0 14px; }
#sidebar section { border-top: 1px solid #e4e0d3; padding: 14px 0; }
#sidebar h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: #6f7468; margin-bottom: 8px; }
label { display: block; font-size: 12px; color: #4a5043; margin: 8px 0 4px; }
select, input[type=text], input[type=number] {
  width: 100%; padding: 7px 9px; background: #fffefb; border: 1px solid #cfcabb;
  color: #22281f; border-radius: 6px; font-size: 13px;
}
/* themed range slider (the Half-size slider) (#2) */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 4px; background: #e4e0d3; outline: none; margin: 6px 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; background: #2f6b3f; cursor: pointer;
  border: 2px solid #fffdf7; }
input[type=range]::-webkit-slider-thumb:hover { background: #234e2e; }
input[type=range]::-moz-range-track { height: 6px; border-radius: 4px; background: #e4e0d3; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%;
  background: #2f6b3f; cursor: pointer; border: 2px solid #fffdf7; }
.row { display: flex; gap: 8px; } .row span { flex: 1; }
button { width: 100%; margin-top: 10px; padding: 9px; border: none; border-radius: 6px;
  background: #ece8dc; color: #22281f; font-size: 13px; cursor: pointer; }
button:hover { background: #e2ddce; }
button.primary { background: #2f6b3f; font-weight: 600; }
button.primary:hover { background: #234e2e; }
button.stub { background: #ece8dc; color: #8a8d80; font-style: italic; }
.check { display: flex; align-items: center; gap: 6px; }
.check input { width: auto; }
.status { font-size: 12px; color: #6f7468; margin-top: 8px; min-height: 16px; }
.hint { font-size: 11px; color: #8a8d80; margin: 10px 0 4px; }
.aoi-size { margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.aoi-size.warn { color: #a23b2f; font-weight: 600; }   /* AOI over a size cap (#3) */
.meta { font-size: 12px; color: #6f7468; margin-top: 10px; line-height: 1.6; }
.hidden { display: none !important; }   /* must beat display-setting classes like .run-row (flex) */
footer { font-size: 11px; color: #8a8d80; padding-top: 14px; border-top: 1px solid #e4e0d3; }

/* run row: classify button + the overlay eye-toggle (#21) */
.run-row { display: flex; gap: 6px; align-items: stretch; }
.run-row .primary { flex: 1; }
#eyeToggle { width: 42px; flex: none; margin-top: 10px; font-size: 15px; padding: 0; }
#eyeToggle.off { background: #f6e3df; }
#dlTif { margin-top: 6px; }

/* left-panel view toggle (#13): hierarchy vs operations */
.views { display: flex; gap: 4px; margin-bottom: 8px; }
.vtab { flex: 1; margin: 0; padding: 6px; font-size: 12px; background: #f1eee4; color: #6f7468;
  border: 1px solid #e4e0d3; }
.vtab.sel { background: #2f6b3f; color: #fff; border-color: #2f6b3f; font-weight: 600; }
.vtab:hover:not(.sel) { background: #f1eee4; color: #3a4a37; }

/* operations / schema view rows (#13) */
#ops .op-row { display: flex; align-items: baseline; gap: 7px; font-size: 12px; padding: 5px 6px;
  border-radius: 5px; cursor: pointer; border-left: 2px solid transparent; }
#ops .op-row:hover { background: #f1eee4; }
#ops .op-row.sel { background: #eaf1e7; border-left-color: #2f6b3f; }
#ops .op-row.noclick { cursor: default; opacity: .8; }
#ops .op-seq { color: #8a8d80; font-variant-numeric: tabular-nums; min-width: 14px; }
#ops .op-verb { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #2f6b3f;
  min-width: 58px; }
#ops .op-verb.v-merge, #ops .op-verb.v-merge_remove { color: #6b3f8a; }
#ops .op-verb.v-reset, #ops .op-verb.v-base_select { color: #b4791f; }
#ops .op-sum { color: #3a4a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hierarchy tree */
#tree .node { display: flex; align-items: center; font-size: 13px; padding: 3px 6px;
  border-radius: 5px; cursor: pointer; }
#tree .node:hover { background: #f1eee4; }
#tree .node.sel { background: #eaf1e7; }
#tree .swatch { width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; flex-shrink: 0; }
#tree .tag { font-size: 10px; color: #2f6b3f; margin-left: 6px; }
/* the per-leaf tick for picking merge sources straight from the tree (#1) */
#tree .mchk { width: auto; margin: 0 6px 0 0; flex-shrink: 0; cursor: pointer; accent-color: #8e44ad; }
#tree .tag.merge { color: inherit; }                /* coloured inline to the merge's own hue */
/* the merge targets, shown as virtual nodes under the real tree */
#tree .merge-head { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: #8a8d80; margin: 10px 0 2px 6px; }
#tree .merge-node .src { font-size: 11px; color: #6f7468; margin-left: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tree .merge-node .rm { width: auto; margin: 0 0 0 auto; padding: 1px 6px; font-size: 11px;
  background: none; color: #8a8d80; }
#tree .merge-node .rm:hover { color: #a23b2f; }
.metrics { font-size: 11px; color: #6f7468; white-space: pre-wrap; margin-top: 8px;
  max-height: 150px; overflow-y: auto; font-family: ui-monospace, monospace; }

/* right-hand contextual panel (#8): what you can do with the selected class */
#context {
  width: var(--context); height: 100vh; overflow-y: auto; flex-shrink: 0;
  background: #fffdf7; color: #22281f; padding: 18px 16px; border-left: 1px solid #e4e0d3;
}
#context h2 { font-size: 16px; font-weight: 700; color: #22281f; }
#context > .hint { margin-top: 4px; margin-bottom: 6px; color: #6f7468; }
#context .ctx-block { border-top: 1px solid #e4e0d3; padding: 12px 0; transition: opacity .15s; }
#context .ctx-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: #6f7468; margin-bottom: 6px; }
/* the less-relevant actions for this class are dimmed, not hidden, so nothing's lost (#10) */
#context .ctx-block.muted { opacity: .4; }
#context .ctx-block.muted:hover { opacity: 1; }
.ctxcls { color: #2f6b3f; font-weight: 600; }
button.danger { background: #f6e3df; color: #a23b2f; }
button.danger:hover { background: #efd3cd; }
button.ghost { background: none; border: 1px solid #cfcabb; color: #6f7468; margin-top: 8px; }
button.ghost:hover { background: #f1eee4; color: #3a4a37; }

/* our own confirm modal — replaces the native confirm() so prompts look native to the app (#11) */
.modal-back { position: fixed; inset: 0; z-index: 3000; background: rgba(34,40,31,.3);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal-card { background: #fffdf7; color: #22281f; border: 1px solid #cfcabb; border-radius: 10px;
  padding: 22px; max-width: 440px; width: 90%; box-shadow: 0 12px 44px rgba(34,40,31,.3);
  animation: modalpop .12s ease-out; }
@keyframes modalpop { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.modal-msg { font-size: 14px; line-height: 1.55; white-space: pre-line; color: #22281f; }
.modal-btns { display: flex; gap: 10px; margin-top: 20px; }
.modal-btns button { margin: 0; flex: 1; padding: 10px; }

/* floating feedback toast over the map — visible no matter which panel you're using */
.toast {
  position: fixed; top: 16px;
  left: calc(var(--sidebar) + (100% - var(--sidebar) - var(--context)) / 2);
  transform: translateX(-50%); z-index: 1000; max-width: 50%;
  padding: 11px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: #22281f; box-shadow: 0 4px 16px rgba(34,40,31,.15);
  background: #fffdf7; border-left: 4px solid #2f6b3f; transition: opacity .2s; opacity: 1;
}
.toast.ok   { background: #eaf1e7; border-left-color: #2f6b3f; }
.toast.work { background: #f7efdc; border-left-color: #b4791f; }
.toast.work::before { content: "⏳ "; }
.toast.err  { background: #efd3cd; border-left-color: #a23b2f; }
.toast.warn { background: #f7efdc; border-left-color: #b4791f; }
.toast.hidden { display: none; }

/* live data distribution + balance guideline, shown where the user adds data */
.datadist:not(:empty) { margin-top: 12px; padding: 10px; background: #f1eee4;
  border: 1px solid #e4e0d3; border-radius: 6px; }
.dd-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6f7468;
  margin-bottom: 6px; }
.dd-row { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }
.dd-row .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dd-name { width: 70px; color: #3a4a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-row.sel .dd-name { color: #22281f; font-weight: 600; }   /* the class you're acting on right now */
.dd-row.sel .dd-n { color: #22281f; }
.dd-bar { flex: 1; height: 7px; background: #e4e0d3; border-radius: 4px; overflow: hidden; }
.dd-bar i { display: block; height: 100%; background: #2f6b3f; }
.dd-n { width: 28px; text-align: right; color: #6f7468; font-variant-numeric: tabular-nums; }
.dd-hint { font-size: 11px; margin-top: 7px; }

/* model zoo — badge in the sidebar, everything else in the full-screen overlay */
.badge { font-size: 10px; color: #2f6b3f; }

#map { flex: 1; height: 100vh; }

/* full-screen Model Zoo overlay (hidden until the user opens it) */
#zoo-overlay { position: fixed; inset: 0; z-index: 2000; background: #f6f4ec;
  color: #22281f; display: flex; flex-direction: column; }
#zoo-overlay.hidden { display: none; }      /* id+class beats the bare #id rule above */

.zoo-head { display: flex; align-items: center; gap: 16px; padding: 0 22px; height: 60px;
  border-bottom: 1px solid #e4e0d3; background: #fffdf7; flex-shrink: 0; }
.zoo-title { font-size: 17px; font-weight: 700; white-space: nowrap; }
.zoo-tabs { display: flex; gap: 6px; }
.ztab { width: auto; margin: 0; padding: 6px 16px; background: #f1eee4; border-radius: 16px; font-size: 13px; }
.ztab.sel { background: #2f6b3f; font-weight: 600; }
.zoo-aoi { margin: 0 auto 0 8px; font-size: 12px; color: #4a5043; white-space: nowrap; }
.zoo-actions { display: flex; gap: 8px; }
.zoo-actions button { width: auto; margin: 0; padding: 7px 14px; font-size: 13px; }
#closeZoo { background: #f6e3df; } #closeZoo:hover { background: #efd3cd; }

.zoo-body { flex: 1; display: flex; overflow: hidden; }
.zoo-grid { flex: 1; overflow-y: auto; padding: 22px; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.zoo-grid .hint { grid-column: 1 / -1; }    /* empty-state spans the row, no float */

/* uniform cards: header row pinned top, footer line pinned bottom -> no asymmetry */
.zoo-card { background: #faf8f1; border: 1px solid #e4e0d3; border-radius: 10px; padding: 16px;
  cursor: pointer; transition: border-color .15s, transform .1s; display: flex;
  flex-direction: column; min-height: 132px; }
.zoo-card:hover { border-color: #c7c1b0; transform: translateY(-1px); }
.zoo-card.sel { border-color: #2f6b3f; box-shadow: 0 0 0 1px #2f6b3f inset; }
.zoo-card .zc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.zoo-card h4 { font-size: 14px; color: #22281f; line-height: 1.35; word-break: break-word; }
.zoo-card .zc-classes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.zoo-card .zc-acc { margin-top: auto; padding-top: 12px; font-size: 12px; color: #6f7468; }

.pill { font-size: 10px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
  background: #ece8dc; color: #6f7468; text-transform: uppercase; letter-spacing: .03em; }
.pill.pub { background: #eaf1e7; color: #2f6b3f; } .pill.loc { background: #f7efdc; color: #b4791f; }
.pill.train { background: #eaf1e7; color: #2f6b3f; } .pill.infer { background: #f3ecf6; color: #6b3f8a; }
.pill.arch { background: #ece8dc; color: #6f7468; }   /* superseded/archived model card (#9) */
/* per-tile publish tick (#25) */
.zoo-card .pubchk { width: auto; margin: 0 7px 0 0; vertical-align: middle; cursor: pointer; accent-color: #2f6b3f; }
#zooPublishSel:not(:disabled) { background: #2f6b3f; color: #fff; font-weight: 600; }

.chip { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #f1eee4; color: #3a4a37;
  display: inline-flex; align-items: center; gap: 6px; }
.chip .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.chip.link { cursor: pointer; font-family: ui-monospace, monospace; }
.chip.link:hover { background: #eaf1e7; color: #22281f; }
/* a tile chip showing a STANDARD class name (#14) — subtly tinted + dotted underline as a cue */
.chip.std { background: #eaf1e7; color: #234e2e; border-bottom: 1px dotted #2f6b3f; cursor: help; }

/* detail pane — wide enough that most cards fit without scrolling */
.zoo-detail { width: 40%; min-width: 440px; max-width: 620px; flex-shrink: 0; overflow-y: auto;
  padding: 24px 28px; border-left: 1px solid #e4e0d3; background: #fffdf7;
  font-size: 13px; line-height: 1.6; }
.zoo-detail > .hint { color: #8a8d80; margin-top: 20px; text-align: center; }
.zoo-detail h3 { font-size: 16px; color: #22281f; margin-bottom: 4px; text-transform: none;
  letter-spacing: 0; word-break: break-word; }
.zoo-detail .sub2 { color: #6f7468; font-size: 12px; margin-bottom: 4px; }
.zoo-detail .blk { border-top: 1px solid #e4e0d3; padding: 12px 0; }
.zoo-detail .blk:last-of-type { border-bottom: 1px solid #e4e0d3; }
.zoo-detail .k { color: #8a8d80; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  display: block; margin-bottom: 7px; }
.zoo-detail .chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.zoo-detail code { color: #2f6b3f; font-size: 12px; word-break: break-all; }
.zoo-detail table { width: 100%; border-collapse: collapse; }
.zoo-detail td { padding: 3px 6px; font-family: ui-monospace, monospace; font-size: 12px;
  border-bottom: 1px solid #f1eee4; }
.zoo-detail td:first-child { color: #3a4a37; }
.zoo-detail .prose { color: #4a5043; font-size: 12px; }
.zoo-detail button { margin-top: 14px; width: auto; padding: 7px 14px; }
/* annotate / evidence / class-mapping editor */
#annotateForm { margin-top: 10px; }
#annotateForm label { font-size: 11px; color: #4a5043; margin-top: 8px; }
.zoo-detail textarea, .zoo-detail #annotateForm input {
  width: 100%; background: #fffefb; border: 1px solid #cfcabb; color: #22281f;
  border-radius: 6px; padding: 6px 8px; font-size: 12px; margin-top: 3px; }
.zoo-detail textarea { min-height: 44px; resize: vertical; font-family: inherit; }
/* per-class standard-mapping row: class label + two dropdowns side by side */
.std-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.std-cls { width: 78px; flex-shrink: 0; font-size: 11px; color: #3a4a37;
  display: inline-flex; align-items: center; gap: 5px; }
.std-row select { flex: 1; min-width: 0; background: #fffefb; border: 1px solid #cfcabb;
  color: #22281f; border-radius: 6px; padding: 5px 6px; font-size: 11px; }

.cell-info {
  background: rgba(255,253,247,.94); color: #22281f; padding: 6px 12px;
  border-radius: 6px; font-size: 13px; box-shadow: 0 1px 5px rgba(34,40,31,.18);
}
/* adjustable diversity-grid control on a dataset card (#1) */
.spread-grid { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  color: #4a5043; margin-bottom: 7px; }
.spread-grid select { background: #fffefb; border: 1px solid #cfcabb; color: #22281f;
  border-radius: 6px; padding: 4px 6px; font-size: 11px; }
/* merge panel (#9): leaf pick-list + active-rule rows */
.mergeleaves { max-height: 140px; overflow-y: auto; margin: 4px 0 8px; }
.ml-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3a4a37;
  padding: 2px 0; }
.ml-row input { width: auto; margin: 0; }
.mergecolor { display: inline-flex; align-items: center; gap: 8px; }
.mergecolor input { width: 38px; height: 26px; padding: 0; border: none; background: none; }
.merge-rule { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3a4a37;
  padding: 4px 0; }
.merge-rule .rm { margin-left: auto; width: auto; padding: 2px 7px; font-size: 11px; }
.cell-info b { color: #2f6b3f; text-transform: capitalize; }


/* ---------------- week 18: projects, runs, the start screen ---------------- */
/* one rhythm for the two side panels: 16px between blocks, 8px inside them */
#sidebar section { padding: 16px 0; }
#sidebar section:first-of-type { border-top: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 14px; border-bottom: 1px solid #e4e0d3; }
.topbar h1 { line-height: 1; }
.topbar .home { color: inherit; text-decoration: none; }
.whoami { font-size: 12px; color: #6f7468; text-align: right; white-space: nowrap; }
.whoami a { color: #2f6b3f; margin-left: 8px; }

.proj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proj-name { font-size: 16px; font-weight: 700; color: #22281f; word-break: break-word; line-height: 1.3; }
.proj-meta { font-size: 12px; color: #6f7468; margin-top: 3px; }
button.mini { width: auto; margin: 0; padding: 5px 10px; font-size: 12px; flex-shrink: 0;
  background: none; border: 1px solid #cfcabb; color: #6f7468; }
button.mini:hover { background: #f1eee4; color: #3a4a37; }
.proj-ctl { margin-top: 4px; }
select:disabled { opacity: .6; }
.readonly { margin-top: 12px; font-size: 12px; color: #b4791f; background: #f7efdc;
  border-radius: 6px; padding: 10px 12px; }
.readonly button { margin-top: 8px; }

/* the banner an edit raises, and a nudge on Run, instead of re-running by itself (point 7) */
.stale { font-size: 12px; line-height: 1.45; color: #7a5413; background: #f7efdc;
  border-left: 3px solid #b4791f; border-radius: 4px; padding: 8px 10px; margin-bottom: 2px; }
#run.pulse { box-shadow: 0 0 0 2px #b4791f inset; }
.run-row button { margin-top: 10px; }
.status:empty { display: none; }
.runs-head { margin-top: 16px; }
.runs-list { max-height: 150px; overflow-y: auto; }
.runs-list .hint { margin: 0; }
.run-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px;
  padding: 7px 9px; border-radius: 5px; cursor: pointer; color: #3a4a37; }
.run-item:hover { background: #f1eee4; }
.run-item.sel { background: #eaf1e7; box-shadow: inset 2px 0 0 #2f6b3f; }
.run-item .rmeta { color: #8a8d80; white-space: nowrap; }
/* three downloads, equal width, one row; a hidden one gives its room to the others */
.dl-row { display: flex; gap: 6px; margin-top: 10px; }
.dl-row button { flex: 1; margin: 0; padding: 8px 4px; font-size: 12px; }
button.ghost { margin-top: 10px; }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { background: inherit; }

/* the context panel: blocks separated evenly, controls spaced the same everywhere */
#context > h2 { margin-bottom: 2px; }
#context .ctx-block { padding: 16px 0; }
#context .ctx-block > h3 { margin-bottom: 8px; }
#context .hint { line-height: 1.45; }
#context code { font-size: 11px; }

/* the split block: two paths, the zoo first */
.path { border: 1px solid #e4e0d3; border-radius: 8px; padding: 12px; margin-top: 10px; background: #faf8f1; }
.path-h { font-size: 13px; font-weight: 600; color: #22281f; display: flex; align-items: center; gap: 8px; }
.path-h .n { width: 20px; height: 20px; border-radius: 50%; background: #2f6b3f; color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.path .hint { margin: 6px 0 0; }
.path .hint a, #context .hint a { color: #2f6b3f; }
.or { font-size: 11px; color: #8a8d80; margin: 14px 0 0; text-align: center; display: flex;
  align-items: center; gap: 8px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid #e4e0d3; }
.fmt { font-size: 11px; line-height: 1.55; color: #4a5043; background: #f1eee4; border-radius: 6px;
  padding: 8px 10px; margin-top: 8px; }
code { font-family: ui-monospace, monospace; color: #234e2e; font-size: 11px; }
details.opts { margin-top: 12px; }
details.opts > summary { cursor: pointer; font-size: 12px; color: #6f7468; padding: 2px 0; }
details.opts[open] > summary { margin-bottom: 4px; }
#ctxRuleSplit { padding: 14px 0; }
#ctxRuleSplit > summary { font-size: 13px; }

/* file pickers look like our buttons, not the browser's white "Choose File" */
.filebtn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px;
  padding: 9px; border-radius: 6px; border: 1px dashed #c7c1b0; color: #3a4a37; background: #f1eee4;
  font-size: 13px; cursor: pointer; text-align: center; }
.filebtn:hover { border-color: #2f6b3f; background: #eaf1e7; color: #22281f; }
.filebtn input { display: none; }
.btn-pair { display: flex; gap: 8px; margin-top: 10px; }
.btn-pair > * { flex: 1; margin: 0 !important; }
.mergecolor { margin-top: 10px; }

/* start: its own page, centred, nothing of the app showing through */
#start { position: fixed; inset: 0; z-index: 2500; background: #f6f4ec; overflow-y: auto; }
.start-bar { display: flex; align-items: center; justify-content: space-between; height: 60px;
  padding: 0 28px; border-bottom: 1px solid #e4e0d3; background: #fffdf7; position: sticky; top: 0; z-index: 1; }
.start-bar .brand { font-size: 18px; font-weight: 700; color: #22281f; text-decoration: none; }
.start-bar .brand span { color: #2f6b3f; }
.start-wrap { width: 960px; max-width: 100%; margin: 0 auto; padding: 40px 20px 60px; }
.start-top { text-align: center; margin-bottom: 26px; }
.start-top h2 { font-size: 26px; color: #22281f; }
.start-top p { font-size: 14px; color: #6f7468; margin-top: 6px; }
.start-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 800px) { .start-cols { grid-template-columns: 1fr; } }
.start-card { background: #faf8f1; border: 1px solid #e4e0d3; border-radius: 12px; padding: 22px;
  color: #22281f; display: flex; flex-direction: column; }
.start-card h3 { font-size: 15px; margin-bottom: 4px; }
.start-card > .hint:first-of-type { margin-top: 4px; }
.start-card #npCreate { margin-top: auto; }
.start-card .row + .hint { margin-bottom: 14px; }
.plist { max-height: 320px; overflow-y: auto; margin-top: 10px; }
.plist > .hint { margin: 4px 0; }
.prow { border: 1px solid #e4e0d3; border-radius: 8px; padding: 11px 13px; margin-bottom: 8px;
  cursor: pointer; transition: border-color .15s, background .15s; }
.prow:hover { border-color: #2f6b3f; background: #eaf1e7; }
.prow-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.prow-meta { font-size: 12px; color: #6f7468; margin-top: 3px; }
.import-row { margin-top: auto; padding-top: 14px; border-top: 1px solid #e4e0d3; }
.import-row .hint { margin: 6px 0 0; text-align: center; }
.pub-card { margin-top: 18px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
  max-height: none; }
.pgrid .prow { margin: 0; }
.pgrid > .hint { grid-column: 1 / -1; }
/* preset / coordinates / draw: one choice at a time */
.seg { display: flex; gap: 0; border: 1px solid #cfcabb; border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.seg button { flex: 1; margin: 0; border-radius: 0; background: #f1eee4; color: #6f7468; padding: 7px 4px;
  font-size: 12px; border-right: 1px solid #cfcabb; }
.seg button:last-child { border-right: none; }
.seg button.sel { background: #2f6b3f; color: #fff; font-weight: 600; }
.aoi-size { margin: 8px 0 0; }
.drawbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2400;
  background: #fffdf7; color: #22281f; border: 1px solid #b4791f; border-radius: 8px; padding: 10px 14px;
  font-size: 13px; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 20px rgba(34,40,31,.18); }
.drawbar button { width: auto; margin: 0; padding: 5px 10px; }

/* the class mapping, in place on the zoo card: model class -> your name, pre-filled */
.use-box { background: #faf8f1; border: 1px solid #cfe0cb; border-radius: 8px; padding: 12px 14px; margin: 6px 0 4px; }
.use-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.3fr); align-items: center; gap: 8px; margin-top: 8px; }
.use-row .chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.use-row .arrow { color: #8a8d80; text-align: center; }
.use-row input { width: 100%; padding: 6px 8px; background: #fffefb; border: 1px solid #cfcabb; color: #22281f;
  border-radius: 6px; font-size: 13px; }
.use-row input:disabled { opacity: .6; }
.use-box .hint { margin: 8px 0 0; }
.use-box button { margin-top: 10px !important; }
/* counter-example tick: small, under the add buttons, off by default */
.check.counter { margin-top: 10px; font-size: 12px; color: #6f7468; gap: 7px; cursor: pointer; }
.check.counter input { accent-color: #b4791f; }
.zoo-pick { background: #eaf1e7; color: #234e2e; font-size: 13px; padding: 10px 22px;
  border-bottom: 1px solid #cfe0cb; }

/* zoo cards size to their content (the grid used to squeeze every row to the window) */
.zoo-grid { grid-auto-rows: max-content; }
.zoo-card .zc-top { flex-wrap: wrap; }
.zoo-card .zc-top h4 { flex: 1 1 60%; min-width: 0; }
.zoo-card .zc-top .pill + .pill { margin-left: -4px; }

/* the toast centres over whatever the map has left: the right panel only counts while it's open,
   and on the start page there's no sidebar at all */
.toast { left: calc(var(--sidebar) + (100% - var(--sidebar)) / 2); }
body.ctx-open .toast { left: calc(var(--sidebar) + (100% - var(--sidebar) - var(--context)) / 2); }
body.on-start .toast { left: 50%; z-index: 2600; }

/* a class inside a split: its examples block moves to the top of the panel */
#context { display: flex; flex-direction: column; }
#context > h2, #context > #ctxWhat { order: -2; }
#context > .ctx-block.lead { order: -1; }
.pill.made { background: #eaf1e7; color: #2f6b3f; }
.use-top { padding: 4px 0 12px; } .use-top button { margin-top: 8px; }

/* the panel's way out: Back to the previous class, or close it */
#context > .ctx-nav { order: -3; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ctx-nav .mini { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ctxClose { margin-left: auto; }   /* stays on the right even when Back is hidden */

/* a held-out score resting on very few pixels */
.thin { color: #b4791f; }

/* map legend for the run on screen */
.map-legend { background: rgba(255, 253, 247, .94); color: #22281f; border: 1px solid #e4e0d3; border-radius: 8px;
              padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: 0 2px 8px rgba(34,40,31,.15); }
.map-legend .lg-title { font-weight: 600; margin-bottom: 4px; color: #6f7468; font-size: 11px;
                        text-transform: uppercase; letter-spacing: .05em; }
.map-legend .lg-row { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.map-legend .sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.map-legend .lg-name { flex: 1; }
.map-legend .lg-pct { color: #6f7468; font-variant-numeric: tabular-nums; }

/* help drawer: sits over the right of the map, same skin as the zoo */
#help { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); z-index: 1900;
  background: #f6f4ec; color: #22281f; border-left: 1px solid #e4e0d3; display: flex;
  flex-direction: column; box-shadow: -8px 0 24px rgba(34,40,31,.18); }
#help.hidden { display: none; }
.help-head { display: flex; align-items: center; justify-content: space-between; height: 60px;
  padding: 0 22px; border-bottom: 1px solid #e4e0d3; background: #fffdf7; flex-shrink: 0; }
.help-title { font-size: 17px; font-weight: 700; }
#closeHelp { width: auto; margin: 0; padding: 7px 14px; font-size: 13px; background: #f6e3df; }
#closeHelp:hover { background: #efd3cd; }
.help-body { overflow-y: auto; padding: 8px 22px 22px; }
.help-body h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6f7468;
  margin: 22px 0 8px; }
.help-body .hint { font-size: 13px; color: #6f7468; line-height: 1.5; }
.help-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.help-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: #8a8d80; padding: 8px 10px; border-bottom: 1px solid #e4e0d3; }
.help-table td { padding: 9px 10px; border-bottom: 1px solid #f1eee4; vertical-align: top; }
.help-table td:first-child { color: #22281f; font-weight: 600; width: 36%; }
.help-table td:nth-child(2) { color: #6f7468; }
.help-table td:nth-child(3) { color: #2f6b3f; }
.help-table.files td:first-child { font-family: ui-monospace, Consolas, monospace; font-weight: 500;
  width: 32%; color: #8a5a12; }
.help-table tr.hl td { background: rgba(180, 121, 31, .14); }   /* the row the walkthrough points at */

/* the read-only class panel on someone else's public project */
#ctxView .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
#ctxView .hint { line-height: 1.7; }