/* Colour tokens live in the theme sheets — theme-loop.css (§3 palette) and
   theme-finpos.css (the vendor's --fp-* set) — loaded before this file. What remains
   here is layout, not theme. */
:root{
  /* the device is a fixed 432x1000 artwork; this is the only thing that resizes it */
  --pos-scale:.76;
  --rail-w:216px;
  --nav-h:61px;      /* sticky nav: 18px padding x2 + 24px lockup + 1px rule */
  --site-max:1240px; /* matches loopnetwork.ai's content width */
}
/* §4: never Inter/Roboto/Arial/serif — no system-ui, which resolves to Roboto on Android */
body{margin:0;background:var(--surface);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--blue-dark)}

/* stretch, so the terminal card and the trace card share one height */
.page{
  min-height:calc(100vh - var(--nav-h));box-sizing:border-box;padding:32px 40px 40px;
  display:flex;align-items:stretch;justify-content:center;gap:40px;flex-wrap:wrap;
}
/* #app is a flex container so .pos-row — and the terminal card inside it — inherit the
   stretched row height. Without this the terminal card keeps its natural height and only
   the flow card grows, so "same height" silently holds in one direction only. */
#app{flex:none;min-width:0;display:flex}
#trace{flex:1 1 700px;max-width:1150px;min-width:520px;display:flex;min-height:0}

.pos-row{flex:1;display:flex;align-items:stretch;gap:32px}
.pos-rail{width:var(--rail-w);flex:none;padding-top:8px;display:flex;flex-direction:column;gap:24px;align-self:flex-start}
.pos-device{width:calc(432px * var(--pos-scale));height:calc(1000px * var(--pos-scale));flex:none;position:relative}
.pos-device-inner{
  position:absolute;left:0;top:0;width:432px;height:1000px;
  transform:scale(var(--pos-scale));transform-origin:0 0;
  filter:drop-shadow(0 20px 36px rgba(6,13,26,.16));
}
.tr-figure{flex:1;min-height:0;padding:10px 0 2px}

/* both panels are the same card geometry — only the fill differs */
.pos-panel,.tr-panel{border-width:1px;border-style:solid;border-radius:18px;padding:20px}
.pos-panel{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:16px;
  background:var(--bg);border-color:var(--border);
}
/* tinted Loop Blue (§8's chip tint) so the card separates from the page at any resolution */
.tr-panel{
  flex:1;display:flex;flex-direction:column;min-width:0;
  background:var(--blue-tint);border-color:var(--blue-tint-border);
}

@keyframes loopspin{to{transform:rotate(360deg)}}
@keyframes loopbar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes looppulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes loopcaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* hover states — these were `style-hover` attributes in the design source.
   §6: ambient shadows only, nothing heavy. */
.rail-item:hover{background:rgba(6,13,26,.04)}
.restart:hover{color:var(--ink) !important;border-color:var(--ink-soft) !important}
.method-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(6,13,26,.08) !important}
.card-img:hover{transform:translateY(-3px)}
/* transparent hit zones over the PIN capture — a faint press state so keys feel live */
.pin-key:hover{background:rgba(6,13,26,.07)}
.pin-key:active{background:rgba(6,13,26,.14)}

/* ---- transaction trace (swimlane) ---------------------------------- */
.tr-svg{width:100%;height:100%;display:block}
.tr-svg text{font-family:'Manrope',sans-serif}
.n-t{font-size:15px;font-weight:700;fill:var(--ink)}
.n-s{font-size:12px;font-weight:400;fill:var(--ink-soft)}
.n-l{font-size:11px;font-weight:700;letter-spacing:.8px;fill:var(--ink-soft)}

/* a node is dim until reached, mint once passed, blue while active */
.node{opacity:.35;transition:opacity .35s}
.node rect{transition:fill .35s,stroke .35s}
.node.seen{opacity:1}
.node.seen rect{fill:rgba(101,223,175,.3);stroke:var(--mint)}
.node.hl{opacity:1}
.node.hl rect{fill:rgba(35,81,222,.14);stroke:var(--blue);stroke-width:2}
.node.hl .n-s{fill:var(--ink)}

/* a lane that takes no part in this transaction */
.node.na{opacity:.2}
.node.na rect{stroke-dasharray:2 4}
.node.na.seen,.node.na.hl{opacity:1}

.tr-dot{filter:drop-shadow(0 0 5px rgba(35,81,222,.45))}

/* settlement: money movements appear as their leg is reached */
.flowline{opacity:0;transition:opacity .4s}
.flowline.show{opacity:1}
.lbl{opacity:0;transition:opacity .4s}
.lbl.show{opacity:1}
.flowline.na,.lbl.na{display:none}
.n-a{font-size:13px;font-weight:800;fill:var(--ink);font-family:'Plus Jakarta Sans',sans-serif}
.nav-link{font-family:'Manrope',sans-serif;color:var(--ink-soft)}
.nav-link:hover{color:var(--blue)}

.tr-btn{
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;color:var(--ink-soft);
  background:transparent;border:1px solid var(--border);border-radius:12px;
  padding:8px 14px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.tr-btn:hover{color:var(--ink);border-color:var(--ink-soft)}
.tr-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.tr-btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.tr-btn:disabled{opacity:.35;cursor:not-allowed}

/* ---- responsive ----------------------------------------------------
   Side by side needs rail + terminal (~616px) + gap + a flow card wide enough to
   stay legible. Below that the flow card drops onto its own full-width row. */
@media (max-width:1240px){
  #app{flex:1 1 100%;display:flex;justify-content:center}
  #trace{flex:1 1 100%;min-width:0;max-width:none}
  .tr-figure{flex:none}
  .tr-svg{height:auto}
}
@media (max-width:900px){
  :root{--pos-scale:.68}
  .page{padding:24px 24px 32px;gap:24px}
  .pos-row{flex-direction:column;align-items:center;gap:24px}
  .pos-rail{width:100%;max-width:420px;gap:14px}
  /* phone: the terminal follows the scenario selector immediately — the eight-row
     flow list collapses into the .rail-progress bar */
  .rail-flow{display:none}
  .pos-rail .rail-progress{display:block}
}
/* Below this the diagram would shrink past legibility, so it scrolls instead.
   The container scrolls — never the page body. */
@media (max-width:760px){
  .tr-figure{overflow-x:auto}
  .tr-svg{width:900px;max-width:none}
}
@media (max-width:560px){
  :root{--pos-scale:.6}
  .page{padding:16px 14px 24px;gap:16px}
  .pos-panel,.tr-panel{padding:14px;border-radius:12px}
  /* compact menu: brand + CTA only; the deck link lives in the footer */
  .site-links{display:none}
  /* keep the playback controls reachable while the diagram scrolls */
  #tr-ctrl,#set-ctrl{position:sticky;bottom:8px;background:var(--bg);border:1px solid var(--border);
    border-radius:12px;padding:8px 10px;box-shadow:0 6px 20px rgba(6,13,26,.1)}
}
@media (max-width:400px){
  :root{--pos-scale:.52}
  .page{padding:12px 10px 20px}
}


/* ---- site chrome: matches loopnetwork.ai --------------------------------
   Same palette (the live site expresses these tokens in oklch), same two faces,
   same nav/hero/footer proportions. */
.site-nav{
  position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;padding:18px 48px;background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
}
/* brand left, links dead-centre — the empty third column balances the brand */
.site-nav .site-brand{justify-self:start}
.site-nav .site-links{justify-self:center}
.site-brand{display:flex;align-items:center;gap:10px}
.site-brand .loop-ring{width:24px;height:24px;border-radius:50%;border:4px solid var(--blue);box-sizing:border-box;flex:none}
.site-brand .loop-word{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;letter-spacing:1.5px;color:var(--ink);line-height:1}
.site-links{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:600}
.site-links a{color:var(--ink)}
.site-links a:hover{color:var(--blue)}
.site-links a[aria-current="page"]{color:var(--blue)}
.site-cta{background:var(--blue);color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:700;white-space:nowrap}
.site-cta:hover{background:var(--blue-dark);color:#fff}

.site-foot{border-top:1px solid var(--border);background:var(--bg);padding:56px 48px 32px}
.site-foot-in{max-width:var(--site-max);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-foot h4{font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;margin:0 0 14px;color:var(--ink)}
.site-foot-col{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.site-foot-col a{color:var(--ink-soft)}
.site-foot-col a:hover{color:var(--blue)}
.site-foot-bar{max-width:var(--site-max);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--border);font-size:12.5px;color:var(--ink-soft)}
.site-ver{float:right;font-weight:600}
.flow-chain{max-width:var(--site-max);margin:0 auto;padding:10px 40px 0;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-soft)}
html.present .flow-chain{display:none}

/* ---- shared label ------------------------------------------------------- */
.kicker{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--ink-soft);margin-bottom:14px}

@media (max-width:900px){
  .site-nav{padding:14px 20px;gap:14px;display:flex;flex-wrap:wrap;justify-content:space-between}
  .site-links{gap:20px;font-size:14px;order:3;width:100%;justify-content:center}
  .site-foot-in{grid-template-columns:1fr;gap:28px}
  .site-foot{padding:40px 20px 24px}
}
/* ---- presenter mode --------------------------------------------------- */
/* ?present or the P key hides the site chrome so the page fills a projector.
   Esc restores it; chrome.js owns the class. */
html.present .site-nav,html.present .site-foot{display:none}
html.present .page{min-height:100vh}

/* ---- spec mode --------------------------------------------------------- */
/* The "Spec Details" nav toggle. chrome.js owns the html.spec class, the highlight box
   and the panel; everything here stays on the theme tokens — no literals. */
.site-spec{justify-self:end;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;
  color:var(--ink-soft);background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:8px 14px;cursor:pointer}
.site-spec:hover{color:var(--blue);border-color:var(--blue-tint-border)}
html.spec .site-spec{color:#fff;background:var(--blue);border-color:var(--blue)}
html.spec .page [style]{cursor:crosshair}
.spec-hl{position:absolute;z-index:80;pointer-events:none;border:1px dashed var(--blue);
  background:var(--blue-tint);opacity:.35;border-radius:2px}
.spec-panel{position:fixed;right:16px;bottom:16px;z-index:90;width:360px;max-height:60vh;overflow:auto;
  background:var(--bg);border:1px solid var(--blue-tint-border);border-radius:12px;
  box-shadow:0 4px 12px rgba(6,13,26,.06);padding:14px 16px;
  font-family:'Manrope',sans-serif;font-size:12px;line-height:1.5;color:var(--ink)}
.spec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px}
.spec-head span{font-family:'Manrope',sans-serif;font-weight:700;font-size:11.5px;color:var(--ink-soft)}
.spec-vendor{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--surface);
  border:1px solid var(--border);color:var(--ink-soft);font-size:11.5px}
.spec-note{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--mint-tint);
  border:1px solid var(--mint);color:var(--mint-ink);font-size:11.5px}
.spec-table{display:grid;grid-template-columns:104px 1fr 1fr;column-gap:10px;margin-top:4px}
.spec-th{padding:6px 0 4px;border-bottom:1px solid var(--blue-tint-border);
  font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-soft)}
.spec-prop{padding:6px 0;border-bottom:1px solid var(--border);color:var(--ink-soft);word-break:break-word}
.spec-cell{padding:6px 0;border-bottom:1px solid var(--border);min-width:0;word-break:break-word}
.spec-token{color:var(--blue);font-size:11px}
.spec-raw{font-size:11px;color:var(--ink-soft)}
.spec-hint{padding-top:8px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.spec-units{padding-top:6px;font-size:10.5px;line-height:1.5;color:var(--ink-soft);
  border-top:1px solid var(--border);margin-top:8px}
html.present .site-spec,html.present .spec-panel,html.present .spec-hl{display:none}

/* ---- story deck ------------------------------------------------------- */
.story{max-width:var(--site-max);margin:0 auto;min-height:calc(100vh - var(--nav-h));
  box-sizing:border-box;padding:0 40px;display:flex;flex-direction:column}
html.present .story{min-height:100vh}
/* `safe center` + overflow-y: when a slide is taller than the screen (short viewport,
   mirrored projector), plain `center` clips both ends unreachably — safe centering
   top-aligns instead and the slide scrolls. `center` stays as the older-browser fallback. */
.story-slide{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;overflow-y:auto;padding:48px 0 24px}
.story-slide h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:56px;line-height:1.08;
  letter-spacing:-1.5px;color:var(--ink);margin:0 0 18px}
.story-slide h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:40px;line-height:1.12;
  letter-spacing:-1px;color:var(--ink);margin:0 0 22px}
.story-lede{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:720px;margin:0}
.story-center{text-align:center;display:flex;flex-direction:column;align-items:center}
.story-center .story-lede{margin:0 auto}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding-top:10px}
.story-pt{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:22px 24px}
.story-pt h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:17px;margin:0 0 8px;color:var(--ink)}
.story-pt p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}
.story-lanes{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.story-lane{display:flex;align-items:baseline;gap:16px;background:var(--bg);border:1px solid var(--border);
  border-radius:12px;padding:13px 18px}
.story-lane-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;color:var(--ink);
  flex:none;width:130px}
.story-lane-sub{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.story-deeper{margin-top:22px;background:var(--blue-tint);border:1px solid var(--blue-tint-border);
  border-radius:18px;padding:20px 24px}
.story-deeper .story-pt{background:var(--bg)}
.story-note{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:0}
.story-hint{font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--ink-soft);padding-top:18px}
.story-hint b{color:var(--ink)}
.story-table{border-collapse:collapse;width:100%;background:var(--bg)}
.story-table th,.story-table td{border:1px solid var(--border);padding:9px 14px;font-size:13.5px;text-align:left}
.story-table th{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--ink)}
.story-table td{color:var(--ink-soft)}
.story-cta{margin-top:26px;font-size:16px !important;padding:14px 28px !important}
.story-stats{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;padding-top:30px}
.story-stats div{display:flex;flex-direction:column;gap:3px;align-items:center}
.story-stats b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.5px;color:var(--ink)}
.story-stats span{font-size:12px;font-weight:600;color:var(--ink-soft);max-width:150px;text-align:center}
.story-steps{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px 0 16px}
.story-steps div{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.story-steps b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--blue)}
.story-badges{display:flex;gap:8px;flex-wrap:wrap;padding-top:16px}
.story-badges span{font-size:10.5px;font-weight:700;letter-spacing:1px;color:var(--ink-soft);border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:var(--bg)}
.story-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 0 26px}
.story-dots{display:flex;gap:8px}
.story-dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:background .18s}
.story-dot.on{background:var(--blue)}
@media (max-width:760px){
  .story{padding:0 20px}
  .story-slide h1{font-size:38px}
  .story-slide h2{font-size:29px}
  .story-lane-name{width:auto}
  .story-lane{flex-direction:column;gap:4px}
}

/* big room (100-inch tv, projector): the deck scales up with the viewport instead of
   floating in whitespace at 1240px. Scoped to .story so the transaction and settlement
   layouts — which have their own --pos-scale breakpoints — are untouched. */
@media (min-width:1640px) and (min-height:900px){
  .story{max-width:1560px;padding:0 56px}
  .story-slide h1{font-size:74px}
  .story-slide h2{font-size:53px}
  .story-lede{font-size:22px;max-width:940px}
  .story-grid{gap:24px}
  .story-pt{padding:28px 30px}
  .story-pt h3{font-size:22px}
  .story-pt p{font-size:18px}
  .story-lane{padding:16px 22px}
  .story-lane-name{font-size:19px;width:170px}
  .story-lane-sub{font-size:17px}
  .story-table th,.story-table td{font-size:17px;padding:12px 18px}
  .story-note{font-size:17px}
  .story-hint{font-size:15px}
  .story-steps div{font-size:17px;padding:11px 21px}
  .story-badges span{font-size:13px;padding:8px 15px}
  .story-cta{font-size:20px !important;padding:18px 36px !important}
  .story-dot{width:10px;height:10px}
}
@media (min-width:2240px) and (min-height:1200px){
  .story{max-width:2080px}
  .story-slide h1{font-size:96px}
  .story-slide h2{font-size:68px}
  .story-lede{font-size:28px;max-width:1240px}
  .story-grid{gap:30px}
  .story-pt{padding:34px 38px}
  .story-pt h3{font-size:28px}
  .story-pt p{font-size:23px}
  .story-lane{padding:20px 28px}
  .story-lane-name{font-size:24px;width:220px}
  .story-lane-sub{font-size:22px}
  .story-table th,.story-table td{font-size:22px;padding:15px 22px}
  .story-note{font-size:22px}
  .story-hint{font-size:19px}
  .story-steps div{font-size:22px;padding:13px 26px}
  .story-badges span{font-size:16px;padding:10px 19px}
  .story-cta{font-size:26px !important;padding:22px 44px !important}
  .story-dot{width:12px;height:12px}
}

/* desktop: the compact progress bar exists only on the phone */
.rail-progress{display:none}

/* presenting: only the current message matters — dim everything else harder,
   and drop the M/C screen-owner badges the room has no key for */
html.present .node{opacity:.18}
html.present .node.seen{opacity:.45}
html.present .node.hl,html.present .node.na.hl{opacity:1}
html.present .rail-abbr{display:none}