/* ===================================================================
   Rules the PHP port needs that the Next build did not.
   Loaded last, after every stylesheet copied over from the React app.

   Everything here exists because React set a style INLINE from component
   state, and the server has no state to set it from. Expressing the same
   thing as a class the browser flips is what lets these controls render
   identically before any JavaScript runs.

   Keep this file small. Anything that is a real design decision belongs in
   the stylesheet that owns that component, not here.
   =================================================================== */

/* -------------------------------------------------------------------
   Theme toggle icons.

   components/ThemeToggle.tsx rendered BOTH svgs and set
   `style={{display: isDark ? 'none' : 'block'}}` on each from React state.
   Server-side there is no `isDark` — the theme lives on <body> — so the
   same swap is done from the class the pre-paint script already applies.
   Result: the correct icon is painted on the first frame, with no flash
   and no JavaScript involved in the initial render.
   ------------------------------------------------------------------- */
.sp-nav-toggle .sp-icon-light { display: block; }
.sp-nav-toggle .sp-icon-dark { display: none; }

body.dark-mode .sp-nav-toggle .sp-icon-light { display: none; }
body.dark-mode .sp-nav-toggle .sp-icon-dark { display: block; }

/* -------------------------------------------------------------------
   Bottom-sheet dialogs.

   `inert` is what actually keeps a closed sheet out of the tab order (see
   the note in views/partials/bottom_nav.php). bottomnav.css positions the
   sheets off-screen by default and only `.is-open` brings them up, but a
   browser that supports `inert` also paints inert content — so this pins
   the closed state for anything the transform alone would leave hit-testable.
   ------------------------------------------------------------------- */
.sp-bn-sheet[inert] { pointer-events: none; }
.sp-bn-sheet.is-open { pointer-events: auto; }

/* -------------------------------------------------------------------
   Push UI.

   The card and toast ship in the HTML with `hidden` and are revealed by
   assets/js/push.js. `hidden` is only `display:none` at normal specificity,
   so the `display:flex` rules in push.css would otherwise win and both
   would be visible on every page load, before push has decided anything.
   ------------------------------------------------------------------- */
[hidden] { display: none !important; }