/* FPL-001/REQ-053 — a layer component keeps its own font, colour, line height and borders inside a legacy page; FPL-001/REQ-058 — and inside a HOST page that marks itself `.layer-host` (the desktop Tracker's <body>), whose own
   global stylesheets (bootstrap, MudBlazor unscoped, Radzen) reach into the layer exactly as the legacy ones do. Every selector below starts at `:is(.legacy-scope, .layer-host)`; where this sheet says `.legacy-scope`, the host marker is meant too.
   WHY: the legacy stylesheets (css/legacy/mudblazor.scoped.css, loaded BEFORE the layer's) reach into every layer component placed under `.legacy-scope` (a drawer opened from a legacy page, a panel embedded in one) through three rules:
     :where(.legacy-scope), :where(.legacy-scope) *   { margin: 0; padding: 0; border-width: 0; border-style: solid }   specificity 0, every element
     .legacy-scope                                    { color; font-family; line-height; letter-spacing }  the legacy body, inherited
     .legacy-scope input, button, select, optgroup, textarea { font-family: inherit; font-size: inherit; line-height: inherit }   specificity (0,1,1)
   WHAT THIS FILE DOES: gives the layer's elements back what they compute on a layer page, and nothing else. EVERY selector starts at `.legacy-scope`, so a layer page — which has no `.legacy-scope` above it — cannot be touched
   by construction (FR-5; Frontend.Test/Ui/LayerInLegacyStylesheetTests pins it). Nothing here edits a legacy file: the legacy sheets stay byte-for-byte as they are.
   SPECIFICITY IS CHOSEN, NOT HOPED FOR: rules 1 and 2 are wrapped in :where() — specificity ZERO — so any rule of a component's own always wins, and they beat the legacy zero-specificity rule only by ORDER (this sheet is linked after the legacy sheets and
   after the scoped bundle; Frontend.Test pins that order). Rule 3 ties the legacy (0,1,1) rule and wins by the same order, yet stays below a component's own scoped (0,2,0) rule.
   LEGACY ISLANDS: content inside `.ui-legacy-island` looks legacy by design (DEC-025) and is excluded from every rule.
   THE PROOF: node tools/layer-in-legacy-check/check.mjs — claude-docs/UI-LAYER.md "A layer component inside a legacy page". */

/* 1. The inherited four (font, line height, colour and letter-spacing — the legacy body's 0.15px made every layer text ~2% wider), put back at the OUTERMOST layer element of each component (a descendant that inherits — a primary button's white label — is untouched). */
:where(:is(.legacy-scope, .layer-host) :is([class^="ui-"], [class*=" ui-"]):not(:is(.legacy-scope, .layer-host) :is([class^="ui-"], [class*=" ui-"]) :is([class^="ui-"], [class*=" ui-"])):not(.ui-legacy-island)) {
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  color: var(--text);
  letter-spacing: normal;
}

/* 2. Borders, margin and padding (the legacy reset also zeroes margin and padding: a native <dialog>'s `margin: auto` — what centres it — became 0 and it sat top-left; paragraphs, lists, buttons and table cells lost theirs): every element inside a layer component goes back to what the user agent gives it (`revert`) — exactly what it computes on a layer page when no component rule sets a border. */
:where(:is(.legacy-scope, .layer-host) :is([class^="ui-"], [class*=" ui-"]):not(.ui-legacy-island, .ui-legacy-island *),
       :is(.legacy-scope, .layer-host) :is([class^="ui-"], [class*=" ui-"]):not(.ui-legacy-island) *:not(.ui-legacy-island, .ui-legacy-island *)) {
  border-width: revert;
  border-style: revert;
  margin: revert;
  padding: revert;
}

/* 3. Form controls inside a layer component (never inside a LegacyIsland — its MudBlazor buttons and fields keep their legacy look): the legacy `font-family: inherit; line-height: inherit` (and its border and colour resets) go back to what the control computes on a layer page. */
:is(.legacy-scope, .layer-host) :is(input, button, select, optgroup, textarea):where([class^="ui-"], [class*=" ui-"]):where(:not(.ui-legacy-island *)),
:is(.legacy-scope, .layer-host) :where([class^="ui-"], [class*=" ui-"]) :is(input, button, select, optgroup, textarea):where(:not(.ui-legacy-island *)) {
  font-family: revert;
  font-size: revert;
  line-height: revert;
  color: revert;
  border-width: revert;
  border-style: revert;
  margin: revert;
  padding: revert;
}

/* 4. The Fluent suppliers' hosts: their `--border-w` (1px) border is a `:host` rule inside the shadow tree, and any OUTER rule beats `:host` — so the legacy zero-specificity reset wins over it and `revert` (rule 2) would only keep it at zero.
   State it again, for the legacy scope only. (Colour is untouched: the host's own.) */
:is(.legacy-scope, .layer-host) :is(fluent-button, fluent-message-bar):where(:not(.ui-legacy-island *)) {
  border-width: var(--border-w);
  border-style: solid;
}

/* 4b. What `revert` cannot give back, put back by value at ZERO specificity (a component's own rule still wins): (a) the Fluent hosts' padding and the message bar's icon gap are `:host` / `::slotted` rules inside the shadow tree, which any OUTER rule — the legacy `padding: 0` reset, and rule 2's `revert` — beats;
   (b) a table cell's `padding: 1px` is the user agent's cellpadding presentational hint, which `revert` does not restore. */
:where(:is(.legacy-scope, .layer-host) fluent-button:not(.ui-legacy-island *)) { padding: 0 var(--space-12); }
:where(:is(.legacy-scope, .layer-host) fluent-button[size="small"]:not(.ui-legacy-island *)) { padding: 0 var(--space-8); }
:where(:is(.legacy-scope, .layer-host) fluent-message-bar > [slot="icon"]:not(.ui-legacy-island *)) { margin-inline-end: var(--space-8); }
:where(:is(.legacy-scope, .layer-host) :is([class^="ui-"], [class*=" ui-"]):not(.ui-legacy-island, .ui-legacy-island *) :is(td, th):not(.ui-legacy-island *)) { padding: var(--border-w); }

/* 5. Roots whose own rule is `font: inherit` read their font from the AMBIENT — which inside a legacy page is the legacy body. Today: StatTile (its stylesheet says so). A component added later that does the same is named by the check. */
:is(.legacy-scope, .layer-host) .ui-tile {
  font-family: var(--font-sans);
  line-height: var(--lh-body);
}