/* porch — every rule reads these tokens. Each theme defines the full set,
   so a theme preview (an element with its own data-theme) renders correctly
   inside any other theme. --light/--light2 are the porch light and never change. */
:root,[data-theme="paper"]{
  --hair:#e4e2dd;--side:#eeebe5;--side-grad:var(--side);--list:#f8f7f4;--pane:#fff;--status:#f1efea;
  --ink:#1d1d1f;--ink2:#6e6e73;--ink3:#a1a1a6;--ink4:#8e8e93;
  --on:rgba(0,0,0,.075);--sel:#e5ebf5;--field:rgba(0,0,0,.05);--seg:rgba(0,0,0,.055);--seg-on:#fff;
  --soft:#f7f6f3;--pin:#f6f3ec;--rail:#ebe8e2;--dot:#d6d2ca;
  --in:#e9e9eb;--in-ink:#000;--out:#0a84ff;--out-ink:#fff;
  --blue:#0a84ff;--on-accent:#fff;--amber:#a86a00;--ok:#2f9a4a;--card:rgba(255,255,255,.6);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:var(--blue);--s-amber:var(--amber);
  --post-bg:var(--ink);--post-ink:#fff;--font-display:inherit;--scroll:rgba(0,0,0,.18);--shadow:0 30px 80px rgba(18,28,48,.25);
  color-scheme:light;
}
[data-theme="onedark"]{
  --hair:#181a1f;--side:#21252b;--side-grad:var(--side);--list:#252930;--pane:#282c34;--status:#21252b;
  --ink:#d7dae0;--ink2:#9da5b4;--ink3:#6b717d;--ink4:#7f848e;
  --on:rgba(255,255,255,.07);--sel:#2c3a52;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.06);--seg-on:#3a404b;
  --soft:#2f343f;--pin:#2f343f;--rail:#3a3f4b;--dot:#4b5263;
  --in:#3a3f4b;--in-ink:#e6e6e6;--out:#3d8ef0;--out-ink:#fff;
  --blue:#61afef;--on-accent:#1e2127;--amber:#ffc65a;--ok:#98c379;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:var(--blue);--s-amber:var(--amber);
  --post-bg:var(--ink);--post-ink:var(--pane);--font-display:inherit;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* San Francisco: fog over the bay, International Orange from the bridge, set in SF Pro. */
[data-theme="sanfrancisco"]{
  --hair:#d5dade;--side:#e8ecef;--side-grad:linear-gradient(180deg,#e2e7eb 0%,#ebeef1 55%,#f2ebe7 100%);--list:#f3f5f6;--pane:#fcfdfd;--status:#e8ecef;
  --ink:#18202a;--ink2:#566271;--ink3:#9aa4ae;--ink4:#78838f;
  --on:rgba(24,32,42,.08);--sel:#f8e1db;--field:rgba(24,32,42,.05);--seg:rgba(24,32,42,.06);--seg-on:#fff;
  --soft:#eef1f3;--pin:#f6ede9;--rail:#dde2e6;--dot:#c4cbd2;
  --in:#e4e9ed;--in-ink:#18202a;--out:#c0362c;--out-ink:#fff;
  --blue:#c0362c;--on-accent:#fff;--amber:#a86a00;--ok:#2f8f5b;--card:rgba(255,255,255,.7);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:var(--blue);--s-amber:var(--amber);
  --post-bg:#c0362c;--post-ink:#fff;--font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif;--scroll:rgba(24,32,42,.18);--shadow:0 30px 80px rgba(24,32,42,.25);
  color-scheme:light;
}
/* Santa Monica: sunset over the pier on the sidebar, sand and Pacific teal everywhere else. */
[data-theme="santamonica"]{
  --hair:#ead8c4;--side:#fbe0cf;--side-grad:linear-gradient(185deg,#ffd6be 0%,#fbc6bd 36%,#f7d9c8 70%,#f3e6d6 100%);--list:#fdf6ee;--pane:#fffaf4;--status:#f6e7d7;
  --ink:#2a211c;--ink2:#76625a;--ink3:#b39e90;--ink4:#987f72;
  --on:rgba(42,33,28,.08);--sel:#d4ede8;--field:rgba(42,33,28,.05);--seg:rgba(42,33,28,.06);--seg-on:#fffaf4;
  --soft:#f8ecdf;--pin:#fbeee1;--rail:#efdccb;--dot:#dcc3ad;
  --in:#f3e5d8;--in-ink:#2a211c;--out:#1d8a84;--out-ink:#fff;
  --blue:#1d8a84;--on-accent:#fff;--amber:#a2610a;--ok:#2f8f5b;--card:rgba(255,255,255,.5);
  --s-ink:#3a2a22;--s-ink2:#7d5d50;--s-ink4:#a07c6c;--s-on:rgba(58,42,34,.09);--s-hover:rgba(58,42,34,.06);--s-card:rgba(255,255,255,.45);--s-link:#1d8a84;--s-amber:#a2610a;
  --post-bg:#1d8a84;--post-ink:#fff;--font-display:"Avenir Next","Avenir",-apple-system,sans-serif;--scroll:rgba(42,33,28,.2);--shadow:0 30px 80px rgba(90,50,30,.22);
  color-scheme:light;
}
/* Tokyo: Shinjuku after dark. Indigo night, neon pink and cyan, Hiragino for type. */
[data-theme="tokyo"]{
  --hair:#090a16;--side:#11122a;--side-grad:linear-gradient(180deg,#181b40 0%,#11122a 55%,#1b1031 100%);--list:#14152e;--pane:#181a36;--status:#10112a;
  --ink:#eeeaff;--ink2:#a9a7d6;--ink3:#666894;--ink4:#8586b4;
  --on:rgba(255,255,255,.08);--sel:#2c2052;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.07);--seg-on:#2f3163;
  --soft:#20224a;--pin:#241d45;--rail:#2d2f58;--dot:#40426f;
  --in:#272a55;--in-ink:#eeeaff;--out:#ff3d7f;--out-ink:#fff;
  --blue:#2de2e6;--on-accent:#0b0c1d;--amber:#ffc65a;--ok:#7ef0b0;--card:rgba(255,255,255,.05);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:#2de2e6;--s-amber:#ffc65a;
  --post-bg:#ff3d7f;--post-ink:#fff;--font-display:"Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,sans-serif;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* New York: newsprint pages, a black subway-sign sidebar, taxi yellow, Helvetica. */
[data-theme="newyork"]{
  --hair:#d4d0c7;--side:#141414;--side-grad:#141414;--list:#f3f1ea;--pane:#fbfaf6;--status:#e9e6de;
  --ink:#121212;--ink2:#55524b;--ink3:#9a968c;--ink4:#7b776e;
  --on:rgba(0,0,0,.07);--sel:#fff0ad;--field:rgba(0,0,0,.05);--seg:rgba(0,0,0,.06);--seg-on:#fff;
  --soft:#efece4;--pin:#f6efd6;--rail:#e2ddd2;--dot:#c9c3b7;
  --in:#e9e6de;--in-ink:#121212;--out:#f7c600;--out-ink:#121212;
  --blue:#0039a6;--on-accent:#fff;--amber:#946000;--ok:#1f7a45;--card:rgba(255,255,255,.07);
  --s-ink:#f3f1ea;--s-ink2:#b8b4aa;--s-ink4:#8d897f;--s-on:rgba(255,255,255,.12);--s-hover:rgba(255,255,255,.07);--s-card:rgba(255,255,255,.07);--s-link:#f7c600;--s-amber:#ffc65a;
  --post-bg:#f7c600;--post-ink:#121212;--font-display:"Helvetica Neue",Helvetica,Arial,sans-serif;--scroll:rgba(0,0,0,.2);--shadow:0 30px 80px rgba(0,0,0,.28);
  color-scheme:light;
}

/* City themes follow the time of day (sky.js sets data-time on <html>):
   San Francisco, Santa Monica and New York go dark after sunset, Tokyo
   comes up light in the daytime. */
[data-theme="sanfrancisco"][data-time="night"]{
  --hair:#0c1016;--side:#141a22;--side-grad:var(--side);--list:#161c24;--pane:#1a212b;--status:#141a22;
  --ink:#e4e9ef;--ink2:#9ba7b4;--ink3:#64707d;--ink4:#7f8b98;
  --on:rgba(255,255,255,.07);--sel:#3a2621;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.06);--seg-on:#2b333e;
  --soft:#202731;--pin:#2a2324;--rail:#29303a;--dot:#3b4450;
  --in:#252d38;--in-ink:#e4e9ef;--out:#c9402d;--out-ink:#fff;
  --blue:#ff7a59;--on-accent:#1b0d09;--amber:#ffc65a;--ok:#5fd08a;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:#ff7a59;--s-amber:#ffc65a;
  --post-bg:#c0362c;--post-ink:#fff;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="santamonica"][data-time="night"]{
  --hair:#081016;--side:#0f1a22;--side-grad:var(--side);--list:#111d26;--pane:#14212b;--status:#0f1a22;
  --ink:#f3eadf;--ink2:#aaa297;--ink3:#6c7378;--ink4:#8b8a84;
  --on:rgba(255,255,255,.07);--sel:#123b3b;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.06);--seg-on:#22323d;
  --soft:#1a2934;--pin:#2a2431;--rail:#21313c;--dot:#36464f;
  --in:#1f2e39;--in-ink:#f3eadf;--out:#1d8a84;--out-ink:#fff;
  --blue:#4fd1c5;--on-accent:#06201e;--amber:#ffc65a;--ok:#6fe0a0;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:rgba(255,255,255,.08);--s-hover:rgba(255,255,255,.05);--s-card:rgba(255,255,255,.05);--s-link:#4fd1c5;--s-amber:#ffc65a;
  --post-bg:#1d8a84;--post-ink:#fff;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="tokyo"][data-time="day"]{
  --hair:#dcdee4;--side:#eef0f4;--side-grad:var(--side);--list:#f7f8fa;--pane:#fff;--status:#eef0f4;
  --ink:#16172b;--ink2:#5d6075;--ink3:#9a9cae;--ink4:#7b7e92;
  --on:rgba(22,23,43,.07);--sel:#ffe1ea;--field:rgba(22,23,43,.05);--seg:rgba(22,23,43,.06);--seg-on:#fff;
  --soft:#f0f1f5;--pin:#fdeef2;--rail:#e2e4ea;--dot:#c9ccd6;
  --in:#eceef3;--in-ink:#16172b;--out:#e5326e;--out-ink:#fff;
  --blue:#d42d60;--on-accent:#fff;--amber:#a86a00;--ok:#1f8a5b;--card:rgba(255,255,255,.7);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:var(--on);--s-hover:var(--field);--s-card:var(--card);--s-link:#0b8a91;--s-amber:#a86a00;
  --post-bg:#e5326e;--post-ink:#fff;--scroll:rgba(22,23,43,.18);--shadow:0 30px 80px rgba(22,23,43,.22);
  color-scheme:light;
}
[data-theme="newyork"][data-time="night"]{
  --hair:#050505;--side:#0b0b0c;--side-grad:var(--side);--list:#111112;--pane:#151516;--status:#0e0e0f;
  --ink:#f1eee6;--ink2:#a8a49a;--ink3:#6c6962;--ink4:#8a867c;
  --on:rgba(255,255,255,.07);--sel:#3a3210;--field:rgba(255,255,255,.06);--seg:rgba(255,255,255,.07);--seg-on:#2a2a2b;
  --soft:#1d1d1e;--pin:#2a2614;--rail:#262627;--dot:#3a3a3b;
  --in:#232324;--in-ink:#f1eee6;--out:#f7c600;--out-ink:#121212;
  --blue:#f7c600;--on-accent:#121212;--amber:#ffc65a;--ok:#5fd08a;--card:rgba(255,255,255,.04);
  --s-ink:var(--ink);--s-ink2:var(--ink2);--s-ink4:var(--ink4);--s-on:rgba(255,255,255,.1);--s-hover:rgba(255,255,255,.06);--s-card:rgba(255,255,255,.06);--s-link:#f7c600;--s-amber:#ffc65a;
  --post-bg:#f7c600;--post-ink:#121212;--scroll:rgba(255,255,255,.16);--shadow:0 30px 80px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* The sidebar of a city theme opens on a view of the city. (On smaller
   screens the sidebar is a fixed drawer, which already holds the view.) */
@media (min-width:1081px){.side:has(>.cityview){position:relative}}
.cityview{position:absolute;left:0;right:0;top:0;height:118px;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.side:has(>.cityview) .brand{position:relative;margin-bottom:62px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--side) 55%,transparent))}
.side:has(>.cityview) .postbtn{position:relative}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--hair);color:var(--ink);font:12px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
::placeholder{color:var(--ink3);opacity:1}
.side,.items,.pbody,.msgs,.stories,dialog{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.mono{font-family:"SF Mono",ui-monospace,Menlo,monospace}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.amber{color:var(--light)}
b{font-weight:650}
.sp{flex:1}
.empty{padding:28px 18px;color:var(--ink3);text-align:center;font-size:12px}

.lv.off{display:none}

/* layout */
.app{height:100vh;display:grid;grid-template-columns:220px 360px minmax(400px,1fr) 440px;grid-template-rows:minmax(0,1fr) 28px;gap:1px;background:var(--hair)}
@media (max-width:1320px){.app{grid-template-columns:200px 320px minmax(360px,1fr) 380px}}
@media (max-width:1080px){.app{grid-template-columns:300px minmax(340px,1fr) 340px}}
.side,.list,.post,.room{min-height:0;overflow:hidden}

/* sidebar */
.side{background:var(--side-grad);color:var(--s-ink);padding:16px 12px 14px;display:flex;flex-direction:column;overflow-y:auto}
.brand{display:block;padding:0 8px;font-size:24px;line-height:1;color:var(--s-ink)}
.postbtn{margin:14px 4px 0;height:32px;border-radius:16px;background:var(--post-bg);color:var(--post-ink);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;flex:none}
.postbtn:hover{filter:brightness(1.08)}
.invbtn{margin:6px 4px 0;height:30px;border-radius:15px;background:var(--s-card);color:var(--s-ink);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;flex:none}
.invbtn:hover{background:var(--s-hover)}
.side:has(>.cityview) .invbtn{position:relative}
.linkrow{display:flex;gap:6px}
.linkrow input{flex:1;min-width:0;border:0;border-radius:10px;background:var(--field);padding:0 12px;height:32px;font-size:13px;outline:none;color:var(--ink)}
#invite .invites{padding-top:0}
#invite .invites .stack{display:flex;flex:none}
#invite .invites .stack .bdg+.bdg{margin-left:-4px}
#invite .invites small a{color:inherit}
#invite .chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.postbtn .ic{width:14px;height:14px;stroke-width:2.2}
.sb-h{font-size:10.5px;font-weight:600;color:var(--s-ink4);margin:20px 8px 4px;display:flex;justify-content:space-between;align-items:center;letter-spacing:.2px}
.side .lnk{color:var(--s-link)}
.lnk{color:var(--blue);font-size:11px;font-weight:500}
.lnk:hover{text-decoration:underline}
.sb-i{display:flex;align-items:center;gap:9px;min-height:28px;padding:0 8px;border-radius:7px;font-size:12.5px;color:var(--s-ink);text-align:left;width:100%}
a.sb-i:hover,button.sb-i:hover{background:var(--s-hover)}
.sb-i .ic{color:var(--s-ink2)}
.sb-i .n{margin-left:auto;font-size:11px;color:var(--s-ink4);font-variant-numeric:tabular-nums}
.sb-i.on{background:var(--s-on);font-weight:500}
.sb-i.r{font-size:12px;color:var(--s-ink2)}
.sb-i .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-i .x{color:var(--s-ink4);font-size:15px;line-height:1;padding:2px 4px;border-radius:4px}
.sb-i .x:hover{color:var(--s-ink)}
.sb-i.dim{color:var(--s-ink4)}
.shield{margin-top:auto;background:var(--s-card);border-radius:12px;padding:12px 12px 13px;flex:none}
.shield .t{display:flex;align-items:center;gap:6px;font-weight:650}
.shield .t .ic{color:#34c759}
.shield .big{font-size:20px;font-weight:700;letter-spacing:-.4px;margin-top:6px}
.shield .s{font-size:10.5px;color:var(--s-ink2);line-height:1.45;margin-top:2px}
.acct{display:flex;align-items:center;gap:9px;margin-top:12px;padding:0 4px;flex:none}
.acct .who2{min-width:0;flex:1}
.acct .nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .h{font-size:10.5px;color:var(--s-ink4);white-space:nowrap}
.acct .h.on{color:var(--s-amber)}
.tog{width:30px;height:18px;border-radius:9px;background:var(--seg);position:relative;flex:none;transition:background .2s,box-shadow .2s}
.side .tog{background:var(--s-on)}
.tog:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
.tog.on,.side .tog.on{background:var(--light);box-shadow:0 0 8px rgba(255,176,32,.5)}
.tog.on:after{left:14px}
.gear{color:var(--s-ink4);display:grid;place-items:center;padding:2px;border-radius:6px}
.gear:hover{color:var(--s-ink)}

/* list */
.list{background:var(--list);display:flex;flex-direction:column}
.lhead{min-width:0}
.tool{height:54px;display:flex;align-items:center;padding:0 16px;gap:10px;color:var(--ink2);flex:none}
.lt{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.ls{font-size:11px;color:var(--ink2);margin-top:1px}
.search{margin:0 14px;height:32px;border-radius:9px;background:var(--field);display:flex;align-items:center;gap:7px;padding:0 10px;color:var(--ink4);flex:none}
.search:focus-within{box-shadow:0 0 0 2px var(--blue)}
.search .ic{width:14px;height:14px}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:12.5px;color:var(--ink)}
.lon{display:flex;align-items:center;gap:6px;margin:16px 16px 0;font-size:10.5px;font-weight:600;color:var(--ink4);letter-spacing:.2px}
.stories{display:flex;gap:12px;padding:10px 16px 4px;flex:none;overflow-x:auto}
.story{width:54px;text-align:center;font-size:10px;color:var(--ink2);display:flex;flex-direction:column;align-items:center;flex:none;border-radius:8px}
.story .tg{margin-top:7px;font-size:7.5px;font-weight:800;letter-spacing:.5px;padding:2px 5px;border-radius:4px;white-space:nowrap;background:var(--seg);color:var(--ink2)}
.story .tg.hot{background:var(--light);color:#3a2600;box-shadow:0 0 8px rgba(255,176,32,.5)}
.story .n3{margin-top:3px;white-space:nowrap;max-width:60px;overflow:hidden;text-overflow:ellipsis}
.seg{display:flex;background:var(--seg);border-radius:8px;padding:2px;flex:none}
.seg a{flex:1;height:24px;display:grid;place-items:center;font-size:11.5px;color:var(--ink2);border-radius:6px;padding:0 10px;white-space:nowrap}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:600}
.list .seg{margin:12px 14px 8px}
.items{flex:1;overflow-y:auto;padding:0 0 10px}
.li{display:flex;gap:11px;padding:12px;margin:0 6px 2px;border-radius:12px}
.li:hover{background:var(--field)}
.li.sel{background:var(--sel)}
.lb{flex:1;min-width:0}
.l1{display:flex;align-items:center;gap:4px}
.nm{font-weight:650;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm{margin-left:auto;font-size:11px;color:var(--ink3);white-space:nowrap;padding-left:6px}
.tm.live{color:#3a2600;background:var(--light);font-weight:800;font-size:9px;letter-spacing:.7px;padding:2px 6px;border-radius:5px;box-shadow:0 0 10px rgba(255,176,32,.55)}
.l2{font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l3{font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.l4{display:flex;gap:12px;margin-top:7px;font-size:10.5px;color:var(--ink4);align-items:center}
.l4>span{display:flex;align-items:center;gap:4px}
.l4 .ic{width:12px;height:12px}
.lv{color:var(--amber);font-weight:600;gap:6px}
.l4 .nw{color:var(--blue);font-weight:650}
.li .th{width:50px;height:50px;border-radius:10px;object-fit:cover;flex:none;margin-top:2px}

/* post */
.post{background:var(--pane);display:flex;flex-direction:column}
.post.blank{display:grid;place-items:center;color:var(--ink3)}
.post .tool{gap:4px}
.pill-live{display:flex;align-items:center;gap:7px;background:rgba(255,176,32,.14);color:var(--amber);font-size:11.5px;font-weight:600;height:26px;padding:0 11px;border-radius:13px}
.pill-live.ended{background:var(--field);color:var(--ink2)}
.tb{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;font-size:11.5px;font-weight:500;color:var(--ink2)}
.tb{white-space:nowrap;flex:none}
.tb.ico{width:28px;padding:0;justify-content:center}
.pill-live{white-space:nowrap;flex:none}
.tb:hover{background:var(--field);color:var(--ink)}
.tb.on{color:var(--ink)}
.tb.on .ic{fill:currentColor}
.tb .ic{width:14px;height:14px}
.pbody{padding:6px 34px 48px;flex:1;overflow-y:auto}
.author{display:flex;align-items:center;gap:12px}
.author .sub{font-size:11.5px;color:var(--ink2);margin-top:1px}
.author .nm{font-size:14px}
h1{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.5px;margin:18px 0 6px;line-height:1.2}
.pdesc{font-size:13px;color:var(--ink2);line-height:1.55;max-width:60ch}
/* a group above its room: who's in it, and the invite link for whoever made it */
.grp{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--soft);display:flex;flex-direction:column;gap:12px;max-width:560px}
.grp-h{display:flex;align-items:center;gap:12px}
.gstack{display:flex;flex:none}
.gstack>a{margin-left:-7px;display:flex}
.gstack>a:first-child{margin-left:0}
.grp-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.grp-t b{font-size:13px;font-weight:650}
.grp-t small{font-size:11.5px;color:var(--ink3)}
.grp-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2)}
.grp-l>span{margin-right:auto}
.grp-l b{font-weight:600;color:var(--ink)}
.grp-l .ghost.sm{background:var(--pane)}
.l4 .gp{color:var(--ink3);font-weight:550}
.img{margin-top:12px;border-radius:12px;overflow:hidden;max-height:240px}
.img img{width:100%;display:block;object-fit:cover;max-height:240px}
.score{margin:18px 0 4px;border-radius:16px;color:#fff;padding:16px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:radial-gradient(120% 140% at 0% 0%,#1d4f73 0%,rgba(29,79,115,0) 55%),linear-gradient(115deg,#0f2a44 0%,#12324f 100%)}
.team{display:flex;align-items:center;gap:10px;min-width:0}
.team.r{flex-direction:row-reverse;text-align:right}
.team .mk{width:30px;height:30px;flex:none}
.team .tn{font-size:13px;font-weight:600}
.team .rec{font-size:10.5px;opacity:.6;margin-top:1px}
.team .sc{font-size:36px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:0 6px 0 auto}
.team.r .sc{margin:0 auto 0 6px}
.team .sc.dim{opacity:.55}
.clock{text-align:center;padding:0 16px;white-space:nowrap}
.clock .q{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;justify-content:center}
.clock .dn{font-size:10.5px;opacity:.65;margin-top:3px}
.prow{display:flex;gap:6px 18px;font-size:11.5px;color:var(--ink2);margin:14px 0 22px;align-items:center;flex-wrap:wrap}
.prow>span{display:flex;align-items:center;gap:5px}
.prow .ic{width:14px;height:14px}
.prow .muted{color:var(--ink3)}
.addupd{background:var(--soft);border-radius:14px;padding:12px;margin:0 0 24px;display:flex;flex-direction:column;gap:8px}
.addupd input,.addupd textarea{width:100%;border:0;border-radius:9px;background:var(--pane);padding:8px 11px;font-size:12.5px;outline:none;resize:vertical;line-height:1.45}
.addupd input:focus,.addupd textarea:focus{box-shadow:0 0 0 2px var(--blue)}
.addupd .r1{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
.addupd .r2{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.addupd label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
.addupd label input{width:66px}
.addupd .pri{margin-left:auto}
.pri{height:30px;padding:0 15px;border-radius:15px;background:var(--blue);color:var(--on-accent);font-weight:600;font-size:12px;flex:none}
.pri:hover{filter:brightness(1.07)}
.pri:disabled{opacity:.5;cursor:default}
.ghost{height:30px;padding:0 14px;border-radius:15px;color:var(--ink2);font-weight:500;font-size:12px}
.ghost:hover{background:var(--field);color:var(--ink)}
.ghost.sm{height:26px;padding:0 10px;font-size:11.5px}
.tl{position:relative}
.tl:before{content:"";position:absolute;left:58px;top:8px;bottom:0;width:1.5px;background:var(--rail)}
.ev{display:grid;grid-template-columns:44px 30px minmax(0,1fr);margin-bottom:24px}
.ev .t{font-size:10px;font-weight:500;color:var(--ink3);text-align:right;line-height:1.4;padding-top:1px}
.ev .d{position:relative}
.ev .d i{position:absolute;left:10px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 3px var(--pane)}
.ev.now .d i{background:var(--light);box-shadow:0 0 0 3px var(--pane),0 0 12px 5px rgba(255,176,32,.45)}
.ev.now .t,.ev.now .h{color:var(--amber)}
.c .h{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink4)}
.c p{font-size:13px;line-height:1.55;margin-top:3px;max-width:62ch}
.rx{display:flex;gap:14px;margin-top:8px;align-items:center;font-size:11px;color:var(--ink4)}
.rx span{display:flex;align-items:center;gap:5px}
.rx .ic{width:13px;height:13px}
.rx .fresh{color:var(--amber);font-weight:600}

/* room */
.room{background:var(--pane);display:flex;flex-direction:column}
.room .seg{width:100%;max-width:300px}
.rhead{text-align:center;padding:4px 16px 12px;flex:none}
.fan{position:relative;height:48px;width:96px;margin:0 auto}
.fan>span{position:absolute;top:4px}
.fan .f0{left:34px;top:0;z-index:2}
.fan .f1{left:12px;transform:rotate(-12deg)}
.fan .f2{left:56px;transform:rotate(12deg)}
.rname{font-family:var(--font-display);font-size:13.5px;font-weight:650;margin-top:6px}
.rsub{font-size:11px;color:var(--ink2);margin-top:2px;display:flex;align-items:center;justify-content:center;gap:6px}
.rsub b{font-weight:600;color:var(--ink)}
.pin{margin:0 16px 4px;background:var(--pin);border-radius:12px;padding:8px 12px;display:flex;gap:9px;align-items:center;font-size:11.5px;flex:none;min-width:0}
.pin .k{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--amber);white-space:nowrap}
.pin .x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{flex:1;padding:8px 20px 6px;display:flex;flex-direction:column;overflow-y:auto}
.msgs>:first-child{margin-top:auto}
.stamp{text-align:center;font-size:10.5px;color:var(--ink3);margin:14px 0 2px}
.stamp b{color:var(--ink4)}
.who{font-size:10.5px;color:var(--ink4);margin:10px 0 2px 46px}
.row{display:flex;align-items:flex-end;gap:12px;margin-top:3px}
.bslot{width:22px;flex:none;display:flex}
.b{max-width:min(300px,78%);padding:7px 12px 8px;border-radius:18px;font-size:13px;line-height:1.38;background:var(--in);color:var(--in-ink);position:relative;overflow-wrap:anywhere}
.out .row{justify-content:flex-end}
.out .b{background:var(--out);color:var(--out-ink)}
.b.tail:before{content:"";position:absolute;bottom:0;left:-7px;height:20px;width:20px;background:var(--in);border-bottom-right-radius:15px}
.b.tail:after{content:"";position:absolute;bottom:0;left:-10px;width:10px;height:20px;background:var(--pane);border-bottom-right-radius:10px}
.out .b.tail:before{left:auto;right:-7px;background:var(--out);border-bottom-right-radius:0;border-bottom-left-radius:15px}
.out .b.tail:after{left:auto;right:-10px;border-bottom-right-radius:0;border-bottom-left-radius:10px}
.b.pic{padding:0;overflow:hidden;width:230px;height:150px}
.b.pic:before,.b.pic:after{display:none}
.b.pic img{width:100%;height:100%;object-fit:cover;display:block}
.cap{font-size:10.5px;color:var(--ink4);margin:4px 0 0 46px}
.m.out+.m:not(.out),.m:not(.out)+.m.out{margin-top:8px}
.comp{display:flex;flex-direction:column;gap:8px;padding:10px 14px 14px;flex:none}
.cbar{display:flex;align-items:center;gap:8px}
.comp input{flex:1;min-width:0;height:36px;border-radius:18px;border:0;background:var(--field);padding:0 15px;font-size:13px;outline:none}
.comp input:focus{box-shadow:0 0 0 2px var(--out)}
.send{color:var(--out);display:grid;place-items:center;border-radius:50%}
.send .ic{width:30px;height:30px}

/* status bar */
.status{grid-column:1/-1;background:var(--status);display:flex;align-items:center;padding:0 14px;gap:18px;font-size:10.5px;color:var(--ink4);white-space:nowrap;overflow:hidden}
.status>span,.status>button{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink4)}
.status>button:hover{color:var(--ink)}
.status .ic{width:12px;height:12px}
.status .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis}
.status .crumb i{font-style:normal;color:var(--ink3);margin:0 5px}
.status b{font-weight:600}
.st-light .glow{opacity:.3;box-shadow:none}
.st-light.on{color:var(--amber)}
.st-light.on .glow{opacity:1;box-shadow:0 0 6px 2px rgba(255,176,32,.6)}
.status .ok{color:var(--ok)}

/* dialogs */
dialog{margin:auto;border:0;border-radius:16px;background:var(--pane);color:var(--ink);box-shadow:var(--shadow);width:min(480px,92vw);max-height:88vh;overflow-y:auto}
dialog::backdrop{background:rgba(0,0,0,.3)}
.dlg{padding:22px 24px 20px;display:flex;flex-direction:column;gap:12px}
.dlg h2:focus{outline:none}
.dlg h2{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.2px}
.dlg>input,.dlg>textarea,.inline input{width:100%;border:0;border-radius:10px;background:var(--field);padding:10px 12px;font-size:13px;line-height:1.45;outline:none;resize:vertical}
.dlg>input:focus,.dlg>textarea:focus,.inline input:focus{box-shadow:0 0 0 2px var(--blue)}
.dlg .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dlg .lab{font-size:11px;font-weight:650;color:var(--ink2);margin-top:4px;letter-spacing:.1px}
.dlg .note{font-weight:400;color:var(--ink3);margin-left:4px}
.hint{font-size:12px;color:var(--ink2);line-height:1.5}
.field-row{display:flex;align-items:center;gap:14px}
.fld{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2)}
.select{position:relative;display:inline-flex}
.select select{appearance:none;-webkit-appearance:none;border:0;border-radius:10px;background:var(--field);padding:8px 34px 8px 12px;font-size:12.5px;min-width:170px;outline:none;cursor:pointer;color:var(--ink)}
.select select:focus{box-shadow:0 0 0 2px var(--blue)}
.select:after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border:solid var(--ink2);border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--soft);cursor:pointer;font-size:12px;color:var(--ink2);line-height:1.45}
.check input{width:16px;height:16px;margin-top:1px;accent-color:var(--blue);flex:none}
.check b{display:block;color:var(--ink);font-size:12.5px}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.th{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--ink2);text-align:center;border-radius:10px}
.th.on{color:var(--ink);font-weight:650}
.mini{display:grid;grid-template-columns:22% 30% 1fr;height:64px;border-radius:9px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.18);background:var(--pane)}
.th.on .mini{outline:2.5px solid var(--blue);outline-offset:2px}
.mini i{display:block}
.mini .m1{background:var(--side-grad)}
.mini .m2{background:var(--list);padding:10px 5px;display:flex;flex-direction:column;gap:6px}
.mini .m2 u{display:block;height:3px;border-radius:2px;background:var(--ink3);opacity:.6}
.mini .m3{background:var(--pane);padding:12px 7px;display:flex;flex-direction:column;gap:7px}
.mini .m3 u{display:block;height:9px;width:62%;border-radius:5px;background:var(--in)}
.mini .m3 u.o{align-self:flex-end;width:55%;background:var(--out)}
.swatches,.people,.chips{display:flex;gap:8px;flex-wrap:wrap}
.sw{padding:3px;border-radius:7px}
.sw.on{outline:2px solid var(--blue)}
.pp{display:flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 6px;border-radius:15px;background:var(--field);font-size:11.5px}
.pp:hover{background:var(--on)}
.pp.on{background:var(--sel);font-weight:600}
.lightrow{display:flex;align-items:center;gap:16px;background:var(--soft);border-radius:12px;padding:12px 14px}
.lightrow .hint{flex:1}
.legend{flex:1;display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ink2);line-height:1.5}
.legend p{display:flex;gap:9px;align-items:flex-start}
.legend b{color:var(--ink)}
.legend p>i{flex:none;width:16px;display:grid;place-items:center;margin-top:4px}
.legend p>i:before{content:""}
.key-light:before{width:15px;height:5px;border-radius:3px;background:var(--light2);box-shadow:0 0 6px 2px rgba(255,176,32,.6);margin-top:4px}
.key-holo:before{width:12px;height:12px;border-radius:50%;background:conic-gradient(from 20deg,#ff9fd6,#ffd36a,#a8f5b8,#7fd8ff,#b8a3ff,#ff9fd6);box-shadow:0 0 0 1.2px #fff,0 1px 2px rgba(0,0,0,.3)}
.ilist{display:flex;flex-direction:column;gap:6px}
.irow{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--soft);font-size:12.5px}
.irow span{flex:1}
.irow .ic{color:var(--ink2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:15px;background:var(--field);font-size:12px}
.chip:hover{background:var(--on)}
.chip .ic{width:14px;height:14px;color:var(--ink2)}
.iadd{display:flex;flex-direction:column;gap:10px}
.icons{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.icopt{position:relative;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;background:var(--field);color:var(--ink2);cursor:pointer}
.icopt:hover{color:var(--ink)}
.icopt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.icopt:has(input:checked){background:var(--sel);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.icopt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.inline{display:flex;gap:8px;align-items:center}
.inline .pri{height:38px;border-radius:10px;padding:0 18px}

/* --- edit, delete, reply, photos --- */
[hidden]{display:none!important}
kbd{font:600 10px "SF Mono",ui-monospace,Menlo,monospace;padding:1px 5px;border-radius:4px;background:var(--field);box-shadow:inset 0 -1px 0 rgba(0,0,0,.14);color:var(--ink2)}
.status kbd{margin-right:1px}
.danger{height:30px;padding:0 15px;border-radius:15px;background:#e5484d;color:#fff;font-weight:600;font-size:12px}
.danger:hover{filter:brightness(1.08)}
.tb.del:hover{color:#e5484d}
.toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,10px);opacity:0;pointer-events:none;z-index:100;
  background:var(--ink);color:var(--pane);font-size:12px;font-weight:500;padding:9px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:opacity .2s,transform .2s;max-width:min(420px,90vw)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* time dividers and paging in rooms */
.sep{text-align:center;font-size:10.5px;font-weight:500;color:var(--ink3);margin:16px 0 4px}
.earlier{align-self:center;margin:4px 0 8px;font-size:11.5px;font-weight:500;color:var(--blue);padding:5px 12px;border-radius:13px;background:var(--field)}
.earlier:hover{background:var(--on)}

/* message actions appear on hover, like iMessage's long-press menu */
.row{position:relative}
.macts{display:flex;gap:1px;align-self:center;opacity:0;transition:opacity .12s}
.m:hover .macts,.m:focus-within .macts{opacity:1}
/* Touch screens: tap a message to show its actions. */
@media (hover:none){.m:hover .macts{opacity:0}.m:not(.act) .macts{pointer-events:none}.m.act .macts{opacity:1}.macts button{width:34px;height:34px;border-radius:17px}}
.out .macts{order:-1}
.macts button{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;color:var(--ink3)}
.macts button:hover{background:var(--field);color:var(--ink)}
.macts .ic{width:14px;height:14px}
.quote{display:flex;align-items:center;gap:6px;max-width:78%;width:max-content;margin:6px 0 3px 46px;padding:4px 10px 4px 8px;border-radius:12px;background:var(--field);font-size:11px;color:var(--ink2);overflow:hidden}
.quote .ic{width:12px;height:12px;flex:none;transform:scaleX(-1)}
.quote b{color:var(--ink);font-weight:600;flex:none}
.quote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.quote:hover{background:var(--on)}
.out .quote{margin-left:auto;margin-right:4px}
.edited{font-size:9.5px;color:var(--ink3);margin:2px 0 0 46px}
.out .edited{text-align:right;margin-right:4px}
.m.flash .b{animation:flash 1.4s ease-out}
@keyframes flash{0%,30%{box-shadow:0 0 0 3px var(--light2)}100%{box-shadow:0 0 0 0 rgba(255,211,106,0)}}

/* composer context: replying, editing, photo */
.ctx{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);background:var(--field);border-radius:10px;padding:6px 6px 6px 11px}
.ctx b{color:var(--ink);font-weight:600}
.ctx-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-t span{margin-left:4px}
.ctx-x{width:22px;height:22px;border-radius:11px;font-size:15px;line-height:1;color:var(--ink3)}
.ctx-x:hover{background:var(--on);color:var(--ink)}
.attach{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:var(--ink2);background:var(--field);flex:none}
.attach:hover{color:var(--ink);background:var(--on)}
.attach .ic{width:17px;height:17px}
.busy .attach,.busy .addphoto{opacity:.6;pointer-events:none}
.photo{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.addphoto{display:inline-flex;align-items:center;gap:6px;background:var(--field)}
.addphoto .ic{width:14px;height:14px}
.pv{position:relative;display:inline-block;border-radius:10px;overflow:hidden;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pv img{display:block;max-width:220px;max-height:140px;object-fit:cover}
.pv-x{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:11px;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1}
.pv-x:hover{background:rgba(0,0,0,.8)}

/* updates: author-only edit and delete */
.rx .uacts{display:none;gap:2px;margin-left:auto}
[data-own] .rx .uacts{display:flex}
.uacts button{font-size:11px;color:var(--ink3);padding:2px 7px;border-radius:9px}
.uacts button:hover{background:var(--field);color:var(--ink)}
.uacts button:last-child:hover{color:#e5484d}
.addupd[data-mode="edit"] .score-in{display:none}
.addupd .ctx{background:rgba(255,176,32,.14);color:var(--amber)}
.addupd .ctx b{color:var(--amber)}
.addupd .addphoto{background:var(--pane)}

/* keyboard shortcuts */
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center;font-size:12.5px;color:var(--ink2)}
.keys dt{display:flex;gap:4px;justify-content:flex-end}
.keys kbd{font-size:11px;padding:2px 7px}

/* --- links to profiles --- */
.author .au-t{flex:1;min-width:0}
.author a.nm:hover,a.who:hover,.acct a.nm:hover{text-decoration:underline}
.pflink{display:flex;border-radius:9px}
.follow{flex:none;height:28px;padding:0 14px;border-radius:14px;background:var(--blue);color:var(--on-accent);font-size:12px;font-weight:600}
.follow.on{background:var(--field);color:var(--ink2)}
.follow:hover{filter:brightness(1.06)}
a.who{display:block;width:max-content}
.found{padding:4px 0 2px}
.found .lon{margin:8px 16px 4px}
.person{display:flex;align-items:center;gap:11px;padding:8px 12px;margin:0 6px;border-radius:12px}
.person:hover{background:var(--field)}
.person span{display:flex;flex-direction:column;min-width:0}
.person b{font-size:13px}
.person small{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagerow{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:12px;padding:8px 8px 8px 14px;font-size:12.5px;color:var(--ink2)}
.pagerow span{flex:1}
.pagerow a{display:inline-flex;align-items:center}
.pagerow .pri{height:30px}

/* The scoreboard tightens up when the post pane is narrow. */
.score{container-type:inline-size}
@container (max-width:460px){
  .score .team .rec{display:none}
  .score .team .mk{width:22px;height:22px}
  .score .team .tn{font-size:12px}
  .score .team .sc{font-size:28px;margin:0 2px 0 auto}
  .score .team.r .sc{margin:0 auto 0 2px}
  .score .clock{padding:0 8px}
  .score .clock .dn{display:none}
}
@container (max-width:340px){.score .team .tn{display:none}}

/* friend requests */
.sb-i[data-req-item] .n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:var(--on-accent);font-weight:650;display:grid;place-items:center}
.reqlist{display:flex;flex-direction:column;gap:6px;container-type:inline-size}
.reqrow{display:flex;align-items:center;gap:11px;background:var(--soft);border-radius:12px;padding:8px 10px}
.rq-b{display:flex;flex:none}
.rq-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rq-t a{font-weight:650;font-size:13px;color:var(--ink)}
.rq-t small{display:flex;flex-wrap:wrap;font-size:11.5px;color:var(--ink3)}
.rq-t small>span{white-space:nowrap}
.rq-t small>span+span:before{content:"·";margin:0 6px}
.rq-t .met{display:inline-flex;align-items:center;gap:4px;color:var(--ink2);font-weight:600}
.rq-t .met .ic{width:12px;height:12px}
.rq-a{display:flex;gap:6px;flex:none}
.rq-ok,.rq-no{height:28px;padding:0 12px;border-radius:14px;font-size:12px;font-weight:650}
.rq-ok{background:var(--blue);color:var(--on-accent)}
.rq-no{background:var(--field);color:var(--ink2)}
.rq-ok:hover,.rq-no:hover{filter:brightness(1.06)}
.rq-done{font-size:12px;font-weight:600;color:var(--ink2)}
/* Narrow lists (a phone, the code sheet): the buttons go under the name. */
@container (max-width:400px){.reqrow{flex-wrap:wrap}.rq-t{flex-basis:calc(100% - 50px)}.rq-a{width:100%;padding-left:41px}}

/* money (play money) */
.sb-i .n.due{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:var(--on-accent);font-weight:650;display:grid;place-items:center}
.cashcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:150px;padding:16px 18px;border-radius:18px;color:#fff;
  background:linear-gradient(155deg,rgba(255,255,255,.26),rgba(255,255,255,0) 46%),radial-gradient(90% 120% at 100% 100%,rgba(0,0,0,.28),transparent 60%),var(--bc);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 24px rgba(0,0,0,.14)}
.cashcard .cc-k{font-size:11px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;opacity:.8}
.cashcard b{font-size:34px;font-weight:750;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1;margin-top:-18px}
.cashcard .cc-f{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:600}
.cashcard em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;opacity:.75}
.mbtns{display:flex;gap:6px}
.mbtns .ghost{background:var(--field)}
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:11px;padding:7px 4px}
.mrow+.mrow{margin-top:2px}
.mrow .mt{flex:1;min-width:0;display:flex;flex-direction:column}
.mrow .mt b{font-size:13px;font-weight:600}
.mrow .mt small{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .ma{display:flex;gap:6px;flex:none}
.mamt{flex:none;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.mamt.in{color:#2f9e5b}
.mamt.pend{color:var(--ink3);font-weight:550}
.mamt small{font-size:11px;margin-right:4px}
.pmode{align-self:flex-start}
.payees{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow-y:auto;padding:2px}
.payee{position:relative;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:12px;background:var(--soft);font-size:12.5px;font-weight:550;cursor:pointer}
.payee input{position:absolute;opacity:0;pointer-events:none}
.payee:has(input:checked){background:var(--sel);box-shadow:inset 0 0 0 2px var(--blue)}
.payee:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.amt{display:flex;align-items:baseline;justify-content:center;gap:2px;padding:12px;border-radius:14px;background:var(--field);cursor:text}
.amt span{font-size:26px;font-weight:600;color:var(--ink3)}
.amt input{font-size:36px;font-weight:750;letter-spacing:-.6px;font-variant-numeric:tabular-nums;border:0;background:none;outline:none;color:var(--ink);field-sizing:content;min-width:1.2ch;max-width:8ch;padding:0}
.amt:focus-within{box-shadow:0 0 0 2px var(--blue)}

/* money cards in a room: the people involved see the card, everyone else a line */
.mon .cash{display:flex;flex-direction:column;gap:2px;width:228px;padding:12px 14px 13px;border-radius:18px;color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.14),transparent 55%),linear-gradient(150deg,#21402f,#12261b)}
.mon .cash.ask{background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.14),transparent 55%),linear-gradient(150deg,#23324a,#141d2c)}
.mon .ck{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;opacity:.7}
.mon .ck em{font-style:normal;font-weight:600;letter-spacing:.4px;text-transform:none;opacity:.85}
.mon .cam{font-size:28px;font-weight:750;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.mon .cam small{font-size:13px;font-weight:600;opacity:.7}
.mon .nt{font-size:13px;line-height:1.3}
.mon .cw{font-size:11.5px;opacity:.65}
.mon .cs{display:flex;flex-direction:column;gap:6px;margin-top:6px;font-size:11.5px;color:rgba(255,255,255,.75)}
.mon .cs .ok{color:#8ee0ad;font-weight:650}
.mon .prog{height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.mon .prog i{display:block;height:100%;background:#8ee0ad;border-radius:2px}
.mon .cpay{display:flex;gap:6px}
.mon .cpay button{height:28px;padding:0 12px;border-radius:14px;font-size:12px;font-weight:650;background:rgba(255,255,255,.14);color:#fff}
.mon .cpay .go{background:#fff;color:#12261b}
.mon .cpay button:hover{filter:brightness(1.08)}
.out.mon .row{justify-content:flex-end}
.monline{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:var(--ink3);margin:10px 0 4px}
.monline .ic{width:12px;height:12px}

/* --- smaller screens --- */
.mob,.scrim{display:none}

/* Tablets: three panes, and the sidebar slides over from the left. Your badge,
   top left, opens it. */
@media (max-width:1080px){
  .side{position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(290px,86vw);transform:translateX(-104%);visibility:hidden;
    transition:transform .28s cubic-bezier(.3,.8,.25,1),visibility 0s .28s;box-shadow:0 0 40px rgba(0,0,0,.25);
    padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .app[data-drawer] .side{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.3,.8,.25,1)}
  .scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .28s}
  .app[data-drawer] .scrim{opacity:1;pointer-events:auto}
  .mob.menu{display:grid;place-items:center;position:relative;width:34px;height:42px;margin-left:-6px;border-radius:9px;flex:none}
  .mob.menu .dot{position:absolute;top:4px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--list)}
  .mob.tbi{display:grid;place-items:center;width:36px;height:36px;border-radius:18px;color:var(--blue);flex:none}
  .mob.tbi:hover{background:var(--field)}
  .mob.tbi .ic{width:20px;height:20px}
}
@media (max-width:1080px) and (prefers-reduced-motion:reduce){.side,.scrim{transition:none!important}}


/* The back buttons and the room bar, for layouts that show a post or its room
   one at a time. */
.mob.back{align-items:center;height:36px;padding:0 8px 0 0;margin-left:-6px;border-radius:18px;color:var(--blue);font-size:15px;font-weight:500;flex:none;max-width:46vw}
.mob.back .ic{transform:scaleX(-1);width:24px;height:24px;stroke-width:2.1}
.mob.back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob.roombar{align-items:center;gap:10px;flex:none;margin:0 10px max(10px,env(safe-area-inset-bottom));padding:9px 12px 9px 10px;border-radius:16px;background:var(--field);text-align:left}
.roombar .fan{position:relative;width:44px;height:30px;margin:0;flex:none}
.roombar .fan.n0{display:none}
.roombar .fan>span{top:4px}
.roombar .fan .f0{left:13px;top:0}
.roombar .fan .f1{left:1px}
.roombar .fan .f2{left:25px}
.roombar .rb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.roombar .rb-t>b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roombar .lv{display:flex;align-items:center;font-size:11.5px}
.roombar .lv.off{display:none}
.roombar .rb-go{display:flex;align-items:center;gap:1px;color:var(--blue);font-size:13px;font-weight:600;white-space:nowrap}
.roombar .rb-go .ic{width:15px;height:15px;stroke-width:2.2}

/* Small tablets: the feed, and next to it a post or its room. */
@media (min-width:761px) and (max-width:980px){
  .app{grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
  .post,.room{grid-row:1;grid-column:2}
  .app[data-screen=room] .post,.app:not([data-screen=room]) .room{display:none}
  .room .mob.back,.mob.roombar{display:flex}
  .mob.roombar{margin:0 14px 14px}
}

/* Phones: one screen at a time, the way Messages works. The feed, then a post,
   then its room, each with a way back. */
@media (max-width:760px){
  .app{height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0}
  .status{display:none}
  .list,.post,.room{grid-area:1/1}
  .app:not([data-screen=list]) .list,.app:not([data-screen=post]) .post,.app:not([data-screen=room]) .room{display:none}
  .tool{height:auto;min-height:54px;padding:max(6px,env(safe-area-inset-top)) 12px 6px}
  .mob.back,.mob.roombar{display:flex}

  /* the feed */
  .lt{font-size:18px}
  .ls{font-size:11.5px}
  .search{margin:0 12px;height:38px;border-radius:11px}
  .li{margin:0 4px 2px;padding:12px 10px}
  .li.sel{background:none}

  /* a post */
  .post .tool{gap:2px}
  .post .pill-live{display:none}
  .tb{height:36px}
  .tb.ico,.tb[data-act=save]{width:38px;padding:0;justify-content:center}
  .tb[data-act=save]{font-size:0;gap:0}
  .tb .ic{width:18px;height:18px}
  .pbody{padding:2px 18px 24px}
  h1{font-size:23px;margin-top:16px}
  .pdesc{font-size:14px}
  .addupd .r1{grid-template-columns:1fr}

  /* a room */
  .room .tool{gap:8px}
  .room .seg{max-width:none;flex:1}
  .rhead{padding:0 16px 8px}
  .msgs{padding:6px 12px}
  .comp{padding:8px 10px max(10px,env(safe-area-inset-bottom))}
  .comp input{height:40px;border-radius:20px}

  /* iPhones zoom into any text field under 16px; these stay put */
  .comp input,.search input,.dlg input:not([type=checkbox]):not([type=radio]),.dlg textarea,.addupd input,.addupd textarea,.dlg select{font-size:16px}
  .amt input{font-size:36px}

  /* dialogs rise from the bottom */
  dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}
  .themes{grid-template-columns:repeat(2,1fr)}
  .pagerow{flex-wrap:wrap}
  .pagerow span{flex-basis:100%}
}
.pwform{flex-wrap:wrap}
.pwform input{flex:1 1 150px}
.starters{display:flex;flex-direction:column;gap:2px;padding:8px 6px 16px}
.starters>p{font-size:12.5px;line-height:1.5;color:var(--ink2);padding:6px 10px 10px}
.starter{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px}
.st-who{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.st-who span{display:flex;flex-direction:column;min-width:0}
.st-who b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-who small{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.starters>.pri{align-self:center;display:inline-flex;align-items:center;margin-top:12px}

/* the hologram: getting one */
.hdot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;vertical-align:middle;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.3) 24%,rgba(255,255,255,0) 48%),conic-gradient(from 20deg,#ff9fd6,#ffd36a,#a8f5b8,#7fd8ff,#b8a3ff,#ff9fd6);
  box-shadow:0 0 0 1px rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.25)}
.getholo{display:flex;align-items:center;gap:10px;margin-top:auto;background:var(--s-card);border-radius:12px;padding:10px 12px;text-align:left;flex:none}
.getholo+.shield{margin-top:8px}
.getholo:hover{filter:brightness(1.04)}
.getholo .hdot{width:20px;height:20px}
.getholo span{display:flex;flex-direction:column;min-width:0}
.getholo b{font-weight:650;font-size:12px;color:var(--s-ink)}
.getholo small{font-size:10.5px;color:var(--s-ink2);line-height:1.35}
.holohead{display:flex;align-items:center;gap:14px}
.holohead>div{display:flex;flex-direction:column;gap:2px}
.holohead b{font-size:15px}
.holohead span{font-size:12px;color:var(--ink2)}
.vsteps{display:flex;gap:6px}
.vsteps i{flex:1;height:6px;border-radius:3px;background:var(--field)}
.vsteps i.on{background:linear-gradient(90deg,#ff9fd6,#ffd36a,#a8f5b8,#7fd8ff,#b8a3ff)}
.how{list-style:none;counter-reset:how;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.how[start="2"]{counter-reset:how 1}
.how li{counter-increment:how;display:grid;grid-template-columns:22px 1fr;column-gap:10px;font-size:12.5px;line-height:1.4}
.how li:before{content:counter(how);grid-row:1/3;width:22px;height:22px;border-radius:11px;background:var(--field);display:grid;place-items:center;font-weight:700;font-size:11.5px;color:var(--ink2)}
.how li b{font-weight:650}
.how li span{color:var(--ink2)}
.vlist{display:flex;flex-wrap:wrap;gap:12px}
.vlist a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink2);width:48px;text-align:center}
.rec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;background:var(--soft);border-radius:12px;padding:10px 12px;font-size:12px}
.rec span{color:var(--ink3);font-weight:600}
.rec code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;overflow-wrap:anywhere;color:var(--ink)}
.legend .lnk{font-size:inherit}
.toast{width:max-content;max-width:min(420px,calc(100vw - 32px));text-align:center}
.vmark{display:flex;align-items:baseline;gap:8px;font-size:30px;color:var(--ink)}
.vmark span{font-size:15px;font-weight:600;color:var(--ink3)}

/* a feature on its way, in Settings */
.soonrow{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--soft);margin-top:10px}
.soonrow .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--ink2)}
.soonrow b{font-size:12.5px;font-weight:650}
.soonrow em{font-style:normal;margin-left:8px;padding:1px 7px;border-radius:9px;background:rgba(255,176,32,.2);color:var(--amber);font-size:10.5px;font-weight:700}
.soonrow small{display:block;margin-top:3px;font-size:11.5px;color:var(--ink2);line-height:1.45}

/* a photo full screen: tap anywhere, Close or Esc to go back */
.viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border-radius:0;background:#0b0b0d;box-shadow:none;overflow:hidden}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer::backdrop{background:rgba(0,0,0,.6)}
.viewer img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 96px);object-fit:contain;border-radius:8px;cursor:zoom-out}
.viewer .vw-bar{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;display:flex;gap:8px}
.viewer .vw-b{height:32px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;text-decoration:none}
.viewer .vw-b:hover{background:rgba(255,255,255,.24)}
.m .b.pic img,#pimg,.tl .img img{cursor:zoom-in}

/* friends: everyone, around first; away badges go grey */
.frdlg{width:min(640px,94vw)}
.fr-top{display:flex;align-items:center;justify-content:space-between}
.fr-top .cnt{font-weight:500;color:var(--ink3);margin-left:4px}
.fr-q{width:100%;border:0;border-radius:10px;background:var(--field);padding:9px 12px;font-size:13px;outline:none;color:var(--ink)}
.fr-q:focus{box-shadow:0 0 0 2px var(--blue)}
.frdlg .lab{display:flex;align-items:center;gap:6px}
.frdlg .lab .glow{width:7px;height:7px;border-radius:50%;background:var(--light);box-shadow:0 0 8px rgba(255,176,32,.8)}
.frdlg .lab .n{font-weight:500;color:var(--ink3)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:4px}
.fgrid:empty{display:none}
.fr{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;border-radius:12px;text-align:center;min-width:0;color:var(--ink);text-decoration:none}
.fr:hover{background:var(--soft)}
.fr[hidden]{display:none}
.fr b{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.fr small{font-size:10.5px;color:var(--ink3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgrid.away .fr .bdg{filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.fgrid.away .fr b{color:var(--ink2);font-weight:500}
.fr-none{margin:-2px 0 4px}

/* a real game: each team is its abbreviation on its color, not a logo */
.team .mk.ab{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.score .dn{white-space:nowrap}
@media (max-width:760px){.score .team .mk.ab{width:28px;height:28px;font-size:9.5px}}

/* following a live game: the button in New post, and the week's games */
.gamebtn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;background:var(--soft);text-align:left;color:var(--ink)}
.gamebtn:hover{background:var(--field)}
.gamebtn .gb-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#17191d;color:#fff;flex:none}
.gamebtn .gb-i .ic{width:18px;height:18px}
.gamebtn b{display:block;font-size:13px;font-weight:650}
.gamebtn small{display:block;font-size:11.5px;color:var(--ink2);margin-top:1px;line-height:1.4}
.gamebtn .chev{width:14px;height:14px;margin-left:auto;color:var(--ink3);flex:none}
.gmdlg{width:min(560px,94vw)}
.glist{display:flex;flex-direction:column;gap:6px;max-height:58vh;overflow-y:auto}
.gm{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--soft);text-align:left;color:var(--ink)}
.gm:hover{background:var(--field)}
.gm-t{display:flex;align-items:center;gap:5px;flex:none}
.gm-t .ab{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:800;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.gm-t i{font-style:normal;font-size:10.5px;color:var(--ink3)}
.gm-n{display:flex;flex-direction:column;min-width:0}
.gm-n b{font-size:13.5px;font-weight:650}
.gm-n small{font-size:11.5px;color:var(--ink2)}
.gm-n small.live{color:var(--amber);font-weight:650}
.gm .go{margin-left:auto;height:28px;padding:0 13px;border-radius:14px;background:var(--blue);color:var(--on-accent);font-size:12px;font-weight:600;display:grid;place-items:center;flex:none}
.gm-src{font-size:11px;margin-top:2px}

/* The scoreboard: each team's color glows in from its side of a dark board.
   --c1 is the team on the left, --c2 the team on the right. */
.score{--c1:#1d4f73;--c2:#7a1f2b;position:relative;isolation:isolate;overflow:hidden;margin:18px 0 6px;padding:18px 22px;border-radius:20px;color:#fff;
  background:radial-gradient(70% 150% at 0% 50%,color-mix(in srgb,var(--c1) 78%,transparent) 0%,transparent 70%),
    radial-gradient(70% 150% at 100% 50%,color-mix(in srgb,var(--c2) 78%,transparent) 0%,transparent 70%),#0f1013;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 32px -12px rgba(0,0,0,.35)}
.score:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%)}
.score .team{gap:12px}
.score .team .mk{width:34px;height:34px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.score .team .mk.ab{width:42px;height:42px;font-size:12px;background:color-mix(in srgb,currentColor 0%,transparent);color:#fff}
.score .team:first-child .mk.ab{background:var(--c1)}
.score .team.r .mk.ab{background:var(--c2)}
.score .team .mk.ab{box-shadow:0 0 0 2px rgba(255,255,255,.2),0 6px 16px rgba(0,0,0,.35)}
.score .team .tn{font-size:14.5px;font-weight:700;letter-spacing:-.1px}
.score .team .rec{font-size:11px;opacity:.65;margin-top:2px;font-variant-numeric:tabular-nums}
.score .team .sc{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1}
.score .team .sc.dim{opacity:.45}
.score .clock{padding:0 14px}
.score .clock .q{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px;letter-spacing:.2px}
.score .clock .dn{font-size:11px;opacity:.72;margin-top:7px}
@container (max-width:460px){
  .score{padding:14px 14px}
  .score .team .mk.ab{width:30px;height:30px;font-size:9.5px}
  .score .team .sc{font-size:32px;letter-spacing:-1px}
  .score .clock .q{padding:4px 9px;font-size:11px}
}

/* The room's score bar: the score and the latest play stay in sight while
   you chat, even on a phone, where the scoreboard is on another screen. */
.bug{--c1:#1d4f73;--c2:#7a1f2b;margin:0 16px 8px;padding:10px 12px 9px;border-radius:16px;color:#fff;flex:none;min-width:0;
  background:radial-gradient(60% 160% at 0% 50%,color-mix(in srgb,var(--c1) 70%,transparent),transparent 70%),
    radial-gradient(60% 160% at 100% 50%,color-mix(in srgb,var(--c2) 70%,transparent),transparent 70%),#111215}
.bug-s{display:flex;align-items:center;justify-content:center;gap:10px}
.bug-s .mk{width:24px;height:24px;flex:none}
.bug-s .mk.ab{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:800;box-shadow:0 0 0 1.5px rgba(255,255,255,.22)}
.bug-s .mk.ab:first-child{background:var(--c1)}
.bug-s .mk.ab:last-child{background:var(--c2)}
.bug-s b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;min-width:24px;text-align:center;letter-spacing:-.5px}
.bug-s b.dim{opacity:.5}
.bug-c{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700;white-space:nowrap}
.bug-c .glow{width:6px;height:6px;border-radius:50%;background:var(--light);box-shadow:0 0 8px rgba(255,176,32,.9)}
.bug-l{margin-top:7px;font-size:11.5px;color:rgba(255,255,255,.78);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bug-l em{font-style:normal;font-weight:700;color:#fff;margin-right:3px}

/* Any other living post: its latest update as a quiet line under the room's name. */
.pin{background:none;margin:0 16px 6px;padding:2px 2px 4px;justify-content:center;color:var(--ink2)}
.pin .k{display:inline-flex;align-items:center;gap:6px}
.pin .k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--light);box-shadow:0 0 6px rgba(255,176,32,.8)}

/* picking friends already on porch to ask into a group */
.askf{display:flex;flex-direction:column;gap:10px}
#invite .askf{margin-top:8px}
.apick{max-height:min(44vh,330px);overflow:auto;margin:0 -4px;padding:2px}
.ap{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap input{position:absolute;opacity:0;pointer-events:none}
.apc{position:absolute;top:6px;left:calc(50% + 12px);z-index:1;width:20px;height:20px;border-radius:50%;background:var(--pane);box-shadow:inset 0 0 0 1.5px var(--ink4),0 1px 3px rgba(0,0,0,.18);display:grid;place-items:center;transition:background .15s}
.ap:has(input:checked) .apc{background:var(--blue);box-shadow:0 0 0 2px var(--pane)}
.ap:has(input:checked) .apc:after{content:"";width:9px;height:5px;border:solid var(--on-accent);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.ap:has(input:checked:not(:disabled)){background:color-mix(in srgb,var(--blue) 11%,transparent)}
.ap:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
.ap.done{cursor:default}
.ap.done .bdg{opacity:.55}
.ap.done:has(input) .apc{background:var(--ink4)}
.askf>[data-ask-go]{align-self:flex-start}
.askf [data-ask-go]:disabled{opacity:.45;cursor:default}
.askrow .gstack .bdg{box-shadow:0 0 0 2px var(--pane)}
.grp-l .ic{width:13px;height:13px;margin-right:2px}

/* a club above its room: how many are in, and the next few dates to say you're in for */
.grp-h{flex-wrap:wrap}
.gmore{font-style:normal;font-size:11px;font-weight:650;color:var(--ink2);align-self:center;margin-left:6px}
.grp-cal{display:flex;flex-direction:column;background:var(--pane);border-radius:12px;padding:4px 12px}
.grp-ch{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);padding:8px 0 2px}
.grp-o{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.grp-ch+.grp-o{border-top:0}
.grp-o .date{width:34px;flex:none;text-align:center;line-height:1.05;display:flex;flex-direction:column;padding-top:1px}
.grp-o .date small{font-size:9px;font-weight:700;letter-spacing:.7px;color:var(--ink3)}
.grp-o .date b{font-size:18px;font-weight:750}
.grp-o .ob{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.grp-o .ob>b{font-size:13px;font-weight:650}
.grp-o .ow{display:flex;flex-wrap:wrap;font-size:11.5px;color:var(--ink2)}
.grp-o .ow span+span:before{content:"·";margin:0 5px;color:var(--ink3)}
.grp .rsvp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.grp .rs-n{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2);margin-right:auto;min-height:20px}
.grp .rs-n>span:not(.stack)+span:before{content:"·";margin-right:6px;color:var(--ink3)}
.grp .rs-n .stack{display:flex}
.grp .rs-n .stack .bdg+.bdg{margin-left:-5px}
.grp .rs-b{height:28px;padding:0 13px;border-radius:14px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;background:var(--ink);color:var(--pane);white-space:nowrap}
.grp .rs-b:disabled{opacity:.6}
.grp .rs-b.in{background:color-mix(in srgb,var(--light) 22%,var(--pane));color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--light) 65%,transparent)}
.grp .rs-b.wait,.grp .rs-b.off{background:var(--field);color:var(--ink)}
.grp .lw{width:10px;height:10px;border-radius:3px;background:var(--light);box-shadow:0 0 8px 1px rgba(255,170,0,.8)}
.grp .rsvp.lit .lw{animation:switchon .9s ease-out}
@keyframes switchon{0%{background:#5b4a2c;box-shadow:none}30%{background:#ffd27a;box-shadow:0 0 14px 4px rgba(255,190,60,.95)}45%{background:#6d5630;box-shadow:none}60%,100%{background:var(--light)}}
.grp .rs-err{flex-basis:100%;font-size:11.5px;color:#e5484d}