/* Quorum — 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(17,23,34,.92);
  --line:rgba(200,164,92,.18); --line2:rgba(200,164,92,.38);
  --gold:#C8A45C; --gold2:#E8CE93; --golddeep:#8F6F3B;
  --ivory:#F1EBDD; --dim:#98A1B4; --faint:#7B8498;
  --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 is one viewport tall so percentage heights resolve; the body grows past
   it. A gradient on body or html would be sized to that ONE SCREEN and repeat
   down the page (the body's background propagates to the canvas, positioned
   as the root's) - each seam cut the console's blue field off flat, the
   Safari 'blue box' of 2026-09-12. The light fields ride body.grain::before,
   fixed to the viewport; body stays a flat color (tests/web-ground-contract). */
html{height:100%}
/* no word alone on a last line (Max, 2026-09-18): pretty lets the browser pull
   a second word down beside an orphan; a field being typed in keeps plain
   wrapping so words never jump under the caret. The native twin is
   app/src/text.js, which ties the last two words of a sentence (D-COPY-4). */
body{min-height:100dvh;background:var(--ink);color:var(--ivory);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
textarea,[contenteditable]{text-wrap:wrap}
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:16px;color:var(--ivory);outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--line2)}
/* the clear-x inside a text field (Hailey, 2026-08-29): shown only while the
   field holds text - :placeholder-shown does the counting, no JS state. Wrap
   with fldWrap() in app.js; the field needs a placeholder for the count. */
.fld-wrap{position:relative;display:block}
.fld-wrap>input{padding-right:40px}
.fld-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:50%;background:rgba(127,127,127,.18);color:inherit;font-size:13px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fld-wrap>input:not(:placeholder-shown)~.fld-x{display:flex}
/* touch devices: iOS Safari auto-zooms any focused field under 16px — never shrink below it */
@media (pointer:coarse){input,textarea,select{font-size:17px!important}}
/* Every field stays inside its column. iOS Safari sizes date/time inputs from
   their own shadow parts and lets them run wider than the author's width:100% -
   inside a sheet, that one wide field handed the whole body a sideways pan
   (the 2026-08-22 mobile pass). The clamp holds any field to its container; on
   iOS the appearance reset makes a date field obey width like every other
   input, and its value then sits left like every other field's instead of
   centered in the box. min-height keeps the tap target once the native chrome
   (which carried the height) is stripped. */
input,textarea,select{max-width:100%;min-width:0}
@supports (-webkit-touch-callout:none){
  input[type=date],input[type=datetime-local],input[type=time],input[type=month]{
    -webkit-appearance:none;appearance:none;display:block;min-height:44px}
  input::-webkit-date-and-time-value{text-align:left}
}
/* 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}
/* Surfaces that track the driving hand (html[data-input], the admin console)
   quiet the ring while it's the pointer - Safari otherwise marks programmatic
   focus() :focus-visible, so a closed sheet's restored opener glowed gold.
   Any key press flips the attribute back and the outline returns. */
html[data-input="pointer"] :focus-visible{outline:none}
a{color:var(--gold2);text-decoration:none}
.serif{font-family:var(--serif)}
.eb{font-size:13px;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:16.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:15.5px;line-height:24px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:7px} /* 10+24+10 = an exact 44px tap target - the inherited 1.55 line-height computed 43.9999px on one runner (member-peer-pay, 2026-08-16) */
.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)}
/* inline-block + max-width + ellipsis: a chip carries member-entered or
   composed text (a Bench topic, an event deep-link label) - nowrap alone let
   one long chip push the whole page sideways on a 320px Safari (nightly
   WebKit runs 32020200215..32242669383), and a plain-inline span ignores
   max-width, so the cap must blockify the chip to hold everywhere */
.chip{display:inline-block;font-size:12.5px;letter-spacing:.13em;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.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:12.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:12.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:14px;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:15px;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:13px;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:14px;font-weight:700;letter-spacing:.02em}
.run-min{color:var(--faint);font-size:13.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:16px;font-weight:650;line-height:1.35;margin:4px 0 0;text-wrap:pretty}
.run-note{font-size:15px;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:15px;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:12.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:15.5px;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(17,23,34,.72))}
.boardsum p{font-size:17px;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:14px;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:15px;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:13px;color:var(--gold2);
  border:1px solid var(--line2);border-radius:50%;background:rgba(200,164,92,.07)}
.board-row b{font-size:16px;line-height:1.45;font-weight:650;display:block;text-wrap:pretty}
.board-row p{font-size:14.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:15px}
.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:13.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(17,23,34,.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:15px;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:13.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:15.5px;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:14.5px}
.post-place span b{display:block;color:var(--ivory);font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:2px}
.post-place i{font-style:normal;color:var(--gold);font-size:13.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:16.5px}
.av36{width:36px;height:36px;font-size:15px}
.av30{width:30px;height:30px;font-size:14px}
.av24{width:24px;height:24px;font-size:12px}
.av52{width:52px;height:52px;font-size:18px}
.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:16px}
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:14.5px;color:var(--faint);margin-top:2px;line-height:1.45}
/* a sub-less row centers its title against the chevron - no blank line reserved (Max, 2026-09-03) */
.srow .d2:empty{display:none}
.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:16px}
.mrow:last-child{border-bottom:none}
.mrow .ic{color:var(--gold);flex:none;margin-top:1px}
.mrow .k{color:var(--faint);font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.mrow .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.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:15.5px;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:15.5px;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. */
/* The sheet arrives from below the screen edge, fully opaque the whole ride.
   The old entrance faded the panel in while it rose a few px - a panel at
   partial opacity over the page reads as the text behind flashing through the
   sheet before it settles (Max, 2026-08-17). The scrim dims; the sheet slides. */
/* bottom + max-height ride the iOS keyboard curve: fitSheet() pins the sheet
   above the risen keys ONCE per keyboard change, and this glides it there -
   the old untransitioned pin teleported the card (the 2026-09-01 plan-window
   "flash"). The keyboard's own curve, the native sheet lift's exact recipe. */
/* the drop off the screen accelerates the way a dropped sheet does; the
   arrival keeps its decelerating curve. Each state names its own transition,
   so the exit no longer borrows the entrance's ease-out and hangs at the end. */
.sheet{position:fixed;left:50%;transform:translate(-50%,calc(100% + 34px));bottom:0;z-index:130;background:#0D1424;border:1px solid var(--line2);border-bottom:none;border-radius:22px 22px 0 0;transition:transform .28s cubic-bezier(.4,0,.75,.35),bottom .25s cubic-bezier(.38,.7,.125,1),max-height .25s cubic-bezier(.38,.7,.125,1),visibility 0s linear .28s;max-height:88dvh;width:min(560px,100vw);display:flex;flex-direction:column;overflow:hidden;visibility:hidden;pointer-events:none;transform-origin:50% 100%}
.sheet.on{transform:translate(-50%,0);visibility:visible;pointer-events:auto;transition:transform .32s cubic-bezier(.2,.82,.25,1),bottom .25s cubic-bezier(.38,.7,.125,1),max-height .25s cubic-bezier(.38,.7,.125,1),visibility 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:10px 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:15px;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:15.5px;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)}}
/* a framed document says it is on its way (Max, 2026-09-16: "have a loader on
   the documents when you click it... it just sits there stalled until it
   opens"): while its wrapper wears .loading, this note - the spinner and one
   plain line - sits UNDER the iframe or image (the wrapper is positioned, the
   frame above it at z-index 1). An iframe is transparent until its document
   paints, so the note shows through it, the painted page covers it, and the
   load event takes it away; a browser that never fires one for a PDF still
   leaves the document readable. Wired by docFrameLoading() in app.js and
   admin.js; a wrapper that owns no height gives itself one while loading. */
.docload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:var(--pane);color:var(--dim);font-size:14px;letter-spacing:.2px;line-height:1.5}
.docload .spin{width:24px;height:24px}
.docload.failed .spin{display:none}
.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:0;z-index:-1;pointer-events:none;
  /* the fields stand still, sized to the viewport (2026-09-12): Safari draws
     an animated, scaled, oversized layer in tiles and shows their bounds as
     lighter boxes wherever a page leaves the ground bare - the console's
     pipeline desk and record made them plain. The fades end in the same hue
     at zero alpha, never `transparent`, which Safari reads as black. The
     `aurora` keyframes stay for the app's celebration banner. */
  background:
    radial-gradient(42% 34% at 78% 10%,rgba(200,164,92,.055),rgba(200,164,92,0) 70%),
    radial-gradient(54% 46% at 10% 94%,rgba(22,38,74,.5),rgba(22,38,74,0) 72%)}
@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}
/* Feed lens switch — the river below the toggle settles instead of snapping
   (web twin of the native lensShiftPlan: 230ms, 8px, from 55%). renderFeed arms
   .lens-shift on #main for the one paint that IS a lens change; the row itself
   and everything above it hold still. The global reduced-motion kill collapses
   it, and the id in the selector outranks a lingering .ain from the boot cascade. */
.lens-shift #feed-seg~*{animation:lensIn .23s cubic-bezier(.215,.61,.355,1) backwards}
@keyframes lensIn{from{opacity:.55;transform:translateY(8px)}}
/* Messages is one .ch-list wrapper, so the room cascade reaches through it —
   without this the inbox arrived as a single slab and never rose at all */
.navin.navroot>.ch-list{animation:none}
.navin.navroot>.ch-list>*{animation:roomRise .3s cubic-bezier(.2,.85,.3,1) both}
.navin.navroot>.ch-list>*:nth-child(1){animation-delay:.02s}
.navin.navroot>.ch-list>*:nth-child(2){animation-delay:.05s}
.navin.navroot>.ch-list>*:nth-child(3){animation-delay:.08s}
.navin.navroot>.ch-list>*:nth-child(4){animation-delay:.11s}
.navin.navroot>.ch-list>*:nth-child(5){animation-delay:.14s}
.navin.navroot>.ch-list>*:nth-child(6){animation-delay:.17s}
.navin.navroot>.ch-list>*:nth-child(7){animation-delay:.19s}
.navin.navroot>.ch-list>*:nth-child(8){animation-delay:.21s}
.navin.navroot>.ch-list>*:nth-child(n+9){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(17,23,34,.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:19px;line-height:1.3;letter-spacing:-.01em;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:13.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:15.5px;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(17,23,34,.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:15px;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:16px;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:19.5px;color:var(--gold2);min-width:22px;text-align:center}
.ch-row .ch-pos{flex:none;width:24px;font-size:17px;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:16px}
.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:18.5px;color:var(--gold2)}

/* ── the in-app confirm (uic): confirm() rendered in our own chrome. Safari's
   "suppress additional dialogs" checkbox makes the native one return false
   silently - a guarded button reads as dead - so destructive asks stack this
   layer above every sheet AND every viewer (the media lightbox rides at 420;
   a comment's delete asks from inside it, 2026-08-27). Unsaved-work guards
   use the armed second-press toast, not this. */
.uic{position:fixed;inset:0;z-index:440;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
.uic.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.uic-veil{position:absolute;inset:0;background:rgba(3,5,9,.55);backdrop-filter:blur(2px)}
.uic-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);transition:transform .22s cubic-bezier(.2,.82,.25,1);background:#0D1424;border:1px solid var(--line2);border-radius:18px;width:min(400px,calc(100vw - 48px));padding:20px 20px 16px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.uic.on .uic-panel{transform:translate(-50%,-50%) scale(1)}
.uic-msg{font-size:15.5px;line-height:1.55;color:var(--ivory);white-space:pre-line;margin:0 0 18px;overflow-wrap:break-word}
.uic-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.uic-btn{font:inherit;font-size:15px;border:1px solid var(--line);background:none;border-radius:999px;padding:9px 18px;color:var(--dim);cursor:pointer}
.uic-btn.gold{border-color:var(--line2);color:var(--gold2);background:rgba(200,164,92,.08)}
.uic-btn.danger{border-color:rgba(192,96,79,.5);color:#DEA79C;background:rgba(192,96,79,.08)}
.uic-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.uic-btn:disabled{opacity:.45;cursor:default}
/* the console's uiPrompt and uiCopy (web/admin.js) ride the same layer: one
   field under the question - the house input, 16px so an iPhone never zooms
   onto it - and a line under the field for what to fix. With the keyboard up
   (html.kb, the visual-viewport engine's flag) the panel centers in the room
   left above the keys. */
.uic-field{margin:-6px 0 18px}
.uic-input.copy{resize:none;word-break:break-all;line-height:1.45;color:var(--dim)}
.uic-note{margin:8px 2px 0;font-size:13.5px;line-height:1.45;color:#DEA79C}
html.kb .uic-panel{top:calc(50% - var(--keyboard-inset,0px) / 2)}

/* ── Chapter golf: the course book ─────────────────────────────────────────
   Painted club plates behind every card. Layers: .gf-art (the SVG plate,
   absolute, slice-fit) · .gf-scrim (ink gradient that seats the type) ·
   content. Golf-scoped on purpose - the global .chip set stays untouched. */
.gf-card{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--panel);margin-top:12px;isolation:isolate}
.gf-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button.gf-card{cursor:pointer;transition:transform .18s ease,border-color .18s ease}
button.gf-card:active{transform:scale(.985)}
@media(hover:hover){button.gf-card:hover{border-color:var(--line2)}}
.gf-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;object-fit:cover}
.gf-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,rgba(8,11,18,.02) 30%,rgba(8,11,18,.46) 62%,rgba(8,11,18,.86) 100%)}
.gf-in{position:relative;z-index:2;display:block;padding:14px 16px}
.gf-card .gf-in{min-height:148px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.gf-top{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gf-club{font-family:var(--serif);font-size:21px;line-height:1.2;color:var(--ivory);
  text-shadow:0 1px 4px rgba(8,11,18,.95),0 2px 18px rgba(8,11,18,.75)}
.gf-when{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-top:2px;
  text-shadow:0 1px 3px rgba(8,11,18,.9)}
.gf-sub{font-size:13.5px;color:#C4CBD9;text-shadow:0 1px 3px rgba(8,11,18,.85)}
.gf-hostrow{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14.5px;color:var(--dim)}
.gf-hostrow img,.gf-hostrow .av30{flex:none}
/* the feed's golf card: the golf page's card riding the stream, its kicker on the art.
   The photo sits dimmer here and the scrim runs deeper (Max, 2026-09-03: "hard to
   see some of the text with the background at full brightness") */
.gf-feedcard{margin:10px 0}
.gf-feedcard img.gf-art{opacity:.72}
.gf-feedcard .gf-scrim{background:linear-gradient(178deg,rgba(8,11,18,.22) 0%,rgba(8,11,18,.6) 55%,rgba(8,11,18,.92) 100%)}
.gf-sched{margin:8px 0}
/* the schedule's golf photo sits ~15% dimmer (Max, 2026-08-23: "the golf ones
   are a bit too bright") - the painted SVG plates keep their full ink */
.gf-sched img.gf-art{opacity:.85}
.gf-feedk{position:absolute;top:12px;left:16px;z-index:3;display:flex;gap:10px;align-items:baseline;max-width:60%}
.gf-feedk .eb{color:var(--gold2);text-shadow:0 1px 3px rgba(8,11,18,.9);white-space:nowrap}
.gf-feedk .t{color:#C4CBD9;font-size:12.5px;text-shadow:0 1px 3px rgba(8,11,18,.85)}
/* a freshly posted round or ask arrives like a tee shot landing: the card
   rises and settles while its art sweeps into place (Max, 2026-08-19 -
   "beautiful animations... the post goes in the background"). Used by the
   golf page's optimistic _pending cards; falls back to nothing under
   reduced motion. */
.gf-land{animation:gfLand .6s cubic-bezier(.18,.9,.24,1) backwards}
.gf-land .gf-art{animation:gfArtSweep .9s cubic-bezier(.16,.84,.3,1) backwards}
.gf-land .gf-in,.gf-land .gf-top{animation:gfInkSettle .5s .18s cubic-bezier(.2,.85,.3,1) backwards}
@keyframes gfLand{0%{opacity:0;transform:translateY(14px) scale(.97)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes gfArtSweep{0%{transform:scale(1.08) translateY(-4px)}100%{transform:scale(1) translateY(0)}}
@keyframes gfInkSettle{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.gf-land,.gf-land .gf-art,.gf-land .gf-in,.gf-land .gf-top{animation:none}}
/* the golf chip set - quieter and finer than the global chips */
.gchip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  padding:4px 9px 3px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);
  color:var(--dim);background:rgba(8,11,18,.55);backdrop-filter:none}
.gchip.gold{color:var(--gold2);border-color:var(--line2);background:rgba(200,164,92,.16)}
.gchip.go{color:#A9DDBE;border-color:rgba(95,165,124,.45);background:rgba(24,46,34,.72)}
.gchip.tbd{color:#EBC98A;border-color:rgba(217,164,65,.4);background:rgba(46,36,18,.72)}
.gchip.mute{color:var(--faint);background:rgba(8,11,18,.55)}
.gchip.ypo{color:#A9C2E4;border-color:rgba(140,175,225,.35);background:rgba(20,30,50,.72)}
/* asks: the person leads, the wanted courses ride behind glass */
.gf-ask{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--panel);margin-top:12px;isolation:isolate}
.gf-ask .gf-scrim{background:linear-gradient(92deg,rgba(8,11,18,.94) 38%,rgba(8,11,18,.78) 68%,rgba(8,11,18,.34) 100%)}
.gf-ask .gf-in{display:flex;gap:12px;align-items:center;padding:14px 15px}
.gf-ask-acts{position:relative;z-index:2;display:flex;gap:10px;justify-content:flex-start;
  padding:0 15px 13px;margin-top:-2px}
/* setup tiles: the course book laid out as big art rows */
.gf-tile{position:relative;display:flex;width:100%;text-align:left;border:1px solid var(--line);
  border-radius:15px;overflow:hidden;background:var(--panel);margin-top:9px;isolation:isolate;
  transition:border-color .22s ease,transform .18s ease}
.gf-tile:active{transform:scale(.985)}
.gf-tile.on{border-color:var(--line2)}
.gf-tile .gf-scrim{background:linear-gradient(92deg,rgba(8,11,18,.92) 22%,rgba(8,11,18,.55) 58%,rgba(8,11,18,.10) 100%);
  transition:opacity .3s ease}
.gf-tile.on .gf-scrim{opacity:.85}
.gf-tile .gf-art{transition:filter .3s ease}
.gf-tile.on .gf-art{filter:saturate(1.18) brightness(1.14)}
.gf-tile .gf-in{display:flex;gap:12px;align-items:center;width:100%;padding:15px 14px;min-height:74px}
.gf-tile-name{font-family:var(--serif);font-size:17.5px;color:var(--ivory);line-height:1.25;
  text-shadow:0 1px 3px rgba(8,11,18,.9),0 0 16px rgba(8,11,18,.65)}
.gf-tile-sub{font-size:13px;color:#C4CBD9;margin-top:2px;
  text-shadow:0 1px 3px rgba(8,11,18,.9),0 0 12px rgba(8,11,18,.6)}
.gf-tile .cbx{background:rgba(8,11,18,.5);border-color:rgba(241,235,221,.65)}
.gf-tile .cbx.on{background:linear-gradient(140deg,#E3C57F,#AE8A44);border-color:transparent}
.gf-tile .cbx{flex:none;margin-left:auto}
.gf-tile.on .cbx{animation:gfPop .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes gfPop{0%{transform:scale(.6)}62%{transform:scale(1.12)}100%{transform:scale(1)}}
/* the hosting row breathes open once the first club is checked */
.gf-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .42s ease,opacity .34s ease .06s}
.gf-reveal.open{max-height:220px;opacity:1}
/* the round page hero */
.gf-hero{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--panel);margin-top:10px;isolation:isolate}
.gf-hero .gf-in{min-height:188px;display:flex;flex-direction:column;justify-content:flex-end}
.gf-hero .gf-club{font-size:26px}
/* the first-open overview */
.gf-steps{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.gf-step{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;background:var(--panel)}
.gf-step-n{flex:none;width:30px;height:30px;border-radius:999px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;color:var(--gold2)}
/* the round-day card (D-GOLF-7): the golf room's morning, above the wall and
   the thread, and the same card on the round page. Quiet by construction -
   the panel the thread's cards wear, the eyebrow, the one fact, the faces
   with their arrival dots, two pills and a dim Directions. design/golf-room-0917 */
.gd{margin:6px 0 0;padding:13px 15px 12px;background:var(--panel);border:1px solid rgba(200,164,92,.18);border-radius:16px;position:relative}
.gd-eb{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-eb svg{flex:none}
.gd-eb i{width:5px;height:5px;border-radius:50%;background:var(--green);flex:none;animation:gdLive 2s ease-in-out infinite}
@keyframes gdLive{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.gd-eb i{animation:none}}
.gd-top{display:flex;align-items:baseline;gap:12px;margin-top:5px}
.gd-tee{font-family:var(--serif);font-size:22px;line-height:1.15;color:var(--ivory);flex:1;min-width:0}
.gd-wx{font-size:13px;color:var(--dim);white-space:nowrap}
.gd-leave{font-size:14px;color:var(--dim);margin-top:3px;line-height:1.4}.gd-leave b{color:var(--gold2);font-weight:600}
.gd-note{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--dim);margin-top:6px;line-height:1.4}
.gd-faces{display:flex;align-items:center;gap:6px;margin-top:10px}
.gd-face{position:relative;display:inline-grid;flex:none}
.gd-face i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--panel)}
.gd-face i.otw{background:var(--gold2)}.gd-face i.here{background:var(--green)}
.gd-count{font-size:13px;color:var(--faint);margin-left:4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-acts{display:flex;align-items:center;gap:8px;margin-top:11px}
.gd-dir{margin-left:auto;font-size:13px;color:var(--dim);display:inline-flex;gap:5px;align-items:center;white-space:nowrap;text-decoration:none}
.gd-done{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#A9DDBE;font-weight:600}
/* the groups card in the room (D-GOLF-6) and on the round page */
.ch-pair{width:284px}
.ch-pairhd{padding:13px 14px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.ch-pairhd .eb{font-size:10.5px;letter-spacing:.16em}
.ch-pairhd b{display:block;font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.22;margin-top:4px;color:var(--ivory)}
.ch-pairhd .faint{font-size:12.5px;margin-top:2px;display:block}
.ch-pairrows{padding:10px 14px 4px;display:flex;flex-direction:column;gap:9px}
.ch-pairrow{display:flex;gap:10px;align-items:baseline}
.ch-pairrow .t{flex:none;width:64px;font-size:13px;color:var(--gold2);font-weight:600;white-space:nowrap}
.ch-pairrow .t.bare{width:auto}
.ch-pairrow .n{font-size:14px;color:var(--ivory);line-height:1.35;min-width:0}
.ch-pairft{padding:8px 14px 12px;font-size:13px;color:var(--dim)}.ch-pairft b{color:var(--gold2);font-weight:600}
/* the deal, in the host's sheet */
.gp-group{margin-top:9px;padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.03)}
.gp-group .hd2{display:flex;align-items:baseline;gap:8px}
.gp-group .hd2 .eb{font-size:11px;letter-spacing:.16em}
.gp-group .hd2 .tm{font-size:13px;color:var(--gold2);font-weight:600}
.gp-group .hd2 .avg{margin-left:auto;font-size:12.5px;color:var(--faint)}
.gp-names{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:9px}
.gp-name{display:inline-flex;align-items:center;gap:7px;font-size:14.5px}
.gp-name b{color:var(--gold2);font-weight:500}
/* the tee sheet's watch row (D-GOLF-5) */
.gw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.gw-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:13.5px;color:var(--ivory)}
.gw-chip button{color:var(--faint);font-size:16px;line-height:1;padding:0 2px}
.gw-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gw-pick button{padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--dim);font-size:14px;min-height:36px}
.gw-pick button.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600}
.gf-demo{pointer-events:none;opacity:.86}
/* the handicap slider: a golf ball on a fairway rail, the level that answers
   as it rolls, and the number between a - and a + (Max, 2026-09-16). Left is
   a +5 golfer; the far right is 40, the first-time end. */
.gf-rate{text-align:center;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:2px 6px 10px}
.gf-rate-title{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--gold2)}
.gf-rate-line{font-size:14px;color:var(--dim)}
.gf-rate.pop .gf-rate-title{animation:gfRate .38s cubic-bezier(.2,1.5,.4,1)}
@keyframes gfRate{0%{transform:scale(.92);opacity:.4}100%{transform:scale(1);opacity:1}}
input[type=range].gf-skill{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;padding:0;border:none;margin:0;cursor:pointer}
input[type=range].gf-skill::-webkit-slider-runnable-track{height:9px;border-radius:99px;
  background:linear-gradient(90deg,#E3C57F 6%,#7FB894 22%,#5FA57C 43%,#C9A45C 73%,#D9A441 96%);
  border:1px solid rgba(8,11,18,.55);box-shadow:inset 0 1px 3px rgba(8,11,18,.55)}
input[type=range].gf-skill::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:99px;
  margin-top:-11.5px;border:1px solid rgba(8,11,18,.35);
  background:radial-gradient(circle at 62% 58%,rgba(8,11,18,.14) 0 2.5px,transparent 3px),radial-gradient(circle at 46% 68%,rgba(8,11,18,.12) 0 2px,transparent 2.6px),radial-gradient(circle at 34% 30%,#FFF 0 18%,#EDEAE2 42%,#C9C4B6 78%,#A8A396 100%);
  box-shadow:0 2px 8px rgba(8,11,18,.6),inset -2px -3px 6px rgba(8,11,18,.18);transition:transform .15s ease}
input[type=range].gf-skill:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range].gf-skill:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:99px}
.gf-hcp-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 2px}
.gf-hcp-step{width:38px;height:38px;border-radius:19px;border:1px solid var(--line2);background:rgba(200,164,92,.10);color:var(--gold2);font-size:22px;line-height:1;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.gf-hcp-step:active{background:rgba(200,164,92,.22)}
.gf-hcp-number{font-size:40px;line-height:46px;min-width:74px;text-align:center;color:var(--ivory)}
.gf-hcp-unset .gf-hcp-number{color:var(--faint);opacity:.6}
.gf-hcp-unset input[type=range].gf-skill::-webkit-slider-thumb{opacity:.5}
.gf-hcp-marks{position:relative;height:16px;margin-top:1px;font-size:11px;letter-spacing:.06em;color:var(--faint);font-variant-numeric:tabular-nums}
.gf-hcp-marks span{position:absolute;top:0;width:32px;margin-left:-16px;text-align:center}
/* the handicap board: the fairway, the level pills, the pick, the near-you chips */
.gf-board{padding:14px 0}
.gf-board-line{font-size:17px;line-height:1.4;margin:0 16px;color:var(--ivory)}
.gf-board-line b{color:var(--gold2);font-weight:500}
.gf-board-sub{font-size:13px;margin:2px 16px 0}
.gf-board-svgwrap{margin:10px 2px 0}
.gf-board-svg{display:block;width:100%;height:auto;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.gf-board-levels{display:flex;flex-wrap:wrap;gap:6px;margin:8px 14px 0}
/* the handicap sheet (D-GOLF-4, 2026-09-17): the pad at the sheet's size, the
   trail the ball rolled in on, the ghost ball breathing until the first
   touch, and the line under the pad that says where the number would sit */
.gf-hcp-big .gf-hcp-row{gap:22px;margin:2px 0 4px}
.gf-hcp-big .gf-hcp-step{width:44px;height:44px;border-radius:22px;font-size:24px}
.gf-hcp-big .gf-hcp-number{font-size:58px;line-height:64px;min-width:96px;letter-spacing:-.01em}
.gf-hcp-rail{position:relative}
.gf-hcp-trail{position:absolute;left:15px;top:14.5px;height:5px;border-radius:99px;background:rgba(241,235,221,.22);pointer-events:none;width:0}
.gf-hcp-unset .gf-hcp-trail{display:none}
.gf-hcp-unset input[type=range].gf-skill::-webkit-slider-thumb{animation:gfBreathe 2.2s ease-in-out infinite}
@keyframes gfBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.gf-hcp-seat{margin-top:12px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.055)}
.gf-seat-line{font-size:16.5px;line-height:1.35;color:var(--ivory)}
.gf-seat-line b{color:var(--gold2);font-weight:500}
.gf-seat-near{margin-top:8px}
.gf-hcp-off{display:block;margin:10px auto 0;padding:6px 8px;font-size:13px;color:var(--faint)}
/* the GHIN link (D-GOLF-9): the reading that stands in for the pad while the
   link holds, and the card under the pad that takes the number */
.gf-ghin-index{font-size:58px;line-height:64px;text-align:center;color:var(--ivory);letter-spacing:-.01em;margin:2px 0 4px}
.gf-ghin-sub{text-align:center;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold2)}
.gf-ghin-who{text-align:center;font-size:14px;color:var(--dim);margin-top:4px}
.gf-ghin-err{text-align:center;font-size:13px;color:var(--amber);margin:8px 0 0}
.gf-ghin{margin-top:16px;padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.gf-ghin-p{font-size:14px;line-height:1.45;color:var(--dim);margin:4px 0 10px}
.gf-ghin-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gf-ghin-row input{flex:1;min-width:0}
.gf-ghin-row .btn{flex:none}
/* the first-ball card: a member off the board, the ball on its tee wearing
   the chapter's mark, one line, one gold door */
.gf-firstball{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(95,165,124,.22),rgba(17,23,34,.96) 62%);margin-top:12px;display:flex;gap:14px;align-items:center;padding:16px}
.gf-fb-art{flex:none;width:88px;height:102px;position:relative;display:block}
.gf-fb-art>svg{position:absolute;left:0;top:0}
.gf-fb-ball{position:absolute;inset:0;display:block;animation:gfBob 3s ease-in-out infinite}
.gf-fb-ball>svg{position:absolute;left:0;top:0}
.gf-fb-mark{position:absolute;left:32.5px;top:29px;width:23px;height:20px;display:block;line-height:0}
@keyframes gfBob{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.gf-fb-s{font-size:15px;color:var(--ivory);line-height:1.4}
.gf-firstball .btn{margin-top:12px;min-height:44px;padding:11px 14px;font-size:16px}
/* the first-join walkthrough: the pips, the stage that slides between steps */
.gw-pips{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.gw-pips i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.gw-pips i.on{background:var(--gold2);box-shadow:0 0 8px rgba(232,206,147,.6)}
.gw-pips span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-left:6px}
.gw-lead{font-size:14.5px;line-height:1.5;color:var(--dim);margin:0 0 10px}
.gw-stage{transition:opacity .14s ease,transform .14s ease}
.gw-stage.gw-out{opacity:0;transform:translateX(-28px)}
.gw-stage.gw-in{animation:gwIn .28s cubic-bezier(.2,.85,.3,1)}
@keyframes gwIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .gf-hcp-unset input[type=range].gf-skill::-webkit-slider-thumb,.gf-fb-ball,.gw-stage.gw-in{animation:none}
  .gw-stage{transition:none}
}
.gf-board-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--white12,rgba(255,255,255,.12));background:none;color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.1em;font-family:inherit;cursor:pointer}
.gf-board-pill i{width:7px;height:7px;border-radius:4px;background:var(--tint)}
.gf-board-pill.none{color:var(--faint)}.gf-board-pill.none i{opacity:.35}
.gf-board-pill.on{border-color:var(--tint);background:rgba(200,164,92,.14);color:var(--gold2)}
.gf-board-pick{margin:10px 16px 0;border-top:1px solid var(--hairline,rgba(255,255,255,.055));padding-top:8px}
.gf-board-pickhead{display:flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--dim)}
.gf-board-pickhead .ch-link{margin-left:auto;font-weight:500;color:var(--faint);font-size:13px}
.gf-board-row{display:flex;align-items:center;gap:10px;padding:7px 0;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.gf-board-row .av30{flex:none}
.gf-board-name{flex:1;min-width:0;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-board-name.me{font-weight:700}
.gf-board-num{font-size:17px;color:var(--gold2)}
.gf-board-near{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gf-board-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px;border:1px solid var(--white12,rgba(255,255,255,.12));background:rgba(255,255,255,.04);color:var(--ivory);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.gf-board-chip b{color:var(--gold2);font-weight:500;font-size:14.5px}
.av26{width:26px;height:26px;font-size:12px}
.gchip.skill{color:#D8CBAE;border-color:rgba(216,203,174,.3);background:rgba(30,28,20,.6)}
@media (prefers-reduced-motion:reduce){
  .gf-tile.on .cbx{animation:none}
  .gf-reveal{transition:none}
  button.gf-card,.gf-tile{transition:none}
  .gf-rate.pop .gf-rate-title{animation:none}
}

/* ---- Groups: messaging (web/chat.js, D-CHAT-1) ---- */
.chip.tide{color:#9FD0CC;background:rgba(94,143,139,.16);border:1px solid rgba(94,143,139,.45)}
.av22{width:22px;height:22px;font-size:9px;border:2px solid var(--ink)}
.av40{width:40px;height:40px;font-size:15px}
.av50{width:50px;height:50px;font-size:17px}
.tb .tbn{position:absolute;top:5px;left:calc(50% + 4px);min-width:17px;height:17px;border-radius:9px;background:var(--gold2);color:#161005;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--ink);letter-spacing:0}
@media (min-width:880px){.tb .tbn{position:static;margin-left:6px;border:0}}
.ch-list{padding:4px 0 24px}
.ch-row{display:flex;align-items:center;gap:13px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.055);width:100%;text-align:left}
.ch-row:last-child{border-bottom:0}
.ch-mid{flex:1;min-width:0;display:block}
.ch-nm{font-family:var(--serif);font-size:17.5px;line-height:1.2;color:var(--ivory);display:flex;align-items:center;gap:7px}
.ch-nm .ch-t{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.ch-nm .ch-t.new{color:var(--gold2)}
/* the name owns its line; the clock rides the preview line (2026-08-26) */
.ch-nmx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-pvx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-pv .ch-t{font-family:var(--sans);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none;margin-left:auto;padding-left:6px}
.ch-pv .ch-t.new{color:var(--gold2)}
.ch-pv{font-size:13.5px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:6px;align-items:center}
.ch-pv b{color:var(--ivory);font-weight:500}
.ch-mute{width:13px;height:13px;color:var(--faint);flex:none}
.ch-cnt{min-width:22px;height:22px;border-radius:11px;background:var(--gold2);color:#161005;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px;flex:none;font-variant-numeric:tabular-nums}
.ch-cnt.quiet{background:rgba(255,255,255,.12);color:var(--dim)}
.ch-chev{color:var(--faint);font-size:18px}
.ch-tile{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none;border:1px solid var(--line);color:var(--gold2);background:linear-gradient(160deg,rgba(200,164,92,.16),rgba(16,24,40,.9))}
/* swipe left on an inbox row (Max, 2026-09-15): Archive and Delete on a
   direct message, Leave on a group, and a tap on one asks first. Touch only
   (web/chat.js chatRowSwipe*); the room's page carries the same rows for a
   pointer. One number drives both halves - --ch-x is the row's travel, and
   the tile strip sits at --ch-w + --ch-x, glued to the row's trailing edge,
   so the tiles ride out of the right edge as the row leaves and ride back in
   as it returns. The wrapper clips; the row carries its own hairline and an
   opaque ground for as long as it is off its seat - the whole slide home
   included, or the clock would read through onto the tiles. */
.ch-swipe{position:relative;overflow:hidden;margin-inline:calc(var(--ch-bleed,0px) * -1)}
/* the row and its tiles both bleed to the page's own edge, so the tiles run
   to it the way Mail's and Messages' do and the row's ground meets them with
   no seam; the row wears main's padding back, so its content and its hairline
   sit exactly where they always did. The desktop rail is a pointer surface,
   never swiped, and keeps the 0 default. */
.ch-list{--ch-bleed:16px}
@media (min-width:880px){.ch-list{--ch-bleed:8px}}
@media (min-width:1280px){.ch-list{--ch-bleed:40px}}
.ch-swipe>.ch-row{position:relative;z-index:1;border-bottom:0;border-radius:0;padding-inline:calc(2px + var(--ch-bleed,0px));transform:translateX(calc(var(--ch-x,0) * 1px));transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ch-swipe>.ch-row::after{content:"";position:absolute;left:var(--ch-bleed,0px);right:var(--ch-bleed,0px);bottom:0;height:1px;background:rgba(255,255,255,.055)}
.ch-swipe:last-child>.ch-row::after{display:none}
/* the desktop rail deals its rooms as pill cards with no dividers - its
   swipeable rows kept the hairline the wrapper used to carry (#1844) */
.ch-rail .ch-swipe>.ch-row::after{display:none}
.ch-swipe.ch-swipe-live>.ch-row{background:var(--ch-ground,var(--ink));will-change:transform}
.ch-swipe.ch-swipe-drag>.ch-row,.ch-swipe.ch-swipe-drag .ch-swipe-acts{transition:none}
.ch-rail{--ch-ground:#0A0F1A}
.ch-swipe-acts{position:absolute;top:0;right:0;bottom:0;display:flex;z-index:0;visibility:hidden;transform:translateX(calc((var(--ch-w,0) + var(--ch-x,0)) * 1px));transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ch-swipe.ch-swipe-live .ch-swipe-acts{visibility:visible;will-change:transform}
/* the sliver the give opens at the right edge wears the last tile's colour -
   the last action is Delete or Leave, so it is always the red */
.ch-swipe-acts::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:46px;background:var(--red)}
.ch-swipe-act{width:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#fff;border:none;border-radius:0}
.ch-swipe-act svg{width:20px;height:20px}
.ch-swipe-act.archive{background:#3C5A7A}
.ch-swipe-act.delete,.ch-swipe-act.leave{background:var(--red)}
body.shore .ch-swipe>.ch-row::after{background:rgba(22,50,74,.1)}
body.shore .ch-swipe-act.archive{background:#5E8F8B}
@media (prefers-reduced-motion: reduce){.ch-swipe>.ch-row,.ch-swipe-acts{transition-duration:.01ms}}
.ch-tile svg{width:24px;height:24px}
.ch-tile.sm{width:40px;height:40px;border-radius:12px}.ch-tile.sm svg{width:19px;height:19px}
.ch-tile.lg{width:72px;height:72px;border-radius:22px;margin:0 auto}.ch-tile.lg svg{width:34px;height:34px}
.ch-tile.plus{background:rgba(255,255,255,.04)}
.ch-tile.ann,.ch-tile.announcements{background:linear-gradient(160deg,rgba(227,197,127,.28),rgba(143,111,59,.22))}
.ch-tile.golf{background:linear-gradient(160deg,rgba(95,165,124,.22),rgba(16,24,40,.9))}
.ch-tile.kids{background:linear-gradient(160deg,rgba(110,150,205,.22),rgba(16,24,40,.9))}
.ch-tile.deals{background:linear-gradient(160deg,rgba(200,164,92,.22),rgba(16,24,40,.9))}
.ch-tile.health{background:linear-gradient(160deg,rgba(192,96,79,.22),rgba(16,24,40,.9))}
.ch-tile.travel{background:linear-gradient(160deg,rgba(94,143,139,.24),rgba(16,24,40,.9))}
.ch-tile.funny{background:linear-gradient(160deg,rgba(217,164,65,.24),rgba(16,24,40,.9))}
.ch-tile.office,.ch-tile.forum{background:linear-gradient(160deg,rgba(139,110,199,.2),rgba(16,24,40,.9))}
.ch-tile.event{background:linear-gradient(160deg,rgba(110,150,205,.18),rgba(16,24,40,.9))}
.ch-tile.wine{background:linear-gradient(160deg,rgba(154,78,110,.26),rgba(16,24,40,.9))}
.ch-tile.home{background:linear-gradient(160deg,rgba(122,158,120,.24),rgba(16,24,40,.9))}
.ch-tile.tech{background:linear-gradient(160deg,rgba(96,134,188,.24),rgba(16,24,40,.9))}
.ch-tile.heart{background:linear-gradient(160deg,rgba(198,106,120,.24),rgba(16,24,40,.9))}
.ch-tile.star{background:linear-gradient(160deg,rgba(214,178,86,.26),rgba(16,24,40,.9))}
.ch-tile.trade{background:linear-gradient(160deg,rgba(214,178,86,.26),rgba(16,24,40,.9))}
.ch-tile.tennis{background:linear-gradient(160deg,rgba(150,190,70,.24),rgba(16,24,40,.9))}
.ch-tile.pickleball{background:linear-gradient(160deg,rgba(196,200,86,.22),rgba(16,24,40,.9))}
.ch-tile.sailing{background:linear-gradient(160deg,rgba(80,140,200,.24),rgba(16,24,40,.9))}
.ch-tile.cycling{background:linear-gradient(160deg,rgba(210,130,60,.24),rgba(16,24,40,.9))}
.ch-tile.running{background:linear-gradient(160deg,rgba(215,105,80,.24),rgba(16,24,40,.9))}
.ch-tile.ski{background:linear-gradient(160deg,rgba(140,190,225,.24),rgba(16,24,40,.9))}
.ch-tile.surf{background:linear-gradient(160deg,rgba(70,170,170,.24),rgba(16,24,40,.9))}
.ch-tile.hiking{background:linear-gradient(160deg,rgba(90,150,95,.24),rgba(16,24,40,.9))}
.ch-tile.fitness{background:linear-gradient(160deg,rgba(200,90,70,.24),rgba(16,24,40,.9))}
.ch-tile.dining{background:linear-gradient(160deg,rgba(214,168,86,.24),rgba(16,24,40,.9))}
.ch-tile.cocktails{background:linear-gradient(160deg,rgba(190,90,140,.24),rgba(16,24,40,.9))}
.ch-tile.coffee{background:linear-gradient(160deg,rgba(160,110,70,.26),rgba(16,24,40,.9))}
.ch-tile.books{background:linear-gradient(160deg,rgba(160,80,90,.24),rgba(16,24,40,.9))}
.ch-tile.film{background:linear-gradient(160deg,rgba(120,130,160,.24),rgba(16,24,40,.9))}
.ch-tile.music{background:linear-gradient(160deg,rgba(150,110,210,.24),rgba(16,24,40,.9))}
.ch-tile.art{background:linear-gradient(160deg,rgba(210,120,150,.24),rgba(16,24,40,.9))}
.ch-tile.cars{background:linear-gradient(160deg,rgba(110,140,170,.24),rgba(16,24,40,.9))}
.ch-tile.flying{background:linear-gradient(160deg,rgba(100,160,215,.24),rgba(16,24,40,.9))}
.ch-tile.markets{background:linear-gradient(160deg,rgba(90,170,120,.24),rgba(16,24,40,.9))}
.ch-tile.dogs{background:linear-gradient(160deg,rgba(200,150,90,.24),rgba(16,24,40,.9))}
.ch-link{font-size:13.5px;color:var(--gold2);font-weight:600}
.ch-gcard{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.055);align-items:flex-start}
.ch-gcard:last-child{border-bottom:0}
.ch-gmain{display:flex;gap:13px;flex:1;min-width:0;text-align:left;align-items:flex-start}
.ch-gnm{font-family:var(--serif);font-size:19px;line-height:1.15;display:block;color:var(--ivory)}
.ch-gtag{font-size:13.5px;color:var(--dim);margin-top:2px;line-height:1.35;display:block}
.ch-gmeta{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.ch-gact{flex:none;padding-top:4px}
.ch-stack{display:inline-flex}.ch-stack .av{margin-left:-7px}.ch-stack .av:first-child{margin-left:0}
.cbtn.done{color:#9CD1B2;border-color:rgba(95,165,124,.35)}
.ch-hdname{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;text-align:left;margin-right:6px}
/* the group header's audience pills - who reads this room (Max, 2026-08-26). The header's own second row
   (Max, 2026-09-19: three pills broke onto two lines in the name's narrow column): it starts at the name's
   left edge - past the back button and the tile - and runs to the far gutter. The fixed header measures
   itself (--hd-h), so the extra line just fits */
.hd:has(>.ch-hdaud){flex-wrap:wrap;row-gap:5px}
.ch-hdaud{display:flex;gap:4px;flex:0 0 100%;box-sizing:border-box;padding-left:var(--ch-hdaud-in,100px);flex-wrap:wrap}
.ch-hdaud .chip{line-height:17px}
.ch-seg{display:flex;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:3px;gap:3px;flex:none}
.ch-seg button{height:30px;padding:0 12px;border-radius:9px;font-size:13px;color:var(--dim);font-weight:500;white-space:nowrap}
.ch-seg button.on{background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600;border:1px solid var(--line2)}
.ch-seg.wide{margin-top:4px}.ch-seg.wide button{flex:1;height:34px}
.ch-thread{padding:6px 0 10px;min-height:50vh}
.ch-more{display:block;margin:6px auto 10px;font-size:13px;color:var(--gold2);padding:6px 12px;border:1px solid var(--line);border-radius:14px}
.ch-day{text-align:center;margin:14px 0 10px}
.ch-day span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.055);padding:3px 10px;border-radius:10px;font-weight:600}
/* who can see a forum chat (2026-09-11): the line under the title, the standing line at the top of the conversation, the sheet's mark and faces */
.ch-who{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:12.5px;font-weight:600;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-who svg{flex:none}
.ch-who>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the who-notice at the top of a covered conversation (D-CHAT-24 and the
   forum rooms before it) - its own class: .ch-notice is the in-app message
   banner below (fixed, top-center), whose rule pulled this card out of the
   flow for as long as the two shared a name */
.ch-whonotice{display:flex;gap:9px;align-items:flex-start;margin:8px auto 4px;max-width:340px;padding:9px 13px;border-radius:14px;background:rgba(200,164,92,.07);border:1px solid rgba(200,164,92,.22);font-size:13px;line-height:1.45;color:var(--dim)}
.ch-whonotice svg{flex:none;margin-top:2px;color:var(--gold)}
.ch-whonotice b{color:var(--gold2);font-weight:600}
/* end-to-end encrypted chats (D-ENCRYPT-1, D-ENCRYPT-3; design/encrypted-chats): a line this device cannot
   show wears the boards' dashed bubble - waiting for its key (it fills in on its own) or failed its check -
   and, in a browser that holds no keys, one card stands where the composer would. Nothing here is an alarm. */
.ch-bub.ch-e2w{background:transparent;border:1px dashed var(--line2);color:var(--faint);font-size:14px;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.ch-bub.ch-e2w svg{flex:none;margin-top:2px;color:var(--faint)}
.ch-bub.ch-e2w b{display:block;color:var(--dim);font-weight:600;font-size:13px;margin-bottom:1px}
/* a sealed photo or poster while this browser opens it, and one it could not open (phase E3): the frame
   holds its declared shape on a quiet ground instead of a broken-image mark */
img[data-sealing],img[data-sealed-failed]{background:rgba(255,255,255,.05);min-height:96px}
img[data-sealed-failed]{opacity:.5}
/* the security code's twelve groups of five: three rows of four, set in tabular figures so both devices read alike */
.ch-code{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;text-align:center;font-size:17px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ivory)}
.ch-code>span{padding:7px 0;border-radius:10px;background:rgba(255,255,255,.045)}
.ch-e2prog{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.ch-e2prog>svg{flex:none;margin-top:2px;color:var(--gold)}
.ch-e2lock{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.ch-e2lock-t{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.ch-e2lock-t>svg{flex:none;margin-top:2px;color:var(--gold)}
.ch-e2lock-t b{display:block;color:var(--ivory);font-size:15px;margin-bottom:2px}
.ch-privacy-lock{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;color:var(--dim)}
.ch-e2lk{color:var(--gold);opacity:.9}
.enc-act{flex:none;min-height:44px;padding:0 2px 0 10px;background:none;border:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--gold2);cursor:pointer}
.enc-qr{display:inline-grid;place-items:center;background:#fff;border-radius:16px;padding:10px;min-width:240px;min-height:240px;box-sizing:border-box}
.enc-steps{text-align:left;margin:16px auto 0;max-width:330px;padding-left:22px;font-size:15px;line-height:1.6;color:var(--dim)}
.enc-steps b{color:var(--ivory);font-weight:600}
.enc-code{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px}
.enc-code span{text-align:center;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:17px;letter-spacing:.1em;font-variant-numeric:tabular-nums;line-height:2;border:1px solid var(--line2);border-radius:8px;color:var(--ivory)}
.ch-whomark{position:relative;display:inline-grid;place-items:center;flex:none}
.ch-whomark-lock{position:absolute;right:-2px;bottom:-2px;width:46%;height:46%;border-radius:50%;background:#0D1424;border:1px solid var(--line2);display:grid;place-items:center}
.ch-who-rows{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 10px}
.ch-who-faces{display:flex;flex-wrap:nowrap;justify-content:center}
.ch-who-cell{position:relative;flex:none;width:var(--sz,34px);height:var(--sz,34px);border-radius:50%;box-shadow:0 0 0 2px #0D1424}
.ch-who-cell+.ch-who-cell{margin-left:calc(var(--step,24px) - var(--sz,34px))}
.ch-who-cell .av{width:100%;height:100%;font-size:calc(var(--sz,34px) * .38)}
.ch-who-cell.more{display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--dim);font-size:calc(var(--sz,34px) * .34);font-weight:600}
.ch-sys{text-align:center;font-size:12.5px;color:var(--faint);margin:10px 24px;line-height:1.4}
/* the office's actionable notice: a pointer hand on desks, no text-selection
   fight with a phone's press (D-CHAT-6) */
.ch-sys.act{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ch-sys.act:hover{color:var(--dim)}
/* room memories - the rooms' one-year-ago keepsake card (Max, 2026-08-26) */
.ch-throw{margin:12px 18px}
.ch-throwc{max-width:340px;margin:0 auto;padding:12px 15px;border:1px solid var(--line2);border-left:2px solid var(--gold);border-radius:14px;background:linear-gradient(180deg,rgba(200,164,92,.07),rgba(200,164,92,.02)),var(--pane)}
.ch-throwc .eb{letter-spacing:.22em}
.ch-throwline{font-size:15.5px;line-height:1.5;margin-top:5px}
.ch-throwimg{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:10px;margin-top:9px;cursor:zoom-in}
.ch-throwart{margin-top:9px;border-radius:10px;overflow:hidden}
.ch-m{display:flex;gap:8px;margin-top:10px;align-items:flex-end;max-width:100%;position:relative;touch-action:pan-y}
/* swipe to reply (web/chat.js): the row rides the finger; the reply mark waits in the band it leaves, counter-moved so it stays put */
.ch-m.ch-swiping{transition:none}
.ch-m.ch-swipe-home{transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.ch-m::before{content:"";position:absolute;left:4px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:14px;box-sizing:border-box;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8CE93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17l-5-5 5-5M4 12h10a6 6 0 0 1 6 6v1'/></svg>") center/15px no-repeat;opacity:var(--ch-swipe,0);transform:translateX(calc(var(--ch-dx,0) * -1px)) scale(calc(.6 + .4 * var(--ch-swipe,0)));pointer-events:none}
.ch-m.ch-swipe-armed::before{background-color:rgba(200,164,92,.22);border-color:var(--line2)}
.ch-m.cont{margin-top:3px}
.ch-m .av{margin-bottom:2px}
.ch-gap{width:30px;flex:none}
.ch-col{min-width:0;max-width:80%;display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:880px){.ch-col{max-width:64%}}
.ch-who{font-size:12px;font-weight:600;color:var(--gold2);margin:0 0 3px 4px;display:flex;gap:6px;align-items:center}
.ch-who .chip{height:17px;font-size:9.5px;padding:0 6px}
.ch-bub{position:relative;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:18px;border-bottom-left-radius:6px;padding:9px 12px 8px;font-size:15.5px;line-height:1.4;color:var(--ivory);max-width:100%;overflow-wrap:anywhere;cursor:default}
.ch-bub a{color:var(--gold2)}
/* the clock (D-CHAT-19, 2026-09-12): floated right INSIDE the prose block by
   chat.js, so it rides the last line after the words when they leave room and
   drops under them, still to the right, when they don't - WhatsApp's bubble;
   a bubble ending in a card keeps it as the last child, a row of its own.
   7px of top margin seats its baseline a hair under the words' (a 14.7px box
   at the foot of a 21.7px line). Native twin: Chat.js RichText's tail. */
.ch-tm{float:right;margin:7px 0 0 8px;font-size:10.5px;line-height:1.4;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-m.mine{flex-direction:row-reverse}
.ch-m.mine .ch-col{align-items:flex-end}
.ch-m.mine .ch-bub{background:rgba(200,164,92,.16);border-color:var(--line2);border-radius:18px;border-bottom-right-radius:6px}
.ch-m.mine .ch-tm{color:rgba(232,206,147,.7)}
.ch-m.failed .ch-bub{border-color:rgba(192,96,79,.5);opacity:.8}
.ch-m.flash .ch-bub{box-shadow:0 0 0 2px var(--gold2)}
.ch-mention{color:var(--gold2);font-weight:600}
.ch-q{border-left:2px solid var(--gold);padding:4px 8px;margin:-2px 0 7px;border-radius:6px;background:rgba(255,255,255,.04);font-size:13px;color:var(--dim)}
/* the Office Line's lines (D-CHAT-12): the announcement an ask is about, and
   the office's link as a chip on the bubble */
.ch-ctx{font-size:11.5px;color:var(--faint);margin-bottom:3px}
.ch-door{display:inline-flex;margin:8px 0 2px;cursor:pointer;font-size:12px}
.ch-q b{display:block;color:var(--gold2);font-size:11.5px;font-weight:600;margin-bottom:1px}
.ch-rx{display:flex;gap:4px;margin-top:-8px;margin-left:8px;position:relative;z-index:2;flex-wrap:wrap}
.ch-m.mine .ch-rx{margin-left:0;margin-right:8px;justify-content:flex-end}
/* the reaction chip is an opaque pill, the way Messages and WhatsApp draw one
   (Max, 2026-09-07): it sits across the bubble's bottom edge, and a
   translucent ground painted the bubble through its top half and the page
   through the rest. The own-reaction hexes are the old rgba tints flattened
   over the page. Native twin: Chat.js Bubble's reactions row - the same
   grounds (rxChipOn / rxChipOnLine) and the same three sizes. */
.ch-rx button{height:24px;padding:0 8px;border-radius:12px;background:var(--pane);border:1px solid rgba(255,255,255,.055);font-size:12.5px;color:var(--dim);display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.ch-rx .ch-rxe{font-size:14px;line-height:1}
.ch-rx button.me{border-color:#645333;color:var(--gold2);background:#26211A}
.ch-media{margin:-3px -6px 6px;border-radius:14px;overflow:hidden;max-width:300px;position:relative}
.ch-media img,.ch-media video{display:block;width:100%;max-height:380px;object-fit:cover;cursor:zoom-in}
/* a media bubble hugs its frames (2026-08-24): fixed at the picture's width
   so a long caption wraps at the frame instead of stretching the bubble past
   it - no dead margin beside the photo. The frame runs edge to edge inside a
   tight-padded bubble; captions and the clock keep a small inset of their own. */
.ch-bub.photo,.ch-bub.video{width:min(300px,70vw);padding:4px 4px 5px}
.ch-bub.photo .ch-media,.ch-bub.video .ch-media{margin:0;max-width:none;border-radius:15px}
.ch-bub.photo .ch-album{width:100%;margin:0;border-radius:15px}
.ch-bub.photo .ch-cap,.ch-bub.video .ch-cap{margin:6px 4px 0;padding:0 4px}
.ch-bub.photo .ch-q,.ch-bub.video .ch-q{margin:2px 2px 7px}
.ch-bub.photo .ch-tm,.ch-bub.video .ch-tm{margin-right:6px}
.ch-bub.photo .ch-cap .ch-tm,.ch-bub.video .ch-cap .ch-tm{margin-right:0}
.ch-bub.photo .ch-place,.ch-bub.video .ch-place{margin-left:8px}
/* the clock over a bare frame's corner (D-CHAT-22) - the picture's own
   scrim pill, never a row of dead space under it; the film's duration moves
   to the left corner so the two never share one */
.ch-tm.over{position:absolute;right:8px;bottom:6px;float:none;margin:0;padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.45);color:#F1EBDD;line-height:1.3;pointer-events:none;z-index:1}
.ch-bub.photo .ch-tm.over,.ch-bub.video .ch-tm.over{margin:0}
.ch-tm.over+.ch-bottle{padding-right:60px}
.ch-bub.video .ch-vdur{right:auto;left:8px}
/* the place row: the pin at the left, the clock at the right end (D-CHAT-22) */
.ch-placerow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}
.ch-placerow .ch-place{margin:0;min-width:0}
.ch-placerow .ch-tm{float:none;margin:0 0 0 auto}
.ch-bub.photo .ch-placerow,.ch-bub.video .ch-placerow{margin:6px 8px 1px}
.ch-bub.photo .ch-placerow .ch-place,.ch-bub.video .ch-placerow .ch-place{margin:0}
/* the in-app message notice (2026-08-24): one card top-center while the app
   is open - tap lands in the room. Twin of the native ChatBannerHost. */
.ch-notice{position:fixed;top:10px;left:50%;transform:translate(-50%,-130%);width:min(420px,calc(100vw - 20px));display:flex;align-items:center;gap:11px;text-align:left;padding:11px 13px;border-radius:16px;background:rgba(13,18,29,.97);border:1px solid rgba(200,164,92,.35);box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:340;cursor:pointer;transition:transform .26s ease;color:var(--ivory)}
.ch-notice.on{transform:translate(-50%,0)}
.ch-notice-glyph{width:34px;height:34px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(200,164,92,.14);border:1px solid rgba(200,164,92,.35);color:var(--gold2)}
.ch-notice-glyph svg{width:16px;height:16px}
.ch-notice-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ch-notice-mid b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-notice-mid span{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-notice-open{flex:none;font-size:12.5px;font-weight:600;color:var(--gold2)}
body.shore .ch-notice{background:#FFFFFF;border-color:rgba(22,50,74,.16);color:var(--ivory);box-shadow:0 10px 28px rgba(22,50,74,.18)}
body.shore .ch-notice-glyph{background:rgba(94,143,139,.14);border-color:rgba(94,143,139,.4);color:#2E5A56}
body.shore .ch-notice-open{color:#2E5A56}
@media (prefers-reduced-motion: reduce){.ch-notice{transition:none}}
/* a clip in the thread is its poster with a play badge - the gallery does the
   playing (no parked <video> elements in the scroll) */
.ch-vtile{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:zoom-in}
.ch-vtile img{display:block;width:100%;max-height:380px;object-fit:cover}
.ch-vtile.bare{height:190px;min-width:240px}
.ch-vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ch-vplay i{width:44px;height:44px;border-radius:50%;background:rgba(8,11,18,.6);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.ch-vplay svg{width:17px;height:17px;margin-left:2px}
.ch-vdur{position:absolute;right:8px;bottom:6px;background:rgba(0,0,0,.45);color:#F1EBDD;font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:8px;font-variant-numeric:tabular-nums}
/* albums: several photos or clips folded into one WhatsApp-style collage */
.ch-album{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:min(272px,64vw);border-radius:12px;overflow:hidden;margin:-3px -6px 0;position:relative}
.ch-album .ch-cell{position:relative;padding:0;border:0;background:#0C1322;cursor:zoom-in;overflow:hidden;aspect-ratio:1;display:block}
.ch-album.n3 .ch-cell:first-child{grid-column:1/-1;aspect-ratio:2/1.05}
.ch-album .ch-cell img{width:100%;height:100%;object-fit:cover;display:block}
.ch-album .ch-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,11,18,.55);color:#F1EBDD;font-size:22px;font-weight:600}
.ch-album .ch-vplay i{width:34px;height:34px}
/* the room's roll (2026-09-05): the page's Photos and videos strip - four
   square frames across on the phone (the iOS Messages grid), six in the
   desktop column; the See-all page deals three across and fills the canvas
   at the desk */
.ch-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border-radius:12px;overflow:hidden;margin-top:6px}
.ch-mgrid.page{grid-template-columns:repeat(3,1fr);margin-top:4px}
.ch-mcell{position:relative;display:block;width:100%;padding:0;border:0;background:#0C1322;cursor:zoom-in;overflow:hidden;aspect-ratio:1}
.ch-mcell img{width:100%;height:100%;object-fit:cover;display:block}
.ch-mcell .ch-vplay i{width:30px;height:30px}
.ch-mcell .ch-vplay svg{width:13px;height:13px}
.ch-mcell .ch-vdur{right:5px;bottom:4px;font-size:10.5px}
@media (min-width:1280px){
  .ch-mgrid{grid-template-columns:repeat(6,1fr)}
  .ch-mgrid.page{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
.ch-steps{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--dim)}
.ch-voice{display:flex;align-items:center;gap:8px;min-width:220px}
.ch-voice audio{height:36px;width:220px}
.ch-file{display:flex;align-items:center;gap:10px;min-width:200px;max-width:min(300px,70vw);padding:2px 0;color:var(--ivory);text-decoration:none}
a.ch-file{cursor:pointer}
button.ch-file{cursor:pointer;text-align:left;font-family:inherit}
.ch-fileic{flex:none;width:38px;height:44px;border-radius:8px;background:rgba(200,164,92,.16);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--gold2)}
.ch-filemeta{min-width:0;display:flex;flex-direction:column;gap:2px}
.ch-filemeta b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-filemeta span{font-size:12px;color:var(--dim)}
.ch-poll{min-width:240px}
.ch-pollq{font-family:var(--serif);font-weight:400;font-size:16px;margin-bottom:8px}
.ch-opt{position:relative;display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:9px 11px;margin-top:6px;overflow:hidden;font-size:14.5px;cursor:pointer}
.ch-opt.on{border-color:var(--line2)}
.ch-opt.on::after{content:"✓";position:relative;order:2;color:var(--gold2);font-weight:700;font-size:12.5px}
.ch-optbar{position:absolute;left:0;top:0;bottom:0;background:rgba(200,164,92,.14);transition:width .3s}
.ch-optl{position:relative;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-optn{position:relative;order:3;color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.ch-opt.on .ch-optn{color:var(--gold2)}
.ch-linkcard{width:min(320px,72vw)}
.ch-linkcard img,.ch-linkcard video{display:block;width:100%;border-radius:12px;max-height:420px;object-fit:cover;background:#000}
.ch-linkcard img{cursor:zoom-in}
.ch-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.ch-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ch-unf.pending{padding:18px;border:1px dashed var(--line);border-radius:12px;font-size:13px;text-align:center}
.ch-cap{margin-top:6px}
.ch-ltitle{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ch-open{display:inline-block;margin-top:6px;font-size:12px;color:var(--gold2)}
.ch-card{width:min(260px,70vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:2px 0 4px}
/* the shared event card: day block + words, the whole card a door (2026-08-23) */
.ch-evcard{display:flex;align-items:center;gap:12px;padding:13px;cursor:pointer}
.ch-evcard.has-photo{flex-wrap:wrap}
.ch-evband{display:block;flex:1 0 100%;height:104px;margin:-13px -13px 12px;background-size:cover;background-position:center 38%;position:relative}
.ch-evband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,18,0),rgba(8,11,18,.42))}
.ch-bottle{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background:rgba(8,11,18,.62);color:var(--gold2);font-size:12px;font-weight:600;line-height:1.3}
.ch-bottle span{display:block;color:rgba(244,239,228,.75);font-size:11px;font-weight:400}
.ch-evd{width:46px;height:50px;flex:none;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ch-evd b{font-size:19px;font-weight:600;line-height:1.1;color:var(--ivory)}
.ch-evd span{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--gold2)}
.ch-evtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ch-evtx b{font-weight:400;font-size:16px;line-height:1.25}
.ch-evtx .dim,.ch-evtx .faint{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-evgo{font-size:12.5px;font-weight:600;color:var(--gold2);margin-top:2px}
/* the round card wears the club's art (2026-08-23) - photo or painted plate */
.ch-roundcard{cursor:pointer}
.ch-roundart{position:relative;min-height:118px;display:flex;align-items:flex-end;overflow:hidden}
.ch-roundart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,18,.02) 30%,rgba(8,11,18,.46) 62%,rgba(8,11,18,.86));z-index:1}
.ch-roundeb{position:absolute;top:10px;right:11px;z-index:2;font-size:9.5px;color:var(--gold2);text-shadow:0 1px 4px rgba(8,11,18,.9)}
.ch-roundtx{position:relative;z-index:2;padding:12px 13px;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 4px rgba(8,11,18,.9)}
.ch-roundtx b{font-weight:400;font-size:17px;line-height:1.22;color:var(--ivory)}
.ch-rounddt{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold2);text-transform:uppercase}
.ch-roundwho{font-size:13px;color:#C4CBD9}
.ch-cardtop{display:flex;align-items:center;gap:9px;padding:10px 12px 8px;border-bottom:1px solid rgba(255,255,255,.055)}
.ch-cardic{width:18px;height:18px;color:var(--gold2)}
.ch-cardtop b{font-family:var(--serif);font-weight:400;font-size:16.5px;flex:1}
.ch-cardtop .eb{font-size:9.5px}
.ch-cardbd{padding:9px 12px 11px;font-size:13.5px;color:var(--dim);line-height:1.45}
.ch-cardbd b{color:var(--ivory);font-weight:500}
.ch-cardft{display:flex;gap:8px;padding:0 12px 12px}
.ch-typing{min-height:18px;font-size:12.5px;color:var(--faint);padding:6px 12px 0}
.ch-comp{position:sticky;bottom:var(--tabbar-h,calc(62px + env(safe-area-inset-bottom,0px)));background:rgba(8,11,18,.97);border-top:1px solid rgba(255,255,255,.055);padding:8px 0 10px;margin:0 -2px var(--tabbar-h,calc(62px + env(safe-area-inset-bottom,0px)));z-index:5}
@media (min-width:880px){.ch-comp{bottom:0;margin-bottom:0}}
.ch-comp.ro{display:flex;align-items:center;gap:10px;padding:12px 4px;justify-content:space-between}
.ch-rules{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(200,164,92,.08);border:1px solid var(--line);font-size:12.5px;color:var(--dim);line-height:1.4}
.ch-rulesic{width:15px;height:15px;color:var(--gold2);flex:none;margin-top:1px}
.ch-rq{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border-left:2px solid var(--gold);border-radius:8px;padding:6px 10px;margin:0 0 8px 46px;font-size:12.5px;color:var(--dim)}
.ch-rq b{color:var(--gold2);font-weight:600;margin-right:4px;flex:none}
.ch-rq span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ch-rq button{margin-left:auto;color:var(--faint);font-size:16px;line-height:1}
/* the composer's staged attachments (D-CHAT-11): 60px frames and file chips in a strip above the text box, each with an × */
.ch-stage{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 8px 46px;padding:6px 8px 0 0}
.ch-stage:empty{display:none}
.ch-stagei{position:relative;flex:none;width:60px;height:60px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04)}
.ch-stagei img,.ch-stagei video{display:block;width:100%;height:100%;object-fit:cover;border-radius:11px}
.ch-stagei .ch-vplay i{width:28px;height:28px}
.ch-stagei .ch-vplay svg{width:12px;height:12px}
.ch-stagei.file{width:auto;max-width:230px;display:flex;align-items:center;gap:8px;padding:0 10px}
.ch-stagei.file .ch-fileic{width:30px;height:36px;font-size:9.5px}
.ch-stagei.file .ch-filemeta b{font-size:13.5px}
.ch-stagei.file .ch-filemeta span{font-size:11.5px}
.ch-stagex{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:11px;background:var(--ink);border:1px solid var(--line2);color:var(--ivory);font-size:15px;line-height:1;display:grid;place-items:center;padding:0}
.ch-bar{display:flex;align-items:flex-end;gap:8px}
.ch-plus,.ch-mic,.ch-timer,.ch-send{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;flex:none}
.ch-plus,.ch-mic,.ch-timer{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--gold2)}
.ch-plus svg,.ch-mic svg,.ch-timer svg{width:18px;height:18px}
/* the message timer's button (D-CHAT-23): the clock while nothing is armed, the choice (1h · 1d) on gold while it is; hidden until the room's dial lets members time a line */
.ch-timer[hidden]{display:none}
.ch-timer.on{background:rgba(200,164,92,.18);border-color:rgba(200,164,92,.55)}
.ch-timer b{font-size:11.5px;font-weight:700;letter-spacing:.2px;font-variant-numeric:tabular-nums}
/* the room's clock strip rides the read-only composers too - on its own row above their line */
.ch-comp.ro{flex-wrap:wrap}
.ch-comp.ro .ch-clock{flex-basis:100%;margin:0 0 4px}
/* the clock glyph inside a timed line's stamp */
.ch-tmclk{width:9px;height:9px;vertical-align:-1px;margin-right:2px}
.ch-mic.rec{background:rgba(192,96,79,.25);border-color:rgba(192,96,79,.6);color:#E8A89C;animation:chrec 1s ease-in-out infinite}
@keyframes chrec{0%,100%{box-shadow:0 0 0 0 rgba(192,96,79,.4)}50%{box-shadow:0 0 0 6px rgba(192,96,79,0)}}
.ch-send{background:linear-gradient(180deg,#E3C57F,#AE8A44);color:#161005}
.ch-send svg{width:18px;height:18px}
#ch-input{flex:1;min-width:0;min-height:40px;max-height:140px;border-radius:20px;padding:9px 14px;font-size:16px;resize:none;line-height:1.35}
/* the placeholder never sizes the box: both engines count a wrapped
   placeholder toward scrollHeight, so a room name too long for one line -
   or "Message everyone going" in WebKit's wider Linux fonts at 390px, the
   nightly's red of 2026-09-17 - grew an empty box to two lines; one line,
   clipped with an ellipsis, and chatGrow measures the words alone */
#ch-input::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-rxbar{display:flex;justify-content:space-between;gap:2px;padding:4px 2px 12px}
.ch-rxbar button{width:44px;height:44px;border-radius:22px;font-size:24px;display:grid;place-items:center}
.ch-rxbar button.on{background:rgba(200,164,92,.2)}
.ch-acts .srow{font-size:16px}
.srow.red{color:#E8A89C}
/* the thread fills the room so the composer's resting place IS the bottom:
   sticky only holds it back while scrolling - it never pushes a short page
   down, so without the fill a quiet thread left the composer floating
   mid-page. Short threads hug the composer, long ones scroll; the wing's
   view is sp-chat, and the read-only strips (.ch-comp.ro, no id) count too */
#main[data-view=chat]:has(.ch-comp),#main[data-view=sp-chat]:has(.ch-comp),#main[data-view=eventchat]:has(.ch-comp),#main[data-view=sp-eventchat]:has(.ch-comp){
  padding-bottom:0;display:flex;flex-direction:column;
  /* the column runs to the viewport floor and the composer carries the tab
     bar's height as its own bottom margin (below), so its resting place is
     exactly the bar's top edge - a short thread hugs it, the last line 14px
     above (Max, 2026-09-13: the room "seems floating a bit") - and at the end
     of a long thread the composer's natural place is already lifted, so
     sticky never has to cover the last bubble */
  min-height:calc(100vh - var(--hd-h,64px));
  min-height:calc(100dvh - var(--hd-h,64px))}
#main[data-view=chat]:has(.ch-comp) .ch-thread,#main[data-view=sp-chat]:has(.ch-comp) .ch-thread,#main[data-view=eventchat]:has(.ch-comp) .ch-thread,#main[data-view=sp-eventchat]:has(.ch-comp) .ch-thread{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end}
/* The bar is sticky, so it must be opaque - content scrolls under it, and
   transparent let the level pills read straight through the segment. It used
   to paint flat --ink, but the page's gradient is viewport-FIXED and lightest
   at the top (#0A1020 -> --ink by 40% of the window), so a bar sitting ~95px
   down painted darker than the page behind it and read as a black box (Max,
   2026-09-17). --ink2 is that gradient's own value at this bar's seat, and
   because the gradient is fixed the match holds at every scroll position. The
   sticky header above it solves the same problem the same way (.hd paints
   #0A1020, the gradient's first stop). No backdrop-filter: the house
   solidifies instead of blurring (the --glass note at the top of this file).
   The Wing's page is flat rather than a gradient, so there --ink IS the page
   and the override below keeps it. */
.ch-segbar{display:flex;justify-content:center;padding:8px 0 2px;position:sticky;top:var(--hd-h,64px);z-index:4;background:var(--ink2)}
body.shore .ch-segbar{background:var(--ink)}
.ch-segbar .ch-seg button{flex:1;min-width:120px}
.ch-evdoor{display:flex;align-items:center;gap:9px;width:100%;margin:8px 0 2px;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--ivory);text-align:left}
.ch-evdoor svg{width:15px;height:15px;flex:none;color:var(--gold2)}
.ch-evdoor .ch-evd-t{flex:1;min-width:0;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-evdoor .ch-evd-go{flex:none;font-size:13px;font-weight:600;color:var(--gold2)}
.ch-evdoor:active{background:rgba(255,255,255,.07)}
/* the tab bar's clearance is the composer's own bottom margin now (above),
   never the thread's padding - which stood as a gap under a short thread's
   last line; the tail keeps a hand's width above the composer (the wing's
   2026-08-22 clipped line stays fixed: the composer never overlaps the tail) */
.ch-thread{padding-bottom:14px}
@media (min-width:880px){.ch-thread{padding-bottom:24px}}
.ch-lvl{color:var(--ivory)}.ch-lvl.on{color:var(--gold2)}.ch-lvl.on b{color:var(--gold2)}
/* the wing wears daylight: the same rooms on fog (body.shore remaps the tokens; these are the literals) */
/* the audience chips were inked for night - on fog they need their own ink or
   Partners washes out and Gold floats on nothing */
body.shore .chip.tide{color:#2E5A56}
body.shore .chip.gold-c{color:#6E4B10;background:rgba(232,207,147,.24)}
body.shore .chip.board{color:#5B4390;background:rgba(139,110,199,.12)}
body.shore .srow.red{color:#A9432F}
body.shore .ch-bub{background:#FFFFFF;border-color:rgba(22,50,74,.14);color:var(--ivory)}
body.shore .ch-m.mine .ch-bub{background:rgba(94,143,139,.14);border-color:rgba(94,143,139,.5)}
body.shore .ch-m.mine .ch-tm{color:rgba(46,90,86,.8)}
body.shore .ch-who{color:#2E5A56}
body.shore .ch-cnt{background:var(--sh-sun);color:#2A1E05}
body.shore .ch-cnt.quiet{background:rgba(22,50,74,.1);color:var(--dim)}
body.shore .ch-tile{background:rgba(94,143,139,.13);border-color:rgba(94,143,139,.4);color:#2E5A56}
body.shore .ch-tile.plus{background:rgba(22,50,74,.05)}
body.shore .ch-tile.ann,body.shore .ch-tile.announcements{background:rgba(232,207,147,.3);color:#6E4B10}
body.shore .ch-day span{background:rgba(22,50,74,.05);border-color:rgba(22,50,74,.1)}
body.shore .ch-comp{background:rgba(251,252,250,.97);border-top-color:rgba(22,50,74,.1)}
body.shore .ch-plus,body.shore .ch-mic{border-color:rgba(22,50,74,.18);background:#fff;color:#2E5A56}
body.shore .ch-send{background:linear-gradient(180deg,#F1DFAF,#E0C078);color:#2A1E05}
body.shore #ch-input{background:#fff;border-color:rgba(22,50,74,.18);color:var(--ivory)}
body.shore .ch-rx button{background:#fff;border-color:rgba(22,50,74,.12)}
body.shore .ch-rx button.me{background:#DFE8E5;border-color:#9CBAB6;color:#2E5A56}
body.shore .ch-q{background:rgba(22,50,74,.05);border-left-color:var(--sh-tide)}
body.shore .ch-q b{color:#2E5A56}
body.shore .ch-card{background:#fff;border-color:rgba(22,50,74,.14)}
body.shore .ch-cardtop{border-bottom-color:rgba(22,50,74,.08)}
/* the room's tab pill reads as a control, not a watermark (Max, 2026-08-25:
   "very hard to see the list and the chat menu items") - white pill, real
   hairline, ink on the resting tab */
body.shore .ch-seg{background:#FFFFFF;border-color:rgba(22,50,74,.22);box-shadow:0 1px 4px rgba(22,50,74,.08)}
body.shore .ch-seg button{color:#3D5058}
body.shore .ch-seg button.on{background:rgba(94,143,139,.2);color:#24504C;border-color:rgba(94,143,139,.65)}
body.shore .ch-rules{background:rgba(217,164,65,.12);border-color:rgba(217,164,65,.4)}
body.shore .ch-rq{background:rgba(22,50,74,.05);border-left-color:var(--sh-tide)}
body.shore .ch-stagei{background:rgba(22,50,74,.05);border-color:rgba(94,143,139,.5)}
body.shore .ch-stagex{background:#fff;color:#16324A;border-color:rgba(94,143,139,.5)}
body.shore .ch-rq b{color:#2E5A56}
body.shore .ch-opt{border-color:rgba(22,50,74,.14)}
body.shore .ch-optbar{background:rgba(94,143,139,.16)}
body.shore .ch-link,body.shore .ch-open,body.shore .ch-mention{color:#2E5A56}
body.shore .ch-fileic{background:rgba(94,143,139,.14);border-color:rgba(94,143,139,.5);color:#2E5A56}
body.shore .ch-lvl.on,body.shore .ch-lvl.on b{color:#2E5A56}
body.shore .ch-rxbar button.on{background:rgba(94,143,139,.16)}
body.shore .ch-row,body.shore .ch-gcard{border-bottom-color:rgba(22,50,74,.14)}
/* daylight legibility (Max, 2026-08-25): the inbox's preview lines, stamps and
   chevrons were fog-on-fog - deepen them without leaving the slate family */
body.shore .ch-pv{color:#4C5E68}
body.shore .ch-nm .ch-t,body.shore .ch-chev{color:#5E6F7A}
/* the standing chips carried night ink onto the fog - daylight variants */
body.shore .chip.go{color:#2E6B4E;background:rgba(63,155,106,.14);border-color:rgba(63,155,106,.45)}
body.shore .chip.chap{color:#3D5A82;background:rgba(61,90,130,.1);border-color:rgba(61,90,130,.4)}
body.shore .chip.tbd{color:#8A5E17;border-color:rgba(217,164,65,.5)}
body.shore .chip.warn{color:#8A5E17;background:rgba(217,164,65,.14);border-color:rgba(217,164,65,.5)}
body.shore .chip.red{color:#A9432F;background:rgba(169,67,47,.08);border-color:rgba(169,67,47,.4)}
/* a fetching view's placeholder and the spinner were white-on-fog - invisible */
body.shore .skel{border-color:rgba(22,50,74,.08);background:linear-gradient(100deg,rgba(22,50,74,.045) 30%,rgba(22,50,74,.09) 50%,rgba(22,50,74,.045) 70%);background-size:300% 100%}
body.shore .spin{border-color:rgba(22,50,74,.16);border-top-color:var(--gold2)}
body.shore .tb .tbn{background:var(--sh-sun);color:#2A1E05;border-color:#FBFCFA}

/* ---- Groups grow up (2026-08-22): nudges, outings, the drawers ---- */
.ch-nudge{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(200,164,92,.08);border:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.35}
.ch-nudge svg{flex:none;color:var(--gold2)}
.ch-nudge span{flex:1;min-width:0}
.ch-nudge .ch-link{flex:none;font-weight:700}
.ch-nx{flex:none;background:none;border:0;color:var(--faint);font-size:16px;line-height:1;padding:2px 4px;cursor:pointer}
.ch-place{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:12.5px;color:var(--gold2);text-decoration:none}
.ch-wwrap{display:flex;flex-wrap:wrap;gap:7px}
.ch-wchip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:16px;border:1px solid var(--hairline);background:rgba(255,255,255,.04);color:var(--dim);font-size:13px;cursor:pointer}
.ch-wchip.on{border-color:var(--line2);background:rgba(200,164,92,.14);color:var(--gold2)}
.ch-introf{display:flex;gap:10px;margin-top:14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.ch-introf .ch-cardic{flex:none;width:20px;height:20px;color:var(--gold2)}
/* the right-side drawer: its own node beside #sheet, so both can live at once */
#ch-drawer{position:fixed;inset:0;z-index:200;pointer-events:none}
#ch-drawer .ch-drawer-scrim{position:absolute;inset:0;background:rgba(4,6,10,.55);opacity:0;transition:opacity .28s}
#ch-drawer .ch-drawer-pane{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);display:flex;flex-direction:column;background:var(--pane,#0D1017);border-left:1px solid var(--line);transform:translateX(104%);transition:transform .3s cubic-bezier(.32,.72,.34,1);box-shadow:-18px 0 40px rgba(0,0,0,.4)}
#ch-drawer.open{pointer-events:auto}
#ch-drawer.open .ch-drawer-scrim{opacity:1}
#ch-drawer.open .ch-drawer-pane{transform:translateX(0)}
#ch-drawer.peek .ch-drawer-pane{transform:translateX(calc(100% - 46px));transition:transform .42s cubic-bezier(.32,.72,.34,1)}
#ch-drawer.cellar .ch-drawer-pane{background:linear-gradient(180deg,rgba(52,26,16,.5),rgba(13,10,8,0) 220px),#0D0A08;border-left-color:rgba(200,164,92,.28)}
#ch-drawer.stays .ch-drawer-pane{background:linear-gradient(180deg,rgba(94,143,139,.16),rgba(13,16,23,0) 220px),var(--pane,#0D1017)}
.ch-drawer-hd{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px}
.ch-drawer-bar{flex:none;padding:0 14px 10px}
.ch-drawer-bd{flex:1;overflow-y:auto;padding:0 14px 30px;-webkit-overflow-scrolling:touch}
/* the cellar: racks of bottles */
.cellar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cellar-b{border:1px solid rgba(200,164,92,.22);border-radius:14px;overflow:hidden;background:rgba(26,17,12,.9)}
.cellar-ph{position:relative;height:118px;background:#160F0B}
.cellar-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.cellar-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cellar-glyph svg{width:34px;height:34px;color:var(--gold2)}
.cellar-in{padding:10px}
.cellar-vint{color:var(--gold2);font-size:12px;margin-top:2px}
.cellar-who{display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--dim);font-size:11px;min-width:0}
.cellar-who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the stays shelf */
.stay-mc{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px;background:rgba(255,255,255,.04)}
.stay-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0;-webkit-overflow-scrolling:touch}
.stay-chips button{flex:none;padding:5px 10px;border-radius:14px;border:1px solid var(--hairline);background:rgba(255,255,255,.04);color:var(--dim);font-size:12px;cursor:pointer}
.stay-chips button.on{border-color:var(--line2);background:rgba(200,164,92,.14);color:var(--gold2)}
.stay-row{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;align-items:center}
.stay-ph{position:relative;flex:none;width:62px;height:62px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--hairline)}
.stay-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.stay-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.stay-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.stay-tag{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--gold2);border:1px solid var(--line);border-radius:8px;padding:1.5px 6px;background:rgba(200,164,92,.07);white-space:nowrap}
.stay-glyph{width:100%;height:100%;padding:19px;color:var(--gold2)}
/* the wing reads the drawers in daylight */
body.shore #ch-drawer .ch-drawer-pane{background:var(--sh-linen,#F4F1E8);border-left-color:rgba(22,50,74,.16);box-shadow:-18px 0 40px rgba(22,50,74,.18)}
body.shore #ch-drawer.cellar .ch-drawer-pane{background:linear-gradient(180deg,rgba(217,164,65,.16),rgba(244,241,232,0) 220px),#F4F1E8}
body.shore #ch-drawer.stays .ch-drawer-pane{background:linear-gradient(180deg,rgba(94,143,139,.14),rgba(244,241,232,0) 220px),#F4F1E8}
body.shore .cellar-b{background:#FFFFFF;border-color:rgba(22,50,74,.14)}
body.shore .cellar-ph{background:rgba(22,50,74,.06)}
body.shore .ch-nudge{background:rgba(217,164,65,.10)}
body.shore .ch-wchip.on{background:rgba(94,143,139,.14);color:#2E5A56}
body.shore .stay-mc{background:#FFFFFF}

/* ---- Groups: the door cards and the room page (join redesign, 2026-08-26).
   Each card carries its room's hue as --room (an r,g,b triplet, the install
   landers' variable) - the wash, the ghost mark and the accent all read it. */
.ch-door{position:relative;overflow:hidden;border:1px solid rgba(var(--room),.32);border-radius:18px;
  background:linear-gradient(160deg,rgba(var(--room),.13),rgba(16,24,40,.93));
  margin-top:12px;display:block;padding:14px 14px 13px}
.ch-door-ghost{position:absolute;top:-14px;right:-26px;width:118px;height:118px;color:rgba(var(--room),.14);stroke-width:.8;pointer-events:none}
.ch-door-main{position:relative;width:100%;min-width:0;text-align:left;display:flex;flex-direction:column;align-items:stretch;cursor:pointer}
/* the mark hangs ghosted past the top-right corner, so the name and the line
   under it reserve its column - text never runs under the drawing (D-PHONE-1;
   native twin DOOR_MARK_COL) */
.ch-door-nm,.ch-door-tag{padding-right:76px}
.ch-door-nm{font-size:21px;line-height:1.15}
.ch-door-tag{font-size:13px;color:var(--dim);margin-top:3px;line-height:1.45}
.ch-door-meta{display:flex;align-items:center;gap:8px;margin-top:10px}
.ch-door-line{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);margin-top:8px}
.ch-door-line::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(var(--room),.9);flex:none}
/* the footer row: the audience pills (or the Start card's line), then the
   action at the end - never a button over whatever wrapped beneath it */
.ch-door-foot{position:relative;display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.ch-door-aud{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px}
.ch-door-foot .ch-door-line{flex:1;min-width:0;margin-top:0}
.ch-door .ch-gact{position:relative;flex:none;padding-top:0}
.ch-room-wash{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 44% at 50% -6%,rgba(var(--room),.24),transparent 66%)}
.ch-room-ghost{top:2px;right:-54px;width:225px;height:225px;color:rgba(var(--room),.11);stroke-width:.7}
body.shore .ch-door{background:linear-gradient(160deg,rgba(var(--room),.1),rgba(255,255,255,.93));border-color:rgba(22,50,74,.16);box-shadow:0 1px 4px rgba(22,50,74,.06)}
body.shore .ch-door-ghost{color:rgba(var(--room),.22)}
body.shore .ch-door-foot{border-top-color:rgba(22,50,74,.1)}
body.shore .ch-room-wash{background:radial-gradient(130% 44% at 50% -6%,rgba(var(--room),.14),transparent 66%)}
body.shore .ch-room-ghost{color:rgba(var(--room),.18)}
/* ---- the desktop room's chat pane (>=1280px, app.html's tier): the inbox
   rides beside the open thread - chat.js paints .ch-rail into the chat view,
   this seats it. Fixed against the rail (out of flow), so the phone's
   flex-column chat layout never feels it; below 1280 it simply is not there. */
.ch-rail{display:none}
@media (min-width:1280px){
  .ch-rail{display:block;position:fixed;left:260px;top:var(--hd-h,68px);bottom:0;width:340px;box-sizing:border-box;z-index:6;
    overflow-y:auto;padding:8px 14px 18px;background:rgba(10,15,26,.6);border-right:1px solid rgba(255,255,255,.055);
    scrollbar-width:thin;scrollbar-color:rgba(200,164,92,.2) transparent}
  .ch-railhead{display:flex;align-items:center;gap:8px;padding:8px 4px 8px}
  .ch-railhead .ttl3{font-family:var(--serif);font-size:21px;font-weight:500;flex:1;color:var(--ivory)}
  .ch-railhead .hbtn{width:34px;height:34px}
  .ch-rail .ch-row{border-bottom:0;border-radius:14px;padding:10px 10px;cursor:pointer}
  .ch-rail .ch-tile{width:44px;height:44px;border-radius:13px}
  .ch-rail .ch-tile svg{width:21px;height:21px}
  .ch-rail .ch-nm{font-size:16px}
  .ch-rail .ch-row.here{background:rgba(200,164,92,.09);box-shadow:inset 0 0 0 1px rgba(200,164,92,.22)}
  .ch-rail .sect{margin:10px 6px 2px}
  .ch-rail .sect .eb{font-size:12px}
  body.shore .ch-rail{background:rgba(251,252,250,.85);border-right-color:rgba(22,50,74,.1)}
  body.shore .ch-rail .ch-row.here{background:rgba(94,143,139,.12);box-shadow:inset 0 0 0 1px rgba(94,143,139,.4)}
}
@media (hover:hover) and (pointer:fine){
  .ch-rail .ch-row:hover{background:rgba(255,255,255,.04)}
  .ch-rail .ch-row.here:hover{background:rgba(200,164,92,.11)}
  body.shore .ch-rail .ch-row:hover{background:rgba(22,50,74,.04)}
  body.shore .ch-rail .ch-row.here:hover{background:rgba(94,143,139,.14)}
}

/* ---- the alumni house (phase 5, D-MULTI-3): an alumni membership's one
   page - the standing, the forums' alumni pages, the rooms. One DOM for
   every width: a column on the phone, two lanes in the desktop room. ---- */
.alh-grid{display:flex;flex-direction:column;gap:0}
.alh-band{margin:12px 0 14px;padding:22px 18px 20px;position:relative;overflow:hidden}
.alh-band .bigt{font-family:var(--serif);font-size:25px;line-height:1.22;margin:9px 0 4px;text-wrap:balance}
.alh-band .sub2{color:var(--dim);font-size:15.5px;line-height:1.5}
.alh-forum{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:10px}
.alh-forum .nm{font-size:17px;font-weight:600}
.alh-forum .co{color:var(--dim);font-size:13.5px;margin-top:2px}
.alh-doors{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.alh-room{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;margin-bottom:8px;cursor:pointer}
.alh-room .nm{font-size:16px;font-weight:500}
.alh-room .co{color:var(--dim);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alh-foot{text-align:center;color:var(--faint);font-size:13.5px;line-height:1.6;margin:22px 0 14px;padding:0 10px}
@media (min-width:1280px){
  .alh-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0 26px;align-items:start}
  .alh-grid .alh-band{grid-column:1 / -1}
  .alh-grid .alh-foot{grid-column:1 / -1}
}

/* a room's own photo in place of its mark, and the moderator's tools (D-CHAT-14) */
.ch-tile.photo{padding:0;overflow:hidden;background:rgba(255,255,255,.04)}
.ch-tile.photo img{width:100%;height:100%;object-fit:cover;display:block}
.ch-tilebtn{background:none;border:0;padding:0;margin:0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--gold2)}
.ch-tilebtn .ch-tile.lg{margin:0}
.ch-tile-edit{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ch-look-row{display:flex;align-items:center;gap:16px;margin-top:12px}
.ch-look-row .ch-tile.lg{margin:0}
.ch-look-acts{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ch-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ch-icons button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);font-size:11px;text-transform:capitalize}
.ch-icons button.on{border-color:var(--gold2);background:rgba(200,164,92,.14);color:var(--ivory)}
.ch-seg-sm{flex:none}
.ch-seg-sm button{font-size:12.5px;padding:0 10px}
.ch-dots{padding:0 9px;font-size:18px;line-height:24px}

/* any emoji as a reaction (D-CHAT-13): the + at the end of the bar, the sheet's search and grid */
.ch-rxbar .ch-rxmore{font-size:26px;font-weight:300;color:var(--gold2);border:1px solid var(--line2);background:rgba(255,255,255,.04)}
.ch-emsearch{width:100%;box-sizing:border-box;margin-bottom:8px}
.ch-emlist{max-height:56vh;overflow-y:auto;padding-bottom:6px}
.ch-emgroup{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:10px 2px 4px}
.ch-emgrid{display:grid;grid-template-columns:repeat(8,1fr)}
.ch-emgrid button{height:44px;font-size:25px;border-radius:12px;display:grid;place-items:center;background:none;border:0}
.ch-emgrid button:active{background:rgba(200,164,92,.2)}
/* the words left in the box lead the inbox row (D-CHAT-13) */
.ch-pv b.ch-draft{color:var(--gold2)}

/* the New messages divider and the jump pill (D-CHAT-13) */
.ch-new{display:flex;align-items:center;gap:10px;margin:14px 0 8px;color:var(--gold2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ch-new::before,.ch-new::after{content:"";flex:1;height:1px;background:rgba(200,164,92,.35)}
.ch-jump{position:absolute;right:10px;top:-50px;height:38px;min-width:38px;padding:0 10px;border-radius:19px;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(16,24,40,.96);border:1px solid var(--line2);color:var(--gold2);box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:12.5px;font-weight:600;z-index:6}
.ch-jump[hidden],.ch-jump-n[hidden]{display:none}
.ch-jump svg{width:18px;height:18px;flex:none}
body.shore .ch-jump{background:rgba(251,252,250,.98);border-color:rgba(22,50,74,.18);box-shadow:0 6px 18px rgba(22,50,74,.18)}
/* ---- the outing card as an invitation (D-OUTING-CARD-1, design/messages-cards-0914):
   the card is the bubble - the frame goes, the card wears the bubble's radii ---- */
.ch-bub.outing,.ch-bub.event:not(.cap){background:none;border:0;padding:0;border-radius:0;max-width:100%}
.ch-bub.outing .ch-tm,.ch-bub.event:not(.cap) .ch-tm{margin:4px 6px 0 8px}
/* the groups card is frameless like the outing (D-GOLF-6) */
.ch-bub.pairings{background:none;border:0;padding:0;border-radius:0;max-width:100%}
.ch-bub.pairings .ch-tm{margin:4px 6px 0 8px}
.ch-bub.pairings .ch-pair{width:284px;max-width:100%;margin:0;cursor:pointer}
.ch-inv{width:284px;max-width:100%;margin:0;border:1px solid rgba(232,206,147,.26);border-radius:18px 18px 18px 6px;overflow:hidden;background:var(--panel)}
.ch-m.mine .ch-inv{border-radius:18px 18px 6px 18px}
.ch-inv.off{opacity:.72;border-color:rgba(255,255,255,.1)}
.ch-invp{position:relative;padding:18px 16px 16px;text-align:center;background:radial-gradient(ellipse 90% 85% at 50% -25%,rgba(200,164,92,.16),transparent 62%),linear-gradient(165deg,#182238,#0A0F1B 78%)}
.ch-inv.off .ch-invp{background:linear-gradient(165deg,#141B2B,#0A0F1B 78%)}
.ch-invk{display:flex;align-items:center;gap:10px;color:var(--gold)}
.ch-invk i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(200,164,92,.5))}
.ch-invk i:last-child{background:linear-gradient(90deg,rgba(200,164,92,.5),transparent)}
.ch-invk svg{flex:none}
.ch-inv.off .ch-invk{color:var(--faint)}
.ch-inve{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:9px}
.ch-inv.off .ch-inve{color:var(--faint)}
.ch-inv .ch-invt{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.02em;line-height:1.12;margin-top:7px;color:var(--ivory);text-wrap:balance}
.ch-inv.off .ch-invt{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(217,164,65,.5);text-decoration-thickness:1.5px}
.ch-invw{font-size:15px;color:var(--gold2);margin-top:7px}
.ch-inv.off .ch-invw{color:var(--faint)}
.ch-invl{font-size:13px;color:var(--dim);margin-top:3px}
.ch-invch{display:flex;justify-content:center;gap:6px;margin-top:10px}
.ch-invch .chip{font-size:11.5px}
.ch-invtb{padding:12px 14px 0;display:flex;flex-direction:column;gap:9px}
.ch-invr{display:flex;align-items:center;gap:10px}
.ch-invst{display:flex;flex:none}
.ch-invst .av24{border:1.5px solid var(--panel);box-sizing:content-box}
.ch-invst>*+*{margin-left:-8px}
.ch-invc{font-size:13.5px;line-height:1.3;color:var(--faint);min-width:0}
.ch-invc b{color:var(--ivory);font-weight:600}
.ch-invm{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ch-invm i{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,#AE8A44,#E3C57F)}
.ch-invn{font-family:var(--serif);font-size:14.5px;line-height:1.45;color:var(--dim);font-style:italic}
.ch-invf{padding:12px 14px 12px;display:flex;flex-direction:column;gap:8px}
.ch-invf .cbtn{justify-content:center;width:100%}
.ch-invs{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--dim);background:none;border:0;padding:4px 0 0;cursor:pointer;width:100%}
.ch-invs svg{width:13px;height:13px;flex:none}
/* the poll's kicker, the serif question, the pour, the foot line with the clock on it */
.ch-pollk{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
.ch-pollki{width:13px;height:13px;flex:none}
.ch-poll .ch-pollq{font-family:var(--serif);font-weight:400;font-size:17.5px;line-height:1.22;margin:7px 0 10px}
.ch-opt{min-height:44px;border-radius:12px;padding:0 12px;gap:8px;font-size:15px;color:var(--ivory)}
.ch-optbar{background:rgba(200,164,92,.12)}
.ch-opt.on .ch-optbar{background:linear-gradient(90deg,rgba(200,164,92,.22),rgba(200,164,92,.12))}
.ch-opt.on .ch-optn{font-weight:600}
.ch-pollf{font-size:11.5px;color:var(--faint);margin-top:9px;padding-right:64px}
.ch-bub.poll{position:relative}
.ch-bub.poll .ch-tm{position:absolute;right:12px;bottom:9px;margin:0}
/* the shared event: the cover band, or the champagne plate when the event has no cover */
.ch-bub.event:not(.cap) .ch-evcard{border-radius:18px 18px 18px 6px}
.ch-m.mine .ch-bub.event:not(.cap) .ch-evcard{border-radius:18px 18px 6px 18px}
.ch-evcard{width:284px;max-width:100%}
.ch-evband{height:118px}
.ch-evband.plate{height:74px;background:radial-gradient(ellipse 90% 85% at 50% -25%,rgba(200,164,92,.16),transparent 62%),linear-gradient(165deg,#182238,#0A0F1B 78%)}
.ch-evband.plate::after{content:none}
.ch-evband.plate .ch-invk{position:absolute;left:16px;right:16px;top:28px}
.ch-evglyph{width:18px;height:18px;color:var(--gold)}
.ch-eveb{position:absolute;top:10px;right:12px;z-index:2;font-size:9.5px;color:var(--gold2);text-shadow:0 1px 4px rgba(8,11,18,.9)}
.ch-evd{background:rgba(200,164,92,.06)}
/* the Shore: the plate stays ink - an invitation on white - and the body takes daylight */
body.shore .ch-inv{background:#fff;border-color:rgba(22,50,74,.14)}
body.shore .ch-inv .ch-invt{color:#F1EBDD}
body.shore .ch-inv.off .ch-invt{color:#98A1B4}
body.shore .ch-invl{color:#98A1B4}
body.shore .ch-invst .av24{border-color:#fff}
body.shore .ch-invm{background:rgba(22,50,74,.1)}
body.shore .ch-opt.on .ch-optbar{background:linear-gradient(90deg,rgba(94,143,139,.26),rgba(94,143,139,.14))}
body.shore .ch-evd{background:rgba(94,143,139,.08)}
/* ---- a group of your own (D-CHAT-21, design/start-a-group): the Start card
   on the Groups page, the three-step sheet, the picked people, the summary ---- */
.ch-door-start{border-color:rgba(200,164,92,.42);margin-top:14px}
.ch-door-eb{font-size:11px;letter-spacing:.2em;font-weight:700;margin-bottom:6px}
.ch-steps{display:flex;gap:8px;margin-top:14px}
.ch-step{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.ch-step i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.ch-step.done i,.ch-step.now i{background:linear-gradient(90deg,#AE8A44,#E3C57F)}
.ch-step.done i{opacity:.55}
.ch-step b{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-step.now b{color:var(--gold2)}.ch-step.done b{color:var(--dim)}
.ch-make-prev{margin-top:18px;display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,rgba(200,164,92,.08),rgba(16,24,40,.6))}
.ch-make-prevx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ch-make-prevnm{font-size:17.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-make-prevtag{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-make-prevk{font-size:9.5px;letter-spacing:.2em;color:var(--faint);flex:none}
.ch-picks{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;min-height:30px}
.ch-pick{display:inline-flex;align-items:center;gap:7px;padding:3px 9px 3px 3px;border-radius:999px;border:1px solid var(--line2);background:rgba(200,164,92,.1);font-size:13.5px;color:var(--ivory)}
.ch-pick .av22{border-color:transparent}
.ch-pick i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--dim);font-size:11px;font-style:normal}
.ch-ring{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);flex:none;display:grid;place-items:center;color:#161005}
.ch-ring.on{border-color:#E3C57F;background:linear-gradient(140deg,#E3C57F,#AE8A44)}
.ch-make-row{width:100%;text-align:left;padding:12px 4px}
.ch-make-lane{margin-top:8px;max-height:52vh;overflow-y:auto}
.ch-make-sum{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid rgba(var(--room),.32);border-radius:18px;background:linear-gradient(160deg,rgba(var(--room),.13),rgba(16,24,40,.93))}
.ch-make-sum .ch-door-line{margin-top:0}
/* the desktop room's wide sheet seats the people step in two columns: the
   picks, the search and the buttons on the left, the lane standing on the
   right - the phone keeps the one column, buttons under the lane */
@media (min-width:1280px){
  .sheet--wide .ch-make-cols{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c b";gap:0 28px;align-items:start}
  .sheet--wide .ch-make-cols>:nth-child(1){grid-area:a}.sheet--wide .ch-make-cols>:nth-child(2){grid-area:b}.sheet--wide .ch-make-cols>:nth-child(3){grid-area:c}
  .sheet--wide .ch-make-lane{max-height:none;margin-top:18px}}
body.shore .ch-door-start{border-color:rgba(168,123,39,.42)}
body.shore .ch-make-prev{background:linear-gradient(160deg,rgba(168,123,39,.08),rgba(255,255,255,.9))}
body.shore .ch-pick{background:rgba(168,123,39,.1)}
body.shore .ch-pick i{background:rgba(22,50,74,.1)}
body.shore .ch-ring{border-color:rgba(22,50,74,.25)}
body.shore .ch-step i{background:rgba(22,50,74,.12)}
body.shore .ch-make-sum{background:linear-gradient(160deg,rgba(var(--room),.1),rgba(255,255,255,.93));border-color:rgba(22,50,74,.16)}

/* the handicap chart's Update yours (Max, 2026-09-18: the plain gold words "got lost
   a bit"): a pill that carries the member's own ball - the ball the chart draws for them */
.gf-update{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:5px 13px 5px 6px;border-radius:999px;border:1px solid var(--line2);background:rgba(200,164,92,.12);color:var(--gold2);font-size:14.5px;font-weight:600;white-space:nowrap}
.gf-update:active{transform:scale(.97)}
body.shore .gf-update{background:rgba(168,123,39,.1)}
/* ── The groups of a golf day (D-GOLF-11): Your group, the tee sheet, the builder ──
   One set of rules for both owners - a Golf event and a hosted round - and for
   both sides of it: what players see and what the day chairs or the host use.
   The handicap rides a ball: the Golf room's own (the fairway chart draws every
   member as one, the first-ball card draws it on its tee - #FFF > #EDEAE2 > #B9B4A6). */
.gg-ball{--s:30px;width:var(--s);height:var(--s);display:inline-grid;place-items:center;flex:none;border-radius:50%;font-family:var(--serif);font-weight:600;font-size:calc(var(--s) * .43);color:#161005;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;
  background:radial-gradient(circle at 74% 62%,rgba(8,11,18,.1) 0 1.1px,rgba(8,11,18,0) 1.5px),radial-gradient(circle at 60% 80%,rgba(8,11,18,.09) 0 1px,rgba(8,11,18,0) 1.4px),radial-gradient(circle at 82% 78%,rgba(8,11,18,.08) 0 .9px,rgba(8,11,18,0) 1.3px),radial-gradient(circle at 36% 30%,#FFFFFF 0,#EDEAE2 45%,#B9B4A6 100%);
  box-shadow:0 2px 7px rgba(0,0,0,.5),inset 0 0 0 1px rgba(8,11,18,.28)}
.gg-ball.long{font-size:calc(var(--s) * .36)}
.gg-ball.none{background:none;box-shadow:none;border:1px dashed rgba(241,235,221,.3);color:var(--faint);font-family:var(--sans);font-weight:500}
.gg-ball.ev{box-shadow:0 2px 7px rgba(0,0,0,.5),inset 0 0 0 1px rgba(8,11,18,.28),0 0 0 2px var(--ink),0 0 0 3px rgba(217,164,65,.8)}
.gg-tok{position:relative;display:inline-grid;flex:none}
.gg-tok .gg-ball{position:absolute;right:-5px;bottom:-4px;box-shadow:0 0 0 2px var(--panel),0 2px 5px rgba(0,0,0,.5)}
.gg-tok .gg-ball.none{background:var(--panel);border:1px solid rgba(241,235,221,.3);box-shadow:0 0 0 2px var(--panel)}
.gg-eb-sm{font-size:10.5px;letter-spacing:.16em;font-weight:700}
/* Your group */
.gg-hero{display:block;border-radius:20px;overflow:hidden;border:1px solid rgba(232,206,147,.55);background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.gg-band{position:relative;display:block;height:156px;overflow:hidden}
.gg-band.bare{height:104px;background:linear-gradient(160deg,rgba(200,164,92,.2),var(--panel) 70%)}
.gg-band .gf-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.gg-band-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,18,.2) 0%,rgba(8,11,18,.46) 44%,var(--panel) 100%)}
.gg-band.bare .gg-band-fade{display:none}
.gg-band-body{position:absolute;left:16px;right:16px;bottom:8px;display:flex;align-items:flex-end;gap:12px}
.gg-band-eb{display:block;font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--gold2);text-shadow:0 1px 6px rgba(8,11,18,.9)}
.gg-big{display:block;font-size:46px;line-height:1;margin-top:7px;color:var(--ivory);text-shadow:0 2px 14px rgba(8,11,18,.8)}
.gg-big i{font-family:var(--sans);font-style:normal;font-size:14px;font-weight:700;letter-spacing:.14em;margin-left:7px;color:var(--gold2)}
.gg-hero-sub{display:block;color:var(--dim);font-size:14px;padding:2px 16px 12px}
.gg-prow{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 16px;border-top:1px solid rgba(255,255,255,.055);color:var(--ivory);min-height:68px}
.gg-prow.you{background:linear-gradient(90deg,rgba(200,164,92,.12),rgba(200,164,92,.02))}
.gg-sheetrows{margin:0 -20px}.gg-sheetrows .gg-prow:first-child{border-top:none}
.gg-pmain{flex:1;min-width:0;display:block}
.gg-pn{display:block;font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-ground{display:block;font-size:13.5px;color:var(--gold2);line-height:1.4;margin-top:5px}
.gg-pside{display:flex;flex-direction:column;align-items:center;gap:5px;width:58px;flex:none}
.gg-lvl{font-size:9.5px;letter-spacing:.12em;color:var(--faint);font-weight:700;text-transform:uppercase;text-align:center;line-height:1.25}
.gg-hero-foot{display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 16px 8px;border-top:1px solid rgba(200,164,92,.16);font-size:14px}
.gg-hero-foot b{color:var(--gold2);font-weight:600}
.gg-msg{margin-left:auto;display:inline-flex;gap:7px;align-items:center;color:var(--gold2);font-size:15px;font-weight:600;min-height:44px}
/* the tee sheet */
.gg-sub{margin:-2px 4px 2px;font-size:13px}
.gg-tl{position:relative}
.gg-tl::before{content:"";position:absolute;left:51px;top:10px;bottom:24px;width:1px;background:linear-gradient(180deg,rgba(200,164,92,.05),rgba(200,164,92,.34) 8%,rgba(200,164,92,.34) 92%,rgba(200,164,92,.05))}
.gg-tl-r{position:relative;display:flex;margin-top:10px}
.gg-tl-t{width:44px;flex:none;text-align:right;padding-top:9px;font-size:15px;color:var(--gold2);line-height:1.1}
.gg-tl-t small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;color:var(--faint);font-weight:700;margin-top:2px}
.gg-tl-n{width:15px;flex:none;position:relative}
.gg-tl-n i{position:absolute;left:3px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--ink);border:1.5px solid var(--gold)}
.gg-tl-n i.me{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 0 4px rgba(232,206,147,.16)}
.gg-grp{flex:1;min-width:0;margin-left:9px;display:block;text-align:left;color:var(--ivory);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:11px 13px 12px}
.gg-grp.mine{border-color:rgba(232,206,147,.6);background:linear-gradient(160deg,rgba(200,164,92,.13),var(--panel) 58%)}
.gg-grp-h{display:flex;align-items:baseline;gap:8px}
.gg-avg{margin-left:auto;font-size:12.5px;color:var(--faint)}
.gg-toks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px}
.gg-toks .c{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.gg-toks .n{font-size:12.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-list{display:flex;flex-direction:column;gap:9px}
.gg-going{width:100%;display:flex;gap:11px;align-items:center;padding:11px 13px;text-align:left;color:var(--ivory);border-radius:18px}
.gg-rowball{flex:none;display:block;margin-top:2px}
.gg-gn{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* where things stand, before the groups are out */
.gg-note,.gg-ask{display:flex;gap:13px;align-items:center;padding:14px 15px;margin-top:12px;border-radius:20px}
.gg-note{border:1px solid var(--line2);background:linear-gradient(140deg,rgba(200,164,92,.13),var(--glass) 60%)}
.gg-ask{border:1px dashed rgba(200,164,92,.4);background:rgba(200,164,92,.05)}
.gg-note-ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(200,164,92,.4);background:rgba(200,164,92,.1);display:grid;place-items:center;flex:none}
.gg-note-t{display:block;font-size:17.5px;line-height:1.3}
.gg-note-s{display:block;font-size:14px;margin-top:3px;line-height:1.4}
.gg-ask-t{display:block;font-size:15px;line-height:1.4}
.gg-door{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 16px;margin-top:10px;min-height:56px;border-color:var(--line2);color:var(--ivory)}
.gg-door-t{display:block;color:var(--gold2);font-size:15.5px;font-weight:600}
.gg-door-s{display:block;color:var(--dim);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the builder */
.gg-page{padding-bottom:20px}
.gg-field{padding:15px 16px 6px;margin-top:4px}
.gg-field-h{display:flex;align-items:baseline;gap:10px}
.gg-field-n{font-size:23px;line-height:1.25;margin-top:6px}
.gg-srow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 0;border-top:1px solid rgba(255,255,255,.055);text-align:left;color:var(--ivory)}
.gg-field .gg-srow:first-of-type{margin-top:10px}
.gg-sic{width:26px;display:grid;place-items:center;flex:none}
.gg-smain{flex:1;min-width:0;display:block;text-align:left;color:inherit}
.gg-sk{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.gg-sv{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-sm{padding:6px 13px!important;font-size:14.5px!important;min-height:36px;line-height:22px}
.gg-link{color:var(--gold2);font-size:15px;font-weight:600;min-height:44px}
.gg-filters{display:flex;gap:6px;margin:16px 2px 0;flex-wrap:wrap}
.gg-filters .gchip{min-height:28px;cursor:pointer}
.gg-gcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:9px 13px 8px;margin-top:10px}
.gg-gcard.changed{border-color:rgba(217,164,65,.5)}
.gg-gh{display:flex;align-items:center;gap:8px;min-height:34px}
.gg-glabel{font-size:13px;color:var(--gold2);font-weight:600;min-height:34px;padding:0 2px}
.gg-lock{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:var(--faint);flex:none}
.gg-lock.on{border-color:rgba(200,164,92,.45);background:rgba(200,164,92,.14);color:var(--gold2)}
.gg-row{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid rgba(255,255,255,.055)}
.gg-gh+.gg-row,.gg-gcard>.gg-row:first-child{border-top:none}
.gg-row-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;color:var(--ivory);min-height:48px}
.gg-row-t{flex:1;min-width:0;display:block}
.gg-row-n{display:block;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-row-s{display:block;font-size:13px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-row.sel{background:rgba(200,164,92,.13);border-radius:12px;box-shadow:0 0 0 1px rgba(232,206,147,.6);border-top-color:transparent;padding:0 8px;margin:0 -8px}
.gg-row.over,.gg-open.over,.gg-addgroup.over{box-shadow:0 0 0 1.5px rgba(232,206,147,.75);border-radius:12px;background:rgba(200,164,92,.1)}
.gg-kept{display:grid;place-items:center;flex:none}
.gg-dots{width:34px;height:44px;display:grid;place-items:center;flex:none}
.gg-pos{width:18px;text-align:center;font-size:16.5px;color:var(--amber);flex:none}
.gg-open{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:5px 10px;margin:5px 0 4px;border:1px dashed rgba(200,164,92,.4);border-radius:12px;background:rgba(200,164,92,.05);color:var(--ivory)}
.gg-open-t{display:block;font-size:15.5px;font-weight:600;color:var(--gold2)}
.gg-open-s{display:block;font-size:13px;color:var(--faint)}
.gg-open-a{font-size:14.5px;font-weight:600;color:var(--gold2);border:1px solid var(--line2);border-radius:11px;padding:6px 13px}
.gg-addgroup{display:block;width:100%;min-height:56px;margin-top:10px;border:1px dashed rgba(200,164,92,.35);border-radius:16px;color:var(--dim);font-size:14.5px}
.gg-down{display:block;width:100%;min-height:44px;margin-top:18px;color:var(--faint);font-size:14px}
.gg-bar-space{height:118px}
.gg-bar{position:fixed;left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:18px;background:rgba(14,20,34,.97);border:1px solid var(--line2);box-shadow:0 12px 34px rgba(0,0,0,.5);max-width:532px;margin:0 auto}
.gg-bar.col{flex-direction:column;align-items:stretch;gap:9px}
.gg-bar-t{flex:1;min-width:0;display:block;font-size:13.5px;line-height:1.35}
.gg-bar-t b{display:block;font-size:15.5px;font-weight:600}
.gg-bar-l{font-size:13.5px;line-height:1.4}
.gg-bar-btns{display:flex;gap:10px}
/* the builder's sheets */
.gg-menu{margin-top:12px}
.gg-mrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 0;border-top:1px solid rgba(255,255,255,.055);text-align:left;color:var(--ivory);font-size:16px}
.gg-mrow.danger .gg-mt{color:#E0917F}
.gg-mic{width:26px;text-align:center;color:var(--gold2);flex:none;display:grid;place-items:center}
.gg-mt{flex:1;min-width:0;display:block}
.gg-mt small{display:block;font-size:13.5px;line-height:1.4;color:var(--faint);margin-top:2px;font-weight:400}
.gg-step{display:inline-flex;align-items:center;gap:8px;flex:none}
.gg-step button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:var(--ivory);font-size:17px}
.gg-step b{min-width:28px;text-align:center;font-size:18px;color:var(--gold2)}
.gg-opt{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 14px;margin-top:9px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.03);color:var(--ivory)}
.gg-opt.on{border-color:rgba(232,206,147,.6);background:rgba(200,164,92,.1)}
.gg-opt b{display:block;font-size:16px;font-weight:600}
.gg-opt .dim{display:block;font-size:14px;line-height:1.45;margin-top:2px}
.gg-opt-avg{display:block;font-size:13px;color:var(--gold2);margin-top:4px}
.gg-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);flex:none;display:grid;place-items:center;align-self:flex-start;margin-top:1px}
.gg-opt.on .gg-radio{border-color:var(--gold2)}.gg-opt.on .gg-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold2)}
.gg-warn{display:block;margin-top:14px;padding:11px 13px;border-radius:14px;border:1px solid rgba(217,164,65,.35);background:rgba(46,36,18,.5);font-size:14px;line-height:1.45;color:#EBC98A}
.gg-seg{display:flex;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:3px;gap:3px}
.gg-seg button{flex:1;height:36px;border-radius:9px;font-size:14px;color:var(--dim);font-weight:500}
.gg-seg button.on{background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600;border:1px solid var(--line2)}
.gg-lab{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:14px 2px 6px}
.gg-pills{display:flex;gap:8px}
.gg-pills button{flex:1;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);color:var(--dim);font-size:15.5px;font-variant-numeric:tabular-nums}
.gg-pills button.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600}
.gg-preview{margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.gg-preview .serif{display:block;font-size:17px}.gg-preview .faint{display:block;font-size:13.5px;line-height:1.4;margin-top:3px}
.gg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gg-tile{padding:12px 10px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.03);text-align:center}
.gg-tile b{display:block;font-size:24px;color:var(--gold2);font-weight:500}.gg-tile small{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}
.gg-facts{margin:14px 0 0;padding:0 0 0 18px;font-size:15px;line-height:1.45}.gg-facts li{margin-top:7px}
.gg-changed{margin-top:8px}.gg-chg{padding:10px 0;border-top:1px solid rgba(255,255,255,.055)}.gg-chg:first-child{border-top:none}
.gg-chg b{display:block;font-size:15.5px;font-weight:600}.gg-chg .dim{display:block;font-size:14px;line-height:1.4}
.gg-chair{padding:15px 16px 16px;margin-top:12px;border-color:var(--line2)}
/* the desk (D-DESK-1): the field on the left, every group on one screen, drag to swap */
@media (min-width:1280px){
  main[data-view=golfgroups]{max-width:1240px;margin:0 auto}
  .gg-page.desk .gg-cols{display:grid;grid-template-columns:296px minmax(0,1fr);gap:24px;align-items:start;margin-top:14px}
  .gg-page.desk .gg-rail{position:sticky;top:calc(var(--hd-h,68px) + 12px)}
  .gg-page.desk .gg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  .gg-page.desk .gg-grid .gg-gcard,.gg-page.desk .gg-grid .gg-addgroup{margin-top:0}
  .gg-page.desk .gg-filters{margin:0 2px 12px}
  .gg-page.desk .gg-bar{position:static;max-width:none;margin:6px 0 0;box-shadow:none;background:var(--glass)}
  .gg-page.desk .gg-bar.col{flex-direction:row;align-items:center}
  .gg-page.desk .gg-bar.col .btn{width:auto;padding:12px 22px}
  .gg-page.desk .gg-bar-l{flex:1}
  .gg-page.desk .gg-row{min-height:44px;cursor:grab;gap:8px}
  .gg-page.desk .gg-row-main{gap:8px}
  .gg-page.desk .gg-row-n{font-size:14.5px}
  .gg-page.desk .gg-dots{width:24px}
  .gg-page.desk .gg-gh{gap:6px;flex-wrap:nowrap}
  .gg-page.desk .gg-gh .eb,.gg-page.desk .gg-glabel,.gg-page.desk .gg-avg{white-space:nowrap}
  .gg-page.desk .gg-open-t{white-space:nowrap}
  .gg-page.desk .gg-sv{white-space:normal;font-size:14.5px;line-height:1.35}
  main[data-view=event] .gg-tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  main[data-view=event] .gg-tl::before{display:none}
  main[data-view=event] .gg-tl-r{margin-top:0}
  main[data-view=event] .gg-tl-n{display:none}
  main[data-view=event] .gg-tl-t{width:auto;text-align:left;padding:12px 0 0 2px;min-width:46px}
}
body.shore .gg-ball{box-shadow:0 1px 4px rgba(22,50,74,.25),inset 0 0 0 1px rgba(22,50,74,.22)}
body.shore .gg-tok .gg-ball{box-shadow:0 0 0 2px var(--panel),0 1px 4px rgba(22,50,74,.25)}
body.shore .gg-hero{box-shadow:0 10px 30px rgba(22,50,74,.12)}
body.shore .gg-prow,body.shore .gg-row,body.shore .gg-srow,body.shore .gg-mrow,body.shore .gg-chg{border-top-color:rgba(22,50,74,.1)}
/* ---- the scoring of a golf day, live (D-GOLF-12): web/golf-live.js ----
   The team colours arrive as --ta / --tb (and -hi, -deep, -ink) on .gl, so a day's
   two colours are one style attribute and every rule below reads them. A team is
   never colour alone: the leader is also the side the arrow points to. */
.gl{--ta:#5B8DEF;--ta-hi:#8FB2FF;--ta-deep:#1B3C86;--ta-ink:#0E1E45;--tb:#E0564B;--tb-hi:#FF8A7E;--tb-deep:#862019;--tb-ink:#3F100C;padding:0 0 28px}
.gl-sub{font-size:13px;color:var(--dim);margin:2px 4px 10px}
/* a page with nothing to show yet: the words, then the one thing to do about it */
.gl-empty{margin:36px 6px 0;text-align:center;color:var(--dim);font-size:15.5px;line-height:1.5}.gl-empty p{margin:0 0 18px}
.gl-soon{margin:0 0 12px;padding:11px 14px;border-radius:14px;border:1px solid rgba(200,164,92,.3);background:rgba(200,164,92,.07);font-size:14px;color:var(--gold2);line-height:1.45}
.gl-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 4px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.16em;white-space:nowrap;border:1px solid rgba(200,164,92,.45);background:rgba(200,164,92,.16);color:var(--gold2)}
.gl-chip.live{background:rgba(224,86,75,.14);border-color:rgba(224,86,75,.45);color:#FF9D94}
.gl-chip.live i{width:8px;height:8px;border-radius:50%;background:#FF5A4E;animation:gl-pulse 1.8s infinite}
@keyframes gl-pulse{0%{box-shadow:0 0 0 0 rgba(255,90,78,.6)}70%{box-shadow:0 0 0 9px rgba(255,90,78,0)}100%{box-shadow:0 0 0 0 rgba(255,90,78,0)}}
.gl-wait{font-size:12.5px;font-weight:600;color:#EBC98A;margin-right:8px;white-space:nowrap}
/* the cup */
.gl-cup{padding:16px 16px 15px;border-radius:20px;border:1px solid rgba(200,164,92,.15);background:linear-gradient(180deg,rgba(20,28,46,.96),rgba(12,17,28,.96))}
.gl-cup-names{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.gl-cup-names span{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-cup-names .a{color:var(--ta-hi)}.gl-cup-names .b{color:var(--tb-hi)}
.gl-cup-names i{width:10px;height:10px;border-radius:50%;flex:none}.gl-cup-names .a i{background:var(--ta)}.gl-cup-names .b i{background:var(--tb)}
.gl-cup-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
.gl-cup-mid{display:flex;flex-direction:column;align-items:center;gap:3px;width:82px;text-align:center}
.gl-cup-mid .eb{color:var(--faint)}.gl-cup-mid b{font-size:15px;font-weight:500;color:var(--gold2);white-space:nowrap}.gl-cup-mid small{font-size:11.5px;color:var(--faint);white-space:nowrap}
.gl-cup-proj{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:9px;font-size:12.5px;color:var(--dim)}
.gl-cup-proj small{font-size:11.5px;color:var(--faint)}.gl-cup-proj b.a{color:var(--ta-hi)}.gl-cup-proj b.b{color:var(--tb-hi)}
/* the split-flap tile: the only number that animates, because it is the number the day is about */
.gl-flap{position:relative;display:inline-block;width:52px;height:68px;perspective:520px;font-family:var(--serif);font-size:46px;color:#F6F1E4;flex:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.gl-flap.big{width:70px;height:92px;font-size:62px}
.gl-flap i{position:absolute;left:0;right:0;height:50%;overflow:hidden;font-style:normal;backface-visibility:hidden}
.gl-flap i b{display:block;height:68px;line-height:68px;text-align:center;font-weight:500;letter-spacing:-.02em}
.gl-flap.big i b{height:92px;line-height:92px}
.gl-flap i.t{top:0;border-radius:9px 9px 0 0}.gl-flap i.b{bottom:0;border-radius:0 0 9px 9px}
.gl-flap i.b b{margin-top:-34px}.gl-flap.big i.b b{margin-top:-46px}
.gl-flap.ta i.t{background:linear-gradient(180deg,color-mix(in srgb,var(--ta) 62%,#0B1222),color-mix(in srgb,var(--ta) 44%,#0B1222))}
.gl-flap.ta i.b{background:linear-gradient(180deg,color-mix(in srgb,var(--ta) 34%,#0B1222),color-mix(in srgb,var(--ta) 26%,#0B1222))}
.gl-flap.tb i.t{background:linear-gradient(180deg,color-mix(in srgb,var(--tb) 62%,#0B1222),color-mix(in srgb,var(--tb) 44%,#0B1222))}
.gl-flap.tb i.b{background:linear-gradient(180deg,color-mix(in srgb,var(--tb) 34%,#0B1222),color-mix(in srgb,var(--tb) 26%,#0B1222))}
.gl-flap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .75px);height:1.5px;background:rgba(3,5,10,.75);z-index:3}
.gl-flap i.ft{transform-origin:50% 100%;animation:gl-flap-t .42s cubic-bezier(.45,0,.9,.55) both;z-index:2}
.gl-flap i.fb{transform-origin:50% 0;animation:gl-flap-b .42s cubic-bezier(.1,.45,.35,1) both;z-index:2}
@keyframes gl-flap-t{0%{transform:rotateX(0)}48%,100%{transform:rotateX(-90deg)}}
@keyframes gl-flap-b{0%,48%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
/* the bar: both sides fill toward the line that wins it; the hatched part is what each would add if every match ended now */
.gl-bar{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.07);margin-top:16px}
.gl-bar .fa{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;background:linear-gradient(90deg,var(--ta-deep),var(--ta))}
.gl-bar .fb{position:absolute;right:0;top:0;bottom:0;border-radius:0 5px 5px 0;background:linear-gradient(270deg,var(--tb-deep),var(--tb))}
.gl-bar .pa{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ta) 50%,transparent) 0 3px,color-mix(in srgb,var(--ta) 12%,transparent) 3px 6px)}
.gl-bar .pb{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--tb) 50%,transparent) 0 3px,color-mix(in srgb,var(--tb) 12%,transparent) 3px 6px)}
.gl-bar .win{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--gold2);border-radius:1px}
.gl-bar .fa.grow{transform-origin:0 50%;animation:gl-grow .6s cubic-bezier(.2,.7,.2,1)}.gl-bar .fb.grow{transform-origin:100% 50%;animation:gl-grow .6s cubic-bezier(.2,.7,.2,1)}
@keyframes gl-grow{0%{transform:scaleX(.8)}100%{transform:scaleX(1)}}
/* a match, the way a broadcast draws one */
.gl-sect{display:flex;align-items:baseline;gap:8px;margin:20px 4px 9px}.gl-sect small{margin-left:auto;font-size:12px;color:var(--faint)}
.gl-mrow{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:stretch;width:100%;min-height:46px;padding:0;border-radius:12px;overflow:hidden;background:#0E1524;border:1px solid rgba(255,255,255,.07);color:inherit;text-align:left;cursor:pointer}
.gl-mrow + .gl-mrow{margin-top:6px}
.gl-mrow .sd{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:6px 12px;min-width:0}
.gl-mrow .sd.a{align-items:flex-end;text-align:right}.gl-mrow .sd.b{align-items:flex-start}
.gl-mrow .nm{font-size:13.5px;font-weight:700;letter-spacing:.07em;color:#C9D0DE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.25}
.gl-mrow .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#0A101C}
.gl-mrow .st{font-family:var(--serif);font-size:17px;color:var(--ivory);line-height:1.1;white-space:nowrap}
.gl-mrow .th{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--faint);white-space:nowrap}
.gl-mrow.la .sd.a{background:linear-gradient(90deg,var(--ta-ink),var(--ta-deep))}.gl-mrow.lb .sd.b{background:linear-gradient(270deg,var(--tb-ink),var(--tb-deep))}
.gl-mrow.la .sd.a .nm,.gl-mrow.lb .sd.b .nm{color:#fff}
.gl-mrow.la .mid{background:linear-gradient(90deg,var(--ta),var(--ta-deep));clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%)}
.gl-mrow.lb .mid{background:linear-gradient(270deg,var(--tb),var(--tb-deep));clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%)}
.gl-mrow.la .mid .st,.gl-mrow.lb .mid .st{color:#fff}.gl-mrow.la .mid .th,.gl-mrow.lb .mid .th{color:rgba(255,255,255,.78)}
.gl-mrow.fin .sd .nm{color:var(--faint)}.gl-mrow.fin.la .sd.a .nm,.gl-mrow.fin.lb .sd.b .nm{color:#fff}
.gl-mrow.idle .st{color:var(--faint);font-family:inherit;font-size:13px;font-weight:600}
.gl-mrow.mine{box-shadow:0 0 0 1.5px rgba(232,206,147,.7)}
.gl-mrow.land{animation:gl-land .9s ease-out}
@keyframes gl-land{0%{box-shadow:0 0 0 2px rgba(232,206,147,.9),0 0 26px rgba(232,206,147,.35)}100%{box-shadow:0 0 0 0 rgba(232,206,147,0)}}
.gl-mrow .st.pop{display:inline-block;animation:gl-pop .32s ease-out}
@keyframes gl-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
/* who won each hole */
.gl-strip{display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:nowrap}
.gl-strip i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8.5px;font-weight:700;color:rgba(255,255,255,.9);flex:none}
.gl-strip i.a{background:var(--ta)}.gl-strip i.b{background:var(--tb)}.gl-strip i.h{border:1.5px solid rgba(255,255,255,.28);color:var(--dim)}
.gl-strip i.n{border:1.5px dashed rgba(255,255,255,.13);color:#4F586B}.gl-strip i.now{border:1.5px solid var(--gold2);color:var(--gold2);background:rgba(200,164,92,.12)}
/* two sides and the state between them */
.gl-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.gl-vs-side{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center}
.gl-vs-side b{font-size:15px;font-weight:600;max-width:100%}.gl-vs-side small{font-size:12px}.gl-vs-side small.a{color:var(--ta-hi)}.gl-vs-side small.b{color:var(--tb-hi)}
.gl-vs-mid{text-align:center;padding:0 4px}.gl-vs-mid b{font-size:26px;font-weight:500;line-height:1;color:var(--ivory)}.gl-vs-mid b.big{font-size:34px}
.gl-vs-mid b.a{color:var(--ta-hi)}.gl-vs-mid b.b{color:var(--tb-hi)}.gl-vs-mid small{display:block;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--faint);margin-top:5px}
.gl-mine{margin-top:14px;border-radius:20px;border:1px solid rgba(232,206,147,.55);background:linear-gradient(160deg,rgba(200,164,92,.14),#0E1524 55%);padding:14px 15px 15px}
.gl-mine-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}.gl-mine-h small{font-size:12px;color:var(--dim)}
.gl-mine-strip{margin-top:13px}
.gl-mine-note{display:flex;align-items:center;gap:7px;justify-content:center;margin:10px 0 0;font-size:12.5px;color:var(--dim)}
.gl-mine .btn{margin-top:13px}
.gl-pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold2);flex:none}
/* a score the way a card writes it: a circle under par, a square over */
.gl-sc{display:inline-grid;place-items:center;width:var(--s,30px);height:var(--s,30px);font-family:var(--serif);font-size:calc(var(--s,30px) * .53);color:var(--ivory);font-variant-numeric:tabular-nums;flex:none;box-sizing:border-box}
.gl-sc.bir{border:1.5px solid #6FCF97;border-radius:50%;color:#A9E5C3}
.gl-sc.eag{border:1.5px solid var(--gold2);border-radius:50%;color:var(--gold2);box-shadow:0 0 0 2.5px #0E1524,0 0 0 4px var(--gold2)}
.gl-sc.bog{border:1.5px solid rgba(241,235,221,.4);border-radius:4px}
.gl-sc.dbl{border:1.5px solid rgba(241,235,221,.4);border-radius:4px;box-shadow:0 0 0 2.5px #0E1524,0 0 0 4px rgba(241,235,221,.32)}
.gl-sc.no{color:#4F586B}
/* the group's card */
.gl-hole{display:flex;align-items:center;gap:12px;padding:14px 16px 0;border-radius:20px 20px 0 0;border:1px solid rgba(200,164,92,.15);border-bottom:none;background:rgba(17,23,34,.92)}
.gl-hole .rb{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:none;color:var(--dim);font-size:20px;line-height:1;cursor:pointer;flex:none}
.gl-hole .rb.on{border-color:rgba(200,164,92,.45);background:rgba(200,164,92,.14);color:var(--gold2)}
.gl-hole-c{flex:1;text-align:center}.gl-hole-c .eb{color:var(--faint);margin-right:9px}.gl-hole-c b{font-size:46px;font-weight:500;line-height:1;color:#F6F1E4}
.gl-hole-c small{display:block;font-size:13px;letter-spacing:.1em;font-weight:700;color:var(--gold);margin-top:6px}
.gl-dots{display:flex;justify-content:center;gap:3px;padding:13px 16px 0;border-left:1px solid rgba(200,164,92,.15);border-right:1px solid rgba(200,164,92,.15);background:rgba(17,23,34,.92)}
.gl-dots i{width:15px;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}.gl-dots i.in{background:var(--gold)}.gl-dots i.now{background:#F6F1E4}.gl-dots i.turn{margin-right:7px}
.gl-hole-n{text-align:center;font-size:12px;color:var(--faint);padding:7px 16px 13px;border-radius:0 0 20px 20px;border:1px solid rgba(200,164,92,.15);border-top:none;background:rgba(17,23,34,.92)}
.gl-prow{margin-top:8px;padding:11px 13px 12px;border-radius:16px;background:#0E1524;border:1px solid rgba(255,255,255,.07)}
.gl-prow.open{background:linear-gradient(160deg,rgba(200,164,92,.12),#0E1524 60%);border-color:rgba(232,206,147,.55)}
.gl-prow-h{display:flex;align-items:center;gap:11px;width:100%;padding:0;background:none;border:none;color:inherit;text-align:left;cursor:pointer;min-height:44px}
.gl-prow-h .bar{width:4px;align-self:stretch;border-radius:2px;flex:none}.gl-prow-h .bar.a{background:var(--ta)}.gl-prow-h .bar.b{background:var(--tb)}
.gl-prow-h .who{flex:1;min-width:0;display:flex;flex-direction:column}.gl-prow-h .who b{font-size:16px;font-weight:600}
.gl-prow-h .who small{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--dim);margin-top:1px;flex-wrap:nowrap;white-space:nowrap}
.gl-prow-h em{font-style:normal;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}.gl-prow-h em.a{color:var(--ta-hi)}.gl-prow-h em.b{color:var(--tb-hi)}
.gl-prow-h .got{display:flex;flex-direction:column;align-items:center;gap:3px}.gl-prow-h .got small{font-size:10.5px;color:var(--gold2);font-weight:600}
/* gold words inside the page - never a button: .btn.gold and .cbtn.gold keep their own ink */
.gl :not(button).gold{color:var(--gold2)}
.gl-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.gl-keys.pad{grid-template-columns:repeat(4,minmax(0,1fr))}
.gl-key{display:flex;flex-direction:column;align-items:center;justify-content:center;height:58px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);color:inherit;cursor:pointer;padding:0;transition:transform .12s}
.gl-key:active{transform:scale(.9)}
.gl-key b{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ivory);line-height:1}.gl-key b.sm{font-size:16px}
.gl-key small{font-size:9.5px;letter-spacing:.06em;color:var(--faint);margin-top:4px;font-weight:600;white-space:nowrap}
.gl-key.par{background:rgba(200,164,92,.13);border-color:rgba(200,164,92,.42)}.gl-key.par b{color:var(--gold2)}.gl-key.par small{color:var(--gold)}
.gl-key.on{background:linear-gradient(140deg,#E3C57F,#AE8A44);border-color:transparent}.gl-key.on b,.gl-key.on small{color:#161005}
.gl-key.wide{width:100%;margin-top:6px;height:54px}
.gl-settled{display:flex;align-items:center;gap:9px;margin-top:12px;padding:13px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);animation:gl-rise .36s cubic-bezier(.2,.8,.2,1)}
.gl-settled b{font-size:15.5px;font-weight:600;flex:1}.gl-settled span{font-size:20px;white-space:nowrap}
.gl-settled.a{border-color:color-mix(in srgb,var(--ta) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--ta) 20%,transparent),#0E1524 70%)}.gl-settled.a span{color:var(--ta-hi)}
.gl-settled.b{border-color:color-mix(in srgb,var(--tb) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--tb) 20%,transparent),#0E1524 70%)}.gl-settled.b span{color:var(--tb-hi)}
@keyframes gl-rise{0%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}
.gl-lines{margin-top:12px;padding:4px 14px;border-radius:14px;background:#0A101C;border:1px solid rgba(255,255,255,.07)}
.gl-line{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;background:none;border:none;border-top:1px solid rgba(255,255,255,.055);color:var(--dim);font-size:13.5px;cursor:pointer;padding:0}
.gl-line:first-child{border-top:none}.gl-line span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gl-line span.a{text-align:right}.gl-line span.on{color:#fff;font-weight:600}
.gl-line b{min-width:64px;text-align:center;font-size:15px;font-weight:500;color:var(--ivory)}.gl-line b.a{color:var(--ta-hi)}.gl-line b.b{color:var(--tb-hi)}
.gl-foot{margin-top:14px}.gl-tools{display:flex;gap:10px;margin-top:14px}.gl-tools .cbtn{flex:1}
.gl-tools.ends{justify-content:space-between}.gl-tools.ends .cbtn{flex:0 1 auto}
.gl-note{padding:11px 13px;border-radius:14px;border:1px solid rgba(217,164,65,.35);background:rgba(46,36,18,.5);font-size:14px;line-height:1.45;color:#EBC98A}
/* nobody made these groups: the field was dealt so the day could be scored from the first tee */
.gl-dealt{margin:10px 4px 0;font-size:13.5px;line-height:1.45;color:var(--faint)}
/* the full card */
.gl-card{margin-top:10px;padding:6px 10px 10px;border-radius:16px;background:#0E1524;border:1px solid rgba(200,164,92,.15);overflow-x:auto}
.gl-t{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.gl-t td,.gl-t th{height:34px;text-align:center;font-size:12.5px;font-weight:500;color:#C9D0DE;padding:0;border-top:1px solid rgba(255,255,255,.055)}
.gl-t th{font-size:10px;letter-spacing:.1em;color:var(--faint);font-weight:700;border-top:none;height:26px}
.gl-t .l{text-align:left;padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px}
.gl-t td.l b{color:var(--ivory);font-weight:600}.gl-t td.tot{color:var(--gold2);font-weight:700;background:rgba(200,164,92,.07)}
.gl-t tr.par td{color:var(--faint);font-size:12px}.gl-t td.dimc{color:var(--faint)}.gl-t td.a{color:var(--ta-hi);font-weight:700}.gl-t td.b{color:var(--tb-hi);font-weight:700}
.gl-t td button{background:none;border:none;padding:0;cursor:pointer;min-width:28px;min-height:32px;color:inherit}
.gl-t .gl-pip{margin-left:3px;vertical-align:middle}
.gl .dot,.gl-cf-m .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;flex:none}
.gl .dot.a,.gl-cf-m .dot.a{background:var(--ta)}.gl .dot.b,.gl-cf-m .dot.b{background:var(--tb)}.gl-cf-m .dot.h{border:1.5px solid rgba(255,255,255,.35)}
.gl-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:14px 4px 0;font-size:12px;color:var(--dim)}.gl-legend span{display:inline-flex;align-items:center;gap:9px}.gl-legend .gl-sc{font-size:0}
.gl-pick{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}.gl-pick .gchip{cursor:pointer}
.gl-sq-h{display:flex;align-items:center;gap:12px}.gl-sq-h span{flex:1;display:flex;flex-direction:column}.gl-sq-h b{font-size:16px}.gl-sq-h small{font-size:13px;color:var(--dim)}
.gl-log-r{padding:10px 0;border-top:1px solid rgba(255,255,255,.055);display:flex;flex-direction:column}.gl-log-r:first-child{border-top:none}.gl-log-r small{font-size:12px;color:var(--faint);margin-top:2px}
.gl-cf-r{display:flex;align-items:center;gap:12px;min-height:50px;border-top:1px solid rgba(255,255,255,.055)}.gl-cf-r:first-child{border-top:none}.gl-cf-r b{flex:1;font-size:15.5px}.gl-cf-r span{font-size:20px}
.gl-cf-m{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);font-size:13.5px;line-height:1.7;color:#C9D0DE}
/* every player against the field */
/* the board's Net / Strokes / Stableford switcher: the native twin's geometry, number for number
   (app/src/screens/GolfLive.js). The member app carries no base `.seg` rule - only apply.html does - so
   until 2026-09-20 these three read as plain words run together on every stroke-play board, which is the
   board a round started from the course lands on (D-GOLF-16). */
.gl-seg{display:flex;gap:3px;padding:3px;margin:12px 0 4px;border-radius:12px;border:1px solid var(--white12,rgba(255,255,255,.12));background:rgba(255,255,255,.04)}
.gl-seg button{flex:1;min-height:36px;border-radius:9px;border:1px solid transparent;background:none;color:var(--dim);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.gl-seg button.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600}
.gl-lb{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 2px;background:none;border:none;border-top:1px solid rgba(255,255,255,.055);color:inherit;text-align:left;cursor:pointer}
/* the ring rides OUTSIDE the columns, so the reader's own line sits in the same places as every other line:
   width:100% on .gl-lb pins the right edge, so the bleed has to be spent on the width as well (Max, 2026-09-21) */
.gl-lb.you{background:rgba(200,164,92,.11);border-radius:12px;border-top-color:transparent;box-shadow:0 0 0 1px rgba(232,206,147,.55);padding:6px 10px;margin:4px -8px;width:calc(100% + 16px)}
.gl-lb .pos{width:30px;text-align:center;font-size:16px;color:var(--gold2);flex:none}.gl-lb .who{flex:1;min-width:0;display:flex;flex-direction:column}.gl-lb .who b{font-size:15.5px;font-weight:600}
.gl-lb .who small,.gl-lb .thru{font-size:12px;color:var(--faint)}.gl-lb .num{font-size:21px;width:44px;text-align:right}.gl-lb .num.under{color:#A9E5C3}
/* the setup */
.gl-steps{border-radius:18px;background:#0E1524;border:1px solid rgba(200,164,92,.18);padding:2px 14px}
.gl-step{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;background:none;border:none;border-top:1px solid rgba(255,255,255,.055);color:inherit;text-align:left;cursor:pointer;padding:8px 0}
.gl-step:first-child{border-top:none}.gl-step i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-size:13px}
.gl-step i.ok{background:rgba(95,165,124,.18);border:1px solid rgba(95,165,124,.5);color:#A9DDBE}.gl-step i.todo{border:1.5px dashed rgba(217,164,65,.6)}
.gl-step span{flex:1;min-width:0;display:flex;flex-direction:column}.gl-step b{font-size:15.5px;font-weight:600}.gl-step small{font-size:13px;color:var(--dim)}.gl-step em{font-style:normal;color:var(--gold);font-size:18px}
.gl-panel{margin-top:12px;padding:14px 15px;border-radius:18px;background:#0E1524;border:1px solid rgba(200,164,92,.18)}
.gl-panel-r{display:flex;align-items:center;gap:12px}.gl-panel-r span{flex:1;font-size:15px}
.gl-opt{display:flex;gap:12px;align-items:flex-start;width:100%;margin-top:8px;padding:12px 13px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.03);color:inherit;text-align:left;cursor:pointer}
.gl-opt.on{border-color:rgba(232,206,147,.6);background:rgba(200,164,92,.1)}
.gl-opt i{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);flex:none;margin-top:1px;display:grid;place-items:center}
.gl-opt.on i{border-color:var(--gold2)}.gl-opt.on i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold2)}
.gl-opt span{display:flex;flex-direction:column}.gl-opt b{font-size:15px;font-weight:600}.gl-opt small{font-size:12.5px;color:var(--dim);line-height:1.4;margin-top:2px}
.gl-f{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid rgba(255,255,255,.055)}.gl-f:first-child{border-top:none}.gl-f > span:first-child{flex:1;font-size:16px}
.gl-f input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--ivory);font-size:16px}
.gl-f input[type=number]{flex:none;width:96px;text-align:right}
.gl-edit{background:none;border:none;color:var(--gold2);font-size:13px;cursor:pointer;min-height:32px}
.gl-course{padding:12px 0;border-top:1px solid rgba(255,255,255,.055)}.gl-course:first-of-type{border-top:none}.gl-course b{display:block;font-size:15.5px;margin-bottom:8px}
.gl-sws{display:flex;gap:7px;flex:none}.gl-sw{width:24px;height:24px;border-radius:50%;border:none;opacity:.55;cursor:pointer;padding:0}.gl-sw.on{opacity:1;box-shadow:0 0 0 2px #0E1524,0 0 0 4px var(--gold2)}.gl-sw:disabled{opacity:.15;cursor:default}
.gl-teams{display:flex;gap:8px;margin-top:10px}.gl-team{flex:1;min-width:0;border-radius:16px;overflow:hidden;background:#0E1524}
.gl-team.a{border:1px solid var(--ta-deep)}.gl-team.b{border:1px solid var(--tb-deep)}
.gl-team-h{padding:10px 11px 9px}.gl-team.a .gl-team-h{background:linear-gradient(180deg,var(--ta-deep),var(--ta-ink))}.gl-team.b .gl-team-h{background:linear-gradient(180deg,var(--tb-deep),var(--tb-ink))}
.gl-team-h b{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gl-team-h small{font-size:12px;color:rgba(255,255,255,.75)}
.gl-team-r{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 9px;background:none;border:none;border-top:1px solid rgba(255,255,255,.055);color:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.gl-team-r span.nowrap{flex:1;min-width:0}
.gl-team-g{font-style:normal;flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
/* the way in, on the event page and the round page */
.gl-door{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;margin:12px 0 0;padding:14px 16px;border-radius:18px;border:1px dashed rgba(200,164,92,.4);background:rgba(200,164,92,.05);color:inherit;text-align:left;cursor:pointer}
.gl-door.live{border:1px solid rgba(232,206,147,.55);background:linear-gradient(160deg,rgba(200,164,92,.14),#0E1524 55%)}
.gl-door b{font-size:16px;font-weight:600}.gl-door small{font-size:13px;color:var(--dim)}
/* the comments under the scoring: the newest one docked at the foot of the board, the thread in a sheet over it */
.gl-tk-dock{position:sticky;bottom:calc(var(--tabbar-h,calc(62px + env(safe-area-inset-bottom,0px))) + 6px);z-index:6;display:flex;flex-direction:column;gap:7px;width:100%;margin:16px 0 0;padding:11px 14px 12px;border-radius:16px;border:1px solid var(--line2);background:rgba(12,18,32,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(0,0,0,.35);color:inherit;text-align:left;cursor:pointer}
.gl-tk-dock-h{display:flex;align-items:center;justify-content:space-between;gap:10px}.gl-tk-dock-h em{font-style:normal;font-size:13px;font-weight:600;color:var(--gold2)}
.gl-tk-last{display:flex;align-items:center;gap:9px;min-width:0;font-size:14px;line-height:1.35;color:var(--dim)}.gl-tk-last .av24{flex:none}
.gl-tk-last > span:last-child{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.gl-tk-last b{font-weight:600;color:var(--ivory)}
.gl-tk-row{align-items:flex-start}.gl-tk-row.pend{opacity:.6}
.gl-tk-m{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:7px 0 0;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--dim);font-size:11.5px;font-weight:700;letter-spacing:.06em;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-tk-m b{font-size:14px;font-weight:400;letter-spacing:0;color:var(--ivory)}.gl-tk-m.a{border-color:var(--ta)}.gl-tk-m.a b{color:var(--ta-hi)}.gl-tk-m.b{border-color:var(--tb)}.gl-tk-m.b b{color:var(--tb-hi)}
.gl-tk-about{display:flex;justify-content:center;margin:0 0 8px}.gl-tk-about .gl-tk-m{margin:0}
.gl-tk-bar{position:sticky;bottom:0;margin-top:10px}
/* the course under the scoring (D-GOLF-13): the drawing on its own flat panel, a bead a group laid over it, a row a group
   under it, and the player's switch. A bead that moved glides from where it stood (--fx/--fy); nothing else animates. */
.gl-oc{margin:14px 0 0;border-radius:20px;border:1px solid rgba(200,164,92,.15);background:linear-gradient(180deg,rgba(16,22,36,.96),rgba(10,14,24,.96));overflow:hidden}
.gl-oc-h{display:flex;align-items:baseline;gap:10px;padding:13px 8px 9px 16px}.gl-oc-h small{flex:1;min-width:0;font-size:12px;color:var(--faint);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-oc-fold{flex:none;align-self:center;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--faint);cursor:pointer}
.gl-plan{position:relative;margin:0 8px;border-radius:16px;overflow:hidden;background:#0B1120}.gl-plan svg{display:block;width:100%;height:auto}.gl-plan.wait{aspect-ratio:1/1}
.gl-bead{position:absolute;z-index:1;display:grid;place-items:center;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border-radius:50%;box-sizing:border-box;font-style:normal;font-size:10.5px;font-weight:700;line-height:1;
  border:1.4px solid var(--gold2);background:#0B101C;color:var(--gold2)}
.gl-bead.seen{box-shadow:0 0 0 7px rgba(232,206,147,.10)}.gl-bead.card{border-style:dashed;border-color:rgba(200,164,92,.6)}
.gl-bead.mine{background:#E3C57F;color:#161005;border-color:#E3C57F}.gl-bead.mine.card{border-color:rgba(22,16,5,.55)}
.gl-bead.move{animation:gl-bead 1.3s cubic-bezier(.3,.7,.2,1) both}
@keyframes gl-bead{from{left:var(--fx);top:var(--fy)}}
.gl-bead::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border:1.4px solid var(--gold2);border-radius:50%;animation:gl-ring 2.4s cubic-bezier(.2,.6,.4,1) infinite;animation-delay:var(--pd,0s);pointer-events:none}
.gl-bead.mine::before{border-color:#E3C57F}
@keyframes gl-ring{from{transform:scale(1);opacity:.55}to{transform:scale(2.4);opacity:0}}
.gl-wheres{padding:4px 16px 6px}
.gl-where{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.055);font-size:14px}.gl-where:first-child{border-top:0}
.gl-where > div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gl-where b{font-weight:600}.gl-where span{color:var(--dim)}
.gl-where em{margin-left:auto;flex:none;font-style:normal;font-size:12.5px;color:var(--faint);white-space:nowrap}
.gl-gd{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-sizing:border-box;font-style:normal;font-size:11px;font-weight:700;border:1.4px solid var(--gold2);color:var(--gold2);background:#0B101C}
.gl-gd.mine{background:#E3C57F;color:#161005;border-color:#E3C57F}.gl-gd.card{border-style:dashed;border-color:rgba(200,164,92,.6)}.gl-gd.mine.card{border-color:rgba(22,16,5,.55)}
.gl-share{display:flex;align-items:center;gap:14px;margin:4px 12px 12px;padding:13px 14px;border-radius:16px;background:var(--panel);border:1px solid rgba(200,164,92,.12)}
.gl-share > div{min-width:0}.gl-share b{display:block;font-size:15px;font-weight:600}.gl-share small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--dim)}
.gl-share .sw{margin-left:auto;border:0;padding:0}
/* the desk: the cup and the reader's own match on the left, every match on the right - the clubhouse screen is this page */
@media (min-width:1280px){
  main[data-view=golflive]{max-width:1240px}
  .gl-tk-dock{position:static;box-shadow:none}
  .gl-desk{display:grid;grid-template-columns:440px minmax(0,1fr);gap:36px;align-items:start}
  .gl-desk-r .gl-sect:first-child{margin-top:0}
  /* the course on the desk has the wide column, above every match: the drawing as large as the column lets it be */
  .gl.desk .gl-desk-r > .gl-oc:first-child{margin-top:0}.gl.desk .gl-oc + .gl-sect{margin-top:22px}
  .gl.desk .gl-oc .gl-plan{max-width:560px;margin:0 auto}
  .gl-desk-r .gl-mrow{min-height:56px;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}.gl-desk-r .gl-mrow .nm{font-size:15px}.gl-desk-r .gl-mrow .st{font-size:20px}
  .gl-desk-r .gl-mrow.idle .st{font-size:13px}
}
/* two matches a row only where a last name still fits whole: a clubhouse screen, a wide monitor */
@media (min-width:1600px){
  main[data-view=golflive]{max-width:1480px}
  .gl-desk-r .gl-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gl-desk-r .gl-mrow + .gl-mrow{margin-top:0}
  /* ...and there the course has room for its groups beside the drawing, not under it */
  .gl.desk .gl-oc:not(.folded){display:grid;grid-template-columns:minmax(0,560px) minmax(280px,1fr);grid-auto-rows:min-content;column-gap:10px;align-content:start}
  .gl.desk .gl-oc:not(.folded) .gl-oc-h{grid-column:1/-1}.gl.desk .gl-oc:not(.folded) .gl-plan{grid-column:1;grid-row:2/span 3;margin:0 0 12px 12px}
  .gl.desk .gl-oc:not(.folded) .gl-wheres,.gl.desk .gl-oc:not(.folded) .gl-share{grid-column:2}
  .gl.desk .gl-oc:not(.folded) .gl-share{align-self:start}
}
@media (prefers-reduced-motion:reduce){.gl-flap i.ft{display:none}.gl-flap i.fb,.gl-mrow.land,.gl-mrow .st.pop,.gl-settled,.gl-bar .grow,.gl-chip.live i,.gl-bead.move{animation:none}.gl-bead::before{display:none}}

/* ---- Pickleball & Tennis: the Games tab of a racquets room (D-RACQ-1; web/racquets.js;
   boards design/racquets-0918). The court is the one new component: drawn from above, the
   net down the middle, the players where they will play, an open spot as a dashed ring. ---- */
.rq-tab{padding:0 2px 28px}
.rq-bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.rq-bar .rq-seg{flex:1;min-width:0}
.rq-seg button{flex:1;min-width:0;padding:0 6px}
.rq-bar .cbtn{padding:8px 13px;font-size:14.5px;line-height:22px}
/* the 375 floor (D-PHONE-1): the filter keeps the row, Post a game takes its own */
@media (max-width:389px){.rq-bar{flex-wrap:wrap}.rq-bar .cbtn{flex:1 0 100%;justify-content:center}}
.rq-setup{margin-top:12px;padding:18px 16px 16px;border-color:var(--line2)}
.rq-card{padding:13px 14px;margin-top:10px;cursor:pointer;display:block;width:100%;text-align:left}
.rq-card.next{border-color:var(--line2);background:linear-gradient(180deg,rgba(200,164,92,.16),transparent 70%),var(--glass);margin-top:0}
.rq-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gchip.rq-hot{color:#161005;border-color:transparent;background:linear-gradient(140deg,#E3C57F,#AE8A44)}
.rq-when{font-family:var(--serif);font-size:20px;line-height:1.2;margin-top:8px;color:var(--ivory)}
.rq-where{font-size:14.5px;color:var(--ivory);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-meta{font-size:13px;color:var(--dim);margin-top:1px;font-variant-numeric:tabular-nums;line-height:1.5}
.rq-foot{display:flex;align-items:center;gap:8px;margin-top:11px}
.rq-by{font-size:13px;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-field{display:flex;align-items:center;gap:10px;padding:4px 0 2px}
.rq-faces{display:flex}.rq-faces .av{margin-left:-5px;box-shadow:0 0 0 2px var(--pane)}.rq-faces .av:first-child{margin-left:0}
.rq-court{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.rq-court.pb{background:linear-gradient(160deg,#17304D,#0F1D31)}
.rq-court.tn{background:linear-gradient(160deg,#17382C,#0E2019)}
.rq-court svg{position:absolute;inset:0;width:100%;height:100%}
.rq-ln{stroke:rgba(241,235,221,.62);stroke-width:1.4;fill:none;vector-effect:non-scaling-stroke}
.rq-net{stroke:rgba(241,235,221,.95);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:1 3;fill:none}
.rq-zone{fill:rgba(241,235,221,.06)}
.rq-p{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.rq-p .av{box-shadow:0 2px 8px rgba(0,0,0,.45)}
.rq-p.me .av{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(232,206,147,.35),0 2px 8px rgba(0,0,0,.45)}
.rq-p small{font-size:10.5px;font-weight:600;color:rgba(241,235,221,.95);white-space:nowrap;background:rgba(8,11,18,.5);padding:0 6px;border-radius:7px;line-height:15px}
.rq-p small.opn{color:#E8CE93}
.rq-open{border-radius:50%;border:1.5px dashed #E8CE93;color:#E8CE93;display:grid;place-items:center;background:rgba(200,164,92,.14);font-size:17px}
.rq-open.av30{width:32px;height:32px}.rq-open.av36{width:38px;height:38px;font-size:20px}.rq-open.av44{width:46px;height:46px;font-size:24px}
.rq-side{position:absolute;top:7px;font-size:9.5px;letter-spacing:.16em;font-weight:700;color:rgba(241,235,221,.6)}
.rq-gap{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;font-weight:700;color:#161005;background:linear-gradient(140deg,#E3C57F,#AE8A44);padding:2px 8px 1px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.rq-rows{padding:2px 14px}
.rq-prow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);min-height:56px}
.rq-prow:last-child{border-bottom:0}
.rq-nm{font-size:16px;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-sub{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.rq-lv{font-size:12.5px;font-weight:600;color:var(--gold2);border:1px solid var(--line2);background:rgba(200,164,92,.16);border-radius:999px;padding:3px 9px;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.rq-alert{margin-top:12px;padding:15px;border-color:var(--line2);background:linear-gradient(180deg,rgba(200,164,92,.16),transparent 80%),var(--glass)}
.rq-mine{padding:6px 14px}
.rq-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:15px;color:var(--dim)}
.rq-kv:last-of-type{border-bottom:0}
.rq-fld{margin-top:14px}
.rq-lb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 2px 6px}
.rq-fchips{display:flex;gap:7px;flex-wrap:wrap}
.rq-fchip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--dim);font-size:14px;white-space:nowrap}
.rq-fchip.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600}
.rq-lvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.rq-lvc{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:16px;color:var(--dim);font-variant-numeric:tabular-nums}
.rq-lvc.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2);font-weight:700}
.rq-lvline{font-size:13.5px;color:var(--dim);margin-top:8px;line-height:1.45}.rq-lvline b{color:var(--ivory);font-weight:600}
.rq-week{display:grid;grid-template-columns:64px repeat(7,1fr);gap:5px;align-items:center}
.rq-wd{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;text-align:center}
.rq-wr{font-size:12.5px;color:var(--dim)}
.rq-wc{height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:transparent}
.rq-wc.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2)}
.rq-rnd{margin-top:10px;padding:12px 13px}
.rq-rh{display:flex;align-items:baseline;gap:8px}
.rq-rh b{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ivory)}
.rq-rh span{font-size:12.5px;color:var(--faint);margin-left:auto;text-align:right}
.rq-match{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;color:var(--ivory);padding:5px 8px;border-radius:11px;border:1px solid transparent;margin-left:-8px;margin-right:-8px}
.rq-match.mine{background:rgba(200,164,92,.16);border-color:var(--line2)}
.rq-ct{font-size:9.5px;letter-spacing:.12em;font-weight:700;color:var(--faint);width:60px;flex:none;white-space:nowrap}
.rq-tm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rq-tm.r{text-align:right}
.rq-v{font-size:10px;letter-spacing:.12em;color:var(--faint);font-weight:700;flex:none}
.rq-rung{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.055);min-height:58px}
.rq-rung:last-child{border-bottom:0}.rq-rung.me{background:rgba(200,164,92,.16)}
.rq-no{font-family:var(--serif);font-size:22px;width:28px;text-align:center;color:var(--gold2);flex:none;font-variant-numeric:tabular-nums}
.rq-setbox{display:grid;grid-template-columns:1fr repeat(3,54px);gap:8px;align-items:center}
.rq-sh{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;text-align:center}
.rq-who{font-size:15.5px;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
input.rq-set{height:50px;border-radius:12px;text-align:center;font-size:21px;font-family:var(--serif);padding:0;font-variant-numeric:tabular-nums}
.rq-inchat{width:min(316px,100%)}.rq-inchat .rq-card{margin-top:0;border-radius:16px}
/* the own-message rules (.ch-m.mine .ch-bub, and the Wing's) outrank a bare kind, so a card names them too or its corner shows the bubble's tint */
.ch-bub.game,.ch-bub.place,.ch-m.mine .ch-bub.game,.ch-m.mine .ch-bub.place,body.shore .ch-m.mine .ch-bub.game,body.shore .ch-m.mine .ch-bub.place{background:none;border:0;padding:0;border-radius:0;max-width:100%}
.ch-bub.game .ch-tm,.ch-bub.place .ch-tm{margin:4px 6px 0 8px}
/* the Wing's daylight: the same courts in powder blue and sage */
body.shore .rq-court.pb{background:linear-gradient(160deg,#D7E5F1,#C3D6E6)}
body.shore .rq-court.tn{background:linear-gradient(160deg,#D9E8DA,#C3D9C6)}
body.shore .rq-ln{stroke:rgba(22,50,74,.5)}body.shore .rq-net{stroke:rgba(22,50,74,.85)}body.shore .rq-zone{fill:rgba(22,50,74,.06)}
body.shore .rq-p small{color:#22333F;background:rgba(255,255,255,.72)}body.shore .rq-p small.opn{color:#7A5210}
body.shore .rq-open{border-color:#8E6014;color:#8E6014;background:rgba(168,123,39,.12)}
body.shore .rq-side{color:rgba(22,50,74,.55)}
/* the shared chip is drawn for the ink; in daylight the board's quiet chips read harbor on linen */
body.shore .rq-tab .gchip:not(.rq-hot):not(.go):not(.gold):not(.tbd),body.shore #rq-game .gchip:not(.rq-hot):not(.go):not(.gold):not(.tbd),body.shore .rq-inchat .gchip:not(.rq-hot):not(.go):not(.gold):not(.tbd){color:#3D5058;border-color:rgba(22,50,74,.18);background:rgba(255,255,255,.75)}
body.shore .rq-prow,body.shore .rq-kv,body.shore .rq-rung{border-bottom-color:rgba(22,50,74,.08)}
body.shore .rq-fchip,body.shore .rq-lvc,body.shore .rq-wc{border-color:rgba(22,50,74,.14)}
body.shore .rq-fchip.on,body.shore .rq-lvc.on,body.shore .rq-wc.on,body.shore .rq-lv,body.shore .rq-match.mine,body.shore .rq-rung.me{border-color:var(--line2);background:rgba(168,123,39,.13)}
/* the desktop room (D-DESK-1): games two across, your game and the ladder doors beside them */
@media (min-width:1280px){
  .rq-tab{max-width:1080px;margin:0 auto;padding:0 8px 40px}
  .rq-desk{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
  .rq-desk>*{min-width:0}
  /* the cards choose their own count: one column beside the rooms rail at 1440, two on a wider screen */
  .rq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
  .rq-grid>*{min-width:0}.rq-grid .rq-card{margin-top:0}
  .rq-bar{max-width:520px}
}

/* ==================================================================== */
/* Messages - the table-stakes round (design/messages-0919, D-CHAT-27   */
/* to D-CHAT-31): the pinned bar, the @everyone chip, the read receipt, */
/* the quote as a door, the inbox's doors, dot and chips, the desk's    */
/* drop veil and hint, the place card, the formatting, the call sheet.  */
/* ==================================================================== */
/* the pinned bar: one pin at a time under the room's title, inside #main */
#ch-pinbar:empty{display:none}
.ch-pinbar{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;margin:4px 0 2px;border-radius:12px;background:var(--pane);border:1px solid rgba(255,255,255,.055);text-align:left;color:var(--ivory);cursor:pointer}
.ch-pinbar>svg{width:12px;height:12px;flex:none;color:var(--gold)}
.ch-pinbar .ch-pe{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;flex:none}
.ch-pinbar .ch-pw{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-pinbar .ch-pn{font-size:12px;color:var(--faint);flex:none}
body.shore .ch-pinbar{background:#fff;border-color:rgba(22,50,74,.14)}
body.shore .ch-pinbar>svg,body.shore .ch-pinbar .ch-pe{color:#8E6014}
/* the jumped line glows gold for a second (chatFlash) */
.ch-m.ch-flash .ch-bub{box-shadow:0 0 0 2px rgba(232,206,147,.75),0 0 22px rgba(232,206,147,.35);transition:box-shadow .3s}
.ch-sys.ch-flash{color:var(--gold2)}
/* @everyone: a gold chip in the bubble */
.ch-evc{display:inline-block;font-size:13.5px;font-weight:600;padding:0 7px;line-height:20px;border-radius:999px;color:var(--gold2);background:rgba(200,164,92,.16);border:1px solid var(--line2);vertical-align:1px;margin-right:2px}
body.shore .ch-evc{color:#6E4B10;background:rgba(232,207,147,.3);border-color:rgba(168,123,39,.4)}
/* the Everyone offer in the mention popover */
.mpop .mpop-allav{background:rgba(200,164,92,.16);border:1px solid var(--line2);color:var(--gold2);font-weight:700;font-size:14px}
.mpop .mpop-allw{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.mpop .mpop-allw b{font-weight:600}
.mpop .mpop-allw span{font-size:12.5px;color:var(--dim);font-weight:400}
.mpop.inline .mpop-allw span{display:none}
/* the read receipt: one dim line under the reader's own last read line */
.ch-read{font-size:12px;color:var(--faint);margin:3px 6px 0}
/* a quote is a door; a private reply's quote wears the room it came from */
.ch-q[role=button]{cursor:pointer}
.ch-q .ch-qroom,.ch-rq .ch-rqroom{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:3px}
.ch-rq.ch-rqq{flex-wrap:wrap}
.ch-rq .ch-rqroom{flex-basis:100%;margin-bottom:1px}
body.shore .ch-q .ch-qroom,body.shore .ch-rq .ch-rqroom{color:#8E6014}
/* the Seen by row's count, the sheets' foot, the reactions sheet's emoji */
.ch-seenn{color:var(--dim);font-weight:400}
.ch-seenfoot{font-size:13.5px;color:var(--faint);padding:14px 4px 0;text-align:center;line-height:1.5}
.ch-rxemo{width:30px;font-size:22px;text-align:center;flex:none;line-height:1}
/* the inbox row: the small gold pin before its time, the dot in the count's seat */
.ch-pv .ch-t{display:inline-flex;align-items:center;gap:4px}
.ch-rowpin{display:inline-flex;width:11px;height:11px;color:var(--gold);flex:none}
.ch-rowpin svg{width:11px;height:11px}
.ch-dot{width:9px;height:9px;border-radius:50%;background:var(--gold2);flex:none;margin:0 7px}
body.shore .ch-dot{background:var(--sh-sun)}
body.shore .ch-rowpin{color:#8E6014}
/* the right swipe's two doors, glued to the row's leading edge at --ch-x - --ch-wl */
.ch-swipe-doors{position:absolute;top:0;left:0;bottom:0;display:flex;z-index:0;visibility:hidden;transform:translateX(calc((var(--ch-x,0) - var(--ch-wl,0)) * 1px));transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ch-swipe.ch-swipe-live .ch-swipe-doors{visibility:visible;will-change:transform}
.ch-swipe.ch-swipe-drag .ch-swipe-doors{transition:none}
.ch-swipe-doors::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:46px;background:#C8A45C}
.ch-swipe-door{width:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;border:none;border-radius:0}
.ch-swipe-door svg{width:20px;height:20px}
.ch-swipe-door.pin{background:#C8A45C;color:#161005}
.ch-swipe-door.unread{background:#3C5A7A;color:#fff}
body.shore .ch-swipe-door.unread{background:#5E8F8B}
@media (prefers-reduced-motion: reduce){.ch-swipe-doors{transition-duration:.01ms}}
/* the three filters over the list and over the rail's rows */
.ch-fchips{display:flex;gap:8px;padding:6px 0 8px}
.ch-fchip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:16px;font-size:13.5px;font-weight:600;color:var(--dim);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);white-space:nowrap}
.ch-fchip.on{color:var(--gold2);background:rgba(200,164,92,.16);border-color:var(--line2)}
.ch-rail .ch-fchips{padding:4px 6px 8px}
.ch-rail .ch-fchip{height:30px;padding:0 13px;font-size:13px}
.ch-lens-empty{padding:18px 4px;font-size:15px;line-height:1.55;text-align:center}
body.shore .ch-fchip{color:#3D5058;border-color:rgba(22,50,74,.18);background:#fff}
body.shore .ch-fchip.on{color:#24504C;background:rgba(94,143,139,.2);border-color:rgba(94,143,139,.65)}
/* the drop veil over the thread while a file is dragged */
.ch-thread{position:relative}
.ch-drop{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:rgba(8,11,18,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:14px;pointer-events:none}
.ch-dropbox{border:2px dashed rgba(200,164,92,.65);border-radius:18px;padding:34px 56px;display:flex;flex-direction:column;align-items:center;gap:12px;background:rgba(14,21,36,.55);color:var(--gold2)}
.ch-dropbox .serif{font-size:24px}
body.shore .ch-drop{background:rgba(251,252,250,.8)}
body.shore .ch-dropbox{background:rgba(255,255,255,.7);border-color:rgba(94,143,139,.7);color:#24504C}
/* the desk's quiet line under the composer (painted at >=1280px only) */
.ch-hint{font-size:12px;color:var(--faint);margin:8px 14px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the staged place, and the place card in the thread */
.ch-stagei.place{width:auto;max-width:250px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--gold2)}
.ch-stagei.place svg{flex:none}
.ch-stagei.place .ch-filemeta b{font-size:13.5px;color:var(--ivory)}
.ch-stagei.place .ch-filemeta span{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.ch-bub.place{padding:4px 4px 5px;width:min(260px,72vw)}
.ch-bub.place .ch-tm{margin:4px 8px 2px 8px}
.ch-placecard{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.ch-placetop{display:flex;gap:10px;padding:11px 12px 10px;align-items:flex-start}
.ch-placetop>svg{flex:none;margin-top:2px;color:var(--gold)}
.ch-placewords{min-width:0}
.ch-placenm{font-size:15px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-placect{font-size:13.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-placeopen{display:block;border-top:1px solid rgba(255,255,255,.055);padding:9px 12px;font-size:14px;color:var(--gold2);font-weight:600;text-decoration:none}
body.shore .ch-placecard{background:#fff;border-color:rgba(22,50,74,.14)}
/* a link's card inside an encrypted line (D-ENCRYPT-10): the writer's device made it, so it is small enough to ride
   in the message - a thumbnail, the title on two lines, a line of the description, the site */
.ch-slink{display:flex;gap:10px;align-items:stretch;margin-top:7px;width:min(300px,68vw);background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;text-decoration:none;color:inherit}
.ch-slinkpic{flex:none;width:72px;min-height:72px;object-fit:cover;background:#000;display:block}
.ch-slinktx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;padding:9px 11px 9px 0}
.ch-slink.bare .ch-slinktx{padding-left:11px}
.ch-slinktx b{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-slinktx span{font-size:12.5px;line-height:1.35;color:var(--dim);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ch-slinktx i{font-style:normal;font-size:12px;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.shore .ch-slink{background:#fff;border-color:rgba(22,50,74,.14)}
body.shore .ch-slinktx i{color:#2E5A56}
body.shore .ch-placeopen{border-top-color:rgba(22,50,74,.08);color:#2E5A56}
body.shore .ch-placetop>svg{color:#8E6014}
/* light formatting in the bubble: bold, italic, strike, tight lists */
.ch-bub strong{font-weight:600}
.ch-bub em{font-style:italic}
.ch-bub s{opacity:.7}
.ch-bub .ch-fmtlist{margin:4px 0 0;padding-left:18px}
.ch-bub .ch-fmtlist li{margin-top:2px}
/* the call sheet's rows are links */
a.srow{color:var(--ivory);text-decoration:none;font-size:16px}
/* ---- Who you'll know: a partner's page of who is going to her evening
   (D-WING-BRIEF-1; web/app.js spShowBrief; boards design/wing-seven-0920 -
   KnowBrief, KnowToday, KnowSheet, KnowEmpty). ---- */
.sb-head{padding:14px 2px 2px}
.sb-count{font-size:23px;line-height:1.2;color:var(--ivory)}
.sb-sub{font-size:14.5px;line-height:1.5;margin:5px 0 0}
.sb-nudge{padding:15px 16px;margin-top:12px}
.sb-nudge b{display:block;font-size:16px;color:var(--ivory)}
.sb-nudge p{font-size:14.5px;line-height:1.55;margin:5px 0 0}
.sb-nudge .btn{width:100%;margin-top:12px}
.sb-row{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;margin-top:9px;text-align:left;width:100%}
.sb-row[role=button]{cursor:pointer}
.sb-main{flex:1;min-width:0}
.sb-name{font-size:16.5px;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-of{font-size:13px;color:var(--dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sb-last{font-size:13px;color:var(--dim);margin-top:7px;line-height:1.4}
.sb-nights{flex:none;text-align:right;font-size:13px;line-height:1.35;color:var(--gold2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-solo{font-size:14.5px;line-height:1.6;margin:2px 2px 0}
.sb-first{margin-top:16px;text-align:center;font-size:13px;line-height:1.55;padding:0 8px}
/* the card on Today */
.sb-today{display:block;width:100%;text-align:left;padding:14px 15px;margin-top:10px;cursor:pointer}
.sb-today .eb{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--gold)}
.sb-today b{display:block;font-size:20px;line-height:1.2;color:var(--ivory);margin-top:5px}
.sb-today .dim{display:block;font-size:14px;margin-top:2px}
.sb-faces{display:flex;align-items:center;margin-top:11px}
.sb-faces .av{margin-left:-6px;box-shadow:0 0 0 2px var(--pane)}
.sb-faces .av:first-child{margin-left:0}
.sb-faces i{font-style:normal;font-size:13px;color:var(--dim);margin-left:8px}
.sb-today .cbtn{margin-top:11px}
/* the block on the evening's sheet */
.sb-block{padding:4px 14px;margin-top:2px}
.sb-brow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.sb-brow[role=button]{cursor:pointer}
.sb-all{width:100%;justify-content:center;border-bottom:0;font-size:14.5px;color:var(--gold2)}
/* the Wing's daylight */
body.shore .sb-count,body.shore .sb-name,body.shore .sb-today b,body.shore .sb-nudge b{color:var(--ivory)}
body.shore .sb-brow{border-color:rgba(22,50,74,.08)}
body.shore .sb-row .gchip,body.shore .sb-block .gchip{color:#3D5058;border-color:rgba(22,50,74,.18);background:rgba(255,255,255,.75)}
/* the desktop room (D-DESK-1): the people two across in the reading width */
@media (min-width:1280px){
  main[data-view="sp-brief"] .sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
  main[data-view="sp-brief"] .sb-row{margin-top:0}
}

/* ---- Care circles: the Care tab of a circle's group (D-WING-CARE-1; web/care.js; boards
   design/wing-seven-0920). The fortnight of dinners is the one new component: fourteen day
   tiles that read at a glance - taken, open, or yours. ---- */
.cr-tab{padding:0 2px 28px}
.cr-helps{padding:16px 15px 14px;margin-top:12px;border-color:var(--line2)}
.cr-words{font-style:italic;font-size:16px;line-height:1.55;color:var(--ivory);margin:0}
.cr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.cr-edit{display:block;margin-top:11px;font-size:13.5px}
.cr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cr-day{border-radius:12px;border:1px solid rgba(255,255,255,.12);background:transparent;padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:74px;overflow:hidden}
.cr-day:disabled{opacity:.34}
.cr-day.open{border-style:dashed;border-color:var(--line2)}
.cr-day.taken{background:var(--glass)}
.cr-day.mine{border-color:var(--line2);background:rgba(200,164,92,.16)}
.cr-dow{font-size:9.5px;letter-spacing:.12em;font-weight:700;color:var(--faint)}
.cr-dnum{font-family:var(--serif);font-size:17px;line-height:20px;color:var(--ivory);font-variant-numeric:tabular-nums}
.cr-day.mine .cr-dnum{color:var(--gold2)}
.cr-who{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--gold2)}
.cr-dish{font-size:9.5px;line-height:12px;color:var(--dim);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.cr-day.open .cr-dish{color:var(--gold2)}
.cr-mine{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:11px;font-size:14.5px;border-color:var(--line2)}
.cr-mine>div{flex:1;min-width:0}
.cr-hint{margin-top:11px;text-align:center;font-size:13.5px}
.cr-card{display:block;width:100%;text-align:left;padding:14px 15px;cursor:pointer}
.cr-cardt{font-family:var(--serif);font-size:20px;line-height:1.2;color:var(--ivory)}
.cr-sign{margin-top:11px}
.cr-seal{margin-top:18px;text-align:center;font-size:12.5px;line-height:1.5}
.cr-chipedit{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cr-chipedit .gchip{display:inline-flex;align-items:center;gap:5px}
.cr-x{color:inherit;font-size:14px;line-height:1;opacity:.7}
.cr-give{display:block;margin:14px auto 0;font-size:14px}
/* the card, as paper: a double rule in the sun's ink, each line signed a fraction off level */
.cr-paper{background:#EFEDE6;color:#22333F;border-radius:16px;padding:22px 20px 18px}
.cr-rule{height:3px;border-top:1px solid rgba(168,123,39,.85);border-bottom:1px solid rgba(168,123,39,.85)}
.cr-for{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#8E6014;margin-top:16px}
.cr-title{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.15;margin-top:6px}
.cr-when{font-size:12.5px;color:#5C6B74;margin-top:5px}
.cr-line{margin-top:16px;font-family:var(--serif);font-size:16px;line-height:1.5}
.cr-line .cr-sig{display:block;font-style:italic;font-size:14.5px;color:#5C6B74;margin-top:3px;margin-left:14px}
.cr-line:nth-child(odd) .cr-sig{margin-left:26px}
.cr-faces{display:flex;margin:18px 0 16px}
.cr-faces .av{margin-left:-6px;box-shadow:0 0 0 2px #EFEDE6}
.cr-faces .av:first-child{margin-left:0}
/* the Wing's daylight */
body.shore .cr-day{border-color:rgba(22,50,74,.14)}
body.shore .cr-day.mine{border-color:var(--line2);background:rgba(168,123,39,.13)}
body.shore .cr-tab .gchip:not(.go):not(.gold){color:#3D5058;border-color:rgba(22,50,74,.18);background:rgba(255,255,255,.75)}
/* the desktop room (D-DESK-1): what helps beside the fortnight, the card under them */
@media (min-width:1280px){
  .cr-tab{max-width:1080px;margin:0 auto;padding:0 8px 40px}
  .cr-desk{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start}
  .cr-desk>*{min-width:0}
  .cr-day{min-height:88px}
  .cr-paper{padding:34px 40px 26px}
}

/* starting one, and the ask the household opens (CareStart, CareAsk) */
.cr-who-row{display:flex;align-items:center;gap:11px}
.cr-kinds{display:grid;gap:7px}
.cr-kind,.cr-opt{display:block;width:100%;text-align:left;border-radius:14px;border:1px solid rgba(255,255,255,.12);padding:11px 14px}
.cr-kind.on,.cr-opt.on{border-color:var(--line2);background:rgba(200,164,92,.16)}
.cr-kind b,.cr-opt b{display:block;font-size:15.5px;font-weight:600;color:var(--ivory)}
.cr-kind.on b,.cr-opt.on b{color:var(--gold2)}
.cr-kind span,.cr-opt span{display:block;font-size:13px;color:var(--dim);margin-top:2px}
.cr-setup{display:grid;gap:7px}
.cr-first{margin-top:14px;text-align:center;font-size:13px;line-height:1.5}
.cr-ask .cr-asktitle{font-family:var(--serif);font-size:25px;line-height:1.2;color:var(--ivory);margin-top:14px}
.cr-askrow{display:block;padding:12px 14px;margin-top:9px}
.cr-askrow b{display:block;font-size:15.5px;color:var(--ivory)}
.cr-askrow span{display:block;font-size:13.5px;line-height:1.45;color:var(--dim);margin-top:2px}
body.shore .cr-kind,body.shore .cr-opt{border-color:rgba(22,50,74,.14)}
body.shore .cr-kind.on,body.shore .cr-opt.on{border-color:var(--line2);background:rgba(168,123,39,.13)}

/* ---- Causes: the Board tab of the Causes group (D-WING-CAUSES-1; web/causes.js; boards
   design/wing-seven-0920). The date block is the one new component: the month, the day and
   the weekday as a small calendar leaf beside the post's name. ---- */
.cz-tab{padding:0 2px 28px}
.cz-filters{display:flex;gap:7px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}.cz-filters::-webkit-scrollbar{display:none}
.cz-fchips{display:flex;gap:7px;flex-wrap:wrap}
.cz-fchip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--dim);font-size:14px;white-space:nowrap;flex:none}
.cz-fchip.on{border-color:var(--line2);background:rgba(200,164,92,.16);color:var(--gold2);font-weight:600}
/* the kinds tile two by two at equal widths; the suggested causes ride one
   scrolling row of smaller chips, bled to the sheet's edge - a cloud of
   fourteen pills over seven rows read as "pills all over the place" (Max,
   2026-09-21). Native twin: SegChips grid / strip. */
.cz-fchips.cz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cz-grid2 .cz-fchip{justify-content:center;min-width:0;white-space:normal;text-align:center}
.cz-fchips.cz-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px;gap:6px}
.cz-fchips.cz-strip::-webkit-scrollbar{display:none}
.cz-strip .cz-fchip{min-height:32px;padding:0 12px;font-size:13.5px}
.cz-card{padding:13px 14px;margin-top:10px;cursor:pointer;display:block;width:100%;text-align:left}
.cz-top{display:flex;gap:12px;align-items:flex-start}
.cz-main{flex:1;min-width:0}
.cz-date{flex:none;width:54px;border-radius:12px;border:1px solid var(--line2);background:rgba(200,164,92,.12);display:flex;flex-direction:column;align-items:center;padding:6px 0 5px;line-height:1}
.cz-date.open{border-style:dashed}
.cz-mo{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--gold2)}
.cz-dn{font-family:var(--serif);font-size:25px;color:var(--ivory);margin:3px 0 2px;font-variant-numeric:tabular-nums}
.cz-date.open .cz-dn{font-size:19px;color:var(--gold2);margin:5px 0 4px}
.cz-wd{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--faint)}
.cz-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cz-title{font-family:var(--serif);font-size:20px;line-height:1.22;margin-top:7px;color:var(--ivory)}
.cz-line{font-size:14px;color:var(--dim);margin-top:3px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cz-foot{display:flex;align-items:center;gap:9px;margin-top:12px;min-height:32px}
.cz-open{display:flex;flex-direction:column;min-width:0;font-size:13px;color:var(--dim);line-height:1.3}
.cz-open b{font-size:14.5px;color:var(--ivory);font-weight:600}
.cz-open span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-faces{display:flex;flex:none}.cz-faces .av{margin-left:-6px;box-shadow:0 0 0 2px var(--pane)}.cz-faces .av:first-child{margin-left:0}
.cz-listed{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055);font-size:13px;color:var(--dim);line-height:1.4}
.cz-listed>span:last-child{min-width:0}
.cz-postbtn{margin-top:18px}
.cz-empty{text-align:center;padding:34px 18px 6px}
.cz-emptyt{font-family:var(--serif);font-size:23px;color:var(--ivory);line-height:1.2}
.cz-empty p{font-size:15px;line-height:1.55;margin:9px auto 0;max-width:340px}
.cz-listedchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.cz-note{font-style:italic;font-size:16px;line-height:1.5;color:var(--ivory);margin-top:14px}
.cz-host{display:flex;align-items:center;gap:11px;margin-top:14px}
.cz-nm{font-size:16px;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-sub{font-size:12.5px;color:var(--dim)}
.cz-linkbtn{display:flex;justify-content:center;margin-top:14px}
.cz-rows{padding:2px 14px}
.cz-prow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);min-height:56px}
.cz-prow:last-child{border-bottom:0}
.cz-seatn{font-size:12.5px;font-weight:600;color:var(--gold2);border:1px solid var(--line2);background:rgba(200,164,92,.16);border-radius:999px;padding:3px 9px;white-space:nowrap;flex:none}
.cz-reach{margin-top:14px;padding:15px;border-color:var(--line2);background:linear-gradient(180deg,rgba(200,164,92,.16),transparent 80%),var(--glass)}
.cz-reach .cz-listed{border-top:0;padding-top:0}
.cz-mine{margin-top:16px;text-align:center;font-family:var(--serif);font-size:19px;color:var(--gold2)}
.cz-money{text-align:center;margin-top:10px;font-size:13px;line-height:1.5}
.cz-removelink{display:block;margin:14px auto 0;font-size:14px;color:#DEA79C}
body.shore .cz-removelink{color:#A9432F}
.cz-fld{margin-top:14px}
.cz-lb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 2px 6px;display:flex;align-items:baseline;gap:8px}
.cz-lbnote{letter-spacing:0;text-transform:none;font-weight:400;font-size:12px;color:var(--dim)}
.cz-seats{display:flex;align-items:center;gap:12px}
.cz-step{display:flex;align-items:center;gap:4px;flex:none}
.cz-step button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:var(--ivory);font-size:20px;line-height:1;display:grid;place-items:center}
.cz-step button:disabled{opacity:.35}
.cz-step b{min-width:34px;text-align:center;font-family:var(--serif);font-size:24px;color:var(--ivory);font-variant-numeric:tabular-nums}
/* ── The partner forum's Forum tab (D-WING-FORUM-1, web/wing-forum.js) ── */
.wf-wrap{padding:0 2px 28px}
.wf-head{display:flex;align-items:center;gap:13px;padding:16px 2px 4px}
.wf-crest{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-size:25px;color:var(--wf-hue,var(--gold2));border:1px solid var(--line2);background:color-mix(in srgb,var(--wf-hue,#C8A45C) 16%,transparent)}
.wf-name{font-size:25px;line-height:1.14;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-sub{font-size:13px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-next{padding:13px 14px;margin-top:14px;cursor:pointer;display:block;width:100%;text-align:left}
.wf-top{display:flex;gap:12px;align-items:flex-start}
.wf-main{flex:1;min-width:0}
.wf-date{flex:none;width:54px;border-radius:12px;border:1px solid var(--line2);background:rgba(200,164,92,.12);display:flex;flex-direction:column;align-items:center;padding:6px 0 5px;line-height:1}
.wf-mo{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--gold2)}
.wf-dn{font-family:var(--serif);font-size:25px;color:var(--ivory);margin:3px 0 2px;font-variant-numeric:tabular-nums}
.wf-wd{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--faint)}
.wf-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wf-title{font-family:var(--serif);font-size:20px;line-height:1.22;margin-top:7px;color:var(--ivory)}
.wf-line{font-size:14px;color:var(--dim);margin-top:3px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-foot{display:flex;align-items:center;gap:9px;margin-top:12px;min-height:30px}
.wf-faces{display:flex;flex:none}.wf-faces .av{margin-left:-6px;box-shadow:0 0 0 2px var(--pane)}.wf-faces .av:first-child{margin-left:0}
.wf-going{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wf-more{font-size:13px;color:var(--gold2);white-space:nowrap;flex:none}
.wf-none{margin-top:14px;padding:18px 16px;text-align:center}
.wf-rows{padding:2px 14px}
.wf-prow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);min-height:56px;width:100%;text-align:left}
.wf-prow:last-child{border-bottom:0}
.wf-nm{font-size:16px;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-sub2{font-size:12.5px;color:var(--dim);margin-top:1px}
.wf-chev{font-size:22px;color:var(--faint);flex:none;line-height:1}
.wf-mtop{padding-top:2px}
.wf-mtitle{font-size:26px;line-height:1.16;color:var(--ivory);margin-top:9px}
.wf-host{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:14px;color:var(--dim)}
.wf-note{font-style:italic;font-size:16px;line-height:1.5;color:var(--ivory);margin-top:14px}
.wf-video{display:flex;justify-content:center;margin-top:14px}
.wf-agenda{padding:4px 14px}
.wf-arow{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.wf-arow:last-child{border-bottom:0}
.wf-at{flex:none;width:68px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--gold2);font-variant-numeric:tabular-nums}
.wf-arow b{display:block;font-size:15.5px;font-weight:600;color:var(--ivory);line-height:1.35}
.wf-anote{display:block;font-size:13.5px;color:var(--dim);line-height:1.45;margin-top:3px}
.wf-mine{margin-top:16px;text-align:center;font-family:var(--serif);font-size:19px;color:var(--gold2)}
.wf-mine.off{color:var(--dim)}
.wf-cannot{font-size:13px;line-height:1.5;margin:9px 2px 0}
.wf-offlink{display:block;margin:14px auto 0;font-size:14px;color:#DEA79C}
body.shore .wf-offlink{color:#A9432F}
.wf-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:16px;padding:13px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);color:var(--ivory);font-size:15.5px}
.wf-toggle.on{border-color:var(--line2);background:rgba(200,164,92,.14);color:var(--gold2)}
.wf-dot{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);flex:none}
.wf-toggle.on .wf-dot{border-color:var(--gold2);background:var(--gold2)}
.wf-agrow{margin-top:14px;padding:12px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:var(--glass)}
.wf-agtop{display:flex;align-items:center;gap:9px}
.wf-agtime{flex:1;margin:0}
.wf-agx{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:var(--dim);font-size:20px;line-height:1;display:grid;place-items:center}
.wf-agrow .inp{margin-top:8px}
.cz-inchat{width:min(316px,100%)}.cz-inchat .cz-card{margin-top:0;border-radius:16px}
/* the own-message rules outrank a bare kind, so the card names them too (the Games card's rule) */
.ch-bub.cause,.ch-m.mine .ch-bub.cause,body.shore .ch-m.mine .ch-bub.cause{background:none;border:0;padding:0;border-radius:0;max-width:100%}
.ch-bub.cause .ch-tm{margin:4px 6px 0 8px}
/* the Wing's daylight: the leaf in linen and sun, the hairlines in harbor */
body.shore .cz-date{background:rgba(232,207,147,.28);border-color:rgba(168,123,39,.4)}
body.shore .cz-mo,body.shore .cz-date.open .cz-dn{color:#8E6014}
body.shore .cz-tab .gchip:not(.go):not(.gold),body.shore #cz-post-view .gchip:not(.go):not(.gold),body.shore .cz-inchat .gchip:not(.go):not(.gold){color:#3D5058;border-color:rgba(22,50,74,.18);background:rgba(255,255,255,.75)}
body.shore .cz-listed,body.shore .cz-prow{border-color:rgba(22,50,74,.08)}
body.shore .cz-fchip,body.shore .cz-step button{border-color:rgba(22,50,74,.16)}
body.shore .cz-fchip.on,body.shore .cz-seatn{border-color:var(--line2);background:rgba(168,123,39,.13)}
/* the desktop room (D-DESK-1): the board two across under a filter row that keeps its width */
@media (min-width:1280px){
  .cz-tab{max-width:1080px;margin:0 auto;padding:0 8px 40px}
  /* the kids block at the desk (D-WING-KIDS-1, D-DESK-1): the age bands sit
     two across instead of stacking down an empty column */
  .kd-card{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding-bottom:16px}
  .kd-card>.kd-peers{grid-column:1/-1}
  .kd-frows{columns:2;column-gap:22px}
  .kd-frows>.kd-frow{break-inside:avoid}
  .cz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:start}
  .cz-grid>*{min-width:0}.cz-grid .cz-card{margin-top:0}
  /* the forum at the desk (D-WING-FORUM-1, D-DESK-1): a lighter re-seating -
     the crest and the next meeting lead one column, the people and the
     meetings behind take the other, rather than stacking down an empty page */
  .wf-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
  .wf-cols>.wf-col{min-width:0}
  .wf-cols>.wf-col:nth-child(2) .sect:first-child{margin-top:26px}
  .wf-head{padding-top:22px}
  .wf-name{font-size:30px}
  .cz-postbtn{max-width:320px;margin-left:auto;margin-right:auto;display:block}
  .cz-empty{padding-top:60px}
}

/* ---- Travel: the Places tab (D-PLACES-1; web/places.js; boards design/travel-places-0918). The compass is
   the one new component: the places around a point drawn to scale by true bearing and distance, rings in
   minutes, a gold house for every hotel a member owns or runs. The ground under it (D-PLACES-2,
   web/places-map.js) is streets, water and parks from a public tile host, painted in the house palette. ---- */
.plc-tab{padding:0 2px 28px}
/* the Near me / A city switch: the pane's width on a phone, capped and centered under the room's own Chat / Places
   tabs wherever the pane is wider - a tablet, the desk (Max, 2026-09-19) */
.plc-seg{margin:6px auto 0;max-width:420px}
.plc-seg button{flex:1;min-width:0}
.plc-block{margin-top:12px;padding:26px 20px 18px;text-align:center;border-color:var(--line2)}
.plc-block-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:50%;color:var(--gold2);background:rgba(200,164,92,.16);border:1px solid var(--line2)}
.plc-block-t{font-size:21px;line-height:1.2;margin-top:14px}
.plc-block-b{font-size:14.5px;line-height:1.5;margin:8px auto 16px;max-width:340px}
.plc-block .btn+.btn{margin-top:8px}
.plc-note{font-size:14px;line-height:1.5;color:var(--dim);text-align:center;margin:12px 8px 0}
.plc-hello{margin-top:12px;padding:18px 16px 16px;border-color:var(--line2)}
.plc-head{display:flex;align-items:flex-end;gap:10px;margin-top:14px}
.plc-title{font-size:25px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-search{display:flex;align-items:center;gap:9px;margin-top:12px;height:46px;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);padding:0 14px;color:var(--faint)}
.plc-search input{flex:1;min-width:0;border:0;background:none;padding:0;height:100%;font-size:16px;color:var(--ivory)}
.plc-search input:focus{outline:none}
.plc-search:focus-within{border-color:var(--line2)}
.plc-cities{padding:2px 14px;margin-top:8px}
.plc-city{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 0;min-height:56px;border-bottom:1px solid rgba(255,255,255,.055)}
.plc-city:last-child{border-bottom:0}
.plc-cn{display:block;font-family:var(--serif);font-size:19px;line-height:1.15;color:var(--ivory)}
.plc-cs{display:block;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-ct{margin-top:8px}
.plc-ct>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0 16px;border-radius:16px;border:1px solid rgba(200,164,92,.15);background:var(--glass);cursor:pointer;font-size:16px;color:var(--ivory)}
.plc-ct>summary::-webkit-details-marker{display:none}
.plc-ct[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.plc-ct[open]>.plc-cities{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.plc-cmp{position:relative;width:100%;max-width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,#13203A 0%,#0B1322 55%,#080C16 100%)}
.plc-cmp svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.plc-ground{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.plc-ground.on{opacity:1}
.plc-pn{position:absolute;transform:translate(-50%,-50%);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;color:rgba(174,182,199,.62);text-shadow:0 0 3px #0C1526,0 0 3px #0C1526}
.plc-credit{margin:5px 4px 0;text-align:right;font-size:10.5px;color:var(--faint)}
.plc-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.plc-ring{fill:none;stroke:rgba(200,164,92,.26);stroke-width:1}
.plc-ring.out{stroke:rgba(200,164,92,.5);stroke-width:1.2}
.plc-tick{stroke:rgba(200,164,92,.4);stroke-width:1}
.plc-tick.maj{stroke:rgba(232,206,147,.85);stroke-width:1.5}
.plc-axis{stroke:rgba(200,164,92,.1);stroke-width:1}
.plc-cardinal{font-size:10px;font-weight:700;letter-spacing:.12em;fill:#E8CE93;text-anchor:middle;font-family:var(--sans)}
.plc-rl{font-size:9.5px;fill:rgba(174,182,199,.98);font-family:var(--sans);letter-spacing:.04em;paint-order:stroke;stroke:#0C1526;stroke-width:3px;stroke-linejoin:round}
.plc-pt{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;padding:4px;border-radius:50%}
.plc-pt:focus-visible{outline:2px solid #E8CE93;outline-offset:1px}
.plc-dot{display:block;border-radius:50%}
.plc-dot.table{width:9px;height:9px;background:#E9DFC7;box-shadow:0 0 0 2px rgba(233,223,199,.16)}
.plc-dot.bar{width:8px;height:8px;background:#D98F6B;border-radius:2px;transform:rotate(45deg)}
.plc-dot.cafe{width:8px;height:8px;background:#9DB7D1}
.plc-star{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#0B1322;border:1px solid #E8CE93;color:#E8CE93;font-size:11px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.plc-star.bar{color:#F0B08F;border-color:#D98F6B}
.plc-fold{min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#E9DFC7;background:rgba(19,32,58,.95);border:1px solid rgba(233,223,199,.4);font-variant-numeric:tabular-nums}
.plc-fold.top{color:#E8CE93;border-color:#E8CE93}
.plc-house{position:relative;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,#E3C57F,#AE8A44);color:#161005;box-shadow:0 0 0 4px rgba(200,164,92,.2),0 3px 10px rgba(0,0,0,.5)}
.plc-house svg{position:static;width:15px;height:15px}
.plc-hn{position:absolute;right:-8px;top:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#0B1322;color:#E8CE93;border:1px solid #E8CE93;font-size:10.5px;font-weight:700;line-height:15px;text-align:center;font-variant-numeric:tabular-nums}
.plc-house.pick{background:#0B1322;color:#E8CE93;border:1.5px solid #E8CE93;box-shadow:0 0 0 4px rgba(200,164,92,.12),0 3px 10px rgba(0,0,0,.5)}
.plc-house.here{width:30px;height:30px;border-radius:10px}
.plc-lbl{position:absolute;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:#F1EBDD;white-space:nowrap;background:rgba(8,11,18,.62);padding:1px 6px;border-radius:7px;line-height:15px;pointer-events:none}
.plc-lbl.g{color:#E8CE93}
.plc-you{display:block;width:16px;height:16px;border-radius:50%;background:#E8CE93;border:3px solid #0B1322;box-shadow:0 0 0 2px #E8CE93,0 0 0 12px rgba(232,206,147,.14),0 0 0 24px rgba(232,206,147,.07)}
.plc-scale{position:absolute;left:12px;bottom:10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold2);background:rgba(8,11,18,.6);padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.plc-zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:rgba(8,11,18,.7)}
.plc-zoom button{width:40px;height:40px;display:grid;place-items:center;color:#E8CE93;font-size:19px}
.plc-zoom button+button{border-top:1px solid var(--line)}
.plc-zoom button[disabled]{opacity:.4;cursor:default}
.plc-chips{display:flex;gap:7px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.plc-chips::-webkit-scrollbar{display:none}
.plc-chips .rq-fchip{flex:none}
.plc-card{display:flex;gap:12px;padding:11px;margin-top:10px;width:100%;text-align:left;cursor:pointer}
button.plc-card{font:inherit;color:inherit}
.plc-ph{width:84px;height:84px;border-radius:13px;object-fit:cover;flex:none;background:#1A2437;border:1px solid var(--line)}
.plc-in{flex:1;min-width:0;display:flex;flex-direction:column}
.plc-nm{font-family:var(--serif);font-size:17.5px;line-height:1.2;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-bd{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--gold2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-ds{font-size:13px;color:var(--dim);line-height:1.4;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plc-ft{font-size:12.5px;color:var(--faint);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc-ft b{color:#A9DDBE;font-weight:600}
.plc-who{font-size:12.5px;color:var(--gold2);margin-top:3px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.plc-staycard{border-color:var(--line2);background:linear-gradient(120deg,rgba(200,164,92,.16),transparent 60%),var(--glass)}
.plc-anchor{display:flex;align-items:center;gap:11px;padding:11px 13px;margin-top:12px;border-color:var(--line2);background:linear-gradient(120deg,rgba(200,164,92,.16),transparent 70%),var(--glass)}
.plc-hero{position:relative;height:220px;border-radius:18px;overflow:hidden}
.plc-hero img{width:100%;height:100%;object-fit:cover;display:block}
.plc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,18,0) 45%,rgba(8,11,18,.78))}
.plc-heroon{position:absolute;left:14px;right:14px;bottom:12px;z-index:1}
.plc-inchat{width:min(300px,100%)}
/* the Wing's daylight: the compass on fog, the harbor ink for the ticks */
body.shore .plc-cmp{background:radial-gradient(circle at 50% 50%,#FFFFFF 0%,#EEF3F1 60%,#E4ECE9 100%)}
body.shore .plc-ring{stroke:rgba(94,143,139,.4)}body.shore .plc-ring.out{stroke:rgba(94,143,139,.75)}
body.shore .plc-tick{stroke:rgba(94,143,139,.55)}body.shore .plc-tick.maj{stroke:#16324A}
body.shore .plc-axis{stroke:rgba(22,50,74,.07)}body.shore .plc-cardinal{fill:#16324A}body.shore .plc-rl{fill:#4E606B;stroke:#F4F8F6}
body.shore .plc-hn{background:#fff;color:#8E6014;border-color:#8E6014}
body.shore .plc-pn{color:rgba(34,51,63,.6);text-shadow:0 0 3px #F4F8F6,0 0 3px #F4F8F6}
body.shore .plc-block-ic{color:#8E6014;background:rgba(168,123,39,.13)}
body.shore .plc-dot.table{background:#22333F;box-shadow:0 0 0 2px rgba(34,51,63,.12)}
body.shore .plc-dot.bar{background:#B5623C}body.shore .plc-dot.cafe{background:#5E8F8B}
body.shore .plc-star{background:#fff;border-color:#8E6014;color:#8E6014;box-shadow:0 2px 6px rgba(22,50,74,.2)}
body.shore .plc-fold{background:#fff;color:#22333F;border-color:rgba(22,50,74,.35)}body.shore .plc-fold.top{color:#8E6014;border-color:#8E6014}
body.shore .plc-house.pick{background:#fff;color:#8E6014;border-color:#8E6014}
body.shore .plc-lbl{color:#22333F;background:rgba(255,255,255,.82)}body.shore .plc-lbl.g{color:#7A5210}
body.shore .plc-you{border-color:#fff;background:#A87B27;box-shadow:0 0 0 2px #A87B27,0 0 0 12px rgba(168,123,39,.14),0 0 0 24px rgba(168,123,39,.07)}
body.shore .plc-scale,body.shore .plc-zoom{background:rgba(255,255,255,.85)}body.shore .plc-zoom button{color:#8E6014}
body.shore .plc-search{border-color:rgba(22,50,74,.14);background:rgba(255,255,255,.8)}body.shore .plc-search input{color:#22333F}
body.shore .plc-city,body.shore .plc-ct>summary{border-color:rgba(22,50,74,.1)}
body.shore .plc-ph{background:#E4ECE9}
body.shore .plc-staycard,body.shore .plc-anchor{background:linear-gradient(120deg,rgba(168,123,39,.13),transparent 60%),var(--glass)}
/* the desktop room (D-DESK-1): the compass takes the left of the pane, the list reads beside it */
@media (min-width:1280px){
  .plc-tab{max-width:1080px;margin:0 auto;padding:0 8px 40px}
  /* the room is a pane beside the Messages list, about 740px at 1440: the list keeps the wider half so a card's name and distance read whole */
  .plc-desk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:24px;align-items:start}
  .plc-desk>*{min-width:0}
  .plc-desk>div:first-child{position:sticky;top:12px;max-width:500px}
  .plc-seg{max-width:360px}
}

/* the partner-forum seat picker (D-WING-FORUM-1, web/admin.js) */
.wf-a-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055);cursor:pointer;min-height:52px}
.wf-a-row:last-child{border-bottom:0}
.wf-a-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-a-row.on .nm{color:var(--gold2)}
.wf-a-tick{width:18px;flex:none;text-align:right;color:var(--gold2)}
/* ── Which kids are coming (D-WING-KIDS-1, web/kids.js) ── */
.kd-host:empty{display:none}
.kd-mine{display:flex;flex-wrap:wrap;gap:8px}
.kd-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--ivory);font-size:15px}
.kd-chip.on{border-color:var(--line2);background:rgba(200,164,92,.18);color:var(--gold2);font-weight:600}
.kd-chip:disabled{opacity:.4}
.kd-chip .kd-age{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.kd-chip.on .kd-age{color:var(--gold2)}
.kd-hint{font-size:13.5px;line-height:1.5;margin:9px 2px 0}
.kd-none{font-size:14.5px;line-height:1.5;margin:6px 2px 0}
.kd-card{padding:4px 15px 14px}
.kd-band{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.kd-band:last-of-type{border-bottom:0}
.kd-blabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:8px}
.kd-kids{display:flex;flex-wrap:wrap;gap:8px}
.kd-kid{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:var(--glass);max-width:100%}
.kd-kid.mine{border-color:var(--line2);background:rgba(200,164,92,.14)}
.kd-kid b{font-size:15px;font-weight:600;color:var(--ivory);white-space:nowrap}
.kd-kid.mine b{color:var(--gold2)}
.kd-kid .kd-age{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.kd-fam{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kd-peers{font-size:14.5px;line-height:1.5;color:var(--gold2);margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.055)}
.kd-frows{padding:2px 14px}
.kd-frow{align-items:flex-start;gap:12px}
.kd-fname{font-size:16px;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-fkids{font-size:13.5px;color:var(--dim);line-height:1.45;margin-top:2px}
.kd-fschools{font-size:12.5px;color:var(--faint);line-height:1.4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}