/* Small refinements on top of Tailwind. */ /* Baseline for native form controls, driven by the theme variables defined in src/input.css. Tailwind utility classes (bg-*, text-*, bg-transparent) still win where present; this only supplies sane defaults so inputs are never white-on-white in dark or black-on-black in light. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: rgb(var(--field-bg)); color: rgb(var(--field-text)); } input::placeholder, textarea::placeholder { color: rgb(var(--slate-500)); } select option { background-color: rgb(var(--field-bg)); color: rgb(var(--field-text)); } input[type="checkbox"], input[type="radio"] { /* A ticked checkbox is a solid shape, so it takes the brand fill rather than the accent-text ramp — otherwise it goes brown in light mode. */ accent-color: rgb(var(--gold-fill)); } /* Themed surfaces need a transition or toggling is jarring. */ html, body { transition: background-color 0.15s ease, color 0.15s ease; } /* App viewport height. `100vh` on iOS Safari is the height with the browser chrome *hidden*, so the bottom tab bar ends up underneath the toolbar whenever it is showing. `dvh` tracks the actually-visible viewport. Kept as its own class rather than Tailwind's h-screen so the @supports upgrade does not fight utility specificity. */ .app-viewport { height: 100vh; } @supports (height: 100dvh) { .app-viewport { height: 100dvh; } } /* Safe-area padding helpers for notched devices (Capacitor). */ .pt-safe { padding-top: env(safe-area-inset-top); } .pb-safe { padding-bottom: env(safe-area-inset-bottom); } /* The viewport is `viewport-fit=cover`, so on a notched phone the page starts underneath the status bar and the logo collides with the clock. Reserve the inset *above* the bar's 3.5rem of chrome, so the bar grows rather than the content being squashed. Falls back to 0px everywhere else. */ .topbar-safe { height: calc(4rem + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } /* iOS Safari zooms the viewport in whenever a focused input's font-size is under 16px, and does NOT zoom back out on blur — which is why signing in left the whole app looking scaled up. Give touch devices 16px fields and the zoom never triggers; pointer devices keep the denser type. Scoped through [data-theme] (always set on by the inline script in index.html) purely to outrank Tailwind's own .text-sm / .text-xs on these same elements, which a bare `textarea` selector would lose to. */ @media (pointer: coarse) { [data-theme] input:not([type="checkbox"]):not([type="radio"]), [data-theme] select, [data-theme] textarea { font-size: 16px; } } /* Thin, subtle scrollbars that follow the active theme. */ .scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(var(--scrollbar)) transparent; } .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-thin::-webkit-scrollbar-thumb { background-color: rgb(var(--scrollbar)); border-radius: 9999px; } .scroll-thin::-webkit-scrollbar-track { background: transparent; } /* Lucide icons should size to their container. */ [data-lucide] { width: 18px; height: 18px; } /* Dropdown / modal fade-in. */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .animate-fade { animation: fadeIn 0.12s ease-out; } /* Slide-over drawer entering from the right. */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .animate-slide { animation: slideInRight 0.18s ease-out; }