/* LionHistory: savanna-at-dusk, documentary title sequence. */
:root {
  --night: #0c1024;
  --night-2: #141a36;
  --night-3: #1d2446;
  --dusk: #2a1f45;
  --gold: #f2b134;
  --gold-soft: #f6cf7e;
  --bone: #f1e8d6;
  --ash: #a39db3;
  --line: rgba(241, 232, 214, .12);
  --ember: #d4523a;
  --acacia: #8cc09e;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--bone); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--gold-soft); text-decoration: none; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- layout ---------- */
main { min-height: 100vh; }
body:not([data-hero]) main { padding: 110px var(--gutter) 90px; max-width: 1480px; }
.sheet { padding: 8px var(--gutter) 90px; max-width: 1480px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .005em; line-height: 1; margin: 0; }
h1 { font-size: clamp(44px, 6vw, 76px); }
h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 44px 0 16px; }
h3 { font-size: 22px; }
.sub { color: var(--ash); max-width: 62ch; margin: 12px 0 26px; font-size: 17px; }
.meta { color: var(--ash); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spacer { flex: 1; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 78vh; padding-top: 120px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-detail { min-height: 62vh; }
.hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(12, 16, 36, .92) 0%, rgba(12, 16, 36, .55) 38%, rgba(12, 16, 36, 0) 70%),
  linear-gradient(0deg, var(--night) 0%, rgba(12, 16, 36, 0) 38%); }
.hero-copy { padding: 0 var(--gutter) clamp(40px, 8vh, 90px); max-width: min(1100px, 100%); }
.hero-copy .synopsis, .hero-copy .facts-line { max-width: 640px; }
.hero .kind { color: var(--gold-soft); font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.hero h1.title { font-weight: 900; line-height: .88; max-width: 14ch; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 4px 40px rgba(0, 0, 0, .45); }
.hero .synopsis { font-size: clamp(16px, 1.4vw, 19px); max-width: 56ch; margin: 18px 0 0; color: rgba(241, 232, 214, .9); }
.facts-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 15px; color: var(--bone); }
.facts-line span { white-space: nowrap; }
.facts-line b { font-weight: 600; color: var(--gold-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.flag { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; background: rgba(242, 177, 52, .14); color: var(--gold-soft); border: 1px solid rgba(242, 177, 52, .45); }
.flag.reviewed { background: rgba(140, 192, 158, .14); color: var(--acacia); border-color: rgba(140, 192, 158, .45); }
.flag.disputed { background: rgba(212, 82, 58, .16); color: #ff9a85; border-color: rgba(212, 82, 58, .5); }
.flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* The one orchestrated moment: the sun settles and the title arrives. */
@media (prefers-reduced-motion: no-preference) {
  .hero-home .scene .sun { animation: sunset 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-home .scene .halo { animation: halo 2.4s ease-out both; }
  .hero-home .hero-copy > * { animation: arrive .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-home .hero-copy > :nth-child(2) { animation-delay: .5s; }
  .hero-home .hero-copy > :nth-child(3) { animation-delay: .7s; }
  .hero-home .hero-copy > :nth-child(n+4) { animation-delay: .9s; }
  .scene .eyes { animation: blink 7s infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes sunset { from { transform: translateY(-16%); } to { transform: none; } }
@keyframes halo { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrive { from { opacity: 0; transform: translateY(18px); letter-spacing: .04em; } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- rails ---------- */
.rails { padding: 0 0 80px; margin-top: -40px; position: relative; z-index: 2; }
.rail { margin: 0 0 34px; }
.rail-head { display: flex; align-items: baseline; gap: 16px; padding: 0 var(--gutter); margin-bottom: 12px; }
.rail-head h2 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); }
.rail-head a { font-size: 14px; color: var(--ash); }
.rail-head a:hover { color: var(--gold); }
.rail-wrap { position: relative; }
.track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); padding: 10px var(--gutter) 18px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.rail-btn { position: absolute; top: 10px; bottom: 18px; width: calc(var(--gutter) - 6px); min-width: 34px; border: 0; border-radius: 0; background: rgba(9, 12, 28, .7); color: var(--bone); font-size: 28px; cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 3; padding: 0; }
.rail-btn.prev { left: 0; } .rail-btn.next { right: 0; }
.rail-wrap:hover .rail-btn, .rail-btn:focus-visible { opacity: 1; }
@media (hover: none) { .rail-btn { display: none; } }

/* ---------- poster cards ---------- */
.poster { position: relative; flex: 0 0 clamp(230px, 22vw, 320px); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; scroll-snap-align: start; background: var(--night-2); color: var(--bone); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.poster .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 9, 22, .92) 0%, rgba(7, 9, 22, .2) 55%, rgba(7, 9, 22, 0) 100%); }
.poster .p-copy { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.poster .p-title { font: 800 clamp(24px, 2vw, 30px)/1 var(--display); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster .p-meta { font-size: 13px; color: var(--ash); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.poster .p-flag { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: rgba(9, 12, 28, .75); color: var(--gold-soft); }
.poster .p-flag.disputed { color: #ff9a85; }
.poster:hover, .poster:focus-visible { transform: scale(1.05); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); z-index: 4; color: var(--bone); }
.poster.add-card { display: grid; place-items: center; background: transparent; border: 1px dashed rgba(241, 232, 214, .25); box-shadow: none; font: 800 22px var(--display); color: var(--ash); }
.poster.add-card::after { display: none; }
.poster.add-card:hover { color: var(--gold); border-color: var(--gold); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.wall .poster { flex: none; width: 100%; }

/* ---------- controls ---------- */
button, .btn { font: 600 15px/1 var(--body); padding: 12px 20px; border-radius: 6px; border: 1px solid var(--line); background: rgba(241, 232, 214, .08); color: var(--bone); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
button:hover, .btn:hover { background: rgba(241, 232, 214, .16); color: var(--bone); }
button.primary, .btn.primary { background: var(--gold); color: #1a1205; border-color: var(--gold); }
button.primary:hover, .btn.primary:hover { background: var(--gold-soft); color: #1a1205; }
button.danger { color: #ff9a85; }
.btn.small, button.small { padding: 6px 10px; font-size: 13px; }
input, select, textarea { font: 400 15px var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--night-2); color: var(--bone); width: 100%; }
input::placeholder, textarea::placeholder { color: #6f6a80; }
textarea { min-height: 110px; resize: vertical; }
form.edit { display: grid; gap: 16px; max-width: 680px; }
form.edit label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
form.edit .hint { font-weight: 400; color: var(--ash); font-size: 13px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.filters > * { width: auto; min-width: 160px; }
.empty { color: var(--ash); padding: 30px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }

/* ---------- record body ---------- */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0; max-width: 820px; }
dl.facts dt { color: var(--ash); }
dl.facts dd { margin: 0; white-space: pre-wrap; }
.table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: var(--night-2); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
th { color: var(--ash); font-weight: 500; background: var(--night-3); }
tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.st-reviewed { color: var(--acacia); } .st-needs_source { color: var(--gold-soft); } .st-draft { color: var(--ash); } .st-disputed { color: #ff9a85; }
.banner { border: 1px solid currentColor; border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; font-weight: 600; background: rgba(242, 177, 52, .08); }
.cite li { margin-bottom: 10px; }
details summary { cursor: pointer; color: var(--ash); }
pre.diff { white-space: pre-wrap; font-size: 13px; background: var(--night-2); padding: 10px; border-radius: 6px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* lineage */
.tree, .tree ul { list-style: none; margin: 0; padding-left: 26px; }
.tree { padding-left: 0; }
.tree li { position: relative; padding: 6px 0 6px 18px; }
.tree li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.tree li::after { content: ""; position: absolute; left: 0; top: 22px; width: 14px; border-top: 1px solid var(--line); }
.tree li:last-child::before { bottom: auto; height: 22px; }
.node { display: inline-flex; gap: 10px; align-items: baseline; background: var(--night-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.node a { font: 800 20px var(--display); color: var(--bone); }
.node.male { border-left: 4px solid var(--gold); } .node.female { border-left: 4px solid var(--gold-soft); }
.pedigree { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; }
.pedigree .gen { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 200px; }

/* timeline */
.tl { background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; overflow-x: auto; }
.tl-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; min-height: 42px; border-bottom: 1px dashed var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-name { font: 800 19px var(--display); padding-right: 12px; }
.tl-name a { color: var(--bone); }
.tl-track { position: relative; height: 34px; min-width: 640px; }
.tl-bar { position: absolute; top: 5px; height: 24px; border-radius: 4px; background: linear-gradient(90deg, #c8892a, var(--gold)); color: #1a1205; font-size: 12px; font-weight: 600; padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-bar:hover { color: #1a1205; filter: brightness(1.1); }
.tl-bar.alt { background: linear-gradient(90deg, #6f86b8, #a2b7e0); }
.tl-bar.open { -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
.tl-bar.unknown-end { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .25) 0 6px, transparent 6px 12px), linear-gradient(90deg, #c8892a, var(--gold)); }
.tl-axis { display: grid; grid-template-columns: 180px 1fr; font-size: 12px; color: var(--ash); }
.tl-axis .ticks { position: relative; height: 20px; min-width: 640px; }
.tl-axis .ticks span { position: absolute; transform: translateX(-50%); }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--bone); color: var(--night); padding: 10px 18px; border-radius: 8px; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; z-index: 50; }
#toast.show { opacity: 1; }
#toast.err { background: var(--ember); color: #fff; }

@media (max-width: 760px) {
  body:not([data-hero]) main { padding-top: 86px; }
  .hero { min-height: 72vh; }
  .hero-shade { background: linear-gradient(0deg, var(--night) 8%, rgba(12, 16, 36, .55) 60%, rgba(12, 16, 36, .2) 100%); }
  .tl-row, .tl-axis { grid-template-columns: 110px 1fr; }
  dl.facts { grid-template-columns: 1fr; gap: 2px; } dl.facts dd { margin-bottom: 10px; }
}

/* sources */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--bone); font-size: 14px; font-weight: 500; }
.chip span { color: var(--ash); }
.chip.on, .chip:hover { background: var(--gold); color: #1a1205; border-color: var(--gold); }
.chip.on span, .chip:hover span { color: #1a1205; }
.plat { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(242, 177, 52, .12); color: var(--gold-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cite-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; }

/* hyperlinks */
a.xref { color: var(--bone); text-decoration: underline; text-decoration-color: rgba(242, 177, 52, .55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a.xref:hover { color: var(--gold); text-decoration-color: var(--gold); }
.fns { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: super; }
a.fn { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: rgba(242, 177, 52, .18); color: var(--gold-soft); font-size: 11px; font-weight: 600; line-height: 1; }
a.fn:hover { background: var(--gold); color: #1a1205; }
.cite li { scroll-margin-top: 120px; border-radius: 8px; padding: 6px 8px; margin-left: -8px; }
.cite li.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: rgba(242, 177, 52, .28); } to { background: transparent; } }
.mentions { list-style: none; padding: 0; display: grid; gap: 12px; max-width: 900px; }
.mentions li { padding: 12px 14px; background: var(--night-2); border: 1px solid var(--line); border-radius: 8px; }
.mentions .meta { margin-top: 4px; }

/* places */
.place { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(241, 232, 214, .08); border: 1px solid var(--line); color: var(--bone); font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
a.place:hover { border-color: var(--gold); color: var(--gold-soft); }
.flag-emoji { font-size: 14px; line-height: 1; }
.hero .kind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.poster .p-place { position: absolute; top: 10px; right: 10px; z-index: 1; }
.poster .p-place .place { background: rgba(9, 12, 28, .75); border-color: transparent; font-size: 12px; padding: 2px 8px; }
.kind-line { color: var(--gold-soft); font-weight: 600; margin: 0 0 4px; }

/* collection toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; margin: 0 0 14px; background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; }
.ctl { display: grid; gap: 4px; min-width: 150px; }
.ctl.grow { flex: 1 1 240px; }
.ctl span { font-size: 12px; color: var(--ash); font-weight: 500; }
.ctl input[type=number] { width: 110px; }
.result-bar { margin: 0 0 16px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg a, .seg button { padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--ash); background: transparent; border: 0; border-radius: 0; }
.seg a + a, .seg button + button { border-left: 1px solid var(--line); }
.seg a.on, .seg a:hover, .seg button:hover { background: rgba(241, 232, 214, .1); color: var(--bone); }

/* chronological history */
.story-note { margin: -6px 0 16px; }
.story { list-style: none; margin: 0; padding: 0; position: relative; max-width: 900px; }
.story::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), rgba(242, 177, 52, .15)); }
.story .yr { display: grid; grid-template-columns: 80px 1fr; gap: 24px; margin-bottom: 18px; }
.yr-label { font: 800 26px/1 var(--display); color: var(--gold); text-align: right; padding-top: 2px; }
.story ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story .ev { position: relative; padding-left: 22px; }
.story .dot { position: absolute; left: -9px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid var(--gold); }
.story .k-death .dot, .story .k-fight .dot, .story .k-conflict .dot { border-color: var(--ember); background: var(--ember); }
.story .k-birth .dot { border-color: var(--acacia); background: var(--acacia); }
.story .k-tenure_start .dot, .story .k-takeover .dot { background: var(--gold); }
.ev-top { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.ev-kind { color: var(--ash); font-weight: 600; }
.ev-when { color: var(--gold-soft); }
.ev-unv { color: var(--gold-soft); border: 1px solid rgba(242, 177, 52, .4); border-radius: 4px; padding: 0 5px; }
.ev-text { font-size: 16px; }
a.ev-rec { font-size: 12px; color: var(--ash); margin-left: 6px; }
a.ev-rec:hover { color: var(--gold); }

/* family tree */
.gtree-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ash); }
.lg::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg.male::before { background: var(--gold); } .lg.female::before { background: #e7b3c0; }
.lg.ghost::before { border: 1px dashed var(--ash); } .lg.unv::before { background: rgba(242, 177, 52, .25); border: 1px solid rgba(242, 177, 52, .6); }
.gtree-wrap { overflow: auto; max-height: 76vh; background: radial-gradient(ellipse at 50% 40%, rgba(42, 31, 69, .55), transparent 70%), var(--night-2); border: 1px solid var(--line); border-radius: 12px; }
.gtree { position: relative; margin: 0 auto; }
.glines { position: absolute; inset: 0; pointer-events: none; }
.glines path { fill: none; stroke: rgba(242, 177, 52, .5); stroke-width: 2; }
.glines path.ghost { stroke: rgba(163, 157, 179, .45); stroke-dasharray: 5 5; }
.glabel { position: absolute; left: 16px; width: 100px; font-size: 12px; color: var(--ash); font-weight: 600; }
.gnode { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--night-3); border: 1px solid var(--line); border-left: 5px solid var(--ash); color: var(--bone); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .15s, border-color .15s; }
.gnode:hover, .gnode:focus-visible { transform: translateY(-2px); color: var(--bone); border-color: var(--gold); }
.gnode.sex-male { border-left-color: var(--gold); }
.gnode.sex-female { border-left-color: #e7b3c0; }
.gnode.subject { background: linear-gradient(135deg, #3a2a52, var(--night-3)); box-shadow: 0 0 0 2px var(--gold), 0 12px 30px rgba(0, 0, 0, .5); }
.gnode.ghost { background: transparent; border: 1px dashed rgba(163, 157, 179, .5); box-shadow: none; color: var(--ash); }
.gnode.ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
.g-role { font-size: 11px; color: var(--ash); display: flex; gap: 6px; align-items: center; text-transform: none; }
.g-unv { color: var(--gold-soft); border: 1px solid rgba(242, 177, 52, .45); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.g-name { font: 800 21px/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gnode.ghost .g-name { font: 600 14px/1.2 var(--body); white-space: normal; }
.g-life { font-size: 12px; line-height: 1.3; color: var(--ash); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .story::before { left: 62px; } .story .yr { grid-template-columns: 52px 1fr; gap: 18px; } .yr-label { font-size: 20px; } }

/* ---------- navigation: left column on desktop, drawer on phones ---------- */
:root { --side-w: 256px; }
.brand { font: 900 30px/1 var(--display); color: var(--gold); letter-spacing: .01em; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px 18px; background: linear-gradient(180deg, #0a0e22, #0c1024 60%, #10142c); border-right: 1px solid var(--line); overflow-y: auto; }
.side-brand { padding: 0 8px; }
.side .search input { width: 100%; background: rgba(255, 255, 255, .06); border-color: transparent; }
.side nav { display: flex; flex-direction: column; gap: 16px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title { margin: 0 0 4px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #7d778f; }
.side nav a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ash); font-weight: 500; font-size: 15px; }
.side nav a:hover { color: var(--bone); background: rgba(241, 232, 214, .06); }
.side nav a.on { color: var(--bone); background: rgba(242, 177, 52, .12); box-shadow: inset 3px 0 0 var(--gold); }
.side nav a.on .ico { color: var(--gold); }
.ico { width: 18px; text-align: center; font-size: 14px; color: #6f6a80; flex: none; }
.badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: rgba(242, 177, 52, .18); color: var(--gold-soft); font-size: 12px; font-weight: 600; text-align: center; }
.side-add { margin-top: auto; display: grid; gap: 8px; }
.side-add .btn { justify-content: center; }
.add-more summary { padding: 6px 10px; font-size: 14px; list-style: none; }
.add-more summary::-webkit-details-marker { display: none; }
.add-more[open] { display: grid; gap: 2px; }
.add-more a { padding: 6px 10px; font-size: 14px; color: var(--ash); border-radius: 6px; }
.add-more a:hover { color: var(--bone); background: rgba(241, 232, 214, .06); }

.top { display: none; }
.menu-btn { width: 42px; height: 42px; padding: 0; display: grid; place-content: center; gap: 5px; background: rgba(241, 232, 214, .08); }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--bone); }
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(5, 7, 18, .6); }

@media (min-width: 1024px) {
  main { margin-left: var(--side-w); }
  body:not([data-hero]) main { padding-top: 48px; }
  .hero { padding-top: 56px; }
  #toast { left: calc(50% + var(--side-w) / 2); }
  .scrim { display: none; }
}
@media (max-width: 1023px) {
  .top { display: flex; position: fixed; inset: 0 0 auto 0; z-index: 20; align-items: center; gap: 14px; padding: 10px var(--gutter); background: linear-gradient(180deg, rgba(7, 9, 22, .9), rgba(7, 9, 22, 0)); transition: background .3s; }
  .top.solid { background: rgba(9, 12, 28, .96); box-shadow: 0 1px 0 var(--line); }
  .top .brand { font-size: 26px; }
  .side { transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .7, .2, 1); box-shadow: 20px 0 60px rgba(0, 0, 0, .5); }
  .side.open { transform: none; }
  body:not([data-hero]) main { padding-top: 86px; }
  .hero { padding-top: 90px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
.poster .p-place { max-width: calc(100% - 112px); }
.poster .p-place .place { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
a.xref.ambiguous { text-decoration-style: dashed; }

/* ---------- landing ---------- */
.landing { min-height: min(92vh, 980px); align-items: center; }
.landing .hero-copy { padding-bottom: clamp(56px, 10vh, 120px); padding-top: 40px; }
.landing .hero-shade { background: linear-gradient(90deg, rgba(12, 16, 36, .82) 0%, rgba(12, 16, 36, .45) 42%, rgba(12, 16, 36, 0) 70%), linear-gradient(0deg, var(--night) 0%, rgba(12, 16, 36, 0) 34%); }
.landing-title { font-size: clamp(52px, 7.4vw, 128px) !important; max-width: 11ch !important; }
.landing .synopsis { max-width: 54ch; }
.hero-search { display: flex; gap: 8px; margin-top: 28px; max-width: 560px; padding: 6px; border-radius: 10px; background: rgba(9, 12, 28, .72); border: 1px solid rgba(241, 232, 214, .18); backdrop-filter: blur(8px); }
.hero-search input { border: 0; background: transparent; font-size: 17px; padding: 12px 12px; }
.hero-search input:focus-visible { outline: none; }
.hero-search:focus-within { border-color: var(--gold); }
.hero-search button { flex: none; }
.hero-try { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 0; font-size: 14px; color: var(--ash); }
.hero-try a { color: var(--bone); border-bottom: 1px solid rgba(242, 177, 52, .45); }
.hero-try a:hover { color: var(--gold); }
.tally { display: flex; flex-wrap: wrap; gap: 0; margin: 40px 0 0; padding: 0; }
.tally a { display: flex; flex-direction: column-reverse; padding: 0 26px 0 0; margin-right: 26px; border-right: 1px solid var(--line); color: var(--bone); }
.tally a:last-child { border-right: 0; }
.tally dd { margin: 0; font: 800 clamp(30px, 3vw, 44px)/1 var(--display); color: var(--bone); }
.tally dt { font-size: 14px; color: var(--ash); margin-top: 4px; }
.tally a:hover dd { color: var(--gold); }

.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 var(--gutter); margin: -36px 0 46px; position: relative; z-index: 2; }
.door { position: relative; aspect-ratio: 16 / 7; border-radius: 10px; overflow: hidden; isolation: isolate; color: var(--bone); box-shadow: 0 12px 34px rgba(0, 0, 0, .4); border: 1px solid rgba(241, 232, 214, .08); }
.door .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(9, 12, 28, .92) 0%, rgba(9, 12, 28, .2) 70%); }
.door-copy { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 4px; }
.door b { font: 800 clamp(24px, 2.1vw, 32px)/1 var(--display); }
.door-copy > span { font-size: 14px; color: rgba(241, 232, 214, .78); }
.door:hover, .door:focus-visible { color: var(--bone); border-color: rgba(242, 177, 52, .6); }
.door:hover .scene { transform: scale(1.05); }

.place-card { flex: 0 0 clamp(210px, 18vw, 260px); display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--line); color: var(--bone); scroll-snap-align: start; }
.place-card b { font: 800 22px/1.05 var(--display); }
.pc-flag { font-size: 22px; line-height: 1; }
.place-card:hover { border-color: var(--gold); color: var(--bone); }

.spotlight { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin: 10px var(--gutter) 46px; padding: clamp(16px, 2vw, 24px); border-radius: 14px; background: linear-gradient(120deg, var(--night-2), var(--dusk)); border: 1px solid var(--line); }
.spot-scene { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 2 / 1; }
.spot-scene .scene { width: 100%; height: 100%; display: block; }
.spot-copy h2 { font-size: clamp(36px, 4vw, 64px); font-weight: 900; margin: 6px 0 0; }
.spot-copy h2 a { color: var(--bone); }
.spot-copy h2 a:hover { color: var(--gold); }
.spot-copy .kind { color: var(--gold-soft); font-weight: 600; font-size: 15px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.spot-copy .synopsis { color: rgba(241, 232, 214, .88); margin: 14px 0 0; max-width: 56ch; }

.how { margin: 20px var(--gutter) 0; padding-top: 30px; border-top: 1px solid var(--line); }
.how h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 18px; }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 22px; }
.how-grid b { font: 800 22px var(--display); color: var(--gold-soft); }
.how-grid p { margin: 6px 0 8px; color: rgba(241, 232, 214, .82); max-width: 44ch; }
.home-rails { margin-top: 0; }

@media (max-width: 1100px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spotlight { grid-template-columns: minmax(0, 1fr); } }
/* Long names and fact lines wrap inside the spotlight instead of widening the page on phones. */
.spot-copy { min-width: 0; }
.spot-copy h2 { overflow-wrap: anywhere; }
.spot-copy .facts-line span { white-space: normal; }
@media (max-width: 760px) {
  .landing { min-height: 88vh; align-items: flex-end; }
  .landing .hero-shade { background: linear-gradient(0deg, var(--night) 10%, rgba(12, 16, 36, .7) 55%, rgba(12, 16, 36, .25) 100%); }
  .doors { grid-template-columns: 1fr; margin-top: 0; }
  .door { aspect-ratio: 16 / 6; }
  .how-grid { grid-template-columns: 1fr; gap: 18px; }
  .tally { margin-top: 28px; row-gap: 14px; }
  .tally a { padding-right: 16px; margin-right: 16px; }
  .hero-search button { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .door .scene { transition: none; } }

/* ---------- compact sidebar (desktop) ---------- */
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-brand .mono { display: none; }
.collapse-btn { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 20px; line-height: 1; background: transparent; border-color: transparent; color: var(--ash); flex: none; }
.collapse-btn:hover { color: var(--bone); background: rgba(241, 232, 214, .08); }
.collapse-btn span[aria-hidden] { display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { position: relative; }
.search-ico { display: none; }
.side-add .plus { display: none; }
@media (min-width: 1024px) {
  .side, main, #toast { transition: width .25s cubic-bezier(.2, .7, .2, 1), margin-left .25s cubic-bezier(.2, .7, .2, 1), left .25s cubic-bezier(.2, .7, .2, 1); }
  body.side-compact { --side-w: 76px; }
  body.side-compact .side { padding: 22px 12px 18px; overflow-x: hidden; }
  body.side-compact .side-head { flex-direction: column; gap: 10px; }
  body.side-compact .side-brand { padding: 0; font-size: 26px; }
  body.side-compact .side-brand .lbl, body.side-compact .side nav .lbl, body.side-compact .nav-title, body.side-compact .add-more, body.side-compact .side-add .lbl, body.side-compact .search input { display: none; }
  body.side-compact .side-brand .mono { display: inline; }
  body.side-compact .collapse-btn span[aria-hidden] { transform: rotate(180deg); }
  body.side-compact .search-ico { display: inline-flex; width: 100%; height: 40px; padding: 0; justify-content: center; font-size: 20px; background: rgba(255, 255, 255, .06); border-color: transparent; color: var(--ash); }
  body.side-compact .search-ico:hover { color: var(--bone); }
  body.side-compact .side nav { gap: 10px; }
  body.side-compact .side nav .nav-group { padding-top: 8px; border-top: 1px solid var(--line); }
  body.side-compact .side nav .nav-group:first-child { border-top: 0; padding-top: 0; }
  body.side-compact .side nav a { justify-content: center; padding: 7px 0; position: relative; }
  body.side-compact .ico { font-size: 17px; width: auto; }
  body.side-compact .badge { position: absolute; top: 2px; right: 4px; min-width: 0; padding: 0 5px; font-size: 10px; line-height: 16px; }
  body.side-compact .side-add .btn { padding: 10px 0; }
  body.side-compact .side-add .plus { display: inline; font-size: 22px; line-height: 1; }
}
@media (max-width: 1023px) { .collapse-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .side, main, #toast, .collapse-btn span[aria-hidden] { transition: none !important; } }

/* ---------- map ---------- */
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); height: 100vh; }
.atlas-map { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 60% 40%, #0d1433 0%, #070a1a 70%); touch-action: none; cursor: grab; user-select: none; }
.atlas-map.dragging { cursor: grabbing; }
.atlas-map svg { width: 100%; height: 100%; display: block; }
.atlas-map .sea, .locator .sea { fill: transparent; }
.cty { fill: #1f2750; stroke: #343e72; stroke-width: .5; vector-effect: non-scaling-stroke; transition: fill .2s; }
.cty.has { cursor: pointer; }
.cty.l1 { fill: #3a2c3a; } .cty.l2 { fill: #5a3b35; } .cty.l3 { fill: #7c4f2f; } .cty.l4 { fill: #9a6526; }
.cty.has:hover, .cty.has:focus-visible { fill: #b8782a; outline: none; }
.cty.sel { fill: #6e4a30; stroke: var(--gold-soft); stroke-width: 1.2; }
.pin { cursor: pointer; }
.pin .dot { fill: var(--gold); stroke: #1a1205; }
.pin.cluster .dot { fill: #f6cf7e; }
.pin text { fill: #1a1205; font-family: var(--body); font-weight: 700; text-anchor: middle; pointer-events: none; }
.pin:hover .dot, .pin:focus-visible .dot { fill: #fff3d1; }
.pin:focus-visible { outline: none; }
.pin .halo { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .pin .halo { animation: pinpulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } }
@keyframes pinpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.atlas-ctl { position: absolute; right: 16px; bottom: 44px; display: grid; gap: 6px; }
.atlas-ctl button { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 20px; background: rgba(9, 12, 28, .85); }
.atlas-tip { position: absolute; z-index: 3; display: grid; gap: 2px; max-width: 230px; padding: 10px 12px; border-radius: 8px; background: rgba(9, 12, 28, .94); border: 1px solid rgba(242, 177, 52, .4); font-size: 13px; color: var(--ash); pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.atlas-tip b { color: var(--bone); font-size: 15px; }
.atlas-note { position: absolute; left: 16px; bottom: 10px; margin: 0; font-size: 12px; color: #7d778f; }
.atlas-panel { overflow-y: auto; padding: 40px 24px 40px; border-left: 1px solid var(--line); background: linear-gradient(180deg, #0a0e22, #0c1024); }
.atlas-panel h1 { font-size: clamp(36px, 3vw, 52px); font-weight: 900; }
.atlas-panel .sub { font-size: 15px; margin: 10px 0 20px; }
.atlas-panel .hero-actions { margin: 16px 0 8px; }
.atlas-panel .hero-actions .btn { padding: 9px 14px; font-size: 14px; }
.atlas-panel h2.grp { font-size: 20px; margin: 22px 0 6px; color: var(--gold-soft); }
.atlas-countries, .atlas-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cty-btn, .atlas-places a { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--bone); font-weight: 500; }
.atlas-places a { grid-template-columns: 1fr; }
.cty-btn .meta, .atlas-places .meta { grid-column: 2; font-size: 13px; }
.atlas-places .meta { grid-column: 1; }
.cty-btn .fl { grid-row: span 2; font-size: 22px; align-self: center; }
.cty-btn:hover, .atlas-places a:hover { background: rgba(241, 232, 214, .06); color: var(--bone); }
.pr-name { font-weight: 600; }
.back { padding: 6px 10px; font-size: 14px; margin-bottom: 14px; background: transparent; }

.locator { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; margin: 24px var(--gutter) 40px; align-items: start; }
.loc-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #080b1c; aspect-ratio: 600 / 372; }
.loc-map svg { width: 100%; height: 100%; display: block; }
.loc-map .cty { fill: #222a52; stroke: #343e72; } .loc-map .cty.sel { fill: #3f3238; stroke: #6d5546; stroke-width: 1; }
.loc-map .near { fill: #a39db3; stroke: #0c1024; cursor: pointer; } .loc-map .near:hover { fill: var(--gold-soft); }
.loc-map .here { fill: var(--gold); stroke: #1a1205; } .loc-map .here-halo { fill: rgba(242, 177, 52, .25); }
.loc-open { position: absolute; right: 12px; bottom: 12px; padding: 8px 12px; font-size: 13px; background: rgba(9, 12, 28, .85); }
.loc-list h2 { font-size: 26px; margin-bottom: 8px; }

@media (max-width: 1023px) {
  .atlas { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; padding-top: 62px; }
  .atlas-panel { border-left: 0; border-top: 1px solid var(--line); padding: 24px var(--gutter) 60px; }
  .locator { grid-template-columns: 1fr; }
}
.atlas-map svg.focus .cty:not(.sel) { opacity: .5; }
.atlas-map svg.focus .cty.sel { fill: #8a5a2c; }
.cty.empty { cursor: pointer; }
.cty.empty:hover, .cty.empty:focus-visible { fill: #2b3566; outline: none; }

/* evidence strength */
.flags { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 18px; }
.flags .flag { margin-top: 0; }
.evidence { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; font-size: 14px; border: 1px solid var(--line); background: rgba(241, 232, 214, .06); color: var(--bone); }
.evidence b { font-weight: 600; }
.evidence span { color: var(--ash); }
.evidence.ev-strong { border-color: rgba(140, 192, 158, .5); } .evidence.ev-strong b { color: var(--acacia); }
.evidence.ev-supported b { color: var(--gold-soft); }
.evidence.ev-single, .evidence.ev-none { border-color: rgba(212, 82, 58, .45); } .evidence.ev-single b, .evidence.ev-none b { color: #ff9a85; }
.fresh { display: inline-flex; padding: 6px 12px; border-radius: 6px; font-size: 14px; border: 1px solid var(--line); color: var(--ash); }
.fresh.f-new { color: var(--acacia); border-color: rgba(140, 192, 158, .45); }
.fresh.f-old { color: #ff9a85; border-color: rgba(212, 82, 58, .4); }
.disputes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 980px; }
.disputes li { padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 10px; background: var(--night-2); }
.disputes h3 { font-size: 22px; margin-bottom: 6px; }
.disputes p { margin: 0 0 8px; color: rgba(241, 232, 214, .88); }

/* ---------- search ---------- */
.search-hero .hero-search { margin: 0 0 34px; }
.search-top { padding: 110px var(--gutter) 10px; }
@media (min-width: 1024px) { .search-top { padding-top: 56px; } }
.search-rails { margin-top: 0; padding-top: 18px; }
.search-count { padding: 0 var(--gutter); color: var(--ash); margin: 0 0 20px; }
.search-empty { margin: 20px var(--gutter); }
.src-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 4px var(--gutter) 10px; }
.src-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--line); color: var(--bone); }
.src-card b { font-weight: 600; line-height: 1.3; }
.src-card .plat { justify-self: start; }
.src-card:hover { border-color: var(--gold); color: var(--bone); }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; display: grid; padding: 6px; border-radius: 10px; background: rgba(9, 12, 28, .98); border: 1px solid rgba(242, 177, 52, .35); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); max-height: 60vh; overflow-y: auto; }
.suggest a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 9px 10px; border-radius: 7px; color: var(--bone); }
.suggest a .sg-alias { grid-column: 2; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest a.on, .suggest a:hover { background: rgba(242, 177, 52, .14); color: var(--bone); }
.suggest .plat { min-width: 74px; text-align: center; }
.side .suggest { min-width: 300px; }
.suggest[hidden] { display: none; }
.suggest.floating { position: fixed; right: auto; z-index: 60; }
.acct { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); color: var(--bone); }
.acct::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.acct.ig { color: #f6a5c0; } .acct.yt { color: #ff8a80; } .acct.web { color: var(--gold-soft); }
.acct:hover { border-color: currentColor; }
.evidence.ev-community { border-color: rgba(166, 148, 255, .45); } .evidence.ev-community b { color: #c3b8ff; }
.qc { font-size: 12px; color: var(--ash); margin-top: 2px; }
.qc::before { content: "· "; }
.qc.qc-ok { color: var(--acacia); } .qc.qc-miss { color: #ff9a85; }
.date-note { margin-top: -6px; }

/* =====================================================================
   Record dashboard (dash.js): banner, stat tiles, tabs, panels.
   Quieter chrome, data-first, one panel at a time.
   ===================================================================== */
:root { --panel: #121834; --panel-2: #171e3e; --stroke: rgba(241, 232, 214, .08); --radius: 14px; --tabbar-h: 0px; }
body { font-feature-settings: "tnum" 1, "ss01" 1; }

/* Prose links: tinted words, no forum underlines. */
a.xref { color: #f3d9a0; text-decoration: none; background-image: linear-gradient(rgba(242, 177, 52, .35), rgba(242, 177, 52, .35)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: color .15s, background-size .15s; }
a.xref:hover { color: var(--gold); background-image: linear-gradient(var(--gold), var(--gold)); }

/* Controls: tighter, calmer. */
button, .btn { border-radius: 10px; padding: 11px 18px; font-size: 14px; }
.btn.icon, button.icon { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 18px; background: rgba(9, 12, 28, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
input, select, textarea { border-radius: 10px; background: var(--panel); border-color: var(--stroke); }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Data tables read as grids, not documents. */
.table-wrap { border-color: var(--stroke); border-radius: 12px; background: var(--panel); }
table { background: transparent; }
th { background: rgba(241, 232, 214, .03); font-size: 12px; font-weight: 600; color: #8f89a3; padding: 10px 14px; white-space: nowrap; }
td { font-size: 14px; padding: 11px 14px; border-bottom-color: var(--stroke); }
tr:hover td { background: rgba(241, 232, 214, .025); }

/* ---- banner ---- */
.dhero { position: relative; min-height: clamp(300px, 46vh, 460px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.dhero .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.dhero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(12, 16, 36, .9) 0%, rgba(12, 16, 36, .45) 45%, rgba(12, 16, 36, .05) 75%),
  linear-gradient(0deg, var(--night) 0%, rgba(12, 16, 36, .6) 30%, rgba(12, 16, 36, 0) 65%); }
.dhero-in { width: 100%; max-width: 1480px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter) 26px; }
.dhero-copy { min-width: 0; }
.d-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--gold-soft); }
.d-kind .place { background: rgba(9, 12, 28, .55); backdrop-filter: blur(8px); }
.d-title { font-family: var(--display); font-weight: 900; line-height: .9; margin: 0; max-width: 16ch; text-wrap: balance; text-shadow: 0 4px 40px rgba(0, 0, 0, .5); }
.d-aka { margin: 8px 0 0; color: var(--ash); font-size: 14px; }
.d-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.d-trust .evidence, .d-trust .fresh, .d-status { font-size: 13px; padding: 5px 11px; border-radius: 99px; background: rgba(9, 12, 28, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.d-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; border: 1px solid var(--stroke); color: var(--ash); cursor: help; }
.d-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.d-status.s-reviewed { color: var(--acacia); border-color: rgba(140, 192, 158, .45); }
.d-status.s-draft, .d-status.s-needs_source { color: var(--gold-soft); border-color: rgba(242, 177, 52, .35); }
.d-status.s-disputed { color: #ff9a85; border-color: rgba(212, 82, 58, .5); }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: none; }
details.more { position: relative; }
details.more summary { list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more .menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 230px; display: grid; padding: 6px; border-radius: 12px; background: rgba(12, 16, 36, .98); border: 1px solid var(--stroke); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
details.more .menu a, details.more .menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--bone); font: 500 14px var(--body); }
details.more .menu a:hover, details.more .menu button:hover { background: rgba(241, 232, 214, .07); }
details.more .menu .danger { color: #ff9a85; }

/* ---- body ---- */
.dbody { max-width: 1480px; padding: 6px var(--gutter) 90px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { display: grid; align-content: start; gap: 4px; min-height: 92px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--stroke); text-align: left; color: var(--bone); font: inherit; cursor: default; }
button.kpi { cursor: pointer; transition: border-color .15s, transform .15s; }
button.kpi:hover { border-color: rgba(242, 177, 52, .5); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transform: translateY(-1px); }
.k-label { font-size: 12px; font-weight: 600; color: #8f89a3; }
.k-value { font: 800 34px/1 var(--display); color: var(--bone); overflow-wrap: anywhere; }
.k-value.small { font: 600 16px/1.3 var(--body); margin-top: 6px; }
.k-value a { color: var(--bone); }
.k-value a:hover { color: var(--gold); }
.k-value .acct { margin: 2px 6px 2px 0; }
.k-sub { font-size: 12px; color: var(--ash); line-height: 1.35; }
.kpi.t-gold .k-value { color: var(--gold); }
.kpi.t-ember .k-value { color: #ff9a85; }
.kpi.t-acacia .k-value { color: var(--acacia); }

.dtabs { position: sticky; top: 0; z-index: 15; display: flex; gap: 2px; margin: 22px calc(-1 * var(--gutter)) 18px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; background: rgba(12, 16, 36, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke); }
.dtabs::-webkit-scrollbar { display: none; }
.dtabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 15px 14px 13px; border: 0; border-radius: 0; background: transparent; color: var(--ash); font: 600 14px var(--body); box-shadow: inset 0 -2px 0 transparent; }
.dtabs button:hover { background: transparent; color: var(--bone); }
.dtabs button[aria-selected="true"] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--gold); }
.dtabs .n { min-width: 20px; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: rgba(241, 232, 214, .08); color: var(--ash); text-align: center; }
.dtabs button[aria-selected="true"] .n { background: rgba(242, 177, 52, .18); color: var(--gold-soft); }
.dpane:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .dpane:not([hidden]) { animation: paneIn .25s ease-out; } }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dgrid > .pnl.wide, .dgrid > .pnl:only-child { grid-column: 1 / -1; }
.pnl { padding: 18px 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--stroke); min-width: 0; }
.dpane > .pnl + .pnl, .dpane > .pnl + h2 { margin-top: 14px; }
.pnl-h h3 { font: 600 13px var(--body); color: #8f89a3; margin: 0 0 12px; }
.pnl .table-wrap { border: 0; background: transparent; border-radius: 0; margin: 0 -20px; }
.pnl .table-wrap table th:first-child, .pnl .table-wrap table td:first-child { padding-left: 20px; }
.brief { margin: 0; font-size: 16px; line-height: 1.7; max-width: 72ch; color: rgba(241, 232, 214, .92); }
.dpane h2 { font-size: 24px; margin: 30px 0 12px; }
.dpane > h2:first-child { margin-top: 6px; }
.dpane .wall { margin-top: 2px; }

.ltiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ltile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(241, 232, 214, .03); border: 1px solid var(--stroke); color: var(--bone); min-width: 0; transition: border-color .15s, background .15s; }
a.ltile:hover { border-color: rgba(242, 177, 52, .5); background: rgba(242, 177, 52, .06); color: var(--bone); }
.mono-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--display); letter-spacing: .02em; background: rgba(241, 232, 214, .08); color: var(--bone); box-shadow: inset 0 0 0 1px var(--stroke); }
.ltile.m .mono-av { background: rgba(242, 177, 52, .16); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242, 177, 52, .35); }
.ltile.f .mono-av { background: rgba(241, 232, 214, .1); color: var(--bone); }
.ltile.ghost { border-style: dashed; color: var(--ash); background: transparent; }
.ltile.ghost .mono-av { background: transparent; box-shadow: inset 0 0 0 1px dashed var(--stroke); color: var(--ash); }
.lt-copy { display: grid; min-width: 0; }
.lt-copy b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-copy span { font-size: 12px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows { display: grid; gap: 2px; }
.rowlink { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 12px; margin: 0 -12px; border-radius: 10px; color: var(--bone); }
.rowlink:hover { background: rgba(241, 232, 214, .05); color: var(--bone); }
.rowlink b { font-weight: 600; }
.rowlink span { color: var(--ash); font-size: 13px; text-align: right; }
.dpane dl.facts { max-width: none; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0; }
.dpane dl.facts dt, .dpane dl.facts dd { padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.dpane dl.facts dt { font-size: 13px; padding-right: 24px; text-transform: none; }
.dpane dl.facts dt:nth-last-of-type(1), .dpane dl.facts dd:last-child { border-bottom: 0; }

/* History list inside a panel: a compact feed. */
.dpane .story { max-width: none; }
.dpane .story-note { margin: 0 0 16px; }
.ev-rec { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 6px; font-size: 12px; color: var(--ash); background: rgba(241, 232, 214, .06); vertical-align: 1px; }
.ev-rec:hover { background: var(--gold); color: #1a1205; }
.ev-text { font-size: 15px; }
.story .ev { padding: 6px 10px 6px 22px; border-radius: 10px; }
.story .ev:hover { background: rgba(241, 232, 214, .03); }

/* Sources tab */
.dpane .cite { padding-left: 22px; }
.dpane .cite li { padding: 10px 12px; border-bottom: 1px solid var(--stroke); margin: 0 0 0 -8px; border-radius: 0; }

/* Cards: quieter flags (status lives on the record page). */
.poster .p-flag { backdrop-filter: blur(6px); }

/* ---- collection toolbars: one tidy row ---- */
.toolbar { gap: 10px; padding: 12px; border-radius: var(--radius); background: var(--panel); border-color: var(--stroke); }
.ctl { min-width: 130px; }
.ctl span { font-size: 11px; }
.ctl input, .ctl select { padding: 9px 12px; font-size: 14px; }

/* ---- bottom tab bar (phones and tablets) ---- */
.tabbar { display: none; }
@media (max-width: 1023px) {
  :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 22; height: var(--tabbar-h); padding: 6px 6px env(safe-area-inset-bottom); background: rgba(10, 13, 30, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--stroke); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; padding: 4px 0; border: 0; border-radius: 10px; background: transparent; color: #8f89a3; font: 600 11px var(--body); }
  .tabbar .ti { font-size: 18px; line-height: 1; }
  .tabbar a.on { color: var(--gold); }
  main { padding-bottom: var(--tabbar-h); }
  #toast { bottom: calc(var(--tabbar-h) + 12px); }
  .top .menu-btn { display: none; }
  .dtabs { top: 62px; }
}
@media (max-width: 760px) {
  .dhero { min-height: 340px; }
  .dhero-in { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 18px; }
  .dhero-shade { background: linear-gradient(0deg, var(--night) 4%, rgba(12, 16, 36, .7) 45%, rgba(12, 16, 36, .15) 100%); }
  .d-trust { margin-top: 12px; }
  .d-trust .fresh { display: none; }
  .d-actions .btn.primary { flex: 1; justify-content: center; }
  details.more .menu { bottom: auto; top: calc(100% + 8px); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { min-height: 78px; padding: 12px 14px; }
  .k-value { font-size: 28px; }
  .dgrid { grid-template-columns: 1fr; }
  .pnl { padding: 16px; }
  .pnl .table-wrap { margin: 0 -16px; }
  .ltiles { grid-template-columns: 1fr; }
  .dpane dl.facts { grid-template-columns: 1fr; }
  .dpane dl.facts dt { border-bottom: 0; padding-bottom: 0; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; align-items: flex-end; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar .ctl { flex: none; }
  .toolbar .ctl.grow { flex: 0 0 72vw; }
}
.fam + .fam { margin-top: 16px; }
.fam h4 { margin: 0 0 8px; font: 600 12px var(--body); color: #8f89a3; }
.fam-more { margin: 16px 0 0; }
.g-unv { display: inline-block; width: 7px; height: 7px; padding: 0; margin-left: 6px; border-radius: 50%; border: 0; background: var(--gold-soft); vertical-align: 1px; }
.lg.unv::before { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--gold-soft); }
.brief.clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.more-btn { margin-top: 10px; padding: 7px 12px; font-size: 13px; background: rgba(241, 232, 214, .06); }
.kpi.t-none .k-value { color: #6f6a80; font-weight: 500; }
.pnl .tl { border: 0; padding: 0; background: transparent; }
.browse { padding: 6px var(--gutter) 40px; }
.browse h2 { margin: 10px 0 14px; font-size: 24px; }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.browse-grid a { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--stroke); color: var(--bone); font-weight: 600; }
.browse-grid a span { color: var(--gold); font-size: 18px; width: 22px; text-align: center; }
.browse-grid a:hover { border-color: rgba(242, 177, 52, .5); color: var(--bone); }
@media (max-width: 560px) {
  .browse-grid { grid-template-columns: 1fr 1fr; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wall .poster { aspect-ratio: 4 / 5; }
  .wall .poster .p-title { font-size: 19px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .wall .poster .p-meta { font-size: 11px; }
  .wall .poster .p-meta span:nth-child(n+3) { display: none; }
  .wall .poster .p-place { display: none; }
  .wall .poster:hover { transform: none; }
}
.story .k-count .dot { border-color: #9fb6ff; background: #9fb6ff; }
.tl-axis .ticks span:last-child { transform: translateX(-100%); } .tl-axis .ticks span:first-child { transform: none; }

/* ---------- north star: about page, footer, creators ---------- */
.about-hero { min-height: 62vh; }
.about { display: grid; gap: 34px; padding-top: 10px; }
.about h2 { margin: 0 0 14px; }
.north .lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.65; max-width: 62ch; margin: 0; color: rgba(241, 232, 214, .92); }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.principle { padding: 22px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--stroke); }
.principle .p-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(242, 177, 52, .14); color: var(--gold); font-size: 18px; }
.principle h3 { font-size: 26px; margin: 14px 0 8px; }
.principle p { margin: 0; color: var(--ash); line-height: 1.6; }
.about-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.about-figs div { display: grid; gap: 2px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--stroke); }
.about-figs b { font: 800 34px/1 var(--display); color: var(--bone); }
.about-figs span { font-size: 13px; color: var(--ash); }
.creators-cta p { max-width: 70ch; color: rgba(241, 232, 214, .9); line-height: 1.6; }
.standards { display: grid; gap: 10px; }
.std summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.std summary::-webkit-details-marker { display: none; }
.std summary::after { content: "+"; font-size: 22px; color: var(--gold); transition: transform .2s; }
.std[open] summary::after { transform: rotate(45deg); }
.std summary h3 { font-size: 24px; color: var(--bone); }
.std ul { margin: 14px 0 2px; padding-left: 20px; display: grid; gap: 8px; color: rgba(241, 232, 214, .88); line-height: 1.6; max-width: 80ch; }
.request { max-width: 760px; }
.creator-card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.creator-card .mono-av { grid-row: span 2; }
.site-foot { margin-left: var(--side-w, 0); padding: 30px var(--gutter) calc(30px + var(--tabbar-h, 0px)); border-top: 1px solid var(--stroke); color: var(--ash); display: grid; gap: 8px; }
.site-foot .foot-ns { margin: 0; font: 800 26px/1 var(--display); color: var(--gold); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot nav a { color: var(--bone); font-size: 14px; }
.site-foot .meta { margin: 0; max-width: 80ch; }
@media (max-width: 1023px) { .site-foot { margin-left: 0; } main { padding-bottom: 0; } }
@media (min-width: 1024px) { .site-foot { transition: margin-left .25s cubic-bezier(.2, .7, .2, 1); } }

/* ---------- pride succession gantt ---------- */
.gantt { display: grid; gap: 4px; overflow-x: auto; }
.g-axis, .g-lane { display: grid; grid-template-columns: minmax(170px, 260px) minmax(420px, 1fr); align-items: center; gap: 12px; }
.g-ticks { position: relative; height: 18px; font-size: 11px; color: #8f89a3; }
.g-ticks span { position: absolute; transform: translateX(-50%); }
.g-track { position: relative; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(241, 232, 214, .035) 0 1px, transparent 1px 100%); }
.g-who { display: grid; min-width: 0; line-height: 1.25; }
.g-who a { color: var(--bone); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-who a:hover { color: var(--gold); }
.g-who small { color: var(--ash); font-size: 12px; }
.g-bar, .g-tail, .g-cov, .g-gap { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; }
.g-bar { background: linear-gradient(90deg, #f2b134, #f6cf7e); box-shadow: 0 2px 8px rgba(242, 177, 52, .25); }
.g-bar:hover { filter: brightness(1.1); }
.g-tail.open { background: linear-gradient(90deg, rgba(242, 177, 52, .55), rgba(242, 177, 52, 0)); border-radius: 0 5px 5px 0; }
.g-tail.ended { background: repeating-linear-gradient(135deg, rgba(242, 177, 52, .45) 0 5px, rgba(242, 177, 52, .08) 5px 10px); border-radius: 0 5px 5px 0; }
.g-mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg); border-radius: 3px; }
.g-mark.holding { background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 177, 52, .25); }
.g-mark.ended { background: transparent; border: 2px solid var(--gold); }
.g-cover .g-track { height: 14px; }
.g-cover .g-who { font-size: 11px; }
.g-cov { top: 3px; bottom: 3px; background: rgba(140, 192, 158, .55); }
.g-gap { top: 1px; bottom: 1px; background: repeating-linear-gradient(135deg, rgba(212, 82, 58, .35) 0 4px, transparent 4px 8px); border: 1px dashed rgba(212, 82, 58, .55); display: grid; place-items: center; overflow: hidden; }
.g-gap b { font-size: 9px; font-weight: 600; color: #ffb3a5; white-space: nowrap; }
.g-undated { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g-undated .chip { padding: 3px 10px; font-size: 12px; }
.g-pride + .g-pride { margin-top: 12px; }
.g-pride h4 { margin: 0 0 8px; font: 600 14px var(--body); }
.g-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.g-head h3 { font-size: 24px; margin: 0; }
.g-head .meta { margin-left: auto; }
.g-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ash); margin: 10px 0 14px; }
.g-key span { display: inline-flex; align-items: center; gap: 6px; }
.g-key i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; }
.g-key .k-bar { background: linear-gradient(90deg, #f2b134, #f6cf7e); }
.g-key .k-open { background: linear-gradient(90deg, rgba(242, 177, 52, .6), rgba(242, 177, 52, 0)); }
.g-key .k-ended { background: repeating-linear-gradient(135deg, rgba(242, 177, 52, .5) 0 4px, rgba(242, 177, 52, .08) 4px 8px); }
.g-key .k-mark { width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }
.g-key .k-gap { background: repeating-linear-gradient(135deg, rgba(212, 82, 58, .4) 0 4px, transparent 4px 8px); border: 1px dashed rgba(212, 82, 58, .6); }
.pager { margin-top: 18px; }
@media (max-width: 760px) {
  .g-axis, .g-lane { grid-template-columns: 1fr; gap: 2px; }
  .g-axis > span:first-child { display: none; }
  /* More than seven years on a phone: label every other year so the labels do not run together. */
  .g-ticks.dense span.odd { display: none; }
  .g-lane { margin-bottom: 6px; }
  .gantt { overflow-x: visible; }
  .g-axis, .g-lane .g-track { min-width: 0; }
}

/* ---------- photos and videos ---------- */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.m-card { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--stroke); display: grid; }
.m-card img, .m-card .scene, .m-frame { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; }
.m-card.photo img { aspect-ratio: 4 / 3; }
.m-frame.ig { aspect-ratio: 4 / 5; background: #fff; }
.m-play, .m-link { position: relative; display: block; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; color: var(--bone); }
.m-btn { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; background: rgba(9, 12, 28, .7); border: 1px solid rgba(242, 177, 52, .6); color: var(--gold); font-size: 20px; backdrop-filter: blur(6px); transition: transform .15s; }
.m-play:hover .m-btn { transform: scale(1.08); }
.m-note { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--ash); background: rgba(9, 12, 28, .7); padding: 2px 8px; border-radius: 99px; }
.m-card figcaption { display: grid; gap: 3px; padding: 10px 12px 12px; font-size: 13px; }
.m-cap { color: var(--bone); }
.m-credit { color: var(--ash); }
.m-orig { font-size: 12px; }
.m-state { font-size: 12px; color: var(--gold-soft); }
.m-mod { padding: 0 12px 12px; }
.m-add { margin-top: 14px; justify-content: center; }
.consent { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.consent input { width: auto; margin-top: 3px; }
.dhero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dhero-credit { position: absolute; right: 12px; top: 12px; font-size: 11px; color: rgba(241, 232, 214, .8); background: rgba(9, 12, 28, .55); padding: 2px 8px; border-radius: 99px; z-index: 2; }

/* Changing the record needs a signed-in editor. Readers do not see the controls (the server refuses their writes in any case). */
body:not([data-editor]) a[href^="#/new/"],
body:not([data-editor]) a[href^="#/edit/"]:not(.gnode),
body:not([data-editor]) #del,
body:not([data-editor]) [data-uncite],
body:not([data-editor]) .side-add,
body:not([data-editor]) .editor-only { display: none !important; }
body:not([data-editor]) a.gnode.ghost { pointer-events: none; }

/* =====================================================================
   Size estimator (#/size): one calm column of lion cards, then the comparisons.
   ===================================================================== */
.sz { max-width: 1360px; }
.sz [hidden] { display: none !important; }
.sz-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 26px; }
.sz-head .sub { margin-bottom: 0; }
.seg button.on { background: rgba(241, 232, 214, .12); color: var(--bone); }
button.link { background: none; border: 0; padding: 0; color: var(--gold-soft); font: 500 14px var(--body); cursor: pointer; }
button.link:hover { color: var(--gold); background: none; }
.with-unit { display: flex; align-items: center; border: 1px solid var(--stroke); border-radius: 10px; background: var(--panel); }
.with-unit:focus-within { border-color: rgba(242, 177, 52, .6); }
.with-unit input { border: 0; background: transparent; min-width: 0; }
.with-unit input:focus-visible { outline: none; }
.with-unit span { padding: 0 12px 0 2px; color: var(--ash); font-size: 14px; white-space: nowrap; }
.fld { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #8f89a3; }

.sz-lions { display: grid; gap: 16px; }
.sz-lion { border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--panel); padding: 16px 16px 8px; border-top: 3px solid var(--c); min-width: 0; }
.sz-lion-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sz-key { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.sz-name { border: 0; background: transparent; padding: 2px 0; font: 800 26px/1.1 var(--display); color: var(--bone); flex: 1; min-width: 0; }
.sz-name::placeholder { color: var(--bone); opacity: .9; }
.sz-name:focus-visible { outline: none; box-shadow: 0 1px 0 var(--gold); }
.sz-form { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.sz-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sz-form .seg { height: 42px; }
.sz-add { margin-top: 14px; width: 100%; justify-content: center; border-style: dashed; background: transparent; color: var(--ash); }
.sz-add:hover { color: var(--gold); border-color: var(--gold); background: transparent; }

.sz-result { margin-top: 18px; }
.sz-big { display: grid; gap: 4px; }
.sz-big b { font: 900 clamp(40px, 6vw, 56px)/1 var(--display); color: var(--bone); letter-spacing: .005em; }
.sz-big b.none { font-size: 28px; color: var(--ash); }
.sz-big span, .sz-also { color: var(--ash); font-size: 14px; }
.sz-also { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.sz-also b { color: var(--bone); font-weight: 600; }
.sz-facts { display: grid; gap: 6px; margin: 14px 0 0; }
.sz-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.sz-facts dt { color: #8f89a3; font-size: 14px; }
.sz-facts dd { margin: 0; font-size: 15px; }
.sz-notes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; }
.sz-notes li { padding-left: 16px; position: relative; color: var(--ash); }
.sz-notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ash); }
.sz-notes li.warn { color: var(--gold-soft); }
.sz-notes li.warn::before { background: var(--gold); }
.sz-err { color: #ff9a85; margin: 0; }

/* Photo measuring */
.sz-photo { margin-top: 14px; }
.ph-drop { display: block; border: 1px dashed rgba(241, 232, 214, .2); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.ph-drop:hover, .ph-drop.over, .ph-drop:focus-within { border-color: var(--gold); background: rgba(242, 177, 52, .05); }
.ph-drop-in { display: grid; gap: 2px; }
.ph-drop-in b { font-weight: 600; color: var(--bone); }
.ph-work { display: grid; gap: 12px; }
.ph-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.ph-fields .fld { flex: 1 1 200px; }
.ph-stage { position: relative; border-radius: 10px; overflow: hidden; cursor: crosshair; background: #000; line-height: 0; touch-action: manipulation; }
.ph-stage img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ph-svg line, .ph-svg circle { stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ph-svg .ph-ref { stroke: #f1e8d6; fill: rgba(12, 16, 36, .6); }
.ph-svg .ph-lion { stroke: var(--gold); fill: rgba(12, 16, 36, .6); }
.ph-loupe { display: none; position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--gold); background-repeat: no-repeat; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.ph-loupe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid #fff; border-radius: 50%; }
.ph-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; counter-reset: st; }
.ph-step { padding: 7px 12px; font-size: 13px; font-weight: 500; border-radius: 99px; background: transparent; color: var(--ash); }
.ph-step.done { color: var(--bone); }
.ph-step.done::before { content: "✓"; color: var(--acacia); }
.ph-step.on { border-color: var(--gold); color: var(--gold-soft); }
.ph-hint { margin: 0; }

/* Comparisons */
.sz-compare { display: grid; gap: 16px; margin-top: 34px; }
.sz-chart { width: 100%; height: auto; display: block; font-family: var(--body); overflow: visible; }
.sz-chart .grid { stroke: rgba(241, 232, 214, .07); }
.sz-chart .base { stroke: rgba(241, 232, 214, .25); }
.sz-chart .tick { fill: #8f89a3; font-size: 12px; }
.sz-chart .ax-h { fill: #8f89a3; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sz-chart .lbl { fill: var(--bone); font-size: 13px; }
.sz-chart .val { fill: var(--bone); font-size: 13px; font-weight: 600; }
.sz-chart .c-lbl { fill: var(--ash); font-size: 13px; }
.sz-chart .hit { fill: transparent; }
.sz-chart [tabindex]:hover .hit, .sz-chart [tabindex]:focus-visible .hit { fill: rgba(241, 232, 214, .035); }
.sz-chart [tabindex]:focus-visible { outline: none; }
.sz-chart .ref { fill: var(--ash); stroke: var(--panel); stroke-width: 2; }
.sz-chart .you { stroke: var(--panel); stroke-width: 2; }
.sz-chart .ref.pt { stroke-width: 1.5; opacity: .85; }
.sz-chart .rng { stroke: var(--ash); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.sz-chart .curve { fill: none; stroke: var(--ash); stroke-width: 2; }
.sz-chart .curve.m { stroke-dasharray: 6 4; }
.sz-chart .bar-ref { fill: rgba(163, 157, 179, .35); }
.sz-table summary { cursor: pointer; color: var(--gold-soft); font-size: 14px; margin-top: 10px; }
.sz-table .table-wrap { margin-top: 10px; }
.sz-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sz-tip { position: fixed; z-index: 60; max-width: 280px; padding: 9px 12px; border-radius: 10px; background: #0a0e20; border: 1px solid rgba(241, 232, 214, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 13px; line-height: 1.4; pointer-events: none; display: grid; gap: 2px; }
.sz-tip span { color: var(--ash); }

.sz-methods { margin-top: 30px; max-width: 760px; }
.sz-methods dl { margin: 0; display: grid; gap: 4px; }
.sz-methods dt { font-weight: 600; margin-top: 14px; }
.sz-methods dd { margin: 0; color: var(--ash); font-size: 15px; }
.sz-methods code { font-size: 12px; }

@media (max-width: 720px) {
  .sz-form { grid-template-columns: 1fr 1fr; }
  .sz-form .seg { grid-column: 1 / -1; width: 100%; }
  .sz-form .seg button { flex: 1; }
  .sz-facts div { grid-template-columns: 1fr; gap: 0; }
  .sz-lion { padding: 16px; }
}
.sz-link { margin-bottom: 12px; }
.sz-rec-info { margin-top: 6px; }
.sz-rec-info:empty { display: none; }
.sz-save { margin-top: 14px; }
.sz-save:empty { display: none; }
.sz-save-form { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--panel-2); }
.sz-save-form p { margin: 0; }
.sz-save-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sz-save-form textarea { min-height: 64px; }
.sz-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ash); }
.sz-check input { width: auto; }
.sz-saved { margin: 0 0 10px; font-size: 14px; color: var(--acacia); }
@media (max-width: 720px) { .sz-save-grid { grid-template-columns: 1fr; } }
.sz-guide { margin-top: 34px; max-width: 980px; }
.sz-guide h3 { font: 600 15px var(--body); color: var(--bone); margin: 22px 0 10px; }
.sz-guide td { vertical-align: top; }
.sz-rules { padding-left: 18px; color: var(--ash); display: grid; gap: 6px; max-width: 760px; }
.sz-rules b { color: var(--bone); font-weight: 600; }
.sz-group { font: 600 13px var(--body); color: #8f89a3; margin: 16px 0 8px; }
.sz-group:first-child { margin-top: 0; }
.sz-def { font-weight: 400; color: var(--ash); font-size: 13px; margin: 2px 0 0; }
form.edit label[hidden] { display: none; }
.m-community { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: 12px; color: var(--gold-soft); border: 1px solid rgba(242, 177, 52, .4); cursor: help; }
.privacy ul { padding-left: 18px; display: grid; gap: 8px; max-width: 760px; color: var(--ash); }
.privacy ul b { color: var(--bone); font-weight: 600; }
.privacy h2 { font-size: 24px; margin: 30px 0 10px; }
.rm-year h2 { font-size: 30px; margin: 34px 0 12px; }
.rm-list { display: grid; gap: 6px; }
.rm-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(140px, .8fr) minmax(200px, 2fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--stroke); color: var(--bone); }
.rm-row:hover { border-color: var(--gold); color: var(--bone); }
.rm-name { display: grid; gap: 2px; min-width: 0; }
.rm-name b { font-weight: 600; }
.rm-life, .rm-cause { font-size: 14px; color: var(--ash); }
@media (max-width: 720px) { .rm-row { grid-template-columns: 1fr; gap: 4px; } }

/* Social inbox (#/inbox) */
.ib-list { display: grid; gap: 12px; margin-top: 12px; }
.ib-post { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ib-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ib-caption { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.ib-batch { position: sticky; top: 0; z-index: 2; align-items: center; }
.ib-pick { width: 18px; height: 18px; margin: 0 4px 0 0; accent-color: var(--gold); }
.ib-sug { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.ib-sug:first-of-type { border-top: 0; }
.ib-sug .ib-pick { margin-top: 3px; flex: none; }
.ib-doubt { opacity: .78; }
.ib-nothing { margin-top: 18px; }
.ib-nothing summary { cursor: pointer; color: var(--ash); }

/* Reports & movements (lion and coalition pages) */
.mv-map { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0; background: #080b1c; aspect-ratio: 600 / 372; max-height: 460px; }
.mv-map svg { display: block; width: 100%; height: 100%; }
.mv-map .sea { fill: transparent; }
.mv-map .cty { fill: #222a52; stroke: #4c5894; }
.mv-path { fill: none; stroke: var(--gold); stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.mv-arrowhead { fill: var(--gold); }
.mv-pin circle { fill: var(--gold); stroke: var(--night); }
.mv-pin text { fill: var(--night); font-weight: 700; text-anchor: middle; font-family: var(--body); }
.mv-pin .mv-label { fill: var(--bone); text-anchor: start; font-weight: 600; paint-order: stroke; stroke: rgba(11, 15, 30, .85); stroke-width: .35px; }
.mv-stops { margin: 6px 0 14px 18px; }
.mv-stops li { margin: 3px 0; }
.rp-year { margin: 16px 0 6px; color: var(--ash); }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rp-date { display: flex; flex-direction: column; gap: 2px; }
.rp-body p { margin: 0 0 4px; }
.rp-places { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
@media (max-width: 600px) { .rp { grid-template-columns: 1fr; gap: 4px; } }
.mv-named circle { fill: transparent; stroke: var(--gold-soft); }
.mv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mv-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
.mv-key.hollow { background: transparent; border: 2px solid var(--gold-soft); }

/* Lion map (#/atlas) */
.at-bar { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.at-layer { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.at-layer input { width: auto; }
.at-find { min-width: 220px; }
.at-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.at-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; margin-top: 12px; }
.at-map { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #080b1c; height: min(72vh, 680px); touch-action: none; user-select: none; }
.at-map svg { width: 100%; height: 100%; display: block; cursor: grab; }
.at-map svg:active { cursor: grabbing; }
.at-map .cty { fill: #222a52; stroke: #4c5894; }
.at-agg { cursor: zoom-in; }
.at-agg path, .at-agg circle:not(.at-agg-ring) { stroke: none; }
.at-agg-ring { fill: none; stroke: #0c1024; }
.at-agg:hover .at-agg-ring, .at-agg:focus .at-agg-ring { stroke: #fff; }
.at-agg text { fill: #0c1024; font-family: var(--body); font-weight: 800; text-anchor: middle; pointer-events: none; }
.at-place { fill: var(--bone); font-family: var(--body); font-weight: 600; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #080b1c; stroke-linejoin: round; }
.at-dotg { cursor: pointer; }
.at-dotg circle { stroke: #0c1024; }
.at-dotg circle.gone { opacity: .45; }
.at-dotg.sel circle { stroke: #fff; }
.at-dotg.rel circle { stroke: #fff; }
.at-dotg.dim { opacity: .35; }
.at-rel { stroke-linecap: round; opacity: .95; }
.at-rel-coal { stroke: #e0663f; }
.at-rel-pride { stroke: #6fbf73; }
.at-rel.former { opacity: .85; } /* dashes are drawn at screen size by atlas.js */
.at-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.at-scale { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--ash); display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.at-scale span { display: block; height: 6px; border: 2px solid var(--ash); border-top: 0; }
.at-side { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; height: min(72vh, 680px); overflow: auto; }
.at-side h3 { margin: 0 0 6px; } .at-side h4 { margin: 14px 0 4px; }
.at-counts, .at-near { list-style: none; margin: 6px 0; padding: 0; }
.at-counts li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.at-near li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; }
.at-near .meta { text-align: right; flex: none; max-width: 55%; }
.linklike { background: none; border: 0; padding: 0; color: var(--gold-soft); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.linklike:hover { text-decoration: underline; }
@media (max-width: 900px) { .at-wrap { grid-template-columns: 1fr; } .at-side { height: auto; max-height: none; } .at-map { height: 62vh; } }

/* Size estimator: body shape controls and lions to scale */
.sz-shape { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.sz-shape summary { cursor: pointer; font-weight: 600; }
.sz-shape-ctl { display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 10px 0; }
.sz-sl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; font-size: 13px; }
.sz-sl .sz-sl-l { grid-column: 1; }
.sz-sl-v { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; }
.sz-num { width: 76px; padding: 4px 6px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.sz-unit { color: var(--ash); font-size: 12px; min-width: 18px; }
.sz-range { grid-column: 1 / 3; width: 100%; padding: 0; accent-color: var(--c, var(--gold)); }
.sz-ends { grid-column: 1 / 3; font-size: 11px; min-height: 13px; margin-top: -2px; }
.sz-sl.set .sz-num { border-color: var(--c, var(--gold)); color: var(--c, var(--gold)); font-weight: 700; }
.sz-shape.female .sz-sl[data-k=maneDark] { display: none; }
.sz-stage { margin: 14px 0; }
.sz-stage .pnl-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.sz-stage-ctl { align-items: center; gap: 12px; }
.sz-stage-svg { width: 100%; height: auto; display: block; touch-action: none; }
.sz-ground { stroke: var(--ash); stroke-width: 1.5; }
.sz-r-axis, .sz-r-t { stroke: var(--ash); stroke-width: 1; }
.sz-r-t.big { stroke-width: 1.5; }
.sz-r-g { stroke: var(--line); stroke-width: 1; }
.sz-r-n { fill: var(--ash); font: 600 11px var(--body); }
.sz-veh { stroke: #8fa3d6; stroke-width: 1.2; stroke-dasharray: 6 5; }
.sz-veh-t { fill: #8fa3d6; font: 600 11px var(--body); }
.sz-fig-n { font: 700 13px var(--body); }
.sz-fig-m { fill: var(--ash); font: 500 11px var(--body); }
.sz-h { fill: rgba(241, 232, 214, .25); stroke: var(--bone); stroke-width: 1.5; cursor: grab; transition: fill .15s; }
.sz-h:hover, .sz-h:focus { fill: var(--gold); stroke: #0c1024; }
.sz-stage-svg:hover .sz-h { fill: rgba(241, 232, 214, .55); }

.sz-type { max-width: 420px; margin: 10px 0 2px; }


/* Size estimator layout: the stage pinned beside (desktop) or above (mobile) the controls of one lion at a time */
.sz-app { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.sz-viz { position: sticky; top: 12px; display: grid; gap: 10px; min-width: 0; z-index: 3; }
.sz-viz .sz-stage { margin: 0; }
.sz-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; display: grid; gap: 12px; align-content: start; overscroll-behavior: contain; scrollbar-width: thin; }
.sz-tabs { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; background: var(--night); padding-bottom: 2px; }
.sz-tab { padding: 8px 14px; font-size: 14px; border-radius: 999px; background: transparent; border: 1px solid var(--stroke); color: var(--ash); gap: 8px; }
.sz-tab .sz-key { background: var(--c); }
.sz-tab.on { color: var(--bone); border-color: var(--c); background: rgba(241, 232, 214, .06); }
.sz-tab-add { border-style: dashed; }
.sz-tab-add:hover { color: var(--gold); border-color: var(--gold); }
.sz-sec { border-top: 1px solid var(--line); padding: 4px 0; }
.sz-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 10px 0; font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ash); }
.sz-sec > summary::-webkit-details-marker { display: none; }
.sz-sec > summary::after { content: "▾"; margin-left: auto; transition: transform .15s; }
.sz-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.sz-sec > summary .meta { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.sz-sec-b { display: grid; gap: 12px; padding: 2px 0 12px; }
.sz-sec .sz-photo { margin-top: 0; }
.sz-sec .sz-result { margin-top: 0; }
.sz-type { max-width: none; margin: 0; }
.sz-shape { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 4px 0; }
.sz-shape-ctl { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0; }
.sz-grp { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.sz-grp legend { font: 600 12px var(--body); color: var(--gold-soft); padding: 0 0 6px; }
.sz-shape.female .sz-grp[data-g=Mane] .sz-sl[data-k=maneDark] { display: none; }
.sz-sum { display: grid; gap: 6px; }
.sz-sum-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--panel); color: var(--bone); font-weight: 500; justify-content: flex-start; text-align: left; }
.sz-sum-row .sz-key { background: var(--c); }
.sz-sum-row.on { border-color: var(--c); }
.sz-sum-n { font-weight: 700; min-width: 72px; }
.sz-sum-v { color: var(--ash); display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 14px; }
.sz-sum-v b { color: var(--bone); }
.sz-sum-v i { font-style: normal; opacity: .5; }
.sz-pick { cursor: pointer; }
.sz-pick.dim { opacity: .55; }
.sz-pick:hover { opacity: 1; }
.sz-more { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 6px; max-width: 900px; }
.sz-more > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sz-more > summary::-webkit-details-marker { display: none; }
.sz-more > summary h2 { margin: 8px 0; font-size: 22px; }
.sz-more > summary::after { content: "▾"; margin-left: auto; color: var(--ash); }
.sz-more:not([open]) > summary::after { transform: rotate(-90deg); }
.sz-compare { margin-top: 26px; }
@media (max-width: 1100px) {
  .sz-app { grid-template-columns: 1fr; }
  .sz-viz { top: var(--sz-top, 0px); background: var(--night); padding: 6px 0 8px; margin: 0 -4px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .7); gap: 6px; }
  .sz-viz .sz-stage .pnl-h h3, .sz-viz .sz-stage > .meta { display: none; }
  .sz-viz .sz-stage { padding: 6px 8px; }
  .sz-viz .sz-stage .pnl-h { margin: 0 0 4px; }
  .sz-viz .sz-fig-n, .sz-viz .sz-fig-m { display: none; }
  .sz-panel { position: static; max-height: none; overflow: visible; }
  .sz-sum { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; }
  .sz-sum-row { padding: 8px 12px; }
}
@media (max-width: 600px) {
  .sz-form-2 { grid-template-columns: 1fr 1fr; }
  .sz-num { width: 84px; font-size: 16px; padding: 6px 8px; }
  .sz-range { height: 28px; }
  .sz-tab { padding: 10px 14px; }
  .sz-name { font-size: 22px; }
  .sz-stage-ctl { gap: 8px; }
}
.sz-form-2 .seg { justify-self: start; width: auto; height: 42px; }
.sz-head { margin-bottom: 18px; }

/* Below the fixed mobile top bar (46 px) the pinned stage stays in view; on desktop there is no top bar. */
@media (max-width: 900px) { .sz { --sz-top: 46px; } }
@media (max-width: 600px) {
  .sz-sl .sz-sl-l .meta { display: none; }
  .sz-ends:empty { display: none; }
  .sz-sl { gap: 0 10px; }
  .sz-stage-ctl { flex-wrap: nowrap; overflow-x: auto; font-size: 13px; }
  .sz-stage-ctl .sz-check { white-space: nowrap; }
  .sz-sum-row { font-size: 13px; }
}

.sz-stage .sh { display: none; }
@media (max-width: 600px) {
  .sz-stage .lg { display: none; }
  .sz-stage .sh { display: inline; }
  .sz-stage-ctl { flex-wrap: nowrap; overflow: visible; gap: 10px; }
  .sz-stage .seg button { padding: 6px 10px; }
  .sz-ends { display: none; }
  .sz-sl .sz-sl-l { align-self: center; }
}