/* Competition Context Explorer (subject=competitions) — light retro analytics.
 * BEM-scoped `slg-comp*` styles layered on top of summer-league-games.css.
 * Reuses the shared tokens (--color-slate-*, --color-accent-emerald, --font-mono). */

/* ── Scope notes / hints ─────────────────────────────────────────────────── */
.slg-comp-scopenote {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: var(--color-slate-600, #475569);
  margin: 0.2rem 0 0.4rem;
}
.slg-comp-hint {
  font-size: 0.85rem;
  color: var(--color-slate-600, #475569);
  background: var(--color-slate-50, #f8fafc);
  border-left: 3px solid var(--color-amber-400, #fbbf24);
  padding: 0.5rem 0.75rem;
  border-radius: 0 4px 4px 0;
  margin: 0.4rem 0;
}
.slg-comp-na { color: var(--color-slate-400, #94a3b8); }

/* ── Invalid-parameter validation state (ticket #636) ────────────────────── */
.slg-comp-validation-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.slg-comp-not-found {
  font-size: 0.85rem;
  color: var(--color-amber-800, #92400e);
  background: var(--color-amber-50, #fffbeb);
  border-left: 3px solid var(--color-amber-400, #fbbf24);
  padding: 0.6rem 0.9rem;
  border-radius: 0 4px 4px 0;
  margin: 0.4rem 0;
}
.slg-comp-not-found a { color: inherit; font-weight: 600; }

/* ── Row table extras ────────────────────────────────────────────────────── */
.slg-comp-table tbody tr.is-selected th.slg-explorer__label,
.slg-comp-table tbody tr.is-selected td {
  background: var(--color-emerald-50, #ecfdf5);
}
.slg-comp-open { color: var(--color-slate-900, #0f172a); font-weight: 600; text-decoration: none; }
.slg-comp-open:hover { color: var(--color-accent-emerald, #10b981); text-decoration: underline; }
.slg-comp-open[aria-current="true"] { color: var(--color-accent-emerald, #10b981); }

/* ── Column-density progressive disclosure (#644) ─────────────────────────
   Pure CSS checkbox hack: no JS is required for the default curated view or
   for expanding to the full metric matrix (JS only persists the choice across
   AJAX result swaps — see summer-league-explorer.js). Cells are hidden with
   `display:none` (not visually offscreen) so column widths never reserve
   space for hidden metrics. */
.slg-comp-table [data-col-density="full"] { display: none; }
.slg-comp-density-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.slg-comp-density-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-slate-600, #475569);
  margin: 0 0 0.6rem;
  cursor: pointer;
  user-select: none;
}
.slg-comp-density-input:focus-visible + .slg-comp-density-label,
.slg-comp-density-input:focus + .slg-comp-density-label {
  outline: 2px solid var(--color-accent-emerald, #10b981);
  outline-offset: 2px;
  border-radius: 4px;
}
.slg-comp-density-label__title {
  margin-right: 0.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-slate-700, #334155);
}
.slg-comp-density-label__option {
  transition: color 0.15s, font-weight 0.15s;
}
.slg-comp-density-label__option--condensed {
  color: var(--color-slate-900, #0f172a);
  font-weight: 700;
}
.slg-comp-density-label__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.2rem;
  height: 1.2rem;
  padding: 0.12rem;
  border-radius: 999px;
  background: var(--color-slate-300, #cbd5e1);
  transition: background 0.15s;
}
.slg-comp-density-label__thumb {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--color-white, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
  transition: transform 0.15s;
}
.slg-comp-density-label:hover .slg-comp-density-label__track {
  background: var(--color-slate-400, #94a3b8);
}
.slg-comp-density-input:checked + .slg-comp-density-label .slg-comp-density-label__track {
  background: var(--color-accent-emerald, #10b981);
}
.slg-comp-density-input:checked + .slg-comp-density-label .slg-comp-density-label__thumb {
  transform: translateX(1rem);
}
.slg-comp-density-input:checked + .slg-comp-density-label .slg-comp-density-label__option--condensed {
  color: var(--color-slate-500, #64748b);
  font-weight: 400;
}
.slg-comp-density-input:checked + .slg-comp-density-label .slg-comp-density-label__option--full {
  color: var(--color-slate-900, #0f172a);
  font-weight: 700;
}
.slg-comp-density-input:checked ~ .slg-board .slg-comp-table [data-col-density="full"] {
  display: table-cell;
}

/* ── Horizontal-overflow affordance ───────────────────────────────────────
   The visible "Scroll for more" hint is the primary, always-legible cue
   (never color-only); the edge-fade gradients on the scroll container add a
   secondary visual cue once content actually overflows. `role="region"` +
   `tabindex="0"` on .slg-comp-tablewrap lets keyboard users tab into the
   table and scroll it with arrow keys without a mouse. */
.slg-comp-scrollhint {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-slate-500, #64748b);
  text-align: center;
  margin: 0.1rem 0 0.3rem;
}
.slg-comp-tablewrap {
  background:
    linear-gradient(to right, var(--color-white, #fff) 0%, rgba(255, 255, 255, 0) 8%),
    linear-gradient(to left, var(--color-white, #fff) 0%, rgba(255, 255, 255, 0) 8%) 100% 0,
    linear-gradient(to right, rgba(15, 23, 42, 0.12), rgba(255, 255, 255, 0)) 0 0,
    linear-gradient(to left, rgba(15, 23, 42, 0.12), rgba(255, 255, 255, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--color-white, #fff);
  background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.slg-comp-tablewrap:focus-visible,
.slg-comp-tablewrap:focus {
  outline: 2px solid var(--color-accent-emerald, #10b981);
  outline-offset: -2px;
}
/* Sticky positioning and background are already provided by the shared
   .slg-explorer-table base rules (summer-league-games.css); only the
   drop-shadow separating the pinned column from scrolled content is new. */
.slg-comp-table th.slg-explorer__label {
  box-shadow: 2px 0 3px -2px rgba(15, 23, 42, 0.15);
}

/* ── Coverage badge ──────────────────────────────────────────────────────── */
.slg-cov { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono, monospace); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.slg-cov__dot { font-size: 0.85rem; line-height: 1; }
.slg-cov__count { color: var(--color-slate-500, #64748b); }
.slg-cov--complete { color: var(--color-accent-emerald, #10b981); }
.slg-cov--partial { color: var(--color-amber-500, #f59e0b); }
.slg-cov--unavailable { color: var(--color-slate-400, #94a3b8); }

/* ── Detail panel ────────────────────────────────────────────────────────── */
.slg-comp-detail {
  margin-top: 1.5rem;
  border: 1px solid var(--color-slate-200, #e2e8f0);
  border-radius: 10px;
  background: var(--color-white, #fff);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.slg-comp-detail:focus { outline: 2px solid var(--color-accent-emerald, #10b981); outline-offset: 2px; }
.slg-comp-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-slate-100, #f1f5f9);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.slg-comp-detail__title { font-family: var(--font-display, "Russo One", sans-serif); font-size: 1.35rem; margin: 0.1rem 0 0; color: var(--color-slate-900, #0f172a); }
.slg-comp-detail__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.slg-comp-detail__hub, .slg-comp-detail__close { font-family: var(--font-mono, monospace); font-size: 0.8rem; text-decoration: none; color: var(--color-slate-600, #475569); }
.slg-comp-detail__hub:hover, .slg-comp-detail__close:hover { color: var(--color-accent-emerald, #10b981); }
.slg-comp-detail__handoffs { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.slg-comp-detail__handoffs-label { font-family: var(--font-mono, monospace); font-size: 0.7rem; text-transform: uppercase; color: var(--color-slate-500, #64748b); }
.slg-comp-detail__handoffs a {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--color-accent-emerald, #10b981);
  border: 1px solid var(--color-accent-emerald, #10b981);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
}
.slg-comp-detail__handoffs a:hover { background: var(--color-accent-emerald, #10b981); color: var(--color-white, #fff); }
.slg-comp-stale {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #92400e;
  background: var(--color-amber-100, #fef3c7);
  border: 1px solid var(--color-amber-400, #fbbf24);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.slg-comp-section { margin-top: 1.25rem; }
.slg-comp-section:first-of-type { margin-top: 0; }
.slg-comp-section__title {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-emerald, #10b981);
  border-bottom: 1px solid var(--color-slate-100, #f1f5f9);
  padding-bottom: 0.3rem;
  margin: 0 0 0.6rem;
}
.slg-comp-section__lede { font-size: 0.82rem; color: var(--color-slate-500, #64748b); margin: 0 0 0.7rem; }
.slg-comp-section__lede a { color: var(--color-accent-emerald, #10b981); }

/* Identity facts grid */
.slg-comp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0; }
.slg-comp-facts > div { display: flex; flex-direction: column; }
.slg-comp-facts dt { font-family: var(--font-mono, monospace); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-slate-500, #64748b); }
.slg-comp-facts dd { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 600; color: var(--color-slate-900, #0f172a); font-variant-numeric: tabular-nums; }
.slg-comp-facts--freshness dd { font-size: 0.85rem; font-weight: 500; }
.slg-comp-unresolved { font-size: 0.75rem; font-weight: 400; color: var(--color-amber-500, #f59e0b); }

/* Membership list */
.slg-comp-membership { margin-top: 0.9rem; }
.slg-comp-membership__title { font-family: var(--font-mono, monospace); font-size: 0.72rem; text-transform: uppercase; color: var(--color-slate-500, #64748b); margin: 0 0 0.4rem; }
.slg-comp-membership__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.slg-comp-membership__list li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; padding: 0.3rem 0.5rem; background: var(--color-slate-50, #f8fafc); border-radius: 4px; }
.slg-comp-membership__list a { color: var(--color-slate-800, #1e293b); text-decoration: none; font-weight: 500; }
.slg-comp-membership__list a:hover { color: var(--color-accent-emerald, #10b981); text-decoration: underline; }
.slg-comp-membership__count { color: var(--color-slate-500, #64748b); font-family: var(--font-mono, monospace); font-size: 0.78rem; }

/* Consolidated coverage notes (#644) — one shared explanation per distinct
   reason string instead of repeating the same sentence under every metric
   that shares a coverage source; see the metric_section macro. */
.slg-comp-covnotes {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.75rem;
  background: var(--color-amber-50, #fffbeb);
  border-left: 3px solid var(--color-amber-400, #fbbf24);
  border-radius: 0 4px 4px 0;
}
.slg-comp-covnotes__title {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-amber-800, #92400e);
  margin: 0 0 0.3rem;
}
.slg-comp-covnotes__list { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--color-slate-700, #334155); }
.slg-comp-covnotes__list li { margin-bottom: 0.15rem; }

/* Metric grid */
.slg-comp-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.slg-comp-metric { border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 8px; padding: 0.6rem 0.7rem; background: var(--color-slate-50, #f8fafc); }
.slg-comp-metric--partial { border-left: 3px solid var(--color-amber-400, #fbbf24); }
.slg-comp-metric--unavailable { border-left: 3px solid var(--color-slate-300, #cbd5e1); }
.slg-comp-metric--complete { border-left: 3px solid var(--color-accent-emerald, #10b981); }
.slg-comp-metric__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.slg-comp-metric__label { font-size: 0.82rem; color: var(--color-slate-600, #475569); }
.slg-comp-metric__value { font-family: var(--font-mono, monospace); font-size: 1.15rem; font-weight: 700; color: var(--color-slate-900, #0f172a); font-variant-numeric: tabular-nums; }
.slg-comp-metric__cov { margin-top: 0.3rem; }
.slg-comp-metric__def { margin-top: 0.4rem; font-size: 0.75rem; }
.slg-comp-metric__def summary { cursor: pointer; color: var(--color-accent-emerald, #10b981); font-family: var(--font-mono, monospace); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.slg-comp-metric__def dl { margin: 0.4rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.5rem; }
.slg-comp-metric__def dt { color: var(--color-slate-500, #64748b); font-weight: 600; }
.slg-comp-metric__def dd { margin: 0; color: var(--color-slate-700, #334155); }
.slg-comp-metric__def code { font-family: var(--font-mono, monospace); font-size: 0.72rem; background: var(--color-slate-100, #f1f5f9); padding: 0 0.2rem; border-radius: 3px; }

/* Field-composition attributes */
.slg-comp-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.slg-comp-attr { border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 8px; padding: 0.55rem 0.7rem; }
.slg-comp-attr__label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-slate-800, #1e293b); }
.slg-comp-attr__counts { display: block; font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--color-slate-500, #64748b); margin-top: 0.2rem; }
.slg-comp-attr__dist { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.slg-comp-attr__dist li { display: flex; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--color-slate-600, #475569); }
.slg-comp-attr__reason { margin: 0.3rem 0 0; font-size: 0.7rem; line-height: 1.3; color: var(--color-slate-500, #64748b); font-style: italic; }

/* Leaders strip (performance landscape) */
.slg-comp-leaders { margin-top: 0.9rem; }
.slg-comp-leaders__title { font-family: var(--font-mono, monospace); font-size: 0.72rem; text-transform: uppercase; color: var(--color-slate-500, #64748b); margin: 0 0 0.3rem; }
.slg-comp-leaders__lede { font-size: 0.78rem; color: var(--color-slate-500, #64748b); margin: 0 0 0.6rem; }
.slg-comp-leaders__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; }
.slg-comp-leaders__board { border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 8px; padding: 0.55rem 0.7rem; }
.slg-comp-leaders__board-title { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-accent-emerald, #10b981); text-decoration: none; margin-bottom: 0.35rem; }
.slg-comp-leaders__board-title:hover { text-decoration: underline; }
.slg-comp-leaders__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; counter-reset: none; }
.slg-comp-leaders__row { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; }
.slg-comp-leaders__row a { color: var(--color-slate-800, #1e293b); text-decoration: none; flex: 1; }
.slg-comp-leaders__row a:hover { color: var(--color-accent-emerald, #10b981); text-decoration: underline; }
.slg-comp-leaders__rank { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--color-slate-400, #94a3b8); min-width: 1rem; }
.slg-comp-leaders__value { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--color-slate-600, #475569); }
.slg-comp-leaders__empty { font-size: 0.82rem; color: var(--color-slate-500, #64748b); font-style: italic; margin: 0; }

/* Data confidence */
.slg-comp-conf { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.4rem 1rem; margin-bottom: 0.8rem; }
.slg-comp-conf__row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--color-slate-100, #f1f5f9); }
.slg-comp-conf__label { font-size: 0.82rem; color: var(--color-slate-700, #334155); }
.slg-comp-conf__info { font-family: var(--font-mono, monospace); font-size: 0.62rem; text-transform: uppercase; color: var(--color-slate-400, #94a3b8); border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 3px; padding: 0 0.25rem; }
.slg-comp-conf__scopekey { font-size: 0.74rem; color: var(--color-slate-500, #64748b); margin: 0.5rem 0 0; }
.slg-comp-conf__scopekey code { font-family: var(--font-mono, monospace); background: var(--color-slate-100, #f1f5f9); padding: 0 0.25rem; border-radius: 3px; }

/* Provenance / source references (exact raw-run audit trail) */
.slg-comp-prov { margin-top: 0.6rem; }
.slg-comp-prov__title { font-family: var(--font-mono, monospace); font-size: 0.72rem; text-transform: uppercase; color: var(--color-slate-500, #64748b); margin: 0 0 0.4rem; }
.slg-comp-prov__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.slg-comp-prov__row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-size: 0.78rem; padding: 0.2rem 0.4rem; border-bottom: 1px dashed var(--color-slate-100, #f1f5f9); }
.slg-comp-prov__label { font-weight: 500; color: var(--color-slate-700, #334155); min-width: 8rem; }
.slg-comp-prov__watermark, .slg-comp-prov__rows, .slg-comp-prov__status { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--color-slate-500, #64748b); }

/* ── Context strip (Players/Teams/Matchups handoff, #609) ───────────────────
   Compact, linked summary of the one approved Competition Context profile
   the current query resolves to. Never shown on the competitions subject
   itself — that tab IS the Competition Context surface. */
.slg-context-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--color-slate-200, #e2e8f0);
  border-left: 3px solid var(--color-accent-emerald, #10b981);
  border-radius: 6px;
  background: var(--color-slate-50, #f8fafc);
  font-size: 0.85rem;
}
.slg-context-strip--stale { border-left-color: var(--color-amber-500, #f59e0b); }
.slg-context-strip--empty {
  display: block;
  color: var(--color-slate-500, #64748b);
  border-left-color: var(--color-slate-300, #cbd5e1);
}
.slg-context-strip__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-slate-500, #64748b);
}
.slg-context-strip__label { font-weight: 600; color: var(--color-slate-900, #0f172a); text-decoration: none; }
.slg-context-strip__label:hover { text-decoration: underline; }
.slg-context-strip__metric { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.slg-context-strip__metric-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-slate-500, #64748b);
}
.slg-context-strip__metric-value { font-family: var(--font-mono, monospace); font-weight: 600; color: var(--color-slate-800, #1e293b); }
.slg-context-strip__badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--color-amber-700, #b45309);
  border: 1px solid var(--color-amber-500, #f59e0b);
  border-radius: 3px;
  padding: 0 0.3rem;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .slg-comp-detail { padding: 0.9rem; }
  .slg-comp-metrics, .slg-comp-attrs, .slg-comp-conf, .slg-comp-leaders__grid { grid-template-columns: 1fr; }
  .slg-comp-facts { grid-template-columns: repeat(2, 1fr); }
  .slg-context-strip { flex-direction: column; align-items: flex-start; }
  .slg-comp-density-label { width: 100%; justify-content: center; padding: 0.35rem 0; }
  .slg-comp-table th.slg-explorer__label { min-width: 6.5rem; }
}