/* FLOW design system — global CSS shim.
 *
 * Loaded AFTER design.js so font + animation declarations are
 * available everywhere. Every page in /frontend/ should include:
 *
 *   <link rel="stylesheet" href="/design.css">
 *   <link rel="icon" href="/assets/logos/favicon.svg" type="image/svg+xml">
 *   <link rel="apple-touch-icon" href="/assets/logos/apple-touch-icon.png">
 *
 * Keep this file small. Anything that can be a Tailwind utility
 * lives in design.js as a token; only put global concerns here:
 * fonts, focus, motion, Material Symbols, scrollbars.
 */

/* --- Fonts ---
 * Self-hosted via scripts/download_fonts.py. Source-of-truth WOFF2 files
 * live in /frontend/fonts/. The single @import keeps the @font-face
 * declarations out of this file (large, generated, noisy in diffs).
 *
 * IMPORTANT: @import rules must be the FIRST rules in the stylesheet
 * (CSS spec). Putting any other rule (e.g. `html { ... }`) above this
 * invalidates the imports and the fonts silently fail to load. The
 * scrollbar-gutter rule lives below. */
@import url('/fonts/fonts.css');
/* --- Devanagari (Hindi/Marathi) coverage ---
 * Open Sans + Montserrat ship without Devanagari glyphs, so हिन्दी /
 * मराठी option labels (and any patient-typed Devanagari) were falling
 * back to system fonts (Devanagari MT on macOS, Mangal on Windows) —
 * visually misaligned with the rest of the theme. Noto Sans Devanagari
 * pairs cleanly with Open Sans/Montserrat (Google's superfamily). The
 * Google Fonts URL serves a unicode-range-subsetted woff2 so it only
 * downloads the Devanagari block (U+0900–U+097F), ~10 KB. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

/* --- Scrollbar gutter: stable ---
 * Always reserve space for the vertical scrollbar so centered
 * (mx-auto) content sits at the same x-coord whether the page scrolls
 * or not. Important when navigating between a scrolling page (index,
 * repertorize — body overflows, scrollbar shows) and a non-scrolling
 * page (research uses .app-frame h-screen + overflow-hidden, so body
 * never overflows and no scrollbar would otherwise appear).
 *
 * `scrollbar-gutter: stable` ALONE doesn't work here: per spec it
 * only applies to a scroll container, and html defaults to
 * `overflow: visible` — not a scroll container. Pairing it with
 * `overflow-y: scroll` makes html a scroll container so the gutter
 * always reserves a lane (Chrome/Safari render an inactive track on
 * non-scrolling pages; macOS overlay scrollbars stay invisible). */
html { overflow-y: scroll; scrollbar-gutter: stable; }

/* --- Material Symbols sizing --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* --- Select arrow gutter ---
 * @tailwindcss/forms paints a background-image chevron at the right
 * of every <select> with padding-right: 2.5rem. Utility classes like
 * `px-2` / `px-3` win on specificity and squash that gutter, so the
 * chevron paints OVER the option text. Re-assert the right padding
 * on every select so the arrow always has its lane back, regardless
 * of which utility classes a markup author reaches for. */
select:not([multiple]):not([size]) {
    padding-right: 2.5rem !important;
}

/* --- Focus ring (per design_implementation_notes.md) ---
 * 2px solid bio-teal ring with 2px offset on every focusable
 * surface. Replaces browser default outlines. */
:focus-visible {
    outline: 2px solid #63B1BC;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Honest-AI pulse (the LISTENING dot) ---
 * Cyan glow that breathes. Used on the AI-active indicator. */
.ai-pulse {
    animation: ai-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ai-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.1); }
}

/* --- Glassmorphism nav (applied sparingly per narrative) --- */
.glass-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Calm scrollbar — clinical, non-intrusive --- */
::-webkit-scrollbar      { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3c6cf; border-radius: 10px; }

/* --- Educational watermark (STUDENT role) ---
 * Applied via wrapper class on any container holding a prescription
 * or repertorization grid issued by a STUDENT. -45° at 10% opacity. */
.edu-watermark {
    position: relative;
}
.edu-watermark::before {
    content: 'NOT FOR DISPENSING';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: rgba(195, 198, 207, 0.18);
    transform: rotate(-45deg);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.edu-watermark > * { position: relative; z-index: 1; }

/* --- Motion default (per implementation notes) --- */
.transition-default {
    transition-property: color, background-color, border-color, opacity, transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ────────────────────────────────────────────────────────────────
 * App shell — the centered card every top-level page uses.
 *
 * Single source of truth. Before this lived as a separate copy on
 * each HTML page's <style> block and drifted: index/research had
 * white-card + shadow on md+, repertorize had neither. That's why
 * navigating between them changed the visible card outline and
 * caused subtle x-alignment shifts.
 *
 * Phone (< 768px): 480px max, edge-to-edge on actual phone widths.
 * Tablet (768-1279px): 56rem card with white background + soft shadow
 *   so the centered band reads as a card on the gray surface.
 * Desktop (>= 1280px): 80rem card.
 * ──────────────────────────────────────────────────────────────── */
.app-frame { max-width: 480px; margin: 0 auto; }
@media (min-width: 768px) {
    .app-frame {
        max-width: 56rem;
        background: #fff;
        min-height: 100vh;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
    }
}
@media (min-width: 1280px) {
    .app-frame { max-width: 80rem; }
}

/* ────────────────────────────────────────────────────────────────
 * Form controls — 16px font defeats iOS Safari's zoom-on-focus.
 * Lived in three separate <style> blocks with subtle drift
 * (index included textarea, repertorize didn't, research did again).
 * Now defined once.
 *
 * NOTE: <select> is intentionally excluded. iOS Safari does not
 * zoom selects on focus (they open a native picker, no typing), so
 * the 16px floor adds nothing — but it WAS forcing 16px on the
 * header language picker and making its value text the largest
 * thing in the header, visibly clashing with the 12px "Sign out"
 * link next to it. Selects now inherit font-size from their
 * utility class (text-metadata, text-body-clinical, …) as
 * intended.
 * ──────────────────────────────────────────────────────────────── */
input, textarea { font-size: 16px !important; }

/* ────────────────────────────────────────────────────────────────
 * Fade-in animation — used by view-switching across pages.
 * Two prior copies disagreed (index translated 8px on entry,
 * repertorize did opacity only). Single canonical version:
 * opacity fade with a subtle lift, 200ms ease-in.
 * ──────────────────────────────────────────────────────────────── */
.fade-in { animation: flow-fade-in 0.2s ease-in; }
@keyframes flow-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Body baseline ---
 * Page background defaults to the surface token; body text falls
 * back to Open Sans 14px (clinical default). Patient surfaces
 * override with `font-body-patient` on the <body>. */
html, body {
    background-color: #f8f9fa;
    color: #191c1d;
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}