/* IBM Carbon tokens — engineered rigor: 1px hairlines, tonal layering, sharp corners. */
:root {
  --primary: #0f62fe; --primary-hover: #0353e9; --on-primary: #ffffff;
  --secondary: #6fa1fe; --on-secondary: #000000;
  --dark-canvas: #161616; --dark-surface: #262626; --dark-raised: #393939;
  --light-canvas: #f4f4f4; --light-surface: #ffffff;
  --hair-light: #e0e0e0; --hair-dark: #393939;
  --text-dark: #161616; --text-light: #f4f4f4; --text-muted: #525252; --text-muted-dark: #a8a8a8;
  --error: #da1e28; --valid: #24a148; --warn: #f1c21b;
  --r-sm: 1px; --r-md: 2px; --r-lg: 3px;
  --s1: 8px; --s15: 12px; --s3: 24px;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --header-h: 48px; --vbar-h: 40px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--dark-canvas); color: var(--text-light); font: 400 14px/1.43 var(--sans); }
button, input, select, textarea { font: inherit; }
.mono, code, pre { font-family: var(--mono); font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ---------- header ---------- */
#hdr { height: var(--header-h); display: flex; align-items: stretch; background: var(--dark-canvas); border-bottom: 1px solid var(--hair-dark); }
.brand { display: flex; align-items: center; padding: 0 var(--s3); font: 600 14px var(--sans); letter-spacing: 0.02em; border-right: 1px solid var(--hair-dark); white-space: nowrap; }
.brand b { font-weight: 700; color: #fff; margin-right: 6px; }
.brand span { color: var(--text-muted-dark); font-weight: 400; }
#tabs { display: flex; flex: 1; min-width: 0; }
.tab { display: flex; align-items: center; gap: var(--s1); padding: 0 16px; background: none; border: 0; border-top: 3px solid transparent; border-right: 1px solid var(--hair-dark); color: var(--text-muted-dark); cursor: pointer; white-space: nowrap; font-size: 13px; letter-spacing: 0.04em; }
.tab .n { font-family: var(--mono); color: var(--text-muted-dark); }
.tab:hover { background: var(--dark-surface); color: var(--text-light); }
.tab.active { border-top-color: var(--primary); background: var(--dark-surface); color: #fff; }
.tab.active .n { color: var(--secondary); }
.hdr-actions { display: flex; }
.hdr-btn { display: flex; align-items: center; gap: var(--s1); padding: 0 16px; background: none; color: var(--text-light); border: 0; border-left: 1px solid var(--hair-dark); cursor: pointer; font-size: 13px; }
.hdr-btn kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--hair-dark); padding: 0 5px; border-radius: var(--r-sm); color: var(--secondary); }
.hdr-btn.off { color: var(--text-muted-dark); }
.hdr-btn:hover, .hdr-btn.active { background: var(--dark-surface); }
.hdr-btn.active { box-shadow: inset 0 -2px 0 var(--primary); }

/* ---------- main zones ---------- */
#main { display: flex; height: calc(100vh - var(--header-h)); }
#viewport { position: relative; width: 62%; height: 100%; border-right: 1px solid var(--hair-dark); overflow: hidden; background: var(--dark-canvas); }
#gl { position: absolute; inset: 0; display: block; cursor: grab; }
#labels { position: absolute; inset: 0 0 var(--vbar-h) 0; pointer-events: none; overflow: hidden; isolation: isolate; z-index: 1; }
#dock { width: 38%; height: 100%; background: var(--light-canvas); color: var(--text-dark); overflow-y: auto; overflow-x: hidden; }
.dock-pane { display: none; padding: var(--s3); }
.dock-pane.active { display: block; }

/* viewport HUD */
.hud-tl { position: absolute; top: var(--s15); left: var(--s15); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.hud-tl .hud-id { font: 500 13px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); }
.hud-tl .hud-title { font: 600 20px var(--sans); color: #fff; }
.hud-tl .hud-sub { font: 12px var(--mono); color: var(--text-muted-dark); }
/* colour key: the one meaning each tone has in every station */
.hud-legend { position: absolute; top: var(--s15); right: var(--s15); display: flex; gap: 14px; font: 11px var(--mono); color: var(--text-muted-dark); pointer-events: none; z-index: 2; }
.hud-legend span { display: flex; align-items: center; gap: 6px; }
.hud-legend i { width: 10px; height: 10px; display: block; border: 1px solid var(--hair-dark); }
.k-primary { background: var(--primary); } .k-light { background: var(--light-canvas); } .k-valid { background: var(--valid); } .k-error { background: var(--error); } .k-warn { background: var(--warn); }
/* "NOW" line: what the last step did, in words */
.hud-now { position: absolute; left: var(--s15); right: var(--s15); bottom: calc(var(--vbar-h) + var(--s15)); font: 14px/1.45 var(--sans); color: var(--text-light); background: rgba(22,22,22,0.92); border-left: 3px solid var(--primary); padding: 8px 12px; pointer-events: none; z-index: 2; }
.hud-now b { font: 500 11px var(--mono); letter-spacing: 0.06em; color: var(--secondary); margin-right: 10px; }
.hud-now code { font-size: 12.5px; color: #fff; }
#vbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--vbar-h); display: flex; align-items: stretch; background: var(--dark-canvas); border-top: 1px solid var(--hair-dark); z-index: 5; }
#vbar > * { display: flex; align-items: center; padding: 0 var(--s15); border-right: 1px solid var(--hair-dark); }
#vbar .coords { font: 12px var(--mono); color: var(--text-muted-dark); min-width: 300px; }
#vbar .coords b { color: var(--secondary); font-weight: 500; margin-right: 6px; }
#vbar .spacer { flex: 1; border-right: 0; }
#vbar button { background: none; border: 0; border-left: 1px solid var(--hair-dark); color: var(--text-light); padding: 0 16px; cursor: pointer; font-size: 13px; }
#vbar button:hover { background: var(--dark-surface); }
#vbar .step-label { font: 12px var(--mono); color: var(--text-muted-dark); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-dots { gap: 6px; }
.track-dots i { width: 22px; height: 3px; background: var(--hair-dark); display: block; }
.track-dots i.on { background: var(--primary); }

/* ---------- CSS2D labels ---------- */
.lbl { font: 500 11.5px var(--mono); color: var(--text-light); background: var(--dark-canvas); border: 1px solid var(--hair-dark); padding: 2px 6px; border-radius: var(--r-sm); white-space: nowrap; pointer-events: none; line-height: 1.35; }
.lbl.title { font: 600 13px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; border-color: var(--hair-dark); background: transparent; color: var(--text-muted-dark); }
.lbl.primary { border-color: var(--primary); color: #fff; background: #001d6c; }
.lbl.secondary { border-color: var(--secondary); color: var(--secondary); }
.lbl.light { background: var(--light-surface); color: #000; border-color: var(--hair-light); }
.lbl.error { border-color: var(--error); color: #fff; background: #520408; }
.lbl.valid { border-color: var(--valid); color: #fff; background: #044317; }
.lbl.warn { border-color: var(--warn); color: #000; background: var(--warn); }
.lbl.dim { opacity: 0.35; }
.lbl small { color: var(--text-muted-dark); font-size: 10.5px; }
/* text printed on a node's front face (h.node) */
.lbl.face { background: none; border: 0; padding: 0; text-align: center; white-space: normal; font: 500 12px/1.3 var(--mono); }
.lbl.face small { display: block; font-size: 10.5px; opacity: 0.8; color: inherit; }
.lbl.face.t-dark, .lbl.face.t-primary, .lbl.face.t-error, .lbl.face.t-valid { color: #fff; }
.lbl.face.t-light, .lbl.face.t-secondary, .lbl.face.t-warn { color: #161616; }
.lbl.face.t-dim { color: #6f6f6f; }
.lbl.face.t-ghost { color: #525252; }
#labels[data-active="01"] .lbl:not([data-st="01"]), #labels[data-active="02"] .lbl:not([data-st="02"]),
#labels[data-active="03"] .lbl:not([data-st="03"]), #labels[data-active="04"] .lbl:not([data-st="04"]),
#labels[data-active="05"] .lbl:not([data-st="05"]), #labels[data-active="06"] .lbl:not([data-st="06"]) { display: none; }

/* ---------- dock typography ---------- */
.st-head { margin-bottom: var(--s3); }
.st-id { font: 500 13px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.st-title { font: 700 32px/1.2 var(--sans); margin: 4px 0 var(--s15); color: var(--text-dark); }
.expressive { font: 400 16px/1.5 var(--sans); color: var(--text-dark); margin: var(--s15) 0 0; }
.productive { font: 400 14px/1.43 var(--sans); margin: var(--s1) 0; }
.section-label { font: 500 13px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s15); display: flex; justify-content: space-between; gap: var(--s1); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip { font: 12px var(--mono); background: var(--secondary); color: var(--on-secondary); padding: 2px 8px; border-radius: var(--r-sm); }
.chip.dark { background: var(--dark-surface); color: var(--text-light); }
.card { background: var(--light-surface); border: 1px solid var(--hair-light); border-radius: var(--r-sm); padding: var(--s3) var(--s3); margin-bottom: var(--s15); }
.card.dark { background: var(--dark-surface); border-color: var(--hair-dark); color: var(--text-light); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s15); }

/* buttons: sharp, flat */
.btn { height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; text-align: left; min-width: 0; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--dark-raised); color: #fff; }
.btn-secondary:hover { background: #4c4c4c; }
.btn-tertiary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-tertiary:hover { background: var(--primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: #e5e5e5; }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #b81921; }
.btn[disabled] { background: #c6c6c6; color: #8d8d8d; cursor: not-allowed; border-color: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s1) 0; }

/* fields */
.field { display: flex; flex-direction: column; gap: 4px; margin: var(--s1) 0; }
.field-label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; }
.slider-row { display: flex; align-items: center; gap: var(--s15); }
.slider { flex: 1; accent-color: var(--primary); height: 2px; }
.slider-val { min-width: 84px; text-align: right; font-size: 13px; }
.text-input { height: 40px; background: var(--light-canvas); border: 0; border-bottom: 1px solid #8d8d8d; padding: 0 12px; color: var(--text-dark); border-radius: 0; width: 100%; }
.text-input:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
textarea.text-input { height: auto; min-height: 120px; padding: 12px; font-family: var(--sans); font-size: 14px; resize: vertical; }
select.text-input { font-family: var(--sans); }

.toggle { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; margin: var(--s1) 0; user-select: none; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { width: 48px; height: 24px; background: #8d8d8d; border-radius: 12px; position: relative; transition: background 0.11s; flex: none; }
.toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.11s; }
.toggle-input:checked + .toggle-track { background: var(--valid); }
.toggle-input:checked + .toggle-track::after { transform: translateX(24px); }
.toggle-input:focus-visible + .toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle-label { font-size: 14px; }

.switcher { display: flex; border: 1px solid #8d8d8d; border-radius: var(--r-sm); margin-bottom: var(--s15); }
.switch-btn { flex: 1; height: 40px; background: var(--light-surface); color: var(--text-muted); border: 0; border-right: 1px solid #8d8d8d; cursor: pointer; font-size: 13px; padding: 0 8px; }
.switch-btn:last-child { border-right: 0; }
.switch-btn:hover { background: #e8e8e8; color: var(--text-dark); }
.switch-btn.active { background: var(--dark-canvas); color: #fff; }

/* data table */
.dt { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--s1) 0; }
.dt th { background: #e0e0e0; text-align: left; font-weight: 600; padding: 8px 12px; font-size: 13px; color: var(--text-dark); }
.dt td { padding: 8px 12px; border-bottom: 1px solid var(--hair-light); vertical-align: top; }
.dt.compact td, .dt.compact th { padding: 6px 10px; }
.dt tbody tr:hover td { background: #e8e8e8; }
.dt td.mono { font-size: 12.5px; word-break: break-all; }
.dt tr.hl td { background: #edf5ff; box-shadow: inset 3px 0 0 var(--primary); }
.dt tr.hl-sib td { background: #f2f7ff; box-shadow: inset 3px 0 0 var(--secondary); }
.dt tr.hl-err td { background: #fff1f1; box-shadow: inset 3px 0 0 var(--error); }
.dt tr.hl-ok td { background: #defbe6; box-shadow: inset 3px 0 0 var(--valid); }

/* registers */
.regs { display: grid; grid-template-columns: max-content 1fr; border: 1px solid var(--hair-light); margin: var(--s1) 0; }
.reg-k { font: 500 12px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px; border-bottom: 1px solid var(--hair-light); background: var(--light-canvas); border-right: 1px solid var(--hair-light); }
.reg-v { padding: 6px 12px; border-bottom: 1px solid var(--hair-light); word-break: break-all; }
.reg-v[data-state="ok"] { color: var(--valid); font-weight: 600; }
.reg-v[data-state="err"] { color: var(--error); font-weight: 600; }
.reg-v[data-state="active"] { color: var(--primary); font-weight: 600; }
.reg-v[data-state="warn"] { color: #8e6a00; font-weight: 600; }

/* code */
.code-wrap { border: 1px solid var(--hair-dark); border-radius: var(--r-sm); margin: var(--s1) 0; background: var(--dark-canvas); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 12px; height: 32px; border-bottom: 1px solid var(--hair-dark); color: var(--text-muted-dark); }
.code-head .btn-ghost { color: var(--secondary); }
.code-head .btn-ghost:hover { background: var(--dark-surface); }
.code { margin: 0; padding: 12px; color: #f4f4f4; overflow-x: auto; line-height: 1.5; max-height: 420px; }

.math { font-size: 14px; background: var(--light-canvas); border-left: 3px solid var(--primary); padding: 10px 12px; margin: var(--s1) 0; line-height: 1.7; }
.math sup { font-size: 10px; }

.notice { border-left: 3px solid var(--primary); background: #edf5ff; padding: 10px 12px; margin: var(--s1) 0; font-size: 14px; }
.notice-success { border-color: var(--valid); background: #defbe6; }
.notice-error { border-color: var(--error); background: #fff1f1; }
.notice-warning { border-color: var(--warn); background: #fcf4d6; }

.trap { border: 1px solid var(--warn); background: #fcf4d6; padding: 10px 12px; margin: var(--s1) 0; font-size: 14px; }
.trap-tag { font: 600 11px var(--mono); background: var(--warn); color: #000; padding: 1px 6px; margin-right: 6px; }

.log { background: var(--dark-canvas); color: var(--text-light); border: 1px solid var(--hair-dark); padding: 8px 12px; overflow-y: auto; font-size: 12px; margin: var(--s1) 0; min-height: 40px; }
.log-line { padding: 1px 0; white-space: pre-wrap; }
.log-line.ok { color: #42be65; }
.log-line.err { color: #ff8389; }
.log-line.warn { color: var(--warn); }
.log-line.info { color: var(--secondary); }

.rubric { margin: var(--s1) 0; padding-left: 20px; }
.rubric li { padding: 3px 0; }
.rubric-marks { color: var(--text-muted); margin-top: 4px; }

/* ---------- drawers ---------- */
.drawer { position: fixed; top: var(--header-h); bottom: 0; z-index: 30; background: var(--light-canvas); color: var(--text-dark); border: 1px solid var(--hair-dark); display: flex; flex-direction: column; transform: translateX(-100%); visibility: hidden; transition: transform 0.24s cubic-bezier(0.2, 0, 0.38, 0.9), visibility 0s 0.24s; }
.drawer.open { transform: none; visibility: visible; transition: transform 0.24s cubic-bezier(0.2, 0, 0.38, 0.9); }
#drawer-f { left: 0; width: 62%; }
#drawer-q { left: 0; width: 100%; background: var(--light-canvas); }
.drawer-head { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 var(--s3); background: var(--dark-canvas); color: #fff; border-bottom: 1px solid var(--hair-dark); }
.drawer-head h2 { font: 600 16px var(--sans); margin: 0; letter-spacing: 0.02em; }
.drawer-head .close { height: 48px; width: 48px; background: none; border: 0; border-left: 1px solid var(--hair-dark); color: #fff; cursor: pointer; font-size: 18px; }
.drawer-head .close:hover { background: var(--dark-surface); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s3); }
.drawer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s15); }

/* grader */
.q-layout { display: grid; grid-template-columns: 380px 1fr 420px; height: 100%; }
.q-layout > * { overflow-y: auto; border-right: 1px solid var(--hair-light); padding: var(--s3); }
.q-list .q-item { display: block; width: 100%; text-align: left; background: var(--light-surface); border: 1px solid var(--hair-light); border-left: 3px solid transparent; padding: 10px 12px; margin-bottom: 4px; cursor: pointer; font-size: 13px; }
.q-list .q-item:hover { background: #e8e8e8; }
.q-list .q-item.active { border-left-color: var(--primary); background: #edf5ff; }
.q-list .q-item .mono { color: var(--text-muted); }
.q-item .score { float: right; font-family: var(--mono); }
.q-item .score.full { color: var(--valid); }
.q-item .score.part { color: #8e6a00; }
.q-item .score.zero { color: var(--error); }
.q-text { font: 400 16px/1.5 var(--sans); white-space: pre-wrap; }
.scorebar { height: 8px; background: #e0e0e0; margin: var(--s1) 0; }
.scorebar > i { display: block; height: 100%; background: var(--primary); }
.timer { font: 600 24px var(--mono); }
.timer.low { color: var(--error); }
.hit { color: var(--valid); }
.miss { color: var(--error); }

/* scrollbars: hairline */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #8d8d8d; }
::-webkit-scrollbar-track { background: transparent; }

.boot-error { position: fixed; inset: 0; display: grid; place-items: center; background: var(--dark-canvas); color: var(--error); font: 14px var(--mono); z-index: 100; padding: 40px; white-space: pre-wrap; }