/* StartIUP app.css — additive components for the app pages (extends tokens.css,
   safe to also load on vault pages). */

/* account pill + menu */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rules);padding:7px 11px;font:700 11px var(--fmono);letter-spacing:.08em;color:var(--ink);text-transform:uppercase}
.acct-btn:hover{border-color:var(--grn)}
.credit-pill{display:inline-flex;align-items:center;gap:6px;background:var(--tintg);border:1px solid rgba(0,255,102,.35);color:var(--grn);font:700 11px var(--fmono);letter-spacing:.08em;padding:5px 9px;text-decoration:none;white-space:nowrap}
.credit-pill::before{content:"";width:7px;height:7px;background:currentColor}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--panel);border:1px solid var(--rules);box-shadow:0 18px 40px rgba(0,0,0,.45);display:none;z-index:120;animation:pop .16s var(--ease)}
.acct.open .acct-menu{display:block}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;font:500 12.5px var(--fmono);color:var(--mut);text-decoration:none;padding:11px 14px;border-top:1px solid var(--rule)}
.acct-menu a:first-child{border-top:none}
.acct-menu a:hover,.acct-menu button:hover{color:var(--ink);background:var(--tintg)}
.acct-menu .who{padding:11px 14px;font:500 11px var(--fmono);color:var(--dim);border-bottom:1px solid var(--rule);word-break:break-all}

/* panels with deep header strips */
.panel{background:var(--panel);border:1px solid var(--rule);margin-bottom:22px}
.panel-head{background:var(--bgd);border-bottom:1px solid var(--rule);padding:12px 18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.panel-head .t1{font:700 10.5px var(--fmono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.panel-head .t2{font:700 12px var(--fmono);color:var(--ink)}
.panel-head .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.panel-body{padding:24px 22px}
.panel-body.flush{padding:0}

/* empty states */
.empty-state{border:1px dashed var(--rules);padding:34px 28px;text-align:left}
.empty-state .ls{font-size:13px}
.empty-state .empty-title{font:700 16px var(--fhead);margin:12px 0 4px}
.empty-state .empty-line{color:var(--mut);font-size:14px;margin:0 0 18px}

/* toasts */
#toasts{position:fixed;right:18px;top:76px;z-index:400;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 36px))}
.toast{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--rules);border-left:3px solid var(--grn);padding:13px 16px;font:500 13px var(--fmono);color:var(--ink);animation:toastin .32s var(--ease);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.toast .tag{font-weight:700;color:var(--grn)}
.toast.err{border-left-color:var(--red)} .toast.err .tag{color:var(--red)}
.toast.info{border-left-color:var(--ambf)} .toast.info .tag{color:var(--ambt)}
@keyframes toastin{from{transform:translateX(30px);opacity:0}}

/* block spinner */
.bspin{display:inline-block;width:12px;height:12px;position:relative;vertical-align:-2px}
.bspin::after{content:"";position:absolute;inset:0;border:3px solid var(--rules);border-top-color:var(--grn);animation:bsp .7s steps(4) infinite}
@keyframes bsp{to{transform:rotate(360deg)}}

/* timeline (purchase handover) */
.timeline{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:18px 0}
.tl-step{display:flex;align-items:center;gap:9px;font:700 11.5px var(--fmono);letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.tl-step .dot{width:11px;height:11px;border:1px solid var(--rules);background:var(--surf)}
.tl-step.done{color:var(--grn)} .tl-step.done .dot{background:var(--grn);border-color:var(--grn)}
.tl-step.now{color:var(--ambt)} .tl-step.now .dot{background:var(--ambf);border-color:var(--ambf);animation:blink 1.1s steps(1) infinite}
.tl-line{flex:1;min-width:26px;height:1px;background:var(--rules);margin:0 12px}

/* amber dashed code box */
.codebox{border:1px dashed var(--ambf);background:var(--tinta);padding:18px 20px;font:500 14px var(--fmono);color:var(--ambt);display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.codebox .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.codebox .v{font-size:19px;letter-spacing:.06em}
.codebox button{margin-left:auto}

/* buy box */
.buybox{position:sticky;top:84px;background:var(--panel);border:1px solid var(--ambf);padding:26px 24px}
.buybox .p-vt{font:400 56px/1 var(--fcrt);color:var(--ambt)}
.buybox .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;font:500 12px var(--fmono);color:var(--mut);margin:18px 0}
.buybox .kv b{color:var(--dim);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em}
.honest-note{border:1px dashed var(--ambf);background:var(--tinta);padding:14px 16px;font:500 12.5px var(--fmono);color:var(--ambt);margin-top:16px}

/* included / not included */
.incl{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;font:500 13.5px var(--fmono)}
.incl .yes{color:var(--grn)} .incl .no{color:var(--red)}
.incl .yes::before{content:"✓ "} .incl .no::before{content:"✗ "}

/* tabs (how page) */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rules);margin:36px 0 44px;position:relative}
.tabs button{font:700 13px var(--fmono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:14px 22px;position:relative}
.tabs button.on{color:var(--ink)}
.tabs .tabline{position:absolute;bottom:-1px;height:2px;background:var(--grn);transition:left .32s var(--ease),width .32s var(--ease),background .32s var(--ease)}

/* demo frame (buy detail) */
.demo-frame{border:1px solid var(--rules);background:var(--panel)}
.demo-bar{display:flex;align-items:center;gap:10px;background:var(--bgd);border-bottom:1px solid var(--rule);padding:9px 13px;font:500 12px var(--fmono);color:var(--dim)}
.demo-bar .url{flex:1;border:1px solid var(--rules);background:var(--bg);padding:5px 10px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-frame iframe{width:100%;height:460px;border:0;display:block;background:#fff}

/* steps (how page) */
.steps{display:grid;gap:0;border:1px solid var(--rule)}
.step{display:grid;grid-template-columns:86px minmax(0,1fr);gap:18px;padding:26px 24px;border-top:1px solid var(--rule);background:var(--panel);align-items:start}
.step:first-child{border-top:none}
.step .num{font:400 46px/1 var(--fcrt);color:var(--grn)}
.step.a .num{color:var(--ambt)}
.step h3{font-size:20px;margin-bottom:6px}
.step p{color:var(--mut);font-size:15px;margin:0}
.step .k{font:500 11.5px var(--fmono);color:var(--dim);margin-top:8px;letter-spacing:.04em}

/* misc */
.vt-big{font:400 clamp(72px,10vw,120px)/0.95 var(--fcrt);color:var(--ambt);text-shadow:0 0 24px rgba(255,176,0,.35)}
[data-theme="paper"] .vt-big{text-shadow:none}
.keybox-amber{border:1px dashed var(--ambf);background:var(--tinta);padding:18px 20px;font:500 13px var(--fmono);color:var(--ambt)}
.rowline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt36{margin-top:36px}.mt44{margin-top:44px}
pre.promptbox{background:var(--bgd);border:1px solid var(--rules);padding:18px;font:500 12.5px/1.7 var(--fmono);color:var(--mut);white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto}
/* minmax(0,…) tracks: a plain auto/1fr track sizes to the widest unbreakable
   descendant (a flex row, a no-wrap span) and overflows small screens */
.grid2{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.grid3{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.skel{border:1px solid var(--rule);background:linear-gradient(90deg,var(--panel) 25%,var(--surf) 50%,var(--panel) 75%);background-size:200% 100%;animation:skel 1.2s linear infinite;min-height:80px}
@keyframes skel{to{background-position:-200% 0}}
.inline-err{border:1px solid var(--red);background:rgba(255,95,86,.08);padding:16px 18px;font:500 13px var(--fmono);color:var(--red);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.inline-err button{border:1px solid var(--red);color:var(--red);font:700 11px var(--fmono);padding:7px 12px;text-transform:uppercase;letter-spacing:.1em}

/* attribute-driven visibility beats layout display rules */
[hidden]{display:none!important}