/* yposocal.com — Ink & Champagne design system */
:root{
  --ink:#080B12; --ink2:#0B101C; --pane:#101828; --panel:#0E1524;
  /* Solid, not blurred — the same call the native app made ("web uses .66 +
     backdrop-blur; solidified for native", theme.js). A backdrop-filter is a
     compositing layer per element and the feed carries ~20 of them on one
     screen, which is exactly the kind of thing that makes an iPhone scroll
     feel expensive. .92 over this ink reads the same as .66 through blur. */
  --glass:rgba(21,29,47,.92);
  --line:rgba(200,164,92,.18); --line2:rgba(200,164,92,.38);
  --gold:#C8A45C; --gold2:#E8CE93; --golddeep:#8F6F3B;
  --ivory:#F1EBDD; --dim:#98A1B4; --faint:#6B7488;
  --green:#5FA57C; --amber:#D9A441; --red:#C0604F;
  --hue:#C8A45C;
  --serif:ui-serif,"New York","Iowan Old Style",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{min-height:100dvh;background:var(--ink);color:var(--ivory);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:var(--sans);background:none;border:none;color:inherit;cursor:pointer;font-size:inherit}
input,textarea,select{font-family:var(--sans);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:10px 13px;font-size:14px;color:var(--ivory);outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--line2)}
/* touch devices: iOS Safari auto-zooms any focused field under 16px — never shrink below it */
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
/* touch devices: stretch small controls' hit areas to ~44pt without changing their look */
@media (pointer:coarse){
  .xbtn,.rx,.cbar .send,.cacts button,.tl button,.bm-order button{position:relative}
  .xbtn::before,.rx::before,.cbar .send::before,.cacts button::before,.tl button::before,.bm-order button::before{
    content:"";position:absolute;inset:-8px;border-radius:inherit}
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2398A1B4' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
::placeholder{color:var(--faint)}
/* the ring follows each element's own radius — forcing one here made every
   input's corners snap 10px→4px on focus */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a{color:var(--gold2);text-decoration:none}
.serif{font-family:var(--serif)}
.eb{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.tnum{font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}.faint{color:var(--faint)}
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")}

.card{background:var(--glass);border:1px solid rgba(200,164,92,.15);border-radius:20px}
/* min-height is the whole guarantee: without it a .btn is 14px of padding plus
   whatever line box the font happens to produce, so the 44px touch floor these
   controls are held to is met by coincidence. This laptop rendered 45.4; CI's
   substituted fonts rendered 43.92 and failed the contract by eight hundredths
   of a pixel. A tap target may not depend on which fonts a machine has. */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;padding:14px;border-radius:14px;font-size:14.5px;font-weight:600;letter-spacing:.02em;transition:.18s}
.btn:active{transform:scale(.98)}
.btn.gold{background:linear-gradient(140deg,#E3C57F,#AE8A44);color:#161005;box-shadow:0 8px 26px rgba(200,164,92,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{border:1px solid var(--line2);color:var(--gold2)}
.btn.dim2{border:1px solid rgba(255,255,255,.12);color:var(--dim)}
.btn[disabled]{opacity:.5;pointer-events:none}
.cbtn:disabled,.cbtn[disabled]{opacity:.5;pointer-events:none}
input:disabled,textarea:disabled,select:disabled{opacity:.55}
.cbtn{padding:10px 16px;border-radius:11px;font-size:13px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.cbtn.gold{background:linear-gradient(140deg,#E3C57F,#AE8A44);color:#161005}
.cbtn.ghost{border:1px solid var(--line2);color:var(--gold2)}
.cbtn.dim{border:1px solid rgba(255,255,255,.12);color:var(--dim)}
.cbtn.danger{border:1px solid rgba(192,96,79,.5);color:#DEA79C}
.cbtn:active{transform:scale(.97)}
.chip{font-size:9.5px;letter-spacing:.13em;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.chip.forum{color:var(--gold2);background:rgba(200,164,92,.13);border:1px solid var(--line)}
.chip.chap{color:#9FB6D8;background:rgba(110,150,205,.12);border:1px solid rgba(140,175,225,.25)}
.chip.go{color:#9CD1B2;background:rgba(95,165,124,.14);border:1px solid rgba(95,165,124,.3)}
.chip.tbd{color:var(--amber);background:rgba(217,164,65,.12);border:1px solid rgba(217,164,65,.28)}
.chip.warn{color:#E8C98A;background:rgba(217,164,65,.13);border:1px solid rgba(217,164,65,.35)}
.chip.mute{color:var(--dim);border:1px solid rgba(255,255,255,.15)}
.chip.red{color:#DEA79C;background:rgba(192,96,79,.13);border:1px solid rgba(192,96,79,.35)}
.chip.board{color:#C9BAE8;background:rgba(139,110,199,.16);border:1px solid rgba(160,132,220,.35)}
.chip.gold-c{color:#F0DCA8;background:linear-gradient(140deg,rgba(227,197,127,.22),rgba(174,138,68,.14));border:1px solid rgba(232,206,147,.4)}
.automation-receipt{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-width:100%}
.automation-count{min-width:0;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:8px;
  color:var(--dim);background:rgba(200,164,92,.06);overflow-wrap:anywhere}
.automation-count b{color:var(--gold2);font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:.16em;font-weight:700;border-radius:6px;padding:3.5px 8px}
.tag.win{color:#F4DFA8;background:rgba(200,164,92,.18);border:1px solid rgba(232,206,147,.35)}
.tag.ask{color:#A8C4E8;background:rgba(92,140,200,.14);border:1px solid rgba(140,180,230,.3)}
.tag.mod{color:var(--gold2);background:rgba(200,164,92,.12);border:1px solid var(--line2)}

.agenda-pub{position:relative;overflow:hidden;margin-top:12px;padding:20px 18px 16px;border:1px solid rgba(232,206,147,.18);border-radius:18px;background:
  radial-gradient(ellipse 92% 70% at 12% -12%,rgba(200,164,92,.05),transparent 64%),
  linear-gradient(155deg,rgba(22,31,51,.98),rgba(10,15,27,.98))}
.agenda-glow{position:absolute;inset:-15% auto -15% -62%;width:54%;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,240,199,.021) 49%,transparent 76%);
  transform:translateX(-120%) skewX(-10deg);animation:agenda-shine 7s ease-in-out infinite}
@keyframes agenda-shine{
  0%,55%{transform:translateX(-120%) skewX(-10deg);opacity:0}
  63%{opacity:.72}
  78%{transform:translateX(310%) skewX(-10deg);opacity:0}
  100%{transform:translateX(310%) skewX(-10deg);opacity:0}
}
.agenda-kicker{position:relative;display:flex;align-items:center;gap:10px;color:var(--gold);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.agenda-kicker i{height:1px;flex:1;background:linear-gradient(90deg,var(--line2),transparent)}
.agenda-kicker b{color:var(--gold2);font-size:11px;letter-spacing:.08em}
.agenda-pub h3{position:relative;font-family:var(--serif);font-size:25px;line-height:1.08;letter-spacing:-.025em;margin-top:12px;text-wrap:balance}
.agenda-when{position:relative;margin-top:7px;color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
/* ---- the run of show: one timeline for every published agenda ----
   The spine's bar length is proportional to the segment's minutes, so the shape
   of an evening is legible before a single word is read. Descriptions fold away
   until asked for — a three-hour agenda is a plan, not an essay. ---- */
.run{position:relative;list-style:none;margin:16px 0 0;padding:0;counter-reset:run}
.run-seg{display:grid;grid-template-columns:26px 1fr;gap:12px}
.run-spine{display:flex;flex-direction:column;align-items:center;min-height:100%}
.run-glyph{flex:none;width:26px;height:26px;display:grid;place-items:center;font-size:10px;line-height:1;
  color:var(--gold2);border:1px solid var(--line2);border-radius:50%;background:rgba(200,164,92,.07)}
.run-bar{flex:1;width:2px;margin:6px 0 0;border-radius:2px;
  background:linear-gradient(var(--line2),rgba(200,164,92,.07))}
.run-seg:last-child .run-bar{display:none}
.run-body{padding-bottom:16px;min-width:0}
.run-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.run-clock{color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:.02em}
.run-min{color:var(--faint);font-size:10.5px;letter-spacing:.04em}
/* title sits tight under its own timing line — the old layout let a two-line
   timing block push the description a full line clear of the heading */
.run-body h4{font-size:14px;font-weight:650;line-height:1.35;margin:4px 0 0;text-wrap:pretty}
.run-note{font-size:12px;line-height:1.55;color:var(--dim);margin:7px 0 0;text-wrap:pretty}
/* held segments recede; the one running right now leads */
.run-seg.done .run-glyph{color:var(--faint);border-color:rgba(255,255,255,.1);background:none}
.run-seg.done .run-body h4,.run-seg.done .run-clock{color:var(--faint)}
.run-seg.live .run-glyph{color:#161005;background:linear-gradient(140deg,#E3C57F,#A9853F);border-color:transparent;
  box-shadow:0 0 0 4px rgba(200,164,92,.16)}
.run-seg.live .run-body h4{color:var(--gold2)}
.run-live{margin-left:auto}
.agenda-open{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:11px;
  color:var(--gold2);font-size:12px;font-weight:650}
/* ---- the run-of-show card and its header of vital statistics ---- */
.runcard{padding:15px 16px 4px;margin-top:10px}
.run-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid rgba(200,164,92,.13)}
.run-stat{display:flex;flex-direction:column;gap:2px;line-height:1}
.run-stat b{font-family:var(--serif);font-size:21px;color:var(--gold2);font-weight:500}
.run-stat span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.run-stat.warn b{color:var(--amber)}
.runcard .run{margin-top:15px}
/* ---- the board record ---- */
.boardprep{padding:16px;margin-top:12px;border-color:rgba(200,164,92,.28)}
.boardprep p{font-size:13px;line-height:1.6;color:var(--dim);margin-top:7px}
.boardsum{padding:15px 17px;margin-top:10px;border-color:rgba(200,164,92,.26);
  background:linear-gradient(140deg,rgba(200,164,92,.08),rgba(21,29,47,.72))}
.boardsum p{font-size:15px;line-height:1.68;margin-top:9px;white-space:pre-wrap;text-wrap:pretty}
.board-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}
.board-who{font-size:11px;color:var(--dim)}
.board-minutes{margin-top:9px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.board-minutes p{font-size:12px;line-height:1.6;color:var(--dim);margin-top:5px;white-space:pre-wrap}
.boardlist{padding:4px 16px;margin-top:10px}
.board-row{display:grid;grid-template-columns:22px 1fr auto;gap:11px;align-items:start;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.055)}
.boardlist .board-row:last-child{border-bottom:0}
.board-mark{width:22px;height:22px;display:grid;place-items:center;font-size:10px;color:var(--gold2);
  border:1px solid var(--line2);border-radius:50%;background:rgba(200,164,92,.07)}
.board-row b{font-size:13.5px;line-height:1.45;font-weight:650;display:block;text-wrap:pretty}
.board-row p{font-size:11.5px;line-height:1.5;color:var(--dim);margin-top:4px;white-space:pre-wrap;text-wrap:pretty}
.board-row.done b{color:var(--dim)}
.board-row.done .board-mark{color:#9CD1B2;border-color:rgba(95,165,124,.4);background:rgba(95,165,124,.1)}
.boardatt{padding:14px 16px;margin-top:10px;display:flex;flex-direction:column;gap:14px}
.att-group .eb{display:block;margin-bottom:9px}
.att-faces{display:flex;flex-wrap:wrap;gap:7px}
.att-face{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);font-size:12px}
.att-face.out{opacity:.55}
.att-face.out .av24{filter:grayscale(1)}.agenda-foot{position:relative;display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(200,164,92,.13);font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
/* ---- the Expedition doorway: the richest thing on an event page, and it now
       looks like it. One card, above the fold, impossible to scroll past. ---- */
.expedition{position:relative;display:block;width:100%;text-align:left;margin:12px 0;padding:17px 18px 15px;overflow:hidden;
  border:1px solid rgba(232,206,147,.42);border-radius:22px;color:var(--ivory);
  background:linear-gradient(135deg,rgba(200,164,92,.17),rgba(21,29,47,.94) 46%,rgba(8,13,23,.97));
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.expedition .exp-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 200px at 88% -30%,rgba(232,206,147,.2),transparent 68%)}
.expedition .exp-top{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.expedition .exp-title{position:relative;display:block;font-family:var(--serif);font-size:23px;line-height:1.15;letter-spacing:-.02em;margin-top:11px;text-wrap:balance}
.expedition .exp-where{position:relative;display:block;color:var(--gold2);font-size:12px;letter-spacing:.03em;margin-top:5px}
.expedition .exp-grid{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.expedition .exp-grid span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 10px}
.expedition .exp-cta{position:relative;display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(200,164,92,.16);color:var(--gold2);font-size:13px;font-weight:650}
.expedition .exp-cta svg{margin-left:-1px}
.expedition:active{transform:scale(.99)}
/* underway: the gold edge breathes so a live trip cannot be mistaken for a plan */
.expedition.live{border-color:rgba(232,206,147,.62);animation:expPulse 3.4s ease-in-out infinite}
@keyframes expPulse{50%{border-color:rgba(232,206,147,.3);box-shadow:0 18px 44px -26px rgba(200,164,92,.5),inset 0 1px 0 rgba(255,255,255,.06)}}
@media (prefers-reduced-motion:reduce){.expedition.live{animation:none}}
.post-place{width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:center;text-align:left;margin-top:12px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(200,164,92,.055);color:var(--gold2)}
.post-place span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:11.5px}
.post-place span b{display:block;color:var(--ivory);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:2px}
.post-place i{font-style:normal;color:var(--gold);font-size:10.5px}

.av{border-radius:50%;display:grid;place-items:center;font-family:var(--serif);color:var(--gold2);
  background:radial-gradient(circle at 32% 26%,#213052,#0C1322 70%);border:1px solid rgba(200,164,92,.35);flex:none;letter-spacing:.04em;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.av44{width:44px;height:44px;font-size:14.5px}
.av36{width:36px;height:36px;font-size:12.5px}
.av30{width:30px;height:30px;font-size:11px}
.av24{width:24px;height:24px;font-size:9px}
.av52{width:52px;height:52px;font-size:17px}
.av64{width:64px;height:64px;font-size:21px}
.av84{width:84px;height:84px;font-size:28px}
.pring{border-radius:50%;padding:3px;display:inline-grid;place-items:center}
.pring .av{border:2.5px solid var(--ink2)}
.stack{display:flex}
.stack .av{margin-left:-9px;border:2px solid #0E1524}
.stack .av:first-child{margin-left:0}

/* the placeholder a fetching view paints so it never shows the screen you just left */
.skel{border-radius:20px;border:1px solid rgba(200,164,92,.10);background:linear-gradient(100deg,rgba(255,255,255,.028) 30%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.028) 70%);background-size:300% 100%;animation:skelSweep 1.5s ease-in-out infinite}
@keyframes skelSweep{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.sw{width:46px;height:28px;border-radius:15px;background:rgba(255,255,255,.12);position:relative;transition:.2s;flex:none;cursor:pointer}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:23px;height:23px;border-radius:50%;background:#E9E2D2;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sw.on{background:linear-gradient(140deg,#D8B871,#A9853F)}
.sw.on::after{left:20.5px}
.srow{position:relative;display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.055);font-size:14px}
button.srow{width:100%;text-align:left}
.srow:last-child{border-bottom:none}
/* the row's own box stops inside the panel's padding — the highlight must not.
   --srow-bleed carries the panel's horizontal padding so hover fills it edge to edge */
.srow>*{position:relative;z-index:1}
.srow[onclick]::before{content:"";position:absolute;z-index:0;inset:1px calc(-1 * var(--srow-bleed,16px));border-radius:12px;background:transparent;transition:background .18s;pointer-events:none}
.srow .d2{font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.45}
.profile-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:8px;background:var(--amber);box-shadow:0 0 0 3px rgba(217,164,65,.12);vertical-align:1px}
.mrow{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.055);font-size:13.5px}
.mrow:last-child{border-bottom:none}
.mrow .ic{color:var(--gold);flex:none;margin-top:1px}
.mrow .k{color:var(--faint);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.mrow .grow{flex:1;min-width:0}
.mo{margin:20px 4px 6px;display:flex;align-items:center;gap:10px}
.mo::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sect{margin:20px 4px 8px}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom) + var(--keyboard-inset,0px));transform:translate(-50%,20px);background:rgba(14,20,34,.94);border:1px solid var(--line2);border-radius:999px;padding:11px 18px;font-size:13px;color:var(--gold2);display:flex;gap:9px;align-items:center;opacity:0;pointer-events:none;transition:.3s;z-index:300;white-space:nowrap;backdrop-filter:blur(12px);max-width:90%}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast span{overflow:hidden;text-overflow:ellipsis}
/* The upload bar — a post publishes the moment its text is ready and its media
   keeps climbing behind it. That climb used to be one sentence in a toast that
   faded after 2.6s, leaving a long video with nothing to show for itself
   (Max, 2026-08-02). Same pill as a toast, but it stays for the whole job and
   carries a filling rail. The native twin is ui.js UploadBarHost. */
.upbar-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom) + var(--keyboard-inset,0px));transform:translate(-50%,20px);background:rgba(14,20,34,.96);border:1px solid var(--line2);border-radius:999px;padding:10px 18px 8px;font-size:13px;color:var(--gold2);opacity:0;pointer-events:none;transition:.3s;z-index:301;backdrop-filter:blur(12px);max-width:90%;min-width:214px}
.upbar-toast.on{opacity:1;transform:translate(-50%,0)}
.upbar-toast .upbar-rail{display:block;height:3px;border-radius:2px;margin-top:8px;background:rgba(200,164,92,.18);overflow:hidden}
.upbar-toast .upbar-rail i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#E3C57F,#AE8A44);transition:width .25s;min-width:3px}

.scrim{position:fixed;inset:0;background:rgba(3,5,9,.62);opacity:0;pointer-events:none;transition:.28s;z-index:120}
.scrim.on{opacity:1;pointer-events:auto}
/* an open sheet owns the scroll — the page behind it stays put */
body.sheet-open{overflow:hidden}
/* Geometry copied from the native AnimatedSheet, number for number: a 22px
   top radius over #0D1424, a 40x4 grabber under 9px of headroom, and a header
   at 20/12/4. The web sheet used to run its own slightly different set — the
   two surfaces read as different apps side by side. */
.sheet{position:fixed;left:50%;transform:translate(-50%,0) translateY(28px) scale(.985);bottom:0;z-index:130;background:#0D1424;border:1px solid var(--line2);border-bottom:none;border-radius:22px 22px 0 0;transition:transform .32s cubic-bezier(.2,.82,.25,1),opacity .22s ease,visibility 0s linear .32s;max-height:88dvh;width:min(560px,100vw);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform-origin:50% 100%}
.sheet.on{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:9px auto 0;flex:none;touch-action:none}
.sheet .shd{display:flex;align-items:center;padding:12px 20px 4px;flex:none;gap:10px;touch-action:none}
.sheet .shd .ttl2{font-family:var(--serif);font-size:21px;flex:1}
.sheet .sbody{--srow-bleed:20px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-block:72px;padding:0 20px max(30px,calc(env(safe-area-inset-bottom) + 24px));scrollbar-width:none}
.sheet .sbody::-webkit-scrollbar{display:none}
.agdesc{margin:8px 0 0 24px;width:calc(100% - 24px);min-height:54px;resize:vertical;background:rgba(255,255,255,.025);font-size:12.5px;line-height:1.45;color:var(--dim)}
.xbtn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.04);display:grid;place-items:center;color:var(--dim);flex:none}

.radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--faint);display:grid;place-items:center;flex:none}
.radio.on{border-color:var(--gold)}
.radio.on::after{content:"";width:11px;height:11px;border-radius:50%;background:linear-gradient(140deg,#E3C57F,#AE8A44)}
.cbx{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--faint);display:grid;place-items:center;flex:none;color:#141005;transition:.15s}
.cbx.on{background:linear-gradient(140deg,#E3C57F,#AE8A44);border-color:transparent}
.pdots{display:inline-flex;gap:5px;vertical-align:1px}
.pdots i{width:9px;height:9px;border-radius:50%}
.pg{background:var(--green)}.py{background:var(--amber)}.pr{background:var(--red)}

@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.985)}}
.ain{animation:cardIn .55s cubic-bezier(.2,.85,.3,1) backwards}
@keyframes deepFocus{0%,100%{box-shadow:0 0 0 0 rgba(227,197,127,0)}22%,68%{border-color:rgba(227,197,127,.72);box-shadow:0 0 0 3px rgba(200,164,92,.13),0 16px 44px rgba(0,0,0,.24)}}
.deep-focus{animation:deepFocus 2.5s ease both}
@keyframes fu{to{opacity:1;transform:none}}
.fadeup{opacity:0;transform:translateY(14px);animation:fu .8s .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{40%{transform:scale(1.22)}}
.pop{animation:pop .3s}
.bp{position:fixed;z-index:290;pointer-events:none;font-size:13px;transition:transform .75s cubic-bezier(.15,.7,.3,1),opacity .75s ease-out;will-change:transform,opacity}
.bp i{display:block;width:5px;height:5px;border-radius:50%;background:var(--gold2);box-shadow:0 0 6px rgba(232,206,147,.8)}
.spin{width:18px;height:18px;border:2px solid rgba(232,206,147,.25);border-top-color:var(--gold2);border-radius:50%;animation:sp 0.8s linear infinite;display:inline-block;vertical-align:-4px}
@keyframes sp{to{transform:rotate(360deg)}}
.bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.bar i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,rgba(200,164,92,.65),rgba(200,164,92,.35));border-radius:6px;transition:width .8s cubic-bezier(.3,.7,.3,1)}
/* ---- the YPO pyramid mark: self-assembly ---- */
.ymk-anim .ymk-l{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1s ease forwards}
.ymk-anim .ymk-o{stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1.35s .05s ease forwards}
.ymk-anim .ymk-f{opacity:0;transform:translateY(9px) scale(.9);transform-origin:center;transform-box:fill-box;animation:ymkIn .6s cubic-bezier(.2,.85,.3,1) forwards;animation-delay:calc(.4s + var(--i,0)*.085s)}
@keyframes ymkIn{to{opacity:1;transform:none}}
.ymk-anim .ymk-sweep{animation:ymkSweep 6s 2.1s ease-in-out infinite}
@keyframes ymkSweep{0%{transform:translateX(0);opacity:0}5%{opacity:.13}16%{transform:translateX(125px);opacity:0}100%{transform:translateX(125px);opacity:0}}
/* ---- the champagne motion layer (mirrors app/src/motion.js) ---- */
/* aurora — two light fields drifting behind every surface (grain owns ::after) */
body.grain::before{content:"";position:fixed;inset:-22%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 34% at 78% 10%,rgba(200,164,92,.055),transparent 70%),
    radial-gradient(54% 46% at 10% 94%,rgba(22,38,74,.5),transparent 72%);
  animation:aurora 38s ease-in-out infinite alternate}
@keyframes aurora{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(2.6%,1.8%) scale(1.07)}
}
/* view arrival — the incoming view settles instead of snapping (web twin of the
   native root-tab settle; reduced motion collapses it via the global kill) */
.navin{animation:viewIn .24s cubic-bezier(.2,.85,.3,1)}
@keyframes viewIn{from{opacity:.6;transform:translateY(9px)}}
/* Arriving at a room: its furniture rises in a short cascade behind the view fade.
   Only tab roots wear .navroot (navPulse sets it); interiors keep the plain pulse.
   The feed's own .ain cascade outranks this — :not(.ain) keeps them from fighting. */
.navin.navroot>*:not(.ain){animation:roomRise .3s cubic-bezier(.2,.85,.3,1) both}
.navin.navroot>*:nth-child(1):not(.ain){animation-delay:.02s}
.navin.navroot>*:nth-child(2):not(.ain){animation-delay:.05s}
.navin.navroot>*:nth-child(3):not(.ain){animation-delay:.08s}
.navin.navroot>*:nth-child(4):not(.ain){animation-delay:.11s}
.navin.navroot>*:nth-child(5):not(.ain){animation-delay:.14s}
.navin.navroot>*:nth-child(6):not(.ain){animation-delay:.17s}
.navin.navroot>*:nth-child(7):not(.ain){animation-delay:.19s}
.navin.navroot>*:nth-child(8):not(.ain){animation-delay:.21s}
.navin.navroot>*:nth-child(n+9):not(.ain){animation-delay:.23s}
@keyframes roomRise{from{opacity:0;transform:translateY(10px)}}
/* one light pass across the primary button under an attentive pointer */
@media (hover:hover){
  .btn.gold{position:relative;overflow:hidden}
  .btn.gold::after{content:"";position:absolute;top:-45%;bottom:-45%;left:-32%;width:36%;
    transform:translateX(-170%) skewX(-14deg);pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,246,220,.45),transparent)}
  .btn.gold:hover::after,.btn.gold:focus-visible::after{animation:btnsheen .9s ease}
  .card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
  button.card:hover,.card[onclick]:hover{transform:translateY(-1.5px);border-color:var(--line2);
    box-shadow:0 12px 32px rgba(0,0,0,.38)}
}
@keyframes btnsheen{to{transform:translateX(430%) skewX(-14deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:.01ms!important;transition-duration:.01ms!important}}
/* ---- The Chair's Room: the day chair's doorway on the event page, and the
       room itself — the count as a headline, the door as a tap-list. ---- */
.chairdoor{position:relative;display:block;width:100%;text-align:left;margin:12px 0;padding:16px 18px 14px;overflow:hidden;
  border:1px solid rgba(232,206,147,.42);border-radius:22px;color:var(--ivory);
  background:linear-gradient(135deg,rgba(200,164,92,.15),rgba(21,29,47,.94) 48%,rgba(8,13,23,.97));
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.chairdoor .cd-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 190px at 12% -30%,rgba(232,206,147,.18),transparent 68%)}
.chairdoor .cd-top{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chairdoor .cd-title{position:relative;display:block;font-family:var(--serif);font-size:21px;line-height:1.16;letter-spacing:-.02em;margin-top:10px;text-wrap:balance}
.chairdoor .cd-grid{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chairdoor .cd-grid span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 10px}
.chairdoor .cd-cta{position:relative;display:flex;align-items:center;gap:6px;margin-top:13px;padding-top:11px;
  border-top:1px solid rgba(200,164,92,.16);color:var(--gold2);font-size:13px;font-weight:650}
.chairdoor:active{transform:scale(.99)}
.chairhero{padding:16px 18px 15px;border-color:rgba(232,206,147,.34);
  background:linear-gradient(150deg,rgba(200,164,92,.12),rgba(21,29,47,.9) 55%,rgba(10,15,27,.96))}
.chairhero .ch-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.chairhero .ch-n{font-size:56px;line-height:1.05;color:var(--ivory);margin-top:8px;letter-spacing:-.02em}
.chairhero .ch-sub{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.5}
.chairhero .ch-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ch-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 10px;border-radius:14px;color:var(--ivory);background:none;border:none}
button.ch-row:not(:disabled):active{background:rgba(255,255,255,.04)}
.ch-row+.ch-row{border-top:1px solid rgba(255,255,255,.05);border-top-left-radius:0;border-top-right-radius:0}
.ch-row .ch-id{flex:1;min-width:0}
.ch-row .ch-id b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-row .ch-id .d2{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-row .ch-heads{flex:none;font-size:19px;color:var(--gold2);min-width:22px;text-align:center}
.ch-row .ch-pos{flex:none;width:24px;font-size:15px;color:var(--amber);text-align:center}
.ch-row.out{opacity:.5}
.ch-row.out .ch-id b{text-decoration:line-through;text-decoration-color:rgba(217,164,65,.6);text-decoration-thickness:1.5px}
.ch-row.walkin .ch-id b{color:var(--gold2)}
.ch-row.still{cursor:default}
.ch-menu-row{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:13.5px}
.ch-menu-row+.ch-menu-row{border-top:1px solid rgba(255,255,255,.05)}
.ch-menu-row i{flex:1;border-bottom:1px dotted rgba(255,255,255,.14);transform:translateY(-4px)}
.ch-menu-row b{font-size:18px;color:var(--gold2)}