/* Toto Super App — shared design tokens, card and empty-state utilities */

:root{
  --tsa-bg: var(--wp--preset--color--custom-base-bg, #191B1F);
  --tsa-card: var(--wp--preset--color--custom-card-bg, #1E2023);
  --tsa-border: var(--wp--preset--color--custom-border, #2A2C2F);
  --tsa-ink: var(--wp--preset--color--custom-heading-text, #E6E6E6);
  --tsa-body: var(--wp--preset--color--custom-paragraph-text, #B8B8B8);
  --tsa-muted: var(--wp--preset--color--custom-muted, #9FA1A4);
  --tsa-accent: var(--wp--preset--color--custom-accent, #83CBEB);

  --tsa-gold: #D4A843;
  --tsa-silver: #A8B0B8;
  --tsa-bronze: #C07A3E;

  --tsa-radius: 16px;
  --tsa-radius-sm: 10px;
  --tsa-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.09);

  --tsa-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tsa-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Medal colours are too light on a light background */
:root[data-theme="light"]{
  --tsa-gold: #C08F2A;
  --tsa-silver: #7C858E;
  --tsa-bronze: #A5602A;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --tsa-gold: #C08F2A;
    --tsa-silver: #7C858E;
    --tsa-bronze: #A5602A;
  }
}

/* ─── Readable team colour ─── */

/* The element carries both theme variants inline (toto_extra_stats_team_ink_style());
   this picks the one for the active theme. --tsa-team-ink is for text and icons
   in the team colour; lines and bars keep the raw colour and get
   --tsa-team-casing as a thin rim, transparent where none is needed. */
.tsa-team-ink{
  --tsa-team-ink: var(--tsa-team-ink-dark);
  --tsa-team-casing: var(--tsa-team-casing-dark, transparent);
}

:root[data-theme="light"] .tsa-team-ink{
  --tsa-team-ink: var(--tsa-team-ink-light);
  --tsa-team-casing: var(--tsa-team-casing-light, transparent);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .tsa-team-ink{
    --tsa-team-ink: var(--tsa-team-ink-light);
    --tsa-team-casing: var(--tsa-team-casing-light, transparent);
  }
}

/* ─── Card ─── */

.tsa-card{
  position: relative;
  overflow: hidden;
  background: var(--tsa-card);
  border: 1px solid var(--tsa-border);
  border-radius: var(--tsa-radius);
  box-shadow: var(--tsa-shadow);
}

.tsa-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tsa-accent) 90%, transparent), transparent);
  pointer-events: none;
  opacity: .95;
  z-index: 1;
}

/* ─── Clickable team name ─── */

/* A plain link to the team page that must read as the name it replaces:
   themes style links aggressively, hence the a-qualified reset. A name
   without a team page renders as a span with the same class and no hover. */
.tsa-team-link{
  transition: color .12s ease;
}

a.tsa-team-link,
a.tsa-team-link:visited{
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}

a.tsa-team-link:focus{
  outline: none;
}

a.tsa-team-link:focus-visible{
  outline: 2px solid var(--tsa-accent);
  outline-offset: 2px;
  border-radius: var(--tsa-radius-sm);
}

@media (hover: hover) and (pointer: fine){
  a.tsa-team-link:hover{
    color: var(--tsa-accent);
    text-decoration: none;
  }
}

/* ─── Score-pill ─── */

.tsa-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tsa-ink) 6%, transparent);
  border: 1px solid var(--tsa-border);
  color: var(--tsa-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── Empty state ─── */

.tsa-empty{
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-family: var(--tsa-font-mono);
  font-size: 0.9rem;
  color: var(--tsa-muted);
}

/* ─── Breadcrumbs ─── */

.tsa-crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--tsa-font-sans);
  font-size: .78rem;
  color: var(--tsa-muted);
}

.tsa-crumb-sep{
  color: var(--tsa-border);
}

.tsa-crumb-now{
  color: var(--tsa-ink);
  font-weight: 600;
}

/* Themes underline links in the content aggressively; class plus attribute beat
   a .entry-content a without !important */
.tsa-crumbs a[href]{
  text-decoration: none;
  color: inherit;
}

@media (hover: hover) and (pointer: fine){
  .tsa-crumbs a[href]:hover{
    color: var(--tsa-ink);
  }
}