@layer reset {

    /* ── Box model ─────────────────────────────────────────────────
     Make every element compute width/height including padding and
     border. Single most impactful reset rule; every modern site
     assumes this. */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* ── Remove default margins ────────────────────────────────────
     Browser UA stylesheets add margin to headings, paragraphs,
     lists, etc. — values that rarely match your design system.
     Strip them; components set their own spacing intentionally. */
    html,
    body,
    h1, h2, h3, h4, h5, h6,
    p,
    figure,
    blockquote,
    dl, dd,
    ol, ul,
    fieldset,
    legend {
        margin: 0;
    }

    /* ── Root defaults ─────────────────────────────────────────────
     color-scheme tells the browser to use matching form controls,
     scrollbars, and default text/background colors for light/dark.
     Setting both means the browser handles user-preference dark
     mode gracefully even before your own theme kicks in. */
    :root {
        color-scheme: light dark;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* ── Body baseline ─────────────────────────────────────────────
     min-height with dvh (dynamic viewport) handles mobile browsers'
     address-bar resize correctly. line-height of 1.5 is a solid
     default; components can override. Font smoothing is opinionated
     but near-universal on modern sites. */
    body {
        min-height: 100dvh;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* ── Media defaults ────────────────────────────────────────────
     Images, videos, SVG etc. should not overflow their containers
     and should behave as block elements (avoids the mystery gap
     under images caused by inline-baseline alignment). */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* ── Form element inheritance ──────────────────────────────────
     Inputs/buttons/selects don't inherit font by default. Force
     inheritance so components style forms via their container. */
    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    /* ── Button reset ──────────────────────────────────────────────
     Strip browser-default button chrome (background, border, padding)
     so plain <button> elements used as icon/affordance wrappers
     (topbar avatar, hamburger, etc.) render clean.

     Safe because of layer order: reset < vendor. Fluent.css (in
     vendor.syncfusion) wins for anything with .e-btn classes, so
     Syncfusion buttons keep their full styling. Plain <button>
     without .e-btn falls through to this reset because fluent.css
     doesn't match them. */
    button {
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    /* ── Link reset ────────────────────────────────────────────────
     Don't decide link colors here — that's a design token decision
     (base layer). But inherit color and remove underlines so
     components can opt back in. */
    a {
        color: inherit;
        text-decoration: none;
    }

    /* ── Table reset ───────────────────────────────────────────────
     Collapse borders and reset spacing so tables render predictably
     regardless of attribute-based styling from older content. */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* ── List reset ────────────────────────────────────────────────
     Lists with an explicit ARIA role (e.g. role="list" for a
     designed navigation) should not carry bullets. Lists without
     a role keep their semantics and their bullets. */
    ul[role="list"],
    ol[role="list"] {
        list-style: none;
        padding-inline: 0;
    }

    /* ── Typography anti-rivering ──────────────────────────────────
     Long words should break rather than overflow. Especially
     important for user-generated content (long URLs, names). */
    p,
    li,
    dd,
    figcaption {
        overflow-wrap: break-word;
    }

    /* ── Focus ─────────────────────────────────────────────────────
     Remove the default browser outline only where :focus-visible
     is supported — which is everywhere you care about. This
     preserves keyboard accessibility while removing mouse-click
     outlines. Never remove focus outlines without :focus-visible. */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* ── Reduced motion ────────────────────────────────────────────
     Respect the user's OS-level motion preference. Components
     can still animate, but animations become near-instant. */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* ── Textarea ──────────────────────────────────────────────────
     Allow vertical resize only by default — horizontal resize
     breaks layouts in 99% of cases. */
    textarea {
        resize: vertical;
    }

    /* ── Hidden ────────────────────────────────────────────────────
     Honor the `hidden` attribute even when other display rules
     apply (e.g., `.flex` utility on a `<div hidden>`). */
    [hidden] {
        display: none !important;
    }
}