/*
 * Dark mode for every page, on phones.
 *
 * Turned on by data-apph-theme="dark" on <html>, which js/theme.js sets in
 * the <head> from the Appearance switch (System / Light / Dark). The switch
 * only exists on phones, so this is scoped to the same 880px breakpoint and
 * desktop stays exactly as it was.
 *
 * premium.css uses its tokens both as text and as surface colours, so the
 * tokens are flipped first and the places that paint a surface with a
 * "text" token (or with a literal #fff) are pinned afterwards.
 */
@media (max-width: 880px) {
  html[data-apph-theme="dark"] {
    color-scheme: dark;
    --white: #181818;
    --ink: #EDEDED;
    --slate-700: #D4D4D8;
    --slate-600: #BDBDC4;
    --slate-500: #A3A3A3;
    --slate-400: #8A8A8F;
    --slate-200: #2E2E2E;
    --slate-100: #222222;
    --surface: #0D0D0D;
    --blue-50: rgba(46, 107, 255, .14);
    --blue-100: rgba(46, 107, 255, .22);
    --blue-200: #2A3550;
    --blue-300: #6E8FD6;
    --blue-500: #4F86FF;
    --blue-600: #4A82FF;
    --blue-700: #9DBBFF;
    --blue-900: #DCE6FF;
    --blue-950: #F2F5FF;
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --sh-md: 0 10px 30px rgba(0, 0, 0, .45);
    --sh-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --sh-blue: 0 12px 30px rgba(30, 95, 224, .25);
    --gray-50: #141414; --gray-300: #3A3A3A; --gray-800: #E5E5E5;
  }

  html[data-apph-theme="dark"] body { background: #0D0D0D; color: var(--ink); }

  /* Surfaces that were literal white */
  html[data-apph-theme="dark"] .section--white,
  html[data-apph-theme="dark"] .card,
  html[data-apph-theme="dark"] .guide-card,
  html[data-apph-theme="dark"] .faq__item,
  html[data-apph-theme="dark"] .tool,
  html[data-apph-theme="dark"] .ref,
  html[data-apph-theme="dark"] .post,
  html[data-apph-theme="dark"] .latest-grid > a,
  html[data-apph-theme="dark"] .hsearch__results,
  html[data-apph-theme="dark"] .intro-stats__item,
  html[data-apph-theme="dark"] .aff-prod,
  html[data-apph-theme="dark"] .article { background: #181818; }
  html[data-apph-theme="dark"] .section--white { background: #121212; }

  html[data-apph-theme="dark"] .hsearch__input,
  html[data-apph-theme="dark"] .tool input,
  html[data-apph-theme="dark"] .tool select,
  html[data-apph-theme="dark"] .tool textarea { background: #222222; color: var(--ink); border-color: #3A3A3A; }
  html[data-apph-theme="dark"] .tool input::placeholder,
  html[data-apph-theme="dark"] .hsearch__input::placeholder { color: #8A8A8F; }

  html[data-apph-theme="dark"] .hero__badge,
  html[data-apph-theme="dark"] .chip,
  html[data-apph-theme="dark"] .btn--secondary { background: #1E1E1E; }
  html[data-apph-theme="dark"] .tool__out,
  html[data-apph-theme="dark"] .aff-card,
  html[data-apph-theme="dark"] .toc { background: linear-gradient(180deg, rgba(46, 107, 255, .12), #181818); }
  html[data-apph-theme="dark"] .aff-card__tag { background: #181818; }

  /* Header, drawer and hero */
  html[data-apph-theme="dark"] .header { background: rgba(13, 13, 13, .92); border-bottom-color: #2E2E2E; }
  html[data-apph-theme="dark"] .menu-toggle__bar { background: #EDEDED; }
  html[data-apph-theme="dark"] .nav { background: #141414; }
  html[data-apph-theme="dark"] .nav__drawer-footer { background: #0D0D0D; }
  html[data-apph-theme="dark"] .nav__close { color: var(--blue-700); }
  html[data-apph-theme="dark"] .nav-backdrop { background: rgba(0, 0, 0, .6); }
  html[data-apph-theme="dark"] .hero {
    background:
      radial-gradient(1100px 460px at 78% -8%, rgba(46, 107, 255, .18), transparent 60%),
      radial-gradient(720px 380px at 4% 18%, rgba(25, 194, 184, .10), transparent 60%),
      linear-gradient(180deg, #121212 0%, #0D0D0D 100%);
  }
  html[data-apph-theme="dark"] .hero__rails { opacity: .25; }
  html[data-apph-theme="dark"] .intro-card__blob,
  html[data-apph-theme="dark"] .post__media { background: rgba(46, 107, 255, .12); }

  /* Surfaces painted with the (now light) navy tokens */
  html[data-apph-theme="dark"] .disclaimer-banner { background: #071B43; }
  html[data-apph-theme="dark"] .footer { background: #080808; border-top: 1px solid #222222; }
  html[data-apph-theme="dark"] .card--featured { background: linear-gradient(150deg, #1E5FE0, #0A2A66); }
  html[data-apph-theme="dark"] .section--primary {
    background:
      radial-gradient(800px 400px at 80% 0%, rgba(46, 107, 255, .35), transparent 60%),
      linear-gradient(135deg, #0A2A66, #071B43);
  }

  /* Solid buttons keep a readable blue fill with white text */
  html[data-apph-theme="dark"] .btn--primary { background: #2E6BFF; color: #fff; }
  html[data-apph-theme="dark"] .btn--primary:hover { background: #1E5FE0; }
  html[data-apph-theme="dark"] .social-share-toggle,
  html[data-apph-theme="dark"] .social-share__btn--copy { background: #2E6BFF; }

  /* The app block's own header row sits on a dark page now, so its edges blend */
  html[data-apph-theme="dark"] .apph { border-bottom: 1px solid #1E1E1E; }

  /* Android install bar and card (css/openapp.css) */
  html[data-apph-theme="dark"] .appbar { background: #181818; border-color: #2E2E2E; }
  html[data-apph-theme="dark"] .appcard { background: linear-gradient(135deg, rgba(46, 107, 255, .14), #181818 70%); }

  /* Station board and trains-between tables (css/places.css) */
  html[data-apph-theme="dark"] .table th { background: rgba(46, 107, 255, .14); }
  html[data-apph-theme="dark"] .table td { border-color: #2E2E2E; }
}

/* ---- The Appearance switch on pages without the app block (js/theme.js) ---- */
.fmt-theme-btn, .fmt-sheet { display: none; }
@media (max-width: 880px) {
  .fmt-theme-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto;
    margin-right: 4px; border-radius: 50%; border: 1px solid var(--slate-200); background: transparent;
    color: var(--blue-950); cursor: pointer; }
  .fmt-theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
  .fmt-sheet:not([hidden]) { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; }
  .fmt-sheet__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 20, .45); }
  .fmt-sheet__panel { position: relative; width: 100%; background: #F2F2F2; color: #111;
    border-radius: 28px 28px 0 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); }
  .fmt-sheet__grab { width: 38px; height: 4px; border-radius: 4px; background: #D6D6D6; margin: 0 auto 12px; }
  .fmt-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .fmt-sheet__title { margin: 0; font-size: 21px; font-weight: 800; }
  .fmt-sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #D6D6D6; background: #fff;
    color: #111; font-size: 18px; cursor: pointer; }
  .fmt-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 100px;
    background: #fff; border: 1px solid #D6D6D6; }
  .fmt-seg button { height: 44px; border: 0; border-radius: 100px; background: none; font: inherit; font-size: 14px;
    font-weight: 700; color: #666; cursor: pointer; }
  .fmt-seg button[aria-checked="true"] { background: #EDE9FE; color: #7C3AED; }
  html[data-apph-theme="dark"] .fmt-sheet__panel { background: #0D0D0D; color: #F2F2F2; }
  html[data-apph-theme="dark"] .fmt-sheet__grab { background: #333; }
  html[data-apph-theme="dark"] .fmt-sheet__close,
  html[data-apph-theme="dark"] .fmt-seg { background: #181818; border-color: #333; color: #F2F2F2; }
  html[data-apph-theme="dark"] .fmt-seg button { color: #A3A3A3; }
  html[data-apph-theme="dark"] .fmt-seg button[aria-checked="true"] { background: rgba(124, 58, 237, .2); color: #A78BFA; }
}