.case-file {
  display: grid;
  gap: 20px;
  color: var(--text-1);
  scroll-margin-top: 92px;
}
.case-file[hidden] { display: none !important; }
#commander-deck-audit-verdict[hidden] { display: none !important; }

.case-file [id] { scroll-margin-top: 92px; }
.case-file :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.case-file__identity,
.case-file__hero,
.case-file__scores {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-2);
}

.case-file__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.case-file__art-group { display: flex; gap: 8px; flex: none; }

.case-file__art {
  width: 112px;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
  flex: none;
}
/* Partner / background pairs: shrink each portrait so both fit without
   widening the header disproportionately. */
.case-file__art--paired { width: 80px; }

.case-file__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-file__identity-copy { min-width: 0; }
.case-file__eyebrow { margin: 0 0 6px; color: var(--accent-soft, #dfc475); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-file__deck-name { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.12; }
.case-file__commander { margin: 8px 0 0; color: var(--text-1); font-weight: 700; overflow-wrap: anywhere; }
.case-file__meta { margin: 6px 0 0; color: var(--text-2); }

/* ---- Compact deck-identity header ----------------------------------------
   A tighter dossier-style header: art anchor on the left, deck name + bracket
   badge on the first line, one quiet metadata row, and a supporting sub-line.
   ~30-40% shorter than the previous stacked version, with no duplicated name. */
.case-file__identity--compact { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; padding: 20px 24px; align-items: center; }
.case-file__identity--compact .case-file__art { width: 96px; }
.case-file__identity--compact .case-file__art--paired { width: 74px; }

.case-file__identity-line {
  display: flex;
  align-items: flex-start;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.case-file__identity--compact .case-file__deck-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.14;
  font-weight: 800;
}

.case-file__identity-aside {
  display: grid;
  justify-items: end;
  align-self: center;
  gap: 10px;
  min-width: 0;
}
.case-file__identity-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.case-file__identity-actions .cda-audit-actions {
  justify-content: flex-end;
}

/* The bracket is the single prominent badge in the header. Tinted chip, not a
   solid CTA, so it stays scannable without competing with "Tune this deck". */
.case-file__bracket-badge {
  flex: none;
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #c9a84c) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #c9a84c) 14%, transparent);
  color: var(--accent-soft, #dfc475);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.case-file__identity-meta {
  margin: 9px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-2);
  font-size: .92rem;
}
.case-file__color-pips { display: inline-flex; align-items: center; gap: 4px; }
.case-file__color-pip {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.case-file__color-pip.is-white     { background: #e9e4c9; color: #23231c; }
.case-file__color-pip.is-blue      { background: #5a9fe0; color: #0a2036; }
.case-file__color-pip.is-black     { background: #5b5566; color: #f2eef8; }
.case-file__color-pip.is-red       { background: #e0685a; color: #3a0f0a; }
.case-file__color-pip.is-green     { background: #63b078; color: #0c2a17; }
.case-file__color-pip.is-colorless { background: #9a9aa8; color: #1f1f26; }
.case-file__identity-sep { color: var(--text-3, rgba(255,255,255,.32)); }
.case-file__identity-fact { color: var(--text-2); }
.case-file__identity-sub { margin: 5px 0 0; color: var(--text-2); font-size: .85rem; overflow-wrap: anywhere; }

.case-file__partial { margin: 0; padding: 12px 16px; border: 1px solid rgba(232,176,74,.42); border-radius: 12px; background: rgba(232,176,74,.08); color: var(--text-1); }
/* Detail-level control: a secondary, progressive-disclosure switch -- kept
   slim and right-aligned so it never competes with the verdict for the prime
   above-the-fold slot (no card border/background of its own). */
.case-file__view-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  background: none;
}
.case-file__view-legend {
  padding: 0;
  color: var(--text-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.case-file__view-options {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
}
.case-file__view-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.case-file__view-option strong { color: inherit; font-size: .82rem; }
/* The per-option descriptions are redundant with the eyebrow now that the
   switch is a compact secondary control -- hide them off the visible chip
   but keep them for assistive tech. */
.case-file__view-option span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.case-file__view-option.is-selected {
  border-color: rgba(201,168,76,.6);
  background: rgba(201,168,76,.14);
  color: var(--text-1);
}
.case-file__view-option:focus-visible { outline: 2px solid var(--accent-soft, #dfc475); outline-offset: 2px; }
.case-file__view-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.case-file__hero { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr); gap: 24px; padding: 28px; overflow: clip; background: linear-gradient(135deg, rgba(201,168,76,.12), transparent 52%), var(--surface-2); }
.case-file__anchor-alias { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; overflow: hidden; }
.case-file__primary { min-width: 0; }
.case-file__headline { max-width: 760px; margin: 0; color: var(--text-1); font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.07; letter-spacing: -.025em; text-wrap: balance; }
.case-file__support { max-width: 760px; margin: 16px 0 0; color: var(--text-2); font-size: 1.02rem; line-height: 1.65; }
.case-file__hero-impact { max-width: 760px; margin: 12px 0 0; color: var(--text-1); font-size: .92rem; line-height: 1.55; }
.case-file__confidence { margin: 16px 0 0; color: var(--text-2); font-size: .85rem; line-height: 1.5; }

/* ---- Health score + metric strip (Bracket/Lands/Ramp/Interaction/Price) --- */
.case-file__health-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 14px 0 0;
}
.case-file__health-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.case-file__health-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
  line-height: 1;
  background:
    radial-gradient(closest-side, var(--surface-2) 67%, transparent 68% 100%),
    conic-gradient(var(--case-file-health-color, var(--cda-ok, #6fcfa0)) var(--case-file-health-pct, 0%), rgba(255,255,255,.09) 0);
}
.case-file__health-ring strong { font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--text-1); }
.case-file__health-ring small { line-height: 1; color: var(--text-2); font-size: .8rem; font-weight: 700; align-self: center; }
.case-file__health-label { color: var(--text-2); font-size: .78rem; font-weight: 600; line-height: 1.3; }
.case-file__health-badge.is-ok { --case-file-health-color: var(--cda-ok, #6fcfa0); }
.case-file__health-badge.is-warn { --case-file-health-color: var(--cda-warn, #e8b04a); }
.case-file__health-badge.is-bad { --case-file-health-color: var(--cda-bad, #e87a70); }
.case-file__health-badge.is-neutral { --case-file-health-color: var(--accent, #c9a84c); }

.case-file__metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-file__metric-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .8rem;
  white-space: nowrap;
}
.case-file__metric-strip-item strong { color: var(--text-1); }
.case-file__metric-strip-label { color: var(--text-2); }
.case-file__metric-strip-item.is-ok { border-color: rgba(111,207,160,.4); background: var(--cda-ok-bg, rgba(111,207,160,.08)); }
.case-file__metric-strip-item.is-ok strong { color: var(--cda-ok, #6fcfa0); }
.case-file__metric-strip-item.is-warn { border-color: rgba(232,176,74,.4); background: var(--cda-warn-bg, rgba(232,176,74,.08)); }
.case-file__metric-strip-item.is-warn strong { color: var(--cda-warn, #e8b04a); }

/* ---- "What's working" strengths (healthy passed checks) ------------------- */
.case-file__strengths { margin: 16px 0 0; }
.case-file__strengths-label {
  margin: 0 0 8px;
  color: var(--cda-ok, #6fcfa0);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.case-file__strengths-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-file__strength {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(111,207,160,.28);
  background: var(--cda-ok-bg, rgba(111,207,160,.08));
  font-size: .82rem;
  line-height: 1.3;
}
.case-file__strength-check { align-self: center; color: var(--cda-ok, #6fcfa0); font-weight: 800; }
.case-file__strength-label { color: var(--text-1); font-weight: 700; }
/* Slightly brighter than --text-2 so the small detail stays >= WCAG AA (4.5:1)
   over the green-tinted chip background. */
.case-file__strength-detail { color: #9a97ad; font-size: .76rem; }

/* ---- Evidence chips (compact proof, always visible) ----------------------- */
.case-file__evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.case-file__evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text-2);
  font-size: .78rem;
}
.case-file__evidence-chip strong { color: var(--text-1); }
.case-file__evidence-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #c9a84c);
  flex: none;
}

/* ---- Inline proof disclosure (folded into the primary card) --------------- */
.case-file__proof-wrap { margin-top: 16px; }
.case-file__proof-details summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent-soft, #dfc475);
  font-weight: 700;
  font-size: .88rem;
}
.case-file__proof-details[open] summary { margin-bottom: 12px; }
.case-file__explanation {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
    var(--surface-2);
}
.case-file__explanation[hidden],
.case-file__explain-only[hidden] { display: none !important; }
.case-file__explanation h3 {
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--text-1);
}
.case-file__explanation p { margin: 0; color: var(--text-2); line-height: 1.55; font-size: .86rem; }
.case-file__score-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-file__score-breakdown li {
  display: grid;
  gap: 5px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
  color: var(--text-3, rgba(255,255,255,.4));
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
}
.case-file__score-breakdown li strong {
  font-size: .98rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-1);
}
.case-file__score-breakdown li.is-ok { border-left-color: var(--cda-ok, #6fcfa0); }
.case-file__score-breakdown li.is-ok strong { color: var(--cda-ok, #6fcfa0); }
.case-file__score-breakdown li.is-warn { border-left-color: var(--cda-warn, #e8b04a); }
.case-file__score-breakdown li.is-warn strong { color: var(--cda-warn, #e8b04a); }
.case-file__score-breakdown li.is-bad { border-left-color: var(--cda-bad, #e87a70); }
.case-file__score-breakdown li.is-bad strong { color: var(--cda-bad, #e87a70); }
.case-file__evidence-method { color: var(--text-2); font-size: .76rem; line-height: 1.5; }
.case-file__next-step { margin-top: 20px; padding: 14px; border: 1px solid rgba(201,168,76,.34); border-radius: 12px; background: rgba(201,168,76,.07); }
.case-file__next-step-label { margin: 0; color: var(--accent-soft, #dfc475); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-file__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.case-file__button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-weight: 800; text-decoration: none; }
.case-file__button--primary { border-color: var(--accent); background: var(--accent); color: #14120d; }
.case-file__button--primary:hover { filter: brightness(1.08); }
.case-file__button--secondary { background: var(--surface-2); color: var(--text-1); }
.case-file__button[type="button"] { cursor: pointer; }
/* Always present so the confirmation message cannot push the layout when it
   appears (this block sits above the metric strip and the whole breakdown). */
.case-file__copy-status { min-height: 1.4em; margin: 8px 0 0; color: var(--text-2); font-size: .82rem; line-height: 1.4; }
.case-file__copy-fallback { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-1); font: inherit; font-size: .8rem; line-height: 1.5; resize: vertical; }
.case-file__copy-fallback[hidden] { display: none; }
.case-file__rail { align-self: start; display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(201,168,76,.26); border-radius: 13px; background: rgba(0,0,0,.18); }
.case-file__rail p { margin: 0 0 6px; color: var(--text-2); line-height: 1.5; }
.case-file__rail-link, .case-file__text-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-soft, #dfc475); font-weight: 800; text-underline-offset: 3px; }
.case-file__rail-eyebrow { margin: 0; color: var(--text-3, rgba(255,255,255,.4)); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-file__rail-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.case-file__rail-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.case-file__rail-rank { flex: none; color: var(--accent-soft, #dfc475); font-weight: 800; font-size: .78rem; padding-top: 2px; }
.case-file__rail-row-body { min-width: 0; }
.case-file__rail-row-category { margin: 0; color: var(--text-3, rgba(255,255,255,.4)); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.case-file__rail-row-title { margin: 2px 0 4px; color: var(--text-1); font-size: .86rem; font-weight: 700; line-height: 1.3; }
.case-file__rail-row .case-file__text-link { min-height: auto; font-size: .8rem; }
.case-file__rail-row--positive { color: var(--cda-ok, #6fcfa0); font-size: .84rem; }

.case-file__scores { padding: 22px; }
.case-file__section-heading { margin: 0 0 16px; font-size: 1.15rem; }
.case-file__proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case-file__proof-card { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.case-file__proof-card p { margin: 0; line-height: 1.5; }
.case-file__proof-value { color: var(--accent-soft, #dfc475); font-size: 1.45rem; overflow-wrap: anywhere; }
.case-file__comparison, .case-file__source { color: var(--text-2); font-size: .78rem; overflow-wrap: anywhere; }
.case-file__caveat { margin-top: 12px; font-size: .8rem; color: var(--text-2); }
.case-file__score-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.case-file__metric { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.case-file__metric strong { color: var(--accent-soft, #dfc475); font-size: 1.25rem; overflow-wrap: anywhere; }
.case-file__metric span { font-weight: 800; }
.case-file__metric small { color: var(--text-2); line-height: 1.4; }
.case-file-detail-anchor {
  display: block;
  width: 0;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  visibility: hidden;
}
#commander-deck-audit-results > [hidden] { display: none !important; }
#commander-deck-audit-results > section[id] { scroll-margin-top: 92px; }

.deck-review-chips {
  align-items: flex-start;
  align-content: flex-start;
}
.deck-review-chips .reserved-card-tag {
  align-self: flex-start;
  min-height: 28px;
  height: auto;
  padding: 5px 10px;
  line-height: 1.25;
}

.deck-curve-high-detail {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 900px) {
  .case-file__rail { position: sticky; top: 88px; }
}

@media (max-width: 899px) {
  .case-file__view-switch { align-items: stretch; flex-direction: column; }
  .case-file__identity { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .case-file__art { width: 96px; }
  .case-file__art--paired { width: 70px; }
  .case-file__identity--compact { gap: 18px; }
  .case-file__identity--compact .case-file__identity-aside {
    grid-column: 1 / -1;
    width: 100%;
  }
  .case-file__identity--compact .case-file__art { width: 88px; }
  .case-file__identity--compact .case-file__art--paired { width: 68px; }
  .case-file__hero { grid-template-columns: 1fr; gap: 18px; }
  .case-file__rail { position: static; }
  .case-file__proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-file__score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-file__score-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .case-file { gap: 16px; }
  .case-file__identity { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .case-file__art { width: 72px; }
  .case-file__art--paired { width: 54px; }
  .case-file__identity--compact { padding: 16px; gap: 16px; }
  .case-file__identity--compact .case-file__art { width: 72px; }
  .case-file__identity--compact .case-file__art--paired { width: 56px; }
  .case-file__identity--compact .case-file__deck-name { font-size: clamp(1.3rem, 6vw, 1.5rem); }
  .case-file__bracket-badge { font-size: .78rem; padding: 5px 11px; }
  .case-file__hero, .case-file__scores { padding: 18px 16px; }
  .case-file__proof-grid, .case-file__score-grid { grid-template-columns: 1fr; }
  .case-file__button { width: 100%; min-height: 48px; }
  .case-file__actions { display: grid; grid-template-columns: 1fr; }
  .case-file__rail-link, .case-file__text-link { min-height: 44px; }
  .case-file__view-options { grid-template-columns: 1fr 1fr; width: 100%; }
  .case-file__view-option { min-width: 0; min-height: 48px; padding: 7px 9px; }
  .case-file__score-breakdown { grid-template-columns: 1fr; }
  .case-file__health-strip { gap: 12px; }
  .case-file__metric-strip-item { font-size: .76rem; padding: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-file *, .case-file *::before, .case-file *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The Case File root is programmatically focused on render (a screen-reader
   cue -- it is tabindex=-1, never keyboard-tabbed to), which drew a stray focus
   contour around the whole card on first load. Interactive descendants keep
   their own :focus-visible rings (declared above); only the container's own
   ring is suppressed. */
.case-file:focus,
.case-file:focus-visible { outline: none; }