/* ── DraftMind · styles.css ──────────────────────────────────────────────── */

/* ── CSS VARIABLES ───────────────────────────────────────────────────────── */
:root {
  /* ── Stitch palette ─── */
  --bg-base:        #0D1B2A;
  --bg-panel:       #0F1C2C;
  --bg-card:        #1E2B3B;
  --bg-card-hover:  #283646;
  --bg-input:       #0D1B2A;
  --bg-debug:       #0D1B2A;

  --border:         #2a3a52;
  --border-accent:  #4d4637;

  --text-primary:   #d6e4f9;
  --text-secondary: #778DA9;
  --text-muted:     #415A77;
  --text-label:     #415A77;

  --accent:         #C9A84C;
  --accent-dim:     #a08630;
  --accent-bg:      rgba(201, 168, 76, 0.08);
  --accent-border:  rgba(201, 168, 76, 0.25);

  --green:          #67dd8e;
  --green-bg:       rgba(103, 221, 142, 0.08);
  --green-border:   rgba(103, 221, 142, 0.3);

  --orange:         #E6C364;
  --orange-bg:      rgba(230, 195, 100, 0.08);

  --danger:         #E05A5A;
  --danger-bg:      rgba(224, 90, 90, 0.1);
  --danger-border:  rgba(224, 90, 90, 0.3);

  --teal:           #5DD9D0;
  --red:            #ffb4ab;
  --red-dark:       #E05A5A;
  --gold:           #C9A84C;
  --gold-bright:    #E6C364;

  --rank-badge:     #1E2B3B;

  /* ── Aliases for fallback patterns ─── */
  --surface-alt:    #0F1C2C;
  --surface-raised: #1E2B3B;
  --text-tertiary:  #415A77;
  --success:        #67dd8e;
  --warning:        #E6C364;
  --blue:           #5DD9D0;

  /* ── Typography ─── */
  --font-hero:      'Space Grotesk', sans-serif;
  --font-display:   'JetBrains Mono', monospace;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --font-condensed: 'JetBrains Mono', monospace;

  /* ── Shapes ─── */
  --radius-sm:      0px;
  --radius:         0px;
  --radius-lg:      0px;

  --shadow-card:    0 2px 12px rgba(0,0,0,0.5);
  --shadow-panel:   0 4px 24px rgba(0,0,0,0.6);
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.925rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  max-width: 1480px;
  margin: 0 auto;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--accent);
}

.header-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── MAIN LAYOUT ─────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 300px 1fr 240px;
  flex: 1;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  gap: 1.25rem;
  align-items: start;
}

/* ── PANELS ──────────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  box-shadow: var(--shadow-panel);
}

.panel--sidebar {
  position: sticky;
  top: 3.5rem;
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
  padding: 0.85rem;
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}

.panel-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* ── FORM ────────────────────────────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.85rem; }

.field-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.field-input, .field-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.45rem 0.65rem;
  width: 100%;
  transition: border-color 0.15s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.field-select {
  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='%238a8fa0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  padding-right: 2rem;
  cursor: pointer;
}

.field-input:focus, .field-select:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

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

.field-hint {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ── ONBOARDING ──────────────────────────────────────────────────────────── */
.onboard-header {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 0.5rem;
}

.onboard-actions { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }

.slot-hint {
  display: block; font-family: var(--font-mono); font-size: 0.55rem;
  color: var(--text-muted); margin-top: 0.2rem; letter-spacing: 0.02em;
}

/* ── ADVANCED TOOLS WRAPPER ──────────────────────────────────────────────── */
.advanced-tools {
  margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem;
}

.advanced-tools__toggle {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--text-muted); cursor: pointer;
  list-style: none; text-transform: uppercase;
}
.advanced-tools__toggle::-webkit-details-marker { display: none; }
.advanced-tools__toggle::before { content: '▸ '; color: var(--text-muted); }
.advanced-tools[open] > .advanced-tools__toggle::before { content: '▾ '; }

.advanced-tools__content { padding-top: 0.6rem; }

/* ── INPUT MODE TOGGLE ───────────────────────────────────────────────────── */
.input-mode-toggle {
  display: flex; gap: 0; margin-bottom: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}

.mode-btn {
  flex: 1; padding: 0.35rem 0.5rem; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  background: var(--bg-input); color: var(--text-muted);
  transition: background 0.12s ease, color 0.12s ease;
}
.mode-btn:hover { color: var(--text-secondary); }

.mode-btn--active {
  background: var(--accent-bg); color: var(--accent); font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

/* ── DRAFT SLOTS ─────────────────────────────────────────────────────────── */
.draft-slots {
  margin-bottom: 0.85rem;
}

.draft-slots__label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; color: var(--teal); text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.draft-slots--enemy .draft-slots__label {
  color: var(--red);
}

.draft-slots--bans {
  margin-top: 0.5rem;
}
.draft-slots--bans .draft-slots__label {
  color: var(--text-muted);
}

.draft-slot {
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 12px;
}

.draft-slot__role {
  font-family: var(--font-display); font-size: 10px; font-weight: 500;
  color: var(--text-muted); min-width: 4.2rem; text-align: right;
  letter-spacing: 0.02em; text-transform: uppercase;
}

.draft-slot__input {
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.82rem;
  padding: 0.3rem 0.5rem; flex: 1; min-width: 0;
  outline: none; transition: border-color 0.15s ease;
}

.draft-slot__input::placeholder { color: var(--text-muted); font-size: 0.75rem; font-style: italic; }

.draft-slot__input:focus {
  border-color: var(--accent-dim); box-shadow: 0 0 0 2px var(--accent-bg);
}

.draft-slots--enemy .draft-slot__input:focus {
  border-color: rgba(192, 57, 43, 0.4); box-shadow: 0 0 0 2px var(--danger-bg);
}

/* ── FORM ACTIONS ────────────────────────────────────────────────────────── */
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }

.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn--primary { background: var(--accent); color: #3d2e00; flex: 1; transition: opacity 0.15s; }
.btn--primary:hover { background: var(--gold-bright); }
.btn--primary:active { opacity: 0.85; }
.btn--primary:disabled { opacity: 0.55; cursor: wait; }

.btn--analyze {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 14px 1.2rem;
  letter-spacing: 0.12em;
  width: 100%;
}

.btn--secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  flex: 1;
}
.btn--secondary:hover { background: var(--accent-bg); color: var(--accent); }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-accent);
}
.btn--ghost:hover { background: var(--bg-card); color: var(--text-primary); }

.btn--muted {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  padding: 0.4rem 0.8rem;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.btn--muted:hover { color: var(--text-secondary); border-color: var(--border-accent); }

.btn--small { font-size: 0.62rem; padding: 0.25rem 0.6rem; letter-spacing: 0.08em; }
.btn--small:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.btn--disabled, .btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* ── ADVANCED SETTINGS ──────────────────────────────────────────────────── */
.advanced-settings {
  margin-top: 0.85rem; border-top: 1px solid var(--border); padding-top: 0.6rem;
}

.advanced-settings__toggle {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--text-muted); cursor: pointer;
  list-style: none; text-transform: uppercase;
}
.advanced-settings__toggle::-webkit-details-marker { display: none; }
.advanced-settings__toggle::before { content: '▸ '; color: var(--text-muted); }
.advanced-settings[open] > .advanced-settings__toggle::before { content: '▾ '; }

.advanced-settings__content { padding-top: 0.5rem; }

.field-group--compact { margin-bottom: 0.4rem; }
.field-select--small { padding: 0.35rem 0.55rem; font-size: 0.78rem; }

/* ── PHASE OVERRIDE INDICATOR ──────────────────────────────────────────── */
.phase-override-indicator {
  margin-bottom: 0.5rem; padding: 0.3rem 0.65rem;
  background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 0.4rem;
}

.phase-override__label { color: var(--accent); font-weight: 600; }
.phase-override__detected { color: var(--text-muted); }

/* ── MODE INDICATOR ──────────────────────────────────────────────────────── */
.mode-indicator {
  margin-bottom: 0.5rem; padding: 0.3rem 0.65rem;
  background: rgba(138, 143, 160, 0.06); border: 1px solid var(--border-accent); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em;
}

.mode-indicator__label { color: var(--text-secondary); font-weight: 500; }
.mode-indicator__desc { color: var(--text-muted); font-weight: 400; }

/* ── TEST CASE LOADER ───────────────────────────────────────────────────── */
.test-loader { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.test-loader__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.test-loader__label { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.15em; color: var(--text-muted); }
.test-loader__textarea {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.45;
  padding: 0.45rem 0.65rem; width: 100%; resize: vertical; outline: none; transition: border-color 0.15s ease;
}
.test-loader__textarea:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 2px var(--accent-bg); }
.test-loader__textarea::placeholder { color: var(--text-muted); }
.test-loader__error { font-family: var(--font-mono); font-size: 0.65rem; color: var(--danger); margin-top: 0.3rem; }
.test-loader__status { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent-text); margin-top: 0.3rem; }
.test-loader__actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.test-loader__actions > .btn { flex: 1; }

/* ── RESULTS PANEL ───────────────────────────────────────────────────────── */
.panel--results { min-height: 280px; }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 3rem 2rem; text-align: center;
}
.empty-icon { font-size: 2rem; color: var(--border-accent); line-height: 1; }
.empty-text { color: var(--text-muted); font-size: 0.85rem; max-width: 28ch; }

/* ── ERROR BOX ───────────────────────────────────────────────────────────── */
.error-box {
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-left: 3px solid var(--danger);
  border-radius: var(--radius); padding: 0.85rem 1.1rem; margin-bottom: 0.85rem;
}
.error-label {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--danger); display: block; margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.error-message { color: #e06c6c; font-size: 0.85rem; line-height: 1.5; }

/* ── RESULT HEADER ───────────────────────────────────────────────────────── */
.result-header { margin-bottom: 0.85rem; }

.rh {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: 0 0 20px var(--accent-bg);
}

.rh__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.rh__hero {
  font-family: var(--font-hero);
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.rh__meta {
  display: flex; gap: 1rem; margin-top: 0.25rem;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
}

.rh__summary {
  margin-top: 0.45rem; color: var(--text-primary); font-size: 0.92rem; line-height: 1.5;
}

/* ── TRUST BADGE ─────────────────────────────────────────────────────────── */
.trust-badge {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm);
  text-transform: uppercase; display: inline-block; line-height: 1.3;
}

.trust-badge--high   { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.trust-badge--medium { background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(230,126,34,0.3); }
.trust-badge--low    { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

.rh__trust-explanation {
  margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4;
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.12em; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
  text-transform: uppercase; display: inline-block; line-height: 1.3;
}

.badge--high   { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge--medium { background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(230,126,34,0.3); }
.badge--low    { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

.badge--type-forced      { background: rgba(46,204,113,0.12); color: #2ecc71; border: 1px solid rgba(46,204,113,0.35); }
.badge--type-strong      { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge--type-conditional { background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(230,126,34,0.3); }
.badge--type-weak        { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

.badge--sm { font-size: 0.52rem; padding: 0.1rem 0.35rem; }

/* ── SECTION HEADINGS ────────────────────────────────────────────────────── */
.result-section { margin-bottom: 1.1rem; }
.result-section:last-child { margin-bottom: 0; }

.section-heading {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-label); margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.section-heading--toggle { cursor: pointer; list-style: none; }
.section-heading--toggle::-webkit-details-marker { display: none; }
.section-heading--toggle::before { content: '▸ '; color: var(--text-muted); }
details[open] > .section-heading--toggle::before { content: '▾ '; }

/* ── TOP CARD ────────────────────────────────────────────────────────────── */
.top-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
}

.top-card__section-label {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.15em;
  color: var(--accent-dim); margin-bottom: 0.45rem; text-transform: uppercase;
  font-weight: 600;
}

.top-card__reasons { list-style: none; margin-bottom: 0.6rem; }
.top-card__reasons li {
  font-size: 0.85rem; color: var(--text-secondary); padding: 0.12rem 0; padding-left: 1rem; position: relative;
}
.top-card__reasons li::before { content: '›'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }

.top-card__details { margin-top: 0.4rem; }
.top-card__details-toggle {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted);
  cursor: pointer; letter-spacing: 0.06em;
}
.top-card__breakdown { padding-top: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.breakdown-row { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); line-height: 1.55; }

.top-card__null { color: var(--text-muted); font-style: italic; font-size: 0.88rem; }

.top-card__subheadline {
  font-size: 0.92rem; color: var(--text-primary); line-height: 1.45; margin-bottom: 0.5rem;
  font-weight: 500;
}

/* ── MAIN ISSUE CALLOUT ──────────────────────────────────────────────────── */
.main-issue {
  margin-bottom: 0.75rem; padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--orange); background: var(--orange-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.main-issue__label {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  color: var(--orange); margin-bottom: 0.2rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main-issue ul {
  margin: 0; padding-left: 1rem; list-style: disc;
}
.main-issue ul li {
  font-size: 0.78rem; color: var(--text-primary); line-height: 1.45;
  padding: 0.05rem 0; font-weight: 500;
}

/* ── WHY BULLETS ─────────────────────────────────────────────────────────── */
.why-bullets {
  margin: 0 0 0.5rem; padding-left: 1rem; list-style: none;
}
.why-bullets li {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
  padding: 0.1rem 0 0.1rem 0.6rem; position: relative;
}
.why-bullets li::before {
  content: '✓'; position: absolute; left: -0.4rem;
  color: var(--green); font-weight: 700; font-size: 0.75rem;
}

/* ── DRAFT PRINCIPLE ──────────────────────────────────────────────────────── */
.draft-principle {
  margin-top: 0.6rem; padding: 0.45rem 0.65rem;
  border-left: 3px solid var(--accent); background: rgba(255, 215, 0, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.78rem; line-height: 1.4;
  display: flex; gap: 0.35rem; align-items: flex-start;
}
.draft-principle__icon { opacity: 0.85; font-size: 0.82rem; }
.draft-principle__text { color: var(--text-secondary); opacity: 0.9; }

/* ── ENEMY STRATEGY LABEL ────────────────────────────────────────────────── */
.enemy-strat {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.55rem; padding: 0.25rem 0.5rem;
  background: rgba(192, 57, 43, 0.06); border: 1px solid rgba(192, 57, 43, 0.15);
  border-radius: var(--radius);
}
.enemy-strat__label {
  font-family: var(--font-mono); font-size: 0.52rem; font-weight: 600;
  color: var(--danger); letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.enemy-strat__value {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  color: var(--text-primary);
}

.enemy-strat__info {
  background: none; border: 1px solid var(--border-accent); border-radius: 50%;
  width: 1.1rem; height: 1.1rem; font-size: 0.55rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; flex-shrink: 0;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.enemy-strat__info:hover,
.enemy-strat__info:focus { color: var(--text-primary); border-color: var(--text-secondary); outline: none; }

.enemy-strat__tooltip {
  display: none; position: absolute; top: calc(100% + 0.35rem); right: 0;
  background: var(--bg-card); border: 1px solid var(--border-accent);
  border-radius: var(--radius); padding: 0.45rem 0.65rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  font-family: var(--font-body); font-size: 0.7rem; line-height: 1.6;
  color: var(--text-secondary); white-space: nowrap; z-index: 10;
}

.enemy-strat { position: relative; }
.enemy-strat__info:hover + .enemy-strat__tooltip,
.enemy-strat__info:focus + .enemy-strat__tooltip,
.enemy-strat:focus-within .enemy-strat__tooltip,
.enemy-strat__tooltip:hover { display: block; }

/* ── DRAFT PHASE LABEL ───────────────────────────────────────────────────── */
.draft-phase {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.4rem; padding: 0.2rem 0.5rem;
  background: rgba(119, 141, 169, 0.06); border: 1px solid rgba(119, 141, 169, 0.15);
  border-radius: var(--radius);
}
.draft-phase__label {
  font-family: var(--font-mono); font-size: 0.52rem; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.draft-phase__value {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  color: var(--text-secondary);
}

/* ── STRUCTURED EXPLANATION (Phase 3) ───────────────────────────────────── */
.se-section {
  margin-bottom: 0.6rem;
}
.se-section:last-child { margin-bottom: 0; }

.se-section__label {
  font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600;
  color: var(--accent-dim); letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.se-section__text {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45;
}

.se-bullets {
  margin: 0; padding: 0 0 0 0.9rem; list-style: none;
}
.se-bullets li {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55;
  position: relative; padding-left: 0.15rem; margin-bottom: 0.1rem;
}

/* Main issue — red accent */
.se-bullets--issue li::before {
  content: "•"; position: absolute; left: -0.85rem;
  color: var(--danger); font-weight: 700;
}

/* Why this pick — green check */
.se-bullets--why li::before {
  content: "✓"; position: absolute; left: -0.85rem;
  color: var(--green); font-size: 0.75rem;
}

/* Tradeoffs — muted warning */
.se-bullets--tradeoff li::before {
  content: "—"; position: absolute; left: -0.85rem;
  color: var(--text-muted); font-weight: 600;
}
.se-bullets--tradeoff li {
  color: var(--text-muted); font-style: italic; font-size: 0.76rem;
}

/* Confidence — muted green tint */
.se-section--confidence .se-section__text {
  font-size: 0.76rem; color: var(--text-muted); font-style: italic;
}

/* Risk — muted warning tint */
.se-section--risk {
  padding: 0.3rem 0.5rem;
  border-left: 2px solid rgba(230, 126, 34, 0.3);
  background: rgba(230, 126, 34, 0.03);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.se-section--risk .se-section__label { color: var(--orange); }
.se-section--risk .se-section__text { font-size: 0.76rem; }

/* Why not alternative — subtle blue accent like comparative-note */
.se-section--comparative {
  padding: 0.35rem 0.55rem;
  border-left: 2px solid rgba(100, 180, 255, 0.35);
  background: rgba(100, 180, 255, 0.03);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.se-section--comparative .se-section__label {
  color: rgba(100, 180, 255, 0.65);
}
.se-section--comparative .se-section__text {
  font-size: 0.78rem;
}

/* Next step — accent card */
.se-section--next {
  padding: 0.4rem 0.6rem;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}
.se-section--next .se-section__label {
  color: var(--accent);
}
.se-section--next .se-section__text {
  font-size: 0.82rem; color: var(--text-primary); font-weight: 500;
}

/* Draft identity — "How your draft wins" */
.se-section--identity {
  padding: 0.4rem 0.6rem;
  background: rgba(119, 141, 169, 0.06); border: 1px solid rgba(119, 141, 169, 0.12);
  border-radius: var(--radius);
}
.se-section--identity .se-section__label { color: var(--text-muted); }
.se-bullets--identity li { font-size: 0.76rem; color: var(--text-secondary); }
.se-bullets--identity li::before {
  content: "→"; position: absolute; left: -0.85rem;
  color: var(--text-muted); font-size: 0.7rem;
}

/* ── COMPARATIVE NOTE ───────────────────────────────────────────────────── */
.comparative-note {
  margin-top: 0.55rem; padding: 0.4rem 0.65rem;
  border-left: 2px solid rgba(100, 180, 255, 0.4);
  background: rgba(100, 180, 255, 0.04);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.comparative-note__label {
  font-family: var(--font-mono); font-size: 0.54rem; font-weight: 600;
  color: rgba(100, 180, 255, 0.7); letter-spacing: 0.1em; text-transform: uppercase;
}
.comparative-note__text {
  font-size: 0.78rem; color: var(--text-secondary); line-height: 1.35;
}

/* ── NEXT STEP CARD ──────────────────────────────────────────────────────── */
.next-step-card {
  margin-top: 0.6rem; padding: 0.5rem 0.75rem;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.15rem;
}
.next-step-card__label {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase;
}
.next-step-card__text {
  font-size: 0.82rem; color: var(--text-primary); font-weight: 500; line-height: 1.4;
}

/* ── RECOMMENDED PICK LABEL ──────────────────────────────────────────────── */
.rh__top-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.15rem;
}

.rh__pick-label {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 500;
  letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase;
}

.btn-copy-chat {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.04em; padding: 0.2rem 0.5rem;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
  opacity: 0.75;
}
.btn-copy-chat:hover { color: var(--accent); border-color: var(--accent-border); opacity: 1; }

.rh__micro {
  margin-top: 0.25rem; font-size: 0.78rem; font-weight: 500;
  color: var(--text-secondary); line-height: 1.4;
}

.rh__close-call {
  margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--orange); letter-spacing: 0.03em;
}

/* ── SECONDARY SECTIONS (de-emphasized) ──────────────────────────────────── */
.chip-row--secondary { opacity: 0.8; }

/* ── CHIP BADGES (strengths / warnings) ─────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; }

.chip {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.06em; padding: 0.18rem 0.5rem; border-radius: 999px;
  display: inline-block; line-height: 1.3;
}

.chip--strength {
  background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border);
}

.chip--warning {
  background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(230,126,34,0.3);
}

/* ── REASONING & NEXT STEP ──────────────────────────────────────────────── */
.reasoning-text {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.35rem;
}

.next-step {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary);
  margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--border);
}
.next-step__label { color: var(--accent); font-weight: 600; }

/* ── CLEAN ALTERNATIVES ─────────────────────────────────────────────────── */
.clean-alt {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.45rem 0.75rem; cursor: pointer;
  transition: border-color 0.12s ease; margin-bottom: 0.25rem;
}
.clean-alt:hover { border-color: var(--border-accent); }
.clean-alt--expanded { border-color: var(--border-accent); }
.clean-alt:last-child { margin-bottom: 0; }

.clean-alt__row {
  display: flex; align-items: center; gap: 0.65rem;
}

.clean-alt__hero {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary); white-space: nowrap;
}

.clean-alt__label {
  font-size: 0.75rem; color: var(--text-secondary); line-height: 1.35;
  flex: 1;
}

.clean-alt__chevron {
  font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0;
}

/* ── Expanded alternative detail ────────────────────────────────────────── */
.alt-detail {
  margin-top: 0.4rem; padding: 0.4rem 0.55rem;
  border-top: 1px solid var(--border);
}

.alt-detail__reason {
  font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4;
  margin-bottom: 0.3rem;
}

.alt-detail__strengths {
  margin: 0; padding: 0 0 0 0.85rem; list-style: none;
}
.alt-detail__strengths li {
  font-size: 0.72rem; color: var(--text-secondary); line-height: 1.5;
  position: relative; padding-left: 0.15rem;
}
.alt-detail__strengths li::before {
  content: "✓"; position: absolute; left: -0.85rem;
  color: var(--green); font-size: 0.7rem;
}

.alt-detail__tradeoff {
  font-size: 0.68rem; color: var(--text-muted); line-height: 1.4;
  margin-top: 0.25rem; font-style: italic;
}

/* ── DETAILED REASONING FIELDS ──────────────────────────────────────────── */
.detailed-field { margin-bottom: 0.65rem; }
.detailed-field:last-child { margin-bottom: 0; }

.detailed-field__label {
  font-family: var(--font-mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.detailed-field__text {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
}

/* ── HERO → WHY THIS PICK DIVIDER ────────────────────────────────────────── */
.result-header + .result-section {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

/* ── RESULT HEADER EXTENSIONS ───────────────────────────────────────────── */
.rh__tagline {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500;
  color: var(--accent-dim); letter-spacing: 0.06em; margin-top: 0.2rem;
}

.rh__headline {
  margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4;
}

/* ── WHY NOT SECTION ─────────────────────────────────────────────────────── */
.why-not-section { margin-bottom: 1rem; opacity: 0.85; }

.why-not-heading { color: var(--text-muted); }

.why-not-row {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.3rem 0; border-bottom: 1px solid var(--border);
}
.why-not-row:last-child { border-bottom: none; }

.why-not-row__hero {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap; min-width: 5.5rem;
}

.why-not-row__reason {
  font-size: 0.75rem; color: var(--text-muted); line-height: 1.35;
}

/* ── BAN SECTION ─────────────────────────────────────────────────────────── */
.ban-section { margin-bottom: 1.1rem; }

.ban-heading { color: var(--red); font-family: var(--font-display); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }

.ban-card {
  background: var(--bg-card); border: 1px solid var(--danger-border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem; margin-bottom: 0.4rem;
}

.ban-card__hero {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--danger); line-height: 1.2; margin-bottom: 0.2rem;
}

.ban-card__headline {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 0.35rem;
}

.ban-reasons {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.35rem;
}

.ban-reason {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  padding: 0.15rem 0.45rem; border-radius: 999px; line-height: 1.3;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border);
}

.ban-pick-counter {
  font-size: 0.72rem; color: var(--accent-dim); line-height: 1.4;
  margin-top: 0.3rem; font-style: italic;
}

.ban-summary {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin-top: 0.25rem;
}

.ban-empty {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.85rem; text-align: center;
}
.ban-empty__headline {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted);
}
.ban-empty__body {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem;
  opacity: 0.7;
}

.ban-alts { display: flex; flex-direction: column; gap: 0.25rem; }

.ban-alt {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.4rem 0.65rem; cursor: pointer;
  transition: border-color 0.12s ease;
}
.ban-alt:hover { border-color: var(--danger-border); }
.ban-alt--expanded { border-color: var(--danger-border); }

.ban-alt__row {
  display: flex; align-items: center; gap: 0.55rem;
}

.ban-alt__hero {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  color: var(--text-primary); white-space: nowrap;
}

.ban-alt__reason {
  font-size: 0.72rem; color: var(--text-muted); line-height: 1.35;
  flex: 1;
}

.ban-alt__chevron {
  font-size: 0.6rem; color: var(--text-muted); flex-shrink: 0;
}

/* ── Expanded ban detail ────────────────────────────────────────────────── */
.ban-detail {
  margin-top: 0.35rem; padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--border);
}

.ban-detail__reason {
  font-size: 0.73rem; color: var(--text-secondary); line-height: 1.4;
  margin-bottom: 0.25rem;
}

.ban-detail__strengths {
  margin: 0; padding: 0 0 0 0.85rem; list-style: none;
}
.ban-detail__strengths li {
  font-size: 0.7rem; color: var(--text-secondary); line-height: 1.5;
  position: relative; padding-left: 0.15rem;
}
.ban-detail__strengths li::before {
  content: "⚠"; position: absolute; left: -0.85rem;
  color: var(--danger); font-size: 0.6rem; opacity: 0.7;
}

.ban-detail__tradeoff {
  font-size: 0.66rem; color: var(--text-muted); line-height: 1.4;
  margin-top: 0.2rem; font-style: italic;
}

/* ── BAN DETAILED / DEBUG ────────────────────────────────────────────────── */
.ban-details { border-color: var(--danger-border); }

.ban-debug-row {
  display: flex; gap: 0.45rem; align-items: baseline; margin-bottom: 0.3rem;
  font-family: var(--font-mono); font-size: 0.65rem; line-height: 1.45;
}

.ban-debug-label { color: var(--text-muted); white-space: nowrap; }
.ban-debug-value { color: var(--danger); font-weight: 500; }

/* ── CAUTION BOX ─────────────────────────────────────────────────────────── */
.caution-box {
  background: rgba(230, 126, 34, 0.06);
  border: 1px solid rgba(230,126,34,0.3);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
  color: var(--orange);
  line-height: 1.45;
  font-weight: 500;
}
.caution-box p { margin-bottom: 0.2rem; }
.caution-box p:last-child { margin-bottom: 0; }

/* ── COPY BAR ────────────────────────────────────────────────────────────── */
.copy-bar { margin-bottom: 0.85rem; display: flex; gap: 0.5rem; }

/* ── ALTERNATIVES ────────────────────────────────────────────────────────── */
.alt-list { display: flex; flex-direction: column; gap: 0.35rem; }

.alt-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  transition: border-color 0.12s ease;
}
.alt-item:hover { border-color: var(--border-accent); }

.alt-item__rank {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: var(--text-muted); text-align: center;
}

.alt-item__hero {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary); display: flex; align-items: center; gap: 0.45rem;
}

.alt-item__summary { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; margin-top: 0.05rem; }

.alt-item__score {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-secondary);
  white-space: nowrap; text-align: right;
}

.alt-empty { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); font-style: italic; }

/* ── DETAILS SECTIONS ────────────────────────────────────────────────────── */
.details-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.85rem; }
.details-content { padding-top: 0.4rem; }
.detail-block { margin-bottom: 0.75rem; }
.detail-block:last-child { margin-bottom: 0; }
.detail-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 0.3rem; text-transform: uppercase; }

/* ── PROBLEM LISTS ───────────────────────────────────────────────────────── */
.problem-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.problem-list li {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem 0.35rem 1.4rem; font-size: 0.78rem; color: var(--text-secondary); position: relative;
}
.problem-list li::before {
  content: '!'; position: absolute; left: 0.5rem;
  font-family: var(--font-mono); font-weight: 500; color: var(--text-muted); font-size: 0.65rem;
}
.problem-list--priority li { border-left: 2px solid var(--accent-dim); }
.problem-list--priority li::before { content: '▲'; color: var(--accent-dim); font-size: 0.52rem; top: 0.45rem; }
.problem-list__empty { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); font-style: italic; }
.problem-severity { color: var(--text-muted); }

/* ── DEBUG PANEL (hidden from users — internal tool) ─────────────────────── */
.debug-panel {
  display: none;
  background: var(--bg-debug); border-top: 1px solid var(--border);
  padding: 0.6rem 2rem; max-width: 1400px; width: 100%; margin: 0 auto;
}

.debug-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 0.2rem 0;
}
.debug-panel__header::-webkit-details-marker { display: none; }
.debug-panel__header .panel-label { margin-bottom: 0; padding-bottom: 0; border-bottom: none; font-size: 0.55rem; }

.debug-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding-top: 0.4rem; }
.debug-stat { display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.65rem; }
.debug-stat__label { color: var(--text-muted); }
.debug-stat__value { color: var(--accent); font-weight: 500; }
.debug-placeholder { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); font-style: italic; }

/* ── SCENARIO RUNNER ─────────────────────────────────────────────────────── */
.scenario-runner {
  margin-top: 1rem; padding-top: 0.85rem; border-top: 2px solid var(--accent-border);
}

.scenario-runner__header { margin-bottom: 0.4rem; }

.scenario-runner__label {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.15em; color: var(--accent); text-transform: uppercase;
}

.scenario-desc {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted);
  margin: 0.3rem 0 0.4rem; min-height: 1.1em; line-height: 1.4;
}

.scenario-meta {
  margin: 0.35rem 0; padding: 0.35rem 0.5rem;
  background: rgba(65, 90, 119, 0.08); border: 1px solid rgba(65, 90, 119, 0.15);
  border-radius: var(--radius);
}
.scenario-meta__purpose {
  font-size: 0.68rem; color: var(--text-secondary); line-height: 1.4;
  margin-bottom: 0.2rem;
}
.scenario-meta__checks {
  margin: 0; padding: 0 0 0 0.85rem; list-style: none;
}
.scenario-meta__checks li {
  font-size: 0.62rem; color: var(--text-muted); line-height: 1.5;
  position: relative; padding-left: 0.1rem;
}
.scenario-meta__checks li::before {
  content: "☐"; position: absolute; left: -0.8rem;
  font-size: 0.55rem; color: var(--accent-dim);
}

/* ── QA PANEL ───────────────────────────────────────────────────────────── */
.qa-panel {
  margin: 0.4rem 0; padding: 0.4rem 0.5rem;
  background: rgba(65, 90, 119, 0.06); border: 1px solid rgba(65, 90, 119, 0.15);
  border-radius: var(--radius);
}
.qa-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.35rem;
}
.qa-panel__label {
  font-family: var(--font-mono); font-size: 0.52rem; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase;
}
.qa-status {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  padding: 0.1rem 0.4rem; border-radius: 999px;
}
.qa-status--neutral { color: var(--text-muted); background: rgba(119,141,169,0.1); }
.qa-status--ready { color: var(--accent); background: var(--accent-bg); }
.qa-status--pass { color: var(--green); background: rgba(39,174,96,0.12); }
.qa-status--fail { color: var(--danger); background: var(--danger-bg); }

.qa-hint {
  font-size: 0.62rem; color: var(--accent); font-style: italic;
  margin-bottom: 0.3rem;
}

.qa-panel--pulse {
  animation: qa-pulse 1.5s ease-out;
}
@keyframes qa-pulse {
  0%   { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-bg); }
  100% { border-color: rgba(65, 90, 119, 0.15); box-shadow: none; }
}

.qa-checklist { display: flex; flex-direction: column; gap: 0.25rem; }

.qa-check-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
}
.qa-check-item__text {
  font-size: 0.64rem; color: var(--text-secondary); flex: 1; min-width: 0;
}
.qa-check-item__btns { display: flex; gap: 0.2rem; flex-shrink: 0; }

.qa-btn {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600;
  padding: 0.1rem 0.35rem; border-radius: var(--radius); cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.qa-btn:hover { border-color: var(--border-accent); color: var(--text-secondary); }
.qa-btn--active-pass { background: rgba(39,174,96,0.15); color: var(--green); border-color: var(--green); }
.qa-btn--active-fail { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

.qa-badge {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600;
  padding: 0.08rem 0.3rem; border-radius: 999px; white-space: nowrap;
}
.qa-badge--auto-pass { background: rgba(39,174,96,0.15); color: var(--green); }
.qa-badge--auto-fail { background: var(--danger-bg); color: var(--danger); }
.qa-badge--pending { background: rgba(119,141,169,0.1); color: var(--text-muted); }

.qa-check--auto { opacity: 0.85; }
.qa-check--manual { }

.qa-notes-label {
  display: block; font-family: var(--font-mono); font-size: 0.5rem;
  color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 0.35rem; margin-bottom: 0.15rem;
}
.qa-notes {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.7rem; padding: 0.25rem 0.4rem;
  resize: vertical;
}

.scenario-runner__actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.scenario-runner__actions .btn:last-child {
  flex: 2; background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border);
}
.scenario-runner__actions .btn:last-child:hover {
  background: rgba(212, 162, 10, 0.15); color: var(--accent);
}
.scenario-runner__actions .btn { flex: 1; }

/* ── COMPARISON PANEL ───────────────────────────────────────────────────── */
.compare-panel--inline {
  background: var(--bg-card); border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg); padding: 0.75rem;
  margin-bottom: 1rem;
}

.compare-panel {
  background: var(--bg-panel); border-top: 2px solid var(--accent-border);
  padding: 0.85rem 2rem 1.25rem; max-width: 1400px; width: 100%; margin: 0 auto;
}

.compare-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.35rem;
}
.compare-panel__header .panel-label { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.compare-scenario__label {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 0.15rem;
}
.compare-scenario__meta {
  font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.compare-summary {
  font-size: 0.78rem; font-weight: 500; margin-bottom: 0.4rem; line-height: 1.4;
}
.compare-summary--agree { color: #4ade80; }
.compare-summary--differ { color: #fbbf24; }

.compare-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
}

.cmp-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem; min-width: 0;
}
.cmp-card--std { border-color: var(--accent-border); border-left: 3px solid var(--accent); }
.cmp-card--disagree { border-color: var(--orange); border-left: 3px solid var(--orange); }

.cmp-disagree {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); background: var(--orange-bg);
  padding: 0.12rem 0.4rem; border-radius: var(--radius-sm);
  display: inline-block; margin-bottom: 0.25rem;
}

.cmp-card__header {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase;
  margin-bottom: 0.35rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border);
}

.cmp-card__desc {
  font-family: var(--font-mono); font-size: 0.48rem; color: var(--text-muted);
  margin-top: -0.2rem; margin-bottom: 0.3rem; font-style: italic;
}

.cmp-row {
  display: flex; align-items: baseline; gap: 0.3rem;
  padding: 0.15rem 0; font-size: 0.72rem;
}

.cmp-rank {
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted);
  min-width: 0.9rem; text-align: right;
}
.cmp-hero { color: var(--text-primary); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-score { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-secondary); }
.cmp-mm { font-family: var(--font-mono); font-size: 0.55rem; color: var(--accent-dim); }

.cmp-delta { font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-muted); min-width: 1.8rem; text-align: right; }
.cmp-delta--up { color: var(--green); font-weight: 600; }
.cmp-delta--down { color: var(--danger); font-weight: 600; }
.cmp-delta--new { color: var(--accent); font-weight: 700; }

.cmp-dropped {
  font-family: var(--font-mono); font-size: 0.52rem; color: var(--text-muted);
  margin-top: 0.25rem; padding-top: 0.2rem; border-top: 1px solid var(--border);
}

.cmp-trust {
  font-size: 0.58rem; line-height: 1.35; margin-top: 0.25rem;
  padding-top: 0.2rem; border-top: 1px solid var(--border);
}
.cmp-trust--high { color: var(--green); }
.cmp-trust--medium { color: var(--orange); }
.cmp-trust--low { color: var(--danger); }

.cmp-whynot { margin-top: 0.2rem; }
.cmp-whynot__row {
  font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-muted);
  line-height: 1.35;
}

.compare-error { color: var(--danger); font-size: 0.82rem; }

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

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-panel); border-top: 1px solid var(--border);
  padding: 0.5rem 2rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-muted); letter-spacing: 0.04em;
}

/* ── VIEW TOGGLE (I — polished) ──────────────────────────────────────────── */
.view-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.view-toggle__btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  background: var(--bg-card);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-toggle__btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.view-toggle__btn--active {
  background: rgba(212, 162, 10, 0.12);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── DRAFT VIEW (player-facing) ──────────────────────────────────────────── */
.draft-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── PICK ZONE (A — dominant card) ── */
.dv-pick {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 1.4rem 1.7rem 1.2rem;
  box-shadow: var(--shadow-card);
  position: relative;
}

/* Decision mode banner (H) */
.dv-pick__banner {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}
.dv-pick__banner-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.dv-pick__banner-sub {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
/* Banner modifiers for different decision modes */
.dv-pick__banner--fallback .dv-pick__banner-label,
.dv-pick__banner--limited .dv-pick__banner-label  { color: var(--orange); }
.dv-pick__banner--forced .dv-pick__banner-label    { color: var(--danger); }

.dv-pick__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}
.dv-pick__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
}
.dv-pick__copy {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dv-pick__copy:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}

/* side-by-side layout — square portrait left, info right */
.dv-pick__main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.dv-pick__info { min-width: 0; }

/* C3 — hero portrait container */
.dv-pick__portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.8rem;
}

/* C3 — full-width pick hero image */
.dv-sprite--pick-hero {
  width: 100%;
  height: 48px;
  object-position: center 15%;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(212, 162, 10, 0.10);
}

.dv-pick__hero {
  font-family: var(--font-hero);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 0.3rem;
  letter-spacing: -0.02em;
}
.dv-pick__subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.dv-pick__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
}
.dv-pick__badge--high   { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.dv-pick__badge--medium { background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(230,126,34,0.3); }
.dv-pick__badge--low    { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

.dv-pick__next {
  margin-top: 0.8rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}
.dv-pick__next-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-right: 0.35rem;
}

/* ── BAN ZONE (D — secondary action) ── */
.dv-ban {
  background: rgba(192, 57, 43, 0.025);
  border: 1px solid rgba(192, 57, 43, 0.12);
  border-radius: 0;
  padding: 0.55rem 0.85rem;
}
.dv-ban--none {
  background: var(--bg-card);
  border-color: var(--border);
}
.dv-ban__top {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.dv-ban__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
}
.dv-ban--none .dv-ban__label { color: var(--text-muted); }

/* Ban tier badges */
.dv-ban__tier {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 2px;
  margin-left: 0.5rem;
}
.dv-ban__tier--must-ban {
  color: var(--red);
  background: rgba(224, 85, 85, 0.08);
}
.dv-ban__tier--strategic {
  color: #5b9bd5;
  background: rgba(91, 155, 213, 0.08);
}
.dv-ban__tier--optional {
  color: var(--text-muted);
  background: rgba(127, 140, 141, 0.06);
}

/* Ban type badges (predictive/defensive/offensive) */
.dv-ban__type {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 2px;
  margin-left: 0.5rem;
}
.dv-ban__type--predictive {
  color: #7b68ee;
  background: rgba(123, 104, 238, 0.08);
}
.dv-ban__type--defensive {
  color: var(--red);
  background: rgba(224, 85, 85, 0.08);
}
.dv-ban__type--offensive {
  color: var(--text-secondary);
  background: rgba(180, 180, 180, 0.06);
}
.dv-ban__secondary {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  font-style: italic;
}

/* Ban source badges (unified: both / structural / scouting) */
.dv-ban__source {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  white-space: nowrap;
}
.dv-ban__source--both {
  color: #e8a838;
  background: rgba(232, 168, 56, 0.1);
}
.dv-ban__source--structural {
  color: var(--red);
  background: rgba(224, 85, 85, 0.08);
}
.dv-ban__source--scouting {
  color: #7b68ee;
  background: rgba(123, 104, 238, 0.08);
}
.dv-ban--complete { background: var(--bg-card); border-color: var(--border); }
.dv-ban--complete .dv-ban__label { color: var(--text-secondary); }
.dv-ban--complete .dv-ban__reason { color: var(--text-muted); }
.dv-ban__subtext {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  line-height: 1.3;
}
.dv-ban__main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.dv-ban__info { flex: 1; min-width: 0; }
.dv-ban__hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.15;
}
.dv-ban__reason {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.1rem 0 0;
}

/* ── WARNING BANNER (C — secondary caution) ── */
.dv-warning {
  background: rgba(230, 126, 34, 0.02);
  border: 1px solid rgba(230, 126, 34, 0.08);
  border-radius: var(--radius);
  padding: 0.35rem 0.85rem;
}
.dv-warning p {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(200, 120, 40, 0.5);
  margin: 0;
  line-height: 1.4;
}
.dv-warning p + p { margin-top: 0.15rem; }

/* ── COLLAPSIBLE SECTIONS ── */
.dv-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}
.dv-section--why {
  border-color: rgba(212, 162, 10, 0.15);
}
.dv-section__toggle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dv-section__toggle::-webkit-details-marker { display: none; }
.dv-section__toggle::before {
  content: '▸';
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.dv-section[open] > .dv-section__toggle::before { transform: rotate(90deg); }
.dv-section__toggle:hover { color: var(--text-primary); }
.dv-section__body {
  padding: 0 1rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── SHARED HELPERS INSIDE SECTIONS ── */
.dv-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dv-bullets li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.28rem;
}
.dv-bullets li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}
.dv-bullets--muted li::before { color: var(--text-muted); }
.dv-bullets--warn li::before { color: #e8a838; }
.dv-bullets--warn li { color: var(--text-secondary); }

.dv-sub-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-label);
  margin: 0.6rem 0 0.25rem;
}
.dv-sub-label--warn { color: #e8a838; }

.dv-risk {
  margin-top: 0.5rem;
  padding: 0.4rem 0.7rem;
  background: rgba(192, 57, 43, 0.04);
  border-left: 2px solid rgba(192, 57, 43, 0.35);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dv-conf-note {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ── ALTERNATIVES LIST ── */
.dv-alt-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dv-alt-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(37,40,48,0.5);
}
.dv-alt-item:last-child { border-bottom: none; }
.dv-alt-item--ban { border-bottom-color: rgba(192,57,43,0.15); }
.dv-alt-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.dv-alt-reason {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
}

/* ── DEEP ANALYSIS BLOCKS ── */
.dv-deep-block { margin-bottom: 0.75rem; }
.dv-deep-block:last-child { margin-bottom: 0; }
.dv-deep-block p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── HERO SPRITES ────────────────────────────────────────────────────────── */
.dv-sprite {
  display: block;
  object-fit: cover;
  border-radius: 0;
  background: var(--bg-input);
  flex-shrink: 0;
}
/* Main pick — prominent */
.dv-sprite--pick {
  width: 64px;
  height: 64px;
  border: 1px solid var(--accent-border);
}
/* Ban — slightly smaller */
.dv-sprite--ban {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(192, 57, 43, 0.2);
}
/* Alternatives — compact */
.dv-sprite--alt {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
}

@media (max-width: 520px) {
  .dv-sprite--pick { width: 48px; height: 48px; }
  .dv-sprite--ban  { width: 32px; height: 32px; }
  .dv-sprite--alt  { width: 26px; height: 26px; }
  .dv-sprite--pick-hero { height: 40px; }
}

/* ── HERO PICKER ─────────────────────────────────────────────────────────── */

/* Clear (×) button — injected by heroPicker.js into .draft-slot */
.draft-slot__clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
  flex-shrink: 0;
  transition: color 0.12s ease;
}
.draft-slot__clear:hover { color: var(--danger); }

/* Picker overlay — fixed, floats above everything */
.hero-picker {
  position: fixed;
  z-index: 9000;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
}
.hero-picker--hidden { display: none !important; }

/* Search field inside picker */
.hero-picker__search {
  background: var(--bg-input);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  padding: 0.45rem 0.65rem;
  width: 100%;
}
.hero-picker__search:focus {
  border-bottom-color: var(--accent-dim);
  box-shadow: inset 0 -2px 0 var(--accent-dim);
}

/* Recents row — sits between search and the main grid */
.hero-picker__recents {
  display: flex;
  align-items: flex-start; /* correct for multi-row chip wrapping */
  flex-wrap: wrap;
  width: 100%;
  height: auto;            /* never constrain natural height */
  overflow: visible;       /* chips must not be clipped by this container */
  flex-shrink: 0;          /* critical: prevents flex from compressing this row into the grid */
  gap: 0.3rem;
  padding: 0.45rem 0.55rem 0.5rem;
  background: var(--bg-card-hover); /* slightly elevated tint — chips (bg-input) read against it */
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
.hero-picker__recents:empty { display: none; }

.hp-recents-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 0.2rem;
  flex-shrink: 0;
}
.hp-recent {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  transition: border-color 0.1s, color 0.1s;
  white-space: nowrap;
}
.hp-recent:hover        { border-color: var(--accent-dim); color: var(--text-primary); }
.hp-recent--current     { border-color: var(--accent-border); color: var(--accent); }

/* Hero grid — CSS Grid for stable tile sizing at all picker widths */
.hero-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 2px;
  overflow-y: auto;
  padding: 0.45rem 0.35rem 0.3rem;   /* extra top padding clears first tile row from divider */
  flex: 1;
}

.hp-tile {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-height: 40px;
  padding: 0.35rem 0.5rem;
  text-align: left;
  transition: background 0.08s, color 0.08s;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
}
.hp-tile:hover          { background: var(--bg-card-hover); color: var(--text-primary); }
.hp-tile--focused       { background: var(--accent-bg); color: var(--text-primary); }
.hp-tile--current       { color: var(--accent); font-weight: 600; }
.hp-tile--current.hp-tile--focused { background: var(--accent-bg); }

.hp-no-results {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.5rem;
  text-align: center;
}

/* ── UTILITY ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .layout { grid-template-columns: 300px 1fr; }
  .panel--sidebar { position: static; max-height: none; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 0.85rem; }
  .header-inner { flex-direction: column; gap: 0.25rem; }
  .debug-panel { padding: 0.6rem 1rem; }
  .rh__hero { font-size: 1.3rem; }
}

@media (max-width: 520px) {
  .form-actions { flex-direction: column; }
  .alt-item { grid-template-columns: 1fr; gap: 0.25rem; }
  .alt-item__rank { display: none; }
  .alt-item__score { text-align: left; }
  .rh__row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* ── C5B: Mobile usability improvements ──────────────────────────────────── */

/* Results-first layout once analysis has run: show pick card before input form */
@media (max-width: 900px) {
  .layout.has-results .panel--results { order: -1; }
  .layout.has-results .panel--input   { order:  0; }
  .layout.has-results .panel--sidebar { order:  1; }
}

/* Touch targets: slot inputs and buttons must meet 44px HIG minimum */
@media (max-width: 900px) {
  .draft-slot {
    margin-bottom: 0.5rem;
    gap: 0.5rem;
  }
  .draft-slot__input {
    min-height: 44px;
    font-size: 1rem;          /* ≥16px prevents iOS auto-zoom on focus */
    padding: 0.5rem 0.65rem;
  }
  .draft-slot__clear {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.1rem;
  }
  .btn {
    min-height: 44px;
  }
}

/* Hero picker: touch-friendly sizing on narrow screens */
/* (JS handles full-width positioning via positionPicker when vpW < 640) */
@media (max-width: 640px) {
  .hero-picker {
    max-height: 55vh;
  }
  .hero-picker__search {
    min-height: 44px;
    font-size: 1rem;
    padding: 0.5rem 0.65rem;
  }
  .hp-tile {
    min-height: 44px;   /* larger touch target on mobile; base is already 40px */
    font-size: 0.9rem;  /* do not reduce below base — keep readable */
  }
  .hp-recent {
    min-height: 38px;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
  }
}

/* Pick card: compress hero name for comfortable single-screen rendering */
@media (max-width: 640px) {
  .dv-pick {
    padding: 1rem 1.1rem 0.9rem;
  }
  .dv-pick__hero {
    font-size: clamp(32px, 8vw, 48px);
  }
}

/* ── C5C: Dynamic ban slots ───────────────────────────────────────────────── */

/* Row containing counter + "Add Ban" button */
.ban-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0 0.15rem;
}

/* "Bans X / 16" counter */
.ban-count-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Extra ban slots look identical to core slots — no special styling needed */
.draft-slot--extra-ban {
  /* Inherits all .draft-slot rules; no overrides required */
}

/* Remove (−) button on extra ban slots */
.draft-slot__remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.draft-slot__remove:hover {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* On mobile, make remove button meet 44px touch target */
@media (max-width: 900px) {
  .draft-slot__remove {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 79 — Visual Hierarchy Components
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Quick Reason (inside pick zone) ──────────────────────────────────────── */

.dv-pick__quick-reason {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 0.25rem;
  font-style: italic;
}

/* ─── Decision Badge (inside pick zone) ────────────────────────────────────── */

.dv-pick__decision-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.35rem;
}

.dv-pick__decision-badge--strong {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.dv-pick__decision-badge--caution {
  background: var(--orange-bg);
  color: var(--orange);
  border: 1px solid rgba(230,126,34,0.3);
}

.dv-pick__decision-badge--warning {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.dv-pick__decision-badge--info {
  background: rgba(52,152,219,0.12);
  color: #5dade2;
  border: 1px solid rgba(52,152,219,0.25);
}

/* ─── Signal Chips ─────────────────────────────────────────────────────────── */

.dv-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  /* LA-fix: ensure chips can use full container width */
  align-items: flex-start;
}

.dv-signal-chip {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(103, 221, 142, 0.12);
  color: var(--green);
  border: 1px solid rgba(103, 221, 142, 0.3);
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
}

/* Signal chip variants */
.dv-signal-chip--synergy {
  background: rgba(93, 217, 208, 0.12);
  color: var(--teal);
  border-color: rgba(93, 217, 208, 0.3);
}

.dv-signal-chip--threat {
  background: transparent;
  color: var(--red);
  border-color: rgba(255, 180, 171, 0.35);
}

/* ─── Decision Support ─────────────────────────────────────────────────────── */

.dv-decision-support {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.dv-decision-support__primary {
  font-style: italic;
}

/* ─── Enhanced Alt Items (with hero sprite) ────────────────────────────────── */

.dv-alt-item--enhanced {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.dv-alt-item--enhanced:last-child { border-bottom: none; }

.dv-alt-item__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 0;
}

.dv-alt-item__reason {
  font-size: 0.82rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.dv-alt-item__separator {
  color: var(--text-muted);
  opacity: 0.4;
}

/* ─── Trust Indicator ──────────────────────────────────────────────────────── */

.dv-trust {
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-subtle);
}

.dv-trust--high   { opacity: 0.5; }
.dv-trust--medium { opacity: 0.7; }
.dv-trust--low    { opacity: 0.9; color: var(--orange); }

/* ─── Deep blocks (Phase 79 enhanced) ──────────────────────────────────────── */

.dv-deep-block__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.dv-deep-block__content {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Phase 80 — Interaction Polish / Usability Refinement
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Smooth section transitions ───────────────────────────────────────────── */

.dv-section__body {
  transition: opacity 0.2s ease;
}

.dv-section:not([open]) > .dv-section__body {
  opacity: 0;
}

.dv-section[open] > .dv-section__body {
  opacity: 1;
}

/* ─── Section toggle hover/active feedback ─────────────────────────────────── */

.dv-section__toggle {
  transition: color 0.15s, background 0.15s;
}

.dv-section__toggle:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.02);
}

.dv-section__toggle:active {
  background: rgba(255,255,255,0.04);
}

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

/* ─── Alternatives emphasis levels (Phase 80) ──────────────────────────────── */

/* DECISIVE → alternatives de-emphasized */
.dv-section--alt-subtle {
  opacity: 0.75;
}

.dv-section--alt-subtle > .dv-section__toggle {
  color: var(--text-muted);
}

/* CLOSE → alternatives emphasized */
.dv-section--alt-emphasized {
  border-color: rgba(212,162,10,0.2);
}

.dv-section--alt-emphasized > .dv-section__toggle {
  color: var(--accent);
}

.dv-section--alt-emphasized .dv-alt-item__name {
  color: var(--accent);
}

/* OPEN → alternatives strongly emphasized */
.dv-section--alt-strong {
  border-color: rgba(52,152,219,0.25);
  background: rgba(52,152,219,0.03);
}

.dv-section--alt-strong > .dv-section__toggle {
  color: #5dade2;
}

.dv-section--alt-strong .dv-alt-item__name {
  color: #5dade2;
}

/* ─── Clickable alternatives ───────────────────────────────────────────────── */

.dv-alt-item--clickable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border-radius: var(--radius-sm);
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.dv-alt-item--clickable:hover {
  background: rgba(255,255,255,0.03);
}

.dv-alt-item--clickable:active {
  background: rgba(255,255,255,0.06);
}

.dv-alt-item--clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Highlighted state (on click) */
.dv-alt-item--highlighted {
  background: rgba(212,162,10,0.08);
  border-color: rgba(212,162,10,0.2);
}

.dv-alt-item--highlighted .dv-alt-item__name {
  color: var(--accent);
}

/* ─── Guidance text (state-aware, Phase 80) ────────────────────────────────── */

.dv-alt-guidance {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
  padding: 0 0 0.4rem;
  margin: 0;
  line-height: 1.4;
}

/* ─── Signal chip hover ────────────────────────────────────────────────────── */

.dv-signal-chip {
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  cursor: default;
}

.dv-signal-chip:hover {
  filter: brightness(1.15);
}

/* ─── Decision badge hover ─────────────────────────────────────────────────── */

.dv-pick__decision-badge {
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
}

.dv-pick__decision-badge:hover {
  opacity: 0.9;
  filter: brightness(1.1);
}

.dv-pick__decision-badge:active {
  opacity: 0.75;
}

/* ─── Trust indicator hover ────────────────────────────────────────────────── */

.dv-trust {
  transition: opacity 0.15s;
  cursor: help;
}

.dv-trust:hover {
  opacity: 1;
}

/* ─── Fade-in on render ────────────────────────────────────────────────────── */

@keyframes dv-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.draft-view:not(.hidden) #dv-pick {
  animation: dv-fade-in 0.25s ease-out;
}

.draft-view:not(.hidden) .dv-signals {
  animation: dv-fade-in 0.3s ease-out 0.05s both;
}

.draft-view:not(.hidden) .dv-decision-support {
  animation: dv-fade-in 0.3s ease-out 0.1s both;
}

/* ─── Pick card hover ──────────────────────────────────────────────────────── */

.dv-pick {
  transition: box-shadow 0.2s;
}

.dv-pick:hover {
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

/* ─── Ban card hover ───────────────────────────────────────────────────────── */

.dv-ban {
  transition: border-color 0.15s;
}

.dv-ban:hover {
  border-color: var(--border-accent);
}

/* ─── Copy button feedback ─────────────────────────────────────────────────── */

.dv-pick__copy:active {
  transform: scale(0.96);
}

/* ─── Responsive (Phase 80 additions) ──────────────────────────────────────── */

@media (max-width: 520px) {
  .dv-signals { gap: 0.3rem; }
  .dv-signal-chip { font-size: 0.68rem; padding: 0.15rem 0.4rem; }
  .dv-alt-item--enhanced { flex-wrap: wrap; }
  .dv-alt-guidance { font-size: 0.72rem; }
  .dv-trust { font-size: 0.65rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   Phase 81 — Preferences Panel
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Gear toggle (in header) ──────────────────────────────────────────────── */

.prefs-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1;
}

.prefs-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-border);
}

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

/* ─── Panel ────────────────────────────────────────────────────────────────── */

.prefs-panel {
  position: fixed;
  top: 3rem;
  right: 1.5rem;
  z-index: 200;
  width: 280px;
  background: var(--bg-panel);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  font-family: var(--font-body);
}

.prefs-panel.hidden {
  display: none;
}

.prefs-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.prefs-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.prefs-panel__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  line-height: 1;
  transition: color 0.12s;
}

.prefs-panel__close:hover { color: var(--text-primary); }

.prefs-panel__body {
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.prefs-panel__footer {
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--border);
  text-align: right;
}

/* ─── Preference groups ────────────────────────────────────────────────────── */

.prefs-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.prefs-group--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.prefs-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.prefs-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.12s;
}

.prefs-select:hover { border-color: var(--accent-border); }
.prefs-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.prefs-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.prefs-reset-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
}

/* ── Phase 85 — Lane Guidance ──────────────────────────────────────────── */

.dv-lane-risk {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  margin-bottom: 0.35rem;
}
.dv-lane-risk--low    { background: var(--bg-card); color: var(--green); border: 1px solid var(--green); }
.dv-lane-risk--medium { background: var(--bg-card); color: var(--yellow); border: 1px solid var(--yellow); }
.dv-lane-risk--high   { background: var(--bg-card); color: var(--red); border: 1px solid var(--red); }

.dv-lane-advice {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 0.3rem;
}

.dv-lane-matchups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.dv-lane-matchups__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-right: 0.2rem;
}
.dv-lane-matchup-chip {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text);
}
.dv-lane-matchup-chip--avoid  { border-left: 2px solid var(--red); }
.dv-lane-matchup-chip--prefer { border-left: 2px solid var(--green); }

.dv-lane-plan {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

.dv-lane-flex {
  font-size: 0.75rem;
  color: var(--blue);
  margin-top: 0.2rem;
}

/* ── Phase 82 — Export Buttons ────────────────────��─────────────────────── */

.dv-export {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--border);
}

.btn--export {
  font-size: 0.7rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn--export:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-border);
  color: var(--text-primary);
}

.btn--export:active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

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

.btn--export.export-copied {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green);
  pointer-events: none;
}

/* ── Phase 83 — History Panel ───────────────────────────────────────────── */

.history-panel {
  max-width: 960px;
  margin: 0.75rem auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0;
}

.history-panel__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  user-select: none;
}

.history-panel__header .panel-label {
  flex: 1;
}

.history-count {
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 0;
  padding: 0.1rem 0.45rem;
  min-width: 1.2rem;
  text-align: center;
}

.history-panel__body {
  padding: 0 1rem 0.75rem;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.history-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
}

.history-panel__footer {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.4rem;
}

/* ── History Item ──────────────────────────────────────────────────────────── */

.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  gap: 0 0.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.12s, background 0.12s;
}

.history-item:hover {
  border-color: var(--border-accent);
  background: var(--bg-card-hover);
}

.history-item__hero {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.history-item__meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.72rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.history-item__reason {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item__draft {
  grid-column: 1 / -1;
  grid-row: 4;
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.history-item__actions {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.history-item__time {
  font-size: 0.62rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-item__btns {
  display: flex;
  gap: 0.3rem;
}

.btn--history {
  font-size: 0.64rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn--history:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-border);
  color: var(--text-primary);
}

.btn--history-load:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

.btn--history-remove:hover {
  border-color: var(--red-border, rgba(231, 76, 60, 0.3));
  color: var(--red, #e74c3c);
}

/* ── Phase 84 — Onboarding / Empty-State / First-Run UX ───────────────── */

/* Enhanced empty state */
.empty-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}

.empty-steps {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0.6rem;
  text-align: center;
}

.empty-steps li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.15rem 0;
}

.empty-steps li::before {
  content: '+ ';
  color: var(--accent-dim);
  font-weight: 600;
}

.btn--try-example {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding: 0.45rem 1.2rem;
}

/* Inline field guidance */
.slot-guidance {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  margin: -0.1rem 0 0.35rem 0.1rem;
}

/* First-run tips panel */
.first-run-tips {
  max-width: 960px;
  margin: 0.5rem auto 0;
  animation: dv-fade-in 0.25s ease-out;
}

.first-run-tips__inner {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 0;
  padding: 0.65rem 1rem;
}

.first-run-tips__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.first-run-tips__list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0.5rem;
}

.first-run-tips__list li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.12rem 0;
}

.first-run-tips__list li::before {
  content: '- ';
  color: var(--accent-dim);
}

.first-run-tips__list li strong {
  color: var(--text-primary);
  font-weight: 500;
}

.first-run-tips__dismiss {
  font-size: 0.7rem;
  padding: 0.2rem 0.65rem;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  .prefs-panel {
    right: 0.5rem;
    width: calc(100vw - 1rem);
    max-width: 300px;
  }
  .dv-export {
    flex-wrap: wrap;
  }
  .history-item {
    grid-template-columns: 1fr;
  }
  .history-item__actions {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    margin-top: 0.3rem;
  }
}

/* ── LA-32 — Lane-Fit + Decision Clarity ───────────────────────────────── */

/* Tiebreaker banner in result header */
.rh__tiebreaker {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--blue);
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-left: 2px solid var(--blue);
  background: rgba(100, 160, 255, 0.06);
}

/* Decision drivers section */
.se-section--drivers { margin-bottom: 0.6rem; }
.se-bullets--drivers li {
  font-size: 0.72rem;
  color: var(--text-primary);
  padding: 0.15rem 0;
}
.se-bullets--drivers li::marker {
  color: var(--blue);
}

/* Lane Fit section */
.lf-section {
  margin: 0.6rem 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0;
  background: rgba(100, 160, 255, 0.04);
  border: 1px solid rgba(100, 160, 255, 0.1);
}
.lf-section__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.lf-section__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.lf-section__tagline {
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.lf-bullets {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
}
.lf-bullets li {
  font-size: 0.68rem;
  color: var(--text-secondary);
  padding: 0.1rem 0 0.1rem 0.8rem;
  position: relative;
}
.lf-bullets li::before {
  content: '·';
  position: absolute;
  left: 0.2rem;
  color: var(--text-tertiary);
}

/* Lane-fit tier badge */
.lf-tier {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.08rem 0.35rem;
  border-radius: 0;
  text-transform: uppercase;
}
.lf-tier--high {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.25);
}
.lf-tier--medium {
  color: var(--blue);
  background: rgba(100, 160, 255, 0.1);
  border: 1px solid rgba(100, 160, 255, 0.2);
}
.lf-tier--low {
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Small tier badge for alternatives */
.lf-tier--sm {
  font-size: 0.42rem;
  padding: 0.04rem 0.25rem;
}

/* Lane-fit in alternative detail */
.alt-detail__lane-fit {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.alt-detail__lf-text {
  font-size: 0.62rem;
  color: var(--text-tertiary);
}

/* ── LA-33 — Top-2 Comparison UX ────────────────────────────���──────────── */

/* Decision clarity badge */
.clarity-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 0;
  margin-top: 0.25rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
}
.clarity-badge:hover {
  opacity: 0.85;
}
.clarity-badge--clear {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.clarity-badge--close {
  color: var(--orange);
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.2);
}
.clarity-badge--tie {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Comparison section */
.comp-section {
  margin: 0.5rem 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.comp-section--prominent {
  background: rgba(251, 146, 60, 0.04);
  border-left-color: var(--orange);
}
.comp-section__summary {
  font-size: 0.72rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 0.15rem;
}
.comp-section__alt-when {
  font-size: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.4;
  font-style: italic;
}

/* Alternative value proposition */
.alt-detail__value-prop {
  font-size: 0.6rem;
  color: var(--blue);
  margin-top: 0.2rem;
  font-weight: 500;
}

/* ── LA-35 — Problem → Solution Mapping ────────────────────────────────── */

.problem-solutions {
  margin: 0.25rem 0 0.15rem 0.6rem;
  padding: 0;
}
.problem-solution {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.problem-solution__icon {
  font-size: 0.6rem;
  width: 0.8rem;
  text-align: center;
  flex-shrink: 0;
}
.problem-solution--strong .problem-solution__icon {
  color: #4ade80;
}
.problem-solution--moderate .problem-solution__icon {
  color: var(--blue);
}
.problem-solution__strength {
  font-size: 0.52rem;
  color: var(--text-tertiary);
}
.problem-solution--strong .problem-solution__strength {
  color: rgba(74, 222, 128, 0.6);
}
.problem-solution--moderate .problem-solution__strength {
  color: rgba(100, 160, 255, 0.5);
}
.problem-solution__top {
  font-size: 0.48rem;
  font-family: var(--font-mono);
  color: var(--orange);
  letter-spacing: 0.03em;
  margin-left: 0.15rem;
}

/* ── Draft View — Problem Pills with Solutions ─────────────────────────── */

.dv-problem-solutions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
}
.dv-problem-pill {
  background: var(--bg-card);
  border: 1px solid rgba(212, 162, 10, 0.2);
  border-left: 2px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
}
.dv-problem-pill__label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.35;
  margin-bottom: 0.15rem;
}
.dv-problem-pill__solutions {
  margin-left: 0.2rem;
  padding-top: 0.1rem;
}
.dv-problem-pill__solutions .problem-solution {
  font-size: 0.6rem;
  padding: 0.06rem 0;
}

/* ── LA-37 — Lane Setup Section ────────────────────────────────────────── */

.lane-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.35rem;
}
.lane-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.lane-section__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Confidence badge */
.lane-confidence {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.08rem 0.4rem;
  border-radius: 0;
  text-transform: uppercase;
}
.lane-confidence--high {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.lane-confidence--medium {
  color: var(--orange);
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.2);
}
.lane-confidence--low {
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Lane blocks grid */
.lane-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.lane-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
}
.lane-block--mid {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0.3rem 0.55rem;
}
.lane-title {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.lane-heroes {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.lane-bullets {
  margin-top: 0.2rem;
}
.lane-bullets span {
  font-size: 0.62rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Alternatives */
.lane-alternatives {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lane-alternatives .lane-section__label {
  margin-bottom: 0.25rem;
}
.lane-alt-card {
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.2rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.lane-alt-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.lane-alt-card--active {
  background: rgba(212, 162, 10, 0.06);
  border-color: rgba(212, 162, 10, 0.15);
}
.lane-alt-card__lineup {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.lane-alt-card__pair {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-primary);
}
.lane-alt-card__sep {
  font-size: 0.55rem;
  color: var(--text-muted);
}
.lane-alt-card__mid {
  font-size: 0.65rem;
  color: var(--text-secondary);
}
.lane-alt-card__tradeoff {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  margin-top: 0.15rem;
  font-style: italic;
}

/* Responsive */
@media (max-width: 520px) {
  .lane-blocks { grid-template-columns: 1fr; }
  .lane-block--mid { text-align: left; }
  .lane-alt-card__lineup { flex-direction: column; gap: 0.15rem; }
  .lane-alt-card__sep { display: none; }
}

/* ── EA-4 — Enemy-Aware Lane Surfacing ─────────────────────────────────── */

.lane-enemy-banner {
  padding: 0.3rem 0.55rem;
  margin-bottom: 0.35rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--blue);
  background: rgba(100, 160, 255, 0.05);
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.lane-matchup-summary {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  margin-bottom: 0.3rem;
  line-height: 1.35;
}

/* ── UI-03/05: Workspace Grid ──────────────────────────────────────────── */

.dv-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

/* Mobile: context (Top Picks) before core (WHY) for faster scanning */
.dv-workspace__context { order: -1; }
.dv-workspace__core    { order: 0; }

@media (min-width: 640px) {
  .dv-workspace {
    grid-template-columns: 3fr 2fr;
    gap: 0.75rem;
  }
  /* Desktop: core left, context right (natural reading order) */
  .dv-workspace__core    { order: 0; }
  .dv-workspace__context { order: 0; }
}

.dv-workspace__core,
.dv-workspace__context {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* ── UI-01/04: Draft Impact Panel ───────────────────────────────────────── */

.dv-draft-impact {
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
  border-radius: var(--radius);
}
.dv-draft-impact__label {
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.dv-draft-impact__primary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.2rem;
}
.dv-draft-impact__risk {
  font-size: 0.78rem;
  color: var(--danger, #e05555);
  line-height: 1.35;
  margin-bottom: 0.15rem;
  font-weight: 500;
}
.dv-draft-impact__secondary {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.dv-draft-impact__patch {
  font-size: 0.68rem;
  color: var(--success, #4caf50);
  font-style: italic;
  margin-top: 0.1rem;
}
/* Legacy compat */
.dv-draft-impact__item { font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.2rem; line-height: 1.4; }
.dv-draft-impact__item--risk { color: var(--danger, #e05555); font-weight: 500; }
.dv-draft-impact__item--direction { color: var(--text-tertiary); font-style: italic; font-size: 0.72rem; }

/* ── UI-01/04: Confidence Panel ─────────────────────────────────────────── */

.dv-confidence {
  padding: 0.5rem 0.85rem;
  background: var(--bg-card);
  border-radius: 0;
  border: 1px solid var(--border);
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.dv-confidence__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.dv-confidence__label {
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.dv-confidence__type {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
}
.dv-confidence__reasons {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dv-confidence__reasons li {
  font-size: 0.73rem;
  color: var(--text-secondary);
  margin-bottom: 0.1rem;
  padding-left: 0.7rem;
  position: relative;
  line-height: 1.35;
}
.dv-confidence__reasons li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}

/* ── UI-01: Polish Section ──────────────────────────────────────────────── */

.dv-polish-item {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
  line-height: 1.4;
}
.dv-polish-item__label {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 0.3rem;
}

/* ── UI-02: Top Picks Strip ─────────────────────────────────────────────── */

.dv-top-picks {
}
.dv-top-picks__label {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.dv-top-picks__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dv-top-pick {
  padding: 0.45rem 0.7rem;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--text-tertiary) 20%, transparent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dv-top-pick:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.dv-top-pick--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}
.dv-top-pick__hero {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.dv-top-pick__rank {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-weight: 600;
  flex-shrink: 0;
}
.dv-top-pick__desc {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Dim ranks 4-5 */
.dv-top-pick--dim {
  opacity: 0.6;
}
.dv-top-pick--dim:hover {
  opacity: 0.85;
}

/* ── UI-02/04: Comparison Panel ─────────────────────────────────────────── */

.dv-comparison {
  padding: 0.5rem 0.85rem;
  background: var(--bg-panel);
  border-left: 2px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
  border-radius: var(--radius);
}
.dv-comparison__label {
  font-family: var(--font-condensed);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 0.2rem;
}
.dv-comparison__headline {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.1rem;
}
.dv-comparison__secondary {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.dv-comparison__contrast {
  display: none; /* UI-04: remove contrast line to reduce verbosity */
}

/* ── UI-02/04: Decision Split ───────────────────────────────────────────── */

.dv-decision-split {
  padding: 0.5rem 0.85rem;
  background: var(--bg-panel);
  border-radius: var(--radius);
}
.dv-decision-split__label {
  font-family: var(--font-condensed);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 0.25rem;
}
.dv-decision-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dv-decision-split__list li {
  font-size: 0.73rem;
  color: var(--text-primary);
  padding: 0.15rem 0;
  padding-left: 0.8rem;
  position: relative;
  line-height: 1.35;
}
.dv-decision-split__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.7rem;
}

/* ── V1-06: Complete-Draft View ─────────────────────────────────────────── */

.complete-draft-view { padding: 0.5rem 0; }

/* Header */
.cd-header {
  padding: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.cd-header__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.cd-header__body {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.cd-header__next {
  font-size: 0.78rem;
  color: var(--text-primary);
  font-style: italic;
}

/* Workspace grid */
.cd-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 640px) {
  .cd-workspace {
    grid-template-columns: 3fr 2fr;
    gap: 0.75rem;
  }
}
.cd-workspace__left,
.cd-workspace__right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Strategy panels — shared base */
.cd-panel {
  padding: 0.6rem 0.85rem;
  background: var(--bg-panel);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--text-tertiary) 12%, transparent);
}
.cd-panel__label {
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 0.3rem;
}
.cd-panel__text {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
}
.cd-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cd-panel__list li {
  font-size: 0.78rem;
  color: var(--text-primary);
  padding: 0.15rem 0;
  padding-left: 0.8rem;
  position: relative;
  line-height: 1.35;
}
.cd-panel__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}

/* Risk flags — warning treatment */
.cd-panel--risk {
  border-color: color-mix(in srgb, var(--danger, #e05555) 25%, transparent);
  background: color-mix(in srgb, var(--danger, #e05555) 4%, var(--bg-panel));
}
.cd-panel--risk .cd-panel__label {
  color: var(--danger, #e05555);
}
.cd-panel--risk .cd-panel__list li::before {
  content: "⚠";
  font-size: 0.65rem;
  color: var(--danger, #e05555);
}

/* Summary — primary framing */
.cd-panel--summary {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
}
.cd-panel--summary .cd-panel__text {
  font-weight: 500;
}

/* Lane plan — sub-headings */
.cd-lane-sub {
  font-family: var(--font-condensed);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
}
.cd-lane-sub:first-child { margin-top: 0; }

/* Failure modes — strongest warning */
.cd-panel--failure {
  border-color: color-mix(in srgb, var(--danger, #e05555) 35%, transparent);
  background: color-mix(in srgb, var(--danger, #e05555) 6%, var(--bg-panel));
  border-left: 3px solid var(--danger, #e05555);
}
.cd-panel--failure .cd-panel__label {
  color: var(--danger, #e05555);
  font-weight: 600;
}
.cd-panel--failure .cd-panel__list li::before {
  content: "✕";
  font-size: 0.6rem;
  color: var(--danger, #e05555);
}

/* Engagement sub-sections */
.cd-engage-sub {
  font-family: var(--font-condensed);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  margin-bottom: 0.1rem;
}
.cd-engage-sub:first-child { margin-top: 0; }

/* ── V1-12: Deciding Factor ────────────────────────────────────────────── */

.dv-deciding-factor {
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  border-radius: var(--radius);
}
.dv-deciding-factor__label {
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.dv-deciding-factor__strength {
  font-size: 0.55rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dv-deciding-factor__strength--clear {
  background: color-mix(in srgb, var(--success, #3daa5c) 18%, transparent);
  color: var(--success, #3daa5c);
}
.dv-deciding-factor__strength--close {
  background: color-mix(in srgb, var(--warning, #d4a20a) 18%, transparent);
  color: var(--warning, #d4a20a);
}
.dv-deciding-factor__text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.15rem;
}
.dv-deciding-factor__supporting {
  list-style: none;
  padding: 0;
  margin: 0.15rem 0 0 0;
}
.dv-deciding-factor__supporting li {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  padding-left: 0.7rem;
  position: relative;
  line-height: 1.3;
}
.dv-deciding-factor__supporting li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
  font-size: 0.65rem;
}

/* ── V1-13: Close Call Options ─────────────────────────────────────────── */

.dv-close-options {
  padding: 0.6rem 0.85rem;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--warning, #d4a20a) 20%, transparent);
  border-radius: var(--radius);
}
.dv-close-options__label {
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warning, #d4a20a);
  margin-bottom: 0.15rem;
}
.dv-close-options__hint {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-bottom: 0.35rem;
  font-style: italic;
}
.dv-close-options__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dv-close-option {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0;
  background: color-mix(in srgb, var(--text-tertiary) 5%, transparent);
  cursor: pointer;
  transition: background 0.12s;
}
.dv-close-option:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.dv-close-option--active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 2px solid var(--accent);
  padding-left: calc(0.5rem - 2px);
}
.dv-close-option__rank {
  font-size: 0.62rem;
  color: var(--text-tertiary);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 1.5rem;
}
.dv-close-option__hero {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.dv-close-option__summary {
  font-size: 0.7rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* V1-13: Soften rank 1 in close-call top picks */
.dv-top-picks--close .dv-top-pick--active {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.dv-top-picks--close .dv-top-pick:not(.dv-top-pick--dim) {
  opacity: 1;
}

/* ── V1-14: Intent Lines ───────────────────────────────────────────────── */

.dv-intent-line {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  font-style: italic;
  line-height: 1.3;
  margin-top: 0.1rem;
}
.dv-close-option__intent {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 0.05rem;
}
/* Rank 1 intent under Deciding Factor */
.dv-deciding-factor__intent {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.15rem;
}

/* ── V1-18C: Player Data Toggle ────────────────────────────────────────── */

.player-data-toggle {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  margin-bottom: 0.25rem;
}
.player-data-toggle__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}
.player-data-toggle__checkbox {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.player-data-toggle__text {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.player-data-toggle__hint {
  font-size: 0.68rem;
  color: var(--text-tertiary);
}

/* ── V1-18D: Personalization Status ────────────────────────────────────── */

.dv-personalization {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.65rem;
  color: var(--text-tertiary);
  border-radius: var(--radius);
}
.dv-personalization__icon {
  font-size: 0.7rem;
}
.dv-personalization--active {
  color: color-mix(in srgb, var(--accent) 80%, var(--text-secondary));
}
.dv-personalization--weak {
  color: var(--text-tertiary);
  font-style: italic;
}
.dv-personalization__detail {
  font-size: 0.6rem;
  color: var(--text-tertiary);
}
.dv-personalization--off {
  color: var(--text-tertiary);
}

/* ── V1-25: Opponent Scouting Panel ────────────────────────────────────── */

.dv-opponent-scouting {
  padding: 0.5rem 0.85rem;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--danger, #e05555) 15%, transparent);
  border-radius: var(--radius);
}
.dv-opponent-scouting__label {
  font-family: var(--font-condensed);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--danger, #e05555);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.dv-opponent-scouting__confidence {
  font-size: 0.5rem;
  padding: 0.05rem 0.25rem;
  border-radius: 0;
  font-weight: 600;
}
.dv-opponent-scouting__confidence--strong {
  background: color-mix(in srgb, var(--danger, #e05555) 15%, transparent);
  color: var(--danger, #e05555);
}
.dv-opponent-scouting__confidence--moderate {
  background: color-mix(in srgb, var(--warning, #d4a20a) 15%, transparent);
  color: var(--warning, #d4a20a);
}
.dv-opponent-scouting__confidence--weak {
  background: color-mix(in srgb, var(--text-tertiary) 15%, transparent);
  color: var(--text-tertiary);
}
.dv-opponent-scouting__status {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.dv-opponent-scouting__heroes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.2rem;
}
.dv-opponent-scouting__hero {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  background: color-mix(in srgb, var(--danger, #e05555) 8%, transparent);
  border-radius: 0;
  color: var(--text-primary);
}
.dv-opponent-scouting__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dv-opponent-scouting__bullets li {
  font-size: 0.7rem;
  color: var(--text-secondary);
  padding: 0.1rem 0 0.1rem 0.7rem;
  position: relative;
  line-height: 1.3;
}
.dv-opponent-scouting__bullets li::before {
  content: "⚑";
  position: absolute;
  left: 0;
  font-size: 0.6rem;
  color: var(--danger, #e05555);
}
.dv-opponent-scouting__weak {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 0.15rem;
}

/* ── V1-28 + V1-29: Scouting-Driven Ban Recommendations ──────────────────── */

.dv-scouting-bans {
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0;
  background: var(--surface-alt, #161820);
  border-left: 3px solid var(--danger, #e05555);
}
.scouting-bans__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.scouting-bans__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #b0b8c8);
}
.scouting-bans__tier {
  font-size: 0.6rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
}
.scouting-bans__tier--strong { color: var(--accent, #5da9e9); }
.scouting-bans__tier--moderate { color: var(--warning, #d4a94e); }
.scouting-bans__tier--weak { color: var(--text-tertiary); }
.scouting-bans__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── Individual ban card ─────────────────────────────────────────────────── */

.scouting-ban {
  padding: 0.35rem 0.4rem;
  border-radius: 0;
  background: transparent;
  transition: background 0.15s;
}
.scouting-ban--top {
  background: rgba(224, 85, 85, 0.06);
  border-left: 2px solid var(--danger, #e05555);
  padding-left: 0.5rem;
}
.scouting-ban--primary {
  /* Strongest emphasis for top ban with strong backing */
}
.scouting-ban--secondary {
  opacity: 0.92;
}
.scouting-ban--tertiary {
  opacity: 0.78;
}

.scouting-ban__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.scouting-ban__hero {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #eef0f4);
}
.scouting-ban--top .scouting-ban__hero {
  font-size: 0.82rem;
}
.scouting-ban__role {
  font-size: 0.55rem;
  color: var(--text-tertiary);
  background: var(--surface-raised, #1e2028);
  padding: 0.05rem 0.25rem;
  border-radius: 0;
  text-transform: lowercase;
}

/* Reason type badge */
.scouting-ban__type {
  font-size: 0.55rem;
  font-weight: 500;
  padding: 0.05rem 0.3rem;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.scouting-ban__type--scouting {
  background: rgba(93, 169, 233, 0.12);
  color: var(--accent, #5da9e9);
}
.scouting-ban__type--threat {
  background: rgba(224, 85, 85, 0.12);
  color: var(--danger, #e05555);
}
.scouting-ban__type--combined {
  background: rgba(212, 169, 78, 0.12);
  color: var(--warning, #d4a94e);
}

/* Summary line */
.scouting-ban__summary {
  font-size: 0.68rem;
  color: var(--text-secondary, #b0b8c8);
  margin-top: 0.15rem;
  line-height: 1.35;
}
.scouting-ban--top .scouting-ban__summary {
  color: var(--text-primary, #eef0f4);
  font-weight: 500;
}

/* Structured bullet chips */
.scouting-ban__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.2rem;
}
.scouting-ban__chip {
  font-size: 0.6rem;
  padding: 0.08rem 0.3rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
  color: var(--text-tertiary);
}
.scouting-ban__chip--scouting {
  color: var(--accent, #5da9e9);
  background: rgba(93, 169, 233, 0.08);
}
.scouting-ban__chip--threat {
  color: var(--danger, #e05555);
  background: rgba(224, 85, 85, 0.08);
}
.scouting-ban__chip--context {
  color: var(--text-tertiary);
}

/* Suppressed signal note */
.scouting-ban__suppressed {
  font-size: 0.58rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 0.15rem;
  opacity: 0.8;
}

/* ── V1-32: Opponent Memory Panel ────────────────────────────────────────── */

.dv-opponent-memory {
  padding: 0.5rem 0.6rem;
  border-radius: 0;
  background: var(--surface-alt, #161820);
  border-left: 3px solid var(--text-tertiary, #6a7080);
  margin-top: 0.4rem;
}
.dv-opponent-memory__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.dv-opponent-memory__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #b0b8c8);
}
.dv-opponent-memory__tier {
  font-size: 0.55rem;
  font-weight: 500;
  padding: 0.08rem 0.3rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
}
.dv-opponent-memory__tier--strong { color: var(--accent, #5da9e9); }
.dv-opponent-memory__tier--moderate { color: var(--warning, #d4a94e); }
.dv-opponent-memory__tier--weak { color: var(--text-tertiary); }
.dv-opponent-memory__status {
  font-size: 0.65rem;
  color: var(--text-secondary, #b0b8c8);
  margin-bottom: 0.25rem;
}
.dv-opponent-memory__heroes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: 0.2rem;
}
.dv-opponent-memory__hero {
  font-size: 0.62rem;
  font-weight: 500;
  padding: 0.08rem 0.3rem;
  border-radius: 0;
  background: rgba(93, 169, 233, 0.08);
  color: var(--accent, #5da9e9);
}
.dv-opponent-memory__bullets {
  list-style: none;
  padding: 0;
  margin: 0.15rem 0 0 0;
}
.dv-opponent-memory__bullets li {
  font-size: 0.62rem;
  color: var(--text-secondary, #b0b8c8);
  padding: 0.08rem 0;
  line-height: 1.3;
}
.dv-opponent-memory__bullets li::before {
  content: '\25C6 ';
  color: var(--text-tertiary, #6a7080);
  font-size: 0.5rem;
  margin-right: 0.15rem;
}
.dv-opponent-memory__weak {
  font-size: 0.58rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 0.1rem;
}

/* ── Signal Strip ────────────────────────────────────────────────────────── */

.dv-signal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.4rem;
  border-radius: 0;
  background: var(--surface-alt, #161820);
}
.signal-chip {
  font-size: 0.58rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
  color: var(--text-secondary, #b0b8c8);
  white-space: nowrap;
}
.signal-chip--context { color: var(--text-tertiary, #6a7080); }
.signal-chip--scouting { color: var(--accent, #5da9e9); }
.signal-chip--memory { color: var(--warning, #d4a94e); }
.signal-chip--fusion { color: var(--success, #4caf50); }
.signal-chip--warning { color: var(--danger, #e05555); background: rgba(224, 85, 85, 0.1); }
.signal-chip--player { color: var(--accent, #5da9e9); }
.signal-chip--patch { color: var(--success, #4caf50); }
.signal-chip--inactive {
  opacity: 0.45;
  color: var(--text-tertiary, #6a7080);
}

/* ── V1-41A: Page Navigation ─────────────────────────────────────────────── */

.page-nav {
  display: flex;
  gap: 0;
  padding: 0 var(--gutter, 1rem);
  background: var(--surface-alt, #161820);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-nav__btn {
  padding: 0.45rem 1rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #6a7080);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.page-nav__btn:hover {
  color: var(--text-secondary, #b0b8c8);
}
.page-nav__btn--active {
  color: var(--accent, #5da9e9);
  border-bottom-color: var(--accent, #5da9e9);
}

/* App page container */
.app-page {
  /* No extra styling — just a visibility wrapper */
}

/* ── V1-41A: Players Page ────────────────────────────────────────────────── */

.players-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.2rem var(--gutter, 1rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.players-page__section {
  background: var(--surface-alt, #161820);
  border-radius: 0;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.players-page__heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #b0b8c8);
  margin: 0 0 0.6rem 0;
}
.players-page__placeholder {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.players-page__hint {
  font-size: 0.7rem;
  color: var(--text-tertiary, #6a7080);
  font-style: italic;
  margin: 0;
}
.players-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.players-page__header .players-page__heading {
  margin: 0;
}

/* ── V1-41B: Player Rows ────────────────────────────────────────────────── */

.player-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.player-rows__empty {
  font-size: 0.7rem;
  color: var(--text-tertiary, #6a7080);
  font-style: italic;
  text-align: center;
  padding: 0.8rem 0;
}
.player-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
  border: 1px solid rgba(255,255,255,0.04);
}
.player-row__input {
  font-family: inherit;
  font-size: 0.68rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-base, #0b0c0f);
  color: var(--text-primary, #eef0f4);
  outline: none;
  transition: border-color 0.15s;
}
.player-row__input:focus {
  border-color: var(--accent, #5da9e9);
}
.player-row__input::placeholder {
  color: var(--text-tertiary, #6a7080);
}
.player-row__name {
  flex: 1;
  min-width: 5rem;
}
.player-row__lookup-type {
  min-width: 6rem;
  flex-shrink: 0;
}
.player-row__lookup-value {
  flex: 1.5;
  min-width: 7rem;
}
.player-row__select {
  font-family: inherit;
  font-size: 0.65rem;
  padding: 0.28rem 0.3rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-base, #0b0c0f);
  color: var(--text-primary, #eef0f4);
  outline: none;
  cursor: pointer;
  min-width: 5.5rem;
}
.player-row__select:focus {
  border-color: var(--accent, #5da9e9);
}
.player-row__self-toggle {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.player-row__self-cb {
  width: 0.85rem;
  height: 0.85rem;
  accent-color: var(--accent, #5da9e9);
  cursor: pointer;
}
.player-row__self-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-tertiary, #6a7080);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.player-row__self-cb:checked + .player-row__self-label {
  color: var(--accent, #5da9e9);
}
.player-row__remove {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  background: none;
  border: none;
  color: var(--text-tertiary, #6a7080);
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.player-row__remove:hover {
  color: var(--danger, #e05555);
  background: rgba(224, 85, 85, 0.1);
}
.btn--accent {
  background: var(--accent, #5da9e9);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn--accent:hover {
  background: #4d96d4;
}

/* Mobile: stack player row fields */
@media (max-width: 600px) {
  .player-row {
    flex-wrap: wrap;
  }
  .player-row__name,
  .player-row__lookup-value {
    flex: 1 1 100%;
    min-width: auto;
  }
  .player-row__lookup-type {
    min-width: auto;
    flex: 1;
  }
  .player-row__select {
    flex: 1;
  }
}

/* Team import (enemy roster lookup) */
.team-import {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.team-import__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-label);
  display: block;
  margin-bottom: 0.3rem;
}
.team-import__row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.team-import__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-primary);
}
.team-import__input::placeholder { color: var(--text-muted); }
.team-import__status {
  font-size: 0.72rem;
  margin-top: 0.3rem;
  line-height: 1.3;
}
.team-import__status--loading { color: var(--text-secondary); }
.team-import__status--error { color: var(--red); }
.team-import__status--success { color: var(--green); }

/* V1-41C: Enemy player row accent */
.players-page__section--enemy {
  border-color: rgba(224, 85, 85, 0.12);
}
.player-row--enemy {
  border-left: 2px solid rgba(224, 85, 85, 0.2);
}

/* ── V1-43: Resolve Players ──────────────────────────────────────────────── */

.players-page__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.6rem;
}
.resolve-status {
  font-size: 0.65rem;
  color: var(--text-tertiary, #6a7080);
}
.resolve-status--ok { color: var(--success, #4caf50); }
.resolve-status--warn { color: var(--warning, #d4a94e); }
.resolve-status--fail { color: var(--danger, #e05555); }

.resolve-badge {
  font-size: 0.55rem;
  font-weight: 500;
  padding: 0.08rem 0.3rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
  color: var(--text-tertiary, #6a7080);
  flex-shrink: 0;
  cursor: default;
}
.resolve-badge--ok {
  color: var(--success, #4caf50);
  background: rgba(76, 175, 80, 0.1);
}
.resolve-badge--warn {
  color: var(--warning, #d4a94e);
  background: rgba(212, 169, 78, 0.1);
}
.resolve-badge--fail {
  color: var(--danger, #e05555);
  background: rgba(224, 85, 85, 0.1);
}
.resolve-badge--none {
  color: var(--text-tertiary, #6a7080);
}

/* ── V1-44: Fetch Badges + Summary ───────────────────────────────────────── */

.fetch-badge {
  font-size: 0.55rem;
  font-weight: 500;
  padding: 0.08rem 0.3rem;
  border-radius: 0;
  background: var(--surface-raised, #1e2028);
  color: var(--text-tertiary, #6a7080);
  flex-shrink: 0;
  cursor: default;
}
.fetch-badge--ok {
  color: var(--accent, #5da9e9);
  background: rgba(93, 169, 233, 0.1);
}
.fetch-badge--warn {
  color: var(--warning, #d4a94e);
  background: rgba(212, 169, 78, 0.1);
}
.fetch-badge--fail {
  color: var(--danger, #e05555);
  background: rgba(224, 85, 85, 0.1);
}
.fetch-badge--none {
  color: var(--text-tertiary, #6a7080);
}
.fetch-summary {
  font-size: 0.58rem;
  color: var(--text-tertiary, #6a7080);
  width: 100%;
  padding: 0.15rem 0 0;
  line-height: 1.2;
}

/* ── V1-46: Allied Routing Status ────────────────────────────────────────── */

.dv-allied-routing {
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.3rem;
}
.dv-allied-routing__text {
  font-size: 0.6rem;
  color: var(--text-tertiary, #6a7080);
}
.dv-allied-routing--ok {
  color: var(--success, #4caf50);
}
.dv-allied-routing--warn {
  color: var(--warning, #d4a94e);
}
.dv-allied-routing--none {
  color: var(--text-tertiary, #6a7080);
}

/* ── V1-47: Enemy Routing Status ─────────────────────────────────────────── */

.dv-enemy-routing {
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.2rem;
}
.dv-enemy-routing__text {
  font-size: 0.6rem;
  color: var(--text-tertiary, #6a7080);
}
.dv-enemy-routing--ok {
  color: var(--accent, #5da9e9);
}
.dv-enemy-routing--warn {
  color: var(--warning, #d4a94e);
}

/* ── V1-48: Player Coverage Health Summary ───────────────────────────────── */

.dv-player-coverage {
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
}
.dv-pc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  font-size: 0.6rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0;
  border-left: 3px solid var(--text-tertiary, #6a7080);
  background: rgba(255,255,255,0.02);
}
.dv-pc__tier--strong { border-left-color: var(--success, #4caf50); }
.dv-pc__tier--moderate { border-left-color: var(--accent, #5da9e9); }
.dv-pc__tier--low { border-left-color: var(--warning, #d4a94e); }
.dv-pc__tier--none { border-left-color: var(--text-tertiary, #6a7080); }
.dv-pc__status {
  font-weight: 600;
  color: var(--text-secondary, #b0b8c8);
}
.dv-pc__tier--strong .dv-pc__status { color: var(--success, #4caf50); }
.dv-pc__tier--moderate .dv-pc__status { color: var(--accent, #5da9e9); }
.dv-pc__tier--low .dv-pc__status { color: var(--warning, #d4a94e); }
.dv-pc__tier--none .dv-pc__status { color: var(--text-tertiary, #6a7080); }
.dv-pc__detail {
  color: var(--text-tertiary, #6a7080);
  font-size: 0.55rem;
}
.dv-pc__warning {
  display: block;
  width: 100%;
  font-size: 0.55rem;
  color: var(--warning, #d4a94e);
  font-style: italic;
}

/* ── V1-48.6: Manual Override Controls ───────────────────────────────────── */

/* Allied override dropdown */
.dv-allied-override {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.2rem;
}
.dv-allied-override__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-tertiary, #6a7080);
  white-space: nowrap;
}
.dv-allied-override__select {
  font-family: inherit;
  font-size: 0.6rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-base, #0b0c0f);
  color: var(--text-primary, #eef0f4);
  outline: none;
  min-width: 8rem;
}
.dv-allied-override__select:focus {
  border-color: var(--accent, #5da9e9);
}

/* Enemy scouting toggle */
.player-row__scout-toggle {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.player-row__scout-cb {
  width: 0.8rem;
  height: 0.8rem;
  accent-color: var(--accent, #5da9e9);
  cursor: pointer;
}
.player-row__scout-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text-tertiary, #6a7080);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.player-row__scout-cb:checked + .player-row__scout-label {
  color: var(--accent, #5da9e9);
}
.player-row--excluded {
  opacity: 0.5;
}


/* ══════════════════════════════════════════════════════════════════════════════
   2-LAYER DECISION-FIRST UI
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Layer 1 — Simple (always visible) ─────────────────────────────────────── */

.dv-layer1 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Layer toggle button ───────────────────────────────────────────────────── */

.dv-layer-toggle {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dv-layer-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.dv-layer-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Layer 2 — Advanced (toggled) ──────────────────────────────────────────── */

.dv-layer2 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ── Tab bar ───────────────────────────────────────────────────────────────── */

.dv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.dv-tab {
  padding: 0.45rem 0.9rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dv-tab:hover {
  color: var(--text-primary);
}
.dv-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.dv-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Tab panels ────────────────────────────────────────────────────────────── */

.dv-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dv-tabpanel--hidden {
  display: none;
}

/* ── Close-call comparison row ─────────────────────────────────────────────── */

/* Confidence reasons — shown under pick card when not HIGH */
.dv-conf-reasons {
  padding: 0.4rem 0.75rem;
  margin-top: 0.25rem;
  background: var(--bg-card);
  border-left: 2px solid var(--orange);
}
.dv-conf-reasons__header {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 0.2rem;
}
.dv-conf-reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dv-conf-reasons__list li {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding-left: 0.8rem;
  position: relative;
  margin-bottom: 0.15rem;
  line-height: 1.35;
}
.dv-conf-reasons__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-weight: 700;
}

.dv-close-compare {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.dv-close-compare__hero {
  flex: 1;
  padding: 0.5rem 0.75rem;
}
.dv-close-compare__hero--a {
  border-right: 1px solid var(--border);
}
.dv-close-compare__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-panel);
}
.dv-close-compare__name {
  font-family: var(--font-hero);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.dv-punish-tag {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  color: #e8a838;
  margin-left: 0.35rem;
  white-space: nowrap;
}
.dv-close-compare__reason {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ── Confidence border accent on pick card ─────────────────────────────────── */

.dv-pick--conf-high {
  border-left: 3px solid var(--green);
}
.dv-pick--conf-medium {
  border-left: 3px solid var(--orange);
}
.dv-pick--conf-low {
  border-left: 3px solid var(--danger);
}

/* ── Confidence text badge ─────────────────────────────────────────────────── */

.dv-pick__conf-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 0;
  margin-top: 0.25rem;
}
.dv-pick__conf-badge--high {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid var(--green-border);
}
.dv-pick__conf-badge--medium {
  color: var(--orange);
  background: var(--orange-bg);
  border: 1px solid var(--accent-border);
}
.dv-pick__conf-badge--low {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}

/* ── Bullet reasons (Layer 1 key signals) ──────────────────────────────────── */

.dv-pick__bullets {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dv-pick__bullets li {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.35;
  padding-left: 0.75rem;
  position: relative;
}
.dv-pick__bullets li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ── Responsive: tabs stack on mobile ──────────────────────────────────────── */

@media (max-width: 639px) {
  .dv-tabs {
    flex-direction: column;
    border-bottom: none;
    border-left: 1px solid var(--border);
  }
  .dv-tab {
    border-bottom: none;
    border-left: 2px solid transparent;
    text-align: left;
  }
  .dv-tab--active {
    border-left-color: var(--accent);
    border-bottom-color: transparent;
  }
}

/* ── Alt-hero context switch indicators ────────────────────────────────────── */

.dv-pick--alt-selected {
  border-left: 3px solid var(--accent, #C9A84C);
}

.dv-alt-context-banner {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--surface-alt, #0F1C2C);
  color: var(--text-muted, #415A77);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 0;
}