/* Show archive and performer archive.
   Palette and type follow .agents/visual-guidelines.md; anything that already
   exists in site.css or lyrics-controls.css is reused rather than restated. */

.wiki-nav {
  position: sticky; top: var(--header-h, 0px); z-index: 40;
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid rgb(240 231 216 / .1);
  background: rgba(18, 13, 22, .9); backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.wiki-nav::-webkit-scrollbar { display: none; }
.wiki-nav a {
  flex: none; padding: 13px 15px; font-size: 14px; color: #b0a08f;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.wiki-nav a:hover { color: #d8a94e; }
.wiki-nav a[aria-current="true"] { color: #f0e7d8; border-bottom-color: #a5203a; }

.wiki-section { scroll-margin-top: calc(var(--header-h, 0px) + 58px); padding: 34px 0; border-top: 1px solid rgb(240 231 216 / .1); }
.wiki-section:first-of-type { border-top: 0; }
.wiki-prose p { margin-top: 14px; color: #d8cebe; line-height: 1.85; }
.wiki-prose p:first-child { margin-top: 0; }
.wiki-prose h3 {
  margin-top: 20px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #d8a94e;
}

/* Fallback is announced, never silent. */
.lang-gap {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  border: 1px solid rgb(216 169 78 / .35); border-radius: 999px;
  padding: 2px 9px; font-size: 11px; letter-spacing: .06em;
  color: #d8a94e; vertical-align: middle;
}

.factbox { border: 1px solid rgb(240 231 216 / .12); border-radius: 10px; background: rgb(240 231 216 / .035); overflow: hidden; }
.factbox h2 {
  padding: 13px 17px; border-bottom: 1px solid rgb(240 231 216 / .1);
  font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600;
  letter-spacing: .04em; color: #d8a94e;
}
.factbox dl { padding: 5px 17px 15px; }
.factbox dt { margin-top: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8f8275; }
.factbox dd { margin-top: 3px; font-size: 15px; color: #e6dccc; line-height: 1.55; }

.spoiler { margin-top: 18px; border: 1px solid rgb(240 231 216 / .12); border-radius: 9px; background: rgb(0 0 0 / .2); }
.spoiler > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-size: 14px; color: #b0a08f; display: flex; align-items: center; gap: 9px;
}
.spoiler > summary::-webkit-details-marker { display: none; }
.spoiler > summary:before { content: "\25B8"; color: #a5203a; font-size: 13px; }
.spoiler[open] > summary:before { content: "\25BE"; }
.spoiler > summary:hover { color: #d8a94e; }
.spoiler .spoiler-body { padding: 0 16px 16px; }

.credit-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline;
  padding: 13px 4px; border-top: 1px solid rgb(240 231 216 / .08);
}
.credit-row:first-child { border-top: 0; }
.credit-row dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8f8275; }
.credit-row dd strong { font-weight: 600; color: #f0e7d8; }

.version-card { display: grid; grid-template-columns: 74px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid rgb(240 231 216 / .1); }
.version-card:first-of-type { border-top: 0; }
.version-year { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; line-height: 1; color: #d8a94e; }
.version-year small { display: block; margin-top: 5px; font-family: Spectral, serif; font-size: 11px; letter-spacing: .14em; color: #8f8275; }
.version-title { font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 600; line-height: 1.2; color: #f0e7d8; }
.version-meta { margin-top: 5px; font-size: 14px; color: #a99a86; }
.version-note { margin-top: 10px; font-size: 15px; line-height: 1.7; color: #c9bdaf; }
.version-cast { margin-top: 10px; font-size: 14px; color: #a99a86; }
.version-cast b { font-weight: 600; color: #d8cebe; }

.cast-link { color: #d8cebe; border-bottom: 1px dotted rgb(216 169 78 / .45); }
.cast-link:hover { color: #d8a94e; border-bottom-style: solid; border-color: #d8a94e; }
/* A credit with no archive behind it: still stated, just not clickable. */
.cast-name { color: #d8cebe; }

/* What a show actually offers, shown wherever a show is listed. */
.content-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.content-badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 1px 7px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.7;
}
.content-badge.is-wiki { border: 1px solid rgb(216 169 78 / .5); color: #d8a94e; }
.content-badge.is-lyrics { border: 1px solid rgb(240 231 216 / .22); color: #a99a86; }

/* Who sang this version, above the lyrics themselves. */
.cast-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; color: #8f8275; }
.cast-strip > b { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: #d8a94e; }
.cast-strip-item { display: inline-flex; align-items: baseline; gap: 6px; }
.cast-strip-item i { font-style: normal; color: #8f8275; }
.cast-strip-item i:after { content: "\00B7"; margin-left: 6px; }

.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; }
.badge-premiere { background: #a5203a; color: #f0e7d8; }
.badge-plain { border: 1px solid rgb(240 231 216 / .24); color: #b0a08f; }
.badge-gold { border: 1px solid rgb(216 169 78 / .5); color: #d8a94e; }
.badge-proshot { border: 1px solid rgb(216 169 78 / .5); background: rgb(216 169 78 / .12); color: #d8a94e; }
.badge-film { border: 1px solid rgb(165 32 58 / .6); background: rgb(165 32 58 / .16); color: #e2a3ae; }

.watch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.watch-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgb(240 231 216 / .16); border-radius: 999px;
  padding: 6px 13px 6px 10px; font-size: 13px; color: #d8cebe; background: rgb(0 0 0 / .22);
}
.watch-pill:hover { border-color: #d8a94e; color: #f0e7d8; background: rgb(216 169 78 / .08); }
.watch-pill .mark { display: grid; width: 19px; height: 19px; flex: none; place-items: center; border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; }
.mark-youtube { background: #c4302b; }
.mark-bilibili { background: #00a1d6; }
.mark-official { background: #7b6a2f; }
.mark-other { background: #4a4150; }
.watch-pill .dur { color: #8f8275; font-size: 12px; font-variant-numeric: tabular-nums; }
/* Dashed means a user upload: present, but never dressed up as official. */
.watch-pill.is-community { border-style: dashed; opacity: .82; }
.watch-empty { margin-top: 12px; font-size: 13.5px; color: #8f8275; font-style: italic; }
.watch-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12.5px; color: #8f8275; }

/* Productions below the notability bar: collapsed, listed, never carded. */
.minor-runs { margin-top: 22px; border-top: 1px solid rgb(240 231 216 / .1); padding-top: 16px; }
.minor-runs > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #8f8275; }
.minor-runs > summary::-webkit-details-marker { display: none; }
.minor-runs > summary:before { content: "\25B8"; font-size: 12px; }
.minor-runs[open] > summary:before { content: "\25BE"; }
.minor-runs > summary:hover { color: #d8a94e; }
.minor-count { border: 1px solid rgb(240 231 216 / .16); border-radius: 999px; padding: 0 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.minor-body { padding: 12px 0 2px; }
.minor-body > p { font-size: 12.5px; color: #8f8275; font-style: italic; }
.minor-body li { display: flex; gap: 14px; padding: 6px 0; font-size: 14px; color: #a99a86; }
.minor-body li b { flex: none; width: 44px; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: #8f8275; }

.source-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 2px; border-top: 1px solid rgb(240 231 216 / .08); font-size: 14px; color: #b0a08f; }
.source-list a:first-child { border-top: 0; }
.source-list a:hover { color: #d8a94e; padding-left: 6px; }

.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 24px; }
.char-grid > div { padding: 11px 0; border-bottom: 1px solid rgb(240 231 216 / .07); }
.char-grid b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: #d8a94e; }
.char-grid small { color: #8f8275; font-size: 12.5px; }
.char-cast { margin-top: 5px; font-size: 13px; line-height: 1.6; color: #8f8275; }
.char-cast a { color: #b0a08f; border-bottom: 1px dotted rgb(216 169 78 / .4); }
.char-cast a:hover { color: #d8a94e; border-bottom-style: solid; border-color: #d8a94e; }
.char-more { display: none; }

.songs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.archive-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.archive-actions .pdf-button { justify-content: center; }

/* Every published song, grouped by production version. */
.track-index { margin-top: 18px; }
.track-index-group { border-top: 1px solid rgb(240 231 216 / .1); }
.track-index-group:last-child { border-bottom: 1px solid rgb(240 231 216 / .1); }
.track-index-group > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; list-style: none;
  font-size: 15.5px; color: #e6dccc;
}
.track-index-group > summary::-webkit-details-marker { display: none; }
.track-index-group > summary:before { content: "\25B8"; flex: none; font-size: 12px; color: #a5203a; }
.track-index-group[open] > summary:before { content: "\25BE"; }
.track-index-group > summary:hover { color: #d8a94e; }
.track-index-title { min-width: 0; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.25; }
.track-index-list { padding: 0 0 14px; }
.track-index-list a { display: flex; align-items: baseline; gap: 8px; min-height: 42px; padding: 9px 4px; font-size: 15px; line-height: 1.45; color: #d8cebe; }
.track-index-list a:hover { color: #d8a94e; }
.track-index-list .track-number { width: 28px; flex: none; font-family: 'Cormorant Garamond', serif; color: #8f8275; }
.track-index-subhead { break-after: avoid; padding: 14px 4px 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #d8a94e; }
@media (min-width: 640px) { .track-index-list { columns: 2; column-gap: 40px; } .track-index-list li { break-inside: avoid; } }

.cta-primary { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; background: #a5203a; padding: 11px 24px; font-size: 15px; color: #f0e7d8; }
.cta-primary:hover { transform: translateY(-2px); }
.notice { margin-top: 14px; border-left: 2px solid rgb(216 169 78 / .5); padding: 2px 0 2px 14px; font-size: 13px; line-height: 1.7; color: #8f8275; }

/* Performer archive */
.portrait {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  overflow: hidden; border-radius: 10px;
  background: linear-gradient(150deg, var(--from, #2f2140), var(--to, #6d4160));
  box-shadow: 0 18px 40px -22px #000; isolation: isolate;
}
.portrait:after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 16px); }
.portrait span { position: relative; z-index: 2; font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 7vw, 58px); font-weight: 600; letter-spacing: .06em; color: rgba(255, 255, 255, .9); text-shadow: 0 2px 18px #000; }
.portrait small { position: absolute; bottom: 9px; z-index: 2; font-size: 10px; letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.portrait-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

.role-row { display: grid; grid-template-columns: 66px 1fr auto; gap: 18px; align-items: start; padding: 17px 0; border-top: 1px solid rgb(240 231 216 / .1); }
.role-row:first-of-type { border-top: 0; }
.role-year { font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 600; line-height: 1.1; color: #d8a94e; }
.role-show { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: #f0e7d8; }
.role-version { margin-top: 3px; font-size: 13.5px; color: #8f8275; }
.role-char { margin-top: 7px; font-size: 15px; color: #d8cebe; }
.role-char b { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: #d8a94e; margin-right: 7px; }
.role-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.role-stat { text-align: right; font-size: 13px; color: #8f8275; white-space: nowrap; }
.role-stat b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 19px; color: #d8cebe; }
.role-stat a { display: inline-block; margin-top: 6px; color: #d8a94e; font-size: 12.5px; }
.role-stat a:hover { color: #f0e7d8; }

/* A highlight is one reading of a song, not the song. */
.sig-card {
  border: 1px solid rgb(240 231 216 / .12); border-radius: 11px;
  background: linear-gradient(140deg, rgb(240 231 216 / .045), rgb(240 231 216 / .015));
  padding: 20px 22px;
}
.sig-card:hover { border-color: rgb(216 169 78 / .34); }
.sig-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sig-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; line-height: 1.15; color: #f0e7d8; }
.sig-title-zh { font-size: 14.5px; color: #a99a86; }
.sig-from { margin-top: 8px; font-size: 13.5px; color: #8f8275; }
.sig-from a { color: #b0a08f; border-bottom: 1px solid rgb(240 231 216 / .2); }
.sig-from a:hover { color: #d8a94e; border-color: #d8a94e; }
.sig-why { margin-top: 11px; font-size: 15px; line-height: 1.75; color: #c9bdaf; }
.sig-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

.people-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid rgb(240 231 216 / .08); font-size: 14px; color: #b0a08f; }
.people-row:first-child { border-top: 0; }
.people-row .mono { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 7px; background: linear-gradient(150deg, #3a2340, #7a4560); font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.people-row:hover { color: #d8a94e; }
.people-row small { display: block; color: #8f8275; font-size: 12px; }

.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: flex; gap: 10px; border-top: 1px solid rgb(240 231 216 / .12);
  background: rgba(18, 13, 22, .94); backdrop-filter: blur(14px);
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { .mobile-bar { display: none; } }
@media (max-width: 1023px) {
  .version-card { grid-template-columns: 56px 1fr; gap: 14px; }
  .version-year { font-size: 24px; }
  .credit-row { grid-template-columns: 1fr; gap: 2px; }
  .role-row { grid-template-columns: 52px 1fr; gap: 12px; }
  .role-year { font-size: 21px; }
  .role-stat { grid-column: 2; text-align: left; margin-top: 8px; }
  .role-stat b { display: inline; font-size: 15px; }
  /* Room for the fixed bar, on the page rather than on <main>, so the footer clears it too. */
  body:has(.mobile-bar) { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
  /* The fixed bar already carries this action. */
  .archive-cta { display: none; }

  /* One reading order for a narrow screen: synopsis, facts, everything else, sources. */
  .archive-grid { display: flex; flex-direction: column; }
  .archive-main, .archive-aside { display: contents; }
  .archive-main > .wiki-section { order: 3; }
  .archive-main > #synopsis { order: 1; }
  .archive-aside > .factbox { order: 2; margin: 28px 0 0; }
  .archive-main:has(> #synopsis) + .archive-aside > .factbox { margin-top: 0; }
  .archive-aside > .archive-actions { order: 2; flex-direction: row; margin: 12px 0 28px; }
  .archive-actions .pdf-button { flex: 1; min-height: 44px; }
  .archive-aside > .archive-sources { order: 9; }
  /* The facts box lists the same credits, so the section and its tab would only repeat it. */
  .archive-main > #creative, .wiki-nav a[href="#creative"] { display: none; }
  .factbox dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; padding: 14px 17px 16px; }
  .factbox dt { margin-top: 0; padding-top: 3px; }
  .factbox dd { margin-top: 0; }
}

@media (max-width: 639px) {
  .char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .js .char-grid:not([data-expanded]) > div:nth-child(n + 7) { display: none; }
  .js .char-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font-size: 14px; color: #b0a08f; }
  .js .char-more[aria-expanded="true"] { display: none; }
  section.performer-hero { grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px 18px; }
  .performer-hero > .hero-text { display: contents; }
  .performer-hero .hero-back { grid-column: 1 / -1; grid-row: 1; }
  .performer-hero .portrait { grid-column: 1; grid-row: 2; }
  .performer-hero .hero-id { grid-column: 2; grid-row: 2; }
  .performer-hero .hero-more { grid-column: 1 / -1; grid-row: 3; }
}