/* Card detail owns its layout here. Keep identity tracks distinct at every width. */
#card-modal .modal-dialog { max-width: 880px; padding: 18px 24px 22px; }
#card-modal .modal-header-bar { min-height: 36px; gap: 16px; margin-bottom: 14px; padding-bottom: 12px; }
#card-modal .modal-header-scope { line-height: 1.45; }
#card-modal .modal-header-scope .modal-spine-line { white-space: normal; overflow-wrap: anywhere; }
#card-modal .modal-close { width: 36px; height: 36px; }
#card-modal .modal-layout { display: grid; grid-template-columns: repeat(2,minmax(0,380px)); gap: 24px; align-items: stretch; }
#card-modal .modal-card-preview { align-self: start; width: 100%; min-width: 0; margin: 0; }
#card-modal .modal-data-breakdown { display: flex; flex-direction: column; aspect-ratio: auto; height: auto; min-height: 0; gap: 8px; padding: 0; overflow: visible; }
#card-modal .modal-detail-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 0; overflow: visible; }
#card-modal .modal-detail-body > .modal-podium-stack { flex: 1 0 auto; display: grid; grid-auto-rows: minmax(min-content,1fr); gap: 10px; min-height: 0; }
#card-modal .podium-card,
#card-modal .modal-detail-body.has-vote-block .podium-card {
  display: grid; flex: none; grid-template-columns: 48px minmax(0,1fr);
  grid-template-rows: auto auto auto minmax(48px,1fr);
  grid-template-areas: "photo rank" "photo name" "photo team" "stats stats";
  align-items: center; align-content: start; gap: 3px 12px;
  min-width: 0; min-height: 0; padding: 12px; border-radius: 16px;
  overflow: visible; transform: none; isolation: isolate;
}
#card-modal .podium-card:hover { transform: none; }
#card-modal .podium-rank-badge,
#card-modal .modal-detail-body.has-vote-block .podium-rank-badge {
  grid-area: rank; display: inline-flex; flex-direction: row;
  justify-self: start; align-self: center; align-items: center;
  width: auto; max-width: 100%; height: auto; min-height: 20px;
  margin: 0; padding: 2px 7px; border-radius: 6px;
  font-size: 10px; line-height: 1.3; letter-spacing: .03em;
}
#card-modal .podium-rank-badge .rank-inner { display: inline-flex; flex-direction: row; gap: 5px; white-space: normal; }
#card-modal .podium-rank-badge .rank-text { writing-mode: horizontal-tb; transform: none; }
#card-modal .podium-rank-badge .rank-medal { font-size: 12px; }
#card-modal .podium-avatar-wrapper,
#card-modal .modal-detail-body.has-vote-block .podium-avatar-wrapper { grid-area: photo; align-self: center; justify-self: start; width: 48px; height: 48px; margin: 0; }
#card-modal .podium-avatar-img { box-sizing: border-box; box-shadow: 0 0 0 3px rgb(var(--pc-accent) / .1); }
#card-modal .podium-player-name,
#card-modal .modal-detail-body.has-vote-block .podium-player-name {
  grid-area: name; align-self: center; justify-self: stretch;
  min-width: 0; max-width: 100%; margin: 1px 0 0; padding: 0;
  display: block; font-size: 17px; line-height: 1.2; font-weight: 800;
  white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip;
  -webkit-line-clamp: unset; line-clamp: unset;
}
#card-modal .podium-team-line,
#card-modal .modal-detail-body.has-vote-block .podium-team-line {
  grid-area: team; display: flex; align-items: center; justify-self: stretch;
  min-width: 0; max-width: 100%; gap: 5px; margin: 0;
  font-size: 12px; line-height: 1.35;
}
#card-modal .podium-team-logo { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
#card-modal .podium-team-name { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#card-modal .podium-stats-grid,
#card-modal .modal-detail-body.has-vote-block .podium-stats-grid {
  grid-area: stats; display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  align-self: stretch; align-items: stretch; min-width: 0; min-height: 48px;
  width: 100%; gap: 6px; margin: 7px 0 0;
}
#card-modal .podium-stats-grid.cols-1 { grid-template-columns: minmax(0,1fr); }
#card-modal .podium-stats-grid.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
#card-modal .podium-stat-box,
#card-modal .modal-detail-body.has-vote-block .podium-stat-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; gap: 4px; padding: 7px 5px; border-radius: 10px;
}
#card-modal .podium-stat-box .stat-number,
#card-modal .modal-detail-body.has-vote-block .podium-stat-box .stat-number {
  display: block; max-width: 100%; margin: 0; font-size: 19px; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal;
}
#card-modal .podium-stat-box .stat-title,
#card-modal .modal-detail-body.has-vote-block .podium-stat-box .stat-title {
  display: block; min-height: 0; margin: 0; font-size: 10px; line-height: 1.3;
  letter-spacing: 0; white-space: normal; overflow-wrap: anywhere;
}
#card-modal .modal-detail-body .cm-vote-block { flex: 0 0 auto; gap: 8px; padding: 12px; }
#card-modal .cm-vote-btns { gap: 8px; }
#card-modal .modal-detail-body .cm-vote-btn { min-height: 36px; padding: 7px 8px; line-height: 1.25; white-space: normal; text-wrap: balance; }
#card-modal .cm-vote-summaries { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#card-modal .cm-result-text { line-height: 1.4; overflow-wrap: anywhere; }
#card-modal .cm-vote-msg:empty { display: none; }
#card-modal .modal-share-footer { flex: 0 0 auto; margin: 0; padding: 0; border: 0; width: 100%; }
#card-modal .modal-viral-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
#card-modal .modal-image-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; min-width: 0; }
#card-modal .modal-action-btn,
#card-modal .modal-viral-actions .modal-action-btn.icon-only { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 9px 7px; line-height: 1.25; text-align: center; }
#card-modal .modal-action-btn svg { flex-shrink: 0; }
#card-modal .modal-action-btn.cm-card-pack { white-space: normal; text-wrap: balance; font-size: 13px; }
#card-modal .modal-action-btn:focus-visible { outline: 2px solid var(--text-main); outline-offset: 2px; }
/* With voting visible, use a compact identity header instead of clipping the column. */
@media (min-width: 820px) {
  #card-modal .modal-detail-body.has-vote-block { gap: 6px; }
  #card-modal .modal-detail-body.has-vote-block .podium-card {
    grid-template-columns: 44px minmax(0,1fr) auto;
    grid-template-rows: auto auto minmax(48px,1fr);
    grid-template-areas: "photo name rank" "photo team team" "stats stats stats";
    gap: 3px 10px; padding: 10px;
  }
  #card-modal .modal-detail-body.has-vote-block .podium-rank-badge { justify-self: end; align-self: start; }
  #card-modal .modal-detail-body.has-vote-block .podium-avatar-wrapper { width: 44px; height: 44px; }
  #card-modal .modal-detail-body.has-vote-block .podium-player-name { margin: 0; font-size: 16px; }
  #card-modal .modal-detail-body.has-vote-block .podium-stats-grid { margin-top: 5px; }
  #card-modal .modal-detail-body.has-vote-block .podium-stat-box { gap: 3px; padding: 5px 4px; }
  #card-modal .modal-detail-body.has-vote-block .podium-stat-box .stat-number { font-size: 18px; }
  #card-modal .modal-detail-body.has-vote-block .podium-stat-box .stat-title { font-size: 9px; line-height: 1.25; }
  #card-modal .modal-detail-body .cm-vote-block { padding: 10px; }
}
@media (max-width: 819px) {
  #card-modal .modal-dialog { padding: 14px 14px max(18px,env(safe-area-inset-bottom,0px)); max-height: calc(100dvh - 24px); }
  #card-modal .modal-header-bar { margin-bottom: 14px; gap: 10px; }
  #card-modal .modal-header-scope { font-size: 11px; letter-spacing: .02em; }
  #card-modal .modal-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  #card-modal .modal-card-preview { max-width: 360px; justify-self: center; }
  #card-modal .modal-data-breakdown { width: 100%; max-width: 420px; margin-inline: auto; gap: 12px; }
  #card-modal .modal-detail-body,
  #card-modal .modal-detail-body > .modal-podium-stack { flex: none; }
  #card-modal .podium-card,
  #card-modal .modal-detail-body.has-vote-block .podium-card { grid-template-rows: auto auto auto minmax(48px,auto); }
}
@media (max-width: 380px) {
  #card-modal .modal-dialog { padding-inline: 12px; }
  #card-modal .podium-card,
  #card-modal .modal-detail-body.has-vote-block .podium-card { grid-template-columns: 44px minmax(0,1fr); gap: 3px 10px; padding: 11px; }
  #card-modal .podium-avatar-wrapper,
  #card-modal .modal-detail-body.has-vote-block .podium-avatar-wrapper { width: 44px; height: 44px; }
  #card-modal .podium-player-name,
  #card-modal .modal-detail-body.has-vote-block .podium-player-name { font-size: 16px; }
  #card-modal .podium-stat-box .stat-number,
  #card-modal .modal-detail-body.has-vote-block .podium-stat-box .stat-number { font-size: 17px; }
}

/* The voting section has the same structure before and after sign-in. */
#card-modal .cm-vote-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
#card-modal .modal-detail-body .cm-vote-q { margin: 0; font-size: 13px; line-height: 1.3; }
#card-modal .modal-detail-body .cm-vote-msg { max-width: 58%; margin: 0; padding: 0; background: none; font-size: 11px; line-height: 1.3; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
#card-modal .modal-detail-body .cm-vote-btn:disabled { opacity: .65; cursor: default; }

/* Complete component visuals also support the older production shell. */
#card-modal .podium-card { --pc-accent: 203 213 225; border: 1px solid rgb(var(--pc-accent) / .38); background: linear-gradient(140deg,rgb(var(--pc-accent) / .14),rgb(var(--pc-accent) / .02) 62%),var(--bg-surface-elevated); box-shadow: none; }
#card-modal .podium-card.tier-bronze { --pc-accent: 217 119 6; }
#card-modal .podium-card.tier-roast-2 { --pc-accent: 239 68 68; }
#card-modal .podium-card.tier-roast-3 { --pc-accent: 249 115 22; }
#card-modal .podium-card:hover { border-color: rgb(var(--pc-accent) / .65); }
#card-modal .podium-avatar-wrapper { position: relative; padding: 0; }
#card-modal .podium-avatar-img { display: block; width: 100%; height: 100%; margin: 0; border: 2px solid rgb(var(--pc-accent) / .8); border-radius: 50%; object-fit: cover; background: var(--bg-surface); color: transparent; font-size: 0; }
#card-modal .podium-rank-badge { border: 1px solid rgb(var(--pc-accent) / .5); background: rgb(var(--pc-accent) / .16); color: var(--text-main); font-weight: 800; text-transform: uppercase; }
#card-modal .podium-team-line { color: var(--text-muted); font-weight: 600; }
#card-modal .podium-stat-box { border: 1px solid rgb(var(--pc-accent) / .16); background: rgb(0 0 0 / .28); text-align: center; }
#card-modal .podium-stat-box .stat-number { color: var(--text-main); font-family: var(--font-display); font-weight: 800; }
#card-modal .podium-stat-box .stat-title { color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
:root[data-theme="light"] #card-modal .podium-card { --pc-accent: 100 116 139; }
:root[data-theme="light"] #card-modal .podium-stat-box { background: rgb(255 255 255 / .65); }