/* Dark theme — branded navy. Public site only.
   Every rule is scoped under html[data-theme=dark]; light mode is untouched by
   construction. Loaded LAST in the layout head (after @stack('styles')) and
   version-stamped via filemtime. Token system and fix map:
   docs/superpowers/specs/2026-07-13-dark-mode-overhaul-design.md */

html[data-theme=dark] {
    color-scheme: dark;
    --dk-bg:            #0D1321;
    --dk-band:          #111927;
    --dk-surface:       #17202F;
    --dk-surface-2:     #1E2A3D;
    --dk-text:          #E8ECF4;
    --dk-text-muted:    rgba(232,236,244,.65);
    --dk-accent:        #8FAEE0;
    --dk-accent-strong: #A8C2EC;
    --dk-accent-bg:     rgba(143,174,224,.15);
    --dk-border:        rgba(143,174,224,.16);
    --dk-border-strong: rgba(143,174,224,.34);
    --dk-scrim:         rgba(4,8,16,.7);
    --dk-plate:         #E9EDF3;
}

/* ---- Story dividers (show-all-category sidebar) ------------------------ */
/* Bootstrap's base hr rule keeps opacity:.25; at that opacity the .16-alpha
   border token would vanish, so the divider opts out and renders the token
   at its designed strength. */
html[data-theme=dark] .story-divider {
    background-color: var(--dk-border);
    opacity: 1;
}

/* ---- Meridian re-token (spec fix #1) ----------------------------------- */
/* news-article.css + site-pages.css consume the --na-* tokens 136 times;
   re-declaring the palette under dark scope flips all ten Meridian pages
   in one block. html[data-theme=dark] (0,1,1) beats the light :root
   (0,1,0) declarations (news-article.css:37-54) regardless of load order.
   --na-navy-deep and the font/measure tokens are untouched by design.
   TinyMCE is unaffected: its iframe html never carries data-theme=dark. */
html[data-theme=dark] {
    --na-navy: var(--dk-text);
    --na-azure: var(--dk-accent);
    --na-azure-dark: var(--dk-accent-strong);
    --na-ink: var(--dk-text);
    --na-slate: var(--dk-text-muted);
    --na-mist: var(--dk-band);
    --na-hair: var(--dk-border);
    --na-paper: var(--dk-bg);
    --na-favorable: #45B58C; /* lightened data colors — the spec §2 exception */
    --na-adverse: #E07B63;
}

/* ---- Card surfaces: one elevation step above the --dk-bg sheet -------- */
html[data-theme=dark] .news-card,
html[data-theme=dark] .contact-card,
html[data-theme=dark] .leader-card,
html[data-theme=dark] .related-card {
    background: var(--dk-surface);
}
html[data-theme=dark] .news-card:hover {
    box-shadow: 0 14px 30px -18px var(--dk-scrim);
}
html[data-theme=dark] .related-card:hover {
    box-shadow: 0 12px 26px -16px var(--dk-scrim);
}

/* ---- Thumb placeholders: their navy fills would remap near-white ------ */
html[data-theme=dark] .news-card .nc-thumb,
html[data-theme=dark] .related-card .rc-thumb,
html[data-theme=dark] .vc-thumb,
html[data-theme=dark] .video-stage {
    background: var(--dk-surface-2);
}

/* ---- Residual literals that bypass the tokens ------------------------- */
html[data-theme=dark] .article-lead {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .news-card .nc-excerpt {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .article-tag {
    border-color: var(--dk-border-strong);
}
html[data-theme=dark] .news-article-body thead th,
html[data-theme=dark] .news-article-body table > tr:first-child th {
    background: var(--dk-surface-2);
    color: var(--dk-text);
}
html[data-theme=dark] .news-article-body td,
html[data-theme=dark] .news-article-body tbody th {
    border-top-color: var(--dk-border);
}
html[data-theme=dark] .news-article-body tbody tr:nth-child(even) td {
    background: var(--dk-band);
}

/* ---- Contact page ------------------------------------------------------ */
html[data-theme=dark] .contact-card .cc-ic {
    background: var(--dk-surface-2);
}
html[data-theme=dark] .cc-social a {
    background: var(--dk-accent-bg);
    color: var(--dk-accent);
}
html[data-theme=dark] .cc-social a:hover {
    background: var(--dk-accent);
    color: var(--dk-bg);
}

/* ---- "Load more" buttons (search, videos) ------------------------------ */
/* After the remap the light hover (site-pages.css:175) becomes near-white
   on near-white; resting border --na-navy would glare. Accent-fill hover
   per spec §2 (dark text on accent). */
html[data-theme=dark] .sp-more-btn {
    background: var(--dk-surface);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}
html[data-theme=dark] .sp-more-btn:hover {
    background: var(--dk-accent);
    border-color: var(--dk-accent);
    color: var(--dk-bg);
}

/* ---- Video play discs: dark glyph on the light disc / accent fill ----- */
html[data-theme=dark] .vc-play span {
    color: var(--dk-bg);
}
html[data-theme=dark] .video-card:hover .vc-play span {
    color: var(--dk-bg);
}

/* ---- Search input focus (the light rule brightens mist -> paper) ------ */
html[data-theme=dark] .search-box-input:focus {
    background: var(--dk-surface);
}

/* ---- Home "studio band": keep it navy, keep light-on-dark text -------- */
/* Inside .home-videos the light design already IS dark: --na-navy paints
   the band and --na-paper paints the text. Re-scope both so the global
   remap doesn't wash the band near-white; --na-navy-deep (#0a2340,
   unmapped) restores the navy without introducing a new literal. */
html[data-theme=dark] .home-videos {
    --na-navy: var(--na-navy-deep);
    --na-paper: var(--dk-text);
}
html[data-theme=dark] .hv-feature:hover .hv-disc,
html[data-theme=dark] .hv-feature:focus-visible .hv-disc,
html[data-theme=dark] .hv-row:hover .hv-disc,
html[data-theme=dark] .hv-row:focus-visible .hv-disc {
    color: var(--dk-bg);
}

/* ---- Vendor retint — navy surfaces (spec §3.2) -------------------------
   Overrides the vendor's own html[data-theme=dark] rules (style.css
   ~17839-18090). dark.css loads after style.css, so identical selectors win
   on source order; the light rules cited per block are lower-specificity. */

/* Page background — style.css:17839 paints body var(--color-heading-1) #181823. */
html[data-theme=dark] body {
    background: var(--dk-bg);
}

/* Full-width sections + desktop menu bar — style.css:17890-17899 paints them
   var(--bg-dark-three) #0f0f1c (darker than the page: inverted elevation). */
html[data-theme=dark] body .echo-latest-news-area,
html[data-theme=dark] body .echo-site-main-logo-menu-social {
    background: var(--dk-band);
}

/* Category-page section wrapper — style.css:17925 → --bg-dark-three. */
html[data-theme=dark] body .echo-hero-section.inner {
    background: var(--dk-band);
}

/* Sticky menu bar — style.css:15771 (dark → --bg-dark-three), 15764 (light
   #193a51); .header-sticky is added to .echo-header-area by helper.js:97.
   Needed at (0,4,2): the light sticky rule (0,3,0) outranks the generic
   menu-bar retint above. */
html[data-theme=dark] body.home-one .header-sticky .echo-site-main-logo-menu-social {
    background: var(--dk-band);
}

/* Sidebar "top story" block — style.css:17914 painted it --bg-dark-three; in
   light mode it is a card (#F9F9F9 at 18154, .bg-right-side #eeecec at 18159),
   so in dark it sits one elevation step above the section band. */
html[data-theme=dark] body .echo-home-1-hero-area-top-story {
    background: var(--dk-surface);
}

/* Breadcrumb band — style.css:17933-17938 multiplies #181823 into the light
   breadcrumb.png (set at 11354-11359). Flat band instead: image off, blend
   off, navy band. */
html[data-theme=dark] body .echo-breadcrumb-area {
    background-color: var(--dk-band);
    background-image: none;
    background-blend-mode: normal;
}

/* Desktop dropdown panel — style.css:17961 → var(--color-heading-1) #181823;
   light panel #ffffff at 15837, its 3px border-top keeps invisible brand
   navy (15838) — retinted to the strong border token. */
html[data-theme=dark] body .echo-site-main-logo-menu-social ul.echo-desktop-menu li.echo-has-dropdown ul.echo-submenu {
    background: var(--dk-surface);
    border-top-color: var(--dk-border-strong);
}

/* Footer — permanently #181823 via style.css:30107-30110; the vendor dark rule
   (17922) targets .echo-footer-area.footer-2, a class this footer never has,
   so the retint must target the base class. Dark scope only: the light-mode
   footer keeps its designed dark plum. */
html[data-theme=dark] body .echo-footer-area {
    background-color: var(--dk-band);
}

/* ---- Accent restoration (spec §3.7) ------------------------------------ */

/* Vendor dark link system = white slide-in underline (style.css:17939-17947)
   + white hover text (17948-17955). Rebrand to the accent pair so hover reads
   as brand, not glare. */
html[data-theme=dark] body .title-hover {
    background-image: linear-gradient(to right, var(--dk-accent) 50%, transparent 50%);
}
html[data-theme=dark] body .title-hover:hover {
    color: var(--dk-accent-strong);
}

/* Desktop submenu hover — light-only var(--color-primary) #3a4c7a ≈2.1:1 on
   the dark panel (style.css:15866); the slide-in dot (15873-15884) uses the
   same invisible primary. */
html[data-theme=dark] .echo-site-main-logo-menu-social ul.echo-desktop-menu li.echo-has-dropdown ul.echo-submenu .nav-item:hover a {
    color: var(--dk-accent);
}
html[data-theme=dark] .echo-site-main-logo-menu-social ul.echo-desktop-menu li.echo-has-dropdown ul.echo-submenu .nav-item::before {
    background: var(--dk-accent);
}

/* Prose list links — the vendor rule html[data-theme=dark] body ul li a
   ((0,1,5), style.css:17849) out-ranks .news-article-body a ((0,1,1)),
   leaving authored-list links unbranded near-white at rest while their
   hover flips to the accent family. Restore the accent pair. */
html[data-theme=dark] body .news-article-body li a {
    color: var(--dk-accent);
}
html[data-theme=dark] body .news-article-body li a:hover {
    color: var(--dk-accent-strong);
}

/* ---- Small vendor components (spec §3.8, partial) ----------------------- */

/* Carousel prev/next arrows — #5E5E5E ≈2.9:1 on the band, gray hover fill
   (style.css:18359-18424). */
html[data-theme=dark] .echo-latest-news-area .echo-latest-news-content .echo-be-slider-btn .echo-latest-news-next-prev-btn .swiper-button-next,
html[data-theme=dark] .echo-latest-news-area .echo-latest-news-content .echo-be-slider-btn .echo-latest-news-next-prev-btn .swiper-button-prev {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .echo-latest-news-area .echo-latest-news-content .echo-be-slider-btn .echo-latest-news-next-prev-btn .swiper-button-next:hover,
html[data-theme=dark] .echo-latest-news-area .echo-latest-news-content .echo-be-slider-btn .echo-latest-news-next-prev-btn .swiper-button-prev:hover {
    background-color: var(--dk-surface-2);
    color: var(--dk-text);
}

/* Form fields — the vendor's dark form rule (style.css:17862-17877) recolors
   text only, leaving light fills/borders. Mirrors the vendor's group minus
   `button`, which other dark rules style deliberately. */
html[data-theme=dark] body .input,
html[data-theme=dark] body select,
html[data-theme=dark] body textarea {
    background-color: var(--dk-surface);
    border-color: var(--dk-border-strong);
}

/* Focus companion: the resting rule above out-ranks the light :focus rule
   (style.css:9424-9433, (0,1,1), border → --color-primary) — and outline is
   already none there — so without this, focused fields would show no focus
   state at all. Blade-local rules (e.g. od-sort focus, (0,4,2)) still win. */
html[data-theme=dark] body .input:focus,
html[data-theme=dark] body select:focus,
html[data-theme=dark] body textarea:focus {
    border-color: var(--dk-accent);
}

/* ---- Header / chrome — every page (spec §3.3, §3.4) -------------------- */

/* Mobile hamburger menu (style.css:34108-34190). Panel is hardcoded #fff
   while the vendor dark rule html[data-theme=dark] body ul li a
   (style.css:17848, (0,1,5)) turns the links near-white — white-on-white.
   Every color rule below carries at least (0,2,2), out-ranking both the
   light rules and that vendor rule. */
html[data-theme=dark] .echo-mobile-menu-wrapper {
    background-color: var(--dk-surface);
}
html[data-theme=dark] .echo-mobile-menu-content ul li {
    border-bottom-color: var(--dk-border);
}
html[data-theme=dark] .echo-mobile-menu-content a {
    color: var(--dk-text);
}
html[data-theme=dark] .echo-mobile-menu-content a:hover {
    color: var(--dk-accent);
}
html[data-theme=dark] .mobile-dropdown ul {
    background-color: var(--dk-surface-2);
}
html[data-theme=dark] .echo-mobile-menu-content .mobile-dropdown ul li a {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .echo-mobile-menu-content .mobile-dropdown ul li a:hover {
    color: var(--dk-accent);
}

/* ---- Desktop language switcher (style.css:34200-34214) ---------------- */
html[data-theme=dark] .language-dropdown a {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .language-dropdown a:hover {
    color: var(--dk-accent-strong);
}
html[data-theme=dark] .language-dropdown a.active {
    color: var(--dk-accent);
}

/* ---- Mobile language toggle + popup (style.css:34222-34270) ----------- */
html[data-theme=dark] .lang-toggle-btn {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .lang-toggle-btn:hover {
    background: var(--dk-accent-bg);
}
html[data-theme=dark] .mobile-lang-options {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    box-shadow: none;
}
html[data-theme=dark] .mobile-lang-options a {
    color: var(--dk-text-muted);
}
html[data-theme=dark] .mobile-lang-options a:hover {
    background: var(--dk-surface-2);
    color: var(--dk-accent-strong);
}
html[data-theme=dark] .mobile-lang-options a.active {
    background: var(--dk-accent-bg);
    color: var(--dk-accent);
}

/* ---- Header social icon pills (style.css:34283-34298) ----------------- */
html[data-theme=dark] .echo-home-1-social-media-icons .list-group-item a {
    background: var(--dk-accent-bg);
    color: var(--dk-text-muted);
}
html[data-theme=dark] .echo-home-1-social-media-icons .list-group-item a:hover {
    background: var(--dk-accent);
    color: var(--dk-bg);
}

/* ---- Test-mode notice (style.css:34433-34454, spec §3.4) --------------
   Amber dot (::before, #d99a06) is kept from the light rule untouched;
   the amber left border is the permitted existing literal. */
html[data-theme=dark] .site-notice {
    background: var(--dk-surface);
    border-bottom: 1px solid var(--dk-border);
    border-left: 3px solid #d99a06;
    color: var(--dk-text-muted);
}
html[data-theme=dark] .site-notice strong {
    color: var(--dk-text);
}

/* ---- Footer social icons on hover (style.css:30154-30161) -------------
   The light hover fills with brand navy #3a4c7a — ≈2.1:1 on the dark
   footer band. Accent fill with dark glyph instead. */
html[data-theme=dark] .echo-footer-area .echo-row .echo-footer-content-1 .echo-footer-address .echo-footer-social-media a:hover {
    background-color: var(--dk-accent);
}
html[data-theme=dark] .echo-footer-area .echo-row .echo-footer-content-1 .echo-footer-address .echo-footer-social-media a:hover i {
    color: var(--dk-bg);
}

/* ---- Search modal retoken (spec §3.5) + light plates (spec §4) ---------
   Retires the modal's private blue-slate family (style.css:34468-34482;
   the ::before magnifier at 34484 is intentionally retained — a data-URI
   cannot consume tokens and its #8fa1ba stroke stays legible on the
   new surfaces).
   dark.css loads after style.css, so identical selectors win by order;
   rules with no dark counterpart out-specify the light originals. */
html[data-theme=dark] body .search-input-area {
    background: var(--dk-scrim);
}
html[data-theme=dark] body .search-input-area .search-input-inner {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
}
html[data-theme=dark] body .search-input-area .search-input-inner:focus-within {
    border-color: var(--dk-accent);
    box-shadow: 0 0 0 3px var(--dk-accent-bg);
}
html[data-theme=dark] body .search-input-area .search-input-inner input {
    color: var(--dk-text);
}
html[data-theme=dark] body .search-input-area .search-input-inner input::placeholder {
    color: var(--dk-text-muted);
}
html[data-theme=dark] body .search-input-area .search-input-inner .search-close-icon i {
    background: var(--dk-surface-2);
    color: var(--dk-text-muted);
}
html[data-theme=dark] body .search-input-area .search-input-inner .search-close-icon i:hover {
    background: var(--dk-accent);
    color: var(--dk-bg);
}

/* ---- Home journals + partners: dark band, light logo plates ------------
   Section background/heading flip via the --na-* re-declare (Task 3); the
   explicit band rule below makes the pair self-contained. Partner tiles
   stay deliberately light (--dk-plate) — logos are colored artwork. */
html[data-theme=dark] .home-journals,
html[data-theme=dark] .home-partners {
    background: var(--dk-bg);
}
html[data-theme=dark] .hj-item:hover .hj-cover,
html[data-theme=dark] .hj-item:focus-visible .hj-cover {
    box-shadow: 0 14px 30px -18px var(--dk-scrim);
}
html[data-theme=dark] .hp-wall {
    background: var(--dk-border);
    border-color: var(--dk-border);
}
html[data-theme=dark] .hp-cell,
html[data-theme=dark] .hp-cell:hover,
html[data-theme=dark] .hp-cell:focus-visible {
    background: var(--dk-plate);
}
html[data-theme=dark] .hp-cell:focus-visible {
    outline-color: var(--dk-surface-2);
}
html[data-theme=dark] .hp-cell .hp-name {
    color: var(--dk-bg);
}

/* ---- Structure page: org chart on a document plate ---------------------
   The hotlinked lex.uz GIF is opaque white; a --dk-plate mat frames it as
   a document card instead of a raw white slab on the dark page. */
html[data-theme=dark] .echo-hero img[src^="https://lex.uz"] {
    background: var(--dk-plate);
    border: 1px solid var(--dk-border);
    border-radius: 12px;
    padding: clamp(14px, 3vw, 28px);
}

/* ---- Mobile menu bottom edge (Task 5 review polish) --------------------
   The open panel overlays --dk-surface cards at ~1.35:1; its retained
   light shadow rgba(0,0,0,.1) is invisible on a dark page, so the panel
   needs its own bottom edge. */
html[data-theme=dark] .echo-mobile-menu-wrapper {
    border-bottom: 1px solid var(--dk-border);
}