/* ==========================================================================
   main.css — layout and components of the hub. Speaks only in tokens.

   THE GUIDE (redesign 24.09.2026, docs/superpowers/specs/2026-09-24-hub-
   redesign-design.md). Photographs carry the first screen of every page and
   every tile; one grotesque sets everything; every number still wears its
   document — a dot beside it in the edition, the full line in brief mode and
   in print. Two modes share this sheet — `full` and `brief` — and two themes;
   both are attributes on <html>, set by JS only, so the resting state of
   every page is the light edition, whole and readable.

   TRAP — there is no `opacity: 0` anywhere in this file, and there must never
   be one. Hidden-until-scrolled states are position only, armed by a class
   JS attaches at runtime (Л31).

   TRAP — LOGICAL properties only: Arabic mirrors by dir="rtl" alone.

   TRAP — a DECOR ONLY token never appears in a `color:` declaration
   (palette.py scans this file); it paints through background, border,
   stroke and fill.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* TRAP — without this rule the `hidden` attribute loses to any class that sets
   `display`: the consent banner's panel stayed open that way — 298 px of 844
   on a phone. Every state a script sets by attribute must beat CSS. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: 5rem; }

body {
  margin: 0;
  background: var(--ua-paper);
  color: var(--ua-ink);
  font-family: var(--ua-font-text);
  font-size: var(--ua-step-0);
  line-height: var(--ua-lead);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "calt";
}

img, svg, picture { max-width: 100%; height: auto; display: block; }

a { color: var(--ua-accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ua-accent); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--ua-font-display);
  font-weight: var(--ua-weight-display);
  letter-spacing: var(--ua-track-display);
  line-height: var(--ua-lead-display);
  margin: 0 0 0.45em;
  text-wrap: balance;
  /* A German compound in a 320 px column is wider than the column (24.09):
     it hyphenates by the page's lang, and breaks where it cannot. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: var(--ua-step-4); }
h2 { font-size: var(--ua-step-3); }
h3 { font-size: var(--ua-step-1); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 1em; max-width: var(--ua-measure); }
strong { font-weight: 600; }

/* The eyebrow names the section, it does not count it (Л29). */
.ua-eyebrow {
  font-size: var(--ua-step-mono); font-weight: 600;
  letter-spacing: var(--ua-track-label); text-transform: uppercase;
  color: var(--ua-accent); margin: 0 0 0.75rem;
}

/* The authored one-line summary of a section: the lede in full mode, the
   first (often only) line in brief. Present in both — never generated. */
.ua-brief { font-size: var(--ua-step-1); color: var(--ua-ink-soft); max-width: 46ch; margin-block-end: 1.5rem; text-wrap: pretty; line-height: 1.5; }

/* -------------------------------------------------------------- skeleton */

.ua-shell { display: flow-root; }
.ua-wrap { width: min(100% - 2 * var(--ua-gap), var(--ua-page)); margin-inline: auto; }
.ua-section { padding-block: var(--ua-section); position: relative; }
.ua-section--sand { background: var(--ua-sand); }
.ua-section--card { background: var(--ua-card); border-block: 1px solid var(--ua-rule); }
.ua-skip { position: absolute; inset-inline-start: -9999px; background: var(--ua-card); color: var(--ua-ink); padding: 0.6rem 1rem; }
.ua-skip:focus { inset-inline-start: 0; z-index: 60; }

.ua-grid { display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.ua-grid > * { min-inline-size: 0; }
@media (min-width: 861px) {
  .ua-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ua-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ua-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* A section's head: the words on one side, «all of them →» on the other. */
.ua-sechead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.5rem 2rem; margin-block-end: 0.5rem; }
.ua-sechead .ua-brief { margin-block-end: 1.25rem; }
.ua-more { font-weight: 600; text-decoration: none; white-space: nowrap; margin-block-end: 1.25rem; }
.ua-more::after { content: " \2192"; }
.ua-more:hover { text-decoration: underline; }
.ua-sec-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.75rem 0 0; max-width: none; }
.ua-sec-ask .ua-more { margin: 0; }

/* ---------------------------------------------------------------- header */

.ua-head { position: sticky; top: 0; z-index: 40; background: var(--ua-paper); border-block-end: 1px solid var(--ua-rule); }
.ua-head__bar { display: flex; align-items: center; gap: var(--ua-gap); min-block-size: 4rem; }
.ua-head__mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ua-ink); min-inline-size: 0; flex: none; margin-inline-end: 0.5rem; }
.ua-head__mark svg { inline-size: 24px; block-size: 24px; flex: none; }
.ua-head__word { font-weight: 650; letter-spacing: -0.015em; font-size: 1.1rem; white-space: nowrap; }
/* Links start at the wordmark on every page; pushed right, they jumped with
   the language switch (25.09). */
.ua-nav { display: flex; align-items: center; flex: 1; min-inline-size: 0; }
.ua-nav__list { display: flex; flex: 1; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.4rem); list-style: none; margin: 0; padding: 0; }
.ua-nav__list a { color: var(--ua-ink); text-decoration: none; font-size: var(--ua-step-small); font-weight: 500; }
.ua-nav__list a:hover { color: var(--ua-accent); }
.ua-nav__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 2px; text-decoration-color: var(--ua-brass); }
.ua-nav__lang { padding-inline-start: clamp(0.75rem, 1.6vw, 1.25rem); border-inline-start: 1px solid var(--ua-rule); }
.ua-nav__lang:has(.ua-lang:empty) { display: none; }
/* The two toggles are built by the script that backs them (Л31) — icons,
   their names in aria-label and title; the short word stays for readers. */
.ua-nav__tools { display: flex; gap: 0.3rem; margin-inline-start: auto; padding-inline-start: clamp(0.75rem, 1.6vw, 1.25rem); border-inline-start: 1px solid var(--ua-rule); }
.ua-nav__tools:has(> [hidden]:first-child + [hidden]) { display: none; }
.ua-tool {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem;
  background: none; border: 1px solid var(--ua-rule); border-radius: 50%; color: var(--ua-ink); cursor: pointer; padding: 0;
}
.ua-tool svg { inline-size: 16px; block-size: 16px; }
.ua-tool span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ua-tool[aria-pressed="true"] { background: var(--ua-ink); color: var(--ua-paper); border-color: var(--ua-ink); }
.ua-btn.ua-head__cta { display: none; }
.ua-burger { display: none; }

@media (min-width: 1200px) {
  .ua-btn.ua-head__cta { display: inline-flex; padding: 0.6rem 1rem; font-size: var(--ua-step-small); white-space: nowrap; flex: none; }
}
@media (min-width: 861px) and (max-width: 1199px) {
  .ua-nav__list a { font-size: 0.875rem; }
  .ua-nav__list { gap: 0.7rem; }
}
@media (max-width: 860px) {
  .ua-head__word { font-size: var(--ua-step-0); white-space: normal; }
  .ua-burger {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-inline-start: auto;
    background: none; border: 1px solid var(--ua-rule); border-radius: var(--ua-radius);
    color: var(--ua-ink); font: inherit; font-weight: 500; padding: 0.5rem 0.9rem;
  }
  /* TRAP: collapsing the list is gated to the SAME breakpoint that shows the
     burger. Declared globally it hid the desktop navigation outright. */
  .ua-nav[data-ua-nav="closed"] .ua-nav__list { display: none; }
  .ua-nav[data-ua-nav="open"] .ua-nav__list {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    background: var(--ua-card); border-block-end: 1px solid var(--ua-rule);
    padding: var(--ua-gap); gap: 0.9rem;
  }
  .ua-nav[data-ua-nav="open"] .ua-nav__list a { font-size: var(--ua-step-1); }
  .ua-nav[data-ua-nav="open"] .ua-nav__tools,
  .ua-nav[data-ua-nav="open"] .ua-nav__lang {
    padding-inline-start: 0; border-inline-start: 0; margin-inline-start: 0;
    padding-block-start: var(--ua-gap); border-block-start: 1px solid var(--ua-rule);
  }
}

/* ------------------------------------------------------------------ hero */

/* First screen: the hero frame full width under a three-gradient veil
   (Л24), the words over it; no frame → deep ground and the motif. */
.ua-hero { position: relative; background: var(--ua-deep); color: var(--ua-on-deep); overflow: clip; isolation: isolate; }
.ua-hero > .ua-hero__bg { position: absolute; inset: 0; z-index: -1; margin: 0; border-radius: 0; background-color: var(--ua-deep); }
.ua-hero__bg picture, .ua-hero__bg img { inline-size: 100%; block-size: 100%; }
.ua-hero .ua-hero__bg img { aspect-ratio: auto; object-fit: cover; }
.ua-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14, 26, 24, 0.92) 0, rgba(14, 26, 24, 0.55) 22%, rgba(14, 26, 24, 0) 45%),
    linear-gradient(to right, rgba(14, 26, 24, 0.9) 0, rgba(14, 26, 24, 0.78) 38%, rgba(14, 26, 24, 0.3) 70%, rgba(14, 26, 24, 0.12) 100%),
    linear-gradient(to bottom, rgba(14, 26, 24, 0.5) 0, rgba(14, 26, 24, 0) 18%);
}
.ua-hero > .ua-hero__bg:empty { min-block-size: 0; background-position: right -8rem center; background-size: 34rem; }
.ua-hero__body {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  min-block-size: min(40rem, 82svh); padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) 1.75rem;
}
.ua-hero--home .ua-hero__body { min-block-size: min(44rem, 88svh); }
.ua-hero__text { max-inline-size: 44rem; }
.ua-hero h1 { color: var(--ua-on-deep); max-inline-size: 18ch; }
.ua-hero__lede { color: var(--ua-on-deep-soft); font-size: var(--ua-step-1); max-inline-size: 42ch; text-wrap: pretty; line-height: 1.5; }
.ua-hero .ua-eyebrow, .ua-hero .ua-eyebrow a { color: var(--ua-on-deep-lit); }
.ua-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-block: 1.75rem 0; }
/* The strip at the foot: the page's key figures and the day they were checked. */
.ua-hero__facts {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  margin: 0; padding: 1.1rem 0 0; list-style: none; border-block-start: 1px solid rgba(247, 244, 238, 0.28);
}
.ua-hero__key { display: block; font-size: var(--ua-step-mono); font-weight: 500; color: var(--ua-on-deep-soft); letter-spacing: 0.02em; margin-block-end: 0.15rem; }
.ua-hero__val { display: block; font-weight: 600; font-size: var(--ua-step-1); color: var(--ua-on-deep); letter-spacing: -0.01em; }
.ua-hero__val a, .ua-hero .ua-eyebrow a { color: inherit; text-decoration-color: var(--ua-on-deep-soft); }
/* The thank-you page keeps a ledger beside its words. */
.ua-hero__figure { position: relative; min-inline-size: 0; align-self: center; }
@media (max-width: 860px) {
  /* A phone shows the picture as a band and sets the words below it, on the
     ground: a veil dark enough for text over a portrait crop hid the photo. */
  /* The whole first screen fits the viewport: the facts strip is part of it. */
  .ua-hero > .ua-hero__bg { position: relative; inset: auto; z-index: 0; block-size: min(clamp(10rem, 40vw, 15rem), 24svh); }
  .ua-hero__bg::after { background: linear-gradient(to top, var(--ua-deep) 0, rgba(14, 26, 24, 0) 45%); }
  .ua-hero__body, .ua-hero--home .ua-hero__body { min-block-size: 0; gap: 1.5rem; padding-block: 1rem 1.25rem; }
  .ua-hero .ua-crumbs { margin-block-end: 0.75rem; }
  .ua-hero__actions { margin-block-start: 1.25rem; }
  /* One swipeable row: wrapped, four figures pushed the screen past the fold. */
  .ua-hero__facts { flex-wrap: nowrap; overflow-x: auto; gap: 1.5rem; padding-block: 0.9rem 0.25rem; scroll-snap-type: x proximity; scrollbar-width: none; }
  .ua-hero__facts > li { flex: none; max-inline-size: 13rem; scroll-snap-align: start; }
  .ua-hero > .ua-hero__bg:empty { display: none; }
  .ua-hero__bg:empty + .ua-hero__body { padding-block-start: 2rem; }
}

/* The load sequence: the lines rise. Armed by `ua-motion` (set by JS after
   its observers exist); the resting state is fully readable. */
.ua-motion .ua-hero [data-ua-rise] { transform: translateY(14px); transition: transform 640ms var(--ua-ease); transition-delay: calc(var(--ua-i, 0) * 90ms); }
.ua-motion .ua-hero [data-ua-rise].ua-in { transform: none; }

/* ----------------------------------------------------------------- tiles */

/* A page as a card: hero frame, label, name, one figure, description. The
   picture is a second, unfocusable link; the name is the real one. */
.ua-tiles { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.ua-tile { display: flex; flex-direction: column; min-inline-size: 0; background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg); overflow: clip; transition: box-shadow 240ms var(--ua-ease), transform 240ms var(--ua-ease); }
.ua-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(14, 26, 24, 0.35); }
.ua-tile__media { display: block; }
.ua-tile__media .ua-frame { display: block; border-radius: 0; }
.ua-tile__media img { aspect-ratio: 4 / 3; transition: transform 600ms var(--ua-ease); }
.ua-tile:hover .ua-tile__media img { transform: scale(1.035); }
.ua-tile__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.15rem 1.25rem; flex: 1; }
.ua-tile__meta { font-size: var(--ua-step-mono); font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-ink-soft); margin: 0; }
.ua-tile__title { font-size: var(--ua-step-1); font-weight: 620; margin: 0; }
.ua-tile__title a { color: var(--ua-ink); text-decoration: none; }
.ua-tile__title a:hover { color: var(--ua-accent); }
.ua-tile__fig { display: grid; gap: 0.1rem; margin: 0.4rem 0 0.2rem; }
.ua-tile__num { font-size: var(--ua-step-2); font-weight: 620; letter-spacing: -0.02em; line-height: 1.15; }
.ua-tile__cap, .ua-tile__text { font-size: var(--ua-step-small); color: var(--ua-ink-soft); line-height: 1.45; margin: 0; }
.ua-tile__cap { font-size: 0.8125rem; }
.ua-tiles--small .ua-tile__media img { aspect-ratio: 16 / 9; }
.ua-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.ua-tiles--wide .ua-tile__media img { aspect-ratio: 16 / 10; }
.ua-tiles--wide .ua-tile__title { font-size: var(--ua-step-2); }
@media (max-width: 600px) {
  /* A phone lists: the picture a thumbnail beside the words, not a card per screen. */
  .ua-tile { flex-direction: row; }
  .ua-tile__media { flex: 0 0 38%; }
  .ua-tile__media .ua-frame, .ua-tile__media picture { block-size: 100%; }
  .ua-tile__media img, .ua-tiles--small .ua-tile__media img { aspect-ratio: auto; block-size: 100%; min-block-size: 7.5rem; }
  .ua-tile__body { padding: 0.8rem 0.9rem; }
  .ua-tile__text { display: none; }
}

/* A row that closes a list: what is not in it, and the way to ask. */
.ua-aside-row { display: grid; gap: 1rem 2rem; align-items: center; margin-block-start: 1.5rem; padding: 1.25rem 1.5rem; background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg); }
@media (min-width: 861px) { .ua-aside-row { grid-template-columns: minmax(0, 1fr) auto; } }
.ua-aside-row__title { font-weight: 620; font-size: var(--ua-step-1); letter-spacing: -0.01em; margin: 0 0 0.25rem; }
.ua-aside-row p { color: var(--ua-ink-soft); margin: 0; }
.ua-aside-row .ua-aside-row__title { color: var(--ua-ink); }

/* The price bars: an area, its median, a bar scaled to the dearest shown. */
.ua-bars { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ua-bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: baseline; }
.ua-bars__name a { color: var(--ua-ink); font-weight: 600; text-decoration: none; }
.ua-bars__name a:hover { color: var(--ua-accent); }
.ua-bars__area { color: var(--ua-ink-soft); font-size: 0.8125rem; margin-inline-start: 0.4rem; }
.ua-bars__val { font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-bars__track { grid-column: 1 / -1; block-size: 0.45rem; background: var(--ua-mist); border-radius: 99px; overflow: clip; }
.ua-bars__fill { display: block; block-size: 100%; inline-size: var(--ua-w, 0%); background: var(--ua-accent); border-radius: inherit; }

/* A dark card that sends the reader to one tool. */
.ua-promo { background: var(--ua-deep); color: var(--ua-on-deep-soft); border-radius: var(--ua-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); background-image: var(--ua-motif); background-repeat: no-repeat; background-position: right -6rem bottom -6rem; background-size: 13rem; }
.ua-promo p { max-inline-size: 34ch; }
.ua-promo h3 { color: var(--ua-on-deep); font-size: var(--ua-step-2); font-weight: var(--ua-weight-display); letter-spacing: var(--ua-track-display); }

/* ------------------------------------------------------------------ plans */

/* An inline SVG drawn from OpenStreetMap geometry (tools/media/planshot.py),
   repainted through stroke/fill — never `color`, which palette.py reads.
   Names are laid out for 40 units, the largest size set here. */
.ua-plan { position: relative; margin: 0; min-inline-size: 0; }
.ua-plan svg { display: block; inline-size: 100%; block-size: auto; background: var(--ua-card); border-radius: var(--ua-radius-lg); }
.ua-plan path { vector-effect: non-scaling-stroke; }
.ua-plan [stroke="currentColor"] { stroke: var(--ua-brass); }
.ua-plan [fill="currentColor"] { fill: var(--ua-brass); }
.ua-plan .ua-plan__sea, .ua-plan__mark circle { fill: var(--ua-accent); }
.ua-plan__mark polygon { fill: var(--ua-card); }
.ua-plan text { fill: var(--ua-ink); font-family: var(--ua-font-text); font-size: clamp(22px, 54px - 4vw, 40px); stroke: var(--ua-card); stroke-width: 8px; stroke-linejoin: round; paint-order: stroke; }
@media (min-width: 861px) { .ua-plan text { font-size: clamp(20px, 44px - 1.5vw, 30px); } }
.ua-plan__slot:empty + .ua-plan__credit { display: none; }
.ua-plan__credit { font-size: 0.8125rem; color: var(--ua-ink-soft); margin-block-start: 0.5rem; max-width: none; }
.ua-plan__slot:empty { display: block; min-block-size: 14rem; background: var(--ua-mist); border-radius: var(--ua-radius-lg); background-image: var(--ua-motif); background-repeat: no-repeat; background-position: center; background-size: 12rem; }

/* ---------------------------------------------------------------- frames */

/* A photograph or the developer's own render (core/frames.py): the `<picture>`
   fills its figure, cropped on the focus the manifest names. No frame → the
   motif, once, as the honest placeholder (Л24, Л25). */
.ua-frame { position: relative; margin: 0; min-inline-size: 0; overflow: clip; border-radius: var(--ua-radius-lg); background: var(--ua-mist); }
.ua-frame picture { display: block; }
.ua-frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--ua-focus, 50% 50%); aspect-ratio: 4 / 3; }
.ua-frame:empty { min-block-size: 14rem; background-image: var(--ua-motif); background-repeat: no-repeat; background-position: center; background-size: 12rem; }
.ua-tile .ua-frame:empty { min-block-size: 11rem; background-color: var(--ua-deep); background-size: 8rem; }
/* The Л26 label a generated frame wears: printed ON the picture. */
.ua-frame__note { position: absolute; inset-block-end: 0.6rem; inset-inline-start: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-on-deep); background: var(--ua-deep); padding: 0.25rem 0.5rem; border-radius: 4px; }

/* --------------------------------------------------------------- the trail */

.ua-crumbs { font-size: 0.8125rem; font-weight: 500; color: var(--ua-on-deep-soft); margin-block-end: 1.25rem; }
.ua-crumbs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.ua-crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; opacity: 0.6; }
.ua-crumbs a { color: inherit; text-decoration: none; }
.ua-crumbs a:hover { color: var(--ua-on-deep); }
.ua-crumbs [aria-current] { color: var(--ua-on-deep); }

/* ---------------------------------------------------------------- ledgers */

/* One row per fact: label · value · its document. Reused as the release
   ledger, the developer time-line and — with a dash for a value — the list
   of what is unpublished. */
.ua-ledger { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--ua-ink); overflow-wrap: anywhere; }
.ua-ledger__row { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: 0.25rem 1.5rem; padding-block: 0.95rem; border-block-end: 1px solid var(--ua-rule); align-items: baseline; }
.ua-ledger__label { overflow-wrap: break-word; font-size: var(--ua-step-small); font-weight: 500; color: var(--ua-ink-soft); }
.ua-ledger__value { font-weight: 620; font-size: var(--ua-step-index); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ua-ledger__value, .ua-fact { overflow-wrap: anywhere; }
.ua-ledger__note { grid-column: 2; font-size: var(--ua-step-small); color: var(--ua-ink-soft); margin: 0.2rem 0 0; max-width: none; line-height: 1.5; }
.ua-ledger--time .ua-ledger__row { grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr); }
.ua-ledger--time .ua-ledger__label { font-weight: 620; font-size: var(--ua-step-1); color: var(--ua-ink); letter-spacing: -0.01em; }
.ua-ledger--time .ua-ledger__value { font-weight: 400; font-size: var(--ua-step-0); letter-spacing: 0; line-height: var(--ua-lead); }
/* A ledger whose values are sentences, not figures: the text size, or a
   paragraph would be set as a headline. */
.ua-ledger--text .ua-ledger__value { font-weight: 600; font-size: var(--ua-step-1); line-height: 1.35; letter-spacing: -0.01em; }
/* TRAP: stays BELOW the rules it overrides — above them, `grid-column: 2`
   brought the second column back and labels shrank to a letter (23.09). */
@media (max-width: 600px) {
  .ua-ledger__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .ua-ledger__note { grid-column: 1; }
  .ua-ledger--time .ua-ledger__row { grid-template-columns: 4rem minmax(0, 1fr); }
  .ua-ledger__value { font-size: var(--ua-step-2); }
}
.ua-hero .ua-ledger { border-block-start-color: var(--ua-on-deep-soft); }
.ua-hero .ua-ledger__row { border-block-end-color: var(--ua-rule-night); }
.ua-hero .ua-ledger__label { color: var(--ua-on-deep-soft); }

/* What has not been published: a dash where the value would be, the day we
   looked, and why it does not exist — a compact panel, never a filler line. */
.ua-unpub { background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg); padding: 0.25rem 1.25rem; }
.ua-unpub.ua-ledger { border-block-start: 1px solid var(--ua-rule); }
.ua-unpub .ua-ledger__row { grid-template-columns: minmax(9rem, 13rem) auto minmax(0, 1fr); padding-block: 0.8rem; }
.ua-unpub .ua-ledger__row:last-child { border-block-end: 0; }
.ua-unpub__dash { font-size: var(--ua-step-1); font-weight: 600; line-height: 1; color: var(--ua-warm); }
.ua-unpub__why { font-size: var(--ua-step-small); color: var(--ua-ink-soft); margin: 0; max-width: none; }
.ua-unpub__checked { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--ua-ink-soft); margin: 0; max-width: none; }
@media (max-width: 600px) {
  .ua-unpub .ua-ledger__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ua-unpub__why { grid-column: 1 / -1; }
}

/* Costs, as a printed table: what · rate · who pays · the document. */
.ua-costs { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ua-costs th, .ua-costs td { text-align: start; padding: 0.75rem 0.85rem; border-block-end: 1px solid var(--ua-rule); vertical-align: top; }
.ua-costs thead th { font-size: var(--ua-step-mono); font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-ink-soft); border-block-end: 1px solid var(--ua-ink); }
.ua-costs td:first-child { font-weight: 600; }
.ua-costs tbody tr:hover { background: var(--ua-sand); }
.ua-costs--data :is(td, thead th + th) { text-align: end; white-space: nowrap; }
.ua-costs--data caption { caption-side: bottom; text-align: start; padding-block-start: 0.75rem; font-size: var(--ua-step-small); color: var(--ua-ink-soft); }
.ua-scroll { overflow-x: auto; }

/* ------------------------------------------------------- provenance marks */

/* Every full-form fact: the value, then its document's short name — a dot
   in the edition (filled: a document; ring: attributed), the full line in the
   tooltip, the words kept for screen readers and written out in brief/print. */
.ua-fact { white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: underline dotted var(--ua-brass); text-decoration-thickness: 1px; text-underline-offset: 0.22em; cursor: help; }
.ua-fact:hover, .ua-fact:focus-visible { text-decoration-style: solid; }
.ua-fact__src { display: inline-block; inline-size: 0.36rem; block-size: 0.36rem; margin-inline-start: 0.12rem; vertical-align: super; border-radius: 50%; background: var(--ua-brass); font-size: 0; overflow: hidden; }
.ua-fact--attr .ua-fact__src { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ua-brass); }
.ua-tip { position: absolute; z-index: 70; max-inline-size: min(28rem, calc(100vw - 2 * var(--ua-gap))); background: var(--ua-card); color: var(--ua-ink); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius); box-shadow: 0 12px 30px -12px rgba(14, 26, 24, 0.3); padding: 0.7rem 0.9rem; font-size: var(--ua-step-small); line-height: 1.45; }
.ua-tip__meta { display: block; font-size: 0.8125rem; color: var(--ua-ink-soft); margin-block-start: 0.35rem; }

/* --------------------------------------------------------------- content */

.ua-card { background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.ua-card p:last-child { margin-block-end: 0; }
.ua-own-site { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--ua-rule); font-size: var(--ua-step-small); }
.ua-own-site a { color: var(--ua-accent); font-weight: 600; }
/* Hairline rows: documents, projects in a place, consents. */
.ua-rows { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--ua-ink); }
.ua-rows__row { display: grid; gap: 0.4rem 1.5rem; padding-block: 1.1rem; border-block-end: 1px solid var(--ua-rule); align-items: start; }
@media (min-width: 861px) { .ua-rows__row { grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto; } }
.ua-rows__label { font-size: var(--ua-step-mono); font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-ink-soft); padding-block-start: 0.3em; }
.ua-rows__title { font-weight: 620; font-size: var(--ua-step-1); line-height: 1.3; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.ua-rows__title a { color: inherit; text-decoration: none; }
.ua-rows__title a:hover { color: var(--ua-accent); }
.ua-rows__row p { margin: 0; max-width: 62ch; color: var(--ua-ink-soft); }
.ua-rows__action { align-self: center; }
.ua-figure { position: relative; margin: 0; min-inline-size: 0; }
/* A side column holding a frame over a ledger: one grid item, no min-width. */
.ua-side { min-inline-size: 0; display: grid; gap: 1.5rem; align-content: start; }
.ua-figure__note { font-size: var(--ua-step-small); color: var(--ua-ink-soft); margin-block-start: 0.6rem; }

/* ------------------------------------------------- prices (build-generated) */

.ua-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ua-price { display: grid; gap: 0.15rem 1rem; padding: 1rem 1.15rem; background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius); }
@media (min-width: 861px) { .ua-price { grid-template-columns: 1fr auto; align-items: baseline; } }
.ua-price__label { font-size: var(--ua-step-1); font-weight: 600; }
.ua-price__aed { font-size: var(--ua-step-1); font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-price__conv, .ua-price__src { grid-column: 1 / -1; font-size: var(--ua-step-small); color: var(--ua-ink-soft); }
.ua-legal-slot:empty { display: none; }

/* ---------------------------------------------- off-plan legal (generated) */

.ua-legal {
  margin-block: var(--ua-section) 0; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg);
  font-size: var(--ua-step-small); color: var(--ua-ink); display: grid; gap: 0.5rem;
}
.ua-legal__row { display: grid; gap: 0.15rem 1.5rem; }
@media (min-width: 861px) { .ua-legal__row { grid-template-columns: 15rem minmax(0, 1fr); } }
.ua-legal__key { color: var(--ua-ink-soft); font-weight: 500; }
.ua-legal__val { color: var(--ua-ink); }

/* -------------------------------------------------------------- lead form */

.ua-form { display: grid; gap: 1rem; max-inline-size: 34rem; }
.ua-email, .ua-prefs { display: grid; gap: 1rem; max-inline-size: 34rem; margin-block-start: 1.5rem; }
.ua-prefs { gap: 0.75rem; }
.ua-prefs__title { font-weight: 600; }
.ua-prefs__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ua-btn[aria-pressed="true"] { background: var(--ua-deep); color: var(--ua-on-deep); border-color: var(--ua-deep); }
.ua-field { display: grid; gap: 0.35rem; }
.ua-field__label { font-size: var(--ua-step-small); font-weight: 500; color: var(--ua-ink); }
.ua-field__req { color: var(--ua-warm); }
.ua-field input { font: inherit; color: var(--ua-ink); background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius); padding: 0.85rem 1rem; inline-size: 100%; transition: border-color 160ms var(--ua-ease); }
.ua-field input:focus { border-color: var(--ua-accent); }
.ua-field input[aria-invalid="true"] { border-color: var(--ua-warm); }
.ua-field__hint { font-size: var(--ua-step-small); color: var(--ua-ink-soft); }
.ua-field__error { font-size: var(--ua-step-small); color: var(--ua-warm); min-block-size: 1.2em; }
.ua-calc { display: grid; gap: 1rem; margin-block: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg); }
.ua-calc fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.ua-calc__opt { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.ua-calc__opt label { display: flex; gap: 0.4rem; align-items: center; }
.ua-calc__opt input { inline-size: auto; padding: 0; }
.ua-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--ua-step-small); color: var(--ua-ink); }
.ua-consent input { margin-block-start: 0.25rem; inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--ua-accent); }

.ua-btn {
  font: inherit; font-weight: 600; letter-spacing: 0;
  border: 1px solid var(--ua-deep); border-radius: var(--ua-radius);
  background: var(--ua-deep); color: var(--ua-on-deep);
  padding: 0.85rem 1.4rem; cursor: pointer; text-decoration: none; line-height: 1.3;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background-color 160ms var(--ua-ease), border-color 160ms var(--ua-ease), color 160ms var(--ua-ease);
}
.ua-btn:hover { background: var(--ua-accent-deep); border-color: var(--ua-accent-deep); }
.ua-btn--ghost { background: transparent; color: var(--ua-ink); border-color: var(--ua-ink-soft); }
.ua-btn--ghost:hover { background: var(--ua-card); border-color: var(--ua-accent); color: var(--ua-accent); }
/* On a dark ground the primary button inverts, or it is a bold line of text. */
.ua-foot .ua-btn, .ua-hero .ua-btn, .ua-promo .ua-btn, .ua-sticky .ua-btn { background: var(--ua-on-deep); color: var(--ua-deep); border-color: var(--ua-on-deep); }
.ua-foot .ua-btn:hover, .ua-hero .ua-btn:hover, .ua-promo .ua-btn:hover, .ua-sticky .ua-btn:hover { background: var(--ua-on-deep-lit); border-color: var(--ua-on-deep-lit); }
.ua-hero .ua-btn--ghost { background: transparent; color: var(--ua-on-deep); border-color: var(--ua-on-deep-soft); }
.ua-btn[aria-busy="true"] { cursor: progress; }
.ua-foot .ua-wa, .ua-hero .ua-wa { background: transparent; color: var(--ua-on-deep); border-color: var(--ua-on-deep-soft); }
.ua-form__status { font-size: var(--ua-step-small); color: var(--ua-ink); }
.ua-wa { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ua-accent); text-decoration: none; border: 1px solid var(--ua-accent); border-radius: var(--ua-radius); padding: 0.85rem 1.35rem; line-height: 1.3; }
.ua-wa-slot:empty { display: none; }
.ua-wa-slot { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ----------------------------------------------------------------- modal */

.ua-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--ua-gap); background: rgba(14, 26, 24, 0.72); }
.ua-modal__panel { background: var(--ua-card); border-radius: var(--ua-radius-lg); padding: clamp(1.25rem, 4vw, 2.5rem); inline-size: min(100%, 34rem); max-block-size: 90vh; overflow-y: auto; box-shadow: 0 24px 60px -20px rgba(14, 26, 24, 0.5); }
.ua-modal__close { background: none; border: 0; font: inherit; color: var(--ua-ink-soft); cursor: pointer; padding: 0.25rem; }
.ua-modal__head { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; }
.ua-modal__title { font-size: var(--ua-step-2); }

/* -------------------------------------------------------- sticky and chat */

/* In flow before the footer (works with no script); JS docks it once the
   hero is gone and reserves the room first — CLS 0. Desktop: chat alone. */
.ua-sticky { background: var(--ua-deep); color: var(--ua-on-deep); border-block-start: 1px solid var(--ua-rule-night); }
.ua-sticky__bar { display: flex; align-items: center; gap: 0.75rem; min-block-size: var(--ua-sticky-h); }
.ua-sticky__cta { flex: 1; padding-block: 0.7rem; }
/* `--cc-h`: the consent bar's height while shown (consent.js) — sit above it. */
.ua-sticky.ua-is-fixed { position: fixed; inset-inline: 0; inset-block-end: var(--cc-h, 0px); z-index: 50; }
body.ua-has-sticky { padding-block-end: var(--ua-sticky-h); }
.ua-sticky-slot { min-block-size: calc(var(--ua-sticky-h) + 1px); background: var(--ua-deep); }
@media (min-width: 861px) {
  .ua-sticky-slot { min-block-size: 0; }
  /* TRAP: restated with `.ua-is-fixed` — the phone rule above has two classes
     and outranked a one-class desktop rule, so once the page scrolled the
     button left the right edge for the left one (24.09). */
  .ua-sticky, .ua-sticky.ua-is-fixed { background: transparent; border: 0; position: fixed; inset-inline: auto var(--ua-gap); inset-block-end: calc(var(--ua-gap) + var(--cc-h, 0px)); z-index: 50; }
  .ua-sticky__bar { min-block-size: 0; inline-size: auto; }
  .ua-sticky__cta { display: none; }
  body.ua-has-sticky { padding-block-end: 0; }
}
.ua-chat { position: relative; }
.ua-chat__btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--ua-deep); color: var(--ua-on-deep); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(14, 26, 24, 0.55); }
.ua-sticky .ua-chat__btn { background: var(--ua-on-deep); color: var(--ua-deep); }
@media (min-width: 861px) { .ua-sticky .ua-chat__btn { background: var(--ua-deep); color: var(--ua-on-deep); } }
.ua-chat__btn::-webkit-details-marker { display: none; }
.ua-chat__btn svg { inline-size: 1.4rem; block-size: 1.4rem; }
.ua-chat__sheet { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + 0.6rem); min-inline-size: 16rem; background: var(--ua-card); color: var(--ua-ink); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius-lg); box-shadow: 0 16px 40px -16px rgba(14, 26, 24, 0.4); padding: 1rem; display: grid; gap: 0.6rem; }
.ua-chat__title { font-size: var(--ua-step-mono); font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-ink-soft); margin: 0; }
.ua-chat__channels { display: grid; gap: 0.5rem; }
.ua-chat__channels .ua-wa { justify-content: flex-start; }
.ua-chat__item { color: var(--ua-ink); text-decoration: none; font-weight: 600; padding: 0.6rem 0; border-block-start: 1px solid var(--ua-rule); }

/* ---------------------------------------------------------------- footer */

.ua-foot { background: var(--ua-deep); color: var(--ua-on-deep-soft); padding-block: var(--ua-section) 3rem; }
.ua-foot a { color: var(--ua-on-deep-lit); }
.ua-foot h2 { color: var(--ua-on-deep); }
.ua-foot .ua-eyebrow { color: var(--ua-on-deep-lit); }
.ua-foot__cta { padding-block-end: 2.5rem; border-block-end: 1px solid var(--ua-rule-night); margin-block-end: 2.5rem; }
.ua-foot__cols { display: grid; gap: var(--ua-gap); }
@media (min-width: 861px) { .ua-foot__cols { grid-template-columns: 2fr 1fr 1fr; } }
.ua-foot__id { color: var(--ua-on-deep); font-size: var(--ua-step-small); }
.ua-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--ua-step-small); }
.ua-foot__list a { color: var(--ua-on-deep); text-decoration: none; }
.ua-foot__list a:hover { text-decoration: underline; }
.ua-foot__credits { font-size: 0.8125rem; line-height: 1.55; margin-block-start: 0.6rem; }
.ua-foot__credits summary { cursor: pointer; color: var(--ua-on-deep-soft); }
.ua-foot__credits a { color: inherit; }

/* ------------------------------------------------------- language switcher */

.ua-lang { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ua-step-small); }
.ua-lang__list { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.ua-lang__list a { text-decoration: none; text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; }
.ua-lang__list [aria-current="true"] { color: var(--ua-ink-soft); }
.ua-lang:empty { display: none; }

/* ------------------------------------------------- consent banner (runtime)
   Built by the telemetry bundle; styled by its class SUFFIX. Under 96 px on a
   phone, 72 on desktop: taller, it covered the hero's button. */
[class$="-cc"] { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; background: var(--ua-card); color: var(--ua-ink); border-block-start: 1px solid var(--ua-rule); box-shadow: 0 -10px 30px -18px rgba(14, 26, 24, 0.35); padding: 0.6rem var(--ua-gap); }
[class$="-cc__body"] { width: min(100%, var(--ua-page)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
[class$="-cc__text"] { margin: 0; font-size: var(--ua-step-mono); max-inline-size: none; flex: 1 1 18rem; line-height: 1.35; }
[class$="-cc__actions"] { display: flex; flex-wrap: wrap; gap: 0.4rem; }
[class$="-cc__actions"] button { font: inherit; font-size: var(--ua-step-small); font-weight: 500; padding: 0.4rem 0.85rem; border-radius: var(--ua-radius); border: 1px solid var(--ua-ink-soft); background: transparent; color: var(--ua-ink); cursor: pointer; }
[class$="-cc__actions"] button:first-child { background: var(--ua-deep); color: var(--ua-on-deep); border-color: var(--ua-deep); }
[class$="-cc__manage"] { display: grid; gap: 0.35rem; font-size: var(--ua-step-small); flex-basis: 100%; }
[class$="-cc__manage"] label { display: flex; gap: 0.5rem; align-items: center; }

/* ------------------------------------------------------------ brief mode
   Same HTML, re-composed. Every rule is keyed on an attribute only the
   script sets, so with no JS none of this applies. The helpers (TOC, bar,
   sheet, find) are built by JS and exist only when it ran. */

[data-ua-mode="brief"] .ua-hero__body { min-block-size: 0; padding-block: 1.5rem 1.25rem; gap: 1rem; }
[data-ua-mode="brief"] .ua-hero__bg { display: none; }
[data-ua-mode="brief"] .ua-hero h1 { max-inline-size: none; }
[data-ua-mode="brief"] .ua-hero__lede { font-size: var(--ua-step-0); max-inline-size: 70ch; }
[data-ua-mode="brief"] .ua-hero__facts { padding-block-start: 0.75rem; gap: 0.75rem 1.5rem; }
[data-ua-mode="brief"] .ua-hero__val { font-size: var(--ua-step-0); }
[data-ua-mode="brief"] .ua-section--sand, [data-ua-mode="brief"] .ua-section--card { background: transparent; border-block: 0; border-block-start: 1px solid var(--ua-rule); }
[data-ua-mode="brief"] .ua-brief { font-size: var(--ua-step-0); color: var(--ua-ink); font-weight: 600; max-width: var(--ua-measure); margin-block-end: 0.5rem; }
[data-ua-mode="brief"] .ua-eyebrow { margin-block-end: 0.35rem; }
[data-ua-mode="brief"] .ua-card, [data-ua-mode="brief"] .ua-aside-row, [data-ua-mode="brief"] .ua-unpub { border: 0; border-block-start: 1px solid var(--ua-rule); border-radius: 0; padding: 0.75rem 0 0; background: transparent; }
[data-ua-mode="brief"] .ua-rows__title, [data-ua-mode="brief"] .ua-ledger__value { font-weight: 600; font-size: var(--ua-step-0); }
[data-ua-mode="brief"] .ua-ledger__row, [data-ua-mode="brief"] .ua-rows__row { padding-block: 0.45rem; }
/* Every ledger stacks label over value in brief: the mode's grid puts a
   ledger into a 16rem column as often as not, and a two-column row there
   runs past the page by the width of a long airport name. */
[data-ua-mode="brief"] .ua-ledger__row { grid-template-columns: 1fr; gap: 0.1rem; }
[data-ua-mode="brief"] .ua-ledger__note { grid-column: 1; }
[data-ua-mode="brief"] .ua-unpub__dash { font-size: var(--ua-step-1); }
[data-ua-mode="brief"] .ua-btn { padding: 0.5rem 0.9rem; font-size: var(--ua-step-small); background: transparent; color: var(--ua-ink); border-color: var(--ua-ink); }
[data-ua-mode="brief"] .ua-hero .ua-btn, [data-ua-mode="brief"] .ua-foot .ua-btn, [data-ua-mode="brief"] .ua-sticky .ua-btn, [data-ua-mode="brief"] .ua-promo .ua-btn { color: var(--ua-on-deep); border-color: var(--ua-on-deep-soft); }
/* The document line printed beside every number: the source column of a
   register, always visible in brief. attr() keeps it out of the markup. */
[data-ua-mode="brief"] .ua-fact::after { content: " [" attr(data-ua-lbl) " · " attr(data-ua-asof) "]"; font-size: 0.8125rem; font-weight: 400; color: var(--ua-ink-soft); font-variant-numeric: normal; letter-spacing: 0; }
[data-ua-mode="brief"] .ua-fact__src { display: none; }
[data-ua-mode="brief"] .ua-fact { white-space: normal; }
[data-ua-mode="brief"] .ua-motion [data-ua-reveal], [data-ua-mode="brief"] .ua-motion .ua-hero [data-ua-rise] { transform: none; transition: none; }
[data-ua-mode="brief"] .ua-plan__slot:empty, [data-ua-mode="brief"] .ua-frame:empty, [data-ua-mode="brief"] .ua-figure--decor, [data-ua-mode="brief"] .ua-tile__media { display: none; }
[data-ua-mode="brief"] .ua-frame img { aspect-ratio: 3 / 2; }
[data-ua-mode="brief"] .ua-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem 1.5rem; }
[data-ua-mode="brief"] .ua-tile { border: 0; border-block-start: 1px solid var(--ua-rule); border-radius: 0; background: transparent; flex-direction: column; }
[data-ua-mode="brief"] .ua-tile:hover { transform: none; box-shadow: none; }
[data-ua-mode="brief"] .ua-tile__body { padding: 0.5rem 0; }
[data-ua-mode="brief"] .ua-crumbs { margin-block-end: 0.5rem; }
@media (min-width: 861px) {
  [data-ua-mode="brief"] .ua-grid--7-5, [data-ua-mode="brief"] .ua-grid--5-7, [data-ua-mode="brief"] .ua-grid--split { grid-template-columns: minmax(0, 1fr) minmax(9rem, 16rem); gap: 1rem 2rem; }
  [data-ua-mode="brief"] .ua-grid--5-7 > :first-child { order: 2; }
  [data-ua-mode="brief"] .ua-hero__figure { max-inline-size: 16rem; }
}
/* The register's chrome: bar, contents, sheet. */
.ua-bar { position: sticky; top: 4rem; z-index: 30; background: var(--ua-paper); border-block-end: 1px solid var(--ua-rule); }
.ua-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.5rem; }
.ua-bar__find { flex: 1 1 14rem; font: inherit; font-size: var(--ua-step-small); color: var(--ua-ink); background: var(--ua-card); border: 1px solid var(--ua-rule); border-radius: var(--ua-radius); padding: 0.45rem 0.7rem; }
.ua-bar__count { font-size: 0.8125rem; color: var(--ua-ink-soft); }
.ua-bar__link { font-size: var(--ua-step-small); }
mark.ua-hit { background: var(--ua-brass); color: var(--ua-ink); padding-inline: 0.1em; }
[data-ua-mode="brief"] main { display: grid; grid-template-columns: var(--ua-toc-w) minmax(0, 1fr); }
[data-ua-mode="brief"] main > * { grid-column: 2; min-inline-size: 0; }
/* The contents take the first column; every other child the second. The
   attribute selector above outranks a bare class, so the column is restated
   at the same specificity — the day it was not, the contents sat inside the
   hero's column, sticky, eight pixels wider than the page. */
[data-ua-mode="brief"] main > .ua-toc { grid-column: 1; }
[data-ua-mode="brief"] main > details.ua-toc { grid-column: 2; grid-row: auto; }
.ua-toc { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: 7rem; padding: 1rem var(--ua-gap) 1rem 0; border-inline-end: 1px solid var(--ua-rule); font-size: var(--ua-step-small); }
.ua-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ua-toc a { color: var(--ua-ink-soft); text-decoration: none; display: block; padding: 0.1rem 0 0.1rem 0.6rem; border-inline-start: 2px solid transparent; }
.ua-toc a[aria-current="true"] { color: var(--ua-ink); border-inline-start-color: var(--ua-brass); }
.ua-toc__label, details.ua-toc summary { font-size: var(--ua-step-mono); font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-ink-soft); margin: 0 0 0.5rem; }
details.ua-toc { position: static; border: 0; border-block-end: 1px solid var(--ua-rule); padding: 0.5rem 0; grid-column: 2; }
details.ua-toc summary { cursor: pointer; margin: 0; }
details.ua-toc ul { padding-block-start: 0.5rem; }
.ua-sheet { padding-block: 1rem; }
.ua-sheet table { inline-size: 100%; border-collapse: collapse; font-size: var(--ua-step-small); }
.ua-sheet caption { text-align: start; font-size: var(--ua-step-mono); font-weight: 600; letter-spacing: var(--ua-track-label); text-transform: uppercase; color: var(--ua-ink-soft); padding-block-end: 0.5rem; }
.ua-sheet th, .ua-sheet td { text-align: start; padding: 0.4rem 0.6rem; border-block-end: 1px solid var(--ua-rule); vertical-align: top; }
.ua-sheet th { font-size: 0.8125rem; font-weight: 500; color: var(--ua-ink-soft); border-block-end-color: var(--ua-ink); }
.ua-sheet td:nth-child(2), .ua-sheet td:nth-child(4) { white-space: nowrap; }
.ua-sheet td:nth-child(2) { font-weight: 600; }
.ua-sheet td:nth-child(3), .ua-sheet td:nth-child(4) { font-size: 0.8125rem; color: var(--ua-ink-soft); }
.ua-sheet a { color: var(--ua-ink); }

/* --------------------------------------------------------- dark gradients
   The only place the theme is not an alias: translucent stops need the
   ground's own hue. Everything else follows the tokens by itself. */
[data-ua-theme="dark"] .ua-modal { background: rgba(10, 20, 18, 0.8); }
[data-ua-theme="dark"] .ua-tile, [data-ua-theme="dark"] .ua-promo { box-shadow: inset 0 0 0 1px var(--ua-rule-night); }
[data-ua-theme="dark"] .ua-tool[aria-pressed="true"] { background: var(--ua-on-deep); color: var(--ua-night); border-color: var(--ua-on-deep); }
/* TRAP: in this theme `--ua-deep` IS the form panel's ground (1.0 : 1, 23.09),
   so every primary button inverts. Brief mode keeps its outlines. */
:root[data-ua-theme="dark"]:not([data-ua-mode="brief"]) .ua-btn:not(.ua-btn--ghost),
:root[data-ua-theme="dark"]:not([data-ua-mode="brief"]) .ua-btn[aria-pressed="true"],
[data-ua-theme="dark"] [class$="-cc__actions"] button:first-child { background: var(--ua-on-deep); color: var(--ua-night); border-color: var(--ua-on-deep); }
:root[data-ua-theme="dark"]:not([data-ua-mode="brief"]) .ua-btn:not(.ua-btn--ghost):hover { background: var(--ua-on-deep-lit); border-color: var(--ua-on-deep-lit); }

/* ---------------------------------------------------------------- motion */

.ua-motion [data-ua-reveal] { transform: translateY(18px); transition: transform 700ms var(--ua-ease); }
.ua-motion [data-ua-reveal].ua-in { transform: none; }
.ua-motion [data-ua-reveal="lift"] { transform: translateY(28px) scale(0.995); }
.ua-motion [data-ua-reveal="lift"].ua-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ua-motion [data-ua-reveal], .ua-motion [data-ua-reveal].ua-in,
  .ua-motion .ua-hero [data-ua-rise], .ua-motion .ua-hero [data-ua-rise].ua-in { transform: none; transition: none; }
  .ua-btn, .ua-tile, .ua-tile__media img { transition: none; }
  .ua-tile:hover, .ua-tile:hover .ua-tile__media img { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------- print
   The register, printed: the chrome goes, the sources stay on the page. */
@media print {
  .ua-head, .ua-modal, .ua-sticky, .ua-bar, .ua-toc, .ua-foot__cta, [class$="-cc"], .ua-wa-slot, .ua-btn, .ua-hero__bg, .ua-tile__media { display: none !important; }
  body { background: var(--ua-card); }
  .ua-hero, .ua-foot, .ua-promo { background: var(--ua-card); color: var(--ua-ink); border-block: 1px solid var(--ua-rule); }
  .ua-hero h1, .ua-hero__val, .ua-hero__lede, .ua-foot, .ua-foot h2, .ua-promo h3 { color: var(--ua-ink); }
  .ua-fact::after { content: " [" attr(data-ua-doc) " · " attr(data-ua-asof) "]"; font-size: 0.8125rem; }
  .ua-fact { white-space: normal; }
  .ua-fact__src { display: none; }
}