/* Bonny Dome Yoga · event page + RSVP flow
   Design: D4 Pictogram Poster · type T10 (Archivo Expanded Black + Archivo) · colours Fog & Redwood.
   Mobile-first; desktop layout at ≥960px. Flat fields, hairline rules, no shadows/glow/gradients.
   The reference build lives in design/d4/. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1, see CREDITS.md) ----------
   One variable file covers both families: Archivo (wdth 100) and Archivo Expanded (wdth 125). */
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens: Fog & Redwood (default) ---------- */
:root{
  --paper:#EEF2F1;  --field:#FBFCFB; --ink:#13232B; --muted:#4B5B60;
  --deep:#1F5F7A;                    /* primary: title, Going, rules */
  --on-deep:#FFFFFF;
  --btc:#F7931A;                     /* pure bitcoin orange: only the ₿ glyph and large heading text */
  --btc-ink:#A04F00;                 /* darker bitcoin orange for small text: 5.2:1 on --paper */
  --bark:#8E3B24;                    /* redwood accent: labels, eyebrow, warnings, waitlist */
  --on-bark:#FFFFFF;
  --tint:#DCE7EA; --sign-ink:#1F4F63; --dome-tile:#13232B;
  --marker:#8E3B24; --marker-line:#8E3B24;
  --rule:#1F5F7A33; --track:#D5DEE0; --focus:#1F5F7A; --placeholder:#5A6B70;
  --map-bg:#DCE7EA; --map-main:#1F5F7A; --map-road:#5E7479; --pin:#8E3B24; --pin-ink:#FFFFFF;
  /* type: T10 */
  --fd:"Archivo",system-ui,sans-serif; --fd-w:900; --fd-s:125%; --fd-ls:-.022em; --fd-lh:1;
  --fq-w:800; --fq-s:112%;
  --ft:"Archivo",system-ui,sans-serif;
  --gutter:18px; --bar-h:112px;
  color-scheme:light;
}
/* ?theme=underwater: the earlier palette, same layout (tokens only) */
[data-theme="underwater"]{
  --paper:#FFF9EA; --field:#FFFDF6; --ink:#0A2E33; --muted:#33504F;
  --deep:#0E4C55; --on-deep:#FFF9EA; --bark:#7A3A22; --on-bark:#FFF9EA;
  --tint:#DDF0E9; --sign-ink:#0A2E33; --dome-tile:#0E4C55;
  --marker:#F1D58A; --marker-line:#9A8A3C;
  --rule:#0E4C5533; --track:#0A2E3326; --focus:#1C7C7A; --placeholder:#4F6767;
  --map-bg:#DDF0E9; --map-main:#0E4C55; --map-road:#4E8E8A; --pin:#0E4C55; --pin-ink:#F1D58A;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 16.5px/1.55 var(--ft);-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
img,svg{display:block}
a{color:var(--deep)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
p{margin:0 0 12px}
h1,.q,.sub{text-wrap:balance}
p,.help,li{text-wrap:pretty}
.nw{white-space:nowrap}
.picto{width:48px;height:48px;color:var(--deep);flex:none}
.wrap{padding:0 var(--gutter);max-width:1160px;margin:0 auto}
.eyebrow{font:700 12px/1.3 var(--ft);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase}
.label{font:700 11.5px/1.4 var(--ft);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--bark)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top line ---------- */
.top{display:flex;justify-content:space-between;gap:12px;padding:18px var(--gutter) 16px;max-width:1160px;margin:0 auto}
.top .brand{color:var(--ink);text-decoration:none}
.top span{font-weight:400}

/* ---------- hero: pictogram grid ---------- */

/* ---------- hero photo (replaces the big pictograms) ---------- */
.hero__photo{margin:0 var(--gutter);aspect-ratio:3/2;overflow:hidden;background:var(--tint)}
.hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
/* ---------- title + meta ---------- */
.hero>.head,.hero>.meta{padding:0 var(--gutter)}
.kicker{margin:30px 0 0;color:var(--bark)}
.title{margin:12px 0 0;font-family:var(--fd);font-weight:var(--fd-w);font-stretch:var(--fd-s);letter-spacing:var(--fd-ls);line-height:var(--fd-lh);color:var(--deep);font-size:48px}
[data-fit] .line{display:block;white-space:nowrap}
.sub{font:400 19px/1.38 var(--ft);letter-spacing:-.005em;margin:16px 0 0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:34px 0 0;border-top:1.5px solid var(--deep)}
.facts>div{padding:10px 10px 12px 0;min-width:0}
.facts>div+div{padding-left:10px;border-left:1px solid var(--rule)}
.facts b{display:block;font:700 20px/1.2 var(--ft);font-stretch:110%;letter-spacing:-.012em;font-variant-numeric:tabular-nums;margin-top:5px;color:var(--deep);white-space:nowrap}
.facts small{display:block;font-size:13.5px;line-height:1.35;margin-top:3px;color:var(--muted)}
.spots{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule);padding:12px 0}
.marks{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;flex:1;max-width:240px}
.marks i{height:14px;background:var(--deep)}
.marks i.open{background:none;box-shadow:inset 0 0 0 1.5px var(--deep)}
.spots span{font-size:14px;color:var(--muted);white-space:nowrap}
.spots.is-full span{color:var(--bark);font-weight:600}
.price{font-size:14.5px;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px;margin:0}

/* ---------- photos (illustrations for now) ---------- */
.photos{max-width:1160px;margin:40px auto 0;padding:0 var(--gutter)}
.photos img{display:block;width:100%;height:100%;object-fit:cover;background:var(--tint)}
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gallery li{aspect-ratio:1/1;overflow:hidden}
.gallery li:last-child img{object-position:50% 35%}
.photos__cap{margin:10px 0 0;font-size:13px;color:var(--muted);letter-spacing:.01em}
@media (min-width:960px){
  .photos{margin-top:56px}
  .gallery{gap:12px}
  .gallery li{aspect-ratio:4/3}
}

/* ---------- sections ---------- */
.sec{margin-top:52px}
.sec>h2{font:700 12px/1 var(--ft);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--bark);margin:0 0 12px;display:flex;justify-content:space-between}
.sec>h2 span{color:var(--muted);font-weight:500}
.lead{font:500 19.5px/1.42 var(--ft);letter-spacing:-.008em;color:var(--deep)}
.tags{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--rule);list-style:none}
.tags li{display:flex;align-items:center;gap:7px;font:500 14.5px/1.3 var(--ft)}
.tags .picto{width:22px;height:22px}
.tags li.level{color:var(--muted)}   /* v6: a level, not a style: no pictogram, quieter colour */
.bring{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--deep)}
.bring li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45;color:var(--muted)}
.bring .picto{width:40px;height:40px;grid-row:span 2}
.bring b{display:block;font-weight:600;font-size:16.5px;line-height:1.3;color:var(--ink);margin-bottom:2px}

/* map: static SVG drawn from OpenStreetMap road geometry (no tiles, no network) */
.map{background:var(--map-bg);aspect-ratio:600/330;position:relative;overflow:hidden}
.map svg{width:100%;height:100%}
.map__credit{position:absolute;right:0;bottom:0;padding:3px 6px;font-size:11px;line-height:1.2;color:var(--muted);background:var(--map-bg)}
.maplab{font:600 19px var(--ft);letter-spacing:1.2px;fill:var(--ink);paint-order:stroke;stroke:var(--map-bg);stroke-width:7px;stroke-linejoin:round}
.road{fill:none;stroke:var(--map-road);stroke-width:3.5;stroke-linecap:square;stroke-linejoin:round}
.road.main{stroke:var(--map-main);stroke-width:7}
.pin{fill:var(--pin)}.pin-ink{fill:var(--pin-ink)}
.where{display:grid;grid-template-columns:36px 1fr;gap:12px;margin-top:12px}
.where .picto{width:36px;height:36px}
.where b{font-weight:600}
.where small{display:block;color:var(--muted);font-size:14.5px;line-height:1.45;margin-top:2px}
.host{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:44px;border-top:1.5px solid var(--deep);padding-top:12px}
.host a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.foot{margin:18px 0 28px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.foot p{margin:0 0 4px}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;font:700 17px/1 var(--ft);font-stretch:108%;letter-spacing:-.005em;text-decoration:none;border:0;border-radius:0;cursor:pointer;background:none;color:var(--deep);box-shadow:inset 0 0 0 1.5px var(--deep);-webkit-tap-highlight-color:transparent}
.btn.primary{background:var(--deep);color:var(--on-deep);box-shadow:none;justify-content:space-between}
.btn.bark{background:var(--bark);color:var(--on-bark);box-shadow:none;justify-content:space-between}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.link-btn{background:none;border:0;padding:0;cursor:pointer;font:600 15px/1.3 var(--ft);color:var(--deep);text-decoration:underline;text-underline-offset:4px;text-align:left}
.link-btn:disabled{color:var(--muted);cursor:default}
.link-btn.danger{color:var(--bark)}

/* ---------- sticky RSVP bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:1.5px solid var(--deep);padding:10px 14px calc(14px + env(safe-area-inset-bottom))}
.bar .in{max-width:1160px;margin:0 auto;padding:0 calc(var(--gutter) - 14px);display:grid;grid-template-columns:1fr 2fr;gap:8px}
.bar .rsvp-actions{display:contents}
.bar .count{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0;font:500 13px/1.2 var(--ft)}
.bar .count::before{content:"";width:8px;height:8px;flex:none;background:var(--marker);outline:1px solid var(--marker-line)}
.bar .count.is-done::before{background:var(--deep);outline-color:var(--deep)}
.bar .rsvp-actions--done .btn{grid-column:1/-1}

/* ---------- RSVP flow (full-screen sheet) ---------- */
/* Sized to the visual viewport (app.js sets --vvh/--vvt), so on iOS it ends right above the keyboard. */
.sheet{position:fixed;left:0;right:0;top:var(--vvt,0px);height:100vh;height:100dvh;height:var(--vvh,100dvh);z-index:50;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;--bar-h:96px}
/* Keyboard open on a phone: the action bar flows under the step instead of covering the field. */
.sheet.kb .sheet__panel{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.sheet.kb .flowbar{position:static;border-top:0;background:none;padding:22px var(--gutter) 0}
.sheet.kb .flowbar .in{max-width:calc(560px - 2 * var(--gutter))}
.sheet__panel{min-height:100%;padding-bottom:calc(var(--bar-h) + 24px + env(safe-area-inset-bottom))}
.flowtop{position:sticky;top:0;z-index:2;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--gutter) 14px;border-bottom:1px solid var(--ink);font:500 13.5px/1.2 var(--ft)}
.flowtop__back{background:none;border:0;padding:0;cursor:pointer;font-weight:600;color:var(--deep);text-align:left}
.prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:14px var(--gutter) 0;list-style:none;margin:0 auto;max-width:calc(560px + 2 * var(--gutter))}
.prog li{height:4px;background:var(--track)}
.prog li.is-done,.prog li.is-current{background:var(--deep)}
.step{max-width:560px;margin:0 auto;padding:0 var(--gutter)}
.step>.picto{width:56px;height:56px;margin:28px 0 0}
.step .k{margin:18px 0 10px}
.step>.k:first-child{margin-top:28px}
.q{font-family:var(--fd);font-weight:var(--fq-w);font-stretch:var(--fq-s);font-size:25px;line-height:1.14;letter-spacing:-.018em;color:var(--deep);margin:0 0 12px}
.q .qs{display:block;white-space:nowrap}
.help{font-size:14.5px;line-height:1.45;color:var(--muted);margin:8px 0 0}
.grp{margin:22px 0 0}
.grp>label,.grp>.lbl{display:block;font:600 15px/1.3 var(--ft);margin:0 0 8px}
.grp label span{font-weight:400;color:var(--muted)}
.input{display:block;width:100%;height:54px;border:1.5px solid var(--deep);border-radius:0;background:var(--field);padding:0 14px;font:400 17px/1.2 var(--ft);color:var(--ink);-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--placeholder);opacity:1}
.input:focus{outline:2px solid var(--focus);outline-offset:2px}
.input[aria-invalid="true"]{border-color:var(--bark);border-width:2px}
.input--mono{font-size:16px;letter-spacing:-.01em}  /* ≥16px so iOS never zooms on focus */
textarea.input{height:120px;padding:12px 14px;line-height:1.45;resize:vertical}
.swap{display:inline-block;margin:20px 0 0}
.warn{border-left:3px solid var(--bark);padding:6px 0 6px 12px;margin:10px 0 0;font-size:14.5px;color:var(--bark)}
.step__error:empty{display:none}
.step__error{border-left:3px solid var(--bark);padding:6px 0 6px 12px;margin:18px 0 0;font-size:15px;font-weight:600;color:var(--bark)}
.note{background:var(--tint);padding:12px 14px;margin:14px 0 0;font-size:15px}
details{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:26px 0 0}
summary{list-style:none;display:flex;justify-content:space-between;padding:14px 0;font:600 16px/1 var(--ft);cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-size:20px;line-height:.8}
details[open] summary::after{content:"–"}
details .body{padding:0 0 16px;font-size:15px;line-height:1.5}
details ol,details ul{margin:10px 0;padding-left:20px}
details li{margin-bottom:6px}
details .foot{color:var(--muted);margin:0;font-size:15px}

/* single-choice rows (real radios, square marks) */
.choices{margin:22px 0 0;padding:0;border:0;border-top:1px solid var(--rule)}
.choice{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--rule);font:500 17px/1.2 var(--ft);cursor:pointer;position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice__box{width:18px;height:18px;box-shadow:inset 0 0 0 1.5px var(--deep);flex:none}
.choice:has(input:checked){font-weight:600;color:var(--deep)}
.choice input:checked+.choice__box{background:var(--deep);box-shadow:inset 0 0 0 1.5px var(--deep),inset 0 0 0 5px var(--field)}
.choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}

/* 6-digit code: one real input over six boxes */
.code{position:relative;margin:22px 0 0}
.code__boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code__boxes span{height:58px;border:1.5px solid var(--deep);background:var(--field);display:grid;place-items:center;font:600 24px/1 var(--ft);font-variant-numeric:tabular-nums;color:var(--deep)}
.code__boxes span.focus{outline:2px solid var(--focus);outline-offset:2px}
.code.is-invalid .code__boxes span{border-color:var(--bark)}
.code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;cursor:text}
.sender{display:flex;flex-wrap:wrap;gap:4px 10px;margin:18px 0 0;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;color:var(--muted)}
.sender b{color:var(--ink);font-weight:600}
.key{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.resend{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:16px 0 0}
.resend__note{font-size:14px;color:var(--muted)}
.quiet{margin:22px 0 0}

/* bottom bar inside the flow */
.flowbar{position:fixed;left:0;right:0;bottom:0;z-index:3;background:var(--paper);border-top:1px solid var(--ink);padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
.flowbar .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:8px}

/* ---------- confirmation ---------- */
.done-h{font-family:var(--fd);font-weight:var(--fd-w);font-stretch:var(--fd-s);letter-spacing:var(--fd-ls);line-height:var(--fd-lh);font-size:44px;color:var(--deep);margin:10px 0 14px}
.ticket{margin:26px 0 0;border:1.5px solid var(--deep)}
.ticket .head{background:var(--deep);color:var(--on-deep);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font:700 13px/1 var(--ft);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase}
.ticket .head .picto{width:34px;height:34px;color:var(--on-deep);margin:0}
.ticket dl{margin:0;display:grid;grid-template-columns:86px 1fr}
.ticket dt,.ticket dd{margin:0;padding:11px 14px;border-top:1px solid var(--rule)}
.ticket dt{font:700 11.5px/1.6 var(--ft);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--bark);padding-right:0}
.ticket dd{font-weight:500}
.ticket dd small{display:block;color:var(--muted);font-weight:400;font-size:14px}
.ticket .tear{border-top:1.5px dashed var(--deep);display:flex;gap:16px;padding:12px 14px;align-items:center;font-size:14.5px}
.ticket .tear .picto{width:32px;height:32px;margin:0}
.links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:24px 0 0}
.change-panel{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}
.change-panel .link-btn{margin-top:6px}

/* ---------- desktop ---------- */
@media (min-width:960px){
  :root{--gutter:40px}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "photo meta";column-gap:56px;max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
  .hero>*{min-width:0}
  .hero>.head{grid-area:head;padding:0 0 36px}
  .hero>.meta{grid-area:meta;padding:0;align-self:end}
  .hero__photo{grid-area:photo;margin:0}
  .hero   .kicker{margin-top:28px}
  .sub{margin:0;font-size:22px}
      .bring{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .bring li{display:block;border-bottom:0;padding:12px 12px 0 0;font-size:14.5px}
  .bring li+li{padding-left:12px;border-left:1px solid var(--rule)}
  .bring .picto{width:36px;height:36px;margin-bottom:8px}
  .cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px}
  .bar{padding:10px 0 14px}
  .bar .in{padding:0 var(--gutter);grid-template-columns:1fr 200px 320px;align-items:center}
  .bar .count{grid-column:auto;font-size:15px}
  .bar .rsvp-actions--done .btn{grid-column:span 2}
}

@media (prefers-reduced-motion:no-preference){
  .btn,.choice,.input{transition:background-color .15s,color .15s,box-shadow .15s}
}
.nowrap{white-space:nowrap}
/* Deploy build: the icon sprite (was an inline style; CSP allows no inline styles) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Host list + private link (deploy build only) */
.change-panel .private-link{margin:14px 0 0}
.hostpage{max-width:1100px;margin:0 auto;padding:24px var(--gutter) 64px}
.hostpage h1{font-family:var(--fd);font-weight:var(--fd-w);font-stretch:var(--fd-s);letter-spacing:var(--fd-ls);color:var(--deep);font-size:clamp(32px,6vw,56px);line-height:1;margin:18px 0 8px}
.hostpage form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:18px 0}
.hostpage form .grp{flex:1 1 280px;margin:0}
.hostpage .sum{font-weight:600;margin:16px 0}
.hostpage .tools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.hostpage .tbl{overflow-x:auto;border-top:2px solid var(--deep)}
.hostpage table{border-collapse:collapse;width:100%;font-size:14px}
.hostpage th,.hostpage td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--rule)}
.hostpage th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--bark)}
.hostpage td.c{word-break:break-all;max-width:260px}
.hostpage tr.cancelled td{color:var(--muted)}
.hostpage .hsec{margin:28px 0}
.hostpage .hsec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.hostpage .hsec h2{font-family:var(--fd);font-weight:var(--fd-w);font-stretch:var(--fd-s);color:var(--deep);font-size:24px;margin:0}
.hostpage .hsec h2 span{color:var(--bark)}
.hostpage .tag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--rule);padding:1px 6px;color:var(--bark);text-decoration:none}
.hostpage .npubs{list-style:none;padding:0;margin:0}
.hostpage .npubs li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule)}
.hostpage .npubs code{word-break:break-all;font-size:13px}
@media (max-width:700px){
  .hostpage .tbl{overflow:visible}
  .hostpage thead{display:none}
  .hostpage table,.hostpage tbody,.hostpage tr,.hostpage td{display:block}
  .hostpage tr{padding:10px 0;border-bottom:1px solid var(--rule)}
  .hostpage td{border:0;padding:2px 0;max-width:none}
  .hostpage td.n{float:left;margin-right:8px;font-weight:600;color:var(--bark)}
  .hostpage td.nm{font-weight:600}
  .hostpage td[data-l]:empty{display:none}
  .hostpage td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:12px}
}
/* Tip jar on the confirmation screen: calm, optional, same ticket language. */
.tipjar{margin:40px 0 0;padding-top:20px;border-top:1.5px solid var(--deep)}
.tipjar h3{font-family:var(--fd);font-weight:var(--fd-w);font-stretch:var(--fd-s);letter-spacing:var(--fd-ls);line-height:1.05;font-size:28px;color:var(--deep);margin:6px 0 8px}
.tipjar>p{margin:0;color:var(--muted)}
.tips{list-style:none;padding:0;margin:16px 0 0}
.tip{display:grid;grid-template-columns:86px 1fr;gap:4px 14px;align-items:baseline;border-top:1px solid var(--rule);padding:13px 0}
.tip>b{font:700 11.5px/1.6 var(--ft);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--bark)}
.tip--ln{align-items:start}
/* ₿ (U+20BF) isn't in the Archivo subset, so it falls back to the system UI face (SF on iOS/macOS,
   Roboto/Noto on Android, Segoe on Windows), all of which draw it. */
.btc-b,.btc-amt,.chip__main,#ln-unit,#ln-preview{font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","DejaVu Sans",sans-serif}
.btc-b{color:var(--btc);font-weight:800}
.num,.btc-amt,.usd-sub{font-variant-numeric:tabular-nums}
.ln-via{margin:2px 0 16px;font:600 14px/1.4 var(--ft);color:var(--btc-ink)}
.tip__h{margin:0;font:700 17px/1.3 var(--ft);color:var(--deep)}
/* Lightning row: collapsed by default (details/summary), opens to the full tip flow */
.tip details.ln-box{border:0;margin:0}
.ln-box>summary::after,details.ln-box[open]>summary::after{content:none}
.ln-box>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;min-height:32px;margin:-6px 0;padding:6px 0;border-radius:2px}
.ln-box>summary::-webkit-details-marker{display:none}
.ln-box>summary:hover .chev{border-color:var(--deep)}
.ln-box>summary:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.ln-box .chev{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.ln-box[open] .chev{transform:translateY(2px) rotate(-135deg)}
.ln-box__body{padding-top:8px}
@media (prefers-reduced-motion:reduce){.ln-box .chev{transition:none}}
.chips--btc button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:6px 4px}
.chip__sub{font:500 12.5px/1 var(--ft);color:var(--muted);font-variant-numeric:tabular-nums}
.chip__sub:empty{display:none}
.chips--btc button[aria-pressed="true"] .chip__sub{color:var(--on-deep)}
.chips{display:flex;gap:8px;margin:6px 0 10px}
.chips button{appearance:none;flex:1 1 0;min-height:44px;border:1.5px solid var(--deep);border-radius:0;background:var(--field);color:var(--deep);font:700 16px/1 var(--ft);font-variant-numeric:tabular-nums;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--deep);color:var(--on-deep)}
.chips button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.chips--links{margin:10px 0 0}
.chips--links a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--rule);background:var(--field);color:var(--deep);font:600 15px/1 var(--ft);font-variant-numeric:tabular-nums;text-decoration:none}
.chips--links a:hover{border-color:var(--deep)}
.chips--links a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tipjar__why{margin:6px 0 0;font-size:14px;color:var(--muted)}
.amt{position:relative}
.amt__unit{position:absolute;left:14px;top:0;height:54px;display:flex;align-items:center;font:600 17px/1 var(--ft);color:var(--muted);pointer-events:none}
.amt .input{padding-left:30px;font-variant-numeric:tabular-nums}
.amt--btc .input{padding-left:32px}
#ln-preview:empty{display:none}
.ln-switch{display:block;margin:10px 0 0;font-size:14.5px}
.ln-create{margin:16px 0 0}
.ln-inv__amt{margin:10px 0 0;font:700 17px/1.3 var(--ft);color:var(--deep);font-variant-numeric:tabular-nums}
.ln-inv__acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:12px 0 0}
.ln-inv__acts .btn{min-height:46px;padding:0 18px}
.ln-status:empty{display:none}
.ln-status{margin:12px 0 0;font-size:15px;color:var(--muted)}
.ln-status--paid{display:flex;align-items:center;gap:10px;font:700 18px/1.3 var(--ft);color:var(--deep);font-variant-numeric:tabular-nums}
.ln-check{flex:none;width:26px;height:26px;fill:none;stroke:var(--deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ln-inv__amt .btc-amt{display:block}
.usd-sub{display:block;margin:4px 0 0;font:400 15px/1.2 var(--ft);color:var(--muted)}
.ln-hint{font-size:14px}
.ln-renew{margin:16px 0 0}
.tip--ln .tip__addr{margin:18px 0 0;font-size:13px}
.tip--ln .tip__addr .label{color:var(--muted)}
.ln-seed{margin:16px 0 0;padding:10px 12px;background:var(--tint);font-size:15px;line-height:1.45;color:var(--ink)}
.ln-seed a{color:var(--deep);font-weight:600;text-underline-offset:3px}
.ln-seed__help{margin:6px 0 0;font-size:13.5px}
.qr{width:240px;max-width:100%;border:1px solid var(--rule);background:#fff}
.qr svg{display:block;width:100%;height:auto}
.qr__bg{fill:#fff}.qr__fg{fill:#000}
.tip .help{margin:8px 0 0}
.tip__addr{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:10px 0 0}
.tip__addr code{word-break:break-all;font-size:13px;flex:1 1 180px}
.tip__lead{margin:0 0 12px}
.tip__addr code{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- Homepage (/): calm placeholder, links to the next class ---------- */
body.home{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.home__main{max-width:1160px;margin:0 auto}
.home__photo{aspect-ratio:3/2}
.home__head{padding:0 var(--gutter);max-width:640px}
.home__title{font-size:clamp(44px,11vw,88px);margin-top:22px}
.home__line{margin:12px 0 0;color:var(--muted);font-size:18px}
.home__next{display:grid;gap:4px;margin:28px 0 0;padding:18px 20px;background:var(--field);border:1px solid var(--rule);border-left:4px solid var(--deep);color:var(--ink);text-decoration:none}
.home__next:hover,.home__next:focus-visible{border-color:var(--deep)}
.home__next-k{color:var(--bark)}
.home__next-t{font-family:var(--fd);font-weight:var(--fd-w);font-stretch:var(--fd-s);font-size:24px;line-height:1.15;color:var(--deep)}
.home__next-w{font-weight:700;font-size:17px}
@media (min-width:960px){
  .home__photo{margin:0 var(--gutter);aspect-ratio:21/9}
  .home__head{padding:0 var(--gutter)}
}