/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Form controls do not inherit the page font — the browser gives a <button> its
   own (Arial on most). Every place a <button class="btn"> sits beside an
   <a class="btn">, the two were rendering in different typefaces. Only the
   family is reset here; each control keeps whatever size its own rule sets. */
button, input, select, textarea { font-family: inherit; }

/* ── Palette ──────────────────────────────────────────────────────────────
 * The values come from the daily game's stylesheet, so the whole site reads as
 * one thing. The variable *names* are this app's own, unchanged, so the ~1000
 * lines below did not have to be touched — only what they resolve to.
 *
 * This half had no light theme at all before. It follows the same
 * `data-theme` attribute and the same `reelrank-theme` localStorage key as the
 * games, so a player who picks light mode there arrives here already in it.
 */
:root {
  --bg:          #0B0D16;   /* game: --bg      */
  --bg2:         #151A2C;   /* game: --panel   */
  --bg3:         #1C2238;   /* game: --panel-2 */
  --border:      #2A3150;   /* game: --line    */
  --text:        #EDEBE3;   /* game: --ink     */
  --text-muted:  #8B90A5;   /* game: --muted   */
  --accent:      #F5C542;   /* game: --gold    */
  --accent-dark: #B8933A;   /* game: --gold-dim*/
  --red:         #E5484D;
  --green:       #3DD68C;
  /* Deliberately tighter than the game's 14px: this half is dense tables and
   * data, and the game's rounding looks bloated at this information density. */
  --radius:      8px;
  --shadow:      0 4px 24px rgba(0,0,0,.5);
  /* Text that sits on top of --accent. */
  --on-accent:   #0B0D16;
  /* Hairline tints layered over the background. White works on dark, black on
     light — hardcoding either breaks the other theme. */
  --overlay-1:   rgba(255,255,255,.02);
  --overlay-2:   rgba(255,255,255,.04);
  --overlay-3:   rgba(255,255,255,.06);
}

[data-theme="light"] {
  --bg:          #F7F3E7;
  --bg2:         #FFFFFF;
  --bg3:         #F1EBDA;
  --border:      #DED4B8;
  --text:        #241F14;
  --text-muted:  #6B6455;
  --accent:      #B8860B;
  --accent-dark: #8C6D1F;
  --red:         #C23616;
  --green:       #1F9D55;
  --shadow:      0 4px 24px rgba(0,0,0,.12);
  --on-accent:   #FFFFFF;
  --overlay-1:   rgba(0,0,0,.03);
  --overlay-2:   rgba(0,0,0,.06);
  --overlay-3:   rgba(0,0,0,.09);
}

html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  transition: background .2s ease, color .2s ease;
}

/* The game's display face, for headings and the brand only — body copy and
 * table data stay in Karla, which is what makes dense data readable. */
.nav-brand,
.login-title,
.register-title,
h1, h2 {
  font-family: 'Bebas Neue', 'Karla', sans-serif;
  letter-spacing: .04em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigation ── */
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  height: 56px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .03em;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: .25rem;
  flex: 1;
  align-items: center;
}
.nav-links a {
  color: var(--text-muted);
  padding: .3rem .6rem;
  border-radius: var(--radius);
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s, background .15s;
  /* inline-flex, not inline: vertical padding on an inline box paints outside
     it without adding height, so the label sits on the first baseline of the
     row rather than in the middle of it. Everything else in the bar is a form
     control or inline-block and centres on its own, which is what made these
     links alone look top-aligned. */
  display: inline-flex;
  align-items: center;
  /* The two-word links ("Today's puzzle", "Face-Off") were wrapping to a second
     line once the bar got crowded, which made the whole list two lines tall and
     left every one-line label stranded at the top of it. */
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: var(--bg3);
}
.nav-search {
  position: relative;
  flex: 0 1 220px;
  min-width: 0;
  margin-left: auto;
}
.nav-search .search-input {
  padding: .32rem .75rem;
  font-size: .85rem;
}
.nav-search .search-results {
  min-width: 340px;
  right: 0;
  left: auto;
}
/* Your name, which is the way into settings. It had no styling at all while it
   was a <span>, so this is the first time it has needed any: the same treatment
   as a nav link, since that is what it now is. */
.nav-user-name {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  padding: .3rem .6rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .9rem;
  text-decoration: none;
  /* A long display name would otherwise push Sign out off the end of the bar. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s, background .15s;
}
.nav-user-name:hover,
.nav-user-name.active { color: var(--text); background: var(--bg3); text-decoration: none; }
.nav-logout button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;   /* "Sign out" was breaking across two lines */
  padding: .25rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .85rem;
  transition: color .15s, border-color .15s;
}
.nav-logout button:hover { color: var(--text); border-color: var(--text-muted); }

/* ── Flash messages ── */
.flash {
  padding: .75rem 2rem;
  font-size: .9rem;
}
.flash-error   { background: rgba(224,84,84,.15); color: #f08080; border-bottom: 1px solid rgba(224,84,84,.3); }
.flash-success { background: rgba(76,175,132,.15); color: #7ec8a4; border-bottom: 1px solid rgba(76,175,132,.3); }

/* ── Main container ── */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  /* An <a class="btn"> inherits the body's 1.5; a <button class="btn"> gets the
     browser's `normal` (~1.15) instead, which made the button ~5px shorter than
     the link next to it. Stating it explicitly makes the pair identical without
     changing how the link renders. */
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.btn:hover { background: var(--border); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger    { background: rgba(224,84,84,.15); border-color: rgba(224,84,84,.4); color: #f08080; }
.btn-danger:hover { background: rgba(224,84,84,.3); }
.btn-bluesky   { background: rgba(0,133,255,.15); border-color: rgba(0,133,255,.4); color: #4db3ff; }
.btn-bluesky:hover { background: rgba(0,133,255,.28); border-color: #0085ff; }
.btn-secondary { background: var(--bg3); border-color: var(--border); color: var(--text-muted); }
.btn-secondary:hover { background: var(--border); }
.btn-block   { width: 100%; justify-content: center; }
.btn-sm      { padding: .25rem .75rem; font-size: .82rem; }
.text-muted  { color: var(--text-muted); }

/* ── Login ── */
.login-wrap {
  max-width: 380px;
  margin: 6rem auto 0;
  text-align: center;
}
.login-title { font-size: 2rem; font-weight: 700; color: var(--accent); margin-bottom: .25rem; }
.login-sub   { color: var(--text-muted); margin-bottom: 2rem; }
.login-form  { text-align: left; }
.login-form label {
  display: block;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
  margin-top: 1rem;
}
.login-form input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .6rem .85rem;
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s;
}
.login-form input:focus { border-color: var(--accent); }
.login-form .btn { margin-top: 1.5rem; }

/* Status colours were picked for a dark background: light salmon on a pale
 * pink wash is unreadable on white. These are the few places that needed a
 * light-theme value rather than a token. */
[data-theme="light"] .flash-error   { background: rgba(194,54,22,.10); color: #8c2410; border-bottom-color: rgba(194,54,22,.25); }
[data-theme="light"] .flash-success { background: rgba(31,157,85,.10);  color: #14663a; border-bottom-color: rgba(31,157,85,.25); }
[data-theme="light"] .btn-danger    { background: rgba(194,54,22,.10); border-color: rgba(194,54,22,.35); color: #8c2410; }
[data-theme="light"] .btn-danger:hover { background: rgba(194,54,22,.20); }

/* Separates the links back to the daily games from this section's own pages. */
/* align-self overrides the centring above so the rule still spans the whole row
   of links rather than only its own label. */
.nav-sep {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
  margin-left: .25rem;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Matches .sitenav-account on the game pages — the signed-out counterpart of
   the display name that sits here once you are in. */
.nav-signin {
  margin-left: auto;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .82rem;
}
.nav-signin:hover { border-color: var(--accent); text-decoration: none; }

.nav-theme {
  background: none;
  border: 0;
  padding: 0 .25rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.nav-theme:hover { opacity: 1; }



/* ── Onboarding ── */
.welcome-page { max-width: 760px; margin: 3rem auto 4rem; padding: 0 1.5rem; }
.welcome-title { font-size: 2rem; color: var(--accent); margin-bottom: .4rem; }
.welcome-sub { color: var(--text-muted); line-height: 1.6; margin-bottom: 2rem; }
.welcome-section { margin-bottom: 2rem; }
.welcome-section-title { font-size: 1.1rem; margin-bottom: .2rem; }
.welcome-section-note { font-size: .85rem; color: var(--text-muted); margin-bottom: .85rem; }
.welcome-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* The input is hidden but still focusable, so the chip is reachable by keyboard
   and :focus-within gives it a visible ring. */
.welcome-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.welcome-chip span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text-muted); font-size: .88rem; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.welcome-chip span i {
  font-style: normal; font-size: .75rem; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.welcome-chip span:hover { border-color: var(--text-muted); color: var(--text); }
.welcome-chip input:checked + span {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg); font-weight: 600;
}
.welcome-chip input:checked + span i { opacity: .7; }
.welcome-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.welcome-cap { font-size: .82rem; color: var(--text-muted); margin-top: .9rem; }

@media (max-width: 640px) {
  .welcome-page { margin-top: 1.5rem; padding: 0 1rem; }
  .welcome-actions .btn { flex: 1 1 100%; }
}

/* Sign-up, verification and password reset share the .login-wrap shell. */
.login-alt {
  margin-top: 1.25rem;
  font-size: .9rem;
  color: var(--text-muted);
}
.login-alt a { color: var(--accent); }
.field-hint {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--text-muted);
}
/* A button that has to look like a link because the action must be a POST. */
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.login-wrap .flash {
  border-radius: var(--radius);
  border-bottom: 0;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

/* ── Matchup ── */
.matchup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.matchup-hint {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: -.5rem;
}
.matchup-quip {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.5rem;
  margin-top: -.5rem;
  margin-bottom: -.25rem;
}
.matchup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color .2s;
}
.matchup-card:hover { border-color: var(--accent); }
.poster-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.poster-btn:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.poster {
  display: block;
  width: 100%;
  max-width: 280px;
  border-radius: 8px;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--bg3);
}
.matchup-info { text-align: center; width: 100%; }
.matchup-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .25rem;
  text-decoration: none;
}
.matchup-title:hover { color: var(--accent); }
.matchup-rating { font-size: .82rem; color: var(--text-muted); }
.matchup-links { display: flex; gap: .75rem; justify-content: center; }
.imdb-link { font-size: .78rem; color: var(--text-muted); text-decoration: none; }
.imdb-link:hover { color: var(--accent); }
.unseen-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.unseen-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  /* .82rem, not .8rem: these sit directly above "Haven't seen either" and the
     toss-up button, which are both .82rem. */
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.unseen-btn:hover { color: var(--text); }
.unseen-btn--danger { color: #f08080; }
.unseen-btn--danger:hover { color: #e05555; }
.not-seen-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.not-seen-btn:hover { color: var(--text); }

/* ── Leaderboard ── */
.page-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; }
.scope-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.scope-tab {
  padding: .4rem 1rem;
  border-radius: 20px;
  font-size: .88rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.scope-tab:hover,
.scope-tab.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  text-decoration: none;
}
.scope-heading { font-size: 1.1rem; margin-bottom: 1rem; color: var(--text-muted); }
.sort-controls {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sort-btn {
  padding: .25rem .75rem;
  border-radius: 20px;
  font-size: .8rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.sort-btn:hover { color: var(--text); border-color: var(--text-muted); text-decoration: none; }
.sort-btn.active { background: var(--bg3); color: var(--text); border-color: var(--text-muted); }
.scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.scope-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .3rem .9rem;
  font-size: .85rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.scope-pill:hover { border-color: var(--accent); background: var(--bg3); text-decoration: none; }
.pill-count, .pill-elo {
  background: var(--bg3);
  border-radius: 10px;
  padding: .05rem .45rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.pill-elo { background: rgba(229,177,74,.15); color: var(--accent); }

/* ── Table sort ── */
th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th[data-sort]:hover { color: var(--text); }
th[data-sort][data-dir="asc"]::after  { content: ' ▲'; font-size: .7em; opacity: .7; }
th[data-sort][data-dir="desc"]::after { content: ' ▼'; font-size: .7em; opacity: .7; }

/* ── Tables ── */
.rank-table, .list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.rank-table th, .list-table th {
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 500;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rank-table td, .list-table td {
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(44,46,56,.5);
  vertical-align: middle;
}
.rank-table tr:hover td,
.list-table tr:hover td { background: var(--overlay-1); }
.rank-num   { color: var(--text-muted); width: 3rem; font-variant-numeric: tabular-nums; }
.rank-elo   { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.rank-wld   { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-muted); font-size: .85rem; }
.rank-trend { width: 88px; }

/* The consensus column: where everyone puts a film, next to where you do.
   Deliberately quieter than .rank-elo — your own rating is the point of this
   page, and the site's opinion is context, not a correction. */
.rank-consensus       { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .85rem; }
.consensus-rank       { color: var(--text-muted); }
.consensus-none       { color: var(--text-muted); opacity: .5; }
.consensus-delta      { margin-left: 4px; font-size: .78rem; }
.consensus-delta.up   { color: var(--accent); }
.consensus-delta.down { color: var(--text-muted); }
.consensus-delta.same { color: var(--text-muted); opacity: .55; }

/* Movie page: "You: #4 · Everyone: #37". */
.consensus-badge {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 8px; font-size: .85rem; color: var(--text-muted);
}
.consensus-badge b   { color: var(--text); font-variant-numeric: tabular-nums; }
.consensus-of        { opacity: .7; }
.consensus-pending   { opacity: .75; }

/* ── Sparklines ── */
.sparkline { display: block; overflow: visible; }
.sparkline--up   { color: var(--accent); }
.sparkline--down { color: var(--text-muted); }
.result-sparkline {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.result-sparkline .sparkline { width: 100%; height: 36px; }
.rank-movie { display: flex; align-items: center; gap: .75rem; }
.rank-link  { display: flex; align-items: center; gap: .75rem; color: var(--text); text-decoration: none; }
.rank-link:hover { color: var(--accent); }
.rank-thumb {
  width: 36px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg3);
  flex-shrink: 0;
}

/* ── Movie cards (grid) ── */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
}
.movie-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.movie-card-poster-wrap { position: relative; display: block; }
.movie-card-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--bg3);
  display: block;
}
/* Block sits on the poster rather than in the action row: it is the one action
   that ends a film's life here, and a corner ✕ is what that means everywhere
   else. It also buys the two remaining labels the whole width of the card. */
.movie-card-block {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Opaque enough to read against a bright poster, dark in both themes because
     it is over artwork rather than over the page. */
  background: rgba(11, 13, 22, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #f08080;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.movie-card-block:hover { background: #e05555; border-color: #e05555; color: #fff; }
.movie-card-info { padding: .6rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.movie-card-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.movie-card-title:hover { color: var(--accent); }
.movie-card-elo { font-size: .78rem; color: var(--accent); }
/* Each action is its own POST form, and a form is a block box, so the flex and
   the display:contents together are what put the three on one line.
   These are the matchup page's .unseen-btn treatment rather than .btn: a card
   is about 150px wide at the narrowest column and three bordered buttons want
   closer to 220px, so bordered controls could only fit here as icons. Labelled
   text is worth more than a border on the three actions that decide what
   happens to a film. */
.movie-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: .55rem;
  align-items: center;
}
.movie-card-actions form { display: contents; }
.movie-card-action {
  background: none;
  border: none;
  padding: 0;
  font-size: .78rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* A label that breaks is taller than the ones beside it, which is the same
     raggedness one level down from a row that wraps. */
  white-space: nowrap;
}
.movie-card-action:hover { color: var(--text); }
/* An action the film is already in the state of. Shown rather than hidden so
   the row does not change shape between tabs, and so the pair reads as the two
   things you can say about a film either way. */
.movie-card-action[disabled] {
  opacity: .4;
  cursor: default;
  text-decoration: none;
}
.movie-card-action[disabled]:hover { color: var(--text-muted); }
.movie-card-badges { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ── Movies page ── */
.tab-nav {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
}
.tab {
  padding: .4rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: .88rem;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .15s;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--text); border-color: var(--border); border-bottom-color: var(--bg); background: var(--bg); }
.tab-count {
  background: var(--bg3);
  border-radius: 10px;
  padding: .05rem .45rem;
  font-size: .75rem;
}

/* ── Search box ── */
.search-box { position: relative; margin-bottom: 1.5rem; max-width: 540px; }
.search-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--accent); }
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 200;
  box-shadow: var(--shadow);
  max-height: 420px;
  overflow-y: auto;
}
.search-results.hidden { display: none; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg3); }
.sr-thumb {
  width: 36px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg3);
  flex-shrink: 0;
}
.sr-meta { flex: 1; }
.sr-title { font-size: .9rem; font-weight: 500; color: var(--text); }
.sr-title-link { color: inherit; text-decoration: none; }
.sr-title-link:hover { text-decoration: underline; }
.sr-year  { font-size: .78rem; color: var(--text-muted); }
.sr-add    { flex-shrink: 0; }
.sr-status { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.sr-rank {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.sr-rank:hover { text-decoration: underline; }
.add-movie-dialog { width: min(580px, calc(100vw - 2rem)); }
.add-movie-search { position: relative; }
.add-movie-search .search-results { position: static; margin-top: .5rem; max-height: min(55vh, 420px); }
.sr-search-label { display: block; margin-bottom: .45rem; font-size: .85rem; font-weight: 700; }
.sr-message { color: var(--text-muted); font-size: .88rem; }
.sr-add-error { color: #f08080; font-size: .78rem; }
.matchup-page-actions { display: flex; justify-content: flex-end; max-width: 900px; margin: 0 auto .75rem; }
.movie-filter-controls { display: flex; justify-content: flex-end; margin: -.5rem 0 1rem; }

/* ── Movie detail ── */
.movie-detail-header {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 3rem;
  align-items: flex-start;
}
.movie-detail-poster {
  width: 220px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 2/3;
  background: var(--bg3);
  box-shadow: var(--shadow);
}
.movie-detail-meta h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem; }
.meta-item { color: var(--text-muted); font-size: .9rem; margin-bottom: .25rem; }
.overview { color: var(--text-muted); font-size: .9rem; margin: .75rem 0 1.25rem; line-height: 1.6; max-width: 600px; }
.rating-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.rating-elo   { font-size: 2rem; font-weight: 700; color: var(--accent); }
.rating-label { color: var(--text-muted); font-size: .85rem; }
.rating-games { color: var(--text-muted); font-size: .82rem; }
.scope-group  { margin-bottom: .75rem; }
.scope-group-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .4rem; }
.scope-pills  { display: flex; flex-wrap: wrap; gap: .4rem; }
.detail-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.timeout-info { font-size: .85rem; color: var(--text-muted); }
.section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }

/* ── Watch log ── */
.watch-log-form { max-width: 520px; margin-bottom: 1.25rem; }
.watch-log-row  { display: flex; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.watch-log-date-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .38rem .75rem;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.watch-log-date-input:focus { border-color: var(--accent); }
.watch-log-notes-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .45rem .75rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
.watch-log-notes-input:focus { border-color: var(--accent); }
.watch-log-notes-input::placeholder { color: var(--text-muted); }
.watch-log-entries { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; max-width: 520px; }
.watch-log-entry {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .9rem;
}
.watch-log-entry-date  { font-size: .85rem; font-weight: 600; color: var(--text); }
.watch-log-entry-notes { font-size: .875rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.5; }

/* ── Result / delta indicators ── */
.result      { font-weight: 700; font-size: .82rem; }
.result-win  { color: var(--green); }
.result-loss { color: var(--red); }
.elo-delta   { font-variant-numeric: tabular-nums; font-size: .88rem; }
.delta       { font-size: .82rem; }
.delta-up    { color: var(--green); }
.delta-down  { color: var(--red); }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
}
.badge-30d         { background: rgba(229,177,74,.2);  color: var(--accent); }
.badge-90d         { background: rgba(224,84,84,.15);  color: #f08080; }
.badge-blocked     { background: rgba(224,84,84,.3);   color: #f08080; }
.badge-watch-later { background: rgba(76,175,132,.15); color: var(--green); }

/* ── Misc ── */
.year        { color: var(--text-muted); font-weight: 400; }
.empty-hint  { color: var(--text-muted); font-size: .95rem; margin: 2rem 0; }
.empty-state { text-align: center; margin: 6rem auto; max-width: 400px; }
.empty-state p { color: var(--text-muted); margin-bottom: 1.5rem; }

/* ── Not-seen-both ── */
.not-seen-both {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: -.5rem;
}

/* ── Toss Up ── */
.toss-up {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: .25rem;
}
.toss-up-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: .82rem;
  cursor: pointer;
  padding: .35rem .9rem;
  transition: border-color .15s, color .15s;
}
.toss-up-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Matchup result panel (below the next matchup) ── */
.result-panel { max-width: 900px; margin: 0 auto; }
.result-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}
.result-panel-heading {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.result-panel-heading strong { color: var(--text); font-weight: 600; }

/* ── Matchup result page (standalone /matchup/result/{id}) ── */
.result-page { max-width: 860px; margin: 0 auto; }
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.result-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.result-card {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.result-card-header { display: flex; flex-direction: column; gap: .3rem; }
.result-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.result-label--winner { color: var(--green); }
.result-label--loser  { color: #f08080; }
.result-label--tied   { color: var(--text-muted); }
.result-movie-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.3;
}
.result-movie-title:hover { color: var(--accent); }
.result-stats { display: flex; flex-direction: column; gap: .35rem; }
.result-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .85rem;
}
.result-stat-label { color: var(--text-muted); flex-shrink: 0; }
.result-stat-value { font-weight: 500; text-align: right; }
.delta-neutral { color: var(--text-muted); }
.result-section-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.result-recent { display: flex; flex-direction: column; gap: .2rem; }
.result-scopes { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.result-scopes .scope-group { margin-bottom: .5rem; }
.result-scopes .scope-group:last-child { margin-bottom: 0; }
.result-scopes .scope-pill { font-size: .78rem; padding: .2rem .5rem; }
.recent-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
}
.form-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 700;
  flex-shrink: 0;
}
.form-win  { background: rgba(76,175,132,.18); color: var(--green); }
.form-loss { background: rgba(224,84,84,.15);  color: #f08080; }
.form-draw { background: var(--bg3);           color: var(--text-muted); }
.recent-opponent {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-delta { flex-shrink: 0; font-size: .78rem; }
.result-h2h {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem 1.2rem;
  margin-bottom: 1.25rem;
}
.h2h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .4rem;
}
.h2h-name { font-size: .9rem; font-weight: 600; flex: 1; }
.h2h-name--right { text-align: right; }
.h2h-score { font-size: 1.15rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.result-footer { text-align: center; margin-top: .5rem; }
.result-share  { text-align: right; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
@media (max-width: 600px) {
  .result-grid { grid-template-columns: 1fr; }
}

/* ── Page header (title + action button) ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.page-header .page-title { margin-bottom: 0; }
.page-header-actions { display: flex; align-items: center; gap: .5rem; }

/* ── Import ── */
.import-hint    { color: var(--text-muted); margin-bottom: 1rem; }
.import-summary { color: var(--text-muted); margin-bottom: 1.25rem; font-size: .9rem; }
.import-form    { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; }
.import-textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .95rem;
  padding: .75rem 1rem;
  resize: vertical;
  font-family: inherit;
}
.import-textarea:focus { outline: none; border-color: var(--accent); }

/* ── News feed ── */
.news-feed {
  max-width: 900px;
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.news-feed-header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: 1rem;
}
.news-feed-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.news-feed-source {
  font-size: .75rem;
  color: var(--text-muted);
  opacity: .6;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.news-card:hover {
  border-color: var(--accent);
  background: var(--bg3);
  text-decoration: none;
}
.news-card-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-desc {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-date {
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .7;
  margin-top: auto;
  padding-top: .25rem;
}

/* ── History ── */
.history-page { max-width: 1000px; }
.history-summary { font-size: .85rem; color: var(--text-muted); }
.history-filter {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
/* line-height on the controls that share a row with a .btn: the button now
   states 1.5, so an input left on the browser's `normal` sits shorter than the
   button beside it. Same reason in .watch-log-date-input, .admin-confirm-input
   and .admin-user-delete's input. */
.history-filter-input {
  flex: 1;
  line-height: 1.5;
  max-width: 320px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .9rem;
  padding: .4rem .75rem;
  font-family: inherit;
}
.history-filter-input:focus { outline: none; border-color: var(--accent); }
.history-table { table-layout: fixed; }
.history-col-date  { width: 9rem; }
.history-col-movie { width: auto; }
.history-col-vs    { width: 4.5rem; text-align: center; }
.history-col-elo   { width: 7rem; text-align: right; }
.history-date { white-space: nowrap; }
.history-date-day  { display: block; font-size: .85rem; color: var(--text); }
.history-date-time { display: block; font-size: .75rem; color: var(--text-muted); }
.history-vs { text-align: center; }
.history-badge {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.history-badge--beat { background: rgba(229,177,74,.12); color: var(--accent); }
.history-badge--draw { background: var(--overlay-3); color: var(--text-muted); }
.history-elo {
  text-align: right;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.history-elo-sep { color: var(--text-muted); margin: 0 .2rem; }

/* ── Watch history page ── */
.watch-history-col-runtime  { width: 5.5rem; text-align: right; }
.watch-history-col-notes    { width: auto; }
.watch-history-col-actions  { width: 7rem; }
.watch-history-runtime      { text-align: right; font-size: .85rem; color: var(--text-muted); }
.watch-history-year         { color: var(--text-muted); font-size: .85rem; margin-left: .25rem; }
.watch-history-notes-cell   { font-size: .875rem; color: var(--text-muted); }
.watch-history-actions-cell { white-space: nowrap; display: flex; gap: .35rem; align-items: flex-start; padding-top: .55rem; }
.wh-notes-form              { display: flex; flex-direction: column; gap: .4rem; }
.wh-notes-textarea          { width: 100%; min-width: 160px; }
.wh-notes-actions           { display: flex; gap: .35rem; }

/* ── Stats page ── */
.stats-hero {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.hero-stat {
  flex: 1;
  min-width: 130px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  text-align: center;
}
.hero-stat--muted { opacity: .7; }
.hero-number {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero-number--sm { font-size: 1.5rem; }
.hero-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-top: .4rem;
}
.stats-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 2rem 0 .75rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem;
  margin-bottom: .5rem;
}
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.stat-card--empty { opacity: .45; }
.stat-card--swing          { border-left-color: #e5b14a; background: rgba(229,177,74,.04); }
.stat-card--upset          { border-left-color: #6495ed; background: rgba(100,149,237,.04); }
.stat-card--win            { border-left-color: #4caf84; background: rgba(76,175,132,.04); }
.stat-card--loss           { border-left-color: #e05454; background: rgba(224,84,84,.04); }
.stat-card--balance        { border-left-color: #20b2aa; background: rgba(32,178,170,.04); }
.stat-card--rivalry        { border-left-color: #9370db; background: rgba(147,112,219,.04); }
.stat-card--recent-upsets  { border-left-color: #ff8c00; background: rgba(255,140,0,.04); }
.stat-card--recent-variety { border-left-color: #1e90ff; background: rgba(30,144,255,.04); }
.stat-card--spotlight {
  grid-column: 1 / -1;
  border-left-width: 4px;
  padding: 1.35rem 1.6rem;
  position: relative;
}
.stat-card--spotlight::after {
  content: '★ spotlight';
  position: absolute;
  top: .8rem;
  right: .85rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  background: var(--bg3);
  padding: .15rem .55rem;
  border-radius: 10px;
}
.stat-card-icon  { font-size: 1.3rem; line-height: 1; margin-bottom: .1rem; }
.stat-card-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 600; }
.stat-card-value { font-size: 1.55rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; line-height: 1.15; }
.stat-card--spotlight .stat-card-value { font-size: 2.1rem; }
.stat-card-sub   { font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
.stat-card-link  { color: var(--accent); text-decoration: none; }
.stat-card-link:hover { text-decoration: underline; }
.charts-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.chart-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
}
.chart-box--narrow { align-self: start; }
.chart-heading {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.chart-heading-badge {
  font-size: .65rem;
  background: rgba(229,177,74,.15);
  color: var(--accent);
  border-radius: 10px;
  padding: .1rem .55rem;
  font-weight: 600;
  letter-spacing: .05em;
}
.chart-sub { font-size: .75rem; color: var(--text-muted); margin-bottom: .85rem; }
.outcomes-grid { display: flex; gap: .75rem; margin: .85rem 0 .75rem; }
.outcome-block {
  flex: 1;
  background: var(--bg3);
  border-radius: var(--radius);
  padding: .9rem .75rem;
  text-align: center;
}
.outcome-num { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.outcome-num--decisive { color: var(--green); }
.outcome-num--draw     { color: var(--text-muted); }
.outcome-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-top: .3rem; }
.outcome-pct   { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }
.outcome-total-row { display: flex; align-items: baseline; gap: .45rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.outcome-total-num   { font-size: 1rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.outcome-total-label { font-size: .75rem; color: var(--text-muted); }

@media (max-width: 640px) {
  .stats-hero { gap: .6rem; }
  .hero-stat  { min-width: calc(50% - .3rem); padding: .85rem 1rem; }
  .hero-number { font-size: 1.8rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card--spotlight { grid-column: auto; }
  .stat-card--spotlight::after { display: none; }
  .charts-row { grid-template-columns: 1fr; }
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.5rem;
}
.pagination-info { font-size: .85rem; color: var(--text-muted); }
.btn-disabled { opacity: .35; pointer-events: none; }

/* ── Matchup sub-bar ── */
.matchup-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 2rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 56px;
  z-index: 90;
  gap: .75rem;
}
.matchup-subbar-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.subbar-toggle {
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: .2rem .55rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.subbar-toggle:hover { color: var(--text); text-decoration: none; }
.subbar-toggle.active { color: var(--accent); }
.focus-scope-form {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.focus-scope-label {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.focus-scope-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .82rem;
  padding: .2rem .45rem;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  max-width: 200px;
  transition: border-color .15s, color .15s;
}
.focus-scope-select:hover,
.focus-scope-select:focus { border-color: var(--text-muted); color: var(--text); }
.focus-scope-select.active { color: var(--accent); border-color: var(--accent); }
.focus-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.focus-scope-input {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .82rem;
  padding: .2rem .45rem;
  border-radius: 4px;
  outline: none;
  width: 180px;
  transition: border-color .15s, color .15s;
}
.focus-scope-input::placeholder { color: var(--text-muted); opacity: .7; }
.focus-scope-input:focus { border-color: var(--text-muted); color: var(--text); }
.focus-scope-panel {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 300;
}
.focus-group-header {
  padding: .4rem .6rem .2rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.focus-group-header:first-child { border-top: none; }
.focus-scope-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .3rem .6rem;
  font-size: .82rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .1s, color .1s;
}
.focus-scope-option:hover,
.focus-scope-option--active { background: var(--border); color: var(--text); }
.focus-scope-option--active .focus-option-count { opacity: 1; }
.focus-option-name { flex: 1; min-width: 0; }
.focus-option-count { font-size: .72rem; opacity: .6; flex-shrink: 0; }
.focus-mode-active {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .82rem;
  white-space: nowrap;
}
.focus-mode-label { color: var(--accent); }
.focus-mode-sep   { color: var(--border); }
.focus-exit-form  { display: contents; }
.focus-exit-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: .82rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.focus-exit-btn:hover { color: var(--text); }
.help-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: border-color .15s, color .15s;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Help modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  transform: translateY(10px);
  transition: transform .2s;
}
.modal-overlay.is-open .modal { transform: translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.modal-title { font-size: 1.1rem; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s;
}
.modal-close:hover { color: var(--text); }
.modal-body { display: flex; flex-direction: column; gap: 1.25rem; }
.export-md-textarea {
  width: 100%;
  min-height: 380px;
  font-family: monospace;
  font-size: .82rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .75rem;
  resize: vertical;
  box-sizing: border-box;
}
.modal-section h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: .6rem;
}
.modal-section p {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.modal-section p em { font-style: normal; color: var(--text); }
.modal-section dl { display: flex; flex-direction: column; gap: .65rem; }
.modal-section dt { font-size: .9rem; font-weight: 600; color: var(--text); }
.modal-section dd { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.modal-keys { display: flex; flex-direction: column; gap: .4rem; }
.modal-key-row { display: flex; align-items: center; gap: .75rem; }
.modal-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: .15rem .45rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .8rem;
  font-family: monospace;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.modal-key-desc { font-size: .88rem; color: var(--text-muted); }

/* ── Mobile bottom nav (hidden on desktop) ── */
.mobile-nav { display: none; }

/* ── Responsive ── */
@media (max-width: 640px) {
  /* ── Utilities ── */
  .hide-mobile { display: none !important; }

  /* ── Touch targets ── */
  button, .btn { touch-action: manipulation; }

  /* ── Top nav ── */
  .nav { padding: 0 1rem; gap: .5rem; }
  /* The bottom bar covers this section's own pages, but nothing there leads
     back to the games — so keep those two links, and drop the rest. */
  .nav-links li:not(.nav-game-link) { display: none; }
  .nav-links { flex: 0 1 auto; gap: 0; }
  .nav-links a { padding: .3rem .5rem; font-size: .8rem; }
  .nav-sep { border-left: 0; padding-left: 0; margin-left: 0; }
  .nav-search { display: none; }
  /* Kept visible: with the links above hidden, this is the only route to
     settings on a phone. Narrower, so a long name cannot crowd out Sign out. */
  .nav-user-name { max-width: 7rem; font-size: .78rem; padding: .3rem .5rem; min-height: 36px; }
  .nav-logout button { font-size: .78rem; padding: .3rem .65rem; min-height: 36px; }

  /* ── Bottom nav ── */
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 200;
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .25rem;
    border-top: 2px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .mobile-nav-item.active {
    color: var(--accent);
    border-top-color: var(--accent);
  }
  .mnav-icon { font-size: 1.1rem; line-height: 1; }

  /* ── Main layout ── */
  .main {
    padding: 1rem .9rem calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }
  .page-header { flex-direction: column; align-items: flex-start; gap: .75rem; }

  /* ── Matchup sub-bar ── */
  .matchup-subbar { padding: .4rem 1rem; }
  .focus-scope-label { display: none; }
  .focus-scope-select { max-width: 150px; }
  .focus-scope-input { width: 130px; }
  .modal { padding: 1.25rem; }

  /* ── Matchup ── */
  .matchup { grid-template-columns: 1fr; gap: .75rem; }
  .matchup-quip { font-size: 1rem; }
  .matchup-hint { font-size: .82rem; }
  .matchup-mode-toggle { font-size: .82rem; }
  .poster { max-height: 52vw; }             /* keep poster from being too tall */
  .unseen-actions {
    flex-direction: column;
    gap: .4rem;
    margin-top: .4rem;
  }
  /* .unseen-btn, not .btn — nothing in this row has ever carried .btn, so the
     three buttons kept their desktop size while the two below them (same rule,
     next block) went full-width. */
  .unseen-actions .unseen-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .toss-up-btn, .not-seen-btn {
    width: 100%;
    min-height: 44px;
  }

  /* ── Result cards ── */
  .result-grid { grid-template-columns: 1fr; }

  /* ── Movie detail ── */
  .movie-detail-header { flex-direction: column; }
  .movie-detail-poster { width: 100%; max-width: 160px; }
  .movie-detail-meta h1 { font-size: 1.3rem; }

  /* ── Movie grid ── */
  .movie-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
  .movie-card-poster { border-radius: 4px; }

  /* ── Tables: let rank-table and history-table scroll horizontally ── */
  .rank-table, .history-table { font-size: .82rem; }
  .history-date-time { display: none; }   /* show date only, drop time */
  .history-col-date { width: 5.5rem; }

  /* ── Search ── */
  .search-results { font-size: .85rem; }

  /* ── News feed ── */
  .news-grid { grid-template-columns: 1fr; }

  /* ── Settings ── */
  /* The label column cannot hold "Password last changed" beside a value on a
     phone, so the pairs stack instead. */
  .settings-facts { grid-template-columns: 1fr; gap: 0 0; }
  .settings-facts dt { margin-top: .6rem; }
  .settings-facts dt:first-child { margin-top: 0; }
  .settings-field { max-width: none; }

  /* ── Recent match-ups ── */
  /* Four columns do not fit a phone. The timestamp is the one that can go:
     the panel is headed "Recent" and the rows are already in order. */
  .recent-when  { display: none; }
  .recent-thumb { width: 20px; height: 30px; }

  /* ── Scope tabs ── */
  .scope-tabs { gap: .35rem; }
  .scope-tab  { font-size: .78rem; padding: .3rem .55rem; }
}
/* ── Admin page ──────────────────────────────────────────────────────────── */

.admin-page { max-width: 860px; margin: 0 auto; padding: 1.5rem; }
.admin-heading { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }

.admin-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.admin-section-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}
.admin-section-title--danger { color: #f08080; }
.admin-section-desc { font-size: .88rem; color: var(--text-muted); margin: -.5rem 0 1.25rem; line-height: 1.55; }

/* stat tiles */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1rem; }
.admin-stat { text-align: center; }
.admin-stat-value { font-size: 1.55rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.admin-stat-label { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }
.admin-stat--warn .admin-stat-value { color: #f0b080; }
.admin-stat-label--warn { color: #f0b080; }

/* admin charts */
.admin-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.admin-chart-box { display: flex; flex-direction: column; gap: .5rem; }
.admin-chart-heading { font-size: .88rem; font-weight: 600; color: var(--text); }
.admin-chart-sub { font-size: .78rem; color: var(--text-muted); font-weight: 400; margin-left: .5rem; }
.admin-chart-wrap { position: relative; height: 200px; }

/* normalize form */
.admin-normalize-form { display: flex; flex-direction: column; gap: 1rem; }
.admin-factor-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.admin-factor-label { font-size: .88rem; color: var(--text-muted); min-width: 3rem; }
.admin-factor-range { width: 220px; accent-color: var(--accent); cursor: pointer; }
.admin-factor-display { font-size: 1.2rem; font-weight: 700; min-width: 2.5rem; }
.admin-form-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin-form-actions--sm { margin-top: 1rem; }

/* preview table */
.admin-preview { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.admin-preview-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.admin-preview-apply { margin-top: 1rem; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.admin-table th { text-align: left; padding: .4rem .6rem; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.admin-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--overlay-2); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-global td { font-weight: 500; }
.admin-table-num { text-align: right; font-variant-numeric: tabular-nums; }
/* The actions column narrowed the rest of the table enough to break an
   ISO date across two lines. */
.admin-table-date { white-space: nowrap; }

/* Each action is its own form (they post to different routes), and a form is a
   block box, so without this the buttons stack one per line and the row grows
   to the height of however many actions that account happens to offer. */
.admin-user-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.admin-user-actions form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
/* The typed confirmation sits inline with its button so it reads as one
   control rather than a stray field floating in the row. */
.admin-user-delete input[type="text"] {
  width: 5.5rem;
  padding: .25rem .5rem;
  font-size: .82rem;
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.admin-delta { color: var(--text-muted); }
.admin-type-pill { font-size: .75rem; color: var(--text-muted); }

/* users & invitations */
.admin-muted { color: var(--text-muted); font-size: .8rem; margin-left: .35rem; }
.admin-role-admin { color: var(--accent); font-weight: 600; }
.admin-invite-pending { color: var(--accent); }
.admin-invite-used    { color: var(--text-muted); }
.admin-invite-expired { color: var(--text-muted); text-decoration: line-through; }

.admin-invite-link { margin-bottom: 1rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 6px; background: var(--overlay-2); }
.admin-invite-link-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.admin-invite-link-input { width: 100%; padding: .45rem .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }

/* settings */
.admin-setting-row { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; }
.admin-setting-info { flex: 1; }
.admin-setting-info strong { display: block; font-size: .92rem; margin-bottom: .2rem; }
.admin-setting-info span { font-size: .82rem; color: var(--text-muted); }

/* toggle switch */
.admin-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.admin-toggle input { opacity: 0; width: 0; height: 0; }
.admin-toggle-track {
  position: absolute; inset: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 22px; cursor: pointer; transition: background .2s;
}
.admin-toggle-track::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; top: 3px; left: 3px;
  background: var(--text-muted); border-radius: 50%; transition: .2s;
}
.admin-toggle input:checked + .admin-toggle-track { background: var(--accent); border-color: var(--accent); }
.admin-toggle input:checked + .admin-toggle-track::after { transform: translateX(18px); background: var(--on-accent); }

/* member settings page — reuses .admin-setting-row and .admin-toggle above */
.settings-form { margin-bottom: 0; }
.settings-note { font-size: .85rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 .75rem; max-width: 60ch; }
.settings-note b { color: var(--text); }
.settings-warn { color: var(--text-muted); border-left: 2px solid var(--border); padding-left: .75rem; }
.settings-page--narrow { max-width: 620px; }
.settings-list { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin: 0 0 .75rem 1.1rem; padding: 0; }

/* Labelled fields. The toggles above are a settings *row*; these are a form,
   so they take the sign-in page's treatment rather than inventing a third. */
.settings-field { margin-bottom: 1.1rem; max-width: 420px; }
.settings-field label {
  display: block;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.settings-field input,
.settings-field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .55rem .75rem;
  border-radius: var(--radius);
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.settings-field input:focus,
.settings-field select:focus { border-color: var(--accent); }
.settings-hint {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  opacity: .8;
  line-height: 1.5;
  margin-top: .35rem;
  max-width: 60ch;
}

/* Read-only account facts. Two columns on anything wide enough for the labels
   to sit beside their values without either wrapping. */
.settings-facts {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: .45rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: .85rem;
}
.settings-facts dt { color: var(--text-muted); }
.settings-facts dd { margin: 0; color: var(--text); }

/* A credential form inside the Account section. The rule above it is what
   separates one from the next — they are different actions, not one form. */
.settings-subform {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}
.settings-subtitle { font-size: .92rem; font-weight: 600; color: var(--text); margin: 0 0 1rem; }
.settings-pending {
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
}
.settings-pending .settings-note { margin-bottom: .6rem; }

/* danger zone */
.admin-danger-section { border-color: rgba(224,84,84,.25); }
.admin-danger-row {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.admin-danger-row:last-child { border-bottom: none; padding-bottom: 0; }
.admin-danger-info { flex: 1; }
.admin-danger-info strong { display: block; font-size: .92rem; margin-bottom: .3rem; }
.admin-danger-info span  { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.admin-danger-info em    { display: block; font-size: .8rem; color: #f0b080; margin-top: .3rem; font-style: normal; }

.admin-reset-form { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.admin-confirm-input {
  width: 8rem; padding: .25rem .5rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-size: .82rem; line-height: 1.5;
}
.admin-confirm-input:focus { outline: none; border-color: #f08080; }

@media (max-width: 600px) {
  .admin-factor-range { width: 140px; }
  .admin-danger-row { flex-direction: column; gap: .75rem; }
  .admin-reset-form { flex-wrap: wrap; }
  .admin-charts-row { grid-template-columns: 1fr; }
}

.quip-avatar {
  height: 1.5em;
  width: auto;
  vertical-align: middle;
}
/* notifications */
.result-notifications { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.notif { padding: .45rem .75rem; border-radius: 5px; font-size: .86rem; font-weight: 500; line-height: 1.4; }
.notif--positive { background: rgba(72,187,120,.1); color: #6ee7a0; border-left: 3px solid #48bb78; }
.notif--negative { background: rgba(224,84,84,.1);  color: #f09090; border-left: 3px solid #e05454; }

/* sidebar tabs (matchup page) */
.matchup-sidebar { margin-top: 2rem; }
.sidebar-heading { font-size: 1rem; font-weight: 600; color: var(--text-muted); margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.sidebar-tabbar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.sidebar-tab {
  padding: .5rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.sidebar-tab:hover { color: var(--text); }
.sidebar-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.sidebar-panel { display: block; }
.sidebar-panel.is-hidden { display: none; }

/* ── Recent match-ups (site-wide, anonymous) ── */
.recent-matchups { margin-bottom: 1.75rem; }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.recent-row:last-child { border-bottom: none; }
/* Both sides share the row evenly rather than sizing to their titles, so the
   verb sits in the same place down the list instead of wandering with the
   length of whatever won. min-width:0 is what lets the titles ellipsis. */
.recent-movie {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  color: var(--text-muted);
}
.recent-movie:hover { text-decoration: none; }
.recent-movie:hover .recent-title { color: var(--accent); }
.recent-thumb {
  width: 24px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--bg3);
  flex-shrink: 0;
}
.recent-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-title.is-winner { color: var(--text); font-weight: 600; }
.recent-verb {
  flex-shrink: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  opacity: .7;
}
.recent-when {
  flex-shrink: 0;
  width: 4.25rem;
  text-align: right;
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .7;
}