/* hephus.com — platform styles.
   Its own brand: warm paper ground, near-black ink, a single ember accent
   (Hephaestus's forge), bronze as the quiet second. Not AOS burgundy, not
   AURA's palette. Instrument Serif for display, Inter for everything else. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:#FAF7F2; --paper-2:#F1ECE4; --card:#FFFFFF;
  --ink:#17140F; --ink-2:#3E3A33; --mute:#7A7468; --hair:#E6E1D8;
  --ember:#D4562A; --ember-2:#B8451F; --bronze:#A8763E;
  --ok:#2E7D5B; --warn:#B8860B; --bad:#B23A3A;
  --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgba(23,20,15,.05),0 8px 24px -12px rgba(23,20,15,.18);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;font-size:15px}
h1,h2,h3,.display{font-family:"Instrument Serif",Georgia,serif;font-weight:400;margin:0;letter-spacing:-.01em;line-height:1.1}
h1{font-size:2.4rem} h2{font-size:1.7rem} h3{font-size:1.25rem}
a{color:inherit} p{margin:0 0 1em}
.mute{color:var(--mute)} .small{font-size:13px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.ember{color:var(--ember)}

/* The audit/quiz interactive preview and its Phase 3 sections
   (renderAuditPreview() and friends in app/build.html) — the same class
   names hephus-platform's store.css styles for a real visitor, restyled
   here against this repo's own tokens rather than the seller-brand
   --ac-* variables a live quiz actually renders under. A seller previews
   the real structure and copy; the exact colours a real visitor sees
   depend on whatever design system is chosen, same as ADR-041 already
   established for the read-only summary this replaces. */
.quiz-opt{display:block;width:100%;text-align:left;padding:11px 14px;margin-bottom:8px;
          border:1px solid var(--hair);border-radius:var(--r);background:var(--card);
          color:var(--ink);cursor:pointer;font:inherit;font-size:.9375rem;transition:border-color .15s}
.quiz-opt:hover{border-color:var(--ember)}
.quiz-opt.on{border-color:var(--ember);font-weight:600}
.quiz-back{display:inline-block;background:none;border:0;padding:0 0 12px;color:var(--mute);cursor:pointer;font:inherit;font-size:.8125rem}
.quiz-back:hover{color:var(--ember)}
.quiz-score{font-family:"Instrument Serif",Georgia,serif;font-size:3.4rem;line-height:1;margin:4px 0}
.quiz-pillars,.quiz-categories{display:grid;gap:10px;margin:16px 0}
.quiz-pillar b{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:600;margin-bottom:4px}
.quiz-pillar .track{height:7px;background:var(--hair);border-radius:4px;overflow:hidden}
.quiz-pillar .track i{display:block;height:100%;background:var(--ember)}
.quiz-findings{margin-top:6px;display:grid;gap:5px}
.quiz-finding{margin:0;padding:8px 10px;border-radius:var(--r);border-left:2px solid var(--ember);background:var(--paper-2);font-size:.8125rem}
.quiz-actions{display:grid;gap:8px;margin-top:10px}
.quiz-action{padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r);font-size:.8125rem}
.quiz-action-urgent{border-left:2px solid var(--ember)}
.qsec{margin:0 0 16px}
.qsec-hero{text-align:center}
.qsec-hero-img{max-width:100%;border-radius:var(--r);margin-bottom:10px}
.qsec-hero-h{font-family:"Instrument Serif",Georgia,serif}
.qsec-media,video.qsec-media{max-width:100%;border-radius:var(--r);display:block}
.qsec-media-wrap{text-align:center}
.qsec-proof{display:grid;gap:8px}
.qsec-quote{margin:0;padding:10px 12px;border-left:2px solid var(--ember);background:var(--paper-2);border-radius:var(--r);font-style:italic;font-size:.875rem}
.qsec-quote cite{display:block;margin-top:4px;font-style:normal;font-size:.75rem;color:var(--mute)}
.qsec-cta{text-align:center;padding-top:6px;border-top:1px solid var(--hair)}
.qsec-faq{display:grid;gap:4px}
.qsec-faq-item{padding:8px 0;border-bottom:1px solid var(--hair);font-size:.875rem}
.qsec-faq-item summary{cursor:pointer;font-weight:600}
.qsec-footer{text-align:center;margin-top:20px;font-size:.8125rem}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#EAE4DA;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.side .logo{font-family:"Instrument Serif",serif;font-size:26px;color:#fff;padding:4px 10px 18px;display:flex;align-items:center;gap:10px}
.side .logo i{width:10px;height:10px;border-radius:50%;background:var(--ember);box-shadow:0 0 18px var(--ember)}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;text-decoration:none;color:#CFC8BC;font-weight:500;font-size:14px}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:rgba(212,86,42,.18);color:#fff}
.side a .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.side .grp{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8B8478;padding:16px 10px 4px}
.side .foot{margin-top:auto;padding:10px;font-size:12px;color:#8B8478}
.side .foot b{display:block;color:#EAE4DA;font-weight:600}
.main{padding:34px 40px 80px;max-width:1180px;width:100%}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.topbar .sub{color:var(--mute);margin-top:6px}
@media (max-width:860px){.shell{grid-template-columns:1fr}.side{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;gap:2px}.side .grp,.side .foot{display:none}.main{padding:22px 18px 60px}}

/* ---------- components ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ember);color:#fff;border:0;border-radius:9px;padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s}
.btn:hover{background:var(--ember-2)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)} .btn.ghost:hover{background:var(--paper-2)}
.btn.ghost.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark{background:var(--ink)} .btn.dark:hover{background:#000}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--hair)}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.card h3{margin-bottom:12px}
.grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px 20px}
.stat .k{font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stat .v{font-family:"Instrument Serif",serif;font-size:2.2rem;margin-top:4px;line-height:1}
.stat .d{font-size:12px;color:var(--mute);margin-top:6px}
.stat.hero{background:var(--ink);color:#fff;border-color:var(--ink)} .stat.hero .k,.stat.hero .d{color:#B8B0A3}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--hair)}
td{padding:11px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--paper-2);color:var(--ink-2)}
.pill.ok{background:#E3F1EA;color:var(--ok)} .pill.warn{background:#F7EFD6;color:#8A6508} .pill.bad{background:#F7E3E3;color:var(--bad)} .pill.ember{background:#FBE6DD;color:var(--ember-2)} .pill.ink{background:var(--ink);color:#fff}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:12px 0 5px}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--hair);border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(212,86,42,.35);border-color:var(--ember)}
textarea{min-height:110px;resize:vertical}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .row.between{justify-content:space-between}
.empty{padding:34px;text-align:center;color:var(--mute);border:1px dashed var(--hair);border-radius:var(--r-lg)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px;font-weight:600}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.on{opacity:1}
.demo-bar{background:#F7EFD6;color:#5E4703;font-size:13px;padding:8px 14px;text-align:center;border-bottom:1px solid #EAD9A6}
.demo-bar b{font-weight:600}
.blur{filter:blur(5px);user-select:none}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px}
.bars .b{flex:1;background:var(--ember);border-radius:4px 4px 0 0;min-height:2px;position:relative;opacity:.9}
.bars .b span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10px;color:var(--mute)}
.log{font-size:13px} .log .e{display:grid;grid-template-columns:150px 110px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair)}
.log .e:last-child{border-bottom:0} .log .t{color:var(--mute)}
.kbd{font-family:ui-monospace,Menlo,monospace;background:var(--paper-2);padding:2px 6px;border-radius:5px;font-size:12px}
.modal-bg{position:fixed;inset:0;background:rgba(23,20,15,.55);display:none;align-items:center;justify-content:center;z-index:40;padding:20px}
.modal-bg.on{display:flex} .modal{background:#fff;border-radius:var(--r-lg);padding:26px;max-width:620px;width:100%;max-height:90vh;overflow:auto}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin-bottom:18px}
.tabs button{background:none;border:0;padding:10px 14px;font:inherit;font-weight:600;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ember)}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500}
.switch input{width:auto}

/* ---------- marketing / auth ---------- */
.mk{max-width:1080px;margin:0 auto;padding:0 24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.nav .logo{font-family:"Instrument Serif",serif;font-size:28px;display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .logo i{width:10px;height:10px;border-radius:50%;background:var(--ember);box-shadow:0 0 16px var(--ember)}
.hero{padding:70px 0 40px;max-width:760px}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:18px}
.hero p{font-size:1.15rem;color:var(--ink-2);max-width:600px}
.auth{max-width:420px;margin:60px auto;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:30px 0 70px}
@media (max-width:760px){.feat{grid-template-columns:1fr}}
.feat .card h3{margin-bottom:6px}
footer{border-top:1px solid var(--hair);padding:26px 0;color:var(--mute);font-size:13px}
footer a{margin-right:16px}

/* ---------- public store ---------- */
.store{max-width:980px;margin:0 auto;padding:0 20px 80px}
.store .brand{display:flex;align-items:center;gap:12px;padding:26px 0}
.store .brand .n{font-family:"Instrument Serif",serif;font-size:26px}
.hp-page{margin:10px 0 40px}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.prod{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.prod .cv{aspect-ratio:16/10;background:var(--paper-2);object-fit:cover;width:100%}
.prod .bd{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .pr{font-family:"Instrument Serif",serif;font-size:1.5rem}
.prod .bd .btn{margin-top:auto;justify-content:center}
.legal{max-width:760px;margin:0 auto;padding:40px 20px 80px;line-height:1.65}
.legal h2{margin:30px 0 10px}

/* ---------- builder-only ---------- */
/* The builder gets a cooler accent than the platform's ember so a screenshot
   of one is never mistaken for the other. Same family, different room. */
:root{ --ember:#3E6B8C; --ember-2:#2F5470; }
.build{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}
@media (max-width:900px){.build{grid-template-columns:1fr}}
.chat{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px;position:sticky;top:20px}
.out{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px;min-height:420px}
.out pre{white-space:pre-wrap;font-family:inherit;margin:0}
.kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.kinds button{background:var(--paper-2);border:1px solid var(--hair);border-radius:10px;padding:12px 10px;font:inherit;font-weight:600;cursor:pointer;text-align:left;font-size:13px}
.kinds button.on{background:var(--ember);color:#fff;border-color:var(--ember)}
.kinds button span{display:block;font-weight:400;font-size:11px;opacity:.75;margin-top:2px}
.credits{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--mute)}
.credits b{font-family:"Instrument Serif",serif;font-size:1.6rem;color:var(--ink)}
.run{border:1px solid var(--hair);border-radius:10px;padding:14px;margin-bottom:10px}
.run .hd{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mod{border-left:3px solid var(--hair);padding-left:14px;margin:14px 0}
.mod b{display:block}

/* ---------- homepage (2026-09-13 redesign) ----------
   The platform's ember is the forge — the finished piece, live and for
   sale. The builder is the drafting table before that: a plan, measured
   and inked, not yet fired. --draft is that table's own colour, the same
   blue already used to keep a builder screenshot from being mistaken for
   a platform one (see the override above); named separately here so the
   homepage's own components don't quietly depend on --ember meaning two
   different colours in two different files. Ember still means the forge
   even here — it is what a card is stamped with once it is real. */
:root{ --draft:#3E6B8C; --draft-2:#2F5470; --draft-wash:#EEF2F5; --draft-hair:#D4DEE4; }

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--draft);display:flex;align-items:center;gap:8px}
.eyebrow i{width:7px;height:7px;border-radius:1px;background:var(--draft);display:inline-block;transform:rotate(45deg)}

.hero2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0 40px}
@media (max-width:900px){.hero2{grid-template-columns:1fr;gap:40px;padding:40px 0 20px}}
.hero2 h1{font-size:clamp(2.4rem,4.6vw,3.6rem);margin:14px 0 20px}
.hero2 h1 i{font-style:italic;color:var(--draft)}
.hero2 .lede{font-size:1.08rem;color:var(--ink-2);max-width:48ch}
.hero2 .cta-row{margin-top:26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn.draft{background:var(--draft)} .btn.draft:hover{background:var(--draft-2)}

/* the drafting table: a measured sheet the demo plays out on */
.table{position:relative;background:
    linear-gradient(var(--draft-wash) 1px,transparent 1px),
    linear-gradient(90deg,var(--draft-wash) 1px,transparent 1px);
  background-size:22px 22px;background-color:#fff;border:1px solid var(--draft-hair);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow);min-height:360px}
.table::before{content:"";position:absolute;inset:10px;border:1px dashed var(--draft-hair);border-radius:10px;pointer-events:none}
.table .corner{position:absolute;width:16px;height:16px;border:2px solid var(--draft);opacity:.5}
.table .corner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.table .corner.br{bottom:6px;right:6px;border-left:0;border-top:0}

.brief-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--draft-2);min-height:20px;margin-bottom:18px;position:relative;z-index:1}
.brief-line .cur{display:inline-block;width:8px;height:16px;background:var(--draft);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite}
@media (prefers-reduced-motion:reduce){.brief-line .cur{animation:none}}

.draft-card{position:relative;height:230px;z-index:1}
.draft-card .layer{position:absolute;inset:0;transition:opacity .5s ease,transform .5s ease}
.layer-sketch{opacity:1;padding-top:6px}
.layer-sketch .bar{height:11px;border:1.5px dashed var(--draft);border-radius:3px;background:transparent;opacity:.55}
.layer-sketch .bar+.bar{margin-top:10px}
.layer-sketch .tag{display:inline-block;width:96px;height:30px;border:1.5px dashed var(--draft);border-radius:6px;opacity:.55;margin-top:16px}
.layer-solid{opacity:0;transform:translateY(6px);border-radius:8px;overflow:hidden;box-shadow:0 10px 30px -10px rgba(23,20,15,.35)}
/* This is standing in for a REAL generated sales page — page.js writes its
   own real CSS per seller rather than reusing hephus.io's own look, which
   is the point being demonstrated: it commits to a specific direction
   instead of the generic serif-on-cream default. Deliberately not the
   drafting blue or the platform ember, so it reads as the seller's own
   brand, not either half of Hephus's. */
.mockpage{background:#171912;color:#EDE8DC;padding:18px 20px;height:100%;position:relative}
.mockpage .chip{display:inline-block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8C8A2E;background:rgba(196,196,60,.14);padding:3px 8px;border-radius:999px;margin-bottom:10px}
.mockpage h4{font:600 1.35rem/1.15 -apple-system,"Segoe UI",sans-serif;letter-spacing:-.01em;margin:0 0 6px;max-width:80%}
.mockpage p{font-size:12.5px;color:#B7B3A4;margin:0 0 14px;max-width:75%}
.mockpage .go{display:inline-flex;align-items:center;gap:6px;background:#C4C43C;color:#171912;font-weight:700;font-size:12px;padding:7px 13px;border-radius:7px}
.mockpage .blob{position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#C4C43C,#6B6B1E 70%);opacity:.9}

.table.built .layer-sketch{opacity:0;transform:translateY(-6px)}
.table.built .layer-solid{opacity:1;transform:translateY(0)}
.table.built .brief-line .cur{display:none}

.stamp{position:absolute;top:18px;right:18px;width:60px;height:60px;border-radius:50%;border:2px solid var(--ember);color:var(--ember);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-align:center;text-transform:uppercase;
  transform:scale(0) rotate(-18deg);opacity:0;background:#fff;z-index:2}
.table.built .stamp{animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) .55s forwards}
@media (prefers-reduced-motion:reduce){
  .stamp{transform:none;opacity:1}
  .table.built .stamp{animation:none}
  .draft-card .layer{transition:none}
}
@keyframes blink{50%{opacity:0}}
@keyframes stampIn{0%{transform:scale(0) rotate(-18deg);opacity:0}70%{transform:scale(1.12) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}

/* the nine kinds, as tools on the drafting table rather than a settings grid */
.pillbar{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 8px}
.pillbar a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.pillbar a:hover{border-color:var(--draft);color:var(--draft-2)}
.pillbar a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

.proof{margin:56px 0 64px}
.proof .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.proof .head p{color:var(--mute);margin:6px 0 0;max-width:52ch}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr}}
.proof-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:10px}
.proof-card .kind{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--draft)}
.proof-card .name{font-family:"Instrument Serif",serif;font-size:1.3rem}
.proof-card .body{color:var(--ink-2);font-size:14px;flex:1}
.proof-card .foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--mute);border-top:1px solid var(--hair);padding-top:10px;margin-top:4px}

.strip{background:var(--ink);color:#EAE4DA;border-radius:var(--r-lg);padding:34px 36px;margin:0 0 56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.strip h2{color:#fff;font-size:1.5rem;max-width:34ch}
.strip p{color:#B8B0A3;margin:6px 0 0;max-width:44ch}
.strip .btn{flex-shrink:0}

/* ---------- build screen v2: composer entry + chat workspace (2026-09-13) ----------
   Two states of one screen, toggled by hiding one and showing the other —
   see the JS at the bottom of app/build.html. Entry is the brief composer;
   workspace is what replaces it once something is being built, a chat
   rail on the left and the live result on the right — a literal match to
   the reference screenshots this was built against, not the warm-paper
   look the rest of this repo uses, on the direct instruction that the
   match matters more here than this repo's own earlier design pass. */
/* A different visual register on purpose, not a lighter version of this
   repo's own one: no Instrument Serif here, no soft glows, no warm
   ember tint on anything interactive — a tight bold sans and one flat,
   saturated blue, borders instead of shadows. The rest of this repo's
   warm-paper look stays exactly as it was; this is scoped to these two
   screens only. */
.hpv2{--acc:#2F6FED;--acc-2:#1D4FC4;--acc-wash:#EAF0FE}
.hpv2,.hpv2 .main{background:#fff}
.hpv2 h1,.hpv2 h2,.hpv2 h3,.hpv2 .display{font-family:Inter,-apple-system,sans-serif;font-weight:800;letter-spacing:-.02em}
.hpv2 .side{background:#fff;color:var(--ink);border-right:1px solid var(--hair)}
.hpv2 .side .logo{color:var(--ink);font-family:Inter,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:17px}
.hpv2 .side .logo i{background:var(--acc)!important;box-shadow:none!important;border-radius:2px!important;transform:rotate(45deg)}
.hpv2 .side a{color:var(--ink-2)}
.hpv2 .side a:hover{background:var(--paper-2);color:var(--ink)}
.hpv2 .side a.on{background:#F0F2F4;color:var(--acc-2)}
.hpv2 .side .foot{color:var(--mute)}
.hpv2 .side .foot b{color:var(--ink)}
.hpv2 .side .switcher{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin-bottom:10px;border:1px solid var(--hair);border-radius:9px;font-size:13px;font-weight:600;cursor:default}
.hpv2 .side .switcher svg{width:13px;height:13px;stroke:var(--mute);fill:none;stroke-width:2}
.hpv2 .side .search{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:14px;border:1px solid var(--hair);border-radius:9px;color:var(--mute);font-size:13px}
.hpv2 .side .search svg{width:14px;height:14px;stroke:var(--mute);fill:none;stroke-width:1.8;flex-shrink:0}
.hpv2 .side .search kbd{margin-left:auto;font:inherit;font-size:11px;background:var(--paper-2);border-radius:5px;padding:1px 6px;color:var(--mute)}

.entry{max-width:760px;margin:0 auto;padding:64px 24px 60px;text-align:center}
.entry .wordmark{font-family:Inter,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:2.1rem;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.entry .wordmark i{width:9px;height:9px;border-radius:2px;background:var(--acc);transform:rotate(45deg)}
.entry .sub{color:var(--mute);margin-bottom:30px;font-size:14.5px}
.entry .pillbar{justify-content:center}
.entry .pillbar a{cursor:pointer;background:#fff;font-weight:600;font-size:12.5px;padding:7px 13px 7px 9px;border-color:var(--hair)}
.entry .pillbar a.on{border-color:var(--acc);color:var(--acc-2);background:var(--acc-wash)}

/* The design-system picker, shown under the kind pills for the page kind
   only. Each chip carries three colour squares taken from the system's own
   tokens, because the name of a system means nothing to a seller who has
   not seen one and the colours are the fastest honest preview available
   without rendering six example pages. */
.dsbar{margin:14px 0 2px;text-align:center}
.dslabel{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-bottom:9px}
.dsrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dschip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:6px 13px 6px 7px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink-2);font-size:12.5px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.dschip:hover{border-color:var(--draft);color:var(--draft-2)}
.dschip.on{border-color:var(--acc);color:var(--acc-2);background:var(--acc-wash)}
.dssw{display:inline-flex;border-radius:4px;overflow:hidden;border:1px solid var(--hair);flex-shrink:0}
.dssw i{display:block;width:9px;height:16px}
.dsmorebtn{padding-left:13px;color:var(--mute)}
.dsmore{margin:12px auto 0;max-width:760px;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px}
.dsmore input{width:100%;box-sizing:border-box;border:1px solid var(--hair);border-radius:8px;padding:9px 11px;font-size:13.5px;font-family:inherit}
.dsmore input:focus{outline:0;border-color:var(--acc)}
.dsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;max-height:320px;overflow-y:auto;margin-top:10px;text-align:left}
.dscard{display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 9px;border:1px solid transparent;border-radius:9px;text-decoration:none;color:var(--ink-2);min-width:0}
.dscard:hover{background:var(--paper-2)}
.dscard.on{border-color:var(--acc);background:var(--acc-wash)}
.dscard b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dscard .dscat{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.dsnone{grid-column:1/-1;font-size:12.5px;color:var(--mute);margin:8px 2px;text-align:center}

.composer{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:16px 18px 12px;margin:20px 0 40px;text-align:left}
.composer textarea{border:0;padding:6px 2px;font-size:15px;min-height:56px;resize:none;font-family:Inter,sans-serif}
.composer textarea:focus{outline:0}
.composer .row2{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--hair)}
.composer .kindchip{display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);border-radius:7px;padding:5px 10px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.spacer{flex:1}
.composer .credchip{font-size:12px;color:var(--mute)}
.composer .send{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.composer .send:hover{background:#000} .composer .send:disabled{opacity:.4;cursor:not-allowed}
.composer .send svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}

.examples-head{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 14px;text-align:left}
.examples-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:left}
@media (max-width:900px){.examples-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.examples-grid{grid-template-columns:1fr}}
.ex-card{background:#fff;border:1px solid var(--hair);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}
.ex-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.ex-card .thumb{height:96px;display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-weight:800;letter-spacing:-.01em;font-size:.95rem;padding:0 14px;text-align:center;line-height:1.25}
.ex-card .meta{padding:9px 12px;font-size:12.5px;font-weight:600}
.ex-card .meta span{display:block;font-size:10.5px;font-weight:400;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* Both screens set their own `display`, which otherwise wins over the
   [hidden] attribute at equal specificity — an ID selector is needed to
   actually let `hidden` hide either of them (app/build.html toggles both
   this way rather than a class, precisely to keep this simple). */
#shell[hidden],#wshell[hidden]{display:none}
.wshell{display:flex;height:100vh;overflow:hidden}
.chatrail{width:360px;flex-shrink:0;border-right:1px solid var(--hair);display:flex;flex-direction:column;background:#fff}
.chatrail-head{padding:16px 18px;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:10px}
.chatrail-head b{font-size:14px}
.chatrail-head .k{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.turns{flex:1;overflow-y:auto;padding:16px 18px}
.turn-user{background:#F4F5F6;border-radius:10px 10px 3px 10px;padding:10px 14px;font-size:13.5px;margin-bottom:10px;margin-left:32px}
.turn-status{font-size:12.5px;color:var(--mute);margin:6px 0 14px;display:flex;align-items:center;gap:7px}
.turn-status .sp{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
/* The assistant's own reply — plain text, no bubble, the same register a
   real chat product uses for its own turns (a bubble is what the OTHER
   party said; the assistant just talks). The artifact card underneath is
   what it made while talking, a reference you open, not the reply itself. */
.turn-assistant{font-size:13.5px;line-height:1.5;color:var(--ink);margin-bottom:10px}
.proposal-card{border:1px solid var(--hair);background:#fff;border-radius:10px;padding:11px 13px;margin:0 0 14px;font-size:12.5px;color:var(--ink)}
.proposal-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.proposal-head .mute{margin-left:auto}
.proposal-diff{margin:0;padding-left:18px;line-height:1.6}
.proposal-diff li{margin-bottom:2px}
.proposal-problems,.proposal-warnings{margin-top:10px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.5}
.proposal-problems{background:#FBEDEC;color:var(--bad)}
.proposal-warnings{background:#FBF3DE;color:#8A6508}
.proposal-problems ul,.proposal-warnings ul{margin:4px 0 0;padding-left:16px}
.proposal-actions{display:flex;gap:8px;margin-top:11px}
.agent-card{border:1px solid #D6E2FB;background:#F7F9FE;border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:12px}.agent-card-head{display:flex;align-items:center;gap:7px;color:var(--ink-2);margin-bottom:7px}.agent-card-head .mute{margin-left:auto;font-size:10.5px}.agent-mark{color:var(--acc);font-size:15px}
/* .agent-goal had no colour of its own, so inside .wshell's dark-theme
   scope (see that block's own comment) it inherited --w-ink — a pale
   colour meant for text on .wshell's own dark background — against this
   card's white background instead. Found live while building the Phase 6
   proposal card just below, which had the identical gap; fixed here too
   since it is the same defect in the same family of chat-turn cards. */
.agent-goal{font-weight:600;line-height:1.4;color:var(--ink)}
.agent-scores{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.agent-score{background:#fff;border:1px solid #DDE5F5;border-radius:999px;padding:2px 6px;font-size:10.5px;color:var(--ink-2)}.agent-open{margin-top:8px;color:var(--mute);line-height:1.4}.agent-open b{color:var(--ink-2)}
.artifact-card{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:10px;padding:9px 11px;margin-bottom:14px;cursor:pointer;background:#fff;transition:border-color .15s;color:var(--ink)}
.artifact-card:hover{border-color:var(--acc)}
.artifact-card .ic{width:32px;height:32px;border-radius:7px;background:#F4F5F6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.artifact-card .ic svg{width:15px;height:15px;stroke:var(--ink-2);fill:none;stroke-width:1.7}
.artifact-card .meta{overflow:hidden}
.artifact-card .meta b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artifact-card .meta span{font-size:11px;color:var(--mute)}
.turn-actions{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.turn-actions button,.turn-actions a{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--hair);border-radius:9px;padding:8px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;color:inherit;text-decoration:none}
.turn-actions button:hover,.turn-actions a:hover{border-color:var(--acc);color:var(--acc-2)}

/* The product-link picker — asks a seller to confirm or correct what the
   model guessed against their real store, rather than sending on a guess
   from prose alone. Appended as its own block in the chat rail, the same
   place every other turn lives, not a modal over the top of it. */
.picker{border:1px solid var(--hair);border-radius:10px;padding:12px;margin-bottom:16px;background:#F9FAFA}
.picker-head{font-size:12.5px;font-weight:600;margin-bottom:8px}
.picker-list{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.picker-list label{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:12.5px;border-radius:6px;cursor:pointer}
.picker-list label:hover{background:#fff}
.picker-list label span:first-of-type{flex:1;font-weight:500}
.picker-list input[type="radio"]{width:auto;margin:0;accent-color:var(--acc)}
.picker button{width:100%;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;margin-top:4px}
.picker button:hover{background:#000}
.picker button:disabled{opacity:.6;cursor:not-allowed}
.followup-bar{border-top:1px solid var(--hair);padding:12px}
.followup-box{border:1px solid var(--hair);border-radius:14px;padding:8px 10px}
.followup-box textarea{border:0;padding:4px 4px;min-height:20px;max-height:90px;font-size:13.5px;resize:none}
.followup-box textarea:focus{outline:0}
.followup-box .row2{padding-top:6px;border-top:0;justify-content:flex-end}
.followup-box .send{width:30px;height:30px}
.followup-box .send svg{width:13px;height:13px}

.canvas{flex:1;display:flex;flex-direction:column;background:#FAFAFA;min-width:0}
.canvas-toolbar{display:flex;align-items:center;gap:14px;padding:11px 20px;border-bottom:1px solid var(--hair);background:#fff}
.canvas-toolbar .icon-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.canvas-toolbar .icon-btn:hover{border-color:var(--acc)}
.canvas-toolbar .icon-btn svg{width:13px;height:13px;stroke:var(--ink-2);fill:none;stroke-width:1.8}
.seg{display:inline-flex;background:#F0F1F2;border-radius:8px;padding:2px}
.seg button{background:none;border:0;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--mute);border-radius:6px;cursor:pointer}
.seg button.on{background:#fff;color:var(--ink)}
.canvas-toolbar .name{font-weight:700;font-size:12.5px;margin-right:auto;font-family:ui-monospace,Menlo,monospace}
.canvas-body{flex:1;overflow:auto;padding:28px}
.canvas-frame{background:#fff;border:1px solid var(--hair);border-radius:10px;max-width:920px;margin:0 auto;padding:30px 34px}
.canvas-code{background:#171912;color:#EDE8DC;border-radius:var(--r-lg);max-width:920px;margin:0 auto;padding:20px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;overflow:auto}
@media (max-width:860px){.wshell{flex-direction:column;height:auto}.chatrail{width:100%;border-right:0;border-bottom:1px solid var(--hair)}.turns{max-height:260px}}

/* ---------- Architect workspace ---------- */
.architect-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin:16px 0 24px}.architect-head h1{font-size:2.1rem;margin:5px 0 8px}.architect-lede{color:var(--mute);max-width:66ch;margin:0}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--acc-2);font-weight:800}.architect-credit{border:1px solid var(--hair);border-radius:12px;padding:12px 16px;display:flex;align-items:baseline;gap:7px;white-space:nowrap}.architect-credit b{font-size:1.6rem}.architect-credit span{font-size:12px;color:var(--mute)}
.architect-note{display:flex;gap:10px;align-items:flex-start;background:var(--acc-wash);border:1px solid #D6E2FB;border-radius:10px;padding:13px 15px;font-size:13px;margin-bottom:22px}.architect-note b{white-space:nowrap}.architect-note span{color:var(--ink-2)}
.architect-nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#FFF8E8;border-bottom:1px solid #EAD9A6;color:#5E4703;padding:11px 18px;font-size:13px}.architect-nudge b{font-weight:800}.architect-nudge span{color:#735D21}.architect-nudge a{margin-left:auto;color:#5E4703;font-weight:800;text-decoration:underline}
.architect-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}.architect-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px}.architect-step{border:1px solid var(--hair);background:#fff;border-radius:10px;padding:10px 9px;text-align:left;display:flex;gap:8px;align-items:center;min-width:0;cursor:pointer;font:inherit;color:inherit}.architect-step:hover:not(:disabled){border-color:var(--acc)}.architect-step.current{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-wash)}.architect-step:disabled{cursor:not-allowed;opacity:.6}.architect-step.ready{opacity:1}.architect-num{width:24px;height:24px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}.architect-step.ready .architect-num{background:#E3F1EA;color:var(--ok)}.architect-step.current .architect-num{background:var(--acc);color:#fff}.architect-step b,.architect-step small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.architect-step b{font-size:12px}.architect-step small{font-size:10px;color:var(--mute);margin-top:2px}.architect-work{min-height:420px}.architect-work h2{font-size:1.65rem;margin:5px 0 8px}.architect-work>p{color:var(--mute);max-width:60ch}.architect-question{background:#F7F8FA;border:1px solid var(--hair);border-radius:10px;padding:15px;margin:22px 0 14px;display:grid;gap:6px}.architect-question b{font-size:14px}.architect-question span{font-size:12.5px;color:var(--mute)}.architect-work textarea{min-height:150px}.architect-submit{margin-top:12px}.architect-output{background:#171912;color:#EDE8DA;border-radius:10px;padding:15px;white-space:pre-wrap;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:350px;margin:18px 0}.architect-check{font-size:12.5px;color:var(--mute);margin:0 0 14px}.architect-blocked{margin-top:20px;border:1px dashed var(--hair);border-radius:10px;padding:18px;color:var(--mute);font-size:13px}.architect-context{position:sticky;top:20px}.architect-context h2{font-size:1.35rem;margin-top:4px}.context-item{border-top:1px solid var(--hair);padding:11px 0}.context-item summary{list-style:none;display:flex;gap:7px;align-items:center;cursor:pointer;font-size:12.5px}.context-item summary::-webkit-details-marker{display:none}.context-item pre{font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink-2);margin:10px 0 0}.context-empty{border-top:1px solid var(--hair);padding:11px 0;display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12.5px}.context-empty small{width:100%;color:var(--mute);padding-left:4px}@media (max-width:900px){.architect-layout{grid-template-columns:1fr}.architect-context{position:static}.architect-progress{grid-template-columns:1fr 1fr}.architect-step:last-child{grid-column:span 2}}@media (max-width:560px){.architect-head{display:block}.architect-credit{display:inline-flex;margin-top:16px}.architect-note{display:block}.architect-note b{display:block;margin-bottom:4px}}

.btn.acc{background:var(--acc)} .btn.acc:hover{background:var(--acc-2)}

/* ---------- store overview (app/store.html, 2026-09-14) ----------
   Everything a seller has actually sent over, read straight from the
   platform's own tables via GET /api/store-items (see ADR-014, ADR-015).
   Same .hpv2 register as the Build screen, since this is a new page
   built after that direction was settled, not a legacy one being
   patched — see ADR-013's own open question about the rest of the app. */
.store-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.store-head h1{font-size:1.8rem;margin-bottom:4px}
.store-head .sub{color:var(--mute);font-size:14px;margin:0;max-width:52ch}
.store-section{margin-bottom:34px}
.store-section h2{font-size:1.05rem;margin-bottom:12px}
.store-empty{color:var(--mute);font-size:13.5px;padding:14px 0}
.store-empty a{color:var(--acc);font-weight:600;text-decoration:none}
.store-empty a:hover{text-decoration:underline}
.store-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--hair);border-radius:10px;text-decoration:none;color:inherit;margin-bottom:8px}
.store-row:hover{border-color:var(--acc)}
.store-row .ic{width:34px;height:34px;border-radius:8px;background:#F4F5F6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.store-row .ic svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:1.7}
.store-row .meta{flex:1;overflow:hidden}
.store-row .meta b{display:block;font-size:13.5px}
.store-row .meta span{font-size:12px;color:var(--mute)}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.store-card{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--hair);border-radius:10px;text-decoration:none;color:inherit;position:relative}
.store-card:hover{border-color:var(--acc)}
.store-card b{font-size:13.5px}
.store-card span{font-size:12px;color:var(--mute)}
.badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--paper-2);color:var(--mute);padding:2px 7px;border-radius:999px}
.badge.live{background:#E3F1EA;color:var(--ok)}
.store-row .badge{position:static;flex-shrink:0}

/* Uploaded photographs, shown as thumbnails under the design-system row on
   the entry screen. Square crops at a fixed size rather than preserving
   each photo's aspect ratio, so a portrait and a landscape shot sit in a
   tidy row instead of making the whole composer jump about as they load. */
.photobar{margin:14px 0 2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.photorow{display:flex;flex-wrap:wrap;gap:8px}
.photo{position:relative;display:block;width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--hair)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .rm{position:absolute;top:0;right:0;width:17px;height:17px;line-height:15px;text-align:center;background:var(--ink);color:#fff;font-size:13px;cursor:pointer;border-bottom-left-radius:7px;text-decoration:none;opacity:0;transition:opacity .12s}
.photo:hover .rm{opacity:1}
.addphoto{display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:7px 14px;border:1px dashed var(--hair);border-radius:999px;color:var(--mute);font-size:12.5px;font-weight:600}
.addphoto:hover{border-color:var(--draft);color:var(--draft-2)}
.addphoto.off{opacity:.5;pointer-events:none}
.photohint{flex-basis:100%;text-align:center;font-size:11.5px;color:var(--mute);margin:2px 0 0}

/* Adjusting the look. Sits under the canvas toolbar rather than floating
   over the page, so nothing it controls is hidden behind it while a seller
   is looking at the effect of dragging something. */
.styler{border-bottom:1px solid var(--hair);background:var(--paper-2);padding:12px 20px}
.stylerow{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end}
.sctl{display:flex;flex-direction:column;gap:5px;margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--mute);min-width:88px}
.sctl b{font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.sctl input[type=color]{width:100%;height:28px;padding:2px;border-radius:7px;border:1px solid var(--hair);background:#fff;cursor:pointer}
.sctl input[type=range]{width:110px;accent-color:var(--acc);cursor:pointer;padding:0;border:0;background:none;height:20px}
.sctl .swatch{display:block;height:28px;border-radius:7px;border:1px solid var(--hair)}
.sctl.off{opacity:.55}
.stylefoot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}

/* Pointing at part of the page. The whole preview becomes clickable while
   the mode is on, with a hover outline so it is obvious what is about to be
   selected — otherwise a click that lands on a wrapper instead of the
   heading inside it looks like the feature misfiring. */
.canvas-body.pointing{cursor:crosshair}
.canvas-body.pointing .hp-page *:hover{outline:2px solid var(--acc);outline-offset:1px}
.canvas-body.pointing .hp-page a,.canvas-body.pointing .hp-page button{pointer-events:none}
.hp-pointed{outline:2px solid var(--acc)!important;outline-offset:1px}
.canvas-toolbar .icon-btn.on{border-color:var(--acc);background:var(--acc-wash);color:var(--acc-2)}
.commentpop{position:absolute;z-index:20;width:300px;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:12px;box-shadow:0 12px 30px -10px rgba(23,20,15,.3)}
.commentpop .cp-what{font-size:12px;color:var(--mute);margin-bottom:8px;line-height:1.4}
.commentpop .cp-what b{color:var(--ink-2);font-weight:600}
.commentpop textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--hair);border-radius:8px;resize:none;min-height:auto}
.commentpop textarea:focus{outline:0;border-color:var(--acc)}
.commentpop .cp-foot{display:flex;align-items:center;gap:8px;margin-top:9px}
.canvas{position:relative}

/* The work, shown as it happens. Every row is a real pass the server
   reported starting and finishing; the timings are measured server-side
   because the browser cannot see when the work began. Nothing here
   estimates progress — a progress bar that is guessing is a lie told
   slowly, and a build that makes six model calls has enough genuinely
   happening to fill the space honestly. */
.steps{margin:10px 0 6px;border-left:2px solid var(--hair);padding-left:14px}
.step{position:relative;padding:7px 0}
.step .mark{position:absolute;left:-21px;top:11px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--acc);box-sizing:border-box;animation:sp 1s linear infinite}
.step.done .mark{background:var(--acc);border-color:var(--acc);animation:none}
@keyframes sp{0%,100%{opacity:.35}50%{opacity:1}}
.step .lbl{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.step:not(.done) .lbl{color:var(--ink)}
.step .ms{font-style:normal;font-size:11.5px;color:var(--mute);margin-left:7px}
.step .det{margin-top:5px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.step .det p{margin:0 0 5px}
.step .det .goal{font-weight:600}
.step .det .lbl2{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-top:8px}
.step .det ul{margin:0 0 6px;padding-left:16px}
.step .det li{margin:2px 0}
.step .det .quiet{color:var(--mute);font-size:12px}
.step .det .warn{color:#8A6508;background:#F7EFD6;padding:6px 9px;border-radius:7px;font-size:12px}
.step .scores{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.step .score{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);text-transform:capitalize}
.step .score b{font-weight:700}
.step .score.ok{background:#E3F1EA;color:var(--ok)}
.step .score.low{background:#F7E3E3;color:var(--bad)}
.usageline{padding:7px 18px;font-size:11.5px;color:var(--mute);border-top:1px solid var(--hair);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.canvas-code.livecode{white-space:pre-wrap;word-break:break-word;max-height:100%;overflow:auto}

/* ---------- the workspace, in its own darker register ----------
   The entry screen stays light: it is where somebody describes what they
   wants, and a dark terminal is not a welcoming place to do that. The
   workspace is where the machine works, and a denser, darker register both
   suits that and stops the generated page — which is rendered live inside
   it — from being judged against a background that competes with it. A
   cream page on a cream app looked washed out; on this it reads as a
   separate object. ADR-013 already established this screen having its own
   visual language, and this extends it rather than starting a new argument.

   Everything here is a colour, a size and a weight. No behaviour depends on
   it, so the screen degrades to the light theme if this block is removed. */
.wshell{--w-bg:#0F1115;--w-panel:#15181E;--w-line:#232833;--w-ink:#E6E9EF;--w-ink-2:#9AA4B5;--w-mute:#6B7688;--w-acc:#5B8CFF;
  background:var(--w-bg);color:var(--w-ink)}

.runrail{width:228px;flex-shrink:0;background:var(--w-panel);border-right:1px solid var(--w-line);display:flex;flex-direction:column}
.runrail-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--w-mute)}
.runrail-head b{color:var(--w-ink-2);font-weight:700}
.runs{flex:1;overflow-y:auto;padding:0 8px 12px}
.run{display:block;padding:8px 9px;border-radius:7px;text-decoration:none;cursor:pointer;margin-bottom:2px}
.run:hover{background:rgba(255,255,255,.04)}
.run.on{background:rgba(91,140,255,.14)}
.run .r1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.run .r1 b{font-size:12.5px;font-weight:600;color:var(--w-ink)}
.run .r1 em{font-style:normal;font-size:10.5px;color:var(--w-mute);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.run .r2{display:block;font-size:11.5px;color:var(--w-ink-2);line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run .r3{display:block;font-size:10.5px;color:var(--w-mute);margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.run.bad .r1 b{color:#E88}
.runempty{font-size:12px;color:var(--w-mute);padding:10px;line-height:1.5}

.wshell .chatrail{background:var(--w-panel);border-right-color:var(--w-line);width:372px}
.wshell .chatrail-head{border-bottom-color:var(--w-line)}
.wshell .chatrail-head b{color:var(--w-ink)}
.wshell .chatrail-head .k,.wshell .chatrail-head a{color:var(--w-mute)}
.wshell .turn-user{background:rgba(255,255,255,.05);color:var(--w-ink)}
.wshell .turn-status{color:var(--w-ink-2)}
.wshell .steps{border-left-color:var(--w-line)}
.wshell .step .lbl{color:var(--w-ink-2)}
.wshell .step:not(.done) .lbl{color:var(--w-ink)}
.wshell .step .mark{background:var(--w-panel);border-color:var(--w-acc)}
.wshell .step.done .mark{background:var(--w-acc)}
.wshell .step .ms{color:var(--w-mute);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wshell .step .det{color:var(--w-ink-2)}
.wshell .step .det .lbl2,.wshell .step .det .quiet{color:var(--w-mute)}
.wshell .step .det .warn{background:rgba(212,150,40,.12);color:#E3B767}
.wshell .step .score{background:rgba(255,255,255,.06);color:var(--w-ink-2)}
.wshell .step .score.ok{background:rgba(70,180,130,.16);color:#7FD4AA}
.wshell .step .score.low{background:rgba(220,90,90,.16);color:#F09A9A}
.wshell .usageline{color:var(--w-mute);border-top-color:var(--w-line)}
.wshell .followup-bar{border-top-color:var(--w-line)}
.wshell .followup-box{background:rgba(255,255,255,.04);border-color:var(--w-line)}
.wshell .followup-box textarea{background:transparent;color:var(--w-ink)}
.wshell .followup-box textarea::placeholder{color:var(--w-mute)}

.wshell .canvas-toolbar{background:var(--w-panel);border-bottom-color:var(--w-line)}
.wshell .canvas-toolbar .name{color:var(--w-ink-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.wshell .canvas-toolbar .icon-btn{background:transparent;border-color:var(--w-line);color:var(--w-ink-2)}
.wshell .canvas-toolbar .icon-btn:hover{border-color:var(--w-acc);color:var(--w-ink)}
.wshell .canvas-toolbar .icon-btn.on{background:rgba(91,140,255,.16);border-color:var(--w-acc);color:#fff}
.wshell .seg{background:rgba(255,255,255,.05)}
.wshell .seg button{color:var(--w-mute)}
.wshell .seg button.on{background:var(--w-bg);color:var(--w-ink)}
.wshell .canvas-body{background:var(--w-bg)}
.wshell .styler{background:var(--w-panel);border-bottom-color:var(--w-line)}
.wshell .sctl{color:var(--w-mute)}
.wshell .sctl b{color:var(--w-ink-2)}
.wshell .stylefoot{border-top-color:var(--w-line)}

/* A build's own status line, in monospace because every value on it is a
   figure rather than a sentence. */
.statusbar{display:flex;align-items:center;gap:8px;padding:6px 16px;border-top:1px solid var(--w-line);background:var(--w-panel);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--w-mute);flex-shrink:0}
.statusbar .sb-item{white-space:nowrap}
.statusbar .sb-sep{opacity:.4}
.canvas{display:flex;flex-direction:column}
.canvas-body{flex:1;min-height:0}

@media (max-width:1100px){.runrail{display:none}}

/* The event log: the wire, not a reading of it. Terminal register because
   every line is a machine event with a timestamp, and because when this is
   the thing a seller is looking at, they are looking for something that
   went wrong rather than reading for pleasure. */
.eventlog{border-top:1px solid var(--w-line);background:#0B0D11;display:flex;flex-direction:column;max-height:34vh;flex-shrink:0}
.el-head{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--w-line);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--w-mute)}
.el-head b{color:var(--w-ink-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.el-head a{color:var(--w-mute);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;font-size:11px}
.el-head a:hover{color:var(--w-ink)}
.el-body{flex:1;overflow-y:auto;padding:6px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.65}
.el-row{display:flex;gap:10px;padding:1px 14px;white-space:pre-wrap;word-break:break-word}
.el-row:hover{background:rgba(255,255,255,.03)}
.el-t{color:#4A5464;flex-shrink:0}
.el-k{color:var(--w-mute);width:62px;flex-shrink:0}
.el-m{color:var(--w-ink-2);flex:1}
.el-step .el-k{color:var(--w-acc)}
.el-usage .el-k{color:#7FD4AA}
.el-error .el-k,.el-error .el-m{color:#F09A9A}
.el-done .el-k{color:#7FD4AA}
.el-context .el-k{color:#E3B767}

/* What the build was given to work from. A definition list because every
   row is a name and a counted value, and reads as a manifest rather than
   prose. */
.ctxcard{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--w-line);border-radius:8px;background:rgba(255,255,255,.02)}
.ctxcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ctxcard dt{color:var(--w-mute)}
.ctxcard dd{margin:0;color:var(--w-ink-2);text-align:right}
.wshell .ctxcard .lbl2{margin:0 0 7px}

/* Numbered plan steps, each with the condition it considers itself done
   under, which the planner returns and nothing displayed until now. */
.step .stepnum{margin:0 0 6px;padding-left:18px}
.step .stepnum li{margin:3px 0}
.step .stepnum .dw{display:block;font-size:11px;color:var(--mute);margin-top:1px}
.wshell .step .stepnum .dw{color:var(--w-mute)}
.step .quotes{margin:0 0 6px;padding-left:0;list-style:none}
.step .quotes li{margin:3px 0;padding:4px 8px;border-left:2px solid #E3B767;background:rgba(212,150,40,.08);font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.wshell .step .quotes li{color:var(--w-ink-2)}

/* Reading a seller's own work, above the interview it feeds. Sits between
   the note and the five steps so the order on screen matches the order the
   work happens in: read first, then answer what the reading could not. */
.readbar{margin-bottom:18px}
.readbar h2{margin-top:2px}
.readrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:760px){.readrow{grid-template-columns:1fr}}
.readfield{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:0}
.readfield span{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--ink-2)}
.readfield input{margin:0}
.readswitch{margin-top:12px;align-items:flex-start;gap:9px;font-weight:400;color:var(--ink-2);font-size:13px;line-height:1.5}
.readswitch input{margin-top:3px;flex-shrink:0}

/* One reading, shown back. Deliberately plain: a seller is checking whether
   it got them right, which is reading work, not admiring a summary. */
.readcard{margin-top:16px;padding:14px 16px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper-2)}
.readcard .rr{margin-top:9px}
.readcard .rr span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.readcard .rr p{margin:2px 0 0;font-size:14px;line-height:1.55}
.readcard .rr-notes{margin-top:12px;padding:10px 12px;background:#F7EFD6;border-radius:9px}
.readcard .rr-notes span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#8A6508}
.readcard .rr-notes ul{margin:5px 0 0;padding-left:17px;font-size:13px;line-height:1.55;color:#5E4703}
.readcard .rr-notes li{margin:3px 0}

/* Where the router reports what it took a brief to mean, and asks when two
   kinds genuinely fit. Sits under the composer on the entry screen and is
   hidden until it has something to say, so a seller who picks a tile never
   sees it at all. */
.routebox{margin:14px 0 0;padding:12px 14px;border:1px solid var(--hair);border-radius:var(--r);
  background:var(--card);font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
/* `display:flex` above outranks the browser's own rule for [hidden], so
   the empty box would otherwise sit under the composer permanently. */
.routebox[hidden]{display:none}
.routebox b{color:var(--ink);font-weight:650}
.routebox span{color:var(--mute)}
.routebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* A quiet spinner for the one call the seller waits on before anything
   else happens. Everything longer than this streams its progress instead,
   so this is the only place one is wanted. */
.spin{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
  border:1.6px solid var(--hair);border-top-color:var(--ember);border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--hair)}}

/* The launch: where the seller's work stands, above everything else on the
   entry screen, because it is what somebody arriving actually wants to
   know. Everything in it is recomputed on render — nothing about what is
   live is remembered here. */
.launchpanel{margin:18px 0 0;border:1px solid var(--hair);border-radius:var(--r-lg);
  background:var(--card);overflow:hidden;text-align:left}
.launchpanel[hidden]{display:none}
.lhead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--hair);
  font-size:14px}
.lhead .spacer{flex:1}

/* The one thing most in the way, said before the list. A seller with
   eleven warnings needs the next move, not a report. */
.lblocker{margin:0;padding:12px 16px;background:var(--paper-2);font-size:13.5px;line-height:1.5;
  border-bottom:1px solid var(--hair)}
.lblocker b{color:var(--ember-2)}
.lclear{margin:0;padding:12px 16px;font-size:13.5px;color:var(--ok);border-bottom:1px solid var(--hair)}

.lsteps{padding:6px 0}
.lstep{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;font-size:13.5px}
.lstep+.lstep{border-top:1px solid var(--hair)}
.ldot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;
  border:1.5px solid var(--hair);background:transparent}
.lstep.built .ldot{border-color:var(--warn);background:var(--warn)}
.lstep.live .ldot{border-color:var(--ok);background:var(--ok)}
.lstep.skipped .ldot{opacity:.4}
.lwhat{flex:1;min-width:0}
.lwhat b{display:block;font-weight:650}
.lwhat span{display:block;color:var(--mute);font-size:12.5px;line-height:1.45;margin-top:2px}
.lwhat .lstate{color:var(--ink-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;margin-top:4px}
.lstep.live .lstate{color:var(--ok)}
.lstep.built .lstate{color:var(--warn)}
.lactions{display:flex;gap:6px;flex:none;align-items:flex-start}

.lgaps{border-top:1px solid var(--hair);padding:4px 0 8px}
.lgapshead{display:block;padding:10px 16px 4px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);font-weight:700}
.lrow{display:flex;align-items:flex-start;gap:11px;padding:9px 16px;font-size:13.5px}
.lrow.blocking .lwhat b{color:var(--ember-2)}
.lfix{color:var(--ink-2)!important}

/* Small enough to sit on a row without becoming the row. */
.btn.xs{padding:5px 10px;font-size:12px;border-radius:8px}

/* Direct field editing (app/build.html's Edit tab) — a plain, dense form
   rather than a redesign of the canvas, since this sits inside the same
   .canvas-frame every other view uses. */
.editor-wrap{max-width:680px}
.ed-row{margin-bottom:10px}
.ed-row label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.ed-field{margin-bottom:6px}
.ed-card{border:1px solid var(--hair);border-radius:10px;padding:16px;margin:14px 0}
.ed-q{border-left:2px solid var(--hair);padding-left:12px;margin:12px 0}
.ed-opt{background:var(--ground-2,#F3ECE6);border-radius:8px;padding:10px;margin:8px 0}
.ed-opt-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.ed-opt-row .ed-field:first-child{flex:1}
.ed-num{width:64px;flex:none!important}
.ed-opt-row select{width:90px;flex:none}
.ed-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ed-sub{font-size:12px;font-weight:600;color:var(--ink-2);margin:14px 0 8px;
  display:flex;align-items:center;justify-content:space-between}
.ed-add{background:none;border:1px dashed var(--hair);border-radius:7px;padding:4px 10px;
  font-size:11px;color:var(--acc,var(--ink-2));cursor:pointer}
.ed-add:hover{border-color:var(--acc,var(--hair));background:var(--gold-light,transparent)}
.ed-del{background:none;border:0;color:var(--mute);font-size:11px;cursor:pointer;
  padding:2px 6px}
.ed-del:hover{color:var(--ember-2,#B23A2E)}
.ed-save-row{margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;align-items:center}

/* Settings panels. A titled block with a state on the right and a body that
   changes as the connection does — connected, not connected, or answering with
   a problem. Built from the same hairline, radius and paper the rest of the
   screens use rather than a look of its own, since a settings screen that
   stands out is a settings screen somebody thinks is a different product. */
.panel{border:1px solid var(--hair);border-radius:var(--r-lg);background:#fff;margin-bottom:18px;overflow:hidden}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--hair);background:var(--paper-2)}
.panel-head b{font-size:15px}
.panel-body{padding:16px 18px}
.panel-body p{margin:0 0 10px}
.panel-body p:last-child{margin-bottom:0}
.panel-body .row{margin-top:14px}
/* The label sits above its field with the pair kept together, so a form of two
   fields does not read as four loose things. */
.field{margin-bottom:12px}
.field label{margin-top:0}

/* Starting a build from a piece written in Hookmoi. Sits above the composer
   and is hidden entirely unless that seller has connected it, so the screen is
   unchanged for everybody else. Quieter than the composer on purpose: it is a
   second way in rather than the main one. */
.hookmoi{border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--paper-2);padding:12px 14px;margin-bottom:12px}
.hookmoi .hk-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hookmoi label{margin-top:0}
.hookmoi textarea{min-height:52px;background:#fff}
.hk-results{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.hk-piece{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:9px 11px;border:1px solid var(--hair);border-radius:9px;background:#fff;cursor:pointer;text-decoration:none;color:inherit}
.hk-piece:hover{border-color:var(--ember)}
/* A piece that actually matched the words, rather than one that is merely the
   most recent thing they wrote. Opening the wrong one builds a video of words
   nobody said, so the difference is drawn rather than left to reading order. */
.hk-piece.on{border-color:var(--ember);background:#FDF6F2}
.hk-piece b{grid-column:1;font-size:13.5px;font-weight:600}
.hk-piece .small{grid-column:1}
.hk-piece .hk-why{grid-column:2;grid-row:1/span 2;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.hk-piece.on .hk-why{color:var(--ember-2)}
.hk-chosen{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--ember);border-radius:9px;background:#FDF6F2}

/* Attaching footage for a video build. Deliberately quieter than the photo row
   above it: one file, attached once, and the note beside it matters more than
   the control because "it never leaves this machine" is the thing somebody
   wants to know before handing over unedited footage of themselves. */
.footagebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.addfootage{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px dashed var(--hair);border-radius:9px;background:var(--paper-2);cursor:pointer;font-size:13.5px;font-weight:600}
.addfootage:hover{border-color:var(--ember);color:var(--ember-2)}