:root {
  --ink: #1a2420;
  --ink-soft: #43514a;
  --ink-faint: #5d6b62;
  --paper: #ffffff;
  --sand: #f3efe6;
  --sand-deep: #e7e0d1;
  --line: #d9d3c2;
  --green: #1c6b4a;
  --green-dark: #145239;
  --amber: #b3541e;
  --red: #a3282b;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(26, 36, 32, 0.08), 0 4px 14px rgba(26, 36, 32, 0.07);
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --term-paper: #FCFBF7;
  --term-paper-line: #E7E2D4;
  --term-ink: #26241F;
  --term-room-dot: #C4BBA2;
  --font-term: "Courier Prime", ui-monospace, monospace;
}
html { box-sizing: border-box; overscroll-behavior: none; }
html, body { max-width: 100%; overflow-x: clip; overflow-y: hidden; height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--green-dark); }
img, svg, video, canvas, iframe { max-width: 100%; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 99; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* Workshop shell replaces the topbar (Wave 1): .ws-side + .cmdstrip below. */

main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
main.wide { max-width: none; padding: 1rem 1.25rem 3rem; }
.lede { color: var(--ink-soft); font-size: 1.05rem; max-width: 46rem; }

.btn { font: inherit; font-weight: 700; padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.95rem; white-space: nowrap; }
.btn:hover { background: #000; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--green); border-color: var(--green); }
.btn.primary:hover { background: var(--green-dark); }
.btn.ghost { background: #fff; color: var(--ink); }
.btn.ghost:hover { background: var(--sand); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.small { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.btn.linklike { background: none; border: none; color: var(--green-dark); padding: 0.2rem 0; text-decoration: underline; }
/* Design law: plain-before-boxed. Mere navigation and simple actions are
   plain text in the top-nav voice (ink, 550, no box); boxes stay for cards
   and the one primary action in a row. Works on <button> and <a>. */
.plain { background: none; border: none; box-shadow: none; color: var(--ink); font-weight: 550; font-size: 0.95rem; padding: 0.3rem 0; white-space: nowrap; flex: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; font-family: inherit; }
button.plain { font: inherit; }
.plain:hover { text-decoration: underline; }
.plain:disabled { opacity: 0.45; cursor: default; text-decoration: none; }
.plain.danger { color: var(--red); }
.button-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
/* F1: the preview approve button fits phone widths. The label wraps only at
   the parenthetical (wireApproveButton splits it onto an atomic
   .approve-keep span), so narrow cards break exactly there — never mid-word
   — while wide layouts keep one line at the normal .btn size. Scoped to the
   preview approve button only; every other .btn renders exactly as today. */
#approveBtn { white-space: normal; text-align: center; }
#approveBtn .approve-keep { display: inline-block; }
/* Phone KEY bar (proofs Job 4): phone widths only, one in-flow line above
   the terminal pane — never an overlay, so it cannot cover the prompt. */
.term-keys { display: none; margin-top: 0.6rem; }
@media (max-width: 46rem) {
  .term-keys { display: flex; }
  .term-key { min-width: 2.75rem; }
}

.field { margin-bottom: 0.9rem; }
.field label, .field .label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.field .hint { font-weight: 400; color: var(--ink-faint); font-size: 0.85rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 0.6rem 0.7rem;
  border: 1px solid #8f9a93; border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
textarea { min-height: 5rem; resize: vertical; }
input[type="color"] { width: 3rem; height: 2.4rem; padding: 0.15rem; border: 1px solid #8f9a93; border-radius: var(--radius-sm); background: #fff; }
/* No-zoom law (site-wide from 2026-10-23): iOS Safari magnifies the page when
   a sub-16px text field takes focus. At phone widths every text-entry control
   renders at 16px or larger — desktop is untouched. */
@media (max-width: 639px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="search"], input:not([type]), select, textarea {
    font-size: 16px;
  }
}

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.panel { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.notice { border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin: 0 0 1rem; font-size: 0.93rem; }
.notice.error { background: #fbe9e9; border: 1px solid #d98c8c; color: #5f1a1c; }
.notice.ok { background: #e6f2ea; border: 1px solid #7db894; color: #173f2a; }
.notice.info { background: #e9eefb; border: 1px solid #93a5d8; color: #232f55; }
/* Terminal Link Status L3: the standing banner is one line that
scrolls sideways on phone — it never wraps into a stack and never
covers the canvas or the tab bar (static flow, page scrolls under). */
.term-banner { white-space: nowrap; overflow-x: auto; }
.cost-note { font-size: 0.85rem; color: var(--ink-faint); }
.cost-note strong { color: var(--ink); }

.auth-wrap { max-width: 26rem; margin: 2rem auto; }
.auth-wrap .card { padding: 1.75rem; }
.auth-alt { text-align: center; margin-top: 1rem; font-size: 0.92rem; color: var(--ink-soft); }

.dash { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; align-items: start; }
.folders { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem; }
.folders h2 { font-size: 0.95rem; font-family: var(--font-ui); margin-bottom: 0.5rem; }
.folder-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.folder-list button { width: 100%; text-align: left; font: inherit; background: none; border: none; border-radius: var(--radius-sm); padding: 0.4rem 0.55rem; cursor: pointer; color: var(--ink); display: flex; justify-content: space-between; gap: 0.4rem; }
.folder-list button[aria-current="true"] { background: #fff; font-weight: 700; box-shadow: var(--shadow); }
.folder-list .count { color: var(--ink-faint); font-size: 0.82rem; }
.dash-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
/* No White Loads L9: the dashboard's right column breathes — every
   block carries the same gap at every width, so stacked cards never
   sit flush. Toolbar/sort-row margins yield to the column rhythm. */
.dash-main { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.dash-main > .dash-toolbar, .dash-main > .sort-row, .dash-main > #baWrap { margin-bottom: 0; }
/* No White Loads L6: account Sign out / Change email are full-width
   buttons, not quiet links — the state they carry shows plainly. */
.btn.block { display: block; width: 100%; margin-top: 0.6rem; }
.dash-toolbar .search { flex: 1 1 12rem; }
/* No White Loads L10: the sort row and the kind filter are each one
   line — sideways on narrow screens, never wrapped into a second row. */
.sort-row { display: flex; gap: 0.25rem 0.9rem; align-items: baseline; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-bottom: 0.8rem; }
.sort-row::-webkit-scrollbar { display: none; }
.sort-row > * { flex: none; }
.sort-row button[aria-current="true"] { font-weight: 700; color: var(--ws-ink); }
/* L11: the category tag — plain words beside Live/Draft, never
   chip-loud, so the kind never outshouts publish state. */
.kind-tag { font-size: 0.8rem; color: var(--ws-sub); white-space: nowrap; margin-left: 0.5rem; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.project-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.project-card img.thumb { width: 100%; height: 8.5rem; object-fit: cover; object-position: top; display: block; background: var(--sand-deep); }
.project-card .tile { height: 8.5rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: #fff; }
.project-card .body { padding: 0.8rem 0.95rem 0.95rem; }
.project-card h3 { margin: 0; font-size: 1.02rem; font-family: var(--font-ui); }
.project-card h3 a { color: var(--ink); text-decoration: none; }
.project-card h3 a:hover { text-decoration: underline; }
.project-card .meta { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.2rem; }
.empty { text-align: left; padding: 2.5rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--sand); }

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.door { display: block; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.door:hover { border-color: var(--green); }
.door h3 { font-family: var(--font-ui); font-size: 1.05rem; margin-bottom: 0.3rem; }
.door p { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.5rem; }
.door .cost-note { margin: 0; }
.steps { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0 0 1.25rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-faint); flex-wrap: wrap; }
.steps li[aria-current="step"] { color: var(--ink); }
.steps li + li::before { content: "→"; margin-right: 0.5rem; color: var(--ink-faint); }
.style-pick { display: flex; gap: 0.6rem 1rem; flex-wrap: nowrap; overflow-x: auto; }
/* Ops console: plain rows that scroll sideways in their own box. */
.ops-row { display: flex; gap: 0.9rem; align-items: baseline; overflow-x: auto; padding: 0.55rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ops-row > * { flex: 0 0 auto; min-width: 0; }
.ops-actions { display: inline-flex; gap: 0.6rem; align-items: baseline; white-space: nowrap; }
.ops-actions input { min-width: 10rem; }
.style-pick button { font: inherit; border: 0; border-bottom: 2px solid transparent; background: none; border-radius: 0; padding: 0.4rem 0.15rem 0.5rem; cursor: pointer; flex: 0 0 auto; white-space: nowrap; color: inherit; }
.style-pick button[aria-pressed="true"] { border-bottom-color: var(--green); background: none; font-weight: 600; }
.style-pick .sw { display: flex; gap: 3px; margin-bottom: 0.4rem; }
.style-pick .sw i { width: 1.3rem; height: 1.3rem; border-radius: 5px; display: block; border: 1px solid rgba(0,0,0,0.12); }
.dropzone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 2rem 1.25rem; text-align: center; background: var(--sand); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--green); }
.dropzone img.preview { max-height: 12rem; margin-top: 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--line); }
/* No White Loads L8: the Market toolbar — one row on desktop, stacked
   at phone widths with Search on its own line under its fields. */
.mkt-filters { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; margin-bottom: 0.8rem; }
  .template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.template-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.template-card .mock { height: 8rem; padding: 1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.template-card .mock i { display: block; border-radius: 4px; }
.template-card .body { padding: 0.8rem 0.95rem 0.95rem; }

.layout-preview .card { margin-bottom: 0.7rem; }
.layout-preview h3 { font-family: var(--font-ui); font-size: 0.98rem; }
/* Intake clarity: the meaning line sits UNDER its row (never inside a
   sideways scroller); the Other field reads 16px+ at every width; the
   sketch frame is one phone-width column with a sideways page line. */
.meaning-line { margin: 0.3rem 0 0.6rem; }
.other-wrap { margin-top: 0.5rem; }
.other-wrap input { font-size: 16px; width: 100%; }
.other-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.sketch-pages { margin: 0.5rem 0; }
.sketch-frame { max-width: 24rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 0.8rem; }
.sketch-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem; margin-bottom: 0.6rem; }
.sketch-box > strong { display: block; }
.sketch-box.ghost { opacity: 0.55; border-style: dashed; }
.sketch-head { display: block; font-size: 1.1rem; margin-top: 0.3rem; }
.sketch-img { height: 4rem; background: var(--sand); border-radius: var(--radius-sm); margin: 0.4rem 0; }
.sketch-line { height: 0.55rem; background: var(--line); border-radius: 3px; margin: 0.3rem 0; }
.sketch-empty { display: block; font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.3rem; }
.swatches { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.swatches span { width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid rgba(0,0,0,0.15); display: inline-block; }
.log { list-style: none; margin: 0.75rem 0 0; padding: 0; max-height: 16rem; overflow: auto; font-size: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.log li { padding: 0.4rem 0.65rem; border-bottom: 1px solid #eee9db; }
.log li:last-child { border-bottom: none; }
.log li.done { background: #e6f2ea; font-weight: 700; }
.log li.failed, .log li.refused { background: #fbe9e9; font-weight: 700; }
.log li.cost { color: var(--ink-faint); }

.workspace { display: grid; grid-template-columns: minmax(19rem, 26rem) 1fr; gap: 1rem; align-items: start; }
.chat { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: calc(100vh - 12rem); min-height: 30rem; }
.chat-messages { flex: 1; overflow: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.msg { max-width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.92rem; }
.msg.user { background: var(--ink); color: #fff; align-self: flex-end; }
.msg.assistant { background: var(--sand); align-self: flex-start; }
.msg.system { background: none; border: 1px dashed var(--line); color: var(--ink-faint); font-size: 0.83rem; align-self: stretch; }
.msg.live { border: 1px solid var(--line); background: #fff; align-self: stretch; font-size: 0.85rem; }
.chat-compose { border-top: 1px solid var(--line); padding: 0.7rem; }
.chat-compose textarea { min-height: 3.5rem; }
.chat-compose .row { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; flex-wrap: wrap; }
.chat-compose .row .btn { flex: 1; }
.preview-pane { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.preview-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--sand); }
.preview-bar .modes { display: flex; gap: 1.25rem; flex: none; align-items: center; }
/* Named row, plain before boxed: unpressed modes are plain text in the
   top-nav voice (one line each, sized to their label); the pressed mode
   keeps the filled dark button. The bar scrolls sideways as one line.
   The pressed button is a true pill in the canvas Publish pill's
   proportions (7px 12px, fully round): the plain-text rule above strips
   its padding to 0.3rem 0, which left the label edge-to-edge in a boxy
   10px-radius slab that crowded the bar — the owner's phone verdict
   ("not sitting well in the box", 2026-11-02). */
.preview-bar .modes .btn { background: none; border-color: transparent; box-shadow: none; font-weight: 550; padding: 0.3rem 0; white-space: nowrap; flex: none; }
.preview-bar .modes .btn:not([aria-pressed="true"]):hover { background: none; border-color: transparent; text-decoration: underline; }
.preview-bar .modes .btn[aria-pressed="true"] { background: var(--ink); color: #fff; padding: 7px 12px; border-radius: 999px; }
.preview-frame-wrap { position: relative; overflow: hidden; }
/* P1.2: device-width preview. The iframe keeps layout width; the wrap
   centers the chosen device column. */
.preview-frame-wrap[data-pw="phone"] iframe.preview { max-width: 390px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.preview-frame-wrap[data-pw="tablet"] iframe.preview { max-width: 768px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.preview-frame-wrap[data-pw="desktop"] iframe.preview { max-width: none; }
/* P1.7: jump-back-in row. */
.jump-row { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.25rem 0; }
.jump-item { display: flex; flex-direction: column; gap: 0.2rem; min-width: 7rem; max-width: 9rem; text-decoration: none; color: inherit; }
.jump-item .thumb, .jump-item .tile { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: #fff; }
.jump-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
iframe.preview { width: 100%; height: calc(100vh - 20rem); min-height: 26rem; border: none; display: block; background: #fff; }
.pick-banner { padding: 0.55rem 0.8rem; font-size: 0.88rem; font-weight: 700; background: #fff4e3; border-bottom: 1px solid var(--line); }
.edit-tools { border-top: 1px solid var(--line); padding: 0.7rem 0.8rem; display: none; gap: 0.7rem; flex-wrap: wrap; background: #fff; }
.edit-tools.open { display: flex; }
.edit-tools .field { margin: 0; min-width: 7rem; flex: 1 1 7rem; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.history-list li:last-child { border-bottom: none; }
.history-list time { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(26, 36, 32, 0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal { background: #fff; border-radius: var(--radius); padding: 1.5rem; max-width: 28rem; width: 100%; box-shadow: var(--shadow); }
.toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.5rem; z-index: 60; width: min(26rem, calc(100% - 2rem)); }
.toast { background: var(--ink); color: #fff; border-radius: var(--radius-sm); padding: 0.7rem 1rem; font-size: 0.9rem; box-shadow: var(--shadow); }
.toast.error { background: var(--red); }

.sessions { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sessions th, .sessions td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
.sessions th { font-size: 0.82rem; color: var(--ink-faint); }
.secret-box { font-family: ui-monospace, monospace; background: var(--sand); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; word-break: break-all; font-size: 0.95rem; }
.guide-grid { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: start; }
.guide-nav { list-style: none; margin: 0; padding: 0; position: sticky; top: 4.5rem; }
.guide-nav a { display: block; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-soft); font-size: 0.92rem; }
.guide-nav a[aria-current="true"] { background: var(--sand); font-weight: 700; color: var(--ink); }
.guide-phase { font-weight: 700; font-size: 0.85rem; padding: 0.7rem 0.6rem 0.1rem; color: var(--ink); }
.guide-phase:first-child { padding-top: 0.4rem; }
.guide-article { max-width: 44rem; }
.guide-article ol li, .guide-article ul li { margin-bottom: 0.5rem; }

@media (max-width: 60rem) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace > * { min-width: 0; }
  .chat { max-height: none; }
  iframe.preview { height: 70vh; }
}
@media (max-width: 46rem) {
  /* On a phone the Phone preview fills the editor box edge to edge,
     like Tablet and Desktop do — the 390px cap is for wide screens,
     where a centered phone column is the point of the preview. */
  .preview-frame-wrap[data-pw="phone"] iframe.preview { max-width: none; }
  /* minmax(0, …) + item min-width:0: the single column must never be
     forced wider than the viewport by content minimums (long folder
     names, jump-row items, wide thumbnails). Rows that scroll sideways
     (jump-row, nav) still scroll inside their own box. */
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash > * { min-width: 0; }
  /* No White Loads L7: long tool/client lists stack — no side-by-side
     pairs left over at phone widths. */
  .mcp-clients > li { display: flex; flex-direction: column; gap: 0.15rem; }
  table.sessions thead { display: none; }
  table.sessions, table.sessions tbody, table.sessions tr, table.sessions td { display: block; width: 100%; }
  table.sessions tr { margin-bottom: 0.9rem; }
  table.sessions td.actions { display: flex; gap: 0.6rem; }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .mkt-filters > .field:not(.filter-wide) { flex: 1 1 8rem; }
  .mkt-filters > .filter-wide, .mkt-filters > .button-row { flex: 1 1 100%; }
  .mkt-filters > .filter-wide { order: 2; }
  .mkt-filters > .button-row { order: 3; }
  .guide-grid > * { min-width: 0; }
  .guide-nav { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; }
  .guide-nav > * { flex: 0 0 auto; }
  main { padding: 1.25rem 0.9rem 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- T2 Typewriter (2026-11-04): the one terminal skin. Paper cards in
   Courier Prime with the workshop stamp, sitting in the cool fading-dots
   room. One canonical system: no Calm, no Circuit Deck underneath. ---- */
.term-room {
  position: relative;
  background: linear-gradient(#F8F5EE, #F5F5F7 70%);
  border-radius: 18px;
  padding: 44px 46px 40px;
}
.term-room > .term-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--term-room-dot) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 75%);
  mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 75%);
}
/* Paper cards on the room: launcher cards, header cards, session paper.
   Positioned above the dots; the paper itself stays texture-free. */
.term-room .card, .term-room .project-card {
  position: relative;
  background: var(--term-paper);
  border: 1px solid var(--term-paper-line);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(17, 17, 20, 0.1);
  color: var(--term-ink);
}
.term-room .card h2, .term-room .project-card h3 {
  color: var(--term-ink);
}
/* The workshop stamp: brand mark, locale-free (like a logo). */
.term-stamp {
  display: inline-block;
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  transform: rotate(-2deg);
  font-family: var(--font-term);
  white-space: nowrap;
}
/* The session paper: titlebar, toolbar, and pane on one card. A flex
   column, so the pane always fits the paper exactly: the titlebar takes
   its line and #term takes the rest, and the fitter counts rows that
   fit. A taller pane would clip rows the prompt probe must see. */
.term-room #termWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--term-paper);
  border: 1px solid var(--term-paper-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(17, 17, 20, 0.1);
  color: var(--term-ink);
  padding: 26px 26px 20px;
}
/* Session header badge: transparent on the paper, never a dark bar.
   Top-aligned items, so every action's top edge sits on the same line —
   centered mixed-height items round to sub-pixel tops that read as
   disorder. */
.term-room .dash-toolbar {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 0.9rem;
  margin-bottom: 0;
  color: var(--term-ink);
  align-items: flex-start;
}
.term-room .dash-toolbar h2 {
  color: var(--term-ink);
}
/* Pane bar keeps its REAL content (agent name + connection state), on
   paper. Dots removed from the session markup (nothing invented). */
.term-room .term-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border-bottom: 1px solid var(--term-paper-line);
  color: var(--term-ink);
  font-family: var(--font-term);
  font-size: 0.8rem;
  padding: 0 0 0.9rem;
  margin-bottom: 0.9rem;
}
.term-room .term-titlebar .tlabel {
  font-weight: 700;
  color: var(--term-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-room .term-titlebar .tstatus {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--green-dark);
  white-space: nowrap;
}
.term-room .term-titlebar .tstatus i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  flex: none;
}
.term-room #term {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--term-paper);
  padding: 0;
}
.term-room #term .xterm-viewport {
  background: var(--term-paper);
}
.term-room #term .xterm-rows {
  font-family: var(--font-term);
  color: var(--term-ink);
}
/* Notices keep their semantic app colors, on paper. */
.term-room #termAgentState .notice {
  background: #FFF7E8;
  border: 1px solid #F0DFC0;
  color: #6B4E1E;
}
/* Starter chips: soft green pills on paper. */
.term-room #termLane [data-starter] {
  background: #EDF4F0;
  color: #1F7A5C;
  border: 1px solid #D5E6DD;
  border-radius: 999px;
}
/* Session inputs: real 16px text, no focus zoom, on paper. */
.term-room #termTextPanel textarea, .term-room #termFilesPanel input {
  font-size: 16px;
  background: var(--term-paper);
  border: 1px solid var(--term-paper-line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  color: var(--term-ink);
}
.term-room #termState {
  color: var(--term-ink);
}
/* T2 phone posture: the room tightens, the paper keeps its margins, the
   type drops to the preview's 13.5px / 1.95. */
@media (max-width: 46rem) {
  .term-room {
    padding: 26px 14px 30px;
  }
  .term-room #termWrap {
    padding: 20px 16px 14px;
  }
}
/* CHIP mascot: stills in the soft round white badge, video in a frame. */
.mascot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ECE8DF;
  border-radius: 50%;
  padding: 5px;
  vertical-align: middle;
  flex: none;
}
.mascot-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mascot-frame {
  display: inline-block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ECE8DF;
  background: #fff;
  vertical-align: middle;
}
.mascot-frame .mascot-video, .mascot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.mascot-row { display: flex; align-items: center; gap: 0.6rem; }
.mascot-row .mascot-badge { flex: none; }
.oops-inline { display: inline-flex; vertical-align: -6px; margin-right: 0.5rem; }
.si-hero { margin: 0 0 1rem; }

/* ---- Workshop architecture (Wave 1 reskin). Tokens exact from the
   approved reference. Green (#1C6B4A) only for live/success + mascot. */
:root {
  --ws-ground: #F5F5F7;
  --ws-panel: #FFFFFF;
  --ws-ink: #111114;
  --ws-line: #E1E5EB;
  --ws-line-soft: #ECEEF2;
  --ws-sub: #5B6472;
  --ws-chrome: #0B0B0E;
  --ws-panelblack: #15151A;
  --ws-blackline: #26262F;
  --ws-nav-dim: #A7AEB9;
  --ws-nav-ink: #EDEFF2;
  --ws-green: #1C6B4A;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
  background: var(--ws-ground);
  color: var(--ws-ink);
  font-family: var(--font-body);
}
a { color: var(--ws-ink); }
h1, h2, h3 { color: var(--ws-ink); }
.ws-main h1 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.01em; }
.card { background: var(--ws-panel); border-color: var(--ws-line); border-radius: 12px; }
.panel { background: var(--ws-ground); border-color: var(--ws-line); border-radius: 12px; }
.btn { border-radius: 10px; }
.jump-item .thumb, .jump-item .tile { border-radius: 8px; }

/* Shell frame: black sidebar + content column with command strip.
   Shell scroll lock (owner report, 2026-11-04): the shell is locked to
   the viewport and the page itself never scrolls — a two-finger swipe
   over any non-scrolling region used to drag the whole app because the
   document was the scroller. The content column (.ws-main) is the only
   vertical scroller; overscroll dies at the root (body rule above) and
   at the column (contain, below). The router resets/restores the
   column's scroll position per view (app.js shellScroller). */
.ws { display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
/* Shell scroll lock, second pass (owner retest, 2026-11-04): the first
   lock relied on body's overscroll value propagating to the viewport
   and on per-scroller containment; the editor still moved on the
   owner's machine after a hard refresh. Containment is now blanket
   inside the shell — no inner scroller hands a gesture upward — and
   the root carries its own lock (html rule at the top of this file),
   so no engine's propagation or overflow-pairing rule can reopen it. */
.ws, .ws * { overscroll-behavior: contain; }
.ws-side {
  background: var(--ws-chrome);
  color: var(--ws-nav-ink);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1rem;
  box-sizing: border-box;
}
.ws-brand { font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; color: #fff; text-decoration: none; letter-spacing: -0.02em; }
.ws-brand .dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ws-green); margin-left: 0.1rem; }
.ws-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.ws-nav a {
  color: var(--ws-nav-dim);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  white-space: nowrap;
}
.ws-nav a:hover { color: #fff; }
.ws-nav a[aria-current="page"] { color: #fff; background: var(--ws-panelblack); border-left-color: var(--ws-green); font-weight: 700; }
.ws-side-foot { margin-top: auto; }
.ws-mascot {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  background: var(--ws-panelblack);
  border: 1px solid var(--ws-blackline);
  border-radius: 12px;
  padding: 0.8rem;
}
.ws-mascot img { width: 3rem; height: 3rem; border-radius: 8px; flex: none; object-fit: cover; background: var(--ws-green); }
.ws-mascot-facts { min-width: 0; }
.ws-mascot-facts p { margin: 0; }
.ws-mascot-mail { color: #fff; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ws-mascot-line { color: var(--ws-nav-dim); font-family: var(--font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ws-main { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.cmdstrip {
  background: var(--ws-chrome);
  color: var(--ws-nav-ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.55rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
  /* Strip integrity (owner report, 2026-11-04): as a scroll container
     (overflow-x: auto) inside the .ws-main flex column, the strip's
     automatic minimum height was 0 — the column squashed it below its
     content height once a tall view loaded, and the auto-computed
     vertical overflow let its text sit part-scrolled and clipped.
     flex: none holds its full height; overflow-y: hidden keeps the
     sideways scroll while ending the vertical clip. */
  flex: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
}
.cmdstrip::-webkit-scrollbar { display: none; }
.cmdstrip .strip-path { flex: none; }
.cmdstrip .strip-mail { margin-left: auto; color: var(--ws-nav-dim); flex: none; }
.cmdstrip .strip-live { color: var(--ws-green); font-weight: 700; }
/* Desktop panel toggles (owner ask, 2026-11-03): strip buttons close the
   sidebar / the workshop rail so the working area expands. The buttons
   live in the strip; the closed-state effects apply at desktop widths
   only, and the buttons hide where the layout stacks. */
.strip-toggle { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; background: none; border: none; border-radius: 7px; color: var(--ws-nav-dim); cursor: pointer; }
.strip-toggle:hover { color: #fff; background: var(--ws-panelblack); }
.strip-toggle svg { width: 1.05rem; height: 1.05rem; display: block; }
#stripRailToggle { display: none; }
body.in-workspace #stripRailToggle { display: inline-flex; }
/* E2: inside the studio the desktop arrow stays hidden (the studio is
   a workspace route, but in-studio removes the in-workspace showing).
   Collapsed, the sidebar header block and the account mail hide and
   the studio takes the freed height. */
body.in-studio.studio-head-collapsed .ws-side { display: none; }
body.in-studio.studio-head-collapsed #stripMail { display: none; }
/* Collapsing the stacked header leaves one grid row: without this the
   main falls into the leftover auto track and the stage shrinks. At
   desktop widths this restates the row the shell already has. */
body.in-studio.studio-head-collapsed .ws { grid-template-rows: minmax(0, 1fr); }
@media (min-width: 64.01rem) {
  .ws.side-closed { grid-template-columns: minmax(0, 1fr); }
  .ws.side-closed .ws-side { display: none; }
  .ws-grid.rail-closed { grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr); }
  .ws-grid.rail-closed .ws-rail { display: none; }
}
.ws-main main { max-width: 1180px; margin: 0; padding: 1.75rem 1.5rem 4rem; width: 100%; box-sizing: border-box; }
.ws-main main.wide { max-width: none; }

/* My sites: roomy thumbnail rows, one black primary action.
   Live/draft chips are deliberately absent: the projects list carries no
   publish status, and invented states are a defect (reported). */
.site-rows { display: flex; flex-direction: column; gap: 0.9rem; }
.site-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  background: var(--ws-panel);
  border: 1px solid var(--ws-line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.site-row .thumb, .site-row .tile {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  border: 1px solid var(--ws-line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  background: var(--ws-sub);
}
.site-row h3 { margin: 0; font-size: 1.02rem; font-family: var(--font-body); }
.site-row h3 a { color: var(--ws-ink); text-decoration: none; }
.site-row h3 a:hover { text-decoration: underline; }
.site-row .meta { font-size: 0.85rem; color: var(--ws-sub); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-row .row-actions { display: flex; gap: 0.9rem; align-items: center; }
.site-row h3 { display: flex; align-items: center; gap: 0.55rem; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ws-panel);
  border: 1px solid var(--ws-line);
  color: var(--ws-sub);
  border-radius: 8px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
  flex: none;
}
.chip.live { border-color: var(--ws-green); color: var(--ws-green); }

/* ---- Workshop body (Wave 2, per R2): title row, chat + canvas + rail,
   prompt bar full-width below. The chat column keeps every control it
   ever had; only its frame and the compose's address change. */
.ws-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.ws-title h1 { margin: 0; font-size: 1.25rem; }
.ws-subbar { margin-bottom: 1rem; }
.ws-grid { display: grid; grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr) 16.375rem; gap: 1rem; align-items: start; }
.ws-grid .chat { min-width: 0; }
.promptbar { grid-column: 1 / -1; background: var(--ws-panel); border: 1px solid var(--ws-line); border-radius: 12px; padding: 0.85rem 1rem; }
.promptbar .chat-compose { border-top: none; padding: 0; }
.promptbar .chat-compose textarea { min-height: 2.6rem; }
.canvas-card .preview-bar { background: var(--ws-panel); }
.canvas-dots { color: var(--ws-sub); letter-spacing: 0.2em; font-size: 0.7rem; flex: none; }
.canvas-label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ws-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.ws-rail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rail-card { background: var(--ws-panel); border: 1px solid var(--ws-line); border-radius: 12px; padding: 0.9rem 1rem; }
.rail-card h4 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ws-sub); margin: 0 0 0.6rem; }
.rail-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.34rem 0; border-top: 1px solid var(--ws-line-soft); font-size: 0.88rem; }
#secRows > .rail-row:first-child { border-top: none; }
.rail-row > span:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
#railReview p { font-size: 0.88rem; }
@media (max-width: 64rem) {
  /* One column in DOM order (chat, canvas, rail, prompt) — the page
     scrolls, nothing overflows. On phones the editor comes first —
     editor → prompt → history → rail — so the canvas is on screen
     without scrolling past the whole chat history to reach it. */
  .ws-grid { display: flex; flex-direction: column; align-items: stretch; }
  .ws-grid > * { min-width: 0; }
  /* Panel toggles are a desktop affordance — the stacked layout has no
     side panels to close. */
  .strip-toggle { display: none !important; }
  /* E2 exception: inside the studio the rail arrow is the header
     block's collapse/restore control, so it shows on phone. */
  body.in-studio #stripRailToggle { display: inline-flex !important; }
  .ws-grid .canvas-card { order: 1; }
  .ws-grid .promptbar { order: 2; }
  .ws-grid .chat { order: 3; }
  .ws-grid .ws-rail { order: 4; }
  /* The history rides in its own box, like the site inside the editor:
     capped height, the thread scrolls inside it, the page stays short.
     (The ≤60rem block above lifts the cap entirely — max-height: none —
     which is what stretched the phone page to the whole thread.) */
  .ws-grid .chat { max-height: 60vh; min-height: 0; }
  .ws-grid .chat-messages { overscroll-behavior: contain; }
}
.folders { background: var(--ws-panel); border-color: var(--ws-line); }
.folder-list button[aria-current="true"] { background: var(--ws-ground); box-shadow: none; border: 1px solid var(--ws-line); }
.dash-toolbar .btn.primary { background: var(--ws-ink); border-color: var(--ws-ink); }
.dash-toolbar .btn.primary:hover { background: #000; }
main .empty .btn.primary { background: var(--ws-ink); border-color: var(--ws-ink); }

/* ---- Account (Wave 3, per R2 Workshop C): panel grid, fact rows, plan
   rows, one-line choice rows. Copy of record is untouched — the fact rows
   dress the existing status sentences (hairlines + mono figures) instead
   of splitting them into new label/value strings. */
.acc-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); max-width: 70rem; align-items: start; }
.acc-grid > section { min-width: 0; }
.acc-full { grid-column: 1 / -1; }
.factlist { margin: 0.4rem 0; }
.factlist p { margin: 0; padding: 0.42rem 0; border-bottom: 1px solid var(--ws-line-soft); font-size: 0.9rem; }
.factlist p:last-child { border-bottom: 0; }
.planrow { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--ws-line-soft); }
.planrow:last-child { border-bottom: 0; }
.planrow .pn { font-weight: 600; font-size: 0.95rem; }
.planrow .pd { font-size: 0.85rem; color: var(--ws-sub); margin-top: 0.15rem; line-height: 1.45; }
.planrow > div:first-child { min-width: 0; }
.planrow .btns { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
/* Choice rows ride one sideways-scrolling line, never stacked, never
   wrapped — the language row. Buttons are short; the row scrolls inside
   its own box so the page never overflows. */
.choice-row { display: flex; gap: 0.5rem; overflow-x: auto; white-space: nowrap; padding: 0.2rem 0; margin-top: 1rem; }
.choice-row > * { flex: 0 0 auto; }
/* Wave 4 Job 1: Account section headings onto the R2 type system (Inter).
   The pre-reskin --font-display serif is left untouched — older surfaces
   keep it; only Account headings move. Sizes unchanged. */
#accSlot h2, #accSlot h3 { font-family: var(--font-body); font-weight: 600; }
/* One black primary per Account panel: the generic .btn.primary is green,
   which R2 reserves for live/success — inside Account, primaries are ink. */
#accSlot .btn.primary { background: var(--ws-ink); border-color: var(--ws-ink); }
#accSlot .btn.primary:hover { background: #000; border-color: #000; }
@media (min-width: 64rem) {
  .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 64rem) {
  .planrow { flex-direction: column; align-items: stretch; }
  .planrow .btns { margin-left: 0; justify-content: flex-start; }
}

/* ---- Wave 4 remainder (R2 system): Inter headings, ink primaries.
   Copy of record untouched — headings keep their strings, only the face
   changes; every control keeps its id, handler, and behavior. Surfaces
   NOT covered (named in the report): terminal (own Calm theme), auth
   signed-out pages, white-label client view, workspace Wave-2 primaries. */
/* Headings: card/section titles onto Inter. */
.door h3 { font-family: var(--font-body); }
.template-card h3, .project-card h3 { font-family: var(--font-body); font-size: 1rem; margin: 0; }
.template-card h3 a, .project-card h3 a { color: inherit; text-decoration: none; }
.guide-article h2, .guide-article h3,
#doorSlot h2, #impSlot h2, #skSlot h2, #mktSlot h2, #mktSlot h3,
#mktdSlot h2, #tplUpdateSlot h3,
#rmRoot h2, #rmSlot h3, #clSlot h3, #opsRoot h2,
#wsSlot h2, #wdSlot h2, #pubSlot h2 { font-family: var(--font-body); }
/* Primaries: the generic .btn.primary is green (reserved for live/success).
   Inside these surfaces the primary action is ink black — same precedent
   as .dash-toolbar and #accSlot. */
#doorSlot .btn.primary, #tGrid .btn.primary, #impSlot .btn.primary,
#skSlot .btn.primary, #skIntent .btn.primary,
#mktSlot .btn.primary, #mktdSlot .btn.primary, #tplUpdateSlot .btn.primary,
.ops-row .btn.primary, #rmSlot .btn.primary,
#wsNew.btn.primary, #wsSlot .btn.primary, #wdSlot .btn.primary,
#pubSlot .btn.primary, #opsRoot .btn.primary, #rmRoot .btn.primary {
  background: var(--ws-ink); border-color: var(--ws-ink);
}
#doorSlot .btn.primary:hover, #tGrid .btn.primary:hover, #impSlot .btn.primary:hover,
#skSlot .btn.primary:hover, #skIntent .btn.primary:hover,
#mktSlot .btn.primary:hover, #mktdSlot .btn.primary:hover, #tplUpdateSlot .btn.primary:hover,
.ops-row .btn.primary:hover, #rmSlot .btn.primary:hover,
#wsNew.btn.primary:hover, #wsSlot .btn.primary:hover, #wdSlot .btn.primary:hover,
#pubSlot .btn.primary:hover, #opsRoot .btn.primary:hover, #rmRoot .btn.primary:hover {
  background: #000; border-color: #000;
}
/* Guide nav: mono phase kickers (R2 card-label system), ink active pill
   matching the sidebar, and a sideways-scrolling line at phone widths. */
.guide-phase { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ws-sub); }
.guide-nav a { color: var(--ws-sub); }
.guide-nav a[aria-current="true"] { background: var(--ws-ink); color: #fff; }
/* No White Loads: shape-first skeletons in Makeasy's skeleton dialect —
   gray blocks and bars only, never fake words. The shape holds the
   layout while data loads, then real content replaces it whole. */
.sk { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem 0; }
.sk-title { height: 1.7rem; width: 14rem; max-width: 60%; border-radius: 6px; background: var(--sand-deep); }
.sk-bar { height: 0.95rem; border-radius: 6px; background: var(--sand-deep); }
.sk-label { height: 0.8rem; width: 7rem; border-radius: 6px; background: var(--sand-deep); }
.sk-btn { height: 2.2rem; width: 9rem; border-radius: var(--radius-sm); background: var(--sand-deep); }
.sk-link { height: 0.9rem; width: 5rem; border-radius: 6px; background: var(--sand-deep); align-self: center; }
.sk-btnrow { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.sk-input { display: block; height: 2.4rem; border-radius: 8px; background: var(--sand-deep); margin-top: 0.3rem; }
.sk-field { display: flex; flex-direction: column; gap: 0.25rem; }
.sk-section { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sk-siterow { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4rem; gap: 0.8rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ws-panel); }
.sk-tile { display: block; aspect-ratio: 8 / 5; border-radius: 8px; background: var(--sand-deep); }
.sk-lines { display: flex; flex-direction: column; gap: 0.4rem; }
.sk-chip { display: block; height: 1.3rem; border-radius: 8px; background: var(--sand-deep); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.sk-card { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sk-mini { gap: 0.45rem; padding: 0.5rem 0; }
.sk-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; }
.sk-chat { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sk-pane { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-height: 24rem; }
@media (max-width: 46rem) {
  .sk-split { grid-template-columns: minmax(0, 1fr); }
  .sk-siterow { grid-template-columns: minmax(0, 1fr); }
  .sk-tile { aspect-ratio: 16 / 7; }
}
@media (prefers-reduced-motion: no-preference) {
  .sk-title, .sk-bar, .sk-label, .sk-btn, .sk-link, .sk-input, .sk-tile, .sk-chip { animation: sk-shimmer 1.6s ease-in-out infinite; }
  @keyframes sk-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
}
/* Peek dialog: the fixed preview sheet, previously inline styles. */
.peek-dlg { position: fixed; inset: 5%; z-index: 50; background: var(--ws-panel); border: 1px solid var(--ws-line); border-radius: 12px; padding: 1rem; box-shadow: 0 8px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 0.6rem; }
/* Shared assistant panel: pointer affordance on the disclosure. */
details.assistant > summary { cursor: pointer; }
/* Door hover stays inside the token law (green is live/success only). */
.door:hover { border-color: var(--ws-ink); }

@media (max-width: 46rem) {
  /* True-size reflow: sidebar stacks on top, nav scrolls sideways, the
     page never overflows. Mascot compacts to one line. */
  .ws { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .ws-side { position: static; height: auto; overflow: visible; min-height: 0; padding: 0.9rem; gap: 0.7rem; }
  .ws-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -0.9rem; padding: 0 0.9rem; }
  .ws-nav::-webkit-scrollbar { display: none; }
  .ws-nav a { flex: none; border-left: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.4rem 0.1rem; }
  .ws-nav a[aria-current="page"] { background: none; border-bottom-color: var(--ws-green); }
  .ws-mascot img { width: 2.2rem; height: 2.2rem; }
  .cmdstrip { padding: 0.5rem 0.9rem; }
  .ws-main main { padding: 1.25rem 0.9rem 3rem; }
  .site-row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .site-row .thumb, .site-row .tile { aspect-ratio: 16 / 7; font-size: 1.3rem; }
  .site-row .row-actions { justify-content: flex-start; }
}

/* First Build Quality round. */
/* Job 5: the build card. Canvas D5 (Drifting Crew at low opacity, tick
   lines only beneath — never under careful reading). Flow C1 (spine) with
   the C2 running line that types, then settles into a ticked row. */
.build-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.25rem; overflow: hidden; }
.build-card .d5 { position: absolute; inset: 0; pointer-events: none; opacity: 0.14; }
.build-card .d5-glyph { position: absolute; display: block; animation: drift 26s linear infinite; }
.build-card .d5-glyph:nth-child(1) { top: 8%; left: 4%; }
.build-card .d5-glyph:nth-child(2) { top: 62%; left: 78%; animation-delay: -9s; }
.build-card .d5-glyph:nth-child(3) { top: 38%; left: 52%; animation-delay: -17s; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(2.5rem, -1.5rem, 0); } }
.build-card h3, .build-card .c1, .build-card .c2, .build-card .card-receipt, .build-card .card-media { position: relative; }
.build-card .c1 { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.build-card .c1 .tick-row { display: flex; gap: 0.5rem; align-items: baseline; }
.build-card .c1 .tick-row strong { font-weight: 700; }
.build-card .c1 .running { color: inherit; }
.build-card .c1 .ticked strong { color: var(--green); }
.build-card .c1 .failed strong { color: var(--red, #a3282b); }
.build-card .c2 { font-family: ui-monospace, monospace; font-size: 0.85rem; min-height: 1.2em; }
.build-card .card-media { list-style: none; margin: 0.5rem 0 0; padding: 0; }
/* Job 3: three directions, one shared content list each (fair comparison). */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.dir-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.8rem; background: #fff; }
.dir-card ul { margin: 0.4rem 0; padding-left: 1.1rem; }
.dir-card button[aria-pressed="true"] { outline: 2px solid var(--green); outline-offset: 2px; }
/* Job 8: fading dots — quiet surfaces only. One texture per screen, never
   with the Crew, never under dense reading/data/billing/forms, never on
   generated sites. */
.quiet-dots { background-image: radial-gradient(rgba(20, 35, 28, 0.10) 1px, transparent 1px); background-size: 1.1rem 1.1rem; }
/* Job 7: the win moment — one black primary (B2) with the live-green dot,
   carried by the mascot row above and a short mono line. Play lives only
   at wins (justPublished-gated in the view). */
.btn.b2 { background: #111; border-color: #111; color: #fff; }
.btn.b2:hover { background: #000; }
.live-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--green); margin-right: 0.5em; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.win-moment .mono { font-family: ui-monospace, monospace; font-size: 0.85rem; margin-top: 0.5rem; }
.playback { font-weight: 600; }
.pattern-line { color: inherit; }
.media-list { list-style: none; margin: 0.4rem 0; padding: 0; }
.media-list li { padding: 0.15rem 0; }
@media (prefers-reduced-motion: reduce) {
  .build-card .d5-glyph { animation: none; }
  .live-dot { animation: none; }
}

/* ============ Edit by hand — full canvas (E1–E5, B1–B6) ============
   Presentation rebuild of the workspace edit mode. The stage is a
   fixed overlay: the app sidebar and frame step aside without any
   shell change, and leaving removes the overlay whole. */
.ebh-stage { position: fixed; inset: 0; z-index: 60; background: #20242e; }
/* Hidden always wins: floating panels use display:flex, which would
   otherwise override the hidden attribute and leave invisible sheets
   intercepting pointer events over the page. */
.ebh-stage [hidden] { display: none !important; }
/* The floating pill never occludes the top block: the page starts below
   the pill zone, so every block — including the headline — stays clickable. */
.ebh-site { position: absolute; inset: 0; overflow: hidden; background: #20242e; transition: left .2s ease; padding-top: 72px; box-sizing: border-box; }
.ebh-page { position: relative; height: 100%; margin: 0 auto; background: #fff; }
.ebh-stage[data-device="desktop"] .ebh-page { max-width: none; }
.ebh-stage[data-device="phone"] .ebh-page { max-width: 390px; box-shadow: 0 0 0 1px #101216, 0 30px 80px rgba(0,0,0,.5); }
.ebh-page > iframe.preview { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
/* Agent open insets the canvas on wide viewports only (B5: below
   1100px the panel overlays instead). */
@media (min-width: 1100px) {
  .ebh-stage.agent-open[data-device="desktop"] .ebh-site { left: 384px; }
}
/* Floating top pill (E1): back · name · save state · device · History · Preview · Publish. */
.ebh-pill { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.97); border: 1px solid rgba(20,20,25,.08); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: var(--shadow); max-width: 94%; box-sizing: border-box; }
.ebh-pill button { font: inherit; border: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.ebh-pill .back { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ebh-pill .proj { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ebh-pill .saved { font-size: 12.5px; color: var(--green); font-weight: 600; white-space: nowrap; }
.ebh-pill .sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: 0 0 1px; }
.ebh-pill .seg { display: flex; background: var(--sand); border-radius: 999px; padding: 2px; }
.ebh-pill .seg button { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); padding: 5px 11px; border-radius: 999px; }
.ebh-pill .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ebh-pill .tp { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 8px; }
.ebh-pill .pub { background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: 999px; }
/* Floating toolbar riding the selection (E2): one sideways row. */
.ebh-toolbar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 2px; background: #141416; color: #f4f4f5; border-radius: 11px; padding: 5px 6px; box-shadow: var(--shadow); white-space: nowrap; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
.ebh-toolbar::-webkit-scrollbar { display: none; }
.ebh-toolbar .name { background: var(--green); color: #fff; font-weight: 700; font-size: 11.5px; padding: 5px 9px; border-radius: 7px; margin-right: 5px; flex: 0 0 auto; }
.ebh-toolbar button { border: 0; background: transparent; color: #f4f4f5; font: inherit; font-size: 13.5px; font-weight: 650; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 7px; flex: 0 0 auto; cursor: pointer; }
.ebh-toolbar button:hover { background: #2a2a2e; }
.ebh-toolbar button[aria-pressed="true"] { background: #2a2a2e; outline: 1px solid var(--green); }
.ebh-toolbar .sep { width: 1px; height: 18px; background: #3a3a3f; margin: 0 4px; flex: 0 0 1px; }
.ebh-toolbar .dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; vertical-align: -2px; margin-right: 5px; }
.ebh-toolbar .sz { font-size: 13px; font-weight: 700; padding: 0 2px; }
.ebh-toolbar .free { color: #7dd3a8; font-size: 11px; font-weight: 700; white-space: nowrap; margin: 0 4px 0 6px; flex: 0 0 auto; }
.ebh-toolbar .more { background: #2a2a2e; }
.ebh-toolbar input[type="color"].dotpick { width: 30px; height: 30px; padding: 2px; border: 0; background: transparent; flex: 0 0 auto; cursor: pointer; }
/* Docked toolbar (B2): rides above the phone's change pill, never under it
   (the pill sits at bottom:76 — the dock stacks above the pill's head). */
.ebh-toolbar.docked { position: absolute; top: auto !important; bottom: 152px; left: 8px; right: 8px; max-width: none; }
/* ONE inspector instance (E3): floating card right, bottom sheet on phone. */
.ebh-insp { position: absolute; top: 70px; right: 16px; z-index: 9; width: 322px; max-width: calc(100% - 32px); max-height: calc(100% - 170px); background: #fff; border: 1px solid rgba(20,20,25,.08); border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.ebh-stage[data-device="phone"] .ebh-insp { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-width: none; max-height: 70%; border-radius: 16px 16px 0 0; }
.ebh-insp .p-head { display: flex; align-items: flex-start; gap: 10px; padding: 15px 17px 11px; border-bottom: 1px solid var(--sand-deep); }
.ebh-insp .p-head h2 { font-size: 16px; font-weight: 750; }
.ebh-insp .p-head .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.ebh-insp .p-head .x { margin-left: auto; border: 0; background: transparent; font-size: 16px; color: var(--ink-faint); padding: 2px 4px; cursor: pointer; }
.ebh-insp .p-body { overflow: auto; padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; }
.ebh-insp .p-foot { border-top: 1px solid var(--line); padding: 13px 17px; display: flex; align-items: center; gap: 12px; }
.ebh-insp .imgctl { border: 1px dashed var(--line); border-radius: var(--radius); padding: 13px; display: flex; flex-direction: column; gap: 11px; background: var(--sand); }
.ebh-insp .imgctl button { width: 100%; }
/* Agent button + panel (E4 as amended). */
.ebh-agentbtn { position: absolute; right: 18px; bottom: 18px; z-index: 10; display: flex; align-items: center; gap: 9px; background: #141416; color: #fff; border: 0; border-radius: 999px; padding: 9px 16px 9px 9px; box-shadow: var(--shadow); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ebh-agentbtn .face { width: 32px; height: 32px; border-radius: 50%; background: #123528; display: flex; align-items: center; justify-content: center; }
.ebh-stage[data-device="phone"] .ebh-agentbtn { bottom: 78px; }
/* While any sheet is open on the phone, the Agent button steps aside:
   floated over the sheet it covered the rows underneath it (seen live on
   the Outline, whose row arrows it hid). Each panel has its own close. */
.ebh-stage[data-device="phone"].style-open .ebh-agentbtn,
.ebh-stage[data-device="phone"].add-open .ebh-agentbtn,
.ebh-stage[data-device="phone"].outline-open .ebh-agentbtn,
.ebh-stage[data-device="phone"].dual-open .ebh-agentbtn,
.ebh-stage[data-device="phone"].agent-open .ebh-agentbtn { display: none; }
.ebh-agent { position: absolute; top: 70px; left: 16px; z-index: 9; width: 352px; max-width: calc(100% - 32px); max-height: calc(100% - 170px); background: #fff; border: 1px solid rgba(20,20,25,.08); border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.ebh-stage[data-device="phone"] .ebh-agent { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 70%; border-radius: 16px 16px 0 0; }
.ebh-agent .a-head { padding: 13px 16px 0; }
.ebh-agent .a-title { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; border-bottom: 1px solid var(--sand-deep); }
.ebh-agent .a-title .face { width: 34px; height: 34px; border-radius: 50%; background: #123528; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ebh-agent .a-title .nm { font-size: 14.5px; font-weight: 750; }
.ebh-agent .a-title .watch { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.ebh-agent .a-title .watch b { color: var(--green); font-weight: 700; }
.ebh-agent .a-title .x { margin-left: auto; border: 0; background: transparent; font-size: 16px; color: var(--ink-faint); padding: 2px 4px; cursor: pointer; }
.ebh-agent .a-term { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.ebh-agent .a-body { overflow: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 14px; }
.ebh-agent .assistant { border: 0; padding: 0; }
/* Canvas powers panels (J1–J7): Style, Add, Outline, Dual share the agent
   panel's geometry — floating card left on desktop, bottom sheet on phone.
   One panel open at a time on phone (each opener closes the others). */
.ebh-stylepanel:not([hidden]), .ebh-addpanel:not([hidden]), .ebh-outline:not([hidden]), .ebh-dual:not([hidden]) { position: absolute; top: 70px; left: 16px; z-index: 9; width: 352px; max-width: calc(100% - 32px); max-height: calc(100% - 170px); background: #fff; border: 1px solid rgba(20,20,25,.08); border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.ebh-stage[data-device="phone"] .ebh-stylepanel,
.ebh-stage[data-device="phone"] .ebh-addpanel,
.ebh-stage[data-device="phone"] .ebh-outline,
.ebh-stage[data-device="phone"] .ebh-dual { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 70%; border-radius: 16px 16px 0 0; }
/* F1 command palette: desktop furniture, top-centered over the canvas.
   The :not([hidden]) gate is load-bearing — display beats [hidden]. */
.ebh-cmd:not([hidden]) { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 12; width: min(440px, calc(100% - 32px)); max-height: 60%; background: #fff; border: 1px solid rgba(20,20,25,.08); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.ebh-cmd .cmd-bar { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; }
.ebh-cmd .cmd-bar input { flex: 1; min-width: 0; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; color: var(--ink); }
.ebh-cmd .cmd-bar .x { border: 0; background: transparent; font-size: 16px; color: var(--ink-faint); padding: 2px 6px; cursor: pointer; }
.ebh-cmd .cmd-list { overflow: auto; flex: 1 1 auto; min-height: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.ebh-cmd .cmd-bar, .ebh-cmd .cmd-list > * { flex: none; }
.ebh-cmd .cmd-row { display: block; width: 100%; border: 1px solid transparent; background: #fff; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ebh-cmd .cmd-row.on { border-color: var(--line); background: var(--sand); }
.ebh-cmd .cmd-row:disabled { opacity: .45; cursor: default; }
.ebh-cmd .cmd-list .style-sub { font-size: 12.5px; color: var(--ink-faint); margin: 6px 4px 2px; }
.ebh-stylepanel .a-head, .ebh-addpanel .a-head, .ebh-outline .a-head, .ebh-dual .a-head { padding: 13px 16px 0; }
.ebh-stylepanel .a-title, .ebh-addpanel .a-title, .ebh-outline .a-title, .ebh-dual .a-title { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; border-bottom: 1px solid var(--sand-deep); }
.ebh-stylepanel .a-title .nm, .ebh-addpanel .a-title .nm, .ebh-outline .a-title .nm, .ebh-dual .a-title .nm { font-size: 14.5px; font-weight: 750; }
.ebh-stylepanel .a-title .x, .ebh-addpanel .a-title .x, .ebh-outline .a-title .x, .ebh-dual .a-title .x { margin-left: auto; border: 0; background: transparent; font-size: 16px; color: var(--ink-faint); padding: 2px 4px; cursor: pointer; }
.ebh-stylepanel .style-sub, .ebh-addpanel .style-sub, .ebh-outline .style-sub, .ebh-dual .style-sub { font-size: 12.5px; color: var(--ink-faint); margin: 10px 16px 6px; }
.ebh-stylepanel .style-list, .ebh-stylepanel .palette-list, .ebh-addpanel .add-list, .ebh-outline .outline-list { overflow: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.ebh-stylepanel .style-row, .ebh-stylepanel .palette-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; text-align: left; }
.ebh-stylepanel .style-row.on, .ebh-stylepanel .palette-row.on { outline: 2px solid var(--green); }
.ebh-stylepanel .style-row .sw, .ebh-stylepanel .palette-row .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid; flex: 0 0 26px; }
.ebh-stylepanel .style-row .snm, .ebh-stylepanel .palette-row .snm { flex: 1; }
.ebh-stylepanel .style-row .sfree, .ebh-stylepanel .palette-row .sfree { font-size: 12px; color: var(--green); font-weight: 700; }
.ebh-addpanel .add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; }
.ebh-addpanel .add-row b { font-size: 13.5px; text-transform: capitalize; flex: 1; min-width: 90px; }
.ebh-addpanel .add-row .add-prev { flex-basis: 100%; border-top: 1px dashed var(--line); padding-top: 8px; overflow: auto; max-height: 220px; font-size: 13px; }
.ebh-addpanel .add-compose, .ebh-addpanel .add-embed { border-top: 1px solid var(--sand-deep); margin: 4px 16px 0; padding: 10px 0 14px; font-size: 13px; font-weight: 650; }
.ebh-addpanel .add-compose .row, .ebh-addpanel .add-embed .row { display: flex; gap: 8px; margin-top: 6px; }
.ebh-addpanel .add-compose select, .ebh-addpanel .add-embed input { flex: 1; min-width: 0; font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font-ui); }
.ebh-addpanel .embed-note { font-size: 12.5px; color: var(--red); margin: 6px 0 0; font-weight: 600; }
.ebh-outline .outline-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; font-size: 13px; cursor: pointer; background: #fff; flex: 0 0 auto; }
.ebh-outline .outline-row.sub { margin-left: 18px; }
.ebh-outline .outline-row.is-hidden { opacity: .55; }
.ebh-outline .outline-row.drop { outline: 2px solid var(--green); }
.ebh-outline .outline-row .otag { font-size: 11px; font-weight: 800; background: var(--sand); border-radius: 6px; padding: 2px 6px; text-transform: uppercase; flex: 0 0 auto; }
.ebh-outline .outline-row .otx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ebh-outline .outline-row button { border: 1px solid var(--line); background: #fff; border-radius: 7px; font-size: 13px; padding: 3px 9px; cursor: pointer; flex: 0 0 auto; }
/* Block menu (J3): the ⋮ opens management, not the inspector. */
.ebh-blockmenu { position: absolute; z-index: 11; display: flex; flex-direction: column; gap: 2px; background: #141416; color: #f4f4f5; border-radius: 11px; padding: 6px; box-shadow: var(--shadow); min-width: 220px; }
.ebh-blockmenu button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ebh-blockmenu button:hover { background: #2a2a2e; }
.ebh-blockmenu button.armed { background: #5c1a1a; }
/* Focal grid (J4) + multi chip + undo/redo disabled state. */
.ebh-insp .focal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ebh-insp .focal-grid button { border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 15px; padding: 7px 0; cursor: pointer; }
.ebh-insp .focal-grid button:hover { background: var(--sand); }
.ebh-pill .mul { font-size: 12px; font-weight: 800; color: #fff; background: var(--green); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ebh-pill .tp:disabled { opacity: .4; cursor: default; }
/* Dual preview (J7): the saved page at both widths, read-only. */
.ebh-dual .dual-frames { overflow: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.ebh-dual figure { margin: 0; min-width: 0; }
.ebh-dual figcaption { font-size: 12px; font-weight: 700; color: var(--ink-faint); margin-bottom: 4px; }
.ebh-dual .dual-scale { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.ebh-dual iframe { border: 0; height: 52vh; display: block; background: #fff; }
/* Any open canvas panel insets the canvas on wide viewports, like the agent. */
@media (min-width: 1100px) {
  .ebh-stage.style-open[data-device="desktop"] .ebh-site,
  .ebh-stage.add-open[data-device="desktop"] .ebh-site,
  .ebh-stage.outline-open[data-device="desktop"] .ebh-site,
  .ebh-stage.dual-open[data-device="desktop"] .ebh-site { left: 384px; }
}
/* Change pill (E5) + phone bottom bar. */
.ebh-change { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 8; width: min(640px, 92%); background: rgba(255,255,255,.97); border: 1px solid rgba(20,20,25,.08); border-radius: 16px; box-shadow: var(--shadow); padding: 10px; display: flex; gap: 9px; align-items: center; box-sizing: border-box; }
.ebh-change input { flex: 1; min-width: 0; border: 0; font-size: 16px; padding: 8px 6px; font-family: var(--font-ui); color: var(--ink); background: transparent; }
.ebh-change input:focus { outline: none; }
.ebh-change .go { background: #0e241a; color: #fff; border: 0; font-weight: 700; font-size: 13.5px; padding: 10px 15px; border-radius: 11px; white-space: nowrap; cursor: pointer; }
.ebh-change .go:disabled { opacity: .6; }
.ebh-change .hint { position: absolute; top: -27px; right: 6px; font-size: 11.5px; color: #fff; background: rgba(18,18,20,.85); padding: 3.5px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.ebh-stage[data-device="phone"] .ebh-change { bottom: 76px; width: calc(100% - 28px); }
/* Phone pill follows R3: back · save state · device · Publish. The project
   name, History, and Preview drop out at phone width (they stay one device
   tap away on desktop); the save state stays — it carries the B4 unsaved
   answer — and back, the device switch, and Publish keep every exit in
   reach on one line at 390px. */
.ebh-stage[data-device="phone"] .ebh-pill { gap: 2px; padding: 5px 6px 5px 10px; max-width: calc(100% - 16px); }
.ebh-stage[data-device="phone"] .ebh-pill .proj { display: none; }
.ebh-stage[data-device="phone"] .ebh-pill .sep { display: none; }
.ebh-stage[data-device="phone"] .ebh-pill [data-act="history"],
.ebh-stage[data-device="phone"] .ebh-pill [data-act="preview"] { display: none; }
.ebh-stage[data-device="phone"] .ebh-pill .back { font-size: 12.5px; }
.ebh-stage[data-device="phone"] .ebh-pill .saved { font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ebh-stage[data-device="phone"] .ebh-pill .seg button { font-size: 12px; padding: 5px 6px; }
.ebh-stage[data-device="phone"] .ebh-pill .pub { font-size: 12.5px; padding: 7px 12px; }
.ebh-bottombar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 8; width: 92%; display: none; gap: 9px; }
.ebh-stage[data-device="phone"] .ebh-bottombar { display: flex; }
.ebh-bottombar button { flex: 1; font: inherit; font-size: 14px; font-weight: 700; padding: 13px; border-radius: 13px; box-shadow: var(--shadow); cursor: pointer; border: 0; }
.ebh-bottombar .edit { background: #141416; color: #fff; }
.ebh-bottombar .aichange { background: rgba(255,255,255,.97); color: var(--ink); border: 1px solid rgba(20,20,25,.08); }
/* B1 hint, B4 exit prompt, B6 refusal notice. */
.ebh-hint { position: absolute; bottom: 152px; left: 50%; transform: translateX(-50%); z-index: 7; background: rgba(18,18,20,.88); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.ebh-exit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 20px; width: min(22rem, calc(100% - 40px)); }
.ebh-exit h2 { font-size: 16px; font-weight: 750; margin-bottom: 6px; }
.ebh-exit p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; }
.ebh-exit .row { display: flex; gap: 8px; }
.ebh-refuse { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 19; width: min(30rem, calc(100% - 32px)); background: #fff; border: 1px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; font-size: 13.5px; }
/* Refusal + agent open: the centered notice would trap the panel's header
   (Terminal link, close) underneath it — dock the notice right of the
   panel instead. Both stay visible, both stay tappable. Phone sheets live
   at the bottom, so the top notice never meets them. */
@media (max-width: 1099px) {
  .ebh-stage.agent-open:not([data-device="phone"]) .ebh-refuse { left: 384px; right: 16px; transform: none; width: auto; }
}
.ebh-refuse strong { color: var(--red); }
/* Phone screens (any canvas mode): the chrome answers to the SCREEN.
   The canvas device picks the preview width only; it must never decide
   whether the pill, toolbar, and buttons fit the phone in the owner's
   hand (owner's phone verdict, 2026-11-01: desktop chrome at 390px —
   the pill's text wrapped into a tall blob, the toolbar floated with
   its tail sliced, and the Agent button covered the Change button). */
@media (max-width: 640px) {
  /* The pill takes its compact phone form whatever the canvas mode. */
  .ebh-stage:not([data-device="phone"]) .ebh-pill { gap: 2px; padding: 5px 6px 5px 10px; max-width: calc(100% - 16px); }
  .ebh-stage:not([data-device="phone"]) .ebh-pill .proj,
  .ebh-stage:not([data-device="phone"]) .ebh-pill .sep,
  .ebh-stage:not([data-device="phone"]) .ebh-pill [data-act="history"],
  .ebh-stage:not([data-device="phone"]) .ebh-pill [data-act="preview"] { display: none; }
  .ebh-stage:not([data-device="phone"]) .ebh-pill .back { font-size: 12.5px; }
  .ebh-stage:not([data-device="phone"]) .ebh-pill .saved { font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ebh-stage:not([data-device="phone"]) .ebh-pill .seg button { font-size: 12px; padding: 5px 6px; }
  .ebh-stage:not([data-device="phone"]) .ebh-pill .pub { font-size: 12.5px; padding: 7px 12px; }
  /* One bottom stack, nothing covering anything: the change pill at
     the base, the Agent button above it, the docked toolbar above both. */
  .ebh-stage:not([data-device="phone"]) .ebh-agentbtn { bottom: 92px; }
  .ebh-stage[data-device="phone"] .ebh-agentbtn { bottom: 146px; }
  .ebh-stage[data-device="phone"] .ebh-toolbar.docked { bottom: 204px; }
  /* The entry hint parks under the pill instead of inside the stack. */
  .ebh-hint { bottom: auto; top: 64px; }
}
/* Canvas powers pill at phone widths: the new Style/Add/Undo/Redo/Outline/
   Dual buttons join History/Preview in scrolling sideways — one scrolling
   line, no wrap, no overlap (the chip-row law). Desktop keeps every button
   visible without scrolling. */
.ebh-stage[data-device="phone"] .ebh-pill { overflow-x: auto; scrollbar-width: none; }
.ebh-stage[data-device="phone"] .ebh-pill::-webkit-scrollbar { display: none; }
.ebh-stage[data-device="phone"] .ebh-pill > * { flex: 0 0 auto; }
@media (max-width: 640px) {
  .ebh-pill { overflow-x: auto; scrollbar-width: none; }
  .ebh-pill::-webkit-scrollbar { display: none; }
  .ebh-pill > * { flex: 0 0 auto; }
}
/* Canvas text inputs never zoom on phone (no-zoom law). */
.ebh-stage input[type="text"], .ebh-stage textarea { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .ebh-site { transition: none; }
}