/* KATI — the drawing office at night.
   Language borrowed from the engineering drawing itself: a title-block header,
   revision letters, centre-line dashes for "current", hidden-line copper for
   "working", chamfered plates for actions, and one lit sheet of white paper.
   Type: Barlow / Barlow Condensed (DIN lineage — drawing lettering) for UI,
   JetBrains Mono for every number, id, and dimension. */

:root {
  color-scheme: dark;
  --bg: #0C0F14;
  --bg-raise: #12161D;
  --bg-sunk: #0A0D12;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .22);
  --ink: #E9ECF1;
  --ink-inverse: #10141B;
  --muted: #97A0AE;
  /* One step quieter than muted: group labels and hints, which should be
     readable when looked for and invisible when not. */
  --dim: #6A7382;
  --copper: #CC8066;
  --copper-bright: #E4B29E;
  --copper-ink: #1A120E;
  --slate: #334155;
  --good: #6FBF8F;
  --warn: #D9A05B;
  --danger: #E07A5F;
  --chatw: clamp(340px, 34vw, 440px);
  --motion: .18s;
  --body: "Barlow", system-ui, -apple-system, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* translucent fill + gradient edge; border-image keeps the gradient in the
     1px ring so the fill can stay glassy (a two-layer background cannot) */
  --glass-fill: linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.015));
  --glass-edge: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)) 1;
  --glass-fill-hover: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.025));
  --glass-edge-hover: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.1)) 1;
  --glass-fill-viewing: linear-gradient(rgba(204,128,102,.055), rgba(204,128,102,.015));
  --glass-edge-viewing: linear-gradient(135deg, rgba(204,128,102,.6), rgba(204,128,102,.16)) 1;
  /* centre line: long dash · gap · dot · gap — marks the axis you are on */
  --centreline-h: repeating-linear-gradient(90deg,
      var(--copper) 0 14px, transparent 14px 19px,
      var(--copper) 19px 22px, transparent 22px 27px);
  --centreline-v: repeating-linear-gradient(180deg,
      var(--copper) 0 12px, transparent 12px 17px,
      var(--copper) 17px 20px, transparent 20px 25px);
}

* { box-sizing: border-box; }

::selection { background: rgba(204, 128, 102, .35); }

.thread, .tree, .sheet, textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.mono, .metrics dd, .vbadge, .tree { font-family: var(--mono); }

/* --------------------------------------------------- header (title block) */

/* Folded chrome. Everything the drawing office prints on a title block is
   still there, just set small, so the sheet itself gets the room. */
.fold svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fold:hover { color: var(--copper-bright); }
.fold[aria-pressed="true"] svg { transform: rotate(180deg); }
.fold svg { transition: transform var(--motion) ease; }

body.barfold .bar { height: 30px; }
body.barfold .brand { gap: 8px; }
body.barfold .bar .mark { width: 19px; height: 19px; }
body.barfold .bar h1 { font-size: 13px; letter-spacing: .18em; }
body.barfold .bar p, body.barfold .lbl { display: none; }
body.barfold .cell { padding-top: 0; padding-bottom: 0; }
body.barfold .status { font-size: 11px; }

body.ribfold .palette { padding-right: 12px; border-right: none; gap: 0; }
body.ribfold .plabel { display: none; }
body.ribfold .cmdi { display: none; }
body.ribfold .rbtn {
  border: 0; background: none; padding: 2px 4px; min-height: 0;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
body.ribfold .rbtn:hover:not(:disabled) { background: none; color: var(--copper-bright); }
body.ribfold .pbtns { min-height: 0; gap: 10px; }
body.ribfold .rpanel { padding-top: 4px; padding-bottom: 4px; }

.cell { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.cell[hidden] { display: none; }
.userslot { display: flex; align-items: center; min-height: 26px; }
.userslot .ghost { padding: 3px 10px; font-size: 11px; }

.tblock .cell { border-left: 1px solid var(--line); }

.mark { width: 34px; height: 34px; flex: none; }
.mk-solid { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mk-hidden { stroke: var(--copper); stroke-width: 2; fill: none; stroke-dasharray: 4.5 4; stroke-linecap: round; }
.mark.big { width: 76px; height: 76px; opacity: .55; }
.mark.spin .mk-hidden { animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -8.5; } }

.bar h1 {
  margin: 0; font-family: var(--cond); font-size: 21px; font-weight: 600;
  letter-spacing: .24em; line-height: 1;
}
.bar .brand p {
  margin: 3px 0 0; color: var(--muted); font-family: var(--cond);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
}

.status {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.status::before { content: ""; width: 7px; height: 7px; background: var(--good); flex: none; }
.status.bad {
  color: var(--danger); max-width: 380px; font-size: 11px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.status.bad::before { background: var(--danger); }

/* --------------------------------------------------------------- buttons */

button {
  font: inherit; cursor: pointer;
  border: 1px solid transparent; border-radius: 0;
  background: var(--ink); color: var(--ink-inverse);
  padding: 8px 16px; font-weight: 600; font-size: 13.5px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button:hover:not(:disabled) { background: #fff; }
button:disabled { opacity: .55; cursor: default; }

button.ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
  font-family: var(--cond); font-weight: 600; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px;
}
button.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .38);
}

textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--copper); outline-offset: 1px;
}

/* ----------------------------------------------------------------- ribbon */

.rtab:hover:not(:disabled) { background: none; color: var(--ink); }
.rtab.active::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px;
  background: var(--centreline-h);
}
.palette:last-child { border-right: none; }
.rbtn:disabled { opacity: .35; }

/* ----------------------------------------------------------------- layout */

/* ------------------------------------------------------------------- chat */

.thread {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}

.turn { display: flex; }
.turn.user { justify-content: flex-end; }
.turn .bubble {
  max-width: 92%;
  padding: 10px 14px;
  font-size: 14.5px;
}
.turn.user .bubble {
  background: rgba(51, 65, 85, .45);
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--ink);
  white-space: pre-wrap;
}
.turn.assistant .bubble {
  background: var(--glass-fill);
  border: 1px solid transparent;
  border-image: var(--glass-edge);
  width: 92%;
}
.turn.assistant.card .bubble {
  position: relative;
  cursor: pointer;
  transition: background .12s ease;
}
.turn.assistant.card .bubble:hover {
  background: var(--glass-fill-hover);
  border-image: var(--glass-edge-hover);
}
.turn.assistant.card.viewing .bubble,
.turn.assistant.card.viewing .bubble:hover {
  background: var(--glass-fill-viewing);
  border-image: var(--glass-edge-viewing);
}
.turn.assistant.card.viewing .bubble::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px;
  background: var(--centreline-v);
}
.turn.error .bubble {
  background: rgba(224, 122, 95, .1);
  border: 1px solid rgba(224, 122, 95, .38);
  color: #F3C0AF;
}

.bubble p { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }

.tmeta {
  display: flex; align-items: center; gap: 9px; margin-bottom: 5px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.tmeta .v {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em;
  background: var(--copper); color: var(--copper-ink);
  padding: 2px 9px 2px 7px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.tmeta .vmax {
  font-size: 10.5px; letter-spacing: .08em;
  color: var(--copper-bright);
  border: 1px solid var(--copper);
  padding: 1px 7px 1px 6px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.tmeta .tcost { margin-left: auto; }
.tname { font-weight: 600; margin-bottom: 2px; }
.tsummary { color: var(--muted); font-size: 13.5px; }

details.assump { margin-top: 8px; font-size: 13px; }
details.assump summary {
  cursor: pointer; color: var(--muted); font-size: 12.5px;
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
details.assump summary::before { content: "▸"; font-size: 10px; transition: transform .12s ease; }
details.assump[open] summary::before { transform: rotate(90deg); }
details.assump ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
details.assump li { margin-bottom: 3px; }
.warnline { margin-top: 7px; font-size: 12.5px; color: var(--warn); }
.tparts { margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tparts i { font-style: normal; color: var(--copper-bright); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chips button {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 5px 12px; font-size: 12.5px; font-weight: 500;
}
.chips button:hover { background: rgba(204, 128, 102, .08); border-color: var(--copper); color: var(--copper-bright); }

.working-bubble { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
.working-bubble .mark { width: 26px; height: 26px; }

/* --------------------------------------------------------------- composer */

.composerBar {
  flex: none; padding: 10px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-raise);
}

.editHint {
  font-size: 12px; color: var(--muted); margin: 0 4px 7px;
  display: flex; align-items: center; gap: 8px;
}
.editHint[hidden] { display: none; }

.legal { margin: 7px 4px 0; font-size: 10.5px; text-align: right; }
.legal a { color: var(--muted); text-decoration: none; letter-spacing: .04em; }
.legal a:hover { color: var(--copper-bright); }

.attachRow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 7px; }
.attachRow[hidden] { display: none; }
.chipfile {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 11px; color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 3px 3px 3px 9px;
}
.chipfile b {
  font-weight: 400; max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chipfile button {
  background: none; border: none; color: var(--muted);
  font-size: 12px; line-height: 1; padding: 2px 5px;
}
.chipfile button:hover:not(:disabled) { background: none; color: var(--copper-bright); }
.chipfile.keep button[data-act="keep"] { color: var(--copper); }
.iconbtn { padding: 5px 9px; }
.editHint b { color: var(--copper-bright); font-weight: 600; }
.editHint button { padding: 2px 9px; font-size: 11px; }

#form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  padding: 10px 10px 8px 14px;
  transition: border-color .12s ease;
}
/* What you are writing gets the width; the controls sit under it. */
#form .controls { display: flex; align-items: center; gap: 8px; }
#form .controls #send { margin-left: auto; }
#form:focus-within { border-color: var(--copper); }

#prompt {
  /* Height comes from the content, via autosize. In a column flex box
     `flex: 1` would instead make it share the composer's height, and the
     box stays one line tall however much is typed into it. */
  flex: none; width: 100%; border: none; background: none; resize: none;
  font: inherit; color: var(--ink);
  max-height: 168px; line-height: 1.45; padding: 4px 0;
}
#prompt:focus { outline: none; }
#prompt::placeholder { color: #5D6675; }

.tierchip {
  flex: none;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-strong);
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px;
}
.tierchip:hover:not(:disabled) {
  background: rgba(204, 128, 102, .08);
  border-color: var(--copper); color: var(--copper-bright);
}
.tierchip.on, .tierchip.on:hover:not(:disabled) {
  background: var(--copper); border-color: var(--copper); color: var(--copper-ink);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

#send {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
}

/* ------------------------------------------------------------------ stage */

.tab:hover:not(:disabled) { background: none; color: var(--ink); }
.tab.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--centreline-h);
}

.vbadge b { color: var(--copper-bright); font-weight: 500; }

.downloads { display: flex; gap: 6px; flex-wrap: wrap; }
.downloads a {
  text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
}
.downloads a:hover { border-color: var(--copper); color: var(--copper-bright); }

#canvasHost canvas { display: block; width: 100%; height: 100%; }

.stage-empty[hidden] { display: none; }

.stage-empty {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 12px; color: var(--muted); font-size: 14px;
}
/* the sheet's centre mark, waiting for a part */
.stage-empty::before, .stage-empty::after { content: ""; position: absolute; opacity: .55; }
.stage-empty::before {
  left: 10%; right: 10%; top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 26px, transparent 26px 34px,
    rgba(255,255,255,.22) 34px 38px, transparent 38px 46px);
}
.stage-empty::after {
  top: 12%; bottom: 12%; left: 50%; width: 1px;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.22) 0 26px, transparent 26px 34px,
    rgba(255,255,255,.22) 34px 38px, transparent 38px 46px);
}
.stage-empty svg, .stage-empty p { position: relative; z-index: 1; }

.sheet {
  flex: 1; min-height: 0; overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  padding: 12px;
}
.sheet svg { width: 100%; height: auto; display: block; }
.sheet .dim { color: #667080; }

.tree {
  flex: 1; min-height: 0; overflow: auto;
  font-size: 12.5px; line-height: 1.7;
  background: var(--glass-fill); border: 1px solid transparent;
  border-image: var(--glass-edge);
  padding: 14px 16px;
}
.tree .node { padding: 2px 0; }
.tree .node.part { margin-top: 9px; }
.tree .node.part:first-child { margin-top: 0; }

/* An assembly reads as its parts; a part opens to show what it is made
   of, indented under it against a rule, the way a browser tree does. */
.branch:first-child .node.part { margin-top: 0; }
.branch .features {
  max-height: 0; overflow: hidden; opacity: 0;
  margin-left: 9px; padding-left: 11px;
  border-left: 1px solid var(--line);
  transition: max-height var(--motion) ease, opacity var(--motion) ease;
}
.branch.open .features { max-height: 2000px; opacity: 1; }
.twist {
  background: none; border: 0; padding: 0 4px 0 0; cursor: pointer;
  color: var(--muted); vertical-align: middle;
}
.twist svg {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--motion) ease;
}
.branch.open .twist svg { transform: rotate(90deg); }
.twist:hover { color: var(--copper-bright); }
.tree .node.part .count { opacity: .55; margin-left: 6px; }
.tree .node.part:hover { background: rgba(111, 191, 143, .09); }
.tree .features .node:hover { background: rgba(204, 128, 102, .09); }
.tree .kind { color: var(--copper-bright); }
.tree .fico {
  width: 15px; height: 15px; flex: none;
  vertical-align: -3px; margin-right: 7px;
  color: var(--copper-bright);
}
.tree .node.part .fico { color: var(--good); }
.tree .id { font-weight: 600; }
.tree .args { color: var(--muted); }
.tree .final { color: var(--good); }

.dim { color: var(--muted); font-size: 13.5px; }

/* the dimension strip */
.metrics {
  flex: none; margin: 0;
  display: flex; flex-wrap: wrap;
  background: var(--glass-fill); border: 1px solid transparent;
  border-image: var(--glass-edge);
}
.metrics div { flex: 1 1 110px; padding: 8px 14px 9px; border-left: 1px solid var(--line); }
.metrics div:first-child { border-left: none; }
.metrics dt {
  font-family: var(--cond); color: var(--muted); font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .15em;
}
.metrics dd { margin: 2px 0 0; font-size: 13.5px; }

/* ---------------------------------------------------------- model browser */

.browser {
  flex: none; width: 266px; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-right: none;
}
/* Collapsed, the tree is a glyph on the glass - not a panel with nothing
   in it. */
.browser.collapsed {
  width: 26px; border-color: transparent; background: transparent;
}
.browser.collapsed .bhead {
  padding: 5px 5px; justify-content: center;
  background: var(--bg-raise); border: 1px solid var(--line);
}
.browser.collapsed .bhead span { display: none; }
.browser.collapsed #browserToggle svg { transform: rotate(180deg); }
#browserToggle {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 0 4px; display: flex; align-items: center;
}
#browserToggle svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--motion) ease;
}
#browserToggle:hover { color: var(--copper-bright); }
.browser[hidden] { display: none; }
.bhead {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 6px 7px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.bhead button {
  background: none; border: none; color: var(--muted);
  font-family: var(--mono); font-size: 15px; line-height: 1; padding: 2px 8px;
}
.bhead button:hover:not(:disabled) { background: none; color: var(--ink); }
.browser .tree {
  border: none; border-image: none; background: transparent;
  flex: 1; min-height: 0; overflow: auto; padding: 10px 12px;
}
.browser.collapsed .tree { display: none; }
.browser.collapsed .bhead { border-bottom: none; }

/* ---------------------------------------------------------------- queries */

.queries {
  position: absolute; top: 14px; right: 14px; width: 264px; z-index: 6;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.queries[hidden] { display: none; }
.qhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 6px 7px 12px;
  border-bottom: 1px solid var(--line);
  cursor: grab; user-select: none; touch-action: none;
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--copper-bright);
}
.qhead:active { cursor: grabbing; }
.qhead button {
  background: none; border: none; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 8px;
}
.qhead button:hover:not(:disabled) { background: none; color: var(--ink); }
.qbody { padding: 11px 12px 2px; display: flex; flex-direction: column; gap: 11px; }
.query { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.query select {
  font: 13px var(--mono); color: var(--ink);
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong); border-radius: 0;
  padding: 6px 8px;
}
.query select:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }
.query input[type="number"], .query input[type="text"] {
  font: 13px var(--mono); color: var(--ink);
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong); border-radius: 0;
  padding: 6px 8px; width: 100%;
}
.query input:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }
.measure {
  position: absolute; left: 14px; bottom: 14px; z-index: 6; width: 214px;
  background: var(--bg-raise); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.mhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 6px 7px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--copper-bright);
}
.mhead button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 6px;
}
.mhead button:hover { color: var(--copper-bright); }
.register-dialog { width: min(640px, 92vw); }
.regBody { max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.regBody h3 {
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.regBody h3:first-child { margin-top: 0; }
.regtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.regtable td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* The bar is the point of the page: how much of the work this touched. */
.regbar { width: 62px; }
.regbar span {
  display: block; height: 7px; background: var(--warn);
  min-width: 2px; opacity: .75;
}
.earned .regbar span { background: var(--good); }
.regct { width: 74px; font-family: var(--cond); color: var(--ink); white-space: nowrap; }
.regct .of { color: var(--muted); }
.regttl { color: var(--ink); }
.regsku {
  margin-left: 8px; font-family: var(--cond); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--copper-bright);
  border: 1px solid var(--copper); padding: 1px 5px;
}
.regwhen { width: 88px; text-align: right; color: var(--muted); font-family: var(--cond); }
.regoffer {
  border-left: 2px solid var(--copper); padding: 8px 0 8px 12px;
  margin-top: 8px; font-size: 13px; line-height: 1.5;
}
.regoffer .unlock { margin-top: 8px; display: inline-block; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(217, 160, 91, .12); color: var(--warn);
  border: 1px solid rgba(217, 160, 91, .4);
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 9px; cursor: pointer; text-align: left;
}
.badge:hover { background: rgba(217, 160, 91, .22); }
.badge.earned {
  color: var(--good); border-color: rgba(111, 191, 143, .45);
  background: rgba(111, 191, 143, .12);
}
.badge.earned:hover { background: rgba(111, 191, 143, .22); }
.badge.locked { color: var(--copper-bright); border-color: var(--copper);
                background: rgba(204, 128, 102, .12); }
.badge.locked:hover { background: rgba(204, 128, 102, .24); }
.badge.info {
  color: var(--muted); border-color: var(--line);
  background: rgba(255, 255, 255, .04);
}
.badge.info:hover { background: rgba(255, 255, 255, .09); }
.badgecard { border-left: 2px solid var(--copper); }
.badgehead {
  font-family: var(--cond); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper-bright); margin-bottom: 6px;
}
.badgecard p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.unlock {
  background: var(--copper); color: var(--copper-ink); border: 0;
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; cursor: pointer;
}
.unlock:disabled { background: var(--slate); color: var(--muted); cursor: default; }
.tchanged {
  margin-top: 6px; font: 11px var(--mono); color: var(--copper-bright);
  font-variant-numeric: tabular-nums;
}
/* Numbers are on request: the tree reads as a tree until you ask to edit. */
.expando { max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--motion) ease, opacity var(--motion) ease; }
.expando.open { max-height: 300px; opacity: 1; }
.detail { padding-top: 3px; }
.nedit {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: 0 3px; float: right; opacity: 0; transition: opacity var(--motion) ease;
}
.node:hover .nedit, .nedit.on { opacity: 1; }
.nedit.on { color: var(--copper-bright); }
.nedit svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.node.lit { background: rgba(204, 128, 102, .1); }
.dims { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 5px 0 2px 22px; }
.dim { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); }
.dim span { font-family: var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.dim input {
  width: 62px; padding: 2px 4px; font: 11px var(--mono); color: var(--ink);
  background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 0;
}
.dim input:focus { outline: none; border-color: var(--copper); color: var(--copper-bright); }
.dim input:disabled { opacity: .5; }
.mmodes { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.mmodes button {
  flex: 1; background: none; border: 0; cursor: pointer; padding: 6px 0;
  font-family: var(--cond); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent;
}
.mmodes button.on { color: var(--copper-bright); border-bottom-color: var(--copper); }
.mbody {
  padding: 10px 12px 12px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 4px;
}
.mbody strong {
  font: 600 20px/1 var(--mono); color: var(--copper-bright);
  font-variant-numeric: tabular-nums;
}
.mdelta { font: 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.mdim { font-size: 11px; opacity: .72; }
/* The engine reads as a labelled setting, not a stray dropdown. */
.enginewrap {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line-strong); cursor: pointer;
}
.enginewrap:hover { border-color: var(--copper); }
.enginewrap:focus-within { border-color: var(--copper-bright); }
.enginelabel {
  display: flex; align-items: center; padding: 0 8px;
  background: rgba(255, 255, 255, .04);
  border-right: 1px solid var(--line);
  font-family: var(--cond); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
#enginePick {
  border: 0; background: none; cursor: pointer;
  font: 11.5px var(--mono); color: var(--ink);
  padding: 5px 4px 5px 8px;
}
#enginePick:focus { outline: none; }
.credits {
  font: 11px var(--mono); color: var(--muted); white-space: nowrap;
  padding: 0 2px;
}
.credits.low { color: var(--warn); }
.credits::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  margin-right: 6px; vertical-align: 1px;
  background: var(--good); border-radius: 50%;
}
.credits.low::before { background: var(--warn); }
.tierchip:disabled { opacity: .4; cursor: not-allowed; }
.cmdi { flex: none; opacity: .85; }
/* One coloured cue per glyph: the operation, not the form. */
.cmdi .ac, .fico .ac { stroke: var(--copper); }
.rbtn:disabled .cmdi .ac { stroke: var(--muted); }
.rbtn:disabled .cmdi { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.qcascade { display: flex; flex-direction: column; gap: 5px; }
.qcascade select { width: 100%; }
.qnum { display: flex; align-items: center; gap: 7px; }
.qnum input { flex: 1; }
.qnum i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.qkeep {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
}
.qkeep input { accent-color: var(--copper); margin: 0; }
.qfoot { padding: 10px 12px 12px; display: flex; justify-content: flex-end; }
#queriesApply {
  font-size: 12.5px; padding: 6px 13px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* ----------------------------------------------------------------- dialog */

.specs-dialog {
  width: min(720px, calc(100vw - 40px));
  background: var(--bg-raise); color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 20px;
}
.specs-dialog::backdrop { background: rgba(3, 5, 9, .72); }
.specs-dialog h2 {
  margin: 0 0 6px; font-family: var(--cond); font-size: 16px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.specs-dialog > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.specs-dialog textarea {
  width: 100%;
  font: 13px/1.55 var(--mono);
  min-height: 320px; white-space: pre;
  background: var(--bg-sunk); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0; padding: 12px;
  resize: vertical;
}
.specs-dialog .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.specs-state { color: var(--muted); font-size: 12.5px; }
.specs-actions { display: flex; gap: 8px; }
#specsSave { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }

/* -------------------------------------------------------- cards library */

.cards-dialog { width: min(880px, calc(100vw - 40px)); }
.cardsMain { display: flex; gap: 14px; height: 400px; }
.cardsTree {
  width: 250px; flex: none; overflow: auto;
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  padding: 10px;
}
.ctcat {
  font-family: var(--cond); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 10px 0 4px;
}
.ctgroup:first-child .ctcat { margin-top: 0; }
.ctcard {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--ink);
  font-size: 13px; font-weight: 400; padding: 4px 7px;
}
.ctcard:hover:not(:disabled) { background: rgba(255, 255, 255, .05); }
.ctcard.sel, .ctcard.sel:hover:not(:disabled) {
  background: rgba(204, 128, 102, .13); color: var(--copper-bright);
}
.cardsEdit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cardsEdit input, .cardsEdit textarea {
  font: 13px/1.5 var(--mono); color: var(--ink);
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong); border-radius: 0;
  padding: 8px 10px;
}
.cardsEdit textarea { flex: 1; resize: none; }
.cardsRow2 { display: flex; gap: 8px; }
.cardsRow2 input { flex: 1; min-width: 0; }
#cardSave { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }

/* ------------------------------------------------------------ page reveal */

@keyframes rise { from { opacity: 0; transform: translateY(7px); } }
.bar .brand { animation: rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.tblock .cell:nth-child(1) { animation: rise .45s cubic-bezier(.2, .7, .3, 1) .07s backwards; }
.tblock .cell:nth-child(2) { animation: rise .45s cubic-bezier(.2, .7, .3, 1) .14s backwards; }
.tblock .cell:nth-child(3) { animation: rise .45s cubic-bezier(.2, .7, .3, 1) .21s backwards; }
.greeting .bubble { animation: rise .5s cubic-bezier(.2, .7, .3, 1) .3s backwards; }

/* ------------------------------------------------------------- responsive */

@media (prefers-reduced-motion: reduce) {
  .mark.spin .mk-hidden { animation-duration: 4s; }
  .thread { scroll-behavior: auto; }
  .bar .brand, .tblock .cell, .greeting .bubble { animation: none; }
}

@media (max-width: 860px) {
  main { flex-direction: column-reverse; }
  .browser { display: none; }
  .chatside { width: 100%; flex: 1; min-height: 0; border-right: none; border-top: 1px solid var(--line); }
  .stage { flex: none; height: 46vh; padding: 10px 12px; }
  .metrics { display: none; }
  .bar .brand p { display: none; }
  .cell { padding: 8px 12px; }
  .cell.stat { display: none; }
}

/* ============================================================ layout A
   One thin bar, a vertical rail, a dock that comes and goes, and the
   board taking every pixel that is left. The rail is the whole trick: a
   horizontal toolbar costs its height across the entire window, a rail
   costs only its width, and width is what a wide screen has spare. */

html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- the bar: identity on the left, the account on the right ---- */
.topbar {
  flex: none; height: 40px; display: flex; align-items: center;
  gap: 14px; padding: 0 12px 0 14px;
  background: var(--bg-raise); border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: 9px; }
.topbar .mark { width: 20px; height: 20px; }
.topbar h1 {
  margin: 0; font-family: var(--cond); font-size: 16px; font-weight: 600;
  letter-spacing: .3em; text-indent: .3em; color: var(--ink);
}
.jobstrip {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
  padding-left: 14px; border-left: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.jobstrip b { color: var(--copper-bright); font-weight: 500; }
.jobstrip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
}
.topright { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ---- the rail ---- */
.workspace { flex: 1; display: flex; min-height: 0; }
.rail {
  flex: none; width: 78px; display: flex; flex-direction: column;
  background: var(--bg-raise); border-right: 1px solid var(--line);
  padding: 6px 0;
  /* Deliberately not scrollable. A scrolling box clips its children, and
     the tooltips have to escape sideways; the rail is short enough to
     fit any screen this runs on. */
  overflow: visible;
}
.railspacer { flex: 1; min-height: 10px; }
.railgroup { display: flex; flex-direction: column; }
.railgroup + .railgroup, .railspacer + .railgroup {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px;
}
.glabel {
  font-family: var(--cond); font-size: 8.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  text-align: center; padding: 4px 0 5px;
}
/* No border, no box. An icon big enough to read and its name under it -
   the tool is the mark, not the frame around it. */
.tool {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 2px 8px; color: var(--muted); position: relative;
  font: inherit; transition: color var(--motion), background var(--motion);
}
.tool svg { width: 26px; height: 26px; }
.tool span {
  font-family: var(--cond); font-size: 9.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1;
}
.tool:hover:not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, .05); }
.tool:focus-visible { outline: 1px solid var(--copper); outline-offset: -2px; color: var(--ink); }
.tool[aria-pressed="true"], .tool.engaged {
  color: var(--copper-bright); background: rgba(204, 128, 102, .12);
  box-shadow: inset 2px 0 0 var(--copper);
}
.tool:disabled { color: rgba(151, 160, 174, .34); cursor: default; }
.tool .ac { stroke: var(--copper); }
.tool:disabled .ac { stroke: rgba(204, 128, 102, .3); }

/* The tooltip says what the tool is for, not what it is called - the
   label under the icon already did that. */
.tool::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 4px;
  width: 208px; background: var(--bg-sunk); color: var(--ink);
  border: 1px solid var(--line-strong); padding: 8px 10px;
  font-family: var(--body); font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 40;
  transition: opacity var(--motion);
}
.tool:hover::after, .tool:focus-visible::after { opacity: 1; visibility: visible; }

/* ---- the dock ---- */
.chatside {
  flex: none; width: var(--chatw); min-width: 0; position: relative;
  display: flex; flex-direction: column;
  background: var(--bg); border-right: 1px solid var(--line);
  transition: width var(--motion), margin var(--motion);
}
body.dockshut .chatside { width: 0; border-right-color: transparent; }
body.dockshut .chatside > *:not(.dockgrip) { display: none; }
.dockgrip {
  position: absolute; top: 50%; right: -1px; transform: translateY(-50%);
  width: 13px; height: 54px; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-raise); border: 1px solid var(--line); border-right: 0;
  color: var(--muted); cursor: pointer; padding: 0;
}
.dockgrip:hover { color: var(--copper-bright); background: var(--bg-sunk); }
.dockgrip svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
body.dockshut .dockgrip { right: -14px; border-right: 1px solid var(--line); }
body.dockshut .dockgrip svg { transform: rotate(180deg); }

/* ---- the board ---- */
.stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.viewpane { display: none; flex: 1; min-height: 0; }
.viewpane.active { display: flex; flex-direction: column; }
.modelArea { flex: 1; display: flex; min-height: 0; }
#canvasHost { flex: 1; position: relative; min-width: 0; }

/* Model / Drawing floats over the board rather than taking a band of its
   own above it - but it belongs to the stage, not to either pane. Put it
   inside the Model pane and switching to Drawing hides the only way
   back, which is exactly what happened. */
.seg {
  position: absolute; top: 10px; left: 12px; z-index: 8; display: flex;
  background: rgba(10, 13, 18, .78); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.seg .tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 13px; color: var(--muted);
}
.seg .tab:hover { color: var(--ink); }
.seg .tab.active { color: var(--ink); background: rgba(255, 255, 255, .07); }

/* ---- the title block: study C's identity move ---- */
.titleblock {
  position: absolute; right: 0; bottom: 0; z-index: 7; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(78px, auto));
  background: rgba(10, 13, 18, .93); backdrop-filter: blur(6px);
  border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
}
.tb-cell { border-left: 1px solid var(--line); padding: 5px 11px 6px; }
.tb-cell:nth-child(3n + 1) { border-left: 0; }
.tb-cell:nth-child(n + 4) { border-top: 1px solid var(--line); }
.titleblock dt {
  font-family: var(--cond); font-size: 8.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.titleblock dd {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink);
  margin: 2px 0 0; font-variant-numeric: tabular-nums;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-rev { color: var(--copper-bright); }
.tb-note { color: var(--warn); }
.tb-clear { color: var(--good); }

.hint {
  position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
  pointer-events: none; z-index: 4;
  font-family: var(--cond); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

.downloads[hidden], .metrics[hidden] { display: none; }
/* The dimension strip is part of the board and sits under it, never
   across the rail. */
.stage .metrics {
  flex: none; margin: 0; display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-top: 1px solid var(--line);
}
.stage .metrics > div { background: var(--bg-raise); padding: 7px 14px 9px; }
.stage .metrics dt {
  font-family: var(--cond); font-size: 9.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.stage .metrics dd {
  font-family: var(--mono); font-size: 13px; color: var(--ink); margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .rail { width: 62px; }
  .tool svg { width: 22px; height: 22px; }
  .tool span { font-size: 8.5px; }
  .chatside { --chatw: 300px; }
}

/* ---- rail panels ---- */
.specs-dialog.narrow { width: min(430px, 92vw); }
.reportBody { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.reportBody h3 {
  font-family: var(--cond); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.finding { border-left: 2px solid var(--warn); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.finding.info { border-left-color: var(--line-strong); }
.finding b { font-family: var(--cond); font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink); }
.finding p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.reporttable { width: 100%; border-collapse: collapse; font-size: 13px; }
.reporttable th {
  font-family: var(--cond); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--line-strong);
}
.reporttable td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.reporttable .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.printpick, .simpick {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.printpick label, .simpick label {
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.printpick select, .simpick select, .simpick input {
  background: var(--bg-sunk); color: var(--ink); border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 12.5px; padding: 4px 7px;
}
.simpick input { width: 78px; text-align: right; }
.simunit { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: -5px; }
.simmode {
  background: none; border: 1px solid var(--line-strong); color: var(--muted);
  font-family: var(--cond); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; cursor: pointer;
}
.simmode.on { color: var(--copper-bright); border-color: var(--copper);
  background: rgba(204, 128, 102, .1); }
.simsel { display: flex; gap: 16px; margin-bottom: 12px; }
.simchip { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.simchip b {
  font-family: var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); font-size: 11px; margin-right: 5px;
}
.simresult { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.simresult > div { background: var(--bg-sunk); padding: 10px 12px; }
.simresult dt {
  font-family: var(--cond); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.simresult dd { font-family: var(--mono); font-size: 16px; color: var(--ink);
  margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.simresult.holds > div:last-child dd { color: var(--good); }
.simresult.marginal > div:last-child dd { color: var(--warn); }
.simresult.yields > div:last-child dd { color: var(--danger); }
.simmat { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin: 8px 0 0; }
.simnotes { margin: 0; padding-left: 17px; }
.simnotes li { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 6px; }

.tool-row {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px;
  align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.tool-state {
  font-family: var(--cond); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); padding: 2px 0; text-align: center;
}
.tool-row.on .tool-state { color: var(--good); border-color: rgba(111, 191, 143, .45); }
.tool-what b { font-family: var(--cond); font-size: 14px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink); }
.tool-what p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.tool-hit { color: var(--copper-bright) !important; }
.downloads .dl-report { border-color: var(--copper); color: var(--copper-bright); }
.tool-drawings { color: var(--ink) !important; font-family: var(--mono); font-size: 12px; }
.unlock b { font-weight: 600; margin-left: 5px; opacity: .85; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 90; max-width: min(460px, 90vw);
  background: var(--bg-raise); border: 1px solid var(--copper);
  border-left-width: 2px; color: var(--ink);
  font-size: 13.5px; line-height: 1.5; padding: 11px 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  transition: opacity var(--motion), transform var(--motion);
}
.toast.go { opacity: 0; transform: translateX(-50%) translateY(6px); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.tool-soon {
  font-family: var(--cond); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  align-self: center;
}

.planhead {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-bottom: 12px;
}
.planhead > div { background: var(--bg-sunk); padding: 10px 13px; }
.planhead dt {
  font-family: var(--cond); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.planhead dd {
  font-family: var(--mono); font-size: 14px; color: var(--ink); margin: 3px 0 0;
  font-variant-numeric: tabular-nums;
}
.planhead dd.big { font-size: 22px; color: var(--copper-bright); }
.planhead dd .of { font-size: 12px; color: var(--muted); }
.usebar { height: 5px; background: var(--bg-sunk); border: 1px solid var(--line); }
.usebar span { display: block; height: 100%; background: var(--copper); }
.reporttable tr.out td { color: var(--dim); }
.ownlist { margin: 0; padding-left: 18px; }
.ownlist li { font-family: var(--mono); font-size: 12.5px; color: var(--ink); margin-bottom: 4px; }