/* not4quarters — brand layer.
   Palette is coro's football system (green / cream / amber), which is the look
   Kevin wants for football, with our own tier names and vocabulary on top.
   Fonts are self-hosted, not pulled from Google — same rule as the crests. */

@import url('/fonts/barlow.css');

:root {
  --green: #0B5E3F;
  --green2: #083E2A;
  --amber: #E8A33D;
  --cream: #FAF6F0;
  --border: #E8E2D5;
  --ink: #1A1A1A;
  --muted: #5C6B64;
  --paper: #FFFFFF;
  --gold: #C9A227;
  --live: #C4342B;

  --sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow SemiCondensed', var(--sans);
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; }

/* No page scrollbar. A busy date overflows the viewport and a quiet one does
   not, so the scrollbar appearing and disappearing was shifting the whole
   centred layout sideways as you stepped through the dates. Hiding it keeps the
   width constant without reserving a visible gutter. Scrolling still works, and
   the date strip keeps its own horizontal bar. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }


body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 18px 16px 70px; }

/* ── wordmark + header ────────────────────────────────────────────────── */
.wordmark {
  font-family: var(--cond);
  font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  display: inline-flex; align-items: baseline; line-height: 1;
  color: var(--green);
}
.wordmark .n4q-4 { color: var(--amber); }

header.site { background: var(--green); color: #fff; }
header.site .bar { display: flex; align-items: center; gap: 20px; height: 58px; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
header.site .wordmark { font-size: 26px; color: #fff; }
header.site nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
header.site nav a {
  color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
header.site nav a:hover, header.site nav a[aria-current='page'] { color: #fff; }
header.site nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--amber); }

/* Account chip: name on top, plan beneath — the plan is context for who you are,
   not another nav item competing with Scores and Plans. */
header.site nav a.acct {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  line-height: 1.1; text-transform: none; letter-spacing: 0;
}
header.site nav a.acct .acct-name { font-size: 13px; font-weight: 700; color: #fff; }
header.site nav a.acct .acct-plan {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--amber);
}

/* ── type ─────────────────────────────────────────────────────────────── */
h1 { font-family: var(--cond); font-size: clamp(34px, 6vw, 60px); line-height: 1.02; font-weight: 700; margin-bottom: 14px; }
h2 { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
h3 { font-family: var(--cond); font-size: 22px; font-weight: 700; margin-bottom: 6px; }
p { margin-bottom: 14px; color: #33403A; }
.lede { font-size: 19px; max-width: 62ch; }
.kick { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--green); text-transform: uppercase; }
.amber { color: var(--amber); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }
section { padding: 34px 0; }
section + section { border-top: 1px solid var(--border); }

/* ── cards ────────────────────────────────────────────────────────────── */
.card, .panel {
  background: var(--paper); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.04); padding: 18px; margin-bottom: 16px;
}
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ── buttons / chips ──────────────────────────────────────────────────── */
.btn {
  background: var(--green); color: #fff; border: 1px solid var(--green);
  border-radius: 9px; padding: 9px 16px; font: inherit; font-size: 13px;
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
}
.btn:hover { background: var(--green2); }
.btn:disabled { background: #E9EDEA; color: var(--muted); border-color: var(--border); cursor: default; }
a.btn, a.cta { text-decoration: none; display: inline-block; }
.btn.ghost { background: transparent; color: var(--green); }
.btn.ghost:hover { background: rgba(11, 94, 63, 0.06); }
.btn.small { padding: 6px 11px; font-size: 12px; }

.tab, .chip {
  border: 1px solid var(--border); background: var(--paper); color: var(--muted);
  border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 12px;
  font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer;
}
.tab:hover, .chip:hover { color: var(--ink); }
.tab[aria-pressed='true'], .chip[aria-pressed='true'] { background: var(--green); color: #fff; border-color: var(--green); }
.tabs, .chips { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: #F2EFE8; color: var(--muted);
  border: 1px solid var(--border); white-space: nowrap;
}
.tag.amber { background: rgba(232, 163, 61, 0.16); color: #8A5D14; border-color: rgba(232, 163, 61, 0.5); }
.tag.pending { background: transparent; color: #8A5D14; border-color: rgba(232, 163, 61, 0.5); }

/* ── competition cards ────────────────────────────────────────────────── */
.league-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.league-card:hover { border-color: var(--green); transform: translateY(-1px); }
.league-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.league-card h3 { margin: 0; }
.league-card .country { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; }

/* ── contest rows ─────────────────────────────────────────────────────── */
.contest {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--paper); margin-bottom: 8px;
}
.contest.live { border-color: rgba(196, 52, 43, 0.4); }
.contest .side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.contest .side.away { justify-content: flex-end; text-align: right; }
.contest .team {
  font-family: var(--cond); font-size: 19px; font-weight: 600; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px;
}
.contest .score { font-family: var(--cond); font-size: 24px; font-weight: 700; min-width: 78px; text-align: center; }
.contest .score .sep { color: var(--muted); padding: 0 5px; font-weight: 400; }
.contest.pre .score { font-size: 15px; color: var(--muted); }
.contest-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.crest { width: 24px; height: 24px; object-fit: contain; flex: none; }

.status { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.status.live { color: var(--live); }
.status.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── ticker ───────────────────────────────────────────────────────────── */
.ticker {
  border: 1px solid var(--border); border-radius: 11px; background: var(--paper);
  padding: 10px 14px; display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; color: var(--green);
  overflow: hidden; white-space: nowrap;
}
.ticker .label { font-family: var(--sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--border); padding-right: 12px; flex: none; font-weight: 800; }
.ticker .body { overflow: hidden; text-overflow: ellipsis; }

/* ── tables ───────────────────────────────────────────────────────────── */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 8px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: right; }
table.tbl th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 800; }
table.tbl th.l, table.tbl td.l { text-align: left; }
table.tbl td.l { font-family: var(--cond); font-size: 16px; font-weight: 600; text-transform: uppercase; }
table.tbl td.pts { font-weight: 800; }
table.tbl td.pos { color: var(--muted); font-family: var(--mono); font-size: 12px; width: 28px; }
.scroller { overflow-x: auto; }

/* ── pricing tiers ────────────────────────────────────────────────────── */
.tier { display: flex; flex-direction: column; gap: 12px; }
.tier .price { font-family: var(--cond); font-size: 42px; font-weight: 700; line-height: 1; }
.tier .price small { font-family: var(--sans); font-size: 14px; color: var(--muted); font-weight: 400; }
.tier ul { margin: 0; padding-left: 18px; font-size: 15px; }
.tier ul li { margin-bottom: 5px; }
.tier.feature { border-color: var(--green); box-shadow: 0 0 0 2px rgba(11, 94, 63, 0.1); }
.tier .cta {
  margin-top: auto; display: block; width: 100%; text-align: center; text-decoration: none;
  border: 1px solid var(--green); color: var(--green); background: transparent;
  border-radius: 9px; padding: 11px; font: inherit; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; font-size: 13px; cursor: pointer;
}
.tier .cta:hover { background: rgba(11, 94, 63, 0.06); }
.tier.feature .cta { background: var(--green); color: #fff; }
.tier.feature .cta:hover { background: var(--green2); }

/* ── the creed chips ──────────────────────────────────────────────────── */
.creed { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; }
.creed li {
  border: 1px solid var(--border); background: var(--paper); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
}
.creed li.yes { border-color: var(--green); color: var(--green); }

/* ── tags / boards ────────────────────────────────────────────────────── */
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tagchip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--green); color: var(--green); background: rgba(11, 94, 63, 0.05);
  border-radius: 999px; padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 700;
}
.tagx { background: none; border: 0; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 3px; opacity: 0.6; }
.tagx:hover { opacity: 1; }
.tagform { display: flex; gap: 8px; margin-bottom: 6px; }
.tagform input {
  flex: 1; min-width: 0; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font: inherit;
}
.tagform input:focus { outline: none; border-color: var(--green); }

/* ── prediction inputs (inline, auto-save — no button) ────────────────── */
.pick { display: inline-flex; align-items: center; gap: 5px; }
.pick input {
  width: 34px; height: 34px; text-align: center; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; font-family: var(--cond);
  font-size: 19px; font-weight: 700; -moz-appearance: textfield;
}
.pick input::-webkit-outer-spin-button, .pick input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pick input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(11, 94, 63, 0.12); }
.pick .sdash { color: var(--muted); }
.pick.saved input { border-color: var(--green); }
.pickchip {
  font-family: var(--cond); font-size: 16px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; background: #F7F5F0;
}
.pickchip.hit { border-color: var(--green); color: var(--green); background: rgba(11, 94, 63, 0.07); }
.pts-badge {
  display: inline-block; background: var(--green); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 800; margin-left: 6px;
}

/* ── modal ────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(26, 26, 26, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.modal-head h3 { margin: 0; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal-sub { margin: 18px 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 800; }
.modal code { font-family: var(--mono); font-size: 0.92em; color: var(--green); background: #F2EFE8; border-radius: 4px; padding: 1px 5px; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--border); padding: 24px 0 40px; color: var(--muted); font-size: 13px; background: #F5F1EA; }
footer.site .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
footer.site .row .spacer { margin-left: auto; }

@media (max-width: 640px) {
  .contest { gap: 8px; padding: 10px; }
  .contest .team { font-size: 16px; }
  .contest .score { min-width: 60px; font-size: 20px; }
  header.site nav { gap: 13px; }
  header.site nav a { font-size: 11px; }
}