/* Public page chrome — the theme toggle, the back-to-top button, and the
   top-bar CTA colour (2026-09-18).

   Loaded by the calculator hub + 14 calculators, the compare hub + 4
   comparisons, and the reading pages (guides index + 4 guides, privacy,
   terms), alongside /tools/theme.js, which builds both buttons. It holds ONLY
   the page chrome those families share, so a comparison or a guide gets the
   toggle without any calculator layout (tools-calc.css stays calculator-only).

   Every selector is scoped to one of the six body classes — .tc-page, .tc-hub,
   .cmp-page, .cmp-hub, .rd-page, .rd-hub — and nothing here reaches the app. */

:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) { --tc-action: #4f46e5; --tc-action-hover: #4338ca; }

/* ── Top-bar CTA: white on a fixed deep indigo ──────────────────────────────
   The shared --indigo token lightens to #818cf8 in dark mode, where white text
   on it is 2.98:1. #4f46e5 at rest is 6.29:1; #4338ca on hover/focus is 7.90:1.
   A 1px --indigo-ink ring keeps the edge visible against navy. */
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .topbar .cta { min-height: 44px; display: inline-flex; align-items: center; background: var(--tc-action); color: #fff; box-shadow: 0 0 0 1px var(--indigo-ink); }
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .topbar .cta:hover,
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .topbar .cta:focus-visible { background: var(--tc-action-hover); color: #fff; text-decoration: none; }
:is(.cmp-page, .cmp-hub) .tblink { min-height: 44px; display: inline-flex; align-items: center; }

/* ── Theme toggle ──────────────────────────────────────────────────────────
   A 44px icon button placed before "Open Tesserae". On a phone the top bar
   can't hold brand + back-link + toggle + CTA, so the back-link drops (each
   page still links back in its breadcrumbs or footer) and the toggle takes over
   the push-right margin: below 480px on a calculator ("← All tools"), below
   560px on a comparison ("← All comparisons" is wider). The two hubs have no
   back-link, so the toggle always pushes right. */
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-theme { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-theme:hover { border-color: var(--indigo); color: var(--indigo-ink); }
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.tc-hub, .cmp-hub) .tc-theme { margin-left: auto; }
@media (max-width: 480px) {
  .tc-page .tblink { display: none; }
  .tc-page .tc-theme { margin-left: auto; }
  :is(.rd-page, .rd-hub) .tblink { display: none; }
  :is(.rd-page, .rd-hub) .tc-theme { margin-left: auto; }
}
/* The legal pages' top bar is brand + toggle: the toggle sits at the end. */
.rd-page.rd-legal .tc-theme { margin: 0 0 0 auto; }
/* Footer links on the reading pages are real tap targets on a phone. */
:is(.rd-page, .rd-hub) footer .fnav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 560px) {
  .cmp-page .tblink { display: none; }
  .cmp-page .tc-theme { margin-left: auto; }
}
/* Native controls (selects, sliders, scrollbars) follow an explicit choice. */
:root[data-theme="dark"] :is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) { color-scheme: dark; }
:root[data-theme="light"] :is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) { color-scheme: light; }

/* ── Back to top ───────────────────────────────────────────────────────────
   Hidden (the `hidden` attribute: out of view AND out of the tab order) until
   the reader is well down a long page — on a calculator only once the whole
   calculator has scrolled out of view, so it can never sit over an input or a
   result. A quiet 44px circle bottom-right, clear of the phone's home bar and
   notch via the safe-area insets. */
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-top { position: fixed; z-index: 30; right: max(16px, calc(env(safe-area-inset-right) + 12px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-top[hidden] { display: none; }
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-top:hover { border-color: var(--indigo); color: var(--indigo-ink); }
:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) .tc-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:is(.tc-page, .tc-hub, .cmp-page, .cmp-hub, .rd-page, .rd-hub) :is(.tc-theme, .tc-top):focus-visible { outline: 3px solid color-mix(in srgb, var(--indigo) 45%, transparent); outline-offset: 2px; }