/* Toll — app prototype (web). Tokens and buttons come from ../style.css; this file only
   turns the landing's scrolling page into a full-bleed phone shell and lays out the screens.
   Shot on a phone via Add to Home Screen -> standalone: no browser chrome in the recording. */

body.proto{
  max-width:none;
  padding:0;
  min-height:100svh;
  overflow:hidden;
  background-image:
    radial-gradient(70% 45% at 50% 0%, #1C1712 0%, transparent 60%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
}

/* Honesty: this is not the shipped app, and a viewer must be able to see that. */
.proto-flag{
  position:fixed;top:0;left:0;right:0;z-index:20;
  font-family:var(--disp);font-size:9px;letter-spacing:.18em;text-align:center;
  color:var(--ash);background:#0C0A08;padding:calc(env(safe-area-inset-top,0px) + 3px) 0 3px;
  border-bottom:1px solid var(--hairline);
}

.scr{
  position:fixed;inset:0;z-index:1;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 34px) var(--sp-3) calc(env(safe-area-inset-bottom,0px) + 76px);
  overflow-y:auto;
}
.scr[hidden]{display:none}
/* A screen is a scrolling column, so nothing in it may be squeezed. Default flex-shrink:1 let the
   sink screen's status line shrink below its two-line height and print over the consent line under
   it (owner's IMG_5107). Overflow scrolls; text never overlaps text. */
.scr > *{flex-shrink:0}

.btn.wide{width:100%}

/* ---------- bars, rows, shared ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--hairline);margin-bottom:var(--sp-3)}
.bar-title{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.bar-x{background:none;border:none;color:var(--text-2);font-size:20px;line-height:1;padding:4px 8px;cursor:pointer}
.rule{border-top:1px solid var(--hairline);margin:var(--sp-2) 0}
.hot-note{color:var(--hot)}

/* ---------- SY-06 shield ---------- */
.shield{justify-content:center;padding-inline:var(--sp-3)}
/* Whatever is behind the shield stays unbranded on purpose: no third-party mark ever goes in a
   frame we publish. The blur is what the system does anyway. */
.feed-behind{position:absolute;inset:0;z-index:0;filter:blur(16px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:var(--sp-4)}
.feed-card{flex:1;background:linear-gradient(160deg,#6d6055,#2a241e 60%,#4a413a)}
.feed-bar{height:16px;width:70%;background:#6d6055}
.feed-bar.short{width:40%}

.shield-sheet{position:relative;z-index:1;text-align:center;
  background:rgba(18,16,13,.86);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border:1px solid var(--hairline);padding:var(--sp-4) var(--sp-3)}
.shield-sheet .stamp-mark{margin:0 auto var(--sp-3)}
.shield-title{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:.02em;margin-bottom:var(--sp-2)}
/* The one line that says what a minute buys. It sits with the title, not in the small print:
   people read headings and skip subheads. */
.shield-rate{font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.3;
  color:var(--hot);margin-bottom:var(--sp-2)}
.shield-sub{color:var(--text-2);margin-bottom:var(--sp-3);line-height:1.5}
.shield-sub b{color:var(--text)}
.shield-sheet .btn{width:100%}
.shield-sheet .btn-ghost{margin-top:var(--sp-1)}

/* ---------- CO-02 till ---------- */
.balance-line{color:var(--text-2);font-size:15px;margin-bottom:var(--sp-2)}
.balance-line b{color:var(--text);font-family:var(--disp);font-weight:800}

.rate-list{list-style:none}
.rate{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"act qty min" "note note tap";
  gap:2px var(--sp-2);align-items:baseline;
  padding:var(--sp-2) 0;border-top:1px solid var(--hairline);cursor:pointer}
.rate .act{grid-area:act;font-family:var(--disp);font-weight:800;letter-spacing:.08em;font-size:15px}
.rate .qty{grid-area:qty;color:var(--text-2);font-size:14px}
.rate .min{grid-area:min;font-family:var(--disp);font-weight:800;color:var(--hot);font-size:15px}
.rate .note{grid-area:note;font-size:12px;color:var(--ash)}
/* The affordance, spelled out. A 2px hairline told nobody that two of six rows are tappable. */
.rate .tap{grid-area:tap;justify-self:end;white-space:nowrap;
  font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--hot)}
.rate.is-off{opacity:.45;cursor:default}   /* priced, but not playable in the prototype */
.rate.is-off .tap{color:var(--ash)}
.rate[data-proof]{border-left:2px solid var(--hot);padding-left:var(--sp-2);
  padding-block:var(--sp-3)}               /* a bigger target, because it is the only one */
.rate[data-proof]:active{background:var(--surface)}

.emergency{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--hairline-strong)}
.em-label{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--ash);margin-bottom:4px}
.em-body{font-size:13px;color:var(--text-2)}

/* ---------- CO-03 proof ---------- */
.proof{padding:0;overflow:hidden}
.proof video,.proof canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.proof video{background:#000}
.proof canvas{z-index:1}

.proof-top{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 40px);left:var(--sp-3);right:var(--sp-3);
  display:flex;align-items:center;justify-content:space-between}
.rec{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--text)}
.rec i{width:7px;height:7px;background:var(--hot);border-radius:50%;animation:blink 1.4s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.rec i{animation:none}}
.later{background:none;border:none;color:var(--text-2);font-size:14px;cursor:pointer}

.proof .depth-bar{position:absolute;z-index:3;right:var(--sp-3);top:22%;bottom:34%;width:8px}

.proof-hud{position:absolute;z-index:3;left:var(--sp-3);right:var(--sp-3);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.salt{font-family:var(--disp);font-size:12px;letter-spacing:.14em;color:var(--bloom);margin-bottom:var(--sp-1)}
.count{font-family:var(--disp);font-weight:800;font-size:76px;line-height:1;letter-spacing:-.02em}
.count .goal{font-size:26px;color:var(--ash)}
.cam-status{font-size:14px;color:var(--text-2);margin-top:var(--sp-1);min-height:20px}
.consent{font-size:12px;color:var(--ash);margin-top:4px}
.proof-hud .btn{margin-top:var(--sp-2)}

/* ---------- CO-01 home ---------- */
.home-label{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--ash);margin:var(--sp-3) 0 var(--sp-1)}
/* inline-block: a 64px inline span's box is its font's ascent+descent (~77px), which reached up
   into the label above it. The glyphs never touched, but the boxes did. */
.home-figure{font-family:var(--disp);font-weight:800;font-size:64px;line-height:1;color:var(--hot)}
.home-figure span{display:inline-block}
.home-burn{font-size:13px;color:var(--text-2);margin:var(--sp-1) 0 var(--sp-3)}

.ledger{list-style:none;margin-top:var(--sp-2)}
.ledger li{display:flex;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2) 0;border-top:1px solid var(--hairline);font-size:14px}
.ledger li span:first-child{color:var(--text-2)}
.ledger li span:last-child{font-family:var(--disp);font-weight:800}
.ledger.tight li{padding:6px 0}

/* ---------- CO-03a dishes ---------- */
.sink-frames{display:flex;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
.sink-frame{flex:1;aspect-ratio:3/4;position:relative;overflow:hidden;
  border:1px solid var(--hairline-strong);display:flex;align-items:flex-end;background:#1C1712}
.sink-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sink-frame span{position:relative;z-index:1;width:100%;padding:5px 7px;
  font-family:var(--disp);font-size:10px;letter-spacing:.14em;color:var(--ash);background:rgba(12,10,8,.72)}
#s-dishes .salt,#s-dishes .cam-status,#s-dishes .consent{text-align:center}
#s-dishes .btn{margin-top:var(--sp-2)}

/* ---------- KE-05 digest ---------- */
.event{padding:var(--sp-2) 0;border-top:1px solid var(--hairline);font-size:14px;color:var(--text-2);line-height:1.5}
.event b{display:block;margin-bottom:3px;
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--text)}
#s-digest .ledger.tight li{cursor:pointer}

/* ---------- keeper ---------- */
.pact-card{border:1px solid var(--hairline);padding:var(--sp-3);margin-bottom:var(--sp-3)}
.pact-label{font-family:var(--disp);font-weight:800;letter-spacing:.1em;font-size:14px}
.pact-quote{color:var(--text-2);font-style:italic;margin:var(--sp-1) 0}
.pact-note{font-size:13px;color:var(--ash)}

.price-row{padding:var(--sp-2) 0;border-top:1px solid var(--hairline)}
.price-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--disp);font-weight:800;letter-spacing:.06em;font-size:14px}
.price-min{color:var(--hot)}
.mult{width:100%;margin:var(--sp-1) 0;accent-color:var(--hot);background:transparent}
.mult-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ash)}
.mult-scale span:nth-child(2){color:var(--text)}

.proof-card{border:1px solid var(--hairline);padding:var(--sp-3);margin-bottom:var(--sp-3)}
.pc-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--disp);font-weight:800;letter-spacing:.06em;font-size:16px}
.pc-sub{font-size:13px;color:var(--text-2);margin-top:4px}
.pc-meta{font-size:14px;color:var(--text-2);padding:3px 0}
.pc-consent{font-size:12px;color:var(--ash);margin-top:var(--sp-2)}
/* Three decisions, one weight — the two alternatives were underlined links among slabs, so they
   read as fine print rather than as the counter-offer that keeps a pact alive. */
.pc-alt{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1);margin-top:var(--sp-1)}
.pc-alt .btn{min-width:0;margin-top:0;display:grid;place-items:center;font-size:14px;padding-inline:var(--sp-1)}
/* A still frame, not a player: there is no media here to play, and there never will be. */
.media-still{height:96px;border:1px solid var(--hairline-strong);
  background:repeating-linear-gradient(135deg,#1C1712 0 8px,#171310 8px 16px)}

/* ---------- receipt ---------- */
.receipt-scr{justify-content:center}
.receipt-scr .receipt{margin:0}
.receipt-scr .receipt-stamp{display:block;width:max-content;margin:var(--sp-3) auto var(--sp-1)}
.receipt-outcome{margin-top:var(--sp-3);font-size:14px;color:var(--text-2);text-align:center}
/* Grid, not flex: two flex items with different borders and label lengths measured 129px vs 127px
   (owner's IMG_5105). Equal columns cannot drift. */
.receipt-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
.receipt-actions .btn{min-width:0;margin-top:0;display:grid;place-items:center;
  font-size:14px;padding-inline:var(--sp-1)}   /* both labels on one line at 320px */

/* ---------- shoot rail (browser only; standalone hides it) ---------- */
.rail{position:fixed;z-index:10;left:0;right:0;bottom:0;display:flex;overflow-x:auto;
  background:#0C0A08;border-top:1px solid var(--hairline)}
.rail button{flex:1 0 auto;background:none;border:none;border-right:1px solid var(--hairline);
  color:var(--ash);font-size:11px;padding:10px 8px;white-space:nowrap;cursor:pointer}
.rail button.is-on{color:var(--hot)}
@media (display-mode:standalone){.rail{display:none}.scr{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}}