/* ════════════════════════════════════════════════════════════════════
   CLUSTARS — shared design system.
   Tokens, base layout, global nav, header pattern, the Movie Score feed
   components (scorefeed.js), and the footer. Page-specific styles stay
   in each page's own <style> block, loaded AFTER this file so they win.
   ════════════════════════════════════════════════════════════════════ */

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d0d; --surface: #161616; --border: #2a2a2a;
  --accent: #e8c84a; --text: #f0ede6; --muted: #aaa; --soft: #c9c4ba;
  /* verdict / score-band colours */
  --landmark: #c9a84c; --hidden: #06d6a0; --overrated: #f72585; --skip: #9aabbf;
  /* semantic states */
  --seen: #a78bfa; --watch: #ffd166; --link: #6ea8fe;
  /* form-control boundary: inputs/selects/checkboxes need >=3:1 against their surroundings
     (WCAG 1.4.11) — buttons with visible text labels can keep the quieter --border. */
  --ctrl-border: #666;
}

body {
  background: var(--bg); color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; padding: 40px 20px 80px;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: 0.4;
}
.wrapper { position: relative; z-index: 1; width: 100%; max-width: 680px; }

/* ── global nav ── */
/* pinned to the standard column width and centered, so it sits in exactly the
   same spot on every page — even ones that widen .wrapper (e.g. connections) */
.topbar { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; width: 100%; max-width: 680px; margin: 0 auto 26px; min-height: 24px; }
.brand { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 0.08em; color: var(--text); text-decoration: none; white-space: nowrap; line-height: 1; transition: color 0.15s; }
.brand:hover { color: var(--accent); }
/* gap/font sized so all EIGHT links + brand + avatar fit the 680px column on one
   row (the ~674px figure predates the shorter CLUSTARS wordmark, so there's now
   a little more headroom) — new destinations still go in the account menu. */
.topnav { display: flex; gap: 9px; flex-wrap: wrap; flex: 1; }
.topnav a { font-size: 12.5px; color: var(--muted); text-decoration: none; letter-spacing: 0.03em; transition: color 0.15s; white-space: nowrap; }
.topnav a:hover { color: var(--accent); }
.topnav a.current { color: var(--accent); }
.topbar #account-slot { margin-left: auto; }
/* narrow viewports: brand + account share the first row, the nav gets its own
   row as a DETERMINISTIC 4×2 grid — two balanced rows of four on every device,
   never a lopsided flow-wrap (a 412px phone used to break 6+2). 720px = the
   point where all eight links stop fitting beside the brand (680 column minus
   the body's 20px side padding). Row pitch ≈28px keeps WCAG 2.5.8's spacing
   exception satisfied. */
@media (max-width: 720px) {
  .topnav {
    flex-basis: 100%; order: 3;
    display: grid; grid-template-columns: repeat(4, max-content);
    justify-content: start; column-gap: 22px; row-gap: 11px;
  }
  .topnav a { font-size: 14px; }
}
/* the fixed-gap grid needs ~314px; tighten a notch for 320px-class screens */
@media (max-width: 360px) {
  .topnav { column-gap: 12px; }
  .topnav a { font-size: 13px; }
}

/* ── skip link (first focusable element on every page) ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: #000; padding: 10px 16px;
  font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* ── page header pattern ── */
header { margin-bottom: 14px; }
/* Section headings are semantic-only: h2/h3 carry no styling of their own, so the visual
   classes (.section-title, .dash-title, …) work identically on divs and real headings. */
h2, h3 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
/* Standard page-heading size for all pages except the homepage (which is bigger). */
h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 7vw, 56px); line-height: 0.92; letter-spacing: 0.02em; }
h1 span { color: var(--accent); }
.subtitle { margin-top: 12px; font-size: 14px; color: var(--soft); font-weight: 300; max-width: 520px; line-height: 1.6; }
.subtitle a { color: var(--accent); text-decoration: none; }
.subtitle a:hover { text-decoration: underline; }
.subtitle b { color: var(--text); font-weight: 500; }

/* ── shared search field ──
   One look for every search box: .ft-search-wrap > .ft-search (+ optional .ft-search-clear ✕,
   shown/hidden via the `hidden` attribute). Add .sm to the input for list-toolbar contexts. */
.ft-search-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 140px; }
.ft-search {
  width: 100%; box-sizing: border-box; background: #141414; border: 1px solid var(--ctrl-border);
  color: var(--text); border-radius: 4px; padding: 9px 30px 9px 12px; font-size: 14px; font-family: inherit;
}
.ft-search:focus { outline: none; border-color: var(--accent); }
.ft-search::placeholder { color: var(--muted); }
.ft-search::-webkit-search-cancel-button { display: none; }   /* we draw our own ✕ */
.ft-search.sm { padding: 6px 26px 6px 10px; font-size: 13px; }
.ft-search-clear {
  position: absolute; right: 4px; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 7px 9px; transition: color 0.12s;
}
.ft-search-clear:hover { color: var(--text); }

/* ── shared search-results dropdown (person/jump searches) ── */
.ft-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  background: #161616; border: 1px solid var(--border); border-radius: 4px;
  max-height: 260px; overflow-y: auto; display: none;
}
.ft-results.open { display: block; }
.ft-results div { padding: 8px 10px; font-size: 14px; cursor: pointer; color: var(--text); }
.ft-results div:hover, .ft-results div.sel { background: #242424; color: var(--accent); }

/* ── shared sort chips (click to pick a key; click the active chip to flip direction) ── */
.sort-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-chip {
  font-family: inherit; font-size: 11px; letter-spacing: 0.03em; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 9px; cursor: pointer; white-space: nowrap; transition: border-color 0.12s, color 0.12s;
}
.sort-chip:hover { border-color: var(--accent); color: var(--text); }
.sort-chip.active { border-color: var(--accent); color: var(--accent); }

/* ── shared checkbox toggle (score.html feed toggles, watchlist "Only my services") ── */
.toggle-seen { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle-seen input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ── Movie Score badge (shared visual language with the tracker) ── */
.ms-badge { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 11px; border: 1px solid var(--border); white-space: nowrap; }
.ms-badge .ms-num { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.ms-badge.ms-empty { color: var(--muted); border-color: var(--border); }
.radar-svg { display: block; }

/* ── Movie Score feed rows (engine in scorefeed.js) ── */
.score-row {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 13px 15px; margin-bottom: 8px;
}
.score-radar { flex: none; width: 74px; height: 74px; }
.score-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.score-title { font-size: 16px; color: var(--text); line-height: 1.2; }
.score-title .yr { color: var(--muted); font-size: 13px; font-weight: 300; }
.score-title a { color: var(--link); text-decoration: none; }
.score-title a:hover { text-decoration: underline; color: #9fc1ff; }
a.imdb-mini { color: #f5c518; font-size: 11px; font-weight: 700; text-decoration: none; opacity: 0.7; margin-left: 6px; white-space: nowrap; }
a.imdb-mini:hover { opacity: 1; color: #f5c518; text-decoration: none; }
.score-cast { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cast-more { background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.cast-more:hover { text-decoration: underline; }
.cast-chip { color: var(--text); }
.cast-chip.love { color: var(--landmark); }
.cast-chip.hate { color: var(--overrated); }
.cast-chip.focus-chip { font-weight: 600; }   /* the focused person leads the row (neutral colour when unrated) */
.imdb-name { color: inherit; text-decoration: none; }
.imdb-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.score-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.row-btns { display: flex; gap: 6px; }
.row-btn {
  background: #141414; border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 6px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.row-btn:hover { border-color: var(--accent); color: var(--accent); }
.row-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(232,200,74,0.08); }
.row-btn.imdb { text-decoration: none; }
.row-ni { color: #7d8694; }
.row-ni:hover { border-color: #f7587e; color: #f7587e; }

.empty { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 22px; font-size: 14px; color: var(--soft); line-height: 1.7; }
.empty a { color: var(--accent); text-decoration: none; }
.empty a:hover { text-decoration: underline; }
.show-more {
  display: block; width: 100%; margin-top: 6px; padding: 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  color: var(--accent); font-family: 'DM Sans', sans-serif; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.show-more:hover { border-color: var(--accent); }

/* Phones: the badge + action buttons column starves the cast names of width,
   so drop it to a full-width row under the title instead. */
@media (max-width: 560px) {
  .score-row { flex-wrap: wrap; }
  .score-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .row-btns { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 380px) {
  .score-radar { width: 60px; height: 60px; }
}

/* ── footer ── */
footer { margin-top: 48px; font-size: 12px; color: #9a9a9a; letter-spacing: 0.05em; line-height: 1.9; }
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }