/* Design v2 page pass: the launch form, the games and the content pages (owner 10-24: "much cleaner and AAA+", "optimize real estate").
   Built on the foundation's tokens and classes (style.css); this file only lays out what those pages own. */

/* ---- "How it works": the page's explanation folded under one line, so the first screen is the page's job */
details.how{margin-top:var(--sp-2);border-top:1px solid var(--line);padding-top:var(--sp-2)}
details.how>summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer;list-style:none;color:var(--gold-txt);font:600 var(--fs-sm)/1 var(--font-ui)}
details.how>summary::-webkit-details-marker{display:none}
details.how>summary::after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform var(--dur) var(--ease-out)}
details.how[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
details.how>:not(summary){color:var(--dim);font-size:var(--fs-dense);line-height:1.55;max-width:72ch}
details.how p{margin:var(--sp-2) 0 0}
@media (max-width:760px){details.how>summary{min-height:44px}}

/* ---- Advent */
.adv-panel .panel-head{border:0;padding:0;margin-bottom:var(--sp-2)}
.adv-count{display:flex;flex-direction:column;gap:2px;margin:var(--sp-2) 0}
.adv-count b{font:700 clamp(28px,5vw,40px)/1.1 var(--font-display);color:var(--num);font-variant-numeric:tabular-nums}
.adv-sub{margin:0 0 var(--sp-3);color:var(--dim);max-width:70ch}
.adv-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.adv-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.adv-stats .stat{padding:8px}.adv-stats .stat span{font-size:11px;letter-spacing:.02em}}
.adv-draw{align-items:flex-start;flex-wrap:wrap}.adv-day{display:grid;gap:2px;min-width:0;flex:1 1 220px}.adv-day code{font-size:var(--fs-cap);color:var(--mute);max-width:100%}
.adv-win{display:grid;gap:4px;flex:2 1 260px;font-size:var(--fs-dense)}

/* ---- 404 */
#s-nf .nf-panel{max-width:640px;margin:var(--sp-6) auto;padding:var(--sp-6) var(--sp-5);text-align:center;display:grid;justify-items:center;gap:var(--sp-2)}
#s-nf p{margin:0;max-width:48ch}#s-nf code{font-size:var(--fs-sm);padding:1px 6px;border-radius:6px;background:var(--fill-2);color:var(--txt);overflow-wrap:anywhere}
.nf-act{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);width:100%}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);font-weight:600;font-size:var(--fs-sm);text-decoration:none}.nf-links a:hover{color:var(--gold-txt)}
@media (max-width:760px){#s-nf .nf-panel{margin:var(--sp-4) 0;padding:var(--sp-5) var(--sp-3)}.nf-act{width:100%}.nf-act .btn{flex:1 1 140px}}

/* ---- Quests: the quests first (they were under a 560px Points board), one row each, the link box beside its button */
.q-lead{margin:0 0 var(--sp-3);color:var(--dim);font-size:var(--fs-dense)}
.q-two{align-items:start}
.q-item{display:grid;gap:6px;align-items:stretch;padding:var(--sp-3) 0}.q-item:hover{background:none}
.q-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.q-t b{font-size:var(--fs-body);color:var(--txt)}
.q-item p{margin:0;color:var(--dim);font-size:var(--fs-dense)}
.q-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:4px}.q-form input{min-width:0;width:100%}
.q-xp td{padding:8px 10px}
#s-quests .pts-panel{margin-top:0}

/* ---- Art: the Content Hub grid then the official gallery; one card shape, the caption on its own line, never cut */
.art-head p{margin:0 0 var(--sp-2);color:var(--dim);font-size:var(--fs-dense)}
#art.gallery{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}
.art-card{margin:0;padding:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.gallery .art-card img,.art-card video{width:100%;display:block;border:0;border-radius:var(--r-ctl);background:#000}.art-card img{cursor:zoom-in}.art-card video{aspect-ratio:16/9}
.art-card figcaption{display:grid;gap:2px;min-width:0}.art-card figcaption b{color:var(--txt);font-weight:600;font-size:var(--fs-dense);overflow-wrap:anywhere}.art-card figcaption span{color:var(--dim);font-size:var(--fs-cap)}
.art-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
@media (max-width:760px){#art.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}.art-card{padding:6px}.art-acts .btn{flex:1 1 auto;min-height:40px;padding:0 8px}.art-acts .btn.ghost{display:none}}
@media (max-width:360px){#art.gallery{grid-template-columns:1fr}}

/* ---- Plaza: the square and its chat first (they sat ~1,250px down, under the token's figures); the hero a short banner */
#s-plaza .plz-hero{min-height:150px;padding:var(--sp-4) var(--sp-5)}
#s-plaza .plz-hero h1{font-size:clamp(24px,2.6vw,34px);margin:0 0 6px}
#s-plaza .plz-hero p{font-size:var(--fs-body);color:#f4e7cc}#s-plaza .plz-hero p .line{display:inline;white-space:normal}
#s-plaza .grid{margin-bottom:var(--sp-3)}#s-plaza .grid>div>.panel{margin-bottom:var(--sp-3)}#s-plaza .plz-chat{margin-top:var(--sp-3)}
#plazaWrap{border-radius:var(--r-panel)}#plazaWrap::after{border-radius:var(--r-panel)}
.plz-token{margin-bottom:var(--sp-3)}
.plz-log{height:220px;overflow-y:auto;background:var(--fill);border-radius:var(--r-ctl);padding:8px 10px;font-size:var(--fs-dense)}
.plz-say{display:flex;gap:8px;margin-top:var(--sp-2)}.plz-say input{flex:1;min-width:0}
@media (max-width:760px){#s-plaza .plz-hero{min-height:0;padding:var(--sp-3)}#s-plaza .plz-hero h1{font-size:22px}#s-plaza .plz-hero p{font-size:var(--fs-dense)}#s-plaza .plz-hero p .line:not(:first-child){display:none}}

/* ---- Hat Prices and Lore: one page job each, the page's own figures in the foundation's stat tiles */
#s-index .idx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin:var(--sp-3) 0}
#s-index .idx .stat b{font-size:clamp(20px,2vw,28px)}#s-index .idx .stat span:last-child{text-transform:none;letter-spacing:0;margin-top:2px}
#s-lore .panel>p{max-width:75ch;color:var(--txt);font-size:var(--fs-body);line-height:1.6}
@media (max-width:760px){#s-index .idx{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- The launch form (owner 10-24: "a clean stepped form, visible labels, inline validation, sticky summary / CTA, great on phones").
   One layer on top of the old ones, scoped to the stepped dialog: the foundation's fields, segmented tabs and cards, a sticky live card on the
   right (a compact strip on a phone) and a footer that never scrolls away. */
.ge-launchbox[data-steps]{width:min(960px,96vw);max-width:960px;padding:var(--sp-4) var(--sp-5) 0;display:flex;flex-direction:column}
.ge-launchbox[data-steps]>h3{margin:0 0 var(--sp-3);font:700 var(--fs-h3)/1.2 var(--font-display);color:var(--gold-txt)}
.ge-launchbox .lf-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 0 var(--sp-4);padding:3px;background:rgba(0,0,0,.38);border:1px solid var(--line);border-radius:var(--r-ctl)}
.ge-launchbox .lf-stepper button{min-height:36px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--dim);font:600 var(--fs-sm)/1 var(--font-ui);box-shadow:none}
.ge-launchbox .lf-stepper button:hover{background:var(--hover);color:var(--txt)}
.ge-launchbox .lf-stepper button b{width:20px;height:20px;font:700 11px/1 var(--font-ui);background:var(--fill-2);color:var(--dim)}
.ge-launchbox .lf-stepper button.on{background:var(--accent-soft);border-color:rgba(255,190,90,.38);color:var(--gold-txt);box-shadow:none}
.ge-launchbox .lf-stepper button.on b{background:var(--gold);color:var(--on-accent)}
.ge-launchbox .lf-stepper button.done{color:var(--txt);border-color:transparent}.ge-launchbox .lf-stepper button.done b{background:rgba(61,220,132,.18);color:var(--grn)}
.ge-launchbox .lf-body{grid-template-columns:minmax(0,1fr) 248px;gap:var(--sp-5)}
/* the live card: what the coin will be, beside the form the whole way down */
.ge-launchbox .lf-card{top:0;gap:6px;padding:var(--sp-4) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-panel);background:radial-gradient(120% 70% at 50% 0%,var(--accent-soft),var(--fill) 70%)}
.ge-launchbox .lf-card-ic{width:88px;height:88px;border:2px solid rgba(255,190,90,.6);box-shadow:0 0 0 4px rgba(255,190,90,.08)}
.ge-launchbox .lf-card-ic span{font:700 36px/1 var(--font-display);color:var(--gold-txt)}
.ge-launchbox .lf-card-sym{font:700 var(--fs-h4)/1.2 var(--font-display);color:var(--gold-txt);letter-spacing:.02em}.ge-launchbox .lf-card-name{font-size:var(--fs-sm)}
.ge-launchbox .lf-card-tags i{font:600 var(--fs-cap)/1 var(--font-ui);padding:5px 8px;border:1px solid var(--border);background:var(--fill-2);color:var(--txt)}
.ge-launchbox .lf-card-where{font-size:var(--fs-cap);color:var(--dim)}
/* fields: visible labels, the foundation's inputs, the message under the field that is wrong */
.ge-launchbox .lf-grid{grid-template-columns:120px minmax(0,1fr);gap:var(--sp-4);margin-bottom:var(--sp-3)}
.ge-launchbox .lf-fields{gap:var(--sp-3)}
.ge-launchbox .lf-lab{gap:6px}.ge-launchbox .lf-lab>span{font:600 var(--fs-sm)/1.2 var(--font-ui);color:var(--dim)}.ge-launchbox .lf-lab>span i{color:var(--red);font-style:normal}
.ge-launchbox .lf-fields input,.ge-launchbox .lf-fields textarea,.ge-launchbox .lf-seed input,.ge-launchbox .lf-tax input,.ge-launchbox .lf-anybox input,.ge-launchbox .lf-crew textarea{min-height:var(--ctl-h);padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:#0c0906;color:var(--txt);font:400 var(--fs-input)/1.3 var(--font-ui);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.ge-launchbox .lf-tax input{width:84px}
.ge-launchbox .lf-fields input:focus,.ge-launchbox .lf-fields textarea:focus,.ge-launchbox .lf-seed input:focus,.ge-launchbox .lf-tax input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.ge-launchbox .lf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.ge-launchbox .lf-fields input.missing,.ge-launchbox .lf-img.missing{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,93,93,.18)}
.ge-launchbox .lf-err{display:block;color:var(--red);font:500 var(--fs-cap)/1.35 var(--font-ui)}
.ge-launchbox .lf-img{position:relative;width:120px;height:120px;border:1px dashed var(--border-strong);border-radius:var(--r-panel);background-color:var(--fill);color:var(--dim);font:600 var(--fs-sm)/1.2 var(--font-ui);text-align:center;transition:border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.ge-launchbox .lf-img:hover{border-color:rgba(255,190,90,.6);background-color:var(--hover)}.ge-launchbox .lf-img:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ge-launchbox .lf-img>span{display:grid;justify-items:center;gap:2px}.ge-launchbox .lf-img b{font-weight:600}.ge-launchbox .lf-img b i{color:var(--red);font-style:normal}.ge-launchbox .lf-img small{font-size:11px;font-weight:500;color:var(--mute)}
.ge-launchbox .lf-img-plus{display:grid;place-items:center;width:28px;height:28px;margin-bottom:2px;border-radius:50%;background:var(--accent-soft);color:var(--gold-txt);font:600 20px/1 var(--font-ui);font-style:normal}
.ge-launchbox .lf-img .lf-err{position:absolute;left:0;right:0;top:calc(100% + 4px);text-align:left}.ge-launchbox .lf-img.has .lf-err{display:none}
.ge-launchbox .lf-banwrap{margin:var(--sp-2) 0 var(--sp-3)}
.ge-launchbox .lf-banner{max-height:110px;border:1px dashed var(--border-strong);border-radius:var(--r-panel);background-color:var(--fill);font:500 var(--fs-sm)/1.3 var(--font-ui);color:var(--dim)}.ge-launchbox .lf-banner:hover{border-color:rgba(255,190,90,.6)}
/* rows: a label, then the control; hints are one quiet line */
.ge-launchbox .lf-mode{gap:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 6px;font:500 var(--fs-dense)/1.3 var(--font-ui);color:var(--dim)}
.ge-launchbox .lf-mode>span:first-child,.ge-launchbox .lf-seed>span:first-child{min-width:88px;font:600 var(--fs-sm)/1.2 var(--font-ui);color:var(--txt)}
.ge-launchbox .lf-hint,.ge-launchbox .lf-mode .lf-hint{color:var(--dim);font-size:var(--fs-sm);line-height:1.45;margin:2px 0 var(--sp-2)}
.ge-launchbox .lf-hint b{color:var(--txt);font-weight:600}
.ge-launchbox .lf-seed{gap:var(--sp-2);font-size:var(--fs-sm);margin:var(--sp-3) 0 6px}
/* venue and tax-mode choices: cards on the fill, the chosen one lit gold-soft (gold stays for the one primary button) */
.ge-launchbox .lf-venues .ge-tabs button,.ge-launchbox .lf-taxmode .ge-tabs button,.ge-launchbox .lf-pre{border:1px solid var(--border);background:var(--fill);border-radius:var(--r-ctl);color:var(--txt);box-shadow:none;transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.ge-launchbox .lf-venues .ge-tabs button{min-height:72px;padding:10px 12px;font:600 var(--fs-dense)/1.25 var(--font-ui)}
.ge-launchbox .lf-venues .ge-tabs button small{font:400 var(--fs-cap)/1.4 var(--font-ui);color:var(--dim)}
.ge-launchbox .lf-taxmode .ge-tabs button{min-height:44px;font:600 var(--fs-sm)/1.15 var(--font-ui)}
.ge-launchbox .lf-venues .ge-tabs button:hover,.ge-launchbox .lf-taxmode .ge-tabs button:hover,.ge-launchbox .lf-pre:hover{background:var(--hover);border-color:rgba(255,190,90,.4);transform:none}
.ge-launchbox .lf-venues .ge-tabs button.on,.ge-launchbox .lf-taxmode .ge-tabs button.on,.ge-launchbox .lf-pre.on{background:var(--accent-soft);border-color:rgba(255,190,90,.65);color:var(--gold-txt);box-shadow:inset 0 0 0 1px rgba(255,190,90,.25)}
.ge-launchbox .lf-venues .ge-tabs button.on small{color:var(--txt)}
.ge-launchbox .lf-pre{padding:10px 12px}.ge-launchbox .lf-pre b{font:600 var(--fs-dense)/1.25 var(--font-ui)}.ge-launchbox .lf-pre small{font-size:var(--fs-cap);line-height:1.4;color:var(--dim)}
.ge-launchbox .lf-pre-h b{font:700 var(--fs-body)/1.2 var(--font-ui);color:var(--txt)}
/* the advanced folds and the checkboxes: real targets */
.ge-launchbox .lf-adv>summary,.ge-launchbox details.lf-adv-box>summary{min-height:40px;display:flex;align-items:center;gap:8px;color:var(--gold-txt);font:600 var(--fs-sm)/1.2 var(--font-ui)}
.ge-launchbox .lf-check{align-items:flex-start;gap:10px;min-height:36px;margin:var(--sp-2) 0;font:500 var(--fs-dense)/1.4 var(--font-ui);color:var(--txt);white-space:normal}
.ge-launchbox .lf-check i{display:block;font-size:var(--fs-sm);color:var(--dim)}
.ge-launchbox input[type=checkbox]{width:20px;height:20px;flex:none;margin:1px 0 0}
.ge-launchbox .lf-rules{border:0;background:var(--fill);border-radius:var(--r-ctl);padding:var(--sp-3)}
.ge-launchbox .lf-short{border:1px solid rgba(255,190,90,.4);border-radius:var(--r-ctl);background:var(--accent-soft);padding:10px 12px;font-size:var(--fs-sm)}
.ge-launchbox .lf-facts{gap:4px 16px;margin:var(--sp-3) 0 var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--dim)}
.ge-launchbox .lf-facts span::before{color:var(--gold)}
.ge-launchbox #lfSt:empty{display:none}.ge-launchbox #lfSt{margin:var(--sp-2) 0 0;color:var(--txt);font-size:var(--fs-sm)}
/* the footer stays on screen at the foot of the dialog, the primary action always in reach */
.ge-launchbox[data-steps] .vb-actions{position:sticky;bottom:0;z-index:3;margin:var(--sp-3) calc(-1 * var(--sp-5)) 0;padding:var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom));background:linear-gradient(rgba(19,15,10,0),var(--panel2) 12px);border-top:1px solid var(--line)}
.ge-launchbox[data-steps] .vb-actions .turbo-btn{min-height:var(--ctl-h);border-color:var(--border);background:var(--fill-2);border-radius:var(--r-ctl)}
.ge-launchbox[data-step="1"] .vb-actions .turbo-btn{display:none} /* a launch setting: shown where the launch is sent, not over the name and picture */
@media (max-width:760px){
  .ge-launchbox[data-steps]{width:100%;padding:var(--sp-3) var(--sp-3) 0}
  .ge-launchbox[data-steps]>h3{font-size:var(--fs-h4);margin-bottom:var(--sp-2)}
  .ge-launchbox .lf-stepper{margin-bottom:var(--sp-3)}.ge-launchbox .lf-stepper button{min-height:40px;padding:0 6px;gap:6px}
  .ge-launchbox .lf-body{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  /* the live card as one strip: picture, ticker and name, then its tags in a row that scrolls (it was a 170px block on top of every step) */
  .ge-launchbox .lf-card{position:static;order:-1;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:8px 10px;text-align:left}
  .ge-launchbox .lf-card-ic{grid-row:1/3;width:40px;height:40px;border-width:1px;box-shadow:none}.ge-launchbox .lf-card-ic span{font-size:18px}
  .ge-launchbox .lf-card-sym{grid-column:2;display:flex;align-items:baseline;gap:6px;min-width:0;font-size:var(--fs-body)}
  .ge-launchbox .lf-card-name{display:none}
  .ge-launchbox .lf-card-tags{grid-column:2;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0}.ge-launchbox .lf-card-tags::-webkit-scrollbar{display:none}.ge-launchbox .lf-card-tags i{flex:none}
  .ge-launchbox .lf-card-where{display:none}
  .ge-launchbox .lf-grid{grid-template-columns:96px minmax(0,1fr);gap:var(--sp-3)}
  .ge-launchbox .lf-img{width:96px;height:96px}
  .ge-launchbox .lf-two{grid-template-columns:minmax(0,1fr)}
  .ge-launchbox .lf-mode>span:first-child{min-width:0;width:100%}
  .ge-launchbox .lf-seed{grid-template-columns:minmax(0,1fr) auto}.ge-launchbox .lf-seed>span:first-child{grid-column:1/-1}
  .ge-launchbox[data-steps] .vb-actions{margin:var(--sp-3) calc(-1 * var(--sp-3)) 0;padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom))}
}

/* ---- the moment a coin goes live */
.lc-box{border:1px solid rgba(255,190,90,.55);border-radius:var(--r-panel);background:var(--panel-bg);box-shadow:var(--shadow-pop),0 0 60px rgba(255,190,60,.25);padding:var(--sp-6) var(--sp-5) var(--sp-5)}
.lc-box h2{font:700 clamp(26px,4vw,34px)/1.15 var(--font-display);color:var(--gold-txt);text-shadow:0 2px 0 #000}.lc-box p{color:var(--dim);font-size:var(--fs-dense);line-height:1.5;max-width:46ch;margin:0 auto var(--sp-4)}
.lc-acts .btn{min-width:0}
.lc-next{border-top:1px solid var(--line)}.lc-next span{font:600 var(--fs-cap)/1 var(--font-ui);letter-spacing:.04em;color:var(--dim)}
.lc-next button{min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--fill);color:var(--txt);font:500 var(--fs-dense)/1.35 var(--font-ui)}.lc-next button:hover{background:var(--hover);border-color:rgba(255,190,90,.5);color:var(--gold-txt)}
@media (max-width:760px){.lc-box{padding:var(--sp-5) var(--sp-3) var(--sp-3)}.lc-coin{width:104px;height:104px}.lc-acts{display:grid;grid-template-columns:1fr 1fr}.lc-acts .btn:first-child{grid-column:1/-1}}

/* ---- Plaza on a 375px phone (coordinator sweep 10-24: the page was 28px wider than the screen and the chat's Say button cut off): the grid's
   columns may shrink below the canvas's 1376px intrinsic width, and a long list name ellipsises instead of pushing its row wider */
#s-plaza .grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}#s-plaza .grid>div{min-width:0}
@media (max-width:980px){#s-plaza .grid{grid-template-columns:minmax(0,1fr)}}
#s-plaza .row .nm{min-width:0}#s-plaza .row .nm small{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
#chatForm .btn{flex:none}

/* ---- Plaza (owner 10-24: "too much empty gap"): both columns stretch to the taller one. The chat log and the trade feed take whatever height is
   left (their basis is 0, so neither can push the row taller), so there is never a hole under the chat or under the side cards at any width. */
@media (min-width:981px){
  #s-plaza .grid{align-items:stretch}
  #s-plaza .grid>div{display:flex;flex-direction:column;min-height:0}
  #s-plaza .grid>div>.panel{margin-bottom:0}#s-plaza .grid>div>*+*{margin-top:var(--sp-3)}
  #s-plaza .plz-chat{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  #s-plaza #chatLog{flex:1 1 0;height:auto;min-height:220px}
  #s-plaza .grid>div>.panel:has(>#feed){flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  #s-plaza #feed{flex:1 1 0;max-height:none;min-height:240px}
}
/* the trade feed: one line per trade */
#feed div{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:var(--fs-dense);line-height:1.35;white-space:nowrap}
#feed .tf-what{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
#feed time{flex:none;color:var(--dim);font-size:var(--fs-cap);font-variant-numeric:tabular-nums}