/* ============================================================================
 *  responsive-foundation.css  ::  ADDITIVE responsive + a11y foundation layer
 * ----------------------------------------------------------------------------
 *  Loaded AFTER styles.css. Nothing here recolours or restructures the existing
 *  "Apple" aesthetic. It only:
 *    1. Declares a complete design-token scale (breakpoints, fluid type, fluid
 *       space, containers, z-index) so future markup can be fluid by reference.
 *    2. Adds the three accessibility primitives the audit found missing entirely:
 *       reduced-motion support, a keyboard-only focus ring, and zoom-safe text.
 *    3. Ships OPT-IN utilities (ultrawide containment, guaranteed touch targets,
 *       fluid-table wrapper) — these change nothing until a class is applied.
 *
 *  To revert everything: delete this file and its <link> tag. No other file
 *  depends on it.
 * ==========================================================================*/

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────────────
 *  Breakpoint reference (content-driven, mobile-first min-width):
 *    sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 · 3xl 1920 · tv 2560
 *  Custom properties cannot be used inside @media conditions, so the numbers
 *  live here as the single documented source of truth; media queries restate
 *  them literally. Everything else (type, space, widths) IS tokenised below. */
:root {
    /* Fluid type scale — clamp(min, preferred, max). The preferred term mixes a
       rem floor with a vw slope so text scales smoothly with no media-query
       jumps, but is hard-bounded so it never gets microscopic on phones or
       absurd on a TV. 1rem = the user's browser base (respects zoom & a11y). */
    --fs-2xs: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
    --fs-xs:  clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem);
    --fs-sm:  clamp(0.88rem, 0.83rem + 0.25vw, 1.00rem);
    --fs-md:  clamp(1.00rem, 0.93rem + 0.35vw, 1.18rem);  /* body */
    --fs-lg:  clamp(1.20rem, 1.08rem + 0.60vw, 1.50rem);
    --fs-xl:  clamp(1.45rem, 1.25rem + 1.00vw, 2.00rem);
    --fs-2xl: clamp(1.80rem, 1.45rem + 1.75vw, 2.75rem);
    --fs-3xl: clamp(2.20rem, 1.65rem + 2.75vw, 3.75rem);  /* hero */

    /* Fluid space scale — same clamp philosophy for rhythm & gutters. */
    --space-2xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
    --space-xs:  clamp(0.50rem, 0.45rem + 0.25vw, 0.75rem);
    --space-sm:  clamp(0.75rem, 0.68rem + 0.35vw, 1.00rem);
    --space-md:  clamp(1.00rem, 0.88rem + 0.60vw, 1.50rem);
    --space-lg:  clamp(1.50rem, 1.25rem + 1.25vw, 2.50rem);
    --space-xl:  clamp(2.00rem, 1.50rem + 2.50vw, 4.00rem);

    /* Reading-measure & shell widths — keep line length readable and stop
       content stretching edge-to-edge on ultrawide / TV. */
    --measure: 70ch;            /* optimal text line length */
    --shell-max: 1400px;        /* app content cap on huge screens */
    --shell-pad: clamp(1rem, 4vw, 4rem);

    /* Z-index scale — replaces the magic numbers scattered across the codebase. */
    --z-base: 1;
    --z-sticky: 50;
    --z-nav: 90;
    --z-overlay: 100;
    --z-modal: 110;
    --z-toast: 1000;
}

/* ── 2. ACCESSIBILITY PRIMITIVES (global, safe) ─────────────────────────────*/

/* 2a. Prevent iOS/Android from auto-inflating font sizes in landscape, which
       silently breaks carefully-tuned layouts. Honour explicit user zoom. */
html {
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
}

/* 2b. Keyboard-only focus ring. :focus-visible fires for keyboard / AT users
       but NOT for mouse clicks, so it adds a clear focus indicator (WCAG 2.4.7)
       without putting outlines on every tapped button. */
:focus-visible {
    outline: 2px solid var(--accent-blue, #0066cc);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Remove the legacy default ring only where our better one applies. */
:focus:not(:focus-visible) {
    outline: none;
}

/* 2c. Reduced-motion. Users who set "reduce motion" at the OS level get an
       essentially motion-free experience — required for vestibular safety and
       a WCAG 2.3.3 best practice. Was completely absent before. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 3. OPT-IN UTILITIES (no effect until a class is applied) ────────────────*/

/* 3a. Ultrawide / TV containment. Wrap a page's main scroll content in this to
       cap its width and centre it, so a 21:9 / 32:9 / 4K display shows a
       readable column instead of a 3000px-wide stretched layout. */
.u-shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}
.u-measure { max-width: var(--measure); }

/* 3b. Guaranteed 44x44 touch target (WCAG 2.5.5 / Apple HIG) without changing
       the visual size — the hit area is expanded via min-size + centring. */
.u-tap {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3c. Fluid-table wrapper. Wrap any wide <table> in <div class="u-table-scroll">
       so it scrolls horizontally INSIDE its own box instead of pushing the whole
       page wider (the classic mobile horizontal-scroll bug). */
.u-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* 3d. Responsive media helpers (explicit, for embeds the global img/video rule
       in styles.css doesn't cover). aspect-ratio reserves space => zero CLS. */
.u-media-16x9 { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.u-media-1x1  { aspect-ratio: 1 / 1;  width: 100%; height: auto; }
.u-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.u-embed > iframe,
.u-embed > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── 4. ULTRAWIDE GLOBAL GUARD (≥1920px) ────────────────────────────────────
 *  The existing CSS has NO rules above 1100px, so on 1920px+ the 250px sidebar
 *  leaves the content area to stretch unbounded. This caps the already-fluid
 *  utility containers the app uses, centred — it only touches opt-in classes,
 *  so it cannot disturb legacy fixed layouts. */
@media (min-width: 1920px) {
    .u-fluid-container,
    .dashboard-content > .u-shell {
        max-width: var(--shell-max);
        margin-inline: auto;
    }
}