/* =============================================================================
   Nova Sales Pros — shared design system.
   One file, imported by every page. Before this, each page carried its own copy
   of the palette and they had already drifted.

   WHY LIGHT, AND WHY THESE EXACT VALUES
   The old palette used #444 for every label — column headers, control labels,
   stat captions, nav links, footers — on a #080808 ground. That is 2.06:1.
   WCAG AA wants 4.5:1 for body text, so it failed by more than half, and it was
   the reason the site was hard to read. Borders were 1.31:1, which is why the
   layout read as a flat wall with no structure.

   Every colour below was measured, not eyeballed. Contrast against --bg is in
   the comment beside each one. Reps open this on a phone, outdoors, in daylight,
   which is the worst possible case for a dark UI — hence light.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- ground ---- */
  --bg:            #F7F6F3;   /* warm off-white; pure white glares outdoors */
  --surface:       #FFFFFF;
  --surface-2:     #F1EFE9;   /* hover / subtle fills */

  /* ---- lines. Decorative rules may sit under 3:1; anything that defines an
         interactive control must not, per WCAG 1.4.11. ---- */
  --line:          #E6E3DC;
  --line-strong:   #D4D0C6;
  --control-line:  #8B8679;   /* 3.36:1 — pill and input borders */

  /* ---- text. All pass AA against --bg. ---- */
  --text:          #17181A;   /* 16.44:1 */
  --text-mid:      #55595F;   /*  6.52:1 */
  --text-soft:     #676B73;   /*  4.95:1 — replaces the old 2.06:1 #444 */

  /* ---- brand ---- */
  --amber:         #A85200;   /*  5.02:1 — fills and accents; white on it is 5.42:1 */
  --amber-deep:    #8A4500;   /*  6.63:1 — amber used as text */
  --amber-tint:    #FBF1E3;
  --green:         #17703A;   /*  5.69:1 */
  --red:           #A81F18;   /*  6.76:1 */
  --teal:          #0E6E62;

  --radius:        10px;
  --radius-sm:     7px;
  --shadow:        0 1px 2px rgba(23,24,26,.05), 0 4px 14px rgba(23,24,26,.05);
  --maxw:          1440px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Condensed is kept ONLY for big display type and scoreboard numbers, where its
   character earns its keep. It was the wrong choice for 9px labels. */
.display { font-family: 'Barlow Condensed', Inter, sans-serif; font-weight: 800; letter-spacing: -.01em; }

/* Keyboard users could not see where they were on the old site at all. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 3px;
}
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--amber); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,246,243,.88);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line-strong);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; height: 60px;
  padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-weight: 800; font-size: 15px; letter-spacing: .1em; color: var(--amber-deep); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--text-mid); font-weight: 500; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-weight: 600; font-size: 14px; color: var(--text-mid); text-decoration: none;
  padding: 7px 12px; border-radius: var(--radius-sm); transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--amber-deep); background: var(--amber-tint); }

/* ------------------------------------------------------------- layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; width: 100%; }
main { flex: 1; }
.head { padding: 34px 0 0; }
.eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 10px; }
h1 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin-bottom: 8px; }
h1 .amber { color: var(--amber-deep); }
.sub { color: var(--text-soft); font-size: 14px; margin-bottom: 22px; }
.section { padding: 40px 0 0; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.section-head .note { color: var(--text-soft); font-size: 13px; }

/* ----------------------------------------------------------- controls ---- */
.ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ctrl-lab { font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); min-width: 62px; }
.pill {
  font: 600 13.5px Inter, sans-serif; padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--control-line); color: var(--text-mid);
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { background: var(--surface-2); color: var(--text); }
.pill.on { background: var(--amber); border-color: var(--amber); color: #fff; }
input[type="date"] {
  font: 500 13.5px Inter, sans-serif; padding: 6px 11px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--control-line); color: var(--text);
}

/* ------------------------------------------------------------ banner ---- */
.banner {
  background: var(--amber-tint); border: 1px solid #F0DCBE; border-left: 4px solid var(--amber);
  border-radius: var(--radius); padding: 14px 18px; margin: 18px 0 0;
  font-size: 13.5px; line-height: 1.6; color: var(--text-mid); max-width: 980px;
}
.banner strong { color: var(--amber-deep); font-weight: 700; }

/* ------------------------------------------------------------- tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 22px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow); }
.tile-lab { font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 5px; }
.tile-val { font-family: 'Barlow Condensed', Inter, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; }
.tile-val.amber { color: var(--amber-deep); }

/* ------------------------------------------------------------ tables ---- */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 720px; }
.tbl th {
  text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-soft); padding: 13px 16px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap; cursor: pointer; user-select: none; background: var(--surface);
}
.tbl th:hover { color: var(--amber-deep); }
.tbl th.sorted { color: var(--amber-deep); }
.tbl th.pend, .tbl th.pend:hover { color: #6E695E; cursor: default; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text-mid); font-size: 14.5px; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .who { color: var(--text); font-weight: 600; white-space: nowrap; }
.tbl .kw { color: var(--amber-deep); font-weight: 700; }
.tbl .dash { color: #6E695E; }   /* 4.75:1 on the tinted footer row, its worst ground — "no data" is information, not decoration */
.tbl tfoot td { border-top: 2px solid var(--line-strong); border-bottom: none; background: var(--surface-2); color: var(--text); font-weight: 700; }
.tag, .team-tag { font-weight: 600; font-size: 11px; letter-spacing: .04em; color: var(--text-soft); margin-left: 8px; text-transform: uppercase; }

.chip { display: inline-block; font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip-scored, .chip-live { background: #E4F2E8; color: var(--green); }
.chip-pending { background: var(--amber-tint); color: var(--amber-deep); }
.chip-excluded { background: #FBE9E7; color: var(--red); }

/* ------------------------------------------------------------- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow); transition: border-color .18s, transform .18s, box-shadow .18s;
}
a.card:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(23,24,26,.09); }
.card h3 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
.card h3 .amber { color: var(--amber-deep); }
.card p { color: var(--text-mid); font-size: 14px; line-height: 1.6; }
.card-status { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.card-status.live { color: var(--green); }
.card-status.final { color: var(--amber-deep); }
.go { font-weight: 700; font-size: 13.5px; color: var(--amber-deep); display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; }
.go .arr { transition: transform .2s; }
a.card:hover .go .arr { transform: translateX(4px); }

.btn { display: inline-block; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: var(--radius-sm); text-decoration: none; transition: opacity .15s, background .15s; }
.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover { background: var(--amber-deep); }
.btn-ghost { border: 1px solid var(--control-line); color: var(--text-mid); background: var(--surface); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 20px; color: var(--text-soft); font-size: 14px; }

/* ------------------------------------------------------------ footer ---- */
footer { margin-top: 56px; border-top: 1px solid var(--line-strong); background: var(--surface); }
.foot-in { max-width: var(--maxw); margin: 0 auto; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.foot-brand { font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--text-mid); }
.foot-brand span { color: var(--amber-deep); }
.foot-note { font-size: 12.5px; color: var(--text-soft); }
.foot-links { display: flex; gap: 18px; }
.foot-links a { font-size: 13px; color: var(--text-mid); text-decoration: none; font-weight: 500; }
.foot-links a:hover { color: var(--amber-deep); text-decoration: underline; }

.hide { display: none !important; }

@media (max-width: 700px) {
  .nav-in { padding: 0 16px; height: 56px; }
  .nav-links a { padding: 7px 9px; font-size: 13px; }
  .wrap { padding: 0 16px; }
  .head { padding-top: 24px; }
  .ctrl-lab { min-width: 100%; margin-bottom: 2px; }
  .tile-val { font-size: 26px; }
  .foot-in { padding: 22px 16px; }
}

/* ---------------------------------------------------- collapsible note ---- */
details.banner { padding: 0; }
details.banner > summary {
  list-style: none; cursor: pointer; padding: 12px 18px; font-weight: 600;
  color: var(--amber-deep); display: flex; align-items: center; gap: 9px;
}
details.banner > summary::-webkit-details-marker { display: none; }
details.banner > summary::after {
  content: '▾'; margin-left: auto; transition: transform .2s; font-size: 12px;
}
details.banner[open] > summary::after { transform: rotate(180deg); }
details.banner .body { padding: 0 18px 15px; }