/*
 * cross-browser.css — P0 normalization layer.
 *
 * Loaded LAST in every base shell (after tokens.css / style.css / portal*.css /
 * responsive.css) so it can normalize browser- and OS-level rendering
 * differences without being overridden. Normalization-only — no page layout
 * rules belong here.
 *
 * Why this exists: modern Edge and Chrome are both Chromium/Blink, so the
 * "Edge looks different" report is dominated by (a) the body font being a
 * platform system stack (Segoe UI on Windows vs SF on macOS) instead of the
 * shipped Inter web font, and (b) unstyled native form widgets. This layer
 * fixes both globally. See docs/superpowers/specs/2026-05-31-cross-browser-responsive-design.md
 */

/* ── 1. Unify the body typeface across every OS + browser ──────────────────
 * tokens.css defines --font-sans: 'Inter', … but style.css:140 overrides body
 * with a system stack that ignores it. Re-assert the token here. The inline
 * Inter-first fallback keeps this working even on shells that don't load
 * tokens.css (auth/minimal also gain tokens.css in Task 4, but the fallback
 * makes the font resilient regardless of load order). */
body {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont,
        system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}

/* ── 2. Edge native form-control artifacts ────────────────────────────────
 * Edge injects its own password-reveal eye and text-clear "x" into inputs,
 * which collide with app-rendered icons (Chrome does not). Remove them. */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

/* ── 3. Autofill — stop the bright yellow box, keep token colors ───────────
 * WebKit/Chromium paint autofilled fields with a non-overridable yellow
 * background; the inset-shadow trick recolors them to the app surface. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text, #e6e6eb);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-input, #232733) inset;
    box-shadow: 0 0 0 1000px var(--surface-input, #232733) inset;
    caret-color: var(--text, #e6e6eb);
    transition: background-color 5000s ease-in-out 0s;
}

/* ── 4. Checkboxes / radios / range track in the brand accent ──────────────
 * Global default; element-scoped accent-color rules in style.css stay more
 * specific and continue to win where intentionally set. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--accent, #4a9eff);
}

/* ── 4b. Control inputs keep native sizing EVERYWHERE ──────────────────────
 * Multiple broad rules in style.css set bare `input { width:100% }` and apply
 * site-wide — NOT just outside the app shell:
 *   · `body:not(.sk-app-shell) input { width:100%; padding:16px; … }`
 *     (a centered auth/PIN form), and
 *   · `input, textarea, select { width:100%; padding:.5rem .75rem;
 *     margin-bottom:.75rem }` (an embedded page block that is NOT page-scoped,
 *     so it leaks to every page including app-shell ones).
 * Both stretch checkboxes/radios into full-width boxes with stray padding and
 * a 12px bottom margin — the recurring bug behind the 7.14.73 .canned-cb patch
 * and the Deploy-Printer modal. The earlier :not(.sk-app-shell) version of this
 * reset (7.14.77) did NOT cover app-shell pages, where the bug also occurs.
 * This app has NO checkbox-based custom toggles (verified by grep), so control
 * inputs must NEVER be width:100% — force native sizing globally with
 * !important to beat every current and future bare-input rule in any context.
 * One global cure; per-page pins (.canned-cb, .pa-perm-cb) become redundant. */
input[type="checkbox"],
input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    margin: 0;
    border-radius: 0;
    background: none;
    font-size: initial;
    text-align: initial;
    letter-spacing: normal;
    vertical-align: middle;
    appearance: auto;
    accent-color: var(--accent, #4a9eff);
}
input[type="radio"] {
    border-radius: 50%;
}

/* ── 5. Number-input spinners — consistent, unobtrusive ────────────────────*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    margin: 0;
}

/* ── 6. Graceful degradation for Chromium < 111 (no color-mix/oklch) ───────
 * Current Edge/Chrome support these identically; this only protects an old
 * managed browser from dropping a color to transparent/initial. Provide a
 * visible token fallback for the most common borrowed-opacity pattern. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        /* Used by per-page CSS via color-mix(... var(--accent) ...); fall back
         * to the solid accent so buttons/badges remain visible, not blank. */
        --accent-soft: rgba(74, 158, 255, 0.10);
    }
    .btn,
    .badge {
        /* Defensive: ensure interactive chrome keeps a solid background even
         * if a color-mix() fill silently fails to parse. */
        background-color: var(--surface, #1a1d27);
    }
}

/* ── 7. Windows high-contrast / forced-colors mode ────────────────────────
 * Keep focus rings and control borders visible when the OS overrides colors. */
@media (forced-colors: active) {
    :focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
    }
    .btn,
    input,
    select,
    textarea {
        border: 1px solid CanvasText;
    }
}