/*
 * Deadeye components: every shared UI and chart class. Uses only var(--dl-*)
 * tokens (tints via color-mix), so tokens.css alone re-skins the site.
 * The first half is ported from design/system/tokens.css; the second half adds
 * the app shell, War Room layout and chart styles.
 */
/* ======================================================================
   Panels
   ====================================================================== */
.dl-panel {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dl-text) 2.5%, transparent), transparent 40%), var(--dl-surface-1);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius-sm);
  box-shadow: var(--dl-shadow-2);
  color: var(--dl-text-2);
}
.dl-panel--raised { background: var(--dl-surface-2); box-shadow: var(--dl-shadow-3); }
.dl-panel--sunken { background: var(--dl-surface-sunken); box-shadow: inset 0 1px 6px color-mix(in srgb, var(--dl-black) 60%, transparent); }
.dl-panel__header {
  position: relative; display: flex; align-items: center; gap: var(--dl-space-3);
  padding: var(--dl-space-3) var(--dl-space-4); border-bottom: 1px solid var(--dl-line);
  border-radius: var(--dl-radius-sm) var(--dl-radius-sm) 0 0;
}
.dl-panel__title { font-family: var(--dl-font-heading); font-size: var(--dl-text-lg); font-weight: 500; letter-spacing: var(--dl-track-heading); text-transform: uppercase; color: var(--dl-text); margin: 0; }
.dl-panel__actions { margin-left: auto; display: flex; gap: var(--dl-space-2); align-items: center; }
.dl-panel__body { padding: var(--dl-space-4); }
.dl-panel__footer { padding: var(--dl-space-2) var(--dl-space-4); border-top: 1px solid var(--dl-line); font-size: var(--dl-text-xs); color: var(--dl-text-muted); }

/* Category header band (our take on the painted tooltip headers). */
.dl-panel__header--weapon, .dl-panel__header--vitality, .dl-panel__header--spirit, .dl-panel__header--souls, .dl-panel__header--brass {
  background-image: var(--dl-tex-sunburst), linear-gradient(100deg, var(--dl-band) 0%, transparent 75%);
  border-bottom-color: var(--dl-band-line);
}
.dl-panel__header--weapon { --dl-band: color-mix(in srgb, var(--dl-weapon-base) 55%, transparent); --dl-band-line: color-mix(in srgb, var(--dl-weapon) 45%, transparent); }
.dl-panel__header--vitality { --dl-band: color-mix(in srgb, var(--dl-vitality-base) 50%, transparent); --dl-band-line: color-mix(in srgb, var(--dl-vitality) 45%, transparent); }
.dl-panel__header--spirit { --dl-band: color-mix(in srgb, var(--dl-spirit-base) 50%, transparent); --dl-band-line: color-mix(in srgb, var(--dl-spirit) 45%, transparent); }
.dl-panel__header--souls { --dl-band: color-mix(in srgb, var(--dl-souls-dim) 50%, transparent); --dl-band-line: color-mix(in srgb, var(--dl-souls) 40%, transparent); }
.dl-panel__header--brass { --dl-band: color-mix(in srgb, var(--dl-brass-dim) 45%, transparent); --dl-band-line: var(--dl-line-brass); }

/* Ornate frame: double hairline + brass corner brackets. Use for 1–2 hero panels per view. */
.dl-panel--ornate { border-color: var(--dl-line-brass); }
.dl-panel--ornate::before {
  --c: var(--dl-brass); --l: 14px;
  content: ""; position: absolute; inset: 4px; pointer-events: none; border-radius: var(--dl-radius-xs);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-brass) 16%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l) no-repeat;
}
.dl-panel--ornate::after {
  content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  transform: rotate(45deg); background: var(--dl-surface-1); border: 1px solid var(--dl-brass); pointer-events: none;
}
.dl-panel--ornate > .dl-panel__body, .dl-panel--ornate > .dl-panel__header { padding-left: var(--dl-space-5); padding-right: var(--dl-space-5); }

/* Flavour "document" card: warm paper + grain (use sparingly, never for tables). */
.dl-panel--paper { background: var(--dl-tex-paper); border-color: color-mix(in srgb, var(--dl-brass-bright) 22%, transparent); }

/* ======================================================================
   Section header
   ====================================================================== */
.dl-section-header { display: flex; align-items: center; gap: var(--dl-space-3); margin: var(--dl-space-8) 0 var(--dl-space-4); }
.dl-section-header__title { font-family: var(--dl-font-heading); font-size: var(--dl-text-xl); font-weight: 500; letter-spacing: var(--dl-track-heading); text-transform: uppercase; color: var(--dl-text); margin: 0; white-space: nowrap; }
.dl-section-header__title--label { font-family: var(--dl-font-label); font-size: var(--dl-text-sm); font-weight: 600; letter-spacing: var(--dl-track-label-wide); color: var(--dl-brass-bright); }
.dl-section-header__rule { position: relative; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--dl-line-brass), color-mix(in srgb, var(--dl-brass) 5%, transparent)); }
.dl-section-header__rule::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--dl-brass); }
.dl-section-header__meta { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); white-space: nowrap; }

/* ======================================================================
   Tabs
   ====================================================================== */
.dl-tabs { display: flex; gap: var(--dl-space-1); border-bottom: 1px solid var(--dl-line); }
.dl-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--dl-space-2);
  padding: var(--dl-space-2) var(--dl-space-4); background: none; border: 0; cursor: pointer;
  font-family: var(--dl-font-label); font-size: var(--dl-text-sm); font-weight: var(--dl-weight-semibold);
  letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted);
  transition: color var(--dl-dur-fast) var(--dl-ease), background-color var(--dl-dur-fast) var(--dl-ease);
}
.dl-tab:hover { color: var(--dl-text); background: color-mix(in srgb, var(--dl-text) 3%, transparent); }
.dl-tab[aria-selected="true"] { color: var(--dl-text); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dl-brass) 10%, transparent)); }
.dl-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--dl-brass-bright);
}
.dl-tab[aria-selected="true"]::before {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 6px; margin-left: -3px;
  transform: rotate(45deg); background: var(--dl-brass-bright);
}
.dl-tab__count { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-2xs); letter-spacing: 0; padding: 0 5px; border-radius: var(--dl-radius-pill); background: var(--dl-surface-3); color: var(--dl-text-2); }
/* Segmented variant for compact filters (rank range, phase). */
.dl-tabs--segmented { display: inline-flex; border: 1px solid var(--dl-line-strong); border-radius: var(--dl-radius-sm); padding: 2px; gap: 2px; background: var(--dl-surface-sunken); }
.dl-tabs--segmented .dl-tab { padding: var(--dl-space-1) var(--dl-space-3); border-radius: var(--dl-radius-xs); font-size: var(--dl-text-xs); }
.dl-tabs--segmented .dl-tab[aria-selected="true"] { background: var(--dl-surface-3); box-shadow: inset 0 0 0 1px var(--dl-line-brass); }
.dl-tabs--segmented .dl-tab[aria-selected="true"]::before, .dl-tabs--segmented .dl-tab[aria-selected="true"]::after { display: none; }

/* ======================================================================
   Buttons
   ====================================================================== */
.dl-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--dl-space-2);
  min-height: 36px; padding: 0 var(--dl-space-4); border-radius: var(--dl-radius-xs); border: 1px solid transparent;
  font-family: var(--dl-font-label); font-size: var(--dl-text-sm); font-weight: var(--dl-weight-bold);
  letter-spacing: var(--dl-track-label); text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter var(--dl-dur-fast) var(--dl-ease), transform var(--dl-dur-fast) var(--dl-ease), background-color var(--dl-dur-fast) var(--dl-ease);
}
.dl-btn:hover { filter: brightness(1.15); }
.dl-btn:active { transform: scale(0.98); filter: brightness(0.95); }
.dl-btn:disabled, .dl-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.dl-btn--primary {
  color: var(--dl-text-ink);
  background: linear-gradient(180deg, var(--dl-brass-light) 0%, var(--dl-brass-bright) 35%, var(--dl-brass) 100%);
  border-color: var(--dl-brass-edge);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dl-white) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--dl-black) 45%, transparent);
}
.dl-btn--primary::before { content: ""; position: absolute; inset: 2px; border: 1px solid color-mix(in srgb, var(--dl-bg-ink) 25%, transparent); border-radius: 1px; pointer-events: none; }
.dl-btn--secondary { color: var(--dl-brass-light); background: color-mix(in srgb, var(--dl-brass) 8%, transparent); border-color: var(--dl-line-brass); }
.dl-btn--secondary:hover { background: color-mix(in srgb, var(--dl-brass) 16%, transparent); }
.dl-btn--ghost { color: var(--dl-text-2); background: transparent; }
.dl-btn--ghost:hover { background: color-mix(in srgb, var(--dl-text) 6%, transparent); color: var(--dl-text); }
.dl-btn--danger { color: var(--dl-text); background: color-mix(in srgb, var(--dl-neg) 14%, transparent); border-color: color-mix(in srgb, var(--dl-neg) 50%, transparent); }
.dl-btn--sm { min-height: 28px; padding: 0 var(--dl-space-3); font-size: var(--dl-text-xs); }
.dl-btn--lg { min-height: 44px; padding: 0 var(--dl-space-6); font-size: var(--dl-text-md); }
.dl-btn--icon { padding: 0; width: 36px; }
.dl-btn--icon.dl-btn--sm { width: 28px; }

/* ======================================================================
   Chips & tags
   ====================================================================== */
.dl-chip {
  --dl-chip: var(--dl-text-2);
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--dl-radius-pill); border: 1px solid color-mix(in srgb, var(--dl-chip) 40%, transparent);
  background: color-mix(in srgb, var(--dl-chip) 10%, transparent);
  font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-chip); white-space: nowrap;
}
button.dl-chip { cursor: pointer; transition: filter var(--dl-dur-fast) var(--dl-ease); }
button.dl-chip:hover { filter: brightness(1.2); }
.dl-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--dl-chip) 24%, transparent); border-color: var(--dl-chip); }
.dl-chip--brass { --dl-chip: var(--dl-brass-bright); }
.dl-chip--souls { --dl-chip: var(--dl-souls); }
.dl-chip--weapon { --dl-chip: var(--dl-weapon); }
.dl-chip--vitality { --dl-chip: var(--dl-vitality); }
.dl-chip--spirit { --dl-chip: var(--dl-spirit); }
.dl-chip--amber { --dl-chip: var(--dl-amber); }
.dl-chip--sapphire { --dl-chip: var(--dl-sapphire-bright); }
.dl-chip--pos { --dl-chip: var(--dl-pos); }
.dl-chip--neg { --dl-chip: var(--dl-neg); }
.dl-chip--warn { --dl-chip: var(--dl-warn); }
.dl-chip__remove { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: -4px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--dl-text) 12%, transparent); color: inherit; font-size: 10px; line-height: 1; cursor: pointer; }

/* Tag: square, smaller, for metadata in tables (lane, phase). */
.dl-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--dl-radius-xs);
  background: var(--dl-surface-3); color: var(--dl-text-2); border: 1px solid var(--dl-line);
  font-family: var(--dl-font-label); font-size: var(--dl-text-2xs); font-weight: var(--dl-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ======================================================================
   Deltas
   ====================================================================== */
.dl-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-weight: var(--dl-weight-semibold); font-size: var(--dl-text-sm); color: var(--dl-neutral); }
.dl-delta::before { content: "●"; font-size: 0.6em; }
.dl-delta--pos { color: var(--dl-pos); }
.dl-delta--pos::before { content: "▲"; }
.dl-delta--neg { color: var(--dl-neg); }
.dl-delta--neg::before { content: "▼"; }
.dl-delta--neutral::before { content: "◆"; }

/* ======================================================================
   Stat tile
   ====================================================================== */
.dl-stat {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--dl-space-3) var(--dl-space-4); background: var(--dl-surface-1);
  border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm);
}
.dl-stat::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--dl-stat-accent, var(--dl-line-brass)); border-radius: 2px; }
.dl-stat--souls { --dl-stat-accent: var(--dl-souls); }
.dl-stat--weapon { --dl-stat-accent: var(--dl-weapon); }
.dl-stat--vitality { --dl-stat-accent: var(--dl-vitality); }
.dl-stat--spirit { --dl-stat-accent: var(--dl-spirit); }
.dl-stat__label { display: flex; align-items: center; gap: 6px; font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-stat__label .dl-icon { color: var(--dl-stat-accent, var(--dl-brass)); }
.dl-stat__value { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-2xl); font-weight: var(--dl-weight-semibold); line-height: 1.15; color: var(--dl-text); }
.dl-stat__unit { font-size: var(--dl-text-sm); font-weight: var(--dl-weight-medium); color: var(--dl-text-muted); margin-left: 2px; }
.dl-stat__compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-stat__compare .dl-num { color: var(--dl-text-2); }
.dl-stat__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2); margin-top: var(--dl-space-2); }
.dl-stat--unavailable .dl-stat__value { font-family: var(--dl-font-label); font-size: var(--dl-text-lg); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-faint); }
.dl-stat--unavailable::before { background: repeating-linear-gradient(180deg, var(--dl-text-faint) 0 3px, transparent 3px 6px); }

/* ======================================================================
   Bullet / percentile chart
   Set on .dl-bullet: --dl-p25, --dl-p75, --dl-avg, --dl-value (unitless 0–100 of the scale).
   ====================================================================== */
.dl-bullet { --dl-bullet-color: var(--dl-text); display: grid; gap: 4px; min-width: 160px; }
.dl-bullet--pos { --dl-bullet-color: var(--dl-pos); }
.dl-bullet--neg { --dl-bullet-color: var(--dl-neg); }
.dl-bullet__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--dl-space-2); }
.dl-bullet__track {
  position: relative; height: 10px; border-radius: var(--dl-radius-xs);
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--dl-line) calc(25% - 1px) 25%), var(--dl-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--dl-line);
}
.dl-bullet__band {
  position: absolute; top: 2px; bottom: 2px; left: calc(var(--dl-p25) * 1%); width: calc((var(--dl-p75) - var(--dl-p25)) * 1%);
  background: color-mix(in srgb, var(--dl-brass) 28%, transparent); border-left: 1px solid var(--dl-brass-dim); border-right: 1px solid var(--dl-brass-dim);
}
.dl-bullet__avg { position: absolute; top: -3px; bottom: -3px; left: calc(var(--dl-avg) * 1%); width: 2px; margin-left: -1px; background: var(--dl-brass-bright); }
.dl-bullet__marker {
  position: absolute; top: 50%; left: calc(var(--dl-value) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  transform: rotate(45deg); background: var(--dl-bullet-color); border: 2px solid var(--dl-bg-ink);
  box-shadow: 0 0 0 1px var(--dl-bullet-color);
}
.dl-bullet__scale { display: flex; justify-content: space-between; font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-2xs); color: var(--dl-text-faint); }
.dl-bullet--unavailable .dl-bullet__track { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--dl-text) 5%, transparent) 4px 8px), var(--dl-surface-sunken); }
.dl-bullet--unavailable .dl-bullet__marker { display: none; }

/* Simple percentile meter: --dl-pct 0–100. */
.dl-meter { position: relative; height: 6px; border-radius: var(--dl-radius-pill); background: var(--dl-surface-sunken); box-shadow: inset 0 0 0 1px var(--dl-line); overflow: hidden; }
.dl-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--dl-pct, 0) * 1%); background: var(--dl-meter-color, linear-gradient(90deg, var(--dl-brass-dim), var(--dl-brass-bright))); }

/* ======================================================================
   Rank badge — <span class="dl-rank" data-tier="0..11">
   ====================================================================== */
.dl-rank { --dl-rank-color: var(--dl-rank-0); --dl-rank-trim: var(--dl-brass); display: inline-flex; align-items: center; gap: var(--dl-space-2); vertical-align: middle; }
.dl-rank[data-tier="0"] { --dl-rank-color: var(--dl-rank-0); --dl-rank-trim: var(--dl-rank-0-trim); }
.dl-rank[data-tier="1"] { --dl-rank-color: var(--dl-rank-1); }
.dl-rank[data-tier="2"] { --dl-rank-color: var(--dl-rank-2); }
.dl-rank[data-tier="3"] { --dl-rank-color: var(--dl-rank-3); }
.dl-rank[data-tier="4"] { --dl-rank-color: var(--dl-rank-4); }
.dl-rank[data-tier="5"] { --dl-rank-color: var(--dl-rank-5); }
.dl-rank[data-tier="6"] { --dl-rank-color: var(--dl-rank-6); }
.dl-rank[data-tier="7"] { --dl-rank-color: var(--dl-rank-7); }
.dl-rank[data-tier="8"] { --dl-rank-color: var(--dl-rank-8); }
.dl-rank[data-tier="9"] { --dl-rank-color: var(--dl-rank-9); --dl-rank-trim: var(--dl-text-silver); }
.dl-rank[data-tier="10"] { --dl-rank-color: var(--dl-rank-10); --dl-rank-trim: var(--dl-brass-light); }
.dl-rank[data-tier="11"] { --dl-rank-color: var(--dl-rank-11); --dl-rank-trim: var(--dl-souls-bright); }
.dl-rank__emblem { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--dl-rank-color); filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--dl-black) 60%, transparent)); }
.dl-rank__emblem > svg { width: 100%; height: 100%; }
.dl-rank__subtier { position: absolute; inset: auto 0 -3px; text-align: center; font-family: var(--dl-font-display); font-size: 9px; font-weight: 900; color: var(--dl-text); text-shadow: 0 0 2px var(--dl-black), 0 0 2px var(--dl-black); }
.dl-rank__text { display: flex; flex-direction: column; line-height: 1.1; }
.dl-rank__name { font-family: var(--dl-font-heading); font-size: var(--dl-text-md); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dl-text); }
.dl-rank__meta { font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }
.dl-rank--sm .dl-rank__emblem { width: 20px; height: 20px; }
.dl-rank--sm .dl-rank__subtier { display: none; }
.dl-rank--sm .dl-rank__name { font-size: var(--dl-text-sm); }
.dl-rank--lg .dl-rank__emblem { width: 56px; height: 56px; }
.dl-rank--lg .dl-rank__subtier { font-size: 14px; bottom: -4px; }
.dl-rank--lg .dl-rank__name { font-size: var(--dl-text-xl); }
.dl-rank--unavailable .dl-rank__emblem { color: transparent; --dl-rank-trim: var(--dl-text-faint); opacity: 0.6; }

/* ======================================================================
   Hero chip — placeholder portrait (no hero art shipped)
   Set --dl-hero-hue (0–360) per hero for a stable tint.
   ====================================================================== */
.dl-hero { --dl-hero-ring: var(--dl-line-strong); display: inline-flex; align-items: center; gap: var(--dl-space-2); min-width: 0; }
.dl-hero--amber { --dl-hero-ring: var(--dl-amber); }
.dl-hero--sapphire { --dl-hero-ring: var(--dl-sapphire); }
.dl-hero__portrait {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, hsl(var(--dl-hero-hue, 35) 38% 42%), hsl(var(--dl-hero-hue, 35) 30% 16%) 70%);
  box-shadow: 0 0 0 2px var(--dl-bg-ink), 0 0 0 3px var(--dl-hero-ring);
  font-family: var(--dl-font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--dl-text); text-shadow: 0 1px 1px var(--dl-black);
}
.dl-hero__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dl-hero__name { font-family: var(--dl-font-heading); font-size: var(--dl-text-md); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-hero__meta { font-size: var(--dl-text-xs); color: var(--dl-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-hero--sm .dl-hero__portrait { width: 24px; height: 24px; font-size: 10px; }
.dl-hero--lg .dl-hero__portrait { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px var(--dl-bg-ink), 0 0 0 4px var(--dl-hero-ring), 0 0 0 7px color-mix(in srgb, var(--dl-brass) 15%, transparent); }
.dl-hero--lg .dl-hero__name { font-family: var(--dl-font-display); font-size: var(--dl-text-2xl); font-weight: 900; text-shadow: var(--dl-shadow-text); }

/* ======================================================================
   Team pills
   ====================================================================== */
.dl-team {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px; border-radius: var(--dl-radius-pill);
  font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-bold); letter-spacing: var(--dl-track-label); text-transform: uppercase;
}
.dl-team::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; }
.dl-team--amber { color: var(--dl-amber-bright); background: color-mix(in srgb, var(--dl-amber) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-amber) 55%, transparent); }
.dl-team--sapphire { color: var(--dl-sapphire-bright); background: color-mix(in srgb, var(--dl-sapphire) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-sapphire) 60%, transparent); }
.dl-team--solid.dl-team--amber { background: var(--dl-amber); color: var(--dl-amber-ink); box-shadow: none; }
.dl-team--solid.dl-team--sapphire { background: var(--dl-sapphire); color: var(--dl-sapphire-ink); box-shadow: none; }

/* ======================================================================
   Table — dense scoreboard
   ====================================================================== */
.dl-table-wrap { overflow-x: auto; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); background: var(--dl-surface-1); }
.dl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--dl-text-md); color: var(--dl-text-2); }
.dl-table th {
  position: sticky; top: 0; z-index: 1; padding: var(--dl-space-2) var(--dl-space-3); text-align: left; white-space: nowrap;
  background: var(--dl-surface-2); border-bottom: 1px solid var(--dl-line-brass);
  font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted);
}
.dl-table th[aria-sort] { cursor: pointer; }
.dl-table th[aria-sort="descending"]::after { content: " ▾"; color: var(--dl-brass-bright); }
.dl-table th[aria-sort="ascending"]::after { content: " ▴"; color: var(--dl-brass-bright); }
.dl-table td { padding: 6px var(--dl-space-3); border-bottom: 1px solid var(--dl-line-faint); white-space: nowrap; vertical-align: middle; }
.dl-table tbody tr { transition: background-color var(--dl-dur-instant) var(--dl-ease); }
.dl-table tbody tr:hover { background: color-mix(in srgb, var(--dl-text) 3.5%, transparent); }
.dl-table .dl-num, .dl-table td.dl-num, .dl-table th.dl-num { text-align: right; }
.dl-table--dense td { padding-top: 3px; padding-bottom: 3px; font-size: var(--dl-text-sm); }
.dl-table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--dl-text) 1.8%, transparent); }
.dl-table__row--amber td:first-child { box-shadow: inset 3px 0 0 var(--dl-amber); }
.dl-table__row--sapphire td:first-child { box-shadow: inset 3px 0 0 var(--dl-sapphire); }
.dl-table__row--self { background: linear-gradient(90deg, color-mix(in srgb, var(--dl-brass) 16%, transparent), color-mix(in srgb, var(--dl-brass) 4%, transparent)) !important; }
.dl-table__row--self td { color: var(--dl-text); }
.dl-table__group td { padding: var(--dl-space-2) var(--dl-space-3); background: var(--dl-bg-ink); font-family: var(--dl-font-label); font-size: var(--dl-text-xs); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-table__total td { border-top: 1px solid var(--dl-line-strong); font-weight: var(--dl-weight-semibold); color: var(--dl-text); background: var(--dl-surface-2); }
.dl-cell-best { color: var(--dl-gold); font-weight: var(--dl-weight-semibold); }

/* ======================================================================
   Tooltip — static card (.dl-tooltip) or CSS hover hint ([data-dl-tip])
   ====================================================================== */
.dl-tooltip {
  position: relative; max-width: 300px; padding: var(--dl-space-3);
  background: var(--dl-surface-1); border: 1px solid color-mix(in srgb, var(--dl-white) 6%, transparent); border-radius: var(--dl-radius-lg);
  box-shadow: var(--dl-shadow-3); font-size: var(--dl-text-sm); color: var(--dl-text-2);
}
.dl-tooltip__title { font-family: var(--dl-font-heading); font-size: var(--dl-text-md); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dl-text); margin-bottom: 4px; }
.dl-tooltip__row { display: flex; justify-content: space-between; gap: var(--dl-space-4); }
.dl-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--dl-surface-1); border-right: 1px solid color-mix(in srgb, var(--dl-white) 6%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--dl-white) 6%, transparent); }
.dl-tooltip--no-arrow::after { display: none; }
.dl-tooltip--floating { position: absolute; z-index: var(--dl-z-tooltip); pointer-events: none; }
[data-dl-tip] { position: relative; }
[data-dl-tip]::after {
  content: attr(data-dl-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: var(--dl-z-tooltip);
  width: max-content; max-width: 260px; padding: 6px 10px; transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  background: var(--dl-surface-1); border: 1px solid color-mix(in srgb, var(--dl-white) 8%, transparent); border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-3);
  font-family: var(--dl-font-body); font-size: var(--dl-text-xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dl-text-2); white-space: normal;
  transition: opacity var(--dl-dur-fast) var(--dl-ease), transform var(--dl-dur-fast) var(--dl-ease);
}
[data-dl-tip]:hover::after, [data-dl-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ======================================================================
   Insight / focus card
   ====================================================================== */
.dl-insight {
  --dl-priority: var(--dl-brass);
  position: relative; display: flex; flex-direction: column; gap: var(--dl-space-3); padding: var(--dl-space-4) var(--dl-space-4) var(--dl-space-4) var(--dl-space-5);
  background: linear-gradient(90deg, color-mix(in srgb, var(--dl-priority) 9%, transparent), transparent 55%), var(--dl-surface-1);
  border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm);
}
.dl-insight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dl-priority); border-radius: var(--dl-radius-sm) 0 0 var(--dl-radius-sm); }
.dl-insight[data-priority="high"] { --dl-priority: var(--dl-neg); }
.dl-insight[data-priority="medium"] { --dl-priority: var(--dl-warn); }
.dl-insight[data-priority="low"] { --dl-priority: var(--dl-text-silver); }
.dl-insight[data-kind="strength"] { --dl-priority: var(--dl-pos); }
.dl-insight[data-kind="weakness"] { --dl-priority: var(--dl-neg); }
.dl-insight__head { display: flex; align-items: center; gap: var(--dl-space-2); flex-wrap: wrap; }
.dl-insight__priority { font-family: var(--dl-font-label); font-size: var(--dl-text-2xs); font-weight: var(--dl-weight-bold); letter-spacing: var(--dl-track-label-wide); text-transform: uppercase; color: var(--dl-priority); }
.dl-insight__rank { margin-left: auto; font-family: var(--dl-font-display); font-weight: 900; font-size: var(--dl-text-lg); color: var(--dl-text-faint); }
.dl-insight__title { font-family: var(--dl-font-heading); font-size: var(--dl-text-lg); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dl-text); margin: 0; }
.dl-insight__body { color: var(--dl-text-2); font-size: var(--dl-text-md); margin: 0; }
.dl-insight__gap { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--dl-space-1) var(--dl-space-6); }
.dl-insight__gap-value { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-lg); font-weight: var(--dl-weight-semibold); color: var(--dl-text); }
.dl-insight__footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-3); padding-top: var(--dl-space-3); border-top: 1px solid var(--dl-line); font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-confidence { display: inline-flex; align-items: center; gap: 6px; }
.dl-confidence__pips { display: inline-flex; gap: 2px; }
.dl-confidence__pips i { width: 6px; height: 10px; background: var(--dl-surface-4); transform: skewX(-12deg); }
.dl-confidence[data-level="1"] .dl-confidence__pips i:nth-child(-n+1),
.dl-confidence[data-level="2"] .dl-confidence__pips i:nth-child(-n+2),
.dl-confidence[data-level="3"] .dl-confidence__pips i:nth-child(-n+3),
.dl-confidence[data-level="4"] .dl-confidence__pips i:nth-child(-n+4) { background: var(--dl-brass-bright); }
.dl-replay-link {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-bold); letter-spacing: var(--dl-track-label); text-transform: uppercase;
  color: var(--dl-brass-bright); text-decoration: none;
}
.dl-replay-link .dl-num { color: var(--dl-text); letter-spacing: 0; }

/* ======================================================================
   Timeline scrubber — set --dl-progress (0–100) and --dl-at on events
   ====================================================================== */
.dl-scrubber { display: grid; gap: 6px; user-select: none; }
.dl-scrubber__phases { display: flex; height: 14px; font-family: var(--dl-font-label); font-size: 10px; letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-faint); }
.dl-scrubber__phase { flex: var(--dl-span, 1); padding-left: 4px; border-left: 1px solid var(--dl-line-strong); overflow: hidden; white-space: nowrap; }
.dl-scrubber__track { position: relative; height: 22px; border-radius: var(--dl-radius-xs); background: var(--dl-surface-sunken); box-shadow: inset 0 0 0 1px var(--dl-line); cursor: pointer; }
.dl-scrubber__progress { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--dl-progress, 0) * 1%); background: linear-gradient(90deg, color-mix(in srgb, var(--dl-brass) 8%, transparent), color-mix(in srgb, var(--dl-brass) 28%, transparent)); border-right: 1px solid var(--dl-brass-bright); }
.dl-scrubber__event { position: absolute; top: 4px; bottom: 4px; left: calc(var(--dl-at) * 1%); width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--dl-event, var(--dl-text-muted)); }
.dl-scrubber__event--amber { --dl-event: var(--dl-amber); }
.dl-scrubber__event--sapphire { --dl-event: var(--dl-sapphire-bright); }
.dl-scrubber__event--objective { --dl-event: var(--dl-gold); top: 2px; bottom: 2px; width: 5px; margin-left: -2.5px; }
.dl-scrubber__event--death { --dl-event: var(--dl-neg); }
.dl-scrubber__thumb { position: absolute; top: 50%; left: calc(var(--dl-progress, 0) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg); background: var(--dl-brass-light); border: 2px solid var(--dl-bg-ink); box-shadow: var(--dl-glow-brass); }
.dl-scrubber__times { display: flex; justify-content: space-between; font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }
.dl-scrubber__controls { display: flex; align-items: center; gap: var(--dl-space-2); }
.dl-timecode { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-md); font-weight: var(--dl-weight-semibold); color: var(--dl-text); padding: 2px 8px; border-radius: var(--dl-radius-xs); background: var(--dl-surface-sunken); box-shadow: inset 0 0 0 1px var(--dl-line); }

/* ======================================================================
   Sparkline / chart container (renders inline SVG)
   ====================================================================== */
.dl-spark { display: grid; gap: 2px; }
.dl-spark__plot { position: relative; width: 100%; height: var(--dl-spark-height, 40px); }
.dl-spark__plot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dl-spark__line { fill: none; stroke: var(--dl-spark-color, var(--dl-brass-bright)); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dl-spark__area { fill: var(--dl-spark-color, var(--dl-brass-bright)); opacity: 0.12; stroke: none; }
.dl-spark__ref { fill: none; stroke: var(--dl-text-faint); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.dl-spark__band { fill: color-mix(in srgb, var(--dl-brass) 10%, transparent); stroke: none; }
.dl-spark__dot { fill: var(--dl-spark-color, var(--dl-brass-bright)); stroke: var(--dl-bg-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dl-spark__gap { fill: url(#dl-hatch); }
.dl-spark--souls { --dl-spark-color: var(--dl-souls); }
.dl-spark--amber { --dl-spark-color: var(--dl-amber); }
.dl-spark--sapphire { --dl-spark-color: var(--dl-sapphire-bright); }
.dl-spark__axis { display: flex; justify-content: space-between; font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-2xs); color: var(--dl-text-faint); }
.dl-chart { background: var(--dl-surface-sunken); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-xs); padding: var(--dl-space-3); }

/* ======================================================================
   Legend
   ====================================================================== */
.dl-legend { display: flex; flex-wrap: wrap; gap: var(--dl-space-2) var(--dl-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.dl-legend__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--dl-swatch, var(--dl-text-muted)); flex: none; }
.dl-legend__swatch--line { width: 16px; height: 2px; border-radius: 0; }
.dl-legend__swatch--dashed { width: 16px; height: 0; border-top: 2px dashed var(--dl-swatch, var(--dl-text-muted)); background: none; border-radius: 0; }
.dl-legend__swatch--diamond { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 0; }
.dl-legend__swatch--diamond-hollow { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--dl-swatch, var(--dl-text-muted)); }
.dl-legend__swatch--band { width: 16px; height: 8px; background: color-mix(in srgb, var(--dl-brass) 28%, transparent); box-shadow: inset 1px 0 var(--dl-brass-dim), inset -1px 0 var(--dl-brass-dim); }
.dl-legend__swatch--hatch { width: 16px; height: 10px; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--dl-text-faint) 3px 4px); }

/* ======================================================================
   Provenance badge — <span class="dl-prov" data-prov="...">
   ====================================================================== */
.dl-prov {
  --dl-prov: var(--dl-prov-derived);
  display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; border-radius: var(--dl-radius-xs);
  border: 1px solid color-mix(in srgb, var(--dl-prov) 45%, transparent); color: var(--dl-prov);
  font-family: var(--dl-font-label); font-size: 10px; font-weight: var(--dl-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.dl-prov::before { font-family: var(--dl-font-numeric); font-size: 9px; letter-spacing: 0; }
.dl-prov[data-prov="provider"] { --dl-prov: var(--dl-prov-provider); }
.dl-prov[data-prov="provider"]::before { content: "◆"; }
.dl-prov[data-prov="native"] { --dl-prov: var(--dl-prov-native); }
.dl-prov[data-prov="native"]::before { content: "●"; }
.dl-prov[data-prov="derived"] { --dl-prov: var(--dl-prov-derived); }
.dl-prov[data-prov="derived"]::before { content: "ƒ"; font-style: italic; }
.dl-prov[data-prov="sampled"] { --dl-prov: var(--dl-prov-sampled); }
.dl-prov[data-prov="sampled"]::before { content: "∴"; }
.dl-prov[data-prov="reconciled"] { --dl-prov: var(--dl-prov-reconciled); }
.dl-prov[data-prov="reconciled"]::before { content: "⇄"; }
.dl-prov[data-prov="unavailable"] { --dl-prov: var(--dl-prov-unavailable); border-style: dashed; }
.dl-prov[data-prov="unavailable"]::before { content: "∅"; }

/* ======================================================================
   Unavailable / empty states — never render missing data as 0
   ====================================================================== */
.dl-value--unavailable {
  font-family: var(--dl-font-label); font-size: 0.85em; font-weight: var(--dl-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dl-text-faint); text-decoration: underline dotted var(--dl-text-faint); text-underline-offset: 3px; cursor: help;
}
.dl-empty {
  display: grid; justify-items: center; gap: var(--dl-space-2); padding: var(--dl-space-8) var(--dl-space-6); text-align: center;
  border: 1px dashed var(--dl-line-strong); border-radius: var(--dl-radius-sm);
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--dl-text) 1.5%, transparent) 10px 20px);
}
.dl-empty__icon { width: 36px; height: 36px; color: var(--dl-text-faint); }
.dl-empty__title { font-family: var(--dl-font-heading); font-size: var(--dl-text-lg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dl-text-2); margin: 0; }
.dl-empty__reason { max-width: 48ch; font-size: var(--dl-text-sm); color: var(--dl-text-muted); margin: 0; }
.dl-empty__fix { font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-empty--inline { display: flex; align-items: center; justify-items: start; text-align: left; padding: var(--dl-space-3) var(--dl-space-4); }

/* ======================================================================
   Loading
   ====================================================================== */
.dl-skeleton {
  display: block; height: 1em; border-radius: var(--dl-radius-xs);
  background: linear-gradient(90deg, var(--dl-surface-2) 0%, var(--dl-surface-3) 50%, var(--dl-surface-2) 100%) 0 0 / 200% 100%;
  animation: dl-shimmer 1.4s var(--dl-ease) infinite;
}
.dl-skeleton--text { height: 0.8em; margin: 0.35em 0; }
.dl-skeleton--value { height: 1.6em; width: 60%; }
.dl-skeleton--block { height: 120px; }
.dl-spinner {
  display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  background: repeating-conic-gradient(var(--dl-brass-bright) 0 8deg, transparent 8deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, var(--dl-black) 40%, var(--dl-black) 62%, transparent 64%);
  mask: radial-gradient(circle, transparent 38%, var(--dl-black) 40%, var(--dl-black) 62%, transparent 64%);
  animation: dl-spin 2.4s linear infinite;
}
.dl-loading { display: inline-flex; align-items: center; gap: var(--dl-space-3); font-family: var(--dl-font-label); font-size: var(--dl-text-sm); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-progress { height: 3px; background: var(--dl-surface-3); overflow: hidden; border-radius: 2px; }
.dl-progress::after { content: ""; display: block; height: 100%; width: calc(var(--dl-pct, 30) * 1%); background: var(--dl-brass-bright); box-shadow: var(--dl-glow-brass); transition: width var(--dl-dur-slow) var(--dl-ease); }

/* Attention pulse — reserve for one genuinely new thing (PB, rank-up). */
.dl-pulse { animation: dl-pulse var(--dl-dur-pulse) var(--dl-ease) infinite; }

@keyframes dl-shimmer { to { background-position: -200% 0; } }
@keyframes dl-spin { to { transform: rotate(360deg); } }
@keyframes dl-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dl-brass-bright) 0%, transparent); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dl-brass-bright) 35%, transparent), 0 0 20px color-mix(in srgb, var(--dl-brass-bright) 25%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ======================================================================
   Deadeye app components (beyond the design-system set)
   ====================================================================== */
.dl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Grade badge: <span class="dl-grade" data-grade="A..F|none"> ---------- */
.dl-grade {
  --dl-grade-color: var(--dl-text-faint);
  display: inline-grid; place-items: center; width: 2.1em; height: 2.3em; flex: none;
  font-family: var(--dl-font-display); font-weight: 900; font-size: var(--dl-grade-size, var(--dl-text-xl)); line-height: 1; color: var(--dl-grade-color);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dl-grade-color) 16%, transparent), transparent), var(--dl-surface-sunken);
  border: 1px solid color-mix(in srgb, var(--dl-grade-color) 55%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  text-shadow: var(--dl-shadow-text);
}
.dl-grade[data-grade="A"] { --dl-grade-color: var(--dl-grade-a); }
.dl-grade[data-grade="B"] { --dl-grade-color: var(--dl-grade-b); }
.dl-grade[data-grade="C"] { --dl-grade-color: var(--dl-grade-c); }
.dl-grade[data-grade="D"] { --dl-grade-color: var(--dl-grade-d); }
.dl-grade[data-grade="F"] { --dl-grade-color: var(--dl-grade-f); }
.dl-grade[data-grade="none"] { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); letter-spacing: 0.06em; }
.dl-grade--sm { --dl-grade-size: var(--dl-text-md); }
.dl-grade--lg { --dl-grade-size: var(--dl-text-4xl); }

/* Grade tile: category + letter + score bar (report card). */
.dl-grade-tile { display: grid; gap: 6px; padding: var(--dl-space-3); background: var(--dl-surface-1); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); color: inherit; text-decoration: none; text-align: left; font: inherit; }
a.dl-grade-tile:hover, button.dl-grade-tile:hover, .dl-grade-tile[aria-pressed="true"] { border-color: var(--dl-line-brass); background: var(--dl-surface-2); filter: none; cursor: pointer; }
.dl-grade-tile__cat { display: flex; align-items: center; gap: 6px; min-height: 2.4em; font-family: var(--dl-font-label); font-size: var(--dl-text-2xs); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-grade-tile__row { display: flex; align-items: center; gap: var(--dl-space-2); }
.dl-grade-tile__score { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-lg); color: var(--dl-text); }
.dl-grade-tile__of { font-size: var(--dl-text-2xs); color: var(--dl-text-faint); }
.dl-grade-tile__reason { font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-grade-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2); font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-grade-tile__foot b { color: var(--dl-text); font-weight: var(--dl-weight-semibold); }

/* ---------- Score (0-100 vs rank band, 50 = average) ---------- */
.dl-score { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-weight: var(--dl-weight-semibold); color: var(--dl-score-mid); }
.dl-score[data-level="high"] { color: var(--dl-score-high); }
.dl-score[data-level="low"] { color: var(--dl-score-low); }

/* ---------- Select (native <select> in a styled wrapper) ---------- */
.dl-select { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 26px 0 10px; border: 1px solid var(--dl-line-brass); border-radius: var(--dl-radius-sm); background: var(--dl-surface-1); color: var(--dl-text); font-size: var(--dl-text-sm); white-space: nowrap; }
.dl-select::after { content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--dl-text-faint); pointer-events: none; font-size: var(--dl-text-xs); }
.dl-select select { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.dl-select select option { background: var(--dl-surface-1); color: var(--dl-text); }
.dl-select:focus-within { outline: 2px solid var(--dl-focus); outline-offset: 2px; }
.dl-select .dl-rank, .dl-select .dl-hero { pointer-events: none; }

/* ---------- Input ---------- */
.dl-input { height: 32px; width: 100%; padding: 0 var(--dl-space-3); border: 1px solid var(--dl-line-strong); border-radius: var(--dl-radius-sm); background: var(--dl-surface-sunken); color: var(--dl-text); font-size: var(--dl-text-sm); }
.dl-input::placeholder { color: var(--dl-text-faint); }
.dl-input:focus { outline: none; border-color: var(--dl-line-brass); box-shadow: var(--dl-glow-focus); }

/* ---------- Player picker (viewing-as) ---------- */
.dl-picker { position: relative; display: grid; gap: var(--dl-space-2); width: min(420px, 100%); }
.dl-picker__list { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.dl-picker__option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--dl-space-3); width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--dl-radius-xs); background: none; color: var(--dl-text-2); text-align: left; cursor: pointer; }
.dl-picker__option:hover, .dl-picker__option[aria-selected="true"] { background: var(--dl-surface-2); border-color: var(--dl-line); color: var(--dl-text); }
.dl-picker__meta { font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }
.dl-popover { position: absolute; z-index: var(--dl-z-dropdown); top: calc(100% + 6px); right: 0; width: 420px; max-width: calc(100vw - 32px); padding: var(--dl-space-3); background: var(--dl-surface-2); border: 1px solid var(--dl-line-brass); border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-3); }

/* ---------- War Room shell ---------- */
.dl-shell { grid-template-columns: var(--dl-sidebar-width) minmax(0, 1fr); }
.dl-shell__main { min-width: 0; }
.dl-nav__crumbs { font-size: var(--dl-text-sm); color: var(--dl-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-nav__crumbs b { font-weight: inherit; color: var(--dl-text); }
.dl-nav__meta { font-size: var(--dl-text-xs); color: var(--dl-text-muted); white-space: nowrap; }
.dl-nav__viewer { position: relative; }
.dl-nav__viewer-btn { display: flex; align-items: center; gap: var(--dl-space-3); padding: 3px 8px; border: 1px solid transparent; border-radius: var(--dl-radius-sm); background: none; cursor: pointer; }
.dl-nav__viewer-btn:hover, .dl-nav__viewer-btn[aria-expanded="true"] { border-color: var(--dl-line-brass); background: var(--dl-surface-1); }

/* ---------- Account (Steam sign-in) ---------- */
.dl-account { position: relative; }
.dl-account__summary { display: flex; align-items: center; gap: var(--dl-space-2); max-width: 220px; padding: 3px 8px; border: 1px solid var(--dl-line-brass); border-radius: var(--dl-radius-sm); color: var(--dl-text-2); font-size: var(--dl-text-sm); cursor: pointer; list-style: none; }
.dl-account__summary::-webkit-details-marker { display: none; }
.dl-account__summary:hover, .dl-account[open] > .dl-account__summary { background: var(--dl-surface-1); color: var(--dl-text); }
.dl-account__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dl-pos-fill); }
.dl-account__menu { width: 260px; display: grid; gap: var(--dl-space-2); }
.dl-account__menu > .dl-eyebrow, .dl-account__id { margin: 0; }
.dl-account__id { font-size: var(--dl-text-sm); color: var(--dl-text); overflow-wrap: anywhere; }
.dl-account__signin { white-space: nowrap; }
.dl-shell__notice:empty { display: none; }
.dl-shell__notice { margin-bottom: var(--dl-space-4); }

.dl-side { position: sticky; top: calc(var(--dl-nav-height) + var(--dl-space-4)); max-height: calc(100vh - var(--dl-nav-height) - var(--dl-space-8)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--dl-space-4); }
.dl-side__group { display: grid; gap: 2px; }
.dl-side__group > .dl-eyebrow { padding: 0 8px 4px; }
.dl-side__note { margin: auto 0 0; padding: 0 8px; font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }
.dl-side-link { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--dl-radius-xs); color: var(--dl-text-2); text-decoration: none; font-size: var(--dl-text-sm); }
.dl-side-link:hover, .dl-side-link[data-hot] { background: var(--dl-surface-2); color: var(--dl-text); filter: none; }
.dl-side-link[aria-current="page"] { background: var(--dl-surface-2); color: var(--dl-text); box-shadow: inset 2px 0 0 var(--dl-brass-bright); }
.dl-side-link__score { display: inline-flex; align-items: center; gap: 4px; font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-side-link__score .dl-delta { font-size: var(--dl-text-2xs); }

/* ---------- Scope bar ---------- */
.dl-scopebar { position: sticky; top: var(--dl-nav-height); z-index: var(--dl-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-3) var(--dl-space-4); padding: 10px var(--dl-space-6); background: linear-gradient(180deg, var(--dl-bg-ink), color-mix(in srgb, var(--dl-nav-bottom) 96%, transparent)); border-bottom: 1px solid var(--dl-line-brass); }
.dl-scopebar__field { display: flex; align-items: center; gap: 8px; }
.dl-scopebar__status { margin-left: auto; white-space: nowrap; font-size: var(--dl-text-xs); color: var(--dl-text-muted); }

/* ---------- Page body ---------- */
.dl-page { max-width: var(--dl-page-max, 1240px); margin: 0 auto; padding: var(--dl-space-6); display: grid; gap: var(--dl-space-6); }
.dl-page__title { display: flex; align-items: flex-end; gap: var(--dl-space-4); flex-wrap: wrap; }
.dl-page__title h1 { margin: 0; font-family: var(--dl-font-display); font-size: var(--dl-text-3xl); text-transform: uppercase; letter-spacing: var(--dl-track-display); line-height: 1; }
.dl-page .dl-section-header { margin: 0 0 var(--dl-space-3); }

/* ---------- Focus strip (gaps) ---------- */
.dl-gaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dl-space-4); }
.dl-gaps .dl-insight__body { font-size: var(--dl-text-sm); }
.dl-chip--xs { height: 18px; padding: 0 8px; }

/* ---------- Skill shape + category tiles ---------- */
.dl-shape { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--dl-space-4); align-items: stretch; }
.dl-cat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dl-space-3); }
.dl-cat-tile { display: grid; gap: 8px; align-content: start; padding: var(--dl-space-3) var(--dl-space-4); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); background: var(--dl-surface-1); color: inherit; text-decoration: none; transition: border-color var(--dl-dur-fast) var(--dl-ease), background var(--dl-dur-fast) var(--dl-ease); }
.dl-cat-tile:hover, .dl-cat-tile[data-hot] { border-color: var(--dl-line-brass); background: var(--dl-surface-2); filter: none; }
.dl-cat-tile__head { display: flex; align-items: center; gap: 8px; font-family: var(--dl-font-heading); text-transform: uppercase; letter-spacing: var(--dl-track-heading); font-size: var(--dl-text-sm); color: var(--dl-text); }
.dl-cat-tile__head .dl-score { margin-left: auto; font-size: var(--dl-text-xl); }
.dl-cat-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }
.dl-cat-tile__reason { font-size: var(--dl-text-xs); color: var(--dl-text-muted); margin: 0; }
.dl-cat-tile--na { background: repeating-linear-gradient(135deg, var(--dl-surface-1) 0 6px, var(--dl-bg-ink) 6px 12px); }

/* ---------- Lower row ---------- */
.dl-lower { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--dl-space-4); align-items: start; }
.dl-rightcol { display: grid; gap: var(--dl-space-4); }
.dl-trends { display: grid; gap: var(--dl-space-3); }
.dl-trend { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; gap: var(--dl-space-3); align-items: center; font-size: var(--dl-text-sm); }
.dl-trend .dl-spark { --dl-spark-height: 32px; }
.dl-queue { display: grid; gap: 8px; }
.dl-queue__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); background: var(--dl-surface-1); font-size: var(--dl-text-sm); }
.dl-kv { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px var(--dl-space-4); margin: 0; font-size: var(--dl-text-sm); }
.dl-kv dt { color: var(--dl-text-muted); }
.dl-kv dd { margin: 0; text-align: right; font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); color: var(--dl-text); }

/* ---------- Unavailable inline value with reason ---------- */
.dl-reason { font-size: var(--dl-text-xs); color: var(--dl-text-muted); }

/* ---------- Error banner ---------- */
.dl-error { display: flex; align-items: center; gap: var(--dl-space-3); padding: var(--dl-space-3) var(--dl-space-4); border: 1px solid color-mix(in srgb, var(--dl-neg) 50%, transparent); border-radius: var(--dl-radius-sm); background: color-mix(in srgb, var(--dl-neg) 10%, transparent); color: var(--dl-text); font-size: var(--dl-text-sm); }
.dl-error .dl-icon { color: var(--dl-neg); }

/* ======================================================================
   Charts (SVG). Every paint reads a token, so re-theming re-colours charts.
   ====================================================================== */
.dl-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--dl-font-label); }
.dl-svg text { font-size: var(--dl-chart-font-size); fill: var(--dl-chart-label); letter-spacing: 0.06em; }
.dl-svg .dl-svg__num { font-family: var(--dl-font-numeric); letter-spacing: 0; fill: var(--dl-text); font-weight: 600; }
.dl-svg .dl-svg__muted { fill: var(--dl-text-muted); }
.dl-svg .dl-svg__grid { fill: none; stroke: var(--dl-chart-grid); stroke-width: 1; }
.dl-svg .dl-svg__grid--dashed { stroke-dasharray: 3 3; }
.dl-svg .dl-svg__axis { fill: none; stroke: var(--dl-chart-grid-strong); stroke-width: 1; }
.dl-svg .dl-svg__hatch { fill: url(#dl-hatch); stroke: none; }

/* Radar (skill shape) */
.dl-radar text { font-size: 9.5px; text-transform: uppercase; fill: var(--dl-text-2); }
.dl-radar .dl-radar__score { font-family: var(--dl-font-numeric); font-size: 10px; letter-spacing: 0; fill: var(--dl-text); font-weight: 600; }
.dl-radar .dl-radar__score--na { fill: var(--dl-text-muted); }
.dl-radar__band { fill: color-mix(in srgb, var(--dl-brass) 10%, transparent); stroke: none; }
.dl-radar__band-hole { fill: var(--dl-surface-1); stroke: none; }
.dl-radar__avg { fill: none; stroke: var(--dl-chart-benchmark); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dl-radar__area { fill: color-mix(in srgb, var(--dl-chart-you) 12%, transparent); stroke: none; }
.dl-radar__line { fill: none; stroke: var(--dl-chart-you); stroke-width: var(--dl-chart-line-width); stroke-linejoin: round; }
.dl-radar__dot { fill: var(--dl-chart-you); stroke: var(--dl-bg); stroke-width: 1; }
.dl-radar__dot--low { fill: var(--dl-neg); }
.dl-radar [data-key] { transition: opacity var(--dl-dur-fast) var(--dl-ease); }
.dl-radar__axis[data-hot] { stroke: var(--dl-brass-bright); }

/* Rank colours by tier: any element with data-tier gets --dl-tier-color. */
[data-tier="0"] { --dl-tier-color: var(--dl-rank-0); }
[data-tier="1"] { --dl-tier-color: var(--dl-rank-1); }
[data-tier="2"] { --dl-tier-color: var(--dl-rank-2); }
[data-tier="3"] { --dl-tier-color: var(--dl-rank-3); }
[data-tier="4"] { --dl-tier-color: var(--dl-rank-4); }
[data-tier="5"] { --dl-tier-color: var(--dl-rank-5); }
[data-tier="6"] { --dl-tier-color: var(--dl-rank-6); }
[data-tier="7"] { --dl-tier-color: var(--dl-rank-7); }
[data-tier="8"] { --dl-tier-color: var(--dl-rank-8); }
[data-tier="9"] { --dl-tier-color: var(--dl-rank-9); }
[data-tier="10"] { --dl-tier-color: var(--dl-rank-10); }
[data-tier="11"] { --dl-tier-color: var(--dl-rank-11); }

/* Series colours by index: data-series="1..8". */
[data-series="1"] { --dl-series: var(--dl-series-1); }
[data-series="2"] { --dl-series: var(--dl-series-2); }
[data-series="3"] { --dl-series: var(--dl-series-3); }
[data-series="4"] { --dl-series: var(--dl-series-4); }
[data-series="5"] { --dl-series: var(--dl-series-5); }
[data-series="6"] { --dl-series: var(--dl-series-6); }
[data-series="7"] { --dl-series: var(--dl-series-7); }
[data-series="8"] { --dl-series: var(--dl-series-8); }

/* Rank timeline: x = game time, y = rank bands 1-11, one line per stat. */
.dl-rtl { position: relative; display: grid; gap: var(--dl-space-3); }
.dl-rtl__band { fill: color-mix(in srgb, var(--dl-tier-color) var(--dl-chart-rank-band-mix), transparent); stroke: none; }
.dl-rtl__band[data-scope] { fill: color-mix(in srgb, var(--dl-tier-color) calc(var(--dl-chart-rank-band-mix) * 2), transparent); }
.dl-rtl__band-edge { stroke: var(--dl-chart-grid); stroke-width: 1; }
.dl-rtl__tier { font-family: var(--dl-font-label); text-transform: uppercase; }
.dl-svg .dl-rtl__tier { fill: var(--dl-tier-color); font-size: 9.5px; }
.dl-svg .dl-rtl__tier[data-scope] { font-weight: 700; }
.dl-rtl__line { fill: none; stroke: var(--dl-series); stroke-width: var(--dl-chart-line-width); stroke-linejoin: round; stroke-linecap: round; }
.dl-rtl__dot { fill: var(--dl-series); stroke: var(--dl-bg-ink); stroke-width: 1; }
.dl-rtl__dot--low { fill: var(--dl-bg-ink); stroke: var(--dl-series); stroke-dasharray: 2 1.5; }
.dl-rtl__series[data-off] { display: none; }
.dl-rtl__series[data-dim] { opacity: 0.18; }
.dl-rtl__cursor { stroke: var(--dl-brass-bright); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.dl-rtl__hit { fill: transparent; cursor: crosshair; }
.dl-rtl__legend { display: flex; flex-wrap: wrap; gap: var(--dl-space-2); }
.dl-rtl__toggle { --dl-chip: var(--dl-series); }
.dl-rtl__toggle[aria-pressed="false"] { --dl-chip: var(--dl-text-faint); opacity: 0.7; }
.dl-rtl__toggle .dl-legend__swatch { background: var(--dl-series); }
.dl-rtl__tip { min-width: 200px; }
.dl-rtl__tip .dl-tooltip__row { align-items: baseline; font-size: var(--dl-text-xs); }
.dl-rtl__tip-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 6px; transform: rotate(45deg); background: var(--dl-series); }
/* Rank separation: how well a stat tells ranks apart (rankTimeline showSeparation). */
.dl-rtl__series[data-separation="weak"] .dl-rtl__line { stroke-dasharray: 6 4; }
.dl-rtl__series[data-separation="none"] .dl-rtl__line { stroke-dasharray: 1.5 4; opacity: 0.6; }
.dl-rtl__dot--nosignal { opacity: 0.55; }
.dl-rtl__toggle[data-separation="unplaced"] { border-style: dashed; }
.dl-rtl__toggle-note { margin-left: 4px; font-size: var(--dl-text-2xs); color: var(--dl-text-faint); text-transform: none; letter-spacing: 0; }
.dl-rtl__key { display: flex; flex-wrap: wrap; gap: var(--dl-space-2) var(--dl-space-4); font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
.dl-rtl__key-item { display: inline-flex; align-items: center; gap: 6px; }
.dl-rtl__key-line { stroke: var(--dl-text-muted); stroke-width: var(--dl-chart-line-width); stroke-linecap: round; }
.dl-rtl__key-item[data-separation="weak"] .dl-rtl__key-line { stroke-dasharray: 6 4; }
.dl-rtl__key-item[data-separation="none"] .dl-rtl__key-line { stroke-dasharray: 1.5 4; opacity: 0.6; }
.dl-rtl__key-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px dashed var(--dl-text-muted); }
.dl-insight[data-kind="strength"] { --dl-priority: var(--dl-pos); }

/* Rank ladder: one row per category/measure, x = rank tiers. */
.dl-ladder { display: grid; gap: 0; }
.dl-ladder__axis, .dl-ladder__row { display: grid; grid-template-columns: var(--dl-ladder-label, 200px) minmax(0, 1fr) var(--dl-ladder-side, 150px); gap: var(--dl-space-4); align-items: center; }
.dl-ladder__axis { padding: var(--dl-space-2) 0; border-bottom: 1px solid var(--dl-line); }
.dl-ladder__row { padding: 8px 0; border-bottom: 1px solid var(--dl-line-faint); }
.dl-ladder__row--sub { padding: 4px 0; }
.dl-ladder__row--sub .dl-ladder__label { padding-left: 26px; font-size: var(--dl-text-sm); color: var(--dl-text-2); }
.dl-ladder__label { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--dl-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--dl-text-md); color: var(--dl-text); }
.dl-ladder__side { display: grid; gap: 2px; font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }
.dl-ladder__side .dl-rank { font-size: var(--dl-text-sm); }
.dl-ladder__rail-stop { stop-color: var(--dl-tier-color); }
.dl-ladder__rail { opacity: 0.55; }
.dl-ladder__tick { stroke: var(--dl-line-strong); stroke-width: 1; }
.dl-ladder__scope { fill: color-mix(in srgb, var(--dl-brass) 12%, transparent); stroke: color-mix(in srgb, var(--dl-brass-bright) 45%, transparent); stroke-width: 1; }
.dl-ladder__band { fill: color-mix(in srgb, var(--dl-brass-bright) 22%, transparent); stroke: color-mix(in srgb, var(--dl-brass-bright) 60%, transparent); stroke-width: 1; }
.dl-ladder__band-label { color: var(--dl-text-muted); font-size: var(--dl-text-xs); white-space: nowrap; }
.dl-ladder__me { fill: var(--dl-brass-bright); stroke: var(--dl-bg); stroke-width: 2; }
.dl-ladder__me--low { fill: var(--dl-bg); stroke: var(--dl-brass-bright); stroke-dasharray: 2 1.5; }
.dl-svg .dl-ladder__median { font-family: var(--dl-font-numeric); font-size: 9px; letter-spacing: 0; fill: var(--dl-text-faint); }
.dl-svg .dl-ladder__station { fill: var(--dl-tier-color); font-size: 9px; text-transform: uppercase; }
.dl-svg .dl-ladder__median--scope { fill: var(--dl-brass-bright); font-weight: var(--dl-weight-bold); }
.dl-ladder__me--nosignal { fill: transparent; stroke: var(--dl-text-faint); stroke-dasharray: none; opacity: 0.8; }
.dl-ladder__side--nosignal .dl-rank { opacity: 0.6; }
.dl-ladder__row[data-focus] { background: color-mix(in srgb, var(--dl-brass) 8%, transparent); box-shadow: inset 2px 0 0 var(--dl-brass); }
.dl-ladder__row--unavailable .dl-ladder__label { color: var(--dl-text-muted); }
.dl-ladder__na { display: flex; align-items: center; min-height: 26px; padding: 0 var(--dl-space-3); border-radius: var(--dl-radius-xs); font-size: var(--dl-text-xs); color: var(--dl-text-muted); background: repeating-linear-gradient(135deg, var(--dl-surface-1) 0 6px, var(--dl-bg-ink) 6px 12px); box-shadow: inset 0 0 0 1px var(--dl-line); min-width: 0; }
.dl-ladder__flag { justify-self: start; padding: 0 6px; border-radius: var(--dl-radius-pill); font-family: var(--dl-font-label); font-size: var(--dl-text-2xs); font-weight: var(--dl-weight-semibold); letter-spacing: var(--dl-track-label); text-transform: uppercase; cursor: help; color: var(--dl-text-muted); box-shadow: inset 0 0 0 1px var(--dl-line-strong); }
.dl-ladder__flag[data-separation="weak"] { color: var(--dl-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-warn) 40%, transparent); }
.dl-ladder__value { color: var(--dl-text-2); font-size: var(--dl-text-2xs); }
.dl-ladder__value b { color: var(--dl-text); font-weight: var(--dl-weight-semibold); }

/* Bar compare: you vs benchmark bars. */
.dl-barcmp { display: grid; gap: var(--dl-space-2); }
.dl-barcmp__row { display: grid; grid-template-columns: var(--dl-barcmp-label, 130px) minmax(0, 1fr) auto; gap: var(--dl-space-3); align-items: center; font-size: var(--dl-text-sm); }
.dl-barcmp__track { position: relative; height: 14px; background: var(--dl-surface-sunken); box-shadow: inset 0 0 0 1px var(--dl-line); border-radius: var(--dl-radius-xs); }
.dl-barcmp__bar { position: absolute; left: 0; top: 2px; bottom: 2px; width: calc(var(--dl-bar) * 1%); background: var(--dl-bar-color, var(--dl-chart-you)); border-radius: 1px; }
.dl-barcmp__bar--ref { top: auto; bottom: -3px; height: 3px; background: var(--dl-chart-benchmark); }
.dl-barcmp__value { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); color: var(--dl-text); text-align: right; min-width: 64px; }
.dl-barcmp__row[data-team="0"] { --dl-bar-color: var(--dl-team-0); }
.dl-barcmp__row[data-team="1"] { --dl-bar-color: var(--dl-team-1); }
.dl-barcmp__row[data-self] .dl-barcmp__label { color: var(--dl-self); }

/* KPI strip: headline numbers above a page. */
.dl-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--dl-kpi-min, 220px), 1fr)); gap: var(--dl-space-3); }
.dl-kpi { position: relative; display: flex; flex-direction: column; gap: var(--dl-space-1); min-width: 0; padding: var(--dl-space-4) var(--dl-space-5); background: var(--dl-surface-1); border-radius: var(--dl-radius-md); box-shadow: inset 0 0 0 1px var(--dl-line); overflow: hidden; }
.dl-kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--dl-kpi-accent, var(--dl-line-brass)); }
.dl-kpi[data-tone="pos"] { --dl-kpi-accent: var(--dl-pos); }
.dl-kpi[data-tone="neg"] { --dl-kpi-accent: var(--dl-neg); }
.dl-kpi[data-tone="muted"] { --dl-kpi-accent: var(--dl-line-strong); }
.dl-kpi__label { font-family: var(--dl-font-label); font-size: var(--dl-text-2xs); font-weight: var(--dl-weight-bold); letter-spacing: var(--dl-track-label-wide); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-kpi__value { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dl-space-2); min-width: 0; font-family: var(--dl-font-heading); font-size: var(--dl-text-xl); letter-spacing: var(--dl-track-heading); text-transform: uppercase; color: var(--dl-text); }
.dl-kpi__value .dl-num { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); }
.dl-kpi--empty .dl-kpi__value { color: var(--dl-text-faint); font-size: var(--dl-text-lg); }
.dl-kpi__sub { font-size: var(--dl-text-sm); color: var(--dl-text-2); }
.dl-kpi__foot { margin-top: auto; padding-top: var(--dl-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-2); font-size: var(--dl-text-2xs); color: var(--dl-text-muted); }

/* Chart tooltip host. */
.dl-chart-host { position: relative; }

@media (max-width: 1340px) {
  .dl-shape { grid-template-columns: 330px minmax(0, 1fr); }
  .dl-scopebar { padding: 10px var(--dl-space-4); gap: 8px 12px; }
  .dl-page { padding: var(--dl-space-5) var(--dl-space-4); }
}
@media (max-width: 1100px) {
  .dl-shape, .dl-lower, .dl-gaps { grid-template-columns: minmax(0, 1fr); }
  .dl-shell { grid-template-columns: minmax(0, 1fr); }
  .dl-shell > .dl-sidebar { display: none; }
}