neiam /fieri-forever

@import "../../node_modules/@fortawesome/fontawesome-free/css/all.css";
@import "@fontsource/b612-mono/400.css";
@import "@fontsource/b612-mono/700.css";
@import "leaflet/dist/leaflet.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* htmx request indicator helpers */
.htmx-indicator { opacity: 0; transition: opacity 300ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Leaflet's panes run z-index 200-1000; give the map its own stacking context
   so they stay inside it and daisyUI dropdowns (z-10) open over the map. */
.leaflet-container { isolation: isolate; z-index: 0; font: inherit; }

/* Rank radios drawn as a button group (restaurants/new.html): the label is
   the button, the radio inside it is visually hidden. The checked one takes
   its rank's colour, as in the rank widget. Plain CSS rather than
   has-[:checked]: utilities, which Tailwind won't generate for daisyUI's
   component classes, and outside @layer so it's never purged. */
.rank-pick:has(:focus-visible) { outline: 2px solid oklch(var(--bc)); outline-offset: 2px; }
.rank-pick-obsessed:has(:checked) { @apply btn-warning; }
.rank-pick-always:has(:checked) { @apply btn-success; }
.rank-pick-positive:has(:checked) { @apply btn-accent; }
.rank-pick-neutral:has(:checked) { @apply btn-neutral; }
.rank-pick-never:has(:checked) { @apply btn-error; }
/* daisyUI's colour classes only set --btn-color; .btn turns that into a
   background, which .btn-ghost then overrides with transparent. Paint it
   here, for whichever rank is checked. */
.rank-pick:has(:checked) {
  background-color: oklch(var(--btn-color));
  border-color: oklch(var(--btn-color));
}