/* ============================================================
   ROOTHERHUB SITE — v0 doctrine canvas
   Bone #F2F0EB · Charcoal #1F1F1D · serif body · sans for UI · mono for codes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700;8..60,900&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bone:        #F2F0EB;
  --bone-2:      #ECE9E2;     /* sunken */
  --ink:         #1F1F1D;
  --ink-2:       rgba(31,31,29,0.72);
  --ink-3:       rgba(31,31,29,0.52);
  --ink-4:       rgba(31,31,29,0.36);

  --rule-1:      rgba(31,31,29,0.10);
  --rule-2:      rgba(31,31,29,0.18);
  --rule-3:      rgba(31,31,29,0.32);
  --rule-4:      rgba(31,31,29,0.55);

  /* Mineral accents — used sparingly */
  --m-pine:      #2C5F62;
  --m-sage:      #7CA378;
  --m-clay:      #C96B5A;
  --m-stone:     #6B8A99;
  --m-sand:      #B8B87A;
  --m-earth:     #8A7A6A;

  --ff-serif:    'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --ff-sans:     'Outfit', ui-sans-serif, system-ui, sans-serif;
  --ff-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease:        cubic-bezier(.2,.8,.2,1);

  --max-w:       1280px;
}

html, body { background: var(--bone); }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  accent-color: var(--ink);
}

/* Paper grain */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shell */
.shell {
  position: relative; z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px 32px 64px;
}

/* ────── NAV ────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-3);
  margin-bottom: 28px;
}
.nav-l { display: flex; align-items: center; gap: 14px; }
.nav-mark {
  width: 32px; height: 32px;
  background: var(--ink); color: var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-sans); font-weight: 900; font-size: 18px;
  letter-spacing: -0.04em;
}
.nav-name {
  font-family: var(--ff-sans); font-weight: 800; font-size: 14px;
  letter-spacing: -0.01em;
}
.nav-name .meta {
  display: block; font-family: var(--ff-mono); font-weight: 500;
  font-size: 9px; color: var(--ink-3); letter-spacing: 0.18em;
  text-transform: uppercase; margin-top: 1px;
}
.nav-r {
  display: flex; gap: 4px; font-family: var(--ff-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
.nav-r a {
  color: var(--ink-2); text-decoration: none;
  padding: 6px 12px; border: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-r a:hover { color: var(--ink); border-color: var(--rule-2); }
.nav-r a.on   { color: var(--ink); border-color: var(--rule-3); }

/* ────── EYEBROW + RULES ────── */
.eyebrow {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow .dot { width: 6px; height: 6px; background: var(--m-pine); }
hr.rule { border: 0; border-top: 1px solid var(--rule-2); margin: 22px 0; }
hr.rule.thick { border-top: 1px solid var(--rule-3); }

/* ────── TYPE ────── */
.h-display {
  font-family: var(--ff-serif);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.04; letter-spacing: -0.02em;
  font-weight: 500;
  text-wrap: balance;
  padding-bottom: 0.06em;
  margin-bottom: 0.5em;   /* intrinsic gap below — survives any wrap count */
}
.h-display em { font-style: italic; color: var(--ink-3); }
.h-section {
  font-family: var(--ff-serif);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1; letter-spacing: -0.018em;
  font-weight: 500;
  text-wrap: balance;
}
.h-3 {
  font-family: var(--ff-serif);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.15;
}
.body-lg {
  font-family: var(--ff-serif);
  font-size: 18px; line-height: 1.55;
  text-wrap: pretty;
  color: var(--ink);
}
.body { font-family: var(--ff-serif); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.body-sm { font-family: var(--ff-serif); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.label {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.mono {
  font-family: var(--ff-mono);
  font-feature-settings: 'tnum' 1;
}

/* ────── CHIP / BUTTON ────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule-3);
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: var(--bone);
}
.chip.invert { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip.drafted { color: var(--m-clay); border-color: var(--m-clay); }
.chip.bonded  { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip.modeled { color: var(--m-stone); border-color: var(--m-stone); }
.chip .dot { width: 5px; height: 5px; background: currentColor; }

.btn {
  appearance: none; cursor: pointer;
  background: var(--ink); color: var(--bone);
  border: 1px solid var(--ink);
  padding: 14px 22px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: opacity .2s var(--ease), transform .15s var(--ease);
}
.btn:hover:not(:disabled) { opacity: 0.9; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.32; cursor: not-allowed; }
.btn.ghost   { background: var(--bone); color: var(--ink); }
.btn.ghost:hover:not(:disabled) { background: var(--bone-2); opacity: 1; }
.btn.lg      { padding: 18px 26px; font-size: 12px; }

/* ────── WORD PICKER (1–4 max + freeform) ────── */
.wp { display: flex; flex-direction: column; gap: 16px; }
.wp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
}
.wp-q {
  font-family: var(--ff-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500; letter-spacing: -0.018em;
  line-height: 1.1;
  text-wrap: balance;
  flex: 1;
}
.wp-counter {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--ink-3);
  white-space: nowrap;
}
.wp-counter .v {
  font-family: var(--ff-mono); font-weight: 700;
  color: var(--ink); font-size: 12px;
  margin-right: 4px;
}
.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.wp-tile {
  appearance: none; cursor: pointer;
  text-align: left;
  background: var(--bone);
  border: 1px solid var(--rule-2);
  padding: 12px 14px;
  font-family: var(--ff-serif); font-size: 15px;
  color: var(--ink);
  position: relative;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.wp-tile:hover { border-color: var(--rule-4); background: var(--bone-2); }
.wp-tile.on {
  background: var(--ink); color: var(--bone);
  border-color: var(--ink);
}
.wp-tile .num {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--ff-mono); font-size: 9px;
  color: var(--ink-3); letter-spacing: 0.14em;
}
.wp-tile.on .num { color: rgba(242,240,235,0.55); }
.wp-tile .pill {
  position: absolute; top: 8px; right: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bone); color: var(--ink);
  display: none;
  align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
}
.wp-tile.on .pill { display: flex; }
.wp-tile.dim { opacity: 0.45; pointer-events: none; }
.wp-free {
  font-family: var(--ff-serif); font-size: 15px;
  background: var(--bone); color: var(--ink);
  border: 1px solid var(--rule-2);
  padding: 14px;
  width: 100%; min-height: 88px; resize: vertical;
  outline: none;
  transition: border-color .15s var(--ease);
}
.wp-free:focus { border-color: var(--rule-4); }
.wp-free::placeholder { color: var(--ink-3); font-style: italic; }
.wp-free-l {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 6px;
  display: flex; justify-content: space-between;
}

/* ────── FOOTER COLOPHON ────── */
.colophon {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.10em;
  line-height: 1.6;
}
.colophon > div { padding: 0 18px; border-left: 1px solid var(--rule-2); }
.colophon > div:first-child { padding-left: 0; border-left: 0; }
.colophon strong {
  display: block; color: var(--ink); font-weight: 700;
  margin-bottom: 6px; letter-spacing: 0.16em;
}

/* ============================================================
   FOLD-SPECIFIC PRIMITIVES
   ============================================================ */

/* ── TYPOLOGY PICKER ── */
.tp { display: flex; flex-direction: column; gap: 14px; }
.tp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.tp-tile {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 14px 16px 16px;
  font-family: var(--ff-serif); color: var(--ink);
  position: relative;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.tp-tile:hover { border-color: var(--rule-4); background: var(--bone-2); }
.tp-tile.on { border-color: var(--ink); background: var(--bone-2); }
.tp-tile.primary { border-width: 2px; padding: 13px 15px 15px; }
.tp-tile.secondary { border-style: dashed; }
.tp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 4px;
}
.tp-label { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tp-brackets {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2); letter-spacing: 0.12em;
}
.tp-gloss {
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  text-wrap: pretty;
}
.tp-tag {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--ink); background: var(--bone);
  padding: 2px 6px; border: 1px solid var(--ink);
}
.tp-tile.secondary .tp-tag { color: var(--m-pine); border-color: var(--m-pine); }
.tp-block {
  padding: 14px 18px;
  background: rgba(201,107,90,0.08);
  border: 1px solid var(--m-clay);
  font-family: var(--ff-serif); font-size: 14px; line-height: 1.5;
  color: var(--ink);
}
.tp-block em { color: var(--m-clay); font-style: italic; font-weight: 600; }
.tp-reno {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--rule-3);
  font-family: var(--ff-serif); font-size: 14px;
  cursor: pointer;
}
.tp-reno input { width: 16px; height: 16px; cursor: pointer; }

/* ── BRACKET GRID ── */
.bg { display: flex; flex-direction: column; gap: 8px; }
.bg-l {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.bg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bg-cell {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 14px 14px 12px;
  font-family: var(--ff-serif); color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.bg-cell:hover { border-color: var(--rule-4); background: var(--bone-2); }
.bg-cell.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.bg-cell.on .bg-r { color: rgba(242,240,235,0.7); }
.bg-b {
  font-family: var(--ff-mono); font-size: 24px; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
}
.bg-r {
  font-size: 12px; font-style: italic; color: var(--ink-2);
  margin-top: 6px;
}
.bg-omitted {
  padding: 14px 14px 12px;
  border: 1px dashed var(--rule-2);
  background: transparent;
  text-align: left;
  cursor: not-allowed;
}
.bg-omitted .bg-b { color: var(--ink-4); font-weight: 400; }
.bg-omit-line {
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 0.14em;
  margin-top: 6px; text-transform: uppercase;
}

/* ── ADDRESS TYPEAHEAD ── */
.addr { display: flex; flex-direction: column; gap: 8px; position: relative; }
.addr-l {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.addr-input-row { display: flex; gap: 8px; }
.addr-input {
  flex: 1;
  background: var(--bone); border: 1px solid var(--rule-3);
  padding: 12px 14px;
  font-family: var(--ff-serif); font-size: 16px; color: var(--ink);
  outline: none;
  transition: border-color .15s var(--ease);
}
.addr-input:focus { border-color: var(--ink); }
.addr-input::placeholder { color: var(--ink-3); font-style: italic; }
.addr-clear {
  appearance: none; cursor: pointer;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 8px 12px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-2); text-transform: uppercase;
}
.addr-busy {
  font-size: 10px; color: var(--ink-3); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.addr-list {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px; z-index: 20;
  background: var(--bone); border: 1px solid var(--rule-3);
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.addr-item {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--bone); border: 0; border-bottom: 1px solid var(--rule-1);
  padding: 10px 14px;
  font-family: var(--ff-serif); font-size: 14px; line-height: 1.4;
  color: var(--ink);
}
.addr-item:hover { background: var(--bone-2); }
.addr-item:last-child { border-bottom: 0; }
.addr-pin {
  font-size: 10px; color: var(--m-clay);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── LINE MAP ── */
.lm { display: flex; flex-direction: column; gap: 6px; }
.lm-l, .lm-foot {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.lm-svg {
  width: 100%; height: auto; aspect-ratio: 360 / 180;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
}

/* ── SITE TYPE & LAND STATUS ── */
.stp, .lsp, .hmp { display: flex; flex-direction: column; gap: 8px; }
.stp-l, .lsp-l, .hmp-l {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.stp-row, .hmp-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.stp-chip {
  appearance: none; cursor: pointer;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 6px 12px;
  font-family: var(--ff-serif); font-size: 14px; color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.stp-chip:hover { border-color: var(--rule-4); }
.stp-chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.stp-chip.dim { opacity: 0.45; pointer-events: none; }

.lsp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lsp-cell {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 14px 16px;
  font-family: var(--ff-serif); color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.lsp-cell:hover { border-color: var(--rule-4); background: var(--bone-2); }
.lsp-cell.on { border-color: var(--ink); background: var(--bone-2); border-width: 2px; padding: 13px 15px; }
.lsp-h { font-size: 16px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.lsp-g { font-size: 12px; color: var(--ink-2); line-height: 1.4; }

/* ── CAPACITY & SIZE ── */
.cap, .size { display: flex; flex-direction: column; gap: 12px; }
.cap.empty {
  padding: 20px;
  border: 1px dashed var(--rule-3);
  font-family: var(--ff-serif); font-style: italic;
  color: var(--ink-3); font-size: 14px;
}
.cap-l, .cap-foot, .size-area-l, .size-foot {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.cap-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--rule-3);
}
.cap-row > div { padding: 14px 16px; border-right: 1px solid var(--rule-2); }
.cap-row > div:last-child { border-right: 0; }
.cap-unit-h, .cap-range-h, .cap-precise-h {
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--ink-3); text-transform: uppercase; margin-bottom: 6px;
}
.cap-unit-v, .cap-range-v {
  font-family: var(--ff-serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1;
}
.cap-unit-s {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.12em; margin-top: 6px; text-transform: uppercase;
}
.cap-input, .size-input {
  width: 100%;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 8px 12px;
  font-family: var(--ff-mono); font-size: 18px; font-weight: 600;
  color: var(--ink); outline: none;
}
.cap-input:focus, .size-input:focus { border-color: var(--ink); }

.size-area { display: flex; flex-direction: column; gap: 6px; }
.size-area-row { display: flex; gap: 8px; align-items: stretch; }
.size-area-row .size-input { flex: 1; }
.size-unit-toggle {
  display: flex; border: 1px solid var(--rule-2);
}
.size-unit-toggle button {
  appearance: none; cursor: pointer;
  background: var(--bone); border: 0;
  padding: 0 16px;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-2);
  border-right: 1px solid var(--rule-2);
}
.size-unit-toggle button:last-child { border-right: 0; }
.size-unit-toggle button.on { background: var(--ink); color: var(--bone); }

/* ── WHO PICKER ── */
.who {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border: 1px solid var(--rule-3);
}
.who-col { padding: 16px 18px; border-right: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 12px; }
.who-col:last-child { border-right: 0; }
.who-h { display: flex; justify-content: space-between; align-items: baseline; }
.who-h-l {
  font-family: var(--ff-serif); font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
}
.who-h-c {
  font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3);
}
.who-sub {
  font-family: var(--ff-serif); font-size: 12px; font-style: italic;
  color: var(--ink-2); line-height: 1.4;
}
.who-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.who-chip {
  appearance: none; cursor: pointer;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 5px 10px;
  font-family: var(--ff-serif); font-size: 13px; color: var(--ink);
}
.who-chip:hover { border-color: var(--rule-4); }
.who-chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.who-chip.dim { opacity: 0.45; pointer-events: none; }

/* ── TWO-LAYER PICKER (ATTN) ── */
.tlp {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border: 1px solid var(--rule-3);
}
.tlp-col { padding: 16px 18px; border-right: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 10px; }
.tlp-col:last-child { border-right: 0; }
.tlp-h { display: flex; justify-content: space-between; align-items: baseline; }
.tlp-h-l { font-family: var(--ff-serif); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tlp-h-c { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); }
.tlp-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.tlp-chip {
  appearance: none; cursor: pointer;
  background: var(--bone); border: 1px solid var(--rule-2);
  padding: 5px 10px;
  font-family: var(--ff-serif); font-size: 13px; color: var(--ink);
}
.tlp-chip:hover { border-color: var(--rule-4); }
.tlp-chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.tlp-chip.dim { opacity: 0.45; pointer-events: none; }

@media (max-width: 900px) {
  .who, .tlp, .lsp-row, .cap-row { grid-template-columns: 1fr; }
  .who-col, .tlp-col { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .who-col:last-child, .tlp-col:last-child { border-bottom: 0; }
}

/* ── CLOSEUP MAP — bone-toned OSM ── */
.cm {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.cm-l { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; }
.cm-frame {
  position: relative; width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rule-3);
  background: var(--bone-2);
}
.cm-tiles {
  position: absolute; inset: 0;
  /* v0.4: stronger filter for cleaner bone-tone register and better
     contrast on streets + labels. Grayscale first to neutralize colors,
     then sepia for warm cast, then contrast bump to push roads visible. */
  filter: grayscale(0.55) sepia(0.38) brightness(1.04) contrast(1.12) hue-rotate(-8deg);
  mix-blend-mode: multiply;
}
.cm-grad {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(242,240,235,0) 0%, rgba(242,240,235,0.30) 60%, rgba(242,240,235,0.65) 100%),
    linear-gradient(180deg, rgba(242,240,235,0.12) 0%, rgba(242,240,235,0) 30%, rgba(242,240,235,0) 70%, rgba(242,240,235,0.20) 100%);
}
.cm-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cm-foot { font-size: 9px; letter-spacing: 0.10em; color: var(--ink-3); }
.cm-empty .cm-frame, .cm-empty {
  border-style: dashed;
}
.cm-empty-body {
  width: 100%; aspect-ratio: 3 / 2;
  border: 1px dashed var(--rule-3);
  background: var(--bone-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
}
.cm-empty-cross { width: 200px; height: 200px; }
.cm-empty-cap { font-size: 9px; letter-spacing: 0.14em; color: var(--ink-3); text-align: center; }

/* ── USERS · REFINE BUTTON ── */
.refine-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule-2); background: var(--bone-2);
}
.refine-l {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink-3); text-transform: uppercase;
}
.refine-l strong { color: var(--ink); font-weight: 700; }
.refine-btn {
  appearance: none; cursor: pointer;
  background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
  padding: 7px 12px; font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  transition: opacity .15s var(--ease);
}
.refine-btn:hover { opacity: 0.85; }
.refine-btn:disabled { opacity: 0.4; cursor: wait; }
.refine-btn.revert {
  background: transparent; color: var(--ink);
}

/* ── OWN-WORDS INPUT (Site / Operating Model / Users / Atmosphere) ── */
.own-row {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--rule-3);
  background: var(--bone);
}
.own-l {
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--ink-3); text-transform: uppercase;
}
.own-input-row { display: flex; gap: 6px; align-items: stretch; }
.own-input {
  flex: 1; min-width: 0;
  appearance: none; background: var(--bone-2);
  border: 1px solid var(--rule-2);
  padding: 8px 10px;
  font-family: var(--ff-serif); font-size: 13px; color: var(--ink);
  transition: border-color .15s var(--ease);
}
.own-input:focus { outline: none; border-color: var(--ink); }
.own-add {
  appearance: none; cursor: pointer;
  background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
  padding: 8px 14px;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  transition: opacity .15s var(--ease);
  white-space: nowrap;
}
.own-add:hover { opacity: 0.85; }
.own-add:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── OWN CHIP variants ── */
.who-chip.own, .stp-chip.own, .tlp-chip.own {
  border-style: dashed; border-color: var(--ink-3); color: var(--ink-2);
}
.who-chip.own.on, .stp-chip.own.on, .tlp-chip.own.on {
  background: var(--ink); color: var(--bone); border-color: var(--ink); border-style: solid;
}
.who-chip-own-mark {
  display: inline-block; margin-right: 4px;
  font-family: var(--ff-mono); font-weight: 700; opacity: 0.6;
}
.tlp-own { padding: 6px 8px; margin-top: 8px; }
.tlp-own .own-input { font-size: 12px; padding: 6px 8px; }
.tlp-own .own-add { padding: 6px 10px; font-size: 11px; }

/* ============================================================
   v0.3 — TaxonomyTree, ReferenceTag, StoryFreeField, RunningSummary
   ============================================================ */

/* ── REFERENCE TAG ── */
.reftag {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px;
  border: 1px dashed var(--rule-3);
  background: var(--bone);
}
.reftag-head {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.reftag-l {
  font-size: 9px; letter-spacing: 0.16em; color: var(--ink-3);
  text-transform: uppercase;
}
.reftag-input {
  background: transparent; border: 0;
  font-family: var(--ff-mono); font-size: 13px; color: var(--ink);
  outline: none; padding: 0;
}
.reftag-input::placeholder { color: var(--ink-3); font-style: italic; }
.reftag-note {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 6px;
  border-top: 1px dashed var(--rule-2);
  margin-top: 4px;
}

/* ── TAXONOMY TREE ── */
.tx { display: flex; flex-direction: column; gap: 14px; }
.tx-tree { display: flex; flex-direction: column; gap: 6px; }
.tx-branch {
  border: 1px solid var(--rule-2);
  background: var(--bone);
  transition: border-color .15s var(--ease);
}
.tx-branch.open { border-color: var(--rule-4); }
.tx-parent {
  appearance: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 4px 1fr auto;
  gap: 14px; align-items: stretch;
  width: 100%; padding: 14px 16px;
  background: transparent; border: 0;
  font-family: var(--ff-serif); color: var(--ink);
}
.tx-parent:hover { background: var(--bone-2); }
.tx-parent-bar {
  align-self: stretch; width: 4px;
  background: var(--ink-3);
}
.tx-branch.open .tx-parent-bar { background: var(--ink); }
.tx-parent-body { display: flex; flex-direction: column; gap: 4px; }
.tx-parent-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.tx-parent-label {
  font-family: var(--ff-serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.012em;
}
.tx-parent-meta {
  font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3);
}
.tx-parent-sub {
  font-size: 13px; color: var(--ink-2); line-height: 1.4;
  font-style: italic;
}
.tx-parent-toggle {
  font-size: 22px; font-weight: 400; color: var(--ink-2);
  align-self: center;
}
.tx-children {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
  padding: 0 12px 12px 24px;
  border-top: 1px solid var(--rule-1);
  margin-top: 0;
  padding-top: 12px;
}
.tx-branch.standalone { border: none; }
.tx-branch.standalone .tx-leaf {
  border: 1px solid var(--rule-2);
  background: var(--bone);
}
.tx-leaf {
  appearance: none; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid transparent;
  padding: 12px 14px;
  font-family: var(--ff-serif); color: var(--ink);
  position: relative;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.tx-leaf:hover { border-color: var(--rule-3); background: var(--bone-2); }
.tx-leaf.on { border-color: var(--ink); background: var(--bone-2); }
.tx-leaf.primary { border-width: 2px; padding: 11px 13px; }
.tx-leaf.secondary { border-style: dashed; }
.tx-leaf.headline {
  background: rgba(44,95,98,0.04);
  border-color: var(--m-pine);
}
.tx-leaf.headline:hover { background: rgba(44,95,98,0.08); }
.tx-leaf-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.tx-leaf-label { font-size: 16px; font-weight: 600; letter-spacing: -0.008em; }
.tx-leaf-tag {
  font-size: 8px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--m-pine); text-transform: uppercase;
}
.tx-leaf-pick {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink); padding: 1px 5px;
  border: 1px solid var(--ink); text-transform: uppercase;
}
.tx-leaf-pick.sec { color: var(--m-pine); border-color: var(--m-pine); }
.tx-leaf-gloss { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.tx-block {
  padding: 14px 18px;
  background: rgba(201,107,90,0.08);
  border: 1px solid var(--m-clay);
  font-family: var(--ff-serif); font-size: 14px; line-height: 1.5;
  color: var(--ink);
}
.tx-block em { color: var(--m-clay); font-style: italic; font-weight: 600; }
.tx-brackets { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* 5-column bracket grid (XS · S · M · L · XL) */
.bg-row.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 720px) {
  .bg-row.five { grid-template-columns: repeat(2, 1fr); }
}

/* ── STORY FREE FIELD ── */
.story { display: flex; flex-direction: column; gap: 18px; }
.story-chips { display: flex; flex-direction: column; gap: 8px; }
.story-chips-l {
  font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3);
  text-transform: uppercase;
}
.story-free { display: flex; flex-direction: column; gap: 6px; }
.story-free-l { display: flex; flex-direction: column; gap: 4px; }
.story-prompt {
  font-family: var(--ff-serif); font-size: 18px; font-weight: 500;
  letter-spacing: -0.012em; line-height: 1.3;
}
.story-hint {
  font-family: var(--ff-serif); font-size: 13px; color: var(--ink-3);
  line-height: 1.5; font-style: italic; max-width: 720px;
}
.story-textarea {
  background: var(--bone); border: 1px solid var(--rule-3);
  padding: 14px 16px;
  font-family: var(--ff-serif); font-size: 16px; line-height: 1.55;
  color: var(--ink); outline: none; resize: vertical;
  min-height: 140px;
  transition: border-color .15s var(--ease);
}
.story-textarea:focus { border-color: var(--ink); }
.story-textarea::placeholder { color: var(--ink-3); font-style: italic; }
.story-counter {
  font-size: 9px; letter-spacing: 0.14em; color: var(--ink-3);
  text-transform: uppercase; align-self: flex-end;
}

/* ── RUNNING SUMMARY ── */
.rsum {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rule-2);
  background: var(--bone);
}
.rsum-l {
  font-size: 9px; letter-spacing: 0.16em; color: var(--ink-3);
  text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule-1);
}
.rsum-body { display: flex; flex-direction: column; gap: 4px; }
.rsum-line {
  font-size: 11px; color: var(--ink); letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}

/* ═════════════════════════════════════════════════════════
   MODERATION STATES — Spec 02
   Hint layer (client-side, advisory). The server-side gate
   is the real check. These styles mark the seam visually so
   the user can see what the brain noticed.
   ═════════════════════════════════════════════════════════ */

/* Flagged input — clay hairline border, no fill change. The
   input is still typeable. */
.mod-flag-input,
.own-input.mod-flag-input,
.story-textarea.mod-flag-input,
.reftag-input.mod-flag-input {
  border-color: var(--m-clay);
  outline: none;
}
.mod-flag-input:focus {
  border-color: var(--m-clay);
  box-shadow: 0 0 0 1px rgba(201,107,90,0.18);
}

/* Caption under a flagged input — small mono, clay, hairline
   spacing. Matches the doctrinal ◆ MONO LABEL pattern. */
.mod-flag-caption {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-clay);
  margin-top: 6px;
  line-height: 1.4;
}

/* Chip that was added while its source input was flagged.
   Dashed clay border. The user can still remove it; server
   may still block submission. */
.mod-pending-chip {
  border-style: dashed;
  border-color: var(--m-clay);
  color: var(--m-clay);
}

/* Submit-blocked modal — appears when backend returns 400
   moderation_block. Inline (not fixed positioned) so it can
   coexist with the doctrine's anti-fixed-positioning rule. */
.mod-block-banner {
  margin: 18px 0;
  padding: 18px 20px;
  background: var(--bone);
  border: 1px solid var(--m-clay);
  border-left-width: 3px;
}
.mod-block-banner .mb-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-clay);
  margin-bottom: 6px;
}
.mod-block-banner .mb-body {
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.mod-block-banner .mb-edit {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-3);
  cursor: pointer;
}
.mod-block-banner .mb-edit:hover { border-color: var(--rule-4); }

/* Soft-warn banner — for moderation_warning in success response.
   Stone-blue (not clay) — review note, not a block. */
.mod-warn-banner {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--bone);
  border: 1px solid var(--m-stone);
  border-left-width: 3px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-stone);
}

/* ═════════════════════════════════════════════════════════
   CALIBRATION BAND — Spec 03 §4
   The last pit stop before SEE REPORT. Four sliders, five
   discrete stops each. Mineral-color anchors. Mono labels.
   Doctrine: hairline, bone, no shadows.
   ═════════════════════════════════════════════════════════ */

.cal-band {
  padding: 24px 26px;
  border: 1px solid var(--rule-3);
  border-radius: 16px;
  background: rgba(255,255,255,0.22);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cal-band-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
}
.cal-band-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 40px;
}
@media (max-width: 760px) {
  .cal-band-body { grid-template-columns: 1fr; gap: 22px; }
}

/* one slider */
.cal-slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-slider-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
}

/* track + anchors row */
.cal-track {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr minmax(80px, auto);
  align-items: center;
  gap: 14px;
}
.cal-anchor {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cal-anchor:first-child { text-align: right; }
.cal-anchor:last-child  { text-align: left;  }

/* the five-stop track */
.cal-stops {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
}
.cal-stops::before {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  height: 1px;
  background: var(--rule-2);
}
.cal-stop {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-stop-dot {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--rule-3);
  transition: all 120ms var(--ease);
}
.cal-stop:hover .cal-stop-dot {
  border-color: var(--rule-4);
}
.cal-stop.on .cal-stop-dot {
  width: 12px; height: 12px;
  background: var(--ink);
  border-color: var(--ink);
}
.cal-stop.center .cal-stop-dot {
  /* center stop has a slightly different default to mark "BALANCED" */
  border-style: solid;
  border-color: var(--rule-3);
}
.cal-stop.center.on .cal-stop-dot {
  background: var(--bone);
  border: 1.5px solid var(--ink);
}

/* preview line */
.cal-preview {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  min-height: 14px;
}
/* v0.9 — calibration stops read as instrument faders (grip handle + thicker rail) */
.cal-stops::before { height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--bone-3, #DEDAD0); }
.cal-stop.on .cal-stop-dot { position: relative; width: 13px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, #42423d, #19190f); border: 1px solid #0b0b0a; box-shadow: 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.cal-stop.on .cal-stop-dot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 1px; transform: translate(-50%, -50%); background: var(--m-clay); box-shadow: 0 0 4px var(--m-clay); }
.cal-stop.center.on .cal-stop-dot { background: linear-gradient(180deg, #42423d, #19190f); border: 1px solid #0b0b0a; }

/* foot — seam chip + reset */
.cal-band-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cal-band-chip {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--rule-2);
  background: var(--bone);
}
.cal-reset {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-transform: uppercase;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--rule-3);
  cursor: pointer;
}
.cal-reset:hover { border-color: var(--rule-4); color: var(--ink); }

/* ═════════════════════════════════════════════════════════
   OFF-LIST LEGEND — Typology fold, per feedback point (1)
   "Not listed ≠ not possible" — drives to contact for typologies
   the configurator doesn't cover.
   ═════════════════════════════════════════════════════════ */
.off-list-legend {
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px dashed var(--rule-3);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.off-list-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.off-list-body {
  font-family: var(--ff-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.off-list-link {
  color: var(--m-clay);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid var(--m-clay);
  padding-bottom: 1px;
  white-space: nowrap;
}
.off-list-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ═════════════════════════════════════════════════════════
   LANGUAGE PICKER — Spec FAST-5 item #4
   Sits between calibration band and SEE REPORT.
   Five buttons, one selected, mono register.
   Doctrine: hairline, bone, no shadows.
   ═════════════════════════════════════════════════════════ */

.lang-band {
  padding: 20px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lang-band-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
}
.lang-band-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lang-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lang-btn {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bone);
  border: 1px solid var(--rule-3);
  padding: 10px 18px;
  cursor: pointer;
  transition: all 120ms var(--ease);
  min-width: 64px;
  text-align: center;
}
.lang-btn:hover {
  border-color: var(--rule-4);
  color: var(--ink);
}
.lang-btn.on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
/* The Japanese button needs slightly different font-handling — its
   label is in CJK script, not Latin. Reduce letter-spacing for legibility. */
.lang-btn:nth-child(5) {
  letter-spacing: 0.04em;
  font-family: var(--ff-sans), 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
.lang-chip {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--rule-2);
  background: var(--bone);
  align-self: flex-start;
}

/* ═════════════════════════════════════════════════════════
   LOADING SEQUENCE — Spec FAST-5 item #3
   Mounted during reportState.phase === 'loading'.
   Replaces the dead "BRAIN IS COMPOSING" line with:
     - Self-drawing Rootherhub logo (90s draw cycle + breathing)
     - 12 lore moments rotating every 15s
     - Compact elapsed time counter
   Pure CSS animation + React useState. No external assets.
   ═════════════════════════════════════════════════════════ */

.ls-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 60px 24px;
  gap: 28px;
  background: var(--bone);
  border: 1px solid var(--rule-2);
  position: relative;
}

/* ─── Logo container ─────────────────────────────────────── */
.ls-logo-wrap {
  width: 240px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rhb-brain-svg, .rhb-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Subtle breathing animation that kicks in after full brain assembly (~90s) */
  animation: rhb-breathe 6s ease-in-out infinite;
  animation-delay: 90s;
}
@keyframes rhb-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.012); opacity: 0.94; }
}

/* ─── Brain maze draw animations ─────────────────────────── */
/* The Rootherhub Brain composes itself over ~90 seconds via stroke-dasharray:
   - 0–28s: Outer silhouette draws (7 paths in sequence)
   - 30s: Central fissure appears (dashed line, fades in)
   - 32–86s: Interior maze curves draw (17 paths, layered sequence)
   All paths use stroke-dasharray:1000 / stroke-dashoffset:1000 → 0 reveal pattern. */

/* Outer silhouette — 7 segments drawing in sequence, ~4s each (0–28s) */
.rhb-brain-outer path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: rhb-draw-stroke 4.2s ease-out forwards;
}
.rhb-brain-outer path:nth-child(1) { animation-delay: 0s; }
.rhb-brain-outer path:nth-child(2) { animation-delay: 4s; }
.rhb-brain-outer path:nth-child(3) { animation-delay: 8s; }
.rhb-brain-outer path:nth-child(4) { animation-delay: 12s; }
.rhb-brain-outer path:nth-child(5) { animation-delay: 16s; }
.rhb-brain-outer path:nth-child(6) { animation-delay: 20s; }
.rhb-brain-outer path:nth-child(7) { animation-delay: 24s; }

/* Central fissure — dashed line, fades in at 30s */
.rhb-brain-fissure path {
  opacity: 0;
  animation: rhb-fade-in 2s ease-out forwards;
  animation-delay: 30s;
}

/* Interior maze — 17 curves drawing in a layered cadence (32–86s) */
.rhb-brain-maze path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: rhb-draw-stroke 3.2s ease-out forwards;
}
/* Left hemisphere horizontal sweeps */
.rhb-brain-maze path:nth-child(1) { animation-delay: 32s; }
.rhb-brain-maze path:nth-child(2) { animation-delay: 35s; }
.rhb-brain-maze path:nth-child(3) { animation-delay: 38s; }
.rhb-brain-maze path:nth-child(4) { animation-delay: 41s; }
.rhb-brain-maze path:nth-child(5) { animation-delay: 44s; }
/* Left hemisphere vertical connectors */
.rhb-brain-maze path:nth-child(6) { animation-delay: 47s; }
.rhb-brain-maze path:nth-child(7) { animation-delay: 50s; }
/* Right hemisphere horizontal sweeps */
.rhb-brain-maze path:nth-child(8)  { animation-delay: 53s; }
.rhb-brain-maze path:nth-child(9)  { animation-delay: 56s; }
.rhb-brain-maze path:nth-child(10) { animation-delay: 59s; }
.rhb-brain-maze path:nth-child(11) { animation-delay: 62s; }
.rhb-brain-maze path:nth-child(12) { animation-delay: 65s; }
/* Right hemisphere vertical connectors */
.rhb-brain-maze path:nth-child(13) { animation-delay: 68s; }
.rhb-brain-maze path:nth-child(14) { animation-delay: 71s; }
.rhb-brain-maze path:nth-child(15) { animation-delay: 74s; }
/* Final accent crossings */
.rhb-brain-maze path:nth-child(16) { animation-delay: 80s; }
.rhb-brain-maze path:nth-child(17) { animation-delay: 84s; }

@keyframes rhb-draw-stroke {
  to { stroke-dashoffset: 0; }
}
@keyframes rhb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Status chip ────────────────────────────────────────── */
.ls-status {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--rule-3);
  background: var(--bone-2);
}
.ls-dot {
  color: var(--clay);
  font-size: 9px;
  animation: ls-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes ls-dot-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.ls-elapsed {
  color: var(--ink-3);
  letter-spacing: 0.10em;
  padding-left: 6px;
  border-left: 1px solid var(--rule-3);
  margin-left: 6px;
}

/* ─── Hairline separator ─────────────────────────────────── */
.ls-rule {
  width: 60%;
  max-width: 480px;
  height: 1px;
  background: var(--rule-2);
}

/* ─── Lore card ──────────────────────────────────────────── */
.ls-lore {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: 8px 16px 0 16px;
  transition: opacity 600ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ls-fade-in  { opacity: 1; }
.ls-fade-out { opacity: 0; }

.ls-lore-tag {
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.ls-lore-head {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.ls-lore-body {
  font-family: var(--ff-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  font-style: italic;
}
.ls-lore-ind {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 6px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .ls-stage { padding: 32px 16px 40px 16px; gap: 22px; }
  .ls-logo-wrap { width: 180px; height: 160px; }
  .ls-lore-head { font-size: 18px; }
  .ls-lore-body { font-size: 14px; }
  .ls-status { font-size: 9px; gap: 10px; padding: 8px 12px; }
}

/* ═════════════════════════════════════════════════════════
   REGIONAL TIER TOGGLE — Spec v0.5 (May 13 2026)
   Band 03 sub-control: lets visitor preview cost under different
   regional construction-cost tiers (A+ down to D).
   ═════════════════════════════════════════════════════════ */
.region-toggle {
  margin: 12px 0 18px 0;
  padding: 12px 14px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.region-toggle-h {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.region-toggle-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.region-btn {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  background: var(--bone);
  border: 1px solid var(--rule-3);
  padding: 8px 12px;
  cursor: pointer;
  transition: all 120ms var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 76px;
  position: relative;
}
.region-btn:hover {
  border-color: var(--rule-4);
  color: var(--ink);
}
.region-btn.on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.region-btn .rb-code {
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.region-btn .rb-mult {
  font-size: 9px;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.region-btn .rb-auto {
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 7px;
  letter-spacing: 0.14em;
  background: var(--m-clay);
  color: var(--bone);
  padding: 2px 5px;
  border-radius: 1px;
  font-family: var(--ff-mono);
}
.region-toggle-foot {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 4px;
  border-top: 1px dashed var(--rule-2);
  margin-top: 4px;
}

/* Concept-phase footnote — sits at bottom of any data band */
.concept-foot {
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px dashed var(--rule-2);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-transform: uppercase;
  background: var(--bone);
}

/* ═════════════════════════════════════════════════════════
   PLACEHOLDER CARD — Editorial pass v0.5 (May 13 2026)
   Replaces the lorem-ipsum "X arriving v0.5" stubs.
   Three-part structure: mono eyebrow + serif body + mono foot.
   Doctrine-aligned: hairline rule, em-dash voice, honest seam-marking.
   ═════════════════════════════════════════════════════════ */
.placeholder-card .ph-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
}
.placeholder-card .ph-h em {
  font-style: italic;
  color: var(--m-clay);
  text-transform: none;
  letter-spacing: 0;
}
.placeholder-card .ph-body {
  font-family: var(--ff-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: 12px;
}
.placeholder-card .ph-foot {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px dashed var(--rule-2);
}

/* ═════════════════════════════════════════════════════════
   BRIEFING ACTIONS — Spec v0.6 (May 14 2026)
   Two side-by-side buttons under the generated poster.
   ◆ THE BRIEFING (PNG) — primary, downloadable
   ◆ THE INVESTMENT BRIEF (PDF) — secondary, coming-soon stub
   Doctrine: hairline edges, mono caps eyebrows, serif name,
   mono caps subtitle. No shadows. No gradients.
   ═════════════════════════════════════════════════════════ */
.briefing-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  align-self: center;
  margin: 18px 0 0 0;
}
.brief-btn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--bone);
  border: 1px solid var(--rule-3);
  cursor: pointer;
  text-align: left;
  transition: all 140ms var(--ease);
  font-family: var(--ff-serif);
  color: var(--ink);
  position: relative;
  min-height: 120px;
}
.brief-btn:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--bone-2);
}
.brief-btn-primary {
  border: 1px solid var(--ink);
  background: var(--bone);
}
.brief-btn-primary:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bone);
}
.brief-btn-primary:hover:not(:disabled) .bb-eyebrow,
.brief-btn-primary:hover:not(:disabled) .bb-sub {
  color: var(--bone-2);
}
.brief-btn.is-loading {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}
.brief-btn.is-disabled,
.brief-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.brief-btn.is-disabled {
  border-style: dashed;
}
.bb-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.bb-name {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.bb-sub {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--rule-2);
}
.brief-foot {
  grid-column: 1 / -1;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--m-clay);
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px dashed var(--m-clay);
  background: var(--bone);
}

@media (max-width: 700px) {
  .briefing-actions { grid-template-columns: 1fr; }
  .brief-btn { min-height: auto; padding: 18px 20px; }
  .bb-name { font-size: 18px; }
}

/* ═════════════════════════════════════════════════════════
   BAND SHELL — Spec v0.6 (May 15 2026)
   Reusable summary / + advanced architecture for all data bands.
   Doctrine: hairline rules, mono caps, no shadows, no gradients.
   ═════════════════════════════════════════════════════════ */
.band-shell {
  /* Inherits .ic-band base layout (grid sidebar + main) */
}
.band-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hero number with optional spread */
.band-hero {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 4px;
}
.band-hero-l {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.band-hero-v {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.band-hero-spread {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-left: 10px;
  text-transform: uppercase;
}

/* Summary section — primary visualization */
.band-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* + Advanced toggle button */
.band-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--rule-2);
  padding: 12px 0 0 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms var(--ease);
  margin-top: 6px;
}
.band-advanced-toggle:hover {
  color: var(--ink);
}
.band-advanced-toggle.is-open {
  color: var(--ink);
}
.band-advanced-tag {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--m-clay);
  border: 1px solid var(--m-clay);
  padding: 2px 6px;
  border-radius: 1px;
}

/* + Advanced panel — bone-2 background, full overrides */
.band-advanced-panel {
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.band-advanced-h {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
}
.band-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.band-advanced-foot {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px dashed var(--rule-2);
  margin-top: 4px;
}

/* Generic override control patterns (used inside band-advanced-body) */
.advanced-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.advanced-row-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-transform: uppercase;
  font-family: var(--ff-mono);
}
.advanced-row-val {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.10em;
}
.advanced-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--rule-3);
  outline: none;
}
.advanced-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.advanced-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
}
.advanced-input {
  background: var(--bone);
  border: 1px solid var(--rule-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink);
  padding: 8px 10px;
  letter-spacing: 0.08em;
  width: 100%;
  outline: none;
}
.advanced-input:focus {
  border-color: var(--ink);
}
.advanced-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.advanced-toggle-btn {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  background: var(--bone);
  border: 1px solid var(--rule-3);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 120ms var(--ease);
}
.advanced-toggle-btn:hover {
  border-color: var(--ink);
}
.advanced-toggle-btn.on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.advanced-reset {
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--m-clay);
  background: transparent;
  border: 1px solid var(--m-clay);
  padding: 6px 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.advanced-reset:hover {
  background: var(--m-clay);
  color: var(--bone);
}

/* ═════════════════════════════════════════════════════════
   BAND 03 v0.6 — NEW SUMMARY COMPONENTS (May 15 2026)
   - Trade Split (Labor / Materials / Soft Costs three-bar)
   - Cost Per Metric strip
   - Greenfield / Footprint strip
   - Capex Range Bar V2 (rebuilt for raw values)
   ═════════════════════════════════════════════════════════ */

/* Trade Split — Niagara-inspired three-bar */
.trade-split {
  margin-top: 6px;
  padding: 14px 16px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trade-split-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
}
.trade-split-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trade-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trade-row-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.trade-row-l {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  font-weight: 600;
  text-transform: uppercase;
}
.trade-row-v {
  font-family: var(--ff-serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.trade-row-bar {
  width: 100%;
  height: 6px;
  background: var(--rule-2);
  overflow: hidden;
}
.trade-row-fill {
  height: 100%;
  transition: width 280ms var(--ease);
}
.trade-split-foot {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 6px;
  border-top: 1px dashed var(--rule-2);
}

/* Cost Per Metric strip */
.cost-per-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
}
.cpm-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.cpm-v {
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Greenfield / Lot Footprint strip */
.greenfield-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bone);
  border: 1px dashed var(--rule-2);
  flex-wrap: wrap;
}
.gf-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
  font-weight: 600;
}
.gf-v {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink);
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--bone-2);
  border-left: 2px solid var(--m-clay);
}
.gf-note {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-family: var(--ff-mono);
  flex: 1;
  min-width: 200px;
}

/* Capex Range Bar V2 — rebuilt from raw low/mid/high */
.capex-rangebar-v2 {
  margin-top: 4px;
}
.crb-track {
  position: relative;
  height: 18px;
  background: var(--rule-2);
  overflow: visible;
}
.crb-baseline {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--m-pine);
  opacity: 0.85;
}
.crb-uplift {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--m-clay);
  opacity: 0.7;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--m-clay),
    var(--m-clay) 3px,
    var(--bone-2) 3px,
    var(--bone-2) 6px
  );
}
.crb-mid {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 22px;
  background: var(--ink);
}
.crb-axis {
  position: relative;
  height: 18px;
  margin-top: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.crb-axis span {
  position: absolute;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════
   CONSTRUCTION BRAIN v0.7 — NEW UI ELEMENTS
   ═════════════════════════════════════════════════════════ */

/* Confidence Level Bar — AACE Class indicator */
.confidence-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid var(--rule-3);
}
.conf-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 600;
}
.conf-progress {
  height: 4px;
  background: var(--rule-2);
  overflow: hidden;
}
.conf-fill {
  height: 100%;
  background: var(--m-pine);
  transition: width 320ms var(--ease);
}
.conf-foot {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Construction Brain Context Strip — Region / Design Tier / Typology Mult */
.cb-context-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
}
.cb-context-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bone-2);
}
.cb-ctx-l {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.cb-ctx-v {
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.cb-ctx-note {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .cb-context-strip { grid-template-columns: 1fr; }
}

/* Currency Toggle Row */
.currency-toggle-row {
  display: flex;
  gap: 4px;
}
.currency-btn {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: var(--bone);
  border: 1px solid var(--rule-3);
  padding: 4px 8px;
  cursor: pointer;
  transition: all 120ms var(--ease);
  text-transform: uppercase;
}
.currency-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.currency-btn.on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

/* Sources block in disclosure */
.cb-sources {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cb-sources-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-2);
}
.cb-source-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.5;
}
.cb-source-l {
  color: var(--m-clay);
  font-size: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}
.cb-source-label {
  font-family: var(--ff-serif);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  flex-shrink: 0;
}
.cb-source-label:hover {
  border-bottom-color: var(--ink);
}
.cb-source-note {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  flex: 1;
}

/* ─── AREA SOURCE STRIP (v0.7 bug fix May 15) ─── */
.area-source-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  flex-wrap: wrap;
}
.as-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
  font-weight: 600;
}
.as-v {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.as-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  text-transform: uppercase;
  border: 1px solid;
  margin-left: auto;
}
.as-tag.user {
  color: var(--m-pine);
  border-color: var(--m-pine);
  background: var(--bone);
}
.as-tag.bracket {
  color: var(--m-clay);
  border-color: var(--m-clay);
  background: var(--bone);
}

/* ═════════════════════════════════════════════════════════
   SITE CONDITION PICKER — v0.7.1 (May 16 2026)
   6-condition selector + conditional work scope follow-up
   ═════════════════════════════════════════════════════════ */
.site-condition {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
}
.site-condition-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-2);
}
.site-condition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .site-condition-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.site-cond-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bone);
  border: 1px solid var(--rule-3);
  cursor: pointer;
  transition: all 120ms var(--ease);
  text-align: left;
  min-height: 64px;
}
.site-cond-btn:hover {
  border-color: var(--ink);
}
.site-cond-btn.on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.site-cond-btn.on .scb-label,
.site-cond-btn.on .scb-note {
  color: var(--bone);
}
.scb-label {
  font-family: var(--ff-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.scb-note {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  line-height: 1.3;
}
.site-condition-foot {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 6px;
  border-top: 1px dashed var(--rule-2);
  margin-top: 4px;
}
.work-scope {
  margin-top: 10px;
}

/* ═════════════════════════════════════════════════════════
   PROJECT MODE BANNER — v0.7.1 (May 16 2026)
   Surfaces which cost track is running: Greenfield vs Renovation.
   Sits at the top of Band 03, before confidence bar.
   Different visual color for renovation (clay) vs greenfield (pine).
   ═════════════════════════════════════════════════════════ */
.project-mode-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bone);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--m-pine);
}
.project-mode-banner.renovation {
  border-left-color: var(--m-clay);
}
.pmb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pmb-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.pmb-v {
  font-family: var(--ff-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 200px;
}
.pmb-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  text-transform: uppercase;
  border: 1px solid;
}
.pmb-tag.ok {
  color: var(--m-pine);
  border-color: var(--m-pine);
  background: var(--bone-2);
}
.pmb-tag.warning {
  color: var(--m-clay);
  border-color: var(--m-clay);
  background: var(--bone-2);
}
.pmb-logic {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  line-height: 1.5;
  font-family: var(--ff-mono);
  padding-top: 6px;
  border-top: 1px dashed var(--rule-2);
  text-transform: none;
}

/* ═════════════════════════════════════════════════════════
   INVESTMENT BRIEF BUTTON STATES — v0.7.1 (May 16 2026)
   Investment Brief is now active, click-gated, cached.
   ═════════════════════════════════════════════════════════ */

/* Secondary (Investment Brief) — now active, not stub */
.brief-btn-secondary {
  border: 1px solid var(--rule-2);
  background: var(--bone-2);
  /* No more dashed border — button is active */
  border-style: solid;
}
.brief-btn-secondary:hover:not(:disabled):not(.is-loading) {
  border-color: var(--ink);
  background: var(--bone);
}

/* Done state — clay accent for completed download */
.brief-btn.is-done {
  border-color: var(--m-clay);
  background: var(--bone);
}
.brief-btn.is-done:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--bone-2);
}
.brief-btn.is-done .bb-eyebrow {
  color: var(--m-clay);
}

/* FREE · BETA inline tag */
.bb-beta-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--m-clay);
  border: 1px solid var(--m-clay);
  background: var(--bone);
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
}

/* Long progress states — break long error messages cleanly */
.brief-btn-secondary .bb-sub {
  word-break: break-word;
  hyphens: auto;
}

/* ═════════════════════════════════════════════════════════
   INVESTMENT BRIEF INLINE DISPLAY — v0.7.1 final (May 17 2026)
   ===========================================================
   Loading and result render INLINE in the dashboard — NOT overlay.
   Dashboard remains scrollable. Operator never loses context.
   The BRIEFING stays visible above while Investment Brief composes.
   ═════════════════════════════════════════════════════════ */

.briefing-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* INLINE LOADING — renders below the two action buttons.
   Same coin LoadingSequence as before, but boxed not overlay-ed. */
.ib-inline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--bone);
  border: 1px solid var(--rule-2);
}
.ib-inline-loading .ls-stage {
  width: 100%;
  max-width: 720px;
}

/* INVESTMENT BRIEF RESULT — image + download button, inline */
.ib-result-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: var(--bone);
  border: 1px solid var(--rule-2);
}
.ib-result-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--m-clay);
  text-transform: uppercase;
  font-weight: 600;
  align-self: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
  width: 100%;
}
.ib-result-image {
  width: 100%;
  max-width: 640px;
  height: auto;
  border: 1px solid var(--rule-2);
  display: block;
}
.ib-download-btn {
  width: 100%;
  max-width: 640px;
  margin-top: 8px;
}

/* ═════════════════════════════════════════════════════════
   SITE INTELLIGENCE STATUS — v0.7.2 (May 18 2026)
   Inline indicator in Site fold. Shows loading state during
   Google Places + Sonnet curation, then shows the read result.
   ═════════════════════════════════════════════════════════ */
.site-intel-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--m-pine);
}
.sis-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 600;
}
.sis-body {
  font-family: var(--ff-serif);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.sis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sis-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  padding: 4px 8px;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bone);
  border: 1px solid var(--rule-2);
}

/* ═════════════════════════════════════════════════════════
   WIPE PROJECT — v0.7.3 (May 20 2026)
   Discreet hairline link in dashboard eyebrow row.
   Editorial register — never destructive-button styled.
   Confirmation surfaces inline, no modal overlay.
   ═════════════════════════════════════════════════════════ */
.dash-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wipe-link {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  padding: 4px 0;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.wipe-link:hover {
  color: var(--m-clay);
  border-bottom-color: var(--m-clay);
}

.wipe-confirm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bone-2);
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--m-clay);
}
.wipe-confirm-q {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: none;
  font-family: var(--ff-serif);
  font-style: italic;
  margin-right: 8px;
}
.wipe-confirm-yes,
.wipe-confirm-no {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.wipe-confirm-yes {
  color: var(--m-clay);
  border-color: var(--m-clay);
}
.wipe-confirm-yes:hover {
  background: var(--m-clay);
  color: var(--bone);
}
.wipe-confirm-no {
  color: var(--ink);
}
.wipe-confirm-no:hover {
  background: var(--ink);
  color: var(--bone);
}

/* ═════════════════════════════════════════════════════════
   OPERATOR NUDGE SLIDERS — v0.7.3 (May 20 2026)
   Sliders restored to the construction brain path with respect
   for existing chip architecture. Each slider scalar multiplies
   the brain's auto value. ×1.00 = trust the brain. Per-slider
   reset returns to AUTO. Math recomputes live.
   ═════════════════════════════════════════════════════════ */
.advanced-section-h {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--m-clay);
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px dashed var(--rule-2);
}

.advanced-slider-foot {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 6px 0 0;
  font-weight: 500;
}

.advanced-slider-tick {
  color: var(--m-pine);
  font-weight: 700;
}

.advanced-slider-reset {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  cursor: pointer;
  text-transform: uppercase;
  transition: color 120ms ease, border-color 120ms ease;
}
.advanced-slider-reset:hover {
  color: var(--m-pine);
  border-bottom-color: var(--m-pine);
}

/* ============================================================
   v0.7.4 EXPRESSION LAYER · ADDITIVE BLOCK
   Appended May 22, 2026
   Holds: mark glyphs, Site Intelligence sentence reveal,
   Interrogate the Thesis chat surface.
   Doctrine v3: bone canvas, charcoal ink, hairlines, no shadows,
   no rounded corners on rules, mineral accents sparingly.
   ============================================================ */

/* ── Mark glyphs ────────────────────────────────────────── */
.mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
  flex-shrink: 0;
}
.mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark-lg {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
}
.mark-lg path { stroke-width: 1.5; }
.rail-step .l .mark { color: var(--ink-3); }
.rail-step.on .l .mark,
.rail-step.done .l .mark { color: var(--ink); }

/* ── Site Intelligence sentence-by-sentence reveal ──────── */
.sis-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--m-pine);
  margin-right: 8px;
  vertical-align: 1px;
  animation: sis-pulse 1.6s ease-in-out infinite;
}
.sis-pulse.done { animation: none; opacity: 0.85; }
@keyframes sis-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.sis-sentences {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sis-sent {
  font-family: var(--ff-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 12px;
  border-left: 1px solid var(--m-pine);
  opacity: 0;
  transform: translateY(4px);
  animation: sis-settle 520ms ease-out forwards;
}
@keyframes sis-settle {
  to { opacity: 1; transform: translateY(0); }
}
.sis-cursor {
  display: inline-block;
  width: 6px;
  height: 14px;
  background: var(--ink);
  margin-left: 4px;
  vertical-align: -2px;
  animation: sis-cursor-blink 1s steps(2) infinite;
}
@keyframes sis-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ── Interrogate the Thesis · trigger ──────────────────── */
.interrogate-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule-3);
}
.interrogate-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule-2);
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}
.interrogate-trigger:hover {
  border-color: var(--ink);
  background: var(--bone-2);
}
.it-trigger-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.it-trigger-prompt {
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--ink);
}
.it-trigger-prompt em {
  font-style: italic;
  color: var(--ink-3);
}
.it-trigger-cta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--m-pine);
}

/* ── Interrogate the Thesis · panel ─────────────────────── */
.interrogate-panel {
  border: 1px solid var(--rule-2);
  padding: 18px;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.it-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-3);
}
.it-head-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.it-head-name {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}
.it-head-r {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* ── Interrogate · thread ──────────────────────────────── */
.it-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.it-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.it-msg.you {
  align-items: flex-end;
}
.it-msg.you .it-body {
  background: var(--bone-2);
  padding: 10px 14px;
  border: 1px solid var(--rule-3);
  max-width: 80%;
}
.it-msg.brain .it-body {
  padding-left: 12px;
  border-left: 1px solid var(--m-pine);
  max-width: 90%;
}
.it-who {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.it-body {
  font-family: var(--ff-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.it-body em { font-style: italic; color: var(--ink-3); }
.it-body strong { font-family: var(--ff-mono); font-weight: 500; }
.it-delta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--m-pine);
  padding: 1px 6px;
  border: 1px solid var(--m-pine);
}
.it-proposal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule-3);
}
.it-apply {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  cursor: pointer;
}
.it-apply:hover { background: var(--m-pine); }
.it-proposal-note {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
}
.it-pending { color: var(--ink-3); font-style: italic; }
.it-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--m-pine);
  margin-right: 8px;
  vertical-align: -1px;
  animation: it-cursor-blink 0.9s steps(2) infinite;
}
@keyframes it-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.2; }
}

/* ── Interrogate · input row ───────────────────────────── */
.it-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.it-textarea {
  font-family: var(--ff-serif);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  background: var(--bone);
  color: var(--ink);
  resize: vertical;
  min-height: 60px;
}
.it-textarea:focus {
  outline: 0;
  border-color: var(--ink);
}
.it-send {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 0 18px;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  cursor: pointer;
  align-self: stretch;
}
.it-send:disabled {
  background: var(--rule-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* ── Interrogate · closed banner ──────────────────────── */
.it-closed-banner {
  padding: 12px 14px;
  border: 1px dashed var(--m-clay);
  background: var(--bone-2);
}
.it-closed-eyebrow {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--m-clay);
  margin-bottom: 6px;
}
.it-closed-body {
  font-family: var(--ff-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-2);
}

/* ── Interrogate · actions ─────────────────────────────── */
.it-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-3);
}
.it-open-calib {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 4px 0;
  cursor: pointer;
  text-transform: uppercase;
}
.it-open-calib:hover {
  color: var(--m-pine);
  border-bottom-color: var(--m-pine);
}
.it-reset {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.it-reset:hover { color: var(--ink); }

/* ── prefers-reduced-motion respect ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sis-sent { animation: none; opacity: 1; transform: none; }
  .sis-cursor, .it-cursor, .sis-pulse { animation: none; opacity: 0.85; }
}

/* ============================================================
   END v0.7.4 EXPRESSION LAYER
   ============================================================ */

/* ============================================================
   v0.7.4.1 BAND 03 RESTRUCTURE · ADDITIVE BLOCK
   Appended May 22, 2026 (afternoon)
   Holds:
     - .band-hero-footer (slot for InterrogateThesis below $9.37M)
     - .band-sources-footer (sources moved out of disclosure to band footer)
     - .disclose-section (sub-sections inside Show The Numbers disclosure)
   Doctrine: hairlines, mono labels, bone canvas, no shadows.
   ============================================================ */

/* ── Hero footer · brain elevated to protagonist position ── */
.band-hero-footer {
  margin-top: 14px;
  padding-top: 18px;
  padding-bottom: 4px;
  border-top: 1px solid var(--rule-3);
}
.band-hero-footer .interrogate-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── Show The Numbers · sub-sections ─────────────────────── */
.disclose-section {
  padding: 14px 0;
}
.disclose-section + .disclose-section {
  border-top: 1px dashed var(--rule-3);
}
.disclose-section-h {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* ── Sources footer · reference layer below the band ────── */
.band-sources-footer {
  margin-top: 4px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: transparent;
  border-top: 1px dashed var(--rule-2);
}
.band-sources-h {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.band-sources-region {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.band-sources-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.band-source-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: baseline;
}
.band-source-mark {
  color: var(--ink-3);
}
.band-source-label {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-3);
}
.band-source-label:hover {
  color: var(--m-pine);
  border-bottom-color: var(--m-pine);
}
.band-source-note {
  font-family: var(--ff-serif);
  font-size: 12px;
  color: var(--ink-3);
}
.band-sources-foot {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding-top: 10px;
  border-top: 1px solid var(--rule-3);
}
/* v0.9 — sources demoted to a tap-to-view reference pill (was always-on footer) */
.band-sources-collapse {
  margin-top: 6px;
  margin-bottom: 18px;
}
.band-sources-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  border-radius: 50px;
  padding: 5px 12px;
  cursor: pointer;
  list-style: none;
  width: fit-content;
  transition: color .15s, border-color .15s;
}
.band-sources-pill::-webkit-details-marker { display: none; }
.band-sources-pill::marker { content: ""; }
.band-sources-collapse[open] .band-sources-pill,
.band-sources-pill:hover {
  color: var(--ink);
  border-color: var(--rule-3);
}
/* v0.9 — Cost DNA spine: always-visible cost composition bar */
.cost-spine-wrap { margin: 16px 0 4px; }
.cost-spine-h { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.cost-spine { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--rule-2); }
.cost-spine i { display: block; height: 100%; }
.cost-spine-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.csk-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); letter-spacing: 0.02em; }
.csk-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
/* v0.9 — Band 03 proto-aligned summary: sub-line, region quick-fader, lamp strip */
.cap-sub { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase; margin: 2px 0 6px; }
.cap-logic { font-family: var(--ff-serif); font-size: 13px; color: var(--ink-2); font-style: italic; margin-bottom: 16px; }
.cap-region { margin: 4px 0 18px; max-width: 420px; }
.cap-region-l { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 8px; }
.cap-region-v { color: var(--ink); font-weight: 700; }
.cap-region-fader { width: 100%; }
.cap-lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 9px; margin: 18px 0 6px; }
.cap-lamp { border: 1px solid var(--rule-2); border-radius: 11px; padding: 12px 13px; background: rgba(255,255,255,0.22); display: flex; flex-direction: column; gap: 4px; }
.cap-lamp .cl-v { font-family: var(--ff-mono); font-weight: 700; font-size: 14px; color: var(--ink); }
.cap-lamp .cl-k { font-size: 8.5px; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.cap-lamp.neutral { background: rgba(31,31,29,0.03); }
.cap-lamp.on { border-color: var(--m-clay); background: rgba(201,107,90,0.07); }
.cap-lamp.on .cl-v { color: var(--m-clay); }
.cap-lamp.on.go { border-color: var(--m-pine, #2C5F62); background: rgba(74,124,114,0.08); }
.cap-lamp.on.go .cl-v { color: var(--m-pine, #2C5F62); }
/* v0.9 — elongated money screen (LCD) */
.band-hero-lcd { position: relative; border-radius: 12px; padding: 16px 20px 14px; overflow: hidden; background: radial-gradient(120% 140% at 18% 0%, #0C1311, #0A0F0E); border: 1px solid #000; box-shadow: inset 0 2px 10px rgba(0,0,0,.6); }
.band-hero-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(91,224,176,.045) 0 1px, transparent 1px 3px); }
.bhl-top { display: flex; justify-content: space-between; align-items: center; }
.bhl-label { font-size: 9px; letter-spacing: 0.18em; color: rgba(91,224,176,.5); }
.bhl-live { display: inline-flex; align-items: center; gap: 6px; font-size: 8.5px; letter-spacing: 0.14em; color: rgba(91,224,176,.5); }
.bhl-blip { width: 6px; height: 6px; border-radius: 50%; background: #5BE0B0; box-shadow: 0 0 6px #5BE0B0; animation: bhlblip 1.6s ease-in-out infinite; }
@keyframes bhlblip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.bhl-val { display: flex; align-items: flex-end; gap: 14px; margin-top: 6px; }
.bhl-big { font-family: var(--ff-mono); font-weight: 700; font-size: 46px; line-height: .92; letter-spacing: -.02em; color: #5BE0B0 !important; text-shadow: 0 0 16px rgba(91,224,176,.45); }
.bhl-big .band-hero-count { color: #5BE0B0 !important; }
.bhl-range { font-size: 13px; color: rgba(91,224,176,.55); padding-bottom: 6px; }
.bhl-eq { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-top: 13px; }
.bhl-eq i { flex: 1; background: linear-gradient(0deg, rgba(91,224,176,.18), rgba(91,224,176,.85)); border-radius: 2px 2px 0 0; transition: height .25s ease; }
.bhl-foot { margin-top: 11px; font-size: 9px; letter-spacing: 0.06em; color: rgba(91,224,176,.5); }
/* v0.9 — region knob beside the fader */
.cap-region-row { display: flex; align-items: center; gap: 14px; }
.cap-knob { width: 46px; height: 46px; border-radius: 50%; position: relative; flex: 0 0 auto; background: radial-gradient(circle at 38% 30%, #3a3a36, #23231f 60%, #141411); border: 1px solid #0c0c0b; box-shadow: inset 0 1px 2px rgba(255,255,255,.08), inset 0 -3px 5px rgba(0,0,0,.55); }
.cap-knob-notch { position: absolute; top: 5px; left: 50%; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: var(--m-clay); box-shadow: 0 0 6px rgba(201,107,90,.7); transform-origin: 50% 18px; transition: transform .15s; }
.cap-region-row .cap-region-fader { flex: 1; }
/* v0.9 — cost spine total label */
.cost-spine-total { color: var(--ink); font-weight: 700; }

/* ============================================================
   END v0.7.4.1 BAND 03 RESTRUCTURE
   ============================================================ */

/* ============================================================
   TYPOLOGY INSTRUMENT FACE — v0.8 instrument grammar (additive)
   New classes only; existing .tx-/.bg-/.reftag- rules left intact
   for rollback. Render uses these inst-* classes.
   ============================================================ */
.inst-face{display:flex;align-items:center;background:linear-gradient(180deg,#EDEAE2,#E4E1D9);border:1px solid var(--rule-4);border-radius:3px;padding:14px 18px;margin-bottom:10px;flex-wrap:wrap;gap:10px}
.inst-brand{font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;padding-right:16px;border-right:1px solid var(--rule-4);line-height:1.5}
.inst-brand b{display:block;color:var(--ink);font-size:11px;letter-spacing:.16em;margin-top:2px}
.inst-define{display:flex;align-items:center;gap:14px;padding:0 18px;flex:1 1 auto;min-width:200px}
.inst-define-lbl{font-family:var(--ff-mono);font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--ink);text-transform:uppercase}
.inst-screen{flex:1 1 auto;max-width:none;background:#14201F;border:1px solid #0A1413;border-radius:3px;padding:11px 15px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.inst-screen-input{width:100%;background:transparent;border:0;outline:none;font-family:var(--ff-mono);font-size:16px;letter-spacing:.08em;color:#3DD6C4;text-transform:uppercase;text-shadow:0 0 6px rgba(61,214,196,.5)}
.inst-screen-input::placeholder{color:rgba(61,214,196,.32)}
.inst-code{font-family:var(--ff-mono);font-size:8px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;text-align:right;line-height:1.5;padding-left:16px;border-left:1px solid var(--rule-4);flex:0 0 auto;white-space:nowrap}

.inst-body{display:flex;flex-direction:column}
.inst-modhead{font-family:var(--ff-mono);font-size:9px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.inst-stage{display:flex;gap:5px}
.inst-stage .st{width:6px;height:6px;border:1px solid var(--rule-4);border-radius:1px}
.inst-stage .st.done{background:var(--m-pine,#275B61);border-color:var(--m-pine,#275B61)}
.inst-stage .st.active{background:#E17863;border-color:#E17863}

.inst-bank{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.inst-cell{appearance:none;cursor:pointer;position:relative;background:linear-gradient(180deg,#E8E5DD,#DEDBD2);border:1px solid var(--rule-4);border-radius:3px;padding:9px 8px 8px;font-family:var(--ff-serif);color:var(--ink-2);display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;box-shadow:0 1px 0 rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.6);transition:transform 80ms cubic-bezier(.4,0,.2,1),box-shadow 80ms,background .16s,border-color .16s,color .16s;min-height:78px}
.inst-cell-idx{font-size:8px;letter-spacing:.08em;color:var(--ink-3)}
.inst-cell-sym{font-size:24px;font-weight:700;line-height:1;margin:2px 0 1px}
.inst-cell-nm{font-size:10px;font-weight:600;line-height:1.1;margin-top:auto}
.inst-cell-cnt{font-size:7px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.inst-cell:hover{background:linear-gradient(180deg,#ECE9E1,#E2DFD6);color:var(--ink)}
.inst-cell:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.16)}
.inst-cell.on-p{background:#E17863;border-color:#E17863;color:#fff}
.inst-cell.on-p .inst-cell-idx,.inst-cell.on-p .inst-cell-cnt{color:rgba(255,255,255,.7)}
.inst-cell.on-s{background:#275B61;border-color:#275B61;color:#F2F0EB}
.inst-cell.on-s .inst-cell-idx,.inst-cell.on-s .inst-cell-cnt{color:rgba(242,240,235,.7)}
.inst-cell.editing{outline:2px solid var(--ink);outline-offset:1px}

.inst-strips-wrap{margin-top:8px;background:var(--bone-3,#E6E3DB);border:1px solid var(--rule-3);border-radius:2px;padding:13px}
.inst-strips-wrap.for-p{border-left:2px solid #E17863}
.inst-strips-wrap.for-s{border-left:2px solid #275B61}
.inst-strips-h{font-size:9px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-bottom:12px;display:flex;justify-content:space-between}
.inst-strips-h .inst-for{color:#E17863}
.inst-strips-wrap.for-s .inst-strips-h .inst-for{color:#275B61}
.inst-strips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.inst-strip{flex:0 0 auto;width:92px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;padding:11px 8px;box-shadow:0 1px 0 rgba(0,0,0,.05);transition:transform 80ms cubic-bezier(.4,0,.2,1),box-shadow 80ms,background .14s,border-color .14s}
.inst-strip:hover{background:var(--bone-2)}
.inst-strip:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.14)}
.inst-strip-sym{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.inst-strip-rail{width:4px;height:64px;background:var(--rule-3);border-radius:2px;position:relative}
.inst-strip-cap{width:18px;height:9px;border-radius:2px;background:var(--rule-4);position:absolute;bottom:0;left:50%;transform:translateX(-50%);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:bottom .2s cubic-bezier(.4,0,.2,1),background .15s}
.inst-strip-name{font-size:10px;font-weight:600;text-align:center;line-height:1.15;color:var(--ink-2);min-height:24px;display:flex;align-items:center}
.inst-strip-tag{font-size:6px;font-weight:700;letter-spacing:.12em;color:#E17863;text-transform:uppercase;min-height:8px}
.inst-strip.armed-p{border-color:#E17863;background:#FBEEEA}
.inst-strip.armed-p .inst-strip-cap{background:#E17863;bottom:46px;box-shadow:0 0 6px rgba(225,120,99,.5)}
.inst-strip.armed-p .inst-strip-name{color:var(--ink)}
.inst-strip.armed-s{border-color:#275B61;background:#E9F0EF}
.inst-strip.armed-s .inst-strip-cap{background:#275B61;bottom:46px;box-shadow:0 0 6px rgba(39,91,97,.5)}
.inst-strip.armed-s .inst-strip-name{color:var(--ink)}
.inst-strip.armed-s .inst-strip-tag{color:#275B61}

.inst-block{margin-top:10px;background:var(--bone-2);border:1px solid var(--rule-4);border-left:2px solid #E17863;border-radius:2px;padding:12px 14px;font-family:var(--ff-serif);font-size:13px;line-height:1.5;color:var(--ink-2)}

.inst-controls{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inst-ch{background:var(--bone-3,#E6E3DB);border:1px solid var(--rule-3);border-radius:2px;padding:14px}
.inst-ch.primary{border-left:2px solid #E17863}
.inst-ch.secondary{border-left:2px solid #275B61}
.inst-ch-h{font-size:8px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px}
.inst-ch-row{display:flex;flex-direction:column;gap:9px}
.inst-ticks{display:flex;gap:4px}
.inst-tick{flex:1;text-align:center;font-family:var(--ff-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);padding:8px 0;border:1px solid var(--rule-3);border-radius:2px;cursor:pointer;background:var(--bone);transition:all .14s}
.inst-tick:hover{background:var(--bone-2)}
.inst-ch.primary .inst-tick.on{background:#E17863;border-color:#E17863;color:#fff}
.inst-ch.secondary .inst-tick.on{background:#275B61;border-color:#275B61;color:#F2F0EB}
.inst-cap-lbl{font-size:8px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;display:block;margin-bottom:2px}
.inst-cap-big{font-size:20px;font-weight:600;letter-spacing:-.01em;display:block}

.inst-switches{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.inst-toggle{display:flex;align-items:center;gap:9px;background:var(--bone);border:1px solid var(--rule-3);border-radius:2px;padding:10px 13px;cursor:pointer;font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:all .15s;user-select:none}
.inst-toggle:hover{background:var(--bone-2)}
.inst-sw{width:34px;height:18px;border-radius:2px;background:var(--rule-4);position:relative;transition:background .18s;flex-shrink:0}
.inst-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:1px;background:var(--bone);transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.inst-toggle.on{color:var(--ink);border-color:#275B61}
.inst-toggle.on .inst-sw{background:#275B61}
.inst-toggle.on .inst-sw::after{transform:translateX(16px)}

@media (prefers-reduced-motion:reduce){
  .inst-cell,.inst-strip,.inst-strip-cap,.inst-tick,.inst-sw,.inst-sw::after{transition:none!important}
}
@media (max-width:680px){
  .inst-bank{grid-template-columns:repeat(3,1fr)}
  /* .inst-controls handled in PATCH TWO */
  .inst-code{display:none}
  .inst-define{padding:0;width:100%}
}
/* ── SCALE KNOB — rotary synced with ticks (restrained machined depth) ── */
.inst-ch-row.knobbed{flex-direction:row;align-items:center;gap:18px}
.inst-ch-readout{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.inst-knob-unit{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.inst-knob{width:62px;height:62px;border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 38% 32%,#3A3A36 0%,#2A2A27 40%,#1F1F1D 72%,#161614 100%);
  border:1px solid #0E0E0D;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.07),inset 0 -3px 6px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.4);
  transition:box-shadow .15s}
.inst-knob:active{cursor:grabbing}
.inst-knob:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.inst-knob::before{content:'';position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.inst-knob-notchwrap{position:absolute;inset:0;transition:transform .2s cubic-bezier(.34,1.2,.64,1)}
.inst-knob-notch{position:absolute;top:6px;left:50%;width:2.5px;height:13px;margin-left:-1.25px;border-radius:2px;background:var(--rule-3)}
.inst-knob.set .inst-knob-notch.pri{background:#E17863;box-shadow:0 0 5px rgba(225,120,99,.6)}
.inst-knob.set .inst-knob-notch.sec{background:#275B61;box-shadow:0 0 5px rgba(39,91,97,.6)}
.inst-knob-cap{font-size:8px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){ .inst-knob-notchwrap{transition:none!important} }
/* (superseded by PATCH TWO mobile rules below) */
/* ── end typology instrument face ── */

/* ============================================================
   TYPOLOGY STACK — FOLD-FOOT TRANSPORT (instrument)  [rails reverted]
   ============================================================ */
.inst-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.inst-foot-status{font-size:10px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.inst-foot-controls{display:flex;gap:10px;align-items:stretch}
.inst-back{align-self:center}
.inst-lockfold{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;background:radial-gradient(circle at 38% 30%,#F08E78,#E17863 62%,#C85F49);border:1px solid #B0503B;border-radius:3px;padding:14px 24px;opacity:.4;transition:opacity .25s,transform 90ms cubic-bezier(.4,0,.2,1),box-shadow 90ms;box-shadow:0 2px 5px rgba(200,95,73,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.inst-lockfold.ready{opacity:1}
.inst-lockfold:active{transform:translateY(2px);box-shadow:0 1px 2px rgba(200,95,73,.4),inset 0 2px 5px rgba(0,0,0,.2)}
.inst-lockfold:disabled{cursor:not-allowed}
.inst-lockfold-tri{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.inst-lockfold-lbl{font-size:12px;font-weight:700;letter-spacing:.14em;color:#fff;text-transform:uppercase;text-align:left;line-height:1.4}
.inst-lockfold-lbl small{display:block;font-size:8px;font-weight:400;letter-spacing:.12em;color:rgba(255,255,255,.78)}
@media (max-width:680px){ .inst-foot{flex-direction:column-reverse;align-items:stretch} .inst-foot-controls{justify-content:space-between} }
@media (prefers-reduced-motion:reduce){ .inst-lockfold{transition:none!important} }


/* ============================================================
   RAILS — SIDEKICK MIXER (left) + RECORDER SCREEN (right)
   Flex layouts (narrow-native). Additive.
   ============================================================ */
/* ── LEFT: Sidekick mixer strip ── */
.rail.mixer{padding:0 0 14px}
.mixer-h{padding:0 16px 12px;border-bottom:1px solid var(--rule-4);margin-bottom:4px}
.mixer-h .ttl{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.mixer-h .ttl small{font-weight:400;color:var(--ink-3)}
.mixer-h .sub{font-size:8px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-top:4px}
.mx-ch{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-left:2px solid transparent;padding:11px 16px;cursor:pointer;transition:background .15s,border-color .15s}
.mx-ch:hover{background:var(--bone-2)}
.mx-knob{width:30px;height:30px;border-radius:50%;position:relative;flex-shrink:0;background:radial-gradient(circle at 38% 32%,#3A3A36,#2A2A27 55%,#1A1A16);border:1px solid #0E0E0D;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 3px rgba(0,0,0,.5)}
.mx-knob .n{position:absolute;top:3px;left:50%;width:2px;height:8px;margin-left:-1px;border-radius:1px;background:var(--rule-3);transform-origin:50% 12px;transition:transform .25s var(--mech)}
.mx-info{min-width:0;flex:1}
.mx-row1{display:flex;align-items:baseline;gap:6px}
.mx-num{font-size:8px;color:var(--ink-3)}
.mx-name{display:flex;align-items:center;gap:6px;font-family:var(--ff-serif);font-size:14px;font-weight:600;color:var(--ink-3);letter-spacing:.01em;transition:color .15s}
.mx-name .mark{width:13px;height:13px;color:var(--ink-3)}
.mx-pick{font-size:8px;letter-spacing:.06em;color:var(--ink-4);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mx-ch.done{border-left-color:var(--m-pine,#275B61)}
.mx-ch.done .mx-knob .n{background:#275B61;box-shadow:0 0 4px rgba(39,91,97,.6)}
.mx-ch.done .mx-name,.mx-ch.done .mx-name .mark{color:var(--ink)}
.mx-ch.done .mx-pick{color:#275B61}
.mx-ch.on{border-left-color:#E17863;background:var(--bone-2)}
.mx-ch.on .mx-knob .n{background:#E17863;box-shadow:0 0 5px rgba(225,120,99,.7)}
.mx-ch.on .mx-name,.mx-ch.on .mx-name .mark{color:var(--ink)}
.mx-ch.upcoming{opacity:.55}
.mixer-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 0;margin-top:6px;border-top:1px solid var(--rule-4)}
.mixer-foot .lbl{font-size:8px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.mixer-foot .cue{width:26px;height:14px;border-radius:2px;background:#E17863;box-shadow:0 0 5px rgba(225,120,99,.4)}

/* ── RIGHT: recorder screen ── */
.rsum.rec{background:var(--chassis);border:1px solid var(--rule-4);border-radius:4px;padding:14px}
.rec-h{font-size:8px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.rec-h .rdot{display:flex;align-items:center;gap:6px}
.rec-h .rdot::before{content:'';width:7px;height:7px;border-radius:50%;background:#E17863;box-shadow:0 0 6px #E17863;animation:rec-pulse 1.6s ease-in-out infinite}
@keyframes rec-pulse{50%{opacity:.4}}
.rec-screen{background:#14201F;border:1px solid #0A1413;border-radius:3px;padding:14px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.rec-screen-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(61,214,196,.15);padding-bottom:10px;margin-bottom:10px}
.rec-timer{font-size:30px;font-weight:700;color:#3DD6C4;letter-spacing:.04em;text-shadow:0 0 8px rgba(61,214,196,.5);line-height:1}
.rec-timer-lbl{font-size:7px;letter-spacing:.14em;color:rgba(61,214,196,.5);text-transform:uppercase;margin-top:4px}
.rec-meta{text-align:right;font-size:8px;letter-spacing:.1em;color:rgba(61,214,196,.6);text-transform:uppercase;line-height:1.7}
.rec-meta b{color:#3DD6C4;font-size:11px}
.rec-bars{display:flex;flex-direction:column;gap:6px}
.rec-bar{display:flex;align-items:center;gap:8px}
.rec-bar .bn{font-size:8px;color:rgba(61,214,196,.4);flex-shrink:0;width:16px}
.rec-bar .track{flex:1;height:15px;background:rgba(61,214,196,.07);border-radius:2px;position:relative;overflow:hidden;min-width:0}
.rec-bar .fill{position:absolute;inset:0;background:rgba(61,214,196,.16);border-left:2px solid #3DD6C4;display:flex;align-items:center;padding-left:7px;font-size:8px;letter-spacing:.04em;color:#3DD6C4;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.rec-bar.empty .track::after{content:'—';position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:9px;color:rgba(61,214,196,.25)}
.rec-bar .lvl{font-size:7px;color:rgba(61,214,196,.45);text-transform:uppercase;flex-shrink:0;width:24px;text-align:right}
.rec-foot{margin-top:12px;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.rec-foot .pct{color:var(--ink);font-weight:700}
@media (prefers-reduced-motion:reduce){ .mx-knob .n{transition:none!important} .rec-h .rdot::before{animation:none!important} }
/* ── end rails ── */

/* ============================================================
   MOBILE TRANSFORMER — phone + iPad adaptivity (mobile-only)
   Desktop (>1100px) untouched. Fixes zoom overflow, lays mixer
   horizontal on phone, keeps recorder readable.
   ============================================================ */

/* ── OVERFLOW GUARDS (kills phone zoom-on-load) ── */
@media (max-width:720px){
  .inst-body, .inst-bank, .inst-controls, .inst-strips-wrap { min-width:0; max-width:100%; }
  .inst-strips { max-width:100%; }                 /* strips scroll within viewport, not pushing page wide */
  .inst-face { flex-wrap:wrap; }
  .inst-screen { min-width:0; }
  .inst-bank { grid-template-columns:repeat(3,1fr); }
  .inst-controls { grid-template-columns:1fr; }     /* two scale channels stack */
}

/* ── MIXER as horizontal top transport (phone) ── */
@media (max-width:720px){
  /* session clock row — shown only on mobile, inside sticky strip */
  .rail.mixer { display:flex; flex-direction:column; gap:6px; }
  .mx-session { display:flex; align-items:center; gap:8px; padding:2px 2px 6px; border-bottom:1px solid var(--rule-3); }
  .mx-session .mx-rec { width:7px; height:7px; border-radius:50%; background:#E17863; box-shadow:0 0 6px #E17863; animation:rec-pulse 1.6s ease-in-out infinite; flex:0 0 auto; }
  .mx-session .mx-clock { font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--ink); }
  .mx-session .mx-prog { margin-left:auto; font-size:9px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
  /* the 5 fold knobs — ALL fit in one row, NO scroll, tap = jump (setStep) */
  .rail.mixer .mx-row-wrap { }
  .mx-ch { flex:1 1 0; min-width:0; flex-direction:column; align-items:center; gap:4px; padding:7px 2px; border-left:0; border:1px solid var(--rule-3); border-radius:3px; background:var(--bone); }
  /* lay the five knob-buttons in one row under the session clock */
  .rail.mixer { flex-flow:row wrap; align-items:stretch; }
  .rail.mixer .mixer-h { display:none; }
  .rail.mixer .mx-session { flex:1 0 100%; }
  .rail.mixer .mx-ch { flex:1 1 18%; }
  .rail.mixer .mixer-foot { display:none; }
  .mx-ch.on { border-color:#E17863; background:#FBEEEA; }
  .mx-ch.done { border-color:#275B61; background:#E9F0EF; }
  .mx-knob { width:22px; height:22px; }
  .mx-knob .n { height:6px; top:2px; transform-origin:50% 9px; }
  .mx-info { flex:0; text-align:center; }
  .mx-row1 { justify-content:center; }
  .mx-name { font-size:0; gap:0; }                  /* hide long name; number carries it */
  .mx-name .mark { width:12px; height:12px; }
  .mx-num { font-size:9px; font-weight:700; }
  .mx-pick { display:none; }                        /* pick summary lives in frozen stack instead */
}

/* ── COMPACT RECORDER STRIP on phone (data folds back in at top) ──
   Reuses the live aside RunningSummary by un-hiding a condensed form. */
@media (max-width:720px){
  .aside { display:block; order:-1; position:sticky; top:64px; z-index:25; margin-bottom:12px; }
  .rsum.rec { padding:8px 10px; }
  .rsum.rec .rec-screen { padding:8px 10px; }
  .rsum.rec .rec-screen-top { padding-bottom:6px; margin-bottom:6px; }
  .rsum.rec .rec-timer { font-size:20px; }
  .rsum.rec .rec-bars { display:none; }             /* drop the 5 bars on phone; timer+meta+pct only */
  .rsum.rec .rec-h { margin-bottom:6px; }
}

/* iPad landscape (901-1100): recorder kept but condensed bars ok */
@media (max-width:1100px) and (min-width:901px){
  .rsum.rec .rec-timer { font-size:24px; }
  .rec-bar .fill { font-size:7px; }
}
/* ── end mobile transformer ── */

/* ============================================================
   PATCH TWO — mobile subdivisions wrap + bigger scale knobs
   (mobile-only; desktop > 720px untouched)
   ============================================================ */

/* ── (2) SUBDIVISIONS WRAP TO VISIBLE GRID — no horizontal scroll ──
   Every typology visible at once; nothing hidden behind a swipe. */
@media (max-width:720px){
  .inst-strips{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; overflow-x:visible; }
  .inst-strip{ width:auto; flex:none; min-width:0; padding:9px 6px; }
  .inst-strip-name{ font-size:9px; min-height:0; }
  .inst-strip-rail{ height:40px; }            /* shorter rail so grid stays compact */
}
@media (max-width:420px){
  .inst-strips{ grid-template-columns:repeat(2,1fr); }
}

/* ── (1) SCALE CHANNEL — bigger knob LEFT + vertical ticks RIGHT ──
   Two channels (primary+secondary) stay side by side so BOTH knobs show. */
@media (max-width:720px){
  .inst-controls{ grid-template-columns:1fr 1fr; gap:7px; }   /* 2-up so both knobs visible */
  .inst-ch{ padding:11px 9px; }
  /* center-aligned instrument strip: knob · ticks · capacity all vertically centered */
  .inst-ch-row.knobbed{ flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; }
  .inst-knob-unit{ flex-direction:column; gap:4px; flex:0 0 auto; align-self:center; }
  .inst-knob{ width:60px; height:60px; }                       /* bigger, fits 2-up */
  .inst-ch-readout{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; }
  .inst-ticks{ display:grid; grid-template-columns:1fr; gap:3px; }   /* vertical ticks beside knob */
  .inst-tick{ padding:4px 0; font-size:10px; }
  .inst-cap{ margin:0; text-align:left; }
  .inst-cap-big{ font-size:15px; }
}
/* very narrow: if two channels too tight, stack but keep knobs big */
@media (max-width:380px){
  .inst-controls{ grid-template-columns:1fr; }
  .inst-knob{ width:72px; height:72px; }
}
/* ── end patch two ── */

/* ============================================================
   FOLD 02 SITE — dashboard modules (boxed), globe, fader
   Additive. Re-skins real Site components into instrument boxes.
   ============================================================ */
/* shared module box */
.inst-site-mod{background:var(--chassis,#E4E1D9);border:1px solid var(--rule-4);border-radius:4px;padding:14px;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.05)}
.inst-mod-h{font-size:8px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}

/* ADDRESS module — lit screen */
.inst-addr-state{color:var(--m-pine,#275B61)}
.inst-addr-screen{background:#14201F;border:1px solid #0A1413;border-radius:3px;padding:13px 15px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.inst-addr-input-row{display:flex;align-items:center;gap:10px}
.inst-addr-input{flex:1;background:transparent;border:0;border-bottom:1px solid rgba(61,214,196,.25);outline:none;font-family:var(--ff-mono);font-size:15px;color:#3DD6C4;text-shadow:0 0 6px rgba(61,214,196,.4);padding:4px 0}
.inst-addr-input::placeholder{color:rgba(61,214,196,.3)}
.inst-addr-clear{background:transparent;border:1px solid rgba(61,214,196,.3);border-radius:2px;color:rgba(61,214,196,.7);font-family:var(--ff-mono);font-size:9px;padding:5px 9px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}
.inst-addr-busy{font-size:9px;color:rgba(61,214,196,.55);margin-top:9px}
.inst-addr-list{margin-top:9px;display:flex;flex-direction:column;gap:4px}
.inst-addr-item{text-align:left;background:rgba(61,214,196,.06);border:1px solid rgba(61,214,196,.15);border-radius:2px;padding:8px 10px;font-family:var(--ff-mono);font-size:10px;color:rgba(232,237,236,.8);cursor:pointer}
.inst-addr-item:hover{background:rgba(61,214,196,.12)}
.inst-addr-pin{font-size:10px;color:#3DD6C4;margin-top:8px;text-shadow:0 0 5px rgba(61,214,196,.4)}

/* CONDITIONS — adaptive periodic cells */
.inst-cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.inst-cond{appearance:none;cursor:pointer;text-align:left;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;padding:10px 11px;transition:all .15s cubic-bezier(.4,0,.2,1);min-height:70px;display:flex;flex-direction:column;gap:3px}
.inst-cond:hover{background:var(--bone-2)}
.inst-cond.on{background:#E17863;border-color:#E17863;color:#fff}
.inst-cond-sym{font-size:15px;font-weight:700}
.inst-cond-name{font-size:11px;font-weight:600;line-height:1.1;font-family:var(--ff-serif)}
.inst-cond-note{font-size:8px;line-height:1.3;color:var(--ink-3);margin-top:auto}
.inst-cond.on .inst-cond-note{color:rgba(255,255,255,.78)}

/* WORK SCOPE — horizontal fader */
.inst-fader{position:relative;height:34px;margin:6px 0 4px;display:flex;align-items:center}
.inst-fader-rail{position:absolute;left:0;right:0;height:4px;background:var(--rule-3);border-radius:2px}
.inst-fader-fill{position:absolute;left:0;height:4px;background:#275B61;border-radius:2px;transition:width .2s cubic-bezier(.4,0,.2,1)}
.inst-fader-cap{position:absolute;width:20px;height:28px;background:radial-gradient(circle at 40% 30%,#3A3A36,#22221E);border:1px solid #0E0E0D;border-radius:3px;transform:translateX(-50%);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s cubic-bezier(.4,0,.2,1);pointer-events:none}
.inst-fader-cap::after{content:'';position:absolute;top:50%;left:50%;width:2px;height:12px;margin:-6px 0 0 -1px;background:#3DD6C4;box-shadow:0 0 4px #3DD6C4}
.inst-fader-stop{position:absolute;width:26px;height:34px;transform:translateX(-50%);background:transparent;border:0;cursor:pointer;padding:0}
.inst-fader-marks{display:flex;justify-content:space-between;margin-top:4px}
.inst-fader-mark{flex:1;text-align:center;background:transparent;border:0;font-family:var(--ff-mono);font-size:9px;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase;cursor:pointer;padding:3px 0}
.inst-fader-mark.on{color:#275B61;font-weight:700}
.inst-ws-note{font-family:var(--ff-serif);font-size:12px;color:var(--ink-2);margin-top:8px;line-height:1.4}

/* LAND STATUS — toggle row */
.inst-land-row{display:flex;gap:7px}
.inst-land-opt{flex:1;text-align:center;background:var(--bone);border:1px solid var(--rule-3);border-radius:2px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:all .15s}
.inst-land-opt.on{background:var(--ink);border-color:var(--ink)}
.inst-land-h{font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;color:var(--ink);text-transform:uppercase}
.inst-land-opt.on .inst-land-h{color:var(--bone)}
.inst-land-g{font-family:var(--ff-serif);font-size:9px;color:var(--ink-3);line-height:1.2}
.inst-land-opt.on .inst-land-g{color:rgba(242,240,235,.6)}

/* GLOBE box (rendered in hospitality.html, styled here) */
.inst-globe-box{background:var(--bone);border:1px solid var(--rule-4);border-radius:4px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.inst-globe-l{font-family:var(--ff-mono);font-size:8px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;text-align:center}
.inst-geoglobe{width:110px;height:110px;display:block}
.inst-globe-state{font-family:var(--ff-mono);font-size:9px;letter-spacing:.06em;color:var(--ink-2)}
.inst-globe-state{font-family:var(--ff-mono);font-size:9px;letter-spacing:.06em;color:rgba(61,214,196,.6)}

/* intel + globe row */
.inst-intel-row{display:grid;grid-template-columns:1fr 190px;gap:10px;margin-bottom:10px}

/* detail toggler */
.inst-detail-tog{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:1.5px dashed var(--rule-4);border-radius:3px;padding:11px 14px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;cursor:pointer;margin-top:6px}
.inst-detail-tog:hover{background:var(--bone-2)}

@media (max-width:760px){
  .inst-intel-row{grid-template-columns:1fr}
  .inst-intel-row .inst-globe-box{order:-1}   /* mobile: globe BEFORE brain */
  .inst-cond-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){ .inst-fader-fill,.inst-fader-cap{transition:none!important} }
/* ── end fold 02 site ── */

/* ── SITE map module: constrain height so maps render clean, not huge ── */
.inst-map-mod{padding:10px;overflow:hidden}
.inst-map-mod .lm,.inst-map-mod .cmap,.inst-map-mod > div{max-width:100%}
.inst-map-mod .lm-svg{max-height:200px;width:auto;max-width:100%;margin:0 auto;display:block}
.inst-map-mod .lm-l,.inst-map-mod .lm-foot{margin-bottom:4px}
@media (max-width:760px){ .inst-map-mod .lm-svg{max-height:150px} }
/* ── end site map fix ── */

/* ── SITE area / dimensions — L×W instrument inputs (low-key TE) ── */
.inst-area{}
.inst-dim-switch{display:inline-flex;border:1px solid var(--rule-3);border-radius:2px;overflow:hidden}
.inst-dim-switch button{background:var(--bone);border:0;font-family:var(--ff-mono);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);padding:4px 9px;cursor:pointer;transition:all .12s}
.inst-dim-switch button.on{background:var(--green,#275B61);color:#F2F0EB}
.inst-dim-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.inst-dim-field{display:flex;align-items:center;gap:6px;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;padding:8px 10px;flex:1;min-width:90px}
.inst-dim-field.wide{flex:1 0 100%}
.inst-dim-input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:15px;color:var(--ink);padding:0}
.inst-dim-input::-webkit-outer-spin-button,.inst-dim-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inst-dim-u{font-size:9px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;flex:0 0 auto}
.inst-dim-x{font-size:14px;color:var(--ink-3);flex:0 0 auto}
.inst-dim-eq{font-size:11px;letter-spacing:.04em;color:var(--ink-2);flex:0 0 auto;white-space:nowrap}
.inst-dim-eq b{color:var(--green,#275B61);font-size:13px}
.inst-area-foot{font-size:9px;letter-spacing:.04em;color:var(--ink-3);margin-top:8px;line-height:1.5}
@media (max-width:520px){ .inst-dim-eq{flex:1 0 100%;margin-top:4px} }
/* ── end site area ── */

/* ============================================================
   FOLD 03 OPERATION — WHO module-tab / drill (one universe at a time)
   Bigger CAPS tabs. AI·Robotics = phosphor differentiator. Additive.
   ============================================================ */
.who-modules{margin-top:4px}
.who-tabs{display:flex;gap:7px;margin-bottom:14px}
.who-tab{flex:1;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;padding:13px 11px;cursor:pointer;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:5px}
.who-tab:hover{background:var(--bone-2)}
.who-tab .wt-l{font-family:var(--ff-mono);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);line-height:1.1}
.who-tab .wt-c{font-size:8px;letter-spacing:.1em;color:var(--ink-4);text-transform:uppercase}
.who-tab.active{border-color:var(--ink);background:var(--bone-2);border-width:1px;box-shadow:inset 0 0 0 1px var(--ink)}
.who-tab.active .wt-l{color:var(--ink)}
.who-tab.has .wt-c{color:#275B61;font-weight:700}
/* AI module = the differentiator */
.who-tab.ai.active{border-color:#275B61;box-shadow:inset 0 0 0 1px #275B61;background:#E9F0EF}
.who-tab.ai.active .wt-l{color:#275B61}
.who-drill{}
.who-drill .who-sub{font-family:var(--ff-serif);font-style:italic;font-size:13px;color:var(--ink-3);margin-bottom:11px}
.who-drill-cap{font-size:8px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin-top:10px}
/* AI drill — green-armed chips */
.who-grid.ai .who-chip.on{background:#275B61;border-color:#275B61;color:#F2F0EB}
@media (max-width:680px){
  .who-tab .wt-l{font-size:12px}
  .who-tab{padding:11px 8px}
}
/* ── end fold 03 who ── */

/* ============================================================
   FOLD 03 — CAPACITY knob+number  &  HOW 8 click-arm knobs
   Additive. Re-skins CapacityInput + HowModelPicker.
   ============================================================ */
/* CAPACITY — knob (bracket sweep) + synced number override */
.inst-cap-mod{background:var(--chassis);border:1px solid var(--rule-4);border-radius:4px;padding:14px;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.05)}
.inst-cap-row{display:flex;align-items:center;gap:18px}
.inst-cap-knob{width:80px;height:80px;border-radius:50%;position:relative;flex-shrink:0;background:radial-gradient(circle at 38% 32%,#3A3A36,#2A2A27 55%,#1A1A16);border:1px solid #0E0E0D;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 4px rgba(0,0,0,.5);cursor:pointer;transition:box-shadow .2s}
.inst-cap-knob:hover{box-shadow:inset 0 1px 2px rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.5),0 0 0 3px rgba(225,120,99,.12)}
.inst-cap-n{position:absolute;top:6px;left:50%;width:3px;height:16px;margin-left:-1.5px;border-radius:2px;background:var(--rule-3);transform-origin:50% 34px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.inst-cap-knob.armed .inst-cap-n{background:#E17863;box-shadow:0 0 6px rgba(225,120,99,.7)}
.inst-cap-read{flex:1;min-width:0}
.inst-cap-val{display:flex;align-items:baseline;gap:8px}
.inst-cap-input{width:110px;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;font-family:var(--ff-mono);font-size:24px;font-weight:700;color:var(--ink);padding:4px 10px;outline:none}
.inst-cap-input::-webkit-outer-spin-button,.inst-cap-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inst-cap-unit{font-size:14px;color:var(--ink-3)}
.inst-cap-bracket{font-size:9px;letter-spacing:.1em;color:#275B61;text-transform:uppercase;margin-top:8px}
.inst-cap-hint{font-size:9px;color:var(--ink-3);margin-top:4px}
.inst-cap-foot{font-size:9px;letter-spacing:.04em;color:var(--ink-3);margin-top:10px}

/* HOW — 8 black knobs, click-arm (auto-rotate + orange) */
.inst-how-mod{background:var(--chassis);border:1px solid var(--rule-4);border-radius:4px;padding:14px;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.05)}
.inst-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.inst-how-knob{appearance:none;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 2px}
.inst-how-dial{width:46px;height:46px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 32%,#3A3A36,#2A2A27 55%,#1A1A16);border:1px solid #0E0E0D;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 3px rgba(0,0,0,.5);transition:box-shadow .2s}
.inst-how-n{position:absolute;top:4px;left:50%;width:2.5px;height:11px;margin-left:-1.25px;border-radius:2px;background:var(--rule-4);transform-origin:50% 19px;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.inst-how-knob.on .inst-how-dial{background:radial-gradient(circle at 38% 32%,#F08E78,#E17863 60%,#C85F49);border-color:#B0503B;box-shadow:inset 0 1px 2px rgba(255,255,255,.25),0 0 8px rgba(225,120,99,.4)}
.inst-how-knob.on .inst-how-n{background:#fff;box-shadow:0 0 4px rgba(255,255,255,.6)}
.inst-how-knob.dim{opacity:.4}
.inst-how-knob.dim .inst-how-dial{cursor:not-allowed}
.inst-how-lbl{font-family:var(--ff-mono);font-size:9px;letter-spacing:.02em;color:var(--ink-3);text-transform:uppercase;text-align:center;line-height:1.25;display:flex;align-items:center;gap:3px}
.inst-how-knob.on .inst-how-lbl{color:var(--ink);font-weight:700}
@media (max-width:680px){
  .inst-cap-row{flex-wrap:wrap}
  .inst-how-grid{grid-template-columns:repeat(4,1fr);gap:10px 5px}
  .inst-how-dial{width:40px;height:40px}
  .inst-how-lbl{font-size:8px}
}
@media (prefers-reduced-motion:reduce){ .inst-cap-n,.inst-how-n{transition:none!important} }
/* ── end fold 03 capacity + how ── */

/* ============================================================
   FOLD 03 WHO drill — Guests=knobs · Operators/AI=sliding switches
   Responsive rows (desktop / iPad / iPhone). Additive.
   ============================================================ */
/* GUESTS — knob grid (reuses inst-how-knob look), 4-up */
.who-knob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.who-knob .inst-how-lbl{font-size:8px}

/* OPERATORS + AI — sliding switches in responsive rows */
.who-switch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.who-switch{appearance:none;cursor:pointer;display:flex;align-items:center;gap:10px;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;padding:9px 11px;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}
.who-switch:hover{background:var(--bone-2)}
.who-switch-track{flex:0 0 auto;width:34px;height:18px;border-radius:10px;background:var(--rule-4);position:relative;transition:background .2s cubic-bezier(.4,0,.2,1)}
.who-switch-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bone);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .2s cubic-bezier(.34,1.4,.64,1)}
.who-switch-lbl{font-size:11px;font-weight:500;color:var(--ink-2);line-height:1.2;display:flex;align-items:center;gap:4px}
/* ON — orange (operators) */
.who-switch.on{border-color:#E17863;background:#FBEEEA}
.who-switch.on .who-switch-track{background:#E17863}
.who-switch.on .who-switch-knob{left:18px}
.who-switch.on .who-switch-lbl{color:var(--ink);font-weight:600}
/* ON — green (AI·Robotics, the differentiator) */
.who-switch-grid.ai .who-switch.on{border-color:#275B61;background:#E9F0EF}
.who-switch-grid.ai .who-switch.on .who-switch-track{background:#275B61}
.who-switch-grid.ai .who-switch.on .who-switch-knob{background:var(--glow);box-shadow:0 0 6px var(--glow)}
.who-switch.dim{opacity:.4}

/* responsive: iPad 3-up switches, iPhone single column + knobs 3-up */
@media (min-width:901px){ .who-switch-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){
  .who-knob-grid{grid-template-columns:repeat(3,1fr)}
  .who-switch-grid{grid-template-columns:1fr}
}
/* ── end fold 03 who drill ── */

/* ============================================================
   FOLD 04 STORY — writing + cipher vault · brain+EQ · driver keys
   Additive. Cipher = visual-only over preserved real text.
   ============================================================ */
.inst-story-mod{background:var(--chassis);border:1px solid var(--rule-4);border-radius:4px;padding:14px;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.05)}
.inst-story .story-hint{font-family:var(--ff-serif);font-size:12px;font-style:italic;color:var(--ink-3);margin-bottom:10px;line-height:1.45}

/* writing + cipher */
.story-vault-wrap{position:relative}
.inst-story-area{width:100%;min-height:140px;background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;padding:14px;font-family:var(--ff-serif);font-size:15px;line-height:1.6;color:var(--ink);resize:vertical;outline:none;transition:border-color .2s;display:block}
.inst-story-area:focus{border-color:var(--ink-3)}
.story-vault-wrap{position:relative}
.inst-cipher{position:absolute;inset:0;z-index:5;background:#E6E3DB;border:1px solid var(--green);border-radius:3px;padding:14px;overflow:hidden;font-family:var(--ff-mono);font-size:14px;line-height:1.6;color:var(--ink-3);white-space:pre-wrap;word-break:break-word}
/* hide the textarea entirely while vaulted so nothing bleeds through */
.story-vault-wrap.is-vaulted .inst-story-area{visibility:hidden}
.inst-cipher-stamp{position:absolute;top:10px;right:10px;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--green);background:var(--bone);border:1px solid var(--green);border-radius:2px;padding:4px 9px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.inst-cipher-stamp::before{content:'';width:6px;height:6px;background:var(--green);border-radius:1px}
.inst-story-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.inst-story-foot .story-counter{font-size:9px;color:var(--ink-3)}
.inst-vault-btn{appearance:none;cursor:pointer;background:var(--ink);border:1px solid var(--ink);border-radius:3px;padding:11px 18px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--bone);text-transform:uppercase}
.inst-vault-btn:disabled{opacity:.3;cursor:not-allowed}
.inst-vaulted-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.inst-vault-tag{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--green);text-transform:uppercase}
.inst-decrypt-btn{appearance:none;cursor:pointer;background:var(--bone);border:1px solid var(--ink);border-radius:3px;padding:9px 16px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink);text-transform:uppercase;margin-left:auto}

/* brain + EQ screen (glows green — the one screen) */
.inst-eq-screen{background:#14201F;border:1px solid #0A1413;border-radius:4px;padding:14px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);display:flex;gap:14px;align-items:stretch}
.inst-brain-box{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding-right:14px;border-right:1px solid rgba(61,214,196,.15)}
.inst-brain-px{width:56px;height:56px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1px}
.inst-brain-px i{background:rgba(61,214,196,.08);border-radius:1px;transition:background .35s,box-shadow .35s}
.inst-brain-px i.lit{background:#3DD6C4;box-shadow:0 0 4px rgba(61,214,196,.6)}
.inst-brain-px i.dim{background:rgba(61,214,196,.3)}
.inst-brain-lbl{font-size:7px;letter-spacing:.12em;color:rgba(61,214,196,.5);text-transform:uppercase}
.inst-brain-think{font-size:7px;color:rgba(61,214,196,.7)}
.inst-eq-bars{flex:1;display:flex;align-items:flex-end;gap:5px;height:78px}
.inst-eq-bar{flex:1;background:linear-gradient(180deg,#3DD6C4,rgba(61,214,196,.3));border-radius:1px 1px 0 0;min-height:3px;transition:height .5s cubic-bezier(.4,0,.2,1)}
.inst-eq-cap{font-size:8px;letter-spacing:.1em;color:rgba(61,214,196,.55);text-transform:uppercase;margin-top:10px;text-align:center}

/* driver keys — big pushable pulse orange */
.inst-story-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inst-story-key{appearance:none;cursor:pointer;background:linear-gradient(180deg,#EDEAE2,#E0DDD4);border:1px solid var(--rule-4);border-radius:4px;padding:16px 12px;font-family:var(--ff-serif);font-size:13px;font-weight:600;color:var(--ink-2);text-align:center;box-shadow:0 2px 0 var(--rule-4),inset 0 1px 0 rgba(255,255,255,.6);transition:all .1s cubic-bezier(.4,0,.2,1);min-height:54px;display:flex;align-items:center;justify-content:center}
.inst-story-key:hover{background:var(--bone-2)}
.inst-story-key:active{transform:translateY(2px);box-shadow:0 0 0 var(--rule-4),inset 0 1px 3px rgba(0,0,0,.15)}
.inst-story-key.on{background:linear-gradient(180deg,#F08E78,#E17863);border-color:#C85F49;color:#fff;box-shadow:0 2px 0 #B0503B,inset 0 1px 0 rgba(255,255,255,.3);animation:keypulse 1.8s ease-in-out infinite}
@keyframes keypulse{0%,100%{box-shadow:0 2px 0 #B0503B,inset 0 1px 0 rgba(255,255,255,.3),0 0 0 rgba(225,120,99,0)}50%{box-shadow:0 2px 0 #B0503B,inset 0 1px 0 rgba(255,255,255,.3),0 0 14px rgba(225,120,99,.55)}}
.inst-story-key.dim{opacity:.4}
.inst-story-keys-cap{font-size:8px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-top:10px}

@media(max-width:680px){
  .inst-story-keys{grid-template-columns:repeat(2,1fr)}
  .inst-eq-screen{flex-direction:column}
  .inst-brain-box{flex-direction:row;border-right:0;border-bottom:1px solid rgba(61,214,196,.15);padding-right:0;padding-bottom:10px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){ .inst-story-key.on{animation:none} .inst-eq-bar{transition:none} .inst-brain-px i{transition:none} }
/* ── end fold 04 story ── */

/* ============================================================
   FOLD 05 ATMOSPHERE — twin protagonist bars + scattered consoles
   Soul/skin consoles flank twin bars. Own words lift both (green).
   Mobile: bars go on top (sticky protagonist), consoles stack below.
   ============================================================ */
.atm{display:grid;grid-template-columns:1fr 270px 1fr;gap:12px;align-items:stretch}
.atm-side{background:var(--chassis);border:1px solid var(--rule-4);border-radius:4px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.atm-side-h{font-size:9px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.atm-side-c{color:var(--green);font-weight:700}
.atm-side-tag{display:inline-block;font-size:8px;letter-spacing:.14em;font-weight:700;color:var(--ink-2);border:1px solid var(--rule-3);border-radius:3px;padding:2px 5px;margin-right:8px;vertical-align:middle}

/* scattered console — controls flow, varied types interspersed */
.atm-console{display:flex;flex-wrap:wrap;gap:10px 9px;align-content:flex-start}
.atm-ctrl{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;cursor:pointer;user-select:none;min-height:62px;width:78px}
.atm-ctrl.dim{opacity:.4;cursor:not-allowed}
.atm-ctrl .atm-lbl{font-family:var(--ff-serif);font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.15;max-width:74px;transition:color .15s}
.atm-ctrl.on .atm-lbl{color:var(--ink);font-weight:600}
.atm-ctrl.own .atm-lbl{color:var(--green)}
/* knob */
.atm-knob{width:38px;height:38px;border-radius:50%;position:relative;flex:0 0 auto;background:radial-gradient(circle at 38% 32%,#3A3A36,#2A2A27 55%,#1A1A16);border:1px solid #0E0E0D;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 3px rgba(0,0,0,.5)}
.atm-knob-n{position:absolute;top:3px;left:50%;width:2px;height:9px;margin-left:-1px;border-radius:1px;background:var(--rule-4);transform-origin:50% 16px;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.atm-ctrl.on .atm-knob{box-shadow:0 0 0 2px #E17863,0 0 10px rgba(225,120,99,.5),inset 0 1px 2px rgba(255,255,255,.08)}
.atm-ctrl.on .atm-knob-n{background:#E17863;box-shadow:0 0 4px rgba(225,120,99,.9);transform:rotate(42deg)}
.atm-ctrl.on.own .atm-knob{box-shadow:0 0 0 2px #275B61,0 0 10px rgba(39,91,97,.5)}
.atm-ctrl.on.own .atm-knob-n{background:var(--glow);box-shadow:0 0 5px rgba(61,214,196,.9)}
/* button */
.atm-btn{width:42px;height:30px;border-radius:4px;background:linear-gradient(180deg,#EDEAE2,#DCD8CF);border:1px solid var(--rule-4);box-shadow:0 2px 0 var(--rule-4);transition:all .1s;flex:0 0 auto}
.atm-ctrl.on .atm-btn{background:linear-gradient(180deg,#F08E78,#E17863);border-color:#C85F49;box-shadow:0 2px 0 #B0503B;animation:atmbpulse 1.8s ease-in-out infinite}
.atm-ctrl.on.own .atm-btn{background:linear-gradient(180deg,#3D9F94,#275B61);border-color:#1d474c;box-shadow:0 2px 0 #16383c;animation:none}
@keyframes atmbpulse{50%{box-shadow:0 2px 0 #B0503B,0 0 12px rgba(225,120,99,.5)}}
/* toggle */
.atm-tog{width:38px;height:20px;border-radius:11px;background:var(--rule-4);position:relative;flex:0 0 auto;transition:background .2s}
.atm-tog::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bone);transition:left .2s cubic-bezier(.34,1.4,.64,1)}
.atm-ctrl.on .atm-tog{background:#E17863;box-shadow:0 0 8px rgba(225,120,99,.45)}
.atm-ctrl.on .atm-tog::after{left:20px}
.atm-ctrl.on.own .atm-tog{background:var(--green)}
/* fader */
.atm-fad{width:46px;height:30px;position:relative;flex:0 0 auto;display:flex;align-items:center}
.atm-fad-rail{position:absolute;left:0;right:0;height:3px;background:var(--rule-3);border-radius:2px}
.atm-fad-cap{position:absolute;left:4px;width:12px;height:20px;border-radius:2px;background:radial-gradient(circle at 40% 30%,#3A3A36,#22221E);border:1px solid #0E0E0D;transition:left .25s cubic-bezier(.34,1.4,.64,1)}
.atm-ctrl.on .atm-fad-cap{left:30px}
.atm-ctrl.on .atm-fad-rail{background:#E17863;height:4px;box-shadow:0 0 6px rgba(225,120,99,.4)}
.atm-ctrl.on.own .atm-fad-rail{background:var(--green)}
.atm-own{margin-top:12px}
.atm-own .own-add.green{background:var(--green)}
.atm-own-note{font-size:8px;color:var(--green);margin-top:5px;letter-spacing:.04em}

/* CENTER — twin protagonist bars */
.atm-core{background:#14201F;border:1px solid #0A1413;border-radius:4px;padding:16px 14px 13px;box-shadow:inset 0 2px 12px rgba(0,0,0,.65);display:flex;flex-direction:column}
.atm-core-h{font-size:8px;letter-spacing:.14em;color:rgba(225,120,99,.65);text-transform:uppercase;margin-bottom:2px;display:flex;justify-content:space-between}
.atm-core-read{font-size:7px;color:rgba(225,120,99,.4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.atm-twin{flex:1;display:flex;gap:14px;align-items:stretch;justify-content:center;min-height:330px;height:330px;padding:4px}
.atm-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;min-height:0}
.atm-col-bar{flex:1;width:100%;min-height:0;display:flex;flex-direction:column;gap:3px;background:rgba(0,0,0,.22);border-radius:3px;padding:4px}
.atm-seg{flex:1 1 0;min-height:4px;background:rgba(225,120,99,.08);border-radius:1px;transition:background .15s,box-shadow .15s}
.atm-seg.lit{background:#E17863 !important;box-shadow:0 0 6px rgba(225,120,99,.55)}
.atm-seg.lit.brave{background:#3DD6C4 !important;box-shadow:0 0 7px rgba(61,214,196,.6)}
.atm-col-num{font-size:15px;font-weight:700;color:var(--orange);text-shadow:0 0 6px rgba(225,120,99,.4)}
.atm-col-num.brave{color:#3DD6C4;text-shadow:0 0 8px rgba(61,214,196,.5)}
.atm-col-cap{font-size:8px;letter-spacing:.12em;color:rgba(225,120,99,.55);text-transform:uppercase}
.atm-core-sig{font-size:8px;letter-spacing:.07em;color:rgba(225,120,99,.6);text-transform:uppercase;text-align:center;margin-top:12px;min-height:11px}

/* ── iPhone / tablet: consoles LEFT (stacked), bars a tall vertical strip RIGHT ──
   Bars stay VERTICAL (rise like gravity — motion doctrine). The screen is
   height-capped to the viewport so it no longer eats the page, and it is NOT
   sticky/z-raised, so it can never occlude the controls (the landscape bug). */
@media (max-width:860px){
  .atm{grid-template-columns:1fr 96px;gap:10px;align-items:start}
  .atm-side{grid-column:1}                              /* both consoles in the left column, stacked */
  .atm-core{grid-column:2;grid-row:1 / span 3;          /* bars occupy the right column, full height of the stack */
            order:0;position:sticky;top:8px;z-index:1;   /* gentle sticky, low z — rides along, never covers */
            align-self:start;padding:12px 8px 10px}
  .atm-twin{height:auto;min-height:0;                    /* kill the fixed 330px that ate the screen */
            max-height:calc(100vh - 220px);
            flex-direction:column;gap:10px}              /* stack the two columns vertically in the narrow strip */
  .atm-col{flex-direction:column;gap:6px}
  .atm-col-bar{flex-direction:column;align-items:stretch;gap:3px;min-height:120px}  /* VERTICAL segments — rise upward */
  .atm-seg{min-height:4px}
  .atm-core-read{display:none}                           /* "TWIN READ · SOUL // SKIN" is redundant in narrow strip */
}
@media (max-width:520px){
  .atm{grid-template-columns:1fr 84px}
  .atm-console{gap:12px 10px;justify-content:flex-start}
  .atm-ctrl .atm-lbl{font-size:10px;max-width:64px}
  .atm-col-bar{min-height:96px}
}
@media (prefers-reduced-motion:reduce){ .atm-seg{transition:none} .atm-ctrl.on .atm-btn{animation:none} }
/* ── end fold 05 atmosphere ── */

/* ============================================================
   DASHBOARD v0.8 — INSTRUMENT GRAMMAR for ALL advanced controls
   Restyles existing classes (sliders→faders, toggle-btns→switches,
   region/currency→switch rows). Orange = armed. Green reserved for
   the total screen ONLY. Presentation-only; handlers untouched.
   ============================================================ */
/* SLIDERS → fader look (region mult, capex scale, footprint) */
.advanced-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--rule-3);border-radius:2px;outline:none;cursor:pointer}
.advanced-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:26px;border-radius:3px;background:radial-gradient(circle at 40% 30%,#3A3A36,#22221E);border:1px solid #0E0E0D;box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:grab}
.advanced-slider::-webkit-slider-thumb:active{cursor:grabbing}
.advanced-slider::-moz-range-thumb{width:16px;height:26px;border-radius:3px;background:radial-gradient(circle at 40% 30%,#3A3A36,#22221E);border:1px solid #0E0E0D;box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:grab}
.advanced-slider::-moz-range-progress{background:var(--orange);height:4px;border-radius:2px}
.advanced-row-val{color:var(--ink);font-weight:700}
.advanced-row-val:not(:empty){transition:color .15s}

/* TOGGLE BUTTONS → switch/pill look (climate flags, design tier, exterior, complexity, phase) */
.advanced-toggle-btn{background:linear-gradient(180deg,#EDEAE2,#E0DDD4);border:1px solid var(--rule-4);border-radius:4px;padding:9px 14px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase;cursor:pointer;transition:all .12s var(--mech);box-shadow:0 2px 0 var(--rule-4),inset 0 1px 0 rgba(255,255,255,.5);position:relative}
.advanced-toggle-btn:hover{background:var(--bone-2)}
.advanced-toggle-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--rule-4),inset 0 1px 3px rgba(0,0,0,.15)}
/* ARMED — lit orange button, pressed-in, with a status dot */
.advanced-toggle-btn.on{background:linear-gradient(180deg,#F08E78,#E17863);border-color:#C85F49;color:#fff;font-weight:600;box-shadow:0 2px 0 #B0503B,inset 0 1px 0 rgba(255,255,255,.25);padding-left:24px}
.advanced-toggle-btn.on::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.8)}

/* REGION TIER buttons → switch row (orange armed, AUTO still green-marked as a state hint) */
.region-btn{background:var(--bone);border:1px solid var(--rule-3);border-radius:3px;transition:all .15s var(--mech);cursor:pointer}
.region-btn.on{background:var(--orange);border-color:#C85F49}
.region-btn.on .rb-code,.region-btn.on .rb-mult{color:#fff}
.region-btn .rb-auto{color:var(--green)}  /* AUTO state hint can stay green — it's a system label, not an armed accent */
.region-btn.on .rb-auto{color:rgba(255,255,255,.85)}

/* CURRENCY toggle → orange armed (NOT green — green reserved for screen) */
.currency-btn{cursor:pointer;transition:all .15s var(--mech)}
.currency-btn.on{background:var(--orange)!important;border-color:#C85F49!important;color:#fff!important}

/* REGION MULTIPLIER as a true knob — opt-in wrapper the wire adds around the first slider */
.adv-knob-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}
.adv-knob{width:60px;height:60px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 32%,#3A3A36,#2A2A27 55%,#1A1A16);border:1px solid #0E0E0D;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 4px rgba(0,0,0,.5);cursor:ns-resize}
.adv-knob .n{position:absolute;top:5px;left:50%;width:3px;height:13px;margin-left:-1.5px;border-radius:2px;background:var(--orange);transform-origin:50% 25px;box-shadow:0 0 5px rgba(225,120,99,.7)}
@media(prefers-reduced-motion:reduce){.advanced-toggle-btn,.advanced-toggle-btn::after,.region-btn,.currency-btn{transition:none}}
/* ── end dashboard v0.8 instrument grammar ── */

/* ── PIXEL FORGE (loading-sequence brain/coin) ── */
.fx-screen{position:relative;width:280px;height:248px;max-width:80vw;background:#14201F;border:1px solid #0A1413;border-radius:6px;box-shadow:inset 0 2px 14px rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto}
.fx-grid{display:grid;gap:3px;width:210px;height:182px}
.fx-px{border-radius:1px;background:rgba(225,120,99,.06);transition:background .12s linear,box-shadow .12s linear}
.fx-px.on{background:var(--orange);box-shadow:0 0 5px rgba(225,120,99,.5)}
.fx-px.hot{background:#F5A78F;box-shadow:0 0 8px rgba(225,120,99,.9)}
.fx-screen.coin .fx-px.on{background:var(--green);box-shadow:0 0 5px rgba(39,91,97,.5)}
.fx-screen.coin .fx-px.hot{background:var(--glow);box-shadow:0 0 9px rgba(61,214,196,.85)}
.fx-corner{position:absolute;font-size:7px;letter-spacing:.1em;color:rgba(225,120,99,.5);text-transform:uppercase}
.fx-corner.tl{top:8px;left:10px}.fx-corner.br{bottom:8px;right:10px}
.fx-screen.coin .fx-corner{color:rgba(61,214,196,.5)}
@media(prefers-reduced-motion:reduce){.fx-px{transition:none}}
/* ── end pixel forge ── */

/* ── BAND 01 protagonist arrival (pure CSS — chips settle in by weight) ── */
.constellation-words span{display:inline-block;animation:cw-settle .5s var(--mech) both}
.constellation-words span:nth-child(1){animation-delay:.05s}
.constellation-words span:nth-child(2){animation-delay:.14s}
.constellation-words span:nth-child(3){animation-delay:.23s}
.constellation-words span:nth-child(4){animation-delay:.32s}
.constellation-words span:nth-child(5){animation-delay:.41s}
.constellation-words span:nth-child(6){animation-delay:.50s}
.constellation-words span:nth-child(n+7){animation-delay:.58s}
@keyframes cw-settle{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* heavier chips land a touch more emphatically */
.constellation-words .cw-3{animation-duration:.62s}
.echo-synth{animation:echo-in .6s var(--mech) both}
@keyframes echo-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.constellation-words span,.echo-synth{animation:none}}
/* ── end band 01 arrival ── */

/* ============================================================
   CALIBRATION + LANGUAGE — mixed instrument grammar (v0.8)
   Budget/Timeline = FADERS · Materials/Atmosphere = SEGMENT buttons
   Language = KNOBS (orange when selected). Green stays on screen only.
   ============================================================ */
/* FADER idiom — the 5 stops become a rail with a sliding cap on the active stop */
.cal-fader .cal-stops{position:relative;background:transparent}
.cal-fader .cal-stops::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:var(--rule-3);border-radius:2px}
.cal-fader .cal-stop{position:relative;z-index:1}
.cal-fader .cal-stop-dot{width:10px;height:10px;border-radius:50%;background:var(--rule-4);transition:all .18s var(--mech)}
.cal-fader .cal-stop.on .cal-stop-dot{width:16px;height:24px;border-radius:3px;background:radial-gradient(circle at 40% 30%,#3A3A36,#22221E);border:1px solid #0E0E0D;box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 7px rgba(225,120,99,.4)}
.cal-fader .cal-stop.center.on .cal-stop-dot{box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* SEGMENT idiom — 5 segmented buttons, armed orange */
.cal-segment .cal-stops{gap:4px}
.cal-segment .cal-stops::before{display:none}
.cal-segment .cal-stop{flex:1;height:26px;border:1px solid var(--rule-3);border-radius:3px;background:var(--bone);transition:all .15s var(--mech)}
.cal-segment .cal-stop-dot{display:none}
.cal-segment .cal-stop.on{background:var(--orange);border-color:#C85F49}
.cal-segment .cal-stop.center{opacity:.7}
.cal-segment .cal-stop.center.on{background:var(--ink-3);border-color:var(--ink-3)}

/* LANGUAGE → knobs, orange when selected */
.lang-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.lang-btn{display:flex!important;flex-direction:column;align-items:center;gap:6px;background:transparent!important;border:0!important;padding:4px!important;cursor:pointer;position:relative;min-width:52px}
.lang-btn::before{content:'';width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#3A3A36,#2A2A27 55%,#1A1A16);border:1px solid #0E0E0D;box-shadow:inset 0 1px 2px rgba(255,255,255,.08),inset 0 -2px 3px rgba(0,0,0,.5);transition:box-shadow .2s}
.lang-btn::after{content:'';position:absolute;top:8px;left:50%;width:2.5px;height:11px;margin-left:-1.25px;border-radius:2px;background:var(--rule-4);transform-origin:50% 14px;transition:all .25s cubic-bezier(.34,1.4,.64,1)}
.lang-btn.on::before{box-shadow:inset 0 1px 2px rgba(255,255,255,.08),0 0 0 2px #E17863,0 0 10px rgba(225,120,99,.5)}
.lang-btn.on::after{background:#E17863;box-shadow:0 0 5px rgba(225,120,99,.9);transform:rotate(40deg)}
/* the label (EN/ES/日本語) sits under the knob */
.lang-btn{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.lang-btn.on{color:var(--ink);font-weight:700}
.lang-btn > *{order:2}
@media(prefers-reduced-motion:reduce){.cal-fader .cal-stop-dot,.lang-btn::after,.lang-btn::before{transition:none}}
/* ── end calibration + language grammar ── */

/* ============================================================
   DASHBOARD BATCH A — green screens (Band 02 bars, Band 03 money)
   Band 03 money = green screen w/ count-up · Band 02 = green animated bars.
   Green lives on SCREENS only (per doctrine). Overrides dashboard.html embedded styles.
   ============================================================ */
/* Band 03 money → green screen readout */
.band-hero-screen{font-family:var(--ff-mono)!important;color:#3DD6C4!important;background:#14201F;border:1px solid #0A1413;border-radius:5px;padding:8px 16px;box-shadow:inset 0 2px 8px rgba(0,0,0,.55);display:inline-flex;align-items:baseline;gap:8px}
.band-hero-screen .band-hero-count{color:#3DD6C4 !important;text-shadow:0 0 10px rgba(61,214,196,.55);font-variant-numeric:tabular-nums;letter-spacing:.01em;font-weight:700}
.band-hero-screen .band-hero-spread{color:rgba(61,214,196,.55)!important}

/* Band 02 spatial → green screen + animated bar composition */
.program-bar-track{background:#14201F!important;border:1px solid #0A1413!important;border-radius:5px!important;padding:6px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.5)!important;overflow:hidden}
.program-seg{transition:flex-basis .6s var(--mech),width .6s var(--mech)!important;animation:seg-grow .7s var(--mech) both}
@keyframes seg-grow{from{flex-grow:0;opacity:.2}to{opacity:1}}
.program-seg .pct{color:var(--glow)!important;text-shadow:0 0 5px rgba(61,214,196,.4)}
.program-seg .name{color:rgba(207,232,228,.85)!important}
/* tint the segments toward the green screen family while keeping their distinction via opacity */
.program-seg{background:rgba(61,214,196,.18)!important}
.program-seg:nth-child(2){background:rgba(61,214,196,.30)!important}
.program-seg:nth-child(3){background:rgba(61,214,196,.44)!important}
.program-seg:nth-child(4){background:rgba(61,214,196,.58)!important}
.program-seg:nth-child(5){background:rgba(61,214,196,.72)!important}
.program-seg:nth-child(n+6){background:rgba(61,214,196,.86)!important}
@media(prefers-reduced-motion:reduce){.program-seg{animation:none;transition:none!important}.band-hero-count{}}
/* ── end dashboard batch A ── */