/* @rspond-css-engine
   The other half of the engine. Its box-sizing: border-box is what makes padding boundary-neutral,
   and so is the premise the layout rule itself stands on -- which is exactly why box-sizing counts as
   layout everywhere else: a stylesheet overriding it would quietly withdraw the rule's foundation. */
/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.reset {

    /* A declared width should be the width that appears. By default a browser reads a width as the size of the
       content alone and then adds padding and border outside it, so a component asking for 290 renders at 332 --
       three cards to a row came to 1046px against a 940px pane. `WebSizing` says how much room an item takes, not
       how much room is left inside it once its own decoration is paid for, so this makes the browser agree.

       This once lived in BasicWebPage.css alongside `margin: 0` and `padding: 0`, and went out with them when
       stylesheets stopped being allowed to make layout decisions. Zeroing margin and padding was indeed a layout
       decision, and it stays gone -- the Tray owns spacing. This is not one: it decides how a number is measured,
       not who decides the number.

       It sits in the lowest layer on purpose. A reset should be the weakest thing on the page, so that any rule
       that genuinely wants the old measurement can still ask for it -- the bundled calendar does exactly that for
       its control strip, and a reset in a higher layer would silently overrule it. */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* A percentage height should mean something. A browser resolves `height: 100%` against the parent's height, and
       the document's two outermost elements have no height of their own -- so the chain has nothing to resolve
       against and every percentage in it collapses to auto. An application shell asking to fill the window gets a
       box the height of its own text instead.

       This is the same kind of decision as `box-sizing` above, and belongs here for the same reason: it settles how
       a number is *measured*, not what the number is. It makes nothing tall. Whether the shell fills the window is
       the shell's decision, stated in Java as a WebSizing on the tray that is the page -- which is exactly the
       declaration that could not be expressed while this was missing. */
    html,
    body {
        height: 100%;
    }

    /* The user agent gives the body an 8px margin, from the era when a body was a page of text and the margin was
       its paper edge. An application shell filling the window cannot carry it: with the height rule above finally
       resolving, 100% plus a margin overflows the viewport by exactly that margin, and the bottom of the page --
       measured here as half the footer -- is pushed off screen. Margin is layout and layout belongs to a placing
       tray, but nothing places the body; this is the browser's own default interfering with the viewport chain,
       which makes it the engine's to remove, exactly like the height it interferes with. */
    body {
        margin: 0;
    }

    /* The user agent gives a checkbox and a radio a margin of their own -- 3px on three sides in every engine --
       from the era when one sat inline in a run of text and needed air around it. A field places its control in a
       slot of a stated size, so that margin is added outside the box the slot agreed to and makes the row taller
       than the control it holds.

       That is what moved a form as it flipped: a checkbox row measured six pixels taller than the same row
       displaying a check glyph, so every field below it shifted at the moment the mode changed -- the one thing
       display mode promises will not happen. Margin is layout and layout belongs to a placing tray; this is the
       browser's own default reaching inside a slot, which makes it the engine's to remove. */
    input[type="checkbox"],
    input[type="radio"] {
        margin: 0;
    }
}