/* slateaddict.com -- the public app.
   Loaded after tokens.css, so it may rely on the variables and primitives
   defined there. Nothing in this file is served on the admin host.

   DIRECTION: bold sportsbook. Dark, high contrast, team colour on every
   card, big numbers, live scores moving at the top. The one thing that
   separates this from an actual sportsbook is that the evidence is always
   present: a losing pick is displayed exactly as loudly as a winning one,
   and the track record is one tap away from every screen. */

/* --- dark palette override -------------------------------------------------
   tokens.css ships a light scale (the Finder and this app share it). The
   consumer app runs dark, so it re-declares the same variable names rather
   than restyling every component individually. */
:root {
  --bg: #08090c;
  --bg-2: #11141b;
  --panel: #12151d;
  --panel-2: #191d27;
  --border: #232834;
  --border-strong: #313848;
  --text: #f2f4f8;
  --text-2: #99a1b3;
  --text-3: #667089;
  --accent: #21e07a;
  --accent-soft: rgba(33, 224, 122, 0.12);
  --green: #21e07a;
  --green-bg: rgba(33, 224, 122, 0.12);
  --red: #ff5566;
  --red-bg: rgba(255, 85, 102, 0.12);
  --amber: #ffb43d;
  --amber-bg: rgba(255, 180, 61, 0.12);
  --card-radius: 14px;
  --shadow: 0 2px 4px rgba(0,0,0,0.4);
}

body {
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(33, 224, 122, 0.07), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

.topbar {
  background: rgba(8, 9, 12, 0.9);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.brand-mark { width: 26px; height: 26px; flex: 0 0 auto; }
.mark-bg { fill: #12151d; }
.mark-line { stroke: var(--accent); }
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  letter-spacing: -0.02em;
}
.brand-accent { color: var(--accent); }

.tab { color: var(--text-3); }
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--text); background: var(--panel-2); }
.btn.ghost { color: var(--text-2); border-color: var(--border-strong); background: transparent; }
.btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #04180c; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
input, select, textarea { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.empty-state { background: var(--panel); border-color: var(--border); }
.auth-card { background: var(--panel); border-color: var(--border-strong); }

/* Header record chip: the claim, on every screen. */
.record-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel);
}
.record-chip .chip-wl { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.record-chip .chip-rate { color: var(--accent); font-weight: 700; font-size: 12px; }

/* --- hero ------------------------------------------------------------------ */
.hero {
  display: flex; gap: 32px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 36px 34px; margin-bottom: 28px;
  border-radius: 18px;
  background:
    radial-gradient(600px 220px at 88% 20%, rgba(33, 224, 122, 0.14), transparent 70%),
    linear-gradient(135deg, #12151d 0%, #1a2030 100%);
  border: 1px solid var(--border-strong);
}
.hero-left { flex: 1 1 400px; }
.hero-title {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 12px;
}
.hero-sub { color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 50ch; }
.hero-right {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 22px 26px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-strong);
}
.hero-wl {
  font-family: var(--font-display); font-weight: 800; font-size: 52px;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.hero-dash { opacity: 0.35; margin: 0 3px; }
.hero-push { opacity: 0.45; font-size: 32px; }
.hero-meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; max-width: 32ch; }
.hero-rate { font-size: 22px; font-weight: 800; color: var(--accent); }
.hero-rate-lbl { font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* --- live score strip ------------------------------------------------------ */
.strip-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.strip-title {
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.strip-note { font-size: 11.5px; color: var(--text-3); }

.live-strip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 30px;
  scrollbar-width: thin;
}
.ls-tile {
  flex: 0 0 auto; min-width: 104px;
  padding: 10px 13px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
}
.ls-tile.is-live { border-color: rgba(33, 224, 122, 0.4); }
.ls-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent);
}
.ls-final, .ls-time {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ls-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ls-abbr { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.ls-score { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- board ----------------------------------------------------------------- */
.board-date { margin-bottom: 24px; }
.board-date .section-title {
  font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em;
}
.board-date .section-sub {
  display: block; margin-top: 6px; color: var(--text-2);
  font-size: 13.5px; max-width: 72ch; line-height: 1.6;
}

.board-section { margin-bottom: 36px; }
.board-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.board-head .board-title {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em; margin: 0;
}
.board-blurb { color: var(--text-3); font-size: 12.5px; }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.pick-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 16px 18px 18px; box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
/* Team colour as a left rule: makes a card recognisable before it is read. */
.pick-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--team-color, var(--accent));
}
.pick-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
/* A graded card states its outcome in its own edge. Losses are marked as
   plainly as wins, on purpose. */
.pick-card.is-win { border-color: rgba(33, 224, 122, 0.35); }
.pick-card.is-win::before { background: var(--green); }
.pick-card.is-loss::before { background: var(--red); }

.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pc-kind {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.pc-badges { display: flex; align-items: center; gap: 6px; }

.pc-body { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.pc-face { flex: 0 0 auto; }
.pc-face-team { display: inline-flex; width: 46px; justify-content: center; }
.pc-text { min-width: 0; }
.pc-headline {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 3px;
}
.pc-sub { font-size: 12px; color: var(--text-3); letter-spacing: 0.02em; }

.pc-lead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 15px; margin-bottom: 12px; border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-2), rgba(25, 29, 39, 0.4));
  border: 1px solid var(--border);
}
.pc-lead-num {
  font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.pc-lead-lbl { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.pc-lead-sub { flex: 1 1 100%; font-size: 11.5px; color: var(--text-3); }
.pc-detail { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

/* --- the free tier's featured pick ------------------------------------- */
/* The one real card on a free reader's board. Marked so it reads as a gift
   rather than as the leftover the paid cards were cut from. */
.pick-card.is-featured { border-color: rgba(33, 224, 122, 0.4); }
.pick-card.is-featured::before { background: var(--accent); width: 4px; }
.pc-featured-flag {
  display: inline-block; margin-bottom: 10px; padding: 3px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bg); background: var(--accent);
}

/* --- locked cards ------------------------------------------------------ */
/* There is no pick in this card's markup to hide -- the server never sent
   one. These rules only draw the shape of what is missing, so the redaction
   bars are decoration, not a security boundary. */
.pick-card.is-locked { background: var(--panel); border-style: dashed; }
.pick-card.is-locked::before { background: var(--border-strong); }
.pick-card.is-locked:hover { transform: none; border-color: var(--border-strong); }
.pc-face-locked {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-3);
}
.pc-headline-locked { font-size: 15px; color: var(--text-2); }
.pc-lead-locked { display: block; background: var(--bg-2); border-style: dashed; }
.pc-detail-locked { display: flex; flex-direction: column; gap: 6px; }
.pc-redact {
  display: block; height: 10px; border-radius: 3px; background: var(--border);
  width: 100%; opacity: 0.55;
}
.pc-redact-lg { height: 26px; width: 45%; margin-bottom: 8px; opacity: 0.4; }
.pc-redact-sm { width: 62%; }

/* The hoisted free pick sits alone and full-width-capped, so it reads as
   the headline of the page rather than one tile in a grid. */
.featured-section { margin-bottom: 18px; }
.pick-grid-single { grid-template-columns: minmax(0, 520px); }

/* --- upsell ------------------------------------------------------------ */
.upsell {
  position: relative; overflow: hidden; margin: 4px 0 22px;
  padding: 20px 22px; border-radius: var(--card-radius);
  background: linear-gradient(135deg, rgba(33, 224, 122, 0.09), rgba(33, 224, 122, 0.02));
  border: 1px solid rgba(33, 224, 122, 0.28);
}
.upsell-title {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: -0.02em; margin-bottom: 7px;
}
.upsell-copy { font-size: 13px; color: var(--text-2); line-height: 1.65; max-width: 62ch; }
.upsell-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

.res-chip {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid transparent;
}
.res-chip.win { color: var(--green); background: var(--green-bg); border-color: rgba(33,224,122,0.32); }
.res-chip.loss { color: var(--red); background: var(--red-bg); border-color: rgba(255,85,102,0.32); }
.res-chip.push { color: var(--amber); background: var(--amber-bg); border-color: rgba(255,180,61,0.32); }
.res-chip.pending { color: var(--text-3); background: var(--bg-2); border-color: var(--border); }

/* --- track record ---------------------------------------------------------- */
.rec-overall {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 28px 30px; margin-bottom: 22px;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, #12151d 0%, #1a2030 100%);
  border: 1px solid var(--border-strong);
}
.rec-overall-wl {
  font-family: var(--font-display); font-weight: 800; font-size: 54px; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.rec-overall-meta { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); }

.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.rec-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.rec-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rec-card-name { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; }
.rec-card-wl { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rec-card-rate { font-size: 13px; margin-top: 4px; margin-bottom: 14px; }
.rec-grade-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rec-grade-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border);
}
.rec-grade-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--bg-2); }
.rec-card-note { font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
.rec-disclaimer {
  margin-top: 22px; padding: 16px 18px; font-size: 12.5px; line-height: 1.65; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; max-width: 84ch;
}

/* --- how it works ---------------------------------------------------------- */
.how-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.how-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 20px 22px;
}
.how-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; margin-bottom: 9px; }
.how-card p { font-size: 13px; line-height: 1.65; color: var(--text-2); }
.how-card strong { color: var(--text); font-weight: 700; }
.how-caveat {
  margin-top: 18px; padding: 22px 24px; border-radius: var(--card-radius);
  background: var(--bg-2); border: 1px solid var(--border); max-width: 90ch;
}
.how-caveat h3 { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; margin-bottom: 9px; }
.how-caveat p { font-size: 13px; line-height: 1.7; color: var(--text-2); }

.auth-skip {
  display: block; width: 100%; margin-top: 12px; padding: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; color: var(--text-3); text-decoration: underline;
}
.auth-skip:hover { color: var(--text-2); }

/* Player media. Faces are a big part of why a pick card reads as a real
   product rather than a spreadsheet row, so they get real size here. */
.headshot, .headshot-fallback {
  border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  background: var(--bg-2); border: 2px solid var(--border-strong);
}
.headshot-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--text-3);
}
.team-logo, .logo-fallback { flex: 0 0 auto; object-fit: contain; }
.team-logo { filter: brightness(1.12); }
.logo-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 800; color: var(--text-3);
}
.logo-fallback.is-silent { border: 1px dashed var(--border); border-radius: 4px; opacity: 0.45; }

@media (max-width: 640px) {
  .hero { padding: 24px 20px; }
  .hero-title { font-size: 26px; }
  .hero-wl { font-size: 42px; }
  .rec-overall-wl { font-size: 42px; }
  .pick-grid, .rec-grid, .how-grid { grid-template-columns: 1fr; }
}

/* --- research table ----------------------------------------------------- */
/* A dense ranked list rather than cards: this surface is for reading down a
   board and comparing, which cards actively work against. */
.rs-table { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.rs-row {
  display: grid; grid-template-columns: 30px 34px 1fr auto auto;
  align-items: center; gap: 12px; padding: 11px 14px; background: var(--panel);
}
.rs-row:hover { background: var(--bg-2); }
.rs-rank { font-size: 12px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.rs-face { display: inline-flex; }
.rs-main { min-width: 0; }
.rs-name { font-weight: 700; font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
.rs-team { font-size: 10.5px; color: var(--text-3); font-weight: 600; letter-spacing: 0.06em; }
.rs-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rs-chip {
  font-size: 10.5px; color: var(--text-3); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.rs-lead { font-weight: 800; font-size: 16px; color: var(--accent); font-variant-numeric: tabular-nums; }
.rs-grade { display: flex; align-items: center; gap: 7px; }
.rs-score { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .rs-row { grid-template-columns: 22px 30px 1fr auto; gap: 9px; padding: 10px; }
  .rs-lead { display: none; }
  .rs-reasons { display: none; }
}

/* --- chat --------------------------------------------------------------- */
.chat-wrap {
  border: 1px solid var(--border); border-radius: var(--card-radius);
  background: var(--panel); overflow: hidden;
}
.chat-feed {
  height: min(58vh, 520px); overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  /* Anchor to the bottom: a room with four messages should look like a
     conversation that just started, not four messages stranded above a
     wall of empty space. */
  justify-content: flex-end;
}
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg.is-mine { flex-direction: row-reverse; }
.chat-msg.is-mine .chat-body { align-items: flex-end; }
.chat-msg.is-mine .chat-text { background: var(--accent); color: var(--bg); border-color: transparent; }
.chat-msg.is-mine .chat-meta { flex-direction: row-reverse; }
.chat-avatar { flex: 0 0 auto; line-height: 0; }
.chat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 76%; }
.chat-meta { display: flex; gap: 8px; align-items: baseline; }
.chat-user { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.chat-time { font-size: 10.5px; color: var(--text-3); }
.chat-text {
  font-size: 13.5px; line-height: 1.5; padding: 8px 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border); word-break: break-word;
}
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input {
  flex: 1; min-width: 0; padding: 10px 13px; border-radius: 9px; font: inherit; font-size: 13.5px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-signin {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2);
}
.chat-error { padding: 9px 14px; font-size: 12px; color: var(--red); border-top: 1px solid var(--border); }