/* World index, "The Cast" (docs/DESIGN_SYSTEM.md; design/theweave/brand-study/world-b.html).
   Tokens only. Faces are the kind icon unless a portrait exists; rules separate list rows only. */
#worldPageHeader.world-view-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--weave-space-4); margin-bottom: var(--weave-space-4); padding: 0; }
#worldPageHeader.world-view-header h2 { font-weight: var(--weave-weight-semibold); }
.world-count { color: var(--weave-color-secondary); font-size: var(--weave-text-sm); }
.world-find { display: flex; align-items: center; gap: var(--weave-space-2); max-width: 40rem; min-height: 44px; padding: 0 var(--weave-space-3); border: 1px solid var(--weave-color-rule-strong); border-radius: var(--weave-radius-sm); background: var(--weave-color-paper); color: var(--weave-color-secondary); }
.world-find:focus-within { outline: 2px solid var(--weave-color-action); outline-offset: 2px; }
.world-find svg.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
#codexView .world-find input { flex: 1; min-width: 0; min-height: 42px; padding: 0; border: 0; background: transparent; color: var(--weave-color-ink); box-shadow: none; font: var(--weave-text-md) / 1 var(--weave-font-ui); outline: 0; }
#codexView .world-kinds { display: flex; flex-wrap: wrap; gap: var(--weave-space-1) var(--weave-space-5); margin: var(--weave-space-4) 0 var(--weave-space-7); padding: 0; border: 0; background: none; box-shadow: none; }
#codexView .world-kinds .filter-btn { min-height: 36px; padding: var(--weave-space-1) 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--weave-color-secondary); font: var(--weave-text-sm) / 1.2 var(--weave-font-ui); }
#codexView .world-kinds .filter-btn.active { border-bottom-color: var(--weave-color-action); color: var(--weave-color-ink); font-weight: var(--weave-weight-semibold); }
#codexView .world-kinds .filter-btn small { margin-left: 2px; color: var(--weave-color-secondary); font-weight: var(--weave-weight-regular); }

.world-index { display: grid; gap: var(--weave-space-8); }
.world-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--weave-space-4); margin-bottom: var(--weave-space-3); }
.world-block-head h3 { margin: 0; font: var(--weave-weight-semibold) var(--weave-text-xl) / var(--weave-leading-snug) var(--weave-font-display); }
.world-block-head span { color: var(--weave-color-secondary); font-size: var(--weave-text-sm); }
.world-index a { color: inherit; text-decoration: none; }
.world-index a:focus-visible { outline: 2px solid var(--weave-color-action); outline-offset: 3px; }

.world-face { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: var(--weave-radius-full); border: 1px solid var(--weave-color-rule-strong); background: var(--weave-color-paper); color: var(--weave-color-secondary); }
.world-face svg.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.world-face img { width: 100%; height: 100%; object-fit: cover; }

.world-party { display: flex; flex-wrap: wrap; gap: var(--weave-space-4) var(--weave-space-7); margin: 0; padding: 0; list-style: none; }
.world-party-entry { display: grid; grid-template-columns: 52px minmax(0, 14rem); column-gap: var(--weave-space-3); align-items: center; }
.world-party-entry .world-face { grid-row: span 2; width: 52px; height: 52px; }
.world-party-entry strong { font: var(--weave-weight-medium) var(--weave-text-lg) / var(--weave-leading-snug) var(--weave-font-display); }
.world-party-entry span:not(.world-face) { overflow: hidden; color: var(--weave-color-secondary); font-size: var(--weave-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.world-party-entry:hover strong, .world-card:hover strong, .world-chip:hover, .world-row:hover strong { color: var(--weave-color-action); }

.world-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--weave-space-5) var(--weave-space-6); }
.world-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--weave-space-3); align-items: start; }
.world-card .world-face { width: 52px; height: 52px; }
.world-card strong { display: block; font: var(--weave-weight-medium) var(--weave-text-lg) / var(--weave-leading-snug) var(--weave-font-display); }
.world-card-line { display: block; margin-top: var(--weave-space-1); font-size: var(--weave-text-sm); line-height: var(--weave-leading-ui); }
.world-card small { display: block; margin-top: var(--weave-space-1); color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }

.world-chips { display: flex; flex-wrap: wrap; gap: var(--weave-space-2); margin: 0; padding: 0; list-style: none; }
.world-chip { display: inline-flex; align-items: center; gap: var(--weave-space-2); padding: var(--weave-space-1) var(--weave-space-3) var(--weave-space-1) var(--weave-space-1); border: 1px solid var(--weave-color-rule-strong); border-radius: var(--weave-radius-full); font-size: var(--weave-text-sm); }
.world-chip .world-face { width: 28px; height: 28px; }
.world-chip .world-face svg.icon { width: 14px; height: 14px; }

.world-letter { margin: var(--weave-space-5) 0 var(--weave-space-2); font: var(--weave-weight-semibold) var(--weave-text-lg) / var(--weave-leading-snug) var(--weave-font-display); }
.world-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--weave-color-rule); }
.world-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--weave-space-4); align-items: center; padding: var(--weave-space-3) var(--weave-space-2); border-bottom: 1px solid var(--weave-color-rule); }
.world-row:hover { background: var(--weave-color-hover); }
.world-row-text strong { display: block; font: var(--weave-weight-medium) var(--weave-text-md) / var(--weave-leading-snug) var(--weave-font-display); }
.world-row-text span { display: block; overflow: hidden; color: var(--weave-color-secondary); font-size: var(--weave-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.world-row-meta { color: var(--weave-color-secondary); font-size: var(--weave-text-xs); white-space: nowrap; }
.world-row-meta em { margin-left: var(--weave-space-2); color: var(--weave-color-action); font-style: normal; font-weight: var(--weave-weight-semibold); }
.world-more { margin: var(--weave-space-3) 0 0; color: var(--weave-color-secondary); font-size: var(--weave-text-sm); }
.world-more-button { padding: 0; border: 0; background: none; color: var(--weave-color-action); font: inherit; text-decoration: underline; text-decoration-color: var(--weave-color-selected); cursor: pointer; }
.world-empty { margin: 0; color: var(--weave-color-secondary); }

@media (max-width: 1100px) {
  .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .world-cards { grid-template-columns: minmax(0, 1fr); }
  .world-row { grid-template-columns: 40px minmax(0, 1fr); }
  .world-row-meta { display: none; }
  .world-party { gap: var(--weave-space-3) var(--weave-space-5); }
}

/* World entry page: the kind face, connections listed beside the page, and the DM's record fold. */
.world-face.entity-face { width: 56px; height: 56px; }
.world-face.entity-face svg.icon { width: 24px; height: 24px; }
.entity-connections-title { margin: var(--weave-space-5) 0 var(--weave-space-2); color: var(--weave-color-action); font: var(--weave-weight-semibold) var(--weave-text-md) / var(--weave-leading-snug) var(--weave-font-display); }
.entity-connections { display: grid; gap: var(--weave-space-3); margin: 0 0 var(--weave-space-4); padding: 0; list-style: none; }
.entity-connections li { display: grid; gap: 2px; }
.entity-connections small { color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
.entity-record-facts { margin-top: var(--weave-space-7); border-top: 1px solid var(--weave-color-rule); }
.entity-record-facts > summary { padding: var(--weave-space-3) 0; color: var(--weave-color-secondary); font: var(--weave-weight-semibold) var(--weave-text-sm) / 1.4 var(--weave-font-ui); cursor: pointer; }
.entity-record-facts .entity-wiki-card { padding: var(--weave-space-3) 0; border-top: 1px solid var(--weave-color-rule); }
#worldEntitySurface .entity-record-facts .entity-wiki-card > p { font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); }

/* Published EntityArticle: calm prose with connections and evidence in the reading margin. */
#worldEntitySurface header.world-entity-header { border: 0; margin-bottom: var(--weave-space-6); padding-bottom: 0; }
#worldEntitySurface header.world-entity-header h2 { font: var(--weave-weight-semibold) var(--weave-text-3xl) / var(--weave-leading-tight) var(--weave-font-display); }
.world-article { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--weave-space-8); align-items: start; }
.world-article-story { min-width: 0; max-width: var(--weave-measure-prose); }
.world-article-summary { margin: 0 0 var(--weave-space-6); color: var(--weave-color-secondary); font: var(--weave-text-lg) / var(--weave-leading-reading) var(--weave-font-reading); }
.world-article-prose { font: var(--weave-text-lg) / var(--weave-leading-reading) var(--weave-font-reading); }
.world-article-prose p, .world-article-prose blockquote, .world-article-prose ul { margin: 0 0 var(--weave-space-5); }
.world-article-prose h2, .world-article-prose h3 { margin: var(--weave-space-7) 0 var(--weave-space-3); font: var(--weave-weight-medium) var(--weave-text-xl) / var(--weave-leading-snug) var(--weave-font-display); }
.world-article-prose > :first-child { margin-top: 0; }
.world-article-prose > p:first-of-type::first-letter { color: var(--weave-color-action); }
.world-article-prose blockquote { padding-left: var(--weave-space-5); border: 0; font-style: italic; }
.world-article-link { color: var(--weave-color-action); text-decoration: underline; text-decoration-color: var(--weave-color-spark); text-underline-offset: .12em; }
.world-article-link:focus-visible { outline: 2px solid var(--weave-color-action); outline-offset: 2px; }
.world-article-related h2, .world-source-label { margin: 0 0 var(--weave-space-3); color: var(--weave-color-action); font: var(--weave-weight-semibold) var(--weave-text-md) / var(--weave-leading-snug) var(--weave-font-display); }
.world-source-label { margin: 0; }
.world-article .has-sources { position: relative; }
.world-article .source-mark { position: absolute; top: .5em; right: calc(100% + var(--weave-space-1)); display: grid; place-items: center; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--weave-color-secondary); cursor: pointer; opacity: 0; }
.world-article .has-sources:hover .source-mark, .world-article .has-sources:focus-within .source-mark { opacity: 1; }
.world-article .source-mark:focus-visible { outline: 2px solid var(--weave-color-action); outline-offset: 2px; }
.world-article .world-source-note { position: absolute; left: auto; right: 0; max-height: 60vh; overflow-y: auto; }
.world-source-note[hidden] { display: none; }
@media (max-width: 960px) {
  .world-article { grid-template-columns: minmax(0, 1fr); gap: var(--weave-space-6); }
  .world-article .world-source-note { position: fixed; left: var(--weave-space-3); right: var(--weave-space-3); top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .world-article-prose { padding-left: var(--weave-space-5); }
  .world-article .source-mark { opacity: 1; }
}

.wiki-details { grid-column: 2; grid-row: 1; padding: var(--weave-space-5); border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); overflow-wrap: anywhere; }
.wiki-details h2 { margin: 0 0 var(--weave-space-3); color: var(--weave-color-action); font: var(--weave-weight-semibold) var(--weave-text-lg) / var(--weave-leading-snug) var(--weave-font-display); }
.wiki-details dl, .wiki-details dd { margin: 0; }
.wiki-details dt { color: var(--weave-color-secondary); display: block; }
.wiki-details dd { margin-bottom: var(--weave-space-3); }
.wiki-details h3 { margin: var(--weave-space-5) 0 var(--weave-space-3); font: var(--weave-weight-medium) var(--weave-text-md) / var(--weave-leading-snug) var(--weave-font-display); }
.wiki-details ul { list-style: none; margin: 0; padding: 0; }
.wiki-details li { margin-bottom: var(--weave-space-3); }
@media (max-width: 960px) {
  .wiki-details { grid-column: 1; grid-row: 1; }
  .world-article:has(.wiki-details) .world-article-story { grid-column: 1; grid-row: 2; }
}

/* Subject art uses plain pixels; faces remain circular, places retain a thumbnail and banner. */
.world-face.place-thumbnail { border-radius: var(--weave-radius-sm); }
.subject-portrait, .subject-banner { margin: 0 0 var(--weave-space-5); }
.subject-portrait > img { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }
.subject-portrait label { display: block; margin-top: var(--weave-space-2); }
.subject-banner > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--weave-radius-lg); }
.subject-art-controls { padding: 24px; margin-bottom: 24px; border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-lg); }
.subject-art-controls label { display: grid; gap: 8px; min-width: 0; }
.subject-art-controls input[type="file"] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.subject-art-toggle { cursor: pointer; color: var(--weave-color-action); font-size: var(--weave-text-xs); }
.subject-art-upload[open] > summary { margin-bottom: 16px; }
.subject-art-preview { display: block; max-width: 100%; max-height: 240px; object-fit: contain; margin: 8px 0; }
.subject-art-preview[hidden] { display: none; }
.cast-portrait { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }

/* World entries use authored arcs and a reference panel beside the reading column. */
.party-character-tag { letter-spacing: normal; display: inline-block; padding: var(--weave-space-1) var(--weave-space-2); font: var(--weave-text-xs) / var(--weave-leading-ui) var(--weave-font-ui); vertical-align: middle; margin-left: var(--weave-space-3); }
.party-infobox dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--weave-space-2) var(--weave-space-3); }
.party-infobox dd { margin: 0; min-width: 0; }
.party-infobox h3, .party-contents h2 { color: var(--weave-color-action); font: var(--weave-weight-semibold) var(--weave-text-md) / var(--weave-leading-ui) var(--weave-font-display); }
.party-infobox { position: sticky; top: calc(var(--shell-header-height) + var(--weave-space-5)); max-height: calc(100vh - var(--shell-header-height) - var(--weave-space-5)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.party-infobox :is(.subject-portrait, .subject-banner) { padding: var(--weave-space-2); background: var(--weave-color-canvas); border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-sm); }
.party-infobox :is(.subject-portrait, .subject-banner) > img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--weave-radius-sm); object-fit: contain; }
.party-infobox figcaption { margin-top: var(--weave-space-2); color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
.party-infobox-disclosure { margin-top: var(--weave-space-4); padding: 0; border: 1px solid var(--weave-color-rule); border-radius: var(--weave-radius-sm); box-shadow: none; background: transparent; }
.party-infobox-disclosure > summary { min-height: 44px; margin: 0; padding: var(--weave-space-2); border: 0; border-radius: 0; background: transparent; color: var(--weave-color-secondary); font: inherit; }
.party-infobox-disclosure > ul { padding: 0 var(--weave-space-2); border: 0; background: transparent; }
.party-infobox-disclosure li { margin: 0; padding: var(--weave-space-2) 0; border-top: 1px solid var(--weave-color-rule); }
.party-infobox-disclosure summary:focus-visible, .party-contents a:focus-visible, .party-session-line a:focus-visible { outline: 2px solid var(--weave-color-action); outline-offset: 2px; }
.party-contents { margin: var(--weave-space-6) 0; border-left: 1px solid var(--weave-color-rule); }
.party-contents h2 { margin: 0 0 var(--weave-space-2); padding-left: var(--weave-space-4); }
.party-contents-subsection { padding-left: var(--weave-space-7); }
.party-article .world-article-prose :is(h2, h3) { scroll-margin-top: calc(var(--shell-header-height) + var(--weave-space-5)); }
.party-article .world-article-prose > p { position: relative; }
.party-article .party-arc-range { margin-top: calc(-1 * var(--weave-space-2)); color: var(--weave-color-secondary); font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); }
.party-session-line { color: var(--weave-color-secondary); font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); }
.party-session-line a { color: inherit; }
@media (max-width: 960px) {
  .party-infobox { position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 640px) {
  .party-infobox { padding: var(--weave-space-4); }
  .party-infobox :is(.subject-portrait, .subject-banner) { max-width: 16rem; margin-inline: auto; }
}

.party-affiliation-subgroup { display: block; padding-left: var(--weave-space-2); }

.world-minor-characters { margin-top: var(--weave-space-7); }
.world-minor-characters h2 { font: var(--weave-weight-semibold) var(--weave-text-lg) / var(--weave-leading-snug) var(--weave-font-display); }
.world-minor-characters ul { list-style: none; margin: 0; padding: 0; }
.world-minor-characters li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--weave-space-4); padding: var(--weave-space-3) 0; border-top: 1px solid var(--weave-color-rule); scroll-margin-top: calc(var(--shell-header-height) + var(--weave-space-5)); overflow-wrap: anywhere; }
.world-minor-characters strong { font: var(--weave-weight-semibold) var(--weave-text-md) / var(--weave-leading-snug) var(--weave-font-display); }
.world-minor-characters span { font: var(--weave-text-md) / var(--weave-leading-reading) var(--weave-font-reading); }
.world-row-includes { color: var(--weave-color-secondary); font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); }
@media (max-width: 640px) {
  .world-minor-characters li { grid-template-columns: minmax(0, 1fr); gap: var(--weave-space-1); }
}