/* /world/world.css — Full World Coverage Venue & Connections Atlas
   Mobile-first (320px/360px/390px), token-pure, 48px tap targets, content-visibility: auto */

.world-page {
  background: var(--ink);
  color: var(--cream);
  overflow-x: clip;
}

.world-main {
  padding-top: var(--s-5);
  padding-bottom: var(--s-7);
  display: grid;
  gap: var(--s-5);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter-l) var(--gutter-r);
}

.world-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.world-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.45rem 0.85rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-small);
}

.world-subnav a:hover,
.world-subnav a:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.world-hero {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-card);
  padding: clamp(1.1rem, 3vw, 2rem);
  display: grid;
  gap: var(--s-4);
}

.world-kicker {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.world-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  line-height: 1.08;
  margin: 0;
  color: var(--cream);
}

.world-lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cream-2);
  max-width: var(--measure);
  margin: 0;
}

.world-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.world-stat {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0.85rem 1rem;
  min-width: 0;
}

.world-stat strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  color: var(--gold);
  line-height: 1.1;
}

.world-stat span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--cream-2);
}

.world-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}

@media (min-width: 720px) {
  .world-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.world-tab {
  min-height: var(--target);
  padding: 0.65rem 1rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--cream);
  font-family: var(--body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.world-tab[aria-selected="true"] {
  border-color: var(--gold);
  background: var(--ink);
  color: var(--gold);
}

.world-tab-badge {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--cream-2);
  white-space: nowrap;
}

.world-controls {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(0.9rem, 2.5vw, 1.35rem);
  display: grid;
  gap: var(--s-3);
}

.world-control-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 680px) {
  .world-control-row {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.world-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.world-field label {
  font-size: 0.88rem;
  color: var(--cream-2);
  font-weight: 600;
}

.world-field input,
.world-field select {
  min-height: var(--target);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-family: var(--body);
  font-size: 1rem;
}

.world-field input:focus-visible,
.world-field select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.world-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.world-pill {
  min-height: var(--target);
  padding: 0.45rem 0.85rem;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-size: 0.88rem;
  cursor: pointer;
}

.world-pill[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

.world-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.world-status {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--cream-2);
}

.world-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.world-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.world-btn.primary {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

.world-btn:hover,
.world-btn:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.world-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .world-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .world-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.world-card {
  content-visibility: auto;
  contain-intrinsic-size: 240px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1rem;
  display: grid;
  gap: var(--s-3);
  align-content: space-between;
  min-width: 0;
  overflow-wrap: anywhere;
}

.world-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.world-card-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--cream);
}

.world-chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--gold);
  background: var(--ink);
  white-space: nowrap;
}

.world-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cream-2);
  line-height: 1.45;
}

.world-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

@media (max-width: 380px) {
  .world-actions {
    grid-template-columns: 1fr;
  }
}

.world-more-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  padding-top: var(--s-3);
}

.world-noscript {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1rem;
  display: grid;
  gap: var(--s-3);
}

.world-noscript-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.world-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  margin-top: var(--s-5);
}

.world-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}