/*
 * BrickDb base layer - LEGACY, TEMPORARY (phase 7 deletes it; LegacyStylesheetManifest)
 * ----------------------------------------------------------------------------
 * Consumes bd-compat.css. Body defaults, the type scale applied to headings/body
 * text, link/focus styles, shared utility classes, and the old reset restored for
 * legacy markup only (see "The old reset" below).
 * Sora (display) and Manrope (body) are declared in Styles/aiero/global/_fonts.scss
 * and arrive via css/aiero/site.css; their fallback stacks live in the --font-* tokens.
 * Both are SELF-HOSTED from ../fonts/, never from Google Fonts: a CDN @import makes the visitor's browser hand its IP
 * address, User-Agent and Referer to a third party before any consent, which is
 * the fact pattern LG München I, 3 O 17493/20 awarded damages for. The privacy
 * policy claims in as many words that the page contacts no third-party server,
 * so this file may never reference an external host again. Guard:
 * BrickDb.App.Shared.Tests.ExternalAssetReferenceTests.
 *
 * Author at 360px; every override below 905px uses min-width only (design-
 * system.md §1.1 / §4).
 * ----------------------------------------------------------------------------
 */

/* ================= Self-hosted web fonts =================
   Sora and Manrope are declared in Styles/aiero/global/_fonts.scss and arrive via
   css/aiero/site.css, which both heads load before this sheet. */

/* ================= The old reset, for legacy markup only =================
   reset.css went when this layer moved to css/legacy/. Since then css/aiero/site.css
   (Bootstrap's reboot plus the template's reset and typography) styles bare elements
   everywhere: headings and lists gain bottom margins, headings negative tracking and
   their own colour, lists markers, indents and 10px item gaps, `body a` takes link
   colour and underline away, buttons keep the engine's chrome, fieldsets a border,
   legends a float. Unmigrated pages were written against the reset below, so it is
   restored here.

   Scope: `#main-content`, the page outlet, and nothing else - the template's header,
   side menu, bottom bar and footer are all outside it, so the new chrome keeps the
   template's look.
   Weight: `body` + one type selector, i.e. exactly one type selector above site.css's
   element rules and loaded after them, and still below any class - a legacy .bd-* rule
   overrides it exactly as it overrode the old reset. Anchors (the link rule further
   down) take `html body`, because the template's `ul li a` / `ol li a` carry three. */
body :where(#main-content) :is(h1, h2, h3, h4, h5, h6, p, address, pre, blockquote, figure, menu, ol, ul, li, dl, dt, dd, table, hr, fieldset, legend) {
  margin: 0;
}

body :where(#main-content) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  letter-spacing: normal;
  word-break: normal;
  text-wrap: balance;
}

body :where(#main-content) p {
  text-wrap: pretty;
}

body :where(#main-content) :is(ul, ol) {
  list-style: none;
  padding-left: 40px;
}

body :where(#main-content) :is(li, dt, code) {
  color: inherit;
}

body :where(#main-content) li {
  position: static;
}

body :where(#main-content) :is(img, picture, video, canvas, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

body :where(#main-content) :is(img, video) {
  object-fit: cover;
}

body :where(#main-content) :is(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  max-width: 100%;
}

body :where(#main-content) button {
  background: none;
  border: none;
  text-align: inherit;
}

body :where(#main-content) fieldset {
  border: none;
  padding: 0;
  min-width: min-content;
}

body :where(#main-content) legend {
  float: none;
  width: auto;
  font-size: inherit;
}

body :where(#main-content) :is(td, th) {
  border: 0;
  padding: 1px;
}

body :where(#main-content) th {
  font-weight: bold;
}

/* Not scoped, because they never were and the template ships neither: no text
   inflation on a rotated phone, and the reduced-motion safety net. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= Responsive type-scale overrides =================
   The four display steps clamp in bd-compat.css and are deliberately absent here: a
   media re-declaration replaces a clamp rather than softening it, so the fluid value
   would never be read above 905px. What remains is the three pairs that genuinely
   step - and body's LINE-HEIGHT only, never its size (typography.md §3.1). Its source
   and browser guards both went with the old look (AIERO spec §3). */
@media (min-width: 905px) {
  :root {
    --bd-type-body-lg-size: 1.125rem;     /* 18px */
    --bd-type-body-lg-line: 1.625rem;     /* 26px */
    --bd-type-body-line: 1.5rem;          /* 24px, at an unmoved 16px size */
    --bd-type-caption-size: 0.8125rem;    /* 13px */
    --bd-type-caption-line: 1.125rem;     /* 18px */
    /* body-sm and label are fixed across all breakpoints per §3.1. */
  }
}

/* ================= Body defaults ================= */
/* --bd-color-backdrop was the glass redesign's mesh; bd-compat.css now flattens it to
   the template's page surface, so this paints the same ground the new chrome sits on. */
body {
  background: var(--bd-color-backdrop);
  background-color: var(--bd-color-surface); /* fallback: engines without gradient layering still get the flat colour */
  color: var(--bd-color-on-surface);
  font-family: var(--bd-font-body);
  font-size: var(--bd-type-body-size);
  line-height: var(--bd-type-body-line);
  font-weight: 400;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ================= Heading / text type scale =================
   The design-system doc scopes its named type tokens to specific components
   (TopBar title, SetCard title, etc.) rather than to h1-h6 directly. This is
   the extension needed to give running document content (notes, help text,
   about screens) a sane heading hierarchy built from the same tokens — see
   the report. h1/h2/h3 map onto display/headline/title as the doc's closest
   "screen-level header" / "section header" / "card & sheet title" tiers;
   h4-h6 step down through the body tiers at 600 weight since the scale has
   no dedicated sub-title tokens. */
h1,
.bd-display {
  font-family: var(--bd-font-display);
  font-weight: 700;
  font-size: var(--bd-type-display-size);
  line-height: var(--bd-type-display-line);
}

h2,
.bd-headline {
  font-family: var(--bd-font-display);
  font-weight: 600;
  font-size: var(--bd-type-headline-size);
  line-height: var(--bd-type-headline-line);
}

h3,
.bd-title {
  font-family: var(--bd-font-display);
  font-weight: 600;
  font-size: var(--bd-type-title-size);
  line-height: var(--bd-type-title-line);
}

h4 {
  font-family: var(--bd-font-body);
  font-weight: 600;
  font-size: var(--bd-type-body-lg-size);
  line-height: var(--bd-type-body-lg-line);
}

h5 {
  font-family: var(--bd-font-body);
  font-weight: 600;
  font-size: var(--bd-type-body-size);
  line-height: var(--bd-type-body-line);
}

h6 {
  font-family: var(--bd-font-body);
  font-weight: 600;
  font-size: var(--bd-type-body-sm-size);
  line-height: var(--bd-type-body-sm-line);
}

p,
.bd-body {
  font-family: var(--bd-font-body);
  font-weight: 400;
  font-size: var(--bd-type-body-size);
  line-height: var(--bd-type-body-line);
}

.bd-body-lg {
  font-family: var(--bd-font-body);
  font-weight: 400;
  font-size: var(--bd-type-body-lg-size);
  line-height: var(--bd-type-body-lg-line);
}

.bd-body-sm {
  font-family: var(--bd-font-body);
  font-weight: 500;
  font-size: var(--bd-type-body-sm-size);
  line-height: var(--bd-type-body-sm-line);
}

/* Uppercase labels get tracking — used by ConditionBadge text, chips, small
   buttons. Never used for anything below 12px per §3. */
.bd-label {
  font-family: var(--bd-font-body);
  font-weight: 600;
  font-size: var(--bd-type-label-size);
  line-height: var(--bd-type-label-line);
  letter-spacing: var(--bd-type-label-tracking);
  text-transform: uppercase;
}

.bd-caption {
  font-family: var(--bd-font-body);
  font-weight: 400;
  font-size: var(--bd-type-caption-size);
  line-height: var(--bd-type-caption-line);
  color: var(--bd-color-muted);
}

/* Running text (notes, help copy, long-form reading) stays near 65 characters
   measure regardless of the surface it sits in. */
p,
.bd-body,
.bd-body-lg,
.bd-measure {
  max-width: 65ch;
}

/* ================= Links =================
   The doc doesn't name a dedicated "link" role in its token table (§2.2);
   rather than invent a new --bd-color-* token, links reuse the existing
   primary-dark / primary-light tokens, which already carry the contrast
   properties needed (primary-dark is the "pressed/active" darkening of
   primary; primary-light is explicitly the dark-theme accent value) and
   resolve per theme with the same three-state pattern as bd-compat.css. The resting
   rule carries the old reset's scope and the weight that beats the template's
   `ul li a` (see "The old reset" above); hover, active and the dark rules already
   outrank it. */
html body :where(#main-content) a {
  color: var(--bd-color-primary-dark);
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.15em;
  transition: color var(--bd-duration-short) var(--bd-ease-standard);
}

a:hover {
  color: var(--bd-color-primary);
}

a:active {
  color: var(--bd-color-primary-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a {
    color: var(--bd-color-primary-light);
  }
}

:root[data-theme="dark"] a {
  color: var(--bd-color-primary-light);
}

/* ================= Focus visibility =================
   Every focusable element gets a clearly visible 3px outline in the theme's
   focus-ring token with a 2px offset, in addition to (not instead of) any
   platform-native focus indication. Never outline: none without this. */
:focus-visible {
  outline: 3px solid var(--bd-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--bd-radius-sm);
}

/* An automatic, script-driven focus a user did not initiate — RouteHeadingFocus announcing a
   client-side route change to assistive tech (issue #495) — must not paint a ring. Scoped to the
   marker attribute, not to the element or the pseudo-class alone, so a GENUINE keyboard/user focus
   of the same element (the skip link landing on #main-content is one) still gets the ring the rule above draws for
   everything else. */
[data-auto-focused]:focus-visible {
  outline: none;
}

/* Engines without :focus-visible support (older embedded WebViews) fall back
   to :focus so focus is never invisible. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--bd-color-focus-ring);
    outline-offset: 2px;
  }
}

/* ================= Utilities ================= */

/* Visually hides content while keeping it available to assistive tech — used
   alongside icon-only chips so a full-word description always exists in the
   accessibility tree even when an aria-label attribute is also present. */
.bd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flex row/column helpers keyed to the spacing scale, used throughout
   components.css instead of ad hoc margins. */
.bd-stack {
  display: flex;
  flex-direction: column;
}

.bd-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bd-gap-1 { gap: var(--bd-space-1); }
.bd-gap-2 { gap: var(--bd-space-2); }
.bd-gap-3 { gap: var(--bd-space-3); }
.bd-gap-4 { gap: var(--bd-space-4); }
.bd-gap-5 { gap: var(--bd-space-5); }
.bd-gap-6 { gap: var(--bd-space-6); }