/* ============================================================================
   theme.css — shared dark/light theme + menu/search chrome for the legacy (DWT) pages.
   Tier 1 (css1/). Lifted from default.html (the pilot). Load AFTER css/styles-BIG.css
   and css/menugold.css so the dark overrides win. Pairs with js1/theme.js (theme
   toggle), js1/12h24-toggle.js (12/24 format toggle), js1/menu-search.js (live search).
   ============================================================================ */

/* Inter is the city's UI font (search box, 12/24 toggle, etc.). default.html + the legacy templates
   don't load it on their own, so the 'Inter' rules below were silently falling back to the system
   font — which renders smaller at the same px. Load it here, same family/weights as the city. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ===== Theme palette — single source of truth for colours (mirrors the city pages). color-scheme makes
   the browser's own UI (scrollbar, form controls) follow the theme — light on light, dark on dark —
   instead of defaulting to the OS. The city does this for light; default.html now does both. ===== */
:root               { --bg:#eeeef8; --surface:#ffffff; --border:rgba(0,0,0,.1); --accent:#5b5fe8; --accent2:#7179f5; --text:#181827; --mid:rgba(24,24,39,0.88); --dim:rgba(24,24,39,0.78); color-scheme:light; }
[data-theme="dark"] { --bg:#07070e; --surface:#14141c; --border:rgba(255,255,255,.08); --accent:#818cf8; --accent2:#a5b4fc; --text:#f1f0f9; --mid:rgba(241,240,249,0.78); --dim:rgba(241,240,249,0.62); color-scheme:dark; }

/* Theme toggle button — matches the city pages (light + dark states) */
.theme-toggle { background:none; border:1px solid rgba(241,240,249,.18); border-radius:100px; color:rgba(241,240,249,.55); font-size:14px; padding:4px 9px; cursor:pointer; line-height:1; transition:color .15s,border-color .15s; flex-shrink:0; }
.theme-toggle:hover { color:rgba(241,240,249,.9); border-color:rgba(241,240,249,.38); }
[data-theme="light"] .theme-toggle { background:rgba(255,255,255,.80); border-color:rgba(24,24,47,.20); color:rgba(24,24,47,.70); }
[data-theme="light"] .theme-toggle:hover { background:rgba(255,255,255,.95); border-color:rgba(24,24,47,.40); color:rgba(24,24,47,.95); }

/* ===== Dark theme — light is the default; these rules only repaint colors when data-theme="dark" ===== */
/* Page base: keep the sky-image header, darken everything below it */
[data-theme="dark"] body { color:var(--text); background:var(--bg); }
[data-theme="dark"] #footer_gold { background-color:var(--surface); border-top:1px solid var(--border); }
[data-theme="dark"] #background { background:transparent; position:relative; z-index:1; }
/* Legacy DWT content pages (primary-info/*: about-us, contact-us, faq, privacy-policy, terms-of-use).
   Light = css/styles-BIG.css + css/primary-info.css untouched; these are dark-only overrides.
   #primary_info: the content panel — its light #F9F9FF would leave the (now light) text invisible in dark.
   #footer_box: the OLD footer variant these pages use (#footer_gold above is the NEW one). */
[data-theme="dark"] #primary_info { background-color:var(--surface); }
[data-theme="dark"] #footer_box   { background-color:var(--surface); border-top:1px solid var(--border); }
/* Legacy DWT content pages — articles/* (articles.dwt: daylight-saving-time-DST, pros-and-cons-of-dst, utc-or-gmt, …).
   Dark-only overrides of css/articles.css (navy #000066 headings, black/grey text, light borders) + the white #fast_links panel. */
[data-theme="dark"] #fast_links { background-color:var(--surface); border-color:var(--border); }
[data-theme="dark"] #fastline { border-top-color:var(--border); }
[data-theme="dark"] .ahead,
[data-theme="dark"] .aheadexpla,
[data-theme="dark"] .asub_head1,
[data-theme="dark"] .asub_head2,
[data-theme="dark"] .asub_head1_underline { color:var(--text); } /* near-white, NOT accent2 — headings must not read as links */
[data-theme="dark"] .aimgtext { color:var(--mid); }
[data-theme="dark"] .areference { color:var(--dim); }
[data-theme="dark"] .aupdate { color:var(--dim); border-top-color:var(--border); }
[data-theme="dark"] .aimageborder { border-color:var(--border); }
[data-theme="dark"] #terms { background-color:var(--surface); border-color:var(--border); } /* per-article "Defining Terms" box (inline #CCCCCC bg) — left light text unreadable in dark */
[data-theme="dark"] #asub_terms { color:var(--text); }                                     /* its inline navy #000066 heading → near-white */
[data-theme="dark"] .for_mobile_element_wall { opacity:0; }
/* Legacy DWT content pages — time-news/* (time-news.dwt: the Time News landing page + the 2011–2016 news items).
   Dark-only overrides of css/time-news.css — two light panels, navy headlines, grey dates/numbers, #CCCCCC dividers, the picture frame. */
[data-theme="dark"] #time_news_main_box,
[data-theme="dark"] #rcnt_box,
[data-theme="dark"] #time_news_rcnt,
[data-theme="dark"] #rcnt_boc_header,
[data-theme="dark"] .time_news_headlines { background-color:var(--surface); }
[data-theme="dark"] #time_news_main_box,
[data-theme="dark"] #time_news_rcnt,
[data-theme="dark"] .time_news_headlines { border-color:var(--border); }
[data-theme="dark"] .article_headline,
[data-theme="dark"] .sub_headline,
[data-theme="dark"] #rcnt_boc_header { color:var(--text); } /* near-white, NOT accent2 — headings must not read as links */
[data-theme="dark"] .published,
[data-theme="dark"] .news_date,
[data-theme="dark"] .rcnt_box_nbr { color:var(--dim); }
[data-theme="dark"] #published_line,
[data-theme="dark"] .article_line,
[data-theme="dark"] .recnt_box_line,
[data-theme="dark"] .explanation_line,
[data-theme="dark"] .explanation_line_topic,
[data-theme="dark"] #picture_frame { border-color:var(--border); }
/* art/gallery/gallery.php — a standalone main-site page on the light/dark toggle. Dark-only overrides of css/gallery.css's
   gallery (g_*) classes + the white #social_box_1. (The always-dark photo portfolio pages use the p_* classes + styles.css — left alone.) */
[data-theme="dark"] .g_txt_styHead,
[data-theme="dark"] .g_txt_styHead_desc,
[data-theme="dark"] .g_txt_sty1 { color:var(--mid); }
[data-theme="dark"] #g_welc_img_1,
[data-theme="dark"] #g_welc_img_2,
[data-theme="dark"] .g_one_75 { border-color:var(--border); }
[data-theme="dark"] #social_box_1 { background-color:var(--surface); border-color:var(--border); }
/* North American time-zone detail pages (current-*.php → north-american-time-zones.dwt) — dark-only overrides of the
   shared css/usa-zone-details-BIG.css. Scoped under #tz_content so shared class names (e.g. .zone_heading, also used by
   world-time-zones) can't bleed across pages. Big clock #usaz_x_time inherits var(--text); blue #0066FF zone bands kept. */
[data-theme="dark"] #tz_content #usa_zone_info,
[data-theme="dark"] #tz_content #usaz_time_pad_1 { background-color:transparent; }
[data-theme="dark"] #tz_content .usa_zone_info_headline,
[data-theme="dark"] #tz_content .zone_heading,
[data-theme="dark"] #tz_content .zone_city,
[data-theme="dark"] #tz_content .location_time,
[data-theme="dark"] #tz_content .zone_ampm { color:var(--text); }
[data-theme="dark"] #tz_content .zone_heading { border-bottom-color:var(--accent2); }
[data-theme="dark"] #tz_content #usaz_x_date,
[data-theme="dark"] #tz_content .location_date,
[data-theme="dark"] #tz_content .tiny_dst,
[data-theme="dark"] #tz_content .tiny_dst_mainclock,
[data-theme="dark"] #tz_content .zone_offset,
[data-theme="dark"] #tz_content .zone_offsets,
[data-theme="dark"] #tz_content #dst_not { color:var(--dim); }
/* table outer borders (.us_table_line 1px black / .us_table_line_pre 2px white) left at their base values — matches the
   solid-white lines on time-zones-in-usa-and-canada (don't fade them to var(--border)). */
/* zone data tables: keep them light like light mode — white bg + #f2f2f2 stripes + BLACK body text; the .zones_table_head / .zones_heading keep their own blue+white. (Was darkened to surface, which left light text on the light stripes.) */
[data-theme="dark"] #tz_content .zones_table { background-color:#fff; color:#000; }
/* time-zones-in-usa-and-canada.php uses #tz_content (for the blue-map ::before invert) but carries the MAP heading
   markup (#zone_h_major / .zone_h_major_txt / #zone_h_major_l / .head1_lines), which the #tz_map_content rules below
   don't reach. Whole heading block set to one uniform dim gray (user pref: main heading matches its sub-lines). */
[data-theme="dark"] #tz_content #zone_h_major,
[data-theme="dark"] #tz_content .zone_h_major_txt,
[data-theme="dark"] #tz_content .head1_lines { color:var(--dim); }
[data-theme="dark"] #tz_content #zone_h_major_l { color:var(--dim); border-bottom-color:var(--border); }
/* tz MAP pages (usa/canada/mexico/australia/nz-australia → tz.dwt) — dark-only overrides of the shared css/time-zones.css
   + per-page inline map boxes. Scoped #tz_map_content (maps only). Heading/intro sit on the dark page → lighten; the
   location boxes keep their light/pastel inline backgrounds, so their time text stays dark (as in light); UTC box stays blue+white. */
[data-theme="dark"] #tz_map_content #zone_h_major,
[data-theme="dark"] #tz_map_content .zone_h_major_txt { color:var(--text); }
[data-theme="dark"] #tz_map_content #zone_h_major_l { color:var(--text); border-bottom-color:var(--border); }
[data-theme="dark"] #tz_map_content .zoneupdate { color:var(--dim); }
/* time digits → black on the light/pastel boxes. Target the box by id (every map has #location_*); the class varies
   (usa/canada/australia/nz use .time_location, mexico uses .arrow_down/.arrow_up), so a class selector would miss mexico. */
[data-theme="dark"] #tz_map_content [id^="location_"]:not(#location_utc) { color:#000; }
[data-theme="dark"] #tz_map_content #location_utc { background-color:#3399FF; color:#FFFFFF; }
/* zone names sit in <a> links, so the global dark link color (var(--accent2)) overrides the box color and leaves them
   light-gray on the pastel boxes. Force them black like the time digits (canada/usa shortcuts, mexico cities, au/nz UTC
   offsets); :link AND :visited because the empty-href box links (mexico/au/nz) count as visited. UTC keeps .white_text. */
[data-theme="dark"] #tz_map_content [id^="location_"]:not(#location_utc) a:link,
[data-theme="dark"] #tz_map_content [id^="location_"]:not(#location_utc) a:visited { color:#000; }
/* Soft glow "blobs" behind the content — mirrors the city pages' dark background (dark theme only) */
.blob { display:none; }
[data-theme="dark"] .blob { display:block; position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
[data-theme="dark"] .blob-1 { width:650px; height:650px; background:radial-gradient(circle,#5b21b6,transparent 65%); top:-200px; left:-180px; opacity:.22; }
[data-theme="dark"] .blob-2 { width:500px; height:500px; background:radial-gradient(circle,#1d4ed8,transparent 65%); bottom:-100px; right:-150px; opacity:.18; }
[data-theme="dark"] .blob-3 { width:380px; height:380px; background:radial-gradient(circle,#0d9488,transparent 65%); top:45%; left:38%; opacity:.14; }
/* faint dot-grid texture over the dark background — matches the city pages' body::before */
[data-theme="dark"] body::before { content:''; position:fixed; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; }

/* Links → lighter blue for contrast on dark */
[data-theme="dark"] a:link,
[data-theme="dark"] a:visited { color:var(--accent2); }

/* ===== Dark menu — match the city pages' muted dark menu (overrides the legacy bright-blue menu in dark mode only; light mode keeps the blue/gold menu) ===== */
[data-theme="dark"] #menu_banner { background:rgba(129,140,248,0.18); border-top:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(255,255,255,0.07); }
[data-theme="dark"] #themenu ul li a { background:transparent; color:var(--mid); }
[data-theme="dark"] #themenu ul li:hover a { background:rgba(129,140,248,0.22); color:var(--accent2); }
[data-theme="dark"] #themenu ul li ul { background:rgba(10,10,22,0.97); border:1px solid rgba(255,255,255,0.10); }
[data-theme="dark"] #themenu ul li:hover ul a { background:rgba(10,10,22,0.97); color:var(--text); }
[data-theme="dark"] #themenu ul li:hover ul li a { background:rgba(10,10,22,0.97); color:var(--mid); border-top:1px solid rgba(255,255,255,0.07); }
[data-theme="dark"] #themenu ul li:hover ul a:hover { background:rgba(129,140,248,0.22); color:var(--accent2); }
[data-theme="dark"] .menu_arrow { border-color:rgba(241,240,249,0.35); }
[data-theme="dark"] #themenu ul li:hover .menu_arrow { border-color:var(--accent2); }
[data-theme="dark"] .show-menu { background:transparent; color:var(--mid); }

/* Menu links: match the city's bigger, solid type (Arial 17.6px / weight 400). On default.html the
   menugold base renders them at 15.84px and weight 100 (thin & faint) — this restores the look. */
#themenu ul li a { font-size:17.6px; font-weight:400; }
/* Dropdown (submenu) links: menugold sets these to font-size:100%, which rides #wrapper's 0.9em base
   (→15.84px on default.html) instead of the city's 17.6px. Pin them to match (covers 2nd & 3rd level). */
#themenu ul li ul li a { font-size:17.6px; }
/* "Show Menu" label (mobile): same trap, unpinned — inherits the 0.9em base (→15.84px) AND #wrapper's
   font-weight:lighter (→100, thin). Pin to the city's 17.6px / 400. */
.show-menu { font-size:17.6px; font-weight:400; }

/* ===== Robust flexbox menu + search — mirrors city-template.php's proven flex menu, replacing
   the old absolute-positioned search (which needed the z-index:5 patch to stay clickable).
   Overrides menugold.css's float/absolute menu so the search flows inline at the right end.
   DESKTOP ONLY (>=851px); below that, menugold.css's own mobile menu (<=850px) takes over. ===== */
@media (min-width:851px) {
  #menu_banner    { display:flex; align-items:center; }
  #themenu        { display:flex; align-items:stretch; position:static; height:50px; line-height:50px; }
  #menu_invisible { position:static !important; display:flex; align-items:stretch; margin:0; padding:0; }
  #themenu ul li  { float:none; }
  /* menugold sets the links to min-width:160px; the city uses 130px — match it so the 5 tabs + search fit the 965px bar */
  #themenu #menu_invisible > li > a { min-width:130px; }
  #menu_b_search  { margin-left:36px; display:flex; align-items:center; width:272px; flex-shrink:0; position:relative; }
  #menu_b_search form { display:flex; align-items:center; }
}
/* Match the city's narrow-desktop step (menugold-cities.css max-width:920px): 851–920px shrinks tabs to
   115px so the 5 tabs + the 272px search stay inside the bar without overflowing. */
@media (min-width:851px) and (max-width:920px) {
  #themenu #menu_invisible > li > a { min-width:115px; }
}
/* Mobile (<=850px): city-style menu bar — "Show Menu" left, search centered, nav drops to row 2.
   The city's search sits inside #themenu (its grid); default.html's search is a SIBLING of #themenu,
   so the grid lives on #menu_banner and #themenu is flattened with display:contents so its children
   (Show Menu + nav) become grid items alongside the search. Columns 1fr/auto/1fr centre the search. */
@media (max-width:850px) {
  #menu_banner    { display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:50px auto; width:100%; height:auto; align-self:stretch; position:relative; }
  #themenu        { display:contents; }
  .show-menu      { grid-column:1; grid-row:1; display:flex; align-items:center; padding:0 16px; white-space:nowrap; }
  #menu_b_search  { grid-column:2; grid-row:1; margin:0; width:auto; height:50px; display:flex; align-items:center; position:relative; }
  #menu_b_search form { display:flex; align-items:center; }
  #menu_b_search #menuDropdown { left:auto; right:0; }   /* #menu_b_search prefix: the base #menuDropdown rule sits LATER in this file, so the mobile overrides need an extra id to win the cascade. Flush-right (was right:62px) so the panel doesn't spill left. */
  #themenu ul li  { float:none; }
  /* Expanded nav drops below the bar as a full-width OVERLAY. In-flow would overflow the
     fixed-height (#header 180px) and overlap the page; absolute + a solid theme-aware bg avoids that. */
  #menu_invisible { grid-column:1 / -1; grid-row:2; }
  input[type=checkbox]#show-menu:checked ~ #menu_invisible {
    display:flex; flex-direction:column; position:absolute; top:0; left:0; right:0; z-index:300;
  }
  [data-theme="dark"]  #menu_invisible { background:#0a0a16; border-top:1px solid rgba(255,255,255,0.08); }
  [data-theme="light"] #menu_invisible { background:#0404bf; }
  /* Mobile submenu: tap-to-expand — show inline when the parent li has .sub-open (set by js1/menu-nav.js).
     Ported from city-template.php so the legacy menu's dropdowns work on touch (no :hover). */
  #menu_invisible li.sub-open > ul {
    display:block !important; position:static !important;
    box-shadow:none; background:transparent !important;
    border:none; border-left:2px solid rgba(129,140,248,.25); margin-left:28px;
  }
  [data-theme="light"] #menu_invisible li.sub-open > ul { border-left-color:rgba(4,4,191,.20); }
  #menu_invisible li.sub-open > ul li.sub-open > ul { margin-left:16px; }
  #menu_invisible li.has-sub > a { cursor:pointer; }
  #menu_invisible li.sub-open > a .menu_arrow { transform:rotate(180deg); border-color:var(--accent2) !important; }
  [data-theme="light"] #menu_invisible li.sub-open > a .menu_arrow { border-color:#0404bf !important; }
}
/* ≤430px: on a phone the 380px dropdown can't fit flush-right, so re-anchor it to #menu_banner (the full bar)
   and let it span the viewport with 8px side margins — mirrors city-template.php's ≤430px rule.
   (#menu_b_search prefix: the base #menuDropdown rule is LATER in this file, so these overrides need the
   extra id specificity to win — unlike the city, whose base rule comes first.) */
@media (max-width:430px) {
  #menu_b_search { position:static; }
  #menu_b_search #menuDropdown { top:54px; left:8px; right:8px; width:auto; }
}
/* ≤450px: collapse "Show Menu" to a ☰ icon, matching the city (city-template.php max-width:450px).
   Comes after the ≤850px block so font-size:0 wins the cascade at narrow widths. */
@media (max-width:450px) {
  .show-menu { font-size:0; padding:0 14px; }
  .show-menu::before { content:'☰'; font-size:22px; }
}
/* ≤360px: the search (input 200 + button 60) no longer fits beside the ☰, so hide the Search button —
   Enter and the typeahead dropdown still submit. (The city hides it only at ≤340px, which overflows first.) */
@media (max-width:360px) {
  #menu_b_search .submit { display:none; }
}
.eq_submit .eq_search { overflow:hidden; }
.eq_submit .eq_search .input_wrap,
.eq_submit .eq_search .submit_wrap { float:left; border:1px solid transparent; }
.input_wrap { position:relative; display:inline-block; }
.eq_submit .eq_search .textfield,
.eq_submit .eq_search .submit { height:38px; line-height:38px; border-width:0; font-size:100%; padding:0; font-family:'Inter',sans-serif; }
.eq_submit .eq_search .textfield { background:#FFFFFF; width:200px; color:#000; font-size:15px; padding-left:8px; font-weight:400; }
.eq_submit .eq_search .submit { color:#FFFFFF; background:#0404bf; cursor:pointer; width:60px; font-weight:bold; font-size:15px; }
.eq_submit .eq_search .submit:hover { background:#000099; }
.eq_submit .eq_search .textfield::-webkit-search-cancel-button { display:none; }
[data-theme="dark"] .eq_submit .eq_search .textfield { background:rgba(255,255,255,0.10); color:var(--mid); }
[data-theme="dark"] .eq_submit .eq_search .textfield::placeholder { color:var(--dim); }
[data-theme="dark"] .eq_submit .eq_search .textfield:focus { outline:none; box-shadow:0 0 0 2px rgba(255,255,255,0.20); }
[data-theme="dark"] .eq_submit .eq_search .submit { background:rgba(255,255,255,0.10); color:var(--dim); font-weight:400; }
[data-theme="dark"] .eq_submit .eq_search .submit:hover { background:rgba(255,255,255,0.18); color:var(--mid); }

/* ===== Live search dropdown + clear button (Step 2 — mirrors the city pages) ===== */
.eq_submit .eq_search .textfield { padding-right:22px; }
.menu-clear-btn { position:absolute; right:3px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--mid); font-size:14px; line-height:1; cursor:pointer; padding:4px 5px; display:none; opacity:.7; }
.menu-clear-btn.visible { display:block; }
.menu-clear-btn:hover { opacity:1; color:var(--text); }
[data-theme="light"] .menu-clear-btn { color:rgba(0,0,0,.45); }
#menuDropdown { position:absolute; top:calc(100% + 2px); left:auto; right:62px; width:380px; z-index:500; line-height:normal; }
.dropdown { position:absolute; background:#0c0c1a; border:1.5px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.65); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; }
.dropdown.open { opacity:1; transform:translateY(0); pointer-events:auto; }
.dd-item { display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .12s; }
.dd-item:last-child { border-bottom:none; }
.dd-item.hi { background:rgba(255,255,255,.055); }
.dd-flag { font-size:20px; flex-shrink:0; line-height:1; }
.dd-info { flex:1; min-width:0; }
.dd-city { font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-region { font-size:13px; color:var(--dim); margin-top:1px; }
.dd-right { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.dd-now { font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.dd-ampm { font-size:12px; opacity:.65; margin-left:1px; }
.dd-goto { font-size:13px; color:var(--accent2); opacity:.55; line-height:1; flex-shrink:0; }
.dd-footer { padding:7px 16px; font-size:13px; color:var(--dim); text-align:center; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:6px; }
.dd-more-btn { background:none; border:none; color:var(--accent2); cursor:pointer; font-size:15px; line-height:1; padding:0; opacity:.75; transition:opacity .15s, transform .15s; }
.dd-more-btn:hover { opacity:1; transform:translateY(2px); }
.dd-empty { padding:22px 16px; text-align:center; color:var(--dim); font-size:13px; }
[data-theme="light"] .dropdown { background:#fff; border-color:rgba(0,0,0,0.09); box-shadow:0 24px 64px rgba(0,0,0,.15); }
[data-theme="light"] .dd-item { border-bottom-color:rgba(0,0,0,0.06); }
[data-theme="light"] .dd-item.hi { background:rgba(0,0,0,.04); }
/* dropdown text colours now resolve straight from the palette var()s — no per-mode overrides needed */

/* ===== 12/24 control restyled to match the city pages' segmented .fmt-seg — appearance only; the legacy cookie/get12h24 wiring is unchanged ===== */
/* float:right so the toggle stack shares the top line with the float:left logo instead of dropping
   below it when the header row gets tight (≤~355px). Drops only when there's genuinely no room. */
#sky_right { float:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-top:48px; margin-right:5px; }
/* padding-bottom trimmed 0.5px (2→1.5): Inter's line box sits the 12h/24h glyphs ~0.75px high, leaving
   extra air below. This rebalances the bubble around the text WITHOUT moving the text (moving it down
   would re-introduce the drop). Side effect: the pill is ~0.5px shorter than the city's (accepted). */
#radio_side form { display:inline-flex; gap:2px; margin:0; padding:2px 2px 1.5px; border-radius:100px; background:rgba(255,255,255,.80); border:1px solid rgba(24,24,47,.20); }
#radio_side form label { float:none; margin:0; padding:0; background:none; display:flex; }
#radio_side form label button { display:block; height:27.5px; line-height:27.5px; padding:0 11px; border-radius:100px; font-family:'Inter',Arial,sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; color:rgba(24,24,47,.55); background:none; border:none; appearance:none; -webkit-appearance:none; cursor:pointer; transition:all .15s; }
#radio_side form label button:hover { color:rgba(24,24,47,.85); }
#radio_side form label.h2412on button { background:rgba(4,4,191,.12); color:rgba(4,4,191,.90); }
[data-theme="dark"] #radio_side form { background:rgba(129,140,248,.08); border-color:rgba(129,140,248,.20); }
[data-theme="dark"] #radio_side form label button { color:rgba(241,240,249,.48); }
[data-theme="dark"] #radio_side form label button:hover { color:rgba(241,240,249,.85); }
[data-theme="dark"] #radio_side form label.h2412on button { background:rgba(129,140,248,.22); color:var(--accent2); }

/* Narrow header (≤375px): keep the theme + 12/24 toggles beside the logo instead of dropping below it.
   At 355px it's literally 1px too tight (logo 213 + 20px left margin + toggles 103 + 5px right margin =
   341 vs a 340px header). (1) Trim the logo's generous left margin to free room; (2) below ~353px, where
   even that isn't enough, shrink the logo proportionally so the 103px toggle stack always fits beside it. */
@media (max-width:375px) {
  #white_box     { margin-left:8px; }
  #white_box img { max-width:calc(100vw - 140px); height:auto; }
}