/* Page shell for the public site (the private app's header / layout CSS
   isn't extracted into styles.css). */
/* One theme, built from four blocks of colour: navy #2D3C59, sage #97A47F,
   mustard #DEBB59, terracotta #C68862, on a cream page. Overrides the tokens
   in styles.css (kept as an untouched extract of the private app). The
   swatch colours are too pale for text on cream, so good / bad / warning
   text uses deepened shades (all ≥4.5:1); the swatches themselves are used
   as solid blocks with navy text on top. No dark mode. */
:root {
  --c-navy:      #2D3C59;
  --c-sage-base: #97A47F;
  --c-mustard:   #DEBB59;
  --c-terra:     #C68862;
  --c-cream:     #F3EDE0;

  --bg:            var(--c-cream);
  --bg-elev-1:     #FBF8F1;
  --bg-elev-2:     #EAE3D3;
  --border:        #D6CFBE;
  --border-soft:   #E3DCCB;
  --border-strong: var(--c-navy);
  --text:          var(--c-navy);
  --text-muted:    #5F6880;
  --text-strong:   #1C2640;

  --c-spring:    #5B6B42;   /* deep sage: good / up */
  --c-sage-deep: var(--c-spring);
  --c-poppy:     #A2582F;   /* deep terracotta: bad / down */
  --c-coral:     var(--c-poppy);
  --c-gold:      #9A7618;   /* deep mustard: warnings */
  --c-butter:    var(--c-mustard);
  --c-yellow:    var(--c-mustard);
  --c-pea:       var(--c-navy);
  --c-black:     var(--c-navy);
  --c-pink:      var(--c-terra);
  --c-lilac:     var(--bg-elev-1);

  --accent:    var(--c-navy);
  --accent-fg: var(--c-cream);
  --success:   var(--c-spring);
  --danger:    var(--c-poppy);
}

/* Reset the CSS extract misses: the private app sizes every box border-box
   (padding inside the width). Without it, width:100% inputs with padding
   spill out of their grid cells (the Advanced min / max boxes overlapped). */
*, *::before, *::after { box-sizing: border-box; }

/* Dropdowns: own arrow with room on the right instead of the native one
   pressed against the edge. data: URIs are allowed by the CSP (img-src). */
.screener-main select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232D3C59' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 6px;
}

/* No rubber-band bounce past the top / bottom of the page (a fast scroll
   back up would otherwise pull a strip of cream above the navy header). */
html, body { overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }

/* Navy hero: logo, headline, note. */
.site-hero { background: var(--c-navy); color: var(--c-cream); }
.site-hero-inner { max-width: 2500px; margin: 0 auto; padding: 28px 24px 30px; }
.site-logo {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--c-mustard);
  text-decoration: none;
}
.site-logo:hover { text-decoration: none; }
.site-hero .screener-subtitle {
  max-width: 60ch;
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-cream);
}
.site-hero .screener-subtitle span { display: block; }
.site-hero .screener-intro-note {
  max-width: 75ch;
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--c-cream) 72%, var(--c-navy));
}
/* Desktop: logo | headline | note side by side, packed to the left (each
   only as wide as its text), split by hairlines. */
@media (min-width: 1200px) {
  .site-hero-text { display: contents; }
  .site-hero-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .site-logo { flex: none; white-space: nowrap; }
  .site-hero .screener-subtitle,
  .site-hero .screener-intro-note {
    margin: 0;
    padding-left: 28px;
    border-left: 1px solid color-mix(in srgb, var(--c-cream) 20%, transparent);
  }
  /* Headline = two fixed lines, one per span; never wraps further. */
  .site-hero .screener-subtitle { flex: none; max-width: none; white-space: nowrap; }
  /* When space runs short, squeeze the note first so the headline keeps its width. */
  .site-hero .screener-intro-note { flex: 0 4 auto; max-width: 52ch; }
}
/* Thin stripe of all four colours under the hero. */
.site-stripe {
  height: 8px;
  background: linear-gradient(90deg,
    var(--c-sage-base) 0 33.3%, var(--c-mustard) 33.3% 66.6%, var(--c-terra) 66.6% 100%);
}

.screener-main { max-width: 2500px; margin: 0 auto; padding: 20px 24px 32px; }

/* Stat strip: one solid block per colour. */
.screener-stats { gap: 10px; border: none; }
.screener-stat { border-radius: 10px; color: var(--c-navy); }
.screener-stat + .screener-stat { border-left: none; }
.screener-stat:nth-child(1) { background: var(--c-sage-base); }
.screener-stat:nth-child(2) { background: var(--c-mustard); }
.screener-stat:nth-child(3) { background: var(--c-terra); }
.screener-stat-value,
.screener-stat-value.is-up,
.screener-stat-value.is-down { color: var(--c-navy); }
.screener-stat-label { color: color-mix(in srgb, var(--c-navy) 80%, transparent); }

/* Universe button + view tabs: navy when active. */
.screener-universe-btn { background: var(--c-navy); color: var(--c-cream); border-color: var(--c-navy); }
.screener-universe-btn:hover { border-color: var(--c-navy); background: #3A4B6E; }
.screener-universe-btn .screener-universe-count { color: var(--c-mustard); }
.screener-view-tab.is-active { background: var(--c-navy); color: var(--c-cream); border-color: var(--c-navy); }

/* Filter bar: sage block, selected options in navy. */
.screener-quick { background: color-mix(in srgb, var(--c-sage-base) 35%, var(--bg-elev-1)); border-color: transparent; }
.screener-seg,
.screener-dd { border-color: color-mix(in srgb, var(--c-navy) 15%, transparent); }
.screener-seg-btn:hover { background: color-mix(in srgb, var(--c-sage-base) 30%, transparent); }
.screener-seg-btn.is-active { background: color-mix(in srgb, var(--c-sage-base) 45%, transparent); }
.screener-seg-opt.is-active { background: var(--c-navy); color: var(--c-cream); border-color: var(--c-navy); }
.screener-adv-btn {
  margin: 4px 4px 4px auto;
  border-radius: 6px;
  background: var(--c-mustard);
  color: var(--c-navy);
}
.screener-adv-btn:hover { background: #E6C871; }

/* Table: navy header row, score + gap columns on mustard / sage tints. */
.screener-table-wrap { border: 1px solid var(--border); }
.screener-table thead th,
.screener-table thead th[data-sort="score"],
.screener-table thead th.screener-key-col {
  background: var(--c-navy);
  color: color-mix(in srgb, var(--c-cream) 75%, var(--c-navy));
  border-bottom: none;
}
.screener-table thead th.is-sorted,
.screener-table thead th:hover,
.screener-table thead .screener-key-col { color: var(--c-cream); }
.screener-table .screener-key-start,
.screener-table .screener-key-end { border-color: var(--c-navy); }
.screener-table tbody .screener-td-score { background: color-mix(in srgb, var(--c-mustard) 22%, transparent); }
.screener-table tbody .screener-key-col:not(.screener-td-score) { background: color-mix(in srgb, var(--c-sage-base) 18%, transparent); }
.screener-table thead .screener-help { color: var(--c-cream); border-color: currentColor; }
.screener-gap.is-up .screener-gap-bar span { background: var(--c-spring); }
.screener-gap-bar { background: color-mix(in srgb, var(--c-navy) 12%, transparent); }

/* Theme tags: terracotta tint instead of an outline. */
.screener-tag {
  background: color-mix(in srgb, var(--c-terra) 22%, transparent);
  border-color: transparent;
  color: var(--c-navy);
}

/* Narrower text columns: names and theme tags wrap rather than run wide,
   and the country code column gets tighter padding. */
.screener-td-name { max-width: 140px; white-space: normal; line-height: 1.3; }
/* Theme: one pill on one line, cut with "…" (all tags on hover), "+N" beside it. */
.screener-td-label { white-space: nowrap; }
.screener-td-label .screener-tag { max-width: 150px; white-space: nowrap; }
.screener-td-label[data-tags] { cursor: default; }
.screener-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.screener-tag-list .screener-tag { max-width: 100%; white-space: normal; }
/* Slightly tighter rows. */
.screener-td { padding-top: 6px; padding-bottom: 6px; }
.screener-table thead th[data-sort="country"],
.screener-td-country { padding-left: 10px; padding-right: 6px; }

/* Rows don't link anywhere on the public site. */
.screener-tr { cursor: default; }

.site-footer {
  background: var(--c-navy);
  color: color-mix(in srgb, var(--c-cream) 75%, var(--c-navy));
  font-size: 12.5px;
}
.site-footer-inner { max-width: 2500px; margin: 0 auto; padding: 18px 24px; }

@media (max-width: 700px) {
  .site-hero-inner, .screener-main, .site-footer-inner { padding-left: 16px; padding-right: 16px; }
  .screener-stats { gap: 6px; }
  .screener-adv-btn { margin: 4px; width: calc(100% - 8px); border-bottom: none; }
}