/* /account - spec-sheet system (2026-08-03 redesign).
   Rules of the page, applied everywhere:
   - depth = surface ladder + 1px hairlines. No shadows, no boxed cards.
   - type = Inter for every label, status, chip and link (sentence case);
     Bebas Neue for kickers and table headings. JetBrains Mono is a DATA
     face only - licence keys, order numbers, prices, version numbers.
     Never a status word, a button, a divider or a line of prose.
   - data = JetBrains Mono 13px, tabular numerals, prices right-aligned.
   - brick has exactly three jobs: active menu marker, primary button, focus.
   - motion = 150ms hover, 200ms panel, stagger 40ms; reduced-motion safe. */

.acct-block{min-height:60vh;padding-top:clamp(90px,12vh,140px)}
#acctRoot{max-width:1080px}
#acctRoot [hidden]{display:none!important}

/* surface ladder (warm, from the espresso base up) */
#acctRoot{
  --s1:#0e0c0a;--s2:#141110;--s3:#1a1613;
  --hair:rgba(241,235,222,.08);
  --hair-strong:rgba(241,235,222,.15);
  --ease:cubic-bezier(.23,1,.32,1);
}

.acct-input{background:var(--s1);border:1px solid var(--hair-strong);border-radius:4px;color:var(--cream);font-size:15px;padding:11px 14px;font-family:var(--sans);width:100%;transition:border-color .15s var(--ease)}
/* iOS Safari zooms the whole viewport the moment a focused field measures
   under 16px, and it does NOT zoom back out when the field blurs - the
   customer is left on a magnified, side-scrolling page in the middle of
   signing up. 16px is the threshold, not a preference. */
@media(max-width:760px){.acct-input{font-size:16px}}
.acct-input:focus{outline:none;border-color:var(--accent)}
.acct-hint{color:var(--cream-faint);font-size:13px;line-height:1.6}
.acct-err{color:#e2725b;font-size:13px;min-height:1em;margin:0}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}

/* buttons: hairline ghost + one brick primary. Small, square-ish, quiet. */
.acct-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--hair-strong);border-radius:4px;color:var(--cream);font-size:13px;padding:8px 14px;cursor:pointer;font-family:var(--sans);text-decoration:none;transition:border-color .15s var(--ease),color .15s var(--ease),transform .16s var(--ease)}
.acct-btn:hover{border-color:var(--cream-dim)}
.acct-btn:active{transform:scale(.97)}
.acct-btn.primary{border-color:var(--accent);color:var(--accent-bright)}
.acct-btn.primary:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.acct-btn[disabled]{opacity:.45;cursor:default}

/* ---------- auth card ---------- */
.auth-wrap{display:grid;justify-items:center;gap:18px}
.auth-card{width:100%;max-width:400px;background:var(--s1);border:1px solid var(--hair);border-radius:8px;padding:34px 32px 26px}
.auth-card .kicker{font-size:14px}
.auth-serif{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--cream-dim);margin:10px 0 22px;line-height:1.5}
.auth-title{font-size:clamp(32px,3.6vw,40px);margin:0 0 16px}
.auth-sub{font-size:14px;color:var(--cream-dim);line-height:1.6;margin:0 0 16px}
.auth-sub strong{color:var(--cream);font-weight:500}
.auth-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--hair-strong);border-radius:4px;color:var(--cream);font-size:14px;font-weight:500;padding:11px 16px;cursor:pointer;background:var(--s2);transition:border-color .15s var(--ease)}
.auth-google:hover{border-color:var(--cream-dim)}
.auth-google svg{width:17px;height:17px;flex:none}
.auth-or{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0;color:var(--cream-faint);font-family:var(--sans);font-size:12.5px}
.auth-form{display:grid;gap:10px}
.auth-submit{width:100%;justify-content:center}
.auth-code{font-family:var(--mono);font-size:21px;letter-spacing:10px;text-align:center}
.auth-alt{margin:12px 0 0;font-size:13px;color:var(--cream-dim);text-align:left}
.auth-link{background:none;border:none;padding:0;cursor:pointer;color:var(--cream);font-size:13px;font-family:var(--sans);border-bottom:1px solid var(--hair-strong);transition:border-color .15s var(--ease)}
.auth-link:hover{border-color:var(--accent)}
.auth-note{max-width:400px;color:var(--cream-faint);font-size:12.5px;font-family:var(--sans)}

/* ---------- profile header ---------- */
.prof-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--hair-strong);margin-bottom:30px}
.prof-id{display:flex;align-items:center;gap:16px}
.prof-avatar{width:56px;height:56px;flex:none;border-radius:12px;background:var(--accent);background-size:cover;background-position:center;border:none;display:grid;place-items:center;font-family:"Bebas Neue",sans-serif;font-size:28px;color:var(--bg);cursor:pointer;padding-top:2px;transition:opacity .15s var(--ease)}
.prof-avatar:hover{opacity:.85}
.prof-avatar.has-img{color:transparent}
.prof-avatar.busy{opacity:.5;pointer-events:none}
.prof-who{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.prof-email{font-size:17px;color:var(--cream);font-weight:500;word-break:break-all}
.prof-sub{font-family:var(--sans);font-size:13px;color:var(--cream-faint)}
.prof-actions{display:flex;gap:10px}

/* ---------- body: contents column / content / margin notes ---------- */
.acct-body{display:grid;grid-template-columns:150px minmax(0,1fr) 190px;gap:44px;align-items:start}
.acct-content{min-width:0}

/* contents column: text, not pills. Active = 2px brick rule. */
.acct-tabs{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px}
.acct-tab{display:flex;justify-content:space-between;align-items:baseline;text-align:left;background:none;border:none;border-left:2px solid transparent;color:var(--cream-dim);font-family:var(--sans);font-size:14.5px;font-weight:500;padding:9px 0 9px 14px;cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease)}
.acct-tab:hover{color:var(--cream)}
.acct-tab.on{border-left-color:var(--accent);color:var(--cream)}
.acct-tab .n{color:var(--cream-faint);font-size:11px}
.acct-tab.on .n{color:var(--cream-dim)}

/* margin-note column */
.acct-aside{position:sticky;top:96px;display:grid;gap:22px;font-family:var(--sans);font-size:13px;line-height:1.8;color:var(--cream-faint)}
.acct-aside .kv b,.acct-aside .kv span+b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.acct-aside h5{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:13px;letter-spacing:.1em;color:var(--cream-dim);margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--hair)}
.acct-aside a{color:var(--cream-dim);border-bottom:1px solid var(--hair-strong)}
.acct-aside a:hover{border-color:var(--accent)}
.acct-aside .kv{display:flex;justify-content:space-between;gap:10px}
.acct-aside .kv b{color:var(--cream);font-weight:500}

/* ---------- shared ---------- */
.acct-empty{padding:34px 0;color:var(--cream-faint);font-size:14px;border-top:1px solid var(--hair)}
.acct-empty a{color:var(--cream-dim);border-bottom:1px solid var(--hair-strong)}
/* ---------- the wait: a skeleton of the page, not the word "Loading" ----------
   Same geometry as the signed-in dashboard (56px avatar, 150 / 1fr / 190 rail
   grid), so the real content replaces it without a jump. One warm sweep moves
   left to right across every bar; the whole thing is a hairline lighter than
   the page, never brighter than the content it stands in for. */
.acct-skel{padding-top:2px;animation:skel-in .4s var(--ease) both}
@keyframes skel-in{from{opacity:0}to{opacity:1}}

.sk{display:block;position:relative;overflow:hidden;background:var(--s2);border-radius:4px}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(241,235,222,.05) 45%,rgba(241,235,222,.08) 50%,rgba(241,235,222,.05) 55%,transparent);
  animation:skel-sweep 1.5s var(--ease) infinite;
}
@keyframes skel-sweep{to{transform:translateX(100%)}}

.skel-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--hair-strong);margin-bottom:30px}
.sk-av{width:56px;height:56px;flex:none;border-radius:12px}
.sk-name{width:min(240px,50%);height:17px}

.skel-body{display:grid;grid-template-columns:150px minmax(0,1fr) 190px;gap:44px;align-items:start}
.skel-body>*{min-width:0}
.skel-rail{display:grid;gap:10px}
.skel-aside{display:grid;gap:10px}
.sk-cap{width:70px;height:10px;opacity:.6}
.sk-tab{width:100%;height:13px}
/* the content column carries the same raised panel the real one does */
.skel-main{min-width:0;background:var(--s1);border:1px solid var(--hair);border-radius:10px;padding:clamp(20px,3vw,32px)}
.sk-h{width:190px;height:34px;margin-bottom:30px}
.skel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.sk-card{height:156px;border-radius:8px}
.sk-banner{height:206px;border-radius:8px}
.sk-cap2{margin-top:14px}
.sk-row{height:13px;margin-bottom:16px}
.sk-line{height:11px}
.sk.w2{width:62%}

/* A slow store gets one plain sentence under the skeleton. It only ever
   appears if the call is genuinely taking a long time, so it reads as
   information rather than as decoration. */
.acct-slow{color:var(--cream-faint);font-size:13px;padding:26px 0 0}

@media(max-width:1100px){.skel-body{grid-template-columns:150px minmax(0,1fr)}.skel-aside{display:none}}
@media(max-width:900px){.skel-cards{grid-template-columns:1fr}.sk-card{height:82px}}
@media(max-width:760px){
  /* the rail becomes a wrapping row, exactly like the real tab strip does */
  .skel-body{grid-template-columns:minmax(0,1fr);gap:20px}
  .skel-rail{display:flex;flex-wrap:wrap;gap:14px;border-bottom:1px solid var(--hair-strong);padding-bottom:14px}
  .skel-rail .sk-cap{display:none}
  .skel-rail .sk-tab{width:64px;height:15px}
  .skel-main{padding:20px}
  .sk-h{height:30px;margin-bottom:24px}
  .sk-banner{height:170px}
}
@media (prefers-reduced-motion: reduce){
  .acct-skel{animation:none}
  .sk::after{animation:none;background:none}
  .sk{background:var(--s3)}
}

.led{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:500}
.led::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cream-faint)}
.led.ok{color:var(--cream)}          .led.ok::before{background:var(--accent-bright)}
.led.warn{color:#d9a05f}             .led.warn::before{background:#d9a05f}
.led.dead{color:var(--cream-faint)}  .led.dead::before{background:#e2725b}

/* ---------- orders: a ruled table ---------- */
.ord-table{width:100%;border-collapse:collapse;font-size:14px}
.ord-table th{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--cream-faint);text-align:left;padding:10px 12px 8px 0;border-bottom:1px solid var(--hair-strong)}
.ord-table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair);vertical-align:baseline}
.ord-table .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--cream-dim)}
/* "13 Aug 2026" is a written date, not a serial - body face, tabular figures
   only so the column still lines up. */
.ord-table .when{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;color:var(--cream-dim);white-space:nowrap}
.ord-table .item a{color:var(--cream);border-bottom:1px solid var(--hair-strong)}
.ord-table .item a:hover{border-color:var(--accent)}
.ord-table .item .ct{font-size:12px;color:var(--cream-faint);margin-left:8px}
.ord-table th.total,.ord-table td.total{text-align:right;padding-right:0;white-space:nowrap}
.ord-table td.total{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--cream)}
.ord-table th:last-child,.ord-table td:last-child{padding-left:26px;width:1%}
.ord-table .num{white-space:nowrap}
.ord-table .acts{display:flex;gap:14px;justify-content:flex-end;white-space:nowrap}
.ord-link{background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--cream-dim);border-bottom:1px solid var(--hair-strong);text-decoration:none;transition:color .15s var(--ease),border-color .15s var(--ease)}
.ord-link:hover{color:var(--cream);border-color:var(--accent)}
.chip{display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:500;border:1px solid var(--hair-strong);border-radius:3px;padding:2px 7px;color:var(--cream-dim);margin-left:8px}
.chip.trial{color:#d9a05f;border-color:rgba(217,160,95,.4)}

/* billing details, revealed when an invoice needs them */
.bill-form{margin:18px 0 6px;padding:18px 0 4px;border-top:1px solid var(--hair-strong);display:grid;gap:10px}
.bill-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bill-form .acct-hint{margin:0}

/* ---------- licensing: the product shelf ---------- */
.prod{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:start}
.prod:first-child{padding-top:4px}
.prod-art{width:76px;height:76px;border-radius:6px;background-size:cover;background-position:center;background-color:var(--s2);display:block}
.prod-main{display:grid;gap:8px;min-width:0}
.prod-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.prod-name{font-size:16.5px;font-weight:500;color:var(--cream)}
a.prod-name:hover{color:var(--accent-bright)}
.prod-cat{font-size:12.5px;color:var(--cream-faint)}
.prod-ver{font-family:var(--mono);font-size:11.5px;color:var(--cream-dim);font-variant-numeric:tabular-nums}
.prod-key{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.prod-key .keyval{font-family:var(--mono);font-size:13px;color:var(--cream);font-variant-numeric:tabular-nums;word-break:break-all}
.prod-meta{font-size:12.5px;color:var(--cream-faint)}
.prod-dvc{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-left:14px;border-left:1px solid var(--hair)}
.prod-dvc .nm{font-size:13.5px;color:var(--cream)}
.prod-dvc .nm input{background:var(--s1);border:1px solid var(--hair-strong);border-radius:3px;color:var(--cream);font-size:13px;padding:3px 8px;width:180px;font-family:var(--sans)}
.dvc-acts{display:flex;gap:14px;align-items:baseline}
.prod-note{font-size:13px;color:var(--cream-faint);line-height:1.6}
.prod-note a{color:var(--cream-dim);border-bottom:1px solid var(--hair-strong)}
.prod-note a:hover{border-color:var(--accent)}
/* The inline device-rename field is 13px, which zooms iOS Safari on focus and
   never zooms back — the same threshold that .acct-input clears above. Widened
   here too so 16px text still fits the box. */
@media(max-width:760px){.prod-dvc .nm input{font-size:16px;padding:6px 10px;width:100%;max-width:240px}}
.keybtn{background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--cream-dim);border-bottom:1px solid var(--hair-strong);transition:color .15s var(--ease)}
.keybtn:hover{color:var(--cream);border-color:var(--accent)}
.keybtn.done{color:var(--accent-bright);border-color:transparent}

/* ---------- offers ---------- */
.offer{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--hair);border-radius:8px;overflow:hidden;background:var(--s1);margin-top:18px}
.offer:first-child{margin-top:4px}
.offer-art{height:120px;background-size:cover;background-position:center}
.offer-main{padding:20px 24px 22px}
.offer h3{font-size:clamp(24px,2.6vw,30px);margin:0 0 6px}
.offer p{font-size:14px;color:var(--cream-dim);line-height:1.7;max-width:560px;margin:0 0 14px}
/* Prose line with a discount code inside it. Only the code is a machine
   value, so only the code gets mono - the sentence around it does not. */
.offer .code-line{font-family:var(--sans);font-size:14px;color:var(--cream);margin:0 0 14px}
.offer .code-line b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums lining-nums}
.offer .code-line .dim{color:var(--cream-faint)}
.offer-thumbs{display:flex;gap:10px;margin:0 0 16px}
.offer-thumb{width:56px;height:56px;border-radius:5px;background-size:cover;background-position:center;background-color:var(--s2)}

/* ---------- section-switch stagger ----------
   The hook is `acct-rise`, NOT `reveal`. `reveal` is nocturne's site-wide
   scroll animation: it parks an element at opacity:0 and waits for an
   IntersectionObserver to add `.in` - and nocturne.js walks `.reveal` once,
   at page load. A panel that gains the class on a tab click is therefore
   never observed, never gets `.in`, and stays invisible for good. Any
   page-scoped stagger needs its own class name. */
.acct-panel.acct-rise > *{animation:acctRise .18s var(--ease) backwards;animation-delay:calc(var(--i,0)*40ms)}
@keyframes acctRise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .acct-panel.acct-rise > *{transform:none;animation-duration:.01ms;animation-delay:0ms}
  .acct-btn:active{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .acct-body{grid-template-columns:150px minmax(0,1fr)}
  .acct-aside{display:none}
}
@media(max-width:760px){
  .acct-body{grid-template-columns:1fr;gap:20px}
  /* WRAPPING was the problem. Six tabs plus two group headings never fit 350px,
     so the row broke wherever it ran out - and "DOWNLOADS" landed in the middle
     of a line between "Special Offers" and "RIPPLES Tap", heading nothing.
     Forcing each heading onto its own line fixed the meaning but cost 241px of
     an 844px screen before any content.
     One non-wrapping scroll strip keeps reading order intact (each heading is
     immediately followed by its own items) in a single 44px row. The mask is
     the affordance that says there is more to the right. */
  .acct-tabs{flex-direction:row;flex-wrap:nowrap;position:static;gap:0 16px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-bottom:1px solid var(--hair-strong);padding-bottom:0;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .acct-tabs::-webkit-scrollbar{display:none}
  /* .acct-tab is display:flex + justify-content:space-between so the count sits
     at the far edge of the sidebar column. In a row each tab shrinks to its
     content, leaving no space to distribute - the count printed hard against
     the word ("Orders3"). Give it an explicit gap here. */
  .acct-tab{flex:0 0 auto;white-space:nowrap;border-left:none;
    border-bottom:2px solid transparent;padding:11px 0;gap:5px;align-items:center}
  .acct-tab.on{border-bottom-color:var(--accent)}
  .tab-group{flex:0 0 auto;white-space:nowrap;padding:0;align-self:center}
  .ord-table thead{display:none}
  .ord-table,.ord-table tbody,.ord-table tr,.ord-table td{display:block}
  .ord-table tr{border-bottom:1px solid var(--hair);padding:12px 0}
  .ord-table td{border:none;padding:3px 0}
  .ord-table td.total{text-align:left}
  .ord-table .acts{justify-content:flex-start}
  .acct-btn{min-height:44px;padding:8px 16px}
  .prod{grid-template-columns:56px minmax(0,1fr);gap:14px}
  .prod-art{width:56px;height:56px}
}

/* ================= WAVES/NI BLEND (2026-08-03 night) =================
   From the live account areas Aviv pointed at: content on raised panels,
   grouped sidebar, an Overview landing, product rows with a status column,
   and the docked Special Offers drawer. */

/* content panels (Waves' white card, in espresso) */
.acct-panel{background:var(--s1);border:1px solid var(--hair);border-radius:10px;padding:clamp(20px,3vw,32px)}
.acct-empty{border-top:none;padding:10px 0}

/* sidebar groups */
.tab-group{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:13px;letter-spacing:.14em;color:var(--cream-faint);padding:14px 0 4px 16px}
.tab-group:first-child{padding-top:2px}
a.acct-tab{color:var(--cream-faint);text-decoration:none}
a.acct-tab:hover{color:var(--cream)}

/* overview */
.ov-hello{font-size:clamp(38px,4.4vw,52px);margin:0}
.ov-sub{font-size:14px;color:var(--cream-dim);margin:4px 0 26px}
.ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ov-card{display:grid;gap:6px;align-content:start;text-align:left;background:var(--s2);border:1px solid var(--hair);border-radius:8px;padding:20px 22px;cursor:pointer;color:var(--cream);font-family:var(--sans);transition:border-color .15s var(--ease),transform .16s var(--ease)}
.ov-card:hover{border-color:var(--accent)}
.ov-card:active{transform:scale(.98)}
.ov-count{font-family:"Bebas Neue",sans-serif;font-size:34px;line-height:1;color:var(--accent-bright)}
.ov-name{font-size:15.5px;font-weight:500}
.ov-desc{font-size:12.5px;color:var(--cream-faint);line-height:1.5}
.ov-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--cream-faint)}
.ov-foot b{color:var(--cream-dim);font-weight:500}
.ov-foot a{color:var(--cream-dim);border-bottom:1px solid var(--hair-strong)}
.ov-foot a:hover{border-color:var(--accent)}

/* product row status column */
.prod{grid-template-columns:76px minmax(0,1fr) auto}
.prod-status{display:grid;gap:6px;justify-items:end;align-content:start;padding-top:2px}
.ps-ver{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--cream-dim);font-variant-numeric:tabular-nums}
.ps-ver svg{width:12px;height:12px;color:var(--accent-bright)}

/* docked special offers drawer (Waves' signature) */
.offers-dock{position:fixed;left:0;right:0;bottom:0;z-index:900;display:grid;justify-items:center;pointer-events:none}
.offers-dock[hidden]{display:none}
.dock-bar{
  pointer-events:auto;position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  background:linear-gradient(165deg,var(--accent-bright),var(--accent) 46%,var(--accent-deep));
  border:1px solid rgba(241,235,222,.22);border-bottom:none;border-radius:10px 10px 0 0;
  color:#fff;font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.12em;
  padding:11px 24px;cursor:pointer;
  box-shadow:0 -6px 26px -6px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.16);
  transform-origin:50% 100%;
  animation:dockRise .72s cubic-bezier(.16,1.14,.3,1) .5s both,dockBob 4.2s var(--ease) 2.6s infinite;
}
.dock-bar:hover{background:linear-gradient(165deg,#ea7048,var(--accent-bright) 50%,var(--accent));box-shadow:0 -10px 34px -6px rgba(224,99,58,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.dock-bar:active{transform:translateY(2px)}
/* spark sweep */
.dock-bar::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:dockSpark 4.2s ease-in-out 2.5s infinite;
}
.dock-bar svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.offers-dock.open .dock-bar{animation:none}
.offers-dock.open .dock-bar::before{animation:none;opacity:0}
.offers-dock.open .dock-bar svg{transform:rotate(180deg)}
.dock-n{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cream);color:var(--accent-deep);
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.01em;
  border-radius:999px;padding:3px 10px 3px 8px;
}
.dock-n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dockDot 1.9s ease-in-out infinite}
@keyframes dockRise{
  0%{transform:translateY(115%)}
  62%{transform:translateY(-9%)}
  80%{transform:translateY(3%)}
  100%{transform:translateY(0)}
}
@keyframes dockBob{
  0%,64%,100%{transform:translateY(0) scaleY(1)}
  72%{transform:translateY(-11px) scaleY(1.05)}
  82%{transform:translateY(0) scaleY(.96)}
  90%{transform:translateY(-3px) scaleY(1)}
}
@keyframes dockSpark{0%,58%{left:-60%}88%,100%{left:115%}}
@keyframes trayUp{from{transform:translateY(100%);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes dockDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.dock-tray[hidden]{display:none}
.dock-tray{pointer-events:auto;width:100%;background:rgba(10,8,7,.97);border-top:1px solid var(--hair-strong);backdrop-filter:blur(10px);display:flex;gap:16px;justify-content:center;padding:18px var(--pad);overflow-x:auto;animation:trayUp .34s var(--ease) both}
.dock-card{position:relative;flex:0 0 300px;height:110px;border:1px solid var(--hair-strong);border-radius:6px;background-size:cover;background-position:center;background-color:var(--s2);cursor:pointer;overflow:hidden;padding:0}
.dock-card-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:12px 16px;background:linear-gradient(180deg,rgba(8,7,6,.05),rgba(8,7,6,.82));color:var(--cream);text-align:left}
.dock-card-txt b{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:19px;letter-spacing:.04em}
.dock-card-txt span{font-size:12px;color:var(--accent-bright)}

@media(max-width:900px){.ov-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .prod{grid-template-columns:56px minmax(0,1fr)}
  .prod-status{grid-column:2;justify-items:start;grid-auto-flow:column;gap:14px}
  .offers-dock{justify-items:stretch;padding:0 10px}
  .dock-bar{width:100%;justify-content:center;font-size:15px;padding:11px 16px;gap:9px}
  .dock-tray{gap:12px;padding:14px 12px;justify-content:flex-start;scroll-snap-type:x mandatory}
  .dock-card{flex:0 0 80%;height:98px;scroll-snap-align:center}
}
@media (prefers-reduced-motion: reduce){
  .dock-bar{animation:none}
  .dock-bar::before{animation:none;opacity:0}
  .dock-n::before{animation:none}
}

/* nickname edit + hub banner (2026-08-03) */
.prof-sub .keybtn{font-size:12px}
.ov-hub{display:grid;justify-items:center;gap:8px;text-align:center;margin-top:26px;padding:30px 24px 28px;border:1px solid var(--accent);border-radius:8px;background:linear-gradient(180deg,var(--s2),var(--s1));transition:border-color .15s var(--ease)}
.ov-hub:hover{border-color:var(--accent-bright)}
.ov-hub-kicker{font-family:"Bebas Neue",sans-serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-bright)}
.ov-hub-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(30px,3.4vw,40px);line-height:1;color:var(--cream);letter-spacing:.03em}
.ov-hub-sub{font-size:14px;color:var(--cream-dim)}
.ov-hub-btn{margin-top:8px}

/* update popup (2026-08-03) - slides up bottom-right with a pulsing dot */
.upd-pop{position:fixed;right:26px;bottom:26px;z-index:950;display:flex;align-items:center;gap:16px;max-width:420px;background:var(--s2);border:1px solid var(--accent);border-radius:8px;padding:16px 18px;opacity:0;transition:opacity .3s var(--ease)}
.upd-pop.show{opacity:1;animation:updIn .55s cubic-bezier(.34,1.56,.64,1) forwards,updGlow 1.1s var(--ease) .1s 1}
@keyframes updIn{0%{opacity:0;transform:translateY(34px) scale(.9)}70%{opacity:1;transform:translateY(-5px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes updGlow{0%{box-shadow:0 0 0 0 rgba(224,99,58,.45)}100%{box-shadow:0 0 0 22px rgba(224,99,58,0)}}
.upd-dot{width:9px;height:9px;border-radius:50%;background:var(--accent-bright);flex:none;position:relative}
.upd-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);animation:updPulse 1.6s var(--ease) infinite}
@keyframes updPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.upd-body{display:grid;gap:2px;min-width:0}
.upd-body b{font-size:14.5px;color:var(--cream);font-weight:500}
.upd-body span{font-size:13px;color:var(--cream-dim)}
.upd-x{background:none;border:none;color:var(--cream-faint);font-size:18px;cursor:pointer;padding:0 2px;line-height:1}
.upd-x:hover{color:var(--cream)}
.aside-foot{padding-top:4px}
@media (prefers-reduced-motion: reduce){.upd-pop.show{opacity:1;animation:none;opacity:1}.upd-dot::after{animation:none}}
@media(max-width:760px){.upd-pop{left:16px;right:16px;bottom:16px;max-width:none}}

/* avatar camera overlay + preset picker (2026-08-03) */
.prof-avatar{position:relative;overflow:hidden}
.prof-avatar::after{content:"";position:absolute;inset:0;background:rgba(8,7,6,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23f1ebde' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>") center no-repeat;opacity:0;transition:opacity .18s var(--ease)}
.prof-avatar:hover::after{opacity:1}
.av-pick{position:absolute;top:calc(100% + 10px);left:0;z-index:1100;background:rgba(13,11,9,.98);border:1px solid var(--hair-strong);border-radius:10px;padding:14px;box-shadow:0 26px 60px -22px rgba(0,0,0,.85);display:grid;gap:12px;justify-items:start}
.av-grid{display:grid;grid-template-columns:repeat(4,54px);gap:9px}
.av-opt{width:54px;height:54px;border-radius:8px;border:1px solid var(--hair);background-size:cover;background-position:center;cursor:pointer;padding:0;transition:border-color .15s var(--ease),transform .16s var(--ease)}
.av-opt:hover{border-color:var(--accent)}
.av-opt:active{transform:scale(.95)}

/* ---------- Hub hand-off card (/account?hub=1, 2026-08-03) ----------
   Shown instead of the dashboard when the desktop app sent the customer
   here to sign in. The code must be readable across a room, and it is a
   key - exactly what mono is reserved for - so it keeps the mono face
   while the copy around it stays in Inter. */
.hub-card{max-width:420px;text-align:left}
.hub-as{font-size:13px;color:var(--cream-faint);margin:10px 0 18px}
.hub-as b{color:var(--cream);font-weight:500}
.hub-lede{font-size:15px;color:var(--cream-dim);line-height:1.55;margin:0 0 18px}
.hub-wait{font-size:14px;color:var(--cream-faint);padding:18px 0}
.hub-code{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--s2);border:1px solid var(--hair-strong);border-radius:6px;padding:14px 16px}
.hub-code span{font-family:var(--mono);font-size:26px;letter-spacing:.14em;color:var(--cream)}
.hub-copy{background:none;border:1px solid var(--hair-strong);border-radius:4px;color:var(--cream-dim);font-family:var(--sans);font-size:12px;padding:6px 11px;cursor:pointer;flex:none;transition:border-color .15s var(--ease),color .15s var(--ease)}
.hub-copy:hover{border-color:var(--accent);color:var(--accent-bright)}
.hub-note{font-size:12px;color:var(--cream-faint);margin:10px 0 22px}
.hub-alt{margin:18px 0 0;font-size:13px}
.hub-alt a{color:var(--cream-faint);text-decoration:underline;text-underline-offset:3px}
.hub-alt a:hover{color:var(--cream)}
@media(max-width:520px){
  .hub-code{flex-wrap:wrap;justify-content:flex-start}
  .hub-code span{font-size:22px}
}

/* ---------------- PHONE TOUCH TARGETS (mobile audit 2026-08-30) ----------------
   "Forgot password?" and "Create an account" were 17px tall — the two escape
   hatches on the sign-in gate that stands in front of every purchase. Padding
   rather than a 44px ::before expander on purpose: these sit in consecutive
   <p>s only 29px apart, so an expander would overlap its neighbour and one
   would swallow the other's taps. */
@media (max-width:760px){
  .auth-alt{margin-top:8px}
  /* The padding that makes the target is also what detaches a border-bottom
     from the words — it lands 11px low and reads as a stray rule. Underline
     the TEXT instead, so the rule stays on the baseline while the box grows. */
  .auth-link{padding:11px 0;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--hair-strong);
    text-decoration-thickness:1px;text-underline-offset:3px}
  .auth-link:hover{text-decoration-color:var(--accent)}
}