/* Readable, viewport-sized panels for the standalone V3 hero profile. */
.at-prototype.sanctuary {
  --san-body: clamp(1rem, .65rem + .4vw, 1.5rem);
  --san-label: clamp(.8125rem, .5rem + .35vw, 1.125rem);
  --san-control: clamp(.9375rem, .6rem + .35vw, 1.25rem);
  --san-heading: clamp(1.375rem, .9rem + .7vw, 2.25rem);
  --san-padding: clamp(14px, 1.6vw, 40px);
  --san-gutter-x: clamp(12px, 4vw, 160px);
  --san-gutter-y: clamp(8px, 3dvh, 64px);
}

.at-prototype.sanctuary #sanctuary-drawer {
  inset: var(--san-gutter-y) var(--san-gutter-x);
  transform: none;
  width: auto;
  height: auto;
  max-width: 2400px;
  max-height: none;
  margin-inline: auto;
  padding: 0 var(--san-padding);
  container: sanctuary-panel / inline-size;
  --at-text: #e5edf3;
  --at-muted: #bdcbd7;
  --c-text: var(--at-text);
  --c-text-dim: var(--at-muted);
  --at-padding: var(--san-padding);
  --at-gap: clamp(16px, 1.4vw, 32px);
  font-size: var(--san-body);
  color: var(--at-text);
}

.sanctuary #sanctuary-drawer .sanctuary-modal-top {
  min-height: clamp(64px, 8dvh, 112px);
  gap: clamp(10px, 1.2vw, 28px);
  padding-block: 10px;
}
.sanctuary #sanctuary-drawer #sanctuary-modal-emblem {
  width: clamp(36px, 3vw, 68px);
  height: clamp(36px, 3vw, 68px);
}
.sanctuary #sanctuary-drawer .sanctuary-modal-identity { min-width: 0; }
.sanctuary #sanctuary-drawer .sanctuary-modal-identity span {
  font-size: var(--san-label);
  color: #bdcbd7;
  letter-spacing: .08em;
}
.sanctuary #sanctuary-drawer .sanctuary-modal-identity strong {
  font-size: var(--san-heading);
  overflow-wrap: anywhere;
}
.sanctuary #sanctuary-drawer .sanctuary-close {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  font-size: 20px;
}
.at-prototype.sanctuary #sanctuary-drawer #codex-tabs {
  height: auto;
  min-height: 52px;
  flex-shrink: 0;
}
.at-prototype.sanctuary #sanctuary-drawer #codex-tabs .codex-tab-btn {
  min-height: 48px;
  padding: 12px 18px;
  font-size: var(--san-control);
  color: #cbd7e1;
  letter-spacing: .025em;
}
.sanctuary #sanctuary-drawer #at-content {
  min-width: 0;
  min-height: 0;
  padding: var(--san-padding) 2px;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  line-height: 1.75;
}

/* Override tiny legacy component text only inside this profile's chamber. */
.sanctuary #sanctuary-drawer #at-content :is(
  p, li, dd, dt, td, th, label, .gc-bio-text, .gc-passive-box-desc,
  .gc-ability-desc, .ability-desc, .ability-description-summary,
  .ability-progression-copy, .ability-progression-name, .ability-fx-label,
  .ability-fx-value, .codex-spell-info, .codex-item-copy strong,
  .strategy-team-hero strong, .strategy-hero-card-copy strong,
  .strategy-counter-pick span, .hm-mission-desc, .hm-story-excerpt,
  .ch-result b, .ch-kda b, .ch-detail-metrics b
) {
  font-size: var(--san-body);
  line-height: 1.7;
  color: #dce6ee;
  overflow-wrap: anywhere;
}
.sanctuary #sanctuary-drawer #at-content :is(
  small, figcaption, .ability-kind, .ability-fx-header, .ability-fx-target,
  .ability-fx-dur, .ability-icon-hint, .ability-progression-label,
  .at-panel-heading span, .cov-panel-kicker, .skin-card-overline,
  .skin-tier-badge, .skin-card-owned-badge, .skin-card-zoom-cue,
  .gc-stat-label, .gc-ability-mana, .codex-stat-label, .hm-eyebrow,
  .hm-mission-kicker, .hm-mission-state, .hm-mission-claimed-label,
  .hm-progress-caption, .hm-next-level, .hm-path-copy strong,
  .hm-section-kicker, .hm-section-count, .hm-hero-name, .hm-points-label,
  .ch-result time, .ch-result>span, .ch-rounds span, .ch-kda span,
  .ch-detail-metrics span, .ch-legend, .ch-pagination, .ch-footer
) {
  font-size: var(--san-label);
  line-height: 1.5;
  letter-spacing: .025em;
  color: #bdcbd7;
  overflow-wrap: anywhere;
}
.sanctuary #sanctuary-drawer #at-content :is(
  h2, h3, .skin-card-label, .gc-stat-value, .hm-section-title
) { font-size: var(--san-heading); line-height: 1.35; }
.sanctuary #sanctuary-drawer #at-content :is(h4, .gc-ability-name, .gc-passive-box-name, .hm-mission-title) {
  font-size: var(--san-body);
  line-height: 1.5;
  color: #f0e5ce;
}
.sanctuary #sanctuary-drawer #at-content :is(
  .at-button, .at-text-button, .ability-vfx-preview-btn, .ability-mana-tag,
  .hm-tab, .hm-mission-claim-btn, .hm-relic-upgrade-btn, select, input
) { font-size: var(--san-control); min-height: 44px; }
.sanctuary #sanctuary-drawer #at-content :is(button, a, summary) { touch-action: manipulation; }
.sanctuary #sanctuary-drawer #at-content :is(.at-story .gc-bio-text, .gc-ability-desc) {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Ability names and descriptions keep enough width even on smaller panels. */
.at-prototype.sanctuary #sanctuary-drawer #at-ability-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 12px;
  overflow: visible;
}
.sanctuary #sanctuary-drawer #at-ability-nav button {
  min-width: 0;
  min-height: 80px;
  padding: 14px;
  gap: 12px;
}
.sanctuary #sanctuary-drawer #at-ability-nav img {
  flex-shrink: 0;
  width: clamp(40px, 2.5vw, 64px);
  height: clamp(40px, 2.5vw, 64px);
  opacity: 1;
}
.sanctuary #sanctuary-drawer #at-ability-nav strong {
  font-size: var(--san-control);
  line-height: 1.45;
  color: #e2eaf0;
  overflow-wrap: anywhere;
}
.at-prototype.sanctuary #sanctuary-drawer #codex-abilities>.ability-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 18vw, 360px);
  min-height: 0;
}
.sanctuary #sanctuary-drawer #codex-abilities .ability-info { padding: var(--san-padding); }
.sanctuary #sanctuary-drawer #codex-abilities .ability-info-head { flex-wrap: wrap; }
.sanctuary #sanctuary-drawer #codex-abilities .ability-head-actions { justify-content: flex-start; }
.sanctuary #sanctuary-drawer #codex-abilities .ability-icon {
  width: clamp(120px, 10vw, 220px);
  height: clamp(120px, 10vw, 220px);
  max-width: 100%;
}
.sanctuary #sanctuary-drawer #codex-abilities .ability-progression-step {
  grid-template-columns: minmax(11rem, 26%) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}
.sanctuary #sanctuary-drawer #codex-abilities .ability-progression::before {
  font-size: var(--san-label);
  line-height: 1.5;
  color: #c1cde0;
}
.sanctuary #sanctuary-drawer #codex-abilities .ability-progression-label {
  text-transform: none;
  color: #8de1f2;
}
.sanctuary #sanctuary-drawer #codex-abilities .ability-fx-row {
  grid-template-columns: 32px minmax(0, 1fr) minmax(100px, .7fr) minmax(65px, auto);
  padding: 14px;
}
.sanctuary #sanctuary-drawer #codex-abilities .passive-fx-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}

.sanctuary #sanctuary-drawer .at-gallery-toolbar { flex-wrap: wrap; }
.sanctuary #sanctuary-drawer .at-gallery-toolbar span { font-size: var(--san-label); color: #c5c0df; }
.sanctuary #sanctuary-drawer .at-gallery-toolbar strong { font-size: var(--san-body); color: #dce6ee; }
.at-prototype.sanctuary #sanctuary-drawer :is(.sanctuary-skin-collection, .at-showcase-grid) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 36rem), 1fr));
  gap: var(--at-gap);
}
.sanctuary #sanctuary-drawer :is(.at-showcase-grid, .sanctuary-skin-collection):empty { display: none; }
.sanctuary #sanctuary-drawer :is(.hm-path, .hm-tabs, .ch-filters) { overflow-x: auto; }
.sanctuary #sanctuary-drawer .hm-path-copy strong { white-space: normal; }
.sanctuary #sanctuary-drawer .hm-path-step { align-items: flex-start; }

/* Reflow by actual panel width, including browser zoom and split windows. */
@container sanctuary-panel (max-width: 72rem) {
  .sanctuary #sanctuary-drawer :is(.hm-content-grid, .strategy-counter-panel, .ch-layout) { grid-template-columns: minmax(0, 1fr); }
  .sanctuary #sanctuary-drawer .hm-header { flex-wrap: wrap; gap: 24px; padding: 24px; }
  .sanctuary #sanctuary-drawer .hm-header-right { flex: 1 1 300px; min-width: 0; }
  .sanctuary #sanctuary-drawer .strategy-teams .strategy-team-card { grid-template-columns: minmax(0, 1fr); }
  .sanctuary #sanctuary-drawer #codex-abilities .ability-progression-step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@container sanctuary-panel (max-width: 52rem) {
  .at-prototype.sanctuary #sanctuary-drawer #codex-abilities>.ability-box { display: flex; flex-direction: column; }
  .sanctuary #sanctuary-drawer #codex-abilities .ability-icon-wrapper {
    min-height: 240px;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--at-line);
    padding: 28px 20px 80px;
    justify-content: center;
  }
  .sanctuary #sanctuary-drawer #codex-abilities .ability-fx-row { grid-template-columns: 32px minmax(0, 1fr); }
  .sanctuary #sanctuary-drawer #codex-abilities :is(.ability-fx-value, .ability-fx-dur) { grid-column: 2; grid-row: auto; text-align: left; }
  .at-prototype.sanctuary #sanctuary-drawer :is(#codex-overview-left, #codex-onepager-card, .at-profile-side, .strategy-mechanic-grid, .strategy-matchup-grid, .strategy-combo-grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .sanctuary #sanctuary-drawer :is(.at-innate, .at-arsenal, .at-progress-card) { grid-column: auto; grid-row: auto; }
  .sanctuary #sanctuary-drawer :is(.hm-missions, .ch-sidebar, .csk-assets-row, .ch-detail-bottom) { grid-template-columns: minmax(0, 1fr); }
  .sanctuary #sanctuary-drawer .hm-path { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
}
@media (max-width: 600px), (max-height: 600px) {
  .at-prototype.sanctuary { --san-gutter-x: 12px; --san-gutter-y: 8px; --san-padding: 14px; }
  .sanctuary #sanctuary-drawer .sanctuary-modal-top { min-height: 60px; padding-block: 6px; }
}
@media (max-width: 600px) {
  .sanctuary #sanctuary-drawer #at-ability-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sanctuary #sanctuary-drawer #at-ability-nav button { flex-wrap: wrap; padding: 10px; }
  .sanctuary #sanctuary-drawer :is(.hm-header-left, .hm-points-row) { flex-wrap: wrap; }
}

/* Detail popups opened from the chamber share the same readable type scale. */
.at-prototype.sanctuary #ability-popup .ability-popup-window {
  width: min(1200px, calc(100vw - 2 * var(--san-gutter-x)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--san-gutter-y));
  padding: clamp(24px, 2.5vw, 48px);
}
.sanctuary #ability-popup #ability-popup-desc,
.sanctuary .hm-story-modal-content p { font-size: var(--san-body); line-height: 1.75; color: #dce6ee; }
.sanctuary #ability-popup #ability-popup-name { font-size: var(--san-heading); }
.sanctuary #sanctuary-ability-close { width: 44px; height: 44px; font-size: 18px; }
.sanctuary .hm-story-modal-card {
  width: min(1200px, calc(100vw - 2 * var(--san-gutter-x)));
  max-height: calc(100dvh - 2 * var(--san-gutter-y));
}
.sanctuary .hm-story-modal-content h2 { font-size: var(--san-heading); }
.sanctuary :is(.hm-story-modal-kicker, #hm-story-modal-req) { font-size: var(--san-label); color: #bdcbd7; }
.sanctuary :is(.csk-image-modal-caption, .at-art-dialog>div, .hm-story-modal-content) { font-size: var(--san-body); }
.sanctuary :is(.csk-image-modal-close, .hm-story-modal-close, .at-art-dialog>button) { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  .at-prototype.sanctuary #ability-popup .ability-popup-window { grid-template-columns: minmax(0, 1fr); }
}