/* suki.gg: the one stylesheet. Dark only, Suki blue, Inter self hosted.
   THE LOOK: a near black page with a faint large grid, a centred 1120px column, a brand pill, one capsule of section
   links whose current section is a white pill, cards slightly lighter than the page with a hairline border, small caps
   labels over heavy figures, inset stat boxes, and on a phone a fixed bottom bar with a white pill behind the current icon.
   LITE MODE: assets/lite.js puts class="lite" on <html> when graphics acceleration is off. Nothing here needs a
   counterpart for it, because nothing here costs a frame: no backdrop filter, no blur, no shadow glow, no canvas,
   no video and no animation that repeats. The page grid is two static gradients that scroll with the page. The only
   motion is a 150ms colour and border transition. Keep it that way: tests/sukigg_pages.mjs fails on any of those effects.
   ICONS: the chevrons and the search glass are drawn here with borders. Every other icon is an SVG written once in
   index.html and copied by the script, which builds no SVG itself; .ico gives them their one stroke.
   BUTTONS: three weights. .btn is the filled primary, .btn.ghost the outlined secondary on the card colour, .btn.quiet
   has no box until it is touched. All are 44px tall or more and go full width in a row on a narrow phone. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-v20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page: #131315;
  --card: #1b1b1e;
  --raised: #232327;
  --grid: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --ink: #131315;
  --ink-muted: #52525b;
  --accent: #1d4ed8;
  --accent-hover: #1a43bd;
  --accent-soft: #7aa2ff;
  --accent-wash: rgba(122, 162, 255, 0.14);
  --amber: #f5b84a;
  --amber-wash: rgba(245, 184, 74, 0.14);
  --red: #f87171;
  --red-wash: rgba(248, 113, 113, 0.12);
  --track: rgba(255, 255, 255, 0.08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --col: calc(1120px + 2 * var(--gutter));
  --r-card: 20px;
  --r-box: 14px;
  --r-ctl: 14px;
  --tab-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--page);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
main:focus-visible { outline: none; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--accent); color: #fff; padding: 12px 16px; border-radius: var(--r-ctl); font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- top bar: brand pill, section capsule, account pill ---------- */
.top-in {
  max-width: var(--col); margin: 0 auto; padding: 14px var(--gutter) 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
}
/* The mark already spells SUKI, so it stands alone (ben, 2026-10-13: "logo + text is redundant"); the link keeps its spoken name. */
.brand {
  display: inline-flex; align-items: center; justify-self: start; min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--accent); transition: background-color 150ms;
}
.brand:hover { background: var(--accent-hover); }
.brand img { width: auto; height: 26px; }
.top-nav { display: none; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  color: var(--muted); font-weight: 500; transition: color 150ms, background-color 150ms;
}
.top-nav a:hover { color: var(--text); text-decoration: none; }
.top-nav a:active { background: var(--raised); }
.top-nav a[aria-current="page"] { color: var(--ink); background: var(--text); font-weight: 600; }
/* the pill never grows past its own column: a long Discord name is cut with an ellipsis, it never covers the section links */
.who { justify-self: end; display: flex; align-items: center; min-width: 0; max-width: 100%; min-height: 48px; }
.who .btn { border-radius: 999px; }
.who-link {
  display: flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0; max-width: 100%; padding: 5px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--text); transition: border-color 150ms, background-color 150ms;
}
.who-link:hover { text-decoration: none; border-color: var(--line-strong); }
.who-link:active { background: var(--raised); }
.who-name { display: none; flex: 0 1 auto; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.who-off { color: var(--muted); font-size: 0.8125rem; text-align: right; }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.875rem;
}

/* ---------- bottom tab bar (phones) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--tab-h); color: var(--muted); font-size: 0.6875rem; font-weight: 500;
  transition: color 150ms;
}
.tabbar a:hover { text-decoration: none; color: var(--text); }
.tab-ico {
  display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px;
  transition: color 150ms, background-color 150ms;
}
.tabbar a:active .tab-ico { background: var(--raised); }
.tabbar a[aria-current="page"] { color: var(--text); font-weight: 700; }
.tabbar a[aria-current="page"] .tab-ico { background: var(--text); color: var(--ink); }
.tabbar a:focus-visible { outline-offset: -3px; }

/* ---------- page frame ---------- */
main {
  max-width: var(--col); margin: 0 auto;
  padding: 22px var(--gutter) calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 40px);
}
.notice-slot { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }
.notice {
  margin-top: 16px; padding: 12px 12px 12px 18px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line-strong);
  display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap;
}
.page-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 16px; min-height: 2.75rem; }
.page-title { font-weight: 800; font-size: clamp(2rem, 7vw, 2.625rem); letter-spacing: -0.04em; line-height: 1.1; }
.page-count { color: var(--accent-soft); font-weight: 500; font-size: clamp(1.375rem, 5vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.1; }
.lede { color: var(--muted); margin-bottom: 20px; max-width: 62ch; }
.h2 { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; color: var(--muted); }
.stack > * + * { margin-top: 16px; }
.section + .section { margin-top: 28px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid transparent;
  background: var(--accent); color: #fff; font-weight: 600; text-align: center;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { background: var(--accent-hover); border-color: var(--accent-soft); }
.btn[disabled] { background: var(--raised); color: var(--muted); cursor: default; }
.btn.ghost { background: var(--raised); border-color: var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--line-strong); }
.btn.ghost:active { background: var(--card); }
.btn.quiet { background: transparent; color: var(--muted); }
.btn.quiet:hover { background: var(--raised); color: var(--text); }
.btn.wide { width: 100%; }
.ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.field { display: block; }
.field-label { display: block; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 8px; }
.input {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-ctl);
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  font-size: 1rem; /* 16px: iOS does not zoom the page on focus */
  transition: border-color 150ms;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: var(--line-strong); }
.input:focus-visible { border-color: var(--accent-soft); outline-offset: 0; }
.panel .input { background: var(--page); }

/* ---------- explore: search, segmented tabs, the card grid ---------- */
.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.search { position: relative; }
.search .input { padding-left: 44px; }
.search::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 15px; height: 15px; margin-top: -9px;
  border: 2px solid var(--muted); border-radius: 50%; pointer-events: none;
}
.search::after {
  content: ""; position: absolute; left: 28px; top: 50%; width: 7px; height: 2px; margin-top: 5px;
  border-radius: 1px; background: var(--muted); transform: rotate(45deg); pointer-events: none;
}
.tabs {
  display: flex; justify-self: start; max-width: 100%; overflow-x: auto; padding: 0 3px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1px;
  border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.875rem;
}
.tab-in {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  transition: color 150ms, background-color 150ms;
}
.tab:hover .tab-in { color: var(--text); }
.tab:active .tab-in { background: var(--raised); }
.tab[aria-selected="true"] .tab-in { background: var(--text); color: var(--ink); }
.tab:focus-visible { outline-offset: -2px; }
.tab-count { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.8125rem; }
.tab[aria-selected="true"] .tab-count { color: var(--ink-muted); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.foot-note { margin-top: 20px; min-height: 1.25rem; }

/* ---------- cards ---------- */
.card, .panel {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; color: var(--text);
}
a.card { position: relative; transition: border-color 150ms, background-color 150ms; }
a.card:hover { border-color: var(--line-strong); background: #1f1f23; text-decoration: none; }
a.card:active { background: var(--raised); }
a.card::after, .nav-row::after {
  content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted);
  transform: rotate(45deg);
}
a.card::after { position: absolute; top: 27px; right: 24px; }
.panel.strong { border-color: var(--line-strong); }
.card-top { display: flex; align-items: flex-start; gap: 14px; padding-right: 26px; }
.card-id { flex: 1; min-width: 0; display: block; }
.card-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em;
}
.card-sub { display: block; color: var(--muted); font-size: 0.875rem; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile {
  flex: none; width: 64px; height: 64px; border-radius: var(--r-box); display: grid; place-items: center;
  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: #fff;
}
.tint-0 { background: #1d4ed8; }
.tint-1 { background: #2a3f8f; }
.tint-2 { background: #3b5bdb; }
.tint-3 { background: #23305e; }
.tint-4 { background: #4338ca; }
.tint-5 { background: #1e3a6e; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.live { color: var(--accent-soft); background: var(--accent-wash); }
.pill.soon { color: var(--amber); background: var(--amber-wash); }
.pill.sched, .pill.plain { color: var(--muted); background: var(--raised); }
.pill.bad { color: var(--red); background: var(--red-wash); }
.claim { display: block; margin-top: 18px; }
.claim-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.label { display: block; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.claim-pct { font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.claim-of { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.claim-of b { margin-right: 3px; color: var(--text); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; }
.bar { display: block; height: 4px; border-radius: 999px; background: var(--track); margin-top: 8px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--pct, 0%); border-radius: 999px; background: var(--accent-soft); }
.claim.soon .bar-fill { background: var(--amber); }
.stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 16px; padding: 12px 0;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-box);
}
.stat { display: block; min-width: 0; padding: 0 14px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure { display: block; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
/* a figure is never broken in the middle of a number */
.summary .figure, .stats.post .figure, .stats.trio .figure, .hero-figure { white-space: nowrap; overflow-wrap: normal; }
.stat .small { display: block; margin-top: 2px; }
.stats:empty { display: none; }
.stats.post { grid-auto-flow: row; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); margin-top: 0; }
.stats.post > :only-child { grid-column: 1 / -1; }
.card-partner { display: block; margin-top: 18px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.card .chips { margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 500; max-width: 100%;
}
.chip-emo { flex: none; }

/* ---------- skeletons, in the shape of what replaces them ---------- */
.ph { background: var(--raised); border-radius: 8px; display: block; }
.ph.tile { border-radius: var(--r-box); }
.ph.line { height: 14px; margin-top: 12px; }
.ph.w40 { width: 40%; } .ph.w60 { width: 60%; } .ph.w80 { width: 80%; }
.ph.title { height: 22px; width: 55%; margin-top: 16px; }
.ph.box { height: 66px; margin-top: 16px; border-radius: var(--r-box); }

/* ---------- empty, signed out and error panels ---------- */
.empty { text-align: center; padding: 48px 20px; }
.empty .h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.empty .muted { max-width: 46ch; margin: 0 auto; }
.empty .btn-row { justify-content: center; margin-top: 20px; }
.empty-mark {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: var(--r-card);
  background: var(--accent);
}
.empty-mark img { width: 36px; height: auto; }

/* ---------- campaign page ---------- */
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; margin-bottom: 8px; color: var(--muted); transition: color 150ms; }
.back:hover { color: var(--text); text-decoration: none; }
.back::before {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 10px 0 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.camp-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.camp-head > div { min-width: 0; }
.camp-head .page-title { font-size: clamp(1.5rem, 5vw, 2.125rem); letter-spacing: -0.03em; }
.camp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.camp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.camp-side { min-width: 0; }
.camp-body { min-width: 0; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.facts > div { min-width: 0; padding: 12px 14px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-box); }
.facts dt { font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.facts dd { font-weight: 700; font-size: 1rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.facts dd .small { display: block; font-weight: 400; margin-top: 2px; }
.links li + li { margin-top: 4px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; }
/* brought into view after an answer: on a phone it stops above the tab bar, never under it */
.result { margin-top: 14px; scroll-margin-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px); }
.result:empty { display: none; }
.result-box { padding: 14px; border-radius: var(--r-box); background: var(--raised); border: 1px solid var(--line); }
.result-box.ok { border-color: var(--accent-soft); }
.result-box.no { border-color: var(--line-strong); }
.result-box .btn-row { margin-top: 12px; }
.result-box > * + * { margin-top: 8px; }
.result-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.result-box.no .result-h { color: var(--red); }
.result-box.ok .result-h { color: var(--accent-soft); font-size: 1.25rem; }
.result-h span { color: var(--text); }
.camp-side .panel:focus-visible { outline: none; }

/* ---------- the guided Submit panel: numbered steps, quick tools, how to earn ---------- */
.steps > * + * { margin-top: 14px; }
.step { display: flex; align-items: flex-start; gap: 12px; }
.step-n {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--raised); border: 1px solid var(--line); font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
.step-body { flex: 1; min-width: 0; padding-top: 2px; }
.step-body > * + * { margin-top: 4px; }
.step-body > .btn { margin-top: 10px; }
.step-title { font-weight: 700; }
.steps.plain > * + * { margin-top: 8px; }
.steps.plain .step-n { width: 22px; height: 22px; font-size: 0.75rem; }
.steps.plain .small { color: var(--text); font-size: 0.875rem; padding-top: 0; }
.label + .steps, .label + .tool-row, .label + .caption { margin-top: 10px; }
.tools > * + * { margin-top: 10px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* a tool keeps its label on one line: several short ones share a row, a long one takes its own */
.tool-row .btn { flex: 1 1 148px; padding: 0 10px; white-space: nowrap; }
.camp-side .btn-row .btn { flex: 1 1 100%; }
.caption {
  padding: 10px 14px; border-radius: var(--r-box); background: var(--page); border: 1px dashed var(--line-strong);
  font-family: var(--mono); font-size: 0.875rem; user-select: all; -webkit-user-select: all;
}
p[role="status"]:empty { display: none; }
.submit-meta { margin-top: 12px; }
.form > * + * { margin-top: 12px; }
.form .field + .input { margin-top: 0; }

/* ---------- Discord markdown, as the bot writes it ---------- */
.md { max-width: 70ch; }
.md > * + * { margin-top: 10px; }
.md h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.md h4 { font-size: 1rem; font-weight: 700; }
.md h5 { font-size: 0.9375rem; font-weight: 700; }
.md ul { list-style: disc; padding-left: 20px; }
.md li + li { margin-top: 4px; }
.md blockquote { border-left: 3px solid var(--line-strong); padding-left: 12px; }
.md blockquote > * + * { margin-top: 8px; }
.md code { font-family: var(--mono); font-size: 0.875em; background: var(--raised); padding: 1px 6px; border-radius: 6px; }
.md .u { text-decoration: underline; }
.md .small { font-size: 0.8125rem; color: var(--muted); }

/* ---------- lists: posts, accounts, payouts, more ---------- */
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.summary .panel { padding: 16px 18px; }
.summary .figure { font-size: clamp(1.125rem, 5vw, 1.5rem); letter-spacing: -0.02em; }
.group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.group-head .card-title a { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; }
.group-head .card-title { display: flex; align-items: center; min-height: 44px; }
.group-head .pill { margin-top: 11px; }
.rows { margin-top: 10px; border-top: 1px solid var(--line); }
.rows:first-child { margin-top: 0; border-top: 0; }
.rows:first-child .row:first-child { padding-top: 0; }
p[role="alert"]:empty { display: none; }
.row { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-top a, .row-who { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.row-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 0.875rem; }
.row-link .ico { width: 16px; height: 16px; }
.mine:empty { display: none; }
.when { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.row-line { font-variant-numeric: tabular-nums; }
.row-line b { font-weight: 800; }
.row .small { margin-top: 4px; }
.group-foot { margin-top: 14px; padding: 12px 14px; font-weight: 700; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-box); }
.status-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-line .figure { margin: 0; }
.hero-figure { font-weight: 800; font-size: clamp(2.5rem, 11vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 4px; }
.profile { display: flex; align-items: center; gap: 14px; }
.profile-id { min-width: 0; }
.profile .h2 { margin-bottom: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.avatar.big { width: 64px; height: 64px; border-radius: var(--r-box); font-size: 1.5rem; font-weight: 800; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.group > .label { padding: 4px 4px 8px; }
.nav-list.panel { padding: 0 16px; }
.nav-list li + li { border-top: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 4px 10px 0; color: var(--text); }
.nav-row:hover { text-decoration: none; }
.nav-row:hover .row-ico { border-color: var(--line-strong); color: var(--text); }
.row-ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent-soft);
  background: var(--raised); border: 1px solid var(--line); transition: color 150ms, border-color 150ms;
}
.row-text { flex: 1; min-width: 0; display: block; }
.row-title { display: block; font-weight: 600; }
.row-hint { display: block; color: var(--muted); font-size: 0.8125rem; }

/* ---------- narrow phones: three stat labels still fit on one line ---------- */
@media (max-width: 479px) {
  .card, .panel { padding: 16px; }
  .btn-row .btn { flex: 1 1 100%; }
  a.card::after { top: 23px; right: 20px; }
  /* three figures side by side have no room for a long number on a phone: each gets a row of its own */
  .stats.trio { grid-auto-flow: row; padding: 2px 0; }
  .stats.trio .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 14px; }
  .stats.trio .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stats.trio .figure { margin-top: 0; }
}
@media (max-width: 399px) {
  .stat { padding: 0 8px 0 10px; }
  .stats .label { font-size: 0.625rem; letter-spacing: 0.04em; }
}

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 780px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .top-nav { display: flex; }
  .tabbar { display: none; }
  .result { scroll-margin-bottom: 24px; }
  .top-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-top: 24px; }
  .brand { min-height: 56px; padding: 0 26px; }
  .brand img { height: 30px; }
  .who { min-height: 56px; }
  .who .btn, .who-link { min-height: 56px; }
  .who .btn { padding: 0 22px; }
  .who-link { padding: 5px 20px 5px 6px; }
  .who-name { display: block; }
  .avatar { width: 44px; height: 44px; font-size: 1rem; }
  main { padding-top: 28px; padding-bottom: 72px; }
  .controls { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; }
  .controls .search { grid-column: 2; grid-row: 1; }
  .controls .tabs { grid-column: 1; grid-row: 1; }
  .narrow > .stack:not(.panel) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .narrow > .stack:not(.panel) > * { margin-top: 0; }
  .narrow > .stack > .summary, .narrow > .stack > .small, .narrow > .stack > .empty, .narrow > .stack > .full { grid-column: 1 / -1; }
  .narrow > .stack > .hero, .narrow > .stack > .details { align-self: stretch; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .narrow > .panel.stack { max-width: 640px; }
}
@media (min-width: 1040px) {
  .camp.has-side { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 16px; }
  .camp.has-side .camp-body { grid-column: 1; grid-row: 1; }
  /* the panel scrolls with the page: it is never a scroller of its own, so the button and the bot's answer are never hidden inside it */
  .camp.has-side .camp-side { grid-column: 2; grid-row: 1; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}