/* evasive web: the desktop app's widget kit for the browser. One window: the 2 px accent strip, the title bar with the
   wordmark, the centred icon tab pill and the profile block, the centred sub-tab row, groupboxes with a left-cap title
   bar on a dark page, inset wells, small accent squares, slim gradient meters and a "label ■ value" status bar.
   Sections: tokens, base, controls, groupboxes, dialogs, the shell, the palette, page pieces, the sign-in window, the
   forum index and shoutbox, markup / editor / alerts / wave 2 pieces, responsive. Each view's own styles are in
   css/v-*.css and build on the tokens and components here (docs: the token list below is the contract). */

/* code blocks only; everything else is the app's Verdana */
@font-face { font-family: JBM; src: url(/v/4ab02c015c7e1f77/fonts/jbmono-500.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: dark;
  /* surfaces, darkest first: behind everything, the window chrome, the page, a groupbox body, a title bar, a raised
     element; wells are cut into a box (fields, lists, tiles) */
  --s-desk: #070708;
  --s-shell: #0E0E10;
  --s-page: #0B0B0D;
  --s-box: #131316;
  --s-cap: #1A1A1E;
  --s-raise: #212126;
  --s-hover: #1A1A1F;
  --s-well: #09090B;
  --s-pop: #1A1A1E;
  /* edges: hairlines step up in light; every box also sits in a black ring */
  --e-hair: #19191C;
  --e-line: #25252A;
  --e-line-2: #303036;
  --e-line-3: #46464E;
  --bev-hi: rgba(255,255,255,.05);
  --bev-lo: rgba(0,0,0,.6);
  /* elevation: a box on the page, a popup, a dialog */
  --el-1: 0 0 0 1px #000, 0 10px 22px -14px rgba(0,0,0,.9);
  --el-2: 0 0 0 1px #000, 0 0 0 2px rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.65);
  --el-3: 0 0 0 1px #000, 0 28px 80px rgba(0,0,0,.8);
  /* text: bright, body, dim, faint. --tx-4 is the floor for readable text: >= 4.5:1 even on a hovered title bar (#212027) */
  --tx: #EDEDF0;
  --tx-2: #C8C8CE;
  --tx-3: #A0A0A8;
  --tx-4: #888890;
  /* the accent fan (deep -> accent -> pink), the active tab tint and a faint wash */
  --ac: #9B7BFF;
  --ac-deep: #554FAD;
  --ac-pink: #F493FF;
  --ac-hi: #B79AFF;
  --ac-lo: rgba(155,123,255,.14);
  --ac-wash: rgba(155,123,255,.07);
  --ac-line: #5D4999;
  --ac-grad: linear-gradient(90deg, var(--ac-deep), var(--ac) 50%, var(--ac-pink));
  --ac-grad-v: linear-gradient(180deg, var(--ac), var(--ac-deep));
  --tab-t: #55456D;
  --tab-b: #32304D;
  --tab-ht: #644F84;
  --tab-hb: #3A3759;
  --ok: #6EBE64;
  --ok-lo: rgba(110,190,100,.12);
  --warn: #E6AF3C;
  --warn-lo: rgba(230,175,60,.12);
  --err: #EB5050;
  --err-lo: rgba(235,80,80,.12);
  /* roles: flat text in these colours */
  --r-admin: #B582FF;
  --r-mod: #6AA6F2;
  --r-prem: #E6AF3C;
  --r-reg: #C8C8CE;
  /* type: Verdana (Windows' own; DejaVu / Bitstream Vera are its free look-alikes), one scale */
  --ui: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, Tahoma, sans-serif;
  --code: JBM, ui-monospace, Consolas, monospace;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-base: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  /* the 4 px rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  /* sizes: controls, title bars, the shell's bars, the content column and the index sidebar */
  --ctl-h: 28px;
  --cap-h: 30px;
  --hdr-h: 48px;
  --sub-h: 38px;
  --foot-h: 26px;
  --foot-stick: var(--foot-h);
  --col: 1440px;
  --side-w: 336px;
  --pad: 20px;
  --gap: 16px;
  --g-l: 14px;
  --g-r: 14px;
  /* the bars' inset: where the content column starts */
  --edge-x: max(var(--pad), calc((100% - var(--col)) / 2));
  /* motion */
  --t-fast: 120ms;
  --t-med: 180ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --hover: var(--t-fast);
  --panel: var(--t-med) var(--ease);
  --in-t: env(safe-area-inset-top, 0px);
  --in-r: env(safe-area-inset-right, 0px);
  --in-b: env(safe-area-inset-bottom, 0px);
  --in-l: env(safe-area-inset-left, 0px);

  /* older names the views still use, mapped onto the scale above */
  --desk: var(--s-desk);
  --shell: var(--s-shell);
  --win: var(--s-page);
  --card: var(--s-box);
  --card-2: #17171A;
  --bar: var(--s-cap);
  --bar-b: #111114;
  --pop: var(--s-pop);
  --row-hv: var(--s-hover);
  --row-fc: var(--ac-wash);
  --list: var(--s-well);
  --well: var(--s-well);
  --raise: var(--s-raise);
  --raise-hi: #2A2A30;
  --line: var(--e-line);
  --line-2: var(--e-line-2);
  --line-3: var(--e-line-3);
  --line-r: var(--e-hair);
  --edge: var(--e-line-2);
  --band: #202024;
  --elem-t: #1F1F23;
  --elem-b: #242428;
  --elem-ht: #29292E;
  --elem-hb: #2E2E33;
  --input-t: #0A0A0C;
  --input-b: #0F0F12;
  --box-t: #414146;
  --box-b: #2D2D32;
  --track-t: #232327;
  --track-b: #2E2E33;
  --g-edge-t: #33333A;
  --g-edge-b: #1C1C20;
  --icon: #64646C;
  --icon-hv: #A0A0A8;
  --ac-glow: none;
  --tick: var(--ac-grad-v);
  --tick-on: linear-gradient(180deg, var(--ac-pink), var(--ac) 40%, var(--ac-deep));
  --disp: var(--ui);
  --mono: var(--ui);
  --band-w: 0px;
  --page-x: var(--pad);
  --head-h: 32px;
  --bar-h: 36px;
  --r-card: 0;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
/* the only round things: spinners, the profile avatar, radio picks */
.spin, .acct .av, .poll-pick:not(.multi) .poll-box, .poll-ck, .burst::before, .rx-stack > svg { border-radius: 50% !important; }
html { background: var(--s-page); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
/* the app's crisp 1 px drop shadow under every text */
body { margin: 0; min-height: 100vh; min-height: 100dvh; font: 400 var(--fs-base)/20px var(--ui); color: var(--tx-2); background: var(--s-page);
  text-shadow: 1px 1px 0 rgba(0,0,0,.7); display: flex; flex-direction: column; }
input, textarea, select, .mk-code, .pbody, .ed-prev, kbd { text-shadow: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--ac-hi); text-decoration: none; }
a:hover { color: #D6C4FF; }
img { max-width: 100%; }
[hidden] { display: none !important; }
#root { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
::selection { background: rgba(155,123,255,.45); color: #fff; }
:focus-visible { outline: 1px solid var(--ac); outline-offset: 1px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--s-page); }
::-webkit-scrollbar-thumb { background: #2A2A30; border: 2px solid var(--s-page); }
::-webkit-scrollbar-thumb:hover { background: #45454D; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #2A2A30 var(--s-page); } }

/* text helpers */
.t2, .c-dim { color: var(--tx-2); }
.t3, .c-off { color: var(--tx-3); }
.t4 { color: var(--tx-4); }
.c-hi, .c-text { color: var(--tx); }
.okc, .c-ok { color: var(--ok); }
.warnc, .c-warn { color: var(--warn); }
.errc, .c-err { color: var(--err); }
.acc, .c-accent { color: var(--ac-hi); }
.mono { font: 400 var(--fs-md) var(--ui); font-variant-numeric: tabular-nums; }
/* a quiet label: the app has no uppercase captions, only dim text */
.cap { font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.f-sm { font-size: var(--fs-md); line-height: 17px; }
.row-f { display: flex; align-items: center; gap: var(--sp-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* icons: the line glyphs of ui.js ic(), in the text's colour */
.ic { display: inline-block; flex: none; width: 12px; height: 12px; vertical-align: -1px; }
.ic.blank { background: none; }
.ic.off { opacity: .4; }
.ic.inl { margin: 0 4px 0 0; }
.ic.ln { width: 14px; height: 14px; vertical-align: -3px; color: inherit; }
.ic.ln > svg { width: 100%; height: 100%; }
.ic-stat-acc-err.ln { color: var(--err); }
.ic-role-admin.ln { color: var(--r-admin); } .ic-role-moderator.ln { color: var(--r-mod); } .ic-role-premium.ln { color: var(--r-prem); } .ic-role-registered.ln { color: var(--tx-3); }
.ic-stat-acc-play.ln { color: var(--ok); }
.ic-stat-siren.ln { color: var(--warn); }
.ic-web-thumb-on.ln, .ic-fb-star.ln { color: var(--ac-hi); }
.ic-web-thumb-on.ln path { fill: currentColor; fill-opacity: .25; }
.smi { image-rendering: pixelated; vertical-align: -3px; }
svg.g { flex: none; display: block; }

/* roles: flat text in the role colour */
.role-admin { color: var(--r-admin); font-weight: 700; }
.role-moderator { color: var(--r-mod); }
.role-premium { color: var(--r-prem); }
.role-registered { color: var(--r-reg); }

/* ---------------------------------------------------------------- buttons (the loader's button)
   a black outline, the element gradient and a lit top edge; hover tints toward the accent. The primary is the active
   tab: the accent tint with the 2 px gradient along its bottom. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 12px; flex: none; position: relative;
  font: 700 var(--fs-md)/16px var(--ui); color: var(--tx-2); white-space: nowrap; text-decoration: none; text-shadow: 1px 1px 0 #000;
  border: 1px solid #000; background: linear-gradient(180deg, #26262B, #1B1B1F); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background var(--hover), color var(--hover); }
.btn:hover:not(:disabled) { background: linear-gradient(180deg, #34313F, #29263A); color: var(--tx); }
.btn:active:not(:disabled) { background: linear-gradient(180deg, #19191C, #222226); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.btn:disabled { color: var(--tx-4); background: linear-gradient(180deg, #1C1C1F, #17171A); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.btn.sm { height: 24px; padding: 0 10px; font-size: var(--fs-sm); }
.btn.xs { height: 20px; padding: 0 8px; font-size: var(--fs-sm); }
.btn.lg { height: 34px; padding: 0 18px; }
.btn.full { width: 100%; }
.btn.pri { color: var(--tx); background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-t), var(--tab-b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn.pri:hover:not(:disabled) { color: #fff; background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-ht), var(--tab-hb)); }
.btn.pri:active:not(:disabled), .btn.pri.busy { background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-b), var(--tab-t)); }
.btn.pri.busy { opacity: 1; }
.btn.pri:disabled:not(.busy) { color: var(--tx-4); background: linear-gradient(180deg, #1C1C1F, #17171A); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--tx-3); }
.btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,.05); color: var(--tx); }
.btn.danger { color: #F0A0A0; }
.btn.armed, .btn.armed:hover:not(:disabled) { background: linear-gradient(180deg, #4A2424, #321818); color: #FFC4C4; }
.btn.on { color: var(--ac-hi); }
.btn.soon, .btn.soon:hover:not(:disabled) { color: var(--tx-4); background: linear-gradient(180deg, #1B1B1E, #161619); cursor: default; }
.btn.icon { width: var(--ctl-h); padding: 0; }
.btn.icon.sm { width: 24px; } .btn.icon.xs { width: 20px; }
.btn .ic { margin: 0; }

.spin { width: 11px; height: 11px; flex: none; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--ac-pink); animation: rot .8s linear infinite; }
.spin.dim { border-color: rgba(255,255,255,.08); border-top-color: var(--ac); }
@keyframes rot { to { transform: rotate(360deg); } }
/* the state square (the loader's state dot): 6 px, a black ring, a short gradient of its colour */
.live, .sq { display: inline-block; width: 6px; height: 6px; flex: none; position: relative; box-shadow: 0 0 0 1px #000;
  background: linear-gradient(180deg, var(--ok), #446F3E); }
.live.warn, .sq.warn { background: linear-gradient(180deg, var(--warn), #8E6C25); }
.live.err, .sq.err { background: linear-gradient(180deg, var(--err), #923131); }
.live.off, .sq.off { background: linear-gradient(180deg, #727278, #47474C); }
.sq.ac { background: linear-gradient(180deg, var(--ac-hi), var(--ac-deep)); }
.dotsep { width: 2px; height: 2px; background: var(--tx-4); flex: none; display: inline-block; }
/* "label ■ value" (ui.js pair): the status bar's and the loader card's unit */
.pair { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.pair > .pk { color: var(--tx-4); }
.pair > .pv { color: var(--tx-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- checkbox, switch, segmented control, stepper
   the app's checkbox: a small square, grey when off, the fan when on; the switch is the same box */
.sw, .ck { position: relative; width: 10px; height: 10px; flex: none; padding: 0; display: block; border: 1px solid #000;
  background: linear-gradient(180deg, var(--box-t), var(--box-b)); }
.sw::before { content: ""; position: absolute; inset: -6px; }
.sw.on, .ck.on { background: linear-gradient(180deg, #BA83FF, var(--ac-deep)); }
.sw:hover:not(.on):not(:disabled), .check-row:hover .ck:not(.on) { background: linear-gradient(180deg, #4C4560, #343041); }
.sw.on:hover:not(:disabled) { background: linear-gradient(180deg, #C99BFF, #6059BF); }
.sw:disabled { opacity: .4; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 22px; cursor: pointer; user-select: none; }
.check-row .lab { flex: 1; min-width: 0; font-size: var(--fs-base); color: var(--tx-2); }
.check-row:hover .lab { color: var(--tx); }
/* the segmented control (the tab pill's little sibling): a black frame on a dark well, a tick between segments, the
   picked one the accent tint with the gradient underline */
.seg { display: inline-flex; flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid #000;
  background: linear-gradient(180deg, #1B1B1F, #131316); box-shadow: 0 1px 0 var(--bev-hi); }
.seg::-webkit-scrollbar { display: none; }
.seg > button { position: relative; display: flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 12px; border: 0; background: transparent;
  font: 400 var(--fs-md)/26px var(--ui); color: var(--tx-3); white-space: nowrap; text-shadow: 1px 1px 0 #000; transition: color var(--hover), background var(--hover); }
.seg > button + button::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: #000; box-shadow: 1px 0 0 rgba(255,255,255,.03); }
.seg > button:hover { color: var(--tx-2); background: rgba(255,255,255,.03); }
.seg > button.on { color: var(--tx); background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-t), var(--tab-b)); }
.seg > button.on::before, .seg > button.on + button::before { opacity: 0; }
/* the strip scrolls (overflow clips), so an outset ring would lose its top and bottom */
.seg > button:focus-visible { outline-offset: -2px; }
.seg.sm > button { height: 20px; line-height: 20px; padding: 0 9px; font-size: var(--fs-sm); }
.stepper { display: inline-flex; align-items: center; height: var(--ctl-h); flex: none; border: 1px solid #000; background: linear-gradient(180deg, var(--input-t), var(--input-b)); }
.stepper > button { width: 24px; height: 100%; border: 0; background: transparent; color: var(--tx-3); display: grid; place-items: center; }
.stepper > button:hover { color: var(--tx); background: rgba(255,255,255,.04); }
.stepper .val { min-width: 54px; padding: 0 8px; text-align: center; font: 700 var(--fs-md)/26px var(--ui); border-left: 1px solid #000; border-right: 1px solid #000; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- fields (the loader's field)
   a well in a black outline with shade along its top; hover greys the outline, focus turns it the accent */
.inp, textarea.field, .inp.area, .ed-frame, .combo, .fr2 > input { border: 1px solid #000; background: linear-gradient(180deg, var(--input-t), var(--input-b));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); transition: border-color var(--hover), box-shadow var(--hover); }
.inp:hover, textarea.field:hover, .ed-frame:hover, .combo:hover:not(:disabled), .fr2 > input:hover { border-color: #2C2C32; }
.inp:focus-within, textarea.field:focus, .ed-frame:focus-within, .combo.open, .fr2 > input:focus { border-color: var(--ac-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(155,123,255,.18); }
.inp.err, .fgrp.err .fr2 > input { border-color: #7A2E2E; }
.ed-frame { min-width: 0; }
.inp { display: flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 0 8px; min-width: 0; }
.inp > input, .inp > textarea, input.bare, textarea.bare { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font: 400 var(--fs-base)/18px var(--ui); color: var(--tx); }
.inp .btn.icon { margin-right: -6px; }
input::placeholder, textarea::placeholder { color: var(--tx-4); opacity: 1; }
textarea.field, .inp.area { display: block; width: 100%; min-height: 96px; height: auto; padding: 7px 8px; font: 400 var(--fs-base)/20px var(--ui); color: var(--tx); outline: 0; resize: vertical; }
input[type=file] { font-size: var(--fs-md); color: var(--tx-2); }
/* a form: each field a label over its well (the loader's sign-in) */
.fgrp { display: flex; flex-direction: column; gap: 10px; }
.fr2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 4px; }
.fr2 > .fl { grid-column: 1 / -1; font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3); white-space: nowrap; transition: color var(--hover); }
.fr2 > input { width: 100%; min-width: 0; height: 30px; padding: 0 9px; outline: 0; font: 400 var(--fs-base)/18px var(--ui); color: var(--tx); }
.fr2 > input:not(:last-child) { grid-column: 1; }
.fr2 > input:last-child { grid-column: 1 / -1; }
.fr2:focus-within > .fl { color: var(--tx); }
.fr2 > .row-f { grid-column: 1 / -1; }
.captcha { flex: none; width: 150px; height: 48px; overflow: hidden; border: 1px solid #000; background: var(--s-well); display: grid; place-items: center; }
.captcha img { display: block; width: 150px; height: 48px; image-rendering: pixelated; }

/* dropdown (combo): a field, its list a popup */
.combo { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 0 8px; min-width: 120px; max-width: 100%; text-align: left;
  font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-2); }
.combo > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo > svg { flex: none; opacity: .6; }
.combo:disabled { color: var(--tx-4); }
.combo.sm { height: 22px; font-size: var(--fs-sm); }
/* popups: the raised surface in a black ring, rows of 26 */
.popup { position: fixed; z-index: 1000; padding: 2px; overflow-y: auto; overflow-x: hidden; background: var(--s-pop); border: 1px solid #000;
  box-shadow: var(--el-2); animation: pop-in var(--t-fast) ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-3px); } }
.popup .opt { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; font-size: var(--fs-md); color: #9A9AA2; cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background var(--hover), color var(--hover); }
.popup .opt:hover, .popup .opt.hv { background: #27272D; color: var(--tx); }
.popup .opt.sel { color: var(--ac-hi); font-weight: 700; }
.popup .opt.danger { color: #F0A0A0; }
.popup .opt .ic { opacity: .85; }
.popup .opt kbd { margin-left: auto; line-height: 16px; }
.popup .sep { height: 1px; margin: 3px 0; background: #000; box-shadow: 0 1px 0 var(--e-line); }

/* ---------------------------------------------------------------- chips, badges, tips, toasts */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; flex: none; vertical-align: middle; white-space: nowrap;
  font: 400 var(--fs-sm)/14px var(--ui); color: var(--tx-2); background: #1C1C20; border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.chip b { font: 700 var(--fs-sm) var(--ui); color: var(--tx); font-variant-numeric: tabular-nums; }
.chip.ac { background: #2A2340; color: #D8C6FF; }
.chip.ok { background: #1A281A; color: var(--ok); }
.chip.warn, .chip.c-warn { background: #2C2414; color: var(--warn); }
.chip.err { background: #2E1818; color: #F08080; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd, .badge { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; flex: none; vertical-align: middle; text-align: center;
  font: 700 var(--fs-xs)/16px var(--ui); color: var(--tx-2); background: #26262B; box-shadow: 0 0 0 1px #000; text-shadow: none; font-variant-numeric: tabular-nums; }
.bd.warn, .badge.chan.beta { background: #3A2E12; color: var(--warn); }
.bd.ok, .badge.chan { background: #1E3020; color: var(--ok); }
.bd.ac, .badge.inline:not(.chan) { background: #3A2C5C; color: #E3D2FF; }
.bd.mute { background: #202024; color: var(--tx-3); }
.bd.dot { min-width: 0; width: 5px; height: 5px; padding: 0; font-size: 0; background: var(--ac); }
.bd.dot.warn { background: var(--warn); }
.badge.inline { margin-left: 6px; }
.tip { position: fixed; z-index: 2000; max-width: 300px; padding: 5px 8px; pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 var(--fs-md)/17px var(--ui); color: var(--tx-2); background: var(--s-pop); border: 1px solid #000; box-shadow: var(--el-2); animation: pop-in var(--panel); }
.toasts { position: fixed; right: calc(20px + var(--in-r)); bottom: calc(var(--foot-stick) + 12px + var(--in-b)); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; position: relative; width: 340px; max-width: calc(100vw - 32px); display: flex; gap: 10px; align-items: center; padding: 9px 8px 9px 14px;
  background: var(--s-pop); border: 1px solid #000; box-shadow: var(--el-2); animation: toast-in var(--panel); }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--tick-on); }
.toast.ok::before { background: var(--ok); } .toast.warn::before { background: var(--warn); } .toast.err::before { background: var(--err); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity var(--panel), transform var(--panel); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast .ti { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.toast .tt { flex: 1; min-width: 0; font: 400 var(--fs-md)/17px var(--ui); color: var(--tx); overflow-wrap: anywhere; }
.toast .ts { display: block; font-size: var(--fs-sm); color: var(--tx-3); }
.toast .tx-x { align-self: flex-start; margin: -2px -2px 0 0; color: var(--tx-4); }
.toast .tx-x:hover { color: var(--tx-2); }
/* a docked composer (topic, ticket) owns the bottom edge: toasts move under the header instead */
body:has(.pane.docked > .dock) .toasts { top: calc(var(--hdr-h) + var(--sub-h) + 14px + var(--in-t)); bottom: auto; }

/* ---------------------------------------------------------------- groupboxes (the app's group_begin)
   the box body in a black ring with a lit top edge; a titled box has the title bar with the accent left cap, which
   brightens while the pointer is over the box. Two boxes side by side: .gb-grid (or the older .grid2). */
.card { position: relative; min-width: 0; background: var(--s-box); border: 1px solid var(--e-line); border-top-color: var(--g-edge-t); border-bottom-color: var(--g-edge-b);
  box-shadow: var(--el-1); }
.card-h { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--cap-h); padding: 0 12px 0 var(--g-l);
  background: linear-gradient(180deg, #1D1D21, #17171A); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.025);
  transition: background var(--hover); }
.card-h::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: 0; width: 2px; background: var(--ac-grad-v); opacity: .75; transition: opacity var(--hover); }
.card:hover > .card-h::before { opacity: 1; }
.card:hover > .card-h { background: linear-gradient(180deg, #212027, #18181C); }
.card-h h3 { min-width: 0; font: 700 var(--fs-md)/16px var(--ui); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* plain text titles: no pictures in caps */
.card-h > .ic, .card-h > svg.g { display: none; }
.card-h > .bd { background: #0E0E11; color: var(--tx-3); box-shadow: 0 0 0 1px #000, 0 1px 0 1px rgba(255,255,255,.03); }
.card-h .aside { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; font-size: var(--fs-md); color: var(--tx-4); }
.card-h .aside:empty { display: none; }
.card-h a.out, .card-h .out { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3); }
.card-h a.out:hover { color: var(--ac-hi); }
.card-b { padding: 12px var(--g-r) 14px var(--g-l); }
.card-b.flush { padding: 0; }
/* a callout: the tone's cap on the left */
.card.callout { display: flex; align-items: center; gap: 12px; padding: 12px var(--g-r) 12px var(--g-l); }
.card.callout::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--tick-on); }
.card.callout.warn { background: linear-gradient(90deg, #201B10, var(--s-box) 40%); }
.card.callout.err { background: linear-gradient(90deg, #231414, var(--s-box) 40%); }
.card.callout.warn::before { background: var(--warn); }
.card.callout.err::before { background: var(--err); }
.card.callout > .ic { display: none; }
.card.callout .grow { font-size: var(--fs-base); line-height: 20px; }
.gb-grid, .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
/* a well inside a box: lists, logs, tiles */
.well { background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.rows { padding: 4px 0; }
.r { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px var(--g-r) 6px var(--g-l); }
.r:hover { background: var(--s-hover); }
.r + .r { border-top: 1px solid var(--e-hair); }
.empty { display: block; padding: 16px var(--g-r) 16px var(--g-l); color: var(--tx-3); font-size: var(--fs-md); line-height: 20px; }
.empty.left { padding: 4px 0; }
.loading { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 12px var(--g-r) 12px var(--g-l); color: var(--tx-3); font-size: var(--fs-md); }
.err-line { display: flex; align-items: flex-start; gap: 8px; color: #F08080; font-size: var(--fs-md); line-height: 18px; }
.err-line > .ic { display: none; }

/* stat rows (the loader's stat_row): the dim label left, the value bold in the accent right, a state square and word
   before it; the meter is the slider track with the fan as its fill */
.kv { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.kv > .k { flex: 1; min-width: 0; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv > .k::first-letter { text-transform: uppercase; }
.kv > .st { color: var(--tx-3); }
.kv > .v { font-weight: 700; color: var(--ac-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv > .v.plain { color: var(--tx); }
.meter { position: relative; height: 5px; margin: 8px 0 12px; box-shadow: 0 0 0 1px #000, 0 1px 0 1px rgba(255,255,255,.03); background: linear-gradient(180deg, var(--track-t), var(--track-b)); }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,.14) 50%, transparent 50%), var(--ac-grad); }
.hint { color: var(--tx-3); font-size: var(--fs-md); line-height: 18px; }
/* the loader's game card (store plans, the loader card): the CS2 tile in a black and lit ring, the name bold, the
   state square and word under it */
.hm-game { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.hm-game img { width: 38px; height: 38px; flex: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2C2C32, 0 6px 14px -6px rgba(0,0,0,.9); }
.hm-game b { display: block; font: 700 var(--fs-base)/18px var(--ui); color: var(--tx); }
.hm-st { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); }

/* avatars: a square tile in a black ring; no picture is the name's letter on a raised tone */
.av { flex: none; position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #2E2E34, #232328); box-shadow: 0 0 0 1px #000; }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av.px img { image-rendering: pixelated; }
.av .mono-l { font: 700 var(--fs-md)/1 var(--ui); color: var(--tx-3); text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.av.s32 .mono-l { font-size: var(--fs-base); } .av.s48 .mono-l, .av.s64 .mono-l, .av.s96 .mono-l { font-size: var(--fs-lg); }

/* ---------------------------------------------------------------- dialogs and drawers (ui.js openWindow): an app window
   (the strip, a title bar, the body, a status line) */
.scrim { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(2,2,4,.66);
  padding: calc(16px + var(--in-t)) calc(16px + var(--in-r)) calc(16px + var(--in-b)) calc(16px + var(--in-l)); animation: fade var(--panel); }
@keyframes fade { from { opacity: 0; } }
.scrim.out { pointer-events: none; animation: fade-out 140ms ease-in forwards; }
.scrim.out .dlg { animation: dlg-out 140ms ease-in forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(4px); } }
.scrim.drawer.out .dlg { animation-name: drawer-out; }
@keyframes drawer-out { to { opacity: 0; transform: translateX(24px); } }
.dlg { width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--s-page); border: 1px solid var(--e-line-2);
  box-shadow: var(--el-3); animation: dlg-in var(--panel); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px); } }
.dlg-h { display: flex; align-items: center; gap: 10px; flex: none; min-height: 38px; padding: 2px 6px 0 14px; border-bottom: 1px solid #000;
  background: var(--ac-grad) 0 0 / 100% 2px no-repeat, linear-gradient(180deg, #18181B, #121215); box-shadow: 0 1px 0 var(--e-hair); }
.dlg-h h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-md)/16px var(--ui); color: var(--tx); }
.dlg-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--s-page); }
.dlg-b > .pane { padding: 16px var(--pad); }
.dlg-f { flex: none; padding: 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 var(--fs-sm)/16px var(--ui); color: var(--tx-4);
  border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--bev-hi); background: linear-gradient(180deg, #131316, #0E0E11); }
.dlg-f:empty { display: none; }
.scrim.drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.scrim.drawer .dlg { height: 100%; max-height: none; border-width: 0 0 0 1px; animation: drawer-in var(--panel); padding-top: var(--in-t); padding-bottom: var(--in-b); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.doc p { color: var(--tx-2); font-size: var(--fs-base); line-height: 20px; }
.doc p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- the site shell (app.js buildShell): the app window
   over the whole viewport. The document scrolls (views rely on window scroll); the strip, title bar and sub-tab row
   stick to the top and the status bar to the bottom. Every bar lines its content up with the page column (--col). */
.mw { position: relative; background: var(--s-shell); border: 1px solid #000; box-shadow: var(--el-3); }
.mw-site { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; border: 0; box-shadow: none;
  background: linear-gradient(180deg, #0F0F12, var(--s-page) 320px) no-repeat, var(--s-page); }
.mw-top { position: sticky; top: 0; z-index: 40; }
/* the 2 px gradient; a soft light band crosses it every 6 s */
.mw-strip { position: relative; height: 2px; flex: none; overflow: hidden; background: var(--ac-grad); }
.mw-strip::after { content: ""; position: absolute; top: 0; height: 2px; width: 180px; left: -180px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: strip-pass 6s linear infinite; }
@keyframes strip-pass { 0% { left: -180px; } 26.6%, 100% { left: 100%; } }
.brand { display: flex; align-items: center; flex: none; color: var(--tx); text-decoration: none; }
.brand .name { font: 700 var(--fs-lg)/18px var(--ui); color: var(--tx); letter-spacing: .2px; }

/* the title bar: wordmark | the sections as the app's segmented tab pill (icon + label) | envelope, bell, profile */
.mw-hdr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-6); height: var(--hdr-h);
  padding: 0 var(--edge-x); background: linear-gradient(180deg, #17171A, #101013); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
a.hdr-brand { justify-self: start; display: flex; align-items: center; height: 100%; }
a.hdr-brand:hover .name { color: #fff; }
.hdr-tabs { display: flex; align-items: stretch; height: 30px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border: 1px solid #000; background: linear-gradient(180deg, #1C1C20, #141417); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 0 rgba(255,255,255,.03); }
.hdr-tabs::-webkit-scrollbar { display: none; }
.hdr-tabs .rt { position: relative; display: flex; align-items: center; gap: 7px; flex: none; padding: 0 14px;
  font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3); white-space: nowrap; transition: color var(--hover), background var(--hover); }
.hdr-tabs .rt > svg { width: 14px; height: 14px; color: var(--tx-4); transition: color var(--hover); }
.hdr-tabs .rt + .rt::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: #000; box-shadow: 1px 0 0 rgba(255,255,255,.035); }
.hdr-tabs .rt:hover { color: var(--tx-2); background: rgba(255,255,255,.035); }
.hdr-tabs .rt:hover > svg { color: var(--tx-3); }
.hdr-tabs .rt.on { color: var(--tx); background: linear-gradient(180deg, var(--tab-t), var(--tab-b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.hdr-tabs .rt.on > svg { color: #D9CBFF; }
.hdr-tabs .rt.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ac-grad); }
.hdr-tabs .rt.on::before, .hdr-tabs .rt.on + .rt::before { opacity: 0; }
/* both tab rows scroll (overflow clips), so an outset ring would lose its top and bottom */
.hdr-tabs .rt:focus-visible, .subtabs a:focus-visible { outline-offset: -3px; }
/* unread on a tab or sub-tab: a small square beside the name, never a count stuck to it */
.hdr-tabs .bd.dot, .subtabs .bd.dot { position: absolute; top: 6px; right: 5px; width: 5px; height: 5px; margin: 0; background: var(--ac-pink); box-shadow: 0 0 0 1px #000; }
.subtabs .bd.dot { top: 10px; right: 4px; }
.hdr-tabs .bd.dot.warn, .subtabs .bd.dot.warn { background: var(--warn); }
.hdr-r { justify-self: end; display: flex; align-items: center; gap: 2px; min-width: 0; }
/* the envelope (js/pm.js) and the bell (js/alerts.js): bare glyph buttons, the unread count in dark ink on the accent */
.al-slot { display: contents; }
.btn.al-bell { position: relative; flex: none; width: 28px; height: 28px; border-color: transparent; background: none; box-shadow: none; color: var(--icon-hv); }
.btn.al-bell:hover:not(:disabled), .btn.al-bell.open { color: var(--tx); background: rgba(255,255,255,.05); }
.btn.pm-env > svg { width: 16px; height: 16px; }
.al-bd { position: absolute; top: 0; right: -5px; min-width: 13px; height: 13px; padding: 0 3px; font: 700 10px/13px var(--ui); text-align: center; color: #120E26; background: var(--ac);
  box-shadow: 0 0 0 1px #000; text-shadow: none; pointer-events: none; }
.al-bd.up { animation: al-up 320ms cubic-bezier(.2,.9,.3,1.3); }
@keyframes al-up { from { transform: scale(.4); opacity: 0; } }
.hdr-icons, .hdr-icons > .al-slot { display: flex; align-items: center; gap: 8px; }
.hdr-icons > .al-slot > .al-slot { display: contents; }
/* the count rides the glyph's corner, cut out of the bar by a ring of the bar's own tone */
.hdr-icons .al-bd { top: -1px; right: -8px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #141417; }
.vsep { width: 1px; height: 18px; margin: 0 10px; flex: none; background: #000; box-shadow: 1px 0 0 var(--e-line); }
/* the profile block: "Welcome back, " dim, the name bold in the accent, the round avatar in an accent ring */
.acct { display: flex; align-items: center; height: 32px; min-width: 0; padding: 0 4px 0 8px; margin-right: -4px; border: 0; background: none; color: var(--tx-3); white-space: nowrap;
  transition: background var(--hover); }
.acct:hover, .acct.open { background: rgba(255,255,255,.05); }
.acct .wb { color: var(--tx-3); font-size: var(--fs-md); white-space: pre; }
.acct .nm { min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; font: 700 var(--fs-md)/16px var(--ui); color: var(--ac-hi); }
.acct .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px #5E4F8E; }
.acct .av .mono-l { font-size: var(--fs-xs); }
.acct:hover .nm, .acct.open .nm, .acct.on .nm { color: #D6C4FF; }
.acct:hover .wb, .acct.open .wb { color: var(--tx-2); }
.umenu { min-width: 220px; }
.umenu .who-h { display: flex; align-items: center; gap: 10px; margin: 0 0 3px; padding: 10px 12px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-line);
  background: var(--ac-grad) 0 0 / 100% 2px no-repeat; }
.umenu .who-h .nm { font: 700 var(--fs-base)/18px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umenu .who-h .sub { margin-top: 1px; font-size: var(--fs-md); line-height: 16px; color: var(--tx-3); }

/* the sub-tab row: the section bold with its dim note | the pages as centred text tabs over one sliding gradient ink |
   the forum search. A black line, then a faint lit one, along its bottom. */
.mw-sub { height: var(--sub-h); padding: 0 var(--edge-x); background: linear-gradient(180deg, #111114, #0D0D10); border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
.sb-in { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--sp-4); }
.sb-h { justify-self: start; align-self: center; display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sb-t { flex: none; font: 700 var(--fs-md)/16px var(--ui); color: var(--tx); white-space: nowrap; }
.sb-t:empty { display: none; }
.sb-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-md); color: var(--tx-4); white-space: nowrap; }
.subtabs { position: relative; justify-self: center; display: flex; align-items: stretch; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { position: relative; display: flex; align-items: center; padding: 0 14px 2px; font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3);
  white-space: nowrap; transition: color var(--hover); }
.subtabs a:hover { color: var(--tx-2); }
.subtabs a.on { color: var(--tx); }
.sub-ink { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; pointer-events: none; background: var(--ac-grad); transform-origin: 0 0; }
.sub-ink.go { transition: transform 220ms var(--ease), width 220ms var(--ease); }
.kbtn { justify-self: end; flex: none; align-self: center; display: flex; align-items: center; gap: 6px; width: 240px; max-width: 100%; height: 26px; padding: 0 4px 0 8px;
  color: var(--tx-3); border: 1px solid #000; background: linear-gradient(180deg, var(--input-t), var(--input-b)); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi);
  transition: border-color var(--hover); }
.kbtn > svg { color: var(--tx-4); }
.kbtn:hover { border-color: #2C2C32; }
.kbtn:focus-within { border-color: var(--ac-line); }
.kbtn input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 var(--fs-md) var(--ui); color: var(--tx); }
.kbtn input::-webkit-search-cancel-button { display: none; }
.kbtn > kbd { cursor: pointer; transition: color var(--hover); }
.kbtn > kbd:hover { color: var(--ac-hi); }
kbd { white-space: nowrap; font: 400 var(--fs-xs)/14px var(--ui); color: var(--tx-3); padding: 0 4px; border: 1px solid #000; background: #1C1C20; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.top-in { display: flex; align-items: center; gap: 10px; padding: 0 var(--edge-x); }
.stale-bar { color: var(--warn); font-size: var(--fs-md); background: #1F1A0E; border-bottom: 1px solid #000; }
.stale-bar .top-in { height: 32px; }

/* the page: the content column on the window body */
.page { flex: 1; width: 100%; max-width: calc(var(--col) + 2 * var(--pad)); margin: 0 auto; padding: var(--sp-5) var(--pad) var(--sp-8); min-width: 0; }
.pane { min-width: 0; }

/* the status bar (the app's footer): the address and the legal pages left, "label ■ value" pairs right, joined by
   2 px squares */
.mw-foot { display: flex; align-items: center; gap: 10px; height: var(--foot-h); padding: 0 var(--edge-x); flex: none; white-space: nowrap;
  font: 400 var(--fs-sm)/14px var(--ui); color: var(--tx-4); background: linear-gradient(180deg, #121215, #0D0D10); border-top: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.mw-site > .mw-foot { position: sticky; bottom: 0; z-index: 40; }
.mw-foot .f1 { color: var(--tx-3); }
.mw-foot nav { display: flex; align-items: center; gap: 10px; }
.mw-foot nav a, .mw-foot nav button { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: var(--tx-4); }
.mw-foot nav::before, .mw-foot nav > * + *::before { content: ""; width: 2px; height: 2px; background: var(--tx-4); }
.mw-foot nav a:hover, .mw-foot nav button:hover { color: var(--tx-2); }
.mw-foot .grow { flex: 1; }
.fst { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-2); }
.fst small { font-size: var(--fs-sm); color: var(--tx-4); margin-right: 2px; }
.fst > span { font-variant-numeric: tabular-nums; }
a.fst:hover > span { color: var(--tx); }
a.fst:hover small { color: var(--tx-3); }
.fst .sq { width: 5px; height: 5px; }
.fst.lic .sq { background: linear-gradient(180deg, #727278, #47474C); }
.fst.lic.on .sq { background: linear-gradient(180deg, var(--ac-hi), var(--ac-deep)); }
.fst.lic.bad .sq { background: linear-gradient(180deg, var(--err), #923131); }
.fst + .fst::before { content: ""; width: 2px; height: 2px; margin: 0 4px 0 0; background: var(--tx-4); }

/* the progress line along the very top while a page or a click's answer is on its way (app.js, api.js waiting) */
.nprog { position: fixed; top: var(--in-t); left: 0; z-index: 4000; width: 0; height: 2px; pointer-events: none; opacity: 0; background: #fff; mix-blend-mode: overlay; box-shadow: 0 0 6px rgba(244,147,255,.6); }
.nprog.run { opacity: 1; animation: nprog 8s cubic-bezier(.08,.7,.2,1) forwards; }
.nprog.done { opacity: 0; width: 100%; transition: width 180ms ease-out, opacity 260ms 160ms ease-out; }
@keyframes nprog { from { width: 0; } 20% { width: 45%; } to { width: 88%; } }
/* back to top: a small square button above the status bar once the page is scrolled well down */
.to-top, .btn.icon.to-top { position: fixed; right: calc(20px + var(--in-r)); bottom: calc(var(--foot-stick) + 12px + var(--in-b)); z-index: 700; width: 28px; height: 28px;
  visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--panel), visibility 0s 160ms; }
.to-top.on { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
body:has(.pane.docked) .to-top, body:has(.scrim) .to-top { opacity: 0; pointer-events: none; }
/* the shortcut list (app.js keyHelp) */
.kb-list { display: flex; flex-direction: column; }
.dlg .pane.kb-list > * { margin-bottom: 0; }
.kb-list .cap { padding: 12px 0 4px; }
.kb-list .cap:first-child { padding-top: 0; }
.kb-row { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: var(--fs-base); color: var(--tx-2); }
.kb-row + .kb-row { border-top: 1px solid var(--e-hair); }
.kb-row kbd { min-width: 22px; text-align: center; font-size: var(--fs-sm); line-height: 18px; color: var(--tx); }
.kb-sep { font-size: var(--fs-sm); color: var(--tx-4); }
/* a new page eases in (app.js drawPage), as the app's tab fade */
.pane.pg-in { animation: pg-in var(--t-med) ease-out backwards; }
@keyframes pg-in { from { opacity: 0; transform: translateY(6px); } }
/* a count that went up (ui.js pulse) */
.pulse { animation: pulse-up 420ms ease-out; }
@keyframes pulse-up { 0% { transform: scale(.7); } 45% { transform: scale(1.15); } }

/* ---------------------------------------------------------------- command palette (js/palette.js): a menu modal */
.scrim.cp-scrim:not(.drawer) { align-items: flex-start; padding: calc(12vh + var(--in-t)) 16px 16px; }
.cp-scrim .dlg-h, .cp-scrim .dlg-f { display: none; }
.cp { display: flex; flex-direction: column; max-height: min(560px, 76vh); }
.cp-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; flex: none; color: var(--tx-3); cursor: text;
  background: var(--ac-grad) 0 0 / 100% 2px no-repeat, linear-gradient(180deg, var(--bar), var(--bar-b)); border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--line); }
.cp-bar > svg { width: 14px; height: 14px; flex: none; color: var(--tx-3); }
.cp-in { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 13px var(--ui); color: var(--tx); }
.cp-in::placeholder { color: var(--tx-4); }
.cp-busy { display: flex; flex: none; }
.cp-esc { flex: none; }
.cp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; scroll-padding: 30px 0 4px; }
.cp-cap { padding: 8px 14px 3px; font: 400 11px/14px var(--ui); color: var(--tx-4); }
.cp-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 3px 14px; cursor: pointer; color: var(--tx-2); transition: background var(--hover), color var(--hover); }
.cp-row.on { background: var(--row-hv); color: var(--tx); }
.cp-row.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--tick-on); }
.cp-ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--tx-3); }
.cp-row.on .cp-ic { color: var(--ac-hi); }
.cp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-l { font: 400 12px/16px var(--ui); color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-l mark { background: none; color: var(--ac-hi); font-weight: 700; }
.cp-s { font-size: 11px; line-height: 14px; color: var(--tx-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-k { display: flex; gap: 4px; flex: none; }
.cp-go { flex: none; display: grid; color: var(--ac-hi); opacity: 0; }
.cp-row.on .cp-go { opacity: 1; }
.cp-row.arm, .cp-row.arm.on { background: #2A1818; color: #FFB4B4; }
.cp-row.arm::before { background: var(--err); }
.cp-row.arm .cp-ic, .cp-row.arm .cp-go { color: #FF9B9B; }
.cp-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--tx-3); font-size: 12px; text-align: center; }
.cp-none > svg { width: 18px; height: 18px; color: var(--tx-4); }
.cp-foot { display: flex; gap: 16px; flex: none; padding: 4px 14px; font-size: 11px; color: var(--tx-4); border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--line);
  background: linear-gradient(180deg, var(--bar), var(--bar-b)); }
.cp-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.cp-foot kbd { min-width: 18px; text-align: center; margin-right: 2px; }
@media (max-width: 600px) { .cp-foot { display: none; } .scrim.cp-scrim:not(.drawer) { padding-top: calc(10px + var(--in-t)); } }

/* ---------------------------------------------------------------- page layout pieces the views share */
/* page head: the title bold, the note under it dim, actions right; a black line and a faint lit one under it */
.ph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-4); padding-bottom: 14px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
.ph h1 { font: 700 var(--fs-xl)/24px var(--ui); color: var(--tx); overflow-wrap: anywhere; }
.ph .sub { margin-top: 3px; font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); }
.ph .acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sec-h { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.sec-h h2 { font: 700 var(--fs-base)/18px var(--ui); color: var(--tx-2); }
.sec-h .aside { font-size: var(--fs-md); color: var(--tx-4); }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* the rhythm inside a pane: --gap between groupboxes */
.pane > *, .dlg .pane > * { margin-bottom: var(--gap); }
.pane > :last-child, .dlg .pane > :last-child { margin-bottom: 0; }
.pane > .ph { margin-bottom: var(--sp-4); }
.pane .stack > * { margin-bottom: 0; }
.pane .stack > .ph { margin-bottom: 2px; }
.pane > .tl { margin-bottom: 4px; }
/* threads (topic, ticket): the posts scroll with the page, the composer is docked above the status bar */
.pane.docked > .scroll > * { margin-bottom: var(--gap); }
.pane.docked > .scroll > :last-child { margin-bottom: 0; }
.pane.docked > .dock { position: sticky; bottom: calc(var(--foot-stick) + 8px + var(--in-b)); z-index: 5; margin: var(--sp-4) 0 8px; padding: 12px 12px 10px;
  background: var(--ac-grad) 0 0 / 100% 2px no-repeat, var(--s-box); border: 1px solid var(--e-line-2); box-shadow: 0 0 0 1px #000, 0 -10px 24px rgba(0,0,0,.55); }
.page:has(> .pane.docked) { padding-bottom: 0; }
.dock textarea.field { min-height: 72px; height: 72px; }
/* small pieces: a text line with an icon (util.js msgLine), a button bar, a textarea box (util.js area) */
.tl { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-base); line-height: 20px; }
.tl.f-sm { font-size: var(--fs-md); line-height: 18px; }
.tl > .ic { margin-top: 3px; }
.msg-line:empty { display: none; }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bar > .grow { flex: 1; min-width: 0; }
.fieldbox { display: block; }
.acts { display: flex; gap: 4px; }
.copy { cursor: pointer; }
.dot { display: inline-block; width: 6px; height: 6px; margin-top: 7px; flex: none; background: currentColor; }
.bio { font-size: var(--fs-base); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* crumbs (forum pages) and the pager (util.js pager) */
.crumbs { align-items: center; color: var(--tx-3); font-size: var(--fs-md); }
.crumbs a.lnk { color: var(--tx-2); }
.crumbs a.lnk:hover { color: var(--ac-hi); }
.crumbs a.back { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 5px; margin-right: 8px; flex: none; font-weight: 700; font-size: var(--fs-sm); color: var(--tx-2);
  border: 1px solid #000; background: linear-gradient(180deg, #232327, #1A1A1E); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.crumbs a.back:hover { color: var(--tx); background: linear-gradient(180deg, #34313F, #29263A); }
.pager { display: flex; align-items: center; gap: 6px; }
.pager .pg { padding: 0 4px; font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-2); font-variant-numeric: tabular-nums; }
/* the detail side of a list | detail split while nothing is open (ui.js pickPane): a glyph tile, what to do, a quiet
   line, then a button or a strip of pairs. Every split (messages, tickets, admin, settings) folds to one column at 1000. */
.card.pick { display: flex; flex-direction: column; min-height: 340px; }
.pick > .card-b { flex: 1; display: grid; place-items: center; }
.pick-b { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 400px; padding: var(--sp-8) var(--sp-6); text-align: center; }
.pick-i { width: 44px; height: 44px; margin-bottom: 6px; display: grid; place-items: center; color: var(--ac-hi); border: 1px solid #000;
  background: linear-gradient(180deg, #120F1A, #19152A); box-shadow: inset 0 0 0 1px rgba(155,123,255,.2), 0 1px 0 var(--bev-hi); }
.pick-i > svg, .pick-i > .ic { width: 18px; height: 18px; }
.pick-b > b { font: 700 var(--fs-base)/18px var(--ui); color: var(--tx); }
.pick-b > .d { max-width: 360px; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); }
.pick-b > .btn { margin-top: 6px; }
.pick-n { display: flex; gap: var(--sp-4); margin-top: 12px; padding-top: 10px; font-size: var(--fs-md); border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); }
.pick-n:empty { display: none; }

/* ---------------------------------------------------------------- the sign-in window (app.js buildLogin): the loader's
   sign-in, centred on the desk. The strip, the title bar with the wordmark, a header row (Sign in, "evasive account",
   the switch to the other form), the Account groupbox with label-over-field rows and a full-width button, the status
   bar with the site's address. */
.lg-scr { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, #121216, transparent 70%), var(--s-desk); }
.mw-login { width: 100%; max-width: 372px; display: flex; flex-direction: column; animation: auth-in 220ms var(--ease); }
@keyframes auth-in { from { opacity: 0; transform: translateY(8px); } }
.mw-login .mw-hdr { display: flex; align-items: center; height: 40px; padding: 0 var(--g-l); }
.mw-login .brand .name { font-size: var(--fs-base); }
.lg-head { display: flex; align-items: baseline; gap: 10px; padding: 12px var(--g-l) 11px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); background: var(--s-shell); }
.lg-head .sb-t { font-size: var(--fs-base); }
.sb-note { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: 400 var(--fs-md)/16px var(--ui); color: var(--tx-3); }
.sb-note::after { content: ""; width: 5px; height: 5px; margin-left: -2px; border: solid var(--ac-hi); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.sb-note:hover { color: var(--tx); }
.lg-body { padding: var(--sp-4) var(--g-l); background: var(--s-shell); }
.auth { transition: opacity 90ms ease-out; }
.auth.out { opacity: 0; }
.auth.in { animation: fade 120ms ease-out; }
.auth-b { display: flex; flex-direction: column; gap: 12px; padding: 14px var(--g-r) 16px var(--g-l); }
.auth form { display: flex; flex-direction: column; gap: 16px; }
.auth .btn.pri.full { height: 32px; }
/* the reveal button sits inside the password's well */
.auth .fr2 { column-gap: 0; }
.auth .fr2 > input:not(:last-child) { border-right: 0; }
.auth .fr2 > input + .btn.icon { height: 30px; width: 30px; border-color: #000; border-left: 0; background: linear-gradient(180deg, var(--input-t), var(--input-b));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); color: var(--tx-4); transition: border-color var(--hover), color var(--hover); }
.auth .fr2 > input + .btn.icon:hover:not(:disabled) { color: var(--tx); background: linear-gradient(180deg, var(--input-t), var(--input-b)); }
.auth .fr2:has(> input:hover) > .btn.icon { border-color: #2C2C32; }
.auth .fr2:focus-within > input, .auth .fr2:focus-within > .btn.icon { border-color: var(--ac-line); }
.auth .foot-line { min-height: 18px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.auth .foot-line:empty { display: none; }
/* the invitation code reads in capitals (the server compares them that way); the placeholder stays a sentence */
.auth .fr2 > input.code:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lg-alt { margin-top: 12px; text-align: center; font-size: var(--fs-md); color: var(--tx-4); }
.mw-login .mw-foot { position: static; padding: 0 var(--g-l); }
.mw-login .mw-foot nav::before { content: none; }

/* ---------------------------------------------------------------- the forum index (views/forum.js indexView)
   Main column and a sidebar. The main column is the shoutbox and the categories; a category is a groupbox whose forums
   are a two-column tile grid (one column when narrow). The sidebar is the loader card, latest posts and profile posts;
   who is online spans both under them. */
.fx { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: var(--gap); align-items: start; }
.fx-main, .fx-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.fx-main > *, .fx-side > * { margin: 0; }
.cat .card-h h3 { font-size: var(--fs-md); }
/* the tiles meet on 1 px lines: each draws its right and bottom edge and the grid hides the outer ones */
.fgrid-w { overflow: hidden; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); width: calc(100% + 1px); margin-bottom: -1px; }
/* an odd last tile takes the whole row rather than leaving a hole beside it */
.ftile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ftile { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-content: start; min-width: 0; padding: 14px var(--g-r) 14px var(--g-l);
  border-right: 1px solid var(--e-hair); border-bottom: 1px solid var(--e-hair); cursor: pointer; transition: background var(--hover); }
.ftile:hover { background: var(--s-hover); }
.ftile:focus-visible { outline: 0; background: var(--row-fc); box-shadow: inset 0 0 0 1px var(--ac-line); }
.ftile .fi { position: relative; width: 40px; height: 40px; display: grid; place-items: center; grid-row: 1 / span 2; color: var(--tx-3);
  background: linear-gradient(180deg, var(--input-t), var(--input-b)); border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); transition: color var(--hover); }
.ftile .fi .ic.ln { width: 17px; height: 17px; }
.ftile:hover .fi { color: var(--tx-2); }
.ftile.unread .fi { color: var(--ac-hi); background: linear-gradient(180deg, #120F1A, #19152A); box-shadow: inset 0 0 0 1px rgba(155,123,255,.24), 0 1px 0 var(--bev-hi); }
.ftile.unread .fi::after { content: ""; position: absolute; right: -3px; top: -3px; width: 6px; height: 6px; background: var(--ac-pink); box-shadow: 0 0 0 1px #000; }
.ftile .fh { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ftile .fn { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.ftile .fn .nm { font: 700 var(--fs-base)/20px var(--ui); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--hover); }
.ftile.unread .fn .nm, .ftile:hover .fn .nm { color: var(--tx); }
.ftile .fn .ic.ln { width: 12px; height: 12px; color: var(--tx-4); }
.ftile .cnt { flex: none; display: flex; gap: 12px; font-size: var(--fs-sm); }
.ftile .cnt .pk { color: var(--tx-4); }
.ftile .cnt .pv { color: var(--ac-hi); font-weight: 700; }
.ftile .fd { margin-top: -6px; font-size: var(--fs-md); line-height: 18px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile .fd:empty { display: none; }
/* the newest post in a well along the tile's foot */
.ftile .flast { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; padding: 0 8px 0 4px; font-size: var(--fs-md); }
.ftile .flast .av { width: 20px !important; height: 20px !important; }
.ftile .flast .av .mono-l { font-size: var(--fs-xs); }
.ftile .flast .lt { min-width: 0; flex: 1; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile .flast a.lt:hover { color: var(--ac-hi); }
.ftile .flast .lb { flex: none; display: flex; align-items: center; gap: 6px; max-width: 46%; color: var(--tx-4); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.ftile .flast .lb .who { font-size: var(--fs-sm); }
.ftile .flast .none { padding-left: 4px; color: var(--tx-4); }

/* the loader card: the loader's Counter-Strike 2 card (game row, stat rows, the time-left meter, the buttons) with
   the strip along its top */
.ldr::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--ac-grad); pointer-events: none; }
.ldr .card-h::before { display: none; }
.ldr .card-b { padding: 14px var(--g-r) var(--g-r) var(--g-l); }
.ldr .hm-game { margin-bottom: 10px; }
.ldr .kv { min-height: 22px; font-size: var(--fs-md); }
.ldr .meter { margin: 8px 0 14px; }
.ldr-acts { display: flex; gap: 6px; }
.ldr-acts > .btn { flex: 1; }
.ldr-acts > .btn.pri { flex: 1.7; }
.ldr-foot { display: flex; align-items: center; gap: 10px; margin: 12px calc(-1 * var(--g-r)) calc(-1 * var(--g-r)) calc(-1 * var(--g-l)); padding: 0 var(--g-r) 0 var(--g-l); height: 26px;
  font-size: var(--fs-sm); border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); background: #101013; }
.ldr-foot .grow { flex: 1; }

/* sidebar lists: one row per item, a hairline between */
.srows { padding: 0; }
.srow { display: flex; gap: 10px; padding: 10px var(--g-r) 10px var(--g-l); align-items: flex-start; transition: background var(--hover); }
.srow:hover { background: var(--s-hover); }
.srow + .srow { border-top: 1px solid var(--e-hair); }
.srow .av { margin-top: 1px; }
.srow .st2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 var(--fs-md)/18px var(--ui); color: var(--tx); overflow-wrap: anywhere; }
.srow .st2:hover { color: var(--ac-hi); }
.srow .sm1 { font-size: var(--fs-sm); line-height: 16px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sm1 .mono, .fitem .mono { color: var(--tx-3); font-size: var(--fs-sm); }
.srow .who-l { color: var(--tx-2); font-size: var(--fs-md); }
.srow .sbody { font-size: var(--fs-md); line-height: 18px; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* feed rows (profile posts on a profile, What's new) */
.feed { padding: 0; }
.fitem { display: flex; gap: 12px; padding: 12px var(--g-r) 12px var(--g-l); position: relative; align-items: flex-start; }
.fitem + .fitem { border-top: 1px solid var(--e-hair); }
.fitem .fm { flex: 1; min-width: 0; }
.fitem .l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--fs-md); line-height: 18px; }
.fitem .l1 > .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fitem .l2 { font-size: var(--fs-sm); line-height: 16px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fitem .ttl { color: var(--tx); font-weight: 500; }
.fitem .ttl:hover { color: var(--ac-hi); }
.fitem .body { font-size: var(--fs-md); line-height: 18px; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0; }
.fitem .x { position: absolute; right: 8px; top: 8px; opacity: 0; transition: opacity var(--hover); }
.fitem:hover .x, .fitem .x:focus-visible { opacity: 1; }
.fitem .pp-ft { display: flex; align-items: center; gap: 6px; margin: 4px 0 -4px -8px; min-width: 0; }
.fitem .pp-ft .rx-sum { min-width: 0; }
.fitem .pp-ft .btn.rp-i { opacity: 0; transition: opacity var(--hover); }
.fitem:hover .pp-ft .btn.rp-i, .fitem .pp-ft .btn.rp-i:focus-visible { opacity: 1; }
/* a one-line form at the top of a box (a status update); the button stands as tall as its field */
.composer { display: flex; gap: 8px; padding: 12px var(--g-r) 12px var(--g-l); align-items: center; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--e-hair); }
.composer .inp { flex: 1; }
.composer > .btn:not(.icon), .shout-in > .btn:not(.icon) { height: var(--ctl-h); align-self: center; }
.composer + .err-line, .card-b > .err-line { padding: 8px 16px 0; }
.composer + .msg-line { padding: 8px var(--g-r) 0 var(--g-l); }
/* who is online, full width under the forums: every name on one wrapping line in its role colour, what the member is
   doing over the name on hover or keyboard focus, the role legend and the totals along the foot */
.fx > .fx-online { grid-column: 1 / -1; }
/* clipped sideways only: a hidden popover past the edge would still widen the page, one above a name must still show */
.on-names { padding: 10px var(--g-r) 10px var(--g-l); font-size: var(--fs-md); line-height: 20px; color: var(--tx-4); overflow-x: clip; }
.on-n { position: relative; white-space: nowrap; }
.on-n .who { font-weight: 500; }
.on-act { position: absolute; left: -8px; bottom: calc(100% + 6px); z-index: 30; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 5px 8px;
  white-space: normal; pointer-events: none; font: 400 var(--fs-md)/17px var(--ui); color: var(--tx-3); background: var(--s-pop); border: 1px solid #000; box-shadow: var(--el-2);
  visibility: hidden; opacity: 0; transform: translateY(2px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.on-act b { color: var(--tx); font-weight: 500; }
/* a short wait before it shows, so a pointer passing over the line does not flash every name's popover */
@media (hover: hover) { .on-n:hover > .on-act { visibility: visible; opacity: 1; transform: none; transition-delay: 120ms; } }
.on-n > a:focus-visible + .on-act { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* the member card opens on the same hover and says the same, so the popover steps aside while one is up */
body:has(> .uc:not(.out)) .on-n > .on-act { visibility: hidden; opacity: 0; transition: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); font-size: var(--fs-md); color: var(--tx-3); align-items: center; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend > .on-total { margin: 0 0 0 auto; }
.on-total, .on-total .mono { font-size: var(--fs-md); color: var(--tx-3); }
.on-total .mono { color: var(--tx-2); }
.fx-online .legend { margin: 0; min-height: 30px; padding: 5px var(--g-r) 5px var(--g-l); gap: 4px 14px; background: #101013; }

/* the shoutbox: the log is a well (a column whose first child takes the slack, so a short log sits by the composer),
   the composer under it; "live" in the title bar */
.shout .card-h .aside .pair { font-size: var(--fs-sm); }
.shout-wrap { position: relative; margin: 10px var(--g-r) 0 var(--g-l); }
.shout-log { min-height: 104px; max-height: min(300px, 44vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px 2px; display: flex; flex-direction: column;
  background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.shout-log > * { flex: none; }
.shout-log > :first-child { margin-top: auto; }
.shout-log > .empty { margin: auto 0; text-align: center; }
.shout-new { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
  border: 1px solid #000; background: #2A2340; color: #E3D2FF; font: 400 var(--fs-md)/16px var(--ui); box-shadow: 0 6px 18px rgba(0,0,0,.5); animation: pop-in var(--panel); }
.shout-new:hover { background: #342B50; }
.shout-day { display: flex; align-items: center; gap: 10px; margin: 6px 10px 4px; color: var(--tx-4); font: 400 var(--fs-sm)/14px var(--ui); }
.shout-day::before, .shout-day::after { content: ""; flex: 1; height: 1px; background: var(--e-hair); }
.msg { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 2px 10px; font-size: var(--fs-base); line-height: 20px; }
.msg:hover { background: rgba(255,255,255,.025); }
.msg > .ic { margin-top: 4px; }
.msg .time { flex: none; width: 40px; color: var(--tx-4); font: 400 var(--fs-sm)/20px var(--ui); font-variant-numeric: tabular-nums; }
.msg .body { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tx); }
.msg.mention { background: var(--ac-wash); box-shadow: inset 2px 0 0 var(--ac); }
.msg-x { position: absolute; right: 6px; top: 2px; opacity: 0; transition: opacity var(--hover); }
.msg:hover .msg-x, .msg-x:focus-visible { opacity: 1; }
.msg:hover .body { padding-right: 26px; }
.shout-in { display: flex; gap: 8px; padding: 10px var(--g-r) 14px var(--g-l); align-items: center; }
.shout-in .inp { flex: 1; height: var(--ctl-h); }
.shout-foot { padding: 0 var(--g-r) 12px var(--g-l); }
.shout-off { display: flex; align-items: center; gap: 8px; padding: 12px var(--g-r) 14px var(--g-l); color: var(--tx-3); font-size: var(--fs-md); }

/* smilie picker */
.popup.smi-pick { display: grid; grid-template-columns: repeat(10, 28px); grid-auto-rows: 28px; gap: 2px; padding: 6px; }
.smi-cell { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.smi-cell:hover { background: rgba(255,255,255,.07); }
.smi-cell .smi { vertical-align: 0; }
.popup .opt > .smi { margin-right: 2px; }
.smi-btn .smi { vertical-align: 0; }

/* ---------------------------------------------------------------- markup in posts */
/* release notes (js/notes.js): "**Heading**" lines, "- " bullets, blank lines between sections; BBCode notes (.bb)
   keep the markup's own line breaks */
.rn:not(.bb) { white-space: normal; }
.rn > * + * { margin-top: 8px; }
.rn > .rn-h:not(:first-child) { margin-top: 14px; }
.rn > .rn-h + * { margin-top: 4px; }
.rn-h { font: 600 13px/20px var(--ui); color: var(--tx); }
.rn-p { color: var(--tx); }
.rn-ul { margin: 0; padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 3px; color: var(--tx-2); }
.rn-ul li::marker { color: var(--ac-hi); }
.rn b { font-weight: 600; color: var(--tx); }
.mk-b { font-weight: 600; color: var(--tx); }
.mk-i { font-style: italic; }
.mk-u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tx-3); }
.mk-s { text-decoration: line-through; text-decoration-color: var(--tx-3); color: var(--tx-2); }
.mk-quote { margin: 4px 0 8px; padding: 8px 12px; border-radius: 7px; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); box-shadow: inset 2px 0 0 var(--ac-line); white-space: pre-wrap; color: var(--tx-2); }
.mk-by { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--tx-2); margin-bottom: 4px; white-space: normal; }
.mk-by > .grow { flex: 1; min-width: 0; }
a.mk-go { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 6px; margin: -1px -6px -1px 0; border-radius: 5px; color: var(--tx-3); font-weight: 500; transition: color var(--hover), background var(--hover); }
a.mk-go:hover { color: var(--ac-hi); background: rgba(255,255,255,.04); }
a.lnk.mk-at { color: var(--ac-hi); font-weight: 500; }
a.lnk.mk-at:hover { text-decoration: underline; text-underline-offset: 2px; }
.mk-codeb { margin: 4px 0 6px; border-radius: 7px; background: var(--well); border: 1px solid var(--line); overflow: hidden; white-space: normal; }
.mk-code-h { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); }
.mk-code-h .lang { flex: 1; font: 600 11px/14px var(--ui); color: var(--tx-3); }
.mk-copy { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: var(--tx-3); font: 500 12px var(--ui); transition: color var(--hover), background var(--hover); }
.mk-copy:hover { color: var(--tx); background: rgba(255,255,255,.05); }
.mk-copy.done { color: var(--ok); }
.mk-code { display: block; margin: 0; padding: 9px 12px 10px; font: 500 12px/18px var(--mono); color: var(--tx); white-space: pre; overflow-x: auto; tab-size: 4; }
.mk-code code { font: inherit; }
.mk-spoiler { margin: 4px 0 8px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); white-space: normal; }
.mk-spoiler > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; cursor: pointer; list-style: none; font-size: 12px; color: var(--tx-2); border-radius: 7px; transition: background var(--hover); }
.mk-spoiler > summary::-webkit-details-marker { display: none; }
.mk-spoiler > summary:hover { background: rgba(255,255,255,.025); color: var(--tx); }
.mk-spoiler > summary > svg { color: var(--tx-3); transition: transform var(--panel); }
.mk-spoiler[open] > summary > svg { transform: rotate(90deg); }
.mk-spoiler[open] > summary { border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0; }
.mk-spoiler > summary .lab { font-weight: 600; }
.mk-spoiler > summary .ttl { color: var(--tx); }
.mk-spoiler > summary .ttl::before { content: "\00b7"; margin-right: 8px; color: var(--tx-4); }
.mk-sp-b { padding: 8px 12px 10px; white-space: pre-wrap; animation: fade var(--panel); }
.mk-isp { border-radius: 4px; padding: 0 2px; background: #2A2A36; cursor: pointer; transition: background var(--panel), color var(--panel); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mk-isp:not(.on), .mk-isp:not(.on) * { color: transparent !important; text-decoration-color: transparent !important; }
.mk-isp:not(.on) .smi { opacity: 0; }
.mk-isp:not(.on):hover { background: #33333F; }
.mk-isp:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ac-line); }
.mk-isp.on { background: rgba(255,255,255,.05); cursor: auto; }
.mk-list { margin: 2px 0 6px; padding-left: 22px; white-space: normal; }
.mk-list > li { white-space: pre-wrap; padding-left: 2px; }
.mk-list > li + li { margin-top: 2px; }
ul.mk-list > li::marker { color: var(--tx-3); }
ol.mk-list > li::marker { color: var(--tx-3); font: 500 12px var(--mono); }
.mk-img-ph { display: flex; align-items: center; gap: 10px; width: min(100%, 360px); height: 40px; margin: 4px 0; padding: 0 12px; border-radius: 7px; border: 1px dashed var(--line-3);
  background: rgba(255,255,255,.015); color: var(--tx-2); font: 500 12px var(--ui); text-align: left; transition: border-color var(--hover), color var(--hover), background var(--hover); }
.mk-img-ph:hover { border-color: var(--ac-line); color: var(--tx); background: var(--row-fc); }
.mk-img-ph .grow { flex: 1; }
.mk-img-ph .host { color: var(--tx-4); font-size: 11px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-img { display: block; max-width: 100%; max-height: 480px; margin: 4px 0; border-radius: 7px; box-shadow: 0 0 0 1px var(--line-2); animation: fade var(--panel); }
.mk-img.zoom { cursor: zoom-in; transition: box-shadow var(--hover), filter var(--hover); }
.mk-img.zoom:hover { box-shadow: 0 0 0 1px var(--ac-line), 0 8px 24px rgba(0,0,0,.4); filter: brightness(1.06); }
.mk-img.zoom:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* the image lightbox (markup.js lightbox): the picture alone over a dark backdrop */
.scrim.lbx-scrim:not(.drawer) { align-items: center; padding: calc(24px + var(--in-t)) calc(24px + var(--in-r)) calc(24px + var(--in-b)) calc(24px + var(--in-l)); background: rgba(3,3,5,.86); backdrop-filter: blur(6px); }
.scrim.lbx-scrim:not(.drawer) .dlg { max-width: none !important; width: 100%; height: 100%; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; animation: none; }
.lbx-scrim .dlg-h, .lbx-scrim .dlg-f { display: none; }
.lbx-scrim .dlg-b { overflow: hidden; display: flex; }
.lbx { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.lbx-img { display: block; max-width: 100%; max-height: calc(100% - 46px); min-height: 0; object-fit: contain; border-radius: 8px; cursor: zoom-out; transform-origin: 0 0;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.lbx-bar { display: flex; gap: 8px; flex: none; animation: fade 240ms 120ms backwards; }
.lbx-bar .btn { background: rgba(20,20,27,.85); backdrop-filter: blur(8px); }
.lbx-bar a.btn, .lbx-bar a.btn:hover { color: var(--tx); }
a.lnk { color: inherit; text-decoration: none; }
a.lnk:hover, a.lnk:hover .who { color: var(--ac-hi); }
a.lnk.ext { color: var(--ac-hi); }
a.lnk.ext:hover { color: #D6CFFF; text-decoration: underline; text-underline-offset: 2px; }

/* reveal on scroll (ui.js reveal): a short rise and fade, once; a .rv-st parent staggers its children 60 ms apart. An
   animation rather than a transition, so the stagger delay never reaches the block's own hover transitions. */
.rv:not(.in) { opacity: 0; }
.rv.in { animation: rv-in 420ms cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes rv-in { from { opacity: 0; transform: translateY(14px); } }
.rv-st > .rv:nth-child(2) { animation-delay: 60ms; }
.rv-st > .rv:nth-child(3) { animation-delay: 120ms; }
.rv-st > .rv:nth-child(4) { animation-delay: 180ms; }
.rv-st > .rv:nth-child(5) { animation-delay: 240ms; }
.rv-st > .rv:nth-child(n+6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .rv:not(.in) { opacity: 1; } .rv.in { animation: none; } }

/* Buy while payments are off (plans.js soonButton): reads as disabled, keeps its tooltip */

/* a dialog's button row (the paid dialog) */
.tr-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-acts .btn { min-height: 26px; height: auto; padding-top: 4px; padding-bottom: 4px; white-space: normal; text-align: center; line-height: 15px; }
/* ui.js burst(): the bloom behind an icon and ten short rays flying out of it, once */
.burst { position: absolute; inset: 0; pointer-events: none; color: var(--ok); }
.burst.ac { color: var(--ac-hi); }
.burst::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(closest-side, currentColor, transparent); opacity: 0;
  animation: burst-bloom 1200ms ease-out 340ms; }
.burst > i { position: absolute; left: 50%; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; border-radius: 2px; background: currentColor; opacity: 0;
  animation: burst-ray 760ms cubic-bezier(.15,.7,.3,1) calc(380ms + var(--d, 0ms)); }
.burst > i:nth-child(even) { height: 5px; margin-top: -2.5px; }
@keyframes burst-bloom { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .22; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes burst-ray { 0% { opacity: 0; transform: rotate(var(--r)) translateY(-24px) scaleY(.3); } 25% { opacity: .95; } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-50px) scaleY(1); } }


/* Watch and Bookmark (js/alerts.js): watching is the selected state; a set bookmark is a filled star */
.btn.watch > svg { width: 14px; height: 14px; }
.btn.watch.on { color: var(--ac-hi); background: var(--ac-lo); border-color: rgba(155,123,255,.28); }
.btn.watch.on:hover:not(:disabled) { background: rgba(155,123,255,.2); color: var(--ac-hi); border-color: var(--ac-line); }
.btn.bm { color: var(--tx-3); }
.btn.bm.hd { width: 32px; height: 32px; }
.btn.bm:hover:not(:disabled) { color: var(--tx); }
.btn.bm.on, .btn.bm.on:hover:not(:disabled) { color: var(--ac-hi); }
.btn.bm.pop > svg { animation: al-up 320ms cubic-bezier(.2,.9,.3,1.3); }
.popup.bm-pop, .popup.ed-pop { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bm-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx-2); }
.bm-h > svg { color: var(--ac-hi); }
.bm-h b { font-weight: 600; color: var(--tx); }
.bm-a { display: flex; align-items: center; gap: 6px; }
.bm-a > .grow { flex: 1; }
.popup .inp > svg.g { flex: none; }

/* ---------------------------------------------------------------- the post editor (js/editor.js) */
.ed { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-top { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 4px 3px 4px; border-bottom: 1px solid var(--line); }
.ed-tools { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ed-tools::-webkit-scrollbar { display: none; }
.ed-tools[inert] { opacity: .35; }
.btn.ed-b, button.ed-b { width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--tx-2); display: grid; place-items: center;
  box-shadow: none; transition: background var(--hover), color var(--hover); }
.btn.ed-b:hover:not(:disabled), button.ed-b:hover { background: rgba(255,255,255,.06); color: var(--tx); }
button.ed-b.open { background: rgba(255,255,255,.06); color: var(--tx); }
button.ed-b:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--ac-line); color: var(--tx); }
.ed-b .smi { vertical-align: 0; opacity: .8; filter: grayscale(.4); transition: opacity var(--hover), filter var(--hover); }
.ed-b:hover .smi { opacity: 1; filter: none; }
.ed-l { font: 600 13px/1 var(--ui); }
.ed-l.i { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 13px; }
.ed-l.u { text-decoration: underline; text-underline-offset: 2px; }
.ed-l.s { text-decoration: line-through; }
.ed-sep { width: 1px; height: 16px; margin: 0 5px; background: var(--line-2); flex: none; }
.ed-tabs { display: flex; flex: none; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(255,255,255,.025); }
.ed-tabs > button { height: 24px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; font: 500 12px/24px var(--ui); color: var(--tx-3); transition: color var(--hover), background var(--hover); }
.ed-tabs > button:hover { color: var(--tx-2); }
.ed-tabs > button.on { color: var(--tx); background: #22222C; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
textarea.ed-in { display: block; width: 100%; min-height: 72px; padding: 10px 12px; border: 0; outline: 0; background: transparent; resize: vertical; font: 400 13px/21px var(--ui); color: var(--tx); border-radius: 0 0 8px 8px; }
.ed-prev { padding: 10px 12px; font-size: 13px; line-height: 21px; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; max-height: 60vh; animation: fade var(--panel); }
.ed-none { color: var(--tx-4); }
.ed-foot { display: flex; align-items: center; gap: 10px; min-height: 28px; min-width: 0; }
.ed-foot > .grow { flex: 1; }
.ed-hint { font-size: 12px; color: var(--tx-4); white-space: nowrap; }
.ed-hint kbd { color: var(--tx-3); }
.ed-st { font-size: 12px; color: var(--tx-4); white-space: nowrap; opacity: 0; transition: opacity var(--panel); }
.ed-st.on { opacity: 1; }
.ed-n { color: var(--tx-4); }
.ed-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ed-draft { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px 0 10px; border-radius: 7px; background: rgba(255,255,255,.025); border: 1px solid var(--line);
  font-size: 12px; color: var(--tx-2); animation: pop-in var(--panel); }
.ed-draft > svg { color: var(--tx-3); flex: none; }
.ed-draft .grow { flex: 1; }
.lnkbtn { border: 0; background: none; padding: 4px 6px; border-radius: 5px; font: 500 12px var(--ui); color: var(--ac-hi); transition: background var(--hover); }
.lnkbtn:hover { background: var(--ac-lo); }
.ed-pop .inp { height: 34px; }
.ed-pop .inp input { font-size: 13px; }
.ed-pop > .btn { align-self: flex-end; }
.ed-pop-e { font-size: 12px; color: var(--err); }
.ed.compact textarea.ed-in { min-height: 56px; }
.popup.at-list .opt .av { margin-right: 2px; }

/* ---------------------------------------------------------------- forum wave 2 shell pieces (docs/forum_wave2_contract.md)
   reactions (js/reactions.js rx-), the member card (js/usercard.js uc-), prefixes (px-), polls (js/poll.js poll-),
   ignored stand-ins (ig-), the report dialog (rp-), the envelope and its pieces (js/pm.js pm-) */
/* reactions: the React button, the summary line, the picker, the who-reacted window */
svg.rxg { flex: none; display: block; }
.btn.rx-btn { gap: 6px; }
.btn.rx-btn > svg.g:not(.rxg) { width: 14px; height: 14px; }
.btn.rx-btn.on { background: rgba(255,255,255,.035); }
.btn.rx-btn.on .tx { font-weight: 600; }
.btn.rx-btn.rx-on-like .tx { color: #B3A8F7; } .btn.rx-btn.rx-on-love .tx { color: #F28BA2; }
.btn.rx-btn.rx-on-haha .tx, .btn.rx-btn.rx-on-wow .tx, .btn.rx-btn.rx-on-sad .tx { color: #EBC676; }
.btn.rx-btn.rx-on-angry .tx { color: #EEA076; } .btn.rx-btn.rx-on-thanks .tx { color: #6FD3A2; }
.btn.rx-btn.pop > svg { animation: rx-pop 360ms cubic-bezier(.2,.9,.3,1.4); }
@keyframes rx-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } }
.rx-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rx-line { padding: 0 16px 6px; }
.rx-line:has(> .rx-sum[hidden]) { display: none; }
.rx-sum { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; padding: 3px 8px 3px 4px; border: 0; border-radius: 14px; background: transparent;
  font: 400 12px/18px var(--ui); color: var(--tx-3); transition: background var(--hover), color var(--hover); animation: fade var(--panel); }
.rx-sum:hover { background: rgba(255,255,255,.04); color: var(--tx-2); }
.rx-stack { display: inline-flex; flex: none; }
.rx-stack > svg { border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.rx-stack > svg + svg { margin-left: -5px; }
.rx-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.popup.rx-pick { display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 26px; overflow: visible; background: #1A1A23; box-shadow: 0 12px 32px rgba(0,0,0,.55); animation: rx-in 160ms cubic-bezier(.2,.7,.2,1); }
@keyframes rx-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.rx-opt { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; background: transparent;
  animation: rx-opt 240ms cubic-bezier(.2,.8,.3,1.3) backwards; animation-delay: calc(var(--i) * 22ms); transition: transform 140ms cubic-bezier(.2,.8,.3,1.4), background var(--hover); }
@keyframes rx-opt { from { opacity: 0; transform: translateY(8px) scale(.6); } }
.rx-opt:hover, .rx-opt:focus-visible { transform: translateY(-3px) scale(1.22); outline: 0; }
.rx-opt.on { background: rgba(255,255,255,.07); }
.rx-opt .rx-lab { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 5px; background: #000; color: var(--tx);
  font: 500 11px/16px var(--ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--hover); }
.rx-opt:hover .rx-lab, .rx-opt:focus-visible .rx-lab { opacity: 1; }
.rx-who { display: flex; flex-direction: column; gap: 10px; }
.rx-who > * { margin-bottom: 0 !important; }
.rx-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rx-tabs > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; flex: none; border-radius: 15px; border: 1px solid transparent; background: transparent;
  color: var(--tx-3); font: 500 12px var(--ui); transition: background var(--hover), color var(--hover), border-color var(--hover); }
.rx-tabs > button b { font-weight: 500; color: inherit; }
.rx-tabs > button:hover { color: var(--tx-2); background: rgba(255,255,255,.03); }
.rx-tabs > button.on { color: var(--tx); background: rgba(255,255,255,.05); border-color: var(--line-2); }
.rx-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.rx-u { display: flex; align-items: center; gap: 10px; padding: 8px 2px; animation: fade var(--panel); }
.rx-u + .rx-u { border-top: 1px solid var(--line-r); }
.rx-u .grow { display: flex; flex-direction: column; gap: 1px; }

/* prefixes: a small coloured label before a topic title */
.px { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; flex: none; font: 600 11px/1 var(--ui); white-space: nowrap;
  border: 1px solid transparent; vertical-align: middle; }
.px-ok { color: var(--ok); background: var(--ok-lo); border-color: rgba(92,203,143,.22); }
.px-warn { color: var(--warn); background: var(--warn-lo); border-color: rgba(229,180,84,.24); }
.px-err { color: #F28B8B; background: var(--err-lo); border-color: rgba(238,106,106,.24); }
.px-ac { color: var(--ac-hi); background: var(--ac-lo); border-color: rgba(155,123,255,.26); }
.px-mute { color: var(--tx-2); background: rgba(255,255,255,.05); border-color: var(--line-2); }
.px-add { color: var(--tx-3); background: transparent; border: 1px dashed var(--line-3); }
.px-add > svg { width: 8px; height: 8px; }
.ph h1 .px-slot { display: inline-flex; vertical-align: 4px; margin-right: 10px; }
.ph h1 .px-slot:empty { display: none; }
.ph h1 .px { height: 22px; font-size: 12px; padding: 0 8px; }
.px-edit { border: 0; padding: 0; background: none; border-radius: 6px; display: inline-flex; transition: transform var(--hover); }
.px-edit:hover .px { filter: brightness(1.2); }
.px-edit:hover .px-add { color: var(--tx); border-color: var(--tx-3); }
.popup .opt > .px { pointer-events: none; }

/* polls: the builder in the new-topic form and the card on the topic */
.poll-wrap { display: contents; }
.poll-build { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 9px; background: rgba(255,255,255,.018); border: 1px solid var(--line); animation: fv-in var(--panel); }
.poll-bh { display: flex; align-items: center; gap: 8px; color: var(--tx-2); }
.poll-bh b { font: 600 13px var(--ui); color: var(--tx); }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-orow { display: flex; align-items: center; gap: 8px; animation: fade var(--panel); }
.poll-orow .inp { flex: 1; height: 34px; }
.poll-n { width: 18px; text-align: right; color: var(--tx-4); flex: none; }
.poll-more { display: flex; align-items: center; gap: 10px; padding-left: 26px; }
.poll-sets { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.poll-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poll-max { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.poll-max .stepper .val { min-width: 54px; }
.poll-card { animation: fv-in var(--panel); }
.poll-card > .card-h > svg { color: var(--ac-hi); }
.poll-b { display: flex; flex-direction: column; gap: 12px; }
.poll-q { font: 700 15px/22px var(--disp); color: var(--tx); overflow-wrap: anywhere; }
.poll-hint { margin-top: -6px; }
.poll-list { display: flex; flex-direction: column; gap: 6px; }
.poll-list.res { gap: 12px; }
.poll-pick { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--well); color: var(--tx-2);
  font: 500 13px/18px var(--ui); text-align: left; transition: border-color var(--hover), background var(--hover), color var(--hover); }
.poll-pick:hover { border-color: var(--line-3); color: var(--tx); }
.poll-pick.on { border-color: var(--ac-line); background: rgba(155,123,255,.07); color: var(--tx); }
.poll-box { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--tx-4); color: transparent; transition: background var(--hover), box-shadow var(--hover), color var(--hover); }
.poll-pick.multi .poll-box { border-radius: 4px; }
.poll-pick.on .poll-box { background: var(--ac); box-shadow: none; color: #120E26; }
.poll-tx { overflow-wrap: anywhere; }
.poll-res { display: flex; flex-direction: column; gap: 6px; animation: fade var(--panel) backwards; animation-delay: var(--d); }
.poll-rl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-2); }
.poll-res.mine .poll-rl { color: var(--tx); font-weight: 500; }
.poll-ck { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: #120E26; }
.poll-pc { font-size: 12px; color: var(--tx); min-width: 34px; text-align: right; }
.poll-vn { min-width: 64px; text-align: left; }
.poll-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.075); overflow: hidden; }
.poll-bar > i { display: block; height: 100%; border-radius: 3px; background: rgba(255,255,255,.22); transition: width 700ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d); }
.poll-res.mine .poll-bar > i { background: linear-gradient(90deg, #7B6AE3, var(--ac)); }
.poll-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.poll-vw { display: flex; flex-direction: column; gap: 10px; }
.poll-vw > * { margin-bottom: 0 !important; }
.poll-vs { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.poll-vh { display: flex; align-items: baseline; gap: 10px; }
.poll-vu { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.poll-vuser { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

/* someone you ignore: one quiet line */
.ig-box { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px dashed var(--line-2); color: var(--tx-3); font-size: 12px; }
.ig-box > svg { color: var(--tx-4); }
.ig-box.fitem, .ig-box.srow { border-radius: 0; border-width: 1px 0 0; border-style: solid; border-color: var(--line-r); min-height: 36px; padding: 0 16px; }
span.ig-box { display: inline-flex; min-height: 0; padding: 0; border: 0; }
.msg.ig { color: var(--tx-3); }
.ig-shown { animation: fade var(--panel); }

/* the report dialog */
.rp-dlg { display: flex; flex-direction: column; gap: 12px; }
.rp-dlg > * { margin-bottom: 0 !important; }
.rp-lead { font-size: 13px; line-height: 20px; color: var(--tx-2); }
.rp-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-quick .chip { cursor: pointer; height: 26px; transition: background var(--hover), color var(--hover), border-color var(--hover); }
.rp-quick .chip:hover { color: var(--tx); border-color: var(--line-3); background: rgba(255,255,255,.06); }
.rp-dlg .acts { display: flex; justify-content: flex-end; gap: 8px; }
.btn.rp-i { color: var(--tx-4); }
.btn.rp-i:hover:not(:disabled) { color: var(--tx-2); }
.btn.ign.on { color: var(--warn); border-color: rgba(229,180,84,.3); }


/* skeleton bar: one shimmer for every view (sizes come from the view); last so it wins over .av / .dot it shares an element with */
.sk { display: block; height: 10px; max-width: 100%; border-radius: 4px; flex: none;
  background: linear-gradient(90deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.035) 70%) 0 0 / 300% 100%;
  animation: sk-shim 1.4s linear infinite; }
@keyframes sk-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* a page whose chunk is still coming in (app.js pageSkeleton): its outline, shown only if the wait is noticeable */
.pg-sk { display: flex; flex-direction: column; gap: 12px; animation: fade 200ms 220ms ease-out backwards; }
.pg-sk .sk.h1 { width: 220px; height: 24px; border-radius: 6px; }
.pg-sk .sk.sub { width: 320px; height: 12px; margin: -4px 0 8px; }
.pg-sk .card { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.pg-sk .card .sk:first-child { height: 13px; margin-bottom: 4px; }

/* ---------------------------------------------------------------- markup, editor, reactions, the member card, polls */
.mk-quote { background: #161616; border: 1px solid #000; box-shadow: inset 2px 0 0 var(--ac); color: var(--tx-3); }
.mk-codeb, .mk-spoiler { border: 1px solid #000; background: var(--input-t); }
.mk-code-h { height: 24px; border-bottom: 1px solid #000; background: linear-gradient(180deg, var(--elem-t), #161616); }
.mk-code { font: 400 12px/18px var(--code); }
.mk-img, .lbx-img { box-shadow: 0 0 0 1px #000; }
.ed-top { min-height: 30px; border-bottom: 1px solid #000; }
.btn.ed-b, button.ed-b { width: 24px; height: 24px; }
.ed-tabs { padding: 0; gap: 0; background: none; border: 1px solid #000; }
.ed-tabs > button { height: 20px; font: 400 11px/20px var(--ui); }
.ed-tabs > button.on { background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-t), var(--tab-b)); box-shadow: none; }
textarea.ed-in, .ed-prev { font: 400 13px/20px var(--ui); }
.ed-draft { border: 1px solid #000; background: #161616; font-size: 11px; }
.rx-sum { padding: 2px 8px 2px 3px; font-size: 11px; background: #1A1A1A; box-shadow: 0 0 0 1px #000; }
.rx-sum:hover { background: #222; }
.rx-stack > svg { box-shadow: 0 0 0 2px #1A1A1A; }
.popup.rx-pick { background: var(--pop); }
.rx-opt .rx-lab { font: 400 11px/14px var(--ui); border: 1px solid #000; }
.rx-tabs > button { height: 22px; font: 400 11px var(--ui); }
.rx-tabs > button.on { background: #2A2A2A; border-color: #000; }
.px { height: 16px; padding: 0 5px; font: 700 10px/1 var(--ui); border-color: #000; }
.poll-build, .poll-vs { background: var(--card); border: 1px solid #000; }
.poll-pick { min-height: 28px; padding: 5px 9px; border: 1px solid #000; background: linear-gradient(180deg, var(--input-t), var(--input-b)); font: 400 13px/18px var(--ui); }
.poll-pick.on { border-color: var(--ac-line); background: linear-gradient(180deg, #1B1726, #151320); }
.poll-box { width: 10px; height: 10px; box-shadow: none; border: 1px solid #000; background: linear-gradient(180deg, var(--box-t), var(--box-b)); color: transparent; }
.poll-pick.on .poll-box { background: linear-gradient(180deg, #BA83FF, var(--ac-deep)); }
.poll-q { font: 700 13px/18px var(--ui); }
.poll-bar { height: 6px; background: linear-gradient(180deg, var(--track-t), var(--track-b)); box-shadow: 0 0 0 1px #000; }
.poll-bar > i { background: linear-gradient(90deg, #3A3A3A, #5A5A5A); }
.poll-res.mine .poll-bar > i { background: linear-gradient(90deg, var(--ac-deep), var(--ac) 70%, var(--ac-pink)); }
.ig-box { border: 1px solid #000; background: #161616; font-size: 12px; }

.btn.watch.on { color: var(--tx); background: var(--ac-grad) 0 100% / 100% 2px no-repeat, linear-gradient(180deg, var(--tab-t), var(--tab-b)); }
.pg-sk .card { padding: 12px var(--g-r) 12px var(--g-l); gap: 9px; }

/* ---------------------------------------------------------------- interactive rows in a box (topics, results, tickets,
   admin lists): one hover fill, one focus ring */
.fv-trow, .fv-srow, .tk-row, .adm-frow { transition: background var(--hover); }
.fv-trow:hover, .fv-srow:hover, .tk-row:hover, .adm-frow:hover { background: var(--s-hover); }
.fv-trow:focus-visible, .fv-srow:focus-visible, .tk-row:focus-visible, .adm-frow:focus-visible { outline: 0; background: var(--row-fc); box-shadow: inset 0 0 0 1px var(--ac-line); }

/* sideways strips (tabs, nav rows, legends) fade at the edge that has more to scroll to; where the browser cannot tie an
   animation to scrolling, the strips keep their plain look */
@property --fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll()) {
  .subtabs, .adm-nav, .rx-tabs, .pf-nav, .ed-tools {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    animation: edge-fade linear both; animation-timeline: scroll(self inline); }
  @keyframes edge-fade { from { --fl: 0px; --fr: 28px; } 4% { --fl: 28px; } 96% { --fr: 28px; } to { --fl: 28px; --fr: 0px; } }
}

/* ---------------------------------------------------------------- responsive: the sidebar folds under 1100, a phone
   under 840 */
@media (max-width: 1280px) {
  :root { --side-w: 312px; }
  .acct .wb { display: none; }
}
@media (max-width: 1100px) {
  .kbtn { width: 190px; }
  .hdr-tabs .rt { padding: 0 11px; }
  /* one column: the loader card first, the rest of the sidebar after the forums */
  .fx { grid-template-columns: minmax(0, 1fr); }
  .fx-side { display: contents; }
  .fx-side > .ldr { order: -1; }
  .fx-main { order: 0; }
  .fx-side > :not(.ldr) { order: 1; }
  .fx > .fx-online { order: 2; }
  .mw-foot nav > :nth-child(n+3) { display: none; }
}
@media (max-width: 960px) {
  .mw-hdr { gap: var(--sp-3); }
  .hdr-tabs .rt { gap: 0; padding: 0 12px; }
  .hdr-tabs .rt:not(.on) > .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hdr-tabs .rt.on { gap: 7px; }
  .sb-s { display: none; }
}
/* a phone: the title bar keeps the wordmark and the icons; the tab pill drops into its own full-width row, every
   section an icon and the open one with its name; the sub-tab row is the sub-tabs alone (Search is one of them) and the
   status bar stops sticking */
@media (max-width: 840px) {
  :root { --pad: 12px; --gap: 12px; --hdr-h: 44px; --sub-h: 36px; --foot-stick: 0px; --g-l: 12px; --g-r: 12px; }
  .mw-hdr { display: flex; flex-wrap: wrap; height: auto; column-gap: 8px; row-gap: 0; padding-bottom: 8px; }
  a.hdr-brand { height: 44px; }
  .hdr-r { margin-left: auto; }
  .acct .nm { display: none; }
  .acct { padding: 0 6px; margin-right: -6px; }
  .vsep { margin: 0 6px; }
  .hdr-tabs { order: 3; width: 100%; height: 34px; }
  .hdr-tabs .rt { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .hdr-tabs .rt.on { flex: 0 0 auto; padding: 0 12px; }
  .hdr-tabs .rt > svg { width: 15px; height: 15px; }
  .hdr-tabs .bd.dot { top: 6px; right: 6px; }
  .sb-in { display: flex; justify-content: center; }
  .sb-h, .kbtn { display: none; }
  .subtabs { flex: 0 1 auto; }
  .subtabs a { padding: 0 12px 2px; }
  .page { padding-top: var(--sp-4); }
  .mw-site > .mw-foot { position: static; }
  .ph { padding-bottom: 12px; }
  .ph h1 { font-size: var(--fs-lg); line-height: 20px; }
  .ph .acts { margin-left: 0; width: 100%; }
  .gb-grid, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .ftile { padding: 12px var(--g-r) 12px var(--g-l); }
  .fst.ppl, .fst.mem { display: none; }
  .mw-foot { gap: 8px; }
  .mw-foot .f1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* iOS zooms the page in on focus under 16 px */
  input, textarea, select, .inp > input, .fr2 > input, textarea.field, input.bare { font-size: 15px !important; }
  .btn { height: 32px; }
  .btn.sm, .btn.xs { height: 28px; }
  .btn.icon { width: 32px; } .btn.icon.sm, .btn.icon.xs { width: 28px; }
  .inp, .fr2 > input, .combo, .kbtn { height: 34px; }
  .auth .fr2 > input + .btn.icon { height: 34px; width: 34px; }
  .popup .opt { height: 34px; }
  .card-h a.out { min-height: 30px; padding: 0 8px; margin: 0 -8px; }
  button.ed-b, .btn.ed-b { width: 32px; height: 32px; }
  .ed-tools { padding-right: 20px; }
  .ed-tabs > button { height: 26px; line-height: 26px; }
  .ed.docked:not(:focus-within):not(.previewing) .ed-frame:has(textarea.ed-in:placeholder-shown) .ed-top { display: none; }
  .ed-st { display: none; }
  .shout-log { max-height: 260px; }
  /* the status bar no longer sticks: the composer docks flush on the bottom edge */
  .pane.docked > .dock { bottom: 0; margin-bottom: 0; padding-bottom: calc(10px + var(--in-b)); }
  .msg-x, .fitem .x { opacity: 1; }
  .msg .body { padding-right: 30px; }
  .toasts { left: 12px; right: 12px; align-items: stretch; }
  .toast { width: auto; max-width: none; }
  .scrim:not(.drawer) { align-items: flex-end; padding: calc(12px + var(--in-t)) 0 0; }
  .scrim:not(.drawer) .dlg { padding-bottom: var(--in-b); }
  .scrim.drawer .dlg { width: 100% !important; }
}
@media (max-width: 520px) {
  .ftile .cnt { display: none; }
  .ftile .flast .lb .who { display: none; }
}
@media (max-width: 480px) {
  .captcha, .captcha img { width: 120px; height: 38px; }
  .mw-login { max-width: none; }
  .lg-scr { padding: 12px 8px; }
  .mw-site > .mw-foot .f1 { display: none; }
  .mw-site > .mw-foot nav::before { content: none; }
}

/* less motion asked for: nothing slides, fades or shimmers; state changes are instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .subtabs, .adm-nav, .rx-tabs, .pf-nav, .ed-tools { animation-duration: auto !important; }
  .mw-strip::after { display: none; }
  .poll-bar > i, .rx-opt, .popup.rx-pick { transition: none; animation: none; }
}

/* role names are flat text in their colour: no shadow, glow, stroke or gradient anywhere (last, so nothing outranks it) */
:is(.role-admin, .role-moderator, .role-premium, .role-registered, .who, .acct .nm) { text-shadow: none; -webkit-text-stroke: 0; background: none; filter: none; }