/*
 * Retronia Wiki guide profile
 *
 * Shared structure for explanatory/system pages. Directory, detail and tool
 * profiles keep their own interaction contracts but reuse the global tokens.
 */

.r-wiki-page {
  --r-wiki-reading-width: 72ch;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.r-wiki-page :where(section, [id]) {
  scroll-margin-top: calc(var(--r-appbar-height) + 1rem);
}

.r-wiki-hero {
  position: relative;
  display: grid;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(227, 185, 104, 0.46);
  border-radius: var(--r-radius-lg);
  color: var(--r-on-dark-primary);
  background:
    radial-gradient(circle at 88% 8%, rgba(227, 185, 104, 0.2), transparent 22rem),
    linear-gradient(135deg, var(--r-navy-800), var(--r-navy-950));
  box-shadow: var(--r-shadow-panel);
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  align-items: end;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.r-wiki-hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--r-gold-400), transparent);
  opacity: 0.78;
}

.r-wiki-hero__copy {
  min-width: 0;
}

.r-wiki-hero__eyebrow,
.r-wiki-related__eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--r-gold-300);
  font: 800 0.68rem/1.2 var(--r-font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.r-wiki-hero__title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.8rem;
}

.r-wiki-hero__icon {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border: 1px solid rgba(227, 185, 104, 0.5);
  border-radius: 50%;
  color: var(--r-gold-300);
  background: rgba(3, 10, 19, 0.38);
  place-items: center;
  font-size: 1.15rem;
}

.r-wiki-hero h1 {
  min-width: 0;
  margin: 0;
  color: var(--r-on-dark-primary);
  font: 700 clamp(1.8rem, 4.2vw, 3rem)/1.05 var(--r-font-display);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.r-wiki-hero__copy > p {
  max-width: var(--r-wiki-reading-width);
  margin: 0.85rem 0 0;
  color: var(--r-on-dark-muted);
  font-size: clamp(0.92rem, 1.4vw, 1.03rem);
  line-height: 1.62;
}

.r-wiki-hero__facts {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: 0.55rem;
}

.r-wiki-hero__fact {
  display: grid;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.68rem 0.8rem;
  border: 1px solid rgba(227, 185, 104, 0.25);
  border-radius: var(--r-radius-sm);
  background: rgba(3, 10, 19, 0.36);
  grid-template-columns: minmax(5rem, 0.65fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.r-wiki-hero__fact dt {
  color: var(--r-on-dark-subtle);
  font: 800 0.62rem/1.25 var(--r-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.r-wiki-hero__fact dd {
  min-width: 0;
  margin: 0;
  color: var(--r-gold-300);
  font: 700 0.9rem/1.25 var(--r-font-status);
  text-align: right;
}

.r-wiki-toc {
  display: grid;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: rgba(255, 250, 240, 0.75);
  box-shadow: var(--r-shadow-card);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.r-wiki-toc__heading {
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  align-items: center;
  gap: 0.5rem;
  color: var(--r-navy-800);
  font: 800 0.7rem/1.2 var(--r-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.r-wiki-toc__heading i {
  color: var(--r-gold-600);
}

.r-wiki-toc__list {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.r-wiki-toc__link {
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--r-radius-sm);
  align-items: center;
  gap: 0.45rem;
  color: var(--r-ink) !important;
  background: rgba(221, 195, 157, 0.22);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.r-wiki-toc__link:hover,
.r-wiki-toc__link:focus-visible,
.r-wiki-toc__link[aria-current='location'] {
  border-color: rgba(185, 129, 50, 0.48);
  background: var(--r-parchment-50);
  transform: translateY(-1px);
}

.r-wiki-toc__number {
  color: var(--r-gold-600);
  font: 800 0.68rem/1 var(--r-font-status);
}

.r-wiki-page__content {
  display: grid;
  min-width: 0;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.r-wiki-section {
  margin: 0;
}

.r-wiki-section:focus {
  outline: 0;
}

.r-wiki-section:focus-visible {
  outline: 2px solid var(--r-gold-500);
  outline-offset: 3px;
}

.r-wiki-section__header {
  justify-content: flex-start;
}

.r-wiki-section__body {
  display: grid;
  min-width: 0;
  gap: 1rem;
}

.r-wiki-section__body > :where(p, ul, ol) {
  max-width: var(--r-wiki-reading-width);
  margin-top: 0;
  margin-bottom: 0;
}

.r-wiki-section__body :where(p, li) {
  line-height: 1.62;
}

.r-wiki-table-region {
  min-width: 0;
}

.r-wiki-table-region--stack .r-wiki-table {
  min-width: 0;
}

.r-wiki-table-region--scroll .r-wiki-table {
  min-width: 44rem;
}

.r-wiki-table th[scope='row'] {
  color: var(--r-navy-800);
  background: rgba(221, 195, 157, 0.42);
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
}

.r-wiki-table-hint {
  display: none;
  margin: 0;
  color: var(--r-ink-soft);
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.r-wiki-table-hint i {
  color: var(--r-gold-600);
}

.r-wiki-callout {
  display: grid;
  max-width: var(--r-wiki-reading-width);
  padding: 1rem;
  border: 1px solid var(--r-info);
  border-color: color-mix(in srgb, var(--r-info) 32%, transparent);
  border-radius: var(--r-radius-md);
  background: var(--r-info-soft);
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
}

.r-wiki-callout--warning {
  border-color: var(--r-warning);
  border-color: color-mix(in srgb, var(--r-warning) 35%, transparent);
  background: var(--r-warning-soft);
}

.r-wiki-callout--success {
  border-color: var(--r-success);
  border-color: color-mix(in srgb, var(--r-success) 32%, transparent);
  background: var(--r-success-soft);
}

.r-wiki-callout__icon {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--r-parchment-50);
  background: var(--r-info);
  place-items: center;
}

.r-wiki-callout--warning .r-wiki-callout__icon {
  background: var(--r-warning);
}

.r-wiki-callout--success .r-wiki-callout__icon {
  background: var(--r-success);
}

.r-wiki-callout h3 {
  margin: 0 0 0.25rem;
  color: var(--r-ink);
  font-size: 0.9rem;
}

.r-wiki-callout__copy > :first-child {
  margin-top: 0;
}

.r-wiki-callout__copy > :last-child {
  margin-bottom: 0;
}

.r-wiki-steps,
.r-wiki-card-grid,
.r-wiki-figure-grid,
.r-wiki-metric-grid {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
}

.r-wiki-steps {
  padding: 0;
  list-style: none;
  counter-reset: wiki-step;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.r-wiki-step {
  position: relative;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--r-shadow-card);
  counter-increment: wiki-step;
}

.r-wiki-step::before {
  content: counter(wiki-step, decimal-leading-zero);
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  color: var(--r-gold-300);
  background: var(--r-navy-800);
  place-items: center;
  font: 800 0.7rem/1 var(--r-font-status);
}

.r-wiki-step h3,
.r-wiki-card h3 {
  margin: 0 0 0.35rem;
  color: var(--r-navy-800);
  font: 700 0.98rem/1.25 var(--r-font-display);
}

.r-wiki-step p,
.r-wiki-card p {
  margin: 0;
  color: var(--r-ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.r-wiki-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.r-wiki-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: rgba(255, 255, 255, 0.54);
}

.r-wiki-card__value {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--r-gold-600);
  font: 800 clamp(1.2rem, 2vw, 1.65rem)/1 var(--r-font-status);
}

.r-wiki-figure-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-wiki-figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--r-shadow-card);
}

.r-wiki-figure__media {
  position: relative;
  display: grid;
  min-height: 12rem;
  padding: 0.75rem;
  align-items: center;
  justify-items: center;
  background:
    radial-gradient(circle at center, rgba(210, 162, 91, 0.11), transparent 65%),
    var(--r-navy-900);
}

.r-wiki-figure__media img {
  display: block;
  max-width: 100%;
  max-height: 26rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.r-wiki-figure__open {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(227, 185, 104, 0.38);
  border-radius: 50%;
  color: var(--r-gold-300);
  background: rgba(3, 10, 19, 0.82);
  place-items: center;
}

.r-wiki-figure figcaption {
  display: flex;
  min-height: 4.5rem;
  padding: 0.85rem 1rem;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--r-ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

.r-wiki-figure__number {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--r-gold-300);
  background: var(--r-navy-800);
  place-items: center;
  font: 800 0.65rem/1 var(--r-font-status);
}

.r-wiki-formula {
  display: flex;
  padding: 1rem;
  border: 1px solid rgba(185, 129, 50, 0.35);
  border-radius: var(--r-radius-md);
  color: var(--r-navy-800);
  background: var(--r-warning-soft);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font: 800 clamp(0.82rem, 1.5vw, 1rem)/1.4 var(--r-font-status);
  text-align: center;
}

.r-wiki-formula__operator {
  color: var(--r-gold-600);
  font-size: 1.2rem;
}

.r-wiki-filter {
  display: grid;
  min-width: 0;
  padding: 1rem clamp(0.85rem, 2vw, 1.35rem) 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.4rem 0.8rem;
}

.r-wiki-filter > label {
  grid-column: 1 / -1;
  color: var(--r-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.r-wiki-filter__control {
  position: relative;
  min-width: 0;
}

.r-wiki-filter__control i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  color: var(--r-gold-600);
  transform: translateY(-50%);
  pointer-events: none;
}

.r-wiki-filter__control input {
  width: 100%;
  min-height: var(--r-control-height);
  padding: 0.65rem 0.85rem 0.65rem 2.5rem;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-sm);
  box-sizing: border-box;
  color: var(--r-ink);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

.r-wiki-filter__status {
  padding-bottom: 0.75rem;
  color: var(--r-ink-soft);
  font: 700 0.74rem/1.2 var(--r-font-status);
  white-space: nowrap;
}

.r-wiki-filter-empty {
  margin: 0 1rem 1rem;
  padding: 1.3rem;
  border: 1px dashed var(--r-line);
  border-radius: var(--r-radius-md);
  color: var(--r-ink-soft);
  background: rgba(255, 255, 255, 0.38);
  text-align: center;
}

.r-wiki-filter-empty:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.r-wiki-filter-empty i {
  margin-bottom: 0.35rem;
  color: var(--r-gold-600);
  font-size: 1.25rem;
}

.r-wiki-related {
  display: grid;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(227, 185, 104, 0.32);
  border-radius: var(--r-radius-lg);
  color: var(--r-on-dark-primary);
  background: linear-gradient(135deg, var(--r-navy-800), var(--r-navy-950));
  gap: 1rem;
}

.r-wiki-related__heading h2 {
  margin: 0;
  color: var(--r-on-dark-primary);
  font: 700 1.2rem/1.2 var(--r-font-display);
}

.r-wiki-related__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.r-wiki-related__link {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 5.25rem;
  padding: 0.85rem 2.8rem 0.85rem 0.9rem;
  border: 1px solid rgba(227, 185, 104, 0.24);
  border-radius: var(--r-radius-sm);
  color: var(--r-on-dark-primary) !important;
  background: rgba(255, 255, 255, 0.04);
  align-content: center;
  gap: 0.25rem;
  text-decoration: none !important;
}

.r-wiki-related__link:hover,
.r-wiki-related__link:focus-visible {
  border-color: var(--r-gold-400);
  background: rgba(227, 185, 104, 0.1);
}

.r-wiki-related__label {
  color: var(--r-gold-300);
  font-weight: 800;
}

.r-wiki-related__description {
  color: var(--r-on-dark-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.r-wiki-related__link i {
  position: absolute;
  right: 1rem;
  top: 50%;
  color: var(--r-gold-400);
  transform: translateY(-50%);
}

/* Compatibility while the two largest guide matrices are migrated to data. */
.r-wiki-page .r-wiki-legacy-section.TableContainer {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  background: linear-gradient(180deg, var(--r-parchment-50), var(--r-parchment-100));
  box-shadow: var(--r-shadow-panel);
}

.r-wiki-page .r-wiki-legacy-section > .CaptionContainer {
  border: 0;
  background: linear-gradient(135deg, var(--r-navy-800), var(--r-navy-950));
}

.r-wiki-page .r-wiki-legacy-section > .CaptionContainer .Text {
  min-height: 4rem;
  padding: 0.9rem 1.2rem;
  color: var(--r-on-dark-primary);
  font: 700 1.15rem/1.2 var(--r-font-display);
}

.r-wiki-page .r-wiki-legacy-section > :is(.Table1, .Table2, .Table3, .Table4, .Table5) {
  width: 100%;
  border: 0;
  background: transparent;
}

.r-wiki-page .r-wiki-legacy-section .InnerTableContainer {
  max-width: 100% !important;
  padding: clamp(0.85rem, 2vw, 1.35rem);
}

.r-wiki-page .r-wiki-legacy-section .TableContentContainer {
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  box-shadow: none;
}

.r-wiki-page .r-wiki-legacy-section .TableContent {
  min-width: 36rem;
  border: 0 !important;
  border-collapse: collapse;
}

.r-wiki-page .r-wiki-legacy-section .TableContent :is(td, th) {
  height: auto;
  padding: 0.72rem 0.8rem;
  border-color: var(--r-line);
  line-height: 1.45;
}

.r-wiki-page .r-wiki-legacy-section .TableContent .LabelH,
.r-wiki-page .r-wiki-legacy-section .TableContent tr.LabelH > * {
  color: var(--r-on-dark-primary);
  background: var(--r-navy-800);
}

.r-wiki-page[data-wiki-page='rarity-system'] .rarity-container {
  display: grid;
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
}

.r-wiki-page[data-wiki-page='rarity-system'] .rarity-item {
  position: relative;
  display: flex;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 12rem;
  padding: 1rem;
  overflow: visible;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: rgba(255, 255, 255, 0.54);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.r-wiki-page[data-wiki-page='rarity-system'] .rarity-description {
  position: static;
  width: auto;
  margin-top: auto;
  padding: 0.55rem;
  border-radius: var(--r-radius-sm);
  background: rgba(221, 195, 157, 0.28);
  line-height: 1.4;
}

.r-wiki-page[data-wiki-page='rarity-system'] :is(.boxGrid, .boxGridList, .boxGridListTop) {
  width: auto;
  min-width: 0;
  height: auto;
}

.r-wiki-page[data-wiki-page='rarity-system'] .attribute-list {
  display: grid;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.r-wiki-page[data-wiki-page='rarity-system'] .attribute-column {
  display: contents;
}

.r-wiki-page[data-wiki-page='rarity-system'] .attribute-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-md);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: var(--r-shadow-card);
}

.r-wiki-page[data-wiki-page='rarity-system'] .attribute-title {
  padding: 0.65rem 0.75rem;
  color: var(--r-on-dark-primary);
  background: var(--r-navy-800);
  font-size: 0.76rem;
  line-height: 1.3;
}

.r-wiki-page[data-wiki-page='rarity-system'] .attribute-description {
  padding: 0.85rem;
}

.r-wiki-page[data-wiki-page='rarity-system'] img,
.r-wiki-page[data-wiki-page='crafting-system'] img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .r-wiki-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .r-wiki-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .r-wiki-hero__fact {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0.3rem;
  }

  .r-wiki-hero__fact dd {
    text-align: left;
  }

  .r-wiki-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-wiki-toc__heading {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .r-wiki-hero {
    padding: 1.1rem;
    border-radius: var(--r-radius-md);
  }

  .r-wiki-hero__title-row {
    align-items: flex-start;
  }

  .r-wiki-hero__icon {
    width: 2.55rem;
    height: 2.55rem;
  }

  .r-wiki-hero__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-wiki-hero__fact {
    min-height: 2.9rem;
    grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1fr);
  }

  .r-wiki-hero__fact dd {
    text-align: right;
  }

  .r-wiki-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .r-wiki-toc__link {
    width: 100%;
    box-sizing: border-box;
  }

  .r-wiki-table-hint {
    display: flex;
  }

  .r-wiki-figure-grid,
  .r-wiki-related__grid,
  .r-wiki-page[data-wiki-page='rarity-system'] .attribute-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-wiki-figure__media {
    min-height: 9rem;
  }

  .r-wiki-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-wiki-filter__status {
    padding-bottom: 0;
  }

  .r-wiki-page .r-wiki-legacy-section > .CaptionContainer .Text {
    min-height: 3.5rem;
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }

  .r-wiki-page .r-wiki-legacy-section .InnerTableContainer {
    padding: 0.75rem;
  }
}

@media (max-width: 420px) {
  .r-wiki-toc__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-wiki-hero__fact {
    grid-template-columns: minmax(0, 1fr);
  }

  .r-wiki-hero__fact dd {
    text-align: left;
  }
}