/* Japanese: Zen Kaku Gothic New (Yoshimichi Ohira, OFL) — self-hosted so it works OFFLINE.
   Latin glyphs use the small latin subset; kana/kanji use the JP subset (lazy-loaded on demand). */
@font-face { font-family: "Zen Kaku Gothic New"; font-weight: 400; font-display: swap;
             src: url("/fonts/zen-kaku-latin-400.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F; }
@font-face { font-family: "Zen Kaku Gothic New"; font-weight: 400; font-display: swap;
             src: url("/fonts/zen-kaku-jp-400.woff2") format("woff2"); }
@font-face { font-family: "Zen Kaku Gothic New"; font-weight: 700; font-display: swap;
             src: url("/fonts/zen-kaku-jp-700.woff2") format("woff2"); }
/* English (all self-hosted, OFL): Inter = UI sans · Newsreader = editorial serif · JetBrains Mono = code */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/newsreader-600.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/newsreader-400i.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/fonts/jbmono-400.woff2") format("woff2"); }
/* TAS.AI brand type (self-hosted, OFL): Google Sans = body/UI/reading · Cal Sans = display accent. */
@font-face { font-family: "Google Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/google-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Google Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/google-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Google Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/google-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Cal Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("/fonts/cal-sans.woff2") format("woff2"); }
/* ===== philosophy: evidence over assertion — quiet instrument, loud proof =====
   Color and gradient add warmth and identity (richer, not minimalist). Numbers and paths are exact and
   monospace. Surfaces are flat with hairline borders — depth comes from evidence density, not
   shadows. Motion confirms; it doesn't perform. Purple is not decorative — it means one thing
   only: the AI is reasoning right now (see .plan-live, .gnode.running). */
:root {
  /* ===== TAS.AI — surfaces: paper grounds, ink text, colour held in reserve ===== */
  --bg: #ffffff; --panel: #ffffff; --panel2: #f8f6fa; --line: #ece7f1;
  --text: #0b0710; --muted: #857e8f; --text-soft: #4a4453;   /* ink warmed 4% → violet; muted = violet-biased grey */

  /* ===== brand — reserved for the few weight-carrying moments (a headline line, a phrase, a glow) ===== */
  --violet: #4b0e8e; --violet-mid: #6b2fb8; --violet-lo: #a06cf0;
  --orange: #f26726; --orange-deep: #b8431a; --rose: #a14976;
  --accent: #6b2fb8; --btn-accent: #4b0e8e; --coral: #b8431a; --purple: #4b0e8e;  /* legacy aliases → brand */
  --indigo: #6b2fb8; --sakura: #f26726; --matcha: #7ba05b;
  --ok: #4a8f5c; --warn: #b8842f; --bad: #c14f3d;

  /* the ONE signature gradient — sampled from the wordmark dot; display-text fill + one wash ONLY */
  --grad-brand: linear-gradient(100deg, #4b0e8e 0%, #a14976 50%, #f26726 100%);
  --grad-accent: var(--grad-brand);            /* legacy alias */
  --glow-btn: 0 8px 24px rgba(75,14,142,.16), 0 4px 10px rgba(242,103,38,.10);  /* dual-tone, each <20% */
  --shadow: 0 1px 2px rgba(11,7,16,.05), 0 1px 0 rgba(11,7,16,.03);

  /* surfaces stay plain paper; side panes get a hair of violet-tinted card ground, no textures */
  --pat-top: none; --pat-bottom: none; --pat-sides: none;
  --grad-bg: #ffffff; --map-bg: #f8f6fa; --plan-bg: #faf9fc;
  --grad-map: #f8f6fa; --grad-plan: #faf9fc;

  /* ===== type — Google Sans (read) · Google Sans Code (scan) ===== */
  --jp: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo;
  --ui: "Google Sans", "Google Sans Flex", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, var(--jp), sans-serif;
  --font-display: "Cal Sans", var(--ui);   /* display headings (start hero) — Google Sans everywhere else */
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, var(--jp), serif;
  --mono: "Google Sans Code", "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  /* ===== motion — one curve does the work; nothing fidgets ===== */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-hover: .3s var(--ease); --t-panel: .45s var(--ease);

  --radius: 12px; --radius-pill: 999px; --topbar-h: 56px;
}
/* Light-only per TAS.AI brand guidelines — no dark theme in v1. */

/* ===== accessibility + motion (guideline: 2px orange focus, offset 3px; nothing fidgets) ===== */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--text); overflow: hidden; display: flex; flex-direction: column;
       background: var(--grad-bg);
       font: 15px/1.65 var(--ui); letter-spacing: -0.003em;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hidden { display: none !important; }
.muted, .empty { color: var(--muted); }

/* top bar — Seigaiha (青海波), TAS purple, arcs bulging DOWN */
.topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 20px;
          border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill);
         background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
         box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 0 1px rgba(11,7,16,.06); }
.logo-img { height: 24px; width: auto; display: block; }
.session { display: flex; align-items: center; gap: 8px; min-width: 0; }
.session-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.agent-chip { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 9px; background: var(--panel2); white-space: nowrap; }
.controls { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.status { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(74,143,92,.16); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(193,79,61,.16); }
.chip { background: var(--panel2); border: 1px solid var(--line); color: var(--text-soft); border-radius: var(--radius-pill);
        font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
        padding: 5px 12px; cursor: pointer; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        transition: border-color var(--t-hover), color var(--t-hover); }
.chip:hover { border-color: var(--violet-lo); color: var(--text); }
.toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); }
.toggle button { background: transparent; color: var(--muted); border: 0; padding: 4px 13px; cursor: pointer; border-radius: var(--radius-pill);
                 font-family: var(--mono); font-size: 12px; letter-spacing: .03em; font-weight: 500; transition: background var(--t-hover), color var(--t-hover); }
.toggle button.active { background: var(--text); color: #fff; font-weight: 600; }

/* ===== entry landing: choose Build (concept) vs Plan (codebase) — mode-contextual chrome ===== */
body:not(.started) #rail, body:not(.started) .workspace, body:not(.started) .composer { display: none; }
body.started #landing { display: none; }
body:not(.started) .session { display: none; }
.hero { display: none; }                        /* the landing is the empty state now */
.plan-only { display: none !important; }
body.mode-plan .plan-only { display: inline-flex !important; }
.back-chip { font-weight: 650; }
.mode-chip { background: var(--panel); border-color: var(--accent); color: var(--accent); font-weight: 650; }

.landing { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: clamp(48px, 9vh, 128px) 24px; }
.landing-inner { width: 100%; max-width: 880px; text-align: center; animation: rise .6s var(--ease) both; }
.landing-logo { height: 38px; width: auto; margin-bottom: 32px; }
.landing-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5.4vw, 68px);
                 line-height: 1.0; letter-spacing: -.01em; margin: 0 0 16px; }
.landing-title em { font-style: normal; background: var(--grad-brand);
                    -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-sub { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 auto 44px; max-width: 60ch; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
@media (max-width: 640px) { .mode-cards { grid-template-columns: 1fr; } }
.mode-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 30px 26px 24px;
             background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
             text-align: left; font: inherit; color: var(--text); overflow: hidden;
             transition: transform var(--t-hover), box-shadow var(--t-hover), border-color var(--t-hover); }
.mode-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--orange); opacity: .5; }
.mode-card.plan::before { background: var(--violet); opacity: .5; }
.mode-card:hover { transform: translateY(-3px); border-color: var(--violet-lo); box-shadow: var(--glow-btn); }
.mode-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.mc-ic { font-size: 30px; line-height: 1; }
.mc-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.mc-desc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.mc-go { margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--coral); opacity: .8;
         transform: translateX(-2px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.mode-card.plan .mc-go { color: var(--indigo); }
.mode-card:hover .mc-go { opacity: 1; transform: translateX(0); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* mode starter chips (seed the empty state — a la v0/Bolt quick-starts) */
.mode-starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 2px clamp(16px,4vw,48px) 8px; }
body:not(.started) .mode-starters, .mode-starters.hidden { display: none; }
.mode-starters .starter { background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.mode-starters .starter:hover { border-color: var(--accent); color: var(--text); }

/* three-pane workspace: research map · AI feed · plan */
.workspace { flex: 1; min-height: 0; display: grid; position: relative;
             --col-left: minmax(190px, 21%); --col-right: minmax(310px, 36%);
             grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right); overflow: hidden; }
.workspace.plan-closed { grid-template-columns: var(--col-left) minmax(0, 1fr); }
.workspace.map-collapsed { grid-template-columns: 0 minmax(0, 1fr) var(--col-right); }
/* draggable dividers — thin, invisible until hover; positioned on the pane boundary by JS (display toggled there) */
.pane-resizer { position: absolute; top: 0; bottom: 0; width: 9px; margin-left: -4px; z-index: 6;
                cursor: col-resize; touch-action: none; display: none; }
.pane-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
                       background: transparent; transition: background .12s var(--ease); }
.pane-resizer:hover::after, .pane-resizer.drag::after { background: var(--accent); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* left: research map — Asanoha (麻の葉) hemp-leaf lattice, soft orange (subtle texture) */
.map-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
            border-right: 1px solid var(--line);
            background-color: var(--map-bg); background-image: var(--pat-sides), var(--grad-map);
            background-size: 200px 126px, cover; background-repeat: repeat, no-repeat; }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px 8px; }
.pane-title { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.pane-count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.pane-empty { color: var(--muted); font-size: 12.5px; padding: 4px 14px; }
.graph { flex: 1; overflow: auto; padding: 2px 10px 14px; }

/* middle: AI feed — soft orange → TAS purple wash (gentle, keeps messages readable) */
.feed-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.convo { flex: 1; overflow: auto; padding: 20px clamp(16px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--panel); color: var(--text); border: 1px solid var(--line); max-width: 80%; box-shadow: 0 2px 10px rgba(11,7,16,.05); }
.msg.assistant .bubble { background: transparent; color: var(--text); max-width: 100%; }
.bubble { border-radius: 18px; padding: 11px 15px; font-size: 14px; }
.bubble .md p { margin: 6px 0; } .bubble .md h1, .bubble .md h2 { font-size: 15px; margin: 8px 0 4px; }
.line { color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 1px 0; }
.line.work::before { content: "● "; color: var(--coral); }
.line.work.live { color: var(--text); }
.line.work.live::before { animation: pulse 1.6s ease-in-out infinite; }
.line.work.live .wl-timer { color: var(--muted); font-weight: 400; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* collapsible tool rows */
.tool { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.tool > summary { cursor: pointer; list-style: none; padding: 9px 12px; font-size: 13px; font-weight: 600;
                  display: flex; align-items: center; gap: 8px; }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.tool[open] > summary::before { transform: rotate(90deg); }
.tool > summary .ic { font-size: 14px; }
.tool > summary .count { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; }
.tool-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.qline { color: var(--muted); padding-left: 4px; }

/* explore finding cards */
.ecard { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 13px; }
.ecard .q { font-weight: 650; } .ecard .a { margin: 3px 0; }
.ecard .paths { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip-s { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.chip-s.model { font-family: ui-monospace, monospace; }
.chip-s.simple { color: var(--ok); } .chip-s.moderate { color: var(--warn); } .chip-s.complex { color: var(--purple); }
.chip-s.conf.hi { color: var(--ok); } .chip-s.conf.mid { color: var(--warn); } .chip-s.conf.lo { color: var(--bad); }

/* clarification block (in transcript) */
.clarify { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; }
.clarify h4 { margin: 0 0 8px; font-size: 13px; }
.clarify-q { margin-bottom: 10px; }
.cq { font-weight: 600; margin-bottom: 5px; }
.copts { display: flex; flex-direction: column; gap: 4px; }
.copt { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cother { flex: 0 1 220px; padding: 3px 7px; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); }

/* ask panel — Claude Code stepped clarify (one question at a time) */
.ask { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); padding: 14px 16px; }
.ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ask-prog { font-size: 12px; font-weight: 700; color: var(--coral); background: rgba(107,47,184,.12); border-radius: 6px; padding: 2px 7px; flex: none; margin-top: 1px; }
.ask-q { font-weight: 650; font-size: 15px; flex: 1; }
.ask-opts { display: flex; flex-direction: column; gap: 8px; }
.ask-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel2);
           border: 1px solid transparent; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.ask-opt:hover { border-color: var(--line); }
.ask-opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(107,47,184,.16); }
.ao-text { flex: 1; min-width: 0; }
.ao-label { font-weight: 600; }
.ao-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.ao-num { flex: none; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; background: var(--panel); }
.ask-other { width: 100%; margin-top: 2px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font: inherit; }
.ask-other:focus { outline: none; border-color: var(--accent); }
.ask-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; align-items: center; }
.ask-done { color: var(--muted); font-size: 13px; }

/* composer attach */
.attach { width: 38px; height: 38px; flex: none; border: 1px solid var(--line); background: var(--panel2); color: var(--muted);
          border-radius: 11px; cursor: pointer; font-size: 18px; transition: border-color var(--t-hover), color var(--t-hover); }
.attach:hover { border-color: var(--accent); color: var(--accent); }
.composer-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 10px; color: var(--muted); }
.attach-chip b { color: var(--text); font-weight: 600; }
.attach-chip .rm { cursor: pointer; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 3px; }
.attach-chip .rm:hover { color: var(--bad); }

/* proposed-plan card */
.plan-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow);
             padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-card .pc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.plan-card .pc-title { font-weight: 650; }
.plan-card .pc-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.btn { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-pill); padding: 6px 14px; cursor: pointer; font: inherit; transition: border-color var(--t-hover), background var(--t-hover); }
.btn:hover { border-color: var(--violet-lo); }
.btn.link { background: none; border: 0; color: var(--accent); }
.btn.primary { background: var(--text); color: #fff; border: 0; font-weight: 600; box-shadow: var(--glow-btn); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled, .btn.primary:disabled, .send:disabled { opacity: .4; cursor: not-allowed; filter: saturate(.35); box-shadow: none; }
.btn.ok { background: var(--ok); color: #fff; border: 0; font-weight: 600; }

/* composer — Seigaiha (青海波), TAS purple, arcs bulging UP */
.composer { margin: 6px auto 16px; width: min(1000px, calc(100% - 32px)); padding: 8px 10px;
            display: flex; gap: 8px; align-items: flex-end; background-color: var(--panel);
            background-image: var(--pat-bottom); background-size: 48px 48px;
            border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 10px 30px rgba(11,7,16,.08); }
.composer-main { flex: 1; min-width: 0; }
.composer textarea { width: 100%; background: transparent; color: var(--text); border: 0;
                     padding: 9px 8px; font: inherit; resize: none; max-height: 200px; }
.composer textarea:focus { outline: none; }
.send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; cursor: pointer; font-size: 18px;
        background: var(--text); color: #fff; box-shadow: var(--glow-btn); transition: filter var(--t-hover); }
.send:hover { filter: brightness(1.12); }

/* plan panel */
.plan-pane { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line);
             box-shadow: -1px 0 3px rgba(11,7,16,.04);
             background-color: var(--plan-bg); background-image: var(--pat-sides), var(--grad-plan);
             background-size: 200px 126px, cover; background-repeat: repeat, no-repeat; }
.plan-pane.closed { display: none; }
.plan-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ph-title { font-family: var(--mono); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); } .ph-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ph-actions button { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 5px 11px; cursor: pointer;
                     transition: border-color var(--t-hover), background var(--t-hover); }
.ph-actions button:hover:not(:disabled) { border-color: var(--violet-lo); }
.ph-actions .ok { background: var(--ok); color: #fff; border: 0; font-weight: 600; }
.ph-actions .ok:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn { background: none !important; border: 0 !important; color: var(--muted) !important; font-size: 15px; padding: 4px 6px !important;
            transition: color var(--t-hover); }
.icon-btn:hover { color: var(--text) !important; }
.plan-hint { font-size: 11.5px; color: var(--muted); padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.plan { flex: 1; overflow: auto; padding: 14px 16px; }
.mockup-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
.ph-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); }
.ph-tabs button { background: transparent; color: var(--muted); border: 0; padding: 3px 12px; cursor: pointer; border-radius: 999px; font-weight: 500; font-size: 12.5px; transition: background .15s var(--ease), color .15s var(--ease); }
.ph-tabs button.active { background: var(--btn-accent); color: #fff; font-weight: 600; }

/* ===== Build mode: left pane = Versions & Feedback (loop engineering) ===== */
.build-side { display: none; }
body.mode-build #graph, body.mode-build #mapEmpty { display: none; }
body.mode-build .build-side { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; padding: 2px 10px 14px; gap: 12px; }
.loop-status { display: flex; flex-wrap: wrap; gap: 5px; }
.bs-sec { display: flex; flex-direction: column; gap: 6px; }
.bs-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cmt-list, .ver-list { display: flex; flex-direction: column; gap: 6px; }
.bs-empty { color: var(--muted); font-size: 12px; padding: 1px 2px; }
.cmt-row { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: 12.5px; animation: rise .45s var(--ease) both; }
.cmt-row.applied { opacity: .55; }
.cmt-top { display: flex; align-items: flex-start; gap: 7px; }
.cmt-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.cmt-text { flex: 1; min-width: 0; word-break: break-word; }
.cmt-triage { display: flex; flex-wrap: wrap; gap: 4px; }
.cmt-triage .chip-s, .cmt-apply { cursor: pointer; }
.chip-s.sel { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.bs-apply { align-self: stretch; margin-top: 2px; }
.ver-row { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; font-size: 12.5px; }
.ver-row.active { background: var(--panel2); border-color: var(--accent); }
.ver-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-restore { margin-left: auto; }
/* status colors — pins + comment dots */
.st-open { background: var(--warn); } .st-approved { background: var(--ok); } .st-feature { background: var(--accent); }
.st-design { background: var(--purple); } .st-defer { background: var(--muted); } .st-applied { background: var(--ok); }
/* ===== mockup wrapper + pin overlay + refine bar ===== */
.mockup-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.pin-layer { position: absolute; inset: 0; pointer-events: none; }
.pin-layer.arm { pointer-events: auto; cursor: crosshair; background: rgba(75,14,142,.05); }
/* build overlay (Design Studio: never a blank/broken preview while (re)building) */
.build-overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--panel); color: var(--muted); font-size: 13px; }
.build-overlay .bo-spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--btn-accent); border-radius: 50%; animation: bo-spin .8s linear infinite; }
@keyframes bo-spin { to { transform: rotate(360deg); } }
/* theme picker (Design Studio: choose 1 of N before building) */
.theme-picker { position: absolute; inset: 0; overflow: auto; padding: 18px; background: var(--panel); z-index: 3;
                display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-content: start; }
.theme-picker .tp-head { grid-column: 1 / -1; font-weight: 600; font-size: 15px; }
.theme-picker .tp-sub { grid-column: 1 / -1; color: var(--muted); font-size: 13px; margin-top: -10px; }
.theme-tile { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel2);
              display: flex; flex-direction: column; gap: 8px; transition: border-color .15s var(--ease), transform .1s var(--ease); }
.theme-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-tile .tt-name { font-weight: 600; }
.theme-tile .tt-tag { color: var(--muted); font-size: 12.5px; }
.theme-tile .tt-swatches { display: flex; gap: 6px; }
.theme-tile .swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.18); }
.theme-tile .tt-micro { margin: 4px 0 8px; padding-left: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.theme-tile .tt-select { margin-top: auto; }
/* viewport switch (multi-device preview) + local-first chip */
.vp-switch { display: inline-flex; gap: 2px; }
.vp-switch button { background: transparent; border: 1px solid var(--line); color: var(--muted);
                    border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 13px;
                    transition: border-color var(--t-hover), color var(--t-hover); }
.vp-switch button.on { color: var(--text); border-color: var(--accent); }
.local-chip { background: var(--panel2); color: var(--muted); cursor: default; }
.pin { position: absolute; transform: translate(-50%, -100%); width: 20px; height: 20px; border-radius: 50% 50% 50% 0;
       rotate: -45deg; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700;
       pointer-events: auto; cursor: pointer; box-shadow: var(--shadow); }
.pin > span { rotate: 45deg; }
.mockup-bar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.refine-input { flex: 1; min-width: 0; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; }
.refine-input:focus { outline: none; border-color: var(--accent); }
.mockup-bar .btn { flex: none; }
.pin-ctx { font-size: 12px; color: var(--accent); font-weight: 650; margin-bottom: 8px; }
/* block refine/apply/restore while a run streams */
body.running .ver-restore, body.running #applyApproved, body.running #refineBtn, body.running .cmt-apply { opacity: .4; pointer-events: none; }
.plan h2 { font-size: 15px; margin: 16px 0 4px; } .plan h3 { font-size: 13px; color: var(--muted); margin: 12px 0 3px; }
.plan ul { margin: 4px 0 4px 18px; padding: 0; } .plan p { margin: 5px 0; }
.plan table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 6px 0; }
.plan th, .plan td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.plan code { font-family: ui-monospace, monospace; background: var(--panel2); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.plan strong { color: var(--text); font-weight: 700; }
.plan ::selection { background: rgba(75,14,142,.20); }
#planEdit { flex: 1; margin: 12px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 11px; font: 13px/1.5 ui-monospace, monospace; resize: none; }

/* plan empty state (point 6) — centered card with icon */
.plan .empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
               height: 100%; min-height: 220px; gap: 8px; text-align: center; color: var(--muted); font-size: 13px; padding: 24px; }
.plan .empty::before { content: "📋"; font-size: 34px; opacity: .55; }

/* badges */
.badge { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600; }
.badge.PASS { background: rgba(74,143,92,.16); color: var(--ok); }
.badge.REVISE { background: rgba(184,132,47,.16); color: var(--warn); }
.badge.BLOCK { background: rgba(193,79,61,.16); color: var(--bad); }
.badge.REVIEWING { background: var(--panel2); color: var(--muted); animation: rev-pulse 1.4s ease-in-out infinite; }
@keyframes rev-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* select-to-comment */
.sel-btn { position: fixed; z-index: 30; background: var(--btn-accent); color: #fff; border: 0; border-radius: 8px;
           padding: 6px 11px; font-size: 12px; cursor: pointer; box-shadow: var(--shadow); }
.comment-pop { position: fixed; z-index: 31; width: min(340px, 92vw); background: var(--panel); border: 1px solid var(--line);
               border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.comment-pop .quote { font-size: 12px; color: var(--muted); border-left: 3px solid var(--coral); padding: 2px 0 2px 8px; margin-bottom: 8px; max-height: 60px; overflow: auto; }
.comment-pop textarea { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; resize: vertical; }
.cp-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.cp-actions button { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 8px; padding: 5px 12px; cursor: pointer;
                     transition: border-color var(--t-hover), background var(--t-hover); }
.cp-actions button:hover { border-color: var(--violet-lo); }
.cp-actions .primary { background: var(--btn-accent); color: #fff; border: 0; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(31,28,25,.5); display: flex; align-items: center; justify-content: center; z-index: 40; backdrop-filter: blur(2px); }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(540px, 92vw); box-shadow: var(--shadow); overflow: hidden; }
.modal-box .plan-head { padding: 12px 14px; }
.path { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); padding: 10px 14px 0; word-break: break-all; }
.ls { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin: 10px 14px; }
.ls div { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ls div:last-child { border-bottom: 0; } .ls div:hover { background: var(--panel2); }
.modal-box .primary { margin: 0 14px 14px; background: var(--btn-accent); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; font-weight: 600; }

/* toggle chips (agentic tools / interview) */
.toggle-chip { font-size: 12px; padding: 5px 11px; }
.toggle-chip.on { background: var(--btn-accent); color: #fff; border-color: transparent; }

/* debug runtime-capture confirm + interview restatement (reuse .ask panel) */
.rt-line { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: 8px 0 2px; }
.restate { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.rs-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start; font-size: 13px; }
.rs-k { color: var(--text); font-weight: 700; }
.rs-v { color: var(--text); }

/* editorial plan rendering — free Tiempos-like serif + diff/code cards + action badges */
.plan { font-family: var(--ui); font-size: 15px; line-height: 1.62; }
.plan h1 { font-size: 20px; font-weight: 600; margin: 4px 0 10px; letter-spacing: -.01em; }
.plan h2 { font-size: 16px; font-weight: 650; margin: 16px 0 6px; }
.plan h3 { font-size: 14.5px; font-weight: 650; margin: 13px 0 4px; }
.plan p { margin: 7px 0; } .plan ul { margin: 6px 0; padding-left: 18px; } .plan li { margin: 3px 0; }
.plan code { font-family: var(--mono); font-size: 12.5px;
             background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
.plan pre.code { font-family: var(--mono); font-size: 12.5px;
                 line-height: 1.5; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
                 padding: 10px 4px; margin: 9px 0; overflow-x: auto; }
.plan pre.code code { background: none; border: 0; padding: 0; }
.plan pre.code .cl { display: block; white-space: pre; padding: 0 8px; }
.plan pre.code .diff-add { background: rgba(74,143,92,.15); color: var(--ok); }
.plan pre.code .diff-del { background: rgba(193,79,61,.13); color: var(--bad); }
.plan table { font-family: var(--ui); font-size: 13px; }
.act { font-family: var(--mono); font-size: 10.5px;
       font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.act-create { background: rgba(74,143,92,.16); color: var(--ok); }
.act-modify { background: rgba(107,47,184,.15); color: var(--purple); }
/* §7 architecture diagram: raw source shows dim/mono until mermaid replaces it with an SVG */
.mermaid-src { white-space: pre-wrap; font-family: var(--mono); color: var(--muted); font-size: 12px; margin: 8px 0; }
.mermaid { margin: 10px 0; text-align: center; }
.mermaid svg { max-width: 100%; height: auto; }
@media print { .topbar, .composer, .map-pane, .rail, .ph-actions, .plan-hint { display: none !important; } }
.act-delete { background: rgba(193,79,61,.15); color: var(--bad); }
.act-read { background: var(--panel2); color: var(--muted); }

/* top-row controls — blocky uppercase 'Silkscreen-like' labels (offline, free) */
.toggle button, .toggle-chip, .agent-chip { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 650; }

/* finishing polish — editorial accents + tactile composer */
#welcome { font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--text); }
#welcome .muted { font-style: normal; font-family: var(--ui); font-size: 12.5px; }
.ph-title { font-family: var(--ui); font-weight: 650; font-size: 15px; }
.session-title { font-family: var(--ui); font-weight: 650; }
.composer textarea:focus { box-shadow: 0 0 0 3px rgba(242,103,38,.16); }
.send { transition: filter .12s var(--ease); }

/* ===== hero: the one deliberate editorial/gradient moment ===== */
.hero { margin: auto; max-width: 640px; text-align: center; padding: 5vh 20px; display: flex;
        flex-direction: column; align-items: center; gap: 14px; animation: rise .5s var(--ease) both; }
.hero.hidden { display: none; }
.hero-logo { height: 54px; width: auto; filter: drop-shadow(0 6px 14px rgba(11,7,16,.10)); }
.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 4vw, 38px);
              line-height: 1.14; letter-spacing: -.015em; margin: 2px 0 0; }
.hero-title em { font-style: italic; background: linear-gradient(100deg, var(--purple), var(--accent));
                 -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 520px; margin: 0; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.starter { font-size: 12.5px; color: var(--text); background: var(--panel); border: 1px solid var(--line);
           border-radius: 999px; padding: 7px 14px; cursor: pointer;
           transition: border-color .12s var(--ease); }
.starter:hover { border-color: var(--accent); }

.rail { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap;
        padding: 9px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.rail.hidden { display: none; }
.rail-timer { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
              font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--panel2);
              border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rail-step { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
             color: var(--muted); font-size: 11.5px; font-weight: 500; transition: all .22s var(--ease); }
.rail-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
            font-size: 10px; font-weight: 700; background: var(--panel2); border: 1px solid var(--line); }
.rail-step.done { color: var(--text); }
.rail-step.done .rail-dot { background: var(--ok); border-color: transparent; color: #fff; }
.rail-step.active { color: var(--text); background: var(--panel2); border: 1px solid var(--accent); }
.rail-step.active .rail-dot { background: var(--accent); border-color: transparent; color: #fff; animation: pulse 1.6s ease-in-out infinite; }
.rail-sep { width: 14px; height: 1px; background: var(--line); }

.plan-card, .ecard, .ask { animation: rise .45s var(--ease) both; }
.plan-card, .ecard { box-shadow: var(--shadow); }
.tool { transition: border-color .14s var(--ease); }
.tool[open] { border-color: var(--muted); }

/* ===== AI-OS components: research map · living plan · completion delight ===== */
/* left map — question dependency graph, live (pending ○ · running ● · done ✓) */
.graph-root { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; color: var(--text); padding: 4px 8px 9px; }
.graph-root .gr-ic { width: 17px; height: 17px; flex: none; border-radius: 5px; display: grid; place-items: center;
                     font-size: 10px; color: #fff; background: var(--accent); }
.gnode { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: 9px;
         font-size: 12.5px; line-height: 1.4; transition: background .14s var(--ease); }
.gnode:hover { background: var(--panel2); }
.gnode::before { content: ""; position: absolute; left: 15.5px; top: -4px; width: 1.5px; height: 10px; background: var(--line); }
.gnode:first-of-type::before { display: none; }
.gdot { position: relative; width: 15px; height: 15px; flex: none; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); transition: all .2s var(--ease); }
.gnode.running .gdot { border-color: var(--purple); background: var(--purple); box-shadow: 0 0 0 4px rgba(107,47,184,.14); animation: pulse 1.6s ease-in-out infinite; }
.gnode.done .gdot { border-color: var(--ok); background: var(--ok); }
.gnode.done .gdot::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; }
.gtext { flex: 1; min-width: 0; color: var(--text); }
.gnode.pending .gtext { color: var(--muted); }
.gconf { font-family: var(--mono); font-size: 10px; color: var(--ok); white-space: nowrap; }

/* right plan — living reasoning panel while the plan is still being built. Purple here means one
   thing only: the AI is reasoning right now — the philosophy's single deliberate exception. */
.plan-live { padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.pl-head { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 650; color: var(--purple); }
.pl-spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid rgba(107,47,184,.28); border-top-color: var(--purple); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pl-bar { height: 5px; border-radius: 999px; background: var(--panel); overflow: hidden; margin: 11px 0 10px; }
.pl-fill { height: 100%; width: 0; border-radius: 999px; background: var(--purple); transition: width .5s var(--ease); }
/* build progress bar (U4): reuse the .pl-bar/.pl-fill visual inline in the feed while a live prototype builds */
.build-bar { background: var(--panel2); max-width: 320px; margin: 4px 0 6px; }
.pl-items { display: flex; flex-direction: column; gap: 6px; }
.pl-item { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); transition: color .2s var(--ease); }
.pl-item .pl-i { flex: none; width: 14px; text-align: center; }
.pl-item.active { color: var(--text); font-weight: 600; } .pl-item.active .pl-i { color: var(--purple); }
.pl-item.done { color: var(--text); } .pl-item.done .pl-i { color: var(--ok); }
.pl-preview { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 5px; }
.pl-tok { font-size: 11px; font-weight: 600; color: var(--purple); }
.pl-tail { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; line-height: 1.5; color: var(--muted);
  max-height: 4.5em; overflow: hidden; white-space: pre-wrap; word-break: break-word; }

/* completion delight */
.done-card { border: 1px solid rgba(74,143,92,.42); background: rgba(74,143,92,.07); border-radius: 10px; padding: 15px 17px; box-shadow: var(--shadow); }
.done-card .dc-title { font-family: var(--ui); font-weight: 600; font-size: 17px; letter-spacing: -.005em; margin-bottom: 3px; }
.done-card .dc-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.done-card .dc-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.dc-stat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dc-stat b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: 0; text-transform: none; }
.dc-link { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--text); font-weight: 600; text-decoration: none; }
.dc-link:hover { text-decoration: underline; }

/* Ultra dual-candidate comparison */
.trade-off { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.candidate-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 13px; margin-bottom: 8px; }
.candidate-card:last-of-type { margin-bottom: 0; }
.candidate-card.winner { border-color: var(--ok); }
.candidate-card.loser { opacity: .68; }
.cc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.cc-label { font-weight: 650; }
.chip-s.winner-chip { color: var(--ok); border-color: var(--ok); }
.cc-approach { margin: 3px 0; }
.cc-comments { margin-top: 4px; }

/* narrow: collapse the map, then float the plan as a right overlay */
@media (max-width: 1080px) {
  .workspace, .workspace.plan-closed { grid-template-columns: 0 minmax(0, 1fr) minmax(300px, 40%); }
  .map-pane { display: none; }
  /* Build mode: the left pane IS the loop feature — keep it visible */
  body.mode-build .map-pane { display: flex; }
  body.mode-build .workspace, body.mode-build .workspace.plan-closed { grid-template-columns: minmax(180px, 24%) minmax(0, 1fr) minmax(300px, 40%); }
}
@media (max-width: 760px) {
  /* single column on phones; the build-mode selectors need equal specificity to override the 3-pane rule above */
  .workspace, .workspace.plan-closed,
  body.mode-build .workspace, body.mode-build .workspace.plan-closed { grid-template-columns: minmax(0, 1fr); }
  .map-pane, body.mode-build .map-pane { display: none; }   /* feed is primary on a phone; the loop pane doesn't fit */
  .plan-pane { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(460px, 94vw); z-index: 25; box-shadow: var(--shadow); }
  .session-title { max-width: 40vw; }
}

/* ===== a11y (U2): keyboard-visible focus ring + reduced-motion ===== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a:focus-visible, button:focus-visible, .starter:focus-visible, .theme-tile:focus-visible,
.mode-card:focus-visible, .ls div:focus-visible, .ask-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* inputs clear their outline on :focus — restore a visible ring for keyboard nav (mouse focus keeps the subtle border/shadow) */
#task:focus-visible, .composer textarea:focus-visible, .refine-input:focus-visible, .ask-other:focus-visible,
.comment-pop textarea:focus-visible, #planEdit:focus-visible, .cother:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pl-spin { animation: none !important; }   /* spinner + pulses (.line.work.live::before, .rail-dot, .gnode.running .gdot) all halt via the rule above */
}

/* ===== narrow-width chrome (U3): wrap topbar controls; drop the rail timer to its own line ===== */
@media (max-width: 900px) {
  .topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
  .controls { row-gap: 6px; }
  .rail-timer { position: static; transform: none; flex-basis: 100%; margin-top: 6px; text-align: center;
                background: none; border: 0; padding: 0; }   /* own centered line — never overlaps the rail steps */
}

/* ===== sessions drawer + recent list (P2) ===== */
.sessions-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 86vw; z-index: 60;
  background: var(--panel); border-right: 1px solid var(--line); box-shadow: 2px 0 24px rgba(0,0,0,.08);
  display: flex; flex-direction: column; }
.sessions-drawer.hidden { display: none; }
.sd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sd-list { overflow-y: auto; padding: 8px; flex: 1; }
.sd-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background var(--t-hover); }
.sd-row:hover { background: var(--panel2); }
.sd-ic { font-size: 15px; line-height: 1.4; }
.sd-main { display: flex; flex-direction: column; min-width: 0; }
.sd-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-meta { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.recent-sessions { margin-top: 22px; text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
.recent-sessions .recent-head { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px 12px; }
.recent-sessions .sd-row { border: 1px solid transparent; }
.recent-sessions .sd-row:hover { border-color: var(--line); }

/* ===== connector import: browse + add-MCP (P4) ===== */
.import-browse { margin: 6px 0; }
.browse-results { max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.browse-row { padding: 7px 10px; font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--t-hover); }
.browse-row:hover { background: var(--panel2); }
.browse-row.sel { background: var(--panel2); border-left: 2px solid var(--accent); }
.import-add-mcp { display: flex; gap: 6px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.import-add-mcp .refine-input { flex: 1; font-size: 11.5px; }

/* ===== one shared press-confirm across every clickable control =====
   "Motion confirms; it doesn't perform" (top of file) already covers hover; this is the press half —
   a hairline scale-down while held, eased back on release. Listed last so it wins the cascade over each
   control's own (still-authoritative-for-color) transition declaration above; --t-hover already collapses
   to ~0 under prefers-reduced-motion (media query near the top), so this degrades to an instant, still-
   legible press with no continuous motion. .mode-card/.theme-tile keep their own bespoke lift+shadow
   timing untouched — deliberately not folded in here. */
.btn, .chip, .toggle button, .ph-tabs button, .vp-switch button, .ph-actions button, .cp-actions button,
.send, .ask-opt, .attach, .icon-btn, .starter, .mode-starters .starter {
  transition: transform .12s var(--ease), border-color var(--t-hover), background var(--t-hover),
              color var(--t-hover), filter var(--t-hover);
}
.btn:active, .chip:active, .toggle button:active, .ph-tabs button:active, .vp-switch button:active,
.ph-actions button:active, .cp-actions button:active, .send:active, .ask-opt:active, .attach:active,
.icon-btn:active, .starter:active, .mode-starters .starter:active { transform: scale(.96); }

/* ===== Dev Auto surface (P7): code-the-plan, approval, run timeline, diff, push ===== */
.plan-card.code-card { flex-wrap: wrap; }
.code-sub { margin: 4px 0 0 18px; max-width: 640px; }
.agent-approve, .agent-run, .agent-paused, .agent-patch, .agent-accepted, .agent-push {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--panel2); }
.aa-head, .ar-head, .ap-head, .apr-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.aa-ic { color: var(--violet); }
.aa-sub, .aa-note { color: var(--muted); font-size: 12.5px; margin: 6px 0; }
.aa-note { font-family: var(--mono); font-size: 11px; border-left: 2px solid var(--line); padding-left: 8px; margin-top: 10px; }
.aa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.aa-cell { display: flex; flex-direction: column; gap: 2px; }
.aa-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.aa-v { font-size: 12.5px; color: var(--text); }
.aa-scope { margin: 8px 0; }
.aa-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.aa-file { font-family: var(--mono); font-size: 11px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; color: var(--text-soft); }
.aa-file.risk-ask { border-color: var(--warn); color: var(--warn); }
.aa-warn { color: var(--bad); font-size: 12.5px; margin: 8px 0; font-weight: 500; }

/* run timeline */
.ar-head { justify-content: flex-start; }
.ar-spin { width: 12px; height: 12px; border: 2px solid var(--violet-lo); border-top-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite; }
.ar-spin.stopped { animation: none; border-color: var(--ok); border-top-color: var(--ok); }
.ar-meter { margin-left: auto; display: flex; gap: 5px; }
.ar-mchip { font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.ar-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ar-step { border-left: 2px solid var(--line); padding-left: 10px; }
.ar-step.active { border-left-color: var(--violet); }
.ar-step.done { border-left-color: var(--ok); }
.ar-step.failed { border-left-color: var(--bad); }
.ars-head { display: flex; align-items: center; gap: 8px; }
.ars-n { font-family: var(--mono); font-size: 11px; width: 20px; height: 20px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text-soft); }
.ar-step.done .ars-n { background: var(--ok); color: #fff; border-color: var(--ok); }
.ar-step.failed .ars-n { background: var(--bad); color: #fff; border-color: var(--bad); }
.ars-title { font-size: 12.5px; color: var(--text); }
.ars-body { margin: 4px 0 0 28px; display: flex; flex-direction: column; gap: 3px; }
.ars-line { font-size: 12px; color: var(--text-soft); }
.ars-rationale { color: var(--muted); font-style: italic; }
.ars-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--violet); background: var(--panel); border-radius: 4px; padding: 0 4px; }
.ars-tag.tag-warn { color: var(--warn); }
.ars-muted { color: var(--muted); }
.ars-op { font-family: var(--mono); font-size: 10px; text-transform: uppercase; padding: 0 4px; border-radius: 4px; }
.op-write { background: rgba(74,143,92,.14); color: var(--ok); }
.op-edit { background: rgba(107,47,184,.12); color: var(--violet-mid); }
.ars-tail { font-family: var(--mono); font-size: 10.5px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; margin-top: 3px; white-space: pre-wrap; max-height: 160px; overflow: auto; color: var(--bad); }
.chip-exit { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 6px; }
.chip-exit.ok { background: rgba(74,143,92,.14); color: var(--ok); }
.chip-exit.bad { background: rgba(193,79,61,.12); color: var(--bad); }
.chip-cls { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--panel); border: 1px solid var(--warn); color: var(--warn); border-radius: 5px; padding: 0 5px; }

/* patch review / accepted / push */
.apr-stat { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 4px 0 8px; }
.apr-diff { margin: 8px 0; }
.agent-paused .ask-foot, .agent-patch .ask-foot, .agent-accepted .ask-foot, .agent-approve .ask-foot, .agent-push .ask-foot { margin-top: 12px; }

/* diff renderer (diff.js) */
.diff-file { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.diff-fhead { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--panel2);
  border: 0; border-bottom: 1px solid var(--line); padding: 7px 10px; cursor: pointer; font: inherit; }
.diff-caret { color: var(--muted); font-size: 10px; width: 10px; }
.diff-path { font-family: var(--mono); font-size: 12px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-nums { display: flex; gap: 6px; font-family: var(--mono); font-size: 11px; }
.d-add { color: var(--ok); } .d-del { color: var(--bad); }
.diff-body { max-height: 340px; overflow: auto; }
.diff-hunk-head { font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: var(--panel2);
  padding: 3px 10px; border-top: 1px solid var(--line); }
.diff-hunk { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.d-line { display: flex; padding: 0 10px; white-space: pre-wrap; word-break: break-word; }
.d-line.d-ins { background: rgba(74,143,92,.10); }
.d-line.d-rem { background: rgba(193,79,61,.10); }
.d-sign { width: 12px; flex-shrink: 0; color: var(--muted); }
.d-ins .d-sign { color: var(--ok); } .d-rem .d-sign { color: var(--bad); }
.d-txt { flex: 1; }

/* runs drawer rows (reuse .sessions-drawer / .sd-*) */
.sd-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; }
.sd-item:hover { background: var(--panel2); }
.sd-item-main { flex: 1; min-width: 0; }
.sd-actions { display: flex; flex-direction: column; gap: 4px; }
.sd-actions .btn { font-size: 11px; padding: 3px 8px; }

/* ===== Hosted mode (multi-tenant web): hide local-only chrome; repo-source picker for Plan ===== */
body.hosted #folderBtn, body.hosted #agentRunsBtn, body.hosted #runLiveBtn,
body.hosted #desktopBtn { display: none !important; }
.repo-drop { display: block; margin: 8px 0; padding: 18px 12px; text-align: center; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 10px; color: var(--text-soft); font-size: 13px;
  transition: border-color var(--t-hover), background var(--t-hover); }
.repo-drop:hover { border-color: var(--accent); background: var(--panel2); }
.repo-or { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 10px 0 4px; }