@font-face {
  font-family: "Inter";
  src: url("/_assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Fraunces";
  src: url("/_assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/_assets/fonts/plex400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/_assets/fonts/plex500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/_assets/fonts/naskh600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020,U+0600-06FF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/_assets/fonts/plexarabic400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020,U+0600-06FF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/_assets/fonts/plexarabic500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020,U+0600-06FF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/_assets/fonts/plexarabic600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020,U+0600-06FF;
}
:root {
  --ui-ground: #0d1017;
  --ui-card: #141926;
  --ui-hairline: #232b3d;
  --ui-ink: #f2efe8;
  --ui-muted: #a39e90;
  --ui-inert-ink: #8e8a80;
  --ui-gold: #f2b83d;
  --ui-scrim: rgba(4, 6, 10, 0.55);
  --ui-sheet-lift: 0 -8px 32px rgba(0, 0, 0, 0.35);
  --ui-destructive: #e5484d;
  --ui-type-display: 580 30px/36px "Fraunces", "Georgia", serif;
  --ui-type-title: 580 20px/26px "Fraunces", "Georgia", serif;
  --ui-type-place-name: 560 18px/22px "Fraunces", "Georgia", serif;
  --ui-type-body: 400 15px/24.5px "Inter", system-ui, sans-serif;
  --ui-type-label: 500 14px/20px "Inter", system-ui, sans-serif;
  --ui-type-meta: 400 12px/16px "Inter", system-ui, sans-serif;
  --ui-type-readout: 400 13px/18px "IBM Plex Mono", "Menlo", monospace;
  --ui-type-readout-caps: 500 11px/16px "IBM Plex Mono", "Menlo", monospace;
  --ui-motion-curve: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-press-in: 60ms;
  --ui-press-out: 200ms;
  --ui-motion-state: 160ms ease-out;
  --ui-motion-rise: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-motion-fall: 200ms ease-in;
  --ui-motion-scrim: 160ms linear;
  --ui-motion-page: 260ms ease-out;
  --ui-motion-settle: 200ms ease-out;
  --ui-motion-breathe: 1200ms linear;
  --gold-on-dark: #f2b83d;
  --gold-on-light: #b8860b;
  --ui-tap-min: 44px;
  --ui-media-scrim: rgba(4, 6, 10, 0.45);
  --ui-media-lozenge: rgba(4, 6, 10, 0.6);
  --ui-media-ink: #f2efe8;
  --ui-media-edge: rgba(242, 239, 232, 0.7);
}
[data-ground="paper"] {
  --ui-ground: #faf7f0;
  --ui-card: #ffffff;
  --ui-hairline: #e5dfd2;
  --ui-ink: #1a1d24;
  --ui-muted: #6f6a5e;
  --ui-inert-ink: #736e63;
  --ui-gold: #b8860b;
  --ui-scrim: rgba(26, 29, 36, 0.38);
  --ui-sheet-lift: 0 -8px 32px rgba(26, 29, 36, 0.14);
  --ui-destructive: #c22126;
}
:lang(ar) {
  --ui-type-display: 580 30px/36px "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Fraunces", "Georgia", serif;
  --ui-type-title: 580 20px/26px "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Fraunces", "Georgia", serif;
  --ui-type-place-name: 560 18px/22px "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Fraunces", "Georgia", serif;
  --ui-type-body: 400 15px/24.5px "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --ui-type-label: 500 14px/20px "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --ui-type-meta: 400 12px/16px "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --ui-type-readout: 400 13px/18px "IBM Plex Sans Arabic", "IBM Plex Mono", "Menlo", monospace;
  --ui-type-readout-caps: 500 11px/16px "IBM Plex Sans Arabic", "IBM Plex Mono", "Menlo", monospace;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* the box model, first: padding and border are INSIDE the declared size,
   so a full-width padded element is full width and not full width plus
   its padding (F6's sideways scroll and its four-pixel band overrun are
   the same declaration missing) */
*,
*::before,
*::after { box-sizing: border-box; }

/* the document's own gutter. A user agent gives body an eight pixel
   margin, and a composed page that never applies the published body class
   inherits it: every screen sat inside an unstyled band and every page
   carried sixteen pixels of dead scroll, on a canvas its own content
   fitted. Found by measuring the renders, not by reading the CSS. */
body { margin: 0; }

/* the user agent's list indent is a typographic decision this product
   makes per room, not a default it inherits at 40px */
ul,
ol { margin-block: 0; padding-inline-start: 0; list-style: none; }

/* block margins are the room's rhythm, never the user agent's */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd { margin-block: 0; margin-inline: 0; }

/* a control that refuses the page's own type is a control that reads as
   another application's; inheriting is the smaller rule than restating
   the type roles here, where they do not belong */
button,
input,
select,
textarea { font: inherit; color: inherit; }

/* replaced content never widens its own container: an image or a drawn
   glyph wider than its column is the same overflow class as the padded
   element above, arriving through a different door */
img,
svg,
video,
canvas { max-inline-size: 100%; }


/* THE BOX MODEL, ONCE, FOR THE WHOLE APP.
   Without this every element that is 100 percent wide AND carries
   padding or a border is wider than its column - which is not a
   subtlety: the walk measured the composer's writing field at 378px
   inside a 352px column with its right border off the side of the
   phone, and the create sheet's name field crossing out through the
   white edge of its own card, on seven states at both geometries and
   on both device families. The design of record's own pages open with
   this rule; the build had dropped it.

   IT LANDS HERE, IN THE SHARED LAYER, AND NOWHERE ELSE. A second lane
   measured the identical overflow on its own surfaces within the hour,
   which is the tell that the defect is the layer's and not the
   surface's - a per-surface copy would cure two symptoms and leave the
   cause, and the next surface would meet it again. */
*, *::before, *::after { box-sizing: border-box; }
/* AND THE OTHER HALF OF THE SAME RESET: the browser's own margins.
   The design of record's base sheet carries these on the lines after
   the box model, and the build carried neither. Every h1, h2 and p on
   the page kept the user agent's default block margins - and because
   these elements are GRID ITEMS inside the head, the bands and the
   room, those margins do not collapse. They ADD to the grid gap.
   Measured on both engines: a head declaring a 4px gap rendered at
   37px and 29px, so "Marrakech", "12 to 19 Aug" and "Live, day 3 of 8"
   arrived as three facts stacked down the page instead of the one
   glance the head is for. Across a whole live room it was 241px of
   inflation - 14 percent - which at 384x750 is the difference between
   a fold that holds the plate, the journal door and the room's one
   commit, and a fold that cuts through the middle of a photograph.
   IT LANDS HERE FOR THE SAME REASON THE BOX MODEL DOES: it is the
   layer's, not any surface's, and one home is what stops the next
   surface meeting it again. */
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote { margin: 0; }
ul, ol { padding-inline-start: 0; list-style: none; }

.ui-body {
  background: var(--ui-ground);
  color: var(--ui-ink);
  font: var(--ui-type-body);
  margin: 0;
  padding-block: 24px;
  padding-inline: 20px;
}

/* TYPE ROLES. The layer that publishes the roles is the layer that
   binds their classes (class 194): a shared class name whose only
   definition lives inside one room means every later room must remember
   to import that room's stylesheet, silently loses the type system when
   it does not, and stays green through every mechanical check because
   the class is present in the markup and simply does nothing. That is
   what happened to .ui-type-body and to the caption class, which were
   declared only in the trips room and cost a country card its hierarchy;
   the body role comes home here, and renderSharedTripCss - the room-local
   stylesheet that used to hold them - is retired.
   The CAPTION class does NOT come home, and the difference is a ruling
   rather than an oversight: the design owner decided on 2026-08-21 (canon
   AM-J6) that caption is NOT a role - no mint, no alias, THE CALLERS
   MIGRATE - so publishing it here would have been this layer adopting an
   invention instead of retiring it. Its callers say .ui-type-meta, which is
   the voice its two declarations read at the bytes all along. */
.ui-type-display { font: var(--ui-type-display); }
.ui-type-title { font: var(--ui-type-title); }
.ui-type-place-name { font: var(--ui-type-place-name); }
.ui-type-label { font: var(--ui-type-label); }
.ui-type-body { font: var(--ui-type-body); }
.ui-type-meta { font: var(--ui-type-meta); color: var(--ui-muted); }
.ui-readout { font: var(--ui-type-readout); font-variant-numeric: tabular-nums; }
/* THE VISUALLY HIDDEN ROLE, hoisted here from the first-screens home at
   wave-1.4. It is a SHARED name - the orient home heads its own screen
   with it and the album labels a figure with it - and its only bare
   definition sat inside one component, which is class 194's own case: any
   document that inlines primitives but not that component's stylesheet
   used the name and silently got nothing. Hoisting is the repair the
   ledger names, and here it is RENDER-PRESERVING at the bytes rather than
   in principle: of the twelve shipped artifacts only first-screens.html
   carries elements of this class (two), and it carries the rule either
   way; the other eleven gain a rule that matches nothing they draw. */
.ui-a11y { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-readout-caps { font: var(--ui-type-readout-caps); letter-spacing: 0.08em; text-transform: uppercase; }
/* THE REFUSAL VOICE - T1's one censused named modifier
   (RULING-REFUSAL-VOICE-PICKED-20260826, on the ui owner's rendered bracket):
   tracking at 0.08em, the estate's state/stamp axis at the stamp family's own
   value (the line above is its kin), so a cannot reads as a stamped state
   label at a glance and never as prose or an invitation. Ink and size
   untouched (AM-J7's fence); the class names the VOICE, no selector names a
   role; it rides beside a note class only where the note is a refusal, never
   on scent captions. THE ARABIC HALF ruled in the same ruling: Arabic is
   never letterspaced (the standing law), so the lever there is WEIGHT AT 500
   (600 at the first landing; adjusted by ORDER-REFUSAL-LEVER-500 when the
   confirm-at-first-render clause fired on the country walker's render)
   with letter-spacing pinned to 0 - carried as the composition layer's
   .co-page-scoped :lang(ar) reset beside its readout-caps kin (the editions
   floor judges reachability in that form), confirmed at the first Arabic
   render per the ruling's own clause. */
.ui-meta--refusal { letter-spacing: 0.08em; }

/* the wordmark's neighbourhood: display face; the anchor mark beside it
   carries gold's licensed meaning */
.ui-wordmark { display: inline-flex; align-items: center; gap: 10px; font: var(--ui-type-display); }
.ui-wordmark .ui-icon { color: var(--ui-gold); }
/* THE TRAIL FORM: the mark follows the name and sits tighter to it than a
   leading mark did. The base 10px stays for any leading wordmark that
   still exists. */
.ui-wordmark--trail { gap: 6px; }
/* THE FULL STOP ITSELF: a round solid in the wordmark's own ink. No path
   data, so it is a shape and not a drawing, and the drawn-once census
   stays closed.

   AT THE DRAWN PAINT SIZE, WHICH IS NOT THE BOX SIZE. The reference draws
   circle r=6.5 on a 24 grid inside a 13px box, so the INK is 13/24 of that
   box, about 7px across, centred, with the rest of the box transparent. A
   13px solid would paint about twice the drawn mass and the desk's render
   check compares against the drawn pixels. So the BOX stays 13px, which is
   what the gap and the baseline seat are dressed against, and the padding
   holds the ink to the drawn fraction: background-clip keeps it inside the
   content box, and a 50 percent radius reduces to that box's own half,
   which is a circle. The box is declared here rather than only at the gate
   so the treatment paints identically at every site it renders. */
.ui-wordmark-stop {
  inline-size: 13px;
  block-size: 13px;
  padding: calc((13px - 13px * 13 / 24) / 2);
  background: currentColor;
  background-clip: content-box;
  border-radius: 50%;
}

/* icons inherit ink */
.ui-icon { display: inline-block; vertical-align: middle; }
/* AND ONE OF THEM INHERITS ITS DIRECTION, from the file that draws it.
   These are not this sheet's words: the icon set declares which glyphs
   point along the reading direction and exports the rule that mirrors
   exactly those, and the shared layer FERRIES it, because this is the
   sheet every generated page and the composed app already carry. The
   alternative the tree had been living with was a mirror written lane
   by lane - six stylesheets each spelling it themselves, a seventh
   cancelling it, and the media viewer never writing it at all, which is
   how the Arabic back arrow came to point into the page. A lane can
   still not-write a rule; it can no longer not-write this one. */
[dir="rtl"] .ui-icon-mirrors { transform: scaleX(-1); }

/* THE ICON ACT (section R's icon role): a bare 44px box, muted ink, an
   18-20px glyph, no container. Born HERE rather than in the surface
   that first needed it: a shared class name whose only definition sits
   inside one room is exactly class 194, and this one is used by the
   trips room, the people sheet and the entry page already. */
.ui-icon-act {
  display: grid; grid-template-columns: minmax(0, 1fr);
  place-items: center;
  inline-size: var(--ui-tap-min);
  block-size: var(--ui-tap-min);
  border: none;
  background: none;
  padding: 0;
  color: var(--ui-muted);
  cursor: pointer;
  flex: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ui-icon-act:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.ui-icon-act .ui-icon { inline-size: 20px; block-size: 20px; }

/* THE BOUND ROW (catalogue row 23) AND THE DOOR DRESS IT CARRIES (row 6,
   the 10:42 amendment), born HERE at the carried-rows convergence (C1):
   the passport home drew one object - the record-derived door - through
   two row components in three dresses inside one stack, and the cure the
   two desks co-signed is one primitive, born shared in the layer that
   publishes it (class 194's law), never a per-surface copy.
   THE 48 PITCH IS THE TAP-FLOOR LAW'S OWN REGENERATE PATH (option C,
   2026-08-25): the visual floor moves 44-to-48 at the family's
   regenerate with the family's own eye pass, and this lift is that
   regenerate for the rows that consume this carrier. The door's title
   takes the row's OWN TITLE INK (dim ink is for what is secondary,
   never for a destination); the meta line stays muted; the readout sits
   INBOARD of the trailing chevron. The element carrying .ui-bound-door
   may be a button or an anchor - dispatch decides, the dress must not -
   so the button's UA dress is reset here rather than at any call site. */
.ui-bound-row { display: flex; align-items: center; min-block-size: 48px; inline-size: 100%; }
.ui-bound-row + .ui-bound-row { border-block-start: 1px solid var(--ui-hairline); }
.ui-bound-door {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-inline-size: 0;
  min-block-size: 48px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: start;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ui-bound-door:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
/* The ring reaches for --ui-ink, the minted token: the family form it
   descends from (.sv-door) cites --anchor-ink, which this tree defines
   NOWHERE - an unresolved custom property with no fallback voids the
   whole declaration and a keyboard reader gets the platform default.
   That ghost is the saved shelf's recorded, lead-routed fact; a shared
   birth does not inherit a defect it can see (the lifted-family law). */
.ui-bound-door:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: -2px; }
.ui-bound-door-main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
.ui-bound-door-main > .ui-type-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bound-door-readout { flex: none; color: var(--ui-muted); }
.ui-bound-chev { flex: none; inline-size: 20px; block-size: 20px; color: var(--ui-muted); }
[dir="rtl"] .ui-bound-chev { transform: scaleX(-1); }
/* The press transform's own opt-out, carried with the rule it opts out
   of: a transform imported without its reduced-motion guard is the
   defect (the retired pp-row-link carried this guard; the dress that
   replaces it keeps it). */
@media (prefers-reduced-motion: reduce) {
  .ui-bound-door:active { transform: none; }
}

/* THE CHIP SYSTEM */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--ui-type-label);
  color: var(--ui-ink);
  background: none;
  border: none;
  padding-block: 4px;
  padding-inline: 10px;
  border-radius: 999px;
}
.ui-chip--bordered { border: 1px solid var(--ui-hairline); }
/* The two live variants carry the hairline edge, and a chip's label
   never wraps. These were declared inside the trips room's own
   stylesheet, which is class 194 exactly - a chip-system class whose
   only definition sat in one component - so they come home to the
   primitive that owns the family. */
.ui-chip--data.ui-chip--live, .ui-chip--state.ui-chip--live { border: 1px solid var(--ui-hairline); }
.ui-chip-label { white-space: nowrap; }
/* THE ADOPTION'S ONE NOTE HERE (2026-08-29, the P11 adoption): the
   explore lane cured the same class-194 defect independently, in the
   same file and to the same rules, while the trunk's own cure landed
   under it. The trunk's wording stands because it is the landed one;
   what the lane brings that the trunk does not is the rule below. */
/* A LIVE CHIP THAT TOGGLES WEARS ITS STATE, and this layer published the
   attribute without the dress. The chip gained an optional aria-pressed
   so a toggle could say which way it is set; a walk then measured the two
   readings and found the same background, the same border and the same
   colour, differing by antialiasing alone. Publishing a primitive means
   publishing its dress - the class-194 sentence this layer already
   carries - and half of that was done.
   Engaged takes the hairline ground and an ink edge. Deliberately NOT a
   fill: the fill is the surface's one commitment and belongs to the go
   circle, while this is a filter that narrows what is already in view. */
.ui-chip--live[aria-pressed="true"] { background: var(--ui-hairline); border-color: var(--ui-ink); }
.ui-chip--provenance { color: var(--ui-muted); font: var(--ui-type-meta); }
.ui-chip--live {
  cursor: pointer;
  min-block-size: var(--ui-tap-min);
  min-inline-size: var(--ui-tap-min);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ui-chip--live:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
/* THE TOGGLE-MANY VARIANT (2026-09-02, the B2 face grade's one cure): the
   nearby lens chip published this class with no rule anywhere, so rest
   rendered as bare floating text and pressed took the grounded dress
   above. Its dress is the drawn pass-2 form, which is also the reading
   room's own facet grammar (.rd-facet-pill): the quiet edge at rest,
   pressed swaps THE EDGE to ink and keeps NO ground. Deliberately not the
   grounded pressed dress above - that one marks a state a chip holds,
   while a toggle-many facet marks membership in a narrowing the person
   can lift, and the two readings earn different weights. The no-ground
   rule outranks the grounded one by SPECIFICITY, not by file order a
   refactor could shuffle.
   THE REST EDGE IS STEPPED, NOT BARE (the desk's ruling on the B2 walk's
   finding 4, do31, 2026-09-02): this chip's whole rest affordance is its
   boundary - no ground, no geometry change - and the bare hairline
   measured 1.36:1 on night and 1.13:1 on paper at the arc pixels, which
   is decoration, not affordance. The estate's bar for such marks is 3:1,
   so the edge ink is the hairline stepped toward ink by the smallest
   tested decile that clears the bar on BOTH grounds (55%: measured 6.0:1
   night, 3.3:1 paper by the render floor's own pixel probe). Pressed
   stays the full ink, so the two states keep their step. */
.ui-chip--toggle { border: 1px solid color-mix(in srgb, var(--ui-ink) 55%, var(--ui-hairline)); }
.ui-chip--toggle[aria-pressed="true"] { border-color: var(--ui-ink); }
.ui-chip--live.ui-chip--toggle[aria-pressed="true"] { background: none; }
.ui-chip--live.ui-chip--toggle {
  transition: transform var(--ui-press-out) var(--ui-motion-curve),
              border-color var(--ui-motion-state);
}
/* A LIVE CHIP THAT CANNOT OPEN IS NOT A LIVE CHIP, and this is the
   family's own refused arm rather than any surface's.
   THE FINDING (the wave-2 walk's F3, blocking): Explore's "Browse
   countries" was pixel-identical to its two live neighbours - the same
   ink, the same transparent ground, the same hairline edge, the same
   opacity, the same height - and one of three identical pills was dead.
   The estate had published this primitive's dress and its pressed state
   and NOT its refused state, which is the same half-published-primitive
   shape the rule above records for aria-pressed.
   THE DRESS IS THE FAMILY'S OWN REDUCED PRESENCE, at the value the
   settings family already ships for exactly this meaning: the label and
   its glyph mute together through currentColor, and the edge softens, so
   the chip keeps its shape and loses its promise. A colour reduction
   rather than an opacity one, deliberately: opacity on a container
   MULTIPLIES down the subtree, and the estate has refused chips whose
   own children already carry a reduction. */
.ui-chip--live[data-inert="not-wired"] {
  color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card));
  border-color: color-mix(in srgb, var(--ui-hairline) 70%, var(--ui-card));
}
.ui-chip--live[data-inert="not-wired"] .ui-chip-dot { background: var(--ui-inert-ink); }
.ui-chip-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ui-muted);
  flex: none;
}
/* The chip's own label, published beside its modifier for the same
   reason and in the same touch: the primitive emits it, so the layer
   that publishes the primitive publishes its dress. */
.ui-chip-label { white-space: nowrap; }
.ui-chip-label--dotted { text-decoration: underline dotted; text-underline-offset: 3px; }

/* THE STATE LAYER */
.ui-state { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; }
.ui-state-waiting { inline-size: 100%; }
.ui-skeleton-line {
  block-size: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ui-card) 25%, var(--ui-hairline) 50%, var(--ui-card) 75%);
  background-size: 200% 100%;
  animation: ui-scan 2.2s var(--ui-motion-curve) infinite;
}
.ui-skeleton-line--1 { inline-size: 82%; }
.ui-skeleton-line--2 { inline-size: 64%; }
.ui-skeleton-line--3 { inline-size: 73%; }
@keyframes ui-scan {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.ui-state-absence { color: var(--ui-muted); font: var(--ui-type-body); margin: 0; }
.ui-state-failure { border-inline-start: 2px solid var(--ui-hairline); padding-inline-start: 12px; }
.ui-state-failure-title { font: var(--ui-type-label); margin: 0; }
.ui-state-freshness { color: var(--ui-muted); }

/* THE DISCLOSURE FAMILY: bordered state chips, anchored at the start
   edge of the surface that carries them */
.ui-disclosure { justify-self: start; }

/* THE MEDIA VIEWER */
.ui-plate { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ui-plate-mount {
  inline-size: 100%;
  background: var(--ui-card);
  border: 1px solid var(--ui-hairline);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
grid-template-columns: minmax(0, 1fr); }
.ui-plate--4x3 .ui-plate-mount { aspect-ratio: 4 / 3; }
.ui-plate--3x2 .ui-plate-mount { aspect-ratio: 3 / 2; }
.ui-plate--1x1 .ui-plate-mount { aspect-ratio: 1 / 1; }
.ui-plate--16x9 .ui-plate-mount { aspect-ratio: 16 / 9; }
.ui-plate-mount { position: relative; }
.ui-plate-mount > * { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* THE EMPTY PLATE. A plate whose image bytes do not exist yet shows its
   mount and the media glyph - never a stand-in picture pretending to be
   the photo (law 20: absence renders as absence). */
.ui-plate-standin {
  position: absolute;
  inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  place-items: center;
  color: var(--ui-muted);
  /* THE STAND-IN'S INK, SLOT-SCOPED (the design owner's stand-in-scope
     ruling, 2026-08-24, re-checked at the pixels and PASSED). The
     inherited 0.5 measured 2.47:1 in the night family and 1.84:1 on
     paper against the 3:1 non-text bar - it failed BOTH editions, not
     the paper one the first reading supposed. The cure belongs on the
     family's ONE stand-in slot rather than on any lane's own class:
     the predicate that fires it is the stand-in RENDERING where a
     person sees unarrived media, anywhere, drawn by anyone, and a
     lane-scoped cure would leave every inherited stand-in defective
     until its own lane acted. 0.9 rather than the minimum 0.85,
     because 0.85 clears paper by 0.05 - inside the noise of where in a
     gradient a sample lands - and a floor that only just passes at one
     sample point is not a floor. This is a SHIPPING state: row 16
     renders in production exactly where media has not arrived. */
  opacity: 0.9;
  pointer-events: none;
}
.ui-plate-standin .ui-icon { inline-size: 22px; block-size: 22px; }
/* THE PLATE'S META ROW, and the separator that does its spacing.
   HOISTED HERE FROM target-app/client/trips/room.ts (class 194's cure
   at the wave-2 landing). The rules below were authored in the trips
   room for the caption the media viewer renders, and then the caption
   moved into that viewer while the CSS stayed behind - which is class
   194's own signature, THE CSS MUST MOVE WITH THE MODULE. The only
   thing in this tree that emits .ui-plate-meta is mountedPlate in
   this layer's own media-viewer, so this layer is where its rules
   belong; left in the room they reached no element on any shipped
   page, and every page that renders a mounted plate silently lost the
   S4 treatment below.
   THE GAP IS 0 BY THE SAME S4 REASONING, merged into the role's own
   rule rather than left as a second bare re-declaration of the name:
   two competing bare definitions of one class is the shape the
   exception registry recorded, so relocating it unmerged would move
   the defect a layer up instead of curing it. */
.ui-plate-meta { display: flex; gap: 0; font: var(--ui-type-meta); color: var(--ui-muted); }
/* S4: the middot does the WHOLE separator. A flex gap plus a ::before
   whose leading space collapses gave "You  .Marrakech" - a wide gap,
   then the dot glued to the next word, when every other separator on
   the page is balanced.
   THE GAP WAS CURED AND THE GLUED DOT WAS NOT, for a reason worth
   writing down: a CSS hex escape is terminated by a following SPACE,
   and that space is CONSUMED as the terminator. So a content written
   as space, escaped-middot, space - which READS as space-dot-space -
   computes to space-dot, and a second walk read exactly that back out
   of both engines while the rule sat there looking correct. Every
   character is escaped now, so none can be eaten by the one before it.
   The floor for this reads the DECODED value rather than matching the
   source text, because matching the source text is what let the
   pixels stay wrong for a whole round. */
.ui-plate-meta > span + span::before { content: "\0020\00b7\0020"; white-space: pre; }
/* THE OPENED ITEM (the signed media grammar, section 5). It COVERS: no
   bar, no scrim, no card. The bordered padded box this was until the
   album landed belonged to the primitive stage, where the viewer was a
   sample inside a gallery; the surface a person actually opens is
   full-bleed, on the active family's own page ground, with the media
   contained and centred.

   THE SIZE LAW, AND WHY IT IS A LINE RATHER THAN A SENTENCE. This block
   declared three rows - back, media, foot - with the media row taking
   the slack, AND GAVE THE SURFACE NO BLOCK SIZE, so inside a 750px page
   the viewer sized to its own CONTENT at 426px and there was no slack
   for the middle row to take. What a person met was a small plate near
   the top of a screen that was otherwise empty, with the acts pushed up
   under it; on the shared face half the screen was ground. The comment
   that used to stand here said the media row takes the slack so the
   picture gets the screen - a sentence describing a behaviour the bytes
   did not have, which is why the fresh-eyes walk found it and no floor
   here did. A block size of 100 percent is the whole cure and it belongs
   to the VIEWER, not to any page that hosts one: a covering surface
   takes its container's block.

   WHERE THE CONTAINER HAS NO DEFINITE BLOCK this resolves to auto and
   the viewer sizes to content again - the honest degradation, and the
   reason a host that asks this surface to cover says how tall it is.
   The tracked album pages do exactly that for their viewer states. */
.ui-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 12px;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  background: var(--ui-ground);
}
/* THE SEAL is the one licensed filled gold mass (the mass rule); the
   anchor stays outline-and-dot */
.ui-seal-mark { color: var(--ui-gold); }


.fs-home { position: relative; display: flex; flex-direction: column; min-block-size: 640px; border: 1px solid var(--ui-hairline); border-radius: 12px; overflow: hidden; margin-block-end: 28px; }
.fs-home-content { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding: 16px; padding-block-start: 52px; }
.fs-gear { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min); color: inherit; }
.fs-gear svg { inline-size: 20px; block-size: 20px; }
.fs-bar { display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--ui-hairline); }
.fs-seat { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; min-inline-size: var(--ui-tap-min); min-block-size: var(--ui-tap-min); padding: 4px 6px; text-decoration: none; color: inherit; opacity: 0.72; }
.fs-seat svg { inline-size: 22px; block-size: 22px; }
.fs-seat--lit { opacity: 1; }
.fs-seat--lit .fs-seat-label { font-weight: 600; }
.fs-seat--action .fs-seat-glyph { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; inline-size: 44px; block-size: 44px; border: 2px solid currentColor; border-radius: 50%; margin-block-start: -14px; background: var(--ui-surface, inherit); }
.fs-seat--action { opacity: 1; }
.fs-seat-label { line-height: 1.1; }


.fs-surface { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* ---------------------------------------------------------------- *
 * THE ORIENT INSTRUMENT, at the published design's own measurements.
 *
 * These rules are the design of record's, carried over from
 * design-owner/orient-composition/orient/orient-home.html - the file the
 * website's published Orient frame is a render of. They are not a
 * restyling: the picture went to the world as what the app looks like,
 * so the numbers are its numbers and a value invented here would be a
 * second design. (The brand's own recorded form is deliberately not
 * written in this sentence: the brand-identity floor holds that the
 * identity lives in catalog data and nowhere else in target-app, and it
 * judges by a plain substring over source text, so a comment naming the
 * brand reads to it exactly like a hardcoded one.)
 *
 * COLOUR REACHES THIS BLOCK ONLY THROUGH TOKENS. The owned-primitives
 * floor refuses a colour literal in the client, and the ground below is
 * derived from the canon's own ink and gold with color-mix, exactly as
 * the composition layer derives its wash and its recess.
 * ---------------------------------------------------------------- */
/* THE READOUT ROLE IS THE PUBLISHER'S, and this line only NARROWS it.
   primitives/styles.ts declares the role bare - the font and the tabular
   numerals - and it is the layer that publishes the roles, so a second
   bare declaration here defined the same name twice on every page that
   inlines this stylesheet (class 194: a role class living inside one
   component). The rule rode in with the Orient rebuild; the trunk has no
   such line. What this home actually needed was the COLOUR on its own
   rows, so it asks for exactly that, on a compound carrying its own class
   - the narrowing the role floor permits, and the same form the reading
   room already uses one room over.
   MEASURED, not assumed, before the change was made: at the trunk's own
   artifact the other readouts on these screens (the Add home's readout
   and the trips seat's row readout) already compute the SAME muted ink
   from their OWN component rules, so the bare line was redundant for them
   and dropping it moves nothing they draw. The computed value is not
   written here: the owned-primitives floor refuses a colour literal
   anywhere but the token source, and it reads source text, so a comment
   REPORTING a measured colour refuses exactly like a hardcoded one. It
   did, on the first cut of this block.
   NO BACKTICK MAY APPEAR IN THIS BLOCK: it lives inside the stylesheet's
   own template literal, and the first cut of this comment quoted two
   class names in backticks, which closed the literal and broke the file.
   The writer then could not run, so the artifact did not regenerate and a
   render comparison read the OLD bytes and reported nothing moved. */
.ui-readout.fs-row-readout { color: var(--ui-muted); }
/* TWO CHILDREN AND THEREFORE TWO ROWS: the mode block and the body. The
   honest line is INSIDE the mode block, so it costs its own height and
   not a grid row with a gap on each side. The template must match the
   child count exactly: at three children under an auto-1fr template the
   body landed in an IMPLICIT auto row, stopped stretching, and the
   record band's own end-alignment had no room to sit at the end of.
   Measured at the render, not read off the rule. */
.oi { display: grid; grid-template-rows: auto 1fr; gap: 12px; inline-size: 100%; }
.oi-top { display: grid; justify-items: start; inline-size: 100%; }
/* THE MODE ROW is a one-role family: text tabs whose active seat is ink
   under a SHORT UNDERLINE, which no other family in this estate uses. */
.oi-modes { display: flex; gap: 16px; }
.oi-mode { position: relative; border: none; background: none; padding: 12px 4px; min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min); font: var(--ui-type-label); color: var(--ui-muted); }
.oi-mode[aria-selected="true"] { color: var(--ui-ink); }
/* THE UNDERLINE IS THE SELECTED TAB'S OWN INK, for the reason the
   reading's scale tabs were cured for and found by the same sweep: a
   selection SHOWN on a control that cannot be chosen is the strongest
   false promise a screen makes, and a bar reading the ink token keeps
   full ink however its tab is dressed. Alive it is byte-identical, the
   line above being where the selected tab's ink is decided. */
.oi-mode[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 4px; inset-block-end: 8px; block-size: 2px; border-radius: 1px; background: currentColor; }
/* THE TABS THAT CANNOT BE CHOSEN (the walk's F3). A mode tab at rest is
   already muted, so a DEAD tab and an unchosen LIVE one were the same
   ink: four of the five controls on the app's first screen were inert
   and nothing on the face said so. The refused arm takes the estate's
   own reduced presence, one step behind muted, so an unchosen tab and an
   unbuilt one stop reading alike. */
.oi-mode[data-inert="not-wired"] { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); }
/* THE SEARCH MOMENT, in the Add home's own landed form (its intake bar
   under the same mark, at the same 0.55): the field recedes, its
   placeholder mutes, and the go circle recedes with it. The FORM carries
   the mark, so the reduction is applied to its parts rather than to the
   form itself - an opacity on the container would multiply into every
   child that carries its own. */
.oi-bar[data-inert="not-wired"] .oi-field { opacity: 0.55; }
.oi-bar[data-inert="not-wired"] .oi-field::placeholder { color: var(--ui-muted); }
.oi-bar[data-inert="not-wired"] .oi-go { opacity: 0.55; }
/* THE BODY IS A COLUMN AND COUNTS NOTHING. It was a four-row grid template
   (search, the unbuilt-mode line, the lead act, the record band) whose last
   row stretched; the unbuilt-mode line renders NOTHING on a built seat, so
   the built face drew three children into a four-track template, the record
   band landed in the third auto row and the 1fr track stood EMPTY after it:
   129 and 145 CSS px of leftover under the record at the owner's two
   geometries, measured in the production shape at e4fafadee (the design
   desk's ruling of 4 September, on the home-band instrument). A count that
   goes stale when a face draws or drops a row is the defect itself, so the
   column below names no rows: the band takes whatever slack there is from
   above, whatever sits above it (.oi-band). The Places mode body keeps its
   own two-row grid by naming its display (places-mode.ts). */
.oi-body { display: flex; flex-direction: column; gap: 12px; }
.oi-bar { display: flex; gap: 8px; align-items: center; inline-size: 100%; }
.oi-field { flex: 1; min-inline-size: 0; }
/* The go control is a CIRCLE beside the field, in the surface's one fill
   dress. It carries its own accessible name at the words desk's signed
   value: a control with a drawn arrow and no word is a control a reader
   who cannot see the arrow cannot use.

   THE SENTENCE ABOVE IS THE DESIGN OF RECORD'S OWN ("the go circle is
   the lead act in the role system's fill dress (the surface's only
   fill)") AND UNTIL THIS REFINEMENT THE RULE DREW THE OPPOSITE: a
   hairline ring in muted ink with no background, which is the design's
   own [aria-disabled] dress, hardcoded as the only dress this control
   could ever wear. The Orient instrument therefore had NO FILL AT ALL,
   in any state, on any face, while the comment certified one. The
   sentence is kept because it is the design's; the rules now draw it.

   ONE SLOT, TWO READINGS, which is the field family's own law (02a R2)
   and the shape the explore field already builds: the slot persists and
   its reading changes, so a control never vanishes and returns. The FILL
   is the live reading and the surface's single point of commitment. The
   RING is the off reading, and it is what every render this build makes
   carries today, because the renderer emits the refusal itself and the
   composed page's pending-door pass disables this control again on its
   way out. Both paths land on the same selector, so the drawn value
   follows the control's true state rather than a constant.

   THE RING DECLARES ITS OWN GROUND, and the ledger already wrote the rule:
   a dress that means transparent is DECLARED transparent, never left unset,
   because an absence of a rule is not a value but a place for somebody
   else's. This is ledger Candidate I on the exact seat the ledger names as
   still carrying it: a border and a radius on a <button> with no background,
   and the composition's door pass disables that button, so every major user
   agent supplies its own - rgba(239,239,239,0.3) over a dark ground, a pale
   disc in the precise seat a design lift had removed a fill from. The B3
   build cured its own face and filed this one. This commission certifies
   every DRAWN PART of a refused control, and a ground the user agent paints
   is a drawn part, so the filed half comes home here. THE TWO READINGS BOTH
   CARRY IT, which is why this paragraph outlives the single rule it was
   written against: the live arm declares var(--ui-ink) and the off arm
   declares none, so neither reading leaves this control's ground for a user
   agent to supply. */
.oi-go { display: grid; place-items: center; inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min); flex: none; border: none; border-radius: 50%; background: var(--ui-ink); color: var(--ui-ground); }
.oi-go[aria-disabled="true"], .oi-go:disabled { background: none; border: 1px solid var(--ui-hairline); color: var(--ui-muted); }
.oi-go svg { inline-size: 20px; block-size: 20px; }
/* THE DIRECTION OF TRAVEL MIRRORS, at the two seats that draw it. The
   walk measured the go control's icon path byte-identical in both
   editions (M5.5 12h13M13 6.5l5.5 5.5-5.5 5.5), an arrow pointing
   right, in an edition that reads right to left - with the control
   itself correctly placed at the start edge, so it sat on the left of
   the field and pointed away from where the reader was going. The same
   glyph is reused on the full-search row, and it was unmirrored there
   too, which is why one rule names both seats rather than each fixing
   its own.
   THE IDIOM IS THE ESTATE'S, not this act's: the reading's back control
   already mirrors a chevron at [dir="rtl"] .rd-back-glyph, which is
   what made this an inconsistency inside the build rather than a missing
   convention. It is written as the RTL arm because the drawing is
   authored pointing along a left-to-right read, so the mirror is the
   deviation and the default is the file's own bytes. */
[dir="rtl"] .oi-go svg,
[dir="rtl"] .fs-glyph-onward svg { transform: scaleX(-1); }
/* THE LEAD ACT AS A ROW: the anchor dot, the act, the fix trailing. */
.oi-here-act { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; inline-size: 100%; border: none; background: none; padding: 12px 2px; color: var(--ui-ink); font: var(--ui-type-label); text-align: start; }
.oi-here-act .ui-chip-dot { align-self: center; }
.oi-here-act .oi-opt-main { flex: none; min-inline-size: auto; overflow: visible; }
.oi-here-meta { margin-inline-start: auto; min-inline-size: 0; }
.fs-anchor-dot { background: var(--ui-gold); }
/* AND THE ANCHOR MARK GOES OUT WHEN ITS ACT IS REFUSED. This one was the
   loudest instance of the ruled class in the estate and no walk had named
   it: gold is the anchor meaning, canon licenses it to exactly that, and
   on the app's FIRST SCREEN it was burning at full strength inside the
   dead Clear act while the label beside it receded. The country page's own
   rule wrote this down for its lead act in almost these words - the page's
   one gold point of light belonged to the control that does nothing - and
   the trips room wrote it for its baseline act; this mark is the same
   ui-chip-dot in the same family and simply had no refused arm.
   BOTH SEATS ARE COVERED BY ONE RULE because it is keyed on the door
   pass's OWN marking rather than on either act's class, which is the
   pattern the neighbouring dresses state: a control that has not been
   neutralised is not refused and is not touched. Found by sweeping what a
   refused subtree paints WITHOUT the color property, at a real browser. */
[data-inert="not-wired"] .fs-anchor-dot { background: var(--ui-inert-ink); }
/* THE RECORD sits at the foot: the ground rises to meet it, and a taller
   screen shows more of the record rather than more air. The auto margin is
   the anchoring (in a column, it absorbs every pixel of free space above
   the band, and only there, so the air sits BETWEEN the zones and never
   trails after the content); the clamped padding is the design's minimum
   between-zones air, kept so a short viewport still breathes. align-self
   is gone on purpose: in a column it would push the band to the inline end. */
.oi-band { display: grid; gap: 16px; justify-items: start; inline-size: 100%; margin-block-start: auto; padding-block-start: clamp(24px, 4svh, 40px); }
.oi-band-label { color: var(--ui-muted); }
/* THE ONE HONEST LINE about the two seats whose faces are unbuilt. It is
   the absence primitive's own grammar and its own landed sentence; what
   this scopes is its RANK, so a note about two tabs does not read at the
   same size as the record beneath it. R7's one line, said once. */
.oi .ui-state-absence { font: var(--ui-type-meta); margin: -6px 0 0; }
.oi-door .fs-row-main { color: var(--ui-muted); }
/* THE RECORD DEEPENS WITH THE CANVAS: three rows at phone height, five
   on a tall phone, the door to the rest always last. The design's own
   rule and its own breakpoint. */
/* THE SELECTOR CARRIES THE ROW'S OWN CLASS TOO, and that is not
   decoration: the shared row rule is written later in this same
   stylesheet at equal specificity, so a bare .oi-row-deep lost to it and
   the deep rows rendered at every height while this block claimed
   otherwise. Measured at the served render, not at the rule. */
.fs-row.oi-row-deep { display: none; }
@media (min-height: 860px) { .fs-row.oi-row-deep { display: flex; } }
.oi-cold-note { max-inline-size: 40ch; color: var(--ui-muted); }
.ad-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; inline-size: 100%; }
.ad-band-head h2 { margin: 0; }
.pp-base-act { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 0; color: var(--ui-ink); font: var(--ui-type-label); }
/* THE REFUSED BASELINE ACT, on the trips room's own R1 form: a label in
   ink is the affordance here, so a label that cannot be pressed mutes.
   Clear on the Orient home was ink at full strength beside a record it
   could not clear. */
.pp-base-act[data-inert="not-wired"] { color: var(--ui-muted); }
.tr-row--trip { padding-block: 8px; align-items: center; }
.tr-row-link { display: flex; flex: 1; color: inherit; text-decoration: none; }
.tr-trip-grid { flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; min-block-size: var(--ui-tap-min); align-content: center; }
.fs-row-glyph { align-self: center; display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; }
.fs-row-glyph svg { inline-size: 18px; block-size: 18px; }
.fs-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; inline-size: 100%; }
.fs-row { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding-block: 12px; border-block-end: 1px solid var(--co-row-rule, var(--ui-hairline)); min-block-size: var(--ui-tap-min); }
.fs-row:last-child { border-block-end: none; }
.fs-row-main { flex: 1; }
.fs-row-readout { flex: none; }
.fs-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fs-search-field { inline-size: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ui-hairline); border-radius: 10px; background: inherit; color: inherit; font: inherit; }
/* THE ENGINE'S OWN CLEAR CONTROL IS SUPPRESSED AT THE PUBLISHER (the B2
   walk's finding 1, 2026-09-02): webkit draws a native grey clear button
   inside every type=search field carrying a value, a dress from no part
   of this design, signed away by every pass-2 exhibit and the sheet's
   craft leg 8. The rule rides the field's ONE publisher (class 194), so
   every consumer of the family field - nearby, places, and whichever
   seat adopts it next - is closed by this line; explore's .ex-field
   carries its own copy for its own class. */
.fs-search-field::-webkit-search-decoration,
.fs-search-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.fs-doors { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-doorrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fs-tiles { display: flex; gap: 12px; }
.fs-tile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; justify-items: start; border: 1px solid var(--ui-hairline); border-radius: 10px; padding: 10px 14px; }
.fs-tile-count { font-variant-numeric: tabular-nums; }


/* THE OPENED ITEM'S DRESS (the signed media grammar, section 5).

   WHY IT LIVES HERE AND NOT IN THE PRIMITIVES STYLESHEET, where the
   viewer's own module does. The primitives stylesheet is on EVERY page
   this app composes, and this dress is on the two surfaces that show
   media - so putting it there put a media grammar into the country
   page's bytes, which is both dead weight and a real defect: three
   landed floors read the primitives stylesheet as the definition of
   what the shared layer contains, and they were right to fail. A
   surface's dress travels with the surface. The .ui-viewer grid stays
   in the primitives layer because that class IS the primitive's own,
   published by the layer that draws it; everything keyed md- is the
   media grammar's, and a page that renders the viewer includes this
   stylesheet with it. When the passport's media page lands as the
   grammar's second consumer, this block is what it lifts to a shared
   home - named now so the lift is a move rather than a rediscovery. */
.md-stage { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-block-size: 0; }
.md-stage .ui-plate { inline-size: 100%; }
.md-stage .ui-plate-mount { position: relative; }
/* The video's one control at rest, ON the media (ask 5.6). */
.md-play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 56px; block-size: 56px; border-radius: 50%; border: none;
  background: var(--ui-media-scrim); color: var(--ui-media-ink);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.md-play:active { transform: translate(-50%, -50%) scale(0.97); transition-duration: var(--ui-press-in); }
.md-play .ui-icon { inline-size: 22px; block-size: 22px; }
/* THE DURATION READOUT: a FACT on a scrim lozenge, deliberately outside
   the tap grammar so it can never read as a chip. */
.md-dur {
  position: absolute; inset-block-end: 6px; inset-inline-end: 6px;
  inline-size: max-content; block-size: max-content;
  color: var(--ui-media-ink); background: var(--ui-media-lozenge);
  padding-block: 1px; padding-inline: 6px; border-radius: 6px;
  pointer-events: none;
}
.md-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; inline-size: 100%; }
.md-itemmeta { margin: 0; }
/* ONE separator rule for the meta line's members. Every character is
   escaped, because a CSS hex escape is terminated by a following SPACE
   and that space is CONSUMED as the terminator - a content written as
   space, dot, space then computes to space-dot, and the glued dot sat
   in a shipped page for a whole round looking correct in the source. */
.md-itemmeta > span + span::before { content: "\0020\00b7\0020"; white-space: pre; }
.md-acts { display: flex; align-items: center; gap: 4px; inline-size: 100%; }
.md-icon-act {
  display: grid; place-items: center;
  inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--ui-muted); flex: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.md-icon-act:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.md-icon-act .ui-icon { inline-size: 20px; block-size: 20px; }
/* The local commit is optimistic and reads as kept: the mark takes the
   anchor ink the moment it is filled. */
.md-icon-act[aria-pressed="true"] { color: var(--ui-gold); }
.md-icon-act[disabled] { cursor: default; }
.md-icon-act[disabled]:active { transform: none; }
/* S10: the lead icon act sits ON the surface's ink column - a 44px box
   pads its glyph inward, so the row would otherwise start 10px in from
   every text-level element above it. */
.md-acts-lead { margin-inline-start: -10px; }
.md-pos { margin-inline-start: auto; }
/* R6.2's ONE mark, in the tapped control's own box: the act's own
   gold dot, breathing. It is the family's only loop. */
.md-inflight-dot {
  display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--ui-gold); flex: none;
  animation: md-breathe var(--ui-motion-breathe) infinite;
}
@keyframes md-breathe { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
/* R7.3: the failure is one meta line under the control, and nothing of
   the person's is lost. */
.md-couldnot { margin: 0; }
/* THE DESTRUCTIVE ACT: never the neutral icon set. A text-level control
   in its own treatment, separated by the family's hairline. */
.md-danger-zone { inline-size: 100%; border-block-start: 1px solid var(--ui-hairline); padding-block-start: 8px; }
.md-danger {
  border: none; background: none; padding-block: 10px; padding-inline: 2px;
  min-block-size: var(--ui-tap-min);
  font: var(--ui-type-label); color: var(--ui-ink);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; text-align: start;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.md-danger:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
/* THE BACK ROW, carried from the passport's page-head dress so a media
   surface opens the same way wherever it is met. */
.md-back {
  display: inline-flex; align-items: center; gap: 4px;
  min-block-size: var(--ui-tap-min);
  color: var(--ui-muted); text-decoration: none; font: var(--ui-type-label);
  padding-inline-end: 10px; margin-inline-start: -4px;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.md-back:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.md-back .ui-icon { inline-size: 18px; block-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .md-inflight-dot { animation: none; opacity: 0.7; }
  .md-play:active, .md-icon-act:active, .md-danger:active, .md-back:active { transform: none; }
  .md-play:active { transform: translate(-50%, -50%); }
}

/* THE ALBUM PAGE */
.md-album { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; inline-size: 100%; }
.md-pagehead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; inline-size: 100%; }
.md-pagemeta { margin-block-start: -6px; }

/* THE GRID. Three equal columns at a 4px gap, tiles at 1/1, at every
   geometry: the column count is a function of what the grid is FOR and
   never of which room it is in. */
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; inline-size: 100%; }
/* ROW 17'S DENSE-GRID STATE (the design owner's J1 verdict, and its
   words amended at the recheck to bind the SURFACE rather than per-tile
   abutment). Two adjacent 1px edges across a 4px gap double into a
   visible rule, so a dense grid of plates reads as a grid OF PLATES
   rather than as photographs. A tile sitting against ground - the
   viewer's, a strip's, a share sheet's picks - KEEPS its edge, by
   construction rather than by convention: only grid membership drops
   it. The state binds at any count, one photograph included, because a
   dress that re-grows an edge when an album shrinks to one photo is a
   state change carrying no meaning to the person. Geometry is
   unchanged: box-sizing is border-box, so the tile stays 112px at 384
   and 121.33px at 412. */
.md-grid .ui-plate-mount { border: none; }
/* A PREVIEW IS THE SAME GRID, CLIPPED TO ONE ROW - not a second grid
   and not a sliced list. */
.md-grid--preview { grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; }
.md-tile { position: relative; gap: 0; }

/* THE SECTION and its head. The head never renders over nothing. */
.md-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; inline-size: 100%; }
.md-band-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; }
.md-band-title { min-inline-size: 0; overflow-wrap: anywhere; }
/* The head's members, joined by the family's one separator. Every
   character escaped: a CSS hex escape is terminated by a following
   space and that space is CONSUMED, so an unescaped space-dot-space
   computes to space-dot and glues the dot to the next word. */
.md-band-title > span + span::before { content: "\0020\00b7\0020"; white-space: pre; }

/* THE LENS: the canon select-one dress. Text tabs, active is ink plus a
   short underline. Never chips. */
.md-lens { display: flex; gap: 24px; inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.md-lens-tab {
  position: relative; border: none; background: none;
  padding-block: 8px 12px; padding-inline: 2px;
  min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min);
  text-align: start; font: var(--ui-type-label); color: var(--ui-muted); cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.md-lens-tab:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.md-lens-tab[aria-selected="true"] { color: var(--ui-ink); }
.md-lens-tab[aria-selected="true"]::after {
  content: ""; position: absolute;
  inset-inline-start: 2px; inset-block-end: -1px;
  inline-size: 26px; block-size: 2px; background: var(--ui-ink);
}

/* THE TILE. At rest a LINK wrapping its own mount - the tile equivalent
   of the family's row link, and at 112px on a 384 device far over the
   44px floor. In selection mode the same tile is a BUTTON, because
   there the tap picks rather than opens. */
.md-tile-link, .md-tile-pick {
  display: block; inline-size: 100%;
  border: none; background: none; padding: 0;
  cursor: pointer; color: inherit; text-decoration: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.md-tile-link:active, .md-tile-pick:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.md-tile-mark {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  display: grid; place-items: center;
  color: var(--ui-media-ink); pointer-events: none;
}
.md-tickdisc {
  inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: var(--ui-media-scrim); border: 1.5px solid var(--ui-media-edge);
  display: grid; place-items: center; color: var(--ui-media-ink);
  transition: border-color var(--ui-motion-state);
}
.md-tickdisc .ui-icon { inline-size: 12px; block-size: 12px; }
.md-tile-pick[aria-pressed="true"] .md-tickdisc { border-color: var(--ui-media-ink); }

/* THE SELECTION FOOT: one fill, one standing act beside it. */
.md-selectfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; inline-size: 100%; }

@media (prefers-reduced-motion: reduce) {
  .md-lens-tab:active, .md-tile-link:active, .md-tile-pick:active { transform: none; }
}

/* the surface */
.tp-room { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; inline-size: 100%; }
.tp-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: var(--ui-tap-min); padding-block: 0; padding-inline: 0;
  border: none; background: none; color: var(--ui-muted); font: var(--ui-type-label);
  text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-back:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.tp-back-glyph { inline-size: 16px; block-size: 16px; rotate: 180deg; }

/* the head */
.tp-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; inline-size: 100%; }
.tp-head--home { inline-size: 100%; }
.tp-head--empty { gap: 8px; }
.tp-dates { color: var(--ui-muted); }
.tp-headmeta { display: inline-flex; align-items: center; gap: 6px; }
.tp-livedot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ui-muted); flex: none; }
.tp-absence { color: var(--ui-muted); }
.tp-teach { max-inline-size: 44ch; }
.tp-headlist { margin-block-start: 6px; }
.tp-headlist .tp-row { border-block-start: 1px solid var(--ui-hairline); }

/* bands */
.tp-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; inline-size: 100%; }
.tp-bandhead { display: flex; align-items: baseline; gap: 8px; inline-size: 100%; }
.tp-bandhead .ui-type-title { flex: 1; }
.tp-note { max-inline-size: 46ch; }
.tp-empty { max-inline-size: 46ch; color: var(--ui-muted); }
.tp-offline { inline-size: 100%; }
.tp-band-error { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; inline-size: 100%; }

/* rows: ONE 60px pitch, every row link at the 44px floor */
.tp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.tp-group { padding-block: 14px 4px; border-block-end: 1px solid var(--ui-hairline); }
/* The continue seat's glyph: this layer's own name, at the drawn row's
   own 18px (the why is at continueSeat). */
.tp-row-glyph { align-self: center; display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; }
.tp-row-glyph svg { inline-size: 18px; block-size: 18px; }
.tp-row {
  display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  padding-block: 8px; border-block-end: 1px solid var(--ui-hairline);
  min-block-size: var(--ui-tap-min); inline-size: 100%;
}
.tp-row:last-child { border-block-end: none; }
/* THE ROW AND THE ROW THAT IS NOT A DOOR SHARE ONE LAYOUT BLOCK, so
   "the same pixels" is structural rather than a pair of rules somebody
   has to keep equal. A pending door renders as the row-fact class: the
   design owner's ruling is that a door with no destination is a
   DISABLED door, and the family's cure for disabled is deletion of the
   AFFORDANCE, never a third dress. So the label, the meta line, the
   mono readout and every box below are identical, and what goes is the
   pointer cursor, the press transform, the focus stop and the link
   semantics - all of which live on the row-link class alone. */
.tp-row-link, .tp-row-fact {
  display: flex; flex: 1; gap: 8px; align-items: center; justify-content: space-between;
  min-block-size: var(--ui-tap-min); border: none; background: none; padding: 0;
  color: inherit; font: inherit; text-align: start;
}
.tp-row-link {
  cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-row-link:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.tp-row-main { flex: 1; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; justify-items: start; }
/* A NAME IS THE PERSON'S OWN WORDS and may have no break in it at all.
   A flex item keeps its min-content width by default, so one long
   unbroken token pushes a phone sideways however narrow the column is.
   These two rules are what stop that, and they belong on the containers
   that hold authored text rather than on the page. */
.tp-row-main > *, .tp-head > *, .tp-teach, .tp-note, .tr-entry-body, .te-words > * { overflow-wrap: anywhere; min-inline-size: 0; }
.tp-live-name, .tp-door { overflow-wrap: anywhere; }
/* EVERY flex child that carries authored words, not only the ones on
   the list: a person's name in the sheet, a trip's name in a
   destination tab or a back row, the composer's prefilled place. Each
   is a flex item and each keeps its min-content width without this. */
.tp-person-main, .tp-person-main > *, .tp-back, .cp-tab, .cp-fact, .cp-landing, .tp-confirm-consequence {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
/* And the tab row itself wraps rather than pushing the phone wider. */
.cp-tabs { flex-wrap: wrap; }
.tp-row-readout { flex: none; color: var(--ui-muted); }
.tp-live-name { font: var(--ui-type-title); }
.tp-door { color: var(--ui-muted); }
.tp-door .tp-row-main { font: var(--ui-type-body); }
.tp-fact {
  display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  inline-size: 100%; padding-block: 10px; border-block-end: 1px solid var(--ui-hairline);
}
.tp-fact:last-of-type { border-block-end: none; }

/* the people row */
.tp-crew { display: flex; align-items: center; gap: 0; inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.tp-crew .tp-row-link { align-items: center; min-block-size: var(--ui-tap-min); }

/* entries */
.tj-entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; inline-size: 100%; }
.tr-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; inline-size: 100%; padding-block: 2px; padding-inline-start: 16px; border-inline-start: 2px dashed var(--ui-hairline); }
.tr-entry-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; min-block-size: 0; inline-size: 100%; }
.tr-entry-meta { letter-spacing: 0.01em; }
.tr-entry-body { max-inline-size: 46ch; }
.tr-entry-plate { display: block; margin-block-start: 6px; inline-size: 100%; }
.tr-entry-plate .ui-plate-mount { max-inline-size: 280px; }

/* the album grid */
/* THE BAND'S OWN TWO-COLUMN CAPTIONED GRID IS RETIRED (the signed media
   grammar's asks 2.1 and 2.2): the band renders the album's preview
   grid now, so a second grid dress here would be a shadow copy that can
   drift. The captions it carried are answered one tap in. */
/* S4's two plate-meta rules HOISTED OUT to the primitives layer at the
   wave-2 landing (class 194's cure). They dressed the caption the media
   viewer renders, and .ui-plate-meta is emitted only by that viewer,
   which this room does not call - so here they were a bare re-definition
   of a published role that reached no element, while every page that
   does render a mounted plate went without them. The rules and the whole
   S4 reasoning move unchanged to target-app/client/primitives/styles.ts;
   the S4 floor in this room's test reads them there, off this room's own
   composed page, because the room still inlines that layer. */

/* acts (section R's dresses) */
.tp-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; inline-size: 100%; }
.tp-fill-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--ui-tap-min); padding-block: 10px; padding-inline: 22px;
  border: none; border-radius: 999px;
  background: var(--ui-ink); color: var(--ui-ground);
  font: var(--ui-type-label); cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-fill-act:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
/* R1: a lead act with nothing to commit DELETES its affordance - the
   label stands in the slot in muted ink, with no pill at all. */
/* S10: ON the ink column. Every text-level element sits on the 20px
   column; these started at 22, which is a visible wobble at the exact
   place the eye stops. The inline padding goes rather than being
   compensated, so the glyph starts where the column is. */
/* AND THE SAME DRESS REACHES THE OTHER REFUSED STATE, which until now it
   did not. R1's rule is about a lead act that CANNOT BE PRESSED, and this
   surface has two ways of being that: nothing to commit, which the
   renderer marks with --off, and NOT BUILT YET, which the composition's
   door pass marks with data-inert. One meaning, one dress, and only one
   of the two states was wired to it - so the walk met "Create a trip"
   wearing the FILLED WHITE LEAD PILL at full opacity, the most prominent
   control on the screen, promising the surface's one commitment and
   doing nothing. The only thing separating it from a live act was the
   cursor, which a phone never shows.
   THE DRESS IS NOT NEW AND IS NOT THIS LANE'S: it is the R1 arm three
   lines up, joined by the state it was always about. */
.tp-fill-act--off,
.tp-fill-act[data-inert="not-wired"] { background: none; color: var(--ui-muted); padding-inline: 0; cursor: default; }
.tp-fill-act--off:active,
.tp-fill-act[data-inert="not-wired"]:active { transform: none; }
.tp-base-act {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: var(--ui-tap-min); border: none; background: none;
  padding-block: 10px; padding-inline: 0;
  color: var(--ui-ink); font: var(--ui-type-label); text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-base-act:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.tp-base-act--off,
.tp-base-act[data-inert="not-wired"] { color: var(--ui-muted); cursor: default; }
.tp-base-act--off:active,
.tp-base-act[data-inert="not-wired"]:active { transform: none; }
.tp-base-act .ui-chip-dot { background: var(--ui-gold); }
/* AND A DISABLED ONE MUTES ITS MARK WITH ITS LABEL. This rule was
   unconditional, so at zero picks the album's inert standing act kept
   the family's licensed gold in-flight mark while its label went muted:
   the loudest ink in the row belonged to the one control that could not
   be used, which inverts R3's hierarchy at the exact moment the surface
   is saying nothing is actionable yet. R1's disabled-deletes-the-
   affordance reads the same on a mark as on a fill. The dress is the
   trip room's and pre-dates the album; the album is the surface that
   first rendered it disabled, and the walker's eye caught it there. */
/* A REFUSED MARK CONSUMES THE ONE TOKEN. Found by this act's own sweep of
   what a refused subtree paints WITHOUT the color property, which is the
   half a rule about ink cannot reach: this dot is a background, so the
   home's ink never touches it and it kept whichever answer its family had
   written. Three families had written three - two at var(--ui-muted) and
   one at the mix - so on the trips home the dot sat at 163,158,144 beside
   a label at 142,138,128: a drawn part of a dead control BRIGHTER than the
   control, which is the ruled class one grain over. It is not currentColor
   because alive this mark is GOLD and its label is ink, so following the
   label would put out the anchor. It is the refused ink by name. */
/* AND THE TWO REFUSED STATES' MARKS PART COMPANY HERE, because the ink
   above them already has. This arm was written once for both: a lead act
   with nothing to commit (--off) and one whose screen is not built
   (data-inert) read the same, so they shared a dress. The composition's
   one home now decides the ink of the data-inert half and not the --off
   half, so a shared mark would sit at the LIVE muted step beside a label
   at the refused one on exactly one of the two. Each mark follows its own
   label: --off stays at muted with its muted label, and the refused arm
   takes the refused token. The album's floor holds the --off half by
   name. */
.tp-base-act--off .ui-chip-dot { background: var(--ui-muted); }
.tp-base-act[data-inert="not-wired"] .ui-chip-dot { background: var(--ui-inert-ink); }
.tp-head-act { margin-block: -10px -12px; }

/* the destructive dress: ONE treatment, wherever it appears (the second
   pass's R1: the sheet's option and the room's act read alike) */
.tp-roomacts { inline-size: 100%; padding-block-start: 12px; border-block-start: 1px solid var(--ui-hairline); }
.tp-danger-zone { inline-size: 100%; margin-block-start: 4px; padding-block-start: 12px; border-block-start: 1px solid var(--ui-hairline); }
.tp-danger {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: var(--ui-tap-min); border: none; background: none;
  padding-block: 10px; padding-inline: 0;
  color: var(--ui-muted); font: var(--ui-type-label); text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-danger:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }

/* R6: the in-flight state, IN the control that was tapped */
.tp-inflight { cursor: default; }
.tp-inflight:active { transform: none; }
.tp-inflight .ui-chip-dot { background: var(--ui-gold); animation: ui-breathe var(--ui-motion-breathe) infinite; }
.tp-inflight-count { color: inherit; }
.tp-couldnot { inline-size: 100%; }
@keyframes ui-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.tr-viewblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; inline-size: 100%; }
.tr-door { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; inline-size: 100%; }

/* THE JOURNAL PAGES (T-11). Days are separated by a hairline and air,
   never by cards; the entry plates sit UNDER the words at a deliberate
   width rather than filling the column. */
.tj-day { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; inline-size: 100%; padding-block-start: 4px; }
.tj-day + .tj-day { padding-block-start: 18px; border-block-start: 1px solid var(--ui-hairline); }
.tj-dayhead { display: flex; align-items: baseline; gap: 8px; inline-size: 100%; }
.tj-dayhead .ui-type-title { flex: 1; }
/* R3's pinned-commit note: when the journal outgrows the canvas its one
   fill PINS to the foot so the commit never leaves reach, and the flow's
   end padding equals the foot's height so it never covers the last
   entry. A SHORT journal is not pinned and sits in the flow (G4). */
.tj-foot { inline-size: 100%; padding-block-start: 12px; }
/* THE PINNED PAGE IS THREE ROWS, and the foot is one of them.
   The back link takes its height, the journal takes what is left and
   scrolls INSIDE that row, and the foot takes its own intrinsic
   height - whatever that turns out to be in this phase, at this width,
   in this language. Nothing floats over anything, so nothing can cover
   the last row: it is a layout invariant rather than a number kept in
   sync with a control's dress. */
.tj-page { inline-size: 100%; }
.tj-page--pinned {
  /* THE PAGE FILLS ITS CONTAINER, NEVER THE VIEWPORT.
     A viewport unit claims the whole screen - and this page lives in a
     content box that is the screen MINUS THE BAR, which M2 says stays
     where it is. Measured on the rig: the pinned commit landed at
     686..730 against a 675px content box, and 851..895 against 840.
     Not merely out of reach: not on the screen, at both of the owner's
     geometries, on both engines. And because the page was taller than
     its box, the "pinned" foot scrolled away with everything else.
     A page must not assume it owns the viewport when the bar is
     still there. The host gives the height; this fills it. */
  block-size: 100%;
  min-block-size: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
/* SURPLUS CANVAS BECOMES GROUND BELOW THE CONTENT, NOT AIR BETWEEN IT.
   The room is a grid, and a grid row track taller than its content
   distributes the surplus to the TRACKS by default. In a fixed-height
   shell that put the extra space BETWEEN the head's three lines: at
   412x915 the head measured 150.61px against the 78.00px the same
   block renders everywhere else, 93 percent taller than design
   density, with every child's margin still 0. It is the same reading
   failure the margin reset was landed to cure - three facts stacked
   down the page instead of the one glance a head is for - arriving
   through a different mechanism. 02a G1: the ground sits BELOW the
   content, and air never sits above the first content. */
.tj-page--pinned > .tp-room { overflow-y: auto; min-block-size: 0; overscroll-behavior: contain; align-content: start; }
.tj-foot--pinned {
  background: var(--ui-ground); border-block-start: 1px solid var(--ui-hairline);
  padding-block: 12px 16px;
}
/* R3's reachability floor (d) is now met by the page's own rows above,
   not by reserving a guessed height in the flow. The rule that did it
   - a tp-room--pinned-foot selector holding back a fixed strip of end
   padding - is gone. That constant was the RESTING foot's height, and
   nothing kept it true once the foot grew a could-not line or wrapped
   its label in another language, so the reservation quietly stopped
   covering the row it existed to protect. Sticky positioning was what
   created the hazard; the hazard is removed rather than measured. */
/* THE ENTRY PAGE'S HERO PLATE KEEPS THE FAMILY'S MOUNT DRESS.
   Full-bleed was the intent - the frame rule's own reading of a
   phone-first plate - but stripping the radius and the side hairlines
   made it the ONE plate on the page that does not read as a frame. A
   walker measured it at 344x229 and reported a large unstyled grey
   block at the top of the page, where every small plate beside it
   reads as a frame waiting for a picture. An empty plate has to look
   INTENDED, and this one alone did not. It is still the widest plate
   on the page; it is no longer a different KIND of thing. */
.te-plate { inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.te-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-inline-size: 52ch; }
.tp-fact-line { color: var(--ui-muted); }

/* THE COMPOSER (T-11). A self-contained modal task over its opener: the
   bar hides with it (D-C2, canon N5), the back-link keeps the draft, and
   Discard is the destructive text control in the head's trailing slot. */
.cp-headrow { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; }
.cp-facts { margin-block-start: -4px; }
.cp-facts .tp-row { padding-block: 4px; }
.cp-fact { color: var(--ui-ink); }
.cp-fact--empty { color: var(--ui-muted); }
.cp-words { inline-size: 100%; }
/* The words are the ONE field, first and largest. */
.cp-field {
  inline-size: 100%; min-block-size: 168px; padding-block: 12px; padding-inline: 16px;
  resize: none; border: 1px solid var(--ui-hairline); border-radius: 10px;
  background: none; color: var(--ui-ink); font: var(--ui-type-body);
  -webkit-appearance: none; appearance: none;
}
.cp-field::placeholder { color: var(--ui-muted); }
.cr-field { inline-size: 100%; }
.cr-name { min-block-size: 48px; }
.cp-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; inline-size: 100%; }
.cp-thumbs { display: flex; gap: 8px; inline-size: 100%; flex-wrap: wrap; }
.cp-thumb {
  inline-size: 72px; block-size: 72px; border-radius: 4px;
  border: 1px solid var(--ui-hairline); overflow: hidden; position: relative;
  background: var(--ui-card); display: grid; grid-template-columns: minmax(0, 1fr);
}
.cp-thumb > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* THE COMPOSER IS THREE ROWS, so its foot never moves and never
   covers - the journal page's own treatment rather than a second
   mechanism for the same promise. The head row takes its height, the
   draft takes what is left and scrolls INSIDE its row, the foot takes
   its own intrinsic height. A wrapped row of thumbs can no longer
   push the commit past the bottom of the screen, because the commit
   is not in the scrolling row. */
.cp-page {
  /* Its container's height, not the viewport's - see the pinned
     journal page above. The composer MAY cover the bar (M2 allows it),
     but a page that assumes it owns the viewport is wrong wherever it
     is mounted without one, and this one put its only commit at 758
     against a 750 pixel screen with no photos on the page at all. */
  block-size: 100%;
  min-block-size: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.cp-page > .tp-room { overflow-y: auto; min-block-size: 0; overscroll-behavior: contain; align-content: start; }
/* The foot never moves (R3): the landing line, then the one fill. */
.cp-foot {
  inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  padding-block: 10px 16px; background: var(--ui-ground);
  border-block-start: 1px solid var(--ui-hairline);
}
.cp-landing { max-inline-size: 46ch; }
/* The select-one dress (R1): text tabs, active = ink and a short
   underline. Never chips, and never navigation. */
.cp-tabs { display: flex; gap: 20px; inline-size: 100%; }
.cp-tab {
  border: none; background: none; padding-block: 10px 8px; padding-inline: 0;
  min-block-size: var(--ui-tap-min); cursor: pointer;
  color: var(--ui-muted); font: var(--ui-type-label); position: relative;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.cp-tab:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.cp-tab--on { color: var(--ui-ink); }
.cp-tab--on::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 6px;
  inline-size: 24px; block-size: 2px; background: var(--ui-ink);
}
.cr-kind { padding-block-end: 4px; }

/* THE CONSCIOUS SHARE SHEET: a pick's state is ink and edge, never
   geometry (R4). */
.sh-picks { display: flex; gap: 8px; flex-wrap: wrap; inline-size: 100%; padding-block: 6px 2px; }
.sh-pick {
  inline-size: 72px; block-size: 72px; padding: 0; border-radius: 4px;
  border: 1px solid var(--ui-hairline); overflow: hidden; position: relative;
  background: var(--ui-card); cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.sh-pick:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.sh-pick > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sh-pick--on { border: 2px solid var(--ui-ink); }
.sh-pick--off { opacity: 0.28; }
.sh-pick--private::after {
  content: ""; position: absolute; inset-inline-end: 4px; inset-block-end: 4px;
  inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ui-ink);
}
.sh-where { padding-block: 0 2px; }
.sh-standing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; inline-size: 100%; padding-block: 4px 0; }
.sh-acts { padding-block-start: 4px; }
/* S5: ONE dress for the toggle, at the tap floor, showing its state.
   It was a full-width 342x30 bordered pill with no mark of any kind,
   so nothing on screen said whether it was on or off - on the control
   that decides where a photo is kept. R1's toggle dress IS a bordered
   chip, so the border was never the defect; the width, the height and
   the missing pressed state were. */
.sh-keep-toggle {
  justify-self: start;
  min-block-size: var(--ui-tap-min);
  padding-block: 10px;
  padding-inline: 14px;
  gap: 10px;
}
.sh-keep-toggle::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-muted);
  flex: none;
}
.ui-chip--on { border-color: var(--ui-ink); color: var(--ui-ink); }
.sh-keep-toggle.ui-chip--on::before {
  border-color: var(--ui-ink);
  background: var(--ui-ink);
  box-shadow: inset 0 0 0 3px var(--ui-card);
}

/* THE SHEETS (T-05's people sheet; the family's one confirm shape).
   A sheet is a panel over the surface it rose from: the scrim dims,
   the sheet anchors to the foot within reach, and the surface beneath
   does not move or scale (M2). A person's options open UNDER their
   name inside the same row, marked by an ink EDGE and never by
   geometry (R4). */
.tp-under { display: contents; }
/* THE OVERLAY ROOT: WHERE "OVER THE SURFACE" BECOMES TRUE.
   The scrim and the panel were positioned absolute with no positioned
   ancestor above them - tp-under is display:contents and the emitted
   document's body is not positioned - so they resolved against the
   INITIAL CONTAINING BLOCK: the top of the DOCUMENT, not the phone.
   Open a sheet from a room scrolled two screens down and it anchored
   to the foot of the whole page, above the person entirely, while the
   scrim dimmed a region nobody was looking at.
   Position fixed is the fix: the panel now anchors to the foot of the VIEW,
   which is where the person is, and the scrim covers the view rather
   than a slice of the document.
   The panel takes the root's full width, which on a phone is the whole
   screen - the same as before. It is deliberately NOT bounded to some
   narrower column here: no other surface in this app declares an app
   column, and a sheet that alone stopped short of the page edge would
   read as a different product from the room it rose from. When the
   estate grows one, this inherits it.
   ONE THING A HOST CAN STILL DO TO THIS, named rather than assumed: a
   fixed element positions against the nearest ancestor carrying a
   transform, a filter, a perspective, will-change or paint/layout
   containment, not against the viewport. Nothing in the emitted page
   does that - every transform here is on a leaf control's press state
   - but a host that mounted a sheet inside an animating or contained
   wrapper would move the anchor back without changing a line of this.
   Whoever wires the mount owns that. */
.tp-overlay {
  position: fixed; inset: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
}
.tp-scrim { position: absolute; inset: 0; background: var(--ui-scrim); z-index: 2; }
/* A FROZEN TASK CLOSES EVERY WAY OUT THAT MARKUP OWNS.
   The scrim keeps dimming - the sheet is still modal - but it is no
   longer a dismiss, and inert takes it out of the pointer and focus
   paths rather than only out of the markup's action table. The root
   carries the same flag so that a runtime owning back, Escape and the
   swipe has ONE state to read instead of inferring it from a button.
   No such runtime exists in this tree yet, and those three routes are
   owed rather than closed. */
.tp-overlay[data-frozen="true"] .tp-scrim { cursor: default; }
/* THE BACKGROUND DOES NOT SCROLL AWAY UNDER AN OPEN SHEET - as far as
   markup can hold that. A drag on the scrim does not become a scroll
   of the room (touch-action), and a scroll that reaches the end of the
   panel's own content stops there instead of chaining to the page
   (overscroll-behavior).
   What is NOT claimed here: a wheel or a keyboard PageDown over the
   scrim on a desktop still reaches the document. A full lock means
   marking the scrolling element itself, which is the host document's
   body - a thing a render function does not have. That is the
   runtime's half, and it is named rather than assumed. */
.tp-overlay { overscroll-behavior: contain; }
.tp-scrim { touch-action: none; }
.tp-sheet {
  position: relative; inline-size: 100%; z-index: 3;
  background: var(--ui-card); border: 1px solid var(--ui-hairline); border-block-end: none;
  border-start-start-radius: 16px; border-start-end-radius: 16px;
  padding-block: 8px 20px; padding-inline: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  box-shadow: var(--ui-sheet-lift);
  /* A SHEET THAT CANNOT OUTGROW THE SCREEN. Seven people fit; twenty
     five do not, and an unbounded panel would put its head and its
     first rows above the top of the phone with no way to reach them.
     It is bounded to the viewport and scrolls inside itself, which is
     what "the sheet scrolls" has to mean to be true. */
  max-block-size: 82svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tp-sheet-grab { inline-size: 36px; block-size: 4px; border-radius: 2px; margin-block: 0 10px; margin-inline: auto; background: var(--ui-hairline); }
.tp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; padding-block: 2px 4px; }
.tp-sheet-head .ui-icon-act { margin-inline-end: -12px; }
.tp-sheet > .tp-note, .tp-sheet > .tp-acts, .tp-sheet > .ui-type-body { padding-block-start: 12px; }
.tp-confirm-consequence { max-inline-size: 46ch; }
.tp-person { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.tp-person:last-child { border-block-end: none; }
.tp-person-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-block-size: 52px; padding-block: 6px; padding-inline: 0; inline-size: 100%;
  border: none; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-person-row:active { transform: scale(0.98); transition-duration: var(--ui-press-in); }
.tp-person-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; justify-items: start; flex: 1; }
.tp-person--open .tp-person-row { color: var(--ui-ink); }
/* The ink EDGE that marks the open person (R4: state, never geometry). */
.tp-person-opts {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: 100%;
  padding-block: 0 8px; padding-inline-start: 14px;
  border-inline-start: 2px solid var(--ui-muted); margin-block: 0 10px;
}
.tp-opt {
  display: flex; align-items: center; inline-size: 100%; min-block-size: var(--ui-tap-min);
  border: none; background: none; padding: 0; color: var(--ui-ink); font: var(--ui-type-body);
  text-align: start; cursor: pointer; border-block-end: 1px solid var(--ui-hairline);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.tp-opt:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.tp-opt:last-child { border-block-end: none; }
.tp-opt--done { color: var(--ui-muted); cursor: default; }
.tp-opt--done:active { transform: none; }
/* The second pass's required change R1: the sheet's destructive option
   takes THE ROOM'S destructive treatment - muted ink, label voice, its
   own hairline separation from the neutral option above it. Two dresses
   for one meaning inside one family is class 5. */
.tp-person-opts .tp-opt.tp-danger {
  font: var(--ui-type-label); color: var(--ui-muted);
  border-block-end: none;
}
/* THE SEPARATION ONLY WHEN THERE IS SOMETHING TO SEPARATE FROM.
   This rule exists, by its own earlier comment, to give the
   destructive option its own hairline apart from the neutral one above
   it - and when the add-friend act was retired, the opened person had
   only the destructive option left, so the rule painted a hairline
   with nothing above it. The sibling combinator says the thing the
   comment always said. */
.tp-person-opts .tp-opt + .tp-opt.tp-danger {
  margin-block-start: 10px; padding-block-start: 10px;
  border-block-start: 1px solid var(--ui-hairline);
}
.tp-opt:has(+ .tp-opt.tp-danger) { border-block-end: none; }

/* THE BW3 SHARED-TRIP SURFACES, carried unchanged into stage 2's
   stylesheet. The conscious share sheet, the full terms, the leave
   flow's comment choice and the removed person's standing card all
   still render with their consent copy AS AUTHORED; T-11 re-composes
   the sheet over the same words, and these rules hold the walk's own
   BW3-REPAIR-1 findings (the 44px passport-too row, the inline terms
   link) until it does. */
.tr-share-sheet {
  background: var(--ui-card); border: 1px solid var(--ui-hairline); border-radius: 12px;
  padding-block: 16px; padding-inline: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block-end: 28px;
  inline-size: 100%;
}

/* .ui-type-body is the primitives layer's now (round-ledger class 194's
   repair); this room composes renderPrimitivesCss and reaches it there.
   .ui-type-caption IS GONE, and the comment that stood here asking whose call
   it was has its answer: the design owner ruled on 2026-08-21 (canon AM-J6) -
   NO MINT, NO ALIAS, THE CALLERS MIGRATE. Caption is not a role; its voice is
   meta, which it read at the bytes all along - font: var(--ui-type-meta) and
   color: var(--ui-muted), the same two declarations meta publishes. Every
   caller now says meta and this room defines no role of its own.
   .ui-chip-label LIFTED to primitives in the same act: its base rule sat here
   while .ui-chip-label--dotted was already published there, so a room was the
   only definition of a shared name - class 194 again, one layer over.
   NB no backticks in this block: it lives INSIDE the template literal this
   function returns, and a backtick here ends the CSS. */
.ui-chip--data.ui-chip--live, .ui-chip--state.ui-chip--live { border: 1px solid var(--ui-hairline); }
.tr-share-sheet { background: var(--ui-card); border: 1px solid var(--ui-hairline); border-radius: 12px; padding-block: 16px; padding-inline: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block-end: 28px; }
.tr-share-sheet h2, .tr-share-sheet h3 { margin: 0; }
.tr-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tr-terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tr-sheet-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-block-start: 12px; border-block-start: 1px solid var(--ui-hairline); }
.tr-share-confirm { font-weight: 600; }
.tr-share-cancel { color: var(--ui-muted); }
.tr-passport-too { display: flex; align-items: center; gap: 12px; min-block-size: var(--ui-tap-min); cursor: pointer; }
.tr-passport-too input { inline-size: 20px; block-size: 20px; flex: none; margin: 0; accent-color: var(--ui-ink); }
.tr-standing { margin: 0; }
.tr-terms-link {
  display: inline; position: relative; background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tr-terms-link::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%; inline-size: 100%; block-size: 100%;
  min-inline-size: var(--ui-tap-min); min-block-size: var(--ui-tap-min);
}
.tr-photo-location { margin: 0; }
.tr-private-override { margin: 0; color: var(--ui-ink); }
.tr-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-comment-choice, .tr-standing-card {
  background: var(--ui-card); border: 1px solid var(--ui-hairline); border-radius: 12px;
  padding-block: 16px; padding-inline: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start;
  margin-block-end: 16px; inline-size: 100%;
}
.tr-standing-card { border-inline-start: 3px solid var(--ui-muted); }
.tr-choice-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* M4: reduced motion is a first-class rendering, not a fallback - every
   transition becomes a cut and the in-flight mark rests, static. */
@media (prefers-reduced-motion: reduce) {
  .tp-inflight .ui-chip-dot { animation: none; opacity: 0.7; }
  .tp-back:active, .tp-row-link:active, .tp-fill-act:active, .tp-base-act:active, .tp-danger:active { transform: none; }
}


/* the passport media store (D-P1): cut and face plumbing */
/* the album surface grid justifies items start, and its own bands each
   carry inline-size 100%; this page's one body wrapper must say so too
   or the whole body shrinks to max-content (the 261px grid the loop's
   first render caught) */
.pm-body { inline-size: 100%; }
.pm-cut { display: none; }
/* the visible cut IS this page's band stack, so it wears the album
   surface's own stacking (album.ts .md-album: bands as direct grid
   children at an 18px gap). The block wrapper had swallowed that air:
   heads sat nearer the band above than the band they name, and the
   Arabic title ink touched the tiles above it (walk F4, pixel-measured
   EN +4.75px / AR -0.88px head-above vs 12.5px head-below) */
.pm-store[data-lens="by-time"] .pm-cut[data-cut="by-time"],
.pm-store[data-lens="by-place"] .pm-cut[data-cut="by-place"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; animation: pm-settle var(--ui-motion-settle); }
/* F4's ARABIC HALF (the re-walk's one remaining cell): the 18/12 box
   spacing is identical in both editions, but Noto Naskh places its ink
   higher inside the same line box than Fraunces does, so the box cure
   left the AR head floating midway (the walker's 8x: EN 1.76x above/
   below, AR 1.02x). OPTICAL, per-edition, proven at the AR render:
   shift the head ink 4px down the block axis in the RTL edition only -
   air above grows, air below shrinks, no other box moves, English is
   untouched. */
[dir="rtl"] .pm-store .md-band-head { margin-block-start: 4px; margin-block-end: -4px; }
@keyframes pm-settle { from { opacity: 0; } to { opacity: 1; } }
/* the mode's faces: the foot exists only inside the mode; the entry
   toggle stands in both, because pressed it is the way out */
.pm-store[data-face="gathered"] .md-selectfoot { display: none; }
/* B1 (the desk's 2026-09-02 ruling): pressed swaps ink AND edge, per
   canon R4, distinguishable at a glance. Rest is the gold standing dot
   exactly as built; pressed swaps the slot to row 17's own picked disc
   (the tick-role's mark at the disc's own 24px scale - the slot grows
   to the mark, the check never shrinks to noise) and the box gains the
   family hairline. The transparent rest border reserves the geometry
   so the swap moves no pixel of layout; a fill dress is refused (R1). */
.pm-select-mark { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; }
.pm-select-mark .md-tickdisc { display: none; }
.pm-store .tp-base-act[aria-pressed] { border: 1px solid transparent; border-radius: 8px; }
.pm-store .tp-base-act[aria-pressed="true"] { border-color: var(--ui-hairline); }
.pm-store .tp-base-act[aria-pressed="true"] .pm-select-mark .ui-chip-dot { display: none; }
.pm-store .tp-base-act[aria-pressed="true"] .pm-select-mark .md-tickdisc { display: grid; }
/* the opened item's layer: full-bleed, no bar, no scrim (ask 5.1) */
.pm-viewer-layer { position: fixed; inset: 0; z-index: 60; background: var(--ui-ground); overflow: auto; animation: pm-rise var(--ui-motion-rise); }
/* outranks the shell's .co-screen .fs-home-content display rule AND the
   stretch rule below (hidden must win every display fight it can meet:
   the first cut of the stretch rule tied this one and the hidden layer
   swallowed every tap on the page under it) */
.pm-store .pm-viewer-layer.fs-home-content[hidden] { display: none; }
/* the viewer takes its container's block (the primitive's own law), so
   this host must hand it one stretched row: the shell's class brings
   align-content start, which would let the foot float and leave the
   slack at the bottom instead of in the stage */
.pm-store .pm-viewer-layer.fs-home-content { display: grid; grid-template-rows: minmax(0, 1fr); align-content: stretch; }
@keyframes pm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pm-viewimg { inline-size: 100%; block-size: 100%; object-fit: contain; }
html[data-pm-viewer="open"] { overflow: hidden; }
html[data-pm-viewer="open"] .fs-bar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pm-store [data-cut], .pm-viewer-layer { animation-duration: 120ms; animation-name: pm-settle; transform: none; }
}


/* THE GROUND IS MATERIAL AND IT MUST RENDER (canon G2, measured by G6a).
   The first cut of this layer set a flat colour and stopped, and the
   non-author walk measured the consequence at the pixels: fourteen
   composed cells at standard deviation exactly 0.000 against a floor of
   2.0, with 72 to 77 percent of the absence screens a uniform void. The
   texture was not missing from the estate - the reading room's own ground
   measured 24.2 on the same instrument - so this was a composition
   regression, not an unbuilt feature.

   Every value here is DERIVED from a canon token with color-mix and no
   colour literal is born: this is shell finding F1 met a second time, in
   a second layer, exactly as the reading room met it. The cure at the
   canon token source is still owed and still F1's. */
.co-page {
  /* The bar's centre action draws its circle over a token the published
     layers never define, so it resolved to inherit and computed to
     transparent: the bar's own hairline, and the ground arcs that stood
     on this layer until they were retired on 2026-08-27, ran straight
     through the inside of the plus. The hairline still runs, so the
     supply below stands on its own ground. Supplied here, derived from
     a canon token like everything else in this layer, because a variable
     nothing defines is a hole a consumer can lawfully fill. */
  --ui-surface: var(--ui-ground);
  --co-texture-line: color-mix(in srgb, var(--ui-ink) 3%, transparent);
  --co-wash: color-mix(in srgb, var(--ui-hairline) 55%, transparent);
  --co-recess: color-mix(in srgb, var(--ui-ground) 94%, var(--ui-scrim));
  --co-quiet-edge: color-mix(in srgb, var(--ui-hairline) 58%, var(--ui-muted) 42%);
}

.co-page {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  background: var(--ui-ground);
  color: var(--ui-ink);
}

/* ---------------------------------------------------------------- *
 * THE ORIENT HOME'S GROUND, at BEAUTY-LAYER-v2.
 *
 * THE MATERIAL IS THE REFERENCE'S AND THE WARMTH IS NOT. The published
 * Orient frame is the reference of record, and the island ruling read
 * its language at the bytes: the navy ground with its fine rule field
 * and a faint vignette, cream ink, gold as a POINT OF LIGHT. What the
 * reference does not carry, named there one by one, is drop shadows,
 * gradient fills, gold glows and washes.
 *
 * SO THE v1 DELTA'S TWO GOLD WASHES AND ITS FOOT SHELF ARE NOT HERE, and
 * their absence is the ruling rather than an omission: v1 dressed the
 * SUPERSEDED shell as an interim ground and stands "only until C3
 * serves". This is C3 serving. The gold that remains on this face is the
 * anchor dot before the lead act and the dot before the clearing act,
 * which is exactly a point of light.
 *
 * WHAT IS KEPT, because it IS the reference's own material: the rule
 * field at a few percent of the ink, the soft deepening through the
 * middle, and the recess beneath them. Every value is derived from a
 * canon token with color-mix and no colour literal is born here.
 *
 * (1) THE SCREEN FILLS THE PAGE. The co-page grid is auto then
 * minmax(0,1fr) and the development band is the auto row; on a serve
 * that drops the band, main is auto-placed into row 1, the screen stops
 * stretching, the bar floats mid-canvas over a void and the canon's foot
 * anchor never fires. Naming main's row cures it and is a no-op wherever
 * the band draws.
 *
 * (2) THE THREE-ZONE CANVAS, the design of record's own cure in its own
 * words: instrument at the top, the ground breathes, the record anchors
 * to the thumb zone. ONE FLEXIBLE SEAM, so air lives BETWEEN the zones
 * and never after the content.
 */
.co-page > .co-screen { grid-row: 2; }

.co-screen[data-surface="orient-home"] {
  --co-orient-deep: color-mix(in srgb, var(--ui-scrim) 34%, transparent);
  --co-orient-rule: color-mix(in srgb, var(--ui-ink) 6%, transparent);
  background:
    radial-gradient(150% 46% at 50% 52%, transparent 0%, var(--co-orient-deep) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--co-orient-rule) 3px 4px),
    var(--co-recess);
}

.co-screen[data-surface="orient-home"] .fs-home-content {
  /* ONE ROW THAT TAKES THE SLACK. The stretch itself is the estate's
     already (the passport pair below); what this adds is the single row
     for it to land in, so the slack sits INSIDE the surface where the
     record band's own end-alignment can use it. */
  grid-template-rows: 1fr;
  padding-block-start: clamp(48px, 8svh, 64px);
}
.co-screen[data-surface="orient-home"] .fs-surface { grid-template-rows: 1fr; }

.co-skip {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.co-skip:focus {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  padding: 8px 12px;
  min-block-size: var(--ui-tap-min);
}

.co-devband {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 8px 12px;
  border-block-end: 1px solid var(--ui-hairline);
  background: var(--ui-card);
}

/* THE DEVELOPMENT LAYER MAY NOT COST THE PRODUCT ITS FIRST SCREEN. This band is
   87px tall in English and 71px in Arabic at the owner's smaller geometry, and it
   is DEVELOPMENT CHROME - the comment on its own writer says the day it carries
   belongs to the development layer and never to the product's own chrome. Once the
   shell law seated the tab bar at the viewport's bottom edge, those pixels stopped
   being free: they push the page down by exactly their own height, and on the
   plate's shared preview they pushed the PRIMARY ACT into the bar's band, 84.5
   percent covered in English and 52.5 in Arabic on arrival at 384x750. MEASURED
   BOTH WAYS: with this band removed the same act clears the band by 45 pixels, so
   the product's own face never had the defect and the walk build and the owner's
   preview link did - which is the only reason this is cured here rather than by
   squeezing a face that is not at fault.
   WHY THE NOTE AND NOT THE DAY. The band carries three lines: what it is, this
   note, and the day the sample world is read at. THE DAY STAYS, and its own
   record says why - a non-author walk once met a trip marked live whose dates had
   passed five days earlier, and the day is there so that can never read as the
   product lying. The note says the data is sample data, which the band's own title
   already says at the same glance. So the note is the line that goes, and only at
   the widths where the bar is seated - the same query the bar's own seat uses, the
   complement of the shell family's rail breakpoint, so the two can never drift
   apart. At every wider width the band is unchanged.
   THIS IS HALF OF A PAIR. The other half is one gap in the plate's own page. The
   floor that keeps both honest is the plate's arrival-clearance floor, and it is
   load-bearing rather than decorative: the clearance it protects is four pixels. */
@media not all and (min-width: 1000px) {
  .co-devband-note {
    display: none;
  }
}

.co-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* the ground, drawn once behind every composed screen: a wash from the
     head and a fine rule field. THE SLOW ARCS WERE HERE AND ARE GONE:
     the design desk retired them from this ground on 2026-08-27
     (RULING-BACKGROUND-ARCS-LEAVE-THE-COMPOSED-GROUND-20260827,
     sha256-16 d16b34a31700acd2) on the owner's third reading of them as
     noise. A ground texture's job is to be felt and never noticed, and
     one that has been noticed three times has failed it. The passport
     card's own print texture (plate-css.ts .plt-card-texture) is a
     different, finer mechanism and is untouched. */
  background:
    radial-gradient(140% 90% at 50% -20%, var(--co-wash) 0%, transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--co-texture-line) 3px 4px),
    var(--co-recess);
}

/* the gallery frame, re-seated at viewport scale: the same markup, one
   at a time, filling the space instead of sitting in a card */

/* THE DOCUMENT SCROLLS, AND THE BAR KEEPS ITS SEAT. The ui owner landed five
   rules at the HQ shell family's S:BASE grain
   (DELIVERY-F2-DOCUMENT-SCROLLS-SHELL-LANDED-20260826, endorsed whole by the
   design desk the same hour). This layer carries a DIVERGED copy of that
   shell, so it adopts the same five rules HERE, at its own selectors, rather
   than inheriting them.
   WHAT WAS ALREADY RIGHT, stated so a reader is not left to infer it: rule 1
   is landed above - .co-page (which IS the body element) floors the page
   with MIN-block-size, so the page grows with its content; and the walk's own
   measurement at the trunk bytes confirms the consequence, 957px of document
   on a 750px screen. Rules 2, 3 and 4 are the three below.
   RULE 2 - THE SHELL GROWS WITH ITS CONTENT, AND CLIPS PAINT, NOT CONTENT.
   min-block-size: auto is the ui owner's REMOVAL expressed at this grain:
   the published layer declares 640px (the gallery card's own number), so
   deleting the line here would restore a gallery number rather than remove a
   squeeze - auto cancels both. overflow: clip narrows the published
   overflow: hidden: hidden makes this box a SCROLL CONTAINER, and a sticky
   child is positioned against the nearest scrollport, so the bar's seat below
   would resolve against this unscrolled box and move nothing. Driven, not
   argued: the seat's shell floor ran the bar's seat ALONE against the trunk
   bytes and it changed not one pixel of the founding measurement.
   RULE 3 - THE INNER BOX IS LAYOUT, NOT A SCROLLER. The overflow-y: auto and
   its overscroll-behavior companion are gone. At the trunk bytes this box
   never actually overflowed, so no floor on the shipped page reads differently
   for its removal, and that is said rather than hidden; what it removes is a
   LATENT scroller, which the seat's hazard fixture drives directly - pin the
   page box the way the HQ's shell was pinned and this box steals the scroll on
   every country cell, the exact state F2 exists to end.
   RULE 2 AND RULE 3 LAND TOGETHER, and the fixture says why: with the scroller
   removed but the squeeze kept, the same pin squeezes the shell below its
   content and overflow: clip then LOSES that content outright, with no
   scroller anywhere to reach it - strictly worse than the state being cured.
   RULE 5 IS UNDRAWN AT THIS GRAIN, said plainly rather than left as a silent
   gap: the fifth rule flips the bar to a start-side rail inside the shell
   family's min-width: 1000px block. This composition publishes no such
   block and the published bar carries no rail form, so there is nothing here
   to flip. Drawing one would be new design, not adoption, and it is not this
   act's. */
.co-screen .fs-home {
  min-block-size: auto;
  overflow: clip;
  border: 0;
  border-radius: 0;
  margin-block-end: 0;
}

/* RULE 4 - THE BAR KEEPS A PERMANENT SEAT AT THE VIEWPORT BOTTOM while the
   document scrolls, settling into its natural slot at page end; on a page
   shorter than the viewport the flex column already seats it at the bottom
   edge and sticky changes nothing there.
   THE GROUND IS PART OF THE RULE, not a dress decision taken alongside it. The
   shell family's own bar carried an opaque ground before F2 landed, which is
   why its rule 4 is three declarations there and four here: the published bar
   in this app declares none, and a sticky bar with no ground is not a bar, it
   is the document showing through the seats. The token form is THE FAMILY'S
   OWN - bar-ground falling back to the canon ground - so that if the design
   desk ever picks a bar-ground treatment it reaches this composition by token
   rather than needing this file edited again.
   SCOPED BELOW THE FAMILY'S DESKTOP BREAKPOINT, and this is a ruled boundary
   rather than a taste: the family's rule 5 turns the bar into a start-side rail
   from min-width 1000px, and this composition publishes no rail. Leaving the
   mobile bar sticky above that width would hand a desktop window a full-width
   phone tab row, which is a desktop DESIGN decision and not an adoption of F2.
   So the seat stops where the family's own mobile form stops.
   THE QUERY IS THE EXACT COMPLEMENT of the family's rail query rather than a
   restatement of its number as a different number: a max-width of 999.98px and
   a min-width of 1000px leave the interval between them matching neither, and
   a boundary written as the complement cannot drift when the family's number
   moves.
   WHAT THAT COSTS, measured rather than assumed, so the shell owner can weigh
   it: at 1280x800 and 1440x900 the pre-cure bar sits 140.5px and 40.5px past
   the bottom edge on a country page - the same defect as the phone, at a width
   this act is not charged with. Scoping leaves that exactly as it was. Rule 5
   is UNDRAWN and the shell owner owns it.

   THE Z-INDEX IS 1 AND NOT THE FAMILY'S 5, and this is the one place this
   adoption deliberately departs from the family's own value. At the HQ root
   nothing else in the document stacks, so 5 is free. HERE IT IS NOT: the
   composed stylesheet declares exactly four z-indexes, and three of them belong
   to the reading room - the map's scale control at 1, the tune popover's scrim
   at 2 and its panel at 3. A bar at 5 sits in the ROOT stacking context above
   every one of them, so the moment a composed screen opens that popover the bar
   paints over its scrim and stays tappable behind it. Nothing composed opens one
   today - the composed reading screen renders no popover and no place sheet, and
   the place sheet's stylesheet is not even part of this composition - so this
   cures a TRAP rather than a live defect, and it is cheaper to not build the
   trap than to find it later. At 1 the bar still outranks ordinary flow content,
   which is all a seat at the foot of the page needs, and it sits under every
   overlay this composition declares. The floor binds the RELATIONSHIP rather
   than the number, so an overlay that lands later is covered without an edit. */
@media not all and (min-width: 1000px) {
  .co-screen .fs-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: 1;
    background: var(--bar-ground, var(--ui-ground));
  }

  /* AND THE PAGE KEEPS THE BAR'S HEIGHT CLEAR WHEN IT SCROLLS SOMETHING INTO
     VIEW. A sticky band is painted over the scroll container's own end edge, and
     the browser considers a control visible the moment its box is inside the
     viewport - so a focused control can be scrolled to exactly where the bar
     covers it. MEASURED, not anticipated: on the composed reading screen ELEVEN
     of eighteen focusable controls landed under the bar after focus, on both
     engines at both geometries, and ZERO did with this act's seat reverted. So
     this is a consequence of the seat and it is cured beside it.
     THE VALUE IS A FLOOR, NOT THE HEIGHT: the bar's height is content-driven -
     the tap minimum is a floor its seats exceed - and CSS cannot read a rendered
     height, so this clears the tap minimum plus the bar's own chrome with margin,
     and the RUNTIME floor asserts the clearance against the bar's MEASURED height
     on every cell, which is what keeps the number honest if the bar ever grows.
     AND IT SITS ON THE ROOT, NOT ON .co-page. scroll-padding belongs to the
     SCROLL CONTAINER, and the document's scroll container is the root element -
     unlike overflow, scroll-padding does NOT propagate from the body to the
     viewport. This layer's own page box IS the body, so the first cut declared
     it there, where it computed correctly, inherited to the body, and cured
     NOTHING: eleven of eighteen controls still landed under the bar. Driven both
     ways to be sure of the mechanism rather than the story - on the root, zero.
     This is the one place this layer touches the document root, and it touches
     it because the root is the only element that owns this property. */
  :root {
    scroll-padding-block-end: calc(var(--ui-tap-min) + 32px + env(safe-area-inset-bottom, 0px));
  }
}

/* A DOOR AND ITS NOTE ARE ONE THING. The first cut emitted the note as a
   flat SIBLING of its door inside a wrapping flex row, so each note wrapped
   wherever it landed and read as the label for the chip that FOLLOWED it.
   The non-author walk measured the consequence: two screens stated the
   OPPOSITE of the truth about what is built, and stated a different wrong
   answer at each of the owner's two geometries. The pair is now one grid
   item, so a note can only ever wrap with the door it describes. This is
   the catalogue's door-row shape (one dress, the note bound to its act)
   applied where the composition emits it. */
.co-door-pair {
  display: grid;
  grid-template-columns: minmax(0, auto);
  justify-items: start;
  gap: 2px;
}

.co-door-note {
  display: block;
  max-inline-size: 100%;
}

.co-screen-note {
  display: block;
  padding-block-end: 8px;
}

/* WIDTH MUST SAY NOTHING, because in this composition it was saying the
   wrong thing. A chip carrying a build note sits in a pair that hugs its
   label; a chip without one was a direct grid child and stretched to the
   full column. The result was that the widest controls on four screens
   were the ones that open nothing, and the app's single act was a third
   of the width of a door to an unbuilt screen. Canon's rule is that
   primacy is fill and persistence and never size, so every chip hugs and
   size carries no meaning at all. */
/* EVERY container a chip can be a direct child of, named. The first cut
   named three and missed the door row, so the widest pill on the capture
   screen was still the one thing on it that is not a control - the exact
   instance the finding's own table pointed at. A rule that covers most of
   a set reads as covering the set. */
.co-screen .fs-surface > .ui-chip,
.co-screen .fs-surface > .co-door-pair,
.co-screen .fs-doorrow > .ui-chip,
.co-screen .fs-doorrow > .co-door-pair,
.co-screen .tp-room > .ui-chip,
.co-screen .tp-room > .co-door-pair { justify-self: start; }
.co-screen .fs-doors > .ui-chip,
.co-screen .fs-doors > .co-door-pair { flex: 0 0 auto; }

/* A control that is drawn but not wired LOSES ITS AFFORDANCE, and keeps
   its information. The first cut dimmed the whole control, which on the
   reading screen dimmed the place name, its street and its distance
   along with the pressability: the address line measured 3.42 to 1
   against the 4.5 floor, while the same type role one row away measured
   7.11. Canon's rule is that a blocked item loses the AFFORDANCE, never
   that it becomes a dimmed-looking button, and the information a person
   is reading is not the affordance. So: no pointer, no press, and the
   ink untouched. The mark stays in the markup for a walker to read. */
.co-screen [data-inert="not-wired"] { cursor: default; }
.co-screen [data-inert="not-wired"]:active { transform: none; }

/* AND THE INK, WHICH THIS RULE SET REFUSED TO TOUCH UNTIL NOW, and the
   paragraph above is the reason it did. That reasoning was right about
   its own case and wrong as a general law, and the batch-5 field walk
   is what separated the two: it measured thirteen reading doors, four
   places rows and a globe row drawn at FULL INK while dead, and the
   design owner ruled them one class with one cure - the inert dress
   wins on every drawn part of an inert control, including its
   descendant text, at one home, so a later rule can never re-ink it one
   row at a time.

   WHAT THE REVERTED CURE ACTUALLY DID, since this rule exists because of
   it. It dimmed text that was ALREADY muted - a place row's street and
   distance carry the meta role, which declares var(--ui-muted) - and a
   dim COMPOUNDED onto an already-reduced role took the address line to
   3.42 to 1. This one cannot do that: it sets an ABSOLUTE step, so an
   element already at the meta role lands on the same value as one at
   full ink and a second application changes nothing. The floor beside it
   measures the contrast as well as the step, so the class cannot
   re-enter from either side: not by a row going bright, and not by a
   cure going dark.

   WHY "!important", on a sheet that otherwise reserves it for reduced
   motion. The ruling's requirement is not "this is usually the ink", it
   is "a later rule can NEVER re-ink it", and in the cascade that is
   what "!important" says. Specificity cannot say it here: this sheet is
   the SEVENTH member of the composition's stylesheet list and the
   reading's is the tenth, so a reading rule of equal weight
   (.rd-scale-tab[aria-checked="true"], two class-or-attribute terms,
   exactly this rule's weight) wins on source order alone. The dress
   would have held everywhere except the one control the ruling singles
   out as the strongest false promise on the screen.

   THE PSEUDO-ELEMENTS ARE NAMED because "*" does not match them and a
   refused control's drawn parts include what its ::before and ::after
   draw. Their BACKGROUNDS are not set here - a background on every
   pseudo-element in a subtree would paint over things that are not ink -
   so a decoration drawn from a fixed ink token is cured where it is
   drawn, by consuming currentColor, which is what the reading's selected
   scale tab now does. */
.co-screen [data-inert="not-wired"],
.co-screen [data-inert="not-wired"] *,
.co-screen [data-inert="not-wired"]::before,
.co-screen [data-inert="not-wired"]::after,
.co-screen [data-inert="not-wired"] *::before,
.co-screen [data-inert="not-wired"] *::after { color: var(--ui-inert-ink) !important; }

/* AND THE SIX PARTS WHOSE REFUSED DRESS IS DECLARED AS OPACITY KEEP THE
   INK THEY HAD, which is not an exception to the rule above but the same
   principle applied one level down: two dresses for one meaning
   MULTIPLY, and this estate has already written that down twice in the
   sheets this pins. The search bar's own note says the reduction goes on
   the form's PARTS rather than the form, because "an opacity on the
   container would multiply into every child that carries its own"; the
   outlined chip's says it takes a colour reduction "deliberately"
   because "opacity on a container multiplies down the subtree". An ink
   step applied on top of an 0.55 would take the search field from the
   5.58 to 1 it ships at to 2.48, which is the reverted cure's defect
   wearing this cure's clothes.

   SO THE PIN IS THE VALUE EACH PART ALREADY RESOLVES TO, and each one is
   the ink that part's own live rule names: the two fields inherit ink,
   the go ring and the Add home's fill are written in muted, and the list
   page's fill is an INVERTED act whose label is the ground colour, which
   a grey would have destroyed rather than dimmed. The set is not a list
   this file keeps: the floor derives every rule declaring opacity under
   the refusal mark from the composed sheet and fails if this block and
   that set disagree, so a seventh opacity dress cannot arrive unpinned. */
.co-screen .oi-bar[data-inert="not-wired"] .oi-field,
.co-screen .ad-home .ad-intake[data-inert="not-wired"] .ad-field,
.co-screen .lp-compose[data-inert="not-wired"] .ad-field { color: var(--ui-ink) !important; }
.co-screen .oi-bar[data-inert="not-wired"] .oi-go,
.co-screen .ad-home .ad-intake[data-inert="not-wired"] .ad-fill { color: var(--ui-muted) !important; }
/* AND THE RING KEEPS ITS ARMED STATE, which the line above had quietly
   taken from it. A pin restores "the ink this part already had", and the
   go ring HAS TWO: muted at rest and the page ink once the field holds
   something, which is the one thing on that bar saying the typed words
   are ready to go somewhere. Pinning it to its resting value flattened
   the armed state, so the miss screen's ring fell from 5.58 to 1 to 2.94
   while every other cell was untouched - a pin that was right about the
   base rule and wrong about the control. Found by the before-and-after at
   the browser, on the trunk's own bytes, after the probe was taught to
   see glyph seats; the pin leg beside it now asks that a pinned part's
   pins carry every colour its own sheet gives it. */
.co-screen .oi-places .oi-bar[data-inert="not-wired"] .oi-go[data-armed="yes"] { color: var(--ui-ink) !important; }
.co-screen .lp-fill[data-inert="not-wired"] { color: var(--ui-ground) !important; }
/* AND TWO GLYPHS WHOSE OPACITY DRESS IS NOT KEYED ON THE REFUSAL MARK AT
   ALL, which is how the first cut of this block missed them and how the
   floor beside it missed them twice. The Add home's pending tiles and
   media doors declare "color: var(--ui-muted); opacity: 0.55" in ONE
   block, keyed on their own --pending state. They land inside a refused
   subtree without ever naming the refusal, so a pin list derived from
   rules that mention data-inert cannot see them: the ink half was
   overridden here and the opacity half was not, and the glyphs went from
   2.94 to 1 to 2.48. Found by a second mind reading the diff, confirmed at
   the browser, and the floor's pin leg now derives its subject set from
   what actually sits inside a refused control rather than from what the
   sheet remembers to mention. The pin is the value the rule itself
   declares one property along. */
.co-screen .ad-home .ad-tile--pending[data-inert="not-wired"] .ad-tile-glyph,
.co-screen .ad-home .th-mdoor--pending[data-inert="not-wired"] .th-mdoor-glyph { color: var(--ui-muted) !important; }

/* AND THE PLATE'S THREE RANKS STAND, because they are another desk's
   RULING and not a row this cure is entitled to flatten. The passport
   plate dresses its own not-built state in three measured ranks - the
   stamp name at 7.11 to 1, the secondary act at 5.70, the chip year at
   5.09 - and its sheet records that the canonical SINGLE-STEP form was
   tried at 51 steps and cannot carry both roles: one step that mutes the
   name drags the year to about 3.3, below the small-text floor, and the
   two requirements are disjoint by roughly fifteen points of step. The
   desk ruled identity over canon at 14:28 and the direction of the
   secondary's step at 14:33. Its add label is deliberately NOT stepped,
   because it is the one control on that card asking to be used.
   This home arriving after all of that put every one of the four on one
   value. Nothing there was at live ink and nothing there is the defect
   the ruling names, so the finer dress wins and this block says why. TWO
   DESK RULINGS MEET ON THIS SURFACE and only the design owner can settle
   which governs; it is flagged in the hand-back rather than settled here.
   Caught by an adversarial read of this diff, confirmed at the render. */
.co-screen .plt-not-built .pp-stamp-name,
.co-screen .plt-not-built .plt-add-label { color: var(--ui-muted) !important; }
.co-screen .plt-not-built .pp-stamp-year { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)) !important; }
.co-screen .plt-not-built.plt-act--text { color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)) !important; }

/* THE ORIENT HOME ALONE ANCHORS ITS RECORD TO THE FOOT (canon G1: the
   bottom is for reaching, and the ground sits BETWEEN). Every other page
   anchors to the head with the ground below it, which is the default
   above.

   THE FIRST TWO ATTEMPTS AT THIS RULE BOTH FAILED, differently, and the
   pair is worth keeping because they are the same mistake from two
   sides. The first selected on an attribute the element never carried,
   so it matched nothing and read as done in any diff. The second matched,
   and pushed the whole content block down - the screen's NAME with it -
   so the app's first screen opened as a large empty field with the
   product's name near its bottom edge, which canon closes in one line:
   air never sits above the first content.

   The rule G1 actually states has three parts in order: HEAD, then
   GROUND, then the record at the foot. So the head stays at the top and
   the auto margin beneath it is the ground: everything after the heading
   is pushed to the foot, and nothing is pushed past it. */
/* THE CONTENT BOX GIVES ITS SLACK TO THE PAGE THAT ASKED FOR IT, and until the
   fresh-eyes walk exactly one surface could ask. This rule was written for the orient
   home and scoped to it by attribute, so the plate page's own auto-1fr template - a page that
   declares in its template that its main row takes the slack - never received any:
   at 412x915 the plate left 178.8px of its seat empty below the provenance door, using
   78.9 percent of the screen in English and 80.8 in Arabic against orient-home's 96.7
   (walk S2, endorsed by the design desk for one touch).
   THE SCOPE WIDENS TO THE PASSPORT'S SURFACE RATHER THAN TO EVERY SCREEN, because a
   screen whose page does NOT declare a stretching row gains nothing from slack and a
   screen that centres its content would be changed by it. Two named surfaces, each
   with a page that asks. */
.co-screen[data-surface="orient-home"] .fs-home-content,
.co-screen[data-surface="passport-home"] .fs-home-content { align-content: stretch; }
/* AND THE SLACK IS DISTRIBUTED, NOT MERELY GRANTED. Widening the stretch above made the
   plate's page BOX grow into its seat and moved no ink: the page's main row still packed
   to the start, so the 175px of slack landed INSIDE that row below its content and the
   lowest painted product ink stayed exactly where it was. The fresh-eyes walker measured
   178.8px from that ink to the bar and my own first reading said 68px, because I had
   measured the BOX and the walker measured the PAINT. The walker was right; the number
   now reproduces at this hand to the decimal.
   CENTRE, on the design desk's ruling of 15:15 (the sheet's round-six row), and the two
   values it was chosen over are recorded because each fails in its own direction. START -
   the pre-repair state - leaves the whole slack below the composition: a 178.8px void
   above the bar with the face packed at the top. SPACE-BETWEEN, which this lane shipped at
   READY-5, takes the ink to the seat's bottom edge and pays for it with a HOLE IN THE
   MIDDLE OF THE FACE: measured at 194.8px in English between the world caption and the
   share act, which the fresh-eyes walker raised as N1. Trading a gap at the bottom for a
   void in the middle is not a cure, and I did not see it because I measured the bottom and
   never looked at the middle. END is refused outright: it leaves air ABOVE the first
   content, the one thing G1 forbids. Centre splits the remainder above and below the
   composition instead of banking it all in one place.
   SCOPED TO THE SURFACE THAT ASKED, and it acts only where slack exists: at the smaller
   geometry this page already overflows its seat, so there is nothing to distribute and
   nothing moves. */
.co-screen[data-surface="passport-home"] .plt-page-main { align-content: center; }
/* THESE THREE RULES ARE RETIRED WITH THE SHELL THEY DRESSED, and the
   retirement is written out rather than deleted quietly, because a
   reader of the walk records that named them will come looking.
   They anchored the SUPERSEDED orient home: a flex column of chips as
   direct children, an h1 whose auto end-margin pushed everything after
   it to the foot, and a the search sibling sibling stretched across. The
   rebuilt home has none of those - its head is the mode row's own seat
   and its h1 is for a reader's software alone, its search is inside the
   instrument, and its one child is that instrument - so every selector
   here now matches nothing, and a rule that matches nothing while
   claiming to anchor a page is the dead-floor shape this estate refuses.
   THE ANCHORING IS NOT LOST WITH THEM: it moves to the design of
   record's own three-zone rule above, which stretches ONE row and lets
   the record band sit at its end. Same job, the design's own mechanism,
   over the structure that actually exists. */

/* THE TRIPS ROOT WEARS THE TRIPS ROOM'S OWN SECTION, which carries a
   leading hairline for its place inside that room. Composed as a tab home
   there is nothing above it, so the line drew across the top of the screen
   with nothing on the other side of it, on that root alone. Narrowed here
   rather than edited there: the room's own file belongs to another live
   lane at this commission's fence. */
.co-screen .tp-room { border-block-start: 0; }

/* AN ABSENCE IS A COMPOSED PAGE, NOT A SENTENCE ON A VOID. Canon G1: every
   page composes as HEAD (its own name, with head-room), CONTENT placed
   where content lands, and GROUND. The first cut drew the stated line
   alone, pinned to the top, with no name on it, and the non-author walk
   put it plainly: a person who tapped Compass could not tell from the
   screen that they were on Compass, and the not-found screen the product
   never claimed was better composed than the screen it declares. */
.co-absence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-content: stretch;
  min-block-size: 0;
}
.co-absence-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--co-quiet-edge);
}
/* THE COUNTRY'S NAME ON THE ABSENCE STATE wears the DISPLAY role, which
   is the slot itself, and this is the only thing said about it here -
   the parity the built state's own .cp-name already has, so one slot
   does not wrap one way in one state of an address and another way in
   the other. It is parity and not a cure for a measured overflow: no
   roster name carries an unbreakable run long enough to overrun this
   column, which is stated rather than implied because a rule dressed as
   a fix for a defect nobody showed is how a floor gets written for a
   number nobody has. */
/* THE TEACHING FAMILY'S IN-FAMILY NOT-FOUND CARRIES NO HEAD RULE, on
   the design desk's F2 at the served render: the family grammar's drawn
   source has none, and the settings family's own in-family instance
   carries none either. It is scoped to this face by the family the
   section already declares, so no other absence page moves a pixel -
   the composed absence and the declared not-found keep the rule they
   were drawn with. */
[data-family="teaching"].co-absence .co-absence-head { border-block-end: 0; padding-block-end: 0; }

.co-absence-name { overflow-wrap: anywhere; }

.co-absence-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: center;
  justify-items: start;
  min-block-size: 0;
}

/* THE FIRST-RUN BAND (SHEET-AND-BANK-FIRST-RUN-20260829, commitment C2; the
   values are the design owner's own drawn rule at first-run/gen_first_run.py,
   taken as authored). One line above the home's head, meta rank in body ink,
   a hairline beneath it and nothing else: no act, no dismiss, no glyph. It
   spans the content column, which it gets by being a block child of it. */
.fr-band {
  padding-block: 14px;
  border-block-end: 1px solid var(--ui-hairline);
  margin-block-end: 18px;
  color: var(--ui-ink);
}
/* THE BAND'S BOX IS ITS OWN LINE AND HAIRLINE, AND THE FREE SPACE STAYS
   WITH THE SURFACE (the design desk's F3 repair, 14:45, measured at the
   served bare world: on the Orient home the band's box came out 209px
   with its rows 227px then 485px, so the line floated with its hairline
   375px below it on the first screen a new person meets).

   THE CONTENT COLUMN IS A GRID and its rows are implicit, so a home whose
   surface does not fill the column leaves the two tracks to share what is
   left. Naming them puts the band on an AUTO track and the surface on the
   one that stretches, which is the same shape as the cure that seats
   .co-screen at grid-row 2 one level up, and it is a NO-OP on any home
   whose rows were already content-sized.

   IT IS SCOPED BY THE BAND'S OWN PRESENCE rather than by a surface id, so
   it holds on EVERY home the band renders on and touches no page it does
   not render on - the band is home-agnostic by law and a rule naming one
   home would have been a second producer of that fact. */
.fs-home-content:has(> .fr-band) { grid-template-rows: auto minmax(0, 1fr); }
/* The orient home sets its own grid-template-rows above and outranks the
   cure, so the band took the stretching track there (504px box, 45px
   elsewhere). Scoped by the band's presence, so no other state moves. */
.co-screen[data-surface="orient-home"] .fs-home-content:has(> .fr-band) { grid-template-rows: auto minmax(0, 1fr); }

/* THE DECLARED GENERAL NOT-FOUND (SHEET-NOT-FOUND-GENERAL d129a5e82e13c6e1,
   section 5's element inventory; the values are the design owner's own drawn
   rules at not-found/gen_not_found.py, taken as authored rather than
   re-derived here).

   IT DOES NOT REUSE .co-absence, and the reason is a face fact rather than a
   preference: the absence surfaces carry a hairline under the head, and the
   drawing of this surface carries none - three quiet elements stacked in the
   content column and nothing between them. Reusing the absence head would
   have put a rule on this face that the design of record does not draw, and
   editing the shared class to remove it would have taken the rule off the
   country absence page too, which is a surface this build was told not to
   touch (the sheet's C9 is about exactly that kind of reach). So this face
   owns its own three rules and every other surface's bytes stay where they
   were.

   THE ADDRESS LINE'S INK OUTRANKS THE SENTENCE'S deliberately (drawn: --ui-ink
   over --ui-muted): the person's own bytes are what this screen is FOR, and
   the sentence is the boilerplate fact about them. */
.co-not-found {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
}
/* A TECHNICAL STRING, NOT PROSE: it breaks at any byte rather than scrolling
   the page sideways (the sheet's C7), and class 91's prose-break law is out
   of scope for it by the ruling's own words. */
.co-not-found-addr {
  font: var(--ui-type-readout);
  color: var(--ui-ink);
  overflow-wrap: anywhere;
  margin-block-start: 14px;
}
/* The path keeps its own direction inside a right-to-left column, and stays
   seated at the reading edge rather than being pushed across it. */
.co-not-found-addr bdi { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .co-not-found-addr { text-align: start; }
.co-not-found-body {
  color: var(--ui-muted);
  margin-block-start: 10px;
  max-inline-size: 52ch;
}

/* The back control every drilled-down screen renders (canon N9: depth
   lives in app state and the control is visible, never the browser's). Its
   target is the shell's own chromeBackTarget for that surface, so it can
   never point somewhere the contract does not. */
.co-back {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  min-block-size: var(--ui-tap-min);
  padding-inline-end: 8px;
  /* THE MUTED RANK, not the surface's own ink. A navigation control must
     not out-ink the content it sits above: this read 16.57:1 while
     inheriting, which on the account room made the way OUT the loudest
     thing on the screen - louder than either of the room's own acts at
     5.73 and 5.52 - and that is the rank inversion the design desk ruled
     on. One back dress estate-wide means the ink as well as the wording,
     and the ruled ink is the muted rank the settings rooms' own back row
     carried at 7.11:1 before it was retired into this one. */
  color: var(--ui-muted);
  text-decoration: none;
}

/* ARABIC JOINS, AND LETTER-SPACING BREAKS THE JOINS.
   The readout-caps dress is a Latin label convention: 0.08em of tracking
   plus uppercase. Tracking inserts space between every glyph, so a
   cursive script's letters stop touching and the word comes apart. This
   is shown by the RENDER, looked at, not by a width statistic: at 34px
   the tracked label has its joining strokes pulled open into separate
   segments and the untracked one holds together. A width-difference
   probe was tried first and is deliberately NOT cited, because it
   disagreed with itself across runs on one font stack, and an unstable
   instrument earns no receipt.
   WHAT IS NOT CLAIMED HERE: the monospace stack is left alone. The face
   this server resolves is not the face a reader's device resolves, so
   how much a mono cell spaces Arabic cannot be answered from here and
   is not cured here. Uppercase goes with the tracking because a case
   transform is meaningless in Arabic and would only reach Latin words
   embedded in an Arabic label.
   THE SCOPE IS THIS LAYER'S OWN ROOT, and the first cut got that wrong.
   It was written bare as .ui-readout-caps:lang(ar), which reads as a
   DEFINITION of a name this layer does not own and would have reached
   every consumer of that class in the document. This layer's own
   class-194 floor caught it by name. Under .co-page it is a NARROWING:
   the subject is still the shared class, but it can only bite inside a
   page this layer composed. The :lang() form rather than an attribute
   match, so it follows inheritance and still matches a regional subtag
   like ar-EG. (No backticks in this comment: it lives inside a template
   literal, and one would end the stylesheet mid-sentence.)
   WHAT THIS DOES NOT REACH, said plainly rather than left to be found:
   the reading room's own standalone gallery page inlines its own copy of
   this CSS and is not composed through this layer, so its Arabic frame
   still tracks. That is the room's file and not this seat's to edit; it
   is routed, not silently half-cured. */
.co-page .ui-readout-caps:lang(ar) {
  letter-spacing: normal;
  text-transform: none;
}

/* THE REFUSAL VOICE'S ARABIC HALF (RULING-REFUSAL-VOICE-PICKED-20260826;
   lever ADJUSTED TO 500 by ORDER-REFUSAL-LEVER-500-20260826 when the
   confirm-at-first-render clause fired on the country walker's render -
   600 read as the heaviest of the three small lines under each door,
   over-compensation inverting the modifier's intent): Arabic is never
   letterspaced, so the tracked refusal modifier resets to 0 and carries
   the weight lever instead. Same shape as the readout-caps reset above
   and for the same reasons: under .co-page it is a NARROWING of a shared
   name inside pages this layer composed, and the :lang() form follows
   inheritance and regional subtags. Re-confirmed at a render at this
   adjustment per the same clause. */
.co-page .ui-meta--refusal:lang(ar) {
  letter-spacing: 0;
  font-weight: 500;
}


.cp-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 12px; }
.cp-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cp-name { overflow-wrap: anywhere; }
.cp-character { margin: 0; }
.cp-depth { margin: 0; }
.cp-act { display: inline-flex; align-items: center; min-block-size: var(--ui-tap-min); padding-inline: 14px; border-radius: 999px; text-decoration: none; color: inherit; }
/* F2 OF THE COUNTRY GRADE (m54-design-owner-15, 2026-08-29 16:09): the lead
   act was an OUTLINED PILL and the published country screen draws it as the
   dotted text act, a gold point before the words, which is the same form the
   rebuilt Orient home uses. It was, in the desk's words, "the one control on
   the page that reads as a different app's button".
   THE FORM IS THE ESTATE'S OWN, not a new one: .tp-base-act is the dotted
   text act in the trips family (inline-flex, an 8px gap, no border, no
   inline padding, the label rank in ink, a 6px dot before the words), and
   these declarations are that form read onto this page's own class. The tap
   floor and the press transition the page already gives .cp-act are
   untouched, so the target stays above 44px with no border to shrink it.
   THE DOT IS A SPAN AND NOT A PSEUDO-ELEMENT, and that is a floor's doing
   rather than a preference. My first cut painted it with ::before and this
   page's own floor refused it in one run: "THE PAGE'S OWN DRESS GENERATES NO
   CONTENT, so the source order it declares is the painted one". That floor
   is not incidental - its comment records that a review used exactly a
   page-owned ::before to put an advert in front of the country name with
   every source assertion green, and it says the day the dress needs
   generated content is the day the floor is rewritten deliberately rather
   than defeated quietly. So the dot goes where the estate already puts it,
   in the markup as <span class="ui-chip-dot" aria-hidden="true">, which is
   the same element the trips family's own dotted act carries. The desk asked
   for one rule; the honest answer is one rule plus the estate's own element,
   because the CSS-only form is the one this page has a landed reason to
   refuse.
   BOTH LEAD ACTS TAKE THE DRESS, because the desk named the CLASS. Only the
   page's own orient act takes the DOT: the other lead act lives inside the
   signed checklist band, whose floor closes its world to a declared set of
   element shapes, and adding one there is redrawing signed work rather than
   dressing a class. The served page renders that band unengaged and carries no
   planning act at all, so no person meets the difference tonight; it is routed
   to the desk as its own one-line question. */
.cp-act--lead {
  justify-self: start;
  gap: 8px; border: none; border-radius: 0; padding-inline: 0;
  font: var(--ui-type-label); color: var(--ui-ink);
}
/* THE DOT IS GOLD HERE, which is the one thing this rule says about it: the
   published screen draws the point in gold before the words, and the primitives
   layer's own .ui-chip-dot ships muted. Gold is the ANCHOR's meaning in the
   canon's two, which is what a lead act is on this page. */
.cp-act--lead .ui-chip-dot { background: var(--ui-gold); }
/* AND A LEAD ACT THAT CANNOT BE PRESSED MUTES ITS MARK WITH ITS LABEL,
   which is the trips room's own landed reading of R1 ("R1's disabled-
   deletes-the-affordance reads the same on a mark as on a fill") applied
   to this page's own lead act. Until this touch the page's one gold
   point of light belonged to the control that does nothing: the loudest
   ink on the face was the least actionable thing on it, the same
   inversion the album was cured for. */
.cp-act--lead[data-inert="not-wired"] { color: var(--ui-muted); }
.cp-act--lead[data-inert="not-wired"] .ui-chip-dot { background: var(--ui-inert-ink); }
/* F3'S RANK, the desk's half of that finding (the WORD is the words desk's
   and lands in the catalog at the signed delta e44f4d83479b28e6): the
   checklist band's head takes the SECTION rank, the title token in serif and
   in ink, as the published country screen draws it and as the island
   ruling's line 2 says. It is a NARROWING of a published name inside this
   page's own scope, which is what a consumer may do, rather than a second
   definition of ui-type-label. */
/* THE SECTION RANK, one rule for every section head on this page. The design
   desk's D3 ruling point 1: each section head takes the page's own landed
   section rank, which is the checklist band's head form. Extended rather than
   re-declared, so the two cannot drift into two definitions of one rank (the
   class where a design system's role lives in one component and is copied into
   the next). The door LABELS are the heads, byte-unchanged. */
.cp-checklist .cp-slot-label, .cp-section .cp-slot-label { font: var(--ui-type-title); color: var(--ui-ink); }
.cp-checklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--ui-hairline); }
/* THE BREAK BELONGS ABOVE THE GROUP, AND UNTIL THIS ROW GAP IT DID NOT
   EXIST AT ALL.
   R1 cured the door rules' LENGTH and did not touch their POSITION, and
   the fresh-eyes walk R2 measured what a reader then met: the second,
   third and fourth rules drawn with gapAbove **0.00px** and gapBelow
   11px, in 8 of 8 cells - both geometries, both editions, both engines.
   A full-width hairline with zero clearance above it and eleven below
   belongs, to the eye, to the thing above it, so three of the four rules
   read as UNDERLINES OF "Designed, not built yet." - and a full-width
   underline is a more emphatic one than the ragged rule it replaced. In
   the Arabic edition it is worse, because that script descends further and
   the caption tail sits within a few device pixels of the rule. (The walk
   quotes the Arabic caption itself; it is not quoted here, because this
   comment ships INSIDE the emitted stylesheet, and an Arabic character in
   the source edition bytes is a real finding at the editions floor - which
   is where it was caught, on this comment, in this act.)
   THE MECHANISM, at this file's own bytes: .cp-doors had no row gap;
   the composition's .co-door-pair wrapper carries no block-end margin;
   and .cp-door's padding-block: 10px sits INSIDE its
   border-block-start, so all of the clearance went to the door BELOW
   the rule and none to the caption above it. Consecutive pairs stacked
   flush and the caption's descenders met the next rule.
   THE CURE IS THE SIGNED RHYTHM, not a number picked here: the design
   desk's walk-R2 ruling names the country F6 pick - the band-grain break
   belongs ABOVE a group, and a rule is owned by its own row rather than
   read as an underline of the line before. This page's band-grain break
   is .cp-page's own 16px gap, which is what already separates the
   head, the act and the checklist band, and what already gives the
   checklist rule and the FIRST door rule the balanced 16-above reading
   the walk measured and did not fault. The door list takes the same
   break between its pairs, so all five separator rules on the page carry
   one rhythm instead of two. The drawing's 24px break is NOT imported:
   this build's own band gap is 16px throughout and changing it is a
   redraw, which is not this repair's. */
.cp-slot-head { display: flex; align-items: baseline; gap: 8px; }
.cp-slot-head .cp-slot-label { margin: 0; }
.cp-cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cp-city { display: grid; grid-template-columns: minmax(0, 1fr); }
.cp-city-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-block-size: var(--ui-tap-min); inline-size: 100%; background: none; border: 0; padding: 0; color: inherit; text-align: start; font: inherit; }
.cp-city-name { overflow-wrap: anywhere; min-inline-size: 0; }
.cp-city-chev { display: inline-grid; place-items: center; color: var(--ui-muted); inline-size: 16px; block-size: 16px; }
.cp-city-chev svg { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .cp-city-chev svg { transform: scaleX(-1); }
.cp-doors { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
/* THE DOORS SPAN THE COLUMN, and until this rule they did not.
   Each door is wrapped by the composition in .co-door-pair so its
   "Designed, not built yet." note can never wrap away from the door it
   describes. That wrapper hugs its content by design - justify-items:
   start over minmax(0, auto) - because on the tab homes a chip carries
   meaning in its fill and never in its width. Here the wrapped thing is
   not a chip: .cp-door is written as a full-column ROW whose
   border-block-start is the separator BETWEEN doors. Hugging collapsed
   the row to its longest line, so the pair measured 352px and the door
   inside it 287.38px, and the fresh-eyes walk measured what a reader
   meets: four ragged rules of four different lengths, short by 64.6,
   95.8, 58.9 and 148.9px at 384x750, each stopping wherever that door's
   text happened to stop, reading as underlines of the note above them
   rather than as separators - beneath the one clean full-width rule of
   the checklist band, whose parent is the article grid directly. That is
   the sheet's own hairline-span row failing by up to 149px.
   THE SCOPE IS THIS PAGE'S DOOR LIST AND NOTHING ELSE. It is a NARROWING
   of a name the composition publishes, inside this page's own scope,
   which is what a consumer may do (round-ledger class 194) - never a
   definition. The ACT's pair is deliberately not reached: .cp-act--lead
   is a pill and a pill hugs, which is the rule that says width carries no
   meaning. Geometry stays LOGICAL, so the Arabic edition mirrors by
   construction with no second rule. */
.cp-doors > .co-door-pair { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.cp-door { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-block-size: var(--ui-tap-min); padding-block: 10px; border-block-start: 1px solid var(--ui-hairline); color: inherit; text-decoration: none; }
.cp-door-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cp-door-members { overflow-wrap: anywhere; }
/* THE FOUR SECTIONS, which the doors became when D3 put the rows on the page.
   The section keeps the door's own separation (a hairline above, the same row
   rhythm) so the page's vertical grammar is unchanged: what moved is that the
   scent line now sits directly above the thing it describes rather than above
   a tap that went nowhere. */
.cp-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--ui-hairline); }
/* The scent line takes the door member line's own wrapping: the know-before
   line is eight members and WILL wrap at 384, which the design desk's foot
   named and accepted, on the ground that a true long line beats a short lie. */
.cp-section-members { overflow-wrap: anywhere; }
.cp-section-stage { overflow-wrap: anywhere; }
/* THE ROWS. A list, because they are a list: several verified statements of
   one kind, read down. No marker and no generated content of any sort - this
   page's dress GENERATES NO CONTENT, which is a floor with a review behind it
   (a page-owned ::before once put an advert in front of the country name with
   every source assertion green). */
.cp-claims { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cp-claim { margin: 0; }
/* THE AUTHORED FORM: a scannable title over its detail. The gap between items
   is wider than between research rows because each item is now two blocks
   rather than one paragraph, and at the research-row rhythm a title read as the
   last line of the item above it. Every value is a published token; nothing
   here mints a colour or a face. */
.cp-claims--authored { gap: 16px; }
.cp-claim--authored { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.cp-item-title { margin: 0; color: var(--ui-ink); }
.cp-item-detail { margin: 0; }
/* The face note, once, under the head. */
.cp-stage-note { margin: 0; }
.cp-checklist-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cp-checklist-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; min-block-size: var(--ui-tap-min); }
.cp-tick { inline-size: 20px; block-size: 20px; border: 1px solid var(--ui-hairline); border-radius: 6px; }
/* A TICK THAT CANNOT BE TICKED IS NOT DRESSED HERE, AND THE REFUSAL IS
   THE POINT rather than an omission.
   This act's inert-dress sweep added a cp-tick data-inert arm and the
   signed band's own floor REFUSED IT BY NAME ("the band's own dress draws
   every row the same"): a rule reaching a checklist name may use only
   class names, element names, descendant combinators and :lang(), and an
   attribute selector is outside that world because it is a vocabulary
   that CAN tell one row from another. Every tick on a served page is
   refused today, so the arm drew every row the same in fact - but the
   floor is about what the vocabulary makes possible, and it is guarding
   commitment 2, that no state shows progress.
   WIDENING A SIGNED BAND'S DRESS VOCABULARY IS REDRAWING SIGNED WORK,
   which this file already says in terms twenty lines up about the other
   lead act. So the arm is withdrawn and the tick's refused dress is
   ROUTED to the design desk as its own one-line question, on that same
   precedent. The floor caught this act and the floor was right. */
.cp-scent { margin: 0; }
.cp-withheld { margin: 0; }
/* THE FACT ROWS - the drawn thin state's own form, in this page's scope.
   Geometry copied from the estate's existing fact row (.pl-fact on the
   place sheet) rather than invented, so one form serves both surfaces:
   the label and its readout on one line, the readout at the far end, a
   separator rule owned by the row it opens, and the row's own
   padding-block on BOTH sides of that rule so the clearance above it
   equals the clearance below it. That symmetry is the rhythm the door
   list had to be given above; here it is the geometry's default and the
   graded floor holds it there. */
.cp-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.cp-fact { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding-block: 10px; border-block-start: 1px solid var(--ui-hairline); }
/* THE LAST ROW KEEPS NO TRAILING CLEARANCE, and this is a rhythm rule
   rather than a tidying one. Every row's padding sits on both sides of
   the rule it opens, which is what makes the WITHIN-GROUP rules
   symmetric. Below the LAST row there is no rule for that padding to
   balance - it simply adds itself to the article's band-grain gap, and
   the first measurement of the cured tip caught exactly that: the
   checklist band's rule moved from 16px of clearance to 26 while the
   four door rules sat at 16, which is the SAME defect this repair
   exists to remove - one screen carrying two rhythms in one element.
   Dropped here, every band-grain break on the page is the article's own
   16px and the fact list's internal rules stay symmetric at 10 and 10.
   The two are different jobs and the numbers say so: a break BETWEEN
   groups leans above, a rule WITHIN one is even. */
.cp-fact:last-child { padding-block-end: 0; }
.cp-fact-text { min-inline-size: 0; overflow-wrap: anywhere; }
/* A LIVE CONTROL DOES NOT WEAR THE DEAD ONES' DRESS (walk R2's should-fix
   five; affordance follows the truth). On this page the act and all four
   section doors are declared PENDING and are inert, and the only control
   that answers a press was drawn exactly like them - so the one thing
   that works was told apart from the five that do not only by the ABSENCE
   of a "Designed, not built yet." caption, which is a negative signal a
   reader has to notice is missing.
   The press dress is the family's, unchanged: the estate's own
   scale(0.97) at --ui-press-in, resting on --ui-press-out and the
   house curve, exactly as the chip primitive and every acting surface
   draw it. It is written on the CLASS and cancelled by the TRUTH: the
   composition's [data-inert="not-wired"]:active { transform: none }
   already refuses it to every pending control, so the dress cannot lie
   about a door and this page never needs to keep a second list of which
   controls are live. Reduced motion cancels it here as it does there. */
.cp-act, .cp-door { transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.cp-act:active, .cp-door:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
@media (prefers-reduced-motion: reduce) {
  .cp-act:active, .cp-door:active { transform: none; }
}


.ck-page { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 12px; }
.ck-page-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ck-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ck-title { overflow-wrap: anywhere; }
.ck-headmeta { margin: 0; }
.ck-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
/* THE ROW IS NOT A DOOR (K-01), so it is a grid of two things and
   neither of them is a link: the tick, and the item's own words. */
.ck-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding-block: 12px; border-block-start: 1px solid var(--ui-hairline); }
.ck-item:first-child { border-block-start: none; }
.ck-item-text { min-inline-size: 0; overflow-wrap: anywhere; }
.ck-tickform { margin: 0; display: contents; }
/* THE TICK ROLE, K-01 verbatim: a 44px leading SQUARE, never a chip, and
   the mark shows only when it is pressed. The square is the tap target
   itself rather than a small mark inside a padded one, so the 44px floor
   is the control's own size and cannot be lost to a layout change. */
.ck-tick { display: grid; place-items: center; inline-size: var(--ui-tap-min, 44px); block-size: var(--ui-tap-min, 44px);
  border: 1.75px solid var(--ui-hairline); border-radius: 4px; background: transparent;
  color: transparent; text-decoration: none; padding: 0; cursor: pointer; }
.ck-tick svg { inline-size: 22px; block-size: 22px; }
.ck-tick[aria-pressed="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-ground); }
.ck-scent { margin: 0; }
.ck-back { text-decoration: none; color: var(--ui-ink); justify-self: start; min-block-size: var(--ui-tap-min, 44px); display: inline-flex; align-items: center; }
/* THE SHEET. It covers the page it is about, which is what an overlay
   is, and the page beneath carries the inert attribute so the covering
   is real rather than visual. (No backtick appears in this comment: it
   ships INSIDE an emitted template literal, where one would end the
   string three rules early - which is exactly how it was caught.) */
/* THE SCRIM DECLARES ITS RANK, and the absence of this one line was C1.
   MEASURED BY THE WALKER, not reasoned here: on the composed screen the
   tab bar is position sticky with z-index 1, and this layer declared NO
   z-index at all. A positioned element at z-index auto paints BELOW a
   positioned element at z-index 1, so the bar painted over the foot of
   this sheet and took the hit test at its centre. The walk read "Not now"
   at y 686 to 730 with the bar at y 696 to 744, and reported that exactly
   the top TEN pixels of the control were reachable. 696 minus 686 is ten.
   That arithmetic is the mechanism: the control was not mispositioned and
   the sheet was not too tall, the bar was simply on top of it.
   WHY THIS AND NOT PADDING: a person could not decline the offer, and
   padding the sheet up above the bar would leave a modal whose scrim does
   not cover the one control still painted over it. The sheet already
   declares aria-modal and the page behind it carries inert; a modal that
   the chrome outranks is not modal. 20 is the estate's own tier for a
   bottom-anchored modal of exactly this shape, carried by tp-overlay in
   the trips room and in capture, which are position fixed, inset 0,
   grid, align-items end, like this one.
   AND THE FLOOR THAT SHOULD HAVE CAUGHT IT NOW CAN: shell-scroll-floor's
   scrim collector skipped any layer that declared no z-index, so the one
   shape that fails was the one shape it could not see. That hole is
   closed beside this line. */
.ck-scrim { position: fixed; inset: 0; z-index: 20; display: grid; align-items: end; background: var(--ui-scrim, rgba(0, 0, 0, 0.45)); }
.ck-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px;
  background: var(--ui-ground); border-start-start-radius: 16px; border-start-end-radius: 16px; max-block-size: 88svh; overflow-y: auto; }
.ck-offer-title { margin: 0; }
.ck-offer-item { margin: 0; color: var(--ui-muted); }
.ck-offer-line { margin: 0; }
.ck-offer-row, .ck-offer-start { margin: 0; }
.ck-offer-trip { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%;
  min-block-size: var(--ui-tap-min, 44px); padding-block: 10px; border: none; border-block-start: 1px solid var(--ui-hairline);
  background: transparent; color: inherit; text-align: start; cursor: pointer; }
.ck-offer-act { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--ui-tap-min, 44px);
  padding-inline: 16px; border-radius: 999px; text-decoration: none; font: var(--ui-type-label); cursor: pointer; }
.ck-offer-act--start { border: 1.75px solid var(--ui-ink); background: transparent; color: var(--ui-ink); inline-size: 100%; }
.ck-offer-act--baseline { border: none; background: transparent; color: var(--ui-muted); }


:root {
  --pl-scrim-ink: color-mix(in srgb, black 45%, transparent);
  --pl-sheet-shadow: color-mix(in srgb, black 35%, transparent);
  --pl-pressed-ink: color-mix(in srgb, var(--ui-ink) 72%, var(--ui-gold));
  --pl-pressed-lift: color-mix(in srgb, var(--ui-ground) 55%, var(--ui-card));
}
[data-ground="paper"] {
  --pl-scrim-ink: color-mix(in srgb, black 30%, transparent);
  --pl-sheet-shadow: color-mix(in srgb, black 16%, transparent);
  --pl-pressed-ink: color-mix(in srgb, var(--ui-ink) 72%, var(--ui-gold));
  --pl-pressed-lift: color-mix(in srgb, var(--ui-ground) 55%, var(--ui-hairline));
}

/* The component carries its own box-sizing reset, so it composes the same
   on a surface that has one and a surface that has not: without it a
   declared 44px tap floor renders taller than it declares, because the
   primitives layer publishes no reset. */
.pl-row, .pl-row *, .pl-sheet, .pl-sheet *, .pl-scrim { box-sizing: border-box; }

/* THE ICON ACT (02a R1: a bare 44px icon-act, muted ink, 20px glyph).
   The primitives layer publishes the TYPE roles but not the CONTROL-role
   dresses, so this rule is published here, with the component's own
   prefix, until that lift lands. Ledger class 194 rules the shape of
   that interim: a component may not be the only place a SHARED class
   name is defined, so the name is this component's own - a later room
   that copies the rule keeps its dress, where a later room that used a
   shared name defined only here would silently lose it. */
.pl-icon-act {
  display: grid; place-items: center;
  inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  border: none; background: none; padding: 0; color: var(--ui-muted); cursor: pointer; flex: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-icon-act:active { color: var(--pl-pressed-ink); transform: scale(0.97); transition-duration: var(--ui-press-in); }
.pl-icon-act svg { inline-size: 20px; block-size: 20px; }
.pl-icon-act[aria-pressed="true"] { color: var(--ui-ink); }

/* the shared row: an in-app door with its own save act beside it */
.pl-row { display: flex; gap: 8px; align-items: center; inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.pl-row:last-child { border-block-end: none; }
/* A consumer whose drawing rules ALL OR NONE and chooses none asks for the
   flush row through renderPlaceRow's own option; the rule lives here because
   this module is the one that dresses this row. */
.pl-row--flush { border-block-end: none; }
.pl-row .pl-icon-act { margin-inline-end: -12px; }
.pl-row-door {
  display: flex; flex: 1; align-items: center; min-block-size: var(--ui-tap-min);
  padding-block: 6px; padding-inline: 0; min-inline-size: 0;
  border: none; background: none; color: inherit; text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-row-door:active { background: var(--pl-pressed-lift); transform: scale(0.98); transition-duration: var(--ui-press-in); }
.pl-row-main { display: grid; gap: 1px; justify-items: start; flex: 1; min-inline-size: 0; }
.pl-name { font: var(--ui-type-body); color: var(--ui-ink); }
/* the door row: muted ink, its readout pinned to the trailing edge, the
   full column wide - one dress for every in-app door in the family */
.pl-row--door { color: var(--ui-muted); }
.pl-door-face { justify-content: space-between; gap: 8px; }
.pl-door-face:active { background: var(--pl-pressed-lift); }
.pl-door-label { font: var(--ui-type-body); flex: 1; }
.pl-row-readout { flex: none; }
.pl-row-glyph { align-self: center; display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; }
.pl-row-glyph svg { inline-size: 18px; block-size: 18px; }
.pl-scent { text-align: start; }
.pl-nowrap { white-space: nowrap; }

/* the shared sheet: the family's one sheet grammar */
/* The dialog itself: a full-surface layer holding the backdrop and the
   card. It carries no ink of its own - the scrim is the ink. */
.pl-sheet-layer { position: absolute; inset: 0; z-index: 2; }
.pl-scrim {
  position: absolute; inset: 0; z-index: 2; display: block;
  border: none; padding: 0; cursor: pointer;
  background: var(--pl-scrim-ink);
  transition: opacity var(--ui-motion-scrim, 160ms) linear;
}
/* A SHEET THAT OUTGROWS ITS SURFACE MUST STILL BE READABLE. It is
   bottom-anchored inside a surface that clips its overflow, so a place
   with enough standing facts - or simply a denser translated edition
   with both exits - would grow past the top of the screen and take its
   own head and first facts with it, unreachable. It gets a ceiling and
   its own scroller. */
.pl-sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  max-block-size: 88%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-card);
  border-start-start-radius: 16px; border-start-end-radius: 16px;
  border: 1px solid var(--ui-hairline); border-block-end: none;
  padding-block: 8px 20px; padding-inline: 20px;
  display: grid; gap: 0; justify-items: start;
  box-shadow: 0 -8px 32px var(--pl-sheet-shadow);
  transition: transform var(--ui-motion-rise, 280ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pl-grab { inline-size: 36px; block-size: 4px; border-radius: 2px; margin-block: 0 10px; margin-inline: auto; background: var(--ui-hairline); justify-self: center; }
.pl-head { display: grid; gap: 2px; justify-items: start; inline-size: 100%; padding-block-end: 10px; }
.pl-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; }
.pl-headrow .ui-type-title { flex: 1; }
.pl-headrow .pl-icon-act { margin-inline-end: -12px; }
.pl-facts { display: grid; gap: 0; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.pl-fact { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; inline-size: 100%; padding-block: 10px; border-block-start: 1px solid var(--ui-hairline); }
.pl-fact-text { font: var(--ui-type-body); color: var(--ui-ink); }
.pl-exits { display: grid; gap: 0; inline-size: 100%; justify-items: start; border-block-start: 1px solid var(--ui-hairline); padding-block: 4px 2px; }
.pl-ext {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0; cursor: pointer;
  /* BOTH axes. This declared its block floor and not its inline one,
     and every exit the demo world rendered was long enough that it
     never showed - the one short exit in the family, Call, was gated
     on a real number and so had never been drawn at all. The walk's
     evidence frame drew it and it measured 43px wide on both engines
     at both geometries: one pixel under, on the only control narrow
     enough to be. A floor that only holds for long labels is not a
     floor. */
  min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min);
  color: var(--ui-muted); font: var(--ui-type-label);
  text-decoration: underline dotted; text-underline-offset: 3px;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-ext:active { color: var(--pl-pressed-ink); transform: scale(0.97); transition-duration: var(--ui-press-in); }
.pl-out-mark { display: inline-grid; place-items: center; flex: none; }
.pl-out-mark svg { inline-size: 12px; block-size: 12px; }
/* R7.3: what did not land is said UNDER the control, not beside it, so
   the eye reads the act and then its answer rather than a row of two
   competing sentences. */
.pl-acts { display: grid; gap: 2px; justify-items: start; inline-size: 100%; padding-block-start: 6px; }
.pl-base-act {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--ui-tap-min);
  border: none; background: none; padding-block: 10px; padding-inline: 2px;
  color: var(--ui-ink); font: var(--ui-type-label); text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-base-act:active { color: var(--pl-pressed-ink); transform: scale(0.97); transition-duration: var(--ui-press-in); }
.pl-act-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ui-gold); flex: none; }
/* R6.2: the family's ONE in-flight mark - the act's own gold dot,
   breathing. No spinner exists in this component and none may. */
.pl-act-dot[data-breathing="true"] { animation: pl-breathe var(--ui-motion-breathe, 1200ms) linear infinite; }
@keyframes pl-breathe { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.pl-base-act[aria-busy="true"] { cursor: default; }
/* R7.3: what did not land, said under the control in the act's own
   words, never a dialog and never the word error. */
/* The same ink step as the reading's own failed-commit line, for the
   same reason and by the same rule: ambient state is muted, the
   reader's own act failing is ink. See the note there. */
.pl-could-not { margin: 0; color: var(--ui-ink); }

/* Reduced motion removes the family transform and KEEPS the pressed
   dress: R4a is state, not motion, so a person who turns motion off
   still sees what they pressed. */
/* M4/M5: every computed duration in this component goes to zero, not
   the two it happened to name. The pressed dress stays - R4a is state,
   not motion - and R6.2's mark becomes static rather than absent, so
   someone who turned motion off can still see what is in flight. */
@media (prefers-reduced-motion: reduce) {
  .pl-row, .pl-row *, .pl-sheet, .pl-sheet *, .pl-scrim {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .pl-icon-act:active, .pl-row-door:active, .pl-ext:active, .pl-base-act:active { transform: none; }
  .pl-act-dot[data-breathing="true"] { opacity: 0.7; }
}

/* the sheet keeps a reading column above the phone; the rule belongs to
   the component, so no consuming room reaches into its class */
@media (min-width: 700px) {
  .pl-sheet { max-inline-size: 520px; margin-inline: auto; }
}


/* the index: the list head, its facet chips, the letter rows */
.ex-listhead { display: flex; align-items: baseline; gap: 12px; }
.ex-listhead-title { flex: 1; margin: 0; }
.ex-chips { display: flex; gap: 8px; padding-block: 2px 6px; }
.ex-letter { padding-block: 14px 4px; color: var(--ui-muted); }
/* THE INDEX ROWS ARE LIVE DOORS AND WEAR THE DOOR INK (the A-to-Z
   walk's blocker, ruled option A): the door's title takes the row's own
   title ink, because dim ink is for what is secondary, never for a
   destination - the door primitive's own words. The meta line stays
   muted, the family's meta rank; the trailing chevron rides the
   primitives' own ui-bound-chev dress, mirror included, which both of
   this slice's consumers inline. Scoped to the index's own list so the
   family default is not re-ruled for rows nobody walked. */
.ex-index .tp-door { color: var(--ui-ink); }
.ex-index .tp-door .ui-type-meta { color: var(--ui-muted); }


.ci-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 12px; }
.ci-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ci-headrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ci-headline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-inline-size: 0; }
.ci-name { overflow-wrap: anywhere; margin: 0; }
.ci-character { margin: 0; }
.ci-depth { margin: 0; }
.ci-icon-act { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-inline-size: var(--ui-tap-min); min-block-size: var(--ui-tap-min); background: none; border: 0; color: inherit; padding: 0; }
.ci-acts { display: flex; }
.ci-act { display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--ui-tap-min); padding-inline: 2px; text-decoration: none; color: inherit; }
.ci-act .ui-chip-dot { background: var(--ui-gold); }
.ci-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ci-bandhead { display: flex; align-items: baseline; }
.ci-bandhead h2 { margin: 0; }
.ci-band-line { margin: 0; }
.ci-places, .ci-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ci-places { margin-block-start: 4px; }
.ci-sections { gap: 24px; }
.ci-place-door { display: grid; grid-template-columns: minmax(0, 1fr); }
.ci-door { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-block-size: var(--ui-tap-min); text-decoration: none; color: inherit; }
.ci-door-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-inline-size: 0; }
.ci-door-title { display: block; }
.ci-door-members { display: block; color: var(--ui-muted); }
.ci-chevron { display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; inline-size: 16px; block-size: 16px; }
.ci-chevron svg { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .ci-chevron svg { transform: scaleX(-1); }
.ci-overview { gap: 12px; }
.ci-overview-line { margin: 0; }
.ci-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ci-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-inline-size: 0; }
.ci-note-name { display: block; }
.ci-note-line { display: block; }
.ci-note[data-zone="area"] .ci-note-line { color: var(--ui-muted); }
.ci-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ci-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; min-block-size: var(--ui-tap-min); }
.ci-fact-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }


/* THE BOX MODEL, set here because nothing publishes it.
   The verdicted design sheet opens with a global box-sizing border-box
   reset; the canon token source and the owned primitives' stylesheet carry
   none, so a room composing them inherits the CSS default of content-box and
   every full-width element that also has padding overflows its
   parent by exactly that padding. The walk caught it as a sideways scroll on
   the sheet (382 wide inside a 350 box) and as a facet chip measuring 44px
   visual inside a 56px hit box - the same defect twice, because a 32px pill
   with 5px padding and a 1px border is 44px in content-box arithmetic.
   Scoped to this artifact's own elements rather than declared globally, so
   the room cannot change the box model of anything it does not own.
   FILED FOR THE SHELL COMMISSION as F6: the shared layer publishes no box
   model, and every room that uses padding with a full-width element will pay
   this exact cost until it does.
   AND A LIMIT A MAINTAINER SHOULD KNOW: .rr-page is a DOM boundary, not an
   ownership boundary. It scopes these rules to this artifact's own tree, so
   nothing outside it is touched - but anything a later act nests INSIDE that
   wrapper inherits them, whoever owns it. That is the right trade for a
   self-contained walk artifact and the wrong one for a shell that hosts other
   people's surfaces, which is another reason the reset belongs in the shared
   layer rather than in a room. */
.rr-page, .rr-page *, .rr-page *::before, .rr-page *::after { box-sizing: border-box; }
/* AND THE ELEMENT DEFAULTS, for the same reason and found the same way. The
   verdicted sheet resets the margins on headings, paragraphs, lists and
   figures and strips the list indent; the shared layers reset neither, so
   every paragraph in this room carried the browser's own 1em margins and
   every list sat 40px in from the start edge. The panel arithmetic is what
   exposed it: a title that should occupy 16px was occupying 40. A room that
   composes a stylesheet which does not reset these has to reset them itself
   or draw a page nobody designed. FILED FOR THE SHELL COMMISSION with F6: the
   shared layer publishes no element reset either. */
.rr-page h1, .rr-page h2, .rr-page h3, .rr-page p, .rr-page ul, .rr-page figure { margin: 0; }
.rr-page ul { padding: 0; list-style: none; }

/* ---- the derived surface colours (no literal is born here; see header) --- */
.rd-app {
  /* Recessed, and derived WITHOUT a colour name. The first form mixed the
     ground toward the colour name black, which is a literal the census floor's own
     header says it deliberately cannot see - a value that would have grown a
     second palette in named words while passing the floor. The scrim token is
     already the canon's own "darker than the ground" value, in both grounds,
     so the recess derives from the palette instead of beside it. */
  --rd-page-ground: color-mix(in srgb, var(--ui-ground) 88%, var(--ui-scrim));
  --rd-row-rule: color-mix(in srgb, var(--ui-hairline) 72%, transparent);
  /* The seam where the sheet rises off the map carries the whole separation
     between two grounds, and on paper the canon hairline against the paper
     ground measured about 1.1 to 1 - a line the walk could barely find. It is
     lifted toward the muted ink so the edge reads on both grounds, derived
     from the palette rather than picked beside it. */
  --rd-seam: color-mix(in srgb, var(--ui-hairline) 60%, var(--ui-muted) 40%);
  --rd-quiet-edge: color-mix(in srgb, var(--ui-hairline) 58%, var(--ui-muted) 42%);
  --rd-quiet-ink: var(--ui-muted);
  --rd-quiet-ink-lifted: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-ink) 45%);
  --rd-entry-rule: 2px dashed color-mix(in srgb, var(--ui-hairline) 68%, var(--ui-muted) 32%);
  --rd-texture-line: color-mix(in srgb, var(--ui-ink) 3%, transparent);
  --rd-wash: color-mix(in srgb, var(--ui-hairline) 55%, transparent);
  --rd-glass: color-mix(in srgb, var(--ui-ground) 66%, transparent);
  --rd-glass-edge: color-mix(in srgb, var(--ui-ink) 12%, transparent);
  --rd-panel-shadow: 0 8px 24px var(--ui-scrim);
  --rd-local-pad: 20px;
}

/* ---- the frame: a map band over a sheet that scrolls ---- */
.rd-app {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  background: var(--ui-ground);
  color: var(--ui-ink);
}
.rd-mapfield {
  flex: none;
  block-size: 36svh;
  min-block-size: 220px;
  position: relative;
  background:
    radial-gradient(140% 90% at 50% -20%, var(--rd-wash) 0%, transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--rd-texture-line) 3px 4px),
    var(--rd-page-ground);
}
/* THE ARCS WERE HERE AND ARE GONE. They were GROUND, centred on nothing you
   stand on, because centred on the fix they read as the circle model the
   design owner rejected. The desk retired the same 44px pattern from the
   composed page ground on 2026-08-27 after the owner read it as noise a
   third time, and its dated amendment named this room by file and line
   (RULING-BACKGROUND-ARCS-LEAVE-THE-COMPOSED-GROUND-20260827, sha256-16
   20ac5dd4586f5527 whole, d16b34a31700acd2 before that amendment). */

.rd-sheet {
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: var(--ui-ground);
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
  border-block-start: 1px solid var(--rd-seam);
  margin-block-start: -16px;
  padding: 20px;
  padding-block-start: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-content: start;
  justify-items: start;
}
/* the published quiet voices, NARROWED inside this room's scope (not
   redefined): a readout reads quiet on the sheet, and lifts on a raised
   ground so it stays legible over glass and over the dashed entry */
.rd-sheet .ui-readout,
.rd-sheet .ui-readout-caps { color: var(--rd-quiet-ink); }
.rd-aside, .rd-tunepanel { --rd-quiet-ink: var(--rd-quiet-ink-lifted); }
.rd-aside .ui-type-meta, .rd-tunepanel .ui-type-meta { color: var(--rd-quiet-ink); }
.rd-quiet { color: var(--ui-muted); }

/* THE READING BODY TAKES ITS OWN DIRECTION; THE INLINE CONTENT TAKES THE
   EDITION'S. Two values of ONE property, unicode-bidi, on two different sets
   of subjects, and the heading names both rather than claiming the first for
   all of them.

   THE GROUND. The chrome is translated and mirrors with the edition, which is
   right. The READING is not translated - a place's official name and the
   read's own words stay in the language they were written in - and an
   untranslated English paragraph inside a right-to-left container has the
   trailing punctuation of a line reordered to the other end of it, and flushes
   to the container's edge rather than its own. What was actually observed on
   this surface is narrower than the general claim and is stated below.

   WHAT THE TWO VALUES ACTUALLY DO. "isolate" cuts an element out of the
   surrounding bidi context so its content cannot reorder its neighbours, and
   leaves its BASE DIRECTION the one it inherits from the edition. Only
   "plaintext" derives the base from the element's own first strong character.
   The comment that stood here said every content element took the direction of
   its own first strong character while the rule beneath it declared "isolate"
   for all six selectors: the prose certified the cure and the code carried the
   defect, which is ledger class 65, and it is why a reader of these bytes
   could not re-derive what the page would do.

   THE READING BODY TAKES ITS OWN BASE, because it is a paragraph of prose and
   the base is what decides where its final stop lands. Under "isolate" the
   English read inside the Arabic edition right-aligned and its full stop was
   reordered to the start of its line: walk R2, and the B8 serve grade named it
   at ar-android-384 as ".side they go quiet". Under "plaintext" the same
   paragraph reads left to right, flush to the left edge, with the stop after
   the last word.

   WHY NOT THE FORM THE JOURNAL ENTRY PAGE USES, which was named as the copy
   source. That page and the orient reading both isolate record text in MARKUP,
   with a bdi element: the journal entry through country/grammar.ts isolate(),
   the orient reading through place/place-sheet.ts isolate(), which are two
   helpers of the same name in two seams. A bdi and
   "plaintext" are NOT the same rendered result and this comment does not
   pretend they are: a bdi isolates a RUN inside a paragraph whose own base
   stays the edition's, so the stop stops migrating and the paragraph KEEPS
   FLUSHING RIGHT; "plaintext" gives the PARAGRAPH its own base, so it flushes
   left as well.

   THESE FIGURES ARE A FIXTURE'S, NOT THIS ARTIFACT'S. The artifact carries 32
   bdi elements, and they are in the PLACE SHEETS rather than the place rows:
   twelve on meta lines, eight on fact text, eight on readouts and four on
   titles. The READING PARAGRAPH carries none, so there is nothing here to
   measure the two forms against each other on. The comparison was made on a purpose-built page instead: Chromium
   151.0.7922.34, viewport 384x750, a 344px block inside a right-to-left body,
   16px/1.2 sans-serif, carrying this room's own read as its only text. On it,
   isolate puts the stop at x=65.94 and the last letter at x=358.55 with the
   line flushed right; the bdi form puts them at 358.55 and 354.11 with the
   line still flushed right; plaintext puts them at 311.59 and 307.16 with the
   line flushed left. The artifact's own numbers are the floor's, and they
   differ because the type and the measure differ.

   The seat ruled for this cure is this CSS region, and the grade named the
   right-alignment as part of the wrongness, so this rule takes the value that
   answers both halves of what was named. The difference from
   the copy source is deliberate and is recorded here so a later hand copying
   the bdi form onto this surface knows it will get the flush back.

   NO MARKUP IS SPELLED AS MARKUP IN THIS COMMENT, deliberately. These bytes
   ship inside the composed page's own style element, so an angle-bracketed tag
   written here IS a tag as far as any scanner reading that page is concerned:
   one earlier draft wrote a right-to-left body tag as an example and the
   composition suite's base-type-role check read it as the document's own body
   and went red. A comment that ships is page content.

   Measured in Chromium, both polarities, at both owner geometries:
   scripts/m54/reading-body-bidi-floor.mjs. The declared value is pinned in
   this room's suite; the BEHAVIOUR is proven only at that floor, because a
   resolved bidi base direction is not a property any static read exposes.

   THE INLINE CONTENT ELEMENTS KEEP "isolate", AND KEEP THE EDITION'S BASE.
   Three of the five carry names, addresses and measures, where not reordering
   the run around them is the whole of what they need. The other two do not,
   and saying otherwise would be inventing a rationale for leaving them: a
   zone's description and an essentials row are English SENTENCES, and a
   sentence inside a right-to-left container has the same defect the reading
   body had. They keep the old value because their surface is ruled standing,
   not because the value is right for them. Where their own
   base should come from is the zone bands' and the place rows' question, and
   that composition is ruled standing until the kind-row re-draw, so this rule
   does not answer it. The residual is real and is named rather than quietly
   carried: at ar-android-384, under this value, six of them put a trailing
   character at the wrong end - the full stop of each of the three zone
   descriptions, the closing quote of Mozarthaus Vienna "Figarohaus", and the
   full stop of each of the two essentials rows. That list was measured by hand
   against this artifact on 2026-09-02 and IS NOT UNDER ANY FLOOR: the render
   floor drives the body's declaration only, so both of its editions carry
   these five selectors at "isolate" and none of the six ever appears in its
   moved set. Nothing here watches them; the surface's own hand rules them. */
.rd-read p { unicode-bidi: plaintext; }
.rd-zonehead .ui-type-title,
.rd-zone > .ui-type-meta,
.rd-place-main > span,
.rd-listrow-main,
/* a number and its unit are ONE quantity and travel together */
.rd-measure { unicode-bidi: isolate; }

/* ---- the room's own controls ---- */
.rd-act {
  display: grid;
  place-items: center;
  inline-size: var(--ui-tap-min);
  block-size: var(--ui-tap-min);
  border: none;
  background: none;
  padding: 0;
  color: var(--ui-muted);
  cursor: pointer;
  flex: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.rd-act:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.rd-act svg { inline-size: 20px; block-size: 20px; }
.rd-act[aria-pressed="true"] { color: var(--ui-ink); }

.rd-a11y {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rd-back, .rd-tune {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: var(--ui-tap-min);
  block-size: var(--ui-tap-min);
  border-radius: 50%;
  background: var(--ui-ground);
  border: 1px solid var(--ui-hairline);
  color: var(--ui-ink);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.rd-back { inset-block-start: 12px; inset-inline-start: 12px; }
/* THE CONTROL A PERSON PRESSES IS THE CONTROL THAT ANSWERS.
   The scrim is a transparent catcher across the whole band at z-index 2, and
   the tune control sat below it: with the panel open the button was still
   drawn, still carried its open state, and could not be pressed - every tap
   on it was taken by the scrim. The OUTCOME was right by luck (the scrim
   closes the panel too), and the control gave no press feedback for a press
   it never received, which is a control lying about whether it heard you.
   Measured on the walk rig at both geometries on both families: the scrim
   intercepted every pointer event aimed at the button. It sits at the panel's
   own rank now, and the two never overlap - the panel stops 64px from the
   inline end and the button occupies the last 56px - so raising it takes
   nothing from the panel. The scrim keeps the rest of the band. */
.rd-tune { inset-block-end: 28px; inset-inline-end: 12px; z-index: 3; }
.rd-back:active, .rd-tune:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.rd-back svg, .rd-tune svg { inline-size: 20px; block-size: 20px; }
/* the back glyph is the disclosure chevron turned around, which is the
   tree's own backlink idiom (capture/styles.ts) - never a second drawing */
/* The disclosure chevron points toward the END edge, so pointing it at BACK
   means turning it round - and turning it round is a PHYSICAL mirror, which
   does not know about the edition. In a right-to-left edition the back control
   sits at the right and back is toward the right, so the chevron is already
   pointing the right way and the mirror has to come off. Without this it sat
   at the right edge pointing left, which is the one direction it must not
   point. */
.rd-back-glyph { transform: scaleX(-1); }
[dir="rtl"] .rd-back-glyph { transform: none; }
/* THE OPEN STATE'S INK EDGE FOLLOWS THE CONTROL'S OWN STATE ATTRIBUTE.
   The control was an anchor carrying role="button" and aria-pressed; it is a
   real disclosure button carrying aria-expanded now, because what its state
   describes is whether a PANEL is showing rather than whether a toggle is
   held down. The dress the design owner signed is unchanged - ink edge while
   the panel is open or a facet is on - and it hangs off the attribute that
   is actually there. Written down because a selector left on the old
   attribute is a rule that matches nothing and says nothing when it stops. */
.rd-tune[aria-expanded="true"], .rd-tune[data-facets="on"] { border-color: var(--ui-ink); }
/* THE TUNE GLYPH, drawn in CSS and deliberately not as markup. The
   drawn-once census gives icon MARKUP one birthplace, and that set holds no
   glyph for "what the map shows" (finding F3) - so this room may not open a
   second birthplace, and a labelled pill in place of the sheet's round
   control would change a signed screen. Three rules and three sliders,
   inheriting currentColor, is the same reading at the same size. */
.rd-tune-glyph {
  position: relative;
  display: block;
  inline-size: 20px;
  block-size: 20px;
}
.rd-tune-glyph::before {
  content: "";
  position: absolute;
  inset-inline: 1px;
  inset-block-start: 3px;
  block-size: 1.5px;
  background: currentColor;
  box-shadow: 0 5.5px 0 0 currentColor, 0 11px 0 0 currentColor;
}
.rd-tune-glyph::after {
  content: "";
  position: absolute;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: var(--ui-ground);
  inset-block-start: 1.5px;
  inset-inline-start: 4px;
  box-shadow:
    5.5px 5.5px 0 -1.5px var(--ui-ground),
    5.5px 5.5px 0 0 currentColor,
    -1px 11px 0 -1.5px var(--ui-ground),
    -1px 11px 0 0 currentColor;
}

/* the anchor: gold's first licensed meaning, outline and dot, never a mass */
.rd-anchor {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ui-gold);
  pointer-events: none;
}
.rd-anchor svg { inline-size: 16px; block-size: 16px; }

/* the field shows what the panel says it shows: one muted mark per place row
   in view, a tiny label where it fits */
/* THE FIELD IS GEOGRAPHY, AND GEOGRAPHY DOES NOT MIRROR.
   Every other geometry in this room is logical (inline/block, start/end) so
   the Arabic edition mirrors by construction, which is the canon's law and is
   right for chrome and for text. It is WRONG here: a mark's x is a physical
   easting, and under an inline-start rule the Arabic frame drew east on the
   left and west on the right - the page's strongest spatial claim, false in
   one of its own editions. The marks layer is therefore pinned to
   left-to-right so start means WEST in both editions, and each label's bidi
   base follows its OWN first strong character (plaintext), defaulting to
   left-to-right when it has none, so an Arabic-first mixed name reads
   correctly while that pin stands. */
.rd-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  direction: ltr;
}
.rd-mark-label { unicode-bidi: plaintext; }
.rd-mark {
  position: absolute;
  /* The LAYER is pointer-transparent so the map's ground is not a control;
     each mark takes its own taps back, because every mark is now a door. */
  pointer-events: auto;
  text-decoration: none;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  max-inline-size: 46%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translate(-3px, -50%);
  color: var(--ui-muted);
  white-space: nowrap;
}
/* THE DOT IS THE MARK'S OWN INK, through currentColor. Caught by this
   act's own floor rather than by the walk: the mark's label is muted and
   its dot was written at the same token, which is byte-identical alive
   and comes apart the moment the mark is refused - eleven of these carry
   the door pass's mark on the reading, so the label would recede and the
   dot would stay where it was. A drawn part of a control is dressed by
   the control, never by a second reading of the same token. */
.rd-mark::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* THE TAP BOX, AND WHY IT IS AN OVERLAY RATHER THAN PADDING.
   A mark's dot sits at a true bearing from the reader's own anchor, so
   nothing about its drawn position may move to make room for a finger.
   Padding would have moved the dot; this is a transparent square centred on
   the dot, laid over it, changing no pixel anyone can see. Its side comes
   from the markup as --hit, derived per mark in room.ts: the canon minimum
   where the field has room for it, reduced only as far as a nearer
   neighbour forces, so no two marks ever fight over the same tap. */
.rd-mark::after {
  content: "";
  position: absolute;
  inline-size: var(--hit);
  block-size: var(--hit);
  inset-block-start: 50%;
  inset-inline-start: 3px;
  transform: translate(-50%, -50%);
}
.rd-mark--flip::after {
  inset-inline-start: auto;
  inset-inline-end: 3px;
  transform: translate(50%, -50%);
}
/* A mark on the end half of the band puts its label BEFORE the dot so the
   label runs inward. Reversing the flex order alone does NOT do that: the box
   is still anchored at its start edge and still grows toward the end, which
   is how a label ran 195px past the band (the walk measured it). The box has
   to be anchored at its END. */
.rd-mark--flip {
  flex-direction: row-reverse;
  inset-inline-start: auto;
  inset-inline-end: calc(100% - var(--x));
  transform: translate(3px, -50%);
}
.rd-mark-label { font: var(--ui-type-meta); font-size: 11px; line-height: 14px; }

/* the scale leaves the panel for the map: select-one text tabs on a
   translucent ground, top-end, the map's own control */
.rd-scale {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  display: flex;
  gap: 2px;
  padding-inline: 6px;
  block-size: var(--ui-tap-min);
  border-radius: 22px;
  background: var(--rd-glass);
  border: 1px solid var(--rd-glass-edge);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.rd-scale-tab {
  position: relative;
  border: none;
  background: none;
  padding-inline: 8px;
  min-block-size: var(--ui-tap-min);
  min-inline-size: var(--ui-tap-min);
  font: var(--ui-type-label);
  color: var(--ui-muted);
  cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.rd-scale-tab:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.rd-scale-tab[aria-checked="true"] { color: var(--ui-ink); }
/* THE UNDERLINE IS DRAWN IN THE LABEL'S OWN INK, through currentColor
   rather than through the ink token, and the batch-5 walk is why. These
   three tabs are <button disabled> on this panel: the whole scale
   control is unbuilt, and one of the three was still showing a SELECTION.
   A segmented control that shows a selection is the strongest promise
   the screen makes that pressing the others changes something, and it
   was making it on a control that does nothing.
   A bar written "background: var(--ui-ink)" reads the token and so keeps
   full ink however the label is dressed, which is the same shape as the
   finding one level up: the refusal reached the element and not the part
   it draws. currentColor makes the bar a fact about the label rather
   than a second, independent decision, so the composition's refused ink
   carries it with no rule of its own - and alive it is byte-identical,
   because the label alive IS var(--ui-ink) on the line above. */
.rd-scale-tab[aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 10px;
  block-size: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* ---- the head, the read, the first-hour note ---- */
.rd-head { display: grid; gap: 4px; justify-items: start; inline-size: 100%; }
.rd-headrow { display: flex; gap: 8px; align-items: center; inline-size: 100%; }
.rd-headrow .ui-type-display { flex: 1; }
/* the head-icon overhang spends only gutter that exists (the design owner's
   head-overhang ruling: the pull is bounded by the local gutter) */
.rd-headrow .rd-act { margin-inline-end: calc(-1 * min(12px, var(--rd-local-pad, 12px))); }
.rd-where { color: var(--ui-muted); }
.rd-prov { display: inline-flex; align-items: center; gap: 6px; }
.rd-read { display: grid; gap: 12px; max-inline-size: 52ch; }
.rd-aside {
  border-inline-start: var(--rd-entry-rule);
  padding-block: 2px;
  padding-inline-start: 16px;
  display: grid;
  gap: 6px;
  justify-items: start;
  inline-size: 100%;
}
.rd-aside .ui-readout-caps { margin-block-end: -2px; }

/* ---- zones as bands, places as row doors ---- */
.rd-around { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: 100%; }
.rd-sectionhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  inline-size: 100%;
  padding-block-end: 6px;
}
.rd-sectionhead .rd-slot-label { flex: 1; }
.rd-slot-label { color: var(--ui-muted); }
.rd-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  justify-items: start;
  inline-size: 100%;
  padding-block: 14px 6px;
  border-block-start: 1px solid var(--rd-row-rule);
}
.rd-zone:first-of-type { border-block-start: none; padding-block-start: 6px; }
.rd-zone--empty { padding-block-end: 10px; }
/* The empty facet's one line, standing where the first band's rows would
   have landed: a band's own leading room above it, a band's own room below.
   It is meta voice and takes its ink from that, so this rule sets position
   and nothing else. */
.rd-facet-empty { padding-block: 6px 10px; }
.rd-zonehead { display: flex; gap: 8px; align-items: baseline; inline-size: 100%; }
.rd-zonehead .ui-type-title { flex: 1; }
.rd-prov-dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--ui-type-meta);
  color: var(--ui-muted);
}
.rd-prov-word { white-space: nowrap; }
.rd-places {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  inline-size: 100%;
  margin-block-start: 4px;
}
.rd-place {
  display: flex;
  gap: 8px;
  align-items: center;
  inline-size: 100%;
  border-block-end: 1px solid var(--rd-row-rule);
}
.rd-place:last-child { border-block-end: none; }
.rd-place .rd-act { margin-inline-end: calc(-1 * min(12px, var(--rd-local-pad, 12px))); }
.rd-place-door {
  display: flex;
  flex: 1;
  align-items: center;
  min-block-size: var(--ui-tap-min);
  padding-block: 6px;
  color: inherit;
  text-decoration: none;
  min-inline-size: 0;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.rd-place-door:active { transform: scale(0.98); transition-duration: var(--ui-press-in); }
.rd-place-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  justify-items: start;
  flex: 1;
  min-inline-size: 0;
}
.rd-nowrap { white-space: nowrap; }
.rd-door { color: var(--ui-muted); }
.rd-door .rd-place-door { justify-content: space-between; gap: 8px; }
.rd-door .ui-readout { flex: none; }

/* the plain lines list: the essentials, one line per row. The first-screens
   home publishes a list of the same shape, and this room may not compose that
   module's stylesheet (it is another lane's file tonight), so the room
   carries its own rather than emitting a class whose rule lives somewhere it
   does not import - which is exactly how ledger class 158's 29 unstyled
   classes were born. FILED FOR THE SHELL COMMISSION as F5: the plain row list
   is a primitive two surfaces now draw. */
.rd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: 100%; }
.rd-listrow {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 12px;
  min-block-size: 44px;
  border-block-end: 1px solid var(--rd-row-rule);
}
.rd-listrow:last-child { border-block-end: none; }
.rd-listrow-main { flex: 1; min-inline-size: 0; }
/* the licence credit: third-party legal text, quiet and always present */
.rd-credit { inline-size: 100%; }

/* ---- the tune popover: see-through over the map, beside its button ---- */
/* THE CATCHER CARRIES THE WHOLE BUTTON RESET, not just the ground. It used
   to be an anchor, which has no native chrome; as a real button a browser is
   entitled to draw its own border, padding and appearance across the entire
   map band, and "background: transparent" cures exactly one of those four.
   Found by a fresh non-author read rather than by a render, which is the
   honest provenance: the render this act took happened not to show it. The
   sibling reading surface's own stylesheet already writes the fuller reset,
   which is the tell that the short form was an oversight and not a choice. */
.rd-tunescrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: block;
}
/* THE PANEL'S DRESS IS TIGHTER THAN THE SIGNED SHEET'S, and the reason is
   the type, not the layout. The sheet ships Inter as a webfont and measures
   its six chips into three rows for a 190px panel. This tree lands no font
   files - the canon token source says so in its own header, and the faces are
   fallback stacks - so the same six labels render in a wider face, wrap into
   four rows, and the panel came to 258px inside a 270px band: four pixels
   past its own foot. The chips are NOT shrunk, because their size is the R1
   cure; the panel's own padding, its inner gap and its foot each give up a
   little instead. FOR THE DESIGN OWNER: at the fallback stack this control is
   at its limit, and his own recorded cure for a panel he finds too tall is
   two chips per row, which needs his word rather than a builder's.
   MEASURED BOTH WAYS, because a deviation stated without that is a
   preference: with the sheet's own values restored (pill 5 by 12, panel
   14/16/16, foot 16) the panel measures 232px in a 270px band and covers the
   back control and the scale; with these values it measures 184px against the
   sheet's own 190 and clears both. The deviation is what makes the screen
   work, and it is six pixels of dress rather than a design change. */
.rd-tunepanel {
  position: absolute;
  z-index: 3;
  inset-inline-start: 12px;
  inset-inline-end: 64px;
  inset-block-end: 12px;
  background: var(--rd-glass);
  border: 1px solid var(--rd-glass-edge);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  justify-items: start;
  box-shadow: var(--rd-panel-shadow);
}
.rd-seg { display: flex; flex-wrap: wrap; gap: 0 8px; }
/* THE R1 CURE, AS BUILT BEHAVIOUR (design owner verdict R1): the BUTTON is
   the 44px hit box and the bordered pill is its 32px visual inner, so the
   tap target extends on BOTH sides of the pill. The defect it cures was a
   32px pill with a 6px extension on one side only, measured 38px by
   hit-test. This is verified by hit-testing both edges of every chip at both
   owner geometries, never by box arithmetic. */
.rd-facet {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ui-tap-min);
  padding-block: 6px;
  padding-inline: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: var(--ui-type-label);
  color: var(--ui-muted);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.rd-facet:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.rd-facet[aria-pressed="true"] { color: var(--ui-ink); }
.rd-facet-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-block-size: 32px;
  border: 1px solid var(--rd-quiet-edge);
  /* The sheet's pill is 5px by 12px. Two pixels come off each inline side
     here and nowhere else, because at the fallback type face the six labels
     are wide enough to wrap into four rows and a four-row panel covers the
     back control and the scale at 384. The pill's BLOCK size is untouched:
     32px inside a 44px hit box is the R1 cure and is not a place to save
     pixels. Disclosed to the design owner as a dress deviation forced by the
     missing webfonts, with the alternative he already recorded (two chips per
     row) left to his word. */
  padding: 5px 10px;
  border-radius: 999px;
}
.rd-facet[aria-pressed="true"] .rd-facet-label { border-color: var(--ui-ink); }

/* ---- the place sheet: the family's one sheet grammar ---- */
/* THE DIALOG OWNS ITS BACKDROP. The layer spans the app frame and holds the
   scrim and the sheet; the modal contract's focus containment is then a
   containment of the DISMISSAL too, and the two children keep the exact boxes
   they had as siblings, so no pixel moves. */
/* THE LAYER BENEATH, while a place is open: inert and aria-hidden in the
   markup, and nothing at all in the dress - it is the reading exactly as it
   renders with no sheet over it, and a wrapper that changed its layout would
   move the page under the sheet. It is the app frame's flex column. */
.rd-beneath {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
}
/* the mark that says an exit LEAVES the app. Drawn in CSS, not as markup:
   the drawn-once census gives icon markup one birthplace and this set holds
   no exit glyph (finding F3) - a room may not open a second one. */
/* the arrowhead in the end corner */
/* and the shaft leaving through it, so the mark reads as going OUT rather
   than as a caret pointing up */

/* ---- focus, reduced motion, wider viewports ---- */
.rd-app a:focus-visible,
.rd-app button:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rd-act:active, .rd-back:active, .rd-tune:active, .rd-ext:active,
  .rd-place-door:active, .rd-scale-tab:active, .rd-facet:active,
}

/* tablet: the sheet keeps a reading column */
@media (min-width: 700px) {
  .rd-sheet > * { max-inline-size: 640px; inline-size: 100%; margin-inline: auto; }
}
/* desktop stays its own act (the brief's position 10); the interim frame is
   carried: the map a standing start canvas, the sheet an end panel */
@media (min-width: 1000px) {
  /* THE ROW BELONGS TO THE LAYER THAT HOLDS BOTH. The map and the sheet are
     children of the rd-beneath layer now, so turning only rd-app to a row would
     lay out ONE child and leave the map stacked above the sheet inside it -
     the desktop composition silently regressing while every string floor and
     both mobile geometries stayed green. Both are named, and the one that
     acts is the wrapper. */
  .rd-app, .rd-beneath { flex-direction: row; }
  .rd-mapfield { flex: none; inline-size: 42%; block-size: auto; min-block-size: 0; }
  .rd-sheet {
    margin-block-start: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-block-start: none;
    border-inline-start: 1px solid var(--ui-hairline);
    padding-inline: 48px;
    padding-block-start: 72px;
  }
  .rd-sheet > * { max-inline-size: 720px; margin-inline: 0; }
  .rd-tunepanel { inset-inline-start: auto; inset-inline-end: 64px; inline-size: 320px; }
}

/* THE TUNE STATES, SHOWN ONE AT A TIME.

   THESE RULES BELONG TO THE READING AND NOT TO THE COMPOSITION LAYER, and the
   first cut had them in the wrong sheet. Every selector here narrows .rd-app,
   which is this surface's own root; the composition layer's stylesheet is the
   SHELL FRAME'S dress, its own header says it publishes no shared name, and -
   measured, not reasoned - the compass room's tracked artifact inlines that
   sheet, so reading rules written there moved another surface's bytes and
   reddened its parity floor. A rule lives with the surface whose elements it
   selects; the blast radius is then exactly the artifacts that compose that
   surface, which here is the reading room's own and nothing else.

   WHAT THEY DO. The composed reading screen is rendered with every state the
   tune popover can put it in ALREADY DRAWN, by the room's own renderer, and
   these rules show one. The alternative was a script that rebuilt the rows and
   re-projected the marks in the browser, which is a second renderer of the same
   screen; the estate has paid for a second place sheet before and this is the
   same shape one step earlier.

   WHY display:none AND NOT THE hidden ATTRIBUTE. Both take a subtree out of the
   accessibility tree and out of the tab order, and both are honest. The
   attribute would have to be set by the runtime on every variant at every
   press, which is the runtime knowing the whole state table; these rules ARE
   the state table, in one place, with the runtime setting two attributes.
   WITH NO SCRIPT AT ALL the page still resolves: the root ships
   data-tune="closed" data-facet="none", the base state shows, and the popover
   simply does not open.

   THE ROOM'S OWN GALLERY renders each state as its own frame and carries no
   variants, so nothing here matches there. That is a stylesheet shipping rules
   for a state its artifact does not hold, which is ordinary; the reverse - an
   element with no rule - is what this tree's orphan floor refuses. */
.rd-app[data-tune="closed"] .rd-tunepanel,
.rd-app[data-tune="closed"] .rd-tunescrim { display: none; }
.rd-app[data-tune="closed"] [data-for-panel="open"] { display: none; }
.rd-app[data-tune="open"] [data-for-panel="closed"] { display: none; }
.rd-app[data-facet="none"] [data-for-facet]:not([data-for-facet="none"]) { display: none; }
.rd-app[data-facet="food-drink"] [data-for-facet]:not([data-for-facet="food-drink"]) { display: none; }
.rd-app[data-facet="culture-sights"] [data-for-facet]:not([data-for-facet="culture-sights"]) { display: none; }
.rd-app[data-facet="nightlife"] [data-for-facet]:not([data-for-facet="nightlife"]) { display: none; }
.rd-app[data-facet="shopping"] [data-for-facet]:not([data-for-facet="shopping"]) { display: none; }
.rd-app[data-facet="nature-parks"] [data-for-facet]:not([data-for-facet="nature-parks"]) { display: none; }
.rd-app[data-facet="local-life"] [data-for-facet]:not([data-for-facet="local-life"]) { display: none; }


:root { --plt-face-body: "Inter", system-ui, sans-serif; --plt-face-readout: "IBM Plex Mono", "Menlo", monospace; }
/* ---- the plate's own ground tokens, SPENT AND NEVER RESTATED ---------------
   NO PALETTE IS WRITTEN HERE, and the census caught this file within a minute
   of it carrying three hex and functional values. What remains is the keyword
   "transparent", which the census names as its declared residue and which the
   comment beside it owns out loud. The card's print texture is THIS ground's own
   ink held back to a few per cent, said with color-mix so the value has one
   source and follows the ink when the ink moves. The ink a numeral takes on a
   gold disc needs no token of its own: the card colour is dark on night, where
   gold is light, and light on paper, where gold is dark, so var(--ui-card) is
   right in both grounds and a fourth token would only be a second way to say
   it. Only the two OPACITIES are numbers, and an opacity is not a colour. */
:root {
  --plt-print-a: color-mix(in srgb, var(--ui-ink) 5%, transparent);
  --plt-print-b: color-mix(in srgb, var(--ui-ink) 4%, transparent);
  --plt-land-op: 0.20;
  --plt-tint-step: 0.26;
  /* THE RECENCY RAMP, FOUR STEPS AND NO FIFTH (sheet section 6, C3). They are
     OPACITIES of the ground's own ink and of the one gold token, never four
     new colours: the palette census refuses a second hand-maintained palette,
     and a ramp written as colours would drift from the ink the day either
     moved. This year at full, then three steps toward muted, then the floor -
     which is why there are exactly four and the fourth is the floor. */
  --plt-grade-0: 1;
  --plt-grade-1: 0.72;
  --plt-grade-2: 0.5;
  --plt-grade-3: 0.34;
  /* The band's ground: the arcs and the fine rules the points stand on. Faint
     by design - it is the guilloche of the world panel, not a chart's grid. */
  --plt-band-arc-op: 0.30;
  --plt-band-rule-op: 0.12;
}
[data-ground="paper"] {
  --plt-land-op: 0.22;
}

/* ---- the page: the head pins, one block takes the slack --------------------
   The header block is a member of the PAGE's own grid rather than of the block
   that takes the slack, so a short record does not float its own title. */
.plt-page { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 0; inline-size: 100%; }
.plt-page-head { display: grid; gap: 14px; justify-items: start; inline-size: 100%; align-self: start; padding-block-end: 16px; }
/* THE ROWS ARE THE CHILDREN THERE ARE, not two the file expects. A fixed
   two-track template outlives the second child: the rebuilt own face has NO
   page foot (its act group went with the retired share pill), so the template
   kept a 0px second track AND the 24px gap in front of it - 24 pixels of dead
   space under every face, measured at the shot. Auto placement makes exactly
   as many tracks as there are children, so a face with one child pays for
   one. */
.plt-page-main { display: grid; align-content: start; justify-items: start; inline-size: 100%; gap: 24px; }
/* THE OTHER HALF OF THE ARRIVAL CLEARANCE, and the smaller half. With the tab bar
   seated at the viewport's bottom edge, this page's primary act - the share pill on
   the shared preview - lands in the bar's band on arrival at 384x750. The
   development band above the page is the larger cause and is cured at its own layer;
   this gap is the remainder. MEASURED, not chosen: with the band's note line gone the
   act still sat 16.5 percent behind the bar, and this one step of 12 pixels takes it
   to zero in both editions, 677 against a band top of 681.
   WHY THIS GAP AND NOT ANOTHER. Six candidates were driven at that geometry. This is
   the smallest of them and the only one taken: the consent order, every caption and
   every other spacing are untouched. Taking SIX spacings to near zero instead - the
   page gap to 8, the stage gap to 4, the head padding to 6, the act group to 2, the
   caption margins to 2 and the door pair to 0 - STILL left the English act 4.5
   percent covered while visibly cramping the face, which is how it is known that
   this defect cannot be squeezed out of the face and should not be chased there.
   AND WHAT WAS REFUSED, so nobody re-proposes it: putting the act above the
   change-what-is-shared door clears every cell and is forbidden by this surface's own
   law, that the check affordance is never below the commit. Doing it in CSS alone
   would be worse than doing it in the markup, because the renderer's comment would
   still say the door renders above the act while the person saw the opposite.
   SCOPED TO WHERE THE BAR IS SEATED, the same query the seat itself uses, so the
   two cannot drift; at wider widths the page keeps its full 24. */
@media not all and (min-width: 1000px) {
  .plt-page-main { gap: 12px; }
}
.plt-page-body { display: grid; gap: 14px; justify-items: start; inline-size: 100%; }
.plt-page-foot { display: grid; gap: 10px; justify-items: start; inline-size: 100%; }
.pp-pagehead { display: grid; gap: 10px; justify-items: start; inline-size: 100%; }
.plt-plate-stage { inline-size: 100%; display: grid; gap: 8px; justify-items: start; }

/* ---- the card ------------------------------------------------------------- */
.pp-plate { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; border: 1px solid var(--ui-hairline); border-radius: 14px; padding: 5px; background: var(--ui-card); }
.pp-plate-inner { min-inline-size: 0; max-inline-size: 100%; border: 1px solid var(--ui-hairline); border-radius: 10px; padding: 14px 16px 12px; display: grid; gap: 2px; justify-items: start; background: var(--ui-card); }
/* THE ONE COLOUR KEYWORD IN THIS FILE, and it is named rather than hidden.
   "transparent" is a CSS NAMED COLOUR, and the owned-primitives census says in
   its own header that named colours are the ONE declared residue outside its
   mechanical reach and "enter only through review". An adversarial review of
   this diff read it and this comment is that entry. It is unavoidable in a
   dotted gradient - a pattern needs a stop with nothing in it - and it carries
   no palette: the ink is the ground's own token and the two numbers are
   percentages of it. What was actually wrong here was the COMMENT, which
   claimed no colour value was written in this file at all. It is written, it is
   this one, and it says so. */
.plt-card-texture { background-image: repeating-radial-gradient(circle at 112% -30%, transparent 0 9px, var(--plt-print-a) 9px 10px), repeating-radial-gradient(circle at -12% 128%, transparent 0 13px, var(--plt-print-b) 13px 14px); }
.pp-plate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; inline-size: 100%; }
.pp-name { margin-block-start: 2px; }
.pp-since { margin-block-start: 1px; color: var(--ui-muted); }

/* ---- the world panel ------------------------------------------------------ */
.plt-geo { position: relative; inline-size: 100%; aspect-ratio: 16/6; overflow: hidden; background: var(--ui-card); border: 1px solid var(--ui-hairline); border-radius: 10px; }
.plt-geo--banded { margin-block-end: 8px; }
.plt-geo-nomirror { direction: ltr; unicode-bidi: isolate; }
.plt-geo-fitted { padding: 0; }
.plt-land { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; stroke: none; }
.plt-land-g { fill: var(--ui-ink); opacity: var(--plt-land-op, 0.2); }
/* The visited-country tint RAMPS to nothing at the threshold rather than
   switching off at a boundary, so the map's grammar does not change under a
   person between two of their own states. */
.plt-tint { fill: var(--ui-ink); opacity: calc(var(--plt-tint-step) * var(--plt-tint-level, 1) + var(--plt-land-op, 0.2)); }
.plt-geo-dot { position: absolute; inline-size: var(--plt-mark-size, 6px); block-size: var(--plt-mark-size, 6px); border-radius: 50%; transform: translate(-50%, -50%); background: var(--ui-muted); box-shadow: 0 0 0 1.5px var(--ui-card); }
.plt-geo-dot--thisyear.plt-geo-dot--thisyear { inline-size: calc(var(--plt-mark-size, 6px) + 2px); block-size: calc(var(--plt-mark-size, 6px) + 2px); background: var(--ui-gold); }
.plt-geo-cluster { position: absolute; transform: translate(-50%, -50%); min-inline-size: 16px; min-block-size: 16px; padding: 0 3px; border-radius: 999px; background: var(--ui-muted); color: var(--ui-card); box-shadow: 0 0 0 1.5px var(--ui-card); display: grid; place-items: center; font: var(--ui-type-readout-caps); }
.plt-geo-cluster--thisyear { background: var(--ui-gold); color: var(--ui-card); }

/* ---- THE WORLD BAND: arcs and points, and no cartography at all -----------
   The panel is the plate's own aspect and its own hairline frame; what is
   inside it is a ground of concentric arcs with one gold point per country.
   THE GEOMETRY IS PHYSICAL AND THE svg IS aria-hidden, so the drawing's bytes
   are identical in both editions (C5) and the CAPTION beneath carries the
   fact. Nothing here mirrors, because there is nothing here that means
   anything left-to-right. */
.plt-band { position: relative; inline-size: 100%; aspect-ratio: 1000/376; overflow: hidden; background: var(--ui-card); border: 1px solid var(--ui-hairline); border-radius: 10px; }
.plt-band-ground { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; fill: none; }
.plt-band-arcs { stroke: var(--ui-ink); stroke-width: 1.1; opacity: var(--plt-band-arc-op); vector-effect: non-scaling-stroke; }
.plt-band-rules { stroke: var(--ui-ink); stroke-width: 0.6; opacity: var(--plt-band-rule-op); vector-effect: non-scaling-stroke; }
/* ONE POINT PER COUNTRY, GRADED BY RECENCY AND NEVER BY COUNT. Gold is the
   face's ONE rationed colour and it is spent here and nowhere else (C2): the
   stamps carry ink, the doors carry ink, and the only gold on the screen is a
   country on this band. The grade steps the BRIGHTNESS, which is why the
   caption's re-cut fact is "the brighter ones are this year's" and no longer
   names the colour: every point is gold. */
.plt-band-point { position: absolute; inline-size: 7px; block-size: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ui-gold); opacity: var(--plt-grade-3); }
.plt-band-point[data-grade="0"] { inline-size: 9px; block-size: 9px; opacity: var(--plt-grade-0); }
.plt-band-point[data-grade="1"] { opacity: var(--plt-grade-1); }
.plt-band-point[data-grade="2"] { opacity: var(--plt-grade-2); }

/* ---- the stamp wall -------------------------------------------------------
   Every chip's tap target is a REAL BUTTON at the 44px floor with the family's
   stamp RESET inside it: the two-element form, so the visible pill can stay the
   size the drawing gives it while the hit stays the size a thumb needs. */
.pp-field { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; inline-size: 100%; padding-block: 16px 18px; margin: 0; list-style: none; }
.plt-stamp-hit { appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0; min-inline-size: 44px; min-block-size: 44px; display: inline-grid; place-items: center; cursor: pointer; color: inherit; font: var(--ui-type-label); }
.pp-stamp { display: grid; gap: 1px; justify-items: center; padding: 7px 13px 6px; border: 1.5px solid var(--ui-muted); border-radius: 8px; color: var(--ui-ink); }
.pp-stamp--compact { padding: 4px 9px 3px; border-width: 1.25px; gap: 0; }
.pp-stamp--next { border-style: dashed; color: var(--ui-muted); min-inline-size: 58px; justify-items: center; align-content: center; }
.pp-stamp-name { font: 600 10.5px/14px var(--plt-face-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pp-stamp-year { font: 500 10px/13px var(--plt-face-readout); color: var(--ui-muted); letter-spacing: 0.06em; }
.plt-name-primary { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--ui-ink); }
.plt-name-meta { font-size: 9.5px; line-height: 13px; font-weight: 400; color: var(--ui-muted); }
.plt-compact .plt-name-primary { font-size: 10.5px; line-height: 14px; }
.plt-compact .plt-name-meta { font-size: 8.5px; line-height: 11px; }
/* THE CHIP'S INK IS GRADED BY THE ENTRY'S YEAR, and gold is NOT one of the
   grades. The served face outlined this year's two chips in gold, which spent
   the face's one rationed colour on a stamp; the published rations gold to the
   world band's points alone and grades the stamps in INK (C2, C3). The grade
   moves the whole chip - its outline and both its lines - because a stamp
   fading is one object fading, not an outline fading around live text. */
.plt-grade-0 { opacity: var(--plt-grade-0); border-color: var(--ui-ink); }
.plt-grade-1 { opacity: var(--plt-grade-1); }
.plt-grade-2 { opacity: var(--plt-grade-2); }
.plt-grade-3 { opacity: var(--plt-grade-3); }
/* THE OUTLINE FORM IS VARIED AND DATA-STABLE (sheet section 6): a page of real
   stamps is a page of different dies, so half the roster's codes take the oval
   die and half the rounded rectangle, assigned by the country's own seed so a
   chip never changes shape between visits. */
.pp-stamp--oval { border-radius: 999px; padding-inline: 17px; }
.pp-stamp--oval.pp-stamp--compact { padding-inline: 12px; }
.plt-stamp-hit:active .plt-stamp-act { background: var(--ui-hairline); }
/* THE SLOT INHERITS THE CHIP'S PADDING, per dress, and its own honest height.
   Stretching it to the line's height gave a 44px pill beside 23px chips. */
.plt-add-slot { appearance: none; -webkit-appearance: none; background: none; padding: 7px 13px 6px; border-style: dashed; color: var(--ui-muted); cursor: pointer; }
.plt-add-slot.plt-compact { padding: 4px 9px 3px; }
.plt-add-label { color: var(--ui-muted); font-size: 12.5px; line-height: 16px; font-weight: 600; }
.plt-add-slot.plt-compact .plt-add-label { font-size: 10.5px; line-height: 14px; }
.plt-year-group { inline-size: 100%; display: grid; gap: 2px; justify-items: start; }
.plt-year-head { color: var(--ui-muted); font: 500 10px/14px var(--plt-face-readout); letter-spacing: 0.14em; padding-block-start: 8px; margin: 0; }
.plt-year-group .pp-field { padding-block: 4px 6px; }

/* ---- the count strip ------------------------------------------------------
   Each number is BOUND TO ITS OWN NOUN inside its own isolate, and every
   separator after the first travels with the pair it introduces, so a wrap can
   never strand a lone middle dot at the end of a line. */
.pp-mrz { font: 500 10.5px/16px var(--plt-face-readout); letter-spacing: 0.14em; color: var(--ui-muted); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; padding-block-start: 10px; border-block-start: 1px dashed var(--ui-hairline); margin: 0; }
.plt-strip { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 2px; white-space: normal; }
.plt-count { unicode-bidi: isolate; }
.plt-seg { display: inline-flex; align-items: baseline; white-space: nowrap; flex: none; }
.plt-mid { color: var(--ui-muted); white-space: pre; padding-inline: 0.5ch; }

/* ---- THE SHARE ICON-ACT, at the plate's head corner -----------------------
   A quiet mark beside the holder's name, at the 44px floor in transparent
   padding so the hit is a thumb's and the DRAWING is the drawing's. The
   negative block margin keeps the head's rhythm: without it the tap box
   pushed the name line down by eleven pixels and the card's first line stopped
   being its first line. */
.plt-share-corner { appearance: none; -webkit-appearance: none; background: none; border: none; flex: none; display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; margin-block: -8px -10px; margin-inline-end: -10px; padding: 0; color: var(--ui-muted); cursor: pointer; }
.plt-share-corner .ui-icon { inline-size: 20px; block-size: 20px; }
.plt-share-corner:active { color: var(--ui-ink); }

/* ---- THE DOOR ROWS --------------------------------------------------------
   ONE dress, and it is not this file's: every door row on this face renders
   through the shared-born bound-row primitive (primitives/bound-row.ts, the
   carried-rows convergence's C1), whose carrier, door reset, readout seat and
   chevron all live in the primitives stylesheet. What stood here - a button
   reset for the sv-door borrow, a readout seat, a chevron re-seat - was the
   second and third dress for one object that the walk's C1 measured, and a
   dress retired at its consumer is retired at its consumer's own stylesheet
   too (a rule kept after its markup leaves is how the next reader inherits a
   dead law). Only the list's own width remains, because the list is this
   surface's seat for the rows and not part of the row's dress. */
.plt-doors { inline-size: 100%; }

/* ---- the caption, the sentences and the stand-in -------------------------- */
.pp-world-note { margin: 8px 0 4px; color: var(--ui-muted); }
/* THE ONE FACE NOTE (R7a) sits beneath the page head, above the document, and
   speaks once for every pending act on the face. It is the page's own line and
   not a caption hung on a control, which is why it is a member of the head
   block rather than of any door. */
.plt-face-note { margin: 0; }
/* The empty face's ONE honest line: a beginning, not an apology. It takes the
   body voice rather than the muted meta voice for exactly that reason. */
.plt-empty-line { margin: 0; }
.plt-bidi { unicode-bidi: isolate; }
.plt-sentence { letter-spacing: normal; text-transform: none; }
.plt-projection { color: var(--ui-ink); }
.plt-projection-more { color: var(--ui-muted); }
/* A country the person recorded that this build cannot place. It is a fact
   about the BUILD, not about them, so it takes the quiet register the map's
   own provenance line takes rather than a refusal voice. */
.plt-unplaceable { color: var(--ui-muted); margin: 0; }
.plt-promise { color: var(--ui-ink); }
.plt-standin-row { display: flex; gap: 10px; align-items: center; color: var(--ui-muted); padding-block: 10px 4px; }
/* THE STAND-IN IS THIS LANE'S OWN NAME, not the drawing's "ui-plate-standin".
   A "ui-" name is a SHARED name and shared names live in the layer that
   publishes them: defining one bare in a surface stylesheet is the class-194
   defect, and the floor caught it here within a minute. The dress is the
   drawing's; the name is this file's, because this file is not the primitives
   layer. If the stand-in should become a published primitive, that is the
   primitives layer's act and this rule retires into it. */
.plt-standin-mark { display: grid; place-items: center; inline-size: 22px; block-size: 22px; flex: none; border: 1.5px dashed currentColor; border-radius: 6px; }

/* ---- the acts ------------------------------------------------------------- */
.plt-act-group { display: grid; gap: 6px; justify-items: start; inline-size: 100%; }
.plt-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 10px 18px; border: 1px solid var(--ui-ink); border-radius: 999px; background: none; color: var(--ui-ink); cursor: pointer; font: var(--ui-type-label); }
.plt-act--fill { background: var(--ui-ink); color: var(--ui-card); border-color: var(--ui-ink); padding: 13px 24px; min-block-size: 50px; font-weight: 600; }
/* THE NOT-BUILT DRESS. A control whose door is pending wears this, and the class is
   put on by the plate's own constructor from the dispatch row - never by hand at a
   call site, so it cannot drift from the row it describes.
   WHY IT IS NOT OPACITY ALONE (the design desk's ruling on walk S1): the disabled
   primary on the shared preview was PIXEL-IDENTICAL to the live act at home - same
   fill, same ink, opacity 1, filter none, the same 188.5x50 box - so a person met a
   control that looked exactly as pressable as the one they had just pressed. Fading it
   would have said "temporarily unavailable", which is a different and equally untrue
   thing. The fill is REMOVED instead: a not-built primary stops being a filled button
   and becomes an outline of one, which is the family's own vocabulary for a shape that
   is drawn but not yet real, and it can never be confused with the solid act.
   THE CHIPS AND THE ADD SLOT take the same class and read it their own way: the ink
   goes muted and the cursor stops promising. Their name already says what they would
   do; the dress says it is not there yet. */
.plt-not-built { cursor: default; }
.plt-not-built.plt-act--fill { background: none; color: var(--ui-muted); border-color: var(--ui-muted); font-weight: 500; }
/* ONE STEP PER ROLE, so the name stays strictly the strongest ink on the chip (design
   desk, 13:46; form ruled 14:28). MEASURED, because this is exactly where a dress eats a
   fact: LIVE the name is the card ink at 15.28:1 against the card and the year is the meta
   ink at 6.56:1. The first cut of this dress muted the NAME to the meta ink and left the
   year there too, so both read 6.56:1 and the chip's own hierarchy was flat. Each role now
   steps down from ITS OWN live ink: name 6.56:1, year 5.09:1.
   EACH ROLE'S STEP HAS ONE PARENT AND IT IS THAT ROLE'S OWN: the name takes the muted
   token; the year mixes ITS OWN meta ink toward THE CARD IT IS READ ON. No colour literal,
   and deliberately no border token anywhere in the derivation - an ink mixed from a BORDER
   parent moves whenever that parent is retuned for border reasons, for a cause no reader
   can see, and the desk barred that coupling at 14:24. An earlier note here reasoned about
   a 'ladder' of inks with the hairline as the next rung below the meta; THAT FRAMING IS
   RETIRED and is recorded as retired rather than deleted, because it is the framing that
   invites the coupling. The hairline is a line colour: as text on this card it measures
   1.24:1, which is not a step down but a disappearance.
   THE CANONICAL SINGLE-STEP FORM WAS TRIED AND CANNOT CARRY BOTH ROLES, measured over 51
   steps at each of the two candidate parents: the two roles start 15.28 and 6.56 apart, so
   one step that mutes the name to 6.56 drags the year to about 3.3, below the small-text
   floor, and one that keeps the year at 4.5 leaves the name near 9.9. The requirements are
   disjoint by roughly fifteen points of step. The desk ruled identity over canon at 14:28.
   THE ADD LABEL IS NOT STEPPED. It is the invitation, its live ink is already the meta ink,
   and it carries no name-and-year pair for a hierarchy to flatten; stepping it would fade
   the one control on this card that is asking to be used. */
.plt-not-built .pp-stamp-name, .plt-not-built .plt-add-label { color: var(--ui-muted); }
.plt-not-built .pp-stamp-year { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); }
/* THE SECONDARY ACT STEPS FROM ITS OWN RANK TOKEN, and it steps DOWN rather than the
   primary being raised. Its live rank is the card ink; a pending secondary takes one step
   from that toward the card it is read on, which lands it strictly BELOW the stepped
   primary. The direction matters and is the desk's (14:33): raising the primary to match
   would have made a not-built act look more pressable, which is the affordance lie this
   whole dress exists to end. The underline keeps its own weight - it is what says this is
   a door at all - and only the ink moves.
   THE STEP IS SIZED SO THE RANK IS VISIBLE, not merely true. The first value satisfied
   'strictly below' by 0.03 of a contrast ratio, which is a rounding artifact and not a
   rank: measured against the page ground the stepped primary is 7.11:1 and that secondary
   was 7.08:1. This one measures 5.70:1 - below the primary by 1.41 and above the
   small-text floor - and it seats the face's three ranks in order: primary 7.11, secondary
   5.70, the chip year 5.09. */
.plt-not-built.plt-act--text { color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)); font-weight: 500; }
/* THE DASH BELONGS TO THE INVITATION ALONE (design desk, RULING-READY3-SIGNED-AND-DASH-DRESS,
   13:41). The first cut of this dress gave every not-built control a dashed border, and at
   384 the country chips then read as the empty add slot - two meanings wearing one dress.
   The add slot's dash is its own signed placeholder and is excluded here; a not-built
   control takes the SOLID hairline at rest weight with its fill removed and its ink muted
   one step, which the rules above already carry. Semantics are untouched: a this-year chip
   keeps its gold, because gold says WHEN the country was reached and never whether its
   door is built. */
.plt-not-built .pp-stamp:not(.plt-add-slot) { border-style: solid; }
.plt-act--text { border: none; padding: 10px 0; background: none; color: var(--ui-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--ui-hairline); font-weight: 600; }
.plt-act--text::after { content: " \203A"; font-weight: 400; }
.plt-act .ui-icon { inline-size: 20px; block-size: 20px; }
.plt-share-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; inline-size: 100%; }
.plt-share-note { flex: 1 0 100%; margin: 0; }

/* ---- the provenance door -------------------------------------------------- */
.plt-prov-door { inline-size: 100%; }
.plt-prov-door > summary { color: var(--ui-muted); cursor: pointer; min-block-size: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.plt-prov-door > summary::-webkit-details-marker { display: none; }
.plt-prov-door > summary::before { content: ""; inline-size: 7px; block-size: 7px; flex: none; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); transform-origin: 60% 60%; }
.plt-prov-door[open] > summary::before { transform: rotate(45deg); }
[dir="rtl"] .plt-prov-door > summary::before { transform: rotate(45deg); }
[dir="rtl"] .plt-prov-door[open] > summary::before { transform: rotate(-45deg); }
.plt-provenance { color: var(--ui-muted); font-size: 10.5px; line-height: 15px; margin: 0; }

/* ---- the artefact cards --------------------------------------------------- */
.plt-card-stack { display: grid; gap: 18px; justify-items: start; inline-size: 100%; }
.pa-card { border: 1px solid var(--ui-hairline); border-radius: 12px; padding: 5px; background: var(--ui-card); max-inline-size: 100%; }
.pa-inner { border: 1px solid var(--ui-hairline); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; justify-items: start; }
.plt-card-name { font: var(--ui-type-place-name); }
.plt-card-caption { color: var(--ui-muted); margin: 4px 0 0; }
.plt-more { color: var(--ui-muted); align-self: center; }
.plt-card-chips { padding-block: 4px 2px; gap: 6px 8px; }
.plt-card-band > .plt-geo { align-self: start; margin-block-end: 0; }

/* ---- the in-app door row --------------------------------------------------
   RETIRED INTO THE PRIMITIVE at the carried-rows convergence (C1). The
   rules that stood here carried the baseline drawing's own 44px
   pp-row-link form - a second row component, a muted label and no
   chevron, one list beneath two 48px sv-door rows - which is exactly the
   two-components-three-dresses stack the batch-7 walk measured on this
   face. The door rows render through primitives/bound-row.ts now (title
   ink, readout inboard, chevron, 48px pitch per the tap-floor law's
   regenerate path), the dress lives in the primitives stylesheet, and
   its reduced-motion guard moved with the press rule it opts out of.
   The drawing's 44px form remains the drawing's; the walk-build layer is
   not the face, and the face follows the co-signed ruling. */

/* ---- the Arabic edition ---------------------------------------------------
   :lang(ar), NOT [lang="ar"]. The drawing uses the attribute form because that
   is the design estate's own convention; this build's Arabic reset floor speaks
   a small, positively-defined selector language and REFUSES to answer on an
   attribute selector rather than guess - three cuts of that floor answered
   wrongly instead and each certified an Arabic defect. :lang() is also the
   stronger rule: it matches an element whose language is INHERITED, which the
   attribute form does not.
   A country name is a PROPER NOUN in the stamp's own voice and keeps the Latin
   caps dress; a translatable SENTENCE never does. */
:lang(ar) .plt-stamp-voice { letter-spacing: 0.08em; text-transform: uppercase; }
:lang(ar) .plt-sentence { letter-spacing: normal; text-transform: none; }
:lang(ar) .pp-stamp-name { letter-spacing: 0; text-transform: none; }
:lang(ar) .pp-stamp-year { direction: ltr; unicode-bidi: isolate; }
:lang(ar) .pp-mrz { letter-spacing: 0; white-space: normal; }

/* ---- THE STAMPS WALL (B9) -------------------------------------------------
   The page behind the plate's own stamp door: the same countries, dated at the
   grain the record holds them, with the city marks inside them.

   ITS DRESS LIVES HERE, in the file whose own header says no other module in
   this tree draws a pp- class. The wall reuses the family's stamp members
   unchanged - pp-stamp, pp-stamp-name, pp-stamp-year, pp-stamp--oval,
   pp-stamp--next, pp-lens, pp-group, pp-citymark - and adds only its own page
   layout under the stp- lane prefix, on the plt- prefix's own ground: this
   estate's directionality floor reads a leading two-letter physical-property
   prefix as a Tailwind utility, so the drawing's own class names carry one
   more letter here and every other character is the drawing's.
   NO BACKTICK APPEARS ANYWHERE IN THIS BLOCK, and that is a rule of the file
   rather than a style: every rule here lives inside a template literal, so a
   backtick in a COMMENT terminates the string and the compiler reports the
   damage at whatever line the next quote happens to fall on. This block was
   written with them once and the app typecheck named four lines of CSS as
   module declarations.

   EVERY VALUE IS READ OFF THE STAGED PAGE, and every colour is one of the
   application's own tokens, never a second palette.

   OPUS-CONCEIVED (owner 2298): the section's layout values are the staged
   page's; what is conceived here is the fresh dress's halo being expressed as a
   color-mix of the ONE gold token rather than the drawing's separate
   --fresh-halo value, so this file keeps its no-second-palette rule. */
.stp-page { display: grid; gap: 18px; align-content: start; inline-size: 100%; min-inline-size: 0; }
.stp-pagehead { display: grid; gap: 10px; justify-items: start; inline-size: 100%; }
.stp-lens { display: flex; gap: 24px; inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.stp-lens-tab { position: relative; appearance: none; -webkit-appearance: none; border: none; background: none; padding: 8px 2px 12px; min-block-size: 44px; min-inline-size: 44px; text-align: start; font: var(--ui-type-label); color: var(--ui-muted); cursor: pointer; }
.stp-lens-tab[aria-selected="true"] { color: var(--ui-ink); }
/* The selected tab's underline is INSIDE the tab, so a wrapped or translated
   label carries its own mark rather than a rule positioned against English. */
.stp-lens-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline-start: 2px; inset-block-end: -1px; inline-size: 26px; block-size: 2px; background: var(--ui-ink); }
.stp-group { display: grid; gap: 10px; justify-items: start; inline-size: 100%; padding-block-start: 6px; }
.stp-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; inline-size: 100%; flex-wrap: wrap; }
.stp-pagemeta { margin-block-start: -6px; }
.stp-firsttime { color: var(--ui-muted); }
/* A stamp on the wall is not a control, so it carries the family's stamp dress
   with no hit box around it: the tap targets on this page are the lens tabs. */
.stp-stamp { flex: none; }
.stp-citymarks { display: flex; flex-wrap: wrap; gap: 8px 10px; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.stp-citymark { display: inline-flex; padding: 5px 10px 4px; border: 1.25px solid var(--ui-muted); border-radius: 7px; font: 600 9.5px/13px var(--plt-face-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ui-ink); }
.stp-tripgroup { display: grid; gap: 10px; justify-items: start; inline-size: 100%; padding-block-start: 10px; }
.stp-triphead { display: grid; gap: 4px; justify-items: start; inline-size: 100%; border-block-start: 1px dashed var(--ui-hairline); padding-block-start: 12px; }
/* THE AGE GRADE IS THE PLATE'S, NOT A SECOND SCALE. Same four opacities, same
   ink-not-gold ruling (C2): a stamp fading is one object fading, so the grade
   moves the outline and both lines together. */
.stp-grade-0 { opacity: var(--plt-grade-0); border-color: var(--ui-ink); }
.stp-grade-1 { opacity: var(--plt-grade-1); }
.stp-grade-2 { opacity: var(--plt-grade-2); }
.stp-grade-3 { opacity: var(--plt-grade-3); }
/* THE NEWEST STAMP'S DRESS, AND IT SPENDS NO GOLD, which is a repair and the
   reasoning is worth keeping because the first cut got it wrong.

   THE FIRST CUT MARKED IT IN GOLD - a gold border, a gold halo, a gold year -
   and C2 says gold is spent at the world band's points and NOWHERE else on the
   face. The plate's own floor named all three lines. The round lead REFUSED
   widening C2 and asked for compliance first: a token C2 already permits that
   can carry the meaning.

   THE MEANING: this is the NEWEST stamp on the wall, the one member the
   landing line beside it is about. Not "recent" - newest.

   WHY NO PERMITTED COLOUR CARRIES IT, and why that is not the end of the
   question. The colour axis on a stamp is ALREADY SPOKEN FOR: plt-grade-0..3
   spend ink, muted and opacity on AGE, so a "more ink" stamp is exactly what
   grade 0 already says about every this-year stamp. A permitted colour would
   have collided with a meaning the family assigns.

   SO THE MARK IS FORM, NOT COLOUR, and C2 rations a colour. The family's own
   stamp vocabulary already varies by form - two dies assigned by a stable
   seed, two border weights, two radii - and a passport's newest stamp is not a
   different colour in life either: it is a fresher, heavier impression. This
   is that, in the ink the grade has already chosen for it: a heavier strike
   and a hairline ring standing off it, which no other stamp on the wall wears.

   AND IT NO LONGER FORCES OPACITY. The first cut wrote opacity 1, which said
   "this one is bright" over a grade that may have faded it on purpose: a
   record whose newest stamp is from years ago would have had its age
   contradicted by its own freshness mark. The grade governs; this says only
   which stamp is newest, which is true at every age.

   OPUS-CONCEIVED (owner 2298): the form-not-colour mark and its ground are
   this seat's, taken as the compliance path the lead's ruling asked to be
   priced before any escalation. */
.pp-stamp--fresh { border-width: 2.5px; box-shadow: 0 0 0 2px var(--ui-hairline); }
.pp-stamp--fresh.pp-stamp--compact { border-width: 2px; }
/* THE LANDING LINE, beneath the plate on the passport home and never inside
   the card: it is a sentence about the record, not a member of the document. */
.stp-freshline { display: inline-flex; gap: 8px; align-items: center; inline-size: 100%; }
/* THE LANDING LINE'S LEADING DOT, in ink rather than gold for C2's own reason:
   the line sits on the plate's face and gold is the band's alone there. Ink at
   the family's muted weight reads as a mark rather than a status light, which
   is what this dot is. */
.stp-freshdot { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ui-ink); }
:lang(ar) .stp-citymark { letter-spacing: 0; text-transform: none; }


.pw-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; inline-size: 100%; }
.pw-pagehead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; inline-size: 100%; }
.pw-world .plt-band { aspect-ratio: 16/10; }
.pw-world .plt-band-point { inline-size: 9px; block-size: 9px; }
.pw-world .plt-band-point[data-grade="0"] { inline-size: 11px; block-size: 11px; }
.pw-rows { margin-block-start: 4px; }
.pw-row { inline-size: 100%; background: none; border: 0; padding: 0; font: inherit; text-align: start; }
.pw-row-readout { flex: none; margin-inline-start: 8px; }
/* THE READOUT JOINS THE DEAD DRESS. The shelf's published rules mute a refused
   row's name and its chevron by name, and the readout is this page's own
   element, so nothing there reaches it: on an inert row the name went muted and
   the numeral stayed at full ink, which is a control that is half alive. Found
   by a non-author review reading the two stylesheets against each other. */
.sv-door[data-inert] .pw-row-readout { color: var(--ui-muted); }


/* ==================================================================== *
 * ADD HOME - sheet 1's dress, carried from the BANKED DRAWING.          *
 * ==================================================================== *
 *
 * WHERE THESE DECLARATIONS COME FROM. They are the S:ADD and S:CAPTURE
 * segments of the drawn pages banked 2026-08-25 10:50, carried rule by
 * rule with their values verbatim rather than re-derived by eye. Where a
 * value moves, the move is named in the comment above it.
 *
 * EVERYTHING IS SCOPED UNDER .ad-home, AND THAT IS A REPAIR RATHER THAN A
 * PREFERENCE. Three of the drawn class names already exist in this file
 * with the TRIAGE's meanings and different values - .ad-row is a 56px
 * triage row here and a 44px list row there, and .ad-band and .ad-row-main
 * likewise. Carrying the drawn rules unscoped would have re-dressed the
 * flow's own rows from a sheet that was never about them, silently, in a
 * file whose other surface nobody was looking at. The scope costs one
 * selector's specificity and buys a screen that cannot reach into its
 * neighbour. (It said FOUR while .ad-sources was the fourth; that wrapper
 * left with the caption it stacked, and the count moved with it. The scope
 * rule is unchanged and now covers the two-halves block below as well,
 * where .th- names have no triage twin at all and are scoped anyway - one
 * rule for one surface beats a rule that holds only where it must.)
 *
 * THE DRAWING'S ca- PREFIX IS NOT CARRIED, on the drawing's own
 * instruction. Its S:CAPTURE-CARRIED block says in terms that those five
 * dresses are borrowed because "no shared CSS home exists", and that
 * "when a shared home lands this whole block is deleted and the markup
 * swaps to it". In THIS tree the shared home is already here - the act
 * grammar's tp- dresses in the collapse block below - so the markup
 * swaps to it rather than growing a fourth prefix for one meaning.
 *
 * TWO SHELL RULES THE DRAWING CHANGED ARE NOT CHANGED HERE, and both are
 * named because a silent trim would be worse than either. The drawn page
 * sets .fs-home-content's gap to 18px and gives it 72px of scroll-end
 * padding (A13's cut clearance). Both belong to the shell's own
 * stylesheet, which dresses all five tab homes; moving them from a
 * capture sheet would move four screens this act is not about. The gap is
 * reproduced INSIDE this surface and the scroll-end padding is applied to
 * this surface's own box, so the drawn rhythm and the drawn clearance
 * both land without the shell moving.
 */
.ad-home {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  align-content: start; inline-size: 100%; padding-block-end: 72px;
}

/* ==================================================================== *
 * THE TWO HALVES (drawing 3b's own S:TWOHALVES block, carried rule by
 * rule with its values verbatim). The halves separate by section-head
 * rhythm and ONE hairline; each half is one section, one head, one
 * optional meta line, its doors. No captions, no floating sentences.
 *
 * THE HAIRLINE IS THE SECOND HALF'S OWN RULE and not a divider element,
 * which is the drawing's choice and worth keeping for a reason it does
 * not state: a rule that fires on the adjacency selector below cannot draw a
 * line above a half that is not there, so the separator can never
 * outlive the thing it separates.
 * ==================================================================== */
.ad-home .th-half { display: grid; gap: 14px; inline-size: 100%; margin-block-start: 26px; }
.ad-home .th-half--first { margin-block-start: 10px; }
.ad-home .th-half + .th-half { padding-block-start: 22px; border-block-start: 1px solid var(--ui-hairline); }
.ad-home .th-head { display: flex; align-items: baseline; gap: 8px; inline-size: 100%; }

/* THE MEDIA HALF'S TWO DOORS: the same door grammar at media grain - two
   half-width boxes, a taller box, the label INSIDE rather than beneath.
   One role each: Camera is live capture, Gallery is the phone's own. */
.ad-home .th-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; inline-size: 100%; }
.ad-home .th-mdoor {
  display: grid; gap: 10px; place-items: center; align-content: center;
  min-block-size: 84px; border: 1px solid var(--ui-hairline); border-radius: 14px;
  background: none; color: inherit; cursor: pointer; padding: 10px 14px;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ad-home .th-mdoor:active { transform: scale(0.985); transition-duration: var(--ui-press-in); }
.ad-home .th-mdoor:focus-visible { outline: 2px solid var(--anchor-ink); outline-offset: -2px; }
.ad-home .th-mdoor-glyph { display: grid; place-items: center; color: var(--ui-ink); }
/* THE 28px IS THE DRAWING'S MEDIA GRAIN, AND IT OVERRIDES THE GLYPH'S OWN
   width/height ATTRIBUTES, which say 24. That is the family's established way
   of sizing this icon set - the place tiles' rule two blocks up does the same
   thing at 24 - but it is named here rather than left silent, because a CSS
   rule quietly beating an SVG presentation attribute is a defect class this
   estate has already paid for. What makes it a SIZE rather than a hidden
   override: the attributes are the icon set's own default and this surface
   asks for a different one, in one place, for one reason the drawing states
   (the media half's doors are bigger boxes at a bigger grain). Where the CSS
   does not load, the glyph renders at the set's default rather than at
   nothing, which is the fallback this shape is chosen for. */
.ad-home .th-mdoor-glyph .ui-icon { inline-size: 28px; block-size: 28px; }
/* A MEDIA DOOR THAT CANNOT OPEN WEARS THE FAMILY'S ONE REFUSED DRESS, the
   same reduced presence the four place tiles wear: muted label, reduced
   glyph, no press. It is written here rather than shared with the tile rule
   because the two carry different values for the same meaning (a 48px glyph
   box against an 84px door), and a shared selector would tie two geometries
   together that the drawing keeps apart. The DECISION is not duplicated -
   both dresses are driven by the same ledger read. */
/* THE DOORS STEP DOWN, 112px to 84px, and the block above keeps its own
   wording because the RELATION it states is unchanged: the two dresses
   still carry different values for one meaning. F1 / W2-F2, ruled by the
   design desk at its own eye 2026-08-28 and executed at this touch, which
   is exactly where the walk disposition shelved it. THE GROUND, weighed
   at rendered pixels under W1's comparator: this page's first act is the
   intake bar, and at 112px the two media doors were the largest gesture
   on it, which the walker measured at 2.9 times a Places tile and named
   as an inverted hierarchy against how the best consumer products place
   an import door. THE GRAMMAR IS UNTOUCHED: two doors, the same glyphs,
   the same labels, the same refused dress, and the hit target stays far
   above the 48px floor. The 3b bracket the owner chose was about the BAND
   and never about the door scale. */
.ad-home .th-mdoor--pending { cursor: default; }
.ad-home .th-mdoor--pending:active { transform: none; }
.ad-home .th-mdoor--pending .th-mdoor-glyph { color: var(--ui-muted); opacity: 0.55; }
.ad-home .th-mdoor--pending .ad-tile-label { color: var(--ui-muted); }

/* THE SAVES BAND'S RULE LEFT WITH THE BAND. R2 of the whole-app coherence
   pass took the Recent-saves band off this face (one home for saved things,
   under Explore), and a rule whose only selector nothing wears is dress
   nobody can see. The class name th-band is emitted nowhere on this surface
   now; the class-as-a-NAME reading in the block below is about th-row-one,
   which the band's rows also carried, and it goes with them. */
/* THE DRAWN th-row-one RULE IS DELIBERATELY NOT CARRIED, and the class IS.
   The drawing declares display:flex, align-items:center and a 44px floor on
   that class because its own carried lane block dressed its own ad-row as a
   TWO-LINE row. In this tree the ad-home ad-row rule already IS that, value
   for value, so carrying the drawn one would be two rules producing one
   dress - and the next reader to change the row's height would change one of
   them. The CLASS stays on the element: it names the row form the drawing
   fixes, and it is what this act's floors and a walker select on. A class
   with no declarations of its own is a NAME, which is a legitimate thing for
   a class to be; a second rule saying what the first already says is not. */
.ad-home .fs-headrow { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; }
.ad-home .fs-room-title { margin-block-end: 2px; }

/* THE INTAKE BAR, the screen's subject. */
.ad-home .ad-intake { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; inline-size: 100%; }
.ad-home .ad-bar { position: relative; display: flex; gap: 8px; align-items: center; inline-size: 100%; }
.ad-home .ad-field {
  flex: 1; min-inline-size: 0; inline-size: 100%; padding: 12px 16px;
  border: 1px solid var(--ui-hairline); border-radius: 10px; background: transparent;
  color: inherit; font: var(--ui-type-body); min-block-size: var(--ui-tap-min);
  -webkit-appearance: none; appearance: none;
}
.ad-home .ad-field::placeholder { color: var(--ui-muted); }
.ad-home .ad-bar--filled .ad-field { padding-inline-end: 52px; }
.ad-home .ad-fill {
  display: grid; place-items: center; inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  flex: none; border: none; border-radius: 50%; cursor: pointer;
  background: var(--ui-ink); color: var(--ui-ground);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ad-home .ad-fill:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.ad-home .ad-fill .ui-icon { inline-size: 20px; block-size: 20px; }
/* A9/F4: the lead act binds to the FIELD'S CONTENT. An empty field DELETES
   the affordance - R1's own words, "no fill, muted" - and the control is
   really disabled, not merely announced so. */
.ad-home .ad-fill--dead { background: none; border: 1px solid var(--ui-hairline); color: var(--ui-muted); cursor: default; }
.ad-home .ad-fill--dead:active { transform: none; }
/* A1/R6.4: the fill STAYS FILLED in flight and the arrow gives way to the
   mark INSIDE the same circle, which is what makes the drawn aria-busy hook
   a visual consequence rather than an announcement. */
.ad-home .ad-fill--busy { cursor: default; }
.ad-home .ad-fill--busy:active { transform: none; }
.ad-home .ad-fill-mark {
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor;
  animation: ui-breathe var(--ui-motion-breathe) infinite;
}
/* CATALOGUE ROW 1's two-element form: the OUTER element is the HIT at the
   44px floor on both axes and is transparent; the glyph inside is the
   visual. The drawing's own note records getting this wrong once in the
   other direction - a 32px control that the render caught against P-2 leg b. */
.ad-home .ad-field-clear {
  position: absolute; inset-inline-end: 48px; inset-block-start: 50%;
  transform: translateY(-50%); inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  display: grid; place-items: center; border: none; background: none;
  color: var(--ui-muted); cursor: pointer;
}
.ad-home .ad-field-clear .ui-icon { inline-size: 18px; block-size: 18px; }

/* EACH HALF'S ONE LINE, held to a measure so it cannot turn into a paragraph.
   The drawn page's own rule, values verbatim from S:TWOHALVES.
   THE TWO RULES THIS REPLACES ARE GONE WITH THEIR ELEMENTS: .ad-help was the
   source-list line the redraw retires from the face and .ad-tiles-lead was
   the tiles' caption the no-captions law strikes. A dress kept for an element
   nothing renders is sediment, and this file has been cleaned of it once
   already (A14). */
.ad-home .th-line { color: var(--ui-muted); padding-inline: 2px; max-inline-size: 52ch; }

/* A1/R6.6: the meta line beneath the slot past one second, and the baseline
   act beside it past eight. */
.ad-home .ad-flight { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; padding-inline: 2px; }
.ad-home .ad-flight-line { color: var(--ui-muted); }

/* A3/A12: the suggest list. Each ROW is the interactive element with its own
   press and focus; the CONTAINER carries no row dress at all, which is the
   defect the drawing's own note records paying for - a 44px box holding
   three 60px rows that overlapped each other and spilled over the tiles. */
.ad-home .ad-suggest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: 100%; }
.ad-home .ad-sg-row {
  display: flex; gap: 10px; align-items: center; min-block-size: var(--ui-tap-min);
  padding-block: 8px; padding-inline: 2px; color: inherit; text-decoration: none;
  border-block-end: 1px solid var(--ui-hairline);
}
.ad-home .ad-sg-row:last-child { border-block-end: none; }
.ad-home .ad-sg-glyph { display: grid; place-items: center; color: var(--ui-muted); flex: none; }
.ad-home .ad-sg-glyph .ui-icon { inline-size: 20px; block-size: 20px; }
.ad-home .ad-sg-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-inline-size: 0; }
.ad-home .ad-sg-hit { font-weight: 600; }

/* THE FOUR PLACE ROUTES: one row, equal weight, no tile promoted. The
   .ad-sources wrapper went with the caption it existed to stack above the
   tiles; the half's own grid supplies the rhythm now. */
.ad-home .ad-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; inline-size: 100%; }
.ad-home .ad-tile {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px;
  min-inline-size: 0; min-block-size: var(--ui-tap-min); padding: 4px 0;
  border: none; background: none; color: var(--ui-ink); cursor: pointer; text-decoration: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ad-home .ad-tile:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.ad-home .ad-tile-glyph {
  display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  border: 1px solid var(--ui-hairline); border-radius: 10px;
}
.ad-home .ad-tile-glyph .ui-icon { inline-size: 24px; block-size: 24px; }
/* FACT 7's cure. The carried rule clipped a label MID-LETTER with nothing
   telling the reader it was cut, on a box sized around four short English
   words - which is a defect in English and a certainty in Arabic. A label
   that does not fit changes the tile's shape; it is never cut. */
/* THE DRAWN RULE CARRIES overflow-wrap anywhere AND THIS ONE DOES NOT,
   which is the one declaration in this block that moves. The drawing was
   authored in a design estate with no class-91 floor; this tree has one, and
   it takes the STRONGER reading - a per-element break rule still visibly
   splits a token, so this surface uses none and the two elements that can
   receive an unbroken token contain and scroll instead.
   NOTHING FACT 7 ASKED FOR IS LOST. Its subject is a label CUT MID-LETTER
   with nothing telling the reader it was cut, and the cure is that the tile
   changes shape rather than the word being cut. white-space normal is
   what does that; the anywhere value only reaches a single unbreakable token wider
   than the tile, and a tile label is a catalog key the words desk authors,
   never a person's own text. Measured at the render in both editions at both
   geometries: zero labels clipped. */
.ad-home .ad-tile-label {
  font: var(--ui-type-label); white-space: normal; text-align: center;
  max-inline-size: 100%; overflow: visible; hyphens: auto;
}
/* A8/F13: the dashes die. The structural decision was right and the dress
   was wrong; the quiet reduced-presence dress carries it alone. */
.ad-home .ad-tile--pending { cursor: default; }
.ad-home .ad-tile--pending:active { transform: none; }
.ad-home .ad-tile--pending .ad-tile-glyph { border-color: var(--ui-hairline); color: var(--ui-muted); opacity: 0.55; }
.ad-home .ad-tile--pending .ad-tile-label { color: var(--ui-muted); }
/* A DEV-LANE STATE WITH NO LAWFUL INHABITANT, drawn as an absence rather than
   as a blank frame or a false screen.
   N-S1 (walk-capture-2): THIS COMMENT USED TO SAY "centred in its own box" AND
   THE RENDER WAS NOT. The walker measured the cause rather than guessing it:
   the element DOES take its container, but place-items centres the item IN
   ITS TRACK and does not centre the TRACK in the container - with one implicit
   auto row and align-content defaulting to start, the row sat at the top and
   the sentence rendered 25px from the top with 709px of void beneath it at
   384x750. place-content: center centres the track, which is what the
   sentence above always claimed. A comment asserting a property the render
   lacks is this act's own repeated defect class, and this is the third time it
   has been caught here. */
.ad-flow--absence { display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }
/* THE MARK'S GROUPING IS THE SENTENCE'S OTHER HALF (design desk ruling
   ab101ae4984bf0a9, constraint 3; the words desk's set-claim mint at
   9dc5d680cd67420b). The sentence is a DEICTIC - "None of these can be used
   yet." - so what it claims is whatever it is visually grouped WITH, and the
   spacing is therefore load-bearing rather than decoration.

   THE DEFECT, measured by the walk and reproduced here before the change:
   the mark sat 18px under the Media half and 44px above the band, a 2.44-to-1
   upward bias that hugged ONE half while the sentence claims the doors of
   BOTH. A reader's finger lands on a Places door the mark just implied works.

   THE CURE USES THE PAGE'S OWN RHYTHM RATHER THAN A NUMBER I CHOSE: the
   drawing separates the two halves by a 44px clear gap, so the mark now sits
   that same 44px below the Media half - no tighter to Media than Places is -
   and 60px above the band, which puts the band visibly outside the mark's
   group while the mark stays with the doors it speaks for. Measured after the
   change at both of the owner's geometries and both editions. */
.ad-home .ad-pending-note { padding-inline: 2px; margin-block-start: 26px; margin-block-end: 16px; }
/* B2 - THE DEAD BAR MUST LOOK DEAD (walk-capture-1, 2026-08-26; the design
   desk's rider of 20:39 is what makes it binding).
   THE FINDING, measured by the walk rather than argued: the served cold face's
   intake bar was PIXEL-IDENTICAL to a live empty one. Field ink, placeholder
   ink, border and opacity matched value for value at both of the owner's
   geometries, and the go act's dead dress is A9's empty-field rule, which a
   LIVE empty bar wears too - so nothing on that bar distinguished "empty" from
   "never built". The face's own stylesheet already says the principle, beside
   the flow's held controls: refusing the tap and LOOKING refused are two
   requirements, and only the first was met on the one surface that ships.
   THE DRESS IS THE FAMILY'S OWN, the same reduced presence the four pending
   tiles wear four rules above - muted label, reduced glyph - so the whole face
   reads as one refused surface under its one mark. No second caption, no new
   words, no new key: the one-mark rule is untouched.
   IT IS KEYED ON THE COMPOSITION'S OWN MARKING, not on a class this renderer
   chooses, and that is the whole reason a live bar is unaffected. The door pass
   writes data-inert="not-wired" onto the element it neutralises; a bar that has
   NOT been neutralised is not refused and must not be dressed as though it
   were. The gallery's warm and typing frames are raw markup that the
   composition never touches, so they keep the live dress the sheet drew and
   remain the reference a walker can compare against. */
.ad-home .ad-intake[data-inert="not-wired"] .ad-field { opacity: 0.55; }
.ad-home .ad-intake[data-inert="not-wired"] .ad-field::placeholder { color: var(--ui-muted); }
.ad-home .ad-intake[data-inert="not-wired"] .ad-bar { border-color: var(--ui-hairline); }
.ad-home .ad-intake[data-inert="not-wired"] .ad-fill { opacity: 0.55; }

/* STATE 5's one line, above the bar and nowhere else. */
.ad-home .ad-offline { display: flex; gap: 8px; align-items: center; color: var(--ui-muted); padding-inline: 2px; }
.ad-home .ad-offline-mark { display: grid; place-items: center; flex: none; }
.ad-home .ad-offline-mark .ui-icon { inline-size: 20px; block-size: 20px; }

/* THE COLD FLOOR'S TWO RULES ARE GONE WITH THE COLD FLOOR (sheet 1 dated
   append 2 section 4): the after-state line and the cold promise retire from
   this composition because the two halves fill the page. A cold screen is now
   the two halves with no band beneath them, which is a page with content on
   it rather than a page with a promise where its content will be. */

/* THE TWO BANDS. Memory, not work. */
.ad-home .ad-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; inline-size: 100%; }
.ad-home .ad-band--resume { gap: 0; }
.ad-home .ad-bandhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; inline-size: 100%; }
.ad-home .ad-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; inline-size: 100%; list-style: none; margin: 0; padding: 0; }
.ad-home .ad-row {
  display: flex; gap: 8px; align-items: center; inline-size: 100%;
  min-block-size: var(--ui-tap-min); color: inherit; text-decoration: none;
  border-block-end: 1px solid var(--ui-hairline);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ad-home .ad-row:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.ad-home .ad-band > .ad-row:last-child, .ad-home .ad-list .ad-row:last-child { border-block-end: none; }
.ad-home .ad-row-link { display: flex; flex: 1; gap: 8px; align-items: center; min-block-size: var(--ui-tap-min); color: inherit; text-decoration: none; }
/* THE TWO-LINE ROW'S EXTRA AIR IS GONE WITH THE TWO-LINE ROW. That 6px was a
   craft judgment taken at a viewed render for a real reason: a name OVER its
   locality clears the 44px floor on content alone, so the floor gave the row
   no padding and three of them read as one dense block with hairlines through
   it. The 05:45 row-form ruling put identity back on ONE line, which is
   shorter than the floor, so the floor supplies the row's height again and
   the padding has nothing left to correct. Kept, it would have made every row
   taller than the page the design desk's eye signed. */
.ad-home .ad-row-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1; min-inline-size: 0; }
.ad-home .ad-row--door { justify-content: space-between; }
/* THE FACT-ROW FORM (catalogue row 6, V12): a row with nothing behind it is
   not a control and does not press. It keeps the row's geometry so the list
   reads as one list, and it loses the press dress a door earns. */
.ad-home .ad-row--fact { cursor: default; }
.ad-home .ad-row--fact:active { transform: none; }
.ad-home .ad-door-label { color: var(--ui-muted); }
.ad-home .ad-readout { flex: none; color: var(--ui-muted); }
.ad-home .ad-row-act { flex: none; margin-inline-start: auto; }
.ad-home .ad-waiting { align-items: flex-start; padding-block: 8px; }
/* THE BAND FOOT'S RULE IS GONE WITH THE ACT IT SEATED (design desk,
   2026-08-27 09:25). A5 ruled WHERE a clearing act sits if one is present -
   at the band's end, beneath the list it acts on, because at 384 it used to
   offer to clear a consequence off the bottom of the screen. The cap removed
   the act rather than moved it: a band showing three of a person's saves is
   a window, and a destructive act whose subject is not on screen breaks the
   consent ground the whole family works to. A5's law is untouched and has
   nothing left on this face to govern. */

/* THE DEAD-DOOR DRESS, and it is the composition's mark that drives it.
   Every control on this screen carries a dispatch row, so the composition's
   door pass marks the ones that cannot open aria-disabled and takes away
   their href. That mark is what these rules read: the surface says a door
   is not built in its OWN dress (data-door-note="self"), and this is the
   dress. A control that opted out of the caption and then drew itself
   exactly like a live one would be the dishonesty the opt-out exists to
   avoid, which is why it is written here and asserted by this act's floor. */
.ad-home [data-door="pending"], .ad-home [data-door="machinery-not-wired"] { cursor: default; }
.ad-home [data-door="pending"]:active, .ad-home [data-door="machinery-not-wired"]:active { transform: none; }
/* THE TWO CARRIED CLASSES THIS SURFACE NARROWS, and they carry the surface's
   own attribute rather than its class so the fence floor can read the
   narrowing. The floor's subject is that a carried class is never DEFINED
   above the fence - narrowing one inside this surface's scope is what the
   primitives layer's own rule permits a room to do, and it survives the
   block's deletion unchanged. */
[data-surface="capture"] .tp-base-act[data-door="pending"],
[data-surface="capture"] .tp-base-act[data-door="machinery-not-wired"] { color: var(--ui-muted); }
[data-surface="capture"] .tp-base-act[data-door="pending"] .ui-chip-dot,
[data-surface="capture"] .tp-base-act[data-door="machinery-not-wired"] .ui-chip-dot { background: var(--ui-muted); }
.ad-home .ad-row[data-door="pending"] .ad-door-label,
.ad-home .ad-row[data-door="machinery-not-wired"] .ad-door-label { color: var(--ui-muted); }

/* THE GO ARROW MIRRORS IN THE ARABIC EDITION, and it has to be said in CSS
   because the drawing is one drawing. A forward arrow is a DIRECTIONAL glyph:
   pointing it right in a right-to-left reading points it backwards, and this
   surface's arrow means "send this onward", which is the one meaning that
   cannot survive being reversed. The design owner ruled directional glyphs
   mirror at the share family; the icon set's own header carries selective
   mirroring as named debt routed to the direction audit, so this is the rule
   stated for THIS glyph rather than a family-wide sweep taken from a capture
   sheet. The family's back-link chevron is already turned the same way, by
   the same mechanism, in this file.
   :lang(ar) RATHER THAN AN ATTRIBUTE SELECTOR, on the plate's own finding:
   it also matches an inherited language, which the attribute form does not. */
.ad-home:lang(ar) .ad-fill .ui-icon { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .ad-home .ad-fill-mark { animation: none; opacity: 0.7; }
  .ad-home .ad-fill:active, .ad-home .ad-tile:active, .ad-home .ad-row:active { transform: none; }
}

/* ================= THE AT-BAR CONVERSION (the beauty layer v1) =================
   The design desk's bar
   (design-owner/beauty/BEAUTY-LAYER-v1-THE-BAR-AND-THE-SAVED-PAGE-DELTA-20260829),
   applied to this face at its line 2 (DEPTH IS A SURFACE, not a line), its
   line 4 (one rhythm) and its line 5 (warmth from the surface's own
   gradient, the gold staying the seal's). CSS ONLY: no word, no element, no
   attribute and no order moves.

   WHAT THIS DOES NOT TOUCH, and each is somebody else's by construction:
     LINE 3, the heads. "Places" and "Media" are .th-head, which the SAVED
     SHELF also wears, and the desk's own collections delta carries the rule
     that steps that class down. One fact, one channel: this face takes it
     when that delta lands rather than declaring a second copy here.
     LINE 1, photography. This face shows doors, not places.
     LINE 7, the door law. Every door here is refused at this ledger and
     wears the reduced presence; the conversion dresses the SURFACE a door
     sits on and never the door's own state, so a tile that comes alive
     later changes nothing below.
     THE SHORT PAGE (canon G5). The empty ground under this face is the
     shell's question and the desk folded its cure into the shared shell
     rules; a copy here would be the second channel for it.

   NO COLOUR LITERAL: the owned-primitives census (MR-29) refuses one in a
   surface stylesheet, so every value is DERIVED from the canon token layer
   with color-mix, which is the estate's own idiom for it. */
.ad-home {
  /* THE OUTLINE FORM'S ONE WASH, derived not literal (MR-29). The lifted-card
     tokens that stood here (a drop shadow and a card gradient) are GONE with
     the form they served: the island ruling reconciled the beauty layer with
     the published screen set, and the published language is an outline and a
     wash, not a lift. */
  --ad-wash: color-mix(in srgb, var(--ui-ink) 3%, transparent);
}
/* THE FOUR TOOL TILES: outlined squares. The outline is an INSET RING rather
   than the border it replaces, so the 48px box and the glyph inside it keep
   the geometry the drawing fixed while the edge moves inward by a pixel. */
.ad-home .ad-tile-glyph {
  border-color: transparent;
  background: var(--ad-wash);
  box-shadow: inset 0 0 0 1px var(--ui-hairline);
}
/* AND THE PENDING ARM, which the rule above does not reach on its own: the
   refused dress sets this same border-color at a higher specificity, so
   without this line four of the six doors would keep a border the other two
   had lost. THE REFUSED DRESS ITSELF IS UNTOUCHED: the muted glyph, the
   reduced opacity and the muted label still carry a door that cannot open. */
.ad-home .ad-tile--pending .ad-tile-glyph { border-color: transparent; }
/* THE TWO MEDIA DOORS at their own bigger grain, the same form. */
.ad-home .th-mdoor {
  border-color: transparent;
  background: var(--ad-wash);
  box-shadow: inset 0 0 0 1px var(--ui-hairline);
}
/* THE INTAKE FIELD returns to the reference's field form: a real border, a
   12px radius, a transparent ground and no lift at all. It is the screen's
   subject and the reference makes it a field, not a card. */
.ad-home .ad-field {
  border: 1px solid var(--ui-hairline); border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
/* LINE 3 IS WITHDRAWN ON THIS FACE, by the desk's own later ruling and in the
   open. Its C1/C2 grade (14:40) asked for "Places and Media step down to the
   quiet label"; its re-check under BEAUTY-LAYER-v2 (15:33, on the island
   ruling that reconciled the beauty layer with the PUBLISHED screen set)
   reverses it: the two heads return to the title token and hierarchy is
   carried by the SIZE STEP, never by case, because that is what the published
   country screen does (Uzbekistan at 34 over Checklist at 22). The step-down
   rule is REMOVED rather than overridden, so this face has one statement of
   its heads and not two. The display head takes the published step. */
.ad-home .fs-room-title { font-size: 34px; line-height: 40px; }
/* THE FLOW'S FOUND SET TAKES ONE CARD, at the design desk's ruling (its C1/C2
   grade, 2026-08-29 14:40: "one card across every group with the wrapper
   element admitted, the walked row rhythm kept, the notes inside the
   surface").
   THE ADMITTED WRAPPER TURNED OUT TO BE UNNECESSARY, which is worth a line
   rather than a silent saving: .ad-found ALREADY holds every group and every
   band, so carding it is the one-card form with no markup change and no new
   selector for the existing floors to miss. Nothing is wrapped, nothing moves
   in the DOM, and the two last-row rules above keep their child chains
   exactly as the walk left them.
   WHY THE CARD IS ONE AND NOT PER GROUP, which is the whole point of the
   ruling: this surface's own rule holds that a row keeps its hairline except
   the last ON THE PAGE, because dropping it per GROUP made the separators
   encode group membership and a person saw an irregular list. A card boundary
   encodes membership harder than a missing hairline does. With exactly one
   card there is no boundary to encode anything, the notes between groups sit
   INSIDE the surface where they annotate the rows beneath them, and the 56px
   row and its hairline are untouched.
   THE HAIRLINES SOFTEN, they do not retire: a ledger of found places is read
   down, and the rule that carries the beat stays while the rule that was
   carrying the structure hands that job to the surface. */
.ad-found {
  --ad-found-rule: color-mix(in srgb, var(--ui-hairline) 55%, transparent);
  background: color-mix(in srgb, var(--ui-ink) 3%, transparent);
  border-radius: 14px;
  padding: 6px 14px;
  box-shadow: inset 0 0 0 1px var(--ui-hairline);
}
.ad-found .ad-row { border-block-end-color: var(--ad-found-rule); }
/* LINE 4, one rhythm: 26 between segments and 6 below the head. The half's
   own hairline retires with it, because the two halves are now separated by
   the rhythm and by their own surfaces, which is the bar's line 2 read at
   the page grain rather than at a component's. */
/* 28 BETWEEN THE TWO HALVES, the ruling's own number, set as ONE value so
   the gap is stated in one place: the half's own top margin is zeroed where a
   half follows a half and the padding carries the whole break. Measured 44 at
   the render before this line, from a 26 margin and a 26 padding meeting. */
.ad-home .th-half + .th-half { margin-block-start: 0; padding-block-start: 28px; border-block-start: none; }
.ad-home .fs-room-title { margin-block-end: 6px; }

/* THE MEDIA ROOMS (the media rooms act, 2026-09-04): the home's own
   elements at the home's own dress, plus the four rules that are the
   room's alone. ONE door in the media row, so the grid is one column;
   the line sits under the title at page grain; and the receipt band is
   a plate beside two lines and one act, on the family's band dress. */
.ad-mroom .th-line { margin-block: 2px 0; }
.ad-mroom .th-media--one { grid-template-columns: 1fr; }
.ad-home .ad-mreceipt {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  inline-size: 100%; margin-block-start: 22px; padding-block-start: 22px; border-block-start: 1px solid var(--ui-hairline);
}
.ad-home .ad-mreceipt-plate {
  inline-size: 64px; block-size: 64px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--ui-plate, var(--ui-hairline));
}
.ad-home .ad-mreceipt-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ad-home .ad-mreceipt-main { display: grid; gap: 6px; min-inline-size: 0; }
.ad-home .ad-mreceipt .ad-acts { margin-block-start: 4px; }


/* COMPOSITION FROM THE TOP. The carried `.fs-doors` centring is NOT
   carried: it measures the staged settings page's first ink at 47.2% and
   47.7% of the canvas against a 4.8% to 5.9% control, both arms, both
   geometries. Air never sits above the first content. */
.st-surface { display: grid; gap: 16px; align-content: start; justify-items: start; inline-size: 100%; }
/* NO BACK ROW IS DRESSED HERE. These rooms drew their own until the
   composition's control generalised onto every surface the shell gives a
   chrome back target, which is all of them - two controls, one place,
   the louder wearing the struck wording. The rooms retired theirs and
   the composition's took the ruled wording and the ruled muted ink, so
   there is one back dress in the estate and it is dressed where it is
   drawn. */
/* THE ROOM-LIST BOX, at the drawn values. */
.st-list { display: grid; gap: 0; inline-size: 100%; }
.st-row { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding-block: 12px; min-block-size: var(--ui-tap-min); border-block-end: 1px solid var(--ui-hairline); }
.st-list .st-row:last-child { border-block-end: none; }
.st-row-door { text-decoration: none; color: inherit; inline-size: 100%; transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.st-row-door:active { transform: scale(0.995); transition-duration: var(--ui-press-in); }
.st-row-main { flex: 1; }
.st-row-glyph { align-self: center; display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; }
.st-row-glyph svg { inline-size: 18px; block-size: 18px; }
/* THE LABEL NEVER SHRINKS, THE VALUE DOES. The carried family grows the
   LABEL and forbids the VALUE to give way, which is backwards for a long
   value: at 384 the at-scale page's track grew to the row's min-content
   and the page gained a 16px sideways scroll (container clientWidth 384
   against scrollWidth 400). `min-inline-size:0` is the load-bearing
   half - a flex item's automatic minimum is its min-content, and an
   email has no break opportunity, so without it nothing can shrink. */
.st-row-label { flex: 0 0 auto; }
.st-row-value { flex: 1 1 auto; min-inline-size: 0; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* S2's SUB-LINE. Where the value is a SENTENCE rather than a word it
   sits UNDER the label instead of beside it, because a sentence in the
   readout slot squeezes the label to nothing at 384. Same row, same
   dress, one axis different. */
.st-row-tall { align-items: center; }
.st-row-tall .st-row-main { display: grid; gap: 2px; }
.st-row-sub { color: var(--ui-muted); max-inline-size: 34ch; }
/* S3: THE IDENTITY ROW IS ITS OWN GROUP, SEPARATED BY GEOMETRY. Measured
   rather than asserted: at the surface's own 16px rhythm the identity
   row read as one more row, and doubling the gap to 32px is the ordinary
   grouping signal. No rule, no tint, no label - just distance. */
.st-group-identity { margin-block-end: 16px; }
/* THE THIRD GROUP, at the foot: what you can DO and READ about the app,
   rows whose honest answer is not a value. Same idiom, opposite edge. */
.st-group-foot { margin-block-start: 16px; }
.st-lede { max-inline-size: 46ch; color: var(--ui-muted); }
/* THE OPTION ROW - the select-one at ROOM grain. A room choosing one
   value from a closed set is a LIST of options with the chosen one
   marked. The mark is a TICK and never a colour: plain-text-first holds
   and this layer introduces no colour semantics. */
.st-optlist { inline-size: 100%; }
.st-optrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; min-block-size: var(--ui-tap-min); padding-block: 12px; border: none; background: none; color: var(--ui-muted); cursor: pointer; text-align: start; border-block-end: 1px solid var(--ui-hairline); transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.st-optlist .st-optrow:last-child { border-block-end: none; }
.st-optrow:active { transform: scale(0.995); transition-duration: var(--ui-press-in); }
.st-optrow[aria-checked="true"] { color: var(--ui-ink); }
.st-tick { display: inline-grid; place-items: center; flex: none; color: var(--ui-ink); }
/* THE CHIP, IN THE CATALOGUE'S CANONICAL TWO-ELEMENT FORM. The outer
   element is the hit box, transparent, at the tap minimum; the inner is
   the 32px bordered visual pill. Every state on the inner, every tap on
   the outer - the published one-element chip put the 44px minimum on the
   element carrying the border, so the pill grew to the hit target. */
.st-chip { display: inline-flex; align-items: center; min-block-size: var(--ui-tap-min); padding-block: 6px; padding-inline: 0; margin: 0; border: none; background: none; cursor: pointer; font: var(--ui-type-label); color: var(--ui-muted); transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.st-chip:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.st-chip[aria-checked="true"] { color: var(--ui-ink); }
.st-chip-pill { display: inline-flex; align-items: center; white-space: nowrap; min-block-size: 32px; border: 1px solid var(--ui-hairline); padding: 5px 12px; border-radius: 999px; }
.st-chip[aria-checked="true"] .st-chip-pill { border-color: var(--ui-ink); }
/* BASELINE ACT - dot plus label, the NEUTRAL weight, which is what the
   ruling that sign out is neutral means in dress. */
.st-act-block { display: grid; gap: 2px; justify-items: start; inline-size: 100%; }
.st-baseline { display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--ui-tap-min); border: none; background: none; padding: 0; color: var(--ui-ink); cursor: pointer; transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.st-baseline:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.st-baseline-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; flex: none; background: var(--ui-muted); }
.st-act-note { max-inline-size: 46ch; color: var(--ui-muted); padding-inline-start: 14px; }
/* THE DESTRUCTIVE DRESS. Its own separated zone above a hairline, a
   text-level control, NEVER a fill and NEVER RED. Two existing
   treatments are deliberately not carried: the staged account page
   dresses this act in the same quiet pill as Sign out, which the design
   owner struck, and the frozen app paints it red, which the confirm
   ruling forbids in terms. Separation and weight carry it. */
.st-destructive-zone { inline-size: 100%; margin-block-start: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--ui-hairline); }
/* BOTH AXES, not just the block one. The bare verb measured 43x44 at
   both geometries in both families - one pixel short on the INLINE axis,
   invisible because the height was right. A tap target is a target in
   two dimensions. `min-inline-size` rather than padding, so the text
   stays flush to the start edge. */
.st-destructive { display: inline-flex; align-items: center; justify-content: flex-start; min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min); border: none; background: none; padding: 0; color: var(--ui-muted); cursor: pointer; transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.st-destructive:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
/* LEAD ACT (fill) - one per surface layer, at the passport pass's own
   pill values. */
.st-fill { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min); padding: 10px 22px; border: none; border-radius: 999px; background: var(--ui-ink); color: var(--ui-ground); font: var(--ui-type-label); cursor: pointer; transition: transform var(--ui-press-out) var(--ui-motion-curve); }
.st-fill:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
/* THE REFUSED DRESS - what a control that cannot be pressed LOOKS like.
   Added at the walk's B1, which measured the defect rather than reasoning
   about it: the walker photographed each refused control, removed exactly
   the attributes that declare the refusal, photographed the same box
   again, and got 28 of 28 PNG comparisons BYTE-IDENTICAL. The only
   computed difference was cursor, which does not exist on a phone. The
   act shipped the mark and not the dress.

   THE LAW IT BREAKS is this estate's own and was dated the same day: a
   disabled primary pixel-identical to the live act LIES ABOUT
   AFFORDANCE, and opacity-only is not a state. The owner's standard says
   it in four words - a control that does nothing must look like it.

   ONE STEP PER ROLE, FROM EACH ROLE'S OWN LIVE INK, which is the plate's
   ruled form and the half that is easy to get wrong. Muting everything to
   one value flattens the hierarchy the live screen has: the plate's first
   cut did exactly that, took the name and the year to the same ink, and
   had to be re-cut. So the chosen option steps from the surface ink and
   the unchosen from the muted ink, and the chosen one stays strictly the
   stronger of the two after the step, as it is alive.

   KEYED ON THE COMPOSITION'S OWN MARKING, not on a class this layer adds:
   the composition already stamps data-inert of not-wired on every control
   it refuses, from one place, so this reaches all five controls on the
   three rooms in both editions with no markup change and no word moved.
   SCOPED TO THIS ACT'S SURFACES, because the same class is live estate-wide
   (the capture walk filed it two hours before this one) and an
   estate-wide rule is the round's to place, not this act's. */
.st-baseline[data-inert="not-wired"],
.st-destructive[data-inert="not-wired"],
.st-optrow[data-inert="not-wired"],
.st-chip[data-inert="not-wired"],
.st-fill[data-inert="not-wired"] { cursor: default; }
.st-baseline[data-inert="not-wired"]:active,
.st-destructive[data-inert="not-wired"]:active,
.st-optrow[data-inert="not-wired"]:active,
.st-chip[data-inert="not-wired"]:active,
.st-fill[data-inert="not-wired"]:active { transform: none; }
/* SCOPED BY THIS ACT'S OWN CLASSES, NOT BY AN ANCESTOR, and that is a
   correction the design desk's eye earned within the hour. The first cut
   of this dress was written .st-surface [data-inert] - which reads as
   this act's surfaces and is not. The delete confirm's sheet is a SIBLING
   of the surface it opens over, not a descendant: the landed frame puts
   the room inside an inert wrapper and the sheet beside it. So the two
   acts INSIDE the sheet carried the refusal in their markup and none of
   it in their dress, which is B1 again, alive in the one state the walk
   could not photograph because it had no dialog to open. The desk saw it
   as soon as the vantage existed and called the verb plain ink.
   Keying on the classes themselves reaches every control this act draws,
   wherever the composition puts it, and reaches no other lane's. */
.st-baseline[data-inert="not-wired"] { color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)); }
.st-baseline[data-inert="not-wired"] .st-baseline-dot { background: var(--ui-inert-ink); }
/* The destructive act is already the quiet rank alive, so it steps from
   THAT rather than from the ink - a dead destructive act must not become
   more visible than a dead ordinary one. */
.st-destructive[data-inert="not-wired"] { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); }
/* The option row, both of its states, each from its own live ink. */
.st-optrow[data-inert="not-wired"] { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); }
.st-optrow[data-inert="not-wired"][aria-checked="true"] { color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)); }
.st-optrow[data-inert="not-wired"] .st-tick { color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)); }
/* The switch, label and pill. The pill's EDGE is what says a switch can be
   moved, so it steps too; the checked edge steps from the ink it carries
   alive and the unchecked from the hairline. */
.st-chip[data-inert="not-wired"] { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); }
.st-chip[data-inert="not-wired"][aria-checked="true"] { color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)); }
.st-chip[data-inert="not-wired"] .st-chip-pill { border-color: color-mix(in srgb, var(--ui-hairline) 70%, var(--ui-card)); }
.st-chip[data-inert="not-wired"][aria-checked="true"] .st-chip-pill { border-color: color-mix(in srgb, var(--ui-ink) 54%, var(--ui-card)); }
/* THE LEAD ACT, which had no refused dress at all because the only fill
   this act draws lives in the sheet that the ancestor scope missed. A
   dead fill becomes the OUTLINE of a button - the plate's ruled form -
   rather than a filled act a person would press: the fill is the loudest
   affordance on any surface and dimming its label alone would leave the
   loudest thing on the screen still shouting. */
.st-fill[data-inert="not-wired"] { background: none; color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); border: 1px solid color-mix(in srgb, var(--ui-hairline) 70%, var(--ui-card)); }

/* THE NOT-BUILT MARK HAS ITS OWN DRESS, and this is the walk's S2: it wore
   st-act-note, the same class as the halal room's permanent fact about
   the feature, so two paragraphs one after the other said a fact and an
   apology in one voice and only an invisible attribute told them apart. A
   string wearing another role's dress is a build failure at review. It is
   the quietest thing on the face, because it is the least of what the
   screen has to say. */
.st-not-built-note { color: color-mix(in srgb, var(--ui-muted) 85%, var(--ui-card)); max-inline-size: 46ch; }

/* THE MODAL SHEET IS NOT DRESSED HERE. Its frame, scrim, panel and
   grabber are the landed sheets module's, consumed rather than copied -
   the estate exports that frame in terms because a second copy is a
   second set of dismissal rules, and this layer had one until the
   one-place-sheet floor found it. What stays this layer's is the dress
   on the acts INSIDE the sheet, above. */
.tp-sheet .st-destructive-zone { margin-block-start: 0; }

/* ==================================================================== *
 * THE CLAIM FACES - the name and the username, in the gate family's     *
 * FORM and in this family's own dress.                                  *
 *                                                                       *
 * WHY A DRESS HERE AT ALL, since the gate already has one: the gate's    *
 * field rule is scoped .sg-gate .ad-field, so it reaches nothing on a  *
 * settings surface. That scoping is not an oversight either - the        *
 * unscoped .ad-field rule lives in the capture family's stylesheet,    *
 * which the composition does not ship, so every surface that uses the    *
 * family carries the dress the composed sheet is missing. Add home did   *
 * it, the gate did it, and this is the third. ONE CLASS, ONE FORM,       *
 * three dresses of it, each one named where it stands.                   *
 * ==================================================================== */
.st-claim-seat { display: grid; gap: 12px; inline-size: 100%; justify-items: start; }
.st-claim-form { display: grid; gap: 12px; inline-size: 100%; justify-items: stretch; }

/* THE LABEL PAINTS. C15 binds these faces as it binds the gate's, and the
   gate paid for the lesson in a served render: a class named
   --visible that changed nothing left every field a bare unlabelled
   box while a markup census passed it, because the label element was
   present and correctly associated. This label is in normal flow with no
   clip and no absolute position, so there is nothing to undo and nothing
   that can be re-ordered out of effect. */
.st-claim-label { display: block; color: var(--ui-ink); }

/* THE FIELD BOX. The affixed variant is a left-to-right flex run, so the
   drawn @ and the value it belongs to are one token in both editions
   rather than two halves at opposite ends of a mirrored field. */
.st-claim-box { display: block; inline-size: 100%; }
.st-claim-box--affixed {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--ui-hairline);
  border-radius: 10px;
  padding-inline-start: 16px;
  background: none;
}
.st-claim-affix { color: var(--ui-muted); flex: none; }

/* THE FIELD, in the ad-field family's dress, scoped to this surface. */
.st-claim .ad-field {
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: 12px;
  padding-inline: 16px;
  border: 1px solid var(--ui-hairline);
  border-radius: 10px;
  background: none;
  color: inherit;
  font: var(--ui-type-body);
  min-block-size: var(--ui-tap-min);
  -webkit-appearance: none;
  appearance: none;
}
/* INSIDE THE AFFIXED BOX the border belongs to the box, so the input
   drops its own and keeps the tap floor. Two borders would draw a field
   inside a field, and the @ would sit outside the one a person reads as
   the field. */
.st-claim-box--affixed .ad-field {
  border: none;
  border-radius: 0;
  padding-inline-start: 2px;
  background: none;
}
/* AND THE FOCUS RING BELONGS TO THE BOX TOO. The border rule above was
   already in force when the owner met two nested frames on the username
   step on 3 September (his 2776): the inner one was the browser's own
   focus outline, drawn on the input at its own edge INSIDE the box the
   person reads as the field, so a focused field showed the box's
   hairline with a second, brighter frame set inside it and the @ left
   outside the bright one. The input's outline is dropped here and the
   box draws ONE ring while anything inside it has focus, at the box's
   own edge and radius, so the affix and the value sit inside the one
   frame that lights up. The ring is drawn, not merely a colour change,
   because keyboard focus must stay visible (the platform ring it
   replaces was). The name step has no affix and no box, so its field
   keeps the platform ring exactly as before. */
.st-claim-box--affixed .ad-field:focus,
.st-claim-box--affixed .ad-field:focus-visible {
  outline: none;
  box-shadow: none;
}
.st-claim-box--affixed:focus-within {
  outline: 2px solid var(--ui-ink);
  outline-offset: 1px;
}
/* THE PERSON'S BYTES STAY READABLE while an unwired copy of this face is
   marked inert by the composition: a platform-disabled field greys what
   they typed, and their bytes are the one thing a refused state exists to
   keep in front of them. */
.st-claim .ad-field:disabled { color: inherit; -webkit-text-fill-color: currentColor; opacity: 1; }

/* THE ACTS. The lead act at the estate's own ink fill and the 52px act
   floor; the quiet act a bare text act at meta rank with the 44px reach.
   NO DEAD DRESS EXISTS FOR EITHER: the lead act is always pressable on
   these faces (Ruling B, on the F-B1 ground that an act disarmed where no
   client watches the field can never re-arm), so a disabled form would be
   a state this build cannot produce. */
.st-claim-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 52px;
  border-radius: 12px;
  border: none;
  font: inherit;
  cursor: pointer;
  padding-inline: 16px;
  white-space: nowrap;
  inline-size: 100%;
}
.st-claim-act--lead { background: var(--ui-ink); color: var(--ui-ground); }
.st-claim-quiet {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ui-tap-min);
  border: none;
  background: none;
  padding: 0;
  color: var(--ui-muted);
  cursor: pointer;
  font: inherit;
}

.st-claim-law { color: var(--ui-muted); max-inline-size: 46ch; margin-block-start: -6px; }
.st-claim-state { color: var(--ui-ink); max-inline-size: 46ch; }

/* THE USERNAME READOUT ON THE ACCOUNT ROW is one token with its @, and it
   is isolated left to right for the field's own reason: the law's
   characters are Latin and digits, and an unisolated Latin run beside
   Arabic reorders around the neutral characters at its edges. */
.st-row-username { unicode-bidi: isolate; }
.st-row-affix { color: var(--ui-muted); }


/* THE MONEY SURFACE. The row, the band and the list are the trips
   family's own dress, consumed rather than re-solved; what is here is
   the few shapes that family has no member for. */
.mn-surface { inline-size: 100%; }
.mn-standing { overflow-wrap: anywhere; min-inline-size: 0; }
.mn-note, .mn-slot, .mn-unallocated { max-inline-size: 46ch; color: var(--ui-muted); }
.mn-offline { inline-size: 100%; }
.mn-transfer-fact { display: flex; flex: 1; gap: 8px; align-items: baseline; justify-content: space-between; min-inline-size: 0; overflow-wrap: anywhere; }
/* THE PINNED FOOT IS THE JOURNAL'S OWN CLASS, defined by the trips
   stylesheet; nothing is redefined here. */
.tp-fact { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding-block: 8px; border-block-end: 1px solid var(--ui-hairline); min-block-size: var(--ui-tap-min); inline-size: 100%; }
.tp-fact:last-child { border-block-end: none; }
/* THE ONE FILL sits at the end of the page's own flow. The sheets ask
   for it "pinned outside the scroll container so it can never cover the
   last row"; this shell scrolls the DOCUMENT rather than a page-local
   container, and the composed bar already holds the foot, so a second
   pinned element there would collide with it. In flow at the end it
   covers nothing, which is the rule's own purpose. */
.mn-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; inline-size: 100%; padding-block-start: 8px; }
/* The act itself is the trips family's control, dressed by its own
   module; these two rules place it and nothing more. */
.mn-act { inline-size: 100%; }
.mn-act--baseline { justify-content: flex-end; }
.mn-transfer { flex-wrap: wrap; }
.mn-transfer .mn-act { inline-size: 100%; }
/* the sheet's own body */
.mn-sheetbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; inline-size: 100%; }
.mn-field { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; inline-size: 100%; min-block-size: var(--ui-tap-min); border-block-end: 1px solid var(--ui-hairline); }
.mn-fieldvalue { display: flex; gap: 8px; align-items: baseline; min-inline-size: 0; overflow-wrap: anywhere; }
.mn-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; inline-size: 100%; }
.mn-ticks, .mn-selectone, .mn-currency { inline-size: 100%; }
.mn-selectone, .mn-currency { display: flex; flex-wrap: wrap; gap: 8px; }
/* A LABELLED SELECT FIELD reads as the fields above it do: the label at
   the label role on one side, the control on the other, at the same
   pitch and with the same hairline. The pills keep their own dress. */
.mn-selectfield { align-items: center; }
/* THE LABEL STAYS WHOLE. The select-one row is 100% wide by the rule
   above it, which in a flex field makes the label the thing that gives:
   "Paid by" broke to "Paid" / "by" at both owner geometries in English
   (the Arabic single word did not), which R4's own no-reflow reading
   refuses. Measured at 384x750 before the change: field 342px, the three
   pills 193px plus two 8px gaps, so the row has room for a whole label
   at content width and nothing wraps at auto.
   WHAT THIS DOES NOT DO, against the walk record's reading: it recovers
   no height. The field row is 45px with the label wrapped and 45px with
   it whole, because the pills' own 44px tap floor already sets the row -
   so the 20px WALK-MONEY-2 attributes to this wrap is not in the sheet's
   overflow, and the foot's own pinning is what cures the clip. */
.mn-selectfield .mn-selectone { justify-content: flex-end; inline-size: auto; }
.mn-selectrow { inline-size: 100%; }
/* THE SELECT-ONE, at the 44px floor on both axes. It announces as a
   radiogroup (the design owner's eye pass tied it for the build) and
   the dress stays as drawn: a pill per member, the chosen one carrying
   the ink rather than a fill. */
.mn-select-one {
  min-block-size: var(--ui-tap-min); padding-block: 0; padding-inline: 12px;
  border: 1px solid var(--ui-hairline); border-radius: 999px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.mn-select-one[aria-checked="true"] { border-color: currentColor; }
.mn-tick .tp-row-link { inline-size: 100%; }
/* THE FOOT IS PINNED TO THE SHEET'S OWN FOOT, not to the end of its
   content. The sheet is bounded to the viewport and scrolls inside
   itself, so a state whose content is taller than the bound pushed the
   act row out of sight: at 384x750 the walk measured the commit and the
   dismissal at 9 of 44px in three states (by-amount-unbalanced,
   by-amount-over, nobody-picked), and because the refused fill's own
   background is transparent, those 9 pixels carried no ink at all - a
   person met a modal with no visible commit and no visible way out.
   Making the row shorter does not close that: the states differ by a
   meta line the design draws, so any fixed height is a clip waiting for
   the next state. Pinning removes the dependency instead. It is also
   the standing law at design grain (RULING-PLACE-SHEET-ANCHORS-TO-THE-
   VIEWPORT-AND-A-MODAL-NEVER-OPENS-WITHOUT-ITS-EXIT, 2026-08-29): a
   modal that cannot be dismissed does not open, and an exit below the
   fold is not an exit.
   The negative bottom margin spends the sheet's own 20px bottom padding
   so the pinned position and the rest position are the same place; the
   background is the sheet's own so scrolled content does not read
   through it; the hairline is a build-introduced separator the drawn
   sheet does not carry, declared here and named to the design desk
   rather than passed silently.
   TWO THINGS THIS DIFFERS FROM, both deliberate. The estate's other
   pinned foot is .ad-pinfoot (capture/styles.ts): it goes FULL BLEED,
   spending its surface's content pad on the inline axis too, so its
   hairline runs edge to edge. That form needs THREE copies of the
   owning container's padding value; this one needs one. The sheet's
   20px lives in .tp-sheet, in a layer this surface does not own, and a
   literal here is already a second hand-maintained copy of it - so the
   count is kept at one and the coupling is named. If the desk wants the
   two feet identical, the cure is a padding token on the shared sheet
   layer, which is a composition-layer touch and not a money one.
   REVERT PROOF (this comment is a claim, and the revert is its test):
   with these lines removed, 40 of the 40 cells at 384x750 clip - ten
   sheet states, two families, two editions - and with them, 80 of 80
   cells at both owner geometries carry both acts whole. That is not
   reasoning: both readings were taken at two listeners standing at the
   same time over the same tree, each one's own served CSS recorded
   beside its numbers, and they are banked with the sprint raise act's
   record under WALK-MONEY-2's B3. */
.mn-sheetfoot {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; inline-size: 100%;
  position: sticky; inset-block-end: 0; z-index: 1;
  background: var(--ui-card);
  border-block-start: 1px solid var(--ui-hairline);
  padding-block: 12px 20px; margin-block-end: -20px;
}
/* THE FOOT AS ONE LINE (MS-3 L1's own drawing): the commit takes the
   room it needs and the dismissal sits beside it, so the pair costs one
   row. At 384x750 the stacked pair put the dismissal below the sheet's
   own scroll and a person met a commit with no visible way out. Wrapping
   is allowed rather than forbidden - a long label in either edition
   drops to the second line and is still whole, which is the failure
   mode a fixed row would turn back into a clip. */
.mn-sheetfoot--row { grid-template-columns: minmax(0, auto) minmax(0, auto); justify-content: space-between; align-items: center; }
.mn-sheetfoot--row .mn-act { inline-size: auto; }
.mn-sheetfoot--row .mn-act--baseline { justify-content: flex-end; }
@media (max-width: 22rem) { .mn-sheetfoot--row { grid-template-columns: minmax(0, 1fr); } }
.mn-splitline { color: var(--ui-muted); }

/* ================= THE AT-BAR CONVERSION (the beauty layer v1) =================
   The design desk's bar, in its own words
   (design-owner/beauty/BEAUTY-LAYER-v1-THE-BAR-AND-THE-SAVED-PAGE-DELTA-20260829):
   photography leads where there are places; DEPTH IS A SURFACE, not a line;
   the DISPLAY head carries the page and section heads step down to quiet
   uppercase labels; ONE RHYTHM; warmth from a card's own gradient with the
   gold staying the seal's; and WORDS, ORDER AND STRUCTURE DO NOT MOVE.

   THIS IS CSS AND NOTHING ELSE. No word, no element, no attribute and no
   order changes on any money surface; every rule below is scoped to
   .mn-surface, which is the four money pages' own root and is not worn by
   the trips room's money band (that band is the room's, and the room's own
   dress is not this row's to move).

   NO COLOUR LITERAL, and that is a floor rather than a preference: the
   owned-primitives census (MR-29) refuses a colour value in a surface
   stylesheet, because a second hand-maintained copy of a token is how two
   surfaces come to disagree. Every value below is DERIVED from the canon
   token layer with color-mix, which is the estate's own idiom for exactly
   this (reading/styles.ts and the plate's print tokens). The bar's line 5
   says no new colour is minted, and none is: these are mixes of the eight
   ground tokens the token source already publishes.

   LINE 1 (photography) DOES NOT REACH THESE PAGES and is not silently
   dropped: a ledger row is an amount and a person, not a place, and the
   estate's self-hosted city photography is keyed by locality. Money's
   warmth is the card's own.

   THE SHORT PAGE (canon G5) IS NOT HERE EITHER. The expense read and the
   settle page are short, and the empty ground beneath them is the shell's
   question, not money's; the desk folded the cure into the shared shell
   rules at 13:35 and a second copy here would be the second channel for one
   fact. It is named rather than duplicated. */
.mn-surface {
  /* THE OUTLINE FORM'S ONE WASH, derived not literal (MR-29). The lift, the
     card gradient and the gold corner glow that stood here are GONE with the
     form they served: the island ruling reconciled the beauty layer with the
     PUBLISHED screen set, whose language is an outline and a wash rather than
     a lift, and the desk's 15:33 re-check names this page's two cards in its
     census. THE OBJECT SURVIVES THE DRESS: its C1 concurrence stands on the
     card being the right object for a ledger band, and is amended only on how
     that object is drawn. */
  --mn-wash: color-mix(in srgb, var(--ui-ink) 3%, transparent);
  --mn-row-rule: color-mix(in srgb, var(--ui-hairline) 55%, transparent);
  gap: 26px;
}
/* LINE 3 IS WITHDRAWN HERE TOO, and this is an EXTENSION beyond what the desk
   censused, said plainly so it can be refused in one line. Its 15:33 re-check
   censused /capture and /trips/money; the trip's own money page, where these
   two heads live, was not in that census. But the ruling it applies states the
   principle generally, "hierarchy by the SIZE STEP, never by case", with the
   published country screen as the receipt (Uzbekistan at 34 over Checklist at
   22, a serif title and not a label). Leaving BALANCES and EXPENSES uppercase
   while Places and Media went back to the title token would be one face
   obeying the ruling and its sibling not.
   SO THE RULE IS REMOVED RATHER THAN OVERRIDDEN: these heads return to the
   class's own title token, and this surface states its heads once. If the desk
   meant the census to be the whole subject, this paragraph is the place to say
   no and the cure is deleting nothing, because there is nothing left to
   delete. */
/* LINE 2, AS THE ISLAND RULING REDREW IT. Each band's rows sit on ONE card,
   so the page reads as two objects rather than as a column of rules; that is
   the OBJECT, and the desk's C1 concurrence stands on it. The DRESS is the
   published language's: an outline and a three per cent wash, no lift and no
   gradient. The rows keep a separator inside the card because a ledger row IS
   a row and a person reads down it, but it softens to a quiet rule: the
   hairline was carrying the whole structure and now carries only the beat.
   NO GOLD HERE. A corner glow stood on this card and went with the lift; gold
   is the seal's and the anchor's, and a card ground is neither. */
.mn-surface .tp-list {
  background: var(--mn-wash);
  border-radius: 14px;
  padding-inline: 14px;
  /* THE CARD BREATHES AT ITS OWN EDGES. Without this the first and last rows
     hug the radius and the card reads as a clipped panel rather than as a
     surface the rows sit on; the rows keep their own padding, so this is the
     card's margin and not a second copy of the row's. */
  padding-block: 6px;
  box-shadow: inset 0 0 0 1px var(--ui-hairline);
}
.mn-surface .tp-list > .tp-row,
.mn-surface .tp-list > .tp-fact { border-block-end-color: var(--mn-row-rule); }
.mn-surface .tp-list > .tp-row:last-child,
.mn-surface .tp-list > .tp-fact:last-child { border-block-end: none; }
/* THE DAY LABEL sits inside the card as its own quiet band rather than as a
   row with a rule under it: it names the rows beneath it and is not one of
   them. */
.mn-surface .tp-list > .tp-group { border-block-end: none; padding-block: 14px 2px; color: var(--ui-muted); }
.mn-surface .tp-list > .tp-group:first-child { padding-block-start: 6px; }
/* LINE 4, one rhythm: 6 below the head, 10 between a band's head and its
   card, 26 between segments (the room's own gap above). */
.mn-surface .tp-head { gap: 6px; }
.mn-surface .tp-band { gap: 10px; }
/* THE ACROSS-TRIPS PAGE stacks its lists directly under the room with no
   band between them, so the card rule reaches them by the room's own scope
   rather than by a band's; nothing else is needed for them to read as the
   same two objects the trip's page shows. */


/* THE SEGMENTS: their own rhythm, and a hairline only BETWEEN them - the
   same adjacency form the Add face's two halves use, so a separator can
   never outlive the thing it separates. */
.sv-seg { margin-block-start: 26px; display: grid; gap: 10px; }
.sv-seg + .sv-seg { padding-block-start: 22px; border-block-start: 1px solid var(--ui-hairline); }

/* THE LIST AND ITS ROWS. The list stretches to the column so separators
   and the trailing chevron reach the margin rather than stopping at the
   widest row, which is what a content-sized list does inside a grid
   parent (the design desk caught it at its own eye and cured it there). */
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; inline-size: 100%; }
.sv-row { display: flex; align-items: center; min-block-size: 48px; inline-size: 100%; }
.sv-row + .sv-row { border-block-start: 1px solid var(--ui-hairline); }
.sv-row-main { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
/* The name is clamped to its own line by a per-element ellipsis, never a
   blanket overflow-wrap over the subtree: display text broken mid-word by
   a global break rule is a defect class this estate has already paid for. */
.sv-row-main > .ui-type-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row-meta { color: var(--ui-muted); }

/* A DOOR ROW: the row IS the door (catalogue row 6 - title ink, trailing
   chevron), and its own 48px minimum holds the tap floor on the block
   axis whether or not the row around it is taller. */
.sv-door { display: flex; align-items: center; gap: 8px; flex: 1; min-block-size: 48px; color: inherit; text-decoration: none; }
.sv-door .sv-chev { margin-inline-start: auto; color: var(--ui-muted); flex: none; inline-size: 20px; block-size: 20px; }
/* A DRAWN ARROW DOES NOT MIRROR ITSELF. Logical properties place the
   chevron at the row's end edge in both editions; the glyph's own
   direction is a picture and is turned here. */
[dir="rtl"] .sv-chev { transform: scaleX(-1); }
.sv-door:focus-visible { outline: 2px solid var(--anchor-ink); outline-offset: -2px; }

/* A DOOR THAT CANNOT OPEN WEARS THE FAMILY'S REDUCED PRESENCE, and the
   hook is the composition door pass's OWN output rather than a second
   opinion about the same state: the pass writes data-inert on every door
   whose dispatch row opens nowhere, so this dress cannot disagree with
   the refusal it dresses. The pass supplies the behaviour (no href, no
   tab stop, aria-disabled, the subtree inert); this supplies the ink, so
   that a disabled row READS disabled. */
.sv-door[data-inert] { cursor: default; }
.sv-door[data-inert] .ui-type-body,
.sv-door[data-inert] .sv-chev { color: var(--ui-muted); }

/* THE COLD SHELF'S ONE SENTENCE: a fact in the meta rank, held inside a
   readable measure, with no act and no door under it. */
.sv-cold { color: var(--ui-muted); max-inline-size: 52ch; margin-block-start: 18px; }

/* THE ADD BAND'S EDGE HAS NO SURFACE LEFT TO SIT ON. Its rule described one
   quiet door row at the foot of the Add face's Recent-saves band; R2 of the
   whole-app coherence pass took that band and its edge off that face, and no
   other surface in this tree wears sv-edge. The stretch rule that reached
   into .ad-home goes with it: a shelf rule scoped to another surface's root
   is exactly the cross-surface reach that outlives its subject. */

/* ===== BEAUTY LAYER v2, THE SAVED SHELF (m54-design-owner-15, 29 Aug): THE RECONCILED BAR =====
   Replaces BEAUTY-LAYER-v1-collections.css at the same seat (the whole file, not an append).
   The reference of record (R9 as scoped: the published Orient and globe screens) governs the
   FURNITURE: a serif display head on the ground, serif section heads at the title rank made
   quiet by the size step and never by uppercase, hairline rows, names in ink, mono readouts,
   gold as a point of light, no drop shadow, no gradient, no type over a picture.
   Photography is the ROW's, never the page's: a saved place carries its own city frame as the
   row's leading cell; the name sits beside it in ink at the place-name rank the sheets signed.
   Same DOM, same words, same order as v1 (the name/locality split and the --cover var stay).
   TOKENS ONLY: no literal colour anywhere, so the paper edition renders from the same rules. */
.co-screen .fs-home-content{padding:12px 16px 28px;gap:0}
.sv-shelf{display:grid;gap:28px;margin-block-start:6px}
.co-back{color:var(--ui-muted)}
.fs-headrow .ui-type-display{font-size:34px;line-height:40px}
.sv-seg{margin-block-start:0;gap:8px}
.sv-seg + .sv-seg{padding-block-start:0;border-block-start:0}
/* SECTION HEADS: the reference's serif at the title rank (its Recent readings), in ink; the
   display head at 34 above them is the whole hierarchy, as the published set does it. */
.th-head .ui-type-title{font:var(--ui-type-title);text-transform:none;color:var(--ui-ink)}
/* SAVED PLACES: photo ROWS, one column, a hairline beneath each (the reference's row grammar);
   the photograph is the row's leading cell, 56 square at 10 radius, the estate's own frame. */
[data-surface=shelf-places] .sv-list{display:grid;grid-template-columns:none;gap:0}
[data-surface=shelf-places] .sv-row{display:flex;align-items:center;gap:14px;position:static;min-block-size:64px;aspect-ratio:auto;padding:10px 0;border-radius:0;overflow:visible;background:none;box-shadow:none;border-block-end:1px solid var(--ui-hairline)}
[data-surface=shelf-places] .sv-row::after{content:none}
/* THE LEADING CELL IS A REAL ELEMENT (the Act-2 F1 cure): the family
   stand-in is drawn inside it and the photograph paints OVER the glyph
   from the cell's own ::after, so an absent, failed or 404 photograph
   leaves row 16 showing instead of a bare box. The cell keeps the drawn
   geometry to the pixel: 56 square, 10 radius, the card ground and the
   inset hairline. */
[data-surface=shelf-places] .sv-row-plate{position:relative;flex:none;inline-size:56px;block-size:56px;border-radius:10px;overflow:hidden;background:var(--ui-card);box-shadow:inset 0 0 0 1px var(--ui-hairline)}
[data-surface=shelf-places] .sv-row-plate::after{content:"";position:absolute;inset:0;background:var(--cover,none) center/cover no-repeat}
[data-surface=shelf-places] .sv-row-main{position:static;inset:auto;z-index:auto;display:grid;gap:2px;min-inline-size:0}
[data-surface=shelf-places] .sv-row-main > .ui-type-body{font:var(--ui-type-place-name);color:var(--ui-ink);text-shadow:none;white-space:normal;overflow:visible}
[data-surface=shelf-places] .sv-row-main > .sv-row-where{font:var(--ui-type-meta);color:var(--ui-muted)}
/* LISTS: hairline door rows, the name at body rank in ink, the chevron muted (the globe sheet's rows) */
[data-surface=shelf-lists] .sv-list{display:grid;gap:0}
[data-surface=shelf-lists] .sv-row{min-block-size:0;border-block-end:1px solid var(--ui-hairline)}
[data-surface=shelf-lists] .sv-door{min-block-size:56px;padding:14px 0;border-radius:0;gap:12px;background:none;box-shadow:none}
[data-surface=shelf-lists] .sv-door .ui-type-body{font:var(--ui-type-body)}
[data-surface=shelf-lists] .sv-door .sv-chev{inline-size:22px;block-size:22px;color:var(--ui-muted)}
/* THE BAR keeps its seat on the ground with a hairline of light (a token, both editions) */
.co-screen .fs-bar{background:var(--ui-ground);border-block-start:1px solid var(--ui-hairline)}
/* THE SHORT PAGE (canon G5) and THE OWNER-SERVE COLLAPSE cure, carried from v1 unchanged */
.co-page{min-block-size:100dvh}
.co-screen .fs-home{min-block-size:100dvh;margin-block-end:0}
.co-page > .co-screen{grid-row:2}


/* THE COMMENT ROWS: the name at meta rank over the words at body rank,
   one idea per row, the conversation reading DOWN into the compose seat.
   They are not list rows and do not wear the row grammar: a comment is
   two ranks of text in one block, and dressing it as a row would be one
   grammar borrowed for a meaning it does not carry. */
.lp-comment { display: grid; gap: 2px; padding-block: 10px; }
.lp-comment + .lp-comment { border-block-start: 1px solid var(--ui-hairline); }
.lp-comment-name { color: var(--ui-muted); }

/* THE COMPOSE SEAT: the intake bar's own form at comment grain, so a
   field that takes a person's words looks the same wherever they type. */
.lp-compose { display: flex; gap: 8px; align-items: center; margin-block-start: 12px; }
.lp-compose .ad-field { flex: 1; min-inline-size: 0; }
/* THE SUBMIT'S DRESS, AND IT IS A SECOND COPY OF FOUR DECLARATIONS, SAID
   PLAINLY RATHER THAN LEFT FOR A READER TO FIND.
   The seat wears the intake bar's own family (the sheet's words: "the
   intake-bar family's form at comment grain"), and the FIELD's dress
   reaches it because .ad-field is written unscoped one file over. THE
   FILL's is not: .ad-home .ad-fill and .ad-home .ad-fill--dead are
   scoped to the Add tab's own root, so on this page the submit arrived
   with NO dress at all - a bare browser button beside a dressed field.
   An adversarial reader met it and was right to refuse it.
   WHY THIS IS A COPY AND NOT AN UNSCOPING, which would have been the
   shelf's own move one file over: unscoping that family reaches two more
   rules whose blast radius is another surface's render, not this one's -
   .ad-home .ad-fill-mark, which the capture SHEET already emits outside
   that root and which would newly paint there, and .ad-home:lang(ar)
   .ad-fill .ui-icon, the Arabic mirror. Changing what another surface
   paints is not a face act's to take on its own initiative.
   SO THE COPY IS SCOPED TO THIS SEAT, carries the Arabic mirror WITH it
   so this edition is not half-dressed, and is a DECLARED DEBT: when the
   capture family next touches its fill dress it unscopes it, and these
   rules are deleted rather than maintained. */
.lp-compose .ad-fill {
  display: grid; place-items: center; inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  flex: none; border: none; border-radius: 50%; cursor: pointer;
  background: var(--ui-ink); color: var(--ui-ground);
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.lp-compose .ad-fill:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.lp-compose .ad-fill .ui-icon { inline-size: 20px; block-size: 20px; }
.lp-compose .ad-fill--dead { background: none; border: 1px solid var(--ui-hairline); color: var(--ui-muted); cursor: default; }
.lp-compose .ad-fill--dead:active { transform: none; }
/* A DRAWN ARROW DOES NOT MIRROR ITSELF, and the seat ships in both
   editions, so the glyph is turned here exactly as the Add tab turns its
   own. Without this the Arabic seat pointed the wrong way. */
:lang(ar) .lp-compose .ad-fill .ui-icon { transform: scaleX(-1); }

/* THE CLEARING ACT TRAILS THE WHOLE PAGE after its own hairline. The
   verb KEEPS ITS OWN WEIGHT - body rank, not demoted to meta - and
   carries the destructive register's ink rather than the app's inviting
   lead-act pill. Its 48px minimum holds the tap floor on the block axis
   and its own inline minimum holds it on the other, because a tap target
   is a target in two dimensions (the settings walk's B1 measurement,
   which found a bare verb one pixel short on the axis nobody checks). */
.lp-clear { margin-block-start: 34px; padding-block-start: 22px; border-block-start: 1px solid var(--ui-hairline); display: flex; }
.lp-clear-act {
  display: inline-flex; align-items: center; justify-content: flex-start;
  background: none; border: none; padding: 0;
  min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min);
  color: var(--ui-destructive); font: inherit; cursor: pointer; text-align: start;
}
.lp-clear-act:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }

/* THE CONFIRM, inside the family's own sheet panel. The panel, the scrim
   and the frame are the shared primitive's; what is here is the spacing
   between this confirm's three parts and the dress of its two acts. */
.tp-sheet[data-surface="list-clear-confirm"] { gap: 18px; padding-block-end: 24px; }
.lp-confirm-head { margin: 0; }
.lp-confirm-line { margin: 0; max-inline-size: 52ch; }
/* THE WAY BACK IS THE SHEET'S ONE FILL and it LEADS: a reflex tap lands
   on safety. The ink pair is the estate's landed lead fill (ink ground,
   ground-colour label); the geometry is the drawing's, a full-width seat
   at the sheet's own measure rather than a pill, because a sheet this
   narrow has one column and a centred pill inside it invents a second. */
.lp-fill {
  display: grid; place-items: center; inline-size: 100%;
  min-block-size: var(--ui-tap-min); padding: 10px 22px;
  border: none; border-radius: 12px;
  background: var(--ui-ink); color: var(--ui-ground); cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.lp-fill:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.lp-fill:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
/* THE DESTRUCTIVE VERB BELOW A HAIRLINE, bare, text level, never a fill
   and never beside the safe act on one row. */
.lp-confirm-verb { border-block-start: 1px solid var(--ui-hairline); padding-block-start: 18px; display: flex; justify-content: center; }
.lp-confirm-verb .lp-clear-act { justify-content: center; }

/* THE REFUSED DRESS, and the hook is the composition door pass's OWN
   output rather than a second opinion about the same state: the pass
   writes data-inert on every control whose dispatch row opens nowhere,
   so this cannot disagree with the refusal it dresses. The pass supplies
   the behaviour; this supplies the ink, so a refused control READS
   refused rather than only announcing it - which is the settings walk's
   B1 finding, where 28 of 28 photographed comparisons were byte
   identical because the act shipped the mark and not the dress. */
.lp-clear-act[data-inert="not-wired"],
.lp-fill[data-inert="not-wired"],
.lp-compose[data-inert="not-wired"] { cursor: default; }
.lp-clear-act[data-inert="not-wired"] { color: var(--ui-muted); }
.lp-fill[data-inert="not-wired"] { opacity: 0.55; }
.lp-fill[data-inert="not-wired"]:active { transform: none; }
.lp-compose[data-inert="not-wired"] .ad-field { opacity: 0.55; }
.lp-compose[data-inert="not-wired"] .ad-field::placeholder { color: var(--ui-muted); }


:root {
  --pl-scrim-ink: color-mix(in srgb, black 45%, transparent);
  --pl-sheet-shadow: color-mix(in srgb, black 35%, transparent);
  --pl-pressed-ink: color-mix(in srgb, var(--ui-ink) 72%, var(--ui-gold));
  --pl-pressed-lift: color-mix(in srgb, var(--ui-ground) 55%, var(--ui-card));
}
[data-ground="paper"] {
  --pl-scrim-ink: color-mix(in srgb, black 30%, transparent);
  --pl-sheet-shadow: color-mix(in srgb, black 16%, transparent);
  --pl-pressed-ink: color-mix(in srgb, var(--ui-ink) 72%, var(--ui-gold));
  --pl-pressed-lift: color-mix(in srgb, var(--ui-ground) 55%, var(--ui-hairline));
}

/* The component carries its own box-sizing reset, so it composes the same
   on a surface that has one and a surface that has not: without it a
   declared 44px tap floor renders taller than it declares, because the
   primitives layer publishes no reset. */
.pl-row, .pl-row *, .pl-sheet, .pl-sheet *, .pl-scrim { box-sizing: border-box; }

/* THE ICON ACT (02a R1: a bare 44px icon-act, muted ink, 20px glyph).
   The primitives layer publishes the TYPE roles but not the CONTROL-role
   dresses, so this rule is published here, with the component's own
   prefix, until that lift lands. Ledger class 194 rules the shape of
   that interim: a component may not be the only place a SHARED class
   name is defined, so the name is this component's own - a later room
   that copies the rule keeps its dress, where a later room that used a
   shared name defined only here would silently lose it. */
.pl-icon-act {
  display: grid; place-items: center;
  inline-size: var(--ui-tap-min); block-size: var(--ui-tap-min);
  border: none; background: none; padding: 0; color: var(--ui-muted); cursor: pointer; flex: none;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-icon-act:active { color: var(--pl-pressed-ink); transform: scale(0.97); transition-duration: var(--ui-press-in); }
.pl-icon-act svg { inline-size: 20px; block-size: 20px; }
.pl-icon-act[aria-pressed="true"] { color: var(--ui-ink); }

/* the shared row: an in-app door with its own save act beside it */
.pl-row { display: flex; gap: 8px; align-items: center; inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.pl-row:last-child { border-block-end: none; }
/* A consumer whose drawing rules ALL OR NONE and chooses none asks for the
   flush row through renderPlaceRow's own option; the rule lives here because
   this module is the one that dresses this row. */
.pl-row--flush { border-block-end: none; }
.pl-row .pl-icon-act { margin-inline-end: -12px; }
.pl-row-door {
  display: flex; flex: 1; align-items: center; min-block-size: var(--ui-tap-min);
  padding-block: 6px; padding-inline: 0; min-inline-size: 0;
  border: none; background: none; color: inherit; text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-row-door:active { background: var(--pl-pressed-lift); transform: scale(0.98); transition-duration: var(--ui-press-in); }
.pl-row-main { display: grid; gap: 1px; justify-items: start; flex: 1; min-inline-size: 0; }
.pl-name { font: var(--ui-type-body); color: var(--ui-ink); }
/* the door row: muted ink, its readout pinned to the trailing edge, the
   full column wide - one dress for every in-app door in the family */
.pl-row--door { color: var(--ui-muted); }
.pl-door-face { justify-content: space-between; gap: 8px; }
.pl-door-face:active { background: var(--pl-pressed-lift); }
.pl-door-label { font: var(--ui-type-body); flex: 1; }
.pl-row-readout { flex: none; }
.pl-row-glyph { align-self: center; display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; }
.pl-row-glyph svg { inline-size: 18px; block-size: 18px; }
.pl-scent { text-align: start; }
.pl-nowrap { white-space: nowrap; }

/* the shared sheet: the family's one sheet grammar */
/* The dialog itself: a full-surface layer holding the backdrop and the
   card. It carries no ink of its own - the scrim is the ink. */
.pl-sheet-layer { position: absolute; inset: 0; z-index: 2; }
.pl-scrim {
  position: absolute; inset: 0; z-index: 2; display: block;
  border: none; padding: 0; cursor: pointer;
  background: var(--pl-scrim-ink);
  transition: opacity var(--ui-motion-scrim, 160ms) linear;
}
/* A SHEET THAT OUTGROWS ITS SURFACE MUST STILL BE READABLE. It is
   bottom-anchored inside a surface that clips its overflow, so a place
   with enough standing facts - or simply a denser translated edition
   with both exits - would grow past the top of the screen and take its
   own head and first facts with it, unreachable. It gets a ceiling and
   its own scroller. */
.pl-sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  max-block-size: 88%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ui-card);
  border-start-start-radius: 16px; border-start-end-radius: 16px;
  border: 1px solid var(--ui-hairline); border-block-end: none;
  padding-block: 8px 20px; padding-inline: 20px;
  display: grid; gap: 0; justify-items: start;
  box-shadow: 0 -8px 32px var(--pl-sheet-shadow);
  transition: transform var(--ui-motion-rise, 280ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pl-grab { inline-size: 36px; block-size: 4px; border-radius: 2px; margin-block: 0 10px; margin-inline: auto; background: var(--ui-hairline); justify-self: center; }
.pl-head { display: grid; gap: 2px; justify-items: start; inline-size: 100%; padding-block-end: 10px; }
.pl-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; }
.pl-headrow .ui-type-title { flex: 1; }
.pl-headrow .pl-icon-act { margin-inline-end: -12px; }
.pl-facts { display: grid; gap: 0; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.pl-fact { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; inline-size: 100%; padding-block: 10px; border-block-start: 1px solid var(--ui-hairline); }
.pl-fact-text { font: var(--ui-type-body); color: var(--ui-ink); }
.pl-exits { display: grid; gap: 0; inline-size: 100%; justify-items: start; border-block-start: 1px solid var(--ui-hairline); padding-block: 4px 2px; }
.pl-ext {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0; cursor: pointer;
  /* BOTH axes. This declared its block floor and not its inline one,
     and every exit the demo world rendered was long enough that it
     never showed - the one short exit in the family, Call, was gated
     on a real number and so had never been drawn at all. The walk's
     evidence frame drew it and it measured 43px wide on both engines
     at both geometries: one pixel under, on the only control narrow
     enough to be. A floor that only holds for long labels is not a
     floor. */
  min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min);
  color: var(--ui-muted); font: var(--ui-type-label);
  text-decoration: underline dotted; text-underline-offset: 3px;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-ext:active { color: var(--pl-pressed-ink); transform: scale(0.97); transition-duration: var(--ui-press-in); }
.pl-out-mark { display: inline-grid; place-items: center; flex: none; }
.pl-out-mark svg { inline-size: 12px; block-size: 12px; }
/* R7.3: what did not land is said UNDER the control, not beside it, so
   the eye reads the act and then its answer rather than a row of two
   competing sentences. */
.pl-acts { display: grid; gap: 2px; justify-items: start; inline-size: 100%; padding-block-start: 6px; }
.pl-base-act {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--ui-tap-min);
  border: none; background: none; padding-block: 10px; padding-inline: 2px;
  color: var(--ui-ink); font: var(--ui-type-label); text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.pl-base-act:active { color: var(--pl-pressed-ink); transform: scale(0.97); transition-duration: var(--ui-press-in); }
.pl-act-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ui-gold); flex: none; }
/* R6.2: the family's ONE in-flight mark - the act's own gold dot,
   breathing. No spinner exists in this component and none may. */
.pl-act-dot[data-breathing="true"] { animation: pl-breathe var(--ui-motion-breathe, 1200ms) linear infinite; }
@keyframes pl-breathe { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.pl-base-act[aria-busy="true"] { cursor: default; }
/* R7.3: what did not land, said under the control in the act's own
   words, never a dialog and never the word error. */
/* The same ink step as the reading's own failed-commit line, for the
   same reason and by the same rule: ambient state is muted, the
   reader's own act failing is ink. See the note there. */
.pl-could-not { margin: 0; color: var(--ui-ink); }

/* Reduced motion removes the family transform and KEEPS the pressed
   dress: R4a is state, not motion, so a person who turns motion off
   still sees what they pressed. */
/* M4/M5: every computed duration in this component goes to zero, not
   the two it happened to name. The pressed dress stays - R4a is state,
   not motion - and R6.2's mark becomes static rather than absent, so
   someone who turned motion off can still see what is in flight. */
@media (prefers-reduced-motion: reduce) {
  .pl-row, .pl-row *, .pl-sheet, .pl-sheet *, .pl-scrim {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .pl-icon-act:active, .pl-row-door:active, .pl-ext:active, .pl-base-act:active { transform: none; }
  .pl-act-dot[data-breathing="true"] { opacity: 0.7; }
}

/* the sheet keeps a reading column above the phone; the rule belongs to
   the component, so no consuming room reaches into its class */
@media (min-width: 700px) {
  .pl-sheet { max-inline-size: 520px; margin-inline: auto; }
}


.ak-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 12px; }
.ak-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ak-head-line { margin: 0; overflow-wrap: anywhere; }
.ak-scope { margin: 0; color: var(--ui-muted); }
.ak-answer, .ak-none { margin: 0; }
.ak-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ak-bandhead { margin: 0; color: var(--ui-ink); }
/* THE ONE ACT'S DRESS, in this family's own classes rather than another
   family's: the act grammars in this tree are family-local by construction
   (trips and capture each hold their own), so the ask holds its own too. A
   baseline act, full-width tap target, no fill, the ink doing the work. */
.ak-acts { display: grid; grid-template-columns: minmax(0, 1fr); }
.ak-base-act {
  min-block-size: var(--ui-tap-min); padding-inline: 0; border: none; background: none;
  color: var(--ui-gold); font: var(--ui-type-label); text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.ak-base-act:active { transform: scale(0.98); transition-duration: var(--ui-press-in); }
.ak-rows { list-style: none; margin: 0; padding: 4px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: color-mix(in srgb, var(--ui-ink) 3%, transparent); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ui-hairline); }
/* THE DISTANCE READOUT'S DRESS, and it is scoped to THIS face rather than
   written into the shared row's own class. The shared class already pins the
   readout to the trailing edge (the name column takes the free space and this
   takes none, so the unit column self-aligns down the list without a grid);
   what is added here is the rank this desk ruled, muted ink and a gap off the
   name. Written scoped because the shared sheet is composed into the orient
   reading's tracked artifact, and a family's dress should not move another
   family's bytes to buy itself a colour. */
.ak-rows .pl-row-readout { color: var(--ui-muted); margin-inline-start: 8px; }
.ak-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ak-door-row { display: grid; grid-template-columns: minmax(0, 1fr); border-block-end: 1px solid var(--ui-hairline); }
.ak-door { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-block-size: var(--ui-tap-min); padding-block: 6px; text-decoration: none; color: inherit; }
.ak-door-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-inline-size: 0; }
.ak-door-title { display: block; }
.ak-door-members { display: block; color: var(--ui-muted); }
.ak-chevron { display: inline-grid; place-items: center; color: var(--ui-muted); flex: none; inline-size: 16px; block-size: 16px; }
.ak-chevron svg { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .ak-chevron svg { transform: scaleX(-1); }
.ak-provenance { margin: 0; color: var(--ui-muted); }

/* ===== BEAUTY LAYER v2, THE LIST PAGE (m54-design-owner-15, 29 Aug): THE RECONCILED BAR =====
   Replaces BEAUTY-LAYER-v1-list-page.css at the same seat (the whole file). Same bar as the
   Saved shelf's v2: the reference's furniture; photography as the row's leading cell only.
   THE HEAD IS THE REFERENCE'S HEAD: the back label above, the serif display on the ground;
   the cover photograph is retired (no type over a picture anywhere in the published set).
   Members are hairline rows (no chips, no initial rings, no photographs of people); comments
   are hairline rows; the compose row is a field in the reference's outlined form, not a pill.
   Same DOM, same words, same order. Tokens only, both editions. */
.co-screen .fs-home-content{padding:12px 16px 28px;gap:0}
.co-back{color:var(--ui-muted)}
.lp-page{display:grid;gap:28px;margin-block-start:6px}
.lp-page .fs-headrow{position:static;aspect-ratio:auto;border-radius:0;overflow:visible;display:flex;align-items:center;padding:0;background:none;box-shadow:none}
.lp-page .fs-headrow::after{content:none}
.lp-page .fs-headrow .ui-type-display{position:static;color:var(--ui-ink);font-size:34px;line-height:40px;text-shadow:none;margin:0}
.sv-seg{margin-block-start:0;gap:8px}
.sv-seg + .sv-seg{padding-block-start:0;border-block-start:0}
.th-head .ui-type-title{font:var(--ui-type-title);text-transform:none;color:var(--ui-ink)}
/* THE PLACES: photo rows, hairline beneath each, no surface */
[data-surface=list-items] .sv-list{display:grid;gap:0}
/* THE SPARE HAIRLINE (the design desk's Act-2 F2, LOW): this rule gave
   EVERY item row a trailing rule, so a one-item list drew a rule under
   its only row and the clear block drew its own 46px below - two
   full-width rules bounding a void that reads as a second item that
   failed to load. The walk measured them at 260 and 316.
   THE CURE IS THE FAMILY'S OWN GRAMMAR, already declared one function up
   and stated there in terms: a hairline only BETWEEN rows, "so a
   separator can never outlive the thing it separates". Dropping the
   trailing rule restores that adjacency form (the base sheet's adjacent-
   sibling rule supplies the separator), leaves the clear block's own rule as
   the single boundary of the destructive zone, and closes a second
   defect the override carried unnoticed: between two rows BOTH rules
   applied, so an adjacent pair was separated by two hairlines rather
   than one. */
[data-surface=list-items] .sv-row{display:flex;align-items:center;gap:14px;min-block-size:64px;padding:10px 0;border-radius:0;background:none;box-shadow:none}
[data-surface=list-items] .sv-row-plate{position:relative;flex:none;inline-size:56px;block-size:56px;border-radius:10px;overflow:hidden;background:var(--ui-card);box-shadow:inset 0 0 0 1px var(--ui-hairline)}
[data-surface=list-items] .sv-row-plate::after{content:"";position:absolute;inset:0;background:var(--cover,none) center/cover no-repeat}
[data-surface=list-items] .sv-row-main{display:grid;gap:2px;min-inline-size:0}
[data-surface=list-items] .sv-row-main > .ui-type-body{font:var(--ui-type-place-name);white-space:normal;overflow:visible}
[data-surface=list-items] .sv-row-main > .sv-row-where{font:var(--ui-type-meta);color:var(--ui-muted)}
/* MEMBERS: hairline rows, the name at body rank in ink */
[data-surface=list-members] .sv-list{display:grid;gap:0}
[data-surface=list-members] .sv-row{inline-size:auto;min-block-size:48px;gap:12px;padding:12px 0;border-radius:0;background:none;box-shadow:none;border-block-end:1px solid var(--ui-hairline)}
/* NO SUPPRESSOR IS NEEDED FOR THE MEMBER ROWS ANY MORE. They were
   suppressed because the cell was a pseudo-element every .sv-row grew;
   the cell is now an element that only a saved place's row emits, so a
   member row simply has none. The rule retires with the mechanism it
   worked around rather than staying as dress reaching nothing. */
/* COMMENTS: hairline rows (the name at meta, the words at body); the compose field outlined at 12 */
.lp-comment{display:grid;gap:3px;padding:12px 0;border-radius:0;background:none;box-shadow:none;border-block-end:1px solid var(--ui-hairline)}
.lp-comment + .lp-comment{margin-block-start:0}
.lp-compose{margin-block-start:12px}
/* the compose field in the reference's field form (the served page gives this input no field style
   outside .ad-intake, so the browser's disabled-input default was showing through v1's pill) */
.lp-compose .ad-field{padding:12px 16px;min-block-size:var(--ui-tap-min);border:1px solid var(--ui-hairline);border-radius:12px;background:transparent;color:inherit;font:var(--ui-type-body)}
.lp-compose .ad-field::placeholder{color:var(--ui-muted)}
.lp-clear{margin-block-start:28px;padding-block-start:18px;border-block-start:1px solid var(--ui-hairline)}
.co-screen .fs-bar{background:var(--ui-ground);border-block-start:1px solid var(--ui-hairline)}
/* THE SHORT PAGE (canon G5) and THE OWNER-SERVE COLLAPSE cure, carried from v1 unchanged */
.co-page{min-block-size:100dvh}
.co-screen .fs-home{min-block-size:100dvh;margin-block-end:0}
.co-page > .co-screen{grid-row:2}

.rc-page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: 0; }
.rc-name { overflow-wrap: anywhere; }
.rc-locality { color: var(--ui-muted); margin-block-start: 4px; }
/* THE KEEP'S OWN LINE, the one fact this page adds. It sits under the
   subject with the quiet of a meta line, because it is a fact about the
   keep and never a claim about the place. */
.rc-keep { color: var(--ui-muted); margin-block-start: 14px; }
.rc-lists { list-style: none; margin: 18px 0 0; padding: 0; inline-size: 100%; }
/* THE BASELINE ACT'S OWN DRESS (02a R1), values taken from the landed
   .pl-base-act rather than re-decided: a gold dot, a label, no container,
   and the tap minimum on the control itself. */
.rc-acts { display: grid; gap: 2px; margin-block-start: 22px; justify-items: start; inline-size: 100%; }
.rc-act {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--ui-tap-min);
  border: none; background: none; padding-block: 10px; padding-inline: 2px;
  color: var(--ui-ink); font: var(--ui-type-label); text-align: start; cursor: pointer;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.rc-act:active { transform: scale(0.97); transition-duration: var(--ui-press-in); }
.rc-act-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ui-gold); flex: none; }
.rc-absent-line { color: var(--ui-muted); margin-block-start: 10px; max-inline-size: 52ch; }
/* THE DESTRUCTIVE ACT AND ITS CONFIRM wear the collections family's own
   landed dress (.lp-clear, .lp-clear-act, .lp-fill, .lp-confirm-*), which the
   composed stylesheet already carries: one dress per role, and a confirm that
   looked different one grain down would read as a different kind of thing.
   What is added here is this sheet's own spacing. */
.rc-remove { inline-size: 100%; }
.tp-sheet[data-surface="record-remove-confirm"] { gap: 18px; padding-block-end: 24px; }

/* THE SURFACE'S OWN GUTTER, and it is the estate's own number rather
   than a new one. The composition supplies a pushed surface NO padding:
   body.co-page and main.co-screen both compute to zero inline padding on
   the served build, measured at the served bytes, and every other served
   surface stands at 16px because its own frame supplies it (the orient
   home, the settings rooms, explore, passport and trips all measure a
   16px inset at 412). This surface supplied none and rendered flush to
   both edges of the phone: the head, the prayer rows and the two meta
   lines all sat at x=0. The design of record frames this screen in the
   estate's shared content box (gen_compass.py builds fs-home >
   fs-home-content by hand), whose padding is 16px with a 24px foot, so
   the geometry below IS the drawing's and not an invention.
   SCOPED SO IT CANNOT DOUBLE. If the composition later seats this
   surface inside that shared frame - which is how the settings rooms
   carry their back control at the same 16px - the frame's padding is the
   one that should win, so the surface stands down inside it. That is a
   NARROWING of a published class within this surface's own scope, never
   a definition of one. */
.cx-surface { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; padding: 16px; padding-block-end: 24px; }
.fs-home-content > .cx-surface { padding: 0; }
.cx-headrow { display: flex; align-items: baseline; }
.cx-title { margin: 0; }
.cx-dialwrap { display: grid; justify-items: center; gap: 9px; margin-block-start: 14px; }
/* GEOGRAPHY IS PHYSICAL: the drawing is computed from numbers and is the
   same bytes in both editions; the words around it mirror because they
   are text. The floor in compass.test.ts is what proves it. */
.cx-dial { inline-size: min(46vw, 176px); block-size: min(46vw, 176px); }
.cx-fact { margin: 0; color: var(--ui-ink); }
.cx-fact .cx-num { font: var(--ui-type-readout); }
.cx-state { margin: 0; color: var(--ui-ink); text-align: center; max-inline-size: 34ch; }
.cx-times { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.cx-time { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 40px; border-block-end: 1px solid var(--ui-hairline); color: var(--ui-muted); }
.cx-time:last-child { border-block-end: none; }
.cx-time--next { color: var(--ui-ink); font-weight: 600; }
.cx-time-val { font: var(--ui-type-readout); }
.cx-time--next .cx-time-val { font-weight: 600; }
.cx-meta { margin-block-start: 10px; display: grid; gap: 5px; color: var(--ui-muted); }
.cx-meta p { margin: 0; }
.cx-lede { margin-block-start: 16px; color: var(--ui-muted); max-inline-size: 52ch; }
.cx-act { display: flex; align-items: center; justify-content: center; min-block-size: 52px; margin-block-start: 18px; padding-inline: 16px; border: none; border-radius: 12px; background: var(--ui-ink); color: var(--ui-ground); font: inherit; }
/* THE LEAD ACT'S OFF READING, which this surface did not have and which
   its own dispatch row asked for in writing. compass.locate-me is
   declared PENDING, and that row's stated reason for existing is
   "instead of leaving a button that looks pressable and does nothing";
   the composition duly makes the control inert, disabled and marked, and
   then the dress drew it as a full ink mass anyway. Captions are retired
   estate-wide, so a door now says it IN ITS DRESS or it does not say it
   at all, and this one did not.

   THE SIGNED FILL IS NOT TOUCHED. Sheet C8 signs the S3 act "in the
   estate's ink fill" and that is exactly what the rule above still
   draws for the act that can act. What is added is the reading for the
   act that CANNOT, and it is the design estate's own published answer to
   that situation rather than a new one: the design of record steps a
   fill down to no fill, a hairline ring and muted ink whenever it cannot
   be pressed (its .fs-fill[aria-disabled="true"] rule), which is the one
   refusal form this family already has.

   KEYED ON THE COMPOSITION'S OWN MARKING, not on a class this layer
   adds, and SCOPED TO THIS SURFACE'S OWN CLASS rather than an ancestor:
   both are the settings rooms' discipline at their own dead dress, and
   an estate-wide rule for every refused fill is the round's to place,
   not this refinement's. */
.cx-act[data-inert="not-wired"] { background: none; border: 1px solid var(--ui-hairline); color: var(--ui-muted); cursor: default; }
.cx-door { display: flex; align-items: center; gap: 8px; min-block-size: 48px; margin-block-start: 18px; border-block-start: 1px solid var(--ui-hairline); color: inherit; text-decoration: none; }
.cx-door .cx-door-glyph { display: inline-flex; margin-inline-start: auto; }


/* ==================================================================== *
 * THE ADMISSION GATE - the app's first screen in every world.           *
 * The gate renders INSTEAD of the app: no bar, no tabs, no chrome       *
 * naming rooms a person cannot enter yet (ruling section 1; contract    *
 * 11.1). The composed ground stands behind it, plain and arc-free.      *
 * ==================================================================== */
.sg-gate {
  /* The drawn page's own content box: the gate fills the screen it
     replaces, and its content starts at the top rather than centring -
     the identity block's own 96px is what seats the name in the calm
     upper third. */
  min-block-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 24px;
  padding: 20px;
  padding-block-start: 44px;
  padding-block-end: 48px;
  /* THE COLUMN. The gate's content never runs wider than an auth column:
     at a phone width this is a no-op; at a desktop width it keeps the
     doors at a hand's width and centred, instead of a screen-wide bar,
     which is the one way a phone-first door looked broken at 1280. The
     412 is the owner's own phone width, so the desktop column IS the
     phone column; its 372 of content also sits under the 400 that is
     the widest Google's own button may be drawn, and the 375 that is
     the widest Apple renders its web button. */
  inline-size: 100%;
  max-inline-size: 412px;
  justify-self: center;
}

/* THE IDENTITY BLOCK: the one surface where the product name renders at
   display rank, with at most ONE fact line beneath it (W3, V15). The
   anchor mark seats beside the name in the published wordmark
   treatment, which is where that pairing already lives. */
.sg-identity { margin-block-start: 96px; display: grid; gap: 10px; }
.sg-identity .ui-type-meta { color: var(--ui-muted); }
.sg-identity h1 { margin: 0; }
.sg-identity .ui-wordmark .ui-icon { inline-size: 26px; block-size: 26px; }
/* THE FULL STOP'S SEAT at the display line. The box is smaller than the
   leading mark's because it is punctuation rather than a mark, and it seats
   on the baseline rather than on the name's centre, which is where a full
   stop belongs. This rule follows the one above so the trail form wins at
   equal specificity. */
.sg-identity .ui-wordmark--trail .ui-icon {
  inline-size: 13px;
  block-size: 13px;
  align-self: flex-end;
  margin-block-end: 5px;
}

/* THE WORKING SEAT: the step's one subject, and the state line beneath
   it. 12px inside the group, 44px below the identity. */
.sg-seat { margin-block-start: 44px; display: grid; gap: 12px; }
.sg-fields { display: grid; gap: 12px; }

/* THE FIELD, in the ad-field family's dress (see the header). */
.sg-gate .ad-field {
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: 12px;
  padding-inline: 16px;
  border: 1px solid var(--ui-hairline);
  border-radius: 10px;
  background: none;
  color: inherit;
  font: var(--ui-type-body);
  min-block-size: var(--ui-tap-min);
  -webkit-appearance: none;
  appearance: none;
}
.sg-gate .ad-field::placeholder { color: var(--ui-muted); }
/* THE PERSON'S BYTES STAY READABLE while this build's controls are
   inert. The composition marks every control on a gate face
   non-interactive - there is no machinery behind any of them yet, and a
   control that accepts a press and does nothing is the dead door this
   estate refuses - and a platform-disabled field would grey the code a
   person typed, which is the one thing the refused state exists to keep
   in front of them (clause C4). The refusal is carried by the attribute
   and by the development band's own sentence, never by fading the
   evidence. */
.sg-gate .ad-field:disabled { color: inherit; -webkit-text-fill-color: currentColor; opacity: 1; }

/* THE LABEL IS PRESENT AND UNSEEN: it supplies the accessible name by
   association (the sheet's row 9) while the field carries the same one
   string as its placeholder, so the drawn face is unchanged and the
   name is a real label rather than an announcement beside one. The
   recipe is the composition's own skip link's, which is the estate's
   published way of keeping an element for software and not for the eye.
   It is out of flow, so it seats no grid row of its own. */
.sg-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* THE WIRED FIELDS' LABEL PAINTS, and this rule exists because its
   absence was a defect the DOM could not see.
   
   THE FINDING (design desk F-G1, at the served render): the wired faces
   carried sg-label--visible on every label and the class did NOTHING.
   The rule above still governed, so all three labels computed to the
   1x1 clip pattern and no label painted on any face: the email face
   rendered a BARE UNLABELLED BOX, and the refused state rendered a
   person's own bytes with no visible name. A census of the markup
   passed it, because the label element is present and correctly
   associated; only LOOKING at the render finds it. The class name
   asserted a property the style did not deliver, which is the ledger's
   comments-that-certify class wearing CSS.
   
   C15 BINDS THIS BUILD: every gate field carries a VISIBLE label at body
   rank and no placeholder renders. The two halves are one rule - a
   placeholder that restates a hidden label is the same fact twice, and
   removing the placeholder while the label stayed hidden left the field
   with no name at all, which is strictly worse than the state the sheet
   re-founded these fields to leave behind.
   
   IT UNDOES THE HIDING EXPLICITLY rather than by ordering. A rule that
   merely came later would work until someone re-ordered this file; each
   property that hides is named and reversed, so the reversal cannot be
   partial. */
.sg-label--visible {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  display: block;
  margin-block-end: 8px;
  color: var(--ink-body, inherit);
}

/* THE ACTS. One lead act per face at the fill, peers in the outline
   dress, and the dead form is the FAMILY MECHANISM - background none, a
   hairline, muted ink - never opacity (clause C3). */
.sg-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 52px;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
  padding-inline: 16px;
  white-space: nowrap;
}
/* THE LEAD FILL IS THE ESTATE'S OWN, and it is ink rather than gold
   because the design desk ruled it so at 08:26 on this build's own
   filing (RULING-GATE-LEAD-ACT-INK-FILL-GOLD-MASS-HELD): the drawn gold
   fill contradicted the landed GOLD_MASS_RULE, which licenses the filled
   gold mass to the seal alone, and the rule held with no exception
   minted. This pair is the form every other lead act in the estate
   already wears (ad-fill, tp-fill-act), and the gate's gold stays where
   the ruling leaves it - the identity anchor, at the mark grain. */
.sg-act--lead { background: var(--ui-ink); color: var(--ui-ground); border: none; }
.sg-act--peer { background: none; color: var(--ui-ink); border: 1px solid var(--ui-hairline); }
.sg-act--lead[aria-disabled="true"] {
  background: none;
  border: 1px solid var(--ui-hairline);
  color: var(--ui-muted);
  cursor: default;
}

/* IN FLIGHT the fill STAYS FILLED and the mark rides INSIDE it (R6.4),
   which is what makes aria-busy a visual consequence rather than an
   announcement. The mark is the estate's own breathing dot, the form
   every other in-flight act in this build already wears. */
.sg-mark {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: ui-breathe var(--ui-motion-breathe) infinite;
}

/* STATE LINES: ONE seat, BELOW the working group (clause C8), at meta
   rank in body ink - a state is a fact, not a footnote. */
.sg-note { margin-block-start: 2px; }
.sg-state { color: var(--ui-ink); }
.sg-offline { display: flex; gap: 8px; align-items: center; color: var(--ui-ink); }
.sg-parted { flex: none; color: var(--ui-muted); display: inline-flex; }
.sg-parted .ui-icon { inline-size: 22px; block-size: 22px; }

/* THE ESTATE'S BACK CONTROL: chevron plus destination alone, muted, at
   the tap floor. It mirrors whole in the right-to-left edition. */
.sv-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-muted);
  min-block-size: var(--ui-tap-min);
  text-decoration: none;
  justify-self: start;
}
.sv-back .ui-type-meta { color: inherit; }
.sv-chev { color: var(--ui-muted); flex: none; inline-size: 20px; block-size: 20px; }
[dir="rtl"] .sv-chev { transform: scaleX(-1); }

/* THE DOORS: the focal one at the fill, its peers in the outline dress,
   one line each and identical grammar, so the email door can never read
   as the lesser way in. */
.sg-doors { display: grid; gap: 12px; }

/* THE EMAIL FOLD opens IN PLACE beneath the surviving provider doors, so
   the account step keeps exactly ONE back control and it still names the
   code step (contract 11.3's one back edge). */
.sg-fold {
  display: grid;
  gap: 12px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--ui-hairline);
  margin-block-start: 2px;
}
.sg-fold .ui-type-meta { color: var(--ui-muted); }
.sg-floor { color: var(--ui-muted); }

/* THE QUIET ACT (the reset door, the resend): a bare text act at meta
   rank with the 44px reach, start-aligned - a way, never a button. */
.sg-quiet {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  min-block-size: var(--ui-tap-min);
  color: var(--ui-muted);
  cursor: pointer;
  font: inherit;
  justify-content: flex-start;
  text-align: start;
  justify-self: start;
}

/* The entered address inside a fact line: the person's own bytes, at the
   page's own ink inside a sentence that is muted around it. */
.sg-addr { color: var(--ui-ink); }

/* TOKEN-FAILURE and its sibling: the one honest surface - head, cause,
   the next act, and nothing else (clause C9). */
.sg-tf { display: grid; gap: 12px; margin-block-start: 44px; }
.sg-tf-cause { color: var(--ui-muted); }
.sg-tf .sg-act { margin-block-start: 8px; }

/* A control this build cannot honour keeps its drawn dress and loses its
   press: the composition marks it inert and the development band says
   what that means. The cursor stops promising. */
.sg-gate [data-inert="not-wired"] { cursor: default; }

/* THE SCREEN HEAD (the wired faces): title rank, page ink, 20px under the
   identity block's own grid gap (44px in all, the seat's old distance),
   and the working seat follows at the grid's own 24px. */
.sg-head { margin-block-start: 20px; color: var(--ui-ink); }
.sg-head + .sg-seat, .sg-head + .sg-tf { margin-block-start: 0; }

/* THE OR ROW: one word between two hairlines, muted, meta rank. */
.sg-or { display: flex; align-items: center; gap: 12px; color: var(--ui-muted); margin-block: 2px; }
.sg-or::before, .sg-or::after { content: ""; flex: 1 1 0; border-block-start: 1px solid var(--ui-hairline); }

/* THE HOUSE DOOR: one anatomy for all three ways in (owner msg 2537, the
   TikTok-shape reference), in the estate's OWN banked door dress: the
   provider-doors sheet's card row (background var(--ui-card), the
   estate's hairline, radius 10, the 44px tap floor, its reserved mark
   slot) rather than any new invention. The mark seats at the inline
   START EDGE and the title centres in the ROW, so the three labels align
   with each other whatever the mark's shape; RTL mirrors by the logical
   inset. The provider marks carry their own colours, which are the
   providers' and not this sheet's: the standard-colour G on the card's
   dark neutral (Google's own dark-theme placement), Apple's white
   variant; the email mark inks with the page. */
/* THE ROW FILL IS ONE DECLARATION FOR ALL THREE DOORS, and it is one
   rather than three because of the condition the sign-off rides. Apple's
   custom-button line wants black or white and the gate accepted the card
   token instead, under Apple's own permission to coordinate the button's
   background with the surrounding UI; the condition on that acceptance
   (ui-owner-5, adopted by the chair) is that if App Review ever objects,
   ALL THREE ROWS MOVE TO PURE BLACK TOGETHER and never the Apple row
   alone, because a single black row beside two card rows is exactly the
   non-uniformity the owner flagged three times. A rule per door would
   make that a three-place edit somebody would make in one place. So the
   fill is named ONCE here and read by every door: the fallback is
   changing THIS declaration's value to the token source's own black, and
   the three rows move together because they cannot move apart. */
.sg-doors { --sg-door-fill: var(--ui-card); }

.sg-door {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-inline-size: 0;
  /* U2 CURE, cause confirmed at the bytes and the walker's image
     hypothesis refuted: all three marks are absolutely positioned, so no
     image touches any line box; every row computed 46.5 CSS px (10+10
     padding around the body token's 24.5px line) and the paint rounded
     94/92/94 device px purely by half-pixel phase at alternating row
     offsets (pitch 58.5 CSS = 118/116). An INTEGRAL row height ends the
     phase: 46px exact, flex-centred, no block padding, above the 44
     floor; every row now paints 92 device px at every offset. */
  min-block-size: 46px;
  padding-block: 0;
  padding-inline: 52px;
  border: 1px solid var(--ui-hairline);
  border-radius: 10px;
  background: var(--sg-door-fill, var(--ui-card));
  color: var(--ui-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--ui-press-out) var(--ui-motion-curve);
}
.sg-door:active { transform: scale(0.99); transition-duration: var(--ui-press-in); }
.sg-door-mark {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
}
.sg-door-mark img, .sg-door-mark svg { inline-size: 100%; block-size: 100%; display: block; }
.sg-door-mark svg { color: var(--ui-ink); }
.sg-door-word { min-inline-size: 0; }

/* A quiet act that is a link wears the quiet dress, not the browser's. */
a.sg-quiet { text-decoration: none; }
/* AND SO DOES THE PEER ACT, which is a link only where a face has no
   runtime and an anchor is the one control it can make live. The rule
   above was written for the quiet act and applied to the back control,
   and this was the act-shaped anchor it never reached
   (m54-design-owner-32's ruling of 2026-09-02, at m54-walk-invite's
   finding on the invite arrival's dead-invitation face).
   THE GROUND IS NOT CONSISTENCY. Where this estate wants an underline it
   authors one whole, and that is true of the WHOLE POPULATION rather
   than of an example or two: every text-decoration: underline in this
   client tunes an offset, six sites with no exception, five at 3px and
   plate-css's text act at 4px, which also tunes thickness and colour.
   The browser's default tunes nothing, so this control was not wearing a
   thin version of the estate's underline, it was wearing something the
   estate has never chosen anywhere. The untuned offset is also what damaged Arabic, running
   through the letterforms where skip-ink cannot save a script whose
   connective stroke sits at that height, while Latin hid it. And the
   peer act already carries a hairline border, which IS its affordance,
   so the default was a second affordance on one control. */
a.sg-act--peer { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .sg-mark { animation: none; opacity: 0.7; }
  .sg-door { transition: none; }
  .sg-door:active { transform: none; }
}


.pp-journal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; inline-size: 100%; }
.pp-lens { display: flex; gap: 24px; inline-size: 100%; border-block-end: 1px solid var(--ui-hairline); }
.pp-lens-tab { position: relative; border: none; background: none; padding: 8px 2px 12px; min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min); text-align: start; font: var(--ui-type-label); color: var(--ui-muted); cursor: pointer; }
.pp-lens-tab[aria-selected="true"] { color: var(--ui-ink); }
.pp-lens-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline-start: 2px; inset-block-end: -1px; inline-size: 26px; block-size: 2px; background: var(--ui-ink); }
.pp-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; inline-size: 100%; padding-block-start: 6px; }
.pp-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; inline-size: 100%; }
.pp-cityhead { font: var(--ui-type-label); color: var(--ui-muted); margin-block-start: 2px; }
.pp-entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; inline-size: 100%; }
.pp-pagemeta { margin-block-start: -6px; }
.pp-trip-ref { white-space: nowrap; }
.pp-empty-note { max-inline-size: 46ch; }
.pp-journal-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; inline-size: 100%; padding-block-start: 10px; border-block-start: 1px solid var(--ui-hairline); }
.pp-fill-pill { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--ui-tap-min); min-inline-size: var(--ui-tap-min); padding: 10px 22px; border: none; border-radius: 999px; background: var(--ui-ink); color: var(--ui-ground); font: var(--ui-type-label); }
.pp-journal-note { max-inline-size: 46ch; }


.pp-composer-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; inline-size: 100%; }
.pp-composer-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pp-composer-label { color: var(--ui-muted); }
.pp-composer-field { inline-size: 100%; min-inline-size: 0; padding-block: 12px; padding-inline: 16px; border: 1px solid var(--ui-hairline); border-radius: 10px; background: none; color: inherit; font: var(--ui-type-body); min-block-size: var(--ui-tap-min); color-scheme: dark; }
.pp-composer-field::placeholder { color: var(--ui-muted); }
select.pp-composer-field { appearance: none; -webkit-appearance: none; }
.pp-composer-field option { color: var(--ui-ink); background: var(--ui-ground); }
/* THE PICKER: the instrument's bar, then its answer beneath, packed to the
   start; the field's own dress is the Places sheet's under .oi-places,
   joined and not restated. The field carries the instrument's tap floor
   here because the bar sits inside a form row.

   THE GO CONTROL'S TWO STATES ARE RESTATED HERE, and that is a deliberate
   exception to "joined and not restated" with its reason. The family's own
   .oi-go is the FILL (ink ground) and its ring lives only under
   aria-disabled, which this composer never sets; the Places sheet then
   removes the fill for everything wearing .oi-places and tries to bring the
   armed state back with "border-color: var(--ui-ink)" on a control whose
   border is "none". A border colour on a control with no border draws
   NOTHING, so what this surface inherited was a bare arrow in both states:
   no ring at rest, no fill when armed (the UI owner at the pixel,
   2026-09-04 15:02, verdict bec6fff4, against the sheet's line 62 and the
   desk's 2 Sep ruling that the armed go is the fill everywhere on the
   instrument).

   SO THIS SURFACE DRAWS ITS OWN TWO STATES: unarmed the family's muted
   hairline ring with the muted glyph, armed the INK ring with the ink
   glyph AND NO FILLED MASS. The armed half was first built as the family
   FILL, to the desk's 2 September ruling, which was the law that stood at
   the build; SIGNATURE 33 then withdrew that fill under owner 2866 and
   SIGNATURE 14 and ruled ONE armed dress for the whole instrument family,
   the ring, so the armed rule changed from a fill to an edge. One fill per
   surface stays the commit pill's, never a go's. It is scoped to this composer's
   picker and NOT fixed at .oi-places, because that selector is the Places
   MODE's screen and another lane's to move mid-round; the desk has already
   commissioned that cure there and this is the same rule applied where it
   is mine to apply.

   THE SPECIFICITY IS THE MECHANISM AND IT IS NOT ORDER-DEPENDENT, which
   matters because the composed stylesheet emits this file BEFORE the Places
   sheet: (0,3,1) beats ".oi-places .oi-go" at (0,2,1), and the armed rule at
   (0,4,1) beats '.oi-places .oi-go[data-armed=yes]' at (0,3,1). Equal
   specificity would have lost to document order, silently.

   THE BOX DOES NOT MOVE BETWEEN THE STATES: the armed rule keeps the same
   1px border and paints it the fill's own ink, so arming changes colour and
   never geometry, and the control cannot cross its tap floor by gaining a
   ring. */
.pp-composer .pp-composer-picker .oi-go { background: none; border: 1px solid var(--ui-hairline); color: var(--ui-muted); }
.pp-composer .pp-composer-picker .oi-go[data-armed="yes"] { background: none; border: 1px solid var(--ui-ink); color: var(--ui-ink); }
.pp-composer .pp-composer-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; inline-size: 100%; }
.pp-composer .pp-composer-place { min-block-size: var(--ui-tap-min); }
.pp-composer .pp-composer-panel { margin-block-start: 6px; }
.pp-composer .pp-composer-rest { margin-block-start: 6px; }
/* HIDDEN MEANS HIDDEN. The Places sheet gives the panel and the rest band a
   display of their own, which outranks the browser's own rule for the hidden
   attribute, so a hidden panel drew as an empty hairline box under the field
   at rest and the floor row stayed on the face after it was pressed (caught
   at the render, not at the attribute, 13:4xZ). The attribute is the
   runtime's one switch; this rule makes it true on the face. */
.pp-composer .pp-composer-panel[hidden], .pp-composer .pp-composer-rest[hidden] { display: none; }
/* A READING'S DAY in the trailing readout seat of its rest row: the
   person's number, muted, at the end, never a chip. */
.pp-composer .pp-composer-own-day { color: var(--ui-muted); margin-inline-start: auto; flex: none; }
/* THE PROVENANCE LINE beneath a row the picker filled. */
.pp-composer .pp-composer-from { color: var(--ui-muted); }
.pp-composer-words { display: grid; grid-template-columns: minmax(0, 1fr); }
.pp-composer-textarea { inline-size: 100%; min-block-size: 9lh; resize: vertical; }
/* THE PRIVATE MARK ROW, held at the tickbox (DIRECTION 4): a tap-height
   row, the box and the landed word. */
/* THE MARK ROW, THREE SEATS (the sheet at d83a95eea7dfeec9, SIGNATURE 29):
   the feature's name and the state's meaning line leading, the chip in its
   switch role trailing inside a tap-floor hit. The switch itself is the
   OWNED visually-hidden utility (.ui-a11y) and not a second one, and it
   leads the row in source order so ":checked ~" can reach both the words
   and the chip. The row is positioned so that absolutely-placed control
   is contained by it rather than by the page.

   THE STATE, THE DRESS AND THE WORDS ALL MOVE WITH NO SCRIPT, which is
   this surface's law: both meaning lines are in the markup and the
   stylesheet shows the true one, and the chip's edge and ink follow the
   same ":checked". Off is the hairline pill with the word in muted ink;
   on is the ink edge and ink text, the same word, as the sheet draws the
   two states.

   THE OFF STATE'S MUTED INK IS SCOPED UNDER .pp-composer ON PURPOSE. The
   chip primitive's own ".ui-chip" sets colour to the ink, and a bare
   ".pp-composer-mark-chip" would tie it on specificity and win only
   because this file happens to be emitted after the primitives. Order is
   not a mechanism: the day that emission moves, the chip would go back to
   ink at rest and the two states would look identical, silently. Scoped,
   it wins on specificity, and the floor beside it holds the emission
   order too, so the fragility is loud rather than latent. */
.pp-composer-mark { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-block-size: var(--ui-tap-min); }
.pp-composer-mark-words { display: grid; row-gap: 2px; min-inline-size: 0; }
.pp-composer-mark-control { display: grid; place-items: center; min-inline-size: var(--ui-tap-min); min-block-size: var(--ui-tap-min); cursor: pointer; }
.pp-composer .pp-composer-mark-chip { min-block-size: 32px; color: var(--ui-muted); }
.pp-composer-mark-line--on { display: none; }
.pp-composer-mark-switch:checked ~ .pp-composer-mark-words .pp-composer-mark-line--off { display: none; }
.pp-composer-mark-switch:checked ~ .pp-composer-mark-words .pp-composer-mark-line--on { display: block; }
.pp-composer-mark-switch:checked ~ .pp-composer-mark-control .pp-composer-mark-chip { border-color: var(--ui-ink); color: var(--ui-ink); }
.pp-composer-mark-switch:focus-visible ~ .pp-composer-mark-control .pp-composer-mark-chip { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
.pp-composer-refusal { max-inline-size: 46ch; }
/* THE FOOT: the stamp the entry will mint (a fact in the plate's chip
   dress, graded by the year through the plate's own opacity steps), the
   landing line, the one fill. */
.pp-composer-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; padding-block-start: 10px; border-block-start: 1px solid var(--ui-hairline); }
.pp-composer-stamp { margin: 0; display: inline-grid; }
.pp-composer-stamp .plt-grade-1 { opacity: var(--plt-grade-1); }
.pp-composer-stamp .plt-grade-2 { opacity: var(--plt-grade-2); }
.pp-composer-stamp .plt-grade-3 { opacity: var(--plt-grade-3); }
.pp-composer-landing { color: var(--ui-muted); }


.pp-marks-line { max-inline-size: 46ch; color: var(--ui-muted); }
.pp-marks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pp-mark-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; min-block-size: 56px; padding-block: 8px; border-block-start: 1px solid var(--ui-hairline); }
.pp-mark-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-inline-size: 0; }
.pp-mark-place { overflow-wrap: anywhere; }
.pp-mark-state { white-space: nowrap; }
.pp-mark-form { margin: 0; }
.pp-mark-act { min-block-size: var(--ui-tap-min); white-space: nowrap; }
.pp-marks-empty { max-inline-size: 46ch; }


.pp-journal-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; inline-size: 100%; }
.pp-entry-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; inline-size: 100%; }
.pp-entry-when { color: var(--ui-muted); }
.pp-journal-entry-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-inline-size: 52ch; inline-size: 100%; }
.pp-journal-entry-words > * { overflow-wrap: anywhere; min-inline-size: 0; }

/* ---- B3, the Orient home's Places mode ---- */
/* THE BODY HOLDS TWO CHILDREN, NOT FOUR. The Orient face's body is a
   column whose record band takes the slack from above (homes.ts, the
   4 September cure; it was a four-row template before); this one is the
   bar and the field's answer, and the answer sits UNDER the bar rather
   than being stretched to the foot of the instrument. Measured at the
   render: inheriting the four-row template put the panel in an implicit
   row and left it floating. It names its OWN display so the orient body's
   column never reaches this face: two rows, packed to the start, exactly
   as before. */
.oi-places .oi-body--places { display: grid; grid-template-rows: auto auto; align-content: start; }
/* THE GO RING'S TWO STATES. Muted stroke at an empty field, full ink at
   a filled one, the disc transparent in both - the published reference's
   own empty-field behaviour, and the reason the ring is a ring: a filled
   disc here was the heaviest ink on a page whose subject is a list.
   THE DISC IS DECLARED TRANSPARENT RATHER THAN LEFT UNSET, and that is a
   cure rather than a restatement. This control is a BUTTON, and its act
   is the unbuilt search moment, so the composition's door pass disables
   it - at which point the user agent paints its own disabled-button
   ground through the gap the stylesheet left. Measured at the served
   render, not read off the rule: rgba(239, 239, 239, 0.3) over a
   rgb(13, 16, 23) ground, a pale disc in the exact seat the design's
   own lift removed a fill from.
   IT IS SCOPED TO THIS FACE AND THE SAME DEFECT IS ON THE ORIENT FACE,
   which wears this class over the same disabled act. That face is
   another commission's grade and this build does not restyle it; the
   finding travels to the design owner with this measurement and this
   one-line cure rather than being taken silently on a screen nobody
   asked me to touch. */
.oi-places .oi-go { background: none; }
.oi-places .oi-go[data-armed="yes"] { color: var(--ui-ink); border-color: var(--ui-ink); }
/* THE FIELD AT THE LIFT'S OWN RADIUS. The landed field is radius 10, the
   pre-v2 value the design sheet's item 1 names and supersedes: outlined,
   transparent, radius 12. The transparency is already the landed
   behaviour (measured: rgba(0, 0, 0, 0)); the radius is not, so this
   face takes the drawn one. Scoped for the same reason the ring above
   is. */
.oi-places .oi-field { border-radius: 12px; }
/* THE PANEL IS THE FIELD'S ANSWER AND WEARS THE ANSWER'S OBJECT FORM: a
   hairline outline over a whisper of ink, never a card. The ink is a
   mix of the ground's own ink token rather than a colour, so it is one
   drawing on both grounds. It stops short of the ring, which is what
   makes it read as hanging from the FIELD and not from the row. */
.oi-places .oi-panel { inline-size: calc(100% - var(--ui-tap-min) - 8px); display: grid; margin: 0; padding: 6px;
  list-style: none; border: 1px solid var(--ui-hairline); border-radius: 14px;
  background: color-mix(in srgb, var(--ui-ink) 3%, transparent); }
.oi-places .oi-panel-row { display: grid; }
/* AN OPTION ROW. The tap floor is the token and not a number: this face
   is graded on it in the DOM, and a literal here is a second place the
   floor could be edited without the grade noticing. */
.oi-places .oi-opt { display: flex; gap: 8px; align-items: center; inline-size: 100%; min-block-size: var(--ui-tap-min);
  border: none; border-radius: 6px; background: none; padding: 0 10px; color: var(--ui-ink);
  font: var(--ui-type-body); text-align: start; }
.oi-places .oi-opt-main { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-places .oi-opt .fs-row-glyph { color: var(--ui-muted); flex: none; }
/* THE RUN ALREADY TYPED RECEDES so the eye reads the COMPLETION, which
   is the drawn device and the one both reviews measured. The drawn rank
   sits between muted and ink; it is derived here as a mix of the two
   canon tokens rather than carried as a new colour, because a raw value
   in a component sheet is a token nobody owns. At 45 percent the mix is
   the drawn value on the night ground to within a shade, and slightly
   stronger than drawn on paper, which errs toward legibility at the end
   the UI owner's read called out. */
.oi-places .oi-opt-typed { color: color-mix(in srgb, var(--ui-ink) 45%, var(--ui-muted)); }
/* THE HONEST NO sits in the same object as the way onward. */
.oi-places .oi-panel-note { display: flex; align-items: center; min-block-size: 36px; padding: 0 10px; color: var(--ui-muted); }
/* THE REST BAND: a muted sub-label over the record's own rows, on the
   ground rather than in an object, because at rest the body IS the
   mode's content and an object would mark it as an answer to a question
   nobody has asked yet. */
.oi-places .oi-rest { display: grid; inline-size: 100%; margin-block-start: 10px; }
.oi-places .oi-rest-label { color: var(--ui-muted); padding-block-end: 2px; }
.oi-places .oi-rest-list { display: grid; margin: 0; padding: 0; list-style: none; inline-size: 100%; }
/* THE ROW BREATHES AT THE REFERENCE'S RHYTHM and separates with a rule
   one step quieter than the hairline, the reading family's own form for
   the same job. The name is allowed to wrap here, where the panel's
   rows clip: a rest row has the whole width and no neighbour crowding
   it, and truncating a person's own saved place is worse than a second
   line. */
.oi-places .oi-rest-row { display: flex; gap: 10px; align-items: center; inline-size: 100%; min-block-size: var(--ui-tap-min);
  border: none; border-block-end: 1px solid color-mix(in srgb, var(--ui-hairline) 72%, transparent);
  background: none; padding: 14px 2px; color: var(--ui-ink); font: var(--ui-type-body); text-align: start; }
.oi-places .oi-rest-list > li:last-child .oi-rest-row { border-block-end: none; }
.oi-places .oi-rest-row .oi-opt-main { overflow: visible; white-space: normal; }
.oi-places .oi-rest-row .fs-row-glyph { color: var(--ui-muted); flex: none; }
/* THE BAND DEEPENS WITH THE CANVAS, on the record band's own rule and at
   its own breakpoint, both read from that band's exported constants so
   the two bands of this instrument cannot drift apart on a number typed
   twice. The deep rows are DRAWN AND HIDDEN, never dropped: the rows are
   the record's order and a viewport is not a filter on a record. */
.oi-places .oi-rest-list > li.oi-row-deep { display: none; }
@media (min-height: 860px) { .oi-places .oi-rest-list > li.oi-row-deep { display: block; } }
/* THE DOOR TO THE REST is a row of the same band with the count in the
   mono readout seat, which is the one place on this face a datum sits at
   the trailing edge: it is the PERSON'S number, and it is the record
   band's own door form member for member. */
.oi-places .oi-rest-door { justify-content: space-between; }
.oi-places .oi-rest-door .oi-opt-main { flex: none; }
.oi-places .oi-rest-count { color: var(--ui-muted); margin-inline-start: auto; }
/* ---- B2, the Orient home's Nearby mode ---- */
/* The between rank the drawn set calls dates-ink: the reading room's own
   landed derivation of the same rank, declared once on this face's root
   so no rule below carries a colour of its own. */
.oi-nearby { --oin-between-ink: color-mix(in srgb, var(--ui-muted) 70%, var(--ui-ink)); }
/* THE BODY HOLDS TWO CHILDREN, NOT FOUR (the places sheet's own measured
   repair, same instrument, same reason): the bar, and the field's answer
   under it rather than stretched to the instrument's foot. */
/* THE NEARBY BODY NAMES ITS OWN DISPLAY, as the Places body does: the orient body
   became a column on 4 September (homes.ts, the record anchoring), and a two-row
   template on a flex box is inert. Two rows, packed to the start, as before. */
.oi-nearby .oi-body--nearby { display: grid; grid-template-rows: auto auto; align-content: start; }
/* THE SCOPE LINE: a fact in meta voice at the between rank, exactly the
   drawn seat. */
.oi-nearby .oi-scope { color: var(--oin-between-ink); }
/* THE OPEN PANEL wears the instrument's answer object (hairline outline
   over a whisper of ink, stopping short of the go control so it hangs
   from the FIELD), which is the places panel's landed form on the shared
   suggestion-panel grammar - the two modes' panels reach each other only
   through that grammar, so the numbers are one set. */
.oi-nearby .oi-nearby-panel { inline-size: calc(100% - var(--ui-tap-min) - 8px); display: grid; margin: 0; padding: 6px;
  list-style: none; border: 1px solid var(--ui-hairline); border-radius: 14px;
  background: color-mix(in srgb, var(--ui-ink) 3%, transparent); }
.oi-nearby .oi-nearby-panel-row { display: grid; }
.oi-nearby .oi-opt { display: flex; gap: 8px; align-items: center; inline-size: 100%; min-block-size: var(--ui-tap-min);
  border: none; border-radius: 6px; background: none; padding: 0 10px; color: var(--ui-ink);
  font: var(--ui-type-body); text-align: start; }
.oi-nearby .oi-opt-main { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* THE TYPED RUN RECEDES so the eye reads the shape's own words - the
   instrument's echo grammar with the receded half inverted, exactly as
   drawn. */
.oi-nearby .oi-opt-typed { color: var(--oin-between-ink); }
/* THE ANSWER BAND sits under the bar at the drawn rhythm. */
/* The nearby bands wear .oi-band for its dress and NOT for its anchoring: the orient
   band's auto margin and clamped padding (homes.ts, 4 September) are overridden here
   so this face keeps its own 8px seam under the panel, exactly as before. */
.oi-nearby .oi-nearby-band { display: grid; gap: 16px; justify-items: start; inline-size: 100%; margin-block-start: 8px; padding-block-start: 0; }
/* A RESULT ROW IS A FACT: the family anatomy with no press affordance.
   The scent line takes the grid's first column under the name, which is
   the drawn two-line row. */
.oi-nearby .oi-nearby-row, .oi-nearby .oi-nearby-door { padding-block: 8px; align-items: center; }
.oi-nearby .oi-nearby-scent { grid-column: 1; }
/* THE DOOR AT ITS TRUE MUTED RANK (the drawn set's own rule). */
.oi-nearby .oi-door .fs-row-main { color: var(--ui-muted); }
/* THE WIDER-SEARCH AND LOCATE ACTS wear the baseline dress the walk-fix
   pass ruled for this instrument: dot + label, no container, the dot in
   anchor ink - the face's one anchor-ink mark. */
.oi-nearby .oi-base-act { display: inline-flex; gap: 8px; align-items: center; min-block-size: var(--ui-tap-min);
  border: none; background: none; padding: 10px 2px; color: var(--ui-ink);
  font: var(--ui-type-label); text-align: start; }
.oi-nearby .oi-base-act .ui-chip-dot { background: var(--ui-gold); }
/* AND THE MARK GOES OUT WHEN ITS ACT IS REFUSED, on the orient face's
   own keyed-to-the-door-pass rule: gold is the anchor's meaning and a
   dead act carries no anchor. */
.oi-nearby [data-inert="not-wired"] .ui-chip-dot { background: var(--ui-inert-ink); }
/* THE THIN FACT breathes at the reading measure. */
.oi-nearby .oi-nearby-fact { max-inline-size: 46ch; }
/* THE CAVEAT: meta voice, the drawn measure. */
.oi-nearby .oi-caveat { max-inline-size: 46ch; }
/* THE NARROWING IS A STATE, NOT A SECOND LIST: rows and doors are drawn
   and hidden by the band's own attribute (the deep rows' rule one state
   over), so the pressed chip filters to the marked places, each lens
   reading keeps its own extension door, and the caveat renders on every
   narrowed answer and no other. */
.oi-nearby [data-narrowed="yes"] .oi-nearby-row[data-marked="no"] { display: none; }
.oi-nearby [data-narrowed="yes"] [data-lens-row="whole"] { display: none; }
.oi-nearby [data-narrowed="no"] [data-lens-row="narrowed"] { display: none; }
.oi-nearby [data-narrowed="no"] .oi-caveat { display: none; }
/* THE RULED REFUSAL LINE sits at the answer's own rank and breathes at the
   reading measure, exactly as the thin fact one state over does. It wears the
   face's ordinary ink: it is a fact about what happened, not an alarm, and
   refusal ink would make a state a person can act out of look like a wall. */
.oi-nearby .oi-nearby-refusal { max-inline-size: 46ch; }
/* R6.6's PAST-ONE-SECOND LINE, drawn and hidden. The submit's runtime reveals
   it one second in, which is the whole point of the clause: a commit that
   returns sooner never owed a person an explanation. */
.oi-nearby .oi-inflight-note { display: none; color: var(--oin-between-ink); }
.oi-nearby[data-inflight="past-1s"] .oi-inflight-note { display: block; }
/* R6.4, THE IN-FLIGHT MARK. Both readings of the circle live in the markup
   and this block decides which shows, so the submit's runtime moves one
   attribute and no element. */
.oi-nearby .oi-go-mark { display: none; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--oin-fill-dot-gold); animation: oi-nearby-breathe var(--ui-motion-breathe) infinite; }
.oi-nearby .oi-go[aria-busy="true"] svg { display: none; }
.oi-nearby .oi-go[aria-busy="true"] .oi-go-mark { display: block; }
/* A SECOND TAP DOES NOTHING, and it is refused HERE rather than by disabling
   the control: disabling the submitter inside its own submit event can drop
   its name and value from the entry list, and that pair is the submit marker
   itself. */
.oi-nearby .oi-go[aria-busy="true"] { pointer-events: none; }
/* THE MARK'S GOLD IS KEYED TO THE FILL'S GROUND, never to the family (the
   design desk's fill-dot-gold ruling, and the R6.2 addendum in its own
   words): night's page is dark so its page gold is the bright one, but
   night's FILL is the ink, which is cream, so the mark on it needs the DEEP
   gold. Paper inverts both. The alias therefore reads gold-on-light by
   default and gold-on-dark under paper, which is the opposite of what a
   family-keyed pair would do. The landed instance of this exact pairing is
   the explore field's own fill one surface over. */
.oi-nearby .oi-go { --oin-fill-dot-gold: var(--gold-on-light); }
[data-ground="paper"] .oi-nearby .oi-go { --oin-fill-dot-gold: var(--gold-on-dark); }
@keyframes oi-nearby-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* AND THE MARK IS STATIC FOR A READER WHO ASKED FOR THAT (R6.2's own
   reduced-motion clause): one mark, held at the breath's own middle, never a
   spinner and never a second dress. */
@media (prefers-reduced-motion: reduce) {
  .oi-nearby .oi-go-mark { animation: none; opacity: 0.7; }
}