/* The light/dark control in the public nav.
 *
 * Two presentations of one button, because the two places it appears are
 * different kinds of surface: a row of icons and actions at desktop width, and
 * a column of words in the mobile menu. An unlabelled glyph works in the first
 * and is invisible in the second — a bare icon in a list of text links is the
 * thing you scroll past while looking for the setting you came in for.
 */

/* index.html already carried a theme control — a "🌙 Dark" pill injected at
   runtime by homepage.js, which is why it does not appear in any page source.
   It only ever existed on the homepage, only in the desktop bar, and never in
   the mobile menu, so on a phone there was nothing to find anywhere on the
   site. This control replaces it everywhere rather than sitting beside it;
   both write the same sino_theme cookie, so they are interchangeable and the
   legacy one is simply hidden. Hidden rather than deleted because it is built
   by a large minified bundle where a surgical removal is the riskier edit. */
#themeToggle { display: none !important; }

/* ── Desktop: a labelled pill beside the currency toggle ─────────────────── */
.nav__theme {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   height: 34px;
   margin-right: 4px;
   padding: 0 11px;
   border: 0;
   border-radius: 8px;
   background: transparent;
   color: var(--mid, #9A9AAE);
   font: inherit;
   font-size: 13px;
   cursor: pointer;
   flex: none;
   white-space: nowrap;
   transition: color .15s ease, background .15s ease;
}
.nav__theme:hover {
   color: var(--gold-t, #F5BC45);
   background: rgba(240, 165, 30, .07);
}
.nav__theme:focus-visible {
   outline: 2px solid var(--gold, #F0A51E);
   outline-offset: 2px;
}

/* The burger appears at mobile widths and the menu carries its own labelled
   row, so two controls for one setting would sit side by side. */
@media (max-width: 900px) {
   .nav__theme { display: none; }
}

/* ── Mobile: a labelled row in the menu ──────────────────────────────────── */
/* Every value here is stated rather than inherited.
   `color: inherit` on a button does not reach the menu's link colour — it
   picked up an ancestor set to the dark background, so the row rendered in
   #111116 on a #09090C menu and was, for practical purposes, invisible. A
   control you cannot see is worse than no control, because you go looking for
   it and conclude it is missing. Matched to the sibling links instead:
   same colour, size, weight, padding and hairline. */
.mobile-theme-row {
   display: flex;
   align-items: center;
   gap: 9px;
   width: 100%;
   padding: 11px 0;
   border: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .07);
   background: transparent;
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.4;
   text-align: left;
   color: var(--mid, #9A9AAE);
   cursor: pointer;
   transition: color .15s ease;
}
.mobile-theme-row:hover,
.mobile-theme-row:focus-visible { color: var(--gold-t, #F5BC45); }
.mobile-theme-row .theme-ico { flex: none; }

html.light-mode .mobile-theme-row {
   color: rgba(15, 18, 30, .62);
   border-bottom-color: rgba(15, 18, 30, .08);
}
html.light-mode .mobile-theme-row:hover { color: #B8770A; }

/* ── Which glyph shows ───────────────────────────────────────────────────
   Dark page offers the sun (what you would switch TO); light page offers the
   moon. Showing the current state instead reads as a status light and gets
   pressed by mistake. */
.theme-ico--moon { display: none; }
.theme-ico--sun { display: inline-flex; }
html.light-mode .theme-ico--sun { display: none; }
html.light-mode .theme-ico--moon { display: inline-flex; }

html.light-mode .nav__theme { color: rgba(15, 18, 30, .58); }
html.light-mode .nav__theme:hover {
   color: #B8770A;
   background: rgba(184, 119, 10, .08);
}