/* Newsburst brand layer for MobNews 2.0.1 (built ltr files).
   Loaded after theme.css. Black / white / gold, from the @NewsburstOfficial channel art.
   Light: black brand + yellow highlight on white. Dark: yellow brand on near-black.
   All text pairs checked at WCAG AA (see /workspace/newsburst-brand/contrast.txt). */
:root, :root[data-accent] {
  color-scheme: light dark;
  --color-brand: #111111;
  --color-brand-strong: #000000;
  --color-on-brand: #C9B067;
  --color-accent: #C8102E;
  --color-on-accent: #FFFFFF;
  --color-live: #C8102E;
  --color-on-live: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-surface-2: #EBEBEB;
  --color-surface-3: #DEDEDE;
  --color-line: #E0E0E0;
  --color-paper: #FCFCFA;
  --color-fg: #111111;
  --color-fg-muted: #4A4A4A;
  --color-fg-subtle: #5C5C5C;
  --color-fg-read: #1A1A1A;
  --color-danger: #C8102E;
  --color-on-danger: #FFFFFF;
  --color-highlight: #C9B067;
  --color-on-highlight: #111111;
  --color-highlight-strong: #C1A450;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"])[data-accent] {
    color-scheme: dark;
  --color-brand: #C9B067;
  --color-brand-strong: #D4C085;
  --color-on-brand: #111111;
  --color-accent: #FF6B6B;
  --color-on-accent: #000000;
  --color-live: #FF6B6B;
  --color-on-live: #000000;
  --color-bg: #0B0B0B;
  --color-surface: #1F1F1F;
  --color-surface-2: #2A2A2A;
  --color-surface-3: #363636;
  --color-line: #333333;
  --color-paper: #121212;
  --color-fg: #F5F5F5;
  --color-fg-muted: #B3B3B3;
  --color-fg-subtle: #A3A3A3;
  --color-fg-read: #E6E6E6;
  --color-danger: #FF6B6B;
  --color-on-danger: #000000;
  --color-highlight: #C9B067;
  --color-on-highlight: #111111;
  --color-highlight-strong: #D4C085;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"][data-accent] {
  color-scheme: dark;
  --color-brand: #C9B067;
  --color-brand-strong: #D4C085;
  --color-on-brand: #111111;
  --color-accent: #FF6B6B;
  --color-on-accent: #000000;
  --color-live: #FF6B6B;
  --color-on-live: #000000;
  --color-bg: #0B0B0B;
  --color-surface: #1F1F1F;
  --color-surface-2: #2A2A2A;
  --color-surface-3: #363636;
  --color-line: #333333;
  --color-paper: #121212;
  --color-fg: #F5F5F5;
  --color-fg-muted: #B3B3B3;
  --color-fg-subtle: #A3A3A3;
  --color-fg-read: #E6E6E6;
  --color-danger: #FF6B6B;
  --color-on-danger: #000000;
  --color-highlight: #C9B067;
  --color-on-highlight: #111111;
  --color-highlight-strong: #D4C085;
}
/* Header and bottom tab bar are always black, like the channel art */
.header, .tabbar {
  color-scheme: dark;
  --color-brand: #C9B067;
  --color-brand-strong: #D4C085;
  --color-on-brand: #111111;
  --color-accent: #FF6B6B;
  --color-on-accent: #000000;
  --color-live: #FF6B6B;
  --color-on-live: #000000;
  --color-bg: #0B0B0B;
  --color-surface: #1F1F1F;
  --color-surface-2: #2A2A2A;
  --color-surface-3: #363636;
  --color-line: #333333;
  --color-paper: #121212;
  --color-fg: #F5F5F5;
  --color-fg-muted: #B3B3B3;
  --color-fg-subtle: #A3A3A3;
  --color-fg-read: #E6E6E6;
  --color-danger: #FF6B6B;
  --color-on-danger: #000000;
  --color-highlight: #C9B067;
  --color-on-highlight: #111111;
  --color-highlight-strong: #D4C085;
  color: var(--color-fg);
}
.header.glass, .tabbar.glass { background: rgb(0 0 0 / 0.92); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header.glass, .tabbar.glass { background: #000; }
}
.header { border-block-end-color: #C9B067; }
.tabbar { border-block-start-color: #2A2A2A; }

/* Primary buttons: yellow with black text in both modes */
.btn:not(.btn-secondary, .btn-ghost, .btn-link, .btn-danger, .btn-outline) {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}
.btn:not(.btn-secondary, .btn-ghost, .btn-link, .btn-danger, .btn-outline):hover {
  background: var(--color-highlight-strong);
  color: var(--color-on-highlight);
}
.toast .btn { background: none !important; color: inherit !important; box-shadow: none !important; }

/* Links get a yellow underline accent */
.prose a { text-decoration-color: var(--color-highlight); text-decoration-thickness: 2px; }

/* Logo + wordmark */
.nb-mark { display: block; flex-shrink: 0; }
.masthead-mark.nb-mark { block-size: 2rem; inline-size: 2rem; }
.wordmark.nb-wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #C9B067;
  line-height: 1;
}
.masthead-small .nb-wordmark { font-size: 1.125rem; }
.nb-lockup { display: inline-flex; align-items: center; gap: 0.75rem; }
.nb-lockup .nb-mark { inline-size: 2.75rem; block-size: 2.75rem; }
@media (width >= 1024px) { .nb-lockup .nb-mark { inline-size: 3.5rem; block-size: 3.5rem; } }
footer .wordmark.nb-wordmark { color: var(--color-fg); }
footer .nb-lockup .nb-mark { inline-size: 2.25rem; block-size: 2.25rem; }
:root:not([data-theme="dark"]) footer .wordmark.nb-wordmark { border-inline-start: 4px solid #7D682C; padding-inline-start: 0.5rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) footer .wordmark.nb-wordmark { color: #C9B067; } }
:root[data-theme="dark"] footer .wordmark.nb-wordmark { color: #C9B067; }

/* Preview notice: template demo content is not Newsburst reporting */
.nb-demo-note {
  background: var(--color-highlight);
  color: #000;
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
  padding: 0.375rem 1rem;
}
.nb-demo-note a { color: #000; text-decoration: underline; }

/* Accent picker is replaced by the fixed Newsburst palette */
[data-accent-set] { display: none !important; }

/* Mobile masthead: keep the lockup inside the collapsing large masthead */
@media (width < 1024px) {
  .nb-lockup .nb-mark { inline-size: 2.25rem; block-size: 2.25rem; }
  .masthead-large .nb-wordmark.wordmark-lg { font-size: 1.625rem; }
}
@media (width < 640px) {
  .masthead-large .masthead-edition { display: none; }
}
/* Header: original banner lockup (van + NEWSBURST stencil) from banner-bg24.png */
.nb-header-lockup { display: block; width: auto; max-width: none; }
.nb-hl-sm { height: 36px; }
.nb-hl-lg { height: 44px; }
@media (width >= 640px) { .nb-hl-sm { height: 40px; } .nb-hl-lg { height: 52px; } }
@media (width >= 1024px) { .nb-hl-lg { height: 64px; } }
/* Category pills: single gold style (no per-category pastels) */
.chip.chip-cat { background: #F5EEDC; color: #6B5416; border: 1px solid #E3D5A8; }
.chip.chip-cat:hover, .chip.chip-cat:focus-visible, .chip.chip-cat[aria-current], .chip.chip-cat[aria-pressed="true"] { background: #C9B067; color: #141414; border-color: #C9B067; }
:root[data-theme="dark"] .chip.chip-cat { background: #2A2416; color: #D4C085; border-color: #4A3F22; }
:root[data-theme="dark"] .chip.chip-cat:hover, :root[data-theme="dark"] .chip.chip-cat:focus-visible, :root[data-theme="dark"] .chip.chip-cat[aria-current], :root[data-theme="dark"] .chip.chip-cat[aria-pressed="true"] { background: #C9B067; color: #141414; border-color: #C9B067; }
/* Category labels above headlines */
.kicker:not(.kicker-longread) { color: #7D682C; }
:root[data-theme="dark"] .kicker:not(.kicker-longread) { color: #C9B067; }
/* i18n: language label beside the header lockup + language switcher */
.nb-lockup-wrap { display: inline-flex; align-items: flex-end; gap: 0.4rem; }
.nb-lang-label { color: #C9B067; font-weight: 700; font-size: 0.8125rem; line-height: 1; padding-bottom: 0.15em; white-space: nowrap; letter-spacing: 0.02em; }
@media (width >= 1024px) { .nb-hl-lg + .nb-lang-label { font-size: 1.125rem; } }
@media (width < 640px) { .masthead-small .nb-lang-label { display: none; } }
.nb-lang { position: relative; }
.nb-lang-btn { gap: 0.3rem; padding-inline: 0.6rem; min-inline-size: 2.5rem; font-weight: 600; font-size: 0.8125rem; }
.nb-lang-btn .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.nb-lang-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.4rem); z-index: 1000; min-inline-size: 11rem; margin: 0; padding: 0.35rem; list-style: none; background: #FFFFFF; border: 1px solid #E3D5A8; border-radius: 0.75rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); }
.nb-lang-menu[hidden] { display: none; }
.nb-lang-item { display: block; padding: 0.55rem 0.75rem; border-radius: 0.5rem; color: #141414; text-decoration: none; font-size: 0.9375rem; }
.nb-lang-item:hover, .nb-lang-item:focus-visible { background: #F5EEDC; color: #6B5416; outline: none; }
.nb-lang-item[aria-current] { background: #C9B067; color: #141414; font-weight: 700; }
:root[data-theme="dark"] .nb-lang-menu { background: #1A1712; border-color: #4A3F22; }
:root[data-theme="dark"] .nb-lang-item { color: #F5F5F5; }
:root[data-theme="dark"] .nb-lang-item:hover, :root[data-theme="dark"] .nb-lang-item:focus-visible { background: #2A2416; color: #D4C085; }
:root[data-theme="dark"] .nb-lang-item[aria-current] { background: #C9B067; color: #141414; }
/* CJK / Cyrillic: system font fallbacks; long labels must not break chrome */
:lang(zh-Hans) body, :lang(zh-Hans) .wordmark { font-family: var(--font-sans), "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { font-family: var(--font-serif, serif), "Noto Serif CJK SC", "Songti SC", "PingFang SC", "Noto Sans CJK SC", serif; }
.tabbar a, .tabbar button { min-inline-size: 0; }
.tabbar a span, .tabbar button span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { white-space: nowrap; }
/* Weather widget (Open-Meteo) */
.nb-weather .nb-w-icon { color: #7D682C; display: inline-flex; }
:root[data-theme="dark"] .nb-weather .nb-w-icon { color: #C9B067; }
.nb-w-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem 0.25rem; }
.nb-w-btn { background: #C9B067; color: #141414; border-color: #C9B067; }
.nb-w-btn:hover { background: #C1A450; border-color: #C1A450; color: #141414; }
.nb-w-search { display: grid; gap: 0.4rem; margin-block: 0.5rem; }
.nb-w-search[hidden] { display: none; }
.nb-w-search .input { flex: 1; min-inline-size: 0; }
.nb-w-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.nb-w-result { inline-size: 100%; text-align: start; padding: 0.45rem 0.6rem; border-radius: 0.5rem; background: #F5EEDC; color: #6B5416; border: 1px solid #E3D5A8; font-size: 0.875rem; }
.nb-w-result:hover, .nb-w-result:focus-visible { background: #C9B067; color: #141414; border-color: #C9B067; }
:root[data-theme="dark"] .nb-w-result { background: #2A2416; color: #D4C085; border-color: #4A3F22; }
.nb-weather a { color: inherit; text-decoration: underline; }
/* Mobile top-bar weather button + popup */
.nb-w-top { gap: 0.25rem; padding-inline: 0.55rem; min-inline-size: 2.5rem; font-weight: 600; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.nb-w-top-icon { display: inline-flex; color: #C9B067; }
.nb-w-top-icon:empty { display: none; }
@media (width >= 1024px) { .nb-w-top { display: none; } }
@media (width < 420px) { .nb-lang-code { display: none; } .nb-lang-btn { padding-inline: 0; min-inline-size: 2.5rem; justify-content: center; } }
@media (width < 400px) { .nb-w-top-icon { display: none; } .nb-hl-sm { height: 28px; } }
.nb-w-sheet .nb-weather { border: 0; box-shadow: none; padding: 0; background: transparent; }

/* 2026-11-09: temporarily hide redundant gold category pill strip below the black header.
   Keeps desktop .masthead-nav and mobile #menu / tabbar Menu categories. Reversible: delete this rule. */
.chip-rail-bar { display: none !important; }

/* 2026-11-09: modest gap under header after chip-rail hide (home + category only; avoids doubling on py-* pages). */
#main:has(.chip-rail-bar) { padding-block-start: 1rem; }
@media (width >= 1024px) {
  #main:has(.chip-rail-bar) { padding-block-start: 1.5rem; }
}