/* ══════════════════════════════════════════════════════════════════
   CODEX CARD DETAIL MODAL (redesign step 7)
   See design_handoff_codex_redesign/README.md §Component Vocabulary 5.

   CSS-only restyle of the modal markup in src/templates.js (#cardModal
   .card-modal-redesign). Targets the two-column split that already
   exists (.card-modal-left | .card-modal-right) and layers Codex
   chrome on top. The state-driven action-button logic (Add to
   collection / Add copy / Edit · N etc.) is deferred to a JS pass —
   see DEFERRED.md.
   ══════════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────────── */
#cardModal.modal-overlay {
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Modal container ──────────────────────────────────────────────── */
#cardModal .modal-content.card-modal-redesign {
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: var(--shadow-modal);
  max-width: 1280px;
  max-height: 90vh;
  /* Wipe legacy gradient */
  background-image: none;
  color: var(--text);
}

body.dark-mode #cardModal .modal-content.card-modal-redesign {
  background: var(--surface);
}

/* ── Modal header ─────────────────────────────────────────────────── */
#cardModal .modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}

#cardModal .modal-header h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

#cardModal .modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#cardModal .modal-close:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border-hi);
}

/* ── Body (two-column) ────────────────────────────────────────────── */
#cardModal .card-modal-body {
  background: transparent;
}

#cardModal .card-modal-left,
#cardModal .card-modal-right {
  background: transparent;
}

#cardModal .card-modal-left .modal-image {
  background: var(--surface2);
  border-radius: 8px;
  padding: 12px;
}

#cardModal .card-modal-left .modal-image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
}

/* ── Status section action buttons ────────────────────────────────── */
#cardModal .card-modal-actions {
  background: transparent;
  padding: 16px 0 0;
  margin-top: 0;
  border-top: 1px solid var(--border);
}

/* Primary "Modifier ma collection" (or state-aware action). */
#cardModal .card-modal-actions .btn.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  letter-spacing: -0.005em;
  /* Wipe legacy gradient */
  background-image: none;
  box-shadow: 0 1px 2px rgba(189, 178, 255, 0.18);
}
#cardModal .card-modal-actions .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, white);
}

/* Wishlist + Ordered secondary buttons. */
#cardModal .card-modal-actions .btn.btn-secondary {
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 12px;
  background-image: none;
}
#cardModal .card-modal-actions .btn.btn-secondary:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border-hi);
}

/* State-tinted variants: wishlist gold, order cool. The active class is
   driven by JS in src/views/cards/cardModal.js (handleWishlistToggle /
   handleOrderedToggle). */
#cardModal #modalWishlistBtn.active {
  background: color-mix(in srgb, var(--warm) 18%, var(--surface2));
  color: var(--warm);
  border-color: var(--warm);
}
#cardModal #modalOrderedBtn.active {
  background: color-mix(in srgb, var(--cool) 18%, var(--surface2));
  color: var(--cool);
  border-color: var(--cool);
}

/* Codex step 7: state-driven action button layout. Row 1 stretches
   to full width when only the primary button is visible; splits
   evenly when "Edit · N" appears alongside "+ Add copy". */
#cardModal .codex-modal-actions .card-modal-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#cardModal .codex-modal-actions .card-modal-actions-row:first-child {
  margin-top: 0;
}
#cardModal .codex-modal-actions .card-modal-actions-row > .btn {
  flex: 1;
  margin: 0;
}

/* Mono count badge appended to "Edit · N" / order buttons. */
#cardModal .codex-modal-action-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: inherit;
  letter-spacing: -0.01em;
  opacity: 0.85;
  margin-left: 4px;
}

/* The action slot stretches like a regular row child so its child
   (whether the split widget or a single 0-copy CTA button) fills
   the available width. */
#cardModal .codex-modal-action-slot {
  display: flex;
  width: 100%;
}
#cardModal .codex-modal-action-slot > * {
  flex: 1 1 auto;
}

/* Split widget: one rounded frame matching the secondary-button vibe
   (surface2 bg, dim text, faint border). Two hoverable verb zones on
   top separated by a faint divider; italic noun strip on the bottom
   visually applies to either side. */
#cardModal .codex-action-split {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-sans);
}
#cardModal .codex-action-split-verbs {
  display: flex;
  align-items: stretch;
}
#cardModal .codex-action-split-half {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  border-radius: 0;
}
#cardModal .codex-action-split-half:hover,
#cardModal .codex-action-split-half:focus-visible {
  background: var(--surface3);
  color: var(--text);
  outline: none;
}
#cardModal .codex-action-split-half:active {
  background: color-mix(in srgb, var(--surface3) 80%, var(--border));
}
/* Faint divider between halves. */
#cardModal .codex-action-split-half + .codex-action-split-half {
  box-shadow: inset 1px 0 0 var(--border);
}
#cardModal .codex-action-split-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}
#cardModal .codex-action-split-verb {
  font-weight: 500;
}
/* Shared baseline noun: a thin italic strip that ties both halves
   together. Slightly darker stripe + top border so it reads as part
   of the same widget. */
#cardModal .codex-action-split-shared-noun {
  text-align: center;
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 10px 3px;
  background: color-mix(in srgb, var(--border) 22%, transparent);
  color: var(--text-dim);
  opacity: 0.85;
  border-top: 1px solid var(--border);
  pointer-events: none;
}

/* ── Report-error notice (small text under actions) ───────────────── */
#cardModal .card-report-notice {
  margin-top: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-mute);
  text-align: center;
}
#cardModal .card-report-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  padding: 0 0 0 4px;
  text-decoration: underline;
}
#cardModal .card-report-link:hover {
  color: var(--text);
}

/* ── Market prices section ────────────────────────────────────────── */
#cardModal .card-modal-prices {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 0;
}

#cardModal .card-modal-prices .card-section-title {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Right panel: info grid + sections ────────────────────────────── */
#cardModal .card-modal-right .card-info-grid {
  background: var(--surface2);
  border: 0;
  border-radius: 8px;
  padding: 6px;
  display: grid;
  gap: 12px;
}
/* Tighter info layout: pack label/value with no internal gap. */
#cardModal .card-modal-right .info-item {
  gap: 0;
}
/* Compact section variant: no extra top margin, slim padding. */
#cardModal .card-modal-right .card-section.card-section-compact {
  margin-top: 0;
  padding: 10px;
}
/* Section headers carry their own padding via the section; the trailing
   margin made the info grid drop too far below the title. */
#cardModal .card-modal-right .card-section-header {
  margin-bottom: 0;
}
#cardModal .card-modal-right .card-info-grid-3col {
  grid-template-columns: repeat(3, 1fr);
}

#cardModal .card-modal-right .info-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: 3px;
}
#cardModal .card-modal-right .info-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Card section blocks (Attacks, Combat stats, etc.) */
#cardModal .card-modal-right .card-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-top: 0;
}
#cardModal .card-modal-right .card-section-title {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

/* Codex step 7: Attacks section lang switcher + unofficial warning. */
#cardModal .codex-attacks-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-left: auto;
}

#cardModal .codex-attack-lang-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#cardModal .codex-attack-lang-tab:hover {
  background: var(--surface2);
  color: var(--text);
}
#cardModal .codex-attack-lang-tab.active {
  background: var(--surface3);
  color: var(--accent);
}

/* "!" mark for unprinted/unofficial-translation languages. */
#cardModal .codex-attack-lang-mark {
  margin-left: 3px;
  color: var(--warm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}
#cardModal .codex-attack-lang-tab.unofficial.active .codex-attack-lang-mark {
  color: var(--warm);
}

/* The warning callout that appears below the section header when the
   active lang isn't in card.langs. */
#cardModal .codex-attacks-unofficial {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--warm) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warm) 38%, transparent);
  color: var(--warm);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin: 10px 0;
  font-family: var(--font-sans);
  font-size: 12px;
}
#cardModal .codex-attacks-unofficial > span:first-child {
  font-size: 14px;
  flex-shrink: 0;
}

/* Card-section header layout: title on left, lang switch on right. */
#cardModal #modalAttacksWrapper .card-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Override the dark-mode hardcoded modal bg (#1e1e36). */
body.dark-mode #cardModal .modal-content.card-modal-redesign,
body.dark-mode #cardModal .card-modal-right .card-section,
body.dark-mode #cardModal .card-modal-prices,
body.dark-mode #cardModal .card-modal-right .card-info-grid {
  background: var(--surface);
}
body.dark-mode #cardModal .card-modal-right .card-section,
body.dark-mode #cardModal .card-modal-prices,
body.dark-mode #cardModal .card-modal-right .card-info-grid {
  background: var(--surface2);
}

/* Scrollbar inside the modal — slim Codex treatment. */
#cardModal .modal-scrollable-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
#cardModal .modal-scrollable-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#cardModal .modal-scrollable-content::-webkit-scrollbar-track {
  background: transparent;
}
#cardModal .modal-scrollable-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
#cardModal .modal-scrollable-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ── Always-visible per-language name chips (Codex step 7) ─────────── */
#cardModal .modal-names-dropdown--chips {
  /* Strip legacy absolute-positioned dropdown chrome — render inline
     under the title as a flat chip strip. */
  position: static;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  max-width: none;
  animation: none;
}
#cardModal .modal-names-dropdown--chips .card-names-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#cardModal .modal-names-dropdown--chips .card-name-entry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
}
#cardModal .modal-names-dropdown--chips .card-name-entry--unofficial {
  border-style: dashed;
  opacity: 0.75;
}
#cardModal .modal-names-dropdown--chips .card-name-lang {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-mute);
}
#cardModal .modal-names-dropdown--chips .card-name-lang-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
#cardModal .modal-names-dropdown--chips .card-name-value {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
#cardModal .modal-names-dropdown--chips .card-name-unofficial {
  color: var(--warm);
  font-size: 11px;
  margin-left: 3px;
}
/* The legacy chips-variant of #modalNamesDropdown is no longer used;
   the names section now sits in the right panel above card-info-grid
   and uses the shared .names-translation-notice styling. */

/* Names list: tight left-to-right pack — no list-level gap, entries
   stay at their intrinsic size (no flex-grow). Each entry keeps a
   small right margin so neighbouring spellings don't collide. */
#cardModal #modalNamesContent.card-names-list {
  gap: 0;
  justify-content: flex-start;
}
#cardModal #modalNamesContent.card-names-list > .card-name-entry {
  flex: 0 0 auto;
  padding: 0 20px 0 0;
}

/* ── Similar-cards grid Codex chrome (step 7) ──────────────────────── */
#cardModal .similar-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  padding: 4px 0;
}
#cardModal .similar-card {
  display: flex;
  flex-direction: column;
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  box-shadow: none !important;
}
#cardModal .similar-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
#cardModal .similar-card-image {
  background: var(--surface2);
  padding-bottom: 139.5%;
  position: relative;
}
#cardModal .similar-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#cardModal .similar-card-info {
  padding: 7px 8px;
  background: var(--surface);
  text-align: left;
}
#cardModal .similar-card-name {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cardModal .similar-card-set {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
#cardModal .similar-cards-header {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#cardModal .similar-count {
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  letter-spacing: 0;
}

/* ── Trivia: per-kind color stripe (step 7) ────────────────────────── */
#cardModal .card-trivia-entry {
  border-left: 2px solid var(--border);
}
#cardModal .card-trivia-print_variant {
  border-left-color: var(--warm);
}
#cardModal .card-trivia-lang_size {
  border-left-color: var(--cool);
}
#cardModal .card-trivia-rarity {
  border-left-color: var(--accent);
}
#cardModal .card-trivia-release {
  border-left-color: var(--pos);
}
#cardModal .card-trivia-debate {
  border-left-color: var(--neg);
}