/* ===========================================================================
   Commander Deck Audit — page-scoped styles (cda- prefix)
   Loaded after content.css to supplement and override where needed.
   =========================================================================== */

/* ---- Status tokens (mirror clst- palette) --------------------------------- */
:root {
  --cda-ok:   #6fcfa0;
  --cda-warn: #e8b04a;
  --cda-bad:  #e87a70;
  --cda-ok-bg:   rgba(111,207,160,0.08);
  --cda-warn-bg: rgba(232,176,74,0.08);
  --cda-bad-bg:  rgba(232,122,112,0.08);
}

/* Keep long audit wrappers and carousel cards inside their rounded corners.
   Visible overflow lets a straight border/background edge paint over the
   bottom-right radius once these cards become wide or very tall. */
.dc-audit-page .tool-card,
.dc-audit-page .related-tool-card {
  overflow: clip;
  background-clip: padding-box;
}

/* ---- Completed-audit actions --------------------------------------------- */
.cda-import-collapsed {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cda-btn-edit {
  appearance: none;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
  background: rgba(255,255,255,0.04);
  color: var(--text-1, #f0f0f5);
  padding: 0 12px;
  border-radius: 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: background var(--transition, 320ms cubic-bezier(0.4,0,0.2,1)),
              border-color var(--transition);
  flex: none;
}
.cda-btn-edit:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }

.cda-audit-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
}

.cda-rerun-btn {
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.09);
  color: var(--accent-soft, #efd58b);
}

.cda-rerun-btn:hover {
  border-color: rgba(201,168,76,0.54);
  background: rgba(201,168,76,0.15);
}

.cda-rerun-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (max-width: 640px) {
  .cda-audit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .cda-audit-actions .cda-btn-edit {
    width: 100%;
  }

  .cda-audit-actions .cda-btn-edit:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- Override: verdict section becomes a block container ------------------- */
/* content.css sets #commander-deck-audit-verdict to a grid of chips.
   We turn it into a plain block so our cda-dashboard can take over. */
#commander-deck-audit-verdict {
  display: block !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* ---- Top audit dashboard — 3-col on desktop ------------------------------- */
.cda-dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 256px;
  gap: 14px;
  align-items: start;
}

/* Panel shared base */
.cda-col-commander,
.cda-col-bracket,
.cda-col-fix {
  border-radius: var(--r, 14px);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012)),
              rgba(255,255,255,0.012);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
              0 16px 34px rgba(0,0,0,0.18);
}

/* ---- LEFT: Commander spotlight -------------------------------------------- */
.cda-col-commander {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  text-align: center;
}
.cda-commander-imgs {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.cda-commander-img-wrap {
  position: relative;
  width: 148px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  aspect-ratio: 63 / 88;
}
/* Partner pair: share available space equally, cap at 110px each */
.cda-commander-img-wrap.is-partner {
  flex: 1 1 0;
  min-width: 0;
  max-width: 110px;
  width: auto;
}
.cda-commander-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3, #0f0f14);
  clip-path: inset(1px round 10px);
}
.cda-commander-badge {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(10,10,12,0.84);
  color: var(--accent-soft, #efd58b);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(201,168,76,0.32);
}
.cda-commander-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1, #f0f0f5);
  word-break: break-word;
  line-height: 1.35;
  margin: 0;
}
.cda-commander-pips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}
.cda-commander-tcg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,76,0.32);
  background: linear-gradient(135deg, rgba(239,213,139,0.94), rgba(195,149,50,0.94));
  color: #1a130a;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}
.cda-commander-tcg:hover { filter: brightness(1.06); }
.cda-commander-fallback {
  width: 148px;
  aspect-ratio: 63/88;
  border-radius: 10px;
  background: var(--surface-3, #0f0f14);
  border: 1px dashed rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cda-commander-fallback-label {
  font-size: 0.75rem;
  color: var(--text-3, rgba(255,255,255,0.35));
  text-align: center;
  padding: 8px;
  line-height: 1.4;
}

/* ---- CENTER: Bracket verdict panel ---------------------------------------- */
.cda-col-bracket {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}
.cda-bracket-eyebrow {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3, rgba(255,255,255,0.35));
  margin: 0;
}
.cda-bracket-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cda-bracket-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-1, #f0f0f5);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cda-bracket-label-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2, rgba(255,255,255,0.6));
}
.cda-bracket-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.cda-bracket-verdict {
  font-size: 0.86rem;
  color: var(--text-2, rgba(255,255,255,0.6));
  line-height: 1.55;
  margin: 0;
}
/* Mini info chips below the verdict sentence */
.cda-bracket-mini-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cda-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  white-space: nowrap;
}
.cda-mini-chip.is-warn {
  border-color: rgba(232,112,112,0.28);
  background: rgba(232,112,112,0.08);
  color: #f4a0a0;
}
.cda-mini-chip.is-accent {
  border-color: rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.08);
  color: var(--accent-soft, #efd58b);
}

/* ---- RIGHT: Fix-first in dashboard ---------------------------------------- */
.cda-col-fix {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.cda-fix-header {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
}
.cda-fix-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cda-fix-card {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-sm, 10px);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(255,255,255,0.1);
}
.cda-fix-card.is-warn { border-left-color: var(--cda-bad); }
.cda-fix-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cda-fix-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.25;
}
.cda-fix-card-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--text-2);
  white-space: nowrap;
  flex: none;
}
.cda-fix-card-badge.is-warn {
  background: rgba(232,112,112,0.15);
  color: #f4a0a0;
}
.cda-fix-card-action {
  font-size: 0.72rem;
  color: var(--accent-soft);
  font-weight: 600;
  text-decoration: none;
  align-self: start;
  padding-top: 1px;
}
.cda-fix-card-action:hover { text-decoration: underline; }

/* ---- Metric chips row (overrides content.css summary grid) ---------------- */
#commander-deck-audit-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: unset !important;
  align-items: center !important;
  padding: 4px 0 !important;
}
#commander-deck-audit-summary .deck-summary-card {
  /* Switch from tall stat card to compact chip */
  min-height: unset !important;
  padding: 7px 14px !important;
  gap: 0 !important;
  border-radius: 999px !important;
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  border-left: none !important;
  box-shadow: none !important;
}
#commander-deck-audit-summary .deck-summary-card-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#commander-deck-audit-summary .deck-summary-card-eyebrow {
  font-size: 0.72rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
  order: 1 !important;
}
#commander-deck-audit-summary .deck-summary-card strong {
  font-size: 0.88rem !important;
  line-height: 1 !important;
  order: 0 !important;
}
#commander-deck-audit-summary .deck-summary-card-sub,
#commander-deck-audit-summary .audit-pips {
  display: none !important;
}

/* ---- Entrance animation for dashboard panels ------------------------------ */
@keyframes cda-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.cda-col-commander,
.cda-col-bracket,
.cda-col-fix {
  animation: cda-panel-in 380ms cubic-bezier(0.22,1,0.36,1) both;
}
.cda-col-bracket { animation-delay: 60ms; }
.cda-col-fix     { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .cda-col-commander,
  .cda-col-bracket,
  .cda-col-fix {
    animation: none;
  }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .cda-dashboard {
    grid-template-columns: 180px 1fr 230px;
  }
}

@media (max-width: 860px) {
  .cda-dashboard {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto;
  }
  .cda-col-commander { grid-column: 1; grid-row: 1; }
  .cda-col-bracket   { grid-column: 2; grid-row: 1; }
  .cda-col-fix {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .cda-fix-cards     { flex-direction: row; flex-wrap: wrap; }
  .cda-fix-card      { flex: 1 1 150px; }
  .cda-commander-img-wrap { width: 110px; }
}

@media (max-width: 600px) {
  .cda-dashboard {
    grid-template-columns: 1fr;
  }
  .cda-col-commander { grid-column: 1; grid-row: 1; }
  .cda-col-bracket   { grid-column: 1; grid-row: 2; }
  .cda-col-fix       { grid-column: 1; grid-row: 3; }
  .cda-fix-cards     { flex-direction: column; }
  .cda-fix-card      { flex: none; }
  .cda-commander-imgs { justify-content: center; }
  .cda-commander-img-wrap { width: 152px; }
  .cda-commander-img-wrap.is-partner {
    flex: 1 1 0;
    min-width: 0;
    max-width: 120px;
    width: auto;
  }
}

@media (max-width: 440px) {
  .cda-bracket-number { font-size: 1.65rem; }
  .cda-col-bracket { padding: 14px; }
  .cda-col-commander { padding: 14px 10px; }
  .cda-commander-img-wrap { width: 130px; }
}

/* ---- Deck health ratio overview (ring + bar chart) ------------------------ */
.cda-ratio-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}
.cda-ratio-ring-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cda-ratio-ring-label {
  font-size: 0.7rem;
  color: var(--text-3, rgba(255,255,255,0.35));
  text-align: center;
  line-height: 1.4;
}
.cda-ratio-bar-chart { display: grid; gap: 7px; }
.cda-ratio-bar-row,
.cda-ratio-bar-row--expandable > summary {
  display: grid;
  grid-template-columns: 100px 28px 1fr auto;
  gap: 8px;
  align-items: center;
}
.cda-ratio-bar-row--expandable {
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 8px;
}
.cda-ratio-bar-row--expandable > summary {
  cursor: pointer;
  list-style: none;
}
.cda-ratio-bar-row--expandable > summary::-webkit-details-marker { display: none; }
.cda-ratio-bar-row--expandable:hover { background: rgba(255,255,255,0.03); }
.cda-ratio-bar-row--expandable:focus-within { outline: 2px solid var(--accent, #c9a84c); outline-offset: 2px; }
.cda-ratio-bar-note {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  padding-left: 108px;
  font-size: 0.76rem;
  color: var(--text-2, rgba(255,255,255,0.6));
  line-height: 1.5;
}
.cda-ratio-bar-status {
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.cda-ratio-bar-status.is-ok   { color: var(--cda-ok);   }
.cda-ratio-bar-status.is-warn { color: var(--cda-warn); }
.cda-ratio-bar-status.is-bad  { color: var(--cda-bad);  }
.cda-ratio-bar-label {
  font-size: 0.74rem;
  color: var(--text-2, rgba(255,255,255,0.6));
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cda-ratio-bar-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-1, #f0f0f5);
  text-align: center;
}
.cda-ratio-bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}
.cda-ratio-bar-zone {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
}
.cda-ratio-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.42s cubic-bezier(0.4,0,0.2,1);
}
.cda-ratio-bar-fill.is-ok   { background: var(--cda-ok);   }
.cda-ratio-bar-fill.is-warn { background: var(--cda-warn); }
.cda-ratio-bar-fill.is-bad  { background: var(--cda-bad);  }

.cda-ratio-legend {
  font-size: 0.68rem;
  color: var(--text-3, rgba(255,255,255,0.35));
  margin-top: 4px;
}

.cda-ratio-warns-detail { margin-top: 16px; }
.cda-ratio-warns-detail .deck-audit-grid { margin-top: 10px; }

@media (max-width: 600px) {
  .cda-ratio-row {
    grid-template-columns: 1fr;
  }
  .cda-ratio-ring-col {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
  }
  .cda-ratio-bar-row,
  .cda-ratio-bar-row--expandable > summary { grid-template-columns: 86px 26px 1fr auto; }
  .cda-ratio-bar-note { padding-left: 0; }
  .cda-ratio-bar-status { font-size: 0.62rem; }
}

/* ---- Page-level section spacing ------------------------------------------ */
/* The page-shell uses block layout; add breathing room between the tool slot,
   the deck preview card, and the mana base CTA. */
#commander-deck-audit-preview-panel,
.full-audit-cta-link {
  margin-top: 20px;
}

/* ---- TL;DR summary -------------------------------------------------------- */
/* Compact, scannable read at the top of the analysis. Real audit numbers only. */
.cda-tldr {
  margin-bottom: 18px;
  padding: 18px 20px 16px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.1));
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 168, 76, 0.08), transparent 42%),
    var(--surface-panel, rgba(255, 255, 255, 0.03));
}

.cda-tldr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: 12px;
}

.cda-tldr-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.cda-tldr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.cda-tldr-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cda-tldr-stat-value {
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-1, #f0eef8);
}

.cda-tldr-stat-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2, #8a879e);
}

.cda-tldr-stat-label span {
  text-transform: none;
  letter-spacing: 0;
}

.cda-tldr-sentence {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-1, #f0eef8);
}

.cda-tldr-fixes {
  margin-bottom: 14px;
}

.cda-tldr-fixes-title {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2, #8a879e);
}

.cda-tldr-fixes ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.cda-tldr-fixes li {
  font-size: 0.94rem;
  line-height: 1.5;
}

.cda-tldr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.cda-tldr-detail-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--accent, #c9a84c);
  background: transparent;
  color: var(--accent, #c9a84c);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cda-tldr-detail-btn:hover {
  background: var(--accent, #c9a84c);
  color: #1a130a;
}

.cda-tldr-detail-btn:focus-visible {
  outline: 2px solid var(--accent, #c9a84c);
  outline-offset: 2px;
}

.cda-tldr-advanced {
  margin-top: 10px;
}

.cda-tldr-advanced-note {
  margin: 8px 0;
  font-size: 0.82rem;
  color: var(--text-2, #8a879e);
}

.cda-tldr-table-wrap {
  overflow-x: auto;
}

.cda-tldr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.cda-tldr-table th,
.cda-tldr-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.cda-tldr-table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #8a879e);
}

.cda-tldr-table tbody th {
  font-weight: 600;
  color: var(--text-1, #f0eef8);
}

@media (max-width: 560px) {
  .cda-tldr {
    padding: 16px 15px 14px;
  }
  .cda-tldr-stat-value {
    font-size: 1.15rem;
  }
}

/* ---- Tune Deck drawer ------------------------------------------------------
   The tuner keeps every existing control (deck-tuner.js is untouched); this
   only changes where it's presented -- a right-side drawer on desktop, a
   full-screen sheet on mobile, instead of always-on inline real estate
   between the summary and the Case File. */
.cda-tuner-toggle {
  background: linear-gradient(135deg, rgba(239,213,139,.94), rgba(195,149,50,.94));
  border-color: rgba(201,168,76,.32);
  color: #1a130a;
}
.cda-tuner-toggle:hover { filter: brightness(1.06); }
.cda-tuner-toggle[hidden] { display: none !important; }

.cda-tuner-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6,6,8,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms ease;
}
.cda-tuner-backdrop[hidden] { display: none !important; }
.cda-tuner-backdrop.is-open { opacity: 1; }

.cda-tuner-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(560px, 94vw);
  overflow-y: auto;
  padding: 56px 20px 24px;
  background: var(--surface, #111115);
  border-left: 1px solid var(--border-strong, rgba(255,255,255,.1));
  box-shadow: -24px 0 60px rgba(0,0,0,.45);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
}
.cda-tuner-drawer.is-open { transform: translateX(0); }
/* Presented in a fixed-width drawer regardless of viewport, so the tuner's
   own >=900px two-column layout (deck-tuner.css) would otherwise squeeze into
   a narrow panel on a wide desktop screen -- force single-column here. */
.cda-tuner-drawer .dc-tuner-layout {
  grid-template-columns: 1fr;
}

.cda-tuner-close {
  /* Fixed, not absolute: .cda-tuner-drawer itself scrolls (overflow-y: auto)
     to fit all of Tune Deck's content, and an absolutely-positioned child
     scrolls away with that content instead of staying put -- meaning this
     button vanished off the top of the screen the moment the drawer was
     scrolled at all. Fixed positioning anchors it to the viewport corner
     the drawer occupies, immune to the drawer's internal scroll. */
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong, rgba(255,255,255,.1));
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text-1, #f0f0f5);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.cda-tuner-close:hover { background: rgba(255,255,255,.08); }

@media (max-width: 767px) {
  .cda-tuner-drawer {
    width: 100vw;
    top: 0;
    padding-top: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cda-tuner-drawer,
  .cda-tuner-backdrop {
    transition: none;
  }
}

/* ---- Result section rhythm ------------------------------------------------ */
/* Each breakdown section stacks flush (margin 0) and only carried an internal
   heading->content gap, so every gold section heading sat jammed against the
   card above it (0px above, ~22px below) and read as unbalanced. Give every
   section deliberate separation from the one before it -- slightly more space
   above the heading than below keeps the heading grouped with its own content
   while clearly detaching it from the previous section. Hidden sections are
   display:none, so this only spaces the sections that actually render. */
#cda-full-breakdown > section,
#cda-full-breakdown > .cda-analysis-grid {
  margin-top: 30px;
}

/* ---- Lead structural read (health overview + composition + curve) ---------- */
/* These sit directly under the Case File as the first structural read. Flex+gap
   so hidden panels (e.g. the health overview on cEDH lists) collapse cleanly
   with no leading gap. */
#cda-lead-visuals {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
}
/* Collapse empties so no stray bordered/empty box is left behind when a panel
   (or the whole block) has nothing to show. */
.cda-analysis-grid:not(:has(> section:not([hidden]))) { display: none; }
#cda-lead-visuals:not(:has(> section:not([hidden]), > .cda-analysis-grid > section:not([hidden]))) { display: none; }

/* ---- Composition + curve grouped in a 5:7 layout -------------------------- */
.cda-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
  align-items: start;
}
.cda-analysis-grid > .deck-audit-card { margin: 0; }

/* The site shell adds its elevated-card shadow to every .deck-audit-card.
   Result sections use that class for layout only, so the shell shadow creates
   a second tinted rectangle behind headings and their real inner cards. */
body.dc-shell-ready #commander-deck-audit-results.deck-audit-card,
body.dc-shell-ready #commander-deck-audit-results .deck-audit-card {
  border: none;
  background: none;
  box-shadow: none;
}

@media (max-width: 899px) {
  .cda-analysis-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Curve: labeled AMV definition ----------------------------------------- */
.cda-curve-amv-def {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--text-3, rgba(255,255,255,0.4));
}
.cda-curve-amv-def strong { color: var(--text-2, rgba(255,255,255,0.6)); }

.deck-donut-hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---- Price: concentration (stacked) bar ------------------------------------ */
.cda-price-concentration { margin: 14px 0 0; }
.cda-price-concentration-label {
  margin: 0 0 6px;
  font-size: 0.76rem;
  color: var(--text-2, rgba(255,255,255,0.6));
}
.cda-price-concentration-bar {
  display: flex;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.cda-price-concentration-seg {
  height: 100%;
  min-width: 2px;
  border-right: 2px solid rgba(10,10,12,0.55);
}
.cda-price-concentration-seg:last-child {
  border-right: none;
}
.cda-price-concentration-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-3, rgba(255,255,255,0.4));
}
.cda-price-concentration-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cda-price-concentration-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

/* ---- Actionable next steps ------------------------------------------------ */
/* Each next-step line pairs its advice with the one button that acts on it. */
.deck-audit-next-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.deck-audit-next-text {
  flex: 1 1 auto;
  min-width: 0;
}
.deck-audit-next-action {
  flex: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-soft, #efd58b);
  background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.28);
  transition: background 120ms ease, border-color 120ms ease;
}
.deck-audit-next-action:hover,
.deck-audit-next-action:focus-visible {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.45);
}

/* ---- Budget & price suggestions ------------------------------------------- */
/* Compact section header: heading + one muted line on the left, one primary
   CTA on the right. Deliberately NOT a recommendation-style card so the actual
   swaps below are what draws the eye. */
.cda-budget-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 18px;
}
.cda-budget-head-text { min-width: 0; }
.cda-budget-head .tool-section-heading { margin: 0; }
.cda-budget-head-note {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-2, rgba(255,255,255,0.6));
}
/* Compact override of the gold primary button for the section header: keeps it
   the strongest CTA in the section without the full 46px store-link footprint. */
.cda-budget-head-cta {
  flex: none;
  min-width: 0;
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.86rem;
  border-radius: 12px;
}
@media (max-width: 620px) {
  .cda-budget-head { flex-wrap: wrap; }
  .cda-budget-head-cta { width: 100%; }
}

/* Two columns on wide screens; a single column before the cards get cramped. */
.cda-swap-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
@media (min-width: 880px) {
  .cda-swap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One flat card per suggestion: a summary header, a current -> suggested
   comparison with no nested boxes, and a secondary action. */
.cda-swap {
  gap: 12px;
  align-content: start;
}
.cda-swap-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
}
.cda-swap-head-main { min-width: 0; }
.cda-swap .cda-swap-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.cda-swap-flag {
  margin: 3px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-3, rgba(255,255,255,0.42));
}
/* Savings is the primary scan signal: a compact success pill pinned top-right.
   The engine reports an upper-bound saving, so the label reads "Save up to". */
.cda-swap-savings {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cda-ok, #6fcfa0);
  background: var(--cda-ok-bg, rgba(111,207,160,0.08));
  border: 1px solid rgba(111,207,160,0.28);
}

/* Secondary, left-aligned action so the repeated compare button no longer
   competes with the section-level gold CTA. */
.cda-swap-compare-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-2, rgba(255,255,255,0.72));
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cda-swap-compare-link:hover,
.cda-swap-compare-link:focus-visible {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: var(--text-1);
}
.cda-swap-compare-link:focus-visible {
  outline: 2px solid var(--accent, #c9a84c);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cda-swap-compare-link { transition: none; }
}

/* ---- Empty result "ghost box" guard --------------------------------------
   Some completed-audit sections carry card/box styling (border + background)
   and are filled by JS. A couple have an unconditional `display` rule that
   beats the [hidden] attribute (same problem already fixed for .deck-audit-lower
   and #commander-deck-audit-summary in content.css), and others can be briefly
   un-hidden before their content arrives. In the Case File layout the verdict
   dashboard is rendered, then set hidden=true (its content lives in the Case
   File instead) -- but `.deck-audit-verdict { display:grid }` kept it on screen
   as a stray box. Honor the attribute here, and hide any of these sections that
   would otherwise render with nothing in them. Populated sections are
   unaffected -- :empty only matches elements with no children at all. */
.deck-audit-verdict[hidden] { display: none !important; }
#commander-deck-audit-verdict:empty,
#commander-deck-audit-sharing:empty,
#commander-deck-audit-overview:empty,
#prescription:empty { display: none !important; }

/* ===========================================================================
   Deck Profile card + contextual land read (archetype-aware audit layer)
   Native to the existing cda- system: same status tokens, radius, spacing and
   pill shape. Deliberately compact -- it supports the audit, never dominates.
   =========================================================================== */
.cda-deck-profile {
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--r, 14px);
  background: var(--surface-3, rgba(255, 255, 255, 0.03));
}
.cda-deck-profile[hidden] { display: none !important; }

.cda-deck-profile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.cda-deck-profile__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2, rgba(255, 255, 255, 0.55));
}
.cda-deck-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.cda-strategy-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--text-2, rgba(255, 255, 255, 0.7));
}
.cda-strategy-chip.is-primary {
  border-color: color-mix(in srgb, var(--cda-ok) 55%, transparent);
  background: var(--cda-ok-bg, rgba(111, 207, 160, 0.08));
  color: var(--text-1, #f0f0f5);
  font-weight: 700;
}
.cda-strategy-chip__name { font-weight: 600; }
.cda-strategy-chip.is-primary .cda-strategy-chip__name { font-weight: 700; }
.cda-strategy-chip__role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cda-deck-profile__summary {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-1, #e8e8ee);
}

.cda-deck-profile__why {
  margin-top: 10px;
  font-size: 0.86rem;
}
.cda-deck-profile__why-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--accent, #c9a84c);
  font-weight: 600;
  list-style: none;
}
.cda-deck-profile__why-toggle::-webkit-details-marker { display: none; }
.cda-deck-profile__why-toggle::before {
  content: "›";
  display: inline-block;
  transition: transform 160ms ease;
}
.cda-deck-profile__why[open] .cda-deck-profile__why-toggle::before { transform: rotate(90deg); }
.cda-deck-profile__why:focus-within .cda-deck-profile__why-toggle {
  outline: 2px solid var(--accent, #c9a84c);
  outline-offset: 2px;
  border-radius: 6px;
}
.cda-deck-profile__why-body {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  color: var(--text-2, rgba(255, 255, 255, 0.72));
}
.cda-deck-profile__why-heading { margin: 8px 0 4px; color: var(--text-1, #e8e8ee); }
.cda-deck-profile__why-list { margin: 0 0 6px; padding-left: 18px; }
.cda-deck-profile__why-list li { margin: 2px 0; }
.cda-deck-profile__roles {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px 16px;
}
.cda-deck-profile__role {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border, rgba(255, 255, 255, 0.06));
}
.cda-deck-profile__role-count { color: var(--text-1, #e8e8ee); font-variant-numeric: tabular-nums; }
.cda-deck-profile__role.is-thin .cda-deck-profile__role-count { color: var(--cda-warn); }
.cda-deck-profile__why-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--text-2, rgba(255, 255, 255, 0.5));
}

/* Contextual land read inside the Deck composition card. */
.cda-land-context {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.88rem;
  line-height: 1.45;
}
.cda-land-context.is-pass { border-left: 3px solid var(--cda-ok); }
.cda-land-context.is-warn { border-left: 3px solid var(--cda-warn); }
.cda-land-context__icon {
  grid-row: 1 / span 2;
  align-self: start;
  font-weight: 700;
  font-size: 1rem;
}
.cda-land-context.is-pass .cda-land-context__icon { color: var(--cda-ok); }
.cda-land-context.is-warn .cda-land-context__icon { color: var(--cda-warn); }
.cda-land-context strong { color: var(--text-1, #f0f0f5); }
.cda-land-context__body { color: var(--text-2, rgba(255, 255, 255, 0.72)); }

@media (max-width: 520px) {
  .cda-deck-profile { padding: 15px 16px; }
  .cda-deck-profile__roles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cda-deck-profile__why-toggle::before { transition: none; }
}