/* Slice 1 additions on top of the demo design system (styles.css). Same tokens, no new colors. */

.pg{padding-block:var(--s4) var(--s5)}
.pg-narrow{max-width:560px}
.pg-mid{max-width:760px}
.pg h1{font-size:clamp(2rem,4.6vw,3rem); font-weight:800; color:var(--peach-ink); margin-bottom:var(--s0)}
.pg .lede{color:var(--ink-mid); font-size:17px; margin-bottom:var(--s2)}
.pg h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--peach-ink); margin-bottom:var(--s0)}
.pg h3{font-size:19px; color:var(--peach-ink); margin-bottom:6px}
.pg p+p{margin-top:10px}

.formcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s2); box-shadow:var(--shadow)}
.formcard+.formcard{margin-top:var(--s2)}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],
.field input[type=datetime-local],.field textarea,.field select{
  display:block; width:100%; background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0));
  border:1px solid var(--line); border-radius:var(--r); padding:11px 13px;
  font:400 15px/1.45 var(--ui); color:var(--ink); min-height:44px; outline:none;
  transition:border-color .16s, box-shadow .16s}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--magenta);
  box-shadow:0 0 0 3px oklch(0.55 0.20 340 / .14)}
.field .hint{font-size:12.5px; color:var(--ink-dim); margin-top:5px}
.field.bad input,.field.bad textarea{border-color:oklch(0.62 0.18 20)}
.field .err{font-size:12.5px; color:oklch(0.5 0.18 20); font-weight:600; margin-top:5px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-mid); margin-bottom:11px}
.check input{margin-top:4px; width:18px; height:18px; accent-color:var(--magenta); flex:none}
.check b{color:var(--ink)}
/* Application form (Round 2): a radio group and the two agreements live inside .field, whose label rule is the
   tiny uppercase kicker. The group's question keeps that look as a legend; the options and the agreement
   sentence read as body text. */
.field.choicefield{border:0; padding:0; margin:0 0 11px; min-width:0}
.field.choicefield legend{display:block; padding:0; font:600 14px/1.35 var(--ui); letter-spacing:0;
  text-transform:none; color:var(--ink); margin-bottom:6px}
.choices{display:flex; flex-wrap:wrap; gap:6px 22px; padding:4px 0 2px}
.field .check,.formcard .field .check{font:400 15px/1.45 var(--ui); letter-spacing:0; text-transform:none;
  color:var(--ink); margin-bottom:0; align-items:center}
.field.agreefield{padding-top:4px}
.field.agreefield .check{align-items:flex-start}
.field.agreefield .check span{color:var(--ink-mid)}
.field.bad .check input{outline:2px solid oklch(0.62 0.18 20); outline-offset:2px; border-radius:3px}
.formrow{display:flex; gap:var(--s0); align-items:center; flex-wrap:wrap; margin-top:var(--s1)}
.formrow .muted{font-size:13.5px; color:var(--ink-dim)}
button.btn{border:0}
button.btn-danger{background:color-mix(in oklch, var(--rose) 48%, oklch(1 0 0)); color:#8a2140}

.notice{border-radius:var(--r); padding:12px 14px; font-size:14.5px; margin-bottom:var(--s1);
  background:color-mix(in oklch, var(--mint) 40%, oklch(1 0 0)); color:#0d5f45; border:1px solid color-mix(in oklch, var(--mint) 60%, oklch(1 0 0))}
.notice.warn{background:color-mix(in oklch, var(--butter) 50%, oklch(1 0 0)); color:#7a5600; border-color:color-mix(in oklch, var(--butter) 70%, oklch(1 0 0))}
.notice.bad{background:color-mix(in oklch, var(--rose) 40%, oklch(1 0 0)); color:#8a2140; border-color:color-mix(in oklch, var(--rose) 60%, oklch(1 0 0))}

.linkbox{display:flex; gap:8px; align-items:center; background:color-mix(in oklch, var(--apricot) 22%, oklch(1 0 0));
  border:1px dashed color-mix(in oklch, var(--peach) 60%, oklch(1 0 0)); border-radius:var(--r); padding:10px 12px; margin-top:8px}
.linkbox code{font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--peach-ink); word-break:break-all; flex:1; min-width:0}
.linkbox button{flex:none; font:700 12px/1 var(--ui); padding:8px 12px; border-radius:99px; background:var(--magenta); color:#fff}

.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{text-align:left; font:700 10.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  padding:8px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl a{color:var(--magenta); font-weight:600; text-decoration:none}
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.pill.dim{background:color-mix(in oklch, var(--ink) 8%, oklch(1 0 0)); color:var(--ink-mid)}

.chain{list-style:none; margin:0; padding:0}
.chain li{position:relative; padding:8px 0 8px 26px; font-size:14.5px}
.chain li::before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--line)}
.chain li::after{content:""; position:absolute; left:4px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--magenta)}
.chain li:first-child::before{top:15px}
.chain li:last-child::before{bottom:auto; height:15px}
.chain li small{color:var(--ink-dim); margin-left:6px}
.chain li.self::after{background:var(--logo-gold)}

.subnav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s2)}
.subnav a{font:600 13.5px/1 var(--ui); color:var(--ink-mid); text-decoration:none; padding:8px 13px; border-radius:99px; border:1px solid var(--line)}
.subnav a.here{color:var(--magenta); border-color:var(--magenta); background:oklch(0.55 0.20 340 / .08)}

.qa dt{font:700 10.5px/1 var(--ui); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-dim); margin-top:14px}
.qa dd{margin:4px 0 0; font-size:15px; white-space:pre-wrap}

.stat3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:var(--s2)}
.stat3 a{display:block; text-decoration:none; background:color-mix(in oklch, var(--apricot) 20%, oklch(1 0 0)); border-radius:var(--r); padding:14px 12px; text-align:center}
.stat3 b{display:block; font-family:var(--display); font-size:28px; font-weight:800; color:var(--peach-ink); line-height:1}
.stat3 span{font:600 10.5px/1.2 var(--ui); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-top:6px}

.pitchgrid{display:grid; grid-template-columns:1fr; gap:var(--s1); margin-top:var(--s2)}
.pitch{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s2); box-shadow:var(--shadow)}
.pitch h3{font:700 16px/1.25 var(--ui); color:var(--peach-ink); margin:0 0 6px}
.pitch p{font-size:14.5px; color:var(--ink-mid)}
@media (min-width:760px){ .pitchgrid{grid-template-columns:1fr 1fr 1fr} }

.menav{display:inline-flex; align-items:center; gap:var(--s0)}
.menav .who{font-size:14px; color:var(--ink-mid); font-weight:600}
.menav form{display:contents}
.menav button.linkish{font:600 14.5px/1 var(--ui); color:var(--ink-mid); padding:7px 11px; border-radius:99px}
.menav button.linkish:hover{color:var(--magenta); background:oklch(0.55 0.20 340 / .10)}
@media (max-width:900px){ .menav .who,.menav button.linkish{display:none} }

/* application questions are sentences, not tiny caps */
.formcard .field label{font:600 14px/1.35 var(--ui); letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:6px}
.formcard .field{margin-bottom:16px}

/* ---------- Slice 2: vendor dashboard ---------- */
.vgrid{display:grid; grid-template-columns:1fr; gap:var(--s2)}
.vcol{min-width:0}
.vcol .formcard+.formcard{margin-top:var(--s2)}
@media (min-width:900px){ .vgrid{grid-template-columns:1.1fr .9fr; align-items:start} }
.formcard .hint{font-size:14px; color:var(--ink-mid); margin:0 0 var(--s1)}
.tagpick{display:flex; flex-wrap:wrap; gap:8px}
.tagopt{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:99px;
  padding:8px 13px 8px 10px; font:600 13.5px/1 var(--ui); color:var(--ink-mid); cursor:pointer; background:oklch(1 0 0)}
.tagopt input{width:16px;height:16px; accent-color:var(--magenta); margin:0}
.tagopt:has(input:checked){border-color:var(--magenta); color:var(--magenta); background:color-mix(in oklch, var(--magenta) 7%, oklch(1 0 0))}
.chipset+.chipset{margin-top:var(--s2)}
.chiplist .chip{padding:5px 6px 5px 11px; gap:4px; font-size:13px}
.chiplist .chip .lbl{margin-right:4px}
.chipctl{display:inline-flex; gap:2px}
.chipctl button{width:24px;height:24px; border-radius:50%; font-size:12px; line-height:1; color:var(--plum);
  background:oklch(1 0 0 / .6); display:grid; place-items:center; padding:0}
.chipctl button:hover{background:oklch(1 0 0)}
.chipctl button:disabled{opacity:.3; cursor:default}
.chipadd{display:flex; gap:8px; margin-top:10px; align-items:stretch}
.chipadd input{flex:1; min-width:0; background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0));
  border:1px solid var(--line); border-radius:99px; padding:9px 14px; font:400 14px/1.3 var(--ui); color:var(--ink); outline:none}
.chipadd input:focus{border-color:var(--magenta)}
.chipadd .btn{padding:9px 16px; font-size:13.5px}
.statusrow .sbtn{min-height:44px}

/* ---------- Slice 2: book page manager ---------- */
.uploadbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.uploadbar label.btn{cursor:pointer}
.upqueue{list-style:none; margin:0 0 10px; padding:0; font-size:13px; display:grid; gap:4px}
.upqueue:empty{display:none}
.upqueue li{display:flex; gap:10px; justify-content:space-between; padding:6px 10px; border-radius:var(--r-sm);
  background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0)); color:var(--ink-mid)}
.upqueue li .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.upqueue li .st{flex:none; font-weight:700; color:var(--ink-dim)}
.upqueue li.ok .st{color:#0d5f45}
.upqueue li.bad .st{color:#8a2140}
.upqueue li.retry .st{color:#7a5600}
/* styles.css uses .pgrid .pg for book page tiles and app.css uses .pg for page sections: tiles win here */
.pgrid .pg{padding:0}
.pgrid.manage{grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px}
.pgrid.manage .pg{aspect-ratio:auto; display:flex; flex-direction:column; overflow:visible; align-self:start}
.pgrid.manage .pg img,.pgrid.manage .pgstate{aspect-ratio:3/4; width:100%; object-fit:cover; border-radius:var(--r) var(--r) 0 0}
.pgrid.manage .pgstate{display:grid; place-items:center; text-align:center; font:600 12px/1.35 var(--ui);
  color:var(--ink-dim); background:color-mix(in oklch, var(--butter) 35%, oklch(1 0 0)); padding:10px}
.pgrid.manage .pgstate.bad{background:color-mix(in oklch, var(--rose) 40%, oklch(1 0 0)); color:#8a2140}
.pgrid.manage .pg.hidden-page img{opacity:.45}
.pgrid.manage .pg .n{left:6px; bottom:auto; top:6px}
.pgctl{display:flex; gap:4px; padding:6px; border-top:1px solid var(--line); align-items:center}
.pgctl form{display:contents}
.pgctl button{min-width:30px; height:28px; padding:0 8px; border-radius:99px; font:600 12px/1 var(--ui);
  color:var(--plum); background:color-mix(in oklch, var(--lilac) 30%, oklch(1 0 0))}
.pgctl button.retry{background:color-mix(in oklch, var(--butter) 55%, oklch(1 0 0)); color:#7a5600}
.pgctl button:disabled{opacity:.3}
.pgctl form:last-child button{margin-left:auto; background:color-mix(in oklch, var(--rose) 35%, oklch(1 0 0)); color:#8a2140}
.pgcap input{width:100%; border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r) var(--r);
  padding:7px 9px; font:400 12.5px/1.3 var(--ui); color:var(--ink); background:transparent; outline:none}
.pgcap input:focus{background:color-mix(in oklch, var(--magenta) 4%, oklch(1 0 0))}
.upqueue li.sum{background:color-mix(in oklch, var(--mint) 30%, oklch(1 0 0)); color:#0d5f45; font-weight:700}

/* ---------- Slice 2: booth page ---------- */
.crumb{font-size:13.5px; margin-bottom:var(--s1)}
.crumb a{color:var(--magenta); font-weight:700; text-decoration:none}
.boothname{font-size:clamp(1.7rem,4.2vw,2.5rem); font-weight:800; color:var(--peach-ink)}
.vend .av{background:color-mix(in oklch, var(--peach) 42%, oklch(1 0 0))}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.badge.addr{background:color-mix(in oklch, var(--apricot) 55%, oklch(1 0 0)); color:var(--plum)}
.badge.st{background:oklch(1 0 0); border:1px solid var(--line); color:var(--ink)}
.badge.done{background:color-mix(in oklch, var(--mint) 42%, oklch(1 0 0)); color:#0d5f45}
.badge.st .sdot{background:var(--off)} .badge.st-open .sdot{background:var(--ok)} .badge.st-busy .sdot{background:var(--busy)}
.boothgrid{padding:0; margin-top:var(--s1)}
@media (max-width:900px){ .boothgrid{padding:0} }
.chip.spec{text-decoration:none; background:color-mix(in oklch, var(--mint) 38%, oklch(1 0 0)); color:oklch(0.34 0.10 168)}
.bio{margin-top:var(--s1); font-size:15px; color:var(--ink-mid); white-space:pre-wrap; max-width:62ch}
.bookhead{margin-top:var(--s2); font-size:19px; color:var(--peach-ink)}
.book .page.photo{display:block; text-decoration:none}
.book .page.photo img{width:100%; height:100%; object-fit:cover; display:block}
.page-empty{border:2px dashed var(--line); border-radius:var(--r); padding:var(--s3) var(--s2); text-align:center;
  color:var(--ink-mid); font:600 14px/1.5 var(--ui); background:oklch(1 0 0 / .6); margin-top:var(--s1)}
.mobile-cta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--s1)}
.mobile-cta small{font-size:12.5px; color:var(--ink-dim)}
.mobile-cta .btn[disabled]{opacity:.55; cursor:not-allowed}
@media (min-width:901px){ .mobile-cta{display:none} }
.msgcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s2); box-shadow:var(--shadow)}
.msgcard h3{font-size:19px; color:var(--peach-ink); margin-bottom:6px}
.msgcard p{font-size:14.5px; color:var(--ink-mid); margin-bottom:var(--s1)}
.msgcard small{display:block; margin-top:8px; font-size:12.5px; color:var(--ink-dim)}
.msgcard .btn[disabled]{opacity:.55; cursor:not-allowed}
.lightbox{border:0; padding:0; background:transparent; max-width:min(96vw,900px); max-height:96vh}
.lightbox::backdrop{background:oklch(0.2 0.03 320 / .82)}
.lightbox img{max-width:min(96vw,900px); max-height:88vh; border-radius:var(--r); display:block; margin:0 auto}
.lightbox .cap{color:#fff; text-align:center; font-size:13.5px; margin-top:8px}
.lightbox .x{position:fixed; top:14px; right:14px}

/* ---------- Slice 2: the hall ---------- */
/* styles.css gives .hall overflow:hidden, which quietly breaks the sticky toolbar. clip clips
   without making a scroll container, so the toolbar can stick the whole way down 150 booths. */
.hall{overflow:clip}
.hallh1{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; color:var(--peach-ink)}
a.booth{text-decoration:none; color:inherit}
.doors{flex-wrap:wrap; max-width:100%; border-radius:var(--r); row-gap:2px}
.doors .dot,.doors .pulse{flex:none}
.doors b{font-weight:700}
.doors small{font-weight:600; color:var(--ink-mid); font-size:12.5px; flex-basis:100%; padding-left:18px}
@media (min-width:640px){ .doors{border-radius:99px} .doors small{flex-basis:auto; padding-left:6px} .doors small::before{content:"\00b7  "; color:var(--ink-dim)} }
.doors.doors-before .pulse,.doors.doors-between .pulse,.doors.doors-closed .pulse{background:var(--off)}
.doors.doors-before .pulse::after,.doors.doors-between .pulse::after,.doors.doors-closed .pulse::after{animation:none; opacity:0}
.toolbar .schips.specs{flex-basis:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; scrollbar-width:thin; margin-inline:-4px; padding-inline:4px}
.toolbar .schips.specs .schip{flex:none}
.bbadge.addr i{background:var(--peach-deep); color:#fff; font-weight:800}
.booth .meta{white-space:nowrap}
#results .booths{margin-top:var(--s0)}
[hidden]{display:none !important}
.teasegrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- Slice 2: HQ ---------- */
.two{display:grid; grid-template-columns:1fr; gap:0 var(--s1)}
@media (min-width:700px){ .two{grid-template-columns:1fr 1fr} }
.assignrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.assignrow select,.assignrow input{background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0)); border:1px solid var(--line);
  border-radius:var(--r); padding:9px 11px; font:400 14px/1.3 var(--ui); color:var(--ink); min-height:42px}
.assignrow select{flex:1; min-width:160px}
.tbl button.pill{border:0; cursor:pointer}
.tbl button.pill:disabled{opacity:.4; cursor:default}
.tbl input[type=text],.tbl input[type=number]{border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; font:400 14px/1.3 var(--ui)}
/* A-Z jump: land below the sticky bar + toolbar, not under them. hall.js measures the stuck bar +
   toolbar into --floor-top (the toolbar is taller while doors are open); these are the fallbacks. */
.aisle{scroll-margin-top:var(--floor-top, 200px)}
@media (max-width:900px){ .aisle{scroll-margin-top:var(--floor-top, 320px)} }
@media (max-width:900px){ .aisle{align-items:flex-start} .aisle-tag{position:sticky; top:var(--floor-top, 300px); z-index:5} }
/* the specialty strip scrolls sideways; fade the trailing edge so it reads as "more", not "that is all" */
.toolbar .schips.specs{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent)}
/* the one-tap live sort sits with the Sort select and reads as a sort, not a status chip (Slice 3 review
   S5): no dot, an outlined pill in ink with a small up-arrow chevron drawn in CSS; pressed = magenta */
.toolbar .sortrow{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.schip.livesort{border-color:color-mix(in oklch, var(--ink-mid) 55%, oklch(1 0 0)); color:var(--ink); background:transparent; padding-left:11px}
.schip.livesort::before{content:""; width:7px; height:7px; flex:none; margin-top:3px;
  border-left:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg)}
.schip.livesort[aria-pressed="true"]{border-color:var(--magenta); color:var(--magenta);
  background:color-mix(in oklch, var(--magenta) 7%, oklch(1 0 0))}

/* ---------- Slice 3: messages ---------- */
/* nav: the unread count. Empty for anonymous visitors (the shell is identity-free); /me/nav fills it. */
.nbadge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:5px;
  border-radius:99px; background:var(--magenta); color:oklch(0.99 0.01 60); font:700 11px/1 var(--ui); vertical-align:middle}
.nbadge:empty{display:none}
.navstrip a{position:relative}
/* the phone strip scrolls sideways (five tabs; "My party" clips at 390); the same trailing-edge fade as
   the hall's specialty strip, so it reads as scrollable. CSS only: base.html stays identity-free. */
@media (max-width:900px){ .navstrip{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent)} }

/* inbox: a list, not cards; unread rows carry weight through type and a dot, not colour blocks */
.inbox{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.inbox .thr a{display:flex; gap:12px; align-items:flex-start; padding:14px 4px; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; min-height:72px}
.inbox .thr a:hover{background:color-mix(in oklch, var(--apricot) 14%, oklch(1 0 0))}
.inbox .av,.thr-head .av{position:relative; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font:800 18px/1 var(--display); color:var(--peach-ink); background:color-mix(in oklch, var(--peach) 42%, oklch(1 0 0))}
.inbox .av .dot{position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:var(--magenta);
  border:2px solid oklch(1 0 0)}
.inbox .txt{flex:1; min-width:0; display:grid; gap:2px}
.inbox .row1{display:flex; gap:10px; align-items:baseline; justify-content:space-between}
.inbox .nm{font-size:15.5px; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inbox time{flex:none; font-size:12.5px; color:var(--ink-dim)}
.inbox .onbooth{font-size:12.5px; color:var(--ink-dim)}
.inbox .prev{font-size:14px; color:var(--ink-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inbox .thr.unread .nm{font-weight:800; color:var(--peach-ink)}
.inbox .thr.unread .prev{color:var(--ink); font-weight:600}

/* thread view */
.threadpg{padding-bottom:0}
.thr-head{display:flex; gap:12px; align-items:center; margin-bottom:var(--s1)}
.thr-head h1{font-size:clamp(1.35rem,3.6vw,1.9rem); font-weight:800; color:var(--peach-ink); margin:0; line-height:1.15}
.thr-sub{font-size:13.5px; color:var(--ink-mid); margin-top:2px}
.thr-sub a{color:var(--magenta); font-weight:700; text-decoration:none}
.thr-sub:empty{display:none}
/* styles.css gives .chat overflow:hidden for its corners, which also kills the sticky composer; clip
   keeps the corners and lets the composer stick to the bottom of the phone (same trick as .hall) */
.chat{display:flex; flex-direction:column; min-height:calc(100dvh - 240px); overflow:clip}
.chat .msgs{flex:1; gap:8px; align-content:end; padding-bottom:var(--s1)}
.chat .msgs .empty{justify-self:center; align-self:center; max-width:34ch; text-align:center; font-size:14.5px; line-height:1.5;
  color:var(--ink-mid); padding:var(--s2) var(--s1)}
.chat .earlier{justify-self:center; font:600 12.5px/1 var(--ui); color:var(--magenta); text-decoration:none; padding:8px 14px;
  border:1px solid var(--line); border-radius:99px; background:oklch(1 0 0); cursor:pointer; margin-bottom:6px}
.chat .earlier.htmx-request{opacity:.5}
.msg{position:relative; word-wrap:break-word; overflow-wrap:anywhere}
.msg .body{white-space:pre-wrap; margin:0}
.msg time{display:block; margin-top:4px; font-size:11px; opacity:.72; text-align:right}
.msg.them time{color:var(--ink-dim)}
.msg .from{display:block; font:700 11px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; opacity:.8}
.msg .pic{display:block; margin-top:6px; border-radius:10px; overflow:hidden; background:oklch(0.94 0.02 60); max-width:240px}
.msg .pic img{display:block; width:100%; height:auto; max-height:320px; object-fit:contain}   /* contain, not cover: a pin close-up is never cropped in the bubble */
.msg .body+.pic{margin-top:8px}
.msg.me .pic{background:oklch(1 0 0 / .18)}
.msg .pic .sending{display:grid; place-items:center; width:200px; height:120px; font:600 12.5px/1 var(--ui); opacity:.85}
.msg.pending{opacity:.7}
.msg.ask{border:1.5px dashed color-mix(in oklch, var(--magenta) 55%, oklch(1 0 0)); background:color-mix(in oklch, var(--magenta) 5%, oklch(1 0 0)); color:var(--ink)}
.msg.ask.me{background:color-mix(in oklch, var(--magenta) 9%, oklch(1 0 0)); border-color:var(--magenta)}
.msg .asklab{display:block; font:700 10.5px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--magenta); margin-bottom:5px}
.msg.ask time{color:var(--ink-dim)}
/* arriving bubbles rise a touch and settle (transform + opacity only, decelerating, reduced-motion aware) */
@keyframes msg-arrive{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.msg.arrive{animation:msg-arrive .26s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){ .msg.arrive{animation:none} }

/* composer: sticks to the bottom of the phone so the keyboard and the thread share the screen */
.chat-tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px var(--s1) 0; border-top:1px solid var(--line);
  background:var(--card)}
.chat-tools .hint{font-size:12.5px; color:var(--ink-dim); flex:1; min-width:180px}
.chat-tools .asklook{font-size:12.5px}
.chat-foot{position:sticky; bottom:0; z-index:5; background:var(--card)}
.chat-in{align-items:flex-end; border-top:0; padding-bottom:max(var(--s0), env(safe-area-inset-bottom))}
.chat-in textarea{flex:1; min-width:0; resize:none; min-height:44px; max-height:160px; border:1px solid var(--line); border-radius:22px;
  padding:11px 15px; font:400 15px/1.4 var(--ui); color:var(--ink); background:oklch(0.97 0.012 60); outline:none;
  transition:border-color .16s, box-shadow .16s}
.chat-in textarea:focus{border-color:var(--magenta); box-shadow:0 0 0 3px oklch(0.55 0.20 340 / .14)}
.chat-in .clip{width:44px; height:44px; cursor:pointer; color:var(--plum); font-size:18px; align-self:flex-end}
.chat-in .clip:hover{background:color-mix(in oklch, var(--magenta) 8%, oklch(1 0 0))}
.chat-in .send{padding:11px 18px; min-height:44px; border-radius:22px}
.chat-in .send:disabled{opacity:.55}
.chat-in.paused{justify-content:center; padding:var(--s1)}
.chat-in.paused .hint{font-size:14px; color:var(--ink-mid)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* the hint stays on the phone too (the phone is the audience; Slice 3 review nit): it drops under the chip
   at narrow widths instead of hiding */
@media (max-width:480px){ .chat-tools{padding-top:6px; gap:6px 10px} .chat-tools .hint{flex-basis:100%; min-width:0; font-size:12px} }
.chat-tools .asklook:disabled{opacity:.5; cursor:not-allowed}
@media (min-width:760px){ .chat{min-height:440px} }
.chat-in .clip svg{width:20px; height:20px; display:block}

/* toast (transitions.dev 22): a short notice that rises, says its piece and leaves */
:root{--toast-open:350ms; --toast-close:250ms; --toast-distance:16px; --toast-blur:2px; --toast-scale:0.97; --toast-ease:cubic-bezier(0.22,1,0.36,1)}
.t-toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translate(-50%, var(--toast-distance)) scale(var(--toast-scale));
  z-index:60; max-width:min(92vw,420px); padding:10px 16px; border-radius:99px; background:var(--plum); color:oklch(0.98 0.01 60);
  font:600 13.5px/1.35 var(--ui); box-shadow:var(--shadow); opacity:0; filter:blur(var(--toast-blur)); pointer-events:none;
  transition:opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease)}
.t-toast.is-open{opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0);
  transition:opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease)}
.t-toast:empty{display:none}
@media (prefers-reduced-motion:reduce){ .t-toast{transition:none !important} }
.hqchat{min-height:0}
.hqlinks a{color:var(--magenta); font-weight:700; text-decoration:none}
.hqchat .msg.me{background:color-mix(in oklch, var(--sky) 45%, oklch(1 0 0)); color:var(--ink)}
.hqchat .msg.me time{color:var(--ink-dim)}

/* ---------- Slice 4: trades ---------- */
/* system messages in the thread: centred, quiet, a link to the sheet */
.msg.sys{justify-self:center; align-self:center; max-width:min(92%, 46ch); background:color-mix(in oklch, var(--apricot) 26%, oklch(1 0 0));
  border:1px solid color-mix(in oklch, var(--logo-gold) 50%, transparent); color:var(--ink); font-size:13.5px; text-align:center; border-radius:var(--r); padding:9px 14px}
.msg.sys .body{margin:0}
.msg.sys .tlink{display:inline-block; margin-top:5px; font:700 12.5px/1 var(--ui); color:var(--magenta); text-decoration:none}
.msg.sys time{text-align:center; color:var(--ink-dim)}
/* anchored landings (#ship, #arrival, #dispute, #sheet, #lock, #closeups, and the propose form's show:top) land
   below the sticky bar + nav strip, not under them (Slice 4 review S3; the hall does the same via --floor-top) */
.tradeform,.tradepg [id]{scroll-margin-top:118px}
@media (min-width:901px){ .tradeform,.tradepg [id]{scroll-margin-top:84px} }
/* the trade slot above the chat box */
.tradeform:empty{display:none}
.tradeform{margin-bottom:var(--s0)}
.tradeslot:empty{display:none}
.tradeslot{padding:8px var(--s1) 0; border-top:1px solid var(--line); background:var(--card)}
.tradeslot+.chat-tools{border-top:0}
.tcard{display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"pill sum sum" "line line act"; gap:3px 10px; align-items:center;
  text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--r);
  padding:8px 12px; background:color-mix(in oklch, var(--apricot) 16%, oklch(1 0 0))}
.tcard .pill{grid-area:pill}
.tcard .tc-sum{grid-area:sum; min-width:0; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tcard .tc-line{grid-area:line; min-width:0; font-size:12.5px; color:var(--ink-mid)}
.tcard .tc-act{grid-area:act; font:700 12.5px/1 var(--ui); color:var(--magenta); white-space:nowrap; justify-self:end}
.tcard.st-late{border-color:color-mix(in oklch, var(--rose) 70%, oklch(1 0 0))}
.schip.propose{border-color:var(--magenta); color:var(--magenta); background:color-mix(in oklch, var(--magenta) 6%, oklch(1 0 0)); font-size:13px}
/* the sheet form (propose partial + change-the-sheet) */
.tsheet-form{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s1); box-shadow:var(--shadow)}
.tsheet-form.editing{border:0; padding:0; box-shadow:none; margin-top:var(--s0)}
.tsheet-head{display:grid; gap:2px; margin-bottom:var(--s0)}
.tsheet-head b{font:700 16px/1.25 var(--ui); color:var(--peach-ink)}
.tsheet-head span{font-size:13.5px; color:var(--ink-mid)}
.tsides{display:grid; grid-template-columns:1fr; gap:var(--s0)}
@media (min-width:700px){ .tsides{grid-template-columns:1fr 1fr} }
.tside{border:1px solid var(--line); border-radius:var(--r); padding:10px; margin:0; min-width:0}
.tside legend{font:700 11px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--magenta); padding:0 4px}
.trow-in{display:flex; gap:6px; margin-top:6px}
.trow-in input[type=text]{flex:1; min-width:0; background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0)); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 11px; font:400 14.5px/1.35 var(--ui); color:var(--ink); min-height:42px; outline:none}
.trow-in input[type=text]:focus{border-color:var(--magenta); box-shadow:0 0 0 3px oklch(0.55 0.20 340 / .14)}
.trow-in select{flex:none; max-width:38%; background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r); padding:6px 8px; font:600 12.5px/1.2 var(--ui); color:var(--ink-mid); min-height:42px}
.addline{margin-top:8px; font:700 12.5px/1 var(--ui); color:var(--magenta); background:transparent; border:1px dashed color-mix(in oklch, var(--magenta) 45%, oklch(1 0 0)); border-radius:99px; padding:7px 12px; cursor:pointer}
.tsheet-hint{font-size:12.5px; color:var(--ink-dim); margin-top:10px}
/* the sheet itself (the demo's .locksheet, extended) */
.tradehead h1{font-size:clamp(1.55rem,4vw,2.3rem)}
.tstate{display:flex; gap:8px; align-items:center; font-size:14px; color:var(--ink-mid); margin-top:6px; flex-wrap:wrap}
.tsheet{grid-template-columns:1fr; font-size:14px; margin-bottom:var(--s2)}
@media (min-width:640px){ .tsheet{grid-template-columns:1fr 1fr} }
.tsheet > div{padding:12px}
.titems{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.titems li{display:grid; gap:6px}
.tdesc{font-size:15px; color:var(--ink); font-weight:600; overflow-wrap:anywhere}
.tpage{display:inline-flex; position:relative; width:56px; text-decoration:none; border-radius:8px; overflow:hidden; border:1px solid var(--line)}
.tpage img{width:100%; height:auto; display:block; aspect-ratio:3/4; object-fit:cover}
.tpage i,.tphoto i{position:absolute; left:4px; bottom:4px; background:oklch(0 0 0 / .6); color:#fff; font:600 10px/1 var(--ui); font-style:normal; padding:3px 6px; border-radius:99px}
.tphotos{display:flex; gap:8px; flex-wrap:wrap}
.tphoto{position:relative; width:96px}
.tphoto a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:oklch(0.94 0.02 60)}
.tphoto img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.tdetach{position:absolute; top:-6px; right:-6px}
.tdetach button{width:22px; height:22px; border-radius:50%; background:var(--plum); color:#fff; font-size:10px; display:grid; place-items:center; padding:0; cursor:pointer; border:2px solid #fff}
.tnophoto,.tnone,.tstale{font-size:12.5px; color:var(--ink-dim)}
.tstale{margin-top:7px; font-weight:600}
.tlock .hint,.tpool .hint,.tchange .hint{margin-bottom:10px}
.tpoolgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px}
.tpoolitem{display:grid; gap:6px; min-width:0; align-content:start}
.tpoolitem a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:oklch(0.94 0.02 60)}
.tpoolitem img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.tpoolitem select{width:100%; min-width:0; background:oklch(1 0 0); border:1px solid var(--line); border-radius:99px; padding:6px 9px; font:600 12px/1.2 var(--ui); color:var(--magenta)}
.tpoolitem.attached a{outline:2px solid var(--magenta); outline-offset:1px}
.tpoolon{font:600 11.5px/1.3 var(--ui); color:var(--ink-mid); overflow-wrap:anywhere}
.tchange summary{cursor:pointer; font:700 16px/1.3 var(--ui); color:var(--peach-ink); list-style:none}
.tchange summary::before{content:"+ "; color:var(--magenta)}
.tchange[open] summary::before{content:"- "}
.tchange summary::-webkit-details-marker{display:none}
.twithdraw{justify-content:flex-end}
button.linkish{font:600 13.5px/1 var(--ui); color:var(--magenta); background:transparent; padding:8px 10px; border-radius:99px; cursor:pointer}
button.linkish.danger{color:#8a2140}
.treceipt{margin-top:var(--s2); font-size:13.5px}
.tlog{margin:0; padding-left:18px; display:grid; gap:4px}
.tfoot{margin-top:10px; color:var(--ink-dim); font-size:12.5px}
.tprint{margin-top:4px; padding-left:0}
/* /my and /my/trades: one line per trade */
.tlist-title{font:700 11px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); margin:var(--s0) 0 4px}
.tlist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.tlist li a{display:flex; gap:10px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; min-height:56px}
.tlist .tl-who{flex:1; min-width:0; display:grid; gap:1px}
.tlist .tl-who b{font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tlist .tl-who span{font-size:12.5px; color:var(--ink-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tlist .pill{flex:none}
.tlist .tl-act{flex:none; font:700 12px/1 var(--ui); color:var(--magenta); white-space:nowrap}
@media (max-width:480px){ .tlist .tl-act{display:none} }
/* print: the receipt on paper at 1440, nothing else (no new fonts) */
@media print{
  .bar,.navstrip,footer,.noprint,.tdetach,.t-toast,.tprint,.lightbox{display:none !important}
  .pg{padding:0}
  .tradepg .wrap{max-width:none}
  .tsheet{grid-template-columns:1fr 1fr}
  .tsheet > div,.formcard,.receipt{box-shadow:none; break-inside:avoid}
  a{color:inherit; text-decoration:none}
}
/* shipping: one card per side */
.tsec{font-size:clamp(1.3rem,3vw,1.7rem); font-weight:800; color:var(--peach-ink); margin:var(--s2) 0 4px}
.tship .hint,.tarrive .hint,.tdispute .hint{font-size:14px; color:var(--ink-mid); margin-bottom:var(--s1)}
.tshipgrid{display:grid; grid-template-columns:1fr; gap:var(--s1)}
@media (min-width:700px){ .tshipgrid{grid-template-columns:1fr 1fr} }
.tshipcard{padding:var(--s1)}
.tshipcard+.tshipcard{margin-top:0}
/* call it off: agreed with nobody shipped (either side), or the no-show exit after the due date (the side that shipped) */
.tcalloff{margin-top:10px; align-items:center; gap:6px}
.tcalloff .muted{font-size:13px; color:var(--ink-dim)}
.tshipcard h3{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:17px}
.tshipcard.late{border-color:color-mix(in oklch, var(--rose) 70%, oklch(1 0 0))}
.tshipline{font-size:14px; color:var(--ink); margin:0 0 8px}
.tshipline.muted{color:var(--ink-dim)}
.tlabel{display:inline-block; position:relative; width:120px; border-radius:10px; overflow:hidden; border:1px solid var(--line); margin-bottom:8px; background:oklch(0.94 0.02 60)}
.tlabel img{display:block; width:100%; height:auto}
.tlabel i{position:absolute; left:5px; bottom:5px; background:oklch(0 0 0 / .6); color:#fff; font:600 10px/1 var(--ui); font-style:normal; padding:3px 6px; border-radius:99px}
.trackline{margin-bottom:8px}
.trackline small{color:var(--ink-dim); font-size:12.5px}
.tshipact{border-top:1px dashed var(--line); margin-top:10px; padding-top:10px; display:grid; gap:10px}
.tupload{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tupload label.btn{cursor:pointer}
.tupload label.linkish{cursor:pointer; font:700 13.5px/1 var(--ui); color:var(--magenta)}
.tupload small{flex-basis:100%; font-size:12.5px; color:var(--ink-dim)}
.tupstate{font:600 12.5px/1 var(--ui); color:var(--ink-mid)}
.tupstate:empty{display:none}
.ttrack .tlab{display:block; font:600 12.5px/1.3 var(--ui); color:var(--ink-mid); margin-bottom:6px}
.ttrackrow{display:flex; gap:6px; flex-wrap:wrap}
.ttrackrow select,.ttrackrow input{background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0)); border:1px solid var(--line); border-radius:var(--r); padding:9px 11px; font:400 14px/1.3 var(--ui); color:var(--ink); min-height:42px}
.ttrackrow select{flex:0 0 auto}
.ttrackrow input{flex:1 1 140px; min-width:0}
.ttrackrow .btn{min-height:42px; padding:9px 16px}
/* arrival: one tap; doesn't match asks for two photos first */
.tarrive .matchrow{margin-top:4px}
.tarrive .matchrow button{min-height:46px; font-size:14px}
.tnomatch{border-top:1px dashed var(--line); margin-top:12px}
.tarrgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 12px}
.tarrslot{display:grid; gap:6px; justify-items:start}
.tarrthumb{display:block; position:relative; width:100%; max-width:160px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.tarrthumb img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.tarrthumb i{position:absolute; left:5px; bottom:5px; background:oklch(0 0 0 / .6); color:#fff; font:600 10px/1 var(--ui); font-style:normal; padding:3px 6px; border-radius:99px}
.tarrslot label.btn{cursor:pointer; min-height:42px}
.tarrslot label.linkish{cursor:pointer; font:700 13px/1 var(--ui); color:var(--magenta)}
.tarrive .formrow .muted{font-size:13px; color:var(--ink-dim)}
.tnomatch .btn[disabled],.matchrow button:disabled{opacity:.5; cursor:not-allowed}
/* the 2x2 */
.tgridcard h3{font-size:16px}
.t2x2{display:grid; grid-template-columns:auto 1fr 1fr; gap:8px; align-items:center; margin-top:8px}
.t2x2h{font:700 10.5px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); text-align:center}
.t2x2l{font:700 12px/1.25 var(--ui); color:var(--plum); max-width:72px}
.t2x2c a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:oklch(0.94 0.02 60)}
.t2x2c img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.t2x2none{display:grid; place-items:center; aspect-ratio:1; border:1px dashed var(--line); border-radius:10px; padding:8px; text-align:center; font:600 11.5px/1.35 var(--ui); color:var(--ink-dim)}
/* the menu */
.tmenulist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.tmenulist li{display:flex; gap:10px; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:var(--r); padding:10px 12px}
.tmenulist li.picked{border-color:var(--magenta); background:color-mix(in oklch, var(--magenta) 5%, oklch(1 0 0))}
.tmenutxt{display:grid; gap:2px; min-width:0}
.tmenutxt b{font-size:14.5px; color:var(--ink)}
.tmenutxt span{font-size:12.5px; color:var(--ink-mid)}
.tmenulist form{flex:none}
.tmenulist .btn{padding:9px 14px; font-size:13px; min-height:40px}
.tresolved h3{font-size:16px}
.thqresolve{border-top:1px dashed var(--line); margin-top:12px; padding-top:12px}
.thqresolve h4{font:700 15px/1.3 var(--ui); color:var(--peach-ink); margin:0 0 6px}
.thqresolve .field{margin-bottom:10px}
/* HQ ledger: a table from 641px up; on the phone each row stacks as name / pill / shipping lines / links, so
   "who has and has not shipped" is on screen, not behind a sideways scroll (Slice 4 review S4) */
.ledger{min-width:720px}
.ledger td .sub{white-space:normal}
.ledger td:first-child{min-width:220px}
.ledger a{color:var(--magenta)}
.filterrow a.fchip{text-decoration:none}
.lwrap{-webkit-mask-image:none; mask-image:none}
@media (max-width:640px){
  .ledger{min-width:0}
  .ledger thead{display:none}
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block; width:100%}
  .ledger tr{padding:10px 0; border-bottom:1px solid var(--line)}
  .ledger td{padding:2px 0; border:0}
  .ledger td:first-child{min-width:0}
}
.t2x2c.many{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.t2x2{max-width:640px}

/* ---------- Slice 5 ---------- */
/* the attendee's second identifier (joined / invited by) under a name: thread head, inbox row, the sheet, HQ */
.tsub{font-size:13px; color:var(--ink-dim); margin:2px 0 0}
/* Courtney's read-only receipt under the HQ chrome (admin/trade.html): the member's sheet body, HQ's subnav */
.hqtrade{margin-top:var(--s1)}
/* the front door's ticket card and the attendee door both lead to /tickets (Slice 5) */
a.ticket{display:block; color:inherit; text-decoration:none; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s}
a.ticket:hover{transform:rotate(1.4deg) translateY(-3px); box-shadow:var(--shadow-lg)}
a.ticket:focus-visible{outline:3px solid var(--magenta); outline-offset:4px}
.door .doorcta{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.door .doorcta .btn{margin-top:0; align-self:auto}
/* /tickets: the same ticket card, standing straight, with the price rows */
.tixpg .sec-head{margin-bottom:var(--s2)}
.tixcard{transform:none; margin:0 auto; max-width:560px}
.tixcard::before,.tixcard::after{display:none}   /* the hero card's side notches would cut through a price row here */
.tixprices{list-style:none; margin:var(--s1) 0 0; padding:0; display:grid; gap:8px}
.tixprices li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px dashed var(--line); padding-top:8px}
.tixprices li.out .tixname{color:var(--ink-dim)}
.tixname{font-weight:700; color:var(--ink)}
.tixname small{display:block; font-size:12.5px; color:var(--ink-dim); font-weight:600}
.tixprice{font-family:var(--display); font-size:24px; font-weight:800; color:var(--magenta); white-space:nowrap}
.tixcta{margin-top:var(--s1)}
.tixcta .btn{width:100%; justify-content:center}
.tixnote{font-size:13px; color:var(--ink-dim); margin-top:8px}
@media (prefers-reduced-motion:reduce){ a.ticket{transition:none} a.ticket:hover{transform:rotate(1.4deg)} }
/* HQ "Payments that need a hand": a table from 641px up; stacked rows on the phone (HQ lists stack at <= 640px) */
.paytbl{min-width:640px}
@media (max-width:640px){
  .paywrap{overflow:visible}
  .paytbl{min-width:0}
  .paytbl thead{display:none}
  .paytbl,.paytbl tbody,.paytbl tr,.paytbl td{display:block; width:100%}
  .paytbl tr{padding:10px 0; border-bottom:1px solid var(--line)}
  .paytbl td{padding:2px 0; border:0}
  .paytbl td[data-l]::before{content:attr(data-l) ": "; font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em}
}
.formcard .btn[disabled]{opacity:.5; cursor:not-allowed}
/* the HQ home's #payments anchor lands below the sticky header (review S4; same values as the trade page) */
#payments{scroll-margin-top:118px}
@media (min-width:901px){ #payments{scroll-margin-top:84px} }

/* ---------- Design pass, 2026-10-04 (impeccable + apple-design; every surface read at 390 and 1440) ---------- */
/* 1. Links in running text were the browser's blue underline (notices, /my, the vendor dashboard, the login card).
   Element-level on purpose: every classed link (.navlinks, .btn, a.booth, .tbl a, .crumb a, .stat3 a) keeps its own. */
a{color:var(--magenta); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em;
  text-decoration-color:color-mix(in oklch, var(--magenta) 40%, transparent)}
a:hover{text-decoration-color:var(--magenta)}
.notice a{color:inherit; font-weight:700; text-decoration-color:currentColor}
.msg.me a{color:#fff; text-decoration-color:oklch(1 0 0 / .55)}
/* 2. Press feedback on the press, not the release (apple-design: respond on pointer-down). */
.btn:active,button.btn:active{transform:scale(.97); transition-duration:80ms}
.btn-primary:active{box-shadow:var(--shadow)}
/* 3. The phone nav strip scrolls; a fade on the right edge makes the clipped last item read as "more", not broken. */
@media (max-width:900px){
  .navstrip{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
}
/* 4. Front door "How it works": six identical cards became a numbered programme. Hairlines, the number in the
   margin, two columns from 820px. Shorter on a phone, less templated everywhere. */
.steps{gap:0; border-top:1px solid var(--line)}
.step{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:18px 0 18px 48px}
.step .snum{position:absolute; left:0; top:18px; margin:0}
.step h4{font-size:17px; margin-bottom:4px}
.step p{font-size:14.5px; line-height:1.5; max-width:52ch}
@media (min-width:820px){
  .steps{grid-template-columns:1fr 1fr; column-gap:var(--s4); border-top:0}
  .step{border-top:1px solid var(--line); border-bottom:0; padding:20px 0 24px 52px}
  .step .snum{top:20px}
}
/* 5. "Bring a booth" pitch: the same move. Three hairline columns from 760px, an apricot mark instead of card chrome. */
.pitchgrid{gap:0; border-top:1px solid var(--line); margin-top:var(--s3)}
.pitch{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; padding:18px 0 20px}
.pitch h3{display:flex; align-items:center; gap:10px}
.pitch h3::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--apricot); flex:none;
  box-shadow:0 0 0 3px color-mix(in oklch, var(--apricot) 35%, transparent)}
.pitch p{max-width:40ch}
@media (min-width:760px){
  .pitchgrid{grid-template-columns:1fr 1fr 1fr; column-gap:var(--s3); border-top:0}
  .pitch{border-top:1px solid var(--line); border-bottom:0; padding:20px 0 26px}
}
/* 6. /my: five full-width cards in one column became a two-column board from 880px; the invite card spans. */
@media (min-width:880px){
  .mypg .wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--s1) var(--s2); align-items:start}
  .mypg .sec-head,.mypg .notice,.mypg #my-invite{grid-column:1/-1}
  .mypg .formcard+.formcard{margin-top:0}
}
/* 7. HQ home: twelve pink tiles became a stat table. Left-aligned numbers over hairlines; a count that needs
   Peachy's hand turns magenta with an apricot mark, everything else stays quiet. */
.stat3{gap:0 var(--s2); margin-bottom:0}
.stat3 a{background:transparent; border-radius:0; padding:14px 0 13px; text-align:left; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column-reverse; gap:5px; min-width:0}
.stat3 a:hover b{color:var(--magenta)}
.stat3 b{font-size:30px; letter-spacing:-.01em; transition:color .16s}
.stat3 span{margin-top:0; font-size:10.5px; line-height:1.3}
.stat3 a.hot b{color:var(--magenta)}
.stat3 a.hot span::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--apricot);
  margin-right:6px; vertical-align:1px}
.stat3+:not(.stat3){margin-top:var(--s2)}   /* the first non-stat block after the table breathes */
@media (max-width:640px){ .stat3{gap:0 var(--s1)} .stat3 b{font-size:26px} }
/* 8. HQ tables on a phone: a five-column table was crushing to one word per line. Below 640px a table that does
   not stack keeps a minimum width and scrolls inside its card, with a fade on the right edge. */
@media (max-width:640px){
  .tblwrap{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .tblwrap .tbl:not(.paytbl):not(.ledger):not(.vtbl){min-width:560px}
  .paywrap{-webkit-mask-image:none; mask-image:none}
}
/* 9. Booth page on a phone: the top button already says it; the sidebar card below the book repeated it. */
@media (max-width:900px){ .booth-side .msgcard{display:none} }
/* 10. Specialty chips sit under a label like the ISO list does. */
.iso.deals .chip.spec{background:color-mix(in oklch, var(--apricot) 38%, oklch(1 0 0)); color:var(--peach-ink)}
/* 11. Reduced motion: the press stays a colour change. */
@media (prefers-reduced-motion:reduce){ .btn:active,button.btn:active{transform:none} }

/* ---------- HQ Vitals (ops, 2026-10-04) ---------- */
.vstrip{display:flex; gap:3px; margin:4px 0 8px}
.vcell{flex:1 1 0; height:22px; border-radius:4px; background:var(--line)}
.vcell.green{background:var(--ok)} .vcell.amber{background:var(--busy)} .vcell.red{background:oklch(0.62 0.18 20)} .vcell.none{background:var(--line)}
.vtbl td.vlabel{width:46%} .vtbl td.vval{font-variant-numeric:tabular-nums; white-space:nowrap} .vtbl td.vst{text-align:right}
.vtbl tr.vdo td{font-size:13.5px; color:var(--ink-mid); background:color-mix(in oklch, var(--apricot) 18%, oklch(1 0 0)); border-radius:var(--r-sm)}

.vwrap{overflow:visible; -webkit-mask-image:none; mask-image:none}
.vtbl td.vval .vnote{display:block; font-size:12.5px; white-space:normal}
@media (max-width:640px){ .vtbl td{padding:9px 6px} .vtbl td.vlabel{width:54%} .vtbl td.vval{white-space:normal} .vtbl td.vst .pill{white-space:nowrap} }

/* ---------- The words: /how-it-works and /rules (Courtney's long form, 2026-10-09) ---------- */
.words p{max-width:68ch; font-size:16.5px; line-height:1.6; color:var(--ink); margin:0 0 14px}
.words h2{font-size:26px; margin:var(--s3) 0 10px; max-width:68ch}
.words ol{max-width:68ch; padding-left:22px; font-size:16.5px; line-height:1.6} .words ol li{margin-bottom:12px}
.words .sec-head p{max-width:68ch}
@media (max-width:640px){ .words p,.words ol{font-size:16px} .words h2{font-size:23px} }