/* =========================================================================
   TopBetting — Design System v1
   The shared visual language for the whole platform. Mobile-first.
   Pure presentation; consumes the locked engine's output. Loaded sitewide.
   operator.css (the single-operator page) builds on these tokens.
   ========================================================================= */

:root{
  /* surfaces / ink */
  --tb-bg:#f6f8fa;
  --tb-surface:#ffffff;
  --tb-ink:#16202b;
  --tb-ink-soft:#5b6b7b;
  --tb-ink-faint:#93a1ae;
  --tb-line:#e6ebf0;

  /* trust brand */
  --tb-brand:#0a7d4d;
  --tb-brand-ink:#075a37;
  --tb-brand-tint:#eef6f1;

  /* verification / freshness states (meaning-encoded) */
  --tb-fresh:#1ba35e;     --tb-fresh-bg:#e6f6ec;   --tb-fresh-ink:#075a37;
  --tb-aging:#e0a912;     --tb-aging-bg:#fdf3da;    --tb-aging-ink:#8a6608;
  --tb-stale:#d8473a;     --tb-stale-bg:#fbe6e3;    --tb-stale-ink:#9a2a21;
  --tb-untested:#b4bfca;  --tb-untested-bg:#eef2f6; --tb-untested-ink:#5b6b7b;

  /* tiers */
  --tb-tier-high:#0a7d4d;
  --tb-tier-trusted:#2f8f5b;
  --tb-tier-mixed:#b9870c;
  --tb-tier-caution:#cf7a1c;
  --tb-tier-risk:#c5362b;

  /* shape */
  --tb-radius:14px;
  --tb-radius-sm:9px;
  --tb-radius-pill:999px;
  --tb-shadow:0 1px 2px rgba(16,32,44,.06),0 8px 24px rgba(16,32,44,.06);

  /* type scale */
  --tb-h1:clamp(1.8rem,5vw,2.6rem);
  --tb-h2:1.3rem;
}

/* ---------- primitives ---------- */
.tb-wrap{max-width:1100px;margin:0 auto;padding:0 16px;}
.tb-section{padding:34px 0;}
.tb-section + .tb-section{border-top:1px solid var(--tb-line);}
.tb-section__head{margin:0 0 18px;}
.tb-eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tb-brand-ink);background:var(--tb-brand-tint);padding:4px 10px;border-radius:var(--tb-radius-pill);}
.tb-h2{font-size:var(--tb-h2);font-weight:800;letter-spacing:-.01em;margin:.5rem 0 .25rem;}
.tb-lead{color:var(--tb-ink-soft);font-size:.96rem;margin:0;max-width:62ch;}

/* ---------- buttons ---------- */
.tb-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--tb-radius-sm);font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer;border:1px solid transparent;}
.tb-btn--primary{background:var(--tb-brand);color:#fff;}
.tb-btn--primary:hover{background:var(--tb-brand-ink);}
.tb-btn--ghost{background:transparent;border-color:var(--tb-line);color:var(--tb-brand-ink);}
.tb-btn--ghost:hover{background:var(--tb-brand-tint);}

/* ---------- status indicators (the platform's core signal) ---------- */
.tb-status{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:var(--tb-radius-pill);}
.tb-status--review{background:#eef2f6;color:#48586a;}
.tb-status--scored{color:#fff;}
.tb-status .tb-dot{width:8px;height:8px;border-radius:50%;background:currentColor;}

.tb-tier-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--tb-radius-pill);font-size:.8rem;font-weight:700;color:#fff;background:#6b7886;}
.tier-high{background:var(--tb-tier-high);}
.tier-trusted{background:var(--tb-tier-trusted);}
.tier-mixed{background:var(--tb-tier-mixed);}
.tier-caution{background:var(--tb-tier-caution);}
.tier-risk{background:var(--tb-tier-risk);}
.tier-none{background:#6b7886;}

/* freshness dot + pill (shared with operator page) */
.tb-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tb-untested);}
.tb-dot--fresh{background:var(--tb-fresh);} .tb-dot--aging{background:var(--tb-aging);}
.tb-dot--stale{background:var(--tb-stale);} .tb-dot--untested{background:var(--tb-untested);}
.tb-statepill{font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:var(--tb-radius-pill);background:var(--tb-untested-bg);color:var(--tb-untested-ink);}
.tb-statepill--fresh{background:var(--tb-fresh-bg);color:var(--tb-fresh-ink);}
.tb-statepill--aging{background:var(--tb-aging-bg);color:var(--tb-aging-ink);}
.tb-statepill--stale{background:var(--tb-stale-bg);color:var(--tb-stale-ink);}

/* ---------- operator card (directory + homepage) ---------- */
.tb-grid-cards{display:grid;grid-template-columns:1fr;gap:14px;}
.tb-opcard{display:flex;flex-direction:column;gap:12px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-radius);box-shadow:var(--tb-shadow);padding:16px;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease;}
.tb-opcard:hover{border-color:#cfd9e2;transform:translateY(-2px);}
.tb-opcard__top{display:flex;align-items:center;gap:12px;}
.tb-oplogo{flex:0 0 auto;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,var(--tb-brand),var(--tb-brand-ink));color:#fff;font-weight:800;font-size:20px;}
.tb-opcard__name{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.tb-opcard__entity{font-size:.78rem;color:var(--tb-ink-soft);margin-top:2px;}
.tb-opcard__score{margin-left:auto;text-align:right;}
.tb-opcard__num{font-size:1.7rem;font-weight:850;color:var(--tb-brand-ink);line-height:1;}
.tb-opcard__num small{font-size:.7rem;color:var(--tb-ink-faint);font-weight:700;}
.tb-opcard__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.78rem;color:var(--tb-ink-soft);}
.tb-opcard__cov{display:flex;align-items:center;gap:6px;}
.tb-minibar{width:64px;height:6px;border-radius:4px;background:#eef2f6;overflow:hidden;}
.tb-minibar__fill{display:block;height:100%;background:var(--tb-brand);}
.tb-opcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--tb-line);padding-top:10px;font-size:.76rem;color:var(--tb-ink-faint);}

/* ---------- mini step / feature blocks ---------- */
.tb-steps{display:grid;grid-template-columns:1fr;gap:14px;}
.tb-step{background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-radius);padding:16px;}
.tb-step__n{width:30px;height:30px;border-radius:50%;background:var(--tb-brand-tint);color:var(--tb-brand-ink);font-weight:800;display:grid;place-items:center;margin-bottom:10px;}
.tb-step h3{margin:0 0 4px;font-size:1rem;font-weight:800;}
.tb-step p{margin:0;color:var(--tb-ink-soft);font-size:.88rem;}

/* ---------- evidence block (shared) ---------- */
.tb-evblock{display:flex;gap:12px;align-items:flex-start;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-radius-sm);padding:12px;}
.tb-evblock__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:0 0 auto;}
.tb-evblock__grid span{width:30px;height:30px;border-radius:7px;background:repeating-linear-gradient(45deg,#eef2f6,#eef2f6 6px,#e3e9ef 6px,#e3e9ef 12px);}

/* ---------- simple data table ---------- */
.tb-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.tb-table th,.tb-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--tb-line);}
.tb-table th{color:var(--tb-ink-soft);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;}
.tb-table tr:last-child td{border-bottom:0;}

/* ---------- note / callout ---------- */
.tb-note{font-size:.84rem;color:var(--tb-ink-soft);border-left:3px solid var(--tb-line);padding:2px 0 2px 12px;}

/* ---------- homepage hero ---------- */
.tb-hero{background:linear-gradient(180deg,var(--tb-brand-tint),transparent);}
.tb-hero__title{font-size:var(--tb-h1);font-weight:850;letter-spacing:-.02em;line-height:1.12;margin:.6rem 0 .5rem;max-width:18ch;}
.tb-hero__lead{font-size:1.05rem;color:var(--tb-ink-soft);max-width:60ch;margin:0 0 18px;}
.tb-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.tb-hero__stat{font-size:.86rem;color:var(--tb-ink-soft);margin:0;}
.tb-hero__stat strong{color:var(--tb-brand-ink);}

/* ---------- homepage footer strip ---------- */
.tb-home__foot{display:flex;flex-direction:column;gap:16px;}
.tb-home__links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

@media (min-width:820px){
  .tb-home__foot{flex-direction:row;align-items:center;justify-content:space-between;}
  .tb-home__links{flex-shrink:0;}
}

/* =========================================================================
   responsive
   ========================================================================= */
@media (min-width:620px){
  .tb-grid-cards{grid-template-columns:1fr 1fr;}
  .tb-steps{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:980px){
  .tb-grid-cards{grid-template-columns:1fr 1fr 1fr;}
  .tb-section{padding:48px 0;}
}
@media (prefers-reduced-motion:reduce){
  .tb-opcard{transition:none;}
}