/* ============================================================
   CS2 JOURNAL — COMPONENT STYLES
   All values derive from tokens.css custom properties.
   No color/spacing literals invented here.
   CS2 buy-menu / scoreboard aesthetic:
     - Cool charcoal panels (--card, --surface)
     - Orange-gold energy accent (--orange) — used with restraint
     - CT steel-blue (--blue), T-side gold (--tan), bomb red (--red)
     - Condensed military caps (--font-display) for HUD chrome
     - Hard edges (--radius-sm/--radius/--radius-lg)
     - Angular clip-corner on cards & modals
   ============================================================ */

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes acquire-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 133, 43, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(232, 133, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 133, 43, 0); }
}

/* ── Button ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  /* Condensed display caps — core CS2 HUD treatment */
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease),
    color            var(--dur-fast) var(--ease),
    box-shadow       var(--dur-fast) var(--ease),
    opacity          var(--dur-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  height: 34px;
}

.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* sizes */
.btn-sm {
  height: 26px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* variants */
/* Primary = orange — the signature energy action */
.btn-primary {
  background-color: var(--orange);
  border-color: var(--orange);
  color: var(--bg);
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--orange-bright);
  border-color: var(--orange-bright);
}
.btn-primary:active:not(:disabled) {
  background-color: var(--orange);
  filter: brightness(0.9);
}

.btn-ghost {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--card-raised);
  border-color: var(--border-strong);
}
.btn-ghost:active:not(:disabled) {
  background-color: var(--card);
}

.btn-danger {
  background-color: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn-danger:hover:not(:disabled) {
  background-color: rgba(229, 68, 59, 0.1);
}
.btn-danger-solid {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn-danger-solid:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* hud variant — display ALL-CAPS tracked, used in TopBar right slot */
.btn-hud {
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background-color: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-hud:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}

/* loading state */
.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  color: var(--text);
}
.btn-primary.btn-loading::after {
  color: var(--bg);
}

/* ── Spinner standalone ──────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

/* ── StatusDot ───────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--orange);
  flex-shrink: 0;
}
.status-dot-pulse {
  animation: acquire-pulse 1.8s ease-out 1;
}

/* ── Badge — category tags ───────────────────────────────────── */
/*
   Color mechanism: each badge sets --bc on its inline style.
   For the 3 seed categories --bc resolves from tokens.css:
     --cat-training = var(--orange) = #E8852B
     --cat-warmup   = var(--blue)   = #5A9FD4
     --cat-match    = var(--tan)    = #D7B36C
   Unknown/removed ids fall back to --cat-fallback (neutral steel).
   Phase 12 will pass an explicit hex for custom categories.
*/

/* --bc default: must be set as a custom property; if somehow missing
   fall back to --cat-fallback so the badge is never invisible. */
.badge {
  --bc: var(--cat-fallback);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  position: relative;
  overflow: hidden;
  /* Two-tone: translucent tint background, solid text */
  background-color: color-mix(in srgb, var(--bc) 14%, transparent);
  color: var(--bc);
}

/* Leading accent bar — solid category color */
.badge::before {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background-color: var(--bc);
}

/* ── Card clip corner — CS2 buy-menu chamfer ─────────────────── */
/*
   Every card and modal panel gets the top-right chamfered corner
   defined in --clip-corner (polygon cutting ~12px). This is the ONE
   consistent angular treatment — applied everywhere, never mixed.
*/

/* ── Corner-bracket motif (lock-on reticle) ──────────────────── */
/*
   4 L-shaped bracket ticks, absolutely positioned over the card.
   On hover/focus of a clickable card the ticks light to --orange
   (the energy accent). Quiet at rest.
*/
.card-brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius);
  --bk-color: rgba(44, 53, 61, 0.6); /* --border at 60% */
  --bk-size: 12px;
  --bk-w: 1px;
}

/* Top-left */
.card-brackets::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bk-size);
  height: var(--bk-size);
  border-top: var(--bk-w) solid var(--bk-color);
  border-left: var(--bk-w) solid var(--bk-color);
  border-radius: var(--radius) 0 0 0;
  transition: border-color var(--dur) var(--ease);
}

/* Bottom-right */
.card-brackets::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--bk-size);
  height: var(--bk-size);
  border-bottom: var(--bk-w) solid var(--bk-color);
  border-right: var(--bk-w) solid var(--bk-color);
  border-radius: 0 0 var(--radius) 0;
  transition: border-color var(--dur) var(--ease);
}

/* Top-right and bottom-left via inner spans */
.card-brackets-tr,
.card-brackets-bl {
  position: absolute;
  width: var(--bk-size, 12px);
  height: var(--bk-size, 12px);
  pointer-events: none;
  transition: border-color var(--dur) var(--ease);
}
.card-brackets-tr {
  top: 0;
  right: 0;
  border-top: 1px solid var(--bk-color, rgba(44, 53, 61, 0.6));
  border-right: 1px solid var(--bk-color, rgba(44, 53, 61, 0.6));
  border-radius: 0 var(--radius) 0 0;
}
.card-brackets-bl {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid var(--bk-color, rgba(44, 53, 61, 0.6));
  border-left: 1px solid var(--bk-color, rgba(44, 53, 61, 0.6));
  border-radius: 0 0 0 var(--radius);
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  position: relative;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* CS2 chamfered top-right corner */
  clip-path: var(--clip-corner);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* Optional top accent bar */
.card-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
}
/*
  Accent bar color — derived from --bc set on the card element.
  --bc resolves via var(--cat-<id>, var(--cat-fallback)) for any category id.
  Seed categories: --cat-training=orange, --cat-warmup=blue, --cat-match=tan.
*/
.card-accent .card-accent-bar { background-color: var(--bc, var(--cat-fallback)); }

/* Clickable card — lock-on interaction */
.card-clickable {
  cursor: pointer;
  transition:
    border-color   var(--dur) var(--ease),
    transform      var(--dur) var(--ease),
    box-shadow     var(--dur) var(--ease);
}
.card-clickable:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.card-clickable:hover,
.card-clickable:focus-visible {
  border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 133, 43, 0.15), 0 2px 6px rgba(0,0,0,0.4);
}

/* On hover, ignite the bracket ticks to orange */
.card-clickable:hover .card-brackets,
.card-clickable:focus-visible .card-brackets {
  --bk-color: var(--bk-accent, var(--orange));
}
.card-clickable:hover .card-brackets::before,
.card-clickable:hover .card-brackets::after,
.card-clickable:focus-visible .card-brackets::before,
.card-clickable:focus-visible .card-brackets::after {
  border-color: var(--bk-accent, var(--orange));
  opacity: 1;
}
.card-clickable:hover .card-brackets-tr,
.card-clickable:hover .card-brackets-bl,
.card-clickable:focus-visible .card-brackets-tr,
.card-clickable:focus-visible .card-brackets-bl {
  border-color: var(--bk-accent, var(--orange));
  opacity: 1;
}

/* Lock-on bracket accent — ignites to the category color via --bc. */
.card-accent { --bk-accent: var(--bc, var(--cat-fallback)); }

/* Screen frame — subtle corner-brackets on the screen container */
.screen-frame {
  position: relative;
  --bk-color: rgba(44, 53, 61, 0.4);
}

/* ── Modal ───────────────────────────────────────────────────── */
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes panel-in {
  from { opacity: 0; transform: scale(0.98) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: overlay-in var(--dur) var(--ease-out);
}

.modal-panel {
  position: relative;
  z-index: var(--z-modal);
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  /* CS2 buy-menu chamfered corner on the modal */
  clip-path: var(--clip-corner);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: panel-in var(--dur) var(--ease-out);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.modal-close:hover {
  color: var(--text);
  background-color: var(--card-raised);
}
.modal-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Form fields / inputs ────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--red);
}

/* Base input / select / textarea */
.input,
.select,
.textarea {
  width: 100%;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow   var(--dur-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--focus);
}

/* Numeric / datetime inputs use mono font */
.input-number,
.input-datetime {
  font-family: var(--font-mono);
}

/* Standard text input height */
.input {
  height: 34px;
}

/* Select with custom caret */
.select {
  height: 34px;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A949C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}
.select option {
  background-color: var(--card);
  color: var(--text);
}

/* Textarea — mono, editor feel, resizable vertical */
.textarea {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
  padding: var(--space-3);
  height: auto;
}

/* Error state on inputs */
.input-error,
.select-error,
.textarea-error {
  border-color: var(--red);
}
.input-error:focus,
.select-error:focus,
.textarea-error:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229, 68, 59, 0.25);
}

/* ── Readout ─────────────────────────────────────────────────── */
.readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.readout-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.readout-value-sm {
  font-size: var(--text-lg);
}
.readout-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── EmptyState ──────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 320px;
}
.empty-state-icon {
  font-size: 32px;
  opacity: 0.4;
  color: var(--orange);
}

/* ── TopBar — CS2 command bar ────────────────────────────────── */
/*
   Dark --surface background, thin orange bottom accent rule,
   wordmark in condensed display caps + orange status dot,
   live readouts as mono, Export action as orange HUD button.
*/
.topbar {
  position: sticky;
  top: 0;
  height: 56px;
  background-color: var(--surface);
  /* Orange accent rule — the energy line that makes it CS2 */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 0 0 var(--orange);
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-4);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

/* Wordmark: condensed display caps — core CS2 HUD chrome */
.topbar-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

/* Live session / hours readout: mono, dim */
.topbar-live {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Faint orange-dim separator pill */
  background-color: var(--orange-dim);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
  overflow-x: auto;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

.breadcrumb-seg {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.breadcrumb-seg-clickable {
  cursor: pointer;
  color: var(--orange);
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  transition: color var(--dur-fast) var(--ease);
  padding: 0;
}
.breadcrumb-seg-clickable:hover {
  color: var(--orange-bright);
}
.breadcrumb-sep {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--border-strong);
  user-select: none;
}
.breadcrumb-seg-active {
  color: var(--text);
}

/* ── Section headings — orange leading tick ──────────────────── */
/*
   Section/screen titles carry a small orange leading tick block.
   Applied to the .label class when used as a section heading.
*/
.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.section-heading::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background-color: var(--orange);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── ScreenContainer ─────────────────────────────────────────── */
.screen-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── ScreenTransition ────────────────────────────────────────── */
@keyframes screen-enter-forward {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screen-exit-forward {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-8px); }
}
@keyframes screen-enter-back {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screen-exit-back {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(8px); }
}

.screen-transition-wrapper {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

.screen-entering-forward {
  animation: screen-enter-forward var(--dur) var(--ease-out) both;
}
.screen-exiting-forward {
  animation: screen-exit-forward var(--dur) var(--ease) both;
  pointer-events: none;
}
.screen-entering-back {
  animation: screen-enter-back var(--dur) var(--ease-out) both;
}
.screen-exiting-back {
  animation: screen-exit-back var(--dur) var(--ease) both;
  pointer-events: none;
}

/* Reduced motion — instant crossfade, no translate */
@media (prefers-reduced-motion: reduce) {
  .screen-entering-forward,
  .screen-entering-back {
    animation: overlay-in var(--dur-fast) var(--ease) both;
  }
  .screen-exiting-forward,
  .screen-exiting-back {
    animation: none;
    opacity: 0;
  }
}

/* ── App shell layout ────────────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Overview screen ─────────────────────────────────────────── */
/*
   Desktop-first: 1920x1080 target.
   Content centered at ~1400-1600px with generous gutters.
   4-column session grid at wide viewport, 3 at mid, 2 at narrow.
*/
.overview-screen {
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* height:100% (not just min-height) so this node fills the flex parent
     (.screen-transition-wrapper absolute inset:0) and the flex:1 children
     can push all the way to the bottom of the viewport. */
  min-height: 100%;
  height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

.overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.overview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7);
  color: var(--text-muted);
}

.overview-loading-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.overview-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.overview-error-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

.overview-error-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 360px;
}

/* ── Session list panel — framed container that fills remaining height ── */
/*
   flex:1 on the panel means it absorbs all vertical space below the stats
   band and toolbar, turning the dead charcoal void into a deliberate, framed
   "session roster" area (buy-menu / scoreboard list aesthetic).
   The grid inside uses align-content:start so cards stay at the top;
   excess height is simply the framed background, not a broken void.
*/
.session-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Orange tick on the left — matches session notes panel language */
  border-top: 2px solid var(--orange);
  overflow: hidden;
}

/* Panel header: "SESSIONS" label in condensed caps with count */
.session-list-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.session-list-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Orange accent tick before the title */
.session-list-panel-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 10px;
  background-color: var(--orange);
  margin-right: var(--space-2);
  vertical-align: middle;
}

.session-list-panel-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}

/* Scrollable grid body inside the panel */
.session-list-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  min-height: 0;
}

/* Empty / loading state inside the framed panel — centres its content */
.session-list-panel-body--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Session grid — 4 cols at 1080p, 3 cols mid, 2 cols narrow */
.session-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  /* align-content:start keeps cards anchored to top;
     the framed panel background fills the rest — intentional. */
  align-items: start;
  align-content: start;
}

@media (max-width: 1280px) {
  .session-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .session-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Session card internals */
.session-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.session-card-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.session-card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.session-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.session-card-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

/* Create session form fields */
.create-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.create-form-error {
  font-size: var(--text-sm);
  color: var(--red);
  padding: var(--space-2) var(--space-3);
  background-color: rgba(229, 68, 59, 0.08);
  border: 1px solid rgba(229, 68, 59, 0.3);
  border-radius: var(--radius-sm);
}

.create-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

/* ── Gallery layout helpers ──────────────────────────────────── */
.gallery-section {
  margin-bottom: var(--space-7);
}
.gallery-section-title {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.gallery-page {
  padding: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
}
.gallery-page-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-6);
}

/* ── Responsive grid helpers ─────────────────────────────────── */
.grid-2-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 600px) {
  .grid-2-1 {
    grid-template-columns: 1fr;
  }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
}

/* ── Session screen ──────────────────────────────────────────── */
.session-screen {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

/* Session header */
.session-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.session-header-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Inline-edit: display mode */
.session-name-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.session-name-btn:hover {
  border-color: var(--border);
  background-color: var(--card-raised);
}
.session-name-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.session-name-edit-icon {
  font-size: var(--text-sm);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.session-name-btn:hover .session-name-edit-icon,
.session-name-btn:focus-visible .session-name-edit-icon {
  opacity: 1;
}

/* Inline-edit: edit mode */
.session-name-input {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  background-color: var(--surface);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: var(--space-1) var(--space-2);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 0 0 3px var(--focus);
}
.session-name-input:focus {
  outline: none;
}

/* Session header meta rows */
.session-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.session-header-meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.session-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Rep card internals */
.rep-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rep-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rep-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.rep-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.rep-card-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

/* Session notes section */
.session-notes-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.session-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.session-notes-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

.session-notes-textarea {
  min-height: 180px;
}

.session-notes-error-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Save-state indicator */
.save-indicator {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* unsaved = orange (energy: attention needed) */
.save-indicator-unsaved { color: var(--orange); }
/* saving = muted (in-flight) */
.save-indicator-saving  { color: var(--text-muted); }
/* saved = CT blue (calm/confirmed) */
.save-indicator-saved   { color: var(--blue); }
.save-indicator-error   { color: var(--red); }

/* Rep grid: 4 cols at wide, 3 at mid */
@media (max-width: 1280px) {
  .session-screen .session-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .session-screen .session-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Rep detail screen ───────────────────────────────────────── */
.rep-screen {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100%;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Rep header */
.rep-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.rep-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.rep-header-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.rep-header-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
  margin: 0;
}

.rep-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Metadata section */
.rep-meta-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  clip-path: var(--clip-corner);
}

.rep-meta-form {
  width: 100%;
}

.rep-meta-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
}

/* Notes section */
.rep-notes-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.rep-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.rep-notes-textarea {
  min-height: 280px;
  flex: 1;
}

/* Delete confirmation modal body */
.rep-delete-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rep-delete-confirm-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.rep-delete-confirm-text strong {
  color: var(--text);
}

/* ── Export screen ───────────────────────────────────────────── */

.export-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  min-height: 400px;
}

/* Header row: label + selection count */
.export-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.export-selection-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Selection quick-action controls */
.export-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.export-controls-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Session list */
.export-session-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}

/* Individual session row */
.export-session-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease);
  user-select: none;
}

.export-session-row:last-child {
  border-bottom: none;
}

.export-session-row:hover {
  background-color: var(--card-raised);
}

.export-session-row:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Custom checkbox — matches CS2 theme */
.export-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background-color: var(--surface);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

.export-checkbox:checked {
  background-color: var(--orange);
  border-color: var(--orange);
}

.export-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--black);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.export-checkbox:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.export-session-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-session-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.export-session-reps {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Options section (preamble toggle) */
.export-options {
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.export-preamble-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.export-preamble-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.4;
}

.export-preamble-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* Error banner */
.export-error {
  font-size: var(--text-sm);
  color: var(--red);
  padding: var(--space-2) var(--space-3);
  background-color: rgba(229, 68, 59, 0.08);
  border: 1px solid rgba(229, 68, 59, 0.3);
  border-radius: var(--radius-sm);
}

/* Action bar */
.export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.export-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-right: auto;
}

/* ── Phase 9: Overview scoreboard stats band ─────────────────── */
/*
   CS2 scoreboard header row: 4 aggregate stats in condensed caps + mono
   readouts. Orange dividers. Fills the top of the canvas meaningfully.
*/
.overview-stats-band {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Subtle orange accent rule at the top — scoreboard energy */
  border-top: 2px solid var(--orange);
  clip-path: var(--clip-corner);
  padding: 0;
  overflow: hidden;
}

.overview-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

.overview-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.overview-stat-label {
  /* inherits .label — condensed caps, text-muted */
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

/* Thin orange dividers between stats */
.overview-stat-divider {
  width: 1px;
  height: 40px;
  background-color: var(--border);
  flex-shrink: 0;
}

/* ── Phase 9: Session screen two-column layout ───────────────── */
/*
   Scoreboard bar at the top, then a two-column body:
     Left  — rep grid
     Right — session notes panel (console-style, taller)
   At narrow viewports collapses to single column.
*/

/* Override the old flex-column layout to accommodate the new structure */
.session-screen {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

/* Scoreboard header bar — replaces the old session-header stacked layout */
.session-scoreboard-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 2px solid var(--orange);
  clip-path: var(--clip-corner);
  flex-wrap: wrap;
}

.session-scoreboard-name {
  flex: 1;
  min-width: 200px;
}

.session-scoreboard-meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.session-scoreboard-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.session-scoreboard-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Two-column body: rep grid left, notes right */
.session-body-columns {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-5);
  flex: 1;
  align-items: start;
  min-height: 0;
}

@media (max-width: 1100px) {
  .session-body-columns {
    grid-template-columns: 1fr;
  }
}

/* Left column: rep grid area */
.session-rep-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Right column: session notes panel */
.session-notes-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Console-style — subtle left orange tick */
  border-left: 2px solid var(--orange);
  padding: var(--space-4);
  /* Fill available height to match the rep grid */
  align-self: stretch;
  min-height: 400px;
}

.session-notes-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.session-notes-panel-textarea {
  flex: 1;
  min-height: 300px;
  resize: none;
  /* Fill the panel height */
  height: 100%;
}

/* Ensure the textarea grows within the panel */
.session-notes-panel .textarea {
  flex: 1;
  min-height: 300px;
}

/* Rep grid within session screen — 3 cols at 1080p in the left column */
.session-rep-column .session-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1400px) {
  .session-rep-column .session-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  .session-rep-column .session-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .session-rep-column .session-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Phase 9: Rep detail screen two-column layout ────────────── */
/*
   Header bar at top; two-column body:
     Left  — metadata edit panel
     Right — notes editor full-height (inspect/loadout feel)
*/
.rep-screen {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   Matches (v2) — CS2-broadcast redesign
   EDGE-style table with cinematic map thumbnails.
   All values from tokens.css only.
   ============================================================ */

/* Screen header row */
.matches-v2-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.matches-v2-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  margin: 0;
}

.matches-v2-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-right: auto;
}

/* Filter bar extras */
.matches-v2-filterbar {
  margin-bottom: var(--space-3);
}

.matches-v2-filter-input {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  height: 28px;
  width: 160px;
  transition: border-color var(--dur-fast) var(--ease);
}

.matches-v2-filter-input:focus {
  outline: none;
  border-color: var(--orange);
}

.matches-v2-filter-input::placeholder {
  color: var(--text-muted);
}

.matches-v2-type-group {
  display: flex;
  gap: var(--space-1);
}

.matches-v2-filter-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Table wrapper */
.matches-v2-table-wrap {
  overflow-x: auto;
}

.matches-v2-table {
  min-width: 640px;
}

/* Column widths */
.matches-v2-th--map {
  width: 140px;
}

/* Rows — use vk-table baseline + win/loss edge from vk-row--* */
.matches-v2-row td {
  vertical-align: middle;
  padding: var(--space-2) var(--space-3);
}

/* Map thumbnail cell */
.matches-v2-cell--map {
  padding: var(--space-1) var(--space-2) !important;
  width: 140px;
}

.matches-v2-thumb {
  position: relative;
  width: 130px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: flex-end;
}

.matches-v2-thumb__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
  filter: brightness(0.40) saturate(0.75);
  z-index: 0;
}

.matches-v2-thumb__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(14,17,20,0.80) 0%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
}

.matches-v2-thumb__name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0 var(--space-2) 4px;
  white-space: nowrap;
}

.matches-v2-cell--title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matches-v2-cell--date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.matches-v2-cell--score {
  white-space: nowrap;
}

.matches-v2-score-val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: var(--space-1);
}

.matches-v2-cell--action {
  text-align: right;
}

.matches-v2-open-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.matches-v2-open-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.matches-v2-drop-hint {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* ============================================================
   Match Detail (v2) — cinematic banner header
   ============================================================ */

/* Back nav strip above the banner */
.match-detail-backnav {
  padding: var(--space-3) 0 var(--space-2);
}

/* Cinematic banner: extends to full available width */
.match-detail-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  min-height: 200px;
  border: 1px solid var(--border);
}

/* Left content area inside the banner */
.match-detail-banner__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 440px;
}

.match-detail-banner__badges {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Humanized map name — large italic display */
.match-detail-banner__mapname {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.05;
}

/* Italic score (uses vk-display--italic from kit.css) */
.match-detail-banner__score {
  font-size: 44px;
  color: var(--orange);
  letter-spacing: -0.02em;
}

/* Team identity label */
.match-detail-banner__teams {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Played date */
.match-detail-banner__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Watch replay + actions */
.match-detail-banner__actions {
  margin-top: var(--space-1);
  display: flex;
  gap: var(--space-2);
}

/* Multikills column — wider to fit "2×4K · 1×3K" style strings */
.adv-sb-col-multikill {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  min-width: 120px;
}

.adv-sb-cell-multikill {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
  vertical-align: middle;
}


/* Two-column body */
.rep-body-columns {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-5);
  flex: 1;
  align-items: start;
  min-height: 0;
}

@media (max-width: 1000px) {
  .rep-body-columns {
    grid-template-columns: 1fr;
  }
}

/* Left column: metadata panel */
.rep-meta-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Right column: notes editor */
.rep-notes-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-4);
  align-self: stretch;
  min-height: 500px;
}

/* Full-height textarea in the notes editor */
.rep-notes-textarea-full {
  flex: 1;
  min-height: 400px;
  resize: none;
  height: 100%;
}

/* ── Phase 9: Export screen two-column layout ────────────────── */
/*
   Header row at top; two-column body:
     Left  — selection list + options + actions (~420px)
     Right — live preview textarea (fills remaining space)
*/
.export-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  min-height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

/* Two-column body */
.export-body-columns {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-5);
  flex: 1;
  align-items: start;
  min-height: 0;
}

@media (max-width: 1100px) {
  .export-body-columns {
    grid-template-columns: 1fr;
  }
}

/* Left column: selection + options + actions */
.export-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Session list: no fixed max-height in the left column — let it grow */
.export-left-column .export-session-list {
  max-height: 480px;
}

/* Right column: live preview pane */
.export-preview-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-4);
  align-self: stretch;
  min-height: 500px;
}

.export-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.export-preview-chars {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.export-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
}

.export-preview-placeholder-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.export-preview-error-text {
  font-size: var(--text-sm);
  color: var(--red);
  font-family: var(--font-mono);
  text-align: center;
  padding: var(--space-3);
}

/* Preview textarea: read-only, mono, fills height, no resize handle */
.export-preview-textarea {
  flex: 1;
  width: 100%;
  min-height: 400px;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  padding: var(--space-3);
  resize: none;
  cursor: default;
  /* Slightly dimmed — indicates read-only content */
  opacity: 0.85;
}
.export-preview-textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}

/* ── Categories screen (Phase 12b) ───────────────────────────────── */
/*
   Scoreboard-style toolbar at the top, then a two-column body:
     Left  — framed category list (colour swatch + label + title count)
     Right — selected category titles editor (framed panel, full-height)
   Fills the canvas; no dead void.
*/

.cat-screen {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
}

/* Toolbar: section heading + action buttons */
.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius);
  clip-path: var(--clip-corner);
  flex-wrap: wrap;
}

.cat-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cat-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Two-column body: category list left, titles editor right */
.cat-body-columns {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-5);
  flex: 1;
  align-items: start;
  min-height: 0;
}

@media (max-width: 900px) {
  .cat-body-columns {
    grid-template-columns: 1fr;
  }
}

/* ── Left column: framed category list ────────────────────────── */
.cat-list-panel {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 480px;
}

.cat-list-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cat-list-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}

/* Orange accent tick before the title — matches session-list-panel pattern */
.cat-list-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 10px;
  background-color: var(--orange);
  margin-right: var(--space-2);
  vertical-align: middle;
}

.cat-list-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cat-list-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

/* Each category row in the list */
.cat-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
  min-height: 40px;
}

.cat-list-row:hover {
  background-color: var(--card);
}

.cat-list-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.cat-list-row-active {
  background-color: var(--card-raised);
  border-left: 2px solid var(--orange);
  padding-left: calc(var(--space-4) - 2px);
}

/* Colour swatch — 10×10 square, category colour */
.cat-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Label in the list row */
.cat-list-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-list-title-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* "Add new category" row at bottom of the list */
.cat-list-add-form-row {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}

/* ── Right column: framed titles panel ────────────────────────── */
.cat-titles-panel {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-4);
  align-self: stretch;
  min-height: 480px;
  gap: var(--space-4);
}

.cat-titles-panel-empty {
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
}

.cat-titles-empty-hint {
  color: var(--text-muted);
  text-align: center;
}

.cat-titles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cat-titles-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cat-titles-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cat-titles-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cat-titles-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.cat-titles-empty-msg {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  padding: var(--space-3) 0;
}

/* Titles list */
.cat-titles-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Single title row */
.cat-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 38px;
}

.cat-title-row:last-child {
  border-bottom: none;
}

.cat-title-row:hover {
  background-color: var(--card-raised);
}

/* Bullet dot */
.cat-title-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--border-strong);
  flex-shrink: 0;
}

.cat-title-label {
  flex: 1;
  min-width: 0;
}

/* Remove button: small, tucked right */
.cat-title-remove-btn {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

.cat-title-row:hover .cat-title-remove-btn,
.cat-title-row:focus-within .cat-title-remove-btn {
  opacity: 1;
}

/* ── Shared inline-edit controls ────────────────────────────────── */

/* Inline text button — click to edit */
.cat-label-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 2px var(--space-1);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cat-label-btn:hover {
  border-color: var(--border);
  background-color: var(--card-raised);
}

.cat-label-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.cat-label-edit-icon {
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

.cat-label-btn:hover .cat-label-edit-icon,
.cat-label-btn:focus-visible .cat-label-edit-icon {
  opacity: 1;
}

/* Inline input — active editing state */
.cat-inline-input {
  width: 100%;
  background-color: var(--surface);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 2px var(--space-2);
  height: 30px;
  box-shadow: 0 0 0 3px var(--focus);
}

.cat-inline-input:focus {
  outline: none;
}

/* Error text in category forms */
.cat-form-error {
  font-size: var(--text-xs);
  color: var(--red);
  display: block;
}

/* Add-category / add-title form */
.cat-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cat-title-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.cat-add-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* "Add new" ghost link button — sits below the list */
.cat-add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  text-align: left;
}

.cat-add-btn:hover {
  color: var(--orange);
  background-color: var(--card);
}

.cat-add-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* ── Inline quick-add widget (dropdowns in session/rep forms) ────── */
/*
   A small expandable input that slides in below the select when
   "+ New category…" or "+ New title…" is chosen.
*/
.quick-add-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quick-add-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.quick-add-input {
  flex: 1;
  background-color: var(--surface);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  height: 30px;
  box-shadow: 0 0 0 2px var(--focus);
}

.quick-add-input:focus {
  outline: none;
}

.quick-add-error {
  font-size: var(--text-xs);
  color: var(--red);
}

/* hint text below form controls */
.create-form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* ── Session FOCUS callout (Phase 13) ────────────────────────── */
/*
   CS2 HUD objective strip: orange leading bar, condensed-caps eyebrow
   label "SESSION FOCUS", goal text. Sits between the scoreboard bar
   and the two-column body. Angular + restrained — one deliberate element.
*/
.session-focus-callout {
  display: flex;
  align-items: stretch;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Orange left bar — the same console-tick treatment used on session notes */
  border-left: 3px solid var(--orange);
  overflow: hidden;
  clip-path: var(--clip-corner);
}

/* The content area — eyebrow label + goal text side by side */
.session-focus-inner {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  min-width: 0;
}

/* "SESSION FOCUS" eyebrow — condensed display caps, same as section headings */
.session-focus-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  flex-shrink: 0;
  line-height: 1.6;
}

/* Goal text — readable body weight, slightly emphasized */
.session-focus-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
  min-width: 0;
}

/* Edit trigger button — wraps the goal text, activates inline editor */
.session-focus-btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px var(--space-2);
  text-align: left;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
  flex: 1;
  min-width: 0;
}

.session-focus-btn:hover {
  border-color: var(--border);
  background-color: var(--card-raised);
}

.session-focus-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.session-focus-edit-icon {
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  flex-shrink: 0;
  align-self: center;
}

.session-focus-btn:hover .session-focus-edit-icon,
.session-focus-btn:focus-visible .session-focus-edit-icon {
  opacity: 1;
}

/* Inline input — active editing state, same orange ring as name editor */
.session-focus-input {
  flex: 1;
  background-color: var(--surface);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  height: 32px;
  box-shadow: 0 0 0 3px var(--focus);
  min-width: 0;
}

.session-focus-input:focus {
  outline: none;
}

/* No-goal affordance — muted ghost with a subtle + trigger */
.session-focus-unset {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
  min-width: 0;
}

/* The "Set a focus" button inside the no-goal affordance */
.session-focus-set-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: italic;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition:
    color var(--dur-fast) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease);
}

.session-focus-set-btn:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

.session-focus-set-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Header FOCUS band (Feature Set 3) ───────────────────────── */
/*
   Full-width wrapper rendered between the Breadcrumb and the ScreenContainer.
   Sits OUTSIDE the ScreenTransition so it does not fade/slide on screen swaps.
   The inner .session-focus-callout handles the orange bar, eyebrow, and text.
   This wrapper only provides the horizontal padding + bottom separator that
   matches the breadcrumb / topbar zone.
*/
.header-focus-band {
  padding: 0 var(--space-6) var(--space-2);
  /* Compact: less vertical breathing room than the body callout */
}

/* On a full-width header strip the body callout's corner chamfer leaves a
   thin stray bracket at the right edge — drop the clip here for a clean edge. */
.header-focus-band .session-focus-callout {
  clip-path: none;
}

/* ── Matches screen (A8) ─────────────────────────────────────── */

.matches-screen {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  width: 100%;
  position: relative; /* for drop overlay */
}

/* Match grid: 5 cols at 1080p, 4 at mid, 3 at narrow */
.match-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  align-items: start;
  align-content: start;
}

@media (max-width: 1400px) {
  .match-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .match-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .match-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Match card */
.match-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.match-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.match-card-map {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
}

.match-card-badges {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Reference badge override: use CT-blue */
.match-card-ref-badge {
  --bc: var(--blue);
}

.match-card-result {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--card-raised);
  color: var(--text-muted);
}

.match-card-result--win {
  background-color: var(--green-dim);
  color: var(--green);
}

.match-card-result--loss {
  background-color: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}

.match-card-score {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.match-card-stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.match-card-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.match-card-stat-value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.match-card-date {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Ingestion status strip */
.match-ingestion-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.match-ingestion-strip-stats {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.match-ingestion-strip-sep {
  color: var(--border-strong);
  font-size: var(--text-xs);
}

.match-ingestion-quarantine {
  color: var(--tan);
}

/* Watcher status dot */
.match-ingestion-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.match-ingestion-dot--live  { background-color: var(--blue); }
.match-ingestion-dot--off   { background-color: var(--border-strong); }

/* Parser-needs-update / last-error banner */
.match-ingestion-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid;
}
.match-ingestion-banner--warn {
  background-color: color-mix(in srgb, var(--tan) 10%, transparent);
  border-color: color-mix(in srgb, var(--tan) 30%, transparent);
  color: var(--tan);
}
.match-ingestion-banner--error {
  background-color: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
}
.match-ingestion-banner-icon {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  flex-shrink: 0;
  line-height: 1.4;
}

/* In-app toast */
.match-toast {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--card-raised);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-modal);
  animation: overlay-in var(--dur) var(--ease-out);
  max-width: 360px;
}

.match-toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
  transition: color var(--dur-fast) var(--ease);
}
.match-toast-close:hover { color: var(--text); }

/* Import error inline banner */
.match-import-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: rgba(229, 68, 59, 0.08);
  border: 1px solid rgba(229, 68, 59, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--red);
}

/* Importing in-progress bar */
.match-importing-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--orange-dim);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* Drag-drop overlay */
.match-drop-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 17, 20, 0.88);
  border: 2px dashed var(--orange);
  border-radius: var(--radius-lg);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlay-in var(--dur-fast) var(--ease-out);
}

.match-drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.match-drop-overlay-icon {
  font-size: 48px;
  color: var(--orange);
  line-height: 1;
}

.match-drop-overlay-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.match-drop-overlay-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Drop hint strip at the bottom */
.match-drop-hint {
  padding: var(--space-2) 0;
  text-align: center;
}

.match-drop-hint .label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  word-break: break-all;
}

/* ── Match detail screen (A8) ────────────────────────────────── */

.match-detail-screen {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.match-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.match-detail-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.match-detail-score {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
}

.match-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Reference demo notice */
.match-reference-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--blue);
}

/* Section container */
.match-detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.match-section-header {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* Stat tile grid */
.match-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.match-stat-grid--sm .match-stat-tile {
  min-width: 70px;
}

.match-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 90px;
}

.match-stat-tile--accent {
  border-color: var(--border-strong);
  background-color: var(--card);
}

.match-stat-tile--dim {
  opacity: 0.65;
  border-style: dashed;
}

.match-stat-tile-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.match-stat-tile-label {
  font-size: var(--text-label);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.match-stat-tile-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.03em;
  text-transform: none;
  font-family: var(--font-sans);
  line-height: 1.3;
}

/* Rating 2.0 row — secondary, de-emphasised */
.match-rating20-row {
  margin-top: var(--space-2);
}

/* ── Baseline delta (D13) ────────────────────────────────────── */
/* Rendered below each stat tile value when rolling baseline data is present. */

.match-baseline-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

/* The trailing average (e.g. "139.9") */
.match-baseline-avg {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1;
}

/* Signed delta (e.g. "+18" or "−3") — tinted by direction */
.match-baseline-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.match-baseline-delta--pos {
  color: var(--blue);   /* CT steel-blue = calm / confirming improvement */
}

.match-baseline-delta--neg {
  color: var(--tan);    /* T-side gold = regression, visible but not alarming */
}

/* "vs last N" suffix label */
.match-baseline-n {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

/* Insufficient-history notice */
.match-baseline-insufficient {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  font-style: italic;
}

/* Side splits */
.match-splits-grid {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.match-splits-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.match-splits-side-label {
  font-size: var(--text-label);
  color: var(--orange);
  letter-spacing: 0.12em;
}

/* Scoreboard table */
.match-scoreboard {
  overflow-x: auto;
}

.match-scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.match-scoreboard-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.match-scoreboard-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
}

.match-scoreboard-name {
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-scoreboard-row:last-child td {
  border-bottom: none;
}

/* ── Advanced Scoreboard (G3-F) ───────────────────────────────── */
/*
 * Two-team layout: CT team (team A) on top, T team (team B) below.
 * Each team has a colored header bar, then a horizontally-scrollable table.
 * CT accents use --blue; T accents use --tan.
 * Owner row highlighted with a subtle --orange tint.
 */

.adv-sb-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.adv-sb-team {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.adv-sb-team-header {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.adv-sb-team-header--ct {
  background-color: color-mix(in srgb, var(--blue) 14%, transparent);
  border-bottom: 2px solid var(--blue);
  color: var(--blue);
}

.adv-sb-team-header--t {
  background-color: color-mix(in srgb, var(--tan) 14%, transparent);
  border-bottom: 2px solid var(--tan);
  color: var(--tan);
}

.adv-sb-scroll {
  overflow-x: auto;
}

.adv-sb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 800px;
}

.adv-sb-table th {
  text-align: right;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

.adv-sb-table th.adv-sb-col-player,
.adv-sb-table th.adv-sb-col-multik {
  text-align: left;
}

.adv-sb-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

.adv-sb-col-player { min-width: 140px; }
.adv-sb-col-num    { min-width: 52px; }
.adv-sb-col-multik { min-width: 100px; }

.adv-sb-cell-player {
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.adv-sb-name {
  font-family: var(--font-sans);
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adv-sb-cell-num {
  text-align: right;
}

.adv-sb-cell-multik {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.72rem);
  color: var(--text-muted);
}

/* Positive/negative coloring for rating and impact */
.adv-sb-num--pos { color: var(--blue); }
.adv-sb-num--neg { color: var(--text-muted); }

/* Owner row highlight */
.adv-sb-row--owner td {
  background-color: color-mix(in srgb, var(--orange) 8%, transparent);
}

.adv-sb-row--owner .adv-sb-name {
  color: var(--orange);
  font-weight: 600;
}

.adv-sb-row:last-child td {
  border-bottom: none;
}

.adv-sb-row:hover td {
  background-color: var(--card);
}

/* Loading / error states */
.adv-sb-loading {
  color: var(--text-muted);
  padding: var(--space-3) 0;
}

.adv-sb-error {
  color: var(--red);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
}

/* Selected row highlight */
.adv-sb-row--selected td {
  background-color: color-mix(in srgb, var(--orange) 12%, transparent);
}

.adv-sb-row--selected .adv-sb-name {
  color: var(--orange-bright);
}

.adv-sb-selected-indicator {
  font-size: var(--text-xs, 0.72rem);
  color: var(--orange);
  margin-left: var(--space-1);
}

/* Hint text below scoreboard header */
.adv-sb-hint {
  color: var(--text-muted);
  font-size: var(--text-xs, 0.72rem);
  margin-bottom: var(--space-2);
}

/* ── Player deep-stats panel ──────────────────────────────────── */

.deep-stats-panel {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background-color: var(--surface);
  overflow: hidden;
}

.deep-stats-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--orange) 8%, transparent);
}

.deep-stats-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text);
  flex: 1;
}

.deep-stats-side-badge {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.deep-stats-side-badge--ct {
  background-color: color-mix(in srgb, var(--blue) 18%, transparent);
  color: var(--blue);
}

.deep-stats-side-badge--t {
  background-color: color-mix(in srgb, var(--tan) 18%, transparent);
  color: var(--tan);
}

.deep-stats-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.15s;
}

.deep-stats-close:hover {
  color: var(--text);
}

.deep-stats-body {
  padding: var(--space-4);
}

.deep-stats-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.deep-stats-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.deep-stats-section-title {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.deep-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.deep-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 3px var(--space-1);
  border-radius: var(--radius-sm);
}

.deep-stat-row--accent {
  background-color: color-mix(in srgb, var(--orange) 6%, transparent);
}

.deep-stat-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.deep-stat-value {
  color: var(--text);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Methodology disclosure */
.match-methodology {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.match-methodology-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0;
  transition: color var(--dur-fast) var(--ease);
  text-align: left;
  width: 100%;
}

.match-methodology-toggle:hover { color: var(--orange); }
.match-methodology-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.match-methodology-body {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.match-methodology-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}

.match-methodology-list dt {
  color: var(--text-muted);
  white-space: nowrap;
}

.match-methodology-list dd {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  font-family: var(--font-mono);
}

.match-methodology-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-sans);
  grid-column: 2;
  padding-bottom: var(--space-2);
}

/* ── Settings screen (A9) ────────────────────────────────────── */

.settings-screen {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 100%;
  max-width: 800px;
  width: 100%;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-section-title {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--orange);
  letter-spacing: 0.14em;
  font-size: var(--text-label);
}

.settings-config-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-config-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  min-height: 38px;
}

.settings-config-row:last-child {
  border-bottom: none;
}

.settings-config-label {
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.settings-config-value {
  font-size: var(--text-sm);
  color: var(--text);
  text-align: right;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.settings-value--warn {
  color: var(--tan);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-feedback {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.settings-feedback--ok {
  background-color: color-mix(in srgb, var(--blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--blue) 25%, transparent);
  color: var(--blue);
}

.settings-feedback--err {
  background-color: rgba(229, 68, 59, 0.08);
  border-color: rgba(229, 68, 59, 0.3);
  color: var(--red);
}

.settings-readonly-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.settings-readonly-note code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background-color: var(--card-raised);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
}

/* ============================================================
   VANTAGE SHELL — sidebar layout
   Appended 2026-06-25. Overrides the old column shell below.
   ============================================================ */

/* ── Shell layout override ───────────────────────────────────── */
.app-shell {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: row;  /* sidebar | main */
  overflow: hidden;
}

.app-shell-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* prevent flex blowout */
}

/* app-shell-body is now inside .app-shell-main */
.app-shell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(
      -58deg,
      var(--sidebar-texture) 0px,
      var(--sidebar-texture) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(
      to bottom,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 85%, var(--card)) 100%
    );
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* ── Wordmark ────────────────────────────────────────────────── */
.sidebar-wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-wordmark-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0.18em;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1;
}

/* ── Nav lists ───────────────────────────────────────────────── */
/* Primary nav grows to absorb available sidebar height so items
   fill the space rather than clustering at the top. */
.sidebar-nav {
  flex-shrink: 0;
  padding: var(--space-3) 0;
}

/* Primary nav gets flex:1 so it expands and spreads items down */
.sidebar > .sidebar-nav:not(.sidebar-nav--secondary) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

/* Primary nav items sit at the top with a normal, tight gap (no spread-to-fill) */
.sidebar > .sidebar-nav:not(.sidebar-nav--secondary) .sidebar-nav-list {
  justify-content: flex-start;
  gap: var(--space-2);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: left;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.sidebar-nav-item:hover {
  color: var(--text);
  background-color: var(--card);
}

.sidebar-nav-item--active {
  color: var(--blue);
  border-left-color: var(--blue);
  background-color: rgba(90, 159, 212, 0.08);
}

.sidebar-nav-item--active:hover {
  background-color: rgba(90, 159, 212, 0.12);
}

.sidebar-nav-item--disabled {
  color: var(--text-disabled, var(--text-muted));
  opacity: 0.5;
  cursor: default;
  border-left-color: transparent;
  background: none;
}

.sidebar-nav-item--small {
  font-size: var(--text-sm);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.sidebar-nav-icon {
  font-size: 1.1rem;
  width: 1.4em;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-nav-label {
  flex: 1;
}

.sidebar-nav-soon {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background-color: var(--card-raised);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  opacity: 0.7;
}

/* ── Divider ─────────────────────────────────────────────────── */
.sidebar-divider {
  height: 1px;
  background-color: var(--border);
  margin: 0 var(--space-3);
  flex-shrink: 0;
}

.sidebar-nav--secondary {
  padding-top: var(--space-2);
}

/* ── Sidebar bottom ──────────────────────────────────────────── */
.sidebar-bottom {
  margin-top: auto;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Ingestion status pill ───────────────────────────────────── */
.sidebar-ingestion-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  background-color: var(--card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.sidebar-ingestion-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--border-strong);
  flex-shrink: 0;
}

.sidebar-ingestion-dot--live {
  background-color: var(--green);
  box-shadow: 0 0 4px rgba(91, 168, 107, 0.5);
}

.sidebar-ingestion-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Import CTA button ───────────────────────────────────────── */
.sidebar-import-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background-color: var(--orange-dim);
  border: 1px solid rgba(232, 133, 43, 0.3);
  border-radius: var(--radius-sm);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sidebar-import-cta:hover {
  background-color: rgba(232, 133, 43, 0.2);
  border-color: rgba(232, 133, 43, 0.5);
}

/* ── Profile chip ────────────────────────────────────────────── */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--card-raised);
  border: 1px solid var(--border);
}

.sidebar-profile-icon {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sidebar-profile-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   VANTAGE SCREENS — Dashboard, Matches table, Stats, Import
   Appended 2026-06-25. All values use tokens only.
   ============================================================ */

/* ── Shared screen pad ───────────────────────────────────────── */
.screen-pad {
  padding: var(--space-6) var(--space-7);
  overflow-y: auto;
  flex: 1;
  height: 100%;
}

/* ── Dashboard ───────────────────────────────────────────────── */
.dash-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.dash-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: var(--space-3);
}

.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dash-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.dash-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}

.dash-quick-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Dashboard summary strip ─────────────────────────────────── */
.dash-summary-strip {
  display: flex;
  gap: var(--space-1);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}

.dash-summary-stat {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--border);
}

.dash-summary-stat:last-child {
  border-right: none;
}

.dash-summary-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.dash-summary-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

/* ── Dashboard body grid ─────────────────────────────────────── */
.dash-body-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1100px) {
  .dash-body-grid {
    grid-template-columns: 1fr;
  }
}

.dash-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.dash-section-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--blue);
  padding: 0;
}

.dash-section-link:hover { text-decoration: underline; }

/* ── Dashboard recent match mini cards ───────────────────────── */
.dash-matches-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dash-match-card {
  flex: 1;
  min-width: 130px;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background-color 0.12s ease;
  border-top-width: 3px;
  border-top-color: var(--border-strong);
}

.dash-match-card:hover {
  background-color: var(--card-raised);
  border-color: var(--border-strong);
}

.dash-match-card--win  { border-top-color: var(--green); }
.dash-match-card--loss { border-top-color: var(--red); }

.dash-match-card-result {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.dash-match-card--win  .dash-match-card-result { color: var(--green); }
.dash-match-card--loss .dash-match-card-result { color: var(--red); }

.dash-match-card-map {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}

.dash-match-card-score {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
}

.dash-match-card-stats {
  display: flex;
  gap: var(--space-3);
}

.dash-match-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-match-card-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-match-card-stat-val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
}

.dash-match-card-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: auto;
}

/* ── Dashboard session list ──────────────────────────────────── */
.dash-sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dash-session-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

.dash-session-row:hover {
  background-color: var(--card-raised);
  border-color: var(--border-strong);
}

.dash-session-row-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-session-row-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.dash-session-row-dur {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Matches table ───────────────────────────────────────────── */
.matches-table-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.matches-table-title {
  font-family: var(--font-display);
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.matches-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.matches-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.matches-table-th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.matches-table-th--stat {
  text-align: right;
}

.match-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.1s ease;
}

.match-table-row:hover { background-color: var(--card); }
.match-table-row:last-child { border-bottom: none; }

.match-table-cell {
  padding: var(--space-3) var(--space-3);
  color: var(--text);
  vertical-align: middle;
}

.match-table-cell--map {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.match-table-cell--date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.match-table-cell--score {
  white-space: nowrap;
}

.match-table-cell--stat {
  font-family: var(--font-mono);
  text-align: right;
}

/* Rating column — subtle surface tint to distinguish the highlighted metric */
.matches-table-th--rating,
.match-table-cell--rating {
  background-color: rgba(232, 133, 43, 0.05);
  color: var(--orange);
}

.match-table-cell--actions {
  text-align: right;
  white-space: nowrap;
}

.match-table-result {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}

.match-table-result--win  { color: var(--green); }
.match-table-result--loss { color: var(--red); }

.match-table-action {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  margin-left: var(--space-1);
  background-color: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.match-table-action:hover {
  background-color: var(--border);
  color: var(--text);
}

.match-table-action--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.match-table-action--disabled:hover {
  background-color: var(--card-raised);
  color: var(--text);
}

/* ── Matches filter bar (F6) ─────────────────────────────────── */
.matches-filter-bar {
  margin-bottom: var(--space-4);
}

.matches-filter-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.matches-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.matches-filter-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.matches-filter-input {
  padding: var(--space-1) var(--space-2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 2px);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  min-width: 160px;
  outline: none;
  transition: border-color 0.15s ease;
}

.matches-filter-input:focus {
  border-color: var(--blue);
}

.matches-filter-field--type {
  flex-shrink: 0;
}

.matches-filter-type-btns {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 2px);
  overflow: hidden;
}

.matches-filter-type-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.matches-filter-type-btn:last-child {
  border-right: none;
}

.matches-filter-type-btn:hover {
  background: var(--card-raised);
  color: var(--text);
}

.matches-filter-type-btn--active {
  background: var(--blue);
  color: var(--white);
}

.matches-filter-type-btn--active:hover {
  background: var(--blue);
  color: var(--white);
}

.matches-filter-clear {
  align-self: flex-end;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 2px);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.matches-filter-clear:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

/* ============================================================
   Settings (v2) — redesigned full-canvas layout
   Uses vk- kit primitives; tokens-only values.
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────────── */

.settings-v2-screen {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 100%;
}

/* ── Page header ─────────────────────────────────────────────── */

.settings-v2-page-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.settings-v2-page-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

/* ── Section wrapper ─────────────────────────────────────────── */

.settings-v2-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Top row: status + categories side by side ───────────────── */

.settings-v2-top-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 820px) {
  .settings-v2-top-row {
    grid-template-columns: 1fr;
  }
}

/* Primary card wraps its section content */
.settings-v2-card--primary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* Secondary card — slightly raised */
.settings-v2-card--secondary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* ── Status tiles row ────────────────────────────────────────── */

.settings-v2-status-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .settings-v2-status-tiles {
    grid-template-columns: 1fr;
  }
}

/* Watcher active/inactive row inside the tile */
.settings-v2-watcher-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-v2-watcher-text {
  font-size: var(--text-xl);
}

.settings-v2-watcher-text--inactive {
  color: var(--text-muted);
}

/* Status dot indicator */
.settings-v2-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-v2-dot--ok   { background: var(--green); }
.settings-v2-dot--warn { background: var(--tan); }

/* Warn value in tiles */
.settings-v2-warn-value {
  color: var(--tan);
}

/* Last error row */
.settings-v2-last-error {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(229, 68, 59, 0.08);
  border: 1px solid rgba(229, 68, 59, 0.25);
  border-radius: var(--radius-sm);
}

.settings-v2-error-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--red);
  word-break: break-all;
}

/* ── Actions row ─────────────────────────────────────────────── */

.settings-v2-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Note text ───────────────────────────────────────────────── */

.settings-v2-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Feedback banners ────────────────────────────────────────── */

.settings-v2-feedback {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.settings-v2-feedback--ok {
  background-color: color-mix(in srgb, var(--blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--blue) 25%, transparent);
  color: var(--blue);
}

.settings-v2-feedback--err {
  background-color: rgba(229, 68, 59, 0.08);
  border-color: rgba(229, 68, 59, 0.3);
  color: var(--red);
}

/* ── Config table ────────────────────────────────────────────── */

.settings-v2-config-table {
  /* override default vk-table th cursor since no sorting here */
}

.settings-v2-config-table th {
  cursor: default;
}

.settings-v2-td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.settings-v2-td:last-child { }

tr:last-child .settings-v2-td {
  border-bottom: none;
}

.settings-v2-td--label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  width: 160px;
}

.settings-v2-td--value {
  font-size: var(--text-sm);
  color: var(--text);
  word-break: break-all;
}

.settings-v2-value--warn {
  color: var(--tan);
}

/* ── Export section ──────────────────────────────────────────── */

.settings-v2-export-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 820px) {
  .settings-v2-export-body {
    grid-template-columns: 1fr;
  }
}

/* Export left: session list */
.settings-v2-export-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  overflow: hidden;
}

/* Export right: selection + actions */
.settings-v2-export-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Quick-selects bar */
.settings-v2-export-quickbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.settings-v2-export-quickbtns {
  display: flex;
  gap: var(--space-1);
}

/* Session list rows */
.settings-v2-session-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
}

.settings-v2-session-list::-webkit-scrollbar {
  width: 4px;
}

.settings-v2-session-list::-webkit-scrollbar-track {
  background: var(--surface);
}

.settings-v2-session-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

.settings-v2-session-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.settings-v2-session-row:last-child {
  border-bottom: none;
}

.settings-v2-session-row:hover {
  background: var(--card-raised);
}

.settings-v2-session-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-v2-session-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-v2-session-reps {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-v2-checkbox {
  accent-color: var(--orange);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Export right column elements */
.settings-v2-export-selection-badge {
  display: flex;
}

.settings-v2-preamble-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.settings-v2-preamble-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 500;
}

.settings-v2-preamble-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.settings-v2-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.settings-v2-export-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Error/empty card variants */
.settings-v2-card--error {
  border-color: rgba(229, 68, 59, 0.3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-v2-error-msg {
  font-size: var(--text-sm);
  color: var(--red);
}

.settings-v2-empty-msg {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.matches-filter-count {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* Player profile tab switcher (Profile | Matches) — segmented, active = blue */
.player-tab-bar {
  display: flex;
  /* Flex item in a column-flex parent: without this it shrinks to its 2px
     border once the profile grid loads, collapsing/clipping the buttons. */
  flex-shrink: 0;
  align-self: flex-start;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 2px);
  overflow: hidden;
  width: fit-content;
  margin-bottom: var(--space-4);
}
.player-tab-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.player-tab-btn:last-child { border-right: none; }
.player-tab-btn:hover { background: var(--card-raised); color: var(--text); }
.player-tab-btn--active { background: var(--blue); color: var(--white); }
.player-tab-btn--active:hover { background: var(--blue); color: var(--white); }

/* Player profile Matches tab — loading / empty states */
.player-matches-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}
.player-matches-empty {
  padding: var(--space-6) 0;
  text-align: center;
}

.matches-filter-empty {
  padding: var(--space-6) 0;
  text-align: center;
}

/* ── Stats screen ────────────────────────────────────────────── */
.stats-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.stats-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.stats-header { display: flex; flex-direction: column; gap: var(--space-1); }

.stats-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.stats-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Career strip ────────────────────────────────────────────── */
.stats-career-strip {
  display: flex;
  gap: var(--space-1);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}

.stats-career-stat {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--border);
}

.stats-career-stat:last-child { border-right: none; }

.stats-career-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stats-career-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

/* ── Stats section ───────────────────────────────────────────── */
.stats-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stats-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ── Per-map table ───────────────────────────────────────────── */
.stats-map-table-wrap {
  overflow-x: auto;
}

.stats-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.stats-map-th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.stats-map-th--num { text-align: right; }

.stats-map-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.1s ease;
}

.stats-map-row:hover { background-color: var(--card); }
.stats-map-row:last-child { border-bottom: none; }

.stats-map-cell {
  padding: var(--space-3) var(--space-3);
  color: var(--text);
  vertical-align: middle;
}

.stats-map-cell--name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}

.stats-map-cell--num {
  font-family: var(--font-mono);
  text-align: right;
}

/* ── Phase B: Stats — section header row (title + metric selector) ── */
.stats-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Phase B: Metric selector buttons ───────────────────────── */
.stats-metric-selector {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.stats-metric-btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.stats-metric-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.stats-metric-btn--active {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(90, 159, 212, 0.08);
}

/* ── Phase B: Chart wrapper ──────────────────────────────────── */
.stats-chart-wrap {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.trend-chart {
  display: block;
  width: 100%;
  height: auto;
}

.stats-sparse-hint {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* ── Phase B: W/L timeline ───────────────────────────────────── */
.stats-wl-timeline {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}

.stats-wl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stats-wl-dot--win  { background-color: var(--green); }
.stats-wl-dot--loss { background-color: var(--red); }
.stats-wl-dot--draw { background-color: var(--text-muted); }

/* ── Phase B: Goal Targets section ──────────────────────────── */
.stats-targets-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.stats-targets-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.stats-target-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.stats-target-row:last-child { border-bottom: none; }

.stats-target-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 60px;
}

.stats-target-avg {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
  min-width: 48px;
}

.stats-target-separator {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stats-target-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.stats-target-value--unset {
  font-style: italic;
  color: var(--border-strong);
}

.stats-target-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-left: auto;
}
.stats-target-delta--met  { color: var(--green); }
.stats-target-delta--miss { color: var(--red); }

/* ── Phase B: Targets editor form ───────────────────────────── */
.stats-targets-form {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.stats-targets-fields {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.stats-targets-fields .field {
  min-width: 100px;
  flex: 1;
}

.stats-targets-error {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--red);
  margin-bottom: var(--space-3);
}

.stats-targets-actions {
  display: flex;
  gap: var(--space-3);
}

/* ── Phase B: Dashboard sparkline ────────────────────────────── */
.dash-sparkline-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}

.dash-sparkline-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.dash-sparkline-wrap .trend-chart {
  width: 120px;
  height: 40px;
  flex-shrink: 0;
}

/* ── Import screen ───────────────────────────────────────────── */
.import-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 720px;
}

.import-header { display: flex; flex-direction: column; gap: var(--space-1); }

.import-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.import-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Drop zone ───────────────────────────────────────────────── */
.import-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-5);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
  background-color: var(--card);
  min-height: 180px;
}

.import-dropzone:hover,
.import-dropzone:focus {
  border-color: var(--blue);
  background-color: rgba(90, 159, 212, 0.05);
  outline: none;
}

.import-dropzone--active {
  border-color: var(--orange);
  background-color: var(--orange-dim);
}

.import-dropzone--busy {
  cursor: default;
  opacity: 0.7;
}

.import-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.import-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none;
}

.import-dropzone-icon {
  font-size: 2rem;
  color: var(--text-muted);
  line-height: 1;
}

.import-dropzone--active .import-dropzone-icon { color: var(--orange); }

.import-dropzone-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  margin: 0;
  letter-spacing: 0.02em;
}

.import-dropzone-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

/* ── Import feedback messages ────────────────────────────────── */
.import-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}

.import-feedback--ok {
  background-color: rgba(90, 159, 212, 0.1);
  border-color: rgba(90, 159, 212, 0.3);
  color: var(--blue);
}

.import-feedback--err {
  background-color: rgba(229, 68, 59, 0.1);
  border-color: rgba(229, 68, 59, 0.3);
  color: var(--red);
}

.import-feedback-close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  opacity: 0.7;
  padding: 0;
  flex-shrink: 0;
}

.import-feedback-close:hover { opacity: 1; }

/* ── Ingestion status panel ──────────────────────────────────── */
.import-status-panel {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.import-status-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.import-status-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.import-status-error {
  font-size: var(--text-sm);
  color: var(--red);
  margin: 0;
}

.import-status-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.import-status-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  display: flex;
  align-items: center;
}

.import-status-value {
  font-size: var(--text-sm);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  word-break: break-all;
}

.import-status-value--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.import-status-value--warn { color: var(--orange); }
.import-status-value--err  { color: var(--red); }

.import-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--border-strong);
  flex-shrink: 0;
}

.import-status-dot--live {
  background-color: var(--green);
  box-shadow: 0 0 4px rgba(91, 168, 107, 0.5);
}

.import-rescan-msg {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  font-family: var(--font-mono);
}

/* ============================================================
   PHASE C — COACH SCREEN & AUTO-ANALYSIS
   Tokens only: --text / --text-muted for text.
   Accents: --green / --green-dim / --red / --orange / --orange-dim.
   ============================================================ */

/* ── Coach screen layout ─────────────────────────────────────── */

.coach-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6) var(--space-7);
  max-width: 1540px;
  width: 100%;
  margin: 0 auto;
}

.coach-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.coach-title {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.coach-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Coach section ───────────────────────────────────────────── */

.coach-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.coach-section-header {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* ── Loading / error / empty states ─────────────────────────── */

.coach-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--text-muted);
}

.coach-loading-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.coach-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.coach-error-msg {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.coach-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-4);
  margin: 0;
}

/* ── Match analysis card ─────────────────────────────────────── */

.coach-match-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.coach-match-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.coach-match-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.coach-match-map {
  font-size: var(--text-sm);
  color: var(--text);
  letter-spacing: 0.08em;
}

.coach-match-result {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.coach-match-result--win  { color: var(--green); }
.coach-match-result--loss { color: var(--red); }

.coach-match-score {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.coach-match-date {
  font-size: var(--text-label);
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Analysis items ──────────────────────────────────────────── */

.coach-analysis-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.coach-analysis-group-label {
  color: var(--text-muted);
  font-size: var(--text-label);
  display: block;
  margin-bottom: var(--space-1);
}

.coach-analysis-item {
  display: grid;
  grid-template-columns: 120px 56px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}

.coach-analysis-item--strength {
  background: var(--green-dim);
  border-left-color: var(--green);
}

.coach-analysis-item--weakness {
  background: var(--orange-dim);
  border-left-color: var(--orange);
}

.coach-analysis-metric {
  color: var(--text-muted);
  font-size: var(--text-label);
}

.coach-analysis-value {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 600;
}

.coach-analysis-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.coach-analysis-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  padding: var(--space-2) 0;
}

/* ── Watch point banner ──────────────────────────────────────── */

.coach-watchpoint {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--card-raised);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
}

.coach-watchpoint-label {
  font-size: var(--text-label);
  color: var(--red);
}

.coach-watchpoint-metric {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 600;
}

.coach-watchpoint-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

/* ── Next focus editor ───────────────────────────────────────── */

.coach-focus-loading {
  padding: var(--space-4);
}

.coach-focus-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 600px;
}

.coach-focus-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.coach-focus-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-3) var(--space-3);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--dur-fast) var(--ease);
}

.coach-focus-textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}

.coach-focus-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.coach-focus-error {
  font-size: var(--text-sm);
  color: var(--red);
  margin: 0;
}

/* ── Save indicator ──────────────────────────────────────────── */

.coach-save-indicator {
  font-size: var(--text-label);
  color: var(--text-muted);
}

.coach-save-indicator--saved { color: var(--green); }
.coach-save-indicator--error { color: var(--red); }

/* ── Digest panel ────────────────────────────────────────────── */

.coach-digest-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.coach-digest-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.coach-digest-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  max-width: 560px;
  line-height: 1.5;
}

.coach-digest-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.coach-digest-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.coach-digest-pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  max-height: 320px;
  overflow-y: auto;
}

/* ── Coach: Goal selector ────────────────────────────────────── */

.coach-goal-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.coach-goal-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.coach-goal-active-label {
  font-size: var(--text-label);
  color: var(--text-muted);
}

.coach-goal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.coach-goal-selectors {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.coach-goal-selector-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.coach-goal-selector-label {
  font-size: var(--text-label);
  color: var(--text-muted);
}

.coach-goal-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  min-width: 140px;
  cursor: pointer;
}

.coach-goal-select:focus {
  outline: none;
  border-color: var(--orange);
}

.coach-goal-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.coach-goal-results-heading {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.coach-goal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.coach-goal-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.coach-goal-col-label {
  font-size: var(--text-label);
  color: var(--text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.coach-goal-attr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.coach-goal-attr--weak   { background: var(--orange-dim); }
.coach-goal-attr--strong { background: var(--green-dim); }

.coach-goal-attr-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Sub-stat breakdown list ──────────────────────────────────── */

.coach-substat-list {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border);
  margin-left: var(--space-2);
  margin-bottom: var(--space-2);
}

.coach-substat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px var(--space-2);
  gap: var(--space-3);
}

.coach-substat-row--struggling {
  border-left: 2px solid var(--orange);
  margin-left: -2px;
}

.coach-substat-row--solid {
  border-left: 2px solid var(--green);
  margin-left: -2px;
}

.coach-substat-row--neutral {
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.coach-substat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex: 1;
}

.coach-substat-standing {
  font-size: var(--text-label);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.coach-substat-row--struggling .coach-substat-standing { color: var(--orange); }
.coach-substat-row--solid      .coach-substat-standing { color: var(--green); }
.coach-substat-row--neutral    .coach-substat-standing { color: var(--text-muted); }

.coach-goal-attr-name {
  color: var(--text);
}

.coach-goal-attr-val {
  font-size: var(--text-label);
  color: var(--text-muted);
}

.coach-goal-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Match detail: Auto analysis section ─────────────────────── */

.match-auto-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   Phase D — 2D Replay viewer
   ============================================================ */

/* ── Replay screen ────────────────────────────────────────── */
.replay-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text);
}

.replay-screen-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem 0.5rem;
}

.replay-screen-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin: 0;
}

/* ── Replay no-data / generate ────────────────────────────── */
.replay-no-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
}

.replay-no-data-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin: 0;
}

.replay-no-data-desc {
  color: var(--text-muted);
  max-width: 480px;
}

.replay-gen-error {
  color: var(--red);
}

.replay-error {
  color: var(--red);
  padding: 1rem 1.5rem;
}

/* ── F8: Multi-part stitch badge ──────────────────────────── */
.replay-stitch-badge {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  pointer-events: none;
  z-index: 50;
}

/* ── F8: Part navigation bar (cross-link fallback) ────────── */
.replay-part-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 20;
}

.replay-part-nav-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

/* ── Match picker ─────────────────────────────────────────── */
.replay-picker {
  padding: 1rem 1.5rem;
}

.replay-picker-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.replay-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.replay-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 2px;
  gap: 1rem;
}

.replay-picker-item-info {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.replay-picker-map {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: 0.06em;
}

.replay-picker-result {
  color: var(--text-muted);
}

.replay-picker-actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Replay2D — Skybox-style HUD redesign ───────────────────── */

/*
 * r2d-root: full-screen canvas background with fixed HUD overlays.
 * The canvas is position:absolute inset:0 and is the background layer.
 * All .r2d-hud elements are position:absolute/fixed over it.
 * replay-screen is flex-column height:100%, so r2d-root must be flex:1
 * to fill the remaining space below any header.
 */
.r2d-root {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  background: #070a0c;
  min-height: 0; /* required in flex column to shrink below content size */
}

/* Full-screen canvas background */
.r2d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
}
.r2d-canvas:active { cursor: grabbing; }

/* HUD base: position:absolute over canvas, pointer-events on by default */
.r2d-hud {
  position: absolute;
  z-index: 10;
  pointer-events: auto;
}

/* ── Top bar (back button + map name + hint) ──────────────── */
.r2d-hud-topbar {
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: linear-gradient(to bottom, rgba(7,10,12,0.90), rgba(7,10,12,0));
  pointer-events: none; /* buttons still receive events via their own pointer-events */
}
.r2d-hud-topbar > * { pointer-events: auto; }

.r2d-topbar-map {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
}

.r2d-topbar-tick {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Score: top centre ────────────────────────────────────── */
.r2d-hud-score {
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.r2d-score-ct  { color: var(--blue); font-size: 0.75rem; opacity: 0.85; }
.r2d-score-t   { color: var(--tan);  font-size: 0.75rem; opacity: 0.85; }
.r2d-score-dash { color: var(--text-muted); font-size: 1.1rem; }

.r2d-score-num {
  font-size: 1.5rem;
  min-width: 2ch;
  text-align: center;
}
.r2d-score-num--ct { color: var(--blue); }
.r2d-score-num--t  { color: var(--tan); }

/* ── Scoreboard panels ────────────────────────────────────── */
.r2d-board {
  position: absolute;
  top: 52px;
  width: 240px;
  background: rgba(16,21,27,0.84);
  border: 1px solid rgba(60,69,79,0.6);
  border-radius: 6px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  backdrop-filter: blur(3px);
  z-index: 10;
}
.r2d-board--ct { left: 12px; border-top: 2px solid var(--blue); }
.r2d-board--t  { right: 12px; border-top: 2px solid var(--tan); }

.r2d-board-header {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(60,69,79,0.5);
  margin-bottom: 2px;
}
.r2d-board--ct .r2d-board-header { color: var(--blue); }
.r2d-board--t  .r2d-board-header { color: var(--tan); }

/* Player row inside scoreboard */
.r2d-prow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.r2d-prow--dead { opacity: 0.38; }

.r2d-prow-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* G5-B Fix 1: player number bubble in scoreboard rows */
.r2d-prow-numbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 3px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  color: #fff;
  margin-right: 3px;
  line-height: 1;
}

.r2d-prow-name {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.r2d-prow-name--ct { color: var(--blue); }
.r2d-prow-name--t  { color: var(--tan); }

.r2d-prow-kd {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* HP bar row */
.r2d-prow-hprow {
  display: flex;
  align-items: center;
  gap: 4px;
}

.r2d-hpbar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.r2d-hpbar-track--ct .r2d-hpbar-fill { background: var(--blue); }
.r2d-hpbar-track--t  .r2d-hpbar-fill { background: var(--tan); }

.r2d-hpbar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.1s linear;
}

.r2d-prow-hpnum {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  min-width: 2ch;
  text-align: right;
}

/* Money + weapon row */
.r2d-prow-bot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.r2d-prow-money  { color: var(--green); flex-shrink: 0; }
.r2d-prow-weapon { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* D10: weapon icon in bot row */
.r2d-prow-wicon {
  width: 38px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  flex-shrink: 0;
}
.r2d-prow--ct .r2d-prow-wicon { filter: brightness(0) saturate(100%) invert(52%) sepia(80%) saturate(400%) hue-rotate(185deg); opacity: 0.85; }
.r2d-prow--t  .r2d-prow-wicon { filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(600%) hue-rotate(5deg); opacity: 0.85; }

.r2d-prow-ammo {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* D10: kit row — armor + grenades + c4/defuse */
.r2d-prow-kit {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  min-height: 14px;
}

.r2d-kit-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.80;
}
.r2d-kit-icon--armor  { filter: brightness(0) invert(1); opacity: 0.6; }
.r2d-kit-icon--nade   { filter: brightness(0) invert(1); opacity: 0.9; }
.r2d-kit-icon--c4     { filter: brightness(0) saturate(100%) invert(80%) sepia(80%) saturate(600%) hue-rotate(5deg); opacity: 0.9; }
.r2d-kit-icon--defuse { filter: brightness(0) saturate(100%) invert(52%) sepia(80%) saturate(400%) hue-rotate(185deg); opacity: 0.9; }

/* Economy Part 1: team equipment value footer inside scoreboard panel */
.r2d-board-eqv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 4px;
  margin-top: 2px;
}
.r2d-board-eqv-label {
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.r2d-board-eqv-value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
}

/* ── Killfeed: left of T scoreboard ─────────────────────── */
/* DC8: moved from right: 12px (overlapping T board) to right: 260px (left of T board) */
.r2d-killfeed {
  position: absolute;
  top: 52px;
  right: 260px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  z-index: 10;
  pointer-events: none;
}

.r2d-kf-row {
  display: flex;
  gap: 5px;
  align-items: center;
  background: rgba(16,21,27,0.82);
  border: 1px solid rgba(60,69,79,0.55);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.r2d-kf-ct     { color: var(--blue); }
.r2d-kf-t      { color: var(--tan); }
/* DC8: weapon icon in killfeed row */
.r2d-kf-wicon {
  width: 30px;
  height: 11px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(0.7);
  opacity: 0.85;
}
/* DC8: headshot icon in killfeed row */
.r2d-kf-hsicon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg);
  opacity: 0.9;
}

/* ── Zoom buttons: bottom-right ──────────────────────────── */
.r2d-zoom-btns {
  bottom: 180px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

.r2d-zoom-btn {
  width: 30px;
  height: 30px;
  background: rgba(16,21,27,0.84);
  border: 1px solid rgba(60,69,79,0.6);
  border-radius: 5px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.r2d-zoom-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── Bottom HUD: rounds + timeline + controls ─────────────── */
.r2d-hud-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px 10px;
  background: linear-gradient(to top, rgba(7,10,12,0.94), rgba(7,10,12,0));
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

/* §4 Round buttons (D12: 2×, scroll, half-time divider, arrows) */
.r2d-rounds-row {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.r2d-rounds-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-right: 5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Scroll arrow buttons flanking the round list */
.r2d-rounds-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 46px;
  background: rgba(16,22,28,0.88);
  border: 1px solid rgba(44,53,61,0.7);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, color 0.12s;
}
.r2d-rounds-arrow:hover { border-color: var(--border-strong); color: var(--text); }

/* Horizontal scrolling container for round buttons */
.r2d-rounds-scroll {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.r2d-rounds-scroll::-webkit-scrollbar { display: none; }

/* Wrapper for each button + optional divider */
.r2d-rbtn-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* Half-time divider: tall thin bar between halves */
.r2d-rounds-halftime {
  display: inline-block;
  width: 3px;
  height: 46px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Round buttons: ~2× the old 26×23 */
.r2d-rbtn {
  position: relative;
  min-width: 42px;
  height: 46px;
  border-radius: 4px;
  background: rgba(29,38,47,0.90);
  border: 1px solid rgba(44,53,61,0.7);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}
.r2d-rbtn:hover { border-color: var(--border-strong); color: var(--text); }
.r2d-rbtn--ct   { border-bottom: 3px solid var(--blue); }
.r2d-rbtn--t    { border-bottom: 3px solid var(--tan); }
/* DC9: generic cur (no winner data) */
.r2d-rbtn--cur    { background: var(--orange); color: #0e1216; font-weight: 700; border-color: var(--orange); box-shadow: 0 0 8px rgba(229,130,0,0.4); }
/* DC9: active round highlight = winner team color */
.r2d-rbtn--cur-ct { background: var(--blue); color: #0e1216; font-weight: 700; border: 2px solid var(--blue); box-shadow: 0 0 8px rgba(74,160,229,0.4); }
.r2d-rbtn--cur-t  { background: var(--orange); color: #0e1216; font-weight: 700; border: 2px solid var(--orange); box-shadow: 0 0 8px rgba(229,130,0,0.4); }

/* §5 Timeline */
.r2d-timeline-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r2d-timeline-bar {
  position: relative;
  height: 34px;
  background: rgba(16,22,28,0.92);
  border: 1px solid rgba(44,53,61,0.7);
  border-radius: 4px;
  overflow: hidden;
}
/* D8: scrub cursor on the track */
.r2d-timeline-bar--scrub { cursor: crosshair; }

.r2d-tl-freeze {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(90,159,212,0.10);
  pointer-events: none;
}

.r2d-tl-postplant {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(229,68,59,0.08);
  pointer-events: none;
}

/* DC3: Kill marks — taller vertical lines colored by KILLER team */
.r2d-tl-kill {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  border: none;
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0.90;
  padding: 0;
  transition: opacity 0.1s, transform 0.1s;
}
.r2d-tl-kill:hover { opacity: 1; transform: translateX(-50%) scaleX(1.4); z-index: 2; }
.r2d-tl-kill--ct { background: var(--blue); }
.r2d-tl-kill--t  { background: var(--orange); }

/* DC3: Utility marks — small triangles at throwTick colored by thrower team */
.r2d-tl-util {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border: none;
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0.85;
  padding: 0;
  /* CSS triangle: upward-pointing */
  border-left:  5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid transparent;
  background: transparent;
  transition: opacity 0.1s;
}
.r2d-tl-util:hover { opacity: 1; z-index: 2; }
.r2d-tl-util--ct { border-bottom-color: var(--blue); }
.r2d-tl-util--t  { border-bottom-color: var(--orange); }

.r2d-tl-label {
  position: absolute;
  bottom: 2px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--text-muted);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.r2d-tl-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  border-radius: 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
/* Inward-pointing triangles at each end of the scrubber line */
.r2d-tl-cursor::before,
.r2d-tl-cursor::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  pointer-events: none;
}
/* Top triangle points down (into the bar) */
.r2d-tl-cursor::before {
  top: -1px;
  border-top: 6px solid #fff;
}
/* Bottom triangle points up (into the bar) */
.r2d-tl-cursor::after {
  bottom: -1px;
  border-bottom: 6px solid #fff;
}

/* DC3: Timeline row with inline clock at far-left */
.r2d-timeline-with-clock {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.r2d-timeline-with-clock .r2d-timeline-bar {
  flex: 1;
}
.r2d-tl-clock {
  flex-shrink: 0;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(16,22,28,0.92);
  border: 1px solid rgba(44,53,61,0.7);
  border-radius: 4px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Timeline legend */
.r2d-tl-legend {
  display: flex;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--text-muted);
  align-items: center;
}
.r2d-tl-legend span { display: flex; gap: 4px; align-items: center; }
.r2d-tl-pip {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0;
}
/* DC3: Legend pips for new mark types */
.r2d-tl-pip--kill-ct { background: var(--blue); }
.r2d-tl-pip--kill-t  { background: var(--orange); }
/* Utility pips — triangular using clip-path */
.r2d-tl-pip--util-ct { background: var(--blue); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.r2d-tl-pip--util-t  { background: var(--orange); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.r2d-tl-pip--plant   { background: var(--red); }

/* Controls row */
.r2d-controls-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.r2d-speed-group {
  display: flex;
  gap: 2px;
}

.r2d-speed-btn {
  background: rgba(29,38,47,0.90);
  border: 1px solid rgba(44,53,61,0.7);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.12s, color 0.12s;
}
.r2d-speed-btn:hover { border-color: var(--border-strong); color: var(--text); }
.r2d-speed-btn--active { border-color: var(--orange); color: var(--orange); }

/* D9: skip-freeze toggle label */
.r2d-skip-freeze-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.r2d-skip-freeze-label input[type="checkbox"] {
  accent-color: var(--orange);
  width: 12px;
  height: 12px;
  cursor: pointer;
}

.r2d-zoom-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* Economy Part 2: eco chart toggle button in controls row */
.r2d-eco-chart-btn {
  background: rgba(29,38,47,0.90);
  border: 1px solid rgba(44,53,61,0.7);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}
.r2d-eco-chart-btn:hover { border-color: var(--border-strong); color: var(--text); }
.r2d-eco-chart-btn--active { border-color: var(--green); color: var(--green); }

/* Economy Part 2: economy chart overlay panel */
.r2d-eco-panel {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12,17,22,0.97);
  border: 1px solid rgba(60,69,79,0.7);
  border-radius: 6px;
  padding: 12px 14px 10px;
  z-index: 20;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  min-width: 580px;
}

.r2d-eco-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.r2d-eco-panel-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.r2d-eco-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.r2d-eco-panel-close:hover { color: var(--text); }

.r2d-eco-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Economy chart legend */
.r2d-eco-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.60rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.r2d-eco-legend-item {
  display: flex;
  gap: 5px;
  align-items: center;
}

.r2d-eco-legend-note {
  font-style: italic;
  opacity: 0.75;
}

/* ── Popover (D3 setpos) ──────────────────────────────────── */
.r2d-popover {
  position: fixed;
  z-index: 200;
  background: var(--card-raised, var(--card));
  border: 1px solid var(--border-strong, var(--border));
  padding: 0.75rem;
  border-radius: 4px;
  min-width: 300px;
  max-width: 420px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

.r2d-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.r2d-popover-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.r2d-popover-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.r2d-popover-close:hover { color: var(--text); }

.r2d-popover-cmd {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  background: var(--surface);
  padding: 0.5rem;
  border-radius: 2px;
  word-break: break-all;
  margin-bottom: 0.5rem;
}

.r2d-popover-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.r2d-popover-copy-msg { color: var(--green); font-size: 0.78rem; }
.r2d-popover-note     { color: var(--text-muted); font-size: 0.72rem; margin-left: auto; }

/* ── Backward compat: old replay2d- class aliases (verify-replay.mjs checks) ─── */
.replay2d-root        { display: none; } /* replaced by r2d-root */

/* ── Phase E: Aim & mechanics — match detail ─────────────────── */

/* Grid of aim metric tiles */
.aim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .aim-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Individual aim tile */
.aim-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  clip-path: var(--clip-corner);
}

.aim-tile--accent {
  border-color: var(--border-strong);
}

.aim-tile-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Tier tag: best-effort (tan) and experimental (red/muted) */
.aim-tier-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

.aim-tier-tag--best-effort {
  background: color-mix(in srgb, var(--tan) 14%, transparent);
  color: var(--tan);
  border: 1px solid color-mix(in srgb, var(--tan) 28%, transparent);
}

.aim-tier-tag--experimental {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 24%, transparent);
}

.aim-tile-label {
  /* .label utility already sets display/font/color */
}

.aim-tile-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.aim-tile-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: var(--space-1);
}

/* Global disclosure banner */
.aim-disclosure {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Graceful fallback when aim data is absent */
.aim-unavailable {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
}

/* ── Phase E: Aim aggregate — Stats screen ───────────────────── */

.stats-aim-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.stats-aim-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-aim-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stats-aim-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.stats-aim-value {
  font-size: var(--text-base);
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.stats-aim-tier {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

.stats-aim-tier--best-effort {
  background: color-mix(in srgb, var(--tan) 14%, transparent);
  color: var(--tan);
}

.stats-aim-tier--experimental {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

.stats-aim-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

.stats-aim-disclosure {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

.stats-aim-unavailable {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

/* ── Players list screen (C9) ────────────────────────────────── */
.players-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.players-controls-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.players-search-input {
  flex: 1 1 200px;
  max-width: 360px;
  padding: var(--space-2) var(--space-3);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease);
}

.players-search-input:focus {
  outline: none;
  border-color: var(--blue);
}

.players-search-input::placeholder {
  color: var(--text-muted);
}

.players-role-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 130px;
}

.players-table-row {
  cursor: pointer;
}

.players-role-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  background-color: color-mix(in srgb, var(--blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ── Player profile screen (C9) ──────────────────────────────── */
.player-profile-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.player-back-btn {
  align-self: flex-start;
  margin-bottom: var(--space-1);
}

.player-profile-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.player-steam-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Filter bar ──────────────────────────────────────────────── */
.player-filter-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.player-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.player-filter-select {
  padding: var(--space-1) var(--space-2);
  background-color: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.player-filter-select:focus {
  outline: none;
  border-color: var(--blue);
}

/* ── Profile grid ────────────────────────────────────────────── */
.player-profile-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .player-profile-grid {
    grid-template-columns: 1fr;
  }
}

.player-profile-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.player-profile-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Section wrapper ──────────────────────────────────────────── */
.player-section {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.player-section-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.player-section-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

/* ── Role card ────────────────────────────────────────────────── */
.player-role-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.player-role-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.player-role-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.player-role-n {
  color: var(--text-muted);
}

.player-role-numbers {
  display: flex;
  gap: var(--space-5);
}

.player-role-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-role-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--orange);
}

.player-role-prior {
  padding: var(--space-2) var(--space-3);
  background-color: color-mix(in srgb, var(--border) 30%, transparent);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-role-prior--low-conf .player-role-prior-values {
  opacity: 0.55;
}

.player-role-prior-values {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
}

/* ── Stat block ───────────────────────────────────────────────── */
.player-stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.player-stat-block--suppressed .player-stat-grid {
  opacity: 0.45;
}

.player-stat-suppressed-note {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  background-color: color-mix(in srgb, var(--border) 40%, transparent);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-strong);
}

.player-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.player-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}

/* ── Area distribution ────────────────────────────────────────── */
.player-area-dist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.player-area-empty {
  color: var(--text-muted);
  padding: var(--space-2) 0;
}

.player-area-row {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  align-items: center;
  gap: var(--space-2);
}

.player-area-name {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-area-bar-wrap {
  height: 6px;
  background-color: var(--card-raised);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.player-area-bar {
  height: 100%;
  background-color: var(--blue);
  border-radius: var(--radius-sm);
  transition: width var(--dur) var(--ease-out);
}

.player-area-pct {
  text-align: right;
}

/* ── Radar canvas ─────────────────────────────────────────────── */
.player-radar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.player-util-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

.player-util-toggle input[type="checkbox"] {
  accent-color: var(--blue);
}

.player-util-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.player-util-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.player-radar-canvas {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  image-rendering: pixelated;
}

.player-radar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 260px;
  background-color: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.player-radar-note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ── Radar wrap (canvas + cluster overlay) ──────────────────────── */
.player-radar-wrap {
  display: block;
  max-width: 512px;
  line-height: 0; /* collapse inline whitespace so overlay lines up exactly */
}

.player-radar-wrap .player-radar-canvas {
  /* inherit existing canvas styles; max-width comes from the wrap */
  width: 100%;
  max-width: 512px;
}

/* ── Utility cluster markers ────────────────────────────────────── */

/* Shared hit-target for every cluster (lone or multi) */
.util-cluster {
  cursor: default;
  user-select: none;
}

/* Lone throw: small solid dot, same size as old individual icon */
.util-cluster-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Multi-throw cluster: colored circle with count */
.util-cluster-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Cascadia Code', Consolas, monospace;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  line-height: 1;
}

/* Popup card — appears above the cluster on hover */
.util-cluster-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-raised, #1a2330);
  border: 1px solid var(--border, #2a3a4a);
  border-radius: var(--radius-sm, 4px);
  padding: 5px 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.util-cluster-popup-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #c8cdd2);
  font-family: 'Barlow Semi Condensed', Arial Narrow, Arial, sans-serif;
  letter-spacing: 0.02em;
}

.util-cluster-popup-area {
  font-size: 10px;
  color: var(--text-muted, #6b7880);
  margin-top: 2px;
  font-family: 'Barlow Semi Condensed', Arial Narrow, Arial, sans-serif;
}

/* ── Tendency Tab ───────────────────────────────────────────────── */

.tendency-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.tendency-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

/* Reuse .player-filter-group for the control labels/inputs */

.tendency-toggle-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tendency-toggle {
  padding: 4px 10px;
  background: var(--card);
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border);
  font-size: var(--text-xs);
  font-family: var(--font-condensed, inherit);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tendency-toggle:last-child { border-right: none; }
.tendency-toggle:hover { background: var(--card-raised); color: var(--text); }
.tendency-toggle--active { background: var(--card-raised); color: var(--text); }
.tendency-toggle--sm { padding: 3px 8px; }

.tendency-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tendency-banner {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}
.tendency-banner--warn { background: rgba(229,68,59,0.12); color: var(--red); border: 1px solid rgba(229,68,59,0.3); }
.tendency-banner--info { background: rgba(90,159,212,0.12); color: var(--blue); border: 1px solid rgba(90,159,212,0.3); }

/* ── Tendency radar root (mirrors r2d-root for full-bleed canvas) ── */
.tend-radar-root {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* square so the map image renders correctly */
  max-width: 700px;       /* generous but not edge-to-edge on wide screens */
  background: #070a0c;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(44,53,61,0.5);
}

/* Canvas fills the root absolutely — identical to .r2d-canvas */
.tend-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
}
.tend-canvas:active { cursor: grabbing; }

/* Placeholder (loading/error/idle) centred inside the root */
.tend-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bottom HUD overlaid on the canvas — mirrors r2d-hud-bottom */
.tend-hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px 10px;
  background: linear-gradient(to top, rgba(7,10,12,0.94), rgba(7,10,12,0));
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}
.tend-hud-bottom > * { pointer-events: auto; }

/* Zoom buttons anchored bottom-right inside the root */
.tend-zoom-btns {
  position: absolute;
  bottom: 130px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

/* ── Best Players leaderboard (G3-B) ─────────────────────────── */

.best-board-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Header block */
.best-board-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Controls row — scope toggle + metric selector */
.best-board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Segmented toggle group */
.best-board-toggle-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.best-board-toggle {
  padding: 4px 10px;
  background: var(--card);
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.best-board-toggle:last-child { border-right: none; }
.best-board-toggle:hover { background: var(--card-raised); color: var(--text); }
.best-board-toggle--active {
  background: var(--card-raised);
  color: var(--blue);
}

/* Scope explainer */
.best-board-explainer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Table overrides */
.best-board-table { width: 100%; }

/* Rank column — narrow */
.best-board-th--rank,
.best-board-cell--rank {
  width: 44px;
  text-align: center;
  padding-right: var(--space-2);
}

/* Sample (n) column — de-emphasised */
.best-board-cell--n {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Rank number */
.best-board-rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Rank for owner */
.best-board-rank-owner {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--orange);
  font-weight: 700;
}

/* Value cell */
.best-board-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.best-board-value--suppressed {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  opacity: 0.45;
}

/* Row states */
.best-board-row--owner {
  background-color: rgba(232, 133, 43, 0.06);
  outline: 1px solid rgba(232, 133, 43, 0.2);
  outline-offset: -1px;
}
.best-board-row--owner:hover { background-color: rgba(232, 133, 43, 0.1); }

.best-board-row--suppressed {
  opacity: 0.6;
}

/* YOU badge on owner row */
.best-board-you-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(232, 133, 43, 0.12);
  border: 1px solid rgba(232, 133, 43, 0.3);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-left: var(--space-2);
}

/* Owner name emphasis */
.best-board-name--owner {
  color: var(--orange);
  font-weight: 600;
}

/* Low sample marker */
.best-board-low-sample {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  margin-left: var(--space-2);
  opacity: 0.7;
}

/* ── Skill tab (G3-C) ────────────────────────────────────────────
   All values use existing tokens. No new color literals.           */

.skill-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Header strip: tier badge + primary role + rating triptych */
.skill-header-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.skill-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.skill-primary-role {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

/* Rating 3.0 headline (H4) */
.skill-rating30-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin-left: auto;
  margin-bottom: var(--space-2);
}

/* ================================================================
   Home v2 — CS2-broadcast redesign
   Uses vk-* kit classes; new home-* selectors only.
   All color/space/type values via tokens.css vars.
   ================================================================ */

/* ── Screen shell ────────────────────────────────────────────── */
.home-screen {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
}

/* ── Hero band v2 ────────────────────────────────────────────── */
/*
  Layout rules migrated to kit.css as .vk-heroband* (reusable across screens).
  Home uses .vk-heroband via HeroBand component in /ui/kit-components.js.
  Only home-specific overrides remain here (none currently needed).
*/

/* ── Form pips ───────────────────────────────────────────────── */
.home-form-pips {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: var(--space-1);
}

.home-form-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--border-strong);
}

.home-form-pip--win  { background: var(--green); }
.home-form-pip--loss { background: var(--red); }
.home-form-pip--draw { background: var(--border-strong); }

/* ── Sparkline (tile inline) ─────────────────────────────────── */
.home-sparkline {
  display: block;
  overflow: visible;
}

.home-tile__sparkline {
  margin-top: var(--space-1);
  opacity: 0.75;
}

/* ── Stat tiles band ─────────────────────────────────────────── */
.home-tiles-band {
  padding-top: 0;
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .home-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .home-tiles {
    grid-template-columns: 1fr 1fr;
  }
}

/* Orange emphasis on the Rating 3.0 tile */
.home-tile--orange .vk-tile__value {
  color: var(--orange);
}

/* ── Scores band (Stream U, U-E) — same vk-tile grid idiom as
   .home-tiles above, sized for six score tiles (Aim + the five new
   Stream U composites) instead of five. ─────────────────────────── */
.home-scores-band {
  padding-top: var(--space-4);
}

.home-scores {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .home-scores {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .home-scores {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Insight callout band ────────────────────────────────────── */
.home-insight-band {
  padding-top: var(--space-4);
}

/* ── Recent matches band ─────────────────────────────────────── */
.home-matches-band {
  padding-top: var(--space-5);
}

.home-view-all {
  appearance: none;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--orange);
  cursor: pointer;
  padding: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.home-view-all:hover { opacity: 0.75; }

/* Map-thumbnail card grid — 5 across on wide, collapses down */
.home-mapcard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  .home-mapcard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .home-mapcard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Each vk-mapcard on Home needs a consistent height */
.home-mapcard-grid .vk-mapcard {
  min-height: 168px;
}

/* ── Lower band ──────────────────────────────────────────────── */
.home-lower-band {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  .home-lower-band {
    grid-template-columns: 1fr;
  }
  /* .vk-heroband responsive rules live in kit.css */
}

.home-lower-left {
  /* sparkline trend section */
}

.home-platform-nav {
  /* platform entry nav cards */
}

.home-nav-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 700px) {
  .home-nav-cards {
    grid-template-columns: 1fr;
  }
}

/* Nav card — extends .vk-card */
.home-nav-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  cursor: pointer;
  padding: var(--space-4);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.home-nav-card:hover {
  background: var(--card-raised);
  border-color: var(--orange);
}

.home-nav-card-icon {
  font-size: var(--text-lg);
  color: var(--orange);
  line-height: 1;
}

.home-nav-card-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.home-nav-card-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ================================================================
   Player Profile (Phase 2) — kit-based redesign
   Uses vk-* kit classes + pp2-* local selectors only.
   All color/space/type values via tokens.css vars.
   TendencyRadar internals and all existing sub-component
   CSS (skill-*, r2d-*, tend-*, util-cluster-*) are untouched.
   ================================================================ */

/* ── Screen shell ────────────────────────────────────────────── */

.pp2-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-8);
}

/* ── Hero header band ────────────────────────────────────────── */

.pp2-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) 0;
  background: var(--card);
  border: 1px solid var(--border-strong);
  clip-path: var(--clip-corner);
  box-shadow: var(--shadow-card);
}

.pp2-hero-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.pp2-hero-identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pp2-back-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.pp2-back-btn:hover { color: var(--text); }

.pp2-hero-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0;
  cursor: default;
}

.pp2-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--surface);
}

.pp2-rounds-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

.pp2-rating-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.pp2-rating-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}

.pp2-rating-label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pp2-tablist {
  margin-bottom: 0;
  border-bottom: none;
}

/* ── Tab body wrapper ────────────────────────────────────────── */

.pp2-tab-body {
  animation: vk-fade-in var(--dur) var(--ease);
}

.pp2-tab-body--tendency {
  padding: 0;
}

/* ── Filter bar ──────────────────────────────────────────────── */

.pp2-filterbar {
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.pp2-filter-select {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.pp2-filter-select:hover,
.pp2-filter-select:focus {
  border-color: var(--border-strong);
  color: var(--text);
  outline: none;
}

/* ── Profile tab main grid ───────────────────────────────────── */

.pp2-profile-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 920px) {
  .pp2-profile-grid {
    grid-template-columns: 1fr;
  }
  .pp2-profile-right { order: -1; }
}

/* ── Left column ─────────────────────────────────────────────── */

.pp2-profile-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pp2-role-card {
  border-left: 3px solid var(--border-strong);
}

.pp2-stats-section { }

.pp2-stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.pp2-area-section { }

.pp2-area-meters {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pp2-area-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
}

.pp2-area-name {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp2-area-track {
  width: 100%;
}

.pp2-area-pct {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  min-width: 28px;
}

.pp2-area-fill--dominant {
  background: var(--blue);
}

/* ── Right column: heatmap hero-viz ──────────────────────────── */

.pp2-profile-right { }

.pp2-heatmap-card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pp2-heatmap-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pp2-heatmap-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pp2-heatmap-map-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pp2-util-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.pp2-util-toggle input[type="checkbox"] {
  accent-color: var(--orange);
  width: 14px;
  height: 14px;
}

.pp2-heatmap-legend { }

.pp2-heatmap-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ── Utility explorer: canvas + docked side panel ─────────────── */
.pp2-heatmap-body {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}
.pp2-heatmap-body .pp2-heatmap-canvas-wrap {
  flex: 1 1 300px;
  width: auto;
  min-width: 0;
}
.pp2-util-panel {
  flex: 0 0 210px;
  align-self: stretch;
  max-height: 512px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-y: auto;
}
.pp2-util-panel-head { display: flex; align-items: center; justify-content: space-between; }
.pp2-util-panel-title { font-weight: 700; font-size: var(--text-sm); color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; }
.pp2-util-panel-close { background: none; border: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pp2-util-panel-close:hover { color: var(--text); }
.pp2-util-panel-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: -4px; }
.pp2-util-panel-types { display: flex; flex-direction: column; gap: 4px; }
.pp2-util-type-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  font-size: var(--text-xs); cursor: pointer; text-align: left;
}
.pp2-util-type-btn:hover { border-color: var(--border-strong); }
.pp2-util-type-btn--active { background: var(--bg); border-width: 1.5px; font-weight: 600; }
.pp2-util-type-swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.pp2-util-type-label { flex: 1 1 auto; }
.pp2-util-type-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pp2-util-panel-time {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--text-xs); color: var(--text-muted);
  padding: 6px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pp2-util-panel-time b { color: var(--text); font-variant-numeric: tabular-nums; }
.pp2-util-panel-time-note { margin-left: auto; font-style: italic; opacity: 0.7; }
.pp2-util-panel-lineups { display: flex; flex-direction: column; gap: 3px; }
.pp2-util-panel-lineups-head { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.pp2-util-lineup-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px; background: var(--card); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.pp2-util-lineup-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.pp2-util-lineup-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.util-cluster--selected .util-cluster-badge { box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }

/* ── Heatmap pan/zoom ─────────────────────────────────────────── */
.pp2-radar-pz { will-change: transform; }
.pp2-radar-reset {
  position: absolute; top: 6px; right: 6px; z-index: 30;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: rgba(20,25,30,0.82); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; line-height: 1; cursor: pointer;
}
.pp2-radar-reset:hover { background: rgba(30,38,46,0.92); }

.pp2-heatmap-canvas-wrap .player-radar-wrap,
.pp2-heatmap-canvas-wrap > .player-radar-wrap {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.pp2-heatmap-canvas-wrap .player-radar-canvas,
.pp2-heatmap-canvas-wrap .player-radar-wrap .player-radar-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 0;
  border: none;
}

.pp2-heatmap-canvas-wrap .player-radar-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.pp2-heatmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pp2-heatmap-gradient {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, hsl(240,85%,45%), hsl(60,85%,50%), hsl(0,85%,48%));
  max-width: 80px;
}

.pp2-heatmap-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (min-width: 921px) and (max-width: 1200px) {
  .pp2-profile-grid {
    grid-template-columns: 240px 1fr;
  }
}

/* ================================================================
   Player Profile (v2) — CS2-broadcast hero upgrade
   Replaces the old pp2-hero with the shared HeroBand component.
   Adds map-thumbnail row to Matches tab.
   ================================================================ */

/* Shell that hosts the HeroBand + back-link + tabs.
   vk-heroband owns the three-column grid geometry. */
.pp2-heroband-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) 0;
  background: var(--card);
  border: 1px solid var(--border-strong);
  clip-path: var(--clip-corner);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Orange bracket corners */
.pp2-heroband-shell::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 20px; height: 20px;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  z-index: 2;
  pointer-events: none;
}

.pp2-heroband-shell::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 20px; height: 20px;
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  z-index: 2;
  pointer-events: none;
}

/* Suppress HeroBand's own margin-bottom inside the shell */
.pp2-heroband-shell .vk-heroband {
  margin-bottom: 0;
}

/* Matches tab: map-card grid */
.pp2-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 700px) {
  .pp2-matches-grid {
    grid-template-columns: 1fr;
  }
}

/* Map thumbnail cell inside the matches table */
.pp2-match-map-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pp2-match-map-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface);
  flex-shrink: 0;
  border: 1px solid var(--border);
  filter: brightness(0.65) saturate(0.55);
}

.pp2-match-map-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}

/* ============================================================
   Matches (v2) — CS2-broadcast edge-style map-thumbnail table
   ============================================================ */

/* Screen header */
.mh-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mh-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.mh-count {
  color: var(--text-muted);
}

/* Filter bar */
.mh-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.vk-filterbar-input {
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  height: 30px;
  min-width: 140px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.vk-filterbar-input::placeholder {
  color: var(--text-muted);
}

.vk-filterbar-input:focus {
  border-color: var(--border-strong);
}

.vk-filterbar-group {
  display: flex;
  gap: 1px;
}

.vk-filterbar-btn {
  background: var(--card-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0 var(--space-3);
  height: 30px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.vk-filterbar-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.vk-filterbar-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.vk-filterbar-btn--active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--bg);
}

.vk-filterbar-btn:hover:not(.vk-filterbar-btn--active) {
  background: var(--card);
  color: var(--text);
}

.vk-filterbar-clear {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  height: 30px;
  cursor: pointer;
}

.vk-filterbar-clear:hover { color: var(--text); }

.vk-filterbar-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Table */
.mh-table-wrap {
  overflow-x: auto;
}

.mh-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Generic vk-table foundation */
.vk-table th,
.vk-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.vk-table-th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}

/* Column widths */
.mh-th--map     { width: 180px; min-width: 160px; }
.mh-th--title   { min-width: 200px; }
.mh-th--date    { width: 150px; }
.mh-th--score   { width: 120px; }
.mh-th--actions { width: 70px; text-align: right; }

/* Rows */
.mh-row {
  transition: background-color var(--dur-fast) var(--ease);
}

.mh-row:hover {
  background: var(--card-raised);
}

.mh-row:last-child td {
  border-bottom: none;
}

.mh-cell {
  font-size: var(--text-sm);
  color: var(--text);
  vertical-align: middle;
}

.mh-cell--date {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.mh-cell--score {
  display: table-cell; /* keep as td */
}

.mh-cell--actions {
  text-align: right;
}

/* Map cell — thumbnail + name */
.mh-map-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mh-mapthumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  filter: brightness(0.65) saturate(0.5);
  transition: filter var(--dur-fast) var(--ease);
}

.mh-mapthumb--win  { filter: brightness(0.7) saturate(0.7) hue-rotate(100deg); }
.mh-mapthumb--loss { filter: brightness(0.55) saturate(0.5) sepia(0.4); }

.mh-mapthumb-fallback {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--card-raised);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.mh-map-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}

/* Result badge */
.vk-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--card-raised);
  color: var(--text-muted);
  vertical-align: middle;
}

.vk-badge--win  { background: var(--green-dim);  color: var(--green); }
.vk-badge--loss { background: rgba(229,68,59,.13); color: var(--red);  }

.mh-score-val {
  margin-left: var(--space-1);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--text-muted);
  vertical-align: middle;
}

/* Open action button */
.mh-open-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px var(--space-3);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.mh-open-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* Drop hint */
.mh-drop-hint {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ============================================================
   Match Detail (v2) — hero header + collapsed multikills
   ============================================================ */

/* Hero header layout */
.md-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.md-hero-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  filter: brightness(0.7) saturate(0.6);
}

.md-hero-thumb--fallback {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  background: var(--card-raised);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.md-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.md-hero-nav {
  margin-bottom: var(--space-1);
}

.md-hero-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.md-hero-mapname {
  font-family: var(--font-display);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  line-height: 1;
}

.md-hero-result {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--card-raised);
  color: var(--text-muted);
}

.md-hero-result--win  { background: var(--green-dim);  color: var(--green); }
.md-hero-result--loss { background: rgba(229,68,59,.15); color: var(--red);  }

/* Score in italic display style */
.md-hero-score {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  letter-spacing: 0.04em;
}

/* vk-display--italic utility class (referenced by spec) */
.vk-display--italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}

.md-hero-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.md-hero-meta-item {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.md-hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Collapsed multikills column */
.adv-sb-col-multi {
  min-width: 120px;
}

.adv-sb-cell-multi {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ── Players (v2) ─────────────────────────────────────────────── */

/* Search input inside vk-filterbar */
.players-v2-search {
  flex: 1 1 200px;
  max-width: 280px;
  padding: var(--space-1) var(--space-3);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease);
  margin-right: var(--space-1);
}
.players-v2-search:focus {
  outline: none;
  border-color: var(--blue);
}
.players-v2-search::placeholder { color: var(--text-muted); }

/* Stat columns */
.players-v2-th--stat,
.players-v2-td--stat {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Actions column */
.players-v2-td--actions {
  text-align: right;
  white-space: nowrap;
}

/* Owner row highlight */
.players-v2-row--owner td {
  background-color: rgba(232, 133, 43, 0.06);
  outline: 1px solid rgba(232, 133, 43, 0.2);
  outline-offset: -1px;
}
.players-v2-row--owner:hover td { background-color: rgba(232, 133, 43, 0.10); }

/* Owner name emphasis */
.players-v2-name--owner {
  color: var(--orange);
  font-weight: 600;
}
.players-v2-name {
  color: var(--text);
}

/* YOU badge spacing */
.players-v2-you-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Roles cell */
.players-v2-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.players-v2-role-none {
  color: var(--text-muted);
}

/* Extend players-role-badge for CT/T side variants */
.players-role-badge--ct {
  background-color: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--blue);
}
.players-role-badge--t {
  background-color: color-mix(in srgb, var(--tan) 12%, transparent);
  border-color: color-mix(in srgb, var(--tan) 30%, transparent);
  color: var(--tan);
}
.players-role-badge--any {
  background-color: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--blue);
}

/* Top Map thumbnail cell */
.players-v2-topmap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.players-v2-topmap-thumb {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  filter: brightness(0.70) saturate(0.80);
}
.players-v2-topmap-thumb--empty {
  background-color: var(--card);
}
.players-v2-topmap-name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.players-v2-topmap-none {
  color: var(--text-muted);
}

/* ── Scouting hub (scout) ─────────────────────────────────────── */

/* Filtered count header */
.scout-count-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: var(--space-1);
  display: block;
}
.scout-count-total {
  color: var(--text-muted);
  font-weight: 400;
}

/* Filters toggle button in filter bar */
.scout-filter-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.scout-filter-toggle--open {
  color: var(--orange);
  border-color: var(--orange);
}

/* Badge showing active filter count */
.scout-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: 9px;
  background-color: var(--orange);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Clear all button */
.scout-clear-btn {
  color: var(--text-muted);
  border-color: var(--border);
}
.scout-clear-btn:hover {
  color: var(--red);
  border-color: var(--red);
  background-color: rgba(229, 68, 59, 0.08);
}

/* Advanced filter panel */
.scout-filter-panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.scout-filter-panel-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.scout-filter-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.scout-filter-panel-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.scout-filter-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* Individual filter row */
.scout-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.scout-filter-stat {
  flex: 0 0 200px;
}
.scout-filter-op {
  flex: 0 0 150px;
}
.scout-filter-vals {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
}
.scout-filter-input {
  width: 90px;
  padding: var(--space-1) var(--space-2);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.scout-filter-input:focus {
  outline: none;
  border-color: var(--blue);
}
.scout-filter-input::placeholder {
  color: var(--text-muted);
}
.scout-filter-between-sep {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.scout-filter-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.scout-filter-remove:hover {
  color: var(--red);
  border-color: var(--red);
}

/* Add filter button */
.scout-add-filter {
  align-self: flex-start;
}

/* Scout table */
.scout-table { width: 100%; }

/* Sortable column header */
.scout-th--sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.scout-th--sortable:hover {
  color: var(--orange);
}
.scout-th--active {
  color: var(--orange);
}

/* Player name column */
.scout-th--player {
  min-width: 160px;
}

/* Round Swing coloring (positive/negative) */
.players-f2-swing--pos { color: var(--green); }
.players-f2-swing--neg { color: var(--red);   }

/* ── Leaderboard (v2) ─────────────────────────────────────────── */

/* Table layout */
.best-board-v2-table { width: 100%; }

/* Rank column */
.best-board-v2-th--rank,
.best-board-v2-cell--rank {
  width: 56px;
  text-align: center;
  padding-right: var(--space-2);
}

/* Stat columns */
.best-board-v2-th--stat,
.best-board-v2-cell--value {
  text-align: right;
  white-space: nowrap;
}

/* Rank number — standard */
.best-board-v2-rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
/* Rank for owner */
.best-board-v2-rank--owner {
  color: var(--orange);
  font-weight: 700;
}
/* Provisional placeholder */
.best-board-v2-rank--prov {
  opacity: 0.4;
}
/* Top-3 medal emphasis */
.best-board-v2-rank--medal {
  color: var(--orange);
  font-weight: 700;
  font-size: var(--text-sm);
}
.best-board-v2-medal {
  font-size: 14px;
  line-height: 1;
}

/* YOU badge */
.best-board-v2-you-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Provisional pill */
.best-board-v2-prov-pill {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Provisional divider row */
.best-board-v2-divider-row td {
  background: var(--surface);
}
.best-board-v2-divider-cell {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

/* Leaderboard movement (rankhist) ──────────────────────────────
   Football-Manager-style rank-change indicators in the # column.
   Tokens only: --green / --red / --text-muted from tokens.css.
   ─────────────────────────────────────────────────────────────── */
.rankhist-indicator {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  margin-left: 3px;
  vertical-align: middle;
  letter-spacing: -0.02em;
}
.rankhist-indicator--up   { color: var(--green); }
.rankhist-indicator--down { color: var(--red);   }
.rankhist-indicator--same { color: var(--text-muted); font-weight: 400; }

/* ── Stats (v2) ─────────────────────────────────────────────── */

/* Bar legend row that sits above the percentile sections */
.hub-bar-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hub-bar-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hub-bar-legend-dot--high {
  background: var(--orange);
}

.hub-bar-legend-dot--low {
  background: var(--blue);
}

.hub-bar-legend-text {
  margin-right: var(--space-3);
}

/* ── Coach (v2) ─────────────────────────────────────────────── */

/* No net-new CSS needed — all coach changes are label-only */

/* ── My Game (v2) ───────────────────────────────────────────── */

.my-game-hub {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.my-game-header {
  padding: var(--space-6) var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.my-game-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--space-4);
}


/* ── Hub + skill-pct CSS (restored from v2 bak — missing after v2b restructure) ── */
.skill-rating30-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin-left: auto;
  margin-bottom: var(--space-2);
}

.skill-rating30-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.skill-rating30-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Rating triptych: raw → SoS → adjusted */
.skill-rating-triptych {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.skill-rating-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.skill-rating-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.skill-rating-value--adjusted {
  color: var(--orange);
}

.skill-rating-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.skill-rating-arrow {
  font-size: var(--text-xs);
  color: var(--text-muted);
  align-self: center;
  padding-bottom: var(--space-3);
}

.skill-rating-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.skill-rating-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
  align-self: center;
}

/* Percentile group section */
.skill-pct-section {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.skill-pct-section-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* Individual percentile row */
.skill-pct-row {
  display: grid;
  grid-template-columns: 160px 1fr 52px 52px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.skill-pct-row:last-child {
  border-bottom: none;
}

.skill-pct-row--muted {
  opacity: 0.45;
}

.skill-pct-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-pct-bar-wrap {
  position: relative;
  height: 6px;
  background-color: var(--card-raised);
  border-radius: 3px;
  overflow: hidden;
}

.skill-pct-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background-color: var(--blue);
  transition: width var(--dur-base) var(--ease);
}

.skill-pct-bar-fill--high {
  background-color: var(--orange);
}

.skill-pct-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.skill-pct-pct {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.skill-pct-proref {
  grid-column: 2 / 5;
  font-size: var(--text-xs);
  color: var(--blue);
  opacity: 0.7;
  padding-top: 1px;
  padding-bottom: var(--space-1);
}

.skill-low-sample {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  opacity: 0.7;
  margin-left: var(--space-2);
}

/* Roles section */
.skill-roles-section {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.skill-roles-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.skill-roles-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.skill-overall-rating {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--orange);
  margin-left: auto;
}

.skill-role-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.skill-role-card {
  background-color: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skill-role-card--primary {
  border-color: var(--orange);
  background-color: rgba(232, 133, 43, 0.06);
}

.skill-role-card--ineligible {
  opacity: 0.35;
}

.skill-role-slot {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.skill-role-slot--primary {
  color: var(--orange);
}

.skill-role-composite {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.skill-role-pct {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.skill-role-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* WPA / impact section */
.skill-impact-section {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.skill-impact-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.skill-impact-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.skill-impact-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

.skill-impact-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Low-confidence mechanics notice — shown above absolute mechanics rows when
   the player's aim-all matchCount is below the confidence gate (< 3 matches). */
.skill-mechanics-low-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: var(--space-1) 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--border);
}

.skill-impact-warn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tan);
  background: rgba(215, 179, 108, 0.10);
  border: 1px solid rgba(215, 179, 108, 0.25);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-left: var(--space-2);
}

/* ── Per-side roles (G4-E) ────────────────────────────────────── */

/* Side label inline in header strip ("CT" / "T" prefix) */
.skill-side-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-right: 2px;
}

/* Thin divider dot between CT and T in the header */
.skill-role-divider {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 var(--space-1);
}

/* Primary role badges shown prominently in the roles section */
.skill-role-primaries {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.skill-role-primary-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--card-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.skill-role-primary-badge--ct {
  border-color: var(--blue);
  background-color: rgba(90, 159, 212, 0.07);
}

.skill-role-primary-badge--t {
  border-color: var(--tan);
  background-color: rgba(215, 179, 108, 0.07);
}

.skill-role-primary-side {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.skill-role-primary-badge--ct .skill-role-primary-side { color: var(--blue); }
.skill-role-primary-badge--t  .skill-role-primary-side { color: var(--tan);  }

.skill-role-primary-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

/* Two-column grid: CT roles | T roles */
.skill-side-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .skill-side-roles-grid { grid-template-columns: 1fr; }
}

.skill-side-roles-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skill-side-roles-heading {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* ── Playstyle Radar (player-profile.js G4-B) ─────────────────── */

.skill-radar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.skill-radar-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.skill-radar-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
}

.skill-radar-legend {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.skill-radar-wrap {
  display: flex;
  justify-content: center;
}

.skill-radar-svg {
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
}

.skill-radar-low-sample {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* ── Owner v2 Hub (stats.js G3-H) ─────────────────────────────── */

.hub-section {
  border-left: 3px solid var(--orange);
  padding-left: var(--space-4);
}

.hub-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.hub-error {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--red);
  padding: var(--space-2) 0;
}

/* Headline card */
.hub-headline-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  clip-path: var(--clip-corner);
  margin-bottom: var(--space-4);
}

.hub-headline-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 80px;
}

.hub-primary-role {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hub-overall-pct {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.hub-pct-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}

.hub-pct-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* WPA row */
.hub-wpa-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.hub-wpa-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}

.hub-wpa-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--orange);
}

/* Percentiles wrapper */
.hub-percentiles {
  margin-bottom: var(--space-4);
}

/* Role profile rows */
.hub-roles-section {
  margin-bottom: var(--space-4);
}

.hub-section-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hub-overall-rating {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--orange);
  margin-left: var(--space-2);
}

.hub-role-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-role-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.hub-role-row:last-child { border-bottom: none; }

.hub-role-row--primary .hub-role-name {
  color: var(--orange);
}

.hub-role-name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  min-width: 120px;
}

/* Trend chart */
.hub-trend-section {
  margin-bottom: var(--space-4);
}

.hub-trend-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: var(--space-3);
}

.hub-legend-dot {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 1px;
}

.hub-legend-dot--rating { background: var(--blue); }
.hub-legend-dot--impact { background: var(--orange); }

.hub-trend-chart-wrap {
  width: 100%;
  overflow-x: auto;
}

.hub-trend-svg {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
}

.hub-trend-empty {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-4) 0;
}

.hub-trend-note {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ============================================================
   Matches infill (feat1)
   Full-row translucent win/loss tint — applied via kit.css
   vk-row--win / vk-row--loss which now set background-color
   on td elements using --green-infill / --red-infill tokens.
   No additional rules needed here; kit.css owns the tint.
   ============================================================ */

/* ============================================================
   Profile matches subtab (feat1)
   Cinematic banner rows matching the Matches list style,
   with per-player stats as the main content.
   ============================================================ */

/* Row container — flex, vertically centred */
.pp2-match-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pp2-match-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.pp2-match-row:last-child {
  border-bottom: none;
}

.pp2-match-row:hover {
  background-color: var(--card-raised);
}

/* Win/loss full-row translucent infill */
.pp2-match-row--win  { background-color: var(--green-infill); }
.pp2-match-row--loss { background-color: var(--red-infill); }
.pp2-match-row--win:hover  { background-color: rgba(91, 168, 107, 0.17); }
.pp2-match-row--loss:hover { background-color: rgba(229, 68, 59,  0.17); }

/* Cinematic map banner thumbnail — same dimensions/style as matches-v2-thumb */
.pp2-cinematic-thumb {
  position: relative;
  width: 130px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}

.pp2-cinematic-thumb__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
  filter: brightness(0.40) saturate(0.75);
  z-index: 0;
}

.pp2-cinematic-thumb__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,17,20,0.80) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.pp2-cinematic-thumb__name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0 var(--space-2) 4px;
  white-space: nowrap;
}

/* Stats section — horizontal strip of 4 stats */
.pp2-match-row__stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  min-width: 0;
}

.pp2-match-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 44px;
}

.pp2-match-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* Rating gets orange accent */
.pp2-match-stat--rating .pp2-match-stat__value {
  color: var(--orange);
}

.pp2-match-stat__label {
  font-size: 10px;
  letter-spacing: 0.10em;
}

/* Right-side meta: result badge + date */
.pp2-match-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.pp2-match-row__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Players cols (feat2) — Rating 3.0, Round Swing, Win Rate columns */
.players-f2-th--r30,
.players-f2-th--swing,
.players-f2-th--wr {
  white-space: nowrap;
}

.players-f2-td--r30,
.players-f2-td--swing,
.players-f2-td--wr {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.players-f2-swing--pos {
  color: var(--green);
}

.players-f2-swing--neg {
  color: var(--red, #e84c4c);
}

/* Leaderboard roles (feat2) — Primary Role column */
.best-board-f2-th--role {
  white-space: nowrap;
  min-width: 140px;
}

.best-board-f2-cell--role {
  white-space: nowrap;
}


/* ── Heatmap viz (viz2) ──────────────────────────────────────── */

/* Toggle row: group Utility + Area names side by side */
.pp2-heatmap-toggles {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
}

/* Area-name labels rendered as absolute overlays on the radar canvas */
.area-name-label {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.03em;
  color:          var(--text);
  white-space:    nowrap;
  /* Dark pill background for legibility on any map */
  background:     rgba(14, 17, 20, 0.72);
  border:         1px solid rgba(255, 255, 255, 0.12);
  border-radius:  var(--radius-sm);
  padding:        1px 5px;
  /* Text shadow in case the pill is semi-transparent over a bright area */
  text-shadow:    0 1px 2px rgba(0, 0, 0, 0.85);
  line-height:    1.4;
  /* Do not intercept mouse events — clusters underneath stay interactive */
  pointer-events: none;
  user-select:    none;
}

/* Area boundaries (arender) — no DOM rules needed; lines are drawn on-canvas in drawAreaHulls */

/* ── Settings screen (Sub-project A2-4) ─────────────────────────── */

.settings-screen {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.settings-card-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.settings-account-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
}

.settings-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-raised);
  color: var(--text-muted);
  font-size: var(--text-lg);
}

.settings-account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-account-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}

.settings-account-steamid {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.settings-tier-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-tier-expiry {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.settings-redeem-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.settings-redeem-form .field {
  flex: 1;
}

.settings-redeem-success {
  color: var(--green);
  font-size: var(--text-sm);
  margin: 0;
}