/* ripvault-build.css — the wizard, the run dashboard and the ops page.
 *
 * The mockup's builder chrome, verbatim: shell + sidebar steps (lines 45-69),
 * landing (70-85) and builder specifics (262-352). Loaded ALONGSIDE
 * ripvault.css, which owns the tokens, the buttons and the whole kiosk — the
 * wizard's step-2 live preview mounts a real kiosk in a real .cabinet, so the
 * two files are designed to sit together rather than duplicate each other.
 *
 * TWO RANGES ARE DELIBERATELY ABSENT:
 *
 *   .scan / .scanbox / .scanview / .scanres / .scanact (mockup 285-296).
 *   "Scan a slab" is cut from v1 — inventory is manual entry only, no camera,
 *   no cert lookup, no external APIs, and no placeholder. Founder call,
 *   2026-08-20. Leaving the styles behind would be an invitation to wire the
 *   button back up.
 *
 *   .kioskwrap / .exitbar (mockup 343-348), both removed with the kiosk; the
 *   builder's "open the kiosk on this screen" uses the same markup the real
 *   kiosk route serves rather than a second copy of it.
 */

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.side{border-right:1px solid rgba(201,168,76,.14);padding:22px 18px;position:sticky;top:0;height:100vh;background:rgba(8,13,26,.7)}
.brandrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brandrow svg{width:36px;height:36px;flex:none}
.brandrow b{font-family:var(--display);font-size:13px;letter-spacing:.18em;color:var(--gold-hi)}
.brandrow small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--silver)}
.steps{list-style:none}
.steps li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;padding:10px 8px;border-radius:8px;cursor:pointer;color:var(--silver)}
.steps li .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;border:1px solid rgba(168,181,189,.3)}
.steps li.active{background:var(--cosmos-2);color:var(--ink)}
.steps li.active .n{border-color:var(--gold);color:var(--gold)}
.steps li.done .n{background:var(--teal);border-color:var(--teal);color:var(--cosmos)}
.steps li small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--silver);margin-top:2px}
.side .foot{position:absolute;left:18px;right:18px;bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--silver);line-height:1.7}
.side .foot b{color:var(--gold-hi);font-weight:500}
.main{padding:34px 40px 80px;max-width:1100px}
.page{display:none}
.page.active{display:block}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.pagehead h1{font-size:26px;margin-top:6px}
.pagehead p{color:rgba(250,245,238,.8);max-width:560px;font-weight:300}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}

/* ---------- landing ---------- */
.landing{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:60px 7vw;max-width:1400px;margin:0 auto}
.landing h1{font-size:clamp(34px,4.6vw,56px);line-height:1.02;margin:16px 0 14px}
.landing h1 span{color:var(--gold)}
.landing p.lede{font-size:17px;color:rgba(250,245,238,.8);font-weight:300;max-width:560px}
.thesis{margin-top:28px;border-left:2px solid var(--teal);padding:4px 0 4px 18px;max-width:560px}
.thesis p{color:var(--ink);font-weight:300;font-size:15px}
.thesis p b{font-weight:600;color:var(--gold-hi)}
.thesis small{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--teal)}
.landing .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.proof{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.proof div{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--silver)}
.proof b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);letter-spacing:.04em}
.topnav .brand{display:inline-flex;align-items:center;gap:9px}
.topnav .brand svg{width:22px;height:22px;flex:none}
.topnav{position:absolute;top:18px;left:7vw;right:7vw;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--silver)}
.topnav b{color:var(--gold-hi);font-weight:500}


/* ---------- builder specifics ---------- */
.preview-note{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--silver);text-align:center;margin-top:10px;text-transform:uppercase}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.sw.on{border-color:#fff}
.logo-drop{border:1px dashed rgba(168,181,189,.35);border-radius:12px;padding:22px;text-align:center;cursor:pointer;position:relative;overflow:hidden}
.logo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.logo-drop .prev{width:64px;height:64px;border-radius:12px;margin:0 auto 10px;background:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:900;color:#111;overflow:hidden;font-size:20px}
.logo-drop .prev img{width:100%;height:100%;object-fit:cover}
table.inv{width:100%;border-collapse:collapse}
table.inv th{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);text-align:left;padding:8px 8px;border-bottom:1px solid rgba(201,168,76,.2)}
table.inv td{padding:8px;border-bottom:1px solid rgba(168,181,189,.08);vertical-align:middle}
table.inv input{padding:8px 10px;font-size:13px}
table.inv .del{background:none;border:0;color:var(--silver);cursor:pointer;font-size:16px}
table.inv .del:hover{color:var(--danger)}
.addrow{display:grid;grid-template-columns:1.6fr .8fr .7fr .5fr auto auto;gap:8px;align-items:end;margin-top:12px}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:7px 10px;border-radius:999px;background:var(--cosmos-2);border:1px solid rgba(168,181,189,.2);cursor:pointer;color:var(--silver)}
.chip:hover{border-color:var(--teal);color:var(--ink)}
.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.totals div{background:var(--cosmos-2);border-radius:10px;padding:12px;text-align:center}
.totals span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase}
.totals b{display:block;font-family:var(--display);font-size:20px;color:var(--gold-hi);margin-top:4px}

.types{display:inline-flex;border:1px solid rgba(168,181,189,.25);border-radius:8px;overflow:hidden}
.types button{appearance:none;border:0;background:transparent;color:var(--silver);cursor:pointer;padding:9px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-left:1px solid rgba(168,181,189,.2)}
.types button:first-child{border-left:0}
.types button.on{background:var(--gold);color:var(--cosmos)}
.tpill{display:inline-block;font-family:var(--mono);font-size:8px;letter-spacing:.16em;padding:2px 6px;border-radius:4px;margin-right:6px;vertical-align:middle}
.tpill.slab{background:rgba(201,168,76,.18);color:var(--gold-hi)}
.tpill.single{background:rgba(0,184,169,.18);color:#7FE3D9}
.tpill.sealed{background:rgba(168,181,189,.18);color:var(--silver)}
table.inv select{padding:8px 10px;font-size:12px}
/* odds */
.mode{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mode label{margin:0}
.mode div{border:1px solid rgba(168,181,189,.2);border-radius:10px;padding:14px;cursor:pointer}
.mode div.on{border-color:var(--gold);background:var(--cosmos-2)}
.mode div b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.1em;margin-bottom:4px}
.mode div p{font-size:12px;color:rgba(250,245,238,.8);font-weight:300}
.range{display:flex;align-items:center;gap:12px}
.range input[type=range]{padding:0;height:4px;appearance:none;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:2px;border:0}
.range input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--gold)}
.odds-table td:last-child,.odds-table th:last-child{text-align:right}
.bar{height:6px;background:var(--cosmos-3);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold))}
/* The check list is the panel a seller reads hardest, so it gets full ink
   and a size that does not ask them to lean in. */
.check{display:flex;gap:10px;align-items:flex-start;padding:13px;border-radius:10px;background:var(--cosmos-2);margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink)}
.check .dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none}
.check.ok .dot{background:var(--ok)}.check.warn .dot{background:var(--gold)}.check.bad .dot{background:var(--danger)}
/* TWO columns, not four. At 11px with real letter-spacing, four tiles in a
   ~430px panel forced "HIT RATE >= PRICE" onto three lines and broke the
   minus sign off "-$8.47" onto its own. */
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi div{background:var(--cosmos-2);border-radius:10px;padding:14px 12px;text-align:center}
.kpi span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase}
.kpi b{display:block;font-family:var(--display);font-size:22px;color:var(--gold-hi);margin-top:6px;white-space:nowrap}
/* publish */
.qr{width:120px;height:120px;background:repeating-conic-gradient(#111 0 25%,transparent 0 50%) 0 0/16px 16px,#fff;border-radius:10px;margin:0 auto}
.link{font-family:var(--mono);font-size:12px;background:var(--cosmos-2);padding:10px 12px;border-radius:8px;border:1px solid rgba(168,181,189,.2);word-break:break-all}
.log{font-family:var(--mono);font-size:11px}
.log{font-size:12px}
.log div{display:grid;grid-template-columns:80px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid rgba(168,181,189,.08);color:var(--silver)}
.log b{color:var(--ink);font-weight:500}
/* ops */
.opsgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.opsgrid div{background:var(--cosmos-2);border-radius:10px;padding:12px;text-align:center}
.opsgrid span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase}
.opsgrid b{display:block;font-family:var(--display);font-size:20px;color:var(--gold-hi);margin-top:4px}
.evt{font-family:var(--mono);font-size:10px;background:#050912;border:1px solid rgba(0,184,169,.25);border-radius:8px;padding:10px;color:#9fe8df;max-height:260px;overflow:auto;white-space:pre;line-height:1.55}
.evt .k{color:var(--silver)}
.pill-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--teal)}
.pill-live i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:breathe 1.6s ease-in-out infinite}
.opslink{position:fixed;left:14px;bottom:12px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--silver);background:none;border:0;cursor:pointer;z-index:30;text-transform:uppercase}
.opslink:hover{color:var(--gold)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cosmos);padding:10px 16px;border-radius:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;display:none;z-index:60}
.toast.show{display:block}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}.two,.landing{grid-template-columns:1fr}.grid3,.grid2{grid-template-columns:1fr}.addrow{grid-template-columns:1fr 1fr}.totals,.kpi{grid-template-columns:1fr 1fr}.main{padding:22px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- operator key (publish page) and the run dashboard ----------
 * Not in the mockup: the mockup has no operator key, because it has no server
 * to protect. These are the smallest additions that let the key be shown once,
 * copied, and rotated. */
.keybox{background:var(--cosmos-2);border:1px solid rgba(201,168,76,.28);border-radius:10px;padding:16px}
.keyrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.keyrow code{flex:1;min-width:220px;font-size:13px;letter-spacing:.06em;color:var(--gold-hi)}
.runbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.runbar .who{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver)}
.runbar .who b{color:var(--gold);font-weight:500}
.limitnote{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);margin-top:8px}
.pulled-chip{font-family:var(--mono);font-size:8px;letter-spacing:.14em;padding:2px 6px;border-radius:4px;background:rgba(88,201,154,.16);color:var(--ok);margin-left:6px}
.qr i{background:#111}


/* ---------- mockup lines 36-43: form chrome ----------
 * Left out of ripvault.css because the kiosk has no forms — but the wizard is
 * nothing BUT forms, and without label{display:block} every caption runs into
 * its value ("SetSaturday Drop"). */
input,select,textarea{width:100%;background:var(--cosmos-2);border:1px solid rgba(168,181,189,.2);border-radius:8px;color:var(--ink);padding:11px 12px;font-family:var(--body);font-size:14px}
input::placeholder{color:var(--silver)}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);margin-bottom:6px}
.field{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.card{background:rgba(13,20,38,.7);border:1px solid rgba(201,168,76,.16);border-radius:14px;padding:22px}
.hr{height:1px;background:rgba(201,168,76,.18);margin:18px 0}

/* ---------- the builder's kiosk-preview overlay is GONE (2026-08-21) ----------
 * .kioskwrap / .exitbar (mockup 343-348) styled a fullscreen overlay the wizard
 * opened to preview a kiosk. The wizard's step-2 preview is inline and always
 * has been; the overlay's only trigger was "Open the kiosk", which went with the
 * kiosk itself. */

/* ---------- verified signup (0167) ---------- */
.err{min-height:15px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--danger);margin:2px 0 6px}
.setrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(168,181,189,.08)}
.setrow:last-child{border-bottom:0}
.setrow .nm{font-family:var(--body);font-size:14px;color:var(--ink)}
.setrow .meta{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--silver);margin-top:3px;text-transform:uppercase}
.setrow .acts{display:flex;gap:6px}
.setrow .acts .btn{padding:8px 10px;font-size:9px}
.iglink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silver);text-decoration:none;border:1px solid rgba(168,181,189,.28);
  border-radius:999px;padding:9px 14px;transition:border-color .15s,color .15s}
.iglink:hover{border-color:var(--gold);color:var(--gold)}
.logo-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}

/* ---------- the even-odds promise (0168) ----------
 * Replaces the mode selector on the odds page. It is a statement of fact about
 * how the draw works, so it reads as one — not as a setting the seller could
 * have chosen differently. */
.evenline{border-left:2px solid var(--teal);padding:10px 0 10px 16px;margin:6px 0 4px}
.evenline b{display:block;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--gold-hi)}
.evenline span{display:block;margin-top:4px;font-size:13px;font-weight:300;color:var(--silver)}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE (<=900px) — audited at 390px, 2026-08-20
   ══════════════════════════════════════════════════════════════════════════
   The mockup's one mobile rule collapsed the shell to a single column and made
   .side static, but left `.side .foot` at position:absolute. With its ancestor
   no longer positioned it anchored to the VIEWPORT instead, and sat on top of
   the email and mobile fields — 5,863px² of overlap, measured.

   Fixed here, plus the thing the founder actually asked for: the sidebar stops
   being a sidebar and becomes a horizontal step bar across the top. */
@media (max-width:900px){

  /* ── the sidebar becomes a top step bar ── */
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid rgba(201,168,76,.16);
    padding:14px 16px 12px;display:flex;flex-direction:column;gap:12px}
  .brandrow{margin-bottom:0}
  /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so the
     pill row refused to shrink below its content and pushed the whole aside to
     813px inside a 390px viewport — the page scrolled sideways. overflow-x:auto
     does nothing until the box is allowed to be narrower than its contents. */
  .side,.main,.steps{min-width:0}
  .steps{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .steps::-webkit-scrollbar{display:none}
  .steps li{flex:0 0 auto;grid-template-columns:22px auto;padding:8px 12px;
    border:1px solid rgba(168,181,189,.18);border-radius:999px;white-space:nowrap}
  .steps li.active{border-color:var(--gold)}
  /* The step SUBTITLE is what makes each pill too wide to scan; the number and
     the name carry the meaning on a phone. */
  .steps li small{display:none}
  /* THE BUG: absolute, with nothing positioned above it, over the form.
     Hidden rather than restacked — as sidebar chrome it belongs beside the
     steps, and on a phone it lands between the nav and the first field as three
     lines of tagline nobody came for. The brand is already in the bar above. */
  .side .foot{display:none}

  .main{padding:20px 16px 72px}
  .pagehead h1{font-size:24px}

  /* Nothing may sit on top of a field: every label stacks above its input. */
  .field{margin-bottom:16px}
  label{position:static;font-size:11px;margin-bottom:7px}
  .grid2,.grid3{grid-template-columns:1fr;gap:0}
  .grid2>.field,.grid3>.field{margin-bottom:16px}
  .kpi,.totals,.opsgrid{grid-template-columns:1fr 1fr;gap:8px}
  /* The same min-width:auto trap, one level down: a GRID item will not shrink
     below its content either, so the odds card grew to 554px inside 390 and the
     page scrolled sideways again. The chain has to be unbroken from the grid
     down to the element that actually scrolls. */
  .two{grid-template-columns:1fr;gap:16px}
  .two>*,.card,.tablescroll{min-width:0}
  .tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card{padding:16px}
  .actions{flex-wrap:wrap}
  .actions .btn{flex:1 1 auto;min-width:132px}

  /* Wide tables scroll inside their own box rather than the page. */
  table.inv{min-width:520px}
  .card>table.inv,.odds-table{display:table}
  .tablescroll{overflow-x:auto}
  .addrow{grid-template-columns:1fr 1fr;gap:10px}

  /* The landing stacks; its kiosk preview keeps a sane height. */
  .landing{padding:76px 20px 40px;gap:28px}
  .topnav{left:20px;right:20px;font-size:10px;gap:10px}
  .proof{gap:16px 22px}
  .cabinet{width:min(360px,100%)}
}

/* ---------- [hidden] must actually hide ----------
 * The hidden attribute is a UA-stylesheet display:none, so ANY author rule that
 * sets display beats it. .pending (grid) and .quick (flex) both did, which is
 * why "Rendering your card…" stayed on screen underneath the loaded image and
 * the demo chips could show without ?demo=1. This is the general fix, not a
 * per-element patch. */
[hidden]{display:none !important}

/* ---------- the optional per-row photo control (0170) ---------- */
table.inv th .opt{display:block;font-size:9px;letter-spacing:.14em;color:var(--silver);text-transform:none;opacity:.85}
.photocell{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:8px;
  border:1px dashed rgba(168,181,189,.34);cursor:pointer;overflow:hidden;background:var(--cosmos-2)}
.photocell:hover{border-color:var(--teal)}
.photocell span{font-family:var(--mono);font-size:17px;color:var(--silver);line-height:1}
.photocell input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.photocell.has{border-style:solid;border-color:rgba(201,168,76,.4)}
.photocell.has img{width:100%;height:100%;object-fit:cover;display:block}
.photox{position:absolute;top:2px;right:2px;width:17px;height:17px;border:0;border-radius:50%;
  background:rgba(4,7,15,.82);color:var(--ink);font-size:12px;line-height:1;cursor:pointer;padding:0}
.photox:hover{background:var(--danger)}