/* Gradual theme layer. Legacy layouts and data-specific controls remain intact. */
:root {
  --bg: #111411;
  --surface: #171b17;
  --raised: #202620;
  --line: #2b332c;
  --text: #ecefe9;
  --muted: #a7b0a5;
  --lime: #c7ef81;
  --wa-font-family-body: var(--display);
  --wa-font-family-heading: var(--display);
  --wa-color-surface-default: var(--bg);
  --wa-color-surface-raised: var(--surface);
  --wa-color-surface-lowered: var(--bg);
  --wa-color-surface-border: var(--line);
  --wa-color-text-normal: var(--text);
  --wa-color-text-quiet: var(--muted);
  --wa-color-focus: var(--lime);
  --wa-color-brand-fill-loud: var(--lime);
  --wa-color-brand-on-loud: #17200f;
  --wa-color-brand-border-loud: var(--lime);
  --wa-color-neutral-fill-quiet: var(--surface);
  --wa-color-neutral-fill-normal: var(--raised);
  --wa-color-neutral-on-quiet: var(--text);
  --wa-color-neutral-on-normal: var(--text);
  --wa-color-neutral-border-normal: #414b41;
  --wa-form-control-background-color: var(--bg);
  --wa-form-control-border-color: #414b41;
  --wa-form-control-border-color-hover: #708368;
  --wa-form-control-border-radius: 6px;
  --wa-focus-ring-width: 2px;
  --wa-focus-ring-offset: 3px;
}

/* One modest control scale for both sides of the migration. */
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
wa-button { vertical-align: middle; font-family: inherit; }
wa-button::part(button) {
  min-height: 40px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: none;
  transition: background-color 140ms, border-color 140ms;
}
wa-button:not([disabled]):active { scale: .96; }
wa-button[appearance="outlined"]::part(button) { border-color: #414b41; }
wa-button[disabled] { cursor: default; }
wa-button.icon-button { min-width: 40px; height: 40px; border: 0; }
wa-button.icon-button::part(button) { padding: 0; width: 40px; font-size: 20px; }
wa-button.quiet { padding: 0; }
button, .button { font-weight: 450; }
button:hover { background: #252d24; }
button.primary, .button.primary { background: var(--lime); color: #17200f; }

/* Shared navigation inventory, with a compact menu on small screens. */
.navigation-toggle { display: none; }
.rail { background: #151815; }
.rail nav { scrollbar-color: #46503f transparent; scrollbar-width: thin; }
.rail .nav-group { display: grid; gap: 2px; }
.nav-group h2 { margin: 10px 12px 5px; color: #869180; font: 12px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.rail .nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.rail nav wa-button::part(button), .rail-bottom wa-button::part(button) {
  justify-content: flex-start; text-align: left; padding: 0 12px;
  min-height: 40px; font-size: 12px; line-height: 1.4;
  color: #b4bcb0; background: transparent; border: 1px solid transparent;
}
.rail nav wa-button::part(label) { white-space: nowrap; }
.rail nav wa-button:hover::part(button) { color: var(--text); background: #21271e; }
.rail nav wa-button.active::part(button), .rail-bottom wa-button.active::part(button) {
  color: var(--lime); background: #252e20; border-color: #36452b; box-shadow: inset 2px 0 var(--lime);
}
.rail nav wa-button.active .nav-icon { opacity: 1; }
.rail-bottom wa-button { width: 100%; }
@media (min-width: 851px) {
  .rail { width: 240px; padding: 22px 12px 14px; overflow: hidden; }
  .workspace { margin-left: 240px; }
  .brand { margin: 0 11px 16px; gap: 11px; flex-shrink: 0; }
  .brand img { width: 34px; height: 34px; }
  .rail nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 12px; padding-bottom: 10px; }
  .rail .nav-group { flex-shrink: 0; }
  .rail nav wa-button { width: 100%; }
  .rail nav .mobile-export { display: none; }
  .rail-bottom { padding: 9px 0 0; flex-shrink: 0; border-top: 1px solid var(--line); }
  .rail-bottom p { margin: 8px 12px 4px; line-height: 1.7; font-size: 12px; }
  .rail-bottom > a { display: inline-block; margin: 0 12px; font-size: 12px; }
}
.topbar { height: 68px; padding-inline: 32px; background: #111411f5; }
.topbar input { background: var(--surface); border-color: var(--line); }
.topbar form { flex: 1 1 180px; min-width: 0; max-width: 470px; }
.topbar input { min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Keep the shadow buttons inside their hosts, aligned with the search field. */
.topbar-actions wa-button { display: inline-flex; height: 42px; }
.topbar-actions wa-button::part(button) { box-sizing: border-box; height: 42px; min-height: 42px; }
.topbar-actions #helpButton { width: 42px; }
.topbar-actions #helpButton::part(button) { width: 42px; padding: 0; }
.topbar-actions #helpButton::part(label) { display: flex; align-items: center; justify-content: center; }
.topbar-actions #helpButton svg { display: block; width: 20px; height: 20px; }
#donateButton svg { display: block; width: 16px; height: 16px; color: #d52236; fill: currentColor; }
#donateButton, .donation-dialog { --lime: #c3ff00; --wa-color-brand-fill-loud: #c3ff00; --wa-color-brand-border-loud: #c3ff00; --wa-color-focus: #c3ff00; }
#donateButton::part(button) { background: var(--lime); color: #000; border-color: var(--lime); padding-inline: 13px; font-weight: 600; }
#donateButton:hover::part(button) { background: #d0ff3d; border-color: #d0ff3d; }
#donateButton:active::part(button) { background: #afe600; border-color: #afe600; }
.donation-dialog {
  --text: #111411;
  --muted: #344600;
  --lime: #111411;
  --line: rgb(17 20 17 / 24%);
  --bg: rgb(255 255 255 / 22%);
  --wa-color-text-normal: #111411;
  --wa-color-text-quiet: #344600;
  --wa-color-neutral-on-quiet: #111411;
  --wa-color-neutral-on-normal: #111411;
  --wa-color-neutral-fill-quiet: transparent;
  --wa-color-neutral-fill-normal: rgb(17 20 17 / 8%);
  --wa-color-brand-fill-loud: #111411;
  --wa-color-brand-border-loud: #111411;
  --wa-color-brand-on-loud: #c3ff00;
  --wa-color-focus: #111411;
  width: 480px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
  padding: 24px; border-radius: 10px; background: #c3ff00; color: var(--text); border-color: #c3ff00;
}
.donation-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.donation-heading .eyebrow { margin: 0; font-size: 12px; }
.donation-brand { display: flex; align-items: center; gap: 20px; margin: 4px 0 20px; }
.donation-brand img { display: block; width: 96px; height: auto; flex-shrink: 0; outline: none; filter: brightness(0); }
.donation-brand > div { min-width: 0; }
.donation-dialog h2 { font-size: 29px; }
.donation-dialog p { color: var(--muted); font-size: 14px; }
.donation-dialog .donation-lead { color: var(--text); margin: 10px 0; font-size: 17px; }
.donation-networks { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 12px; }
.donation-networks wa-badge::part(base) { border-radius: 4px; border-color: var(--line); background: transparent; color: var(--text); font-size: 12px; }
.donation-networks wa-badge:first-child::part(base) { color: var(--text); border-color: var(--text); }
.donation-dialog .donation-instruction { font-size: 12px; }
.donation-dialog label { display: block; font-size: 12px; margin: 22px 0 9px; color: var(--muted); }
#donationAddress { display: block; width: 100%; resize: none; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 12px; color: var(--text); font: 13px/1.8 var(--mono); overflow-wrap: anywhere; }
#copyDonation { display: block; width: 100%; margin-top: 12px; }
#copyDonation::part(button) { width: 100%; }
#donationStatus { min-height: 20px; margin: 8px 0; color: var(--lime); font-size: 12px; }
#donationWalletLinks { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
#donationWalletLinks a { display: flex; align-items: center; min-height: 40px; font-size: 12px; }
main { padding: 32px 32px 50px; }
footer { padding-inline: 32px; }

/* Reduce visual weight, not information: art and original media stay available. */
.hero { grid-template-columns: minmax(0,1fr) 230px; gap: 30px; padding: 4px 0 30px; align-items: center; }
.hero h1 { font-size: clamp(34px,3.6vw,48px); line-height: 1.1; letter-spacing: -.045em; }
.hero h1 br { display: none; }
.hero h1 em { display: inline; color: var(--text); }
.hero h1 em::before { content: ' '; }
.hero .eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .1em; margin-bottom: 17px; }
.hero p { font-size: 14px; line-height: 1.8; margin: 18px 0 22px; }
.hero-art { min-height: 210px; background: none; }
.hero-art .coin { width: 78px; height: 78px; box-shadow: none; filter: none; }
.hero-art svg { opacity: .25; }
.orbit-label { font-size: 12px; letter-spacing: .06em; background: var(--bg); }
.stats { margin-bottom: 25px; }
.stat { padding-block: 20px; }
.stat strong { font-size: 27px; }
.stat + .stat { border-left-color: #252d26; }
.page-heading h1 { font-size: clamp(28px,3vw,36px); line-height: 1.16; }
.page-heading p { font-size: 13px; line-height: 1.8; }
.page-heading.illustrated-heading { grid-template-columns: minmax(0,1fr) 150px; gap: 26px; }
.section-artwork img { aspect-ratio: 3/2; border-radius: 6px; }
.section-artwork figcaption { font-size: 12px; }
.archive-explanation-banner { background: transparent; border: 0; border-left: 2px solid #6e8555; border-radius: 0; padding: 4px 0 4px 20px; margin: 30px 0; }
.archive-explanation-banner h2 { font-size: 21px; }
.archive-explanation-banner p { color: var(--muted); font-size: 13px; }
.card, .record-card, .connection-index-card { border-color: var(--line); border-radius: 6px; background: var(--surface); }
.record-card:hover { background: #1c241b; border-color: #526249; }
.record-card p { color: var(--muted); }
.universe-record :is(h3,p,.bottom) { max-width: 100%; overflow-wrap: anywhere; }
.source-card-action { font-size: 12px; color: var(--lime); }
.reader-guide-grid button.reader-guide { background: var(--surface); border-color: var(--line); border-radius: 6px; }
.reader-guide-grid button.reader-guide:hover { background: #20271e; border-color: #526249; }
.reader-guide-grid .reader-guide > img { height: 108px; border-color: var(--line); }
.reader-guide-grid .reader-guide h3 { font-size: 17px; }
.reader-guide-grid .reader-guide p { font-size: 13px; color: var(--muted); }
.reader-guide-grid .reader-guide small { color: var(--muted); }
.reader-guide-grid .reader-guide span { color: var(--lime); }

/* Evidence stays labeled and color-coded, with less filled-in decoration. */
wa-badge.badge { padding: 0; background: transparent; border: 0; --evidence-color: var(--muted); }
wa-badge.badge::part(base) {
  color: var(--evidence-color);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--evidence-color) 30%, transparent);
  border-radius: 4px;
  padding: 4px 6px;
  font: 12px/1.3 var(--mono);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}
wa-badge:is(.documented,.verified,.answered) { --evidence-color: var(--mint); }
wa-badge.attributed { --evidence-color: var(--blue); }
wa-badge.interpretation { --evidence-color: var(--purple); }
wa-badge:is(.hypothesis,.partial) { --evidence-color: var(--amber); }
wa-badge:is(.unresolved,.contradicted,.unavailable) { --evidence-color: var(--red); }

.universe-filters { gap: 10px; padding-block: 16px; margin: 12px 0 22px; border-block: 1px solid var(--line); }
.universe-filters wa-input { flex: 1 1 230px; min-width: 180px; }
.universe-filters wa-input::part(form-control-label) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.universe-filters wa-input::part(base) { min-height: 42px; background: var(--bg); border-color: #414b41; box-shadow: none; }
.universe-filters wa-input::part(input) { font-size: 13px; }
.universe-filters select { background: var(--bg); border-color: #414b41; min-height: 42px; }
.universe-filters .result-count { flex-basis: 100%; font: 12px/1.5 var(--mono); margin: 3px 0 0; }
.universe-pager { flex-wrap: wrap; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.universe-pager span { font-variant-numeric: tabular-nums; }
.universe-pager wa-button[disabled] { opacity: .5; }
.empty { border-style: solid; border-radius: 6px; }
/* Modal controls size their shadow button as well as the host. */
:is(#detail, #donateDialog) wa-button.icon-button {
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}
:is(#detail, #donateDialog) wa-button.icon-button::part(button) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
}
:is(#detail, #donateDialog) wa-button.icon-button::part(label) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
:is(#detail, #donateDialog) wa-button.icon-button:hover::part(button) {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 16%, transparent);
}
:is(#detail, #donateDialog) wa-button.icon-button::part(button):focus-visible {
  outline: 2px solid var(--wa-color-focus);
  outline-offset: 2px;
}
#detail { padding: 0; background: #171d17; border-color: #3a4636; }
#detail .drawer-top,
#detail.reader-dialog :is(.reader-toolbar, .drawer-top) {
  position: sticky;
  top: 0;
  z-index: 6;
  gap: 12px;
  min-height: 65px;
  margin: 0;
  padding: 12px 28px;
  border-bottom: 1px solid var(--reader-line, var(--line));
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: #172219f7;
  backdrop-filter: blur(16px);
}
#detail #detailBack { display: inline-flex; flex: 0 1 auto; min-width: 0; max-width: 60%; height: 40px; margin: 0; }
#detail #detailBack::part(button) { box-sizing: border-box; min-width: 0; height: 40px; min-height: 40px; padding: 0 12px; border-radius: 6px; }
#detail #detailBack::part(label) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detail:not(.reader-dialog) #detailBody { padding: 24px 28px 32px; }
#detail.reader-dialog { border-radius: 8px; }
#noteDialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 24px 28px; }
#noteDialog .actions { margin-top: 24px; justify-content: flex-end; gap: 10px; }
@media (max-width: 760px) {
  #detail .drawer-top,
  #detail.reader-dialog :is(.reader-toolbar, .drawer-top) { padding: 10px 22px; min-height: 61px; gap: 8px; }
  #detail:not(.reader-dialog) #detailBody { padding: 22px; }
  #noteDialog { padding: 22px; }
}
@media (max-width: 440px) {
  #detail .drawer-top,
  #detail.reader-dialog :is(.reader-toolbar, .drawer-top) { padding-inline: 16px; }
  #detail:not(.reader-dialog) #detailBody { padding: 20px 16px 24px; }
  #noteDialog { padding: 20px; }
}

@media (max-width: 1100px) and (min-width: 851px) {
  .hero { grid-template-columns: minmax(0,1fr) 170px; gap: 20px; }
  .hero-art { min-height: 180px; }
}
@media (max-width: 850px) {
  .rail { padding: 14px 20px 10px; }
  .brand { margin-bottom: 8px; }
  .navigation-toggle { display: block; width: 100%; }
  .navigation-toggle::part(button) { width: 100%; justify-content: space-between; padding: 0; border: 0; color: var(--text); }
  .navigation-toggle::part(label) { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .navigation-toggle-label { color: var(--muted); font-size: 12px; }
  .navigation-toggle-label > span { margin-left: 10px; }
  .rail nav { display: none; }
  .rail.navigation-open nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; max-height: 65vh; overflow: auto; padding: 8px 0; }
  .rail .nav-group { align-content: start; min-width: 0; }
  .rail nav wa-button { display: block; min-width: 0; }
  .rail nav wa-button::part(button) { width: 100%; padding: 7px 9px; font-size: 12px; }
  .rail nav wa-button::part(label) { white-space: normal; }
  .rail nav .mobile-export { display: block; align-self: end; }
  .nav-group h2 { margin-left: 10px; }
  .topbar { padding-inline: 20px; }
  main { padding: 24px 20px 40px; }
  footer { padding-inline: 20px; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero h1 { font-size: clamp(30px,5.6vw,42px); }
}
@media (max-width: 600px) {
  .topbar { gap: 10px; }
  .topbar-actions { gap: 4px; }
  #donateButton::part(button) { padding-inline: 10px; }
  .donation-dialog { padding: 20px; }
  .donation-brand { gap: 14px; }
  .donation-brand img { width: 76px; }
  .donation-dialog h2 { font-size: 25px; }
  .donation-dialog .donation-lead { font-size: 14px; margin-bottom: 0; }
  .page-heading.illustrated-heading { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .page-heading .section-artwork { width: 110px; }
  .page-heading .section-artwork figcaption { text-align: left; }
  .universe-filters wa-input { flex-basis: 100%; }
  .universe-filters select { flex: 1 1 130px; min-width: 0; max-width: 100%; }
  .universe-filters wa-button { flex: 0 0 auto; }
  .universe-pager { gap: 10px; }
  .universe-pager wa-button::part(button) { padding-inline: 10px; }
  .stat strong { font-size: 23px; }
  .stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat:nth-child(4) { border-left: 0; padding-left: 0; }
}
/* Section controls now share one renderer across all research pages. */
.ui-section-switch { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-bottom: 12px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.ui-section-switch wa-button::part(button) { color: var(--muted); padding-inline: 13px; background: transparent; border: 1px solid transparent; }
.ui-section-switch wa-button:hover::part(button) { color: var(--text); background: var(--surface); }
.ui-section-switch wa-button.selected::part(button) { color: var(--lime); background: #242d20; border-color: #3c4a32; }
.ui-section-switch wa-button::part(label) { white-space: normal; }

/* Native specialist controls keep their behavior and use the same design tokens. */
.filters:not(.universe-filters), .post-controls, .oc-filters { gap: 10px; padding: 16px 0; margin: 16px 0 22px; border-block: 1px solid var(--line); background: transparent; }
main :is(input,select,textarea), #detail :is(input,select,textarea) { background: var(--bg); border-color: #414b41; border-radius: 6px; font-size: 13px; min-height: 42px; }
main :is(button,.button), #detail :is(button,.button) { border-radius: 6px; }
main :is(.actions,.chip-row) { gap: 8px; }
.history-layout { gap: 28px; }
.history-outline, .article-list, .interview-list { scrollbar-width: thin; scrollbar-color: #46503f transparent; }
:is(.history-choice,.article-choice,.interview-choice).active { background: #242d20; border-left-color: var(--lime); box-shadow: inset 2px 0 var(--lime); }
.history-choice, .article-choice, .interview-choice { border-color: var(--line); }
.article-title h2, .history-chapter > h2 { font-size: clamp(26px,2.7vw,36px); line-height: 1.22; }
.history-lead { font-size: 16px; color: var(--muted); }
.history-paragraph > p { font-size: 15px; }
.article-choice h3 { font-size: 14px; }
.article-choice { padding: 16px; }
.interview-connections, .theory-card, .dependency-card, .captured-link, .post-card { border-radius: 6px; border-color: var(--line); background: var(--surface); }
.interview-metrics strong { font-size: 24px; }
.ledger-row { border-color: var(--line); }
.table-scroll, .oc-table-wrap { border-radius: 6px; border-color: var(--line); scrollbar-width: thin; }
.oc-prices, .oc-wallet, .oc-findings > article, .oc-transaction-list > article, .oc-source-list > article { background: var(--surface); border-color: var(--line); border-radius: 6px; }
.oc-prices { padding: 16px; }
.oc-section > h2 { font-size: clamp(24px,2.5vw,32px); }
.oc-stats strong { font-size: 26px; }
.oc-currency button[aria-pressed="true"] { background: #242d20; color: var(--lime); border-color: #536544; }
.oc-update, .oc-why { background: transparent; border-color: #526249; border-radius: 0; }
.reader-tabs { gap: 6px; border-color: var(--line); }
.reader-tabs [role="tab"] { border-radius: 5px; color: var(--muted); background: transparent; }
.reader-tabs [aria-selected="true"] { background: #242d20; color: var(--lime); }
.reader-section, .reader-finding, .reader-source, .reader-moment { border-color: var(--line); }
:is(.stat,.oc-stats,.interview-metrics,.result-count,.fine) { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .ui-section-switch { gap: 4px; }
  .ui-section-switch wa-button::part(button) { padding-inline: 10px; font-size: 12px; }
  .oc-prices { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  wa-button, wa-button::part(button) { transition: none; }
  wa-button:not([disabled]):active { scale: 1; }
}