/* ═══════════════════════════════════════════════════════════════════════════
   MARBLELENS · BUILD YOUR WEBSITE — the internal product
   Tokens from design-system.css. Loaded WITHOUT base.css / sections.css: those
   carry the marketing shell.

   Identity: an architectural drafting table, not a notebook. AI CONTENT is
   ochre and paper; this is graphite, rules and measurement, with BRASS as the
   single activation accent and the chapter's own SLATE for the construction
   layer — grid, rulers, breakpoint marks.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --accent:      var(--brass);          /* activation — selection, focus, primary */
  --accent-ink:  #6f5222;
  --accent-wash: rgba(156,122,66,0.10);
  --draft:       var(--blue);           /* measurement / construction layer */
  --draft-soft:  rgba(55, 85, 107, 0.30);
  --draft-faint: rgba(55, 85, 107, 0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--ink-2); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}

.mono-s { font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--graphite); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.skip { position: absolute; left: 12px; top: -48px; z-index: 99; background: var(--ink);
  color: var(--paper-hi); padding: .6em 1em; font: 500 var(--t-label)/1 var(--mono);
  letter-spacing: .16em; text-decoration: none; transition: top var(--dur-fast) var(--ease-out); }
.skip:focus { top: 12px; }

/* ══ HEADER ═══════════════════════════════════════════════════════════════ */
.hd { position: relative; z-index: 20; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: 0 clamp(.9rem, 2.2vw, 2rem); height: 58px;
  border-bottom: 1px solid var(--line); background: var(--paper); }
.hd-l { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.wordmark { font: 600 clamp(.72rem,1.5vw,.84rem)/1 var(--sans); letter-spacing: .24em;
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--accent-ink); }
.hd-product { font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--draft); white-space: nowrap; }
.hd-r { display: flex; align-items: center; gap: clamp(.5rem,1.4vw,1.1rem); justify-self: end; }
.hd-link { background: none; border: 0; cursor: pointer; padding: .4em 0; font-family: var(--mono);
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
.hd-link:hover { color: var(--ink); }
.avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-hi); color: var(--graphite);
  font: 600 .58rem/1 var(--mono); }
.avatar:hover { border-color: var(--graphite-2); color: var(--ink); }

/* stage path — 8 steps, drawn as a measured run */
.stages { display: flex; align-items: center; gap: clamp(.35rem,1.1vw,1rem); list-style: none; justify-self: center; }
.stage { display: flex; align-items: baseline; gap: .4em; white-space: nowrap; position: relative; }
.stage-n { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; color: var(--graphite-2);
  transition: color var(--dur-fast) var(--ease-out); }
.stage-l { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--graphite-2); transition: color var(--dur-fast) var(--ease-out); }
.stage[data-s="done"] .stage-n, .stage[data-s="done"] .stage-l { color: var(--graphite); }
.stage[data-s="on"] .stage-n { color: var(--accent-ink); }
.stage[data-s="on"] .stage-l { color: var(--ink); }
.stage[data-s="on"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--accent); }

/* ══ WORKSPACE ════════════════════════════════════════════════════════════ */
.ws { position: relative; z-index: 1; min-height: 0;
  display: grid; grid-template-columns: clamp(300px, 26vw, 380px) minmax(0,1fr);
  transition: grid-template-columns var(--dur) var(--ease-settle); }
body[data-has-canvas="1"] .ws {
  grid-template-columns: clamp(280px, 22vw, 340px) minmax(0,1fr) clamp(230px, 18vw, 290px);
}

/* ── left: brief / stage context ── */
.brief { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  padding: clamp(1.2rem,2.4vw,2rem) clamp(1rem,2vw,1.6rem) 1.4rem;
  display: flex; flex-direction: column; gap: var(--s-3); }

.stage-head { display: flex; flex-direction: column; gap: .5em; margin-bottom: .4em; }
.kick { font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent-ink); }
.stage-h { font-family: var(--serif); font-weight: 500; font-size: var(--t-h3);
  line-height: var(--lh-head); color: var(--ink); text-wrap: balance; }
.stage-p { font-size: var(--t-small); color: var(--graphite); }
.small { font-size: var(--t-small); }

/* ── cards ── */
.panelcard { position: relative; background: var(--paper-hi); border: 1px solid var(--line);
  padding: clamp(.9rem,1.8vw,1.3rem); display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: var(--sh-mount); }
.panelcard::before, .panelcard::after { content: ""; position: absolute; width: 8px; height: 8px;
  border-color: var(--draft-soft); border-style: solid; pointer-events: none; }
.panelcard::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.panelcard::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.card-h { display: flex; align-items: baseline; gap: var(--s-3); }
.idx { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; color: var(--accent-ink); }
.card-t { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; line-height: 1.2; color: var(--ink); }
.card-p { font-size: var(--t-small); color: var(--graphite); }
.fineprint { font-family: var(--mono); font-size: .62rem; line-height: 1.6; color: var(--graphite-2); }

/* ── domain routes ── */
.routes { display: flex; flex-direction: column; gap: .5rem; }
.route { position: relative; cursor: pointer; text-align: left; background: var(--paper-hi);
  border: 1px solid var(--line); padding: .9em 1em .9em 2.6em;
  display: flex; flex-direction: column; gap: .2em;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.route:hover { border-color: var(--graphite-2); background: var(--paper); }
.route[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
.route-n { position: absolute; left: 1em; top: .95em; font-family: var(--mono); font-size: .7rem;
  color: var(--graphite-2); }
.route[aria-pressed="true"] .route-n { color: var(--accent-ink); }
.route-t { font-size: var(--t-body); color: var(--ink); }
.route-s { font-size: var(--t-small); color: var(--graphite); }

.dfield { display: flex; flex-direction: column; gap: .4rem; }
.dfield-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; }
.d-input { min-width: 0; background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: .84rem; padding: .7em .8em; }
.d-input:focus { border-color: var(--accent); outline-offset: 1px; }
.dfield-err { font-size: var(--t-small); color: var(--red); min-height: 1.2em; }
.dfield-err:empty { min-height: 0; }

.registrars { display: flex; flex-direction: column; gap: .4rem; }
.registrar { display: grid; grid-template-columns: auto 1fr auto; gap: .7em; align-items: baseline;
  padding: .7em .9em; border: 1px solid var(--line); background: var(--paper);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.registrar:hover { border-color: var(--draft); background: var(--paper-hi); }
.reg-n { font-size: var(--t-body); }
.reg-note { font-size: var(--t-small); color: var(--graphite); }
.reg-out { font-family: var(--mono); font-size: .8rem; color: var(--draft); }
.returnrow { display: flex; }

.secured { border-color: var(--accent); }
.secured-badge { display: flex; align-items: center; gap: .5em; font-family: var(--mono);
  font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-ink); }
.tick { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--accent);
  border-radius: 50%; font-size: .62rem; }
.secured-domain { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); word-break: break-all; }

/* ── chips / notes / buttons ── */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { cursor: pointer; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--sans); font-size: var(--t-small); padding: .55em .95em; text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out); }
.chip:hover { border-color: var(--graphite-2); background: var(--paper-hi); transform: translateY(-1px); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); }
.chip[aria-pressed="true"]::after { content: " ✓"; color: var(--accent-ink); }

.note { display: flex; flex-direction: column; gap: .25em;
  animation: rise var(--dur) var(--ease-settle) both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
.note-user .note-t { color: var(--ink); padding-left: var(--s-3); border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 1.02rem; }
.note-ml .note-t { color: var(--graphite); font-size: var(--t-small); }
.note-k { display: inline-flex; align-items: center; gap: .5em; font-family: var(--mono);
  font-size: .56rem; letter-spacing: var(--ls-label); color: var(--graphite-2); }
.mk { width: 5px; height: 5px; background: var(--accent); display: inline-block; }

.btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  background: var(--ink); border: 1px solid var(--ink); color: var(--paper-hi);
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  padding: .85em 1.3em;
  transition: background-color var(--dur-fast) var(--ease-out), letter-spacing var(--dur-fast) var(--ease-out); }
.btn:hover:not(:disabled) { background: #2b2a26; letter-spacing: .22em; }
.btn:disabled { background: none; color: var(--graphite-2); border-color: var(--line); cursor: not-allowed; }
.btn-wide { width: 100%; }
.arw { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover:not(:disabled) .arw { transform: translateX(3px); }
.mini { cursor: pointer; background: none; border: 1px solid var(--line); color: var(--graphite);
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  padding: .6em .95em; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.mini:hover { border-color: var(--graphite-2); color: var(--ink); }
.mini-go { border-color: var(--accent); color: var(--accent-ink); }
.mini-quiet { border-style: dashed; }
.card-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ── spec table ── */
/* The brief column is ~320px by design, so a label/value/edit row three-across
   shreds the value into six lines. Label and Edit share the top line; the
   value gets the full width underneath. */
.spec { display: flex; flex-direction: column; }
.spec-row { display: grid; grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "k e" "v v"; gap: .12em .6em;
  padding: .5em 0; border-bottom: 1px solid var(--line-2); }
.spec-k { grid-area: k; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite); }
.spec-v { grid-area: v; font-size: var(--t-small); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.spec-edit { grid-area: e; cursor: pointer; background: none; border: 0; padding: .2em; font-family: var(--mono);
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-2);
  border-bottom: 1px solid transparent; }
.spec-edit:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ── direction cards ── */
.dircard { position: relative; cursor: pointer; text-align: left; background: var(--paper-hi);
  border: 1px solid var(--line); padding: clamp(.9rem,1.8vw,1.2rem);
  display: flex; flex-direction: column; gap: .55em; box-shadow: var(--sh-mount);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.dircard:hover { transform: translateY(-2px); border-color: var(--graphite-2); }
.dircard[aria-pressed="true"] { border-color: var(--accent); }
.dircard[aria-pressed="true"]::after { content: ""; position: absolute; inset: -4px;
  border: 1px solid var(--accent); pointer-events: none; }
.dir-why { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--accent-ink); }
.dirsys { display: flex; flex-direction: column; margin-top: .2em; border-top: 1px solid var(--line-2); padding-top: .5em; }
.dirsys-row { display: grid; grid-template-columns: 5.2rem minmax(0,1fr); gap: .6em; padding: .16em 0; }
.dirsys-row dt { font-family: var(--mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite-2); }
.dirsys-row dd { font-size: .74rem; color: var(--graphite); }

/* ── build status ── */
.buildstat { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.bs { display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding: .5em 0; border-bottom: 1px solid var(--line-2); }
.bs-l { font-size: var(--t-small); color: var(--graphite); }
.bs-v { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite-2); }
.bs[data-s="active"] .bs-l { color: var(--ink); }
.bs[data-s="active"] .bs-v { color: var(--accent-ink); }
.bs[data-s="done"] .bs-v { color: var(--draft); }
.own { border-color: var(--accent); }

/* ══ CANVAS ═══════════════════════════════════════════════════════════════ */
.canvas { position: relative; min-width: 0; min-height: 0; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(.9rem, 2vw, 1.8rem);
  background-image:
    linear-gradient(to right, var(--draft-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--draft-faint) 1px, transparent 1px);
  background-size: 40px 40px; }
.cv-empty { margin: auto; text-align: center; color: var(--graphite-2);
  display: flex; flex-direction: column; gap: .4em; }
.rail-note { font-size: var(--t-small); max-width: 26ch; }

/* browser shell */
.browser { width: 100%; max-width: 100%; background: var(--paper-hi);
  border: 1px solid var(--ink-2); box-shadow: var(--sh-lift);
  display: flex; flex-direction: column; min-height: 0; }
.br-bar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
  gap: .8em; padding: .5em .7em; border-bottom: 1px solid var(--line); background: var(--paper-lo); }
.br-dots { display: flex; gap: 4px; }
.br-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--graphite-2); opacity: .5; }
.br-url { font-family: var(--mono); font-size: .66rem; color: var(--graphite);
  background: var(--paper-hi); border: 1px solid var(--line); padding: .25em .7em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-w { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: var(--draft); }

/* THE CONTAINER. The preview reflows against this width — not the viewport,
   and never by scaling. Switching viewport changes max-width; @container does
   the rest, exactly as a real breakpoint would. */
.br-port { container-type: inline-size; container-name: site;
  margin: 0 auto; background: #fff;
  transition: width var(--dur) var(--ease-settle); }
/* The port is laid out AT the chosen width, not squeezed to fit the canvas —
   otherwise "DESKTOP 1440" would silently render whatever the canvas happens
   to be. When the canvas is narrower the browser frame scrolls, exactly like
   inspecting a wide page in a small window. */
.br-port[data-vp="desktop"] { width: 1440px; }
.br-port[data-vp="tablet"]  { width: 768px; }
.br-port[data-vp="mobile"]  { width: 390px; }
.br-body { overflow-x: auto; overscroll-behavior-x: contain; }

/* ── viewport switcher ── */
.vpbar { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.vp { cursor: pointer; background: var(--paper-hi); border: 0; padding: .5em .8em;
  display: flex; flex-direction: column; align-items: center; gap: .1em;
  transition: background-color var(--dur-fast) var(--ease-out); }
.vp:hover { background: var(--paper); }
.vp-l { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.vp-w { font-family: var(--mono); font-size: .54rem; color: var(--graphite-2); font-variant-numeric: tabular-nums; }
.vp[aria-pressed="true"] { background: var(--paper); }
.vp[aria-pressed="true"] .vp-l { color: var(--ink); }
.vp[aria-pressed="true"] .vp-w { color: var(--accent-ink); }

/* ══ RIGHT RAIL — sitemap ═════════════════════════════════════════════════ */
.rail { min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line);
  padding: clamp(.9rem,1.6vw,1.2rem) clamp(.7rem,1.2vw,1rem);
  display: flex; flex-direction: column; gap: .7rem; }
body[data-has-canvas="0"] .rail { display: none; }
.rail-head { display: flex; align-items: center; justify-content: space-between; }
.rail-add { cursor: pointer; background: none; border: 1px solid var(--line); color: var(--graphite);
  width: 22px; height: 22px; line-height: 1; font-size: .9rem; }
.rail-add:hover { border-color: var(--accent); color: var(--accent-ink); }
.rail-empty { display: flex; flex-direction: column; gap: .4em; color: var(--graphite-2); }

/* the tree — connectors drawn, not bulleted */
.tree { list-style: none; display: flex; flex-direction: column; }
.node { position: relative; }
.node.child { padding-left: 14px; }
.node.child::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 50%;
  width: 1px; background: var(--draft-soft); }
.node.child::after { content: ""; position: absolute; left: 4px; top: 50%; width: 8px;
  height: 1px; background: var(--draft-soft); }
.node:last-child.child::before { bottom: 50%; }
.node-row { display: flex; align-items: center; gap: 2px; }
.node-b { flex: 1; min-width: 0; cursor: pointer; background: none; border: 0; text-align: left;
  display: flex; align-items: baseline; gap: .5em; padding: .38em .3em;
  transition: background-color var(--dur-fast) var(--ease-out); }
.node-b:hover { background: var(--paper-hi); }
.node-n { font-family: var(--mono); font-size: .55rem; color: var(--graphite-2); }
.node-t { font-size: var(--t-small); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-b[aria-pressed="true"] { background: var(--accent-wash); }
.node-b[aria-pressed="true"] .node-t { color: var(--ink); font-weight: 500; }
.node-b[aria-pressed="true"] .node-n { color: var(--accent-ink); }
.node-x { cursor: pointer; background: none; border: 0; color: var(--graphite-2); font-size: .68rem;
  padding: .3em .25em; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.node-row:hover .node-x, .node-x:focus-visible { opacity: 1; }
.node-x:hover { color: var(--ink); }

.secs { list-style: none; display: flex; flex-direction: column; margin: .1em 0 .3em 14px;
  border-left: 1px solid var(--draft-faint); padding-left: .5em; }
.sec-b { cursor: pointer; background: none; border: 0; text-align: left; width: 100%;
  display: flex; align-items: baseline; gap: .5em; padding: .28em .3em;
  transition: background-color var(--dur-fast) var(--ease-out); }
.sec-b:hover { background: var(--paper-hi); }
.sec-n { font-family: var(--mono); font-size: .52rem; color: var(--graphite-2); }
.sec-t { font-size: .76rem; color: var(--graphite); }
.sec-b[aria-pressed="true"] .sec-t { color: var(--ink); }
.sec-b[aria-pressed="true"] .sec-n { color: var(--accent-ink); }

.secactions { display: flex; flex-direction: column; gap: .45rem; padding-top: .6rem;
  border-top: 1px solid var(--line); }
.sa-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.sa { cursor: pointer; background: none; border: 1px solid var(--line); color: var(--graphite);
  font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45em .6em; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sa:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ══ FOOT — composer + notice ═════════════════════════════════════════════ */
.foot { position: relative; z-index: 20; border-top: 1px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column; }
.notice { padding: .5em clamp(.9rem,2.2vw,2rem); font-family: var(--mono); font-size: .64rem;
  letter-spacing: .04em; color: var(--accent-ink); background: var(--accent-wash);
  border-bottom: 1px solid var(--line); }
.footrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center;
  padding: .6rem clamp(.9rem,2.2vw,2rem) .7rem; }
.composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; min-width: 0; }
.cmp-input { width: 100%; min-width: 0; background: var(--paper-hi); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--sans); font-size: var(--t-small); padding: .68em .85em; }
.cmp-input::placeholder { color: var(--graphite-2); }
.cmp-input:focus { border-color: var(--accent); outline-offset: 1px; }
.send { cursor: pointer; background: var(--ink); border: 1px solid var(--ink); color: var(--paper-hi);
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  padding: 0 1.1em; transition: background-color var(--dur-fast) var(--ease-out); }
.send:hover { background: #2b2a26; }

/* ══ THE PREVIEW SITE ═════════════════════════════════════════════════════
   Its own small design system. Reflows on @container, so DESKTOP / TABLET /
   MOBILE are genuine layouts, not one layout at three scales. */
.site { --s-ink:#1d1b17; --s-mut:#6d6862; --s-bg:#fbf8f2; --s-acc:#9c7a42; --s-line:rgba(29,27,23,.12);
  background: var(--s-bg); color: var(--s-ink); font-family: var(--sans); line-height: 1.55; }
.site[data-direction="architectural-minimal"] { --s-bg:#f2f2f0; --s-acc:#37556b; }
.site[data-direction="bold-product-focus"]   { --s-bg:#f7f3ec; --s-acc:#a8432c; }
.site[data-direction="late-table"]           { --s-bg:#f4efe6; --s-acc:#8a3f22; }
.site[data-direction="clinical-clean"]       { --s-bg:#f1f2f1; --s-acc:#7d8a6a; }
.site[data-direction="index"]                { --s-bg:#f5f4f1; --s-acc:#37556b; }

.st-nav { display: flex; align-items: center; gap: 1.2em; padding: 1em 1.4em;
  border-bottom: 1px solid var(--s-line); flex-wrap: wrap; }
.st-brand { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em; }
.st-links { list-style: none; display: flex; gap: 1em; margin-left: auto; flex-wrap: wrap; }
.st-links li { font-size: .74rem; color: var(--s-mut); }
.st-links li.on { color: var(--s-ink); border-bottom: 1px solid var(--s-acc); }
.st-navcta { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--s-ink); padding: .45em .9em; }

.st-sec { position: relative; padding: clamp(1.4rem, 4cqw, 3.4rem) clamp(1rem, 3cqw, 2.6rem);
  border-bottom: 1px solid var(--s-line); cursor: pointer; outline-offset: -3px; }
.st-idx { position: absolute; left: .5rem; top: .5rem; font-family: var(--mono); font-size: .52rem;
  color: var(--s-mut); opacity: .55; }
.st-sec:hover { background: rgba(0,0,0,.012); }
.st-sec.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.st-sec.sel::after { content: ""; position: absolute; right: .5rem; top: .5rem; width: 7px; height: 7px;
  background: var(--accent); }

.st-h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 6.6cqw, 3.4rem);
  line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.st-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 3.2cqw, 1.8rem); line-height: 1.15; }
.st-lede { font-size: clamp(.8rem, 1.7cqw, 1rem); color: var(--s-mut); margin-top: .5em; max-width: 44ch; }
.st-sub { font-size: .8rem; color: var(--s-mut); margin-top: .3em; max-width: 48ch; }
.st-cta { display: inline-block; margin-top: 1.1em; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; background: var(--s-ink); color: var(--s-bg); padding: .7em 1.3em; }
.st-body { height: .6em; background: currentColor; opacity: .1; margin-top: .7em; border-radius: 1px; }
.st-body.short { width: 62%; }

.st-hero { display: grid; gap: clamp(1rem, 3cqw, 2rem); align-items: center; }
.st-heroart { background: linear-gradient(135deg, rgba(0,0,0,.09), rgba(0,0,0,.03)); min-height: 130px; }
.st-grid { display: grid; gap: .7rem; margin-top: 1.1em; }
.st-card { display: flex; flex-direction: column; gap: .4em; }
.st-thumb { aspect-ratio: 4/3; background: linear-gradient(135deg, rgba(0,0,0,.1), rgba(0,0,0,.04)); }
.st-cardt { font-size: .74rem; color: var(--s-mut); }
.st-form { display: flex; flex-direction: column; gap: .55em; margin-top: 1em; max-width: 26rem; }
.st-field { display: flex; flex-direction: column; gap: .2em; }
.st-lab { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--s-mut); }
.st-input { height: 2.1em; border: 1px solid var(--s-line); background: rgba(255,255,255,.6); }
.st-map { margin-top: 1em; height: clamp(110px, 22cqw, 220px);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px),
              repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px), rgba(0,0,0,.03); }
.st-list { list-style: none; margin-top: 1em; display: flex; flex-direction: column; }
.st-list li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1em; align-items: baseline;
  padding: .55em 0; border-bottom: 1px solid var(--s-line); }
.st-li-n { font-size: .82rem; }
.st-li-d { height: .5em; background: currentColor; opacity: .09; }
.st-foot { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  padding: 1.2em 1.4em; font-size: .68rem; color: var(--s-mut); }

/* ── the site's own breakpoints, against the CANVAS width ── */
/* three across only when there is genuinely room — at 768 a tablet gets two,
   which is the whole point of having a tablet layout at all */
@container site (min-width: 860px) {
  .st-hero { grid-template-columns: 1.1fr .9fr; }
  .st-heroart { min-height: 300px; }
  .st-grid { grid-template-columns: repeat(3, 1fr); }
  .st-sec { padding-inline: clamp(1.4rem, 5cqw, 4rem); }
}
@container site (min-width: 481px) and (max-width: 859px) {
  .st-hero { grid-template-columns: 1fr 1fr; }
  .st-grid { grid-template-columns: repeat(2, 1fr); }
  .st-heroart { min-height: 200px; }
}
@container site (max-width: 480px) {
  .st-nav { gap: .7em; padding: .8em 1rem; }
  .st-links { margin-left: 0; width: 100%; gap: .8em; }
  .st-links li { font-size: .68rem; }
  .st-grid { grid-template-columns: 1fr; }
  .st-heroart { min-height: 140px; }
  .st-cta { width: 100%; text-align: center; }
  .st-foot { flex-direction: column; gap: .3em; }
}

/* ── BUILD PHASES ── 0 blank · 1 structure · 2 wireframe · 3 hierarchy · 4 visual · 5 done */
.site[data-phase="0"] { visibility: hidden; }
.site[data-phase="1"] :is(.st-h1,.st-h2,.st-lede,.st-sub,.st-cta,.st-brand,.st-links,.st-navcta,.st-cardt,.st-lab,.st-li-n) { visibility: hidden; }
.site[data-phase="1"] :is(.st-thumb,.st-heroart,.st-map,.st-input) { background: none; }
.site[data-phase="1"] .st-sec { outline: 1px dashed var(--draft-soft); outline-offset: -6px; }
.site[data-phase="2"] :is(.st-h1,.st-h2,.st-lede,.st-sub,.st-cardt,.st-li-n) { color: transparent; background: currentColor; opacity: .12; border-radius: 2px; }
.site[data-phase="2"] :is(.st-thumb,.st-heroart,.st-map) { background: rgba(0,0,0,.05); }
.site[data-phase="3"] :is(.st-thumb,.st-heroart,.st-map) { background: rgba(0,0,0,.05); }
.site[data-phase="3"] .st-cta { background: none; color: var(--s-mut); border: 1px dashed var(--s-line); }
.site[data-phase="4"] :is(.st-thumb,.st-heroart) { filter: grayscale(1) contrast(.9); }
.site[data-phase="1"], .site[data-phase="2"], .site[data-phase="3"], .site[data-phase="4"] { transition: none; }

/* ══ RESPONSIVE — the workspace itself ════════════════════════════════════ */
@media (max-width: 1180px) {
  body[data-has-canvas="1"] .ws { grid-template-columns: clamp(250px,20vw,300px) minmax(0,1fr) clamp(200px,16vw,240px); }
  .stage-l { display: none; }
  .stage[data-s="on"] .stage-l { display: inline; }
}

/* ≤1023 — rails become drawers, canvas owns the room */
@media (max-width: 1023px) {
  .ws, body[data-has-canvas="1"] .ws { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
  .brief, .rail {
    position: fixed; top: 58px; bottom: 0; z-index: 30; width: min(340px, 88vw);
    background: var(--paper); box-shadow: 0 0 50px rgba(28,20,10,.28);
    transition: transform var(--dur) var(--ease-settle);
  }
  .brief { left: 0; transform: translateX(-102%); border-right: 1px solid var(--line); }
  .rail  { right: 0; transform: translateX(102%); border-left: 1px solid var(--line); display: flex; }
  .brief.open, .rail.open { transform: none; }
  .canvas { grid-row: 1; }
  .dock { display: grid !important; }
  .scrim { display: block; }
}
.dock { display: none; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); }
.dockbtn { background: rgba(241,236,226,.7); border: 0; cursor: pointer; color: var(--graphite);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: .85em .5em; }
.dockbtn:hover { background: var(--paper-hi); color: var(--ink); }
.scrim { display: none; position: fixed; inset: 0; z-index: 28; background: rgba(31,31,28,.34); }
.drawer-x { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px;
  cursor: pointer; background: none; border: 1px solid var(--line); color: var(--graphite); font-size: .95rem; }
@media (max-width: 1023px) { .drawer-x { display: block; } .brief, .rail { padding-top: 46px; } }

/* ≤767 — mobile: step first, preview under it */
@media (max-width: 767px) {
  .hd { height: 52px; gap: .5rem; }
  .stages { display: none; }
  .hd-product, .hd-link { display: none; }
  .brief, .rail { top: 52px; width: 100%; }
  .canvas { padding: .6rem; align-items: stretch; }
  .browser { border-width: 1px; }
  .br-bar { grid-template-columns: auto minmax(0,1fr); }
  .br-w { display: none; }
  .footrow { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .vpbar { width: 100%; }
  .vp { flex: 1; }
  .spec-row { grid-template-columns: minmax(0,1fr) auto; }
  .spec-k { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .wordmark { font-size: .64rem; letter-spacing: .16em; }
  .chip { padding: .5em .75em; }
  .sa { font-size: .52rem; }
}

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .note { animation: none; opacity: 1; transform: none; }
  .chip:hover, .dircard:hover { transform: none; }
}