/* ============================================================================
   CoopQueue — dark-first UI.
   Chart colours come from a validated categorical palette: the four player
   hues clear the CVD-separation, normal-vision and 3:1 contrast gates against
   the #1a1a19 surface. Do not re-pick them by eye.
   ========================================================================== */
:root {
  color-scheme: dark;

  --plane:        #0d0d0d;   /* page background */
  --surface-1:    #1a1a19;   /* cards, panels, chart surface */
  --surface-2:    #232322;   /* raised: inputs, hover */
  --text-primary: #ffffff;
  --text-secondary:#c3c2b7;
  --text-muted:   #898781;
  --gridline:     #2c2c2a;
  --baseline:     #383835;
  --border:       rgba(255,255,255,0.10);

  /* categorical — fixed order, one hue per person, never cycled */
  --series-1: #3987e5;  /* blue    */
  --series-2: #d95926;  /* orange  */
  --series-3: #199e70;  /* aqua    */
  --series-4: #c98500;  /* yellow  */
  --series-5: #d55181;  /* magenta */
  --series-6: #008300;  /* green   */
  --series-7: #9085e9;  /* violet  */
  --series-8: #e66767;  /* red     */

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  --radius: 10px;
  --radius-sm: 6px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
[hidden] { display: none !important; }
code { font-size: .88em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
kbd {
  font: inherit; font-size: .78em; background: var(--surface-2); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--text-secondary);
}

/* ─────────────────────────── buttons & inputs ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 550; font-size: 14px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: #2c2c2a; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.btn-primary { background: var(--series-1); border-color: transparent; color: #fff; }
.btn-primary:hover { background: #4d94ea; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 13px 28px; font-size: 16px; }
.btn-icon { padding: 6px 10px; background: transparent; border-color: transparent; font-size: 16px; }
.btn-steam { background: #1b2838; border-color: #2a475e; padding: 13px 26px; font-size: 16px; }
.btn-steam:hover { background: #24384f; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.input {
  font: inherit; font-size: 14px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
  min-width: 0;
}
.input:focus { outline: 2px solid var(--series-1); outline-offset: -1px; border-color: transparent; }
.input-lg { font-size: 16px; padding: 12px 16px; width: 100%; }

/* ─────────────────────────── sign-in / claim ──────────────────────────── */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.gate-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 44px 40px; text-align: center; max-width: 440px; box-shadow: var(--shadow);
}
.gate-card-wide { max-width: 620px; }
.gate-title { font-size: 34px; letter-spacing: -.02em; }
.gate-sub { color: var(--text-secondary); margin: 10px 0 28px; }
.gate-fine { color: var(--text-muted); font-size: 12.5px; margin: 18px 0 0; }
.gate-error {
  margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(208,59,59,.12); border: 1px solid rgba(208,59,59,.4);
  color: #f4b4b4; font-size: 13.5px; text-align: left;
}
.claim-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 12px; margin-bottom: 20px; }
.claim-opt {
  padding: 18px 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; font: inherit; color: var(--text-primary);
  display: grid; gap: 4px; transition: border-color .12s, background .12s;
}
.claim-opt:hover { border-color: var(--series-1); background: #2c2c2a; }
.claim-opt b { font-size: 18px; }
.claim-opt span { font-size: 12.5px; color: var(--text-muted); }

/* ───────────────────────────── chrome ─────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 20px; background: rgba(13,13,13,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* The brand mark is the logo lockup. Height-driven, width auto, so the one asset
   serves both headers — the intrinsic width/height on the <img> keeps the box
   reserved before it loads and stops the topbar reflowing. */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand-logo { display: block; height: 26px; width: auto; }
.landing-top .brand-logo { height: clamp(38px, 5.2vw, 54px); }
/* On a narrow phone the wordmark competes with the group switcher and the tab row
   for one line. The controller alone is still recognisable, so crop to it rather
   than shrinking the whole lockup into illegibility. */
@media (max-width: 560px) {
  /* The controller's bright outline reaches the edge of its crop, so the normal
     flex gap looks smaller than it is beside the switcher's border. */
  .topbar > .brand { margin-right: 6px; }
  .topbar .brand-logo {
    height: 24px; width: 28px; object-fit: cover; object-position: left center;
  }
}
.tabs { display: flex; gap: 2px; }
.tab {
  font: inherit; font-size: 14px; font-weight: 550; padding: 7px 14px; border-radius: var(--radius-sm);
  background: transparent; border: 0; color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { background: var(--surface-2); color: var(--text-primary); }
.tab[aria-current="page"] { background: var(--surface-2); color: var(--text-primary); }
.pill {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--series-1); color: #fff; min-width: 20px; text-align: center;
}
.pill:empty { display: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.who img { border-radius: 50%; background: var(--surface-2); }

.banner {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  padding: 11px 20px; font-size: 13.5px; border-bottom: 1px solid var(--border);
}
.banner-warn { background: rgba(250,178,25,.10); color: #f2d79a; }

.main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 80px; }
.view { display: none; }
.view.active { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

.view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.view-head h2 { font-size: 22px; }
.view-sub { color: var(--text-secondary); font-size: 13.5px; margin: 6px 0 0; max-width: 62ch; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* The Library carries seven filters — far more than any other view. Beside the
   heading they wrap onto a second line at every realistic width, so here they get
   the full width and slightly tighter controls. Still allowed to wrap: this buys a
   single row on a desktop, it does not force one on a phone. */
[data-view="library"] .view-head { flex-direction: column; align-items: stretch; gap: 14px; }
[data-view="library"] .filters { gap: 6px; }
[data-view="library"] .filters .input { font-size: 13px; padding: 6px 9px; }
[data-view="library"] .filters #lib-search { flex: 1 1 140px; max-width: 240px; }
/* Icon-only, because as a labelled button it was the one control that pushed the
   row onto a second line — and it is a secondary action that only ever appears
   once you have already changed something. */
[data-view="library"] .filters #lib-reset { flex: none; align-self: stretch; padding: 0 10px; font-size: 15px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }

.empty { text-align: center; padding: 80px 20px; color: var(--text-secondary); }
.empty h2 { font-size: 22px; color: var(--text-primary); margin-bottom: 8px; }
.empty p { max-width: 46ch; margin: 0 auto 20px; }
.empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* A truly empty workspace has no useful controls or zero-filled charts. Keep the
   view itself reachable, but replace its normal contents with ways to begin (or
   restore an archived game). Filtered-empty and fully-rated libraries do not use
   this state. */
.view.is-library-empty > :not(.empty-library) { display: none; }

/* ────────────────────────── rating queue ──────────────────────────────── */
.rate-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow);
}
/* Fixed height, not aspect-ratio: an aspect-ratio box that hits max-height shrinks
   its width too and leaves a gap beside the card. */
/* overflow:hidden is load-bearing. The media box has a fixed height, but a
   <video> is a replaced element that sizes itself from the stream's intrinsic
   aspect ratio, and inside `place-items: center` it is not bound by the box —
   height:100% resolved to 448px in a 243px container on a short window, so the
   trailer covered the game's title and the first lines of its description. */
.rate-media { position: relative; height: min(48vh, 400px); background: #000; display: grid; place-items: center; overflow: hidden; }
/* Nothing to show: collapse to a slim strip instead of a viewport-eating black void. */
.rate-media.is-blank { height: auto; min-height: 64px; padding: 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rate-media.is-blank .no-trailer { position: static; background: none; padding: 0; text-align: center; }
/* Pinned to the box rather than laid out in it, so the intrinsic aspect ratio of
   the stream can never decide how tall this gets. */
.rate-media video, .rate-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rate-media video { object-fit: contain; background: #000; }
/* The blank state has no video or image, so it lays out normally again. */
.rate-media.is-blank { display: block; }
.no-trailer {
  position: absolute; inset: auto 12px 12px auto; font-size: 12px; color: var(--text-secondary);
  background: rgba(0,0,0,.7); padding: 5px 10px; border-radius: 999px;
}
.rate-body { padding: 22px 26px 26px; }
.rate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rate-head h2 { font-size: 26px; letter-spacing: -.02em; }
.rate-progress { font-size: 13px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.chip {
  font-size: 12px; font-weight: 550; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.chip-good { background: rgba(12,163,12,.14); border-color: rgba(12,163,12,.45); color: #8fe08f; }
.chip-bad  { background: rgba(208,59,59,.14); border-color: rgba(208,59,59,.45); color: #f0a3a3; }
.chip-warn { background: rgba(250,178,25,.13); border-color: rgba(250,178,25,.42); color: #f2d79a; }
.rate-desc { color: var(--text-secondary); font-size: 14.5px; margin: 16px 0 0; max-width: 72ch; }
.callout {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
  background: rgba(250,178,25,.09); border-left: 3px solid var(--warning); color: #f2d79a;
}
.others { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.other-vote {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  padding: 4px 11px 4px 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.other-vote b { font-variant-numeric: tabular-nums; }

.rate-controls { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.score-display { display: flex; align-items: baseline; gap: 12px; }
.score-display output { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.score-hint { color: var(--text-muted); font-size: 13.5px; }
.slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 20px 0 6px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--series-1); border: 3px solid var(--surface-1); cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--series-1);
  border: 3px solid var(--surface-1); cursor: grab;
}
.slider:focus-visible { outline: 2px solid var(--series-1); outline-offset: 4px; }
.score-ticks {
  display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.rate-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.kbd-hint { font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }

/* ───────────────────────────── play next ──────────────────────────────── */
.attendee-filter { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.attendee-filter legend {
  display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.attendee-list { display: flex; gap: 7px; flex-wrap: wrap; }
.attendee {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1);
  color: var(--text-secondary); font-size: 13px; cursor: pointer;
}
.attendee:has(input:checked) { border-color: rgba(57,135,229,.55); color: var(--text-primary); }
.attendee input { margin: 0; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rank-row {
  display: grid; grid-template-columns: 40px 92px minmax(0,1fr) auto; gap: 16px; align-items: center;
  padding: 13px 16px; border-radius: var(--radius); background: var(--surface-1);
  border: 1px solid var(--border); cursor: pointer; transition: border-color .12s, background .12s;
}
.rank-row:hover { border-color: #3a3a38; background: #1f1f1e; }
.rank-num { font-size: 17px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
.rank-art {
  display: block; width: 92px; aspect-ratio: 460 / 215; border-radius: 5px;
  object-fit: cover; background: var(--surface-2);
}
.rank-art-none { border: 1px solid var(--border); }
.rank-art-small { width: 58px; border-radius: 4px; }
.rank-main { min-width: 0; }
.rank-name { font-weight: 600; font-size: 15.5px; }
.rank-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.rank-score { text-align: right; }
.rank-score b { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rank-score span { display: block; font-size: 11.5px; color: var(--text-muted); }
.unviable-block { margin-top: 34px; }
.unviable-block h3 { font-size: 15px; margin-bottom: 4px; }
.unviable-block p { color: var(--text-secondary); font-size: 13.5px; margin: 0 0 14px; }
.unviable-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; border-radius: var(--radius); background: rgba(208,59,59,.06);
  border: 1px solid rgba(208,59,59,.25); margin-bottom: 6px; font-size: 14px;
}
.unviable-game { display: inline-flex; gap: 10px; align-items: center; }
.unviable-row .why { color: #f0a3a3; font-size: 13px; text-align: right; }

/* ───────────────────────────── library ────────────────────────────────── */
.history-card {
  margin-bottom: 16px; padding: 18px 20px; overflow: hidden;
  border: 1px solid rgba(57,135,229,.38); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(57,135,229,.10), rgba(181,91,207,.05));
}
.history-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.history-head h3 { font-size: 16px; }
.history-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 12.5px; }
.history-count {
  flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-secondary); background: rgba(13,13,13,.35); font-size: 11.5px;
}
.history-item {
  display: grid; grid-template-columns: 176px minmax(0,1fr); gap: 16px; align-items: center;
  margin-top: 16px;
}
.history-art {
  display: grid; place-items: center; width: 176px; height: 82px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted);
  font-size: 20px; font-weight: 650;
}
.history-copy h4 { margin: 7px 0 2px; font-size: 18px; }
.history-copy > p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.history-suggestion {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(13,13,13,.30);
}
.history-suggestion strong { font-size: 15px; color: #f2d79a; }
.history-suggestion span, .history-no-suggestion, .history-target {
  color: var(--text-muted) !important; font-size: 11.5px !important;
}
.history-no-suggestion { margin-top: 7px !important; }
.history-target { margin-top: 6px !important; }
.history-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.fact-source.is-approx { color: #f2d79a; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--gridline); white-space: nowrap; }
.table th { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); position: sticky; top: 0; background: var(--surface-1); z-index: 1; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.c-num, .c-p { text-align: right !important; font-variant-numeric: tabular-nums; }
.c-name { min-width: 220px; white-space: normal !important; }
.cell-strong { font-weight: 650; }
.status-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); }
td.miss { color: #4a4a47; }

/* ───────────────────────────── stats ──────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin-bottom: 24px; }
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.tile-val { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.tile-label { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.tile-note { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.tile-alert .tile-val { color: var(--serious); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 16px; margin-bottom: 16px; }
.stats-grid { align-items: stretch; }
/* A Stats row owns its spacing. The generic panel margin otherwise combines with
   the grid margin, while a shorter card stops early and makes that doubled gap
   look different in each column. Stretch the pair and leave one 16px gutter. */
.stats-grid > .panel { min-width: 0; height: 100%; margin-bottom: 0; }
#stats-people { display: flex; flex-direction: column; }
#stats-people .people { flex: 1; align-content: space-between; }
.grid-2.single { grid-template-columns: 1fr; }
.panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.panel-title { font-size: 15.5px; margin-bottom: 14px; }
.panel-title + .panel-sub { margin-top: -9px; }
.panel-sub { font-size: 12.5px; color: var(--text-muted); margin: 5px 0 18px; max-width: 60ch; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.panel-head .panel-title { margin: 0; }

.metric-tabs {
  display: inline-flex; padding: 2px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--plane);
}
.metric-tabs button {
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 7px 9px; border: 0; border-radius: 5px; cursor: pointer;
  color: var(--text-muted); background: transparent;
}
.metric-tabs button[aria-pressed="true"] { color: var(--text-primary); background: var(--surface-2); }
.metric-tabs button:disabled { opacity: .35; cursor: default; }
.metric-tabs button:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }

/* Status colours are semantic rather than another categorical series. Failed to
   finish and dropped deliberately share the red treatment used by their chips. */
.shape-bar {
  display: flex; height: 22px; overflow: hidden; border-radius: 6px;
  background: var(--gridline); border: 1px solid var(--border);
}
.shape-bar > i { display: block; min-width: 3px; height: 100%; }
.shape-bar > i + i { border-left: 2px solid var(--surface-1); }
.shape-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 14px; margin-top: 15px; }
.shape-legend span { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--text-muted); }
.shape-legend span > i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.shape-legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.shape-backlog { background: var(--text-muted); }
.shape-playing { background: var(--series-1); }
.shape-finished { background: var(--good); }
.shape-sampled { background: var(--warning); }
.shape-unfinished, .shape-dropped { background: var(--critical); }

.stats-shape-compact {
  display: grid; grid-template-columns: minmax(180px,.42fr) minmax(0,1.58fr);
  align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px;
}
.stats-shape-compact .panel-title { margin-bottom: 5px; }
.stats-shape-compact .panel-sub { margin: 0; }
.stats-shape-compact .shape-legend {
  grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 11px;
}

.timeline-legend { display: flex; gap: 16px; margin-bottom: 9px; font-size: 11.5px; color: var(--text-muted); }
.timeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.timeline-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--series-1); }
.timeline-legend span + span i { background: var(--good); }
.timeline-scroll { overflow-x: auto; padding: 4px 0 2px; }
.timeline-bars {
  display: grid; grid-template-columns: repeat(var(--timeline-years),minmax(52px,1fr));
  min-width: calc(var(--timeline-years) * 52px); border-bottom: 1px solid var(--baseline);
}
.timeline-year { display: grid; grid-template-rows: 132px 24px; min-width: 0; }
.timeline-columns { display: flex; align-items: stretch; justify-content: center; gap: 4px; padding: 0 4px; }
.timeline-columns span { width: 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.timeline-columns b { font-size: 10px; line-height: 16px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.timeline-columns i { display: block; width: 100%; min-height: 0; border-radius: 3px 3px 0 0; background: var(--series-1); }
.timeline-columns span + span i { background: var(--good); }
.timeline-year > strong { align-self: end; text-align: center; font-size: 10.5px; font-weight: 500; color: var(--text-muted); }

.scatter-layout { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; }
.scatter-y { height: 210px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 10px; color: var(--text-muted); }
.scatter-main { min-width: 0; }
.scatter-plot { position: relative; height: 210px; border-left: 1px solid var(--baseline); }
.scatter-plot > i { position: absolute; left: 0; right: 0; height: 1px; background: var(--gridline); }
.scatter-point {
  position: absolute; z-index: 1; width: 13px; height: 13px; padding: 0;
  transform: translate(-50%,50%); border: 2px solid var(--surface-1); border-radius: 50%;
  background: var(--series-1); cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.scatter-point[data-tone="good"] { background: var(--good); }
.scatter-point[data-tone="bad"] { background: var(--critical); }
.scatter-point:hover, .scatter-point:focus-visible { z-index: 5; }
.scatter-point:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scatter-point::after {
  content: attr(data-label); display: none; position: absolute; z-index: 4;
  left: 50%; bottom: 18px; width: max-content; max-width: min(220px,70vw);
  transform: translateX(-50%); padding: 6px 8px; border-radius: 5px;
  background: var(--plane); border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text-primary); font: 500 11px/1.35 var(--font); text-align: left; white-space: normal;
  pointer-events: none;
}
.scatter-point[data-edge="left"]::after { left: -4px; transform: none; }
.scatter-point[data-edge="right"]::after { left: auto; right: -4px; transform: none; }
.scatter-point:hover::after, .scatter-point:focus-visible::after { display: block; }
.scatter-x { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; color: var(--text-muted); }

.people { display: grid; gap: 14px; }
.person { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.person-swatch { width: 10px; height: 34px; border-radius: 3px; }
.person-name { font-weight: 600; font-size: 14px; }
.person-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.person-bar { height: 6px; border-radius: 999px; background: var(--gridline); overflow: hidden; margin-top: 6px; }
.person-bar i { display: block; height: 100%; border-radius: 999px; }
.person-mean { text-align: right; font-variant-numeric: tabular-nums; }
.person-mean b { font-size: 18px; }
.person-mean span { display: block; font-size: 11px; color: var(--text-muted); }

/* horizontal bars — 4px rounded data end, 2px gap, recessive track */
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 44%) 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.bar-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 18px; background: var(--gridline); border-radius: 4px; overflow: hidden; }
/* "didn't play" sits beside the scores but is not one — muted and italic so it
   reads as absence rather than as a very low rating. */
.other-out { color: var(--text-muted); font-style: italic; }

/* The queue, listed. Collapsed by default so the card stays the focus. */
.rate-list { margin-top: 10px; }
.rate-list > summary {
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  padding: 4px 0; width: fit-content; list-style-position: inside;
}
.rate-list > summary:hover { color: var(--text-secondary); }
.rate-list-items {
  list-style: none; margin: 8px 0 0; padding: 6px;
  max-height: 280px; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
}
.rate-jump {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  padding: 7px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
}
.rate-jump:hover { background: var(--surface-2); color: var(--text-primary); }
.rate-jump.is-current { background: var(--surface-2); color: var(--text-primary); font-weight: 600; }
/* A left edge marks the current card without shifting anything as you move down. */
.rate-jump.is-current .rate-jump-name { box-shadow: -8px 0 0 -5px var(--series-1); }
.rate-jump-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-jump-meta { color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--series-1); transition: width .3s; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-row[data-tone="good"] .bar-fill { background: var(--good); }
.bar-row[data-tone="bad"]  .bar-fill { background: var(--critical); }
/* ── browse: the global co-op catalogue ─────────────────────────────────── */
.browse-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.browse-card {
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.browse-card img, .browse-noart { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; display: block; }
.browse-noart { background: var(--surface-2); }
.browse-body { padding: 12px 14px 0; flex: 1; }
.browse-body h3 { font-size: 14.5px; margin-bottom: 8px; }
/* Descriptions vary wildly in length; clamp so the grid stays a grid. */
.browse-body p {
  font-size: 12.5px; color: var(--text-muted); margin: 9px 0 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Why a recommendation ranked where it did. Not clamped like the description
   above — it is one short line by construction (two tags at most). The
   descendant selector is load-bearing: `.browse-body p` would otherwise win on
   specificity and reapply the line-clamp. */
.browse-body .browse-fit {
  font-size: 12px; color: var(--series-3); margin: 9px 0 0; line-height: 1.4;
  display: block; overflow: visible;
}
.browse-body .browse-ea {
  font-size: 12px; color: #f2d79a; margin: 8px 0 0; display: block; overflow: visible;
}
.browse-act {
  padding: 12px 14px; display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; align-items: center;
}
.browse-foot { display: flex; justify-content: center; margin-top: 18px; }

/* The ranking's own explanation, above the grid. */
.browse-why {
  font-size: 13px; color: var(--text-muted); line-height: 1.9;
  margin: 10px 0 0; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
/* Keep a tag and its signed score as one pill. Let the whole pill move to the
   next line instead of breaking "Gore -0.63" across two rows inside one border. */
.browse-why .chip { display: inline-flex; white-space: nowrap; }

/* Secondary text inside a bar label, e.g. the raw 25/114 behind a percentage. */
.bar-sub { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Personal coverage strip above the rating queue. The track is deliberately
   slimmer than the Stats bars — it sits above the card and must not compete
   with the trailer for attention. */
.my-coverage { max-width: 900px; margin: 0 auto 14px; }
.my-coverage .bar-track { height: 8px; border-radius: 999px; }
.my-coverage .bar-fill { border-radius: 999px; }
.my-coverage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px; font-size: 13px;
}
.my-coverage-head strong { font-weight: 600; }
.my-coverage-head span { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12.5px; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* dot plot: one row per game, one dot per person on a shared 1–10 axis */
.dotplot { display: grid; gap: 12px; }
.dot-row { display: grid; grid-template-columns: 160px 1fr 34px; gap: 12px; align-items: center; font-size: 13px; }
.dot-track {
  position: relative; height: 26px; border-radius: 4px;
  background: linear-gradient(to right, var(--gridline) 1px, transparent 1px) 0 0 / 11.11% 100%;
  border-bottom: 1px solid var(--baseline);
}
.dot-mark {
  position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%,-50%); border: 2px solid var(--surface-1); /* 2px surface ring on overlap */
}
.dot-spread { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--serious); }
.dot-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted);
            margin-left: 172px; margin-right: 46px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ───────────────────────────── dialogs ────────────────────────────────── */
.dialog {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1);
  color: var(--text-primary); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow);
}
.dialog-wide { width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.dialog-head h3 { font-size: 17px; }
.dialog-body { padding: 20px 22px 24px; max-height: 70vh; overflow-y: auto; }
.add-results { display: grid; gap: 6px; margin-top: 14px; }
.add-hit {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center;
  padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid transparent; text-align: left; font: inherit; color: inherit;
}
.add-hit:hover { border-color: var(--series-1); }
.add-hit img { width: 92px; height: 43px; object-fit: cover; border-radius: 4px; background: #000; }
.add-hit-copy { min-width: 0; }
.add-hit b { font-size: 14px; font-weight: 600; }
.add-hit span { font-size: 12px; color: var(--text-muted); }
.add-hit .add-hit-store {
  display: inline-block; margin-top: 3px; color: var(--text-secondary);
  font-size: 12px; font-weight: 550; text-decoration: none;
}
.add-hit .add-hit-store:hover { color: var(--text-primary); text-decoration: underline; }
.add-status { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; min-height: 18px; }

.detail-grid { display: grid; gap: 18px; }
.detail-votes { display: grid; gap: 8px; }
.detail-vote {
  display: grid; grid-template-columns: clamp(112px, 16%, 180px) minmax(0,1fr) 40px;
  gap: 10px; align-items: center; font-size: 13.5px;
}
/* Group names can be 16 characters. Keep every bar aligned on wide dialogs,
   then truncate instead of painting through the bar on a narrow phone. */
.detail-vote-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.detail-field { display: grid; gap: 5px; }
.detail-field label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.detail-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ownership-detail { padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ownership-detail h4, .trophy h4 { margin: 0; font-size: 14px; }
.ownership-detail p { margin: 8px 0 0; color: var(--text-muted); font-size: 11.5px; }
.ownership-people { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ownership-person {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 12px;
}
.ownership-person.is-owned { color: #8fe08f; border-color: rgba(12,163,12,.35); }
.ownership-person.is-missing { color: #f2d79a; border-color: rgba(250,178,25,.35); }

.trophy {
  padding: 16px; border: 1px solid rgba(250,178,25,.28); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(250,178,25,.07), rgba(181,91,207,.05));
}
.trophy-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.trophy-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.trophy-head > strong { font-size: 24px; color: #f2d79a; }
.trophy-track { height: 8px; margin: 12px 0; overflow: hidden; border-radius: 999px; background: var(--gridline); }
.trophy-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#fab219,#b55bcf); }
.trophy-people { display: grid; gap: 7px; margin-top: 12px; }
.trophy-person { display: grid; grid-template-columns: 110px 1fr 74px; gap: 9px; align-items: center; font-size: 12px; }
.trophy-person > span { display: inline-flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trophy-person .bar-track { height: 8px; }
.trophy-person b { color: var(--text-secondary); font-weight: 500; text-align: right; }
.trophy-note { margin: 11px 0 0; font-size: 12px; color: #f2d79a; }
.trophy-calls { display: grid; gap: 2px; margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.trophy-calls strong { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.trophy-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.trophy-actions span { color: var(--text-muted); font-size: 11.5px; }
.trophy-score { display: grid; justify-items: end; gap: 1px; }
.trophy-score strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.trophy-score span { color: #f2d79a; font-size: 11px; white-space: nowrap; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
  padding: 11px 20px; border-radius: 999px; font-size: 14px; z-index: 100; box-shadow: var(--shadow);
  animation: rise .2s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 10px 14px; }
  .tabs {
    order: 3; width: 100%; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .tab { flex: none; scroll-snap-align: center; }
  .topbar-right { gap: 8px; }
  .who span { display: none; }
  .main { padding: 18px 14px 60px; }
  .grid-2 { grid-template-columns: 1fr; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .rate-body { padding: 18px; }
  .rate-head h2 { font-size: 21px; }
  .bar-row { grid-template-columns: minmax(92px, 50%) 1fr 40px; }
  .dot-row { grid-template-columns: 110px 1fr 30px; }
  .dot-axis { margin-left: 122px; margin-right: 42px; }
  .detail-row2 { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 30px 72px minmax(0,1fr); gap: 10px; padding: 12px; }
  .rank-art { width: 72px; }
  .rank-art-small { width: 58px; }
  .rank-score { grid-column: 3; text-align: left; display: flex; gap: 7px; align-items: baseline; }
  .rank-score span { display: inline; }
  .trophy-person { grid-template-columns: 90px 1fr; }
  .trophy-person b { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ═══════════════════════════ landing page ═══════════════════════════════ */
.landing { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }
.landing-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
/* The logo grows to 54px on small screens and the sign-in button sits right next
   to it, so they need real air between them rather than whatever space-between
   happens to leave. */
@media (max-width: 560px) {
  .landing-top { gap: 20px; padding: 20px 0 18px; }
}
.hero { padding: 84px 0 64px; max-width: 44rem; }
.hero h1 { font-size: clamp(32px, 5.2vw, 52px); line-height: 1.08; letter-spacing: -.03em; }
.hero-sub { color: var(--text-secondary); font-size: 17px; line-height: 1.6; margin: 20px 0 32px; }
.hero-sub em { color: var(--text-primary); font-style: normal; font-weight: 600; }
.hero-fine { color: var(--text-muted); font-size: 13px; margin: 14px 0 0; }

.landing-showcase { margin-bottom: 34px; }
.landing-shot { margin: 0; min-width: 0; }
.landing-shot picture { display: block; }
.landing-shot > a { display: block; border-radius: 12px; }
.landing-shot > a:focus-visible { outline: 3px solid var(--series-1); outline-offset: 4px; }
.landing-shot img {
  display: block; width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-1);
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
}
.landing-shot figcaption {
  margin: 12px 4px 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5;
}
.landing-shot figcaption strong { color: var(--text-primary); }
.landing-shot-panel figcaption { text-align: center; }
.landing-shot-picker {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px;
  margin-bottom: 18px;
}
.landing-shot-choice {
  min-width: 0; padding: 8px; display: grid; grid-template-columns: minmax(86px,130px) minmax(0,1fr);
  align-items: center; gap: 12px; text-align: left; color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  font: inherit; cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.landing-shot-choice:hover { border-color: var(--text-muted); color: var(--text-primary); }
.landing-shot-choice[aria-pressed="true"] {
  border-color: var(--series-1); background: rgba(56,139,229,.12); color: var(--text-primary);
}
.landing-shot-choice:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.landing-shot-choice picture { display: block; width: 100%; min-width: 0; }
.landing-shot-choice img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border);
}
.landing-shot-choice span { display: grid; gap: 3px; min-width: 0; }
.landing-shot-choice strong { font-size: 13.5px; }
.landing-shot-choice small { color: var(--text-muted); font-size: 11.5px; line-height: 1.35; }

.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.feature { background: var(--surface-1); padding: 24px 22px; }
.feature h2 { font-size: 15px; margin-bottom: 8px; }
.feature p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin: 0; }
.landing-about {
  max-width: 47rem; margin: 46px auto 0; text-align: center;
}
.landing-about h2 { font-size: clamp(22px, 3vw, 29px); }
.landing-about p {
  color: var(--text-secondary); font-size: 15px; line-height: 1.65; margin: 14px 0 0;
}
.landing-foot {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12.5px; text-align: center;
}
.landing-foot p { margin: 4px 0; }
.landing-foot a { color: var(--text-secondary); }
.landing-foot a:hover { color: var(--text-primary); }

@media (max-width: 720px) {
  .stats-shape-compact { grid-template-columns: 1fr; gap: 12px; }
  .stats-shape-compact .shape-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-showcase { margin-bottom: 26px; }
  .landing-shot-panel figcaption { text-align: left; }
  .landing-shot-picker { gap: 7px; margin-bottom: 12px; }
  .landing-shot-choice { display: block; padding: 5px; }
  .landing-shot-choice span { padding: 7px 3px 3px; }
  .landing-shot-choice small { display: none; }
  .landing-about { margin-top: 34px; text-align: left; }
}

/* ═══════════════════════════ onboarding ═════════════════════════════════ */
.onboard-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; text-align: left; }
.onboard-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: grid; gap: 12px; align-content: start;
}
.onboard-card h2 { font-size: 15px; }
.workspace-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.workspace-choice label {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.workspace-choice label:has(input:checked) { border-color: rgba(57,135,229,.65); background: rgba(57,135,229,.08); }
.workspace-choice input { margin: 3px 0 0; }
.workspace-choice span { display: grid; gap: 2px; }
.workspace-choice strong { font-size: 12.5px; }
.workspace-choice small { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.field { display: grid; gap: 5px; }
.field > span {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600;
}
.field-help { font-size: 12px; color: var(--text-muted); margin: -4px 0 0; }

/* ═══════════════════════════ group switcher ═════════════════════════════ */
.group-switch { position: relative; }
.group-btn {
  font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; max-width: 220px;
}
.group-btn:hover { background: #2c2c2a; }
.group-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { color: var(--text-muted); font-size: 11px; }
.group-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 260px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; box-shadow: var(--shadow); display: grid; gap: 2px;
}
.group-item {
  font: inherit; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm);
  background: transparent; border: 0; color: var(--text-primary); cursor: pointer; display: grid; gap: 3px;
}
.group-item:hover { background: var(--surface-2); }
.group-item.is-current { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--series-1); }
.group-item-name { font-size: 14px; font-weight: 600; }
.group-item-meta { font-size: 11.5px; color: var(--text-muted); }
.group-item-meta b { color: var(--series-1); }
.group-menu-sep { height: 1px; background: var(--border); margin: 5px 0; }

/* ═══════════════════════════ invite row ═════════════════════════════════ */
.invite-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.invite-row .input { flex: 1 1 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.person .chip { margin-left: 6px; vertical-align: middle; }
.invite-notice { border-color: rgba(57,135,229,.6); color: #a8cbf5; }
.invite-notice .pill { margin-left: 4px; }
.onboard-invites {
  display: grid; gap: 9px; margin: -10px 0 22px; padding: 14px;
  border: 1px solid rgba(57,135,229,.45); border-radius: var(--radius); text-align: left;
  background: rgba(57,135,229,.07);
}
.onboard-invites h2 { font-size: 15px; }
.invite-list { display: grid; gap: 8px; }
.invite-card {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px;
  padding: 11px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.invite-card img, .invite-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.invite-avatar {
  display: grid; place-items: center; background: rgba(57,135,229,.16);
  color: #a8cbf5; font-size: 10px; font-weight: 750;
}
.invite-card > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.invite-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.invite-card small { color: var(--text-muted); font-size: 11.5px; }
.invite-card-actions { display: flex; gap: 6px; }
.direct-invite-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,320px); gap: 18px; align-items: end; }
.direct-invite-head h4, .subsection-title { font-size: 13.5px; margin-bottom: 4px; }
.direct-invite-head .panel-sub { margin: 0; }
.compact-people { gap: 7px; margin-top: 12px; }
.compact-people .person { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.person-avatar { border-radius: 50%; object-fit: cover; }
.person-avatar.invite-avatar { width: 32px; height: 32px; }
.subsection-title { margin-top: 18px; }

@media (max-width: 720px) {
  .hero { padding: 48px 0 40px; }
  .group-btn { max-width: 130px; }
  /* Anchored to the button's LEFT edge, not its right. Right-aligning it was meant
     to keep the menu on screen, but the switcher sits near the left edge of the
     topbar, so a 260px menu hung ~114px off the left of a 375px phone. The cap is
     the switcher's own offset plus a margin, so it cannot overflow the other way. */
  .group-menu {
    left: 0; right: auto;
    min-width: 0; width: max-content; max-width: calc(100vw - 64px);
  }
  .group-item-meta { white-space: normal; }
}
@media (max-width: 480px) { .workspace-choice { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
  .add-hit { grid-template-columns: 72px minmax(0,1fr); }
  .add-hit img { width: 72px; height: 34px; }
  .add-hit > :last-child { grid-column: 2; justify-self: start; }
}

/* Divider between the group's settings and the viewer's own preferences. */
.settings-rule { border: 0; border-top: 1px solid var(--border); margin: 20px 0 14px; }

/* ── library: sortable headers, status colour, thumbnails ───────────────── */
.th-sort { user-select: none; white-space: nowrap; }
.th-sort-btn {
  border: 0; padding: 4px 0; background: transparent; color: inherit;
  font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.th-sort-btn span { display: inline-block; min-width: 1em; margin-left: 3px; }
.th-sort-btn:hover, .th-sort-btn:focus-visible { color: var(--text-primary); }
.th-sort.is-sorted { color: var(--text-primary); }

/* Status at a glance. Hues reuse the validated semantic tokens rather than new
   ones: backlog is deliberately neutral, since most of the library is backlog and
   colouring it would just add noise. */
.status-playing  { background: rgba(57,135,229,.14);  border-color: rgba(57,135,229,.45);  color: #a8cbf5; }
.status-finished { background: rgba(12,163,12,.14);   border-color: rgba(12,163,12,.45);   color: #8fe08f; }
.status-unfinished,
.status-dropped  { background: rgba(208,59,59,.13);   border-color: rgba(208,59,59,.42);   color: #f0a3a3; }
.status-sampled  { background: rgba(250,178,25,.12);  border-color: rgba(250,178,25,.40);  color: #f2d79a; }

/* Steam header art is a 460x215 banner, so the thumbnail keeps that ratio — a
   square crop cuts the logo off on most games and reads as a smudge. */
.lib-game { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.lib-open {
  display: grid; gap: 4px; width: 100%; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; font-weight: inherit;
  text-align: left; cursor: pointer;
}
.lib-mobile-meta { display: none; color: var(--text-muted); font-size: 11.5px; font-weight: 400; }
.lib-art {
  flex: 0 0 auto; width: 46px; height: 21px; border-radius: 3px;
  object-fit: cover; background: var(--surface-2); display: block;
}
.lib-art-none { border: 1px solid var(--border); }

/* ── rate queue: which question am I being asked ────────────────────────── */
.rate-modes { max-width: 900px; margin: 0 auto 16px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px;
             background: var(--surface-1); border: 1px solid var(--border); }
.seg {
  font: inherit; font-size: 13.5px; font-weight: 550; padding: 7px 15px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.seg:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-2); }
.seg.is-on { background: var(--surface-2); color: var(--text-primary); }
.seg:disabled { opacity: .4; cursor: default; }
.rate-ask { margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
/* Already-owned search hits keep their Steam link fully actionable while the
   library state, art and title recede. */
.add-hit.is-have > img,
.add-hit.is-have .add-hit-copy > b,
.add-hit.is-have .add-hit-copy > span,
.add-hit.is-have > .chip { opacity: .65; }
.add-hit.is-have:hover { background: var(--surface-2); }

/* ── add by hand ────────────────────────────────────────────────────────── */
.add-manual { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.add-manual > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--text-secondary);
}
.add-manual > summary:hover { color: var(--text-primary); }
.add-manual[open] > summary { margin-bottom: 10px; }
.add-manual .field { margin-top: 10px; }
.field-opt { color: var(--text-muted); font-weight: 400; }

/* ── destructive actions ────────────────────────────────────────────────── */
.danger {
  border: 1px solid rgba(208,59,59,.42); border-radius: var(--radius);
  padding: 14px 16px; background: rgba(208,59,59,.06);
}
.danger > strong { color: #f0a3a3; font-size: 14px; }
.export-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 16px; font-size: 12.5px; color: var(--text-muted); }
.export-links a:not(.btn) { color: #a8cbf5; }
.btn-danger { background: var(--critical); border-color: transparent; color: #fff; }
.btn-danger:hover { background: #e05252; }
/* Archived rows stay legible but visibly not part of the active library. */
.status-archived { background: var(--surface-2); color: var(--text-muted); }
tr.is-archived td { opacity: .55; }

/* ── extra statistics ───────────────────────────────────────────────────── */
.stat-callouts { display: grid; gap: 8px; margin-top: 14px; }
.pair-callouts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.pair-callouts .callout-stat { min-width: 0; padding: 11px 13px; }
.stats-detail-label {
  margin: 20px 0 11px; color: var(--text-muted); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.callout-stat {
  display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px; color: var(--text-muted);
}
.callout-stat strong { font-size: 14.5px; color: var(--text-primary); font-weight: 600; }
.shrug-list { display: flex; flex-wrap: wrap; gap: 8px; }
.shrug {
  font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.shrug:hover { color: var(--text-primary); border-color: var(--series-1); }

/* ── comment thread ─────────────────────────────────────────────────────── */
.imported-note {
  margin: 0; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-secondary); font-size: 13.5px;
}
.thread { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.thread-title { font-size: 14.5px; margin-bottom: 12px; }
.thread-list { display: grid; gap: 12px; margin-bottom: 14px; }
.comment { display: grid; gap: 3px; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.comment-head strong { color: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.comment-head time { margin-left: 2px; }
.comment p { margin: 0; font-size: 14px; color: var(--text-secondary); white-space: pre-wrap; }
.btn-x {
  margin-left: auto; font: inherit; font-size: 12px; line-height: 1; padding: 3px 6px;
  background: transparent; border: 0; border-radius: 4px; color: var(--text-muted); cursor: pointer;
}
.btn-x:hover { background: var(--surface-2); color: var(--critical); }
.thread-new { display: flex; gap: 8px; align-items: flex-start; }
.thread-new textarea { flex: 1; resize: vertical; font-family: inherit; }
/* An estimate is visually distinct from a number somebody typed. */
.est { color: var(--text-muted); border-bottom: 1px dotted var(--baseline); cursor: help; }
.pt-fix { display: block; margin-top: 3px; }

/* ── selective Steam import ────────────────────────────────────────────── */
.steam-tools { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.steam-import-dialog { width: min(820px, calc(100vw - 32px)); }
.steam-import-filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin: 14px 0;
}
.steam-import-filters > label:not(.toggle) { display: grid; gap: 6px; min-width: min(280px,100%); }
.steam-import-filters > label:not(.toggle) > span {
  color: var(--text-muted); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
}
.steam-import-toggle { margin-bottom: 11px; }
.steam-import-types {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin: -2px 0 14px; padding: 0;
  border: 0;
}
.steam-import-types legend {
  width: 100%; margin-bottom: 7px; color: var(--text-muted); font-size: 11px;
  font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
}
.steam-import-types small { flex-basis: 100%; color: var(--text-muted); font-size: 11.5px; }
.steam-import-summary { color: var(--text-secondary); font-size: 13.5px; }
.steam-import-actions,
.steam-import-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.steam-import-actions span { color: var(--text-muted); font-size: 12.5px; }
.steam-import-foot { justify-content: space-between; margin: 14px 0 0; }
.steam-import-submit { margin-left: auto; }
.steam-import-list { display: grid; gap: 6px; }
.steam-import-item {
  display: grid; grid-template-columns: auto 42px minmax(0,1fr) auto;
  align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent; cursor: pointer;
}
.steam-import-item:hover { border-color: var(--border-strong); }
.steam-import-item img,
.steam-import-placeholder { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; background: var(--surface-1); }
.steam-import-item > span:not(.steam-import-placeholder) { min-width: 0; display: grid; gap: 3px; }
.steam-import-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.steam-import-item small { color: var(--text-muted); font-size: 11.5px; }
.steam-import-item a { color: #a8cbf5; font-size: 12.5px; white-space: nowrap; }

/* ── personal statistics ───────────────────────────────────────────────── */
.personal-stat-callouts { grid-template-columns: repeat(2,minmax(0,1fr)); }
.personal-records { grid-template-columns: repeat(2,minmax(0,1fr)); }
.completion-suggestions { display: grid; gap: 7px; }
.completion-suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.completion-suggestion > span { min-width: 0; display: grid; gap: 2px; }
.completion-suggestion strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.completion-suggestion small { color: var(--text-muted); font-size: 11.5px; }
.compact-list { display: grid; gap: 7px; }
.compact-list > span { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.compact-list b { font-weight: 550; color: var(--text-secondary); }
.compact-list em { color: var(--text-muted); font-style: normal; text-align: right; }

@media (max-width: 720px) {
  .history-card { padding: 16px; }
  .history-item { grid-template-columns: 112px minmax(0,1fr); gap: 12px; }
  .history-art { width: 112px; height: 64px; }
  .history-actions .btn { flex: 1 1 180px; }
  /* The desktop table is too wide to scan on a phone. Keep one tappable summary
     column and put the decision-making fields directly under the title. */
  .table-wrap { overflow-x: visible; }
  #lib-table th:not(.c-name), #lib-table td:not(.c-name) { display: none; }
  #lib-table .c-name { width: 100%; min-width: 0; padding: 12px; }
  #lib-table .lib-mobile-meta { display: block; }
  #lib-table .lib-game { flex-wrap: wrap; }
  .steam-import-item { grid-template-columns: auto 36px minmax(0,1fr); }
  .steam-import-item img, .steam-import-placeholder { width: 36px; height: 36px; }
  .steam-import-item a { grid-column: 3; }
  .steam-import-actions span { flex-basis: 100%; }
  .invite-card { grid-template-columns: auto minmax(0,1fr); }
  .invite-card-actions { grid-column: 2; }
  .direct-invite-head { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 480px) {
  .pair-callouts { grid-template-columns: 1fr; }
  .personal-stat-callouts, .personal-records { grid-template-columns: 1fr; }
}