/* =============================================================================
   UORA public site — the composition layer
   web/assets/css/site.css

   Linked by every public page, AFTER tokens.css and base.css and BEFORE the
   page's own sheet. It is not linked by the consoles (web/app, web/r, web/arb,
   web/admin), which keep base.css exactly as it is.

   THE DIRECTION
   The public site is set as an instrument that happens to be a website: a
   twelve-column grid with a permanent margin rail, hairlines instead of boxes,
   and one gold index mark opening each numbered section. Every page is built
   from four things and nothing else — a rule, a label, a measure and a figure.
   There are no cards, no panels, no tinted plates and no shadows: what a card
   was standing in for is a hairline and a label.

   WHY THAT AND NOT SOMETHING ELSE
   p20 forbids pill-shaped cards and excessive softness; p21 asks for 1 px
   borders and no heavy shadows; p2's design principle is "reduce, align,
   structure — confidence through proportion and whitespace, not ornament".
   Taken to their conclusion those remove the card rather than soften it. p22
   then says "table-first where the work is procedural", and this product is a
   procedure with a timetable, so the timetable is a table and the money is a
   ledger.

   COLOUR
   Every colour here is a token from tokens.css, which is to say one of the
   sixteen brand colours or one of them at reduced opacity. There is exactly one
   literal in this file: the three stops of the Aurum gradient published on p14,
   declared once as tokens and referenced only by the home page's hero mark,
   which is the "large brand mark / hero graphic" p14 permits it on.

   TYPE
   The published scale on p17 and nothing between the steps:
     DISPLAY 64-80 / Regular / -2% / 0.98      H1 36-44 / Medium / -1% / 1.08
     H2      22-28 / Medium  /  0% / 1.15      BODY 15-18 / Regular / 0% / 1.5
     LABEL   11-13 / Medium  / +10-14% / uppercase
   Three weights only: 400, 500, 600.
   ============================================================================= */

/* ============================================================ the measure ===
   p20: 12 columns / 24 px gutters / 64-80 px outer margins on desktop;
   4 columns / 16 px gutters / 20-24 px outer margins on mobile.

   --u-max and --u-margin, the two that carry the outer margin, now live in
   tokens.css. They were declared here, and the signed-out door at /app/signin —
   which does not load this stylesheet — could not reach them, so its header sat
   72 px right of the landing page's. Moving two custom properties into the token
   file is a smaller change than linking the whole public sheet into a console
   page, and they are inert on any page that does not reference them.

   Declared on :root rather than on a page wrapper because site.js builds the
   header and the footer OUTSIDE <main>: a property scoped to the content would
   not inherit sideways and the chrome would sit on a different measure from the
   page, breaking the spine at both ends. */
:root {
  --u-gutter: var(--s-6);          /* 24px */

  /* The gold index segment that opens every ruled section. One 8px-rhythm unit
     wide and never more: it marks where a numbered section begins, it is not a
     bar and it is not a decoration. */
  --u-tick: 96px;

  /* p14's Aurum digital gradient, verbatim. "Optional premium treatment for
     large brand marks, hero graphics and motion." Its own AVOID list — legal
     documents, small icons, body UI, status indicators, printed forms — and
     p9's floor of 48 px rule it out everywhere else, so these three values are
     referenced by exactly one rule in the whole site: the home page mark. */
  --u-grad-top: #F6D59C;
  --u-grad-mid: #E7B66F;           /* Aurum 500, the flat production colour */
  --u-grad-base: #C88737;          /* Aurum 700 */
}

/* Below 720 px the grid becomes the book's mobile grid. The margin's own mobile
   step moved to tokens.css with the declaration it overrides; what is left here
   is the gutter and the index tick, which are public-page furniture. */
@media (max-width: 720px) {
  :root {
    --u-gutter: var(--s-4);        /* 16px */
    --u-tick: 48px;
  }
}

/* The header and the footer are built by site.js on `.shell`. Brought onto the
   page's own measure here so the lockup, every section rule and the footer
   notice all start on one vertical line. site.css is linked by the public pages
   only, so the consoles keep the 1200 px shell they are built for. */
.shell {
  max-width: var(--u-max);
  padding-inline: var(--u-margin);
}

.u-wrap {
  width: 100%;
  max-width: var(--u-max);
  margin-inline: auto;
  padding-inline: var(--u-margin);
}

.u-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--u-gutter);
}

@media (max-width: 720px) {
  .u-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The page itself. `.page__main` from base.css brings its own vertical padding;
   these pages set their own section rhythm, so it is dropped. */
.u-main {
  flex: 1 1 auto;
  padding-block: 0;
}

/* ================================================================= chrome ===
   The header stops being a tinted bar and becomes the top rule of the sheet:
   the same canvas as the page, one hairline, nothing else. A Carbon strip above
   an editorial page reads as an application shell, which the public site is
   not — the consoles are. */

.site-header {
  background: var(--bg);
  border-block-end-color: var(--border3);
}

.site-footer {
  background: var(--bg);
  border-block-start-color: var(--border3);
  padding-block: var(--s-10) var(--s-9);
}

/* The notice is the one piece of footer text a reader may actually have to
   read, so it keeps a prose measure rather than running the full 1440. */
.site-footer__notice {
  max-width: 78ch;
}

/* The lockup's 44 px tap target moved to `.wordmark` in base.css. It was scoped
   to `.site-header__brand` here, so the three surfaces that do not load this
   stylesheet — the consoles, the signed-out door, the respondent case file — did
   not get it. The mark is the same everywhere now, and so is the box around it. */

/* Touch. Below the collapse breakpoint every control is a thumb target, so the
   small buttons and the footer's links reach 44 px. Above it a pointer is
   precise and the shipped 40 px small step stands.

   Not scoped to the header any more: the small step also carries the recovery
   actions inside a failed notice — "Try again", "Write to support" — which are
   the controls a reader most needs to be able to hit, and which only appear when
   something has already gone wrong. */
@media (max-width: 720px) {
  .btn.bsm {
    min-height: 44px;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--s-2);
  }

  .site-footer__links {
    gap: 0 var(--s-6);
  }

  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================== the rules ===
   Two weights of rule and no third: Muted at 30% (--border3) for the boundary
   between one section and the next, Slate (--border) for everything inside a
   section. Every section rule opens with a 96 px Aurum segment — the page's
   index mark, and the only place Aurum touches structure rather than data. */

.u-sec,
.u-band,
.u-close {
  position: relative;
  border-block-start: var(--hairline) solid var(--border3);
}

.u-sec::before,
.u-band::before,
.u-close::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--hairline) * -1);
  inset-inline-start: var(--u-margin);
  width: var(--u-tick);
  height: var(--hairline);
  background: var(--accent);
}

/* Past the maximum measure the wrapper is centred, so the tick must be centred
   with it rather than pinned to the viewport edge. */
@media (min-width: 1440px) {
  .u-sec::before,
  .u-band::before,
  .u-close::before {
    inset-inline-start: calc((100% - var(--u-max)) / 2 + var(--u-margin));
  }
}

.u-sec {
  padding-block: var(--s-12);
}

.u-sec--tight {
  padding-block: var(--s-10);
}

/* ============================================== masthead / interior heading
   The first block of every page. On the home page it carries the proposition,
   the two actions and four particulars of record; on an interior page it
   carries the eyebrow, the title and the lead. Either way it is the only block
   on its page with no rule above it: the header's own hairline is that rule. */

.u-mast {
  position: relative;
  overflow: hidden;                /* crops the home page mark at the next rule */
}

.u-mast__inner {
  position: relative;
  padding-block: var(--s-10) var(--s-8);
}

.u-mast--interior .u-mast__inner {
  padding-block: var(--s-9) var(--s-10);
}

.u-mast__grid {
  position: relative;
  z-index: var(--z-raised);
}

.u-mast__eyebrow {
  grid-column: 1 / -1;
}

/* The eyebrow and, opposite it, the time in Dubai. p25: "use Dubai time
   explicitly where deadlines matter", and every period on this site is a Dubai
   period. It is not decoration — it is the one live fact on the page, and it
   makes the seat concrete before the reader has read a word about it. Set at
   LABEL size so it states itself and then gets out of the way. */
.u-mast__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block-end: var(--s-4);
  border-block-end: var(--hairline) solid var(--border);
}

.u-now {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
}

.u-now__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text2);
}

/* The figure, not a second label. p17 gives the +10-14% tracking to LABEL and to
   nothing else, and tokens.css is explicit that figures are "tabular-nums with
   zero tracking" — the whole point of the tabular class this element also
   carries. It had been taking --tr-micro and beating .tabular on source order,
   so the one clock on the site was set loose. */
.u-now__value {
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-num);
  color: var(--text);
}

/* The masthead's first child sets its own leading against the rule above it. */
.u-mast__top + .u-display,
.u-mast__top + .u-title {
  margin-block-start: var(--s-9);
}

/* DISPLAY, p17: 64-80 px, Regular, -2%, 0.98. The clamp lands on 64 px at 1280
   and 72 px from 1440 up, both inside the band, and steps down to 34 px on a
   phone, where a 64 px floor is not a rule anyone wrote for a 390 px screen. */
.u-display {
  grid-column: 1 / 9;
  max-width: 21ch;
  margin-block-start: var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: var(--fw-hero);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-display);
  color: var(--text);
  text-wrap: balance;
}

/* H1, p17: 36-44 px, Medium, -1%, 1.08. Interior pages open here, not at
   DISPLAY: the display step belongs to the proposition, and there is one
   proposition. */
.u-title {
  grid-column: 1 / 9;
  max-width: 24ch;
  margin-block-start: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-tight);
  color: var(--text);
  text-wrap: balance;
}

.u-lead {
  grid-column: 1 / 7;
  max-width: 56ch;
  margin-block-start: var(--s-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--text2);
}

/* A second paragraph under the lead, at body size — the page's own note about
   what it contains. Sits in the same columns so the measure does not jump. */
.u-mast__note {
  grid-column: 1 / 7;
  max-width: 60ch;
  margin-block-start: var(--s-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-actions {
  grid-column: 1 / -1;
  gap: var(--s-3);
  margin-block-start: var(--s-8);
}

/* Facts of record beside a page title — the version in force, the date it bears.
   Uppercase metadata (p18), separated by rules rather than by dots. */
.u-mast__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-5);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text2);
}

.u-mast__meta:empty {
  margin-block-start: 0;
}

/* Chips carry their own border and sit apart by the gap; the rule belongs
   between runs of text. Drawn inside a chip it read as a stray dash ("— IMMUTABLE"). */
.u-mast__meta > * + *:not(.chip)::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: var(--hairline);
  margin-inline-end: var(--s-5);
  vertical-align: middle;
  background: var(--accent);
}

/* /rules serves two views from one file and asks for a narrower reading measure
   for the list. The wrapper keeps its place on the spine — the left edge must
   still line up with the header lockup and every section rule — so it is the
   content inside it that is capped, not the box around it. */
.u-wrap.shell--narrow > * {
  max-width: 78ch;
}

/* ------------------------------------------------------------ particulars ---
   Facts of record under segmented hairlines: one rule per cell rather than one
   rule under the row, so the grid is legible in the rules themselves. This is
   what earns the masthead its height — it is the only block that carries the
   seat, the instrument in force, the mode of procedure and the standing of the
   award together. */

.u-particulars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-block-start: var(--s-9);
}

@supports not (grid-template-columns: subgrid) {
  .u-particulars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--u-gutter);
  }
}

.u-particulars__cell {
  grid-column: span 3;
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--border3);
}

.u-particulars dd {
  margin: 0;
  margin-block-start: var(--s-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-ui);
  color: var(--text);
}

/* Three particulars rather than four: four columns each on the twelve. */
.u-particulars--3 .u-particulars__cell { grid-column: span 4; }

/* ------------------------------------------------------------- the mark -----
   p14's gradient, on the one graphic the site has. The production geometry from
   uora-symbol-gold.svg, unaltered — four paths, stroke 10, round caps and joins;
   only the viewBox is tightened to the drawing's own bounds so the mark can be
   aligned to the outer margin rather than to a box of empty space around it.
   Nothing is redrawn, compressed, widened or moved (p7).

   Held at 10%, its right edge on the margin, its last tenth cropped by the
   masthead's closing rule, so it reads as an imprint in the sheet rather than as
   an illustration on it. Aurum 500 at 10% over Obsidian composites to
   rgb(30, 28, 25), against which Paper still reads 15.3:1 — the particulars that
   cross it lose nothing.

   Hidden below 900 px, where there is no room for it to be ambient. */

.u-mark {
  position: absolute;
  inset-block-end: calc(var(--s-11) * -1);
  inset-inline-end: var(--u-margin);
  height: clamp(430px, 34vw, 660px);
  width: auto;
  opacity: .10;
  pointer-events: none;
}

@media (min-width: 1440px) {
  .u-mark {
    inset-inline-end: calc((100% - var(--u-max)) / 2 + var(--u-margin));
  }
}

@media (max-width: 900px) {
  .u-mark { display: none; }
}

/* ======================================================== rail and section ===
   Columns 1-3 carry the section number, the heading and its marginal note;
   columns 4-12 carry the work. That one vertical line runs the height of every
   page and is the site's spine. */

.u-rail { grid-column: 1 / 4; }
.u-body { grid-column: 4 / -1; }

/* A narrower work column for pages whose work is prose rather than a table: the
   reader is reading down a measure, not across a sheet. */
.u-body--prose { grid-column: 4 / 11; }

.u-n {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  line-height: 1;
  color: var(--accent);
}

/* H2, p17: 22-28 px, Medium, 0%, 1.15. */
.u-h2 {
  margin-block-start: var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
  text-wrap: balance;
}

/* Gold on a run of words inside a heading.
   The accent is otherwise reserved for data labels and the primary action —
   "one premium accent", p13 of the guidelines — and this is a deliberate third
   use rather than a drift: the case-study heading carries the one claim on this
   page a reader is most likely to disbelieve, and the gold marks the half of the
   sentence that states the outcome rather than the subject.
   `var(--accent)` and not a literal, so it follows the light theme down to the
   deeper Aurum that holds 5.5:1 on Paper. */
.u-gold { color: var(--accent); }

.u-note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-note + .u-note {
  margin-block-start: var(--s-4);
}

/* A subheading inside the work column. H3 sits at the top of the body range,
   which is where the book puts it. */
.u-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
}

/* ============================================================== the clock ===
   The timetable, at the size the timetable deserves. Every landing page reaches
   for DISPLAY for its headline; this one spends it twice — once on the
   proposition, once on the periods, because six figures ARE the product. p13
   names "key numbers" as one of the six places Aurum belongs, and a binding
   period is the key number here, so the largest type on the page and the accent
   colour land on the same thing (p3 rule 04, p17).

   Carbon rather than Obsidian: the band is one movement, and it is where the
   70% of canvas in p13's balance is spent — two large fields rather than a page
   full of small tinted boxes. */

/* No closing rule: the section that follows a band draws its own opening one,
   and two hairlines a pixel apart read as a 2 px rule, which is a weight this
   system does not have. */
.u-band {
  background: var(--bg-1);
}

.u-band__inner {
  padding-block: var(--s-10);
}

.u-clock__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--u-gutter);
  align-items: start;
  margin-block-end: var(--s-9);
}

.u-clock__sign {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.u-clock__note {
  grid-column: 4 / 11;
  max-width: 76ch;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

/* Six periods across twelve columns: two each. */
/* A STAGE, which is what the periods actually belong to.
   The band used to be one row of six figures, which put the 48 hours a reviewer
   has to take a post down in the same line as the 10 days an arbitrator has to
   write an award — as though a reader were exposed to all six. Most disputes end
   in the first block and never reach the second. Each block therefore says what
   starts it, and the rule above it is the only device used to separate them:
   p21 asks for 1 px borders and no heavy shadows, and a page about deadlines is
   the last place to spend ornament. */
.u-stage + .u-stage { margin-block-start: var(--s-10); }

.u-stage__head {
  padding-block-start: var(--s-5);
  border-block-start: 2px solid var(--u-grad-mid);
  margin-block-end: var(--s-7);
  max-width: 62ch;
}

/* The one uppercase label on the band, at the size the book reserves for a
   LABEL. Aurum, because it marks the start of a stage and nothing else here
   does. */
.u-stage__n {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--u-grad-mid);
}

.u-stage__name {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-title);
  line-height: var(--lh-ui);
  /* Sentence case, against the site-wide h3 rule. The eyebrow above it is the
     uppercase label; a second uppercase line directly beneath would give the
     block two things shouting and no heading. */
  text-transform: none;
  letter-spacing: var(--tr-body);
  text-wrap: balance;
}

.u-stage__from {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-clock__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--u-gutter);
}

/* Sized to the block's own count, so a stage with one period does not leave five
   empty tracks and a stage with three does not stretch across six. The single
   cell keeps a column's width rather than running the full measure: a figure set
   across the whole page reads as a headline, not as one item in a timetable. */
/* Three, not six. A single cell in a sixth of the width wrapped its own
   "from" line to two while the three cells of Stage 2 sat comfortably in a
   third each — the same figure in the same band should occupy the same column.
   The row still starts at the left margin, so the stages align down their
   leading edge. */
.u-clock__row--one { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-clock__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.u-clock__cell {
  padding-block-start: var(--s-5);
  padding-inline-end: var(--s-5);
  border-block-start: var(--hairline) solid var(--border);
}

/* DISPLAY on the figure, Muted body on the unit. p13's other half is that gold
   is never body text: "48" is the key number, "hours" is the word around it. */
.u-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: var(--fw-hero);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.u-figure__unit {
  display: block;
  margin-block-start: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--tr-body);
  line-height: var(--lh-ui);
  color: var(--text2);
}

.u-clock__verb {
  display: block;
  margin-block-start: var(--s-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-ui);
  line-height: var(--lh-ui);
  color: var(--text);
}

.u-clock__from {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text3);
}

/* ================================================================= tables ===
   p22: "Table-first where the work is procedural." A procedure with stages and
   periods is a timetable, and a timetable that cannot be read down its own
   column is three columns of prose.

   Layout is fixed so the columns hold their widths whatever the prose does, and
   the period column is separated by a vertical rule so the eye can run down it
   alone. */

.u-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.u-table thead th {
  padding: 0 var(--s-5) var(--s-3) 0;
  text-align: start;
  vertical-align: bottom;
  border-block-end: var(--hairline) solid var(--border3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  /* Structural labels stay Muted. Aurum belongs to the labels that name a fact
     of record — the particulars and the verification block — so the two kinds
     of label are told apart at a glance. */
  color: var(--text2);
  white-space: nowrap;
}

.u-table tbody th,
.u-table tbody td {
  padding-block: var(--s-6);
  padding-inline-end: var(--s-5);
  vertical-align: top;
  text-align: start;
  border-block-end: var(--hairline) solid var(--border);
  font-weight: var(--fw-body);
}

.u-table tbody tr:last-child th,
.u-table tbody tr:last-child td {
  border-block-end: 0;
}

/* IT CARRIES WORDS NOW, NOT ORDINALS. From 29-09-2026 the steps read
   Prerequisite, Stage 1 and Stage 2 rather than 01, 02, 03, on the operator's
   instruction — the same thing said in words a reader does not have to decode.

   `tabular-nums` and the numeric tracking went with the numbers: figure spacing
   applied to letters sets them loose and uneven. It takes the label treatment
   instead, which is what the interstitial below already uses, so the two
   Aurum markers in this table are set the same way. */
.u-table__n {
  display: block;
  font-family: var(--font-display);
  /* SMALLER THAN THE OTHER LABELS ON THE PAGE, at the operator's instruction of
     30-09-2026. "Prerequisite", "Stage 1" and "Stage 2" are markers ON a step,
     not headings of one: the name beside each is what the eye should land on,
     and at `--fs-micro` the two were competing. 11px is the bottom of the
     documented LABEL band rather than a number picked to look right. */
  font-size: var(--fs-micro-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
}

.u-table__name {
  display: block;
  margin-block-start: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
}

.u-table__what {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-table__served {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text3);
}

.u-table__when {
  padding-inline-start: var(--s-6);
  border-inline-start: var(--hairline) solid var(--border);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
  font-variant-numeric: tabular-nums;

  /* THIS CELL IS WHAT CONTAINS THE `nowrap` FIGURE INSIDE IT. `.u-table` is
     `table-layout: fixed`, so the cell's width is settled before its contents are
     laid out — which bounds the BOX and does nothing at all about the ink. The
     `<b>` below is `white-space: nowrap`, and an inline box has no clipping box of
     its own, so a long figure painted straight through the cell, through the table
     and off the page. Horizontal only: the cell's prose wraps and must keep its
     descenders. */
  overflow-x: clip;
}

/* A period is the key number (p13). The quantity takes the accent; the sentence
   around it never does. `nowrap` because a period is one figure: "2 days" must
   never break to "2 / days" — a gold fragment stranded at the start of a line
   stops reading as a quantity and starts reading as a mistake.

   `.u-when-fig` is the same figure outside the table, and it is worth saying that
   nothing in the repository uses it — it is a name kept beside the one that is.
   The rule under this one gives it a box of its own, because as an inline span it
   could not contain itself and the overflow audit measures a class on its own: it
   had this one at 1,319px of page drift on 27-09-2026. Inside the table the `<b>`
   stays inline and `.u-table__when` above does the containing. */
.u-table__when b,
.u-when-fig {
  font-weight: var(--fw-strong);
  color: var(--accent);
  white-space: nowrap;
}

.u-when-fig {
  display: inline-block;
  max-inline-size: 100%;
  overflow-x: clip;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* A step with no period is an event, not a deadline, and says so in words.
   Colour is a secondary cue only (p22). */
.u-table__when--none {
  color: var(--text2);
}

/* The column head carries the label at desktop, so the in-cell label is hidden
   until the table stacks. */
.u-table__label {
  display: none;
}

/* An UNNUMBERED interstitial between two stage rows: on the landing page, the
   step where the reader opens a case, sitting between "Add the clause" and
   "File a notice" without becoming a fourth stage.

   THE SAME REGISTER AS `.u-lg__either` in the fee ledger, deliberately, because
   it does the same job — a line of micro type that separates two rows and says
   what happens between them. What it does NOT copy is that rule's
   `margin-block`: margin on a table cell is ignored, so the air has to be
   padding, and the hairline it draws for itself is already there as the bottom
   border of the row above.

   THE SELECTOR IS LONG ON PURPOSE. `.u-table tbody td` sets the row rhythm at
   one class and two elements, so a bare `.u-table__either` loses to it on
   specificity and the cell keeps the full stage padding — which is right for a
   stage and wrong for the thing between two of them. */
.u-table tbody td.u-table__either {
  padding-block: var(--s-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent);
}

/* AND THE PILL CAME OFF ON 30-09-2026, AT THE OPERATOR'S INSTRUCTION.
   "do not make it a button just normal text in the gold color."

   The two notes this replaces are kept in substance because they are the record
   of a decision being made twice. The underline came off on 29-09 ("no need for
   underlining"); a bordered pill went on in its place, on the reasoning that the
   cell is already Aurum so colour cannot mark the link, this is the only
   clickable thing in the table, and a mark that appears on hover does not exist
   on a touch screen.

   That reasoning was sound and it has been overruled, which is the operator's
   call to make about their own page. WHAT IT COSTS, recorded rather than argued:
   the link now carries no affordance of its own. It is Aurum on a row that is
   entirely Aurum, and on a touch screen there is nothing to tell a reader it can
   be pressed. The hero and the foot of the page both still carry a real `.btn`
   to the same destination, so the action is not unreachable — this row is the
   third of three. */
.u-table tbody td.u-table__either a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

/* Hover is all that is left to mark it, and it has no pill to fill any more.
   `--text` rather than a brighter Aurum: there is no stronger accent token, and
   inventing one for a single hover would put a colour into the system that
   nothing else answers to. Focus-visible below is untouched — the keyboard
   affordance was never the one in question. */
.u-table tbody td.u-table__either a:hover {
  color: var(--text);
}

.u-table tbody td.u-table__either a:focus-visible {
  outline: var(--focus-outline-width) solid var(--accent);
  outline-offset: 2px;
}

/* Column proportions. Two shapes: three columns for the landing page's stage
   table, four for the full docket on /how-it-works. */
.u-table--stages .u-c-step { width: 26%; }
.u-table--stages .u-c-what { width: 46%; }
.u-table--stages .u-c-when { width: 28%; }

.u-table--docket .u-c-n      { width: 7%; }
.u-table--docket .u-c-what   { width: 42%; }
.u-table--docket .u-c-period { width: 22%; }
.u-table--docket .u-c-from   { width: 29%; }

.u-table--docket tbody th,
.u-table--docket tbody td {
  padding-block: var(--s-5);
}

.u-table__ord {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  color: var(--text2);
}

.u-table__from {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text2);
}

/* A stage band inside the docket. The boundary is a real event — the Stage 2
   fee is paid at step 06 and the Request is served at step 07 — so each half of
   the sheet carries the fee it is the fee for. */
.u-stage__cell {
  padding-block: var(--s-4);
  border-block-end: var(--hairline) solid var(--border3);
  background: var(--bg-1);
}

.u-stage__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.u-stage__name {
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text);
}

.u-stage__fee {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text2);
}

.u-stage__fee .money {
  font-size: var(--fs-small);
  letter-spacing: var(--tr-num);
  color: var(--accent);
  text-transform: none;
}

/* Below 900 px a multi-column table cannot be read across, so each row becomes
   a block: the step, then the prose, then the period under its own rule with
   its label restored. The markup does not change and the row order still
   carries the sequence, so it is still a table to anything that wants one. */
@media (max-width: 900px) {
  .u-table,
  .u-table tbody,
  .u-table tbody tr,
  .u-table tbody th,
  .u-table tbody td {
    display: block;
    width: auto;
  }

  .u-table thead { display: none; }

  .u-table tbody tr {
    padding-block: var(--s-6);
    border-block-end: var(--hairline) solid var(--border);
  }

  .u-table tbody tr:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .u-table tbody th,
  .u-table tbody td {
    padding: 0;
    border-block-end: 0;
  }

  .u-table__what { margin-block-start: var(--s-3); }

  .u-table__when,
  .u-table__from {
    margin-block-start: var(--s-4);
    padding-block-start: var(--s-3);
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: var(--hairline) solid var(--border);
  }

  .u-table__label {
    display: block;
    margin-block-end: var(--s-1);
    color: var(--text2);
  }

  /* The stage band keeps its own rule and its fee but stops pretending to be a
     table row. */
  .u-stage__cell {
    padding-block: var(--s-4);
    background: none;
  }
}

/* ================================================================ ledgers ===
   Money is a ledger: item on the left, figure right-aligned in Aurum, one
   hairline between rows. Two of them side by side is the one composition on the
   site that is symmetrical rather than railed, because it is the one place two
   things have to be told apart — what UORA charges, and what an award may order
   against the other party. The copy works hard at that distinction; the layout
   says it first. */

.u-lg {
  margin-block-start: var(--s-8);
}

.u-lg__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--s-7);
  padding-block: var(--s-5);
  border-block-start: var(--hairline) solid var(--border);
}

.u-lg__row:last-child {
  border-block-end: var(--hairline) solid var(--border);
}

/* The total of a schedule of figures: the rule above it is the brighter one, the
   way a ruled account closes. */
.u-lg__row--total {
  border-block-start-color: var(--border3);
}

/* A row may open with a stage label. It heads the whole row rather than sitting
   inside the item, because the row is baseline-aligned: with the label inside
   the item, the figure aligned to the LABEL's baseline, while the ledger
   opposite — which has no labels — aligned its figures to the item's. The two
   are presented as a matched pair and the copy leans on that, so a figure has to
   pair with the thing it is the price of on both sides. Measured, the figures
   were hanging 28 px apart in the two halves. */
.u-lg__row > .fl {
  grid-column: 1 / -1;
  margin-block-end: var(--s-2);
}

.u-lg__name {
  margin-block-start: var(--s-2);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  color: var(--text);
}

.u-lg__body > .u-lg__name:first-child {
  margin-block-start: 0;
}

.u-lg__note {
  margin-block-start: var(--s-2);
  max-width: 46ch;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text3);
}

/* The one claim in the ledger, against the Stage 1 fee: most disputes end there
   and never reach a second payment. It is set apart from the notes above it
   because it is not part of the list of what the fee includes — it is the reason
   the fee is usually the whole cost — but it stays quiet: an Aurum rule at the
   leading edge and the ordinary body colour, no tinted panel and no badge. p21
   asks for 1 px borders, and a price list is not the place to start shouting. */
.u-lg__claim {
  margin-block-start: var(--s-3);
  max-width: 46ch;
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--u-grad-mid);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

.u-lg__claim strong { font-weight: var(--fw-ui); }

/* The figure. p13 names key numbers as Aurum's proper work, and an amount in a
   ledger is the key number. Tabular so the column lines up down the page, at the
   H2 step so it can be read from across a room.
   Clipped as well as unbreakable, for the reasons set out at `.money` in base.css
   — this is the widest-drifting class the overflow audit found on 27-09-2026, at
   1,856px, because the figure is set at 28px and the row collapses to one column
   below 900px, so the whole of it lands in a 350px box. Below 900px the rule under
   that breakpoint also makes this `text-align: start`, which is where the ellipsis
   does its work; above it the figure sits in a max-content grid track and never
   reaches the ceiling. */
.u-lg__amt {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-num);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
  max-inline-size: 100%;
  overflow-x: clip;
  text-overflow: ellipsis;
  text-align: end;
}

/* A smaller ledger for a schedule of many small figures — the court fees, say —
   where the H2 step would shout. */
.u-lg--compact .u-lg__row { padding-block: var(--s-4); }
.u-lg--compact .u-lg__amt { font-size: var(--fs-lead); }

.u-lg__loading {
  padding-block: var(--s-6);
  border-block: var(--hairline) solid var(--border);
}

.u-notes {
  margin-block-start: var(--s-5);
  max-width: 52ch;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text3);
}

.u-notes > p + p { margin-block-start: var(--s-2); }

/* -------------------------------------------------------------- the band ----
   Two halves on the twelve columns with one hairline down the exact centre.
   Twelve equal columns with equal gutters put the centre of the middle gutter at
   exactly 50%, so the rule needs no fudge factor. */

.u-halves {
  position: relative;
  padding-block: var(--s-12);
  grid-template-rows: auto auto auto 1fr;
}

.u-halves::before {
  content: '';
  position: absolute;
  inset-block: var(--s-12);
  inset-inline-start: 50%;
  width: var(--hairline);
  background: var(--border3);
}

.u-half { align-content: start; }

/* Both halves are laid on the same four rows — number, heading, note, ledger —
   so the two ledgers open on the same line however many lines each note runs to.
   Without it the whole comparison is twenty pixels out of register, which is the
   one thing a page built on alignment cannot be. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .u-half {
      display: grid;
      grid-row: 1 / span 4;
      grid-template-rows: subgrid;
    }
  }
}

@supports not (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .u-half__note { min-height: calc(var(--fs-small) * var(--lh-body) * 3); }
  }
}

/* The inset each side of the centre rule is one gutter, so the clearance is a
   grid quantity rather than a number that looked about right. */
.u-half--start { grid-column: 1 / 7; padding-inline-end: var(--s-6); }
.u-half--end   { grid-column: 7 / -1; padding-inline-start: var(--s-6); }

.u-half__note {
  max-width: 52ch;
  margin-block-start: var(--s-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

@media (max-width: 900px) {
  .u-halves::before { display: none; }
  .u-halves { grid-template-rows: none; }

  .u-half--start,
  .u-half--end {
    display: block;
    grid-column: 1 / -1;
    grid-row: auto;
    padding-inline: 0;
  }

  .u-half--end {
    margin-block-start: var(--s-11);
    padding-block-start: var(--s-9);
    border-block-start: var(--hairline) solid var(--border3);
  }
}

/* ================================================================ records ===
   What a card was standing in for: a label, a rule and a measure. No fill, no
   border on four sides, no radius, no shadow. Records hang off the same spine as
   everything else, so they sit at columns 4-8 and 9-12. */

.u-record {
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--border3);
}

/* ONE RECORD, NOT TWO. The Roster card that used to sit at 9/-1 is gone, and a
   card still ending at column 9 would float half-width against an empty right
   half. `--b` is kept defined: it costs nothing, and a second record returning
   to this row is the likeliest future edit. */
.u-record--a { grid-column: 4 / -1; }
.u-record--b { grid-column: 9 / -1; }

.u-record__body {
  margin-block-start: var(--s-5);
  min-height: 92px;
}

.u-record__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
}

.u-record__dated {
  margin-block-start: var(--s-1);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  color: var(--text2);
}

.u-record__note {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-record__action {
  margin-block-start: var(--s-5);
}

/* The digests. p24 makes the hash part of one consistent verification identity —
   document id, case number, hash, verify URL — so it is set as one: uppercase
   label, mono value, ruled, and nothing else. */
.u-digests {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--border);
}

.u-digests dt {
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text2);
}

.u-digests dd {
  margin: 0;
  margin-block-start: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* A count, set as the figure it is. */
.u-count {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.u-count__n {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-title);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.u-count__label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-ui);
  color: var(--text);
}

/* ================================================================== lists ===
   An item in a schedule of things, marked by a hairline rather than by a bullet
   or a tick. A tick reads as "done" and these are not things that have happened;
   a disc is a decoration. A 12 px rule is the same object the rest of the page
   is built from, at the smallest size it exists in. */

.u-marks {
  display: grid;
  gap: var(--s-5);
  max-width: 68ch;
}

.u-marks li {
  position: relative;
  padding-inline-start: var(--s-7);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-marks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 12px;
  height: var(--hairline);
  background: var(--accent);
}

.u-marks strong,
.u-marks b {
  color: var(--text);
  font-weight: var(--fw-strong);
}

/* A definition list set as ruled records: term above, value below, one hairline
   per pair. Used where a page states particulars that are neither a timetable
   nor money — the contact page, the operator's identification. */
.u-defs {
  display: grid;
  gap: 0;
  max-width: 68ch;
}

.u-defs__row {
  padding-block: var(--s-5);
  border-block-start: var(--hairline) solid var(--border);
}

.u-defs__row:last-child {
  border-block-end: var(--hairline) solid var(--border);
}

.u-defs dd {
  margin: 0;
  margin-block-start: var(--s-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

.u-defs dd + dd {
  margin-block-start: var(--s-2);
}

/* ================================================================ entries ===
   A record in a list of records — an arbitrator on the Roster, a version of the
   Rules. A hairline, a name and the text. No fill, no radius, no shadow.

   base.css's `.tabs` is a tinted strip with a filled selected state; inside a
   ruled entry that strip is the loudest object on the sheet, so the bilingual
   switch is restated here as two labels under one hairline, with the selected
   one marked by an Aurum rule beneath it — the same rule the rest of the page is
   built from, at the smallest size it exists in. */

.u-entry + .u-entry {
  margin-block-start: var(--s-9);
}

.u-entry {
  padding-block-start: var(--s-5);
  border-block-start: var(--hairline) solid var(--border3);
}

.u-entry__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
}

.u-entry .tabs {
  display: flex;
  gap: var(--s-6);
  margin-block-start: var(--s-5);
  padding: 0;
  border: 0;
  border-block-end: var(--hairline) solid var(--border);
  background: none;
  border-radius: 0;
  /* base.css scrolls its tab strip, which paints a thin scrollbar at the end of
     a strip of two labels that always fit. */
  overflow: visible;
  scrollbar-width: auto;
}

.u-entry .tab {
  position: relative;
  padding: 0 0 var(--s-3);
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text2);
}

.u-entry .tab::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--hairline) * -1);
  height: var(--hairline);
  border-radius: 0;
  background: transparent;
}

/* Uppercase and positive tracking are Latin devices; neither does anything to
   an Arabic label except make it small. The endonym is set at caption size in
   its own case, in the Arabic UI face the brand specifies (p16). */
.u-entry .tab[lang="ar"] {
  font-size: var(--fs-caption);
  letter-spacing: 0;
  text-transform: none;
}

.u-entry .tab[aria-selected="true"] {
  color: var(--accent);
}

.u-entry .tab[aria-selected="true"]::after {
  background: var(--accent);
}

.u-entry .tabpanel {
  margin-block-start: var(--s-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-entry .tabpanel > * + * {
  margin-block-start: var(--s-4);
}

/* An Arabic panel is set in the Arabic UI face and reads right to left. The
   brand asks for clear bilingual separation rather than mixed scripts (p16). */
.u-entry .tabpanel[lang="ar"],
.u-entry .tab[lang="ar"] {
  font-family: 'Noto Sans Arabic', var(--font-sans);
}

.u-entry .u-prose section + section {
  margin-block-start: var(--s-8);
}

.u-entry .u-prose h3 {
  margin-block-start: 0;
}

/* ================================================================== prose ===
   Long-form legal text — the notice, the terms, the privacy statement. One
   measure, generous leading, the section heading on the rail rather than in the
   flow, and references underlined so a reader can see what is a reference
   without hovering. */

.u-prose {
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text2);
}

.u-prose > * + * {
  margin-block-start: var(--s-5);
}

.u-prose h3 {
  margin-block-start: var(--s-8);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
}

.u-prose h3 + * {
  margin-block-start: var(--s-3);
}

.u-prose strong { color: var(--text); font-weight: var(--fw-strong); }

.u-prose a { text-decoration: underline; }

.u-prose ul,
.u-prose ol {
  display: grid;
  gap: var(--s-3);
  padding-inline-start: 0;
  list-style: none;
}

.u-prose li {
  position: relative;
  padding-inline-start: var(--s-7);
}

.u-prose ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 12px;
  height: var(--hairline);
  background: var(--accent);
}

.u-prose ol { counter-reset: u-ol; }

.u-prose ol > li { counter-increment: u-ol; }

.u-prose ol > li::before {
  content: counter(u-ol, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  line-height: var(--lh-prose);
  color: var(--accent);
}

/* A quoted instrument — the model clause, a rule reproduced verbatim. Ruled at
   the start edge rather than boxed. */
.u-quote {
  padding-inline-start: var(--s-6);
  border-inline-start: 2px solid var(--accent-line);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-prose);
  color: var(--text);
}

/* ================================================================= Arabic ===
   base.css self-hosts Noto Sans Arabic with a unicode-range, and that is the
   brand's interface Arabic face (p16). It is named here rather than left to the
   unicode-range to pick up, because the fallback chain behind it matters on a
   machine where the woff2 has not arrived.

   Noto Naskh Arabic is deliberately NOT named. The brand reserves the naskh cut
   for legal documents, where lib/pdf.js embeds it; a web page is interface
   Arabic and gets the sans cut.

   Two corrections follow the face. Tracking: the body sets --tr-body and a
   label sets a positive --tr-micro, and either applied to Arabic pulls a joined
   script apart at the ligatures — a matter of legibility, not taste. Leading:
   Arabic carries deeper ascenders and descenders than Latin, so Latin body
   leading crowds it. p16 asks for clear bilingual separation rather than mixed
   scripts, which is why these are scoped to [lang="ar"] and never applied to a
   mixed run. */

[lang="ar"] {
  font-family: var(--font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, var(--font-sans));
  letter-spacing: 0;
  line-height: 1.85;
}

[lang="ar"].fl,
[lang="ar"] .fl {
  letter-spacing: 0;
  text-transform: none;
}

/* ======================================================= published notices ===
   The notice PLM must publish appears in the footer of every page at
   --fs-small. On /legal it is the content of the page rather than furniture, so
   it is set at reading size in the full ink colour, on a prose measure.

   Both language versions carry the same class. The Arabic gets a slightly
   shorter measure because it sets denser than Latin at the same point size and
   would otherwise run long. */

.u-notice-text {
  max-width: 68ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--text);
}

/* The measure belongs to the block, not to the paragraph, so the label and the
   text it names share one right edge. Arabic reads right to left: its first
   character is at the block's right edge, and a label that ran the full column
   width would hang past the text it names — 137 px of it at 1745. Setting the
   block at reading size also makes `ch` mean the same thing for both children,
   which it does not when a 12 px label and an 18 px paragraph are each given a
   measure of their own.

   The Arabic block is shorter because Arabic sets denser than Latin at the same
   point size and would otherwise run long. */
.u-notice-block {
  max-width: 68ch;
  font-size: var(--fs-lead);
}

.u-notice-block--ar {
  max-width: 60ch;
}

/* The rule between the English and the Arabic. The product's bilingual
   documents separate the two languages with an accent hairline
   (.document-view .lang-break in base.css); that rule is scoped to the document
   surface, so the same treatment is restated here for the dark surface rather
   than the scope being widened. */
.u-lang-rule {
  height: 0;
  border: 0;
  border-block-start: 2px solid var(--accent-line);
  margin-block: var(--s-8);
}

/* <address> is reset to upright in base.css — there is no italic in the system.
   What it still needs is one line per line: a postal address is a block of
   lines, not a sentence. */
.u-address span {
  display: block;
}

/* ============================================================== scaffolds ===
   The section headings of a document that has not been written yet. Built to
   read as a table of contents and never as prose: a reader must be able to tell
   at a glance that these are headings awaiting text, and never mistake the page
   for the document itself.

   Each row carries the words "Text to follow". The quieter colour is
   reinforcement; the words are what carry the meaning, which is the same rule
   p22 states for status in a table. */

.u-scaffold {
  display: grid;
  counter-reset: u-scaffold;
  max-width: 68ch;
}

.u-scaffold__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  flex-wrap: wrap;
  padding-block: var(--s-4);
  border-block-start: var(--hairline) solid var(--border);
  counter-increment: u-scaffold;
}

.u-scaffold__item:last-child {
  border-block-end: var(--hairline) solid var(--border);
}

.u-scaffold__heading {
  flex: 1 1 24ch;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  letter-spacing: var(--tr-body);
  line-height: var(--lh-ui);
  color: var(--text2);
}

.u-scaffold__heading::before {
  content: counter(u-scaffold, decimal-leading-zero) '  ';
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  color: var(--text3);
  white-space: pre;
}

.u-scaffold__state {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text3);
}

/* ================================================================== notes ===
   A standing note that is not an alert. base.css's `.notice` is a filled plate
   with a radius and an icon; on a page with no cards that plate is the loudest
   object on the sheet. Here a note is a ruled aside: one hairline at the start
   edge, no fill, no radius, no icon. */

.u-aside {
  padding-inline-start: var(--s-5);
  border-inline-start: var(--hairline) solid var(--accent-line);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-aside > * + * {
  margin-block-start: var(--s-3);
}

.u-aside__title {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent);
}

/* ================================================================== close ===
   The H1 step is used once at the foot of a page, on a sentence already made
   above it. Nothing new is claimed at the bottom of a page. */

.u-close {
  padding-block: var(--s-12);
}

.u-close__line {
  grid-column: 1 / 8;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-tight);
  color: var(--text);
  text-wrap: balance;
}

.u-close__actions {
  grid-column: 8 / -1;
  align-self: end;
  justify-content: flex-end;
  gap: var(--s-3);
}

/* ================================================================ loading ===
   p23, verbatim: "The five symbol terminals may animate sequentially on loading
   and verification screens." Every figure of record this site reads from the API
   — the fee for each stage, the version in force, its digests, the Roster count
   — waits behind the terminals rather than behind a grey bar.

   The terminals keep the symbol's own x positions (22, 40, 60, 80, 98) and its
   own staggered heights with the centre highest (p7), so they are a true
   derivative rather than a new drawing. Flat Aurum, never the gradient: p14
   forbids the gradient on small icons and status indicators, and p9 forbids it
   under 48 px. */

.u-load {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}

.u-load__svg {
  height: 18px;
  width: auto;
}

.u-load__svg path {
  opacity: .24;
  animation: u-terminals 1100ms var(--ease-out) infinite;
}

.u-load__svg path:nth-child(1) { animation-delay: 0ms; }
.u-load__svg path:nth-child(2) { animation-delay: 140ms; }
.u-load__svg path:nth-child(3) { animation-delay: 280ms; }
.u-load__svg path:nth-child(4) { animation-delay: 420ms; }
.u-load__svg path:nth-child(5) { animation-delay: 560ms; }

/* 180 ms of rise inside a 1100 ms cycle — inside p23's 120-220 ms band —
   ease-out, opacity only. No bounce, no elastic, no scale, nothing
   celebratory. */
@keyframes u-terminals {
  0%   { opacity: .24; }
  16%  { opacity: 1; }
  46%  { opacity: .24; }
  100% { opacity: .24; }
}

/* The terminals device used once as a sign, at the head of the clock band. Its
   terminals rise in sequence on entry and then stop: p23 permits the sequence on
   a loading screen, and an ambient repeat would be the celebratory motion the
   same page forbids. */
.u-sign {
  flex: 0 0 auto;
  height: 34px;
  width: auto;
  color: var(--accent);
}

.u-sign path {
  animation: u-rise 200ms var(--ease-out) both;
}

.u-sign path:nth-child(1) { animation-delay: 120ms; }
.u-sign path:nth-child(2) { animation-delay: 210ms; }
.u-sign path:nth-child(3) { animation-delay: 300ms; }
.u-sign path:nth-child(4) { animation-delay: 390ms; }
.u-sign path:nth-child(5) { animation-delay: 480ms; }

@keyframes u-rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* base.css neutralises durations wholesale under reduced motion, which would
   leave the loading terminals resting at .24 and reading as disabled, and the
   sign held at whatever its delay froze it on. Both are stopped outright and
   held at full strength instead. */
@media (prefers-reduced-motion: reduce) {
  .u-load__svg path,
  .u-sign path {
    animation: none;
    opacity: 1;
  }
}

/* ================================================ shared components, restyled
   /rules and /clause build their markup in JavaScript out of the base.css
   component set — .card, .notice, .table, .tabs, .kv, .badge, .empty. Their
   logic is right and their content is the instrument itself, so nothing about
   them is rewritten: the components are restated here in the public site's own
   language instead, and the two pages inherit the direction without a line of
   JavaScript changing.

   This section is why site.css is linked by the public pages only. The consoles
   (web/app, web/r, web/arb, web/admin) load base.css and not this file, so every
   rule below stops at the edge of the public site and the product keeps the
   card, the plate and the tinted table it is built for. */

/* A card becomes a record: a hairline, a label and a measure. No fill, no
   gradient, no radius, no shadow (p20, p21). */
.u-main .card,
.u-main .form.card {
  padding: var(--s-5) 0 0;
  border: 0;
  border-block-start: var(--hairline) solid var(--border3);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.u-main .card--interactive:hover {
  border-color: var(--border3);
  box-shadow: none;
}

.u-main .card--compact {
  padding: var(--s-4) 0 0;
  border-radius: 0;
}

.u-main .card--action {
  border-block-start-color: var(--accent);
}

.u-main .card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
}

.u-main .card__foot {
  border-block-start-color: var(--border);
}

/* A notice becomes a ruled aside — the same object as .u-aside, so a note built
   in JavaScript and a note written in the markup look like one thing. The icon
   goes: on a page with no plates, a glyph in a tinted box is the loudest object
   on the sheet, and every one of these notices already states its subject in a
   title line. */
.u-main .notice {
  display: block;
  padding: 0 0 0 var(--s-5);
  border: 0;
  border-inline-start: var(--hairline) solid var(--accent-line);
  border-radius: 0;
  background: none;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
}

.u-main .notice > * + *,
.u-main .notice__body > * + * {
  margin-block-start: var(--s-3);
}

.u-main .notice svg {
  display: none;
}

.u-main .notice__title {
  display: block;
  margin-block-end: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent);
}

/* The state variants keep their meaning but express it in the rule rather than
   in a fill. p22: colour is a secondary cue; the words carry the status. */
.u-main .notice--accent { border-inline-start-color: var(--accent); background: none; }
.u-main .notice--ok     { border-inline-start-color: var(--ok-line); background: none; }
.u-main .notice--warn   { border-inline-start-color: var(--warn-line); background: none; }
.u-main .notice--danger { border-inline-start-color: var(--danger-line); background: none; }

.u-main .notice--ok .notice__title     { color: var(--ok); }
.u-main .notice--warn .notice__title   { color: var(--warn); }
.u-main .notice--danger .notice__title { color: var(--danger); }

/* A table stops being a boxed panel and becomes a ruled sheet, the same one the
   timetable and the docket are set on. */
.u-main .table-wrap {
  border: 0;
  border-radius: 0;
  background: none;
}

.u-main .table {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.u-main .table caption {
  padding: 0 0 var(--s-4);
  color: var(--text2);
  font-size: var(--fs-small);
}

.u-main .table thead th {
  position: static;
  padding: 0 var(--s-5) var(--s-3) 0;
  background: none;
  border-block-end: var(--hairline) solid var(--border3);
  color: var(--text2);
}

.u-main .table th,
.u-main .table td {
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  border-block-end: var(--hairline) solid var(--border);
}

.u-main .table tbody tr:hover {
  background: none;
}

.u-main .table tbody th {
  font-weight: var(--fw-ui);
  color: var(--text);
}

/* The label/value grid keeps its shape; only the label takes the site's own
   metadata treatment. */
.u-main .kv {
  gap: var(--s-4) var(--s-6);
  font-size: var(--fs-body-sm);
}

.u-main .kv dt {
  color: var(--accent);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
}

/* A digest badge is a fact of record, set the way p24 sets one: mono, quiet,
   unboxed. */
.u-main .badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
}

/* The bilingual switch, wherever it appears on the public site: two labels
   under one hairline, the selected one marked by an Aurum rule beneath it. */
.u-main .tabs {
  gap: var(--s-6);
  padding: 0;
  border: 0;
  border-block-end: var(--hairline) solid var(--border);
  background: none;
  border-radius: 0;
  overflow: visible;
  scrollbar-width: auto;
}

.u-main .tab {
  padding: 0 0 var(--s-3);
  border-radius: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
}

.u-main .tab[aria-selected="true"]::after {
  inset-inline: 0;
  inset-block-end: calc(var(--hairline) * -1);
  height: var(--hairline);
  border-radius: 0;
}

.u-main .tab[lang="ar"] {
  font-size: var(--fs-caption);
  letter-spacing: 0;
  text-transform: none;
}

/* An empty or failure state is a ruled aside too, left-aligned: a centred
   column of text on a page built on a spine is the one thing on it that answers
   to nothing. */
.u-main .empty {
  align-items: flex-start;
  padding: 0 0 0 var(--s-5);
  border: 0;
  border-inline-start: var(--hairline) solid var(--accent-line);
  border-radius: 0;
  background: none;
  text-align: start;
}

.u-main .empty__icon {
  display: none;
}

.u-main .empty__title {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================= the actions ==
   There is no shadow anywhere on the public site. p21: "1 px borders, no heavy
   shadows" — and on a page with no other shadow a glow under one button is the
   loudest thing on the sheet. */

.u-actions .btn,
.u-close__actions .btn,
.u-record__action .btn {
  box-shadow: none;
}

/* ============================================================== responsive ==
   Below 1100 px the rail stops being a rail. A 250 px marginal note beside a
   three-column timetable leaves the timetable 600 px, at which point the periods
   wrap four deep and a gold figure breaks across a line. So the section head
   moves above the work and the work takes the whole measure. */

@media (max-width: 1100px) {
  .u-display,
  .u-title,
  .u-lead,
  .u-mast__note,
  .u-rail,
  .u-body,
  .u-body--prose {
    grid-column: 1 / -1;
  }

  .u-note { max-width: 68ch; }

  .u-body,
  .u-body--prose { margin-block-start: var(--s-8); }

  .u-record--a,
  .u-record--b { margin-block-start: var(--s-8); }

  .u-record--a { grid-column: 1 / -1; }
  .u-record--b { grid-column: 7 / -1; }

  .u-particulars__cell { grid-column: span 6; }

  .u-clock__sign { grid-column: 1 / -1; }
  .u-clock__note { grid-column: 1 / -1; margin-block-start: var(--s-5); }

  .u-clock__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-8); }
  /* The single-cell stage narrows with everything else rather than keeping a
     sixth of a width that no longer exists. */
  .u-clock__row--one { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .u-record--a,
  .u-record--b,
  .u-close__line,
  .u-close__actions {
    grid-column: 1 / -1;
  }

  .u-record--b { margin-block-start: var(--s-9); }

  .u-close__actions {
    margin-block-start: var(--s-7);
    justify-content: flex-start;
  }

  .u-sec { padding-block: var(--s-11); }
  .u-sec--tight { padding-block: var(--s-9); }
  .u-halves { padding-block: var(--s-11); }
  .u-close { padding-block: var(--s-11); }
  .u-band__inner { padding-block: var(--s-9); }
}

@media (max-width: 720px) {
  /* Touch. Every remaining control reaches 44 px: the bilingual switch, the
     Copy button beside a digest, and the contents summary on /rules. The rule
     under the selected tab stays where it is — only the target grows. */
  .u-main .tab,
  .u-entry .tab {
    min-height: 44px;
    padding-block: var(--s-3);
  }

  .u-main .btn.bsm {
    min-height: 44px;
  }

  .u-main summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* A link in a table cell is an action, not a run of prose — the version
     number and the Read / PDF pair on /rules. It gets a real target. */
  .u-main .table th a,
  .u-main .table td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .u-mast__inner,
  .u-mast--interior .u-mast__inner {
    padding-block: var(--s-9) var(--s-10);
  }

  .u-display,
  .u-title,
  .u-lead,
  .u-mast__note,
  .u-actions,
  .u-particulars,
  .u-particulars__cell,
  .u-rail,
  .u-body,
  .u-body--prose,
  .u-half--start,
  .u-half--end,
  .u-record--a,
  .u-record--b,
  .u-close__line,
  .u-close__actions {
    grid-column: 1 / -1;
  }

  .u-display { margin-block-start: var(--s-5); }
  .u-lead    { margin-block-start: var(--s-6); }
  .u-actions { margin-block-start: var(--s-7); }

  .u-particulars {
    margin-block-start: var(--s-10);
    row-gap: var(--s-6);
  }

  /* Two actions side by side at 390 px leave neither room to breathe; each takes
     the full measure and the tap target grows with it. */
  .u-actions .btn,
  .u-close__actions .btn {
    flex: 1 1 auto;
  }

  .u-sec,
  .u-close { padding-block: var(--s-10); }

  .u-halves { padding-block: var(--s-10); }

  .u-clock__row,
  .u-clock__row--one,
  .u-clock__row--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s-7);
  }

  .u-clock__head { margin-block-end: var(--s-7); }
  .u-stage + .u-stage { margin-block-start: var(--s-9); }

  .u-lg { margin-block-start: var(--s-6); }

  /* A figure column and a description column do not both fit in 336 px: the
     figure took 110 px of it and the sub-line wrapped at half measure. The row
     becomes one column, the figure sits under the item it prices, and the
     description gets the whole width back. A right-aligned figure with nothing
     to align to is not a ledger, it is a stray number. */
  .u-lg__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-3);
  }

  .u-lg__amt { text-align: start; }
}

/* ================================================================== print ===
   print.css flattens the shipped layout primitives — .shell, .grid, .split — but
   it was written before this one and knows nothing about the twelve-column grid,
   the ledgers or the clock band. They are flattened here, in the sheet that
   introduced them.

   Two things are removed rather than reflowed. The Aurum index segment that
   opens each section is a navigational mark: on paper it is a gold bar that
   means nothing. And the hero mark is the p14 gradient, which p14's own AVOID
   list rules out of printed forms.

   A width-based media query is not a print query: A4 at 96 dpi is about 794 px,
   so the ≤900 px rule that stacks a table would otherwise apply on paper. The
   table is restored to a table here, because a docket printed as a list of
   blocks is three pages where it should be one. */

@media print {
  .u-main {
    padding: 0;
  }

  .u-wrap {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .u-grid,
  .u-halves,
  .u-clock__head,
  .u-clock__row,
  .u-particulars,
  .u-lg__row,
  .u-defs,
  .u-marks,
  .u-scaffold {
    display: block;
  }

  .u-sec,
  .u-band,
  .u-close {
    padding-block: 6mm;
    background: none;
    border-block-start: 0.5pt solid var(--border);
    break-inside: auto;
  }

  .u-sec::before,
  .u-band::before,
  .u-close::before,
  .u-mark,
  .u-load,
  .u-sign {
    display: none;
  }

  .u-mast__inner,
  .u-mast--interior .u-mast__inner,
  .u-band__inner {
    padding-block: 0 6mm;
  }

  /* The rail becomes what it is on paper: the heading above its section. */
  .u-rail,
  .u-body,
  .u-body--prose,
  .u-half--start,
  .u-half--end,
  .u-record--a,
  .u-record--b {
    padding-inline: 0;
    margin-block-start: 0;
  }

  .u-halves::before {
    display: none;
  }

  .u-half--end {
    margin-block-start: 6mm;
    padding-block-start: 4mm;
  }

  .u-lg__row,
  .u-particulars__cell,
  .u-clock__cell,
  .u-defs__row {
    padding-block: 2mm;
    break-inside: avoid;
  }

  .u-lg__amt {
    text-align: start;
  }

  /* Restored to a table: the ≤900 px stacking rule would otherwise apply to A4. */
  .u-table,
  .u-table tbody,
  .u-table tbody tr,
  .u-table tbody th,
  .u-table tbody td {
    display: revert;
  }

  .u-table thead {
    display: table-header-group;
  }

  .u-table tbody tr {
    break-inside: avoid;
  }

  .u-table__label {
    display: none;
  }

  .u-table__when {
    padding-inline-start: 4mm;
    border-inline-start: 0.5pt solid var(--border);
    border-block-start: 0;
    margin-block-start: 0;
  }

  .u-table__from {
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: 0;
  }

  /* The clock band is the timetable; on paper it is a list of periods, and the
     display step is far too large for it. */
  .u-figure {
    font-size: 16pt;
  }

  .u-display {
    font-size: 22pt;
  }

  .u-title,
  .u-close__line {
    font-size: 16pt;
  }
}

/* ================================================================ clients ===
   The businesses that adopted the clause.

   Built from the same parts as `.u-record` — a hairline above, an uppercase
   micro label, a display-font value — because that is what the rest of the page
   uses to say "this is a fact of record", and a client list is exactly that. No
   logos, no tiles, no fills: a wall of borrowed brand marks would be the one
   block on this page that looked like an advertisement.

   The columns are set by measure, not by count, so three clients and thirty both
   fill their row instead of leaving one name stranded in a grid built for four. */

.u-clients-slot {
  grid-column: 4 / -1;
}

@media (max-width: 720px) {
  .u-clients-slot { grid-column: 1 / -1; }
}

.u-clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  column-gap: var(--u-gutter);
  row-gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-client {
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--border3);
}

.u-client__name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-title);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-card);
  color: var(--text);
  /* A long L.L.C. name must wrap inside its own column rather than push the
     grid sideways; the page body never scrolls horizontally. */
  overflow-wrap: anywhere;
}

.u-client__sector {
  margin-block-start: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text2);
}

.u-clients__foot {
  margin-block-start: var(--s-6);
}

/* ============================================================= case study ===
   The one section built out of documents rather than sentences.

   The steps are a ruled ledger like everything else on the page: a date, what
   the court did, and the reference it did it under. The documents sit below in
   a row that becomes a column on a narrow screen — they are portrait pages of
   Arabic text, so they are shown at a size where the decision line is legible
   and are left at their natural aspect ratio rather than cropped. A cropped
   court document invites the question of what was cropped out. */

.u-case {
  grid-column: 4 / -1;
}

@media (max-width: 720px) {
  .u-case { grid-column: 1 / -1; }
}

.u-case__steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* A NUMBERED LEDGER, like the stages table in 01 and the instruments in 05.
   This was one undifferentiated column of paragraphs whose only structure was an
   inline <strong> at the head of each — the one list on the page that did not
   look like the others. It had been three columns (date, text, court reference);
   when the date and the reference were removed as identifying, the tracks stayed
   and every step wrapped at about ten characters, so they were collapsed to one
   and the ledger form was lost with them.

   The number is not decoration here: these six steps are a real chronology, each
   one the precondition of the next, and the reader's question is how far it got.
   Same rail width and same alignment as `.u-table__n`, so the eye reads 01-06
   down this section exactly as it reads 01-04 down the stages table. */
.u-case__step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--s-4);
  align-items: baseline;
  padding-block: var(--s-5);
  border-block-start: var(--hairline) solid var(--border3);
}

.u-case__step:last-child {
  border-block-end: var(--hairline) solid var(--border3);
}

.u-case__n {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  line-height: 1;
  color: var(--accent);
}

.u-case__name {
  display: block;
  margin-block-end: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-card);
  line-height: var(--lh-heading);
  color: var(--text);
}

/* Muted, like every other body cell in a ledger on this page. It was full-strength
   --text, which put the running text at the same weight as the label above it. */
.u-case__what {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text2);
  text-wrap: pretty;
}

/* The number folds above the step rather than squeezing the measure. */
@media (max-width: 560px) {
  .u-case__step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2) 0;
  }
}

/* THREE ACROSS AT MOST, and that is a legibility floor rather than a taste.
   `auto-fit` with a 220px minimum let all five pages sit in one row on a wide
   screen, at which width a portrait page of Arabic court text is a grey
   rectangle and the decision line — the only thing on it that is evidence —
   cannot be read at all. Five items over three columns leaves a 3 + 2 shape,
   which reads as a sheet of documents rather than as a row with a gap in it. */
.u-case__docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--u-gutter);
  margin-block-start: var(--s-7);
}

@media (min-width: 900px) {
  .u-case__docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.u-case__doc {
  margin: 0;
}

/* A hairline frame and a white ground: these are white pages, and floating them
   directly on the dark section would leave them looking like a mistake. */
.u-case__doc img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: var(--hairline) solid var(--border3);
}

.u-case__doc figcaption {
  margin-block-start: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  color: var(--text2);
  text-wrap: pretty;
}

.u-case__foot {
  margin-block-start: var(--s-6);
}

/* THE CLOSING DISCLAIMER IS NOT ANOTHER FOOTNOTE, and looked like one. It sat in
   the same grey at the same size as the statute note above the documents, so the
   section ended on two paragraphs a reader could not tell apart — one of which
   says what the law does, and the other of which says what UORA does not
   promise. That second one is the most consequential sentence in the section and
   it was the least distinguished. A rule above it closes the section, and the
   type steps down to the register the rest of the site uses for a limitation. */
.u-case__limit {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: var(--hairline) solid var(--border3);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text3);
  text-wrap: pretty;
}

/* The page opens full size in a new tab. At the size the row renders, a court
   document is evidence at a glance; reading the Arabic needs the whole page. */
.u-case__open {
  display: block;
  text-decoration: none;
}

.u-case__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The either/or rule in the fee ledger. Stage 2 and the assignment fee are
   alternatives, and three amounts in one column add up in the reader's head
   unless something between them says they do not. */
.u-lg__either {
  margin-block: var(--s-4) var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: var(--hairline) solid var(--border3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent);
}