/* ============================================================================================
   Dominion Works (IDE mode). Phase 1: the toggle and the third reveal.
   SOW docs/IDE-MODE-ROADMAP.md · build pack docs/IDE-MODE-BUILD.md

   MOTION (Fred's ruling 2026-07-19): a stage lift. Left belongs to the Forge dial, right to Forge
   Images, so the works travel VERTICALLY. The shell lifts away through the top and the works rise
   from below into its place: one continuous upward travel, the way a theater stage lift or a tool
   magazine changes a set. Same 0.45s cubic-bezier(0.32,0.72,0.28,1) as the other two reveals so
   all three feel like one machine.

   The transform context on the shell exists ONLY while .ide-anim is on, because a transformed
   ancestor breaks position:fixed for its descendants (the same reason the dial and Forge Images
   scope theirs). #ide-root therefore lives at BODY level, never inside #neural-glass.
   ============================================================================================ */

/* Hidden until the reveal is armed; without this the panel would eat clicks while off-screen. */
body:not(.ide-anim) #ide-root { display: none; }

body.ide-anim #sidebar,
body.ide-anim #commandbar,
body.ide-anim #neural-glass,
body.ide-anim #overlay {
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0.28, 1);
  will-change: transform;
}
body.ide-open #sidebar,
body.ide-open #commandbar,
body.ide-open #neural-glass,
body.ide-open #overlay {
  transform: translateY(-112vh);
  pointer-events: none;
}

#ide-root {
  position: fixed;
  inset: 0;
  z-index: 70;
  transform: translateY(104vh);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0.28, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(118, 255, 104, .05), transparent 60%),
    linear-gradient(180deg, var(--abyss) 0%, var(--void) 55%, #000 100%);
  color: var(--ink);
  overflow: hidden;
}
body.ide-open #ide-root { transform: none; }

/* Machined deck plate: the works sit on a surface with mass, not on a flat page. */
#ide-root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(157, 218, 255, .035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(157, 218, 255, .028) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  opacity: .7;
}
/* Energy seam along the lift line: the works arrive lit from the seam they rose through. */
#ide-root::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(118, 255, 104, .5), transparent);
  box-shadow: 0 0 18px rgba(118, 255, 104, .35);
  opacity: .55;
}

/* ---------- command rail (back / title / close) ---------------------------------------- */
.ide-rail {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(10, 27, 45, .82), rgba(3, 8, 18, .5));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(225, 247, 255, .1);
  backdrop-filter: blur(14px) saturate(1.15);
}
.ide-rail-btn {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px;
  cursor: pointer;
  color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(14, 33, 54, .9), rgba(4, 11, 20, .95));
  box-shadow:
    inset 0 1px 0 rgba(225, 247, 255, .16),
    inset 0 -2px 6px rgba(0, 0, 0, .6),
    0 6px 16px rgba(0, 0, 0, .5);
  transition: transform .12s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ide-rail-btn:hover { color: var(--copper-hot); border-color: rgba(185, 107, 50, .55); }
.ide-rail-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7); }
.ide-rail-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }

/* "Change level": reopens the Welcome Screen from every surface, keeping its promise. */
.ide-rail-level {
  flex: 0 0 auto;
  height: 42px; padding: 0 13px;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-soft);
  border: 1px solid rgba(185, 107, 50, .3); border-radius: 11px;
  background: rgba(10, 16, 22, .55);
}
.ide-rail-level:hover { color: var(--copper-hot); border-color: rgba(185, 107, 50, .55); }
.ide-rail-level:active { transform: translateY(1px); }

.ide-rail-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.ide-rail-title .t {
  font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(131, 221, 255, .28);
}
.ide-rail-title .s {
  font-size: 11px; letter-spacing: .1em; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Live state lamp: green is energy and state, never decoration. */
.ide-lamp {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(10, 27, 45, .8), rgba(3, 9, 17, .9));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .12), inset 0 -2px 6px rgba(0, 0, 0, .5);
}
.ide-lamp i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--energy);
  box-shadow: 0 0 10px var(--energy), 0 0 22px rgba(118, 255, 104, .55);
}
.ide-lamp[data-state="idle"] i { background: var(--muted); box-shadow: none; }

/* ---------- stage --------------------------------------------------------------------- */
.ide-stage {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  /* Vertical scroll only. The stage lives in a fixed full-viewport panel, so ANY child that
     sizes to its content past the screen turns the whole surface into a horizontal pan, which is
     exactly what a phone user reported: the page loading with a slice of itself off screen. */
  overflow-y: auto;
  overflow-x: clip;
  display: grid;
  /* start, not center: centering pushed the TOP of any taller-than-screen section off the
     viewport, so every page appeared to load halfway down (Fred's phone, layout pass 07-23).
     Content now always loads with its top at the top; short content simply leaves room below. */
  place-items: start center;
  padding: 18px 22px 48px;
}
.ide-empty { max-width: 640px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.ide-empty-core {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 22px;
  border: 1px solid rgba(185, 107, 50, .38);
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(185, 107, 50, .22), transparent 70%),
    linear-gradient(180deg, rgba(14, 33, 54, .92), rgba(3, 10, 19, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 193, 138, .3),
    inset 0 -4px 12px rgba(0, 0, 0, .7),
    0 16px 40px rgba(0, 0, 0, .6);
}
.ide-empty-core svg { width: 40px; height: 40px; fill: none; stroke: var(--copper-hot);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ide-empty h2 {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.ide-empty p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.ide-empty .note {
  font-size: 12px; color: var(--muted); letter-spacing: .04em;
  border-top: 1px solid var(--glass-line); padding-top: 14px; max-width: 520px;
}

/* ---------- drawer toggle row --------------------------------------------------------- */
/* Hidden by default: guests never see it until the server says ideMode is allowed (Phase 8). */
#sb-ide { display: none; }
#sb-ide.on { display: flex; }
#sb-ide {
  width: 100%;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  border-radius: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(11, 28, 46, .8), rgba(3, 10, 19, .92));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .1), inset 0 -2px 7px rgba(0, 0, 0, .55);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
  font: inherit;
}
#sb-ide:hover { color: var(--ink); border-color: rgba(185, 107, 50, .5); }
#sb-ide .ide-row-glyph { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#sb-ide .ide-row-label { flex: 1 1 auto; font-size: 13px; letter-spacing: .05em; }
/* The switch reads as a physical throw, seated in a recessed cavity. */
#sb-ide .ide-switch {
  flex: 0 0 auto;
  width: 40px; height: 22px;
  border-radius: 999px;
  position: relative;
  border: 1px solid rgba(157, 218, 255, .22);
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(6, 17, 29, .9));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
  transition: border-color .2s ease, background .2s ease;
}
#sb-ide .ide-switch::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(180deg, #d8e6f2, #8fa6b8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.28, 1), background 0.2s ease;
}
#sb-ide[aria-pressed="true"] { color: var(--ink); border-color: rgba(118, 255, 104, .34); }
#sb-ide[aria-pressed="true"] .ide-switch {
  border-color: rgba(118, 255, 104, .5);
  background: linear-gradient(180deg, rgba(24, 62, 30, .95), rgba(8, 26, 12, .95));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 14px rgba(118, 255, 104, .28);
}
#sb-ide[aria-pressed="true"] .ide-switch::after {
  transform: translateX(18px);
  background: linear-gradient(180deg, var(--energy-hot), var(--energy));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7), 0 0 12px rgba(118, 255, 104, .8);
}

/* ---------- composer trigger ---------------------------------------------------------- */
#ide-trigger { display: none; }
#ide-trigger.on { display: grid; }
#ide-trigger {
  width: 38px; height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  cursor: pointer;
  color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(13, 31, 51, .9), rgba(4, 11, 20, .95));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .14), inset 0 -2px 6px rgba(0, 0, 0, .6);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
#ide-trigger:hover { color: var(--copper-hot); border-color: rgba(185, 107, 50, .55); }
#ide-trigger:active { transform: translateY(1px); }
#ide-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
#ide-trigger[data-ide="on"] {
  color: var(--energy-hot);
  border-color: rgba(118, 255, 104, .45);
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .14), 0 0 14px rgba(118, 255, 104, .3);
}

@media (max-width: 720px) {
  .ide-rail { padding: 11px 13px; gap: 10px; }
  .ide-rail-title .t { font-size: 13px; letter-spacing: .12em; }
  .ide-rail-title .s { display: none; }
  .ide-lamp { padding: 6px 10px 6px 9px; font-size: 10px; }
  .ide-stage { padding: 24px 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ide-anim #sidebar,
  body.ide-anim #commandbar,
  body.ide-anim #neural-glass,
  body.ide-anim #overlay,
  #ide-root,
  #sb-ide .ide-switch::after { transition: none; }
}

/* ---------- Assignment Board (Phase 3) ------------------------------------------------ */
/* One card per kind of work. You set these once and stop thinking about models. */
.ide-board { width: 100%; max-width: 940px; display: grid; gap: 16px; }
.ide-board-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ide-board-head h2 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.ide-board-head p { margin: 0; font-size: 12.5px; color: var(--muted); flex: 1 1 240px; }

/* All-In-One: the escape hatch for people who never want to think about this. */
.ide-allinone {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(11, 28, 46, .8), rgba(3, 10, 19, .92));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .1), inset 0 -2px 7px rgba(0, 0, 0, .55);
}
.ide-allinone .lbl { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .05em; }
.ide-allinone .hint { font-size: 11.5px; color: var(--muted); margin-left: auto; }

.ide-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.ide-card {
  display: grid; gap: 9px;
  padding: 15px 16px 16px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background:
    radial-gradient(90% 70% at 50% -20%, rgba(157, 218, 255, .05), transparent 65%),
    linear-gradient(180deg, rgba(12, 30, 49, .86), rgba(3, 10, 19, .95));
  box-shadow:
    inset 0 1px 0 rgba(225, 247, 255, .12),
    inset 0 -3px 10px rgba(0, 0, 0, .6),
    0 12px 30px rgba(0, 0, 0, .5);
}
.ide-card.is-image { border-color: rgba(185, 107, 50, .4); }
.ide-card-top { display: flex; align-items: baseline; gap: 9px; }
.ide-card-top .name {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.ide-card-top .tag {
  margin-left: auto; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ide-card .blurb { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); min-height: 2.6em; }
.ide-card select {
  width: 100%; font: inherit; font-size: 13px;
  padding: 10px 11px; border-radius: 10px; cursor: pointer;
  color: var(--ink);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(6, 17, 29, .95), rgba(2, 8, 15, .98));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
.ide-card select:focus-visible { outline: 2px solid rgba(118, 255, 104, .5); outline-offset: 1px; }
.ide-card select:disabled { cursor: not-allowed; color: var(--muted); }
.ide-card .price { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; min-height: 1.2em; }
/* The image engine is named DOMINION FORGE and never by a provider model name. */
.ide-card .engine-cell {
  padding: 10px 11px; border-radius: 10px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper-hot);
  border: 1px solid rgba(185, 107, 50, .42);
  background: linear-gradient(180deg, rgba(43, 21, 10, .8), rgba(12, 6, 3, .92));
  box-shadow: inset 0 1px 0 rgba(255, 193, 138, .22), inset 0 -2px 8px rgba(0, 0, 0, .65);
}

/* Route preview: type what you want, see where it would go and why, before spending anything. */
.ide-probe { display: grid; gap: 10px; }
.ide-probe input {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 12px 13px; border-radius: 11px;
  color: var(--ink);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(6, 17, 29, .95), rgba(2, 8, 15, .98));
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.ide-probe input::placeholder { color: var(--muted); }
.ide-probe input:focus-visible { outline: 2px solid rgba(118, 255, 104, .45); outline-offset: 1px; }
.ide-verdict {
  display: none; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 11px;
  font-size: 12.5px; color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(10, 27, 45, .7), rgba(3, 9, 17, .88));
}
.ide-verdict.on { display: flex; }
.ide-verdict .cls {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--energy);
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(118, 255, 104, .35);
  background: rgba(9, 32, 14, .7);
}
.ide-verdict .to { color: var(--ink); font-weight: 600; }
.ide-verdict .why { color: var(--muted); flex: 1 1 100%; }

@media (max-width: 720px) {
  .ide-cards { grid-template-columns: 1fr; }
  .ide-board-head p { flex-basis: 100%; }
}

/* ---------- status rail (Phase 4) ----------------------------------------------------- */
/* Lives in the command bar and stays visible on the CHAT surface, because a build you cannot
   see is a build you will assume died. Tap it to jump back into the works. */
#ide-rail { display: none; }
#ide-rail.on { display: inline-flex; }
#ide-rail {
  align-items: center; gap: 9px;
  padding: 7px 13px 7px 10px;
  margin-left: 6px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit; font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(10, 27, 45, .85), rgba(3, 9, 17, .92));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .12), inset 0 -2px 6px rgba(0, 0, 0, .5);
  transition: border-color .2s ease, color .2s ease;
}
#ide-rail:hover { color: var(--ink); border-color: rgba(118, 255, 104, .4); }
#ide-rail .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--energy); box-shadow: 0 0 10px var(--energy);
  animation: ide-pulse 1.8s ease-in-out infinite;
}
/* Waiting is NOT running: a frozen build gets a steady copper lamp, never a pulsing green one,
   because a spinner would imply it is burning tokens while it sits there. */
#ide-rail[data-state="waiting"] .dot { background: var(--copper-hot); box-shadow: 0 0 10px var(--copper-hot); animation: none; }
#ide-rail[data-state="waiting"] { border-color: rgba(185, 107, 50, .5); color: var(--copper-hot); }
#ide-rail[data-state="idle"] .dot { background: var(--muted); box-shadow: none; animation: none; }
@keyframes ide-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #ide-rail .dot { animation: none; } }
#ide-rail .count { color: var(--muted); }

/* ---------- the question card: a frozen build asking for a human ---------------------- */
.ide-ask {
  width: 100%; max-width: 620px;
  display: grid; gap: 14px;
  padding: 20px 20px 18px;
  border-radius: 16px;
  border: 2px solid rgba(212, 130, 60, .8);
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(185, 107, 50, .14), transparent 65%),
    linear-gradient(180deg, rgba(16, 34, 54, .92), rgba(3, 10, 19, .96));
  box-shadow: inset 0 1px 0 rgba(255, 193, 138, .22), 0 0 30px rgba(212, 130, 60, .35), 0 18px 44px rgba(0, 0, 0, .6);
}
.ide-ask h3 {
  margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-hot);
}
.ide-ask .q { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.ide-ask .opts { display: flex; flex-wrap: wrap; gap: 9px; }
.ide-ask button {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 10px 15px; border-radius: 10px;
  color: var(--ink);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(14, 33, 54, .92), rgba(4, 11, 20, .96));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .14), inset 0 -2px 6px rgba(0, 0, 0, .55);
  transition: border-color .16s ease, color .16s ease, transform .12s ease;
}
.ide-ask button:hover { border-color: rgba(118, 255, 104, .45); color: var(--energy-hot); }
.ide-ask button:active { transform: translateY(1px); }
.ide-ask .free { display: flex; gap: 9px; }
.ide-ask input {
  flex: 1 1 auto; font: inherit; font-size: 13.5px;
  padding: 11px 12px; border-radius: 10px; color: var(--ink);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(6, 17, 29, .95), rgba(2, 8, 15, .98));
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.ide-ask .cost-note { font-size: 11.5px; color: var(--muted); }

/* ---------- assignment presets --------------------------------------------------------- */
.ide-presets { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.ide-preset {
  display: grid; gap: 5px; text-align: left;
  padding: 13px 15px; border-radius: 12px; cursor: pointer; font: inherit;
  color: var(--ink-soft);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(12, 30, 49, .82), rgba(3, 10, 19, .93));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .1), inset 0 -2px 8px rgba(0, 0, 0, .55);
  transition: border-color .18s ease, color .18s ease, transform .12s ease;
}
.ide-preset:hover { border-color: rgba(185, 107, 50, .55); color: var(--ink); }
.ide-preset:active { transform: translateY(1px); }
.ide-preset .p-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.ide-preset .p-blurb { font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* ---------- the front door: start a build ---------------------------------------------- */
.ide-start { display: grid; gap: 11px; margin: 0 0 22px; }
.ide-start h3 {
  margin: 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-hot, #d4823c);
}
.ide-start .st-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ide-start select, .ide-start input, .ide-start textarea {
  font: inherit; font-size: 13.5px; color: var(--ink, #e8f6ff);
  padding: 11px 12px; border-radius: 3px;
  border: 1px solid var(--glass-line, rgba(150, 200, 230, .2));
  background: linear-gradient(180deg, rgba(4, 13, 22, .92), rgba(2, 8, 14, .96));
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.ide-start select { flex: 1 1 260px; min-width: 0; }
#st-ws {
  min-height: 44px;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 6l3 3 3-3" stroke="rgba(150,200,230,.5)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 36px;
}
.ide-start textarea { width: 100%; resize: vertical; min-height: 66px; line-height: 1.55; }
.ide-start textarea::placeholder, .ide-start input::placeholder { color: #667784; }
.ide-start .st-new { display: grid; gap: 8px; grid-template-columns: 2fr 1fr auto; }
.ide-start button {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 10px 15px; border-radius: 3px; color: var(--ink-soft, #b9d3e4);
  border: 1px solid var(--glass-line, rgba(150, 200, 230, .2));
  background: linear-gradient(180deg, rgba(14, 33, 54, .92), rgba(4, 11, 20, .96));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .12), inset 0 -2px 6px rgba(0, 0, 0, .55);
  transition: border-color .16s ease, color .16s ease, transform .12s ease;
}
.ide-start button:hover { border-color: rgba(118, 255, 104, .4); color: var(--ink, #e8f6ff); }
.ide-start button:active { transform: translateY(1px); }
.ide-start button:disabled { opacity: .5; cursor: default; }
.ide-start .st-primary {
  color: #eafff0; border-color: rgba(157, 255, 146, .5);
  background: linear-gradient(145deg, rgba(38, 118, 44, .85), rgba(3, 30, 16, .95));
  box-shadow: 0 0 16px rgba(100, 255, 90, .18), inset 0 1px 0 rgba(226, 255, 221, .25);
}
.ide-start .st-status { font-size: 12.5px; color: var(--muted, #8ba0ae); }
.ide-start .st-status.bad { color: #ff8b81; }
@media (max-width: 620px) {
  .ide-start .st-new { grid-template-columns: 1fr; }
}

/* the stop control in the lens header */
#cru-stop {
  font: inherit; font-size: 11.5px; letter-spacing: .08em; cursor: pointer;
  padding: 8px 13px; border-radius: 3px;
  color: #ffb3ab; border: 1px solid rgba(226, 84, 74, .45);
  background: linear-gradient(180deg, rgba(66, 16, 12, .8), rgba(16, 4, 3, .92));
}
#cru-stop:hover { color: #ffd7d3; border-color: rgba(255, 139, 129, .6); }
#cru-stop:disabled { opacity: .5; }

/* progress flame: animated visual feedback during work */
#ide-flame {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px);
  z-index: 350; max-width: 320px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid rgba(185, 107, 50, .4);
  background: radial-gradient(90% 70% at 50% 0%, rgba(185, 107, 50, .12), transparent 70%),
    linear-gradient(180deg, rgba(16, 32, 50, .95), rgba(5, 12, 22, .98));
  box-shadow: inset 0 1px 0 rgba(255, 193, 138, .18), 0 12px 32px rgba(0, 0, 0, .7);
  display: grid; gap: 8px; align-items: center; grid-template-columns: auto 1fr auto;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0.28, 1);
}
#ide-flame.on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* The KITT scanner (Fred, 2026-07-29): a neon-green light sweeping back and forth in a black
   housing, Knight-Rider style. Green + moving means "actively working, burning tokens now" —
   the same rule the rail badge already keeps (see the "waiting is not running" note above), so
   this widget must only ever be shown/hidden bracketing real in-flight work, never a paused wait. */
#ide-flame .if-inner { width: 52px; height: 32px; position: relative; display: grid; place-items: center; }
#ide-flame .if-scanner {
  width: 48px; height: 12px; border-radius: 6px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #051a0c, #0a2613);
  border: 1px solid rgba(121, 255, 82, .3);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7), inset 0 0 8px rgba(121, 255, 82, .08);
}
#ide-flame .if-scanner::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(121, 255, 82, .08) 0 2px, transparent 2px 8px);
}
#ide-flame .if-led {
  position: absolute; top: 2px; bottom: 2px; width: 15px; border-radius: 4px;
  background: radial-gradient(circle, #d4ffc4 0%, #79ff52 45%, #1c8f3c 100%);
  box-shadow: 0 0 6px 2px rgba(121, 255, 82, .95), 0 0 18px 7px rgba(121, 255, 82, .55);
  animation: ide-kitt-scan 1.15s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
#ide-flame .if-label { font-weight: 700; font-size: 13px; color: var(--lime-hot, #d4ffc4); white-space: nowrap; }
#ide-flame .if-timer { font-size: 12px; color: var(--muted, #8ba0ae); letter-spacing: .05em; min-width: 40px; text-align: right; }
@keyframes ide-kitt-scan {
  0%, 100% { left: 2px; }
  50% { left: calc(100% - 17px); }
}
@media (prefers-reduced-motion: reduce) {
  #ide-flame .if-led { animation: ide-kitt-glow 1.8s ease-in-out infinite; left: 2px; }
}
@keyframes ide-kitt-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* ---------- the intro card and the language picker ------------------------------------- */
.ide-intro {
  display: grid; gap: 11px; margin: 0 0 20px;
  padding: 17px 19px; border-radius: 3px;
  border: 1px solid rgba(185, 107, 50, .45);
  border-left: 3px solid var(--copper-hot, #d4823c);
  background: linear-gradient(180deg, rgba(34, 20, 9, .82), rgba(8, 5, 2, .94));
}
.ide-intro h3 { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-hot, #d4823c); }
.ide-intro p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft, #d9c9b8); max-width: 68ch; }
.ide-intro button { justify-self: start; font: inherit; font-size: 12.5px; cursor: pointer; padding: 9px 16px; border-radius: 3px;
  color: var(--ink, #e8f6ff); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(14,33,54,.92), rgba(4,11,20,.96)); }
.ide-intro button:hover { border-color: rgba(118, 255, 104, .4); }

.ide-start .st-lang { gap: 10px; }
.ide-start .st-lang-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8ba0ae); }
.ide-start #st-lang { flex: 0 1 auto; font-size: 12.5px; padding: 8px 10px; }

/* ---------- phone-width honesty ----------------------------------------------------------
 * A grid's lone auto column happily sizes to a row's UNWRAPPED content (the language row's label
 * plus its select measured 461px on a 412px phone), and every ancestor then inherits the lie.
 * minmax(0, 1fr) forces the column to the container, and min-width: 0 lets flex children
 * actually shrink instead of asserting their content width. */
.ide-stage > * { max-width: 100%; min-width: 0; }
#ide-start { grid-template-columns: minmax(0, 1fr); }
.ide-start .st-row { min-width: 0; }
.ide-start .st-row > * { min-width: 0; max-width: 100%; }
.ide-start select, .ide-start input, .ide-start textarea { max-width: 100%; }
.ide-board, .ide-intro { grid-template-columns: minmax(0, 1fr); }

/* The All-In-One row was the second widener: a select's intrinsic width is its LONGEST option
   (model name + price = 336px), and the hint span then rides out to 504 on a 412 phone. Let the
   row wrap and the select shrink; the option text ellipsizes inside the closed control. */
.ide-allinone { flex-wrap: wrap; min-width: 0; }
.ide-allinone select { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.ide-allinone .hint { flex: 1 1 100%; }

/* ---------- the folder picker (2026-07-21) ------------------------------------------------
 * The build machine lists its own folders; the phone taps through them. Same glass as the rest
 * of the front door, and every row is a full-width touch target. */
.ide-start .st-new-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.st-tree { display: grid; gap: 2px; margin-top: 6px; padding: 8px; border-radius: 4px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(6,16,28,.9), rgba(2,7,14,.95));
  max-height: 44vh; overflow-y: auto; overflow-x: clip; }
.st-tree .tr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px;
  border-bottom: 1px solid var(--glass-line, rgba(150,200,230,.14)); margin-bottom: 4px; }
.st-tree .tr-where { flex: 1 1 100%; font-size: 11px; color: var(--muted, #8ba0ae);
  letter-spacing: .04em; word-break: break-all; }
.st-tree .tr-up, .st-tree .tr-use { font: inherit; font-size: 12px; cursor: pointer; padding: 7px 12px;
  border-radius: 3px; color: var(--ink-soft, #d9c9b8); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(14,33,54,.9), rgba(4,11,20,.95)); }
.st-tree .tr-use { color: var(--ink, #e8f6ff); border-color: rgba(185, 107, 50, .5); }
.st-tree .tr-use:hover { border-color: rgba(118, 255, 104, .45); }
.st-tree .tr-dir { font: inherit; font-size: 13px; text-align: left; cursor: pointer; padding: 9px 10px;
  border-radius: 3px; border: 1px solid transparent; color: var(--ink-soft, #cfe4f2); background: transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-tree .tr-dir::before { content: "\25B8  "; color: var(--copper-hot, #d4823c); }
.st-tree .tr-dir:hover { border-color: var(--glass-line, rgba(150,200,230,.2)); background: rgba(14,33,54,.6); }
.st-tree .tr-empty { padding: 10px; font-size: 12.5px; color: var(--muted, #8ba0ae); }
/* Which computer a drive belongs to. Only drawn at the root listing, where the same letter can
   appear once per machine and picking blind used to send a build to the wrong box. */
.st-tree .tr-machine { margin-left: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--copper-hot, #d4823c); border: 1px solid rgba(185, 107, 50, .35); border-radius: 2px;
  padding: 1px 5px; vertical-align: middle; }

/* ---------- Adopt Existing Project (Engineer placement, docs/ADOPT-EXISTING-SOW.md) --------
 * Lives in the folder drawer because the folder IS the input. Copper-lit like the vibe door. */
.st-adopt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--glass-line, rgba(150,200,230,.14)); }
.st-adopt-row #st-adopt { font: inherit; font-size: 12.5px; letter-spacing: .04em; cursor: pointer;
  padding: 9px 14px; border-radius: 4px; color: var(--ink, #e8f6ff);
  border: 1px solid rgba(212, 130, 60, .6);
  background: linear-gradient(180deg, rgba(14,33,54,.9), rgba(4,11,20,.95));
  box-shadow: inset 0 0 12px rgba(212, 130, 60, .12); }
.st-adopt-row #st-adopt:hover { border-color: var(--copper-hot, #d4823c);
  box-shadow: inset 0 0 18px rgba(212, 130, 60, .2); }
.st-adopt-row #st-adopt:disabled { opacity: .55; cursor: default; }
.st-adopt-note { flex: 1 1 260px; min-width: 0; font-size: 11.5px; line-height: 1.45;
  color: var(--muted, #8ba0ae); }

/* ---------- tools choice ------------------------------------------------------------------
 * The Assignment Board is expert furniture: hidden until Customize. The recommended answer is
 * one glowing tap. */
.st-tools { display: grid; gap: 8px; min-width: 0; }
.st-tools-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8ba0ae); }
.st-tools-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.st-tools-btns button { font: inherit; font-size: 12.5px; cursor: pointer; padding: 9px 14px; border-radius: 3px;
  color: var(--ink-soft, #d9c9b8); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(10,27,45,.85), rgba(3,9,17,.92)); min-width: 0; }
.st-tools-btns button.on { color: var(--ink, #e8f6ff); border-color: rgba(118, 255, 104, .45);
  box-shadow: 0 0 14px rgba(118, 255, 104, .18), inset 0 1px 0 rgba(225,247,255,.12); }

/* ============================================================================================
   DOMINE: the Crucible's reading face (Fred's ruling 2026-07-24, for all three profiles).

   WHY SELF-HOSTED AND NOT GOOGLE'S CDN. Three reasons, in order of weight. This app is an
   installable PWA with a service worker, and a font fetched from a third party is a font that is
   missing the moment the network is: the two files below sit in the SW shell, so the conversation
   reads correctly offline. Second, every visit to a Google font URL tells Google who is using
   Dominion and when, which is not a thing to hand over for a typeface. Third, it is 43kB total for
   the whole 400-to-700 weight range, so there is nothing to gain by outsourcing it.

   Domine is licensed under the SIL Open Font License 1.1 (Impallari Type), which permits
   redistribution with the license alongside; the license text ships next to the files at
   /assets/fonts/Domine-OFL.txt.

   ONE FAMILY, TWO FILES: the latin subset covers ordinary English, and latin-ext carries the
   accents. Both declare `font-weight: 400 700` because this is a VARIABLE font, so bold in a chat
   bubble is a real weight axis rather than a browser's synthetic smear. font-display: swap means
   the text appears immediately in the fallback and swaps when the file lands, which is the right
   trade for a conversation: never a blank bubble.
   ============================================================================================ */
@font-face {
  font-family: "Domine";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/domine-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Domine";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/domine-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* The Crucible's chat reads in Domine in EVERY profile. Deliberately scoped to the conversation
   (bubbles, what is typed, the agreed-vision card) and not to the surrounding machinery: labels,
   drawer summaries, model rows and the mono readouts keep the console face, because a serif in a
   9px uppercase tracking-heavy label is a legibility loss, not a gain. */
#ide-root {
  --font-chat: "Domine", Georgia, "Times New Roman", serif;
}
.st-chat-log .cb,
.st-chat-log .cb-vision div,
.st-chat-row textarea {
  font-family: var(--font-chat);
}

/* ---------- the intake conversation -------------------------------------------------------
 * A small chat that earns its keep before money moves. Minimized, it folds to just its head. */
.st-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; padding: 10px; border-radius: 4px;
  border: 1px solid rgba(185, 107, 50, .35);
  background: radial-gradient(80% 60% at 50% 0%, rgba(185,107,50,.10), transparent 70%),
    linear-gradient(180deg, rgba(8,20,34,.92), rgba(2,7,14,.96));
  box-shadow: inset 0 1px 0 rgba(255,193,138,.18), 0 10px 28px rgba(0,0,0,.5); }
.st-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-chat-head-btns { display: flex; align-items: center; gap: 6px; }
#st-fresh { color: var(--copper-hot, #d4823c); border-color: rgba(185, 107, 50, .35); }
.st-chat-head span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-hot, #d4823c); }
.st-chat-head button { font: inherit; font-size: 11.5px; cursor: pointer; padding: 5px 10px; border-radius: 3px;
  color: var(--muted, #8ba0ae); border: 1px solid var(--glass-line, rgba(150,200,230,.16)); background: transparent; }
.st-chat.min .st-chat-log, .st-chat.min .st-chat-row, .st-chat.min .st-chat-actions, .st-chat.min .st-link { display: none; }
/* Blueprints: the ready-made-plan picker. Borrows the chat panel's copper frame so it reads as part
   of the same surface rather than a modal bolted on, and caps its own height so a 49-entry list
   scrolls inside the panel instead of pushing BEGIN BUILDING off the screen. */
.st-chat.min .st-bp { display: none; }
.st-bp { display: grid; gap: 10px; padding: 10px; border-radius: 4px; min-width: 0;
  border: 1px solid rgba(185, 107, 50, .35); background: rgba(6, 16, 28, .92); }
.st-bp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-bp-head h4 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper-hot, #d4823c); }
.st-bp-head button { font: inherit; font-size: 11.5px; cursor: pointer; padding: 5px 10px; border-radius: 3px;
  color: var(--muted, #8ba0ae); border: 1px solid var(--glass-line, rgba(150,200,230,.16)); background: transparent; }
.st-bp-sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted, #8ba0ae); }
.st-bp-body { display: grid; gap: 12px; max-height: 46vh; overflow-y: auto; overflow-x: clip; min-width: 0; }
.st-bp-group { display: grid; gap: 6px; min-width: 0; }
.st-bp-group h5 { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #8ba0ae); }
.st-bp-card { display: grid; gap: 3px; text-align: left; width: 100%; min-width: 0; cursor: pointer;
  font: inherit; padding: 9px 11px; border-radius: 4px; color: var(--ink, #e8f6ff);
  border: 1px solid var(--glass-line, rgba(150,200,230,.18)); background: rgba(10, 27, 45, .6); }
.st-bp-card:hover, .st-bp-card:focus-visible { border-color: rgba(185, 107, 50, .55); background: rgba(18, 38, 58, .7); }
.st-bp-card strong { font-size: 13.5px; font-weight: 600; }
.st-bp-sum { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft, #d9c9b8); overflow-wrap: anywhere; }
.st-bp-meta { font-size: 11.5px; color: var(--muted, #8ba0ae); }
.st-bp-back { justify-self: start; }
.st-bp-detail-head h5 { margin: 0 0 4px; font-size: 15px; color: var(--ink, #e8f6ff); }
.st-bp-detail-head p { margin: 0; }
/* The approval promise is copper, the one accent this surface reserves for things that cost or
   commit, so it does not read as one more grey line of metadata. */
.st-bp-gate { margin: 8px 0 0 !important; font-size: 12.5px; color: var(--copper-hot, #d4823c); }
.st-bp-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 5px; }
.st-bp-steps li { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft, #d9c9b8); overflow-wrap: anywhere; }
.st-bp-steps li.is-gate { color: var(--copper-hot, #d4823c); }
.st-bp-facts { display: grid; gap: 10px; margin-top: 12px; }
.st-bp-facts h6 { margin: 0 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #8ba0ae); }
.st-bp-facts ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.st-bp-facts li { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft, #d9c9b8); overflow-wrap: anywhere; }
.st-bp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.st-bp-actions button { font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 14px; border-radius: 3px;
  color: var(--ink, #e8f6ff); border: 1px solid var(--glass-line, rgba(150,200,230,.18)); background: rgba(10, 27, 45, .6); }
.st-bp-actions .st-primary { border-color: rgba(185, 107, 50, .55); background: rgba(46, 24, 10, .7);
  color: var(--copper-hot, #d4823c); }
@media (max-width: 600px) { .st-bp-body { max-height: 60vh; } .st-bp-actions button { flex: 1 1 100%; } }
.st-chat-log { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-height: 40vh; overflow-y: auto; overflow-x: clip; min-width: 0; }
.st-chat-log .cb { padding: 9px 12px; border-radius: 4px; font-size: 13.5px; line-height: 1.6;
  max-width: 92%; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.st-chat-log .cb-user { justify-self: end; color: var(--ink, #e8f6ff);
  border: 1px solid rgba(118, 255, 104, .28); background: rgba(14, 40, 30, .55); }
.st-chat-log .cb-ai { justify-self: start; color: var(--ink-soft, #d9c9b8);
  border: 1px solid var(--glass-line, rgba(150,200,230,.18)); background: rgba(10, 27, 45, .6); }
.st-chat-log .cb-thinking { opacity: .6; font-style: italic; }
.st-chat-log .cb-vision { justify-self: stretch; max-width: 100%;
  border: 1px solid rgba(185, 107, 50, .5); background: rgba(24, 16, 8, .55);
  box-shadow: inset 0 1px 0 rgba(255,193,138,.2); }
.st-chat-log .cb-vision h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--copper-hot, #d4823c); }
.st-chat-row { display: flex; gap: 8px; min-width: 0; flex-wrap: wrap; }
.st-chat-row textarea { flex: 1 1 auto; min-width: 0; resize: none; }
.st-chat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st-link { font: inherit; font-size: 11.5px; cursor: pointer; border: 0; background: transparent;
  color: var(--muted, #8ba0ae); text-decoration: underline; text-underline-offset: 3px; justify-self: start; padding: 2px 0; }
.st-link:hover { color: var(--ink-soft, #d9c9b8); }

/* ---------- the guided tour ---------------------------------------------------------------
 * One floating card, fixed-position so the stage's scrolling cannot strand it, with an arrow
 * that slides along its edge (--ax) to keep pointing at the thing it explains. */
.ide-tour-pop { position: fixed; z-index: 340; padding: 12px 14px; border-radius: 5px;
  border: 1px solid rgba(185, 107, 50, .5);
  background: radial-gradient(90% 70% at 50% 0%, rgba(185,107,50,.14), transparent 70%),
    linear-gradient(180deg, rgba(12,28,46,.97), rgba(3,9,17,.98));
  box-shadow: 0 18px 44px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,193,138,.22);
  color: var(--ink-soft, #d9c9b8); }
.ide-tour-pop::before { content: ""; position: absolute; left: var(--ax, 24px); top: -7px;
  width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: rgba(12,28,46,.97); border-left: 1px solid rgba(185,107,50,.5); border-top: 1px solid rgba(185,107,50,.5); }
.ide-tour-pop.above::before { top: auto; bottom: -7px; transform: translateX(-50%) rotate(225deg); }
.ide-tour-pop .tp-num { font-size: 10.5px; letter-spacing: .14em; color: var(--copper-hot, #d4823c); margin-bottom: 4px; }
.ide-tour-pop h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--ink, #e8f6ff); }
.ide-tour-pop p { margin: 0; font-size: 13px; line-height: 1.6; }
.ide-tour-pop .tp-guide { font-size: 13.5px; color: var(--ink, #e8f6ff); }
.ide-tour-pop .tp-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.ide-tour-pop .tp-btns button { font: inherit; font-size: 12px; cursor: pointer; padding: 7px 14px; border-radius: 3px;
  color: var(--ink, #e8f6ff); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(14,33,54,.92), rgba(4,11,20,.96)); }
.ide-tour-pop .tp-btns .tp-next { border-color: rgba(118, 255, 104, .45); }
.ide-tour-pop .tp-btns .tp-skip { color: var(--muted, #8ba0ae); }
.tour-hi { outline: 1px solid rgba(118, 255, 104, .55); outline-offset: 3px; border-radius: 3px;
  box-shadow: 0 0 22px rgba(118, 255, 104, .2); }
#ide-tour-btn { width: 30px; height: 30px; flex: 0 0 auto; font: inherit; font-size: 14px; cursor: pointer;
  border-radius: 50%; color: var(--muted, #8ba0ae); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(14,33,54,.9), rgba(4,11,20,.95)); }
#ide-tour-btn:hover { color: var(--copper-hot, #d4823c); border-color: rgba(185, 107, 50, .55); }

/* ==========================================================================================
   ITERATION 2: the three modes (SOW docs/CRUCIBLE-MODES-ROADMAP.md, ruling 2a: intentional
   layout, generous spacing, intuitive for pros and beginners on shared intuitions).
   Mode drives layout through [data-mode] on #ide-root; JS never toggles per-element styles.
   ========================================================================================== */

/* ---------- the mode picker: the first question the surface asks ------------------------- */
.st-modes { display: grid; gap: 12px; padding: 18px 16px 22px; min-width: 0; }
.st-modes h3 { margin: 0 0 2px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-hot, #d4823c); }
.st-mode-card { display: grid; gap: 6px; text-align: left; font: inherit; cursor: pointer;
  padding: 16px 16px 14px; border-radius: 5px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(12,28,46,.9), rgba(3,9,17,.95));
  box-shadow: inset 0 1px 0 rgba(225,247,255,.08); min-width: 0; }
.st-mode-card:hover { border-color: rgba(185, 107, 50, .55);
  box-shadow: inset 0 1px 0 rgba(255,193,138,.18), 0 8px 24px rgba(0,0,0,.45); }
.st-mode-card .mc-t { font-size: 15px; color: var(--ink, #e8f6ff); }
.st-mode-card .mc-b { font-size: 12.5px; line-height: 1.55; color: var(--muted, #8ba0ae); }
.st-modes-lock { font-size: 12.5px; color: var(--ink-soft, #d9c9b8); }
.st-modes-lock label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.st-modes-lock input { cursor: pointer; }
.st-modes-note { margin: 2px 0 0; font-size: 11.5px; color: var(--muted, #8ba0ae); }
/* While the question is open, nothing else competes for the eye. */
.ide-stage.picking > :not(.st-modes) { display: none; }
/* Compact mode picker: current mode in one row. */
.st-modes-compact { display: flex; gap: 8px; padding: 0; min-width: 0; }
.st-modes-compact h3, .st-modes-compact .st-modes-lock, .st-modes-compact .st-modes-note { display: none; }
.st-modes-compact .st-mode-card { padding: 8px 12px; gap: 3px; }
.st-modes-compact .st-mode-card .mc-t { font-size: 11.5px; font-weight: 600; }
.st-modes-compact .st-mode-card .mc-b { display: none; }
.st-modes-compact .st-mode-card.on { border-color: rgba(118, 255, 104, .5); background: linear-gradient(180deg, rgba(24, 50, 76, .95), rgba(8, 18, 30, .95)); box-shadow: inset 0 0 12px rgba(118, 255, 104, .12); }

/* ---------- the persistent mode switch (ruling 1a: a stable switch, always reachable) ----- */
.st-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; min-width: 0; }
.st-mode-switch { display: flex; gap: 0; border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  border-radius: 3px; overflow: hidden; }
.st-mode-switch button { font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer;
  padding: 6px 10px; border: 0; color: var(--muted, #8ba0ae);
  background: linear-gradient(180deg, rgba(10,27,45,.8), rgba(3,9,17,.9)); }
.st-mode-switch button + button { border-left: 1px solid var(--glass-line, rgba(150,200,230,.14)); }
.st-mode-switch button.on { color: var(--ink, #e8f6ff);
  background: linear-gradient(180deg, rgba(24,50,76,.95), rgba(8,18,30,.95));
  box-shadow: inset 0 0 12px rgba(118, 255, 104, .12); }
/* Guest launch gate: both Engineer entry points are visibly unavailable and native-disabled. */
#ide-root button.ide-engineer-locked,
#ide-root button[data-mode="engineer"]:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.85);
  box-shadow: none;
}
#ide-root button.ide-engineer-locked:hover,
#ide-root button.ide-engineer-locked:focus-visible {
  transform: none;
  border-color: var(--glass-line, rgba(150,200,230,.2));
  box-shadow: none;
}

/* ---------- what each mode hides or shows -------------------------------------------------
 * beginner  chat and a folder picker; the register question, tools row and board never appear
 * vibe      one honest model sentence; Customize opens the board on request
 * engineer  everything stands open; the register select returns as the override control
 */
#ide-root[data-mode="beginner"] .st-lang,
#ide-root[data-mode="vibe"] .st-lang { display: none; }
#ide-root[data-mode="beginner"] .st-tools { display: none; }
#ide-root[data-mode="beginner"] .ide-probe { display: none; }
#ide-root[data-mode="beginner"] #dr-folder { display: none; }
#ide-root[data-mode="beginner"] #st-chat-actions,
#ide-root[data-mode="beginner"] #st-chat-skip { display: none; }
#ide-root[data-mode="beginner"] #st-go { display: none; }
#ide-root[data-mode="vibe"] .st-tools-label { display: none; }
#ide-root[data-mode="vibe"] #st-model-line { display: block; }
.st-model-line { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft, #d9c9b8); min-width: 0;
  overflow-wrap: anywhere; }
#ide-root[data-mode="vibe"] #st-tools-default { display: none; }

/* ---------- mockup cards in the chat ------------------------------------------------------ */
.st-chat-log .cb-mock { justify-self: start; max-width: 78%; padding: 8px; display: grid; gap: 8px;
  border: 1px solid rgba(185, 107, 50, .4); background: rgba(10, 22, 36, .7); }
.st-chat-log .cb-mock img { width: 100%; border-radius: 3px; cursor: zoom-in; display: block; }
.st-chat-log .cb-mock img.zoom { position: fixed; inset: 4vh 4vw; width: auto; max-width: 92vw;
  max-height: 92vh; margin: auto; z-index: 400; cursor: zoom-out;
  box-shadow: 0 30px 80px rgba(0,0,0,.85); }
.st-chat-log .cb-mock .mk-wait { font-size: 12.5px; font-style: italic; color: var(--muted, #8ba0ae);
  padding: 14px 10px; }
.st-chat-log .cb-mock .mk-pick { font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 14px;
  border-radius: 3px; color: var(--ink, #e8f6ff); border: 1px solid rgba(118, 255, 104, .45);
  background: linear-gradient(180deg, rgba(14,33,54,.92), rgba(4,11,20,.96)); justify-self: start; }

/* ---------- the honesty card (what this involves) ----------------------------------------- */
.st-chat-log .cb-involves { justify-self: stretch; max-width: 100%; display: grid; gap: 6px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.25)); background: rgba(8, 18, 30, .6); }
.st-chat-log .cb-involves h4 { margin: 0; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--copper-hot, #d4823c); }
.st-chat-log .cb-involves .inv-cost { font-size: 13px; color: var(--ink, #e8f6ff); }
.st-chat-log .cb-involves .inv-none { font-size: 12.5px; color: var(--muted, #8ba0ae); }
.st-chat-log .cb-involves ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.st-chat-log .cb-involves li { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft, #d9c9b8); }

/* ---------- drawers (the engineer's surface; invisible chrome for everyone else) ----------- */
.st-drawer { min-width: 0; }
.st-drawer > summary { list-style: none; cursor: pointer; }
.st-drawer > summary::-webkit-details-marker { display: none; }
/* Non-engineers never see drawer chrome: the sections read as one open page. */
#ide-root:not([data-mode="engineer"]) .st-drawer > summary { display: none; }
#ide-root:not([data-mode="engineer"]) .st-drawer { display: grid; gap: 12px; }
/* The engineer's drawers: labelled, closed by default, one clean line each. */
#ide-root[data-mode="engineer"] .st-drawer { border: 1px solid var(--glass-line, rgba(150,200,230,.18));
  border-radius: 4px; background: linear-gradient(180deg, rgba(8,20,34,.7), rgba(3,9,17,.8)); }
#ide-root[data-mode="engineer"] .st-drawer > summary { padding: 11px 14px; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft, #d9c9b8); }
#ide-root[data-mode="engineer"] .st-drawer > summary::before { content: "\25B8"; margin-right: 8px;
  color: var(--copper-hot, #d4823c); display: inline-block; transition: transform .18s ease; }
#ide-root[data-mode="engineer"] .st-drawer[open] > summary::before { transform: rotate(90deg); }
#ide-root[data-mode="engineer"] .st-drawer > :not(summary) { margin: 0 12px 12px; }
/* Which drawers exist per mode. */
#ide-root[data-mode="beginner"] #dr-brief,
#ide-root[data-mode="beginner"] #dr-models,
#ide-root[data-mode="beginner"] #dr-session { display: none; }
#ide-root[data-mode="vibe"] #dr-session { display: none; }

/* ---------- beginner mode: chat is the main surface ----------------------------------------- */
#ide-root[data-mode="beginner"] #st-chat {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
}
#ide-root[data-mode="beginner"] #st-chat .st-chat-log {
  flex: 1 1 auto;
  max-height: none;
}
#ide-root[data-mode="beginner"] #st-chat .cb {
  font-size: 15px;
}

/* ---------- vibe mode: chat first, options below -------------------------------------------- */
#ide-root[data-mode="vibe"] .ide-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}
#ide-root[data-mode="vibe"] #st-chat {
  order: -1;
}

/* The drawer wrapper is a grid, and a grid's lone auto column happily sizes to a select's
   longest option (the workspace path measured 464px on a 412 phone). Same clamp discipline as
   the stage: the column takes the container, children may shrink. */
.st-drawer { grid-template-columns: minmax(0, 1fr); }
.st-drawer > * { min-width: 0; max-width: 100%; }
#st-ws { width: 100%; min-width: 0; }

/* ---------- the model line row with AF button ------------------------------------------------ */
.st-model-line-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
#st-af { flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center; padding: 0;
  font: inherit; font-size: 11px; letter-spacing: .08em; cursor: pointer;
  color: var(--ink-soft, #d9c9b8); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(13,31,51,.9), rgba(4,11,20,.95));
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(225,247,255,.14), inset 0 -2px 6px rgba(0,0,0,.6);
  transition: color .18s ease, border-color .18s ease, transform .12s ease;
}
#st-af:hover { color: var(--copper-hot, #d4823c); border-color: rgba(185, 107, 50, .55); }
#st-af:active { transform: translateY(1px); }

/* ---------- AF panel (glass overlay, stacking law: z-index 350) ----------------------------- */
#af-panel { position: absolute; inset: 0; z-index: 350; display: grid; opacity: 0;
  transition: opacity 0.2s ease; pointer-events: none; }
#af-panel.af-open { opacity: 1; pointer-events: auto; }

.af-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }

.af-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 90%; max-width: 600px; max-height: 80vh;
  border-radius: 14px; border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background:
    radial-gradient(90% 70% at 50% -20%, rgba(157, 218, 255, .05), transparent 65%),
    linear-gradient(180deg, rgba(12, 30, 49, .92), rgba(3, 10, 19, .97));
  box-shadow:
    inset 0 1px 0 rgba(225, 247, 255, .12),
    inset 0 -3px 10px rgba(0, 0, 0, .6),
    0 20px 60px rgba(0, 0, 0, .6);
  display: grid; grid-template-rows: auto auto auto auto auto; gap: 0; overflow: hidden auto; }

.af-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--glass-line, rgba(150,200,230,.18)); }
.af-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink, #e8f6ff); }
.af-close { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto;
  cursor: pointer; color: var(--ink-soft, #d9c9b8);
  border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(10, 27, 45, .9), rgba(3, 9, 17, .95));
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .1), inset 0 -2px 6px rgba(0, 0, 0, .5);
  transition: color .18s ease, border-color .18s ease, transform .12s ease;
  font: inherit; padding: 0; }
.af-close:hover { color: var(--ink, #e8f6ff); border-color: rgba(185, 107, 50, .4); }
.af-close:active { transform: translateY(1px); }
.af-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.af-hint { margin: 0; padding: 12px 18px 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-soft, #d9c9b8); }

.af-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 140px) 64px 32px;
  gap: 8px; padding: 14px 18px; overflow-y: auto; min-height: 0;
  border-bottom: 1px solid var(--glass-line, rgba(150,200,230,.18));
  align-items: start; }
.af-col-header { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #8ba0ae); font-weight: 600; padding-bottom: 6px;
  border-bottom: 1px solid var(--glass-line, rgba(150,200,230,.15)); }
.af-col-actions-header { display: none; }

.af-row { display: contents; }
.af-task-input, .af-model-select, .af-n-input { font: inherit; font-size: 12.5px;
  padding: 9px 10px; border-radius: 8px; color: var(--ink, #e8f6ff);
  border: 1px solid var(--glass-line, rgba(150,200,230,.25));
  background: linear-gradient(180deg, rgba(6, 17, 29, .95), rgba(2, 8, 15, .98));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7); min-width: 0; }
.af-task-input::placeholder { color: var(--muted, #8ba0ae); }
.af-task-input:focus-visible, .af-model-select:focus-visible, .af-n-input:focus-visible {
  outline: 2px solid rgba(118, 255, 104, .4); outline-offset: 1px; }
.af-n-input { text-align: center; flex: 0 0 auto; }
.af-n-input::-webkit-outer-spin-button, .af-n-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.af-n-input[type="number"] { -moz-appearance: textfield; }

.af-remove-row { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto;
  cursor: pointer; color: var(--ink-soft, #d9c9b8);
  border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(10, 27, 45, .8), rgba(3, 9, 17, .9));
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .08), inset 0 -2px 5px rgba(0, 0, 0, .5);
  transition: color .18s ease, border-color .18s ease, transform .12s ease;
  font: inherit; padding: 0; margin-top: auto; }
.af-remove-row:hover { color: #ff8b81; border-color: rgba(226, 84, 74, .45); }
.af-remove-row:active { transform: translateY(1px); }
.af-remove-row svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.af-footer { display: grid; gap: 12px; padding: 14px 18px; background:
  linear-gradient(180deg, rgba(8, 20, 34, .5), rgba(3, 9, 17, .6)); }
.af-add-row { font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 10px 14px; border-radius: 8px;
  color: var(--ink-soft, #d9c9b8); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(14, 33, 54, .92), rgba(4, 11, 20, .96));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .12), inset 0 -2px 6px rgba(0, 0, 0, .55);
  transition: border-color .18s ease, color .18s ease, transform .12s ease; }
.af-add-row:hover { border-color: rgba(118, 255, 104, .4); color: var(--ink, #e8f6ff); }
.af-add-row:active { transform: translateY(1px); }
.af-add-row:disabled { opacity: 0.5; cursor: not-allowed; }

.af-toggle-row { display: flex; align-items: center; gap: 10px; }
.af-toggle-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.af-toggle-row label { font-size: 12.5px; color: var(--ink-soft, #d9c9b8); cursor: pointer;
  user-select: none; }

.af-footer button:last-child { font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 10px 14px; border-radius: 8px;
  color: var(--ink-soft, #d9c9b8); border: 1px solid var(--glass-line, rgba(150,200,230,.2));
  background: linear-gradient(180deg, rgba(14, 33, 54, .92), rgba(4, 11, 20, .96));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .12), inset 0 -2px 6px rgba(0, 0, 0, .55);
  transition: border-color .18s ease, color .18s ease, transform .12s ease; }
.af-footer button:last-child:hover { border-color: rgba(118, 255, 104, .4); color: var(--ink, #e8f6ff); }
.af-footer button:last-child:active { transform: translateY(1px); }

/* Plan Pipeline intake (Phase 2A) */
.st-plan-pick { display: grid; gap: 6px; margin-bottom: 10px; }
.st-plan-pick label { font-size: 12px; color: var(--muted, #8ba0ae); }
.st-plan-pick-row { display: flex; gap: 8px; align-items: center; }
.st-plan-pick-row select { flex: 1 1 auto; min-width: 0; }
#st-plan-load { flex: 0 0 auto; font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.2)); background: rgba(10, 27, 45, .8); color: var(--ink, #e8f6ff); }
#st-plan-text { width: 100%; box-sizing: border-box; resize: vertical; }

/* Full Custom sections (Phase 2) */
.af-custom { border-top: 1px solid var(--glass-line, rgba(150,200,230,.18)); padding: 14px 18px; }
.af-custom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.af-custom-head span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-hot, #d4823c); }
.af-divide-btn { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 8px 14px;
  border-radius: 6px; border: 1px solid rgba(118, 255, 104, .4); background: transparent; color: var(--ink, #e8f6ff); }
.af-divide-btn:hover { border-color: rgba(118, 255, 104, .7); box-shadow: inset 0 0 14px rgba(118, 255, 104, .08); }
.af-divide-btn:disabled { opacity: .55; cursor: default; }
.af-custom-hint { margin: 8px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted, #8ba0ae); }
.af-sections { display: grid; gap: 10px; }
.af-section { display: grid; gap: 6px; padding: 12px; border-radius: 8px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.14)); background: rgba(3, 10, 18, .5); min-width: 0; }
.af-section-title { font-size: 13px; font-weight: 600; color: var(--ink, #e8f6ff); }
.af-section-files { font-size: 11px; color: var(--muted, #8ba0ae); word-break: break-word; }
.af-section-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.af-section-controls .af-model-select { flex: 1 1 140px; min-width: 0; }
.af-agents { display: inline-flex; align-items: center; gap: 8px; }
.af-agents button { width: 28px; height: 28px; font: inherit; font-size: 15px; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.2)); background: rgba(10, 27, 45, .8); color: var(--ink, #e8f6ff); }
.af-agent-count { min-width: 16px; text-align: center; font-size: 13px; color: var(--ink, #e8f6ff); }
.af-agents-label { font-size: 11px; color: var(--muted, #8ba0ae); }
.af-section-est { font-size: 12px; color: var(--energy, #76ff68); font-variant-numeric: tabular-nums; }
.af-section-warn { font-size: 11.5px; line-height: 1.45; padding: 7px 9px; border-radius: 6px; }
.af-warn-red { color: #ffb4a8; background: rgba(255, 80, 60, .1); border: 1px solid rgba(255, 80, 60, .35); }
.af-warn-amber { color: #ffd9a0; background: rgba(212, 130, 60, .1); border: 1px solid rgba(212, 130, 60, .3); }
.af-section-empty { font-size: 12.5px; color: var(--muted, #8ba0ae); padding: 8px 0; }
/* Task board (Fred's redesign): group tag + reduce verdict */
.af-group-input { flex: 0 0 92px; min-width: 0; font: inherit; font-size: 12px; padding: 7px 8px; border-radius: 6px;
  border: 1px solid var(--glass-line, rgba(150,200,230,.2)); background: rgba(3, 10, 18, .6); color: var(--ink, #e8f6ff); }
.af-reduce { font-size: 11.5px; line-height: 1.45; padding: 6px 9px; border-radius: 6px; }
.af-reduce-irr { color: #ffd9a0; background: rgba(212, 130, 60, .1); border: 1px solid rgba(212, 130, 60, .3); }
.af-reduce-ok { color: var(--energy, #76ff68); background: rgba(118, 255, 104, .07); border: 1px solid rgba(118, 255, 104, .25); }
.af-plan-total { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--glass-line, rgba(150,200,230,.2));
  font-size: 12.5px; font-weight: 600; color: var(--ink, #e8f6ff); font-variant-numeric: tabular-nums; }

@media (max-width: 500px) {
  .af-card { width: 95%; max-height: 75vh; }
  .af-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 100px) 50px 28px; gap: 6px; padding: 12px 14px; }
  .af-task-input, .af-model-select, .af-n-input { font-size: 12px; padding: 8px 8px; }
  .af-remove-row { width: 28px; height: 28px; }
  .af-head { padding: 14px 14px; }
  .af-hint { padding: 10px 14px 0; font-size: 12px; }
  .af-footer { padding: 12px 14px; }
}

#ide-root[data-mode="beginner"] #st-af { display: none; }

/* ==========================================================================================
   COHERENT WORKSPACE: one journey, three control contracts
   ========================================================================================== */

/* The journey is state, not decoration: JS advances this single strip as intake, build,
   verification, and completion events occur. */
.st-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 240px);
  align-items: center;
  gap: 22px;
  padding: 14px 16px 14px 18px;
  border-left: 2px solid var(--copper-hot, #d4823c);
  background: linear-gradient(90deg, rgba(185, 107, 50, .1), rgba(10, 25, 41, .22) 58%, transparent);
}
.st-journey-copy { display: grid; gap: 3px; min-width: 0; }
.st-journey-kicker, .st-studio-kicker {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-hot, #d4823c);
}
.st-journey-copy strong { font-size: 15px; color: var(--ink, #e8f6ff); }
.st-journey-copy > span:last-child { font-size: 12px; line-height: 1.45; color: var(--muted, #8ba0ae); }
.st-journey-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.st-journey-track li { position: relative; height: 14px; display: grid; align-items: center; }
.st-journey-track li::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  height: 2px;
  background: rgba(150, 200, 230, .14);
}
.st-journey-track li:first-child::before { left: 50%; }
.st-journey-track li:last-child::before { right: 50%; }
.st-journey-track li span {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  justify-self: center;
  border-radius: 50%;
  background: #07111d;
  border: 1px solid rgba(150, 200, 230, .36);
}
.st-journey-track li.done::before { background: rgba(118, 255, 104, .36); }
.st-journey-track li.done span { border-color: rgba(118, 255, 104, .58); background: rgba(118, 255, 104, .5); }
.st-journey-track li.on span {
  width: 11px;
  height: 11px;
  border-color: var(--energy-hot, #9dff92);
  background: var(--energy, #76ff68);
  box-shadow: 0 0 12px rgba(118, 255, 104, .72);
}

/* Vibe is an adaptive studio. Chat and current state are fixed; the rest is composed here. */
.st-vibe-toolbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0 2px;
}
#ide-root[data-mode="vibe"] .st-vibe-toolbar { display: flex; }
.st-vibe-toolbar > div { display: grid; gap: 2px; }
.st-vibe-toolbar strong { font-size: 12.5px; color: var(--ink, #e8f6ff); }
.st-vibe-toolbar span { font-size: 11px; color: var(--muted, #8ba0ae); }
.st-vibe-toolbar button, .st-studio-presets button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--glass-line, rgba(150, 200, 230, .2));
  color: var(--ink-soft, #d9c9b8);
  background: linear-gradient(180deg, rgba(14, 33, 54, .88), rgba(4, 11, 20, .94));
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, .1);
}
.st-vibe-toolbar button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 11.5px;
}
.st-vibe-toolbar button:hover, .st-studio-presets button:hover,
.st-studio-presets button.on {
  color: var(--ink, #e8f6ff);
  border-color: rgba(118, 255, 104, .42);
  box-shadow: inset 0 0 14px rgba(118, 255, 104, .09);
}

.st-studio-shell {
  position: fixed;
  inset: 0;
  z-index: 360;
}
.st-studio-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(0, 4, 9, .68);
  backdrop-filter: blur(5px);
}
.st-studio-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 92vw);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border-left: 1px solid rgba(185, 107, 50, .4);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(118, 255, 104, .07), transparent 65%),
    linear-gradient(180deg, rgba(10, 26, 43, .99), rgba(2, 8, 15, .995));
  box-shadow: -24px 0 70px rgba(0, 0, 0, .62), inset 1px 0 rgba(225, 247, 255, .06);
  animation: studio-in .22s ease-out both;
}
@keyframes studio-in { from { transform: translateX(28px); opacity: .55; } }
.st-studio-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(150, 200, 230, .12);
}
.st-studio-panel h3 { margin: 5px 0 0; font-size: 19px; color: var(--ink, #e8f6ff); }
.st-studio-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-line, rgba(150, 200, 230, .2));
  background: rgba(3, 10, 18, .8);
  color: var(--ink-soft, #d9c9b8);
  font: 24px/1 system-ui;
  cursor: pointer;
}
.st-studio-intro {
  margin: 0;
  padding: 14px 22px 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted, #8ba0ae);
}
.st-studio-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 13px 22px 16px;
}
.st-studio-presets button { padding: 7px 10px; border-radius: 999px; font-size: 11px; }
.st-studio-modules {
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 18px;
}
.st-studio-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 9px;
  border-top: 1px solid rgba(150, 200, 230, .1);
  cursor: pointer;
}
.st-studio-module input { margin-top: 3px; accent-color: var(--energy, #76ff68); }
.st-studio-module > span { display: grid; gap: 3px; }
.st-studio-module strong { font-size: 13px; font-weight: 600; color: var(--ink, #e8f6ff); }
.st-studio-module small { font-size: 11.5px; line-height: 1.45; color: var(--muted, #8ba0ae); }
.st-studio-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-top: 1px solid rgba(150, 200, 230, .14);
  background: rgba(1, 6, 12, .62);
}
.st-studio-panel > footer span { font-size: 11px; color: var(--muted, #8ba0ae); }
.st-studio-panel > footer button { padding: 9px 20px; }

/* The Vibe drawer controls the real shared surfaces. It never creates a second copy of state. */
#ide-root[data-mode="vibe"]:not([data-studio-modules~="workspace"]) #dr-folder,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="brief"]) #dr-brief,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="crew"]) #dr-models,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="cost"]) #cru-meter,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="history"]) .cru-log-btn,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="preview"]) .w-preview,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="checks"]) .w-checks,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="code"]) .w-files,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="code"]) .w-changes,
#ide-root[data-mode="vibe"]:not([data-studio-modules~="code"]) .w-code-toggle {
  display: none !important;
}
#ide-root[data-mode="vibe"][data-studio-modules~="code"] .w-code-toggle { display: none; }

/* A build has one launch moment. Once it starts, intake and duplicate launch CTAs retire; the
   durable build surface becomes the primary action area. */
#ide-root[data-phase="build"] #st-go,
#ide-root[data-phase="verify"] #st-go,
#ide-root[data-phase="ship"] #st-go,
#ide-root[data-phase="build"] #st-chat-actions,
#ide-root[data-phase="verify"] #st-chat-actions,
#ide-root[data-phase="ship"] #st-chat-actions,
#ide-root[data-phase="build"] #st-chat-skip,
#ide-root[data-phase="verify"] #st-chat-skip,
#ide-root[data-phase="ship"] #st-chat-skip,
#ide-root[data-phase="build"] #st-chat-row,
#ide-root[data-phase="verify"] #st-chat-row,
#ide-root[data-phase="ship"] #st-chat-row {
  display: none !important;
}

/* Make the Vibe reading order intentional: identity, journey, studio controls, conversation,
   then only the modules that person selected. */
#ide-root[data-mode="vibe"] #st-chat { order: 3; }
#ide-root[data-mode="vibe"] .st-head-row { order: 0; }
#ide-root[data-mode="vibe"] .st-journey { order: 1; }
#ide-root[data-mode="vibe"] .st-vibe-toolbar { order: 2; }
#ide-root[data-mode="vibe"] .st-drawer { order: 4; }
#ide-root[data-mode="vibe"] .ide-start > .st-row { order: 5; }

@media (max-width: 620px) {
  .st-journey { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .st-journey-track { max-width: 240px; }
  .st-vibe-toolbar { align-items: flex-end; }
  .st-vibe-toolbar button { padding: 8px 11px; }
  .st-studio-panel {
    top: auto;
    left: 0;
    width: 100%;
    /* Nearly full height: the old 78vh sheet wasted a quarter of the screen above it (Fred,
       layout pass 07-23). A 36px reveal keeps the sheet feel; dvh tracks the real viewport
       under mobile browser chrome, with vh as the older-browser fallback. */
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px);
    max-height: 900px;
    border-left: 0;
    border-top: 1px solid rgba(185, 107, 50, .45);
    border-radius: 18px 18px 0 0;
    animation-name: studio-up;
  }
  @keyframes studio-up { from { transform: translateY(26px); opacity: .55; } }
}

/* ---- The workshop folder row (Fred, 2026-07-30) --------------------------------------------
   A guest has no machine attached, so the folder drawer offers one tap instead of a demand for an
   absolute path. The note underneath is not decoration: it is the honest statement of where the
   files actually live, which the old flow never said at all. ---- */
#st-workshop-new {
  font: inherit; font-size: 11.5px; letter-spacing: .06em; cursor: pointer;
  padding: 8px 13px; border-radius: 3px; white-space: nowrap;
  color: #eafff0; border: 1px solid rgba(157, 255, 146, .5);
  background: linear-gradient(145deg, rgba(38, 118, 44, .85), rgba(3, 30, 16, .95));
  box-shadow: 0 0 16px rgba(100, 255, 90, .18), inset 0 1px 0 rgba(226, 255, 221, .25);
}
#st-workshop-new:hover { filter: brightness(1.08); }
#st-workshop-new:disabled { opacity: .55; cursor: default; }
.st-workshop-note {
  margin: 8px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--muted, #8ba0ae);
  border-left: 2px solid rgba(185, 107, 50, .45); padding-left: 10px;
}

/* Where new builds run. Wraps rather than squeezes on a phone, because a truncated lane label is
   exactly the kind of small confusion that makes someone distrust where their files went. */
.st-lane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 12px; color: var(--muted, #8ba0ae);
}
.st-lane label { flex: 0 0 auto; letter-spacing: .02em; }
.st-lane select {
  flex: 1 1 180px; min-width: 0; padding: 6px 8px; font-size: 12px;
  color: var(--ink, #dfe9f0); background: rgba(9, 18, 26, .82);
  border: 1px solid rgba(185, 107, 50, .38); border-radius: 6px;
}
.st-lane select:disabled { opacity: .55; cursor: default; }
.st-lane-note { flex: 1 1 100%; font-size: 11px; line-height: 1.45; opacity: .85; }