/* Shared bridge-inspired palette. Loaded after page styles so new and legacy
   views share one visual language without changing their layouts or content. */
:root,
body[data-view] {
  --bg: #000;
  --surface: #101400;
  --raised: #242d00;
  --line: #364200;
  --text: #edf2da;
  --muted: #b1bc92;
  --lime: #c3ff00;
  --olive: #4c5b01;
  --olive-quiet: #202900;
  --control-line: #708b0b;
  --wa-color-brand-on-loud: #182000;
  --wa-color-neutral-border-normal: var(--control-line);
  --wa-form-control-border-color: var(--control-line);
  --wa-form-control-border-color-hover: var(--lime);
  --wa-form-control-border-radius: 3px;
}

body { background: var(--bg); }
::selection { background: #c3ff00; color: #000; }

/* The frame and navigation take their cues from the reference's black canvas,
   fine olive rules and small, monospaced labels. */
.rail.site-header,
#navigationPanel { background: #000; border-color: var(--line); }
.site-header .brand { color: var(--lime); font-family: var(--mono); }
.site-header .brand b { color: var(--muted); }
.site-header .nav-group h2,
.rail .nav-research > summary { color: var(--muted); }
.site-header #researchNavigation .nav-item::part(button) {
  font-family: var(--mono); font-size: 14px; border-radius: 2px;
  color: var(--muted);
}
.site-header #researchNavigation .nav-item.active::part(button) {
  background: var(--olive); color: var(--lime); border-color: transparent;
  box-shadow: inset 2px 0 var(--lime);
}
.site-header #researchNavigation .nav-item.active .nav-icon { opacity: 1; }
#globalSearch #searchInput { background: var(--surface); border-color: var(--control-line); }
.site-header :is(.locale-flag-picker, .locale-flag-display) { border-radius: 3px; }
.site-header .site-menu-actions :is(#helpButton, #donateButton)::part(button) {
  background: var(--olive-quiet); border-color: var(--control-line);
  color: var(--lime); border-radius: 3px; font-family: var(--mono);
}
.site-header .rail-bottom { border-color: var(--line); }
.site-header .rail-bottom > a { color: var(--muted); }
.workspace > .site-footer { background: var(--lime); }

/* Short UI text gets the terminal character of the reference. Article prose,
   captions, source images and semantic evidence badges retain their type. */
button, .button, input, select, textarea { border-radius: 3px; }
wa-button::part(button) { border-radius: 3px; font-family: var(--mono); }
#main :is(button, .button):not(.record-card, .ledger-row, .search-hit, .finding-row) {
  font-family: var(--mono);
}
#main :is(input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea) {
  background-color: var(--surface); border-color: var(--control-line);
  color: var(--text); border-radius: 3px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--lime); }
#main :is(.eyebrow, .overview-kicker, .finding-reading-kicker),
#main .page-header .page-header-kicker { color: var(--lime); }
#main .page-header .page-header-title { color: var(--lime); }
#main :is(.page-header + .ui-section-switch, .reading-view-nav, .community-collections,
  .account-tabs, .clue-collection-nav, .bridge-primary-nav) { border-color: var(--line); }
#main :is(.reading-view-nav, .community-collections, .account-tabs,
  .clue-collection-nav, .bridge-primary-nav) > :is(a, button),
#main .reading-view-nav summary {
  font-family: var(--mono); font-size: 12px;
}
#main :is(.reading-view-nav, .community-collections, .account-tabs,
  .clue-collection-nav, .bridge-primary-nav) > :is([aria-current=page], [aria-pressed=true], .active),
#main .page-header + .ui-section-switch wa-button.selected::part(button) {
  color: var(--lime); border-bottom-color: var(--lime);
}
#main :is(button.primary, .button.primary),
#main .start-actions .button { background: var(--lime); border-color: var(--lime); color: #182000; }

/* Flat, nearly square collection surfaces; round portraits and media aspect
   ratios are deliberately outside this rule. */
#main :is(.card, .record-card, .source-library-entry, .conversation-card,
  .finding-reading-card, .clue-card, .company-research-card, .image-card,
  .download-card, .timeline-item, .search-hit, .oc-entry) {
  background: var(--surface); border-color: var(--line); border-radius: 2px;
  box-shadow: none;
}
#main :is(.finding-reading-image, .finding-reading-link, .conversation-card-image,
  .reading-row-image) { border-radius: 1px; }
#main :is(.filters, .community-controls, .conversation-search) { border-color: var(--line); }
#main :is(.chip.active, .community-topic-discovery button.is-active,
  .reading-topic-nav a[aria-current]) {
  background: var(--lime); color: #182000; border-color: var(--lime); box-shadow: none;
}
.community-page .community-topic-discovery button {
  border-radius: 3px; background: var(--olive-quiet); color: var(--muted); box-shadow: none;
}

/* Olive is used for orientation and featured panels, with light copy that
   remains readable on the brighter surface. */
#main :is(.tit-entry, .home-app-story, .home-open-question,
  .community-featured-trail, .bridge-verdict, .tga-preview-note, .tga-footer) {
  background: var(--olive); border-color: var(--olive); border-radius: 0;
  --muted: #e1eabb;
  --overview-quiet: #e1eabb;
}
#main .home-app-story { padding: 22px; }
#main :is(.tit-entry, .community-featured-trail, .bridge-verdict,
  .tga-preview-note, .tga-footer) p { color: #e1eabb; }
/* Everything else on an olive surface needs light copy to reach 4.5:1. */
#main :is(.tit-entry, .home-app-story, .home-open-question, .community-featured-trail,
  .bridge-verdict, .tga-preview-note, .tga-footer, .tga-choice:has(input:checked))
  :is(span, small, strong, summary, li, dt, dd, label, h3):not([class*="kicker"]):not(.tit-entry-link):not(:is(.tit-entry-link, .tga-back, .overview-primary-link, .tit-button-primary, .bridge-primary-button, .primary) *) { color: #eef3dc; }
#main :is(.tga-footer, .tga-preview-note) :is(h2, a:not(.tga-back)) { color: #f4f8e6; }
#main :is(.tga-footer, .tga-preview-note) a:not(.tga-back):hover { color: var(--lime); }
#main :is(.tit-entry, .home-app-story, .bridge-verdict) h2 { color: var(--lime); }
#main .tit-entry > a { color: var(--lime); }
.overview-page { --overview-quiet: var(--muted); --overview-rule: var(--line); }
.overview-page .overview-section-nav wa-button::part(button) { color: var(--muted); }
.overview-page .overview-section-head wa-button::part(button),
.overview-page .overview-primary-link { color: var(--lime); }
.overview-page .home-conversation-image--statement { background: var(--olive-quiet); }
.reading-room .reading-browse {
  --browse-accent: var(--lime); --browse-quiet: var(--muted);
  background: var(--surface); border-color: var(--line); border-radius: 0;
}
.reading-room .reading-browse .reading-row { background: #000; border-radius: 2px; }
.reading-room .reading-browse .reading-row-monogram { background: var(--olive); color: var(--lime); }
.reading-room .series-spread { background: var(--olive-quiet); border-color: var(--line); border-radius: 0; }
.reading-room .series-spread li > a { background: #000; border-color: var(--line); }
.reading-room .series-caption { border-color: var(--olive); }
.reading-room .series-caption :is(small, p) { color: var(--muted); }
.reading-room .series-caption :is(h3, span) { color: var(--text); }
.reading-room .series-caption > span { color: var(--lime); }
.reading-room .series-cover > span { background: var(--lime); color: #182000; }
.reading-room .reading-timeline-route :is(p, span) { color: #e1eabb; }
.reading-room .reading-timeline-route { background: var(--olive); border-color: var(--olive); color: var(--text); }
#main .community-interactive .community-explorer {
  background: var(--olive-quiet); border-color: var(--line); border-radius: 2px;
}
#main .community-explorer [data-community-reset] {
  background: var(--olive); border-color: var(--control-line); color: var(--lime); border-radius: 3px;
}
#main .article-page-tabs > a[aria-current] { background: var(--olive); color: var(--lime); border-color: var(--lime); }
.bridge-room { --bridge-accent: var(--lime); --bridge-border: var(--line); }
.bridge-room .bridge-navigation { background: var(--surface); }
.bridge-room .bridge-secondary-nav a[aria-current] { background: var(--olive); color: var(--lime); }
.bridge-room :is(.bridge-card, .bridge-contracts article, .bridge-flow-detail,
  .bridge-comparison-title) { background: var(--surface); border-color: var(--line); border-radius: 2px; }
.bridge-room .bridge-flow-layout button.active { background: var(--olive); color: var(--lime); }
body[data-view='this-is-tibbir'] #main,
body[data-view='get-tibbir'] #main { background: #000; }
.tit { --tit-lime: var(--lime); --tit-olive: var(--olive); --tit-rule: var(--line); }
.tit .tit-customizer { background: var(--olive-quiet); border-color: var(--line); }
.tga-choice { background: var(--surface); border-color: var(--line); }
.tga-choice:has(input:checked) { background: var(--olive); border-color: var(--lime); }
.rd-dashboard { --rd-lime: var(--lime); --rd-olive: var(--olive); --rd-line: var(--line); }
.rd-dashboard .rd-metric { background: var(--olive); border-color: var(--olive); }
.rd-dashboard .rd-metric :is(.rd-card-label, p, p b) { color: #e1eabb; }
.rd-dashboard .rd-panel { background: var(--surface); }

/* Reading overlays use a dark page and an olive toolbar. Donation retains its
   inverse lime treatment, and evidence statuses keep their semantic colours. */
dialog:not(.donation-dialog):not(.site-menu) { background: #080b00; border-color: var(--control-line); border-radius: 4px; }
#detail .drawer-top,
#markdownViewer .markdown-viewer-toolbar,
#imageViewer .image-viewer-toolbar { background: var(--olive-quiet); border-color: var(--line); }
#detailBody .detail-link { background: var(--olive-quiet); color: var(--text); border-radius: 3px; }
.original-reading .original-reading-guide { background: var(--olive-quiet); border-color: var(--control-line); }
.original-reading-outline > summary::after { color: var(--lime); }
.original-reading-progress progress { accent-color: var(--lime); background: var(--olive); }
.original-reading-progress progress::-webkit-progress-bar { background: var(--olive); }
.original-reading-progress progress::-webkit-progress-value { background: var(--lime); }
.original-reading-progress progress::-moz-progress-bar { background: var(--lime); }
#main .canvas-shell { background-color: #050800; border-color: var(--line); border-radius: 2px; }

@media (hover: hover) and (pointer: fine) {
  .site-header #researchNavigation .nav-item:not(.active):hover::part(button) {
    color: var(--lime); background: var(--olive-quiet); border-color: transparent;
  }
  #main :is(.record-card, .conversation-card, .finding-reading-card,
    .clue-card, .company-research-card, .image-card, .search-hit, .oc-entry):hover {
    background-color: var(--olive-quiet); border-color: var(--control-line);
  }
  .site-header .site-menu-actions :is(#helpButton, #donateButton):hover::part(button) {
    background: var(--olive); border-color: var(--lime);
  }
}