/* =====================================================================
   card-detail-modal.css

   Two popups (FAQ + Comments) and the on-tile widgets that open them
   plus the inline like/dislike controls in the card title row.

   The glassy panel + sidebar-aware centering + h1-h4 white-bold come
   from glass-modals.css (which lists .cdm-overlay / .cdm-panel in its
   selector lists). This file is JUST layout, the on-tile triggers,
   and the inline reactions.

   AGENTS.md compliance:
     * No --accent hardcodes — uses var(--accent) / rgba(var(--accent-rgb), …).
     * Like / dislike are explicitly bright green / bright red per request,
       NOT the site accent. They use their own colour vars defined here so
       the rest of the site keeps the teal accent.
     * No animation-duration / transition-duration on a universal selector;
       Mac and Windows must run identical animations.
     * Mobile (≤ 932px): popups become full-bleed sheets, all tap targets
       ≥ 44×44.
   ===================================================================== */

/* ---------- 0. Vote colours ---------- */
:root {
  --vote-up:           #22c55e;            /* bright green */
  --vote-up-rgb:       34, 197, 94;
  --vote-up-soft:      rgba(34, 197, 94, 0.18);
  --vote-up-border:    rgba(34, 197, 94, 0.55);
  --vote-up-glow:      rgba(34, 197, 94, 0.45);

  --vote-down:         #ef4444;            /* bright red */
  --vote-down-rgb:     239, 68, 68;
  --vote-down-soft:    rgba(239, 68, 68, 0.18);
  --vote-down-border:  rgba(239, 68, 68, 0.55);
  --vote-down-glow:    rgba(239, 68, 68, 0.45);
}

/* ---------- 1. On-tile triggers (FAQ + Comments) ----------
   Lives in normal flow at the bottom of `.card-meta` (NOT
   absolute-positioned) so it can never overlap the card text /
   stats / badges above it. Strictly minimal: white icon /
   label + plain white number. No backgrounds, no borders, no
   hover fills, no count-badge fills. They remain fully
   clickable when their count is 0; the popup just renders an
   empty-state message. */

.cdm-tile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;                            /* generous gap since there's no chip outline */
  /* `margin-top: auto` pins the action row to the bottom of the
     `.card-meta` flex column. Cards in the same grid row already
     stretch to the row's tallest height (via .card-meta {flex:1}),
     and any leftover vertical space inside the meta panel now lands
     ABOVE the action row instead of below it — eliminating the
     uneven "gap below actions / before bottom border" the user saw
     across reprints with different amounts of badge content. */
  margin-top: auto;
  padding-top: 10px;                    /* keeps a comfortable separation from the content above */
}

.cdm-tile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;                           /* no pill padding */
  border: 0;
  background: transparent;
  font: 700 12px/1 "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 28px;
}
/* No hover fill or active fill — keep the look static. */
.cdm-tile-btn:hover,
.cdm-tile-btn:focus-visible,
.cdm-tile-btn:active {
  background: transparent;
}
.cdm-tile-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}
.cdm-tile-btn .cdm-tile-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.cdm-tile-btn .cdm-tile-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
.cdm-tile-btn .cdm-tile-count {
  /* Plain white number, no badge fill. tabular-nums keeps every digit
     the same width so the flip-clock slide animation never reflows the
     surrounding row when the count gains or loses a digit. */
  background: transparent;
  color: #ffffff;
  padding: 0;
  font: 700 12px/1 "Open Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  min-width: 1ch;
  line-height: 1;
}
.cdm-tile-btn[data-empty="1"] .cdm-tile-count {
  color: rgba(255, 255, 255, 0.55);     /* dim when 0, but never coloured fill */
}

/* ---------- 2. Inline like/dislike — same row as card title ---------- */

.cdm-name-row {
  display: flex;
  align-items: center;          /* shared baseline (AGENTS.md hard rule) */
  gap: 8px;
  min-width: 0;
}
.cdm-name-row > .name {
  flex: 1 1 auto;
  min-width: 0;
}
.cdm-inline-rx {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Inline like / dislike — just coloured arrow + number, no chip
   styling. Idle = colour at full saturation (so the user instantly
   sees the green/red). Hover/active brighten + add a soft glow on
   the glyph itself. No background, no border. */
.cdm-rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;                 /* keeps a comfortable click target without showing as a chip */
  border: 0;
  background: transparent;
  border-radius: 4px;
  font: 700 13px/1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  min-height: 26px;
  -webkit-tap-highlight-color: transparent;
  transition: filter 140ms ease, transform 140ms ease;
}
/* Disabled in popup contexts (per-comment vote on a deleted comment, etc.). */
.cdm-rx-btn[disabled]:not(.cdm-rx-readonly) { cursor: not-allowed; opacity: 0.85; }

/* Read-only state for logged-out viewers on card tiles: full-colour
   ▲/▼ + number, but explicitly NOT a button — no hover effect, no
   pointer cursor, no glow. The user can see who liked/disliked but
   cannot click. Sign-in is required and is offered by the rest of
   the site (sidebar, sign-in CTA). */
.cdm-rx-btn.cdm-rx-readonly,
.cdm-rx-btn.cdm-rx-readonly:hover,
.cdm-rx-btn.cdm-rx-readonly:focus-visible,
.cdm-rx-btn.cdm-rx-readonly:active {
  cursor: default;
  filter: none;
  outline: none;
  background: transparent;
}
.cdm-rx-btn .cdm-rx-icon  { font-size: 13px; line-height: 1; }
.cdm-rx-btn .cdm-rx-count { font-variant-numeric: tabular-nums; min-width: 1ch; }

/* Idle: arrow + number wear the vote colour. Number inherits color
   from the parent button so we keep the markup clean. */
.cdm-rx-up   { color: var(--vote-up); }
.cdm-rx-down { color: var(--vote-down); }

/* Hover: brighter + a subtle glow on the glyph itself, no background
   change. */
.cdm-rx-btn:hover {
  filter: brightness(1.2)
          drop-shadow(0 0 4px color-mix(in srgb, currentColor 60%, transparent));
}
/* Fallback for browsers without color-mix(): use the precomputed soft
   variants so we still get a glow. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .cdm-rx-up:hover   { filter: brightness(1.2) drop-shadow(0 0 4px var(--vote-up-glow)); }
  .cdm-rx-down:hover { filter: brightness(1.2) drop-shadow(0 0 4px var(--vote-down-glow)); }
}

/* Active vote — bolder colour, stronger glow, no fill. */
.cdm-rx-btn.cdm-rx-active {
  filter: brightness(1.35)
          drop-shadow(0 0 6px color-mix(in srgb, currentColor 75%, transparent));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .cdm-rx-up.cdm-rx-active   { filter: brightness(1.35) drop-shadow(0 0 6px var(--vote-up-glow)); }
  .cdm-rx-down.cdm-rx-active { filter: brightness(1.35) drop-shadow(0 0 6px var(--vote-down-glow)); }
}

/* Keyboard focus — a subtle outline since there's no border to lean on. */
.cdm-rx-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- 3. Popup shell ---------- */

.cdm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9000;
  background: rgba(8, 12, 16, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cdm-overlay { background: rgba(8, 12, 16, 0.78); }
}
.cdm-overlay.cdm-open {
  opacity: 1;
  pointer-events: auto;
}

.cdm-panel {
  position: relative;
  width: min(680px, calc(100% - 24px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 200ms ease;
}
.cdm-overlay.cdm-open .cdm-panel { transform: translateY(0); }

.cdm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.04),
              rgba(255, 255, 255, 0));
}
.cdm-header-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.22);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.cdm-title-block {
  flex: 1 1 auto;
  min-width: 0;
}
.cdm-eyebrow {
  font: 700 11px/1 "Open Sans", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.95);
  margin-bottom: 2px;
}
.cdm-title {
  font: 700 16px/1.25 "Open Sans", system-ui, sans-serif;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.cdm-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 12, 16, 0.45);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cdm-close:hover,
.cdm-close:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 10px rgba(var(--accent-rgb), 0.3);
  outline: none;
}

.cdm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 20px;
}

.cdm-empty {
  color: rgba(255, 255, 255, 0.65);
  font: 400 13.5px/1.55 "Open Sans", system-ui, sans-serif;
  padding: 18px 4px;
  text-align: center;
}

/* ---------- 4. FAQs popup body ---------- */

.cdm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cdm-faq-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.cdm-faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 600 13.5px/1.45 "Open Sans", system-ui, sans-serif;
  color: #ffffff;
  user-select: none;
}
.cdm-faq-summary::-webkit-details-marker { display: none; }
.cdm-faq-summary::before {
  content: "Q";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.25);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 "Open Sans", system-ui, sans-serif;
  color: #ffffff;
}
.cdm-faq-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 180ms ease;
}
.cdm-faq-item[open] .cdm-faq-chevron { transform: rotate(180deg); }
.cdm-faq-answer {
  padding: 0 14px 14px;
  font: 400 13.5px/1.55 "Open Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cdm-faq-answer::before {
  content: "A";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font: 700 12px/1 "Open Sans", system-ui, sans-serif;
  vertical-align: top;
  color: #ffffff;
}
.cdm-faq-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
  font: 400 11.5px/1.3 "Open Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}
.cdm-faq-source {
  color: rgba(var(--accent-rgb), 0.95);
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--accent-rgb), 0.6);
}
.cdm-faq-source:hover { color: #ffffff; }

/* Ask-a-question CTA row, pinned above the FAQ list. */
.cdm-ask-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Status chips on FAQ entries (Community / Pending review). */
.cdm-faq-chip {
  flex: 0 0 auto;
  font: 700 10px/1 "Open Sans", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  margin-left: 8px;
}
.cdm-faq-chip-community {
  background: rgba(var(--accent-rgb), 0.22);
  color: #ffffff;
}
.cdm-faq-chip-pending {
  background: rgba(255, 184, 77, 0.20);
  color: #ffd58a;
}

/* Pending entries get a soft amber accent to distinguish them. */
.cdm-faq-item.cdm-faq-pending {
  background: rgba(255, 184, 77, 0.05);
}
.cdm-faq-item.cdm-faq-pending .cdm-faq-summary::before {
  content: "?";
  background: rgba(255, 184, 77, 0.22);
  border-color: rgba(255, 184, 77, 0.5);
}
.cdm-faq-answer-pending {
  color: rgba(255, 213, 138, 0.9);
}

/* ---------- 5. Comments popup body ---------- */

.cdm-composer { margin-bottom: 14px; }
.cdm-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 16, 0.5);
  color: #ffffff;
  font: 400 14px/1.45 "Open Sans", system-ui, sans-serif;
}
.cdm-textarea:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}
.cdm-composer-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.cdm-composer-hint {
  font: 400 11.5px/1.3 "Open Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.55);
  flex: 1 1 220px;
  min-width: 0;
}
.cdm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font: 600 13px/1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  min-height: 36px;
}
.cdm-btn:hover,
.cdm-btn:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.55);
  outline: none;
}
.cdm-btn-primary {
  background: var(--accent-soft, rgba(var(--accent-rgb), 0.22));
  border-color: var(--accent-border, rgba(var(--accent-rgb), 0.55));
}
.cdm-btn-primary:hover,
.cdm-btn-primary:focus-visible {
  box-shadow: 0 0 0 2px var(--accent),
              0 0 12px var(--accent-glow, rgba(var(--accent-rgb), 0.4));
}
.cdm-btn[disabled],
.cdm-btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.cdm-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.cdm-signin-callout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.85);
  font: 500 13px/1.45 "Open Sans", system-ui, sans-serif;
  margin-bottom: 14px;
}
.cdm-signin-callout > span { flex: 1 1 200px; min-width: 0; }

.cdm-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cdm-comment {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cdm-comment.cdm-comment-deleted {
  background: rgba(255, 255, 255, 0.015);
  color: rgba(255, 255, 255, 0.5);
}
.cdm-comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.cdm-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.25);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 "Open Sans", system-ui, sans-serif;
}
.cdm-comment-name {
  font: 700 13px/1.2 "Open Sans", system-ui, sans-serif;
  color: #ffffff;
  overflow-wrap: anywhere;
  min-width: 0;
}
.cdm-comment-date {
  font: 400 11.5px/1.3 "Open Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.cdm-comment-edited {
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11.5px;
}
.cdm-comment-body {
  font: 400 14px/1.55 "Open Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Author-only banner: rendered when the viewer is the comment's author
   AND the moderator has hidden it. Tells them their post is invisible
   to everyone else until a mod approves it. Amber to match the
   "needs review" colour used elsewhere (faq pending chip). */
.cdm-comment-pending {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 184, 77, 0.10);
  border: 1px solid rgba(255, 184, 77, 0.35);
  color: #ffd58a;
  font: 500 12.5px/1.45 "Open Sans", system-ui, sans-serif;
}
.cdm-comment-pending-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 184, 77, 0.25);
  border: 1px solid rgba(255, 184, 77, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 "Open Sans", system-ui, sans-serif;
  color: #ffd58a;
}
.cdm-comment-pending strong { color: #ffe5b3; }
.cdm-comment-pending-link {
  color: #ffe5b3;
  text-decoration: underline;
  text-decoration-color: rgba(255, 229, 179, 0.55);
  text-underline-offset: 2px;
}
.cdm-comment-pending-link:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}
.cdm-comment-body p { margin: 0 0 8px; }
.cdm-comment-body p:last-child { margin-bottom: 0; }
.cdm-comment-body code {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cdm-comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
/* Per-comment up/down vote buttons reuse the bright green / red palette */
.cdm-comment-actions .cdm-rx-btn { padding: 4px 10px; min-height: 30px; font-size: 12px; }
.cdm-link-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font: 500 12px/1 "Open Sans", system-ui, sans-serif;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 30px;
}
.cdm-link-btn:hover,
.cdm-link-btn:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
  outline: none;
}

.cdm-replies {
  margin-top: 6px;
  margin-left: 22px;
  padding-left: 14px;
  border-left: 1px solid rgba(var(--accent-rgb), 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cdm-reply-composer { margin-top: 8px; }

/* Toast — DELETED.
   The modal-internal `.cdm-toast` pill (bottom-centre, scoped inside
   the cdm-panel) used a different visual recipe than every other
   notification on the site. AGENTS.md ("Toast / notification
   canonical recipe") permanently bans per-feature toast variants.
   showToast() in card-detail-modal.js now delegates to
   window.showNotification (canonical site-wide bottom-centre glass
   pill, z=9999, painted above the modal overlay at z=9000) so the
   user sees the same toast they see everywhere else. */

/* ---------- 6. Mobile (≤ 932px) ---------- */
@media (max-width: 932px) {
  .cdm-overlay { padding: 0; }
  .cdm-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0 !important;
  }
  .cdm-body { padding: 14px 14px 22px; }
  .cdm-textarea { font-size: 16px; }   /* prevents iOS zoom on focus */

  .cdm-tile-actions { gap: 18px; margin-top: 8px; }
  .cdm-tile-btn {
    padding: 6px 4px;                    /* widens hit area without showing a chip */
    min-height: 44px;                    /* AGENTS.md hard rule */
  }
  .cdm-rx-btn  { min-height: 36px; padding: 6px 10px; }
  .cdm-btn,
  .cdm-close   { min-height: 44px; }
  .cdm-link-btn { min-height: 36px; padding: 8px 10px; }

  /* Stack the title above the inline reactions on narrow phones so a
     long card name never collides with the vote pills. AGENTS.md
     requires title to flex 1 1 100% and actions to drop below. */
  .cdm-name-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .cdm-name-row > .name { flex: 1 1 100%; }
  .cdm-inline-rx { flex: 0 0 auto; }

  .cdm-card-notes { margin: 8px 0; }
  .cdm-notes-block { padding: 8px 10px; }
  .cdm-notes-entry { font-size: 12px; line-height: 1.45; }
}

/* ---------- 7. Inline errata / taboo on the card tile ---------- */

/* The notes container is INSIDE `.card-meta`, between the card text/badges
   and the FAQ/Comments action row. Two stackable blocks live inside it:
   `.cdm-notes-errata` and `.cdm-notes-taboo`. Both follow the canonical
   glass treatment so they sit cleanly on any background. */

.cdm-card-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
  width: 100%;
  min-width: 0;
}

.cdm-notes-block {
  background: rgba(17, 26, 34, 0.18);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  color: #ffffff;
  min-width: 0;
}

@supports not (backdrop-filter: blur(1px)) {
  .cdm-notes-block { background: rgba(17, 26, 34, 0.62); }
}

/* A subtle left accent stripe keeps the two block types distinguishable
   even with the same glass base. Errata uses the site accent; taboos use
   a warm gold so a "your deck is technically still legal" change stands
   out at a glance. */
.cdm-notes-errata { border-left: 3px solid var(--accent-border, rgba(37, 128, 117, 0.6)); }
.cdm-notes-taboo  { border-left: 3px solid rgba(212, 175, 55, 0.55); }

/* `<summary>` is a flex row with the kind label, an entry-count pill,
   and a chevron. The whole summary is the click/keyboard target so a
   user can hit Enter/Space to expand. We hide the default disclosure
   marker (cross-browser) and use our own ▾ that rotates 180° when open. */
.cdm-notes-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  min-height: 28px;
}
.cdm-notes-head::-webkit-details-marker { display: none; }
.cdm-notes-head::marker { content: ''; }
.cdm-notes-head:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

.cdm-notes-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.cdm-notes-taboo .cdm-notes-label  { color: rgba(220, 200, 130, 0.85); }
.cdm-notes-errata .cdm-notes-label { color: rgba(180, 220, 215, 0.9); }

/* Tiny count pill so users know how many entries are behind the toggle. */
.cdm-notes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  font: 700 10px/1 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.cdm-notes-taboo  .cdm-notes-count { background: rgba(212, 175, 55, 0.20); color: rgba(245, 230, 170, 0.95); }
.cdm-notes-errata .cdm-notes-count { background: rgba(var(--accent-rgb, 37, 128, 117), 0.22); color: #fff; }

.cdm-notes-chevron {
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease;
}
.cdm-notes-block[open] .cdm-notes-chevron { transform: rotate(180deg); }

/* Reveal animation. Native <details> snaps open; a small fade keeps the
   transition gentle on weaker hardware. We deliberately do NOT animate
   height — that flickers on Safari and FAQs.md warns against universal
   duration clamps. */
.cdm-notes-body {
  padding-top: 6px;
  animation: cdmNotesIn 0.18s ease both;
}
@keyframes cdmNotesIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cdm-notes-body { animation: none; }
  .cdm-notes-chevron { transition: none; }
}

.cdm-notes-entry {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  padding: 3px 0;
  overflow-wrap: anywhere;          /* long card names never break the tile */
  word-break: break-word;
  min-width: 0;
}
.cdm-notes-entry + .cdm-notes-entry {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  padding-top: 6px;
}

/* Inline pills */
.cdm-notes-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 1px 6px;
  margin: 0 4px 1px 0;
  border-radius: 4px;
  letter-spacing: 0.25px;
  vertical-align: 1px;
  white-space: nowrap;
}
.cdm-notes-pill-ver {
  background: rgba(var(--accent-rgb, 37, 128, 117), 0.20);
  border: 1px solid var(--accent-border, rgba(37, 128, 117, 0.45));
  color: #ffffff;
}
.cdm-notes-pill-ref {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
}
.cdm-notes-pill-cat {
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: rgba(245, 230, 170, 0.95);
}