/* WoW-flavored styling built from plain CSS: no Blizzard logos, art or fonts. */
:root {
  color-scheme: dark;
  --bg: #0d0b09;
  --panel: rgba(8, 10, 22, 0.94);    /* in-game tooltip navy */
  --panel-line: #5b5f6e;             /* tooltip silver border */
  --line: #3a3128;
  --text: #e8e0d2;
  --muted: #a39683;
  --gold: #ffd100;                   /* the game's UI gold */
  --gold-soft: #d8b25a;
  --link: #f0c96b;
  --parchment: #e9d8ad;
  --parchment-dark: #cdb27a;
  --ink: #2a1c0d;
  --heading: "Cinzel", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg) radial-gradient(ellipse at 50% 0, #2a2014 0, transparent 70%) no-repeat;
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--link); }
code { background: #00000066; padding: 1px 5px; border-radius: 3px; font-size: 0.92em; word-break: break-word; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Site header, on every page (LOR-222): the brand, then Download, Lore, What's new and Community; on the right, Make
   your profile (Your profile once signed in) next to Sign in or the account chip. The links are in each page's own
   markup, so they work without JavaScript; header.js marks the one you're on, turns Community into a menu, switches
   the profile link once you're signed in and adds the What's new dot. Up to 1100px it's two rows: the brand, the
   profile link and the account, then the six links. Deeper pages add a breadcrumb under it (.subcrumb). */
.top { position: relative; z-index: 5; border-bottom: 1px solid var(--line); background: #070605; }   /* menus over the hero */
.crumb { display: block; padding: 10px 0; color: var(--muted); font-size: 0.85rem; }
.subcrumb { border-top: 1px solid #ffffff0d; }
.subcrumb .crumb { padding: 6px 0 7px; }
.nav { display: flex; align-items: center; gap: 8px 14px; min-height: 56px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: 8px; color: var(--gold); text-decoration: none;
  font: 700 1.05rem/1 var(--heading); letter-spacing: 0.03em; white-space: nowrap;
}
.brand img { display: block; width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-dd { position: relative; }
.nl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 4px; background: none; color: var(--parchment); cursor: pointer;
  font: 600 0.86rem/1 var(--heading); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap;
}
.nl:hover, .nl[aria-expanded="true"] { color: var(--gold); background: #ffffff10; }
.nl[aria-current="page"], .nl.nl-on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.nl-pf { border-color: #c9a24b; background: #00000080; color: var(--gold); }
.nl-pf:hover { background: #1b1408; }
.nl-icon { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.new-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1eff00; box-shadow: 0 0 8px #1eff0099; }
.head-actions { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
/* Until header.js knows whether you're signed in (what it remembers from the last page, or GET /api/auth/me), the
   profile link and account keep their place but show nothing, so a signed-in player never sees Sign in first and the
   header doesn't jump. The nav's inline script sets hd-wait; header.js takes it off. Shown anyway after 3s should
   header.js never run; without JavaScript there's no hd-wait. */
.hd-wait .head-actions { visibility: hidden; animation: hd-late 0s 3s forwards; }
@keyframes hd-late { to { visibility: visible; } }
/* The Lore link while the "lore" feature is off (the inline script, from what header.js remembers, or the answer). */
.hd-nolore #nav-lore { display: none; }
.btn-in {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--panel-line);
  border-radius: 4px; background: #00000066; color: var(--text); text-decoration: none; white-space: nowrap;
  font: 600 0.82rem/1 var(--heading); letter-spacing: 0.03em;
}
.btn-in:hover { background: #1b1408; color: var(--gold); }
.hd-narrow { display: none; }
.caret { font-size: 0.72em; line-height: 1; }
.head-chip {   /* min-width 0: a long name shortens (…) rather than push the header wider */
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 190px; min-height: 34px; padding: 2px 10px 2px 3px;
  cursor: pointer; border: 1px solid var(--panel-line); border-radius: 17px; background: #00000066; color: var(--text);
  font: 0.88rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.head-chip:hover, .head-chip[aria-expanded="true"] { border-color: var(--gold-soft); }
.chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-avatar {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.78rem var(--heading); color: #1a1208; background: linear-gradient(180deg, var(--gold), var(--gold-soft));
}
.head-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; width: 250px; max-width: calc(100vw - 32px); padding: 6px;
  background: #080a16; border: 1px solid var(--panel-line); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 10px 28px rgba(0, 0, 0, 0.75); text-align: left;
}
.nav-dd .head-menu { left: 0; right: auto; width: 300px; }
.head-menu[hidden], .menu-note[hidden] { display: none; }
.head-menu a, .head-menu button {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 3px; background: none; cursor: pointer;
  text-align: left; text-decoration: none; color: var(--text); font: 600 0.92rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.head-menu a:first-child { color: var(--gold); }
.head-menu a:hover, .head-menu a:focus-visible, .head-menu button:hover, .head-menu button:focus-visible { background: #ffffff14; color: var(--gold); }
.head-menu button:disabled { opacity: 0.6; cursor: wait; }
.nl:focus-visible, .brand:focus-visible, .btn-in:focus-visible, .head-chip:focus-visible, .head-menu a:focus-visible,
.head-menu button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.head-menu small { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.head-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 6px; }
.menu-head { margin: 6px 10px 2px; color: var(--gold-soft); font: 600 0.68rem/1.4 var(--heading); letter-spacing: 0.12em; text-transform: uppercase; }
.menu-note, .menu-who { margin: 2px 10px 4px; font-size: 0.78rem; color: var(--muted); }
.menu-who strong { color: var(--text); font-weight: 600; word-break: break-all; }
/* Sized for the links (six with Guides; the narrowest phones wrap them, below), signed in or out, with nothing wider than the screen from 320px up: the short labels
   (Profile) to 960px, two rows to 1100px, phone sizes to 600px. */
@media (max-width: 960px) {
  .nav { gap: 6px 8px; }
  .nl { padding: 0 9px; }
  .nav .hd-wide { display: none; }
  .nav .hd-narrow { display: inline; }
}
@media (max-width: 1100px) {
  .nav { flex-wrap: wrap; min-height: 0; }
  .brand { min-height: 52px; }
  .nav-links { order: 3; flex: 1 0 100%; margin: 0 0 8px; }
}
@media (max-width: 600px) {
  .brand { font-size: 1rem; }
  .nav-links { justify-content: space-between; gap: 0; }
  .nl { min-height: 42px; padding: 0 8px; font-size: 0.78rem; letter-spacing: 0.02em; gap: 5px; }
  .nav-links .nl { padding: 0 4px; letter-spacing: 0; }
  .head-actions .nl, .btn-in { min-height: 36px; padding: 0 9px; font-size: 0.72rem; }
  .nl-icon { display: none; }
  .new-dot { width: 7px; height: 7px; }
  .nav-dd { position: static; }   /* its menu spans the header instead */
  .nav-dd .head-menu { left: 8px; right: 8px; top: calc(100% + 6px); width: auto; max-width: none; }
  .chip-name, .head-chip .caret { display: none; }
  .head-chip { padding: 2px; }
}
@media (max-width: 359px) {
  .nav-links .nl { font-size: 0.7rem; }
}
/* On narrow phones the links wrap onto another row, never off screen.
   Tighter padding up to 400px gives the links more room. */
@media (max-width: 600px) {
  .nav-links { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .nav-links .nl { padding: 0 2px; }
}

/* Fading gold rule under the hero and section headings */
.hero::after, .tab-panel h2::after {
  content: ""; display: block; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* Hero: dark banner that picks up screenshot 01 as its background once it exists */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #221a10, #0d0b09);
}
/* The hero screenshot, blurred and darkened so the title stays readable */
.hero::before {
  content: ""; position: absolute; inset: -24px;
  background: var(--hero-img, none) center 30% / cover no-repeat;
  filter: blur(7px) brightness(0.4) saturate(1.2);
}
.hero > .hero-grid, .hero::after { position: relative; }
h1 {
  margin: 0; font-family: var(--heading); font-weight: 700; font-size: 2.6rem; letter-spacing: 0.02em;
  color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 170, 0, 0.25);
}
.subtitle { font-size: 1.15rem; color: var(--gold-soft); font-weight: 600; }
@media (max-width: 600px) { .subtitle { display: block; margin-top: 4px; } h1 { font-size: 2.1rem; } }
.pitch { margin: 8px 0 12px; font-size: 1.15rem; text-shadow: 0 1px 2px #000; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.stats strong { color: var(--text); }
.stats img { vertical-align: middle; }

/* Download button styled after the game's red UI buttons */
.btn-download {
  display: inline-block; padding: 14px 30px; border-radius: 4px;
  background: linear-gradient(180deg, #b3201a 0%, #7d0f0b 55%, #5c0906 100%);
  border: 2px solid #c9a24b; box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.35), 0 3px 10px rgba(0, 0, 0, 0.6);
  color: var(--gold); font-family: var(--heading); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.03em;
  text-decoration: none; text-shadow: 0 1px 1px #000;
}
.btn-download:hover { background: linear-gradient(180deg, #d02a22 0%, #971410 55%, #6d0b07 100%); color: #fff2b0; }
/* The secondary download (CurseForge): the same gold rim and type, no red fill, a step smaller. */
.btn-download-alt { padding: 12px 24px; font-size: 1rem; background: rgba(0, 0, 0, 0.6); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); }
.btn-download-alt:hover { background: #1b1408; color: var(--gold); }
.file-note { color: var(--muted); font-size: 0.82rem; }

/* Screenshot strip. Shots have mixed shapes (tooltips, chat lines, the full panel), so each sits whole
   inside a same-size frame instead of being cropped. */
.shots {
  display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding: 20px 0 10px; margin-bottom: 16px;
  scroll-snap-type: x mandatory;
}
.shot { flex: 0 0 min(340px, 82vw); margin: 0; scroll-snap-align: start; }
.shot a {
  display: block; aspect-ratio: 4 / 3; background: #050403; border: 1px solid #c9a24b88; border-radius: 4px;
  overflow: hidden;
}
.shot a:hover { border-color: var(--gold); }
.shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shot figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

/* Zone cards */
.zones { margin-bottom: 32px; }
.zones h2 { font-family: var(--heading); color: var(--gold); font-size: 1.35rem; margin-bottom: 6px; }
.zones-intro { margin-top: 0; color: var(--muted); max-width: 760px; }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.zone {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px; overflow: hidden;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.zone-body { padding: 4px 16px 14px; }
.zone h3 { font-family: var(--heading); color: var(--gold); font-size: 1.1rem; margin: 10px 0 2px; }
.zone-where { color: var(--muted); font-size: 0.88rem; margin: 0 0 10px; }
.zone-q { margin: 0 0 6px; padding-left: 10px; border-left: 2px solid var(--gold-soft); font-size: 0.92rem; font-style: italic; }
.tag {
  font: 600 0.7rem system-ui, sans-serif; vertical-align: middle; color: #a335ee; /* epic purple */
  border: 1px solid #a335ee88; border-radius: 3px; padding: 1px 5px; margin-left: 4px; letter-spacing: 0.03em;
}
.zone-next { justify-content: center; border-style: dashed; background: rgba(8, 10, 22, 0.6); }
.zone-next .zone-body { padding: 20px 16px; }
/* Every button that does something shows the hand, like a link (Manage billing had none). */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.btn-small {
  display: inline-block; margin-top: 4px; padding: 7px 16px; border-radius: 4px; text-decoration: none;
  background: linear-gradient(180deg, #b3201a, #6d0b07); border: 1px solid #c9a24b; color: var(--gold);
  font: 600 0.9rem var(--heading);
}

/* Main + sidebar */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
@media (max-width: 800px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--line); }
.tabs button {
  background: none; border: 0; color: var(--muted); font: 600 0.95rem var(--heading); letter-spacing: 0.03em;
  padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
body:not(.js) .tabs { display: none; }

.tab-panel { padding: 8px 0 24px; }
.tab-panel h2 { font-family: var(--heading); color: var(--gold); font-size: 1.35rem; }
.tab-panel h2::after { margin-top: 10px; }
.tab-panel h3 { margin-top: 1.6em; color: var(--gold-soft); font-family: var(--heading); font-size: 1.05rem; letter-spacing: 0.02em; }
.tab-panel li { margin-bottom: 6px; }

/* Sample answer on parchment, like quest text */
.sample { margin: 24px 0; }
.scroll {
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  color: var(--ink); padding: 18px 22px; border-radius: 3px;
  border: 1px solid #8a6a36; box-shadow: inset 0 0 30px rgba(120, 80, 30, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5);
  font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem;
}
.scroll p { margin: 0; }
.scroll-q { font-family: var(--heading); font-weight: 700; color: #5a2a08; margin-bottom: 8px !important; }
.sample figcaption { color: var(--muted); font-size: 0.82rem; margin-top: 6px; }

table { border-collapse: collapse; width: 100%; }
td { border-top: 1px solid var(--line); padding: 8px 10px 8px 0; vertical-align: top; }
/* Command names stay whole on phones ("/lore library", not "/lore librar|y"); the description column wraps instead. */
td:first-child code { white-space: nowrap; word-break: normal; }

/* Sidebar boxes styled like in-game tooltips */
.box {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
  padding: 4px 16px 12px; margin-bottom: 16px;
}
.box h3 { color: var(--gold); font-family: var(--heading); font-size: 1rem; }
dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 0.92rem; }
dt { color: var(--muted); }
dd { margin: 0; }
.links { list-style: none; padding: 0; margin: 0; }
.links li { margin-bottom: 6px; }

.foot { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; padding-bottom: 30px; color: var(--muted); font-size: 0.85rem; }
.tag-new { color: #1eff00; border-color: #1eff0077; } /* uncommon green */

/* Headline features: narration samples, then asking */
.feature { padding: 28px 0 8px; }
.feature h2 { font-family: var(--heading); color: var(--gold); font-size: 1.5rem; margin: 0 0 8px; }
.feature-text { max-width: 760px; }
.feature-text li { margin-bottom: 6px; }
.feature-note { color: var(--muted); margin-bottom: 0; }
.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 14px; align-items: start; }
.audio-sample {
  margin: 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.audio-sample figcaption { margin-bottom: 10px; }
.audio-sample figcaption strong { font-family: var(--heading); color: var(--gold); font-size: 1.1rem; }
.audio-sample figcaption span:last-child { display: block; color: var(--muted); font-size: 0.88rem; }
.audio-sample audio { width: 100%; }
.audio-sample details { margin-top: 8px; font-size: 0.9rem; }
.audio-sample summary { cursor: pointer; color: var(--link); }
.audio-sample details p { color: var(--text); margin: 8px 0 0; line-height: 1.6; }

.feature-ask, .whats-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .feature-ask, .whats-new { grid-template-columns: minmax(0, 1fr); } }
.feature-ask .sample { margin: 18px 0 0; }
.feature-shot { margin: 8px 0 0; }
.feature-shot a { display: block; border: 1px solid #c9a24b88; border-radius: 4px; overflow: hidden; }
.feature-shot img { width: 100%; height: auto; display: block; }
.feature-shot figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

/* Email sign-up band */
.signup {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
  margin: 8px 0 32px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.signup h2 { font-family: var(--heading); color: var(--gold); font-size: 1.3rem; margin: 0 0 4px; }
.signup-text { flex: 1 1 320px; }
.signup-text p { margin: 0; color: var(--muted); }
.signup-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 300px; max-width: 440px; }
.signup-form input[type="email"] {
  flex: 1 1 200px; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text);
  background: #000000aa; border: 1px solid var(--panel-line); border-radius: 4px;
}
.signup-form input[type="email"]:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.signup-form button { margin-top: 0; cursor: pointer; }
.signup-form :disabled { opacity: 0.55; cursor: not-allowed; }
.signup-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.85rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: title and downloads on the left, the author card on the right; stacks on narrow screens */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px 40px; align-items: center;
  padding: 52px 16px 40px;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 28px; } }
.dl-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; margin-top: 22px; }
/* Each download button with its one-line note under it: the installer, then CurseForge. */
.dl-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dl-pick .btn-download { white-space: nowrap; }
.dl-pick .dl-other { max-width: 270px; }
.dl-alt { display: flex; flex-direction: column; gap: 2px; }
.dl-other { color: var(--muted); font-size: 0.92rem; }
.dl-more { margin: 14px 0 0; font-size: 0.95rem; text-shadow: 0 1px 2px #000; }
.dl-more a { font-weight: 700; }

/* About the author, styled like a tooltip, with the community links as buttons */
.author-card {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 16px 20px;
  box-shadow: inset 0 0 0 1px #000, 0 6px 20px rgba(0, 0, 0, 0.55);
}
.author-head { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.3rem var(--heading); color: #1a1208; background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #c9a24b;
}
.author-card h2 { font-family: var(--heading); color: var(--gold); font-size: 1.15rem; margin: 0; line-height: 1.3; }
.author-role { margin: 0; color: var(--muted); font-size: 0.85rem; }
.author-bio { margin: 10px 0 12px; font-size: 0.92rem; line-height: 1.5; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social {
  display: inline-block; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 0.9rem; font-weight: 600;
  color: var(--text); background: #00000066; border: 1px solid var(--panel-line);
}
.social:hover { border-color: var(--gold-soft); color: var(--gold); }
.social-discord { background: #5865f2; border-color: #7983f5; color: #fff; }   /* Discord blurple */
.social-discord:hover { background: #6b76f4; border-color: #fff; color: #fff; }
.social-twitch { background: #9146ff; border-color: #a970ff; color: #fff; }   /* Twitch purple */
.social-twitch:hover { background: #a970ff; border-color: #fff; color: #fff; }

/* Phones: keep the download button and the author card with its links above the fold */
@media (max-width: 600px) {
  .hero-grid { gap: 18px; padding-top: 22px; }
  .pitch { font-size: 1.05rem; }
  .dl-row { margin-top: 16px; }
  .dl-pick { flex: 1 1 100%; max-width: none; }
  .dl-pick .btn-download { align-self: stretch; text-align: center; }
  .author-card { padding: 14px 16px; }
  .author-bio { margin: 8px 0 10px; }
  .socials { gap: 6px; }
  .social { padding: 6px 10px; }
}

.install-box h3 { margin-bottom: 10px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 10px; font-size: 0.92rem; line-height: 1.45;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.8rem var(--heading); color: #1a1208;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
}
.steps code, .zip-steps code { font-size: 0.82em; }
.install-note { margin: 4px 0 10px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.install-note strong { color: var(--text); }
.zip-steps { font-size: 0.85rem; margin-bottom: 8px; }
.zip-steps summary { cursor: pointer; color: var(--link); }
.zip-steps p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.install-more { font-size: 0.85rem; }

/* Bigger tap targets for the fold-out toggles on phones */
.audio-sample summary, .zip-steps summary { padding: 10px 0; margin: -4px 0; }

/* Feedback page */
.fb-page { max-width: 760px; padding-top: 28px; padding-bottom: 12px; }
.fb-page h1 { font-size: 2.2rem; }
.fb-page .pitch { color: var(--text); }
.fb-form, .fb-done {
  margin: 20px 0; padding: 18px 20px 20px;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.fb-form[hidden], .fb-done[hidden] { display: none; }
.fb-form fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.fb-form legend, .fb-field > span { display: block; margin-bottom: 6px; color: var(--gold-soft); font: 600 0.95rem var(--heading); letter-spacing: 0.02em; }
.fb-optional { color: var(--muted); font: 400 0.82rem system-ui, sans-serif; letter-spacing: 0; }
.fb-kinds label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 8px 0; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--panel-line); border-radius: 4px; background: #00000066; font-size: 0.92rem;
}
.fb-kinds label:has(:checked) { border-color: var(--gold); color: var(--gold); }
.fb-kinds label:has(:focus-visible) { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.fb-kinds input { accent-color: #c9a24b; margin: 0; }

/* Stars run 5..1 in the markup and are reversed on screen, so "~" can light every star below the picked one. */
.fb-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.fb-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-stars label { font-size: 1.9rem; line-height: 1; color: #4a4336; cursor: pointer; padding: 0 2px; }
.fb-stars input:checked ~ label { color: var(--gold); text-shadow: 0 0 8px rgba(255, 170, 0, 0.35); }
.fb-stars:hover input ~ label { color: #4a4336; text-shadow: none; }   /* while hovering, preview instead */
.fb-stars:hover label:hover, .fb-stars:hover label:hover ~ label { color: var(--gold); text-shadow: 0 0 8px rgba(255, 170, 0, 0.35); }
.fb-stars input:focus-visible + label { outline: 2px solid var(--gold-soft); outline-offset: 1px; border-radius: 3px; }

.fb-field { display: block; margin-bottom: 16px; }
.fb-field small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; }
.fb-field small[hidden] { display: none; }
.fb-field input, .fb-field textarea {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text);
  background: #000000aa; border: 1px solid var(--panel-line); border-radius: 4px;
}
.fb-field textarea { resize: vertical; min-height: 120px; }
.fb-field input:focus, .fb-field textarea:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.fb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .fb-pair { grid-template-columns: 1fr; } }
.fb-check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; font-size: 0.92rem; color: var(--muted); cursor: pointer; }
.fb-check input { accent-color: #c9a24b; margin-top: 4px; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#fb-turnstile:not(:empty) { margin-bottom: 16px; }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fb-actions .btn-download { cursor: pointer; padding: 11px 34px; }
.fb-actions .btn-download:disabled { opacity: 0.6; cursor: wait; }
.fb-status { margin: 0; color: #ff7b6b; }
.fb-done h2 { font-family: var(--heading); color: var(--gold); margin: 0 0 8px; }
.fb-done p { margin: 0 0 8px; }
/* A report code from the add-on, decoded (feedback.html) */
.fb-report { margin: -6px 0 16px; padding: 10px 14px; border-left: 3px solid var(--gold-soft); background: rgba(216, 178, 90, 0.07); }
.fb-report[hidden] { display: none; }
.fb-report p { margin: 0 0 4px; overflow-wrap: anywhere; }
.fb-report strong { color: var(--gold-soft); font-weight: 600; }
.fb-report small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.82rem; }

/* Share Forever text (/contribute, LOR-235) and its receipts (/contribute/r/<id>) */
.cb-page h2 { font-family: var(--heading); color: var(--gold); font-size: 1.3rem; margin: 0 0 8px; }
.cb-page code { overflow-wrap: anywhere; }
.cb-stats { color: var(--gold-soft); margin: 0 0 8px; }
.cb-stats[hidden], .cb-preview[hidden], .fb-form[hidden] { display: none; }
.cb-steps li { margin-bottom: 8px; }
.cb-path { display: block; margin: 4px 0; padding: 6px 8px; background: #000000aa; border-radius: 4px; }
.cb-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px 0; padding: 26px 16px;
  border: 2px dashed var(--panel-line); border-radius: 6px; background: #00000055; cursor: pointer; text-align: center;
}
.cb-drop strong { color: var(--gold); font-family: var(--heading); font-size: 1.1rem; }
.cb-drop span { color: var(--muted); font-size: 0.9rem; }
.cb-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-drop:hover, .cb-drop.cb-over, .cb-drop:focus-within { border-color: var(--gold-soft); background: rgba(216, 178, 90, 0.07); }
.cb-summary { font-weight: 600; }
.cb-kinds { margin: 0 0 16px; color: var(--muted); }
.cb-fields { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; }
.cb-fields dt { color: var(--gold-soft); font-weight: 600; }
.cb-fields dd { margin: 0; overflow-wrap: anywhere; }
.cb-text, .cr-text {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 16px; padding: 10px 14px;
  border-left: 3px solid var(--gold-soft); background: rgba(216, 178, 90, 0.07);
}
.cb-peek { margin: 0 0 16px; }
.cb-peek summary { cursor: pointer; color: var(--link); }
.cb-peek-list { max-height: 320px; overflow: auto; font-size: 0.9rem; }
.cb-peek-list li { margin-bottom: 6px; overflow-wrap: anywhere; }
.cb-paste { opacity: 0.95; }
.cr-lines { list-style: none; margin: 16px 0; padding: 0; }
.cr-line { margin-bottom: 14px; }
.cr-where { margin: 0 0 4px; color: var(--gold-soft); font-weight: 600; }
.cr-status { margin-left: 8px; padding: 1px 8px; border: 1px solid var(--panel-line); border-radius: 10px;
  color: var(--muted); font-size: 0.8rem; font-weight: 400; white-space: nowrap; }
.cr-verified .cr-status, .cr-accepted .cr-status, .cr-shipped .cr-status { color: #1eff00; border-color: #1eff0077; }
.cr-text { margin-bottom: 0; font-size: 0.92rem; }

/* Voices page */
.vp-page { max-width: 900px; padding-top: 28px; padding-bottom: 12px; }
.vp-page h1 { font-size: 2.2rem; }
.vp-page .pitch { color: var(--text); }
.vp-note { color: var(--muted); }
.vp-section { padding: 20px 0 8px; }
.vp-section h2 { font-family: var(--heading); color: var(--gold); font-size: 1.35rem; margin: 0 0 8px; }
.vp-pack p { margin: 0 0 8px; }
.vp-pack audio { width: 100%; margin: 4px 0 8px; }
.vp-page .samples { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vp-steps li { margin-bottom: 6px; }
.vp-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Narrator guide and release (/voices/guide, /voices/release) */
.vp-doc { max-width: 780px; }
.vp-doc h2 { font-family: var(--heading); color: var(--gold); font-size: 1.3rem; margin: 30px 0 8px; }
.vp-doc li { margin-bottom: 6px; }
.vp-version { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.vp-columns { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.vp-columns dt { font-weight: 600; }
@media (max-width: 600px) { .vp-columns { grid-template-columns: minmax(0, 1fr); gap: 2px; } .vp-columns dd { margin-bottom: 8px; } }

/* Voice submission form (/voices/submit): reuses the feedback form's look */
.fb-field > span.fb-sub { color: var(--text); font: 400 0.9rem system-ui, sans-serif; letter-spacing: 0; }
.vs-consent { padding-top: 14px !important; border-top: 1px solid var(--line) !important; }
.vs-consent .vp-note { margin: 0 0 12px; font-size: 0.92rem; }
.fb-check a { color: var(--link); }

/* Translate page (/translate): language cards filled in from translate/languages.json by functions/translate/index.js */
.tl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 12px; }
.tl .zone-body { display: flex; flex-direction: column; height: 100%; }
.tl p { margin: 0 0 8px; }
.tl-meter { height: 8px; margin: 2px 0 8px; border-radius: 4px; background: #00000066; border: 1px solid var(--panel-line); overflow: hidden; }
.tl-meter span { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, #8a6d2c, var(--gold)); }
.tl-percent strong { color: var(--gold); font-size: 1.1rem; }
.tl-new { font-size: 0.88rem; }
.tl-new strong { color: var(--gold); }
.tl-note { color: var(--muted); font-size: 0.82rem; }
.tl-review { color: var(--muted); font-size: 0.88rem; }
.tl-get { font-size: 0.88rem; color: var(--muted); }
.tl-get .btn-small { margin: 0 8px 6px 0; }
.tl-install { color: var(--muted); font-size: 0.82rem; margin-top: 0; }
.tl-install code { font-size: 0.8rem; }
.tl-like { margin-top: auto; }
.tl-like button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; cursor: pointer;
  background: #00000066; border: 1px solid var(--panel-line); border-radius: 20px; color: var(--text); font: 600 0.95rem system-ui, sans-serif;
}
.tl-like button:hover, .tl-like button:focus-visible { border-color: var(--gold-soft); }
.tl-like button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); cursor: default; }
.tag-draft { color: var(--muted); border-color: var(--panel-line); }
.tl-help { margin-top: 18px; }
.tl-help summary { cursor: pointer; color: var(--link); padding: 10px 0; font-family: var(--heading); }
.tl-link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
.fb-field select {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: #0b0a09; border: 1px solid var(--panel-line); border-radius: 4px;
}
.fb-field[hidden] { display: none; }
.tl-size { white-space: nowrap; }

/* Voice list (/voices): cards filled in from voices/voices.json by functions/voices/index.js */
.vc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vc .zone-body { display: flex; flex-direction: column; height: 100%; }
.vc p { margin: 0 0 8px; }
.vc-tagline { font-style: italic; }
.vc-coverage { color: var(--muted); font-size: 0.88rem; }
.vc-sample-title { margin: 6px 0 4px !important; font: 600 0.9rem var(--heading); color: var(--gold-soft); }
.vc audio { width: 100%; height: 40px; margin: 0 0 10px; }
.vc-sample-soon {
  height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 0 10px !important;
  border: 1px dashed var(--panel-line); border-radius: 20px; color: var(--muted); font-size: 0.88rem;
}
.vc-install { font-size: 0.9rem; color: var(--muted); }
.vc-install .btn-small { margin: 0 8px 6px 0; }
.vc-like { margin-top: auto; }
.vc-like button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; cursor: pointer;
  background: #00000066; border: 1px solid var(--panel-line); border-radius: 20px; color: var(--text); font: 600 0.95rem system-ui, sans-serif;
}
.vc-like button:hover, .vc-like button:focus-visible { border-color: var(--gold-soft); }
.vc-like button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); cursor: default; }
.tag-soon { color: var(--muted); border-color: var(--panel-line); }
.vc-help { margin-top: 18px; }
.vc-help summary { cursor: pointer; color: var(--link); padding: 10px 0; font-family: var(--heading); }

/* Voice profiles (/voices/<id>), contributors and contributor accounts */
.vc h3 a { color: inherit; text-decoration: none; }
.vc h3 a:hover { text-decoration: underline; }
.vc-more { font-size: 0.9rem; }
.vpr-head { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.vpr-head h1 { margin: 0 0 4px; font-size: 1.9rem; }
.vpr-avatar { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 2px solid #c9a24b; object-fit: cover; }
.vpr-initial {
  display: flex; align-items: center; justify-content: center; background: radial-gradient(#3a2a12, #120c05);
  font: 700 2.6rem var(--heading); color: var(--gold);
}
@media (max-width: 520px) { .vpr-avatar { width: 64px; height: 64px; } .vpr-initial { font-size: 1.8rem; } .vpr-head h1 { font-size: 1.5rem; } }
.vpr-links { margin: 0; font-size: 0.9rem; }
.vpr-bio { max-width: 720px; }
.vpr-bio p { margin: 0 0 10px; }
.vpr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 14px 0 4px; }
.vpr-actions .vc-like { margin: 0; }
.vpr-actions .vc-install { margin: 0; }
.vcon-voices { margin: 0; padding-left: 18px; }
.vcon-voices li { margin-bottom: 6px; }
.fb-status.fb-good { color: #1eff00; }
.fb-form h2 { font-family: var(--heading); color: var(--gold); font-size: 1.2rem; margin: 0 0 12px; }
.fb-done button.btn-small, .fb-form button.btn-small { cursor: pointer; }
/* The Google button is a light iframe; on a color-scheme: dark page Chrome paints a white box behind it unless the
   container is light too (the iframe itself stays transparent). */
.ac-google { min-height: 44px; margin: 8px 0 16px; color-scheme: light; background: transparent; }
.ac-privacy { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
.ac-privacy summary { cursor: pointer; color: var(--link); padding: 8px 0; }
.ac-voice { padding: 12px 0; border-top: 1px solid var(--line); }
.ac-voice h3 { font-family: var(--heading); color: var(--gold); margin: 0 0 4px; font-size: 1.05rem; }
.ac-voice textarea { min-height: 90px; }
.tag { white-space: nowrap; }
.ac-google[hidden] { display: none; }

/* Translation dashboard (/translate/dashboard) */
.td-page { max-width: 1100px; padding-top: 28px; padding-bottom: 12px; }
.td-page h1 { font-size: 2.2rem; }
.td-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; }
.td-lang { min-width: min(100%, 320px); margin-bottom: 8px; }
.td-who { color: var(--muted); font-size: 0.9rem; margin: 0 0 16px; }
.td-progress { margin: 4px 0 8px; }
.td-progress p { margin: 0; color: var(--muted); }
.td-help, .td-reports { margin: 10px 0; }
.td-pack { margin: 10px 0; }
.td-pack > p { margin: 6px 0; }
.td-pack > .vp-note:empty { display: none; }
.td-help summary, .td-reports summary { cursor: pointer; color: var(--link); font-family: var(--heading); padding: 6px 0; }
.td-report { border-left: 2px solid var(--gold-soft); padding: 2px 0 2px 10px; margin: 8px 0; font-size: 0.92rem; }
.td-report p { margin: 0 0 4px; }
.td-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 16px; align-items: end; margin-top: 12px; }
.td-controls .fb-field { margin-bottom: 8px; }
.td-filters { margin-bottom: 8px; }
@media (max-width: 760px) { .td-controls { grid-template-columns: minmax(0, 1fr); } }
.td-entry { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px; padding: 6px 16px 10px; margin: 0 0 14px; }
.td-entry h3 { font-family: var(--heading); color: var(--gold); font-size: 1.1rem; margin: 8px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.td-key { font-size: 0.78rem; color: var(--muted); font-family: ui-monospace, monospace; }
.td-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; padding: 10px 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .td-row { grid-template-columns: minmax(0, 1fr); } }
.td-label { display: block; color: var(--gold-soft); font: 600 0.8rem var(--heading); letter-spacing: 0.02em; margin-bottom: 2px; }
.td-en p { margin: 0; white-space: pre-wrap; }
.td-tr textarea {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text); resize: vertical; field-sizing: content; min-height: 2.6em;
  background: #000000aa; border: 1px solid var(--panel-line); border-radius: 4px;
}
.td-tr textarea:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.td-under { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.td-note { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.td-note.td-new { color: var(--gold-soft); }
.td-note.td-ok { color: #1eff00; }
.td-note.td-no { color: #ff7b6b; }
.td-copy { font-size: 0.82rem; }
.ac-langs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; }
/* My contributions (/account, LOR-621): a fold per kind, each item with what became of it. */
.ac-mine details { border-top: 1px solid var(--line); padding: 8px 0; }
.ac-mine summary { cursor: pointer; color: var(--gold); }
.ac-mine ul { list-style: none; margin: 8px 0 0; padding: 0; }
.ac-mine li { padding: 8px 0; border-top: 1px dashed var(--line); overflow-wrap: anywhere; }
.ac-mine q { display: block; margin: 4px 0 0; color: var(--text); quotes: none; }
.ac-mine small { display: block; color: var(--muted); }
.ac-st { font-size: 0.88rem; color: var(--muted); }
.ac-st-shipped, .ac-st-in, .ac-st-accepted, .ac-st-done { color: #1eff00; }
.ac-st-unused, .ac-st-rejected { color: #ff7b6b; }
.ac-langs .fb-check { margin: 0; }
.tl-credits { font-size: 0.88rem; }
.tl-credits span { color: var(--muted); }
.tl-kit { font-size: 0.85rem; }
.td-page [hidden] { display: none !important; }
.td-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.td-filters button {
  min-height: 36px; padding: 6px 12px; cursor: pointer; border-radius: 18px; font: 600 0.88rem system-ui, sans-serif;
  background: #00000066; border: 1px solid var(--panel-line); color: var(--text);
}
.td-filters button:hover, .td-filters button:focus-visible { border-color: var(--gold-soft); }
.td-filters button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

/* /voices list (layout B): the voices first, as compact rows, with filters; "Make a voice" is a side card that moves
   below the list on narrow screens. Rows come from voiceRow() in lib/voices.js. */
.vl-page { max-width: 1040px; }
.vl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start; margin-top: 8px; }
@media (max-width: 860px) { .vl-layout { grid-template-columns: minmax(0, 1fr); } }
.vl-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.vl-filters[hidden] { display: none; }
.vl-group { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-filters button {
  min-height: 34px; padding: 5px 13px; cursor: pointer; border-radius: 17px; font: 600 0.86rem system-ui, sans-serif;
  background: #00000066; border: 1px solid var(--panel-line); color: var(--text);
}
.vl-filters button:hover, .vl-filters button:focus-visible { border-color: var(--gold-soft); }
.vl-filters button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.vr {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px;
  margin: 0 0 10px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px;
}
.vr[hidden] { display: none; }
.vr.vr-on { border-color: var(--gold-soft); }
.vr-play {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
  border: 1px solid var(--gold-soft); background: #000000aa; color: var(--gold);
}
.vr-play:hover, .vr-play:focus-visible { border-color: var(--gold); background: #1b1408; }
.vr-play[disabled] { opacity: 0.3; cursor: default; }
.vr-audio { display: none; }
.vr h3 { margin: 0; font-family: var(--heading); color: var(--gold); font-size: 1.08rem; }
.vr h3 a { color: inherit; text-decoration: none; }
.vr h3 a:hover { text-decoration: underline; }
.vr .zone-where { margin: 2px 0 0; }
.vr .vc-tagline { margin: 4px 0 0; font-size: 0.92rem; }
.vr-actions { display: flex; align-items: center; gap: 10px; }
.vr-actions .vc-like { margin: 0; }
.vr-note { color: var(--muted); font-size: 0.88rem; min-width: 64px; text-align: center; }
@media (max-width: 560px) {
  .vr { grid-template-columns: 46px minmax(0, 1fr); }
  .vr-actions { grid-column: 2; }
}
.vl-side { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 14px 16px; }
.vl-side h2 { font-family: var(--heading); color: var(--gold); font-size: 1.1rem; margin: 0 0 6px; }
.vl-side p, .vl-side li { font-size: 0.9rem; }
.vl-side ol { padding-left: 18px; margin: 8px 0 12px; }
.vl-side li { margin-bottom: 4px; }
/* Translation dashboard: "Needs work" (categories across every section) and "Looks right" */
.td-modes { margin: 14px 0 10px; }
.td-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 12px; }
.td-cats button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; cursor: pointer; text-align: left;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; color: var(--text); font: inherit;
}
.td-cats button strong { font: 600 0.95rem var(--heading); color: var(--gold-soft); }
.td-cats button span { font: 700 1.3rem system-ui, sans-serif; color: var(--text); }
.td-cats button:hover, .td-cats button:focus-visible { border-color: var(--gold-soft); }
.td-cats button[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.td-cats button.td-cat-empty span { color: var(--muted); font-size: 1rem; font-weight: 600; }
.td-note.td-draft { color: #9fb7ff; }
.td-links { display: inline-flex; gap: 14px; }
.td-lgtm { font-size: 0.85rem; color: #1eff00; }
.td-lgtm[hidden] { display: none; }
.td-lgtm-all { margin: 0 0 6px; }
.td-entry .td-report { margin: 4px 0 8px; }

/* Downloads page (/downloads): the add-on, every voice with its packs, every language, and install steps. Cards
   reuse the tooltip-navy panels; each file is a row with what it is on the left and its Download button on the right. */
.dl-page { max-width: 960px; padding-top: 28px; padding-bottom: 12px; }
.dl-page h1 { font-size: 2.2rem; }
.dl-page .pitch { color: var(--text); }
.dl-card {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 14px 18px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.dl-card h2, .dl-card h3 { font-family: var(--heading); color: var(--gold); margin: 0; }
.dl-card h2 { font-size: 1.5rem; }
.dl-card h3 { font-size: 1.15rem; }
.dl-card h3 a { color: inherit; text-decoration: none; }
.dl-card h3 a:hover { text-decoration: underline; }
.dl-sub { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.dl-section { padding: 28px 0 4px; }
.dl-section > h2 { font-family: var(--heading); color: var(--gold); font-size: 1.45rem; margin: 0 0 6px; }
.dl-intro { margin: 0 0 14px; color: var(--muted); max-width: 760px; }
.dl-section .dl-intro:last-child { margin: 12px 0 0; }
.dl-voices { display: grid; gap: 16px; }
.dl-voice.dl-on { border-color: var(--gold-soft); }
.dl-voice-head { display: flex; align-items: center; gap: 14px; }
.dl-play {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
  border: 1px solid var(--gold-soft); background: #000000aa; color: var(--gold);
}
.dl-play:hover, .dl-play:focus-visible { border-color: var(--gold); background: #1b1408; }
.dl-audio { display: none; }
.dl-cover { margin: 10px 0 0; font-size: 0.92rem; }
.dl-included { margin: 10px 0 0; font-size: 0.95rem; }
.dl-check { color: #1eff00; font-weight: 700; }
.dl-files { list-style: none; margin: 10px 0 0; padding: 0; }
.dl-card > .dl-files:first-child { margin-top: 0; }
.dl-file {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0;
  border-top: 1px solid #ffffff14;
}
.dl-file:first-child { border-top: 0; }
.dl-files-tight .dl-file { padding: 6px 0; }
.dl-file:target { background: #ffd10014; box-shadow: 0 0 0 6px #ffd10014; border-radius: 2px; }
.dl-file-main { min-width: 0; }
.dl-file-main p { margin: 0; }
.dl-file-name { font-weight: 600; }
.dl-file-what { font-size: 0.9rem; }
.dl-file-meta { color: var(--muted); font-size: 0.85rem; }
.dl-dot:has(+ .dl-size:empty), .dl-dot:last-child { display: none; }
.dl-get { flex: 0 0 auto; margin-top: 0; }
.btn-small-alt { background: rgba(0, 0, 0, 0.6); }
.btn-small-alt:hover { background: #1b1408; }
.dl-meter { display: inline-block; width: 64px; height: 5px; margin: 0 2px 0 4px; vertical-align: middle; border-radius: 3px; background: #ffffff1f; overflow: hidden; }
.dl-meter > span { display: block; height: 100%; background: var(--gold-soft); }
.dl-faction {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; vertical-align: 1px;
  font: 600 0.72rem/1.5 system-ui, sans-serif; letter-spacing: 0.03em; border: 1px solid;
}
.dl-alliance { color: #8fb4ff; border-color: #4a6fd088; background: #14204a; }   /* Alliance blue */
.dl-horde { color: #ff8f80; border-color: #c9302688; background: #3a0d0a; }      /* Horde red */
.dl-all { color: var(--gold); border-color: #c9a24b88; background: #2a2010; }
.dl-included-chip { flex: 0 0 auto; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 480px) {
  .dl-card { padding: 12px 14px; }
  .dl-file { flex-wrap: wrap; }
  .dl-get { width: 100%; text-align: center; padding: 9px 16px; }
  .dl-included-chip { width: auto; }
}
/* Voices first (/downloads): each voice is a card with its sample and name on the left and one big Download on the
   right ("Download everything" for a voice with an all-in-one zip); its other packs follow as small links. */
.dl-section-first { padding-top: 4px; }
.dl-voice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; }
.dl-voice-get { text-align: center; }
.dl-voice-get .dl-file-meta { margin: 6px 0 0; }
.dl-voice-get .dl-included { margin: 0; color: var(--muted); }
.dl-big { padding: 11px 22px; font-size: 1rem; white-space: nowrap; }
.dl-parts { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid #ffffff14; font-size: 0.9rem; color: var(--muted); }
.dl-parts a { font-weight: 600; }
.dl-parts .dl-file-meta { font-size: 0.85rem; }
.dl-parts + .dl-parts { border-top: 0; padding-top: 4px; }   /* "In other languages" right under "Or just one part" */
.dl-voice-included { padding-top: 10px; padding-bottom: 10px; }
.dl-voice .vc-like { margin: 6px 0 0; }
.dl-voice .dl-cover { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }
.dl-howto { margin-top: 18px; padding: 0; }
.dl-howto summary { cursor: pointer; list-style: none; }
.dl-howto summary::-webkit-details-marker { display: none; }
.dl-howto summary h2 { display: inline; font-family: var(--heading); color: var(--link); font-size: 1.1rem; }
.dl-howto summary h2::before { content: "\25B8\00a0"; }
.dl-howto[open] summary h2::before { content: "\25BE\00a0"; }
.dl-howto .steps { margin-top: 12px; }
.dl-langs { margin: 0 0 6px; }
.dl-files.dl-card { padding: 4px 18px; }
@media (max-width: 560px) {
  .dl-voice { grid-template-columns: minmax(0, 1fr); }
  .dl-big { display: block; }
}

/* "Calling all narrators": the same call-out on the home page, /voices and /downloads, linking to the upload page
   (/voices/studio). Keep its claims to what that page does: any number of lines, upload, a test pack to try in game. */
.narrators {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center;
  margin: 0 0 24px; padding: 14px 18px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(109, 11, 7, 0.55), var(--panel) 70%); border: 1px solid #c9a24b;
}
.narrators h2 { font-family: var(--heading); color: var(--gold); font-size: 1.2rem; margin: 0 0 4px; }
.narrators p { margin: 0; font-size: 0.95rem; }
.narrators .nr-go { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.narrators .nr-go .btn-small { margin: 0; white-space: nowrap; }
.narrators .nr-go small { font-size: 0.8rem; }
@media (max-width: 640px) { .narrators { grid-template-columns: minmax(0, 1fr); } .narrators .nr-go { align-items: flex-start; } }

/* "Made with the community" on the home page (index.html #community, filled from /api/credits): the players' voices
   as chips, alphabetical, plus a line about the translators. */
.community { margin: 0 0 16px; padding: 14px 18px; border-radius: 6px; background: var(--panel); border: 1px solid var(--panel-line); }
.community h2 { font-family: var(--heading); color: var(--gold); font-size: 1.2rem; margin: 0 0 4px; }
.community p { margin: 0; font-size: 0.95rem; }
.cm-voices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.cm-voices[hidden] { display: none; }
.cm-voices a {
  display: flex; flex-direction: column; min-width: 0; max-width: 100%; padding: 6px 12px; border: 1px solid #c9a24b;
  border-radius: 5px; background: #00000066; color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
.cm-voices a:hover, .cm-voices a:focus-visible { border-color: var(--gold); background: #1b1408; }
.cm-voices strong { color: var(--gold); font-size: 0.95rem; }
.cm-voices span { color: var(--muted); font-size: 0.82rem; }
.community .cm-more { color: var(--muted); font-size: 0.88rem; }

/* Player profiles (/u/<handle>, lib/profiles.js; LOR-181), built around the story of the journey (Mike, 10/11): the
   head, then two tabs, The journey (the story and its chapters beside the road chart) and By the numbers, then "Make
   your own". The owner's bar (public/js/profile.js) sits on top for them only. */
.pf-owner {
  margin: 0 0 18px; padding: 12px 16px; border: 1px dashed var(--gold-soft); border-radius: 5px; background: rgba(216, 178, 90, 0.07);
}
.pf-owner p { margin: 0 0 6px; }
.pf-owner .vp-actions { margin: 0; }
.pf-owner button.btn-small { cursor: pointer; }
.pf-owner .fb-status { margin-top: 6px; }
/* View as a visitor (LOR-302): the bar over the visitor's page stays in view, so Back to my view is always there. */
.pf-visitor { position: sticky; top: 0; z-index: 4; border-style: solid; background: #1b1408; box-shadow: 0 6px 14px #00000080; }
.pf-head { margin-bottom: 14px; }
.pf-head .zone-where { margin: 0 0 4px; font-size: 0.95rem; }
.pf-alliance { border-color: #3f7fe0; }
.pf-horde { border-color: #c4302b; }
.pf-spec { margin: 0 0 4px; color: var(--muted); font-size: 0.92rem; }
.pf-spec strong { color: var(--text); }
.pf-stats {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; padding: 0; list-style: none;
}
.pf-stats li {
  display: flex; flex-direction: column; align-items: center; padding: 8px 6px; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px; box-shadow: inset 0 0 0 1px #000;
}
.pf-stats strong { font: 700 1.35rem/1.2 var(--heading); color: var(--gold); }
.pf-stats span { color: var(--muted); font-size: 0.8rem; }
.pf-story { max-width: 760px; }
.pf-story p { margin: 0 0 12px; font-size: 1.05rem; }
.pf-story-text > p:first-child::first-letter { font: 700 1.6em/1 var(--heading); color: var(--gold); }
/* Listen (LOR-316, public/js/storyvoice.js): the story read aloud; the paragraph being read lights up. */
.pf-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.pf-listen[hidden] { display: none; }
.pf-listen-play {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 20px;
  border: 1px solid var(--gold-soft); background: #000000aa; color: var(--text); font: inherit; font-size: 0.92rem; cursor: pointer;
}
.pf-listen-play:hover, .pf-listen-play:focus-visible { border-color: var(--gold); background: #1b1408; }
.pf-listen-play.pf-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pf-listen-ic {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1b1408;
  color: var(--gold); font-size: 0.8rem; line-height: 1;
}
.pf-listen-len { color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-listen-wait { color: var(--muted); font-size: 0.92rem; }
.pf-story-text p { transition: color 0.3s; }
.pf-story-text.pf-playing p { color: var(--muted); }
.pf-story-text p.pf-reading { color: var(--text); }
/* Willo, the Lore Forever companion (LOR-266, LOR-428): its signature under the story, and its line on /link. */
.pf-signed { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--parchment); font: italic 1rem Georgia, "Times New Roman", serif; }
.pf-signed img { flex: none; padding: 4px; border-radius: 50%; border: 2px solid var(--gold-soft); background: #2a2014; }
.lk-herald { display: flex; align-items: flex-end; gap: 12px; margin: 8px 0 18px; }
.lk-herald img { flex: none; }
.herald-says {
  margin: 0 0 18px; max-width: 560px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--parchment);
  color: var(--ink); font: italic 1.08rem/1.4 Georgia, "Times New Roman", serif; box-shadow: 0 6px 18px #0008;
}
.herald-says code { background: #2a1c0d1a; color: var(--ink); }
@media (max-width: 560px) { .lk-herald img { width: 72px; height: 72px; } }
/* A profile from before the timeline: its owner's note on how to add the chapters and map (lib/profiles.js updateNote). */
.pf-behind {
  margin: 4px 0 18px; padding: 12px 16px; border: 1px solid var(--gold-soft); border-radius: 5px; background: rgba(216, 178, 90, 0.07);
}
.pf-behind h2 { font-family: var(--heading); color: var(--gold); font-size: 1.2rem; margin: 0 0 6px; }
.pf-behind p { margin: 0 0 8px; }
.pf-behind .pf-steps { margin-bottom: 10px; }
.pf-behind .vp-actions { margin: 0; }
.pf-history { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 16px 0 24px; }
.pf-history a { padding: 4px 0; }
/* The road chart (LOR-248, lib/roadchart.js, public/js/roadchart.js): our own chart, not the game's map. Stops and
   names keep one size at every zoom (--z is chart units per screen pixel); roads keep their width. */
.pf-chart { position: relative; max-width: 820px; margin: 0 0 12px; }
.pf-chart-svg {
  display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; touch-action: pan-y; cursor: grab;
  background: radial-gradient(ellipse at 30% 40%, #1b2236 0, transparent 60%), radial-gradient(ellipse at 75% 50%, #1b2236 0, transparent 60%), #0a0d18;
  border: 1px solid var(--panel-line); border-radius: 8px;
}
.pf-chart-svg:active { cursor: grabbing; }
.pf-chart-svg:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.pf-ch-s { transform: scale(var(--z, 1)); }
/* The coasts under it all (LOR-303, lib/coasts.js): our own drawing of the lands, dark enough that the roads stay on
   top. The shallows are a soft line of water around each coast; Zephras Isle floats in the sky, so it's dashed. */
.pf-ch-shallows { fill: none; stroke: #9fb7e017; stroke-width: 6px; stroke-linejoin: round; }
.pf-ch-coast {
  fill: #23201a; fill: color-mix(in srgb, var(--parchment) 10%, var(--bg)); fill-rule: evenodd;
  stroke: #e9d8ad4d; stroke-width: 1px; stroke-linejoin: round;
}
.pf-ch-sky { fill: #9fb7e00f; stroke: #9fb7e059; stroke-dasharray: 3 3; }
/* The continents' names, in the sea off their coasts: 15px on screen, but no more than 30 chart units, so on a phone
   showing the whole chart they stay in their strip of sea. */
.pf-ch-sea { fill: #ffffff26; font: 600 calc(var(--z, 1) * 15px) var(--heading); font-size: min(calc(var(--z, 1) * 15px), 30px); letter-spacing: 0.2em; text-anchor: middle; text-transform: uppercase; }
.pf-ch-dot { fill: #ffffff2e; }
.pf-ch-road { fill: none; stroke: #e9d8adb3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pf-ch-travel { stroke-dasharray: 2 6; stroke: #9fb7e0b3; }
.pf-ch-latest { stroke: var(--gold); }
.pf-ch-stop circle { fill: var(--gold-soft); stroke: var(--bg); stroke-width: 2.5px; }
.pf-ch-c circle { fill: var(--parchment); }
.pf-ch-d circle { fill: #c17bff; }
.pf-ch-stop text { fill: var(--text); font: 600 12px system-ui, sans-serif; paint-order: stroke; stroke: #0a0d18; stroke-width: 3px; }
.pf-ch-stop:hover circle, .pf-ch-stop:focus-visible circle { fill: var(--gold); }
.pf-ch-stop:hover text, .pf-ch-stop:focus-visible text { fill: var(--gold); }
.pf-ch-stop:focus { outline: none; }
.pf-ch-stop:focus-visible circle { stroke: var(--gold); stroke-width: 3px; }
.pf-ch-now circle { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .pf-ch-now circle { animation: pf-now 2.4s ease-in-out infinite; }
}
@keyframes pf-now { 50% { stroke: var(--gold); stroke-width: 5px; } }
.pf-chart-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 1; }
.pf-chart-tools[hidden] { display: none; }
.pf-chart-tools button {
  width: 34px; height: 34px; cursor: pointer; border-radius: 6px; border: 1px solid var(--panel-line);
  background: #000000b3; color: var(--text); font: 600 1.05rem system-ui, sans-serif;
}
.pf-chart-tools button:hover, .pf-chart-tools button:focus-visible { border-color: var(--gold-soft); color: var(--gold); }
.pf-chart figcaption { margin-top: 6px; color: var(--muted); font-size: 0.85rem; }
.pf-card ul { margin: 0 0 6px; padding-left: 18px; }
.pf-card li { margin-bottom: 4px; overflow-wrap: anywhere; }
.pf-where, .pf-rank, .pf-more { color: var(--muted); font-size: 0.85rem; }
.pf-more { margin: 0; }
.pf-n { color: var(--gold-soft); font-weight: 600; font-size: 0.88rem; }
.pf-card cite { font-style: italic; }
.pf-cta h2 { font-family: var(--heading); color: var(--gold); margin: 0 0 8px; }
.pf-cta .vp-actions { align-items: center; }
.pf-what { font-size: 0.92rem; }
/* Item quality, in the game's colors. */
.q0 { color: #9d9d9d; } .q1 { color: #fff; } .q2 { color: #1eff00; } .q3 { color: #4a9eff; } .q4 { color: #c17bff; } .q5 { color: #ff8000; }
/* /account: the profile section. */
.pf-steps { margin: 0 0 12px; padding-left: 20px; }
.pf-steps li { margin-bottom: 4px; }
.fb-field textarea.pf-record { min-height: 110px; font: 0.85rem/1.4 ui-monospace, Consolas, monospace; }
.pf-mine { margin: 0 0 12px; }
.pf-mine strong { color: var(--gold); }
.pf-share { margin: 0 0 14px; }
.pf-link { margin: -6px 0 16px; overflow-wrap: anywhere; }
.btn-small[hidden] { display: none; }
.pf-address { margin: 0 0 16px; }
.pf-addr-label { display: block; margin-bottom: 6px; color: var(--gold-soft); font: 600 0.95rem var(--heading); letter-spacing: 0.02em; }
.pf-addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pf-addr-base { color: var(--muted); font-size: 0.92rem; }
.pf-addr-row input {
  flex: 1 1 140px; min-width: 0; padding: 7px 10px; font: inherit; color: var(--text);
  background: #000000aa; border: 1px solid var(--panel-line); border-radius: 4px;
}
.pf-addr-row input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.pf-addr-row .btn-small { margin: 0; cursor: pointer; }
.pf-del { padding: 0; border: 0; background: none; color: var(--muted); font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.pf-del:hover { color: var(--link); }
/* The companion app (LOR-148): /link, where a player connects it, and Connected apps on /account. */
.lk-code {
  display: inline-block; margin: 4px 0 12px; padding: 8px 16px; border: 1px solid var(--gold-soft); border-radius: 6px;
  font: 700 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.12em; color: var(--gold);
  background: rgba(216, 178, 90, 0.07);
}
.lk-enter input {
  width: 12ch; padding: 7px 10px; font: 700 1.1rem ui-monospace, Consolas, monospace; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text); background: #000000aa; border: 1px solid var(--panel-line); border-radius: 4px;
}
.lk-enter .pf-addr-row { margin-bottom: 8px; }
.ac-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 0;
          border-top: 1px solid var(--line); }
.ac-app p { margin: 0; }
.ac-app strong { color: var(--gold-soft); }
/* Plans (LOR-252): /plans, a card per plan, yours outlined in gold, and the finest-voice pack under them (.pl-pack,
   styled as .pl-now); and the plan card at the top of /account. */
.fb-page.pl-page { max-width: 1060px; }
.pl-now { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--gold-soft); background: rgba(216, 178, 90, 0.07); }
.pl-now[hidden] { display: none; }
.pl-now h2 { margin: 0 0 4px; font: 600 1.05rem var(--heading); color: var(--gold); }
.pl-now p { margin: 0 0 8px; }
.pl-now p:last-child { margin-bottom: 0; }
.pl-thanks { margin: 12px 0; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 16px; }
.pl-card { display: flex; flex-direction: column; padding: 16px 16px 14px; border: 1px solid var(--panel-line); border-radius: 5px;
           background: var(--panel); box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5); }
.pl-card.pl-mine { border-color: var(--gold); }
.pl-card h3 { font-family: var(--heading); color: var(--gold); margin: 0 0 2px; font-size: 1.15rem; }
.pl-price { margin: 0 0 8px; color: var(--gold-soft); font-weight: 600; }
.pl-price s { color: var(--muted); font-weight: 400; }
.pl-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--gold-soft); border-radius: 10px;
          color: var(--gold); font-size: 0.75rem; font-weight: 600; vertical-align: 1px; }
.pl-offer { margin: -4px 0 8px; color: var(--muted); font-size: 0.85rem; }
.pl-pending { display: block; margin: 0 0 6px; color: var(--muted); font-size: 0.88rem; }
.pl-confirm { padding: 10px 12px; border: 1px solid var(--gold-soft); border-radius: 4px; background: rgba(216, 178, 90, 0.08);
              font-size: 0.92rem; }
.pl-confirm p { margin: 0 0 8px; }
.pl-confirm .pl-confirm-go { margin: 0; }
.pl-confirm .btn-small { cursor: pointer; }
.pl-confirm .btn-small:disabled { opacity: 0.6; cursor: wait; }
.pl-card ul { margin: 0 0 14px; padding-left: 18px; font-size: 0.92rem; }
.pl-card li { margin-bottom: 3px; }
.pl-card .pl-go { margin: auto 0 0; }
.pl-card .pl-go .btn-small, .pl-pack .pl-go .btn-small { cursor: pointer; }
.pl-card .pl-go .btn-small:disabled, .pl-pack .pl-go .btn-small:disabled { opacity: 0.6; cursor: wait; }
.ac-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 18px 0 0;
           padding: 14px 18px; border: 1px solid #c9a24b; border-radius: 5px;
           background: linear-gradient(90deg, rgba(216, 178, 90, 0.14), rgba(8, 10, 22, 0.94) 70%); }
.ac-plan[hidden] { display: none; }
.ac-plan.ac-plan-paid { border-color: var(--panel-line); background: var(--panel); }
.ac-plan > div { flex: 1 1 320px; }
.ac-plan h2 { margin: 0 0 2px; font: 700 1.1rem var(--heading); color: var(--gold); }
.ac-plan p { margin: 0; color: var(--text); font-size: 0.95rem; }
.ac-plan .btn-small { margin: 0; white-space: nowrap; }
.ac-plan-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* Share Willo on /account's Willo tab (lib/referrals.js): the player's link beside Copy link and New link. */
.ac-share-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ac-share-link code { padding: 5px 9px; border: 1px solid var(--panel-line); border-radius: 4px; background: rgba(8, 10, 22, 0.6);
  overflow-wrap: anywhere; }
.ac-share-link .btn-small { margin: 0; }
/* Inviting friends (lib/referrals.js shareWords, /account and the profile): Patrick's "7 / 10 friends joined" line and
   its bar toward the next free month, in the game's gold. */
.ac-invite-tally, .pf-share-tally { margin: 6px 0; }
.ac-invite-tally strong, .pf-share-tally strong { color: var(--gold); font-weight: 600; }
.invite-bar { display: block; width: 100%; max-width: 420px; height: 10px; margin: 0 0 12px; border: 1px solid var(--panel-line);
  border-radius: 5px; background: rgba(8, 10, 22, 0.6); appearance: none; overflow: hidden; }
.invite-bar::-webkit-progress-bar { background: rgba(8, 10, 22, 0.6); }
.invite-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.invite-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.invite-bar[hidden] { display: none; }
.ac-rewards { margin: 4px 0 0; padding-left: 1.2em; color: var(--muted); font-size: 0.92rem; }
/* The creator program (/creators, lib/referrals.js creatorDashboard): its numbers as tiles, the payout box and the
   month-by-month table, readable at phone width. */
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 12px 0 16px; padding: 0;
  list-style: none; }
.cp-tiles li { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px; box-shadow: inset 0 0 0 1px #000; }
.cp-tiles strong { font: 700 1.35rem/1.2 var(--heading); color: var(--gold); }
.cp-tiles span { color: var(--muted); font-size: 0.8rem; }
.cp-box { margin: 0 0 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px; }
.cp-box h3 { margin: 0 0 8px; font: 600 1.05rem var(--heading); color: var(--gold-soft); }
.cp-box p { margin: 4px 0; }
.cp-table-wrap { overflow-x: auto; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cp-table th, .cp-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.cp-table th:first-child, .cp-table td:first-child { text-align: left; }
.cp-steps { padding-left: 1.3em; }
.cp-steps li { margin: 0 0 6px; }
.cp-form select { max-width: 100%; }
[data-cp][hidden] { display: none; }
@media (max-width: 480px) { .cp-table th, .cp-table td { padding: 6px 4px; font-size: 0.84rem; } }
/* Willo, your way (/willo, LOR-447): the style presets as cards, your own words, and a Legend player's tales. */
.wl-page h2 { margin: 0 0 12px; font: 600 1.2rem var(--heading); color: var(--gold); }
.wl-page [hidden] { display: none; }
.wl-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 0 0 16px; }
.wl-preset { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; gap: 4px 8px; padding: 12px 14px;
             cursor: pointer; border: 1px solid var(--panel-line); border-radius: 5px; background: #00000066; font-size: 0.9rem; }
.wl-preset span { grid-column: 1 / -1; }
.wl-preset:has(:checked) { border-color: var(--gold); }
.wl-preset:has(:focus-visible) { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.wl-preset input { accent-color: #c9a24b; margin: 0; }
.wl-preset strong { color: var(--gold-soft); font: 600 1rem var(--heading); }
.wl-preset:has(:checked) strong { color: var(--gold); }
.wl-preset span { color: var(--muted); }
.fb-field small.wl-over, .wl-why { color: #ff7b6b; }
.wl-why { margin: 4px 0 0; font-size: 0.88rem; }
.wl-found { list-style: none; margin: -8px 0 14px; padding: 0; }
.wl-found:empty { display: none; }
.wl-pick { display: flex; flex-wrap: wrap; gap: 0 10px; width: 100%; padding: 7px 10px; font: inherit; text-align: left;
           color: var(--text); background: #00000066; border: 1px solid var(--panel-line); border-top: 0; cursor: pointer; }
.wl-found li:first-child .wl-pick { border-top: 1px solid var(--panel-line); border-radius: 4px 4px 0 0; }
.wl-pick:hover, .wl-pick:focus-visible { border-color: var(--gold-soft); color: var(--gold); }
.wl-pick span { color: var(--muted); font-size: 0.88rem; }
.wl-edit { margin: 0 0 14px; }
.wl-edit .fb-actions .btn-small { margin: 0; cursor: pointer; }
.wl-page .fb-actions .btn-small { cursor: pointer; }
.wl-page .btn-small:disabled { opacity: 0.6; cursor: wait; }
#wl-tale-status { margin: 0 0 12px; }
.wl-list { list-style: none; margin: 0; padding: 0; }
.wl-tale { padding: 10px 0; border-top: 1px solid var(--line); }
.wl-tale p { margin: 0; }
.wl-tale-head { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.wl-tale-head strong { color: var(--gold-soft); }
.wl-tale-head span { color: var(--muted); font-size: 0.88rem; }
.wl-tale .wl-tale-text { margin: 4px 0; overflow-wrap: anywhere; }
.wl-tale .wl-tale-tools { display: flex; gap: 8px; margin-top: 6px; }
.wl-tale-tools .btn-small { margin: 0; cursor: pointer; }
.pf-auto { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--gold-soft); background: rgba(216, 178, 90, 0.07); }
.pf-auto[hidden] { display: none; }
/* /account signed in: who you are under the title, then the tabs (they look like a profile's), staying at the top of
   the window as you scroll; a phone scrolls them sideways if they don't fit. */
.ac-signed { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.ac-signed strong { color: var(--text); font-weight: 600; }
.ac-tabs { position: sticky; top: 0; z-index: 4; display: flex; gap: 2px; margin: 18px 0 0; overflow-x: auto;
           scrollbar-width: none; border-bottom: 1px solid var(--line); background: rgba(13, 11, 9, 0.96); }
.ac-tabs::-webkit-scrollbar { display: none; }
.ac-tabs a {
  flex: none; margin-bottom: -1px; padding: 10px 16px 9px; border-bottom: 2px solid transparent; color: var(--parchment);
  text-decoration: none; font: 600 0.95rem var(--heading); letter-spacing: 0.03em;
}
.ac-tabs a:hover { color: var(--gold); }
.ac-tabs a[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.ac-tabs a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -2px; }
.ac-tabs a[hidden] { display: none; }
@media (max-width: 480px) {
  .ac-tabs { justify-content: space-between; }
  .ac-tabs a { padding: 10px 7px 9px; font-size: 0.78rem; letter-spacing: 0.01em; }
}
.ac-panel[hidden] { display: none; }
.ac-panel > .fb-form, .ac-panel > .ac-lead { scroll-margin-top: 56px; }   /* below the stuck tabs */
.ac-lead { margin: 20px 0 0; color: var(--muted); }
.ac-pf-head { margin: 0 0 12px; }
.ac-pf-name { margin: 0; color: var(--muted); }
.ac-pf-name strong { display: block; font: 700 1.35rem/1.25 var(--heading); color: var(--gold); }
.ac-pf-when { margin: 2px 0 0; color: var(--muted); font-size: 0.88rem; }
.ac-sub { margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--gold-soft);
          font: 600 1rem var(--heading); letter-spacing: 0.02em; }
.ac-go { margin: 12px 0 0; }
@media (max-width: 680px) { .pf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pf-stats strong { font-size: 1.1rem; } }
/* The journey in numbers (lib/profile-stats.js, LOR-246): tiles, a few lines told for fun, where the miles went and
   foes by kind. */
.pf-nums { margin-top: 18px; }
.pf-nums .pf-stats { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); margin-bottom: 10px; }
.pf-fun { margin: 0 0 10px; padding-left: 20px; }
.pf-fun li { margin-bottom: 3px; }
.pf-fun li::marker { color: var(--gold-soft); }
@media (min-width: 900px) { .pf-fun { columns: 2; column-gap: 32px; } .pf-fun li { break-inside: avoid; } }
.pf-nums-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 4px 24px; }
.pf-nums-lists h3 { margin: 0 0 4px; font: 600 0.95rem var(--heading); color: var(--gold-soft); }
.pf-nums-lists ul { margin: 0 0 6px; padding-left: 18px; }
.pf-nums-lists li { margin-bottom: 2px; overflow-wrap: anywhere; }
.pf-nums .pf-stats .pf-sub, .pf-nums .pf-stats .pf-dist { color: var(--gold-soft); font-size: 0.78rem; }
.pf-units { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.pf-units[hidden] { display: none; }
.pf-units .btn-small { margin: 0; cursor: pointer; }
.pb-dlg {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--panel-line); border-radius: 6px; background: #080a16; color: var(--text); box-shadow: 0 10px 40px #000;
}
.pb-dlg::backdrop { background: #000000cc; }
.pb-dlg figure { margin: 0; }
.pb-big { display: block; width: 100%; height: auto; max-height: calc(100vh - 220px); object-fit: contain; background: #000; }
.pb-dlg figcaption { padding: 10px 16px 0; }
.pb-dlg figcaption p { margin: 0 0 4px; overflow-wrap: anywhere; }
.pb-dlg figcaption p:empty { display: none; }
.pb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 16px 14px; }
.pb-bar .btn-small { margin: 0; min-width: 44px; cursor: pointer; }
.pb-bar .btn-small[hidden] { display: none; }
.pb-x {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 4px;
  background: none; color: var(--muted); cursor: pointer; font: 400 1.6rem/1 system-ui, sans-serif;
}
.pb-x:hover, .pb-x:focus-visible { color: var(--gold); background: #ffffff10; }
.pb-status { margin: 0; padding: 0 16px 14px; }

/* The profile, told (Mike, 10/11; lib/profiles.js, lib/chapters.js, public/js/journey.js). The head: Listen and Share
   at its right (under it on a phone), and a line of counts. */
.pf-head { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pf-head-main { flex: 1 1 260px; min-width: 0; }
.pf-head-acts { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; margin-left: auto; max-width: 360px; }
.pf-head-acts .btn-small { margin: 0; cursor: pointer; }
.pf-head-acts .pf-listen { margin: 0; }
.pf-head-acts .fb-status { flex-basis: 100%; margin: 2px 0 0; font-size: 0.9rem; }
@media (max-width: 620px) { .pf-head-acts { margin-left: 0; max-width: none; } }
.pf-seen { margin: 0 0 4px; color: var(--muted); font-size: 0.9rem; }
.pf-glance { flex-basis: 100%; margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.pf-owner strong { color: var(--gold); }
.pf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pf-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* The two tabs, switched in place (public/js/journey.js); without it both panels show, one after the other. */
.pf-tabs { display: flex; gap: 2px; margin: 8px 0 0; border-bottom: 1px solid var(--line); }
.pf-tabs[hidden] { display: none; }
.pf-tabs a {
  margin-bottom: -1px; padding: 10px 16px 9px; border-bottom: 2px solid transparent; color: var(--parchment); text-decoration: none;
  font: 600 0.95rem var(--heading); letter-spacing: 0.03em;
}
.pf-tabs a:hover { color: var(--gold); }
.pf-tabs a[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.pf-tabs a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -2px; }
.pf-panel[hidden] { display: none; }
.pf-nums.pf-panel { margin-top: 0; padding-top: 20px; }
.pf-nums h2 { margin-top: 0; }

/* The journey: the story and chapters, and beside them on a wide screen the road chart, staying in view and following
   the chapter being read. Narrower, the chart comes after the story and each chapter has its own small one. */
.pf-atlas { display: flex; flex-direction: column; }
.pf-atlas-main { display: contents; }
.pf-story { order: 1; max-width: 68ch; }
.pf-atlas-map { order: 2; margin: 4px 0 8px; }
.pf-chapters { order: 3; }
.pf-history, .pf-more-pics { order: 4; }
.pf-story-text p { font: 1.08rem/1.75 Georgia, "Times New Roman", serif; }
.pf-story-text > p:first-child::first-letter { float: left; margin: 0.06em 0.1em 0 0; font: 700 3.2em/0.82 var(--heading); color: var(--gold); }
.pf-atlas-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; }
.pf-atlas-title { font: 700 1.05rem/1.3 var(--heading); color: var(--gold); }
.pf-atlas-sub { color: var(--muted); font-size: 0.85rem; }
.pf-atlas-map .pf-chart { max-width: none; margin: 0; }
@media (min-width: 1000px) {
  /* Room for a big chart: the profile is wider than other pages, and the chart takes what the reading doesn't. */
  main:has(.pf-atlas) { max-width: 1360px; }
  .pf-atlas { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .pf-atlas-main { display: block; min-width: 0; }
  .pf-atlas-solo { grid-template-columns: minmax(0, 1fr); }
  .pf-atlas-map { align-self: stretch; margin: 0; padding-top: 22px; }
  /* Level with the middle of the window once the page scrolls (--pf-half: half its height, public/js/journey.js). */
  .pf-atlas-stick { position: sticky; top: max(16px, calc(50vh - var(--pf-half, 260px))); }
  main:has(.pf-visitor) .pf-atlas-stick { top: max(110px, calc(50vh - var(--pf-half, 260px))); }   /* under the visitor-view bar */
  .pf-atlas:not(.pf-atlas-solo) .pf-ch-map { display: none; }
}
/* The chart following a chapter (public/js/roadchart.js): its roads and lands lit, the rest stepping back. Beside the
   reading, names show for the chapter's lands (and the land under the pointer) and the chapter numbers otherwise. */
.pf-ch-road, .pf-ch-stop { transition: opacity 0.3s, stroke 0.3s; }
.pf-following .pf-ch-road:not(.pf-ch-on) { opacity: 0.3; }
.pf-following .pf-ch-stop:not(.pf-ch-on) { opacity: 0.45; }
.pf-following .pf-ch-pins { display: none; }
.pf-ch-road.pf-ch-on { stroke: var(--gold); }
.pf-ch-on circle { fill: var(--gold); }
.pf-ch-on text { fill: var(--gold); }
@media (min-width: 1000px) {
  .pf-atlas-map .pf-ch-stop text { display: none; }
  .pf-atlas-map .pf-ch-stop:hover text, .pf-atlas-map .pf-ch-stop:focus-visible text, .pf-atlas-map .pf-ch-stop.pf-ch-on text,
  .pf-atlas-map .pf-ch-stop.pf-ch-now text { display: inline; }
  .pf-following .pf-ch-stop.pf-ch-now:not(.pf-ch-on) text { display: none; }
}
.pf-ch-pin rect { fill: var(--gold-soft); stroke: #0a0d18; stroke-width: 1.5px; }
.pf-ch-pin text { fill: var(--ink); font: 700 11px system-ui, sans-serif; }
.pf-ch-pin:hover rect, .pf-ch-pin:focus-visible rect { fill: var(--gold); }
.pf-ch-pin:focus { outline: none; }

/* Chapters (lib/chapters.js): the newest in full, the older ones a line each. */
.pf-chapters { margin-top: 6px; }
.pf-ch { padding: 22px 0 20px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
main:has(.pf-visitor) .pf-ch, main:has(.pf-visitor) .pf-chx { scroll-margin-top: 110px; }
.pf-eyebrow { margin: 0; color: var(--gold-soft); font: 600 0.74rem/1.3 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-ch h3 { margin: 4px 0; font: 700 1.4rem/1.25 var(--heading); color: var(--parchment); letter-spacing: 0.01em; text-wrap: balance; }
.pf-route { margin: 0; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.pf-ch-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pf-ch-map { order: -1; max-width: 520px; }
.pf-ch-text { min-width: 0; }
.pf-mini { cursor: default; touch-action: auto; border-radius: 6px; }
.pf-mini .pf-ch-ctx { stroke: #e9d8ad26; stroke-width: 1px; }
.pf-mini .pf-ch-been { fill: #e9d8ad55; }
@media (min-width: 760px) and (max-width: 999.98px) {
  .pf-ch-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 24px; align-items: start; }
  .pf-ch-map { order: 0; }
}
.pf-sum { margin: 0 0 10px; max-width: 62ch; font: italic 1.04rem/1.6 Georgia, "Times New Roman", serif; color: var(--text); }
.pf-hi { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-hi li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.93rem; line-height: 1.45; }
.pf-hi li .pf-ic { margin-top: 2px; color: var(--muted); }
.pf-hi span { color: #cfc4b1; overflow-wrap: anywhere; }
.pf-hi strong { color: var(--text); font-weight: 650; }
.pf-h-level .pf-ic { color: var(--gold) !important; } .pf-h-dungeon .pf-ic { color: #c79bff !important; }
.pf-h-land .pf-ic { color: var(--parchment) !important; } .pf-h-quest .pf-ic { color: var(--gold-soft) !important; }
.pf-h-foe .pf-ic { color: #ffb36b !important; } .pf-h-death .pf-ic { color: #ef7a6c !important; }
.pf-h-find .pf-ic { color: #4a9eff !important; } .pf-h-rep .pf-ic { color: #8fd19e !important; }
.pf-h-mount .pf-ic, .pf-h-book .pf-ic { color: var(--parchment) !important; }
.pf-hit { animation: pf-hit-fade 2.4s ease-out; }
@keyframes pf-hit-fade { 0%, 40% { background: rgba(216, 178, 90, 0.14); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pf-hit { animation: none; background: rgba(216, 178, 90, 0.1); } }

/* A chapter's pictures (lib/pictures.js pictureLink); the last one shown says how many more there are. */
.pf-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 12px 0 0; max-width: 620px; }
.pf-shots-one { grid-template-columns: minmax(0, 420px); }
.pf-picture { position: relative; display: block; overflow: hidden; border: 1px solid var(--panel-line); border-radius: 6px; background: #000; }
.pf-picture[hidden] { display: none; }
.pf-picture img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pf-picture:hover { border-color: var(--gold-soft); }
.pf-picture:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.pf-picture-n { position: absolute; inset: 0; display: grid; place-items: center; background: #000000a6; color: var(--gold); font: 700 1.3rem var(--heading); }
.pf-more-pics { padding: 18px 0 4px; border-top: 1px solid var(--line); }
.pf-more-pics h3 { margin: 0 0 6px; font: 700 1.1rem var(--heading); color: var(--gold); }
.pf-note { margin: 0 0 6px; color: var(--muted); font-size: 0.86rem; }

/* Every moment of a chapter, folded; each under the land it happened in. */
.pf-all { margin-top: 14px; }
.pf-all > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px; cursor: pointer; list-style: none;
  border: 1px solid var(--panel-line); border-radius: 17px; background: #00000066; color: var(--link); font-size: 0.88rem;
}
.pf-all > summary::-webkit-details-marker { display: none; }
.pf-all > summary::before { content: "\25B8"; color: var(--muted); transition: transform 0.2s; }
.pf-all[open] > summary::before { transform: rotate(90deg); }
.pf-all > summary:hover { border-color: var(--gold-soft); }
.pf-all > summary:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.pf-visit { margin: 12px 0 0; }
.pf-visit h4 { margin: 0 0 4px; color: var(--gold-soft); font: 600 0.76rem/1.3 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.pf-visit ul { margin: 0; padding: 0; list-style: none; columns: 2 250px; column-gap: 24px; }
.pf-visit li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; padding: 2px 4px; border-radius: 4px; font-size: 0.87rem; line-height: 1.4; break-inside: avoid; color: #d6ccba; }
.pf-visit li .pf-ic { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.pf-visit li:focus { outline: none; }
.pf-visit .pf-sub { color: var(--muted); font-size: 0.8rem; }
.pf-visit a { text-underline-offset: 3px; }
.pf-out::after { content: " \2197"; font-size: 0.8em; color: var(--muted); }   /* leaves the site (LOR-263) */
.pf-mk-levels .pf-ic { color: var(--gold) !important; } .pf-mk-bosses .pf-ic { color: #c79bff !important; }
.pf-mk-deaths .pf-ic { color: #ef7a6c !important; } .pf-mk-quests .pf-ic { color: var(--gold-soft) !important; }
.pf-mk-loot .pf-ic { color: #4a9eff !important; } .pf-mk-kills .pf-ic { color: #ffb36b !important; }

/* Older chapters, a line each, opening to their summary, highlights and pictures. */
.pf-earlier { padding: 20px 0 6px; border-top: 1px solid var(--line); }
.pf-earlier-title { margin: 0 0 8px; color: var(--gold-soft); font: 600 0.78rem/1.3 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-chx-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pf-chx > summary {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 8px;
  border-radius: 6px; cursor: pointer; list-style: none;
}
.pf-chx > summary::-webkit-details-marker { display: none; }
.pf-chx > summary:hover { background: #ffffff0d; }
.pf-chx > summary:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.pf-chx-n { display: inline-grid; place-items: center; width: 24px; height: 24px; align-self: center; border-radius: 50%; background: var(--gold-soft); color: var(--ink); font: 700 0.75rem/1 system-ui, sans-serif; }
.pf-chx-t { font: 600 0.98rem/1.3 var(--heading); color: var(--parchment); overflow-wrap: anywhere; }
.pf-chx-d { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.pf-chx-body { padding: 4px 8px 14px 46px; }
@media (max-width: 520px) { .pf-chx > summary { grid-template-columns: 28px minmax(0, 1fr); } .pf-chx-d { grid-column: 2; } .pf-chx-body { padding-left: 8px; } }

/* By the numbers: the record's lists sit with the journey's. */
.pf-card h3 { margin: 0 0 4px; font: 600 0.95rem var(--heading); color: var(--gold-soft); }
.pf-nums .pf-stats { margin-bottom: 16px; }

/* What's new (LOR-222): the home page's "New in" strip under the header and the What's new page (whats-new.html),
   both written by scripts/changelog.py from CHANGELOG.md. header.js hides the strip once you've closed it or seen
   What's new, and tags the versions out since your last visit. */
.newbar {
  position: relative; border-bottom: 1px solid #2c3a22;
  background: linear-gradient(90deg, #0f1a0c, #11100b 40%, #11100b 60%, #0f1a0c);
}
.newbar[hidden] { display: none; }
.newbar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 48px; padding-top: 6px;
  padding-bottom: 6px; padding-right: 56px; font-size: 0.94rem;
}
.newbar .tag { margin-left: 0; }
.newbar-in a { color: var(--text); text-decoration: none; }
.newbar-in a:hover, .newbar-in a:focus-visible { color: var(--gold); }
.newbar-in .newbar-all { color: var(--link); font-weight: 600; text-decoration: underline; }
.newbar-sep { color: var(--panel-line); }
.newbar-x {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer;
  font: 400 1.5rem/1 system-ui, sans-serif;
}
.newbar-x:hover, .newbar-x:focus-visible { color: var(--gold); background: #ffffff10; }
.newbar-x:focus-visible, .newbar-in a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
@media (max-width: 760px) { .newbar-more, .newbar-sep { display: none; } }
@media (max-width: 480px) { .newbar-in > a:not(.newbar-all) { display: none; } }   /* phones: one line, the tag and the link */
.wn-page { max-width: 980px; padding-top: 28px; padding-bottom: 12px; }
.wn-page h1 { font-size: 2.2rem; }
.wn-page .pitch { color: var(--text); }
.wn-ver { padding: 16px 0; border-bottom: 1px solid var(--line); }
.wn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.wn-head h2 { margin: 0; font-family: var(--heading); color: var(--gold); font-size: 1.7rem; }
.wn-date { color: var(--muted); }
.wn-ver .tag { align-self: center; margin-left: 0; }
.wn-hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 16px 0 14px; }
.wn-card {
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.wn-card h3 { margin: 0 0 6px; font-family: var(--heading); color: var(--gold); font-size: 1.06rem; line-height: 1.3; }
.wn-card p { margin: 0; font-size: 0.93rem; }
.wn-all summary { padding: 4px 0; cursor: pointer; color: var(--link); font: 600 1rem var(--heading); }
.wn-all ul { margin: 10px 0 4px; padding-left: 20px; }
.wn-all li { margin-bottom: 6px; }
.wn-ver + .wn-ver summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: inherit; font: inherit; list-style: none; }
.wn-ver + .wn-ver summary::-webkit-details-marker { display: none; }
.wn-ver + .wn-ver summary h2 { margin: 0; font-family: var(--heading); color: var(--gold-soft); font-size: 1.25rem; }
.wn-n { margin-left: auto; color: var(--link); font-size: 0.9rem; text-decoration: underline; }
.wn-n::after { content: " \25BE"; }
.wn-all[open] .wn-n::after { content: " \25B4"; }
.wn-page .signup { margin-top: 28px; }

/* FAQ (faq.html, LOR-42) */
.faq-page { max-width: 820px; padding-top: 28px; padding-bottom: 12px; }
.faq-page h1 { font-size: 2.2rem; }
.faq-page .pitch { color: var(--text); }
.faq-toc ul { margin: 14px 0 8px; padding-left: 20px; columns: 2 300px; column-gap: 28px; }
.faq-toc li { margin-bottom: 6px; break-inside: avoid; }
.faq-q { padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.faq-q h2 { margin: 0 0 8px; font-family: var(--heading); color: var(--gold); font-size: 1.25rem; line-height: 1.35; }
.faq-q p { margin: 0 0 10px; line-height: 1.6; }
.faq-more { margin-top: 18px; color: var(--muted); }

/* See your journey (the sign-in pull, LOR-222): the home page's section under the downloads, /account signed out,
   and "This could be your page" under a profile. The sample sheet is an example profile (index.html, account.html);
   its avatar, road and tiles reuse the profile page's pieces. */
.journey-pull {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 28px 52px; align-items: center;
  padding: 36px 0 30px;
}
@media (max-width: 900px) { .journey-pull { grid-template-columns: minmax(0, 1fr); } }
.journey-pull h2 { font-family: var(--heading); color: var(--gold); font-size: 1.6rem; margin: 0 0 10px; }
.jp-text > p { max-width: 560px; margin: 0 0 14px; font-size: 1.05rem; }
.jp-steps { margin: 0; padding: 0; list-style: none; counter-reset: jp; }
.jp-steps li { counter-increment: jp; position: relative; padding: 2px 0 2px 38px; margin-bottom: 8px; }
.jp-steps li::before {
  content: counter(jp); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.82rem var(--heading); color: #1a1208;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
}
.jp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.jp-btn { padding: 12px 26px; font-size: 1.02rem; }
.jp-note { color: var(--muted); font-size: 0.86rem; }
.sample-sheet {
  position: relative; margin: 0; padding: 20px 22px 18px; background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 6px; box-shadow: inset 0 0 0 1px #000, 0 6px 20px rgba(0, 0, 0, 0.55);
}
.sample-tag {
  position: absolute; top: -12px; right: 18px; padding: 1px 10px; border: 1px solid #c9a24b99; border-radius: 3px;
  background: #2a2010; color: var(--gold); font: 600 0.68rem/1.7 system-ui, sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ss-head { display: flex; align-items: center; gap: 16px; }
.ss-avatar { width: 64px; height: 64px; font-size: 1.8rem; }
.ss-name { margin: 0; font: 700 1.6rem/1.15 var(--heading); color: var(--gold); }
.ss-sub { margin: 3px 0 0; color: var(--muted); font-size: 0.92rem; }
.ss-sub strong { color: var(--text); font-weight: 600; }
.ss-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; padding: 0; list-style: none; }
.ss-stats li {
  display: flex; flex-direction: column; align-items: center; padding: 8px 4px; text-align: center;
  background: #00000066; border: 1px solid var(--panel-line); border-radius: 5px; box-shadow: inset 0 0 0 1px #000;
}
.ss-stats strong { font: 700 1.25rem/1.2 var(--heading); color: var(--gold); }
.ss-stats span { color: var(--muted); font-size: 0.76rem; line-height: 1.3; }
.ss-road { margin-bottom: 14px; }
.ss-road li { font-size: 0.84rem; }
.ss-story { margin: 0; font: italic 1rem/1.55 Georgia, "Times New Roman", serif; color: var(--text); }
@media (max-width: 420px) { .ss-stats { gap: 6px; } .ss-stats strong { font-size: 1.05rem; } .ss-name { font-size: 1.35rem; } }
.ac-out:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px 36px; align-items: start; margin: 20px 0;
}
@media (max-width: 860px) { .ac-out:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }
.ac-out .ac-card { margin: 0; }
.ac-out h2 { font-family: var(--heading); color: var(--gold); margin: 0 0 14px; }
.ac-steps { margin: 0; padding: 0; list-style: none; counter-reset: ac; }
.ac-steps li { counter-increment: ac; position: relative; padding: 2px 0 0 44px; margin-bottom: 16px; }
.ac-steps li::before {
  content: counter(ac); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.9rem var(--heading); color: var(--gold-soft); border: 1px solid var(--gold-soft);
}
.ac-steps li.ac-now::before { color: #1a1208; border-color: transparent; background: linear-gradient(180deg, var(--gold), var(--gold-soft)); }
.ac-steps strong { display: block; }
.ac-steps span { display: block; color: var(--muted); font-size: 0.92rem; }
.ac-steps .ac-google { margin: 10px 0 0; }
.ac-sample-note { margin: 4px 0 22px; color: var(--muted); font-size: 0.9rem; text-align: center; }
.pf-mine {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px 36px; align-items: center;
  margin: 28px 0 8px; padding: 22px 24px; border: 1px dashed #c9a24b99; border-radius: 6px; background: rgba(8, 10, 22, 0.7);
}
@media (max-width: 860px) { .pf-mine { grid-template-columns: minmax(0, 1fr); } }
.pf-mine h2 { margin: 0 0 8px; }
.pf-ghost .ss-avatar { border: 2px dashed #c9a24b88; background: #00000066; color: #c9a24b99; }
.pf-ghost .ss-name { color: #d8b25a99; }
.pf-ghost .ss-stats strong { color: #d8b25a66; }
.ss-stats-4 { margin-bottom: 0; }
.fb-page.ac-wide { max-width: 1060px; }   /* /account signed out: the steps and the example side by side */

/* Contribution badges on a profile (lib/profiles.js badgeLine, LOR-239): Narrator, Translator, Contributed N lines. */
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.pf-badge {
  padding: 1px 9px; border: 1px solid #c9a24b99; border-radius: 10px; background: rgba(216, 178, 90, 0.08);
  color: var(--gold-soft); font: 600 0.75rem/1.6 system-ui, sans-serif; letter-spacing: 0.02em; text-decoration: none;
}
.pf-badge:hover, .pf-badge:focus-visible { border-color: var(--gold); color: var(--gold); }

/* Contributors (/contributors, lib/credits.js; LOR-239): narrator cards as before, then translators and text finders
   as plain alphabetical lists, never a ranking. */
.ct-jump { margin: 0 0 4px; font-size: 0.95rem; }
.ct-list { margin: 0; padding: 0; list-style: none; }
.ct-list li { padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; overflow-wrap: anywhere; }
.ct-name { color: var(--text); }
.ct-what, .ct-n { color: var(--muted); font-size: 0.88rem; }
.ct-links { margin-left: 4px; font-size: 0.88rem; }
.vpr-links .ct-links { margin-left: 0; font-size: inherit; }
@media (min-width: 720px) { .ct-list { columns: 2; column-gap: 32px; } }

/* Forever text progress (/contribute/progress, lib/progress.js; LOR-238): the headline counts, the live counters
   (public/js/contribute-progress.js), a bar per zone with narrated drawn over captured, and the Wanted list by zone.
   Phone first. */
.pg-hero {
  margin: 18px 0 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.pg-kicker { margin: 0 0 4px; font: 600 0.78rem var(--heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); }
.pg-big { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 0; font-size: 1.05rem; }
.pg-big strong { margin-right: 4px; font: 700 2rem/1.15 var(--heading); color: var(--gold); }
.pg-of { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; }
.pf-stats.pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-legend { margin: 0 0 6px; color: var(--muted); font-size: 0.85rem; }
.pg-key { display: inline-block; width: 14px; height: 8px; margin: 0 4px 0 12px; border-radius: 2px; vertical-align: middle; }
.pg-key:first-child { margin-left: 0; }
.pg-key-text, .pg-text { background: linear-gradient(90deg, #8a6d2c, var(--gold)); }
.pg-key-voice, .pg-voice { background: #4a9eff; }   /* rare blue */
.pg-zones { margin: 0; padding: 0; list-style: none; }
.pg-zone { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pg-zone-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-bottom: 4px; }
.pg-zone-name { font-weight: 600; }
.pg-zone-n { color: var(--muted); font-size: 0.88rem; }
.pg-bar { position: relative; height: 8px; border-radius: 4px; background: #00000066; border: 1px solid var(--panel-line); overflow: hidden; }
.pg-bar span { position: absolute; top: 0; bottom: 0; left: 0; }
.pg-wanted { display: grid; gap: 8px; }
.pg-wzone { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 5px; }
.pg-wzone summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-height: 44px; padding: 10px 14px; cursor: pointer; list-style: none;
}
.pg-wzone summary::-webkit-details-marker { display: none; }
.pg-wzone summary::before { content: "\25B8"; color: var(--gold-soft); }
.pg-wzone[open] summary::before { content: "\25BE"; }
.pg-wname { font: 600 1rem var(--heading); color: var(--gold); }
.pg-wmeta { color: var(--muted); font-size: 0.85rem; }
.pg-wzone ul { margin: 0; padding: 0 14px 10px; list-style: none; }
.pg-wzone li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid #ffffff0d; overflow-wrap: anywhere; }
.pg-lvl {
  flex: none; min-width: 2.4em; padding: 0 4px; text-align: center; border: 1px solid #c9a24b66; border-radius: 3px;
  color: var(--gold-soft); font: 600 0.78rem/1.5 system-ui, sans-serif;
}
.pg-wzone .pf-more { padding: 0 14px 10px; }
@media (min-width: 560px) {
  .pf-stats.pg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-big strong { font-size: 2.4rem; }
  .pg-hero { padding: 18px 22px; }
}

/* Recording choices: each file has its own count, compressed size and coverage. */
.dl-page [hidden] { display: none !important; }
.dl-page, .dl-page * { overflow-wrap: anywhere; }
.dl-release { margin: 0 0 12px; font-weight: 600; }
.dl-recommended { padding-top: 12px; padding-bottom: 16px; }
.dl-size-note { color: var(--muted); font-size: 0.85rem; margin: 10px 0 0; }
.dl-voice { display: block; }
.dl-voice-head { align-items: flex-start; }
.dl-voice-head > div { min-width: 0; }
.dl-recording { align-items: flex-start; padding: 16px 0; }
.dl-file-main { flex: 1 1 auto; }
.dl-recording .dl-file-name { margin: 0 0 6px; font-family: inherit; font-size: 1rem; color: var(--text); }
.dl-recording .dl-file-meta { font-size: 0.9rem; margin-top: 4px; }
.dl-recording .dl-recording-count { color: var(--text); }
.dl-recording .dl-download-size { margin-bottom: 8px; }
.dl-recording .dl-cover { color: var(--muted); font-size: 0.9rem; margin: 6px 0 0; }
.dl-pack-note { margin: 6px 0 0; font-size: 0.9rem; }
.dl-group-title { margin: 18px 0 0; font-size: 0.95rem; color: var(--gold); }
.dl-group-title + .dl-files { margin-top: 0; }
.dl-actions { flex: 0 0 170px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.dl-actions .dl-get { white-space: normal; }
.dl-actions .dl-cf { font-size: 0.9rem; padding: 4px; }
.dl-included-recording { margin-top: 14px; }
.dl-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; min-width: 0; padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--panel-line); border-radius: 6px; }
.dl-filters legend { padding: 0 6px; font-weight: 600; }
.dl-filters label { display: flex; flex-direction: column; gap: 5px; flex: 1 1 210px; min-width: 0; }
.dl-filters select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--gold-soft); border-radius: 4px; color: var(--text); background: var(--panel); font: inherit; }
.dl-filters select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#recording-results { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 600px) {
  .dl-recording { flex-wrap: wrap; }
  .dl-actions { flex-basis: 100%; }
  .dl-file-main { flex-basis: 100%; }
  .dl-page .dl-get { white-space: normal; }
  .dl-steps code { white-space: normal; }
}

/* Simple table downloads: one choice per language and narrator. Native details keep every ZIP usable without JS. */
.dl-main-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dl-main-options .dl-file { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border-top: 0; padding: 0; }
.dl-main-options .dl-file-main { flex-basis: auto; }
.dl-main-options .dl-get { font-size: 0.9rem; padding: 9px 12px; }
.dl-table-wrap { border: 1px solid var(--panel-line); border-radius: 6px; background: var(--panel); }
.dl-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; table-layout: fixed; }
.dl-table .dl-choice { display: table-row; }
.dl-table th { padding: 12px; text-align: left; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--panel-line); }
.dl-table th:nth-child(1) { width: 20%; }
.dl-table th:nth-child(2) { width: 29%; }
.dl-table th:nth-child(3) { width: 15%; }
.dl-table th:nth-child(4) { width: 16%; }
.dl-table th:nth-child(5) { width: 20%; }
.dl-table td { padding: 14px 12px; vertical-align: top; border-bottom: 1px solid #ffffff14; overflow-wrap: anywhere; }
.dl-table tr:last-child td { border-bottom: 0; }
.dl-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.78rem; }
.dl-table .dl-voice-head { align-items: flex-start; gap: 8px; }
.dl-table .dl-play { flex-basis: 32px; width: 32px; height: 32px; font-size: 0.8rem; }
.dl-narrator { color: var(--gold); text-decoration: none; font-weight: 600; }
.dl-narrator:hover { text-decoration: underline; }
.dl-table .vc-like { margin: 5px 0 0 40px; }
.dl-table .vc-like button { padding: 2px 6px; font-size: 0.78rem; }
.dl-choice-included { background: #ffd10008; }
.dl-choice:target { background: #ffd10014; }
.dl-choice-action { position: relative; }
.dl-install-choice > summary { display: list-item; list-style-position: inside; cursor: pointer; margin-top: 0; padding: 8px 10px; font-size: 0.84rem; }
.dl-install-choice > summary:focus-visible, .dl-alternatives > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dl-install-choice[open] > summary { background: #34260d; }
.dl-install-panel { position: absolute; z-index: 3; right: 10px; top: 55px; width: min(580px, calc(100vw - 60px)); padding: 18px; border: 1px solid var(--gold-soft); border-radius: 6px; background: #080a16; box-shadow: 0 10px 32px #000b; font-size: 0.9rem; }
.dl-install-panel h3 { font-size: 1.05rem; color: var(--gold); margin: 0 0 10px; }
.dl-install-panel h4 { margin: 18px 0 6px; }
.dl-install-panel p { margin: 8px 0; }
.dl-install-panel .dl-file { gap: 12px; }
.dl-install-panel .dl-cover { font-size: 0.8rem; color: var(--muted); }
.dl-install-panel .dl-get { width: auto; font-size: 0.84rem; white-space: nowrap; }
.dl-cf-choices { padding-left: 20px; margin: 8px 0; }
.dl-cf-choices li { margin-bottom: 10px; }
.dl-cf-choices p { color: var(--muted); font-size: 0.8rem; }
.dl-alternatives { margin-top: 14px; }
.dl-alternatives > summary { cursor: pointer; color: var(--gold); }
.dl-filters { border: 0; padding: 0; gap: 12px; }
.dl-filters label { flex-basis: 200px; }
.dl-filters legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 700px) {
  .dl-main-options { grid-template-columns: 1fr; gap: 12px; }
  .dl-main-options .dl-file { flex-direction: row; align-items: center; flex-wrap: wrap; border-top: 1px solid #ffffff14; padding-top: 12px; }
  .dl-main-options .dl-file:first-child { border-top: 0; padding-top: 0; }
  .dl-table-wrap { padding: 0 14px; }
  .dl-table, .dl-table tbody, .dl-table tr, .dl-table .dl-choice, .dl-table td { display: block; width: auto; }
  .dl-table thead { display: none; }
  .dl-table tr { padding: 14px 0; border-bottom: 1px solid var(--panel-line); }
  .dl-table tr:last-child { border-bottom: 0; }
  .dl-table td { padding: 5px 0; border: 0; }
  .dl-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.85rem; }
  .dl-table td small { display: inline; margin-left: 6px; }
  .dl-table .dl-voice-head { display: inline-flex; vertical-align: middle; max-width: 100%; }
  .dl-table .dl-voice-head small { display: block; margin-left: 0; }
  .dl-table .vc-like { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
  .dl-install-choice > summary { width: fit-content; max-width: 100%; }
  .dl-install-panel { position: static; width: auto; margin-top: 12px; padding: 12px; box-shadow: none; }
  .dl-install-panel .dl-file { flex-wrap: wrap; }
  .dl-install-panel .dl-get { white-space: normal; }
}
.dl-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Willo, the companion app (/willo, the home page's card, /downloads' step 2): its own blue beside the add-on's gold. */
:root { --willo: #9fc0ff; --willo-soft: #cfd8f2; --willo-line: #4f6fe8; --willo-bg: #0b1024; }
.nl-willo { color: var(--willo); }
.dl-willo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 6px; padding: 14px 18px;
  border: 1px solid var(--willo-line); border-radius: 10px; background: rgba(11, 16, 36, 0.92); }
.dl-willo img { flex: none; width: 64px; height: 64px; }
.dl-willo-text { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--willo-soft); }
.dl-willo-text strong { display: block; font-family: var(--heading); color: #dfe8ff; font-size: 1.15rem; }
.dl-willo-go { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-willo { background: linear-gradient(180deg, #3a5fe0 0%, #22389e 55%, #16267a 100%); border-color: #9fc0ff; color: #fff; white-space: nowrap; }
.btn-willo:hover { background: linear-gradient(180deg, #4d70f0 0%, #2a44b4 55%, #1b2f8f 100%); color: #fff; }
.dl-willo-more { color: var(--willo); font-size: 0.95rem; }
@media (max-width: 560px) { .dl-willo-go { flex: 1 1 100%; } .dl-willo-go .btn-willo { align-self: stretch; text-align: center; } }
.willo-card { display: flex; gap: 16px; align-items: center; margin: 22px 0 6px; padding: 14px 18px; border: 1px solid var(--willo-line);
  border-radius: 8px; background: var(--willo-bg); color: var(--willo-soft); text-decoration: none; }
.willo-card:hover { border-color: var(--willo); color: #fff; }
.willo-card img { flex: none; width: 72px; height: 72px; }
.willo-card strong { display: block; font-family: var(--heading); color: #dfe8ff; font-size: 1.1rem; }
.willo-card-go { color: var(--willo); white-space: nowrap; }
.wl-landing .wl-hero { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.wl-hero-main { flex: 1 1 380px; min-width: 0; }
.wl-hero-main h1 { color: #dfe8ff; }
.wl-wisp { flex: 0 1 220px; width: 220px; max-width: 100%; height: auto; margin: 0 auto; }
.wl-landing h2 { font-family: var(--heading); color: var(--gold); font-size: 1.5rem; margin: 34px 0 12px; }
.wl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.wl-tile { padding: 16px 18px; border: 1px solid var(--panel-line); border-radius: 6px; background: var(--panel); color: var(--willo-soft); }
.wl-tile h3 { margin: 0 0 4px; color: var(--text); font-size: 1.05rem; }
.wl-tile p { margin: 0; }
.wl-step-n { display: block; font-family: var(--heading); color: var(--willo); font-size: 1.6rem; line-height: 1.2; }
.shot-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin: 0 0 8px; padding: 12px;
  border: 1px dashed var(--willo-line); border-radius: 6px; color: var(--muted); font-size: 0.85rem; text-align: center; }
.wl-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 8px;
  border: 1px solid var(--willo-line); border-radius: 6px; background: #000; }
.wl-player { display: flex; flex-direction: column; gap: 14px; }
.wl-stage { border: 1px solid var(--willo-line); border-radius: 10px; overflow: hidden; background: #000; }
.wl-stage .wl-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; margin: 0; border: 0; border-radius: 0; }
.wl-stage [hidden] { display: none !important; }
.wl-stage-cap { margin: 0; color: var(--willo-soft); }
.wl-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wl-pick { display: block; width: 100%; padding: 8px; border: 2px solid var(--panel-line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wl-pick[aria-pressed="true"] { border-color: var(--gold); }
.wl-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wl-pick img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.wl-pick span { display: block; padding: 8px 2px 2px; font-family: var(--heading); font-size: 1rem; }
@media (max-width: 560px) { .wl-picks { gap: 8px; } .wl-pick { padding: 5px; } .wl-pick span { font-size: 0.8rem; } }
.wl-voice { display: flex; flex-direction: column; gap: 6px; }
.wl-voice audio { width: 100%; }
.wl-voice small { color: var(--muted); }


.pl-card .pl-promo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0; }
.pl-card .pl-promo s { color: #8790ad; }
.pl-card .pl-promo strong { color: #fff; font-size: 1.3rem; }
.pl-tag { align-self: flex-start; margin: 0 0 6px; padding: 1px 8px; border-radius: 3px; background: var(--gold); color: #1b1300;
  font-size: 0.78rem; font-weight: 700; }
.wl-compare-box { overflow-x: auto; margin: 6px 0 12px; }
.wl-compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.92rem; }
.wl-compare th, .wl-compare td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.wl-compare th:first-child, .wl-compare td:first-child { text-align: left; }
.wl-compare thead th { font-family: var(--heading); color: var(--gold); }
.wl-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px 32px; }
.wl-faq h3 { margin: 0 0 2px; font-size: 1rem; }
.wl-faq p { margin: 0; color: var(--willo-soft); }
.dl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin: 4px 0 8px; }
.dl-step { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid #c9a24b; border-radius: 8px; background: #14100b; }
.dl-step-willo { border-color: var(--willo-line); background: var(--willo-bg); }
.dl-step-kicker { margin: 0; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--gold-soft); }
.dl-step-willo .dl-step-kicker { color: var(--willo); }
.dl-step h2 { margin: 0; font-family: var(--heading); font-size: 1.4rem; color: var(--parchment); }
.dl-step-willo h2 { color: #dfe8ff; }
.dl-step p { margin: 0; }
@media (max-width: 560px) { .willo-card { align-items: flex-start; } .willo-card img { width: 56px; height: 56px; } }
/* Home hero, "Watch first" (2026-10-15): Willo's clip on the left with its three clip buttons under it; on the right
   Willo's download, then the add-on's. Phones stack the clip edge to edge, then Willo, then the add-on, then the clip
   buttons. Under the hero: the author card, the community's voices and CurseForge in a row. */
.hw-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); grid-template-areas: ". side" "stage side" "clips side" ". side";
  grid-template-rows: 1fr auto auto 1fr; gap: 12px 30px; align-items: start; padding-top: 30px; padding-bottom: 30px; }
.hw-stage { grid-area: stage; position: relative; overflow: hidden; border: 1px solid var(--willo-line); border-radius: 12px;
  background: #000; box-shadow: 0 18px 50px #000c, 0 0 40px #4f6fe833; }
.hw-stage video, .hw-still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.hw-stage [hidden] { display: none !important; }
.hw-sound { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid #ffffff66; border-radius: 20px; background: #000000b8; color: #fff; cursor: pointer;
  font: 600 0.9rem system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hw-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-sound:hover { background: #16224f; border-color: var(--willo); }
.hw-clips { grid-area: clips; min-width: 0; }
.hw-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-pick { min-height: 36px; padding: 6px 14px; border: 1px solid var(--panel-line); border-radius: 18px; background: var(--willo-bg);
  color: var(--willo-soft); cursor: pointer; font: 600 0.9rem system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hw-pick:hover { border-color: var(--willo); color: #fff; }
.hw-pick[aria-pressed="true"] { border-color: var(--willo); background: #16224f; color: #fff; }
.hw-pick:focus-visible, .hw-sound:focus-visible, .hw-phone button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hw-cap { margin: 8px 0 0; color: var(--willo-soft); text-shadow: 0 1px 2px #000; }
.hw-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hw-willo { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--willo-line); border-radius: 10px;
  background: radial-gradient(circle at 90% 10%, #2a3fa055, transparent 55%), rgba(11, 16, 36, 0.95); color: var(--willo-soft); }
.hw-willo p { margin: 0; }
.hw-willo-head { display: flex; align-items: center; gap: 12px; }
.hw-wisp { flex: none; width: 58px; height: 58px; filter: drop-shadow(0 0 14px #5f8dff55); animation: hw-float 6s ease-in-out infinite; }
@keyframes hw-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hw-wisp { animation: none; } }
.hw-new { display: inline-block; padding: 1px 8px; border-radius: 3px; background: var(--willo); color: var(--willo-bg);
  font: 700 0.7rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.hw-title { margin: 2px 0 0; font: 700 2.1rem/1.1 var(--heading); letter-spacing: 0.02em; color: #dfe8ff; text-shadow: 0 2px 0 #000, 0 0 20px #5f8dff55; }
.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.hw-btn img { width: 30px; height: 30px; margin: -6px 0 -6px -6px; }
.hw-meta { color: var(--willo-soft); font-size: 0.92rem; }
.hw-meta strong { color: #fff; font-variant-numeric: tabular-nums; }
.hw-meta a { color: var(--willo); }
.hw-phone { display: none; padding: 7px 10px; border: 1px dashed var(--willo-line); border-radius: 6px; font-size: 0.86rem; }
.hw-phone button { margin: 2px 0 0; padding: 4px 10px; border: 1px solid var(--willo); border-radius: 4px; background: none; color: var(--willo);
  cursor: pointer; font: 600 0.85rem system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hw-phone code { color: #fff; }
@media (hover: none) and (pointer: coarse) { .hw-phone { display: block; } }
.hw-addon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 16px 18px;
  border: 1px solid #c9a24b; border-radius: 10px; background: rgba(20, 15, 9, 0.95); }
.hw-addon > img { width: 46px; height: 46px; }
.hw-addon-text { min-width: 0; }
.hw-addon h1 { font-size: 1.35rem; line-height: 1.2; text-shadow: 0 2px 0 #000; }
.hw-addon h1 .subtitle { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--gold-soft); }
.hw-addon-pitch { margin: 6px 0 0; font-size: 0.95rem; }
.hw-addon .stats { grid-column: 1 / -1; gap: 2px 14px; font-size: 0.88rem; }
.hw-addon-go { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
.hw-addon-go .btn-download { padding: 12px 24px; font-size: 1.05rem; }
.hw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 22px 0 6px; }
.hw-row .willo-card { margin: 0; }
.hw-cf { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 8px; background: #0d0b09cc; }
@media (max-width: 860px) {
  .hw-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side" "clips"; grid-template-rows: auto; gap: 14px; padding: 0 0 24px; }
  .hw-stage { border-radius: 0; border-width: 0 0 1px; }
  .hw-side, .hw-clips { padding: 0 16px; }
  .hw-sound { left: auto; right: 10px; bottom: 10px; }
  .hw-addon-pitch { display: none; }   /* the title says it on phones; the clip and Willo come first */
}
@media (max-width: 600px) {
  .hw-willo { gap: 8px; padding: 14px 16px; }
  .hw-pitch { display: none; }   /* the clip and its caption say it on phones */
  .hw-wisp { width: 44px; height: 44px; }
  .hw-title { font-size: 1.6rem; }
  .hw-btn, .hw-addon-go .btn-download { align-self: stretch; }
  .hw-addon { padding: 14px 16px; }
}
.voices-card { border-color: #c9a24b; background: #14100b; color: var(--text); }
.voices-card strong { color: var(--parchment); }
.voices-card-icon { flex: none; width: 56px; height: 56px; fill: none; stroke: var(--gold-soft); stroke-width: 1.6; stroke-linecap: round; }
.voices-card:hover { border-color: #c9a24b; color: var(--text); }
.dl-title { font-family: var(--heading); color: var(--gold); margin: 6px 0 12px; }
.cm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 10px 0 14px; padding: 0; list-style: none; }
.cm-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border: 1px solid #c9a24b;
  border-radius: 6px; background: #14100b; }
.cm-card .cm-by { flex: 1 0 100%; margin: 0; font-family: var(--heading); color: var(--parchment); font-size: 1.1rem; }
.cm-card .cm-what { flex: 1 0 100%; margin: 0 0 4px; color: var(--muted); font-size: 0.9rem; }
.wl-plans-line { margin: 18px 0 0; font-size: 1.05rem; }

/* The book and the wisp: the look of the 2026-10-15 revamp (Mike's pick, direction B; Patrick's two products,
   LOR-466). The add-on is the book, in candle gold; Willo is the wisp, in night blue. A page opts in with body class
   "bw" (gold: the home page, /downloads) or "bw wisp" (blue: Willo's pages, /willo and /plans), and loads Alegreya Sans
   for the text with Cinzel only for headings. Inside a page, tone-b or tone-w gives one block the other product's
   colours (Willo's step on /downloads). What the pages share is here: the colours, the type, one button shape with
   three fills (gold for the add-on, blue for Willo, outline for the rest), pills, one card, the night-sky hero, the
   audio players (js/players.js) and the column footer with the email sign-up (js/foot.js). The older buttons that
   scripts and lib/ still write (btn-download, btn-small and their -alt) take the same shape here, in the page's colour.
   Each page's own layout is in home.css, willo.css (/willo and /plans) and downloads.css. Classes are h-* and colours
   --h-*, so the header's --gold stays the game's UI gold. Element rules sit in :where() so a page's own classes win. */
.bw {
  --h-night: #0a0c13; --h-night-2: #0e111b; --h-panel: #131725; --h-panel-2: #181d2d;
  --h-line: #262c40; --h-line-soft: #1c2131;
  --h-text: #ece4d0; --h-text-2: #bdb5a2; --h-muted: #8f8977;
  --h-gold: #e3b55c; --h-gold-hi: #f4d590; --h-gold-deep: #8a5e18; --h-gold-wash: #e3b55c14;
  --h-wisp: #93b6ff; --h-wisp-hi: #d4e3ff; --h-wisp-wash: #6f8fff14;
  --h-fresh: #8fd9ad;
  --h-display: "Cinzel", Georgia, "Times New Roman", serif;
  --h-body: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --h-r: 14px; --h-r-sm: 10px;
  background: var(--h-night);
}
/* The accent: the book's gold, or the wisp's blue. */
.bw, .bw .tone-b {
  --h-acc: var(--h-gold); --h-acc-hi: var(--h-gold-hi); --h-acc-wash: var(--h-gold-wash); --h-acc-rim: #e3b55c77;
  --h-acc-line: #e3b55c26; --h-acc-edge: #e3b55c4d; --h-acc-panel: #15120c; --h-link: var(--h-gold-hi);
  --h-acc-text: linear-gradient(180deg, #fbe7b4, #d9a34a 80%);
  --h-fill: linear-gradient(180deg, #f3cf7c, #c8913a); --h-fill-ink: #1d1306; --h-fill-rim: #ffe3a6aa;
  --h-fill-glow: 0 10px 28px -12px #e3b55caa, inset 0 1px 0 #ffffff66;
}
.bw.wisp, .bw .tone-w {
  --h-acc: var(--h-wisp); --h-acc-hi: var(--h-wisp-hi); --h-acc-wash: var(--h-wisp-wash); --h-acc-rim: #93b6ff77;
  --h-acc-line: #93b6ff2a; --h-acc-edge: #93b6ff4d; --h-acc-panel: #0f1530; --h-link: #b9cdff;
  --h-acc-text: linear-gradient(180deg, #f1f6ff, #8fb0ff 85%);
  --h-fill: linear-gradient(180deg, #5571f5, #2c46c6); --h-fill-ink: #fff; --h-fill-rim: #8ea6ff66;
  --h-fill-glow: 0 10px 28px -10px #3a5cf0, inset 0 1px 0 #ffffff38;
}
.bw [hidden] { display: none !important; }   /* the rules below set display on images, pills and lists */
:where(.bw) main, .h-foot { font: 400 18px/1.6 var(--h-body); color: var(--h-text); }
:where(.bw main, .h-foot) a { color: var(--h-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.bw main, .h-foot) a:hover { color: #fff; }
:where(.bw main, .h-foot) :focus-visible { outline: 2px solid var(--h-acc-hi); outline-offset: 3px; border-radius: 4px; }
:where(.bw main) :is(h1, h2, h3) { text-wrap: balance; text-shadow: none; }
:where(.bw main) :is(h1, h2) { font-family: var(--h-display); font-weight: 600; letter-spacing: 0.01em; line-height: 1.12; }
:where(.bw main) code { background: #00000066; }
.h-wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 16px; }
.h-eyebrow { font: 700 0.74rem/1.2 var(--h-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-muted); }
.h-eyebrow.b { color: var(--h-gold); } .h-eyebrow.w { color: var(--h-wisp); }
.h-lede { font-size: 1.15rem; line-height: 1.55; color: var(--h-text-2); max-width: 60ch; }
.h-muted { color: var(--h-muted); }
.h-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A page's title block in the hero (eyebrow, title, lede), and a section's heading. */
.h-head { display: grid; gap: 10px; }
.bw main .h-head h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--h-acc-hi); text-shadow: none;
  background: var(--h-acc-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h-sec { padding-block: 56px; }
.bw main .h-h2 { margin: 0 0 18px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--h-acc-hi); }
.bw main .h-h3 { margin: 0 0 12px; font: 600 1.25rem/1.25 var(--h-display); color: var(--h-text); }

/* Buttons: one shape, three fills (gold for the book, blue for the wisp, outline for the rest). */
.h-btn, .bw main .btn-download, .bw main .btn-small { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--h-r-sm); border: 1px solid transparent; font: 700 1.05rem/1.1 var(--h-body);
  letter-spacing: 0.01em; text-align: center; text-decoration: none; text-shadow: none; cursor: pointer; transition: transform .15s ease, filter .2s ease; }
.bw main a.h-btn, .h-foot .h-btn { text-decoration: none; }
.h-btn:hover, .bw main .btn-download:hover, .bw main .btn-small:hover { transform: translateY(-1px); filter: brightness(1.06); }
.h-btn img { width: 26px; height: 26px; }
.bw main a.h-willo-btn, .h-willo-btn { color: #fff; background: linear-gradient(180deg, #5571f5, #2c46c6); border-color: #8ea6ff66;
  box-shadow: 0 10px 28px -10px #3a5cf0, inset 0 1px 0 #ffffff38; }
.bw main a.h-book-btn, .h-book-btn { color: #1d1306; background: linear-gradient(180deg, #f3cf7c, #c8913a); border-color: #ffe3a6aa;
  box-shadow: 0 10px 28px -12px #e3b55caa, inset 0 1px 0 #ffffff66; }
.bw main .btn-download, .bw main .btn-small, .bw main .btn-download:hover, .bw main .btn-small:hover {
  color: var(--h-fill-ink); background: var(--h-fill); border-color: var(--h-fill-rim); box-shadow: var(--h-fill-glow); }
.bw main a.h-ghost, .h-foot .h-ghost, .h-ghost, .bw main .btn-download-alt, .bw main .btn-small-alt,
.bw main .btn-download-alt:hover, .bw main .btn-small-alt:hover { color: var(--h-text); background: transparent; border-color: var(--h-line); box-shadow: none; }
.h-ghost:hover, .bw main .btn-download-alt:hover, .bw main .btn-small-alt:hover { border-color: var(--h-text-2); }
.h-sm, .bw main .btn-small { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }
.bw main .btn-small:disabled, .bw main .btn-download:disabled { opacity: 0.6; cursor: wait; transform: none; filter: none; }
.h-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--h-muted); font-size: 0.92rem; }
.h-meta > li + li::before { content: "\00B7"; margin-right: 12px; color: var(--h-line); }
.h-meta > li[hidden] + li::before { content: none; margin: 0; }
.h-meta strong { color: var(--h-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.bw main .h-meta a { color: var(--h-text-2); }
.h-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid;
  font: 700 0.72rem/1.4 var(--h-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.h-pill.b { color: var(--h-gold); border-color: #e3b55c55; background: var(--h-gold-wash); }
.h-pill.w { color: var(--h-wisp); border-color: #93b6ff55; background: var(--h-wisp-wash); }
.h-pill.f { color: var(--h-fresh); border-color: #8fd9ad44; background: #8fd9ad10; }
.h-pill.p { color: var(--h-text-2); border-color: var(--h-line); }

/* One card: a panel in the page's colour. */
.h-card { min-width: 0; padding: 22px; border: 1px solid var(--h-acc-line); border-radius: var(--h-r); background: var(--h-acc-panel); }

/* The night sky: a few stars drawn in CSS, twinkling slowly; still with reduced motion. h-sky-w is Willo's bluer one. */
.h-sky { position: relative; isolation: isolate; }
.h-sky::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 27% 62%, #fff7 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 12%, #d4e3ffcc 50%, transparent 51%), radial-gradient(1px 1px at 58% 44%, #fff6 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 73% 22%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 86% 70%, #d4e3ff99 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 93% 10%, #fffb 50%, transparent 51%), radial-gradient(1px 1px at 6% 84%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 88%, #fff5 50%, transparent 51%), radial-gradient(1.3px 1.3px at 65% 90%, #d4e3ffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 28%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 19% 40%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 52%, #fff5 50%, transparent 51%), radial-gradient(1.2px 1.2px at 97% 46%, #fff7 50%, transparent 51%);
  background-size: 640px 420px; animation: h-twinkle 9s ease-in-out infinite alternate; }
.h-sky::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(1200px 520px at 18% -10%, #2a3a8a55, transparent 70%),
              radial-gradient(900px 480px at 92% 10%, #6b4a1a40, transparent 70%),
              linear-gradient(180deg, #0c1020, var(--h-night) 78%); }
.h-sky-w::after { background: radial-gradient(1200px 560px at 22% -10%, #2a3a8a77, transparent 70%),
                              radial-gradient(800px 460px at 90% 20%, #3150d833, transparent 70%),
                              linear-gradient(180deg, #0c1124, var(--h-night) 82%); }
@keyframes h-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
.h-hero { padding-block: 48px 40px; }

/* Players: narrations and voices, one plays at a time (js/players.js). The button alone, or in a track with its line. */
.h-play { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--h-acc-rim);
  background: var(--h-acc-wash); color: var(--h-acc-hi); cursor: pointer; }
.h-play svg { width: 18px; height: 18px; fill: currentColor; }
.h-play.w { border-color: #93b6ff77; background: var(--h-wisp-wash); color: var(--h-wisp-hi); }
.h-play .ic-pause { display: none; } .h-play[aria-pressed="true"] .ic-play { display: none; } .h-play[aria-pressed="true"] .ic-pause { display: block; }
.h-track { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 16px 18px;
  border: 1px solid var(--h-acc-line); border-radius: var(--h-r); background: var(--h-acc-panel); }
.h-track .h-play { grid-row: span 2; }
.h-track b { font: 600 1.02rem/1.25 var(--h-display); color: var(--h-acc-hi); }
.h-track span { color: var(--h-muted); font-size: 0.9rem; }
.h-track .h-bar { grid-column: 1 / -1; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--h-line); overflow: hidden; }
.h-track .h-bar i { display: block; width: 0; height: 100%; background: var(--h-acc); transition: width .25s linear; }

/* Footer: the email sign-up, then a column per part of the site, then the fine print. */
.h-foot { border-top: 1px solid var(--h-line-soft); background: #08090f; padding-block: 56px 40px; }
.h-foot-lead { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--h-line-soft); color: var(--h-text-2); }
.h-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.h-foot h2 { margin: 0 0 10px; font: 700 0.74rem/1.2 var(--h-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--h-muted); border: 0; padding: 0; text-shadow: none; }
.h-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bw .h-foot ul a { color: var(--h-text-2); text-decoration: none; font-size: 0.98rem; }
.bw .h-foot ul a:hover { color: var(--h-text); }
.h-sign { display: grid; gap: 10px; align-content: start; }
.h-sign .h-brand { display: flex; align-items: center; gap: 10px; color: var(--h-gold-hi); font: 700 1.12rem/1 var(--h-display); }
.h-sign .h-brand img { width: 30px; height: 30px; }
.h-sign p { margin: 0; color: var(--h-text-2); font-size: 0.98rem; }
.h-sub-form { display: flex; flex-wrap: wrap; gap: 8px; }
.h-sub-form input[type="email"] { flex: 1 1 180px; min-width: 0; height: 42px; padding: 0 12px; border-radius: var(--h-r-sm); border: 1px solid var(--h-line); background: var(--h-night); color: var(--h-text); font: 400 1rem var(--h-body); }
.h-sub-form .signup-note { flex: 1 1 100%; color: var(--h-fresh); }
.h-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--h-line-soft); display: grid; gap: 6px; color: var(--h-muted); font-size: 0.86rem; }
.h-legal p { margin: 0; }
.bw .h-foot .h-legal a { color: var(--h-muted); }   /* over a page's own footer link colour */

@media (prefers-reduced-motion: reduce) {
  .h-sky::before { animation: none; }
  .h-btn, .bw main .btn-download, .bw main .btn-small { transition: none; }
}
@media (max-width: 1020px) {
  .h-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-foot-grid .h-sign { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :where(.bw) main, .h-foot { font-size: 17px; }
  .h-hero { padding-block: 28px; }
  .h-sec { padding-block: 40px; }
  .h-btn, .bw main .btn-download { min-height: 54px; }
  .h-lede { font-size: 1.06rem; }
}