/* v25, build B: the data-boundary band that replaces v23's worked example in #od-zrodel.
   Loaded after /assets/home.css by variants/v25 only. v24 and v26 are being built at the
   same time against their own stylesheets, so nothing here is written into assets/home.css
   and every selector below is scoped under .uru-boundary.

   Same discipline as home.css. Zero raw hex: every colour resolves a --cds-* token or one
   of the two custom brand tokens home.css already declares. --uru-orange-ui is the
   contrast-corrected orange (#ba4e00 on g10 per home.css:64, #ff832b on g90 per home.css:87;
   the #a84b00 / #ff9d3c pair written here before is not in @carbon/colors at all -- it is
   precisely the off-palette pair paint-parity.py records as having been replaced) and is the only orange
   allowed on type or on a stroke that carries meaning; --uru-mesh is the graphic-fill-only
   value and is deliberately not used in this file at all. Type comes off the Carbon scale
   through a type token, spacing off --cds-spacing-NN, and the only media-query thresholds
   are Carbon's 42rem and 66rem.

   The file adds no transition and no animation, so it needs no prefers-reduced-motion
   guard; the boundary diagram is static SVG by design. */

/* ==========================================================================
   1. Band frame
   ========================================================================== */

/* Bare .cds--css-grid resolves row-gap: normal, so every seam between this band's four cells
   was 0.0px of grid gap with the real separation carried as a per-cell margin: 24px under the
   intro, 32px under the diagram, 16px under the ledger, 24px over the notes. One row-gap
   token replaces all four, which is the stacking rule (the parent owns the layout and the
   children carry no margin) and makes the seams equal, as items on one pattern must be. */
#od-zrodel .cds--css-grid {
  row-gap: var(--cds-spacing-07);
}

.uru-boundary__intro {
  margin-bottom: 0;
}

/* ==========================================================================
   2. Boundary diagram
   --------------------------------------------------------------------------
   Two layouts, swapped at Carbon's md breakpoint. One would not do both jobs: a
   side-by-side diagram squeezed into a 358px column renders its labels at roughly 12
   user units of drawn text and turns into the grey scribble the kernel band was already
   criticised for at 390. So below 42rem the diagram stacks, and it is still drawn SVG
   (320-unit viewBox, 16-unit labels, 17.9px on screen at 390); from 42rem the
   left/right split is the HTML legend in block 2b below, which took over from a
   400-unit SVG on 2026-07-28.

   The stacked SVG and the legend are both aria-hidden; the figcaption carries the whole
   diagram in prose, so a screen reader gets the content once rather than twice.
   ========================================================================== */

.uru-boundary__figure {
  margin: 0;
}

.ub-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ub-diagram--stack {
  max-width: 26rem;
}

/* ==========================================================================
   2b. Split legend, rebuilt in HTML (owner decision 2026-07-28)
   --------------------------------------------------------------------------
   From 42rem up the two-column half of this figure used to be a hard-coded
   400x212 SVG capped at 30rem. Inside the 672px cell at lg that left 192px of
   the figure dead, and all of its type was raw drawn px (12 for the side
   labels, 14 for the items) scaling with the box instead of sitting on the
   Carbon type scale. The columns, the dashed boundary and the two marker sets
   are HTML and CSS now: real type tokens, token spacing, the boundary as a
   dashed border, the markers as 8px CSS squares from the fixed sizing scale,
   and the read-direction arrow as a 2px rule with a CSS arrowhead.

   What did not change: the stacked variant below 42rem is still the original
   SVG and still owns every width under the md boundary; the figcaption is
   verbatim and still carries the whole diagram in prose, so the legend is
   aria-hidden and a screen reader gets the content exactly once; and every
   colour resolves the same token it did in the SVG, so g10 and g90 behave as
   before.
   ========================================================================== */

.ub-legend {
  display: none;
}

@media (min-width: 42rem) {
  .ub-diagram--stack {
    display: none;
  }

  .ub-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--cds-spacing-07);
  }
}

/* The boundary itself, in the same role the SVG's dashed path held. Closing panel
   2026-07-28, b1: it used to be the second column's left border, which ran 118px and stopped
   32px above the read rule, so the arrow crossed nothing while the untouched 390 SVG still
   drew its arrow through the dashed line. It is now one full-height rule on the wrapper that
   holds the legend and the read band, drawn at the 50% divide (dividing a box by 50% is a
   sanctioned non-token dimension, spacing FAQ). The 32px column gap now sits symmetrically
   around it, 16px a side, which is the Carbon gutter split the way the grid splits it, so the
   second column no longer needs its own inset. Borders are not spacing, so 2px is a px value
   like every other rule on this page (1px hairlines, the 3px claim rail). */
.ub-legend-wrap {
  position: relative;
}

@media (min-width: 42rem) {
  .ub-legend-wrap::before {
    content: "";
    position: absolute;
    /* The rule runs past the read arrow the way the 390 SVG's dashed path runs past its
       arrow, so the two figures draw the same crossing. spacing-03 clears the arrowhead and
       still leaves the figcaption its own spacing-05. */
    inset-block: 0 calc(-1 * var(--cds-spacing-03));
    inset-inline-start: 50%;
    border-inline-start: 2px dashed var(--cds-border-strong-01, var(--cds-border-strong));
  }
}

.ub-legend__side {
  margin: 0 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-label-01-line-height, 1.33);
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
  font-weight: 600;
  text-transform: uppercase;
}

.ub-legend__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ub-legend__items li {
  position: relative;
  padding-inline-start: var(--cds-spacing-06);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  line-height: var(--cds-body-compact-01-line-height, 1.29);
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
}

.ub-legend__items li + li {
  margin-block-start: var(--cds-spacing-05);
}

/* 8px is on Carbon's fixed sizing scale, which is what the SVG's 9-unit rects were
   approximating. Same accent logic as before: what stays with the client is drawn in the page
   ink, what sits on our side in the UI orange. */
.ub-legend__items li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.3em;
  width: 8px;
  height: 8px;
}

.ub-legend__col--yours .ub-legend__items li::before {
  background: var(--cds-text-primary);
}

.ub-legend__col--ours .ub-legend__items li::before {
  background: var(--uru-orange-ui);
}

/* The read direction, replacing the SVG's arrow and its drawn "odczyt" label. The rule spans
   the whole figure rather than stopping at the old 30rem cap, and the arrowhead is a CSS
   triangle so nothing here scales with a viewBox. */
.ub-legend__flow {
  display: none;
}

@media (min-width: 42rem) {
  .ub-legend__flow {
    display: block;
    position: relative;
    margin: var(--cds-spacing-07) 0 0;
    padding-block-end: var(--cds-spacing-03);
    color: var(--uru-orange-ui);
    font-size: var(--cds-label-01-font-size, 0.75rem);
    line-height: var(--cds-label-01-line-height, 1.33);
    letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
    font-weight: 600;
    text-transform: uppercase;
  }

  .ub-legend__flow::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    border-block-start: 2px solid var(--uru-orange-ui);
  }

  .ub-legend__flow::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    transform: translateY(50%);
    border-block: 6px solid transparent;
    border-inline-start: 10px solid var(--uru-orange-ui);
  }
}

/* The dashed rule is the boundary itself. border-strong is the same stroke role the
   kernel fallback uses for its links, so the two diagrams read as one visual language. */
.ub-diagram__rule {
  fill: none;
  stroke: var(--cds-border-strong-01, var(--cds-border-strong));
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.ub-diagram__side {
  fill: var(--cds-text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Only the stacked variant is drawn SVG now, so the item size is the 16 drawn units that
   variant was always given (17.9px on screen at 390); the 14-unit split-variant value went
   with the SVG legend it belonged to. */
.ub-diagram__item {
  fill: var(--cds-text-primary);
  font-family: inherit;
  font-size: 16px;
}

/* Squares, not icons: what stays with the client is drawn in the page ink, what sits on
   our side in the UI orange. Same accent logic as the kernel hub. */
.ub-diagram__yours rect {
  fill: var(--cds-text-primary);
}

.ub-diagram__ours rect {
  fill: var(--uru-orange-ui);
}

.ub-diagram__flow {
  fill: var(--uru-orange-ui);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ub-diagram__arrow {
  fill: none;
  stroke: var(--uru-orange-ui);
  stroke-width: 2;
}

.ub-diagram__arrow-head {
  fill: var(--uru-orange-ui);
}

.uru-boundary__caption {
  max-width: 34rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* ==========================================================================
   3. Access ledger
   ========================================================================== */

.uru-boundary__ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}

.ub-row {
  display: grid;
  grid-template-columns: var(--cds-spacing-07) 1fr;
  column-gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-06) 0;
  border-bottom: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
}

/* A row number, not the approval accent, so it takes ink rather than orange -- which
   is also what live does with its equivalent .uru-phase numbering. The orange was
   failing here anyway: --uru-orange-ui is picked for 4.57:1/6.15:1 against the PAGE,
   but this number sits on the row card, and orange-40 on layer-03 #525252 measured
   3.18:1 at 12px/600 against a 4.5:1 requirement. */
.ub-row__index {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--cds-text-secondary);
  font-family: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: var(--cds-heading-03-line-height, 1.4);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ub-row__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--cds-heading-03-font-size, 1.25rem);
  line-height: var(--cds-heading-03-line-height, 1.4);
  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
  font-weight: 600;
}

.ub-row__body {
  grid-column: 2;
  grid-row: 2;
  max-width: 40rem;
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

@media (min-width: 66rem) {
  .ub-row__body {
    font-size: var(--cds-body-02-font-size, 1rem);
    line-height: var(--cds-body-02-line-height, 1.5);
    letter-spacing: var(--cds-body-02-letter-spacing, 0);
  }
}

/* Closing panel 2026-07-28, a1. From lg the figure sits in a column the row-spanning ledger
   makes far taller than it needs, so the figure is where the space belongs: one token step up
   on each of the legend's three internal rhythms. A step change at a breakpoint is sanctioned
   (spacing FAQ), and more surrounding space is how the band says the figure carries its
   argument [spacing-overview]. 42rem to 65.98rem keeps the audited values. */
@media (min-width: 66rem) {
  .ub-legend__side {
    margin-bottom: var(--cds-spacing-06);
  }

  .ub-legend__items li + li {
    margin-block-start: var(--cds-spacing-07);
  }

  .ub-legend__flow {
    margin-top: var(--cds-spacing-09);
  }
}

/* ==========================================================================
   4. Marked owner gaps
   --------------------------------------------------------------------------
   These render loudly on purpose. Both are open decisions, and the band would make a
   claim the firm has not signed off if either were quietly filled with a plausible
   value. They are meant to be impossible to ship by accident.
   ========================================================================== */

.uru-boundary__gaps {
  margin: 0;
}

.ub-gap {
  max-width: 44rem;
  margin: var(--cds-spacing-05) 0 0;
  padding: var(--cds-spacing-05);
  background: var(--cds-layer-02, var(--cds-layer));
  border-inline-start: 3px solid var(--uru-orange-ui);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

.ub-gap__tag {
  margin-inline-end: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-02);
  /* text-primary rather than a border token: on the layer-02 gap panel, border-strong
     measures 2.35:1 in g90 and misses the 3:1 non-text floor. */
  border: 1px solid var(--cds-text-primary);
  font-family: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ==========================================================================
   5. Published sources
   The band that used to sit here had 0 links and 0 focusable controls across 746
   characters of text. These two are the fix as well as the provenance.
   ========================================================================== */

.uru-boundary__sources {
  max-width: 44rem;
  margin: var(--cds-spacing-06) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: var(--cds-body-01-line-height, 1.43);
}

/* ==========================================================================
   6. Column rhythm
   --------------------------------------------------------------------------
   Below lg everything stacks in DOM order: intro, diagram, ledger, gap markers,
   sources. That is the order a narrow screen and a screen reader want, since the gap
   markers annotate rows the reader has just gone through.

   From lg the four cells are pinned explicitly on Carbon's own 16-column grid, so the
   left column carries the diagram AND the notes under it while the ledger runs down the
   right across both rows. Letting the notes stay in the ledger column left roughly 750px
   of empty column under the diagram at 1440, which is the same dead-air defect the panel
   measured on the band this one replaces.
   ========================================================================== */

.uru-boundary__ledger-col {
  margin-bottom: 0;
}

/* Owner note 2026-08-03 (review console, note 8): the boundary diagram is gone, so the whole
   band is one reading order again. Everything that placed the old two-column split has gone
   with it, including .uru-boundary__visual, whose element no longer exists.
   That block had to go rather than be adjusted: it hard-placed the ledger at columns 9-16 and
   the sources line at 1-8, positions that only made sense while the figure held 1-8. After the
   figure was removed those rules survived and beat the column classes in the markup, so at
   1610px the heading sat left, the ledger was pushed to the right half, and the sources line
   hung alone in the middle of an empty field. Column placement now comes from the grid classes
   in the markup, which is the one place it should live. */
/* Owner note 2026-08-03: the four entries take the tile of #dla-kogo, so the page carries one
   card device instead of two. Values copied from .uru-path-card in v43-overrides.css rather
   than re-derived: spacing-06 padding, 2px border-interactive on top, layer-01 ground. The
   hairline rules the ledger used before go with it, because a tile that also carries rules
   reads as two devices stacked. */
.uru-boundary__ledger {
  border-top: 0;
}

/* Same device as .uru-path-card, one layer higher, because the ground differs. #dla-kogo sits
   on --cds-background and lifts its cards to layer-01; #od-zrodel carries
   .uru-home-section--tint, so its ground IS layer-01 and a layer-01 tile would be invisible
   (measured: both #fff). Carbon's layering answers this by stepping to the next layer, and
   using the token rather than a colour keeps the step correct in every theme. */
.ub-row {
  padding: var(--cds-spacing-06);
  border-bottom: 0;
  border-top: 2px solid var(--cds-border-interactive);
  background: var(--cds-layer-02);
}

.ub-row + .ub-row {
  margin-block-start: var(--cds-spacing-07);
}

.ub-row__body {
  color: var(--cds-text-secondary);
}

@media (min-width: 66rem) {
  /* Four entries, two up. The band regains the width the figure used to hold without the
     reader losing the 01-04 order: at this width both tiles of a row sit inside one fixation
     span, so the eye reads across before it drops. Below 66rem they stack, because two columns
     of body text in 480px is the grey scribble this section was rebuilt to avoid. */
  .uru-boundary__ledger {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cds-spacing-07);
  }

  /* The gap does the separating now, so the stacked-only margin would double it. */
  .ub-row + .ub-row {
    margin-block-start: 0;
  }

  /* Two-up makes the pair in a row equal height, and a stretched grid item hands its spare
     height to its own auto rows in equal shares. That pushed the shorter entry's body down by
     up to 34px, so the four bodies started on four different baselines. Content hugs the top
     and the spare height collects under it, inside the tile. */
  .ub-row {
    align-content: start;
  }
}