/* ==========================================================================
   tabela-os — PRELIMINARY visual-language tokens (next-visual candidate)
   Base = Route 1c "Painel" (neo-dark, grid, traceability)
   Impact = Route 1a "Placar" (live scores, critical events)
   ISOLATED: not imported by the design-system styles.css. Nothing here is
   consolidated until approved. Prefixed --os-* to avoid collisions with --tc-*.
   ========================================================================== */

:root {
  /* ---- Surfaces (neutral near-black, cool) ------------------------------ */
  --os-bg:        #0C0F12;   /* app canvas */
  --os-panel:     #10151A;   /* card / panel */
  --os-panel-2:   #141B21;   /* raised / nested */
  --os-panel-3:   #182029;   /* hover / active row */
  --os-hairline:  #1F262B;   /* default border */
  --os-hairline-2:#262F36;   /* stronger divider */
  --os-scrim:     rgba(0,0,0,.55);

  /* ---- Text ------------------------------------------------------------- */
  --os-ink:       #E7ECEA;   /* primary */
  --os-ink-2:     #AEB9B4;   /* secondary */
  --os-muted:     #9AA7A2;   /* metadata */
  --os-faint:     #7C8681;   /* disabled / faint */
  --os-on-accent: #0C1A12;   /* ink on volt/lime fills */

  /* ---- Brand / accent (traceable to --tc-volt) -------------------------- */
  --os-accent:    #B6F36A;   /* primary volt — actions, confirmed, selected */
  --os-accent-dim:rgba(182,243,106,.12);
  --os-accent-line:rgba(182,243,106,.40);

  /* ---- Impact layer (from Route A) -------------------------------------- */
  --os-live:      #FF5A47;   /* live / red-card / elimination */
  --os-live-dim:  rgba(255,90,71,.14);
  --os-hot:       #D8FF3E;   /* big live scoreboard numbers */
  --os-gold:      #FFE14D;   /* goal / decisive / trophy moment */

  /* ==== SEMANTIC STATE SYSTEM (the P2 differentiator) ==================== *
     Every data surface can declare its trust state. Never color-only —
     each pairs with a glyph + label.                                        */
  --os-confirmed:  #B6F36A;  --os-confirmed-ink:  rgba(182,243,106,.12);  /* ● confirmado  */
  --os-pending:    #E0B83A;  --os-pending-ink:    rgba(224,184,58,.12);   /* ◐ pendente    */
  --os-uncertain:  #8FA0C0;  --os-uncertain-ink:  rgba(143,160,192,.12);  /* ○ incerto/indeterminado (dashed) */
  --os-degraded:   #E08A3A;  --os-degraded-ink:   rgba(224,138,58,.12);   /* ▲ degradado   */
  --os-stale:      #8A9691;  --os-stale-ink:      rgba(108,120,115,.14);  /* ⏱ obsoleto (desaturado) */
  --os-conflict:   #E0563A;  --os-conflict-ink:   rgba(224,86,58,.12);    /* ⇄ conflito entre fontes */
  --os-empty:      #55605B;  --os-empty-ink:      rgba(85,96,91,.10);     /* — vazio temporário */

  /* ---- Classification zones (competition) ------------------------------- */
  --os-zone-q:     #B6F36A;  /* classificado (top 2) */
  --os-zone-play:  #E0B83A;  /* em disputa */
  --os-zone-third: #38B6FF;  /* melhor 3º */
  --os-zone-out:   #FF5A47;  /* eliminado */

  /* ---- Type ------------------------------------------------------------- */
  --os-font-ui:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --os-font-num:    'Archivo', 'Inter', sans-serif;      /* scores, big numbers */
  --os-font-impact: 'Archivo Black', 'Archivo', sans-serif; /* hero live scoreboard */
  --os-font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* labels, source, updated-at */

  /* ---- Radius / spacing (8px grid) -------------------------------------- */
  --os-r-xs: 6px;  --os-r-sm: 8px;  --os-r-md: 12px;  --os-r-lg: 16px;  --os-r-pill: 999px;
  --os-s-1: 4px;  --os-s-2: 8px;  --os-s-3: 12px;  --os-s-4: 16px;  --os-s-5: 20px;  --os-s-6: 24px;  --os-s-8: 32px;
  --os-touch: 44px;

  /* ---- Elevation / motion ---------------------------------------------- */
  --os-shadow:   0 8px 28px rgba(0,0,0,.40);
  --os-shadow-lg:0 18px 50px rgba(0,0,0,.50);
  --os-glow:     0 0 0 1px var(--os-accent-line), 0 0 22px rgba(182,243,106,.18);
  --os-ease:     cubic-bezier(.4,0,.2,1);
  --os-t-fast:   140ms var(--os-ease);
  --os-t:        220ms var(--os-ease);
}

/* ===== Base element resets scoped to the prototype root ===================
   (scoped so this file never leaks onto other pages if linked together)     */
.tos-root, .tos-root * { box-sizing: border-box; }
.tos-root {
  background: radial-gradient(circle at 50% 0%, #0d3826 0%, #0C0F12 50%, #080A0C 100%) !important;
  background-attachment: fixed !important;
  color: var(--os-ink);
  font-family: var(--os-font-ui);
  -webkit-font-smoothing: antialiased;
}
.tos-root::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 400px;
  background: radial-gradient(ellipse at 50% -50%, rgba(182, 243, 106, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tos-root ::selection { background: var(--os-accent); color: var(--os-on-accent); }

/* focus visible — high-contrast ring for keyboard nav */
.tos-root :focus-visible {
  outline: 2px solid var(--os-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tos-root *, .tos-root *::before, .tos-root *::after { animation: none !important; transition: none !important; }
  /* animation:none acima remove tosFadeUp mas o opacity:0 base de .tos-stagger persiste,
     deixando MatchRow, dialogo de Busca e MoreMenu invisiveis -- forca estado final visivel */
  .tos-root .tos-stagger { opacity: 1 !important; transform: none !important; }
}

/* ==== Accessibility utilities ============================================ */
.tos-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.tos-skip-link {
  position: absolute;
  top: -48px; left: 8px;
  z-index: 9999;
  background: var(--os-accent);
  color: var(--os-on-accent);
  font-family: var(--os-font-ui);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--os-r-sm);
  text-decoration: none;
  transition: top var(--os-t-fast);
}
.tos-skip-link:focus { top: 8px; }

/* ==== UI Premium Utilities =============================================== */
.tos-glass {
  background: rgba(12, 15, 18, 0.70) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(182, 243, 106, 0.15) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.tos-interactive {
  transition: transform var(--os-t-fast), background var(--os-t-fast);
}
.tos-interactive:hover {
  background: var(--os-panel-3) !important;
}
.tos-interactive:active {
  transform: scale(0.98);
}

.tos-glow-live {
  background: radial-gradient(circle at center, var(--os-live-dim) 0%, transparent 70%);
  animation: tosPulse 3s ease-in-out infinite;
}

@keyframes tosPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes tosFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tos-stagger {
  animation: tosFadeUp var(--os-t) forwards;
  opacity: 0;
}



/* ---- shell/layout (extraído do index.html) ---- */
html, body { margin: 0; background: var(--os-bg); }
  @keyframes tosPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

  /* App-shell: altura = viewport (100dvh no mobile), rolagem SÓ no .tos-scroll.
     Mantém a navegação inferior sempre visível na viewport inicial e faz o
     reset de scroll do go() funcionar (o scroller é interno, não o body). */
  .tos-app { container-type: inline-size; container-name: app; height: 100vh; height: 100dvh; }
  .tos-scroll::-webkit-scrollbar { width: 8px; }
  .tos-scroll::-webkit-scrollbar-thumb { background: var(--os-hairline-2); border-radius: 8px; }

  .tos-nav-desk { display: none; }
  .tos-nav-bottom { display: flex; }
  .tos-search-hint { display: none; }

  @container app (min-width: 768px) {
    .tos-nav-desk { display: flex; }
    .tos-nav-bottom { display: none; }
    .tos-app-inner { padding: 64px 24px 24px !important; margin: 0 auto; width: 100%; box-sizing: border-box; }
  }

  @container app (min-width: 900px) {
    .tos-nav-desk { display: flex; }
    .tos-nav-bottom { display: none; }
    .tos-search-hint { display: inline; }
    .tos-app-inner { padding: 64px 28px 24px !important; max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box; }
  }

  .tos-cols2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @container app (min-width: 820px) { .tos-cols2 { grid-template-columns: 1.35fr .9fr; align-items: start; } }

  .tos-grid-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
  @container app (min-width: 560px) { .tos-grid-cards { grid-template-columns: 1fr 1fr; } }
  @container app (min-width: 1040px) { .tos-grid-cards { grid-template-columns: 1fr 1fr 1fr; } }

  .tos-bracket { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
  .tos-cal { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
  @container app (min-width: 720px) { .tos-cal { grid-template-columns: repeat(3, 1fr); } }
  @container app (min-width: 1080px) { .tos-cal { grid-template-columns: repeat(5, 1fr); } }

  .tos-bootstrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
    color: var(--os-ink);
    font-family: var(--os-font-ui);
    background:
      radial-gradient(circle at 50% 0%, rgba(182, 243, 106, .10), transparent 46%),
      var(--os-bg);
  }
  .tos-bootstrap-card {
    width: min(100%, 420px);
    border: 1px solid var(--os-hairline-2);
    border-radius: var(--os-r-md);
    background: var(--os-panel);
    box-shadow: var(--os-shadow);
    padding: 24px;
    text-align: center;
  }
  .tos-bootstrap-mark {
    width: 38px;
    height: 38px;
    border: 3px solid var(--os-accent-dim);
    border-top-color: var(--os-accent);
    border-radius: 999px;
    margin: 0 auto 16px;
    animation: tosSpin 900ms linear infinite;
  }
  .tos-bootstrap-title {
    margin: 0 0 8px;
    color: var(--os-ink);
    font: 800 18px/1.2 var(--os-font-ui);
  }
  .tos-bootstrap-copy {
    margin: 0;
    color: var(--os-ink-2);
    font: 500 13px/1.5 var(--os-font-ui);
  }
  .tos-bootstrap-error .tos-bootstrap-mark {
    border: 0;
    border-radius: var(--os-r-pill);
    background: var(--os-live-dim);
    color: var(--os-live);
    display: grid;
    place-items: center;
    animation: none;
    font: 900 20px/1 var(--os-font-ui);
  }
  .tos-bootstrap-action {
    min-height: 44px;
    margin-top: 18px;
    border: 0;
    border-radius: var(--os-r-sm);
    background: var(--os-accent);
    color: var(--os-on-accent);
    cursor: pointer;
    font: 800 13px/1 var(--os-font-ui);
    padding: 0 18px;
  }
  .tos-bootstrap-action:disabled {
    cursor: not-allowed;
    opacity: .55;
  }
  @keyframes tosSpin { to { transform: rotate(360deg); } }