/*
 * Base reset. C9 — what Bootstrap's Reboot was actually holding up.
 *
 * `bootstrap.min.css` loaded 228K on every page while no rule in this app named
 * a single one of its classes. It was not, however, dead: it supplied the base
 * reset that `tokens.css` and `shell.css` were written on top of. Removing it
 * without this file changed 7,727 elements across the nine v2 pages.
 *
 * Every rule below was MEASURED, not copied: `scripts/c9_reset_probe.mjs` dumps
 * the computed style of every element on every page, and the diff between "with
 * Bootstrap" and "without" is exactly this list. `make c9-reset` holds the
 * measured invariants after the vendored stylesheet is gone.
 *
 * Two of Reboot's rules are deliberately NOT reproduced, because they were
 * Bootstrap's design opinions rather than a reset — see the end of this file.
 *
 * Loaded FIRST, before tokens.css and shell.css, exactly where the Bootstrap
 * link used to sit.
 */

/* Box model. 6,730 elements depended on this one line. Without it every padded
   or bordered box in the interface grows by its own padding and border. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The page frame. `line-height` is inherited by nearly every element on every
   page; `normal` varies per font and would reflow the whole interface.
   `text-size-adjust` stops mobile Safari inflating type in landscape, which
   would break the 390px layouts that are the primary target — it sits on `body`
   rather than `html` because that is where Reboot had it, and moving it changes
   what `html` itself computes for no rendered benefit.

   `font-family`, `font-size`, `color` and `background` are NOT set here — they
   are `shell.css`'s, from tokens, and always have been. */
body {
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Flow content: browsers give these margins that the layout does not expect,
   because the interface spaces itself with tokens. */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol, ul {
  padding-left: 2rem;
}

/* A NESTED list closes without its own trailing gap. Omitting this made the
   users page 3,733px taller, because every nested list added a rem it never
   had — visible only as the rail's `margin-top: auto` resolving differently,
   which is why the comparison had to look at every element rather than a
   sample. */
ol ol, ol ul, ul ol, ul ul {
  margin-bottom: 0;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

dt {
  font-weight: 700;
}

/* A rule is structure, so it takes the structural colour rather than the
   browser's grey. Reboot achieved this with `color: inherit` plus opacity; the
   token says it directly. */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid var(--c-hairline-strong);
}

/* Form controls do not inherit type from their page unless told to. Without
   this, 334 controls fell back to Arial and 302 to the UA's 13.3px — inside a
   layout measured at 16px. */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Safari and Firefox uppercase these on some platforms. */
button,
select {
  text-transform: none;
}

/* Chrome gives a search input its own appearance and an inner decoration, which
   changes the control's INTRINSIC WIDTH. Without these the library's search box
   rendered narrower and the toolbar's `margin-right: auto` resolved 38px
   differently — the only layout difference the whole comparison found. */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

label {
  display: inline-block;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* `float: left` with a full width is how Reboot makes a legend behave like an
   ordinary block instead of the special box a fieldset would otherwise give it.
   It is load-bearing here: without it Chrome computed `#v2-density` 38px
   narrower, which moved the library toolbar's `margin-right: auto`. shell.css's
   own `.v2-density legend { width: 100% }` was written against this behaviour. */
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  line-height: inherit;
}

/* The float above is only half the rule, and the missing half was expensive:
   without it the element after a legend gets no usable inline width at all —
   36 labels on the users page wrapped into a 68px column and the page grew
   3,734px. A floated legend and its clear are one mechanism, not two. */
legend + * {
  clear: left;
}

/* Icons sit on the text baseline by default, which drops them below the centre
   of every button and row they appear in. 144 elements. */
img,
svg {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  caption-side: bottom;
}

/*
 * LOAD-BEARING, and found the hard way.
 *
 * `[hidden]` is what actually hides things across this app: 13 elements carrying
 * the attribute became VISIBLE the moment Bootstrap was removed — the mobile
 * account sheet, the recipe page's discussion panel, several editor buttons.
 * Every `[hidden]` rule in `shell.css` is written as plain `display: none` and
 * many elements carry `hidden` with no rule of their own at all.
 *
 * The `!important` is required, not defensive: a component rule that sets
 * `display: flex` on the same element wins over a plain `[hidden]`. C2 hit this
 * from the other side — a negative control that forced a collapsed panel open
 * did nothing until it was given `!important`.
 */
[hidden] {
  display: none !important;
}

/*
 * Links. NOT a reproduction of Reboot, deliberately.
 *
 * Bootstrap coloured every unstyled anchor `#0d6efd`, which measures **4.35:1 on
 * the reading ground — a WCAG 2.2 AA failure** for body text, and the browser
 * default `#0000EE` is not a designed colour either. DESIGN.md § Colors settles
 * it twice over: green is the only brand/action accent, and blue is reserved for
 * informational and translation state ALONE. A link is an action.
 *
 * `--c-green` measures 8.92:1 on the ground. Dropping Bootstrap therefore fixes
 * the contrast failure rather than merely relocating it.
 *
 * This governs anchors no component rule has claimed. Every `v2-` component that
 * styles its own links still wins on specificity.
 */
a {
  color: var(--c-green);
  text-decoration: underline;
}

/*
 * Also NOT reproduced: `h1..h6 { font-weight: 500 }`.
 *
 * That is Bootstrap's typographic opinion, not a reset — the browser default is
 * 700 and `DESIGN.md` § Typography owns heading weight. Exactly one heading in
 * the whole app was relying on it, and it now carries its own rule in
 * `shell.css` beside the other headings rather than inheriting a number from a
 * stylesheet this project no longer ships.
 */