/* ============================================================
   THE EXHIBITS — the colour half of inc/devices-charts.php.

   Loaded on reading views only, printed after devices.css and
   figures.css (inc/enqueue.php). Namespace is .cz-cht*, which
   collides with nothing: .cz-dev* is the SVG engine next door,
   .cz-fig* is the photography, .cz-chart is only ever a
   placeholder attribute and never a rendered class.

   ------------------------------------------------------------
   THE TWO SENTENCES THIS FILE IS ACCOUNTABLE TO
   ------------------------------------------------------------
   "your infographics are so lame, I need professional, good
    looking, with coloured elements, informative infographics."

   "why are your infographics imprisoned in a box with lame
    color inside. Why can't it be free? It's not a lame school
    project. We are making a professional and cinematic website."

   NO BOX. Section 1 below is the whole of that instruction and
   it is written as a set of zeroes, not as an absence: this
   file actively removes the panel, the border, the radius, the
   shadow, the ground and the padding that .cz-tablewrap,
   .cz-prose figure and the browser would otherwise supply. An
   exhibit sits ON the page. Its structure is hairline rules,
   alignment and whitespace — nothing else.

   NO WASH. There is not one tinted background field in this
   file. Colour lands on the MARK: the bar, the segment, the
   dot, the cap, the numeral, the state, the column tab. Every
   one of those encodes category, magnitude, sequence or state.
   There is no decorative colour anywhere and no zebra fill —
   a table here is ruled, not shaded.

   NOT IMPRISONED. Every exhibit takes --cz-fig-full, the width
   placement.css:125 publishes for a figure that runs into the
   margin column, and collapses with it to 100% below 1000px.
   Growing RIGHT only: margin-left is pinned to 0 so the
   container keeps one left edge (R5, R19).

   ------------------------------------------------------------
   THE CONTRACT WITH THE PHP
   ------------------------------------------------------------
   PHP owns structure, class names, the running arithmetic, and
   exactly two inline custom properties per mark:

     --w   a width as a percentage of its track
     --x   a left offset as a percentage of its track

   Those are the only inline styles emitted, and
   safecss_filter_attr() passes them because kses.php:2956
   allows assignment to a CSS custom property. PHP writes no
   colour, no size, no font and no hex.

   This file owns every colour, every size, every weight, the
   numeric variant, the grid and the breakpoints.

   NO HEX IS DECLARED OUTSIDE SECTION 0 — measured, because this
   project has been burned by unmeasured claims. What DOES appear
   below section 0 is a hex inside a var() FALLBACK, e.g.
   `var(--cz-text, #14181c)`, which is the pattern devices.css
   already uses and which cannot drift: it only paints if the
   theme token has been deleted. Every value that carries meaning
   is a token, so a palette change moves every exhibit on the site
   without a redraw (R42).

   ------------------------------------------------------------
   MOTION (R16) — CHANGED 20 SEPTEMBER 2026
   ------------------------------------------------------------
   THIS SECTION USED TO READ "There is none." It now reads: one
   short reveal per exhibit, on entering the viewport, and
   nothing else. His instruction that day: "could have been more
   artistic, aesthetic, creative, WITH ANIMATION, good ui ux."

   The old policy was not wrong about the risks, and none of them
   is taken: the pre-state exists only under
   `[data-reveal]:not(.visible)`, so the finished exhibit is what
   a reader gets with no JavaScript, with an observer that never
   fires, and under prefers-reduced-motion; only `transform` and
   `opacity` move, so there is no reflow and no CLS; there is no
   @keyframes rule in the file, so nothing loops or spins; and
   neither easing overshoots, so nothing bounces. The whole
   entrance is 540ms with a stagger capped at ten steps of 52ms.

   The full contract, the three beats and the reasoning are at
   MOTION (R16) further down, beside the rules themselves.

   The hover state on a table row still changes a rule weight
   only, which informs rather than decorates.

   ------------------------------------------------------------
   TYPE — every size, and the floor it clears (R7: nothing < 12px)
   ------------------------------------------------------------
   column head     12px   700  uppercase .12em   --cz-mid
   axis tick       12px   700  tabular-nums      --cz-mid
   note / detail   13px   500                    --cz-mid
   share / rate    14px   700  tabular-nums      --cz-text
   row label       15-16px 600                   --cz-text
   value           15-17px 700  tabular-nums     --cz-text
   step numeral    15px   800  tabular-nums      white on mark

   THE SMALLEST TYPE IN THIS FILE IS 12px AT EVERY VIEWPORT,
   because every label is real CSS type. Nothing is drawn inside
   a scaled viewBox, so nothing shrinks with the container.

   ------------------------------------------------------------
   CONTRAST — measured, not assumed
   ------------------------------------------------------------
   Every value below was computed against the WCAG relative
   luminance formula before it was written. Each series colour
   has to clear 4.5:1 TWICE, because each is used both as a fill
   under white text and as text on the page ground:

                        white on it   it on #fff   it on #f3f5f7
     --cz-cht-1  #0a2540    15.54        15.54         14.22
     --cz-cht-2  #12446f    10.09        10.09          9.23
     --cz-cht-3  #0f6b5f     6.39         6.39          5.84
     --cz-cht-4  #5b6570     5.93         5.93          5.43
     --cz-cht-5  #7a2f5e     8.77         8.77          8.02
     --cz-cht-6  #1550c9     6.95         6.95          6.36
     --cz-cht-mark #856527   5.40         5.40          4.94
     --cz-cht-pos  #17694a   6.65         6.65          6.09
     --cz-cht-neg  #9a2b31   7.60         7.60          6.95

   And the text tokens this file sets:
     --cz-text  #14181c on #fff  17.84:1
     --cz-mid   #5b6570 on #fff   5.93:1

   WHY --cz-blue #1769ff IS NOT IN THE SET. It measures 4.27:1
   on --cz-paper-2 and fails the floor as text. #1550c9 is the
   same hue two steps darker and passes everywhere. It is also
   deliberately NOT the button blue, so a data mark can never be
   mistaken for an affordance (R17: blue is an action you take).

   WHY GOLD IS THE HIGHLIGHT AND NEVER A CATEGORY. R17: gold is
   emphasis and state. --cz-cht-mark is --cz-gold-ink, it is
   reserved for the ONE row an argument is about, and it is
   excluded from the six categorical slots so the highlight can
   never collide with a category. --cz-gold itself (#c7a36b) is
   2.36:1 on white and appears nowhere.

   WHY RED APPEARS ONCE. FT's rule and R17's agree: red is a
   negative, never decoration. --cz-cht-neg is used on the
   "Not met" state of ::checks and nowhere else in this file.
   A cost that goes UP in a waterfall is not a negative, so a
   waterfall rise is gold, not red.

   COLOUR IS NEVER THE ONLY CHANNEL. Every state carries a
   glyph and a word beside its colour; every Harvey ball carries
   its rating in words; every bar carries its value as text. The
   exhibits work in greyscale, for a colour-blind reader, and
   read aloud.
   ============================================================ */


/* ============================================================
   0. TOKENS — the third register

   Namespaced --cz-cht-* and used by nothing outside this file.
   R17 fixes two site-wide meanings (blue is an action, gold is
   emphasis) and a chart series is neither, which is how the
   devices came to be a grey wireframe. This is the third
   register: it encodes DATA, it lives only inside a figure, and
   it never touches a button, a link, a border or a ground.

   Six categorical slots. Six is the largest number of
   categories a reader can hold against a set of marks before
   the marks stop being readable at a glance — and it is what
   the corpus needs: the-government-accounts-that-are-your-
   company.md compares eight entities, working-alone-in-the-uae
   compares three structures five separate times.
   ============================================================ */

.cz-cht {
  --cz-cht-1: #0a2540;   /* navy, deepest    — first, largest, the base    */
  --cz-cht-2: #12446f;   /* petrol           — second                     */
  --cz-cht-3: #0f6b5f;   /* teal             — third                      */
  --cz-cht-4: #5b6570;   /* slate            — the residual, "other"      */
  --cz-cht-5: #7a2f5e;   /* plum             — fifth                      */
  --cz-cht-6: #1550c9;   /* blue, two steps darker than the button blue   */

  --cz-cht-mark: var(--cz-gold-ink, #856527);  /* THE one highlight       */
  --cz-cht-base: #12446f;                      /* a single-series bar     */

  --cz-cht-rise: var(--cz-gold-ink, #856527);  /* a waterfall addition    */
  --cz-cht-fall: #0f6b5f;                      /* a waterfall subtraction */
  --cz-cht-end:  #0a2540;                      /* a waterfall total       */

  --cz-cht-pos:  #17694a;
  --cz-cht-neg:  #9a2b31;
  --cz-cht-wait: var(--cz-gold-ink, #856527);

  /* The ink that sits ON a mark. Deliberately NOT var(--cz-paper):
     it is the measured contrast partner of all eleven colours
     above — every one of them was checked against pure white and
     no other value. If the page ground ever moves, this must not
     move with it, or nine measurements go stale silently. */
  --cz-cht-on-mark: #ffffff;

  /* Line-work. Decorative, so no contrast floor applies — but it
     is the ONLY structure this file has, so it is declared once
     and used everywhere. */
  --cz-cht-hair: var(--cz-line, rgba(8,10,13,.11));
  --cz-cht-rule: color-mix(in srgb, var(--cz-text, #14181c) 34%, transparent);

  /* The track a mark sits in. NOT a filled ground: a 2px seat at
     the foot of the row, so a bar reads as measured from a datum
     rather than as a block in a box. */
  --cz-cht-seat: color-mix(in srgb, var(--cz-text, #14181c) 12%, transparent);

  --cz-cht-gap: clamp(14px, 1.4vw, 24px);
}

/* One property per slot, consumed by every mark in the file: the
   bar, the segment, the dot, the cap, the rule, the swatch, the
   numeral, the column tab, the Harvey ball. */
.cz-cht__c--1    { --mk: var(--cz-cht-1); }
.cz-cht__c--2    { --mk: var(--cz-cht-2); }
.cz-cht__c--3    { --mk: var(--cz-cht-3); }
.cz-cht__c--4    { --mk: var(--cz-cht-4); }
.cz-cht__c--5    { --mk: var(--cz-cht-5); }
.cz-cht__c--6    { --mk: var(--cz-cht-6); }
.cz-cht__c--mark { --mk: var(--cz-cht-mark); }
.cz-cht__c--base { --mk: var(--cz-cht-base); }
.cz-cht__c--rise { --mk: var(--cz-cht-rise); }
.cz-cht__c--fall { --mk: var(--cz-cht-fall); }
.cz-cht__c--end  { --mk: var(--cz-cht-end); }
.cz-cht__c--pos  { --mk: var(--cz-cht-pos); }
.cz-cht__c--neg  { --mk: var(--cz-cht-neg); }
.cz-cht__c--wait { --mk: var(--cz-cht-wait); }


/* ============================================================
   1. UNBOXED — the client's instruction, written as zeroes

   Declared positively rather than by omission, because three
   other stylesheets and the browser all supply a box if nobody
   removes one:

     - cz_wrap_tables() wraps EVERY <table> on the site in
       .cz-tablewrap, and article.css:904 gives that a 2px gold
       top border on a comparison article. Inside an exhibit
       that border is the box.
     - .cz-prose figure carries the theme's figure margins.
     - <figure> carries the UA's 40px inline margin.
     - <ol> and <table> carry UA padding, list markers and
       border spacing.

   Nothing below is a background, a border, a radius or a
   shadow. That is the point.
   ============================================================ */

.cz-cht {
  display: block;
  margin: clamp(30px, 3.2vw, 54px) 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* The exhibit is free of the 74ch measure and grows right into
     the margin column. placement.css:492/502 redefines
     --cz-fig-full per breakpoint and sets it to 100% below
     1000px, so this one line is responsive by inheritance and
     cannot overflow. */
  width: var(--cz-fig-full, 100%);
  max-width: none;
  color: var(--cz-text, #14181c);
  font-variant-numeric: tabular-nums;
}

/* One left edge (R5). No variant may reintroduce a hang. */
.cz-reading__body .cz-cht,
.cz-prose .cz-cht {
  margin-left: 0;
  margin-right: 0;
  float: none;
}

/* The wrapper cz_wrap_tables() adds inside ::table. Unboxed
   rather than fought: the element still exists and still keeps
   its focus ring, it simply stops being a panel. */
.cz-cht .cz-tablewrap {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.cz-cht ol,
.cz-cht ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz-cht li::before,
.cz-cht li::marker {
  content: none;
}

/* ============================================================
   MOTION (R16) — added 20 September 2026
   ============================================================
   THIS FILE USED TO SAY "Nothing moves". It said so for a good
   reason and the reason has been answered rather than dropped:
   the risk in animating an exhibit is that the reader needs the
   animation to understand it, or that something bounces, spins
   or loops. None of that can happen here, because:

     - THE PRE-STATE EXISTS ONLY UNDER
       `.cz-cht[data-reveal]:not(.visible)`. cz_add_reveal_hooks()
       puts data-reveal on every <figure> and main.js adds
       .visible when it intersects — or IMMEDIATELY, to
       everything, under prefers-reduced-motion or with no
       IntersectionObserver. So the finished exhibit is the
       default and the animation is the exception;
     - ONLY `transform` and `opacity` move. No height, no width,
       no margin, no top: zero layout cost, zero CLS, and not one
       reflow;
     - THERE IS NO @keyframes RULE IN THIS FILE, so nothing loops,
       nothing spins and nothing plays twice;
     - the easings are the site's own and neither overshoots, so
       NOTHING BOUNCES;
     - the whole entrance is 540ms with a stagger capped at ten
       steps of 52ms — 1.06s at the very worst.

   His instruction, 20 September 2026: "could have been more
   artistic, aesthetic, creative, WITH ANIMATION, good ui ux."

   THE STAGGER IS nth-child AND NOT A CUSTOM PROPERTY, and that is
   deliberate: inc/devices-charts.php emits no index, and adding
   one would mean touching all nine renderers to buy what the
   cascade already knows. `--n` is set on the <li> or <tr> and
   INHERITS into the bar, dot, cap and numeral inside it — so a
   mark is delayed by its own row's position, which is exactly the
   reading order. Past the tenth row everything lands together,
   because after ten the stagger has said all it has to say.

   THE THREE BEATS:
     A. GROUND   the axis ticks and column heads fade in.
     B. DATA     bars, bands, segments and dots grow from their
                 own baseline in row order.
     C. THE CLAIM the total, the threshold marker and the
                 highlighted row land last.
   ------------------------------------------------------------ */

.cz-cht {
  --cht-in: .54s;
  --cht-step: 52ms;
  --cht-ease: var(--cz-ease, cubic-bezier(.2, .7, .2, 1));
  --cht-ease-out: var(--cz-ease-out, cubic-bezier(.16, 1, .3, 1));
}

/* The row index, inherited by every mark inside the row. */
.cz-cht li:nth-child(1), .cz-cht tr:nth-child(1), .cz-cht__stack > *:nth-child(1) { --n: 0; }
.cz-cht li:nth-child(2), .cz-cht tr:nth-child(2), .cz-cht__stack > *:nth-child(2) { --n: 1; }
.cz-cht li:nth-child(3), .cz-cht tr:nth-child(3), .cz-cht__stack > *:nth-child(3) { --n: 2; }
.cz-cht li:nth-child(4), .cz-cht tr:nth-child(4), .cz-cht__stack > *:nth-child(4) { --n: 3; }
.cz-cht li:nth-child(5), .cz-cht tr:nth-child(5), .cz-cht__stack > *:nth-child(5) { --n: 4; }
.cz-cht li:nth-child(6), .cz-cht tr:nth-child(6), .cz-cht__stack > *:nth-child(6) { --n: 5; }
.cz-cht li:nth-child(7), .cz-cht tr:nth-child(7), .cz-cht__stack > *:nth-child(7) { --n: 6; }
.cz-cht li:nth-child(8), .cz-cht tr:nth-child(8), .cz-cht__stack > *:nth-child(8) { --n: 7; }
.cz-cht li:nth-child(9), .cz-cht tr:nth-child(9), .cz-cht__stack > *:nth-child(9) { --n: 8; }
.cz-cht li:nth-child(n+10), .cz-cht tr:nth-child(n+10), .cz-cht__stack > *:nth-child(n+10) { --n: 9; }

/* --- B. DATA. A length-encoded mark grows from its own left edge, which is
   the edge its value is measured from — including a floating waterfall bar,
   whose left edge is where its own step begins. --- */
.cz-cht__bar,
.cz-cht__band,
.cz-cht__seg {
  transform-origin: left center;
  transition: transform var(--cht-in) var(--cht-ease-out) calc(min(var(--n, 0), 9) * var(--cht-step));
}

/* A cap is a tick on a scale, so it grows UP from the baseline rather than
   sideways: it marks a position and has no length to grow. */
.cz-cht__cap,
.cz-cht__rule {
  transform-origin: bottom center;
  transition: transform .42s var(--cht-ease-out) calc(min(var(--n, 0), 9) * var(--cht-step) + 90ms);
}

/* A dot encodes a POSITION, so it arrives at its position rather than sliding
   to it — it scales up in place. */
.cz-cht__dot,
.cz-cht__ball,
.cz-cht__num {
  transition:
    opacity .3s var(--cht-ease) calc(min(var(--n, 0), 9) * var(--cht-step) + 110ms),
    transform .4s var(--cht-ease-out) calc(min(var(--n, 0), 9) * var(--cht-step) + 110ms);
}

/* --- A. GROUND --- */
.cz-cht__tick,
.cz-cht__head {
  transition: opacity .36s var(--cht-ease);
}

/* The rows themselves, so a mark and its own words arrive together. Never the
   figure's heading and never a paragraph of prose: content-enrich.php records
   what animating type the reader is trying to read did to this site. */
.cz-cht__row,
.cz-cht__tr,
.cz-cht__step,
.cz-cht__check,
.cz-cht__keyrow {
  transition:
    opacity .44s var(--cht-ease) calc(min(var(--n, 0), 9) * var(--cht-step)),
    transform .44s var(--cht-ease-out) calc(min(var(--n, 0), 9) * var(--cht-step));
}

/* --- C. THE CLAIM --- */
.cz-cht__total,
.cz-cht__thresh,
.cz-cht__ends {
  transition:
    opacity .4s var(--cht-ease) .54s,
    transform .4s var(--cht-ease-out) .54s;
}

/* --- the pre-states, and nothing else in this file may add one --- */

.cz-cht[data-reveal]:not(.visible) .cz-cht__bar,
.cz-cht[data-reveal]:not(.visible) .cz-cht__band,
.cz-cht[data-reveal]:not(.visible) .cz-cht__seg {
  transform: scaleX(0);
}

.cz-cht[data-reveal]:not(.visible) .cz-cht__cap,
.cz-cht[data-reveal]:not(.visible) .cz-cht__rule {
  transform: scaleY(0);
}

.cz-cht[data-reveal]:not(.visible) .cz-cht__dot,
.cz-cht[data-reveal]:not(.visible) .cz-cht__ball,
.cz-cht[data-reveal]:not(.visible) .cz-cht__num {
  opacity: 0;
  transform: scale(.7);
}

.cz-cht[data-reveal]:not(.visible) .cz-cht__tick,
.cz-cht[data-reveal]:not(.visible) .cz-cht__head {
  opacity: 0;
}

.cz-cht[data-reveal]:not(.visible) .cz-cht__row,
.cz-cht[data-reveal]:not(.visible) .cz-cht__tr,
.cz-cht[data-reveal]:not(.visible) .cz-cht__step,
.cz-cht[data-reveal]:not(.visible) .cz-cht__check,
.cz-cht[data-reveal]:not(.visible) .cz-cht__keyrow {
  opacity: 0;
  transform: translateY(6px);
}

.cz-cht[data-reveal]:not(.visible) .cz-cht__total,
.cz-cht[data-reveal]:not(.visible) .cz-cht__ends {
  opacity: 0;
  transform: translateY(5px);
}

/* The threshold marker already carries `transform: translateX(-50%)` to centre
   it on its own line, so its pre-state is OPACITY ONLY. A transform here would
   replace that centring and the marker would land half a label to the right —
   which is the class of bug a blanket pre-state selector creates. */
.cz-cht[data-reveal]:not(.visible) .cz-cht__thresh {
  opacity: 0;
}


/* ============================================================
   2. THE COLUMN-HEAD STRIP

   Not a caption — R42 forbids one and the paragraph above an
   exhibit is its caption throughout this theme. This names the
   AXES, which is the one thing a chart cannot leave to the
   prose without becoming ambiguous: "20,265" and "AED 20,265"
   are different claims.

   A 1px rule under it and nothing else. The rule is the
   structure.
   ============================================================ */

.cz-cht__heads {
  display: grid;
  grid-template-columns: var(--cht-cols, minmax(120px, 1.5fr) minmax(90px, 3fr) auto);
  align-items: end;
  column-gap: var(--cz-cht-gap);
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--cz-cht-rule);
}

.cz-cht__head {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cz-mid, #5b6570);
}

.cz-cht__head--val,
.cz-cht__head--pct {
  text-align: right;
}


/* ============================================================
   3. THE ROW — the shared grid of bars, range, delta, waterfall

   Four devices, one grid, because they answer four different
   questions about the same object: a labelled quantity on a
   shared scale. A reader who has learned one has learned all
   four, which is the small-multiples argument applied to the
   device set rather than to a single figure.

   label | track | value | note

   The seat under the track is a 2px rule, not a filled channel.
   A bar measured from a datum reads as a measurement; a bar
   inside a grey slot reads as a progress meter.
   ============================================================ */

.cz-cht__rows {
  display: block;
}

.cz-cht__row {
  display: grid;
  grid-template-columns: var(--cht-cols, minmax(120px, 1.5fr) minmax(90px, 3fr) auto);
  align-items: center;
  column-gap: var(--cz-cht-gap);
  padding: 11px 0;
  border-bottom: 1px solid var(--cz-cht-hair);
}

.cz-cht.is-noted .cz-cht__heads,
.cz-cht.is-noted .cz-cht__row {
  --cht-cols: minmax(120px, 1.4fr) minmax(80px, 2.6fr) auto minmax(76px, .9fr);
}

.cz-cht__lab {
  font-size: clamp(14.5px, .32vw + 13.5px, 16px);
  line-height: 1.32;
  font-weight: 600;
  color: var(--cz-text, #14181c);
  text-wrap: pretty;
}

.cz-cht__val {
  font-size: clamp(15px, .38vw + 13.8px, 17px);
  line-height: 1.24;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--cz-text, #14181c);
  font-variant-numeric: tabular-nums;
}

.cz-cht__note {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--cz-mid, #5b6570);
  text-wrap: pretty;
}

/* THE HIGHLIGHT. One row, one colour, and it moves the value
   with it so the emphasis is legible without the bar. */
.cz-cht__row.is-mark .cz-cht__lab { font-weight: 800; }
.cz-cht__row.is-mark .cz-cht__val { color: var(--cz-cht-mark); }

.cz-cht__track {
  position: relative;
  display: block;
  height: 26px;
  min-width: 40px;
}

/* The datum. 2px, at the foot of the track, running its full
   width — so every bar in the exhibit is measured from the same
   visible line. */
.cz-cht__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cz-cht-seat);
}

.cz-cht__bar {
  position: absolute;
  left: var(--x, 0);
  bottom: 2px;
  display: block;
  width: var(--w, 0);
  height: 17px;
  background: var(--mk, var(--cz-cht-base));
}

/* The axis. Three ticks — zero, midpoint, rounded maximum —
   under the track column only, so it sits below the thing it
   measures rather than under the whole exhibit. */
.cz-cht__axis {
  display: grid;
  grid-template-columns: var(--cht-cols, minmax(120px, 1.5fr) minmax(90px, 3fr) auto);
  column-gap: var(--cz-cht-gap);
  padding-top: 7px;
}

.cz-cht.is-noted .cz-cht__axis {
  --cht-cols: minmax(120px, 1.4fr) minmax(80px, 2.6fr) auto minmax(76px, .9fr);
}

.cz-cht__axis .cz-cht__tick {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cz-mid, #5b6570);
  font-variant-numeric: tabular-nums;
  justify-self: start;
}

.cz-cht__axis .cz-cht__tick:nth-of-type(2) { justify-self: center; }
.cz-cht__axis .cz-cht__tick:nth-of-type(3) { justify-self: end; }

.cz-cht__unit {
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cz-mid, #5b6570);
}


/* ============================================================
   4. WATERFALL — the bridge

   The first and last bars are seated on the axis; every step
   floats from the running total; a hairline connector joins
   each bar's finishing edge to the next bar's start, so the eye
   follows the running total instead of comparing bar heights.

   Colour encodes SIGN and only sign. Red is not used: in a fee
   build-up an addition is not a negative.
   ============================================================ */

.cz-cht--waterfall .cz-cht__row.is-base .cz-cht__lab,
.cz-cht--waterfall .cz-cht__row.is-end .cz-cht__lab {
  font-weight: 800;
}

.cz-cht--waterfall .cz-cht__row.is-end {
  border-bottom: 2.5px solid var(--cz-cht-rule);
  border-top: 1.5px solid var(--cz-cht-rule);
}

.cz-cht--waterfall .cz-cht__row.is-end .cz-cht__val {
  color: var(--cz-cht-end);
  font-weight: 800;
}

/* The connector. One hairline, dropped at the running total,
   spanning the gutter to the row below. */
.cz-cht__link {
  position: absolute;
  left: var(--x, 0);
  bottom: -12px;
  width: 1px;
  height: 24px;
  background: var(--cz-cht-rule);
}


/* ============================================================
   5. DELTA — the dumbbell

   Two dots on a shared scale; the connecting line IS the gap.
   The two ends are named once above the exhibit rather than in
   a legend beside it, because two names is the whole key and a
   legend for two things is a legend for nothing.
   ============================================================ */

.cz-cht__ends {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 0 2px;
}

.cz-cht__end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cz-text, #14181c);
}

.cz-cht__end::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--mk, var(--cz-cht-1));
}

.cz-cht__gap {
  position: absolute;
  left: var(--x, 0);
  top: 50%;
  width: var(--w, 0);
  height: 3px;
  margin-top: -1.5px;
  background: var(--cz-cht-rule);
}

.cz-cht__dot {
  position: absolute;
  left: var(--x, 0);
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--mk, var(--cz-cht-1));
}

.cz-cht--delta .cz-cht__track::after { display: none; }

.cz-cht--delta .cz-cht__val {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

.cz-cht__va { color: var(--cz-cht-1); }
.cz-cht__vb { color: var(--cz-cht-mark); font-weight: 800; }

.cz-cht__arrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--cz-mid, #5b6570);
}


/* ============================================================
   6. RANGE — the band

   A band with a heavier cap at each measured end. The caps are
   what make it read as a measurement with two known edges
   rather than as a bar that starts late. An open band — no
   published ceiling — fades rather than ending, because an end
   is a claim the author did not make.
   ============================================================ */

.cz-cht__band {
  position: absolute;
  left: var(--x, 0);
  bottom: 8px;
  width: var(--w, 0);
  height: 9px;
  background: var(--mk, var(--cz-cht-base));
}

/* Not an arrow. An arrow says "continues to a value"; this says
   "stops being published". */
.cz-cht__band.is-open {
  background: linear-gradient(
    to right,
    var(--mk, var(--cz-cht-base)) 0%,
    var(--mk, var(--cz-cht-base)) 62%,
    color-mix(in srgb, var(--mk, var(--cz-cht-base)) 22%, transparent) 100%
  );
}

.cz-cht__cap {
  position: absolute;
  left: var(--x, 0);
  bottom: 2px;
  width: 3px;
  height: 21px;
  margin-left: -1.5px;
  background: var(--mk, var(--cz-cht-base));
}

.cz-cht--range .cz-cht__val { font-size: clamp(14px, .3vw + 13px, 15.5px); }


/* ============================================================
   7. SHARE — the 100% stacked bar

   R42: "Parts of a whole, or a cost broken down -> Stacked bar.
   NEVER A PIE — you cannot compare angles."

   Segments carry their own share in place where they are wide
   enough to hold it, and the listed rows below carry label,
   value and share for every part. That list is DATA, not a
   legend: it is the table the stack is a picture of.
   ============================================================ */

.cz-cht__stack {
  display: flex;
  width: 100%;
  height: 46px;
  margin: 14px 0 0;
  /* The cuts between segments are a gap in the page ground, not
     a seventh colour. */
  gap: 3px;
}

.cz-cht__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--w, 0);
  min-width: 3px;
  background: var(--mk, var(--cz-cht-1));
  overflow: hidden;
}

.cz-cht__segpct {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--cz-cht-on-mark, #ffffff);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The key rows carry a different grid from the bar rows, so the
   head strip is told about it explicitly rather than being left
   to land right by accident. */
.cz-cht--share .cz-cht__heads,
.cz-cht--brackets .cz-cht__heads {
  grid-template-columns: 4px minmax(110px, 1fr) auto minmax(58px, auto);
  column-gap: 14px;
}

.cz-cht--share .cz-cht__head--lab,
.cz-cht--brackets .cz-cht__head--lab { grid-column: 2; }

.cz-cht__key {
  display: block;
  margin-top: 4px;
}

.cz-cht__keyrow {
  display: grid;
  grid-template-columns: 4px minmax(110px, 1fr) auto minmax(58px, auto);
  align-items: center;
  column-gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cz-cht-hair);
}

/* The tie back to the segment: a 4px colour rule at the left of
   the row. It is a MARK, not a swatch in a key — it aligns with
   nothing else on the page and reads as the row's own edge. */
.cz-cht__rule {
  align-self: stretch;
  width: 4px;
  background: var(--mk, var(--cz-cht-1));
}

.cz-cht__pct {
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  color: var(--cz-text, #14181c);
  font-variant-numeric: tabular-nums;
}

.cz-cht__keyrow.is-mark .cz-cht__lab { font-weight: 800; }
.cz-cht__keyrow.is-mark .cz-cht__pct { color: var(--cz-cht-mark); }

.cz-cht__total {
  display: grid;
  grid-template-columns: 4px minmax(110px, 1fr) auto minmax(58px, auto);
  column-gap: 14px;
  padding: 11px 0 0;
  border-top: 1.5px solid var(--cz-cht-rule);
}

.cz-cht__total .cz-cht__lab {
  grid-column: 2;
  font-weight: 800;
}

.cz-cht__total .cz-cht__pct {
  grid-column: 4;
  font-weight: 800;
}


/* ============================================================
   8. BRACKETS — the slice

   "The band is not a cliff — it is a slice."
      content/insights/nobody-pays-the-rate-in-the-table.md

   One continuous scale, cut at each threshold, with the rate
   set DIRECTLY on the band it applies to. The threshold numbers
   sit on a ruler under the cut that produced them, so a reader
   can see that the amount is one quantity divided into parts.
   ============================================================ */

.cz-cht__scale {
  position: relative;
  display: block;
  width: 100%;
  height: 54px;
  margin-top: 16px;
}

.cz-cht__slice {
  position: absolute;
  left: var(--x, 0);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 0);
  height: 100%;
  background: var(--mk, var(--cz-cht-1));
  overflow: hidden;
}

/* A cut, not a border: 3px of page ground between two slices,
   so the scale reads as divided rather than as boxed. */
.cz-cht__slice + .cz-cht__slice {
  box-shadow: -3px 0 0 0 var(--cz-paper, #fff);
}

.cz-cht__slice.is-open {
  background: linear-gradient(
    to right,
    var(--mk, var(--cz-cht-1)) 0%,
    var(--mk, var(--cz-cht-1)) 74%,
    color-mix(in srgb, var(--mk, var(--cz-cht-1)) 26%, transparent) 100%
  );
  justify-content: flex-start;
  padding-left: 16px;
}

/* A LABEL THAT CANNOT FIT ITS SLICE WRAPS; IT DOES NOT DISAPPEAR (B323).
   This rule carried `white-space: nowrap`, and `.cz-cht__slice` above is an
   absolutely positioned flex box with `overflow: hidden` and a width set from
   the band's own share of the scale. So on a lopsided scale the narrow band's
   label was simply cut off mid-word, with nothing to tell a reader that words
   were missing. Measured on /hiring-the-first-person-opens-a-file-the-licence-did-not/
   at 375px: a 114px slice holding a 187px label — "30 days of wage for each
   year" ending at "for ea". The clipping is the whole defect; the width was
   never the problem, because a proportional scale is SUPPOSED to give a narrow
   band a narrow slice.
   `nowrap` also pinned the flex item's min-content width to the entire string,
   which is why it could not shrink. Without it the item shrinks to the slice
   and the text wraps, and a label that already fits is unchanged — its
   max-content width still fits, so it stays on one line at the same box. That
   is what makes this a DEGRADE rather than a redesign (R82.2): one of these
   figures is on /business-setup-in-uae/, a page he has approved, and 30 of the
   31 labelled slices across the site measure byte-identical after it.
   NO `text-wrap: balance` HERE, and it was measured rather than assumed. Balance
   equalises line lengths, so it narrowed the wrapped label from the slice's
   114px to 98px and took THREE lines and 65px to do it — taller than the 54px
   slice, which clips. Filling the slice takes two lines and 40px. Prettier line
   breaks are not worth a vertical clip.
   THE LIMIT, stated rather than left to be discovered: `.cz-cht__scale` is a
   fixed 54px and the slices fill it, so two lines fit (about 38px) and a THIRD
   would clip vertically. Measured after both halves of the fix: the wide slice's
   label is one line at 22px, the narrow one is TWO lines at 43px inside a 46px
   slice — 3px of headroom, which is the real budget, not 54px. A third line
   does not fit and no authored bracket needs one.
   THE OTHER HALF IS AUTHORING, and it is the larger half: `cz_cht_brackets()`
   reads column 3 as $rate, heads it "Rate", and sets it at weight 800 with
   tabular numerals. It is a slot for "9%" or "21 days". The fence that found
   this put a 29-character clause in it while its own column 4 note and its own
   column HEADER already carried the words. A slot styled for a number is a
   contract about length. Check: `_audit/tmp/brackets-labels.js`, run in the page,
   which compares every label's box against its slice's in both axes. */
.cz-cht__rate {
  font-size: clamp(14px, .3vw + 13px, 16px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--cz-cht-on-mark, #ffffff);
  white-space: normal;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cz-cht__ruler {
  position: relative;
  height: 22px;
  margin-top: 6px;
}

.cz-cht__thresh {
  position: absolute;
  left: var(--x, 0);
  top: 0;
  transform: translateX(-50%);
  padding-top: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--cz-text, #14181c);
  font-variant-numeric: tabular-nums;
}

/* The tick that ties the number to the cut above it. */
.cz-cht__thresh::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 5px;
  background: var(--cz-cht-rule);
}

.cz-cht--brackets .cz-cht__key { margin-top: 10px; }


/* ============================================================
   9. TABLE — ruled, never shaded

   The one device the client has praised, built properly:
   tabular numerals, right-aligned figures, a header that is a
   header, a coloured tab per column tying the head to its
   column, and hairlines instead of a zebra wash — because a
   zebra fill is the "lame color inside" this file exists to
   remove.
   ============================================================ */

/* ------------------------------------------------------------
   FIRST, THE BOX COMES OFF.

   The theme styles every table in the reading column, and every
   one of those rules is the thing the client rejected. Measured
   on the rendered lab page before this block existed: a 1px grid
   on every cell, a --cz-paper-2 wash behind the header, an
   uppercase gold-ink row head, and a zebra fill on even rows.

     reading.css:439  .cz-prose th, .cz-prose td   border 1px          (0,1,1)
     reading.css:446  .cz-prose th                 background paper-2  (0,1,1)
     article.css:1238 .cz-prose--article table     font-size 14.8px    (0,1,1)
     article.css:1247 .cz-prose--article td        color #21262d       (0,1,1)
     article.css:1248 .cz-prose--article th        uppercase, .16em,
                                                   background paper-2  (0,1,1)
     article.css:1274 .cz-prose--article
                        tbody tr:nth-child(even)   zebra background    (0,2,2)

   THREE CLASSES, NOT ONE !important (R11). The zebra rule is the
   highest at (0,2,2), so every reset below carries three classes
   and beats it on specificity rather than on source order —
   which matters because source order here is an enqueue
   sequence, and an enqueue sequence is a thing that changes.

   NONE OF THIS TOUCHES THE THEME'S OTHER TABLES. Every selector
   is scoped inside .cz-cht, so the 1,275 tables the client has
   praised are untouched; only an exhibit is unboxed.
   ------------------------------------------------------------ */

.cz-cht .cz-cht__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  border: 0;
  font-size: inherit;
  line-height: inherit;
}

.cz-cht .cz-cht__table tbody tr,
.cz-cht.cz-cht--table .cz-cht__table tbody tr:nth-child(even),
.cz-cht.cz-cht--table .cz-cht__table tbody tr:nth-child(odd) {
  background: none;
}

.cz-cht .cz-cht__table .cz-cht__th {
  position: relative;
  padding: 14px 16px 9px 0;
  border: 0;
  border-bottom: 1.5px solid var(--cz-cht-rule);
  background: none;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--cz-mid, #5b6570);
}

/* The column tab. 3px of the column's own colour above its
   head — the only colour in the header, and it encodes which
   column you are reading, not decoration. */
.cz-cht .cz-cht__table .cz-cht__th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 3px;
  background: var(--mk, var(--cz-cht-1));
}

.cz-cht .cz-cht__table .cz-cht__th.is-num { text-align: right; }
.cz-cht .cz-cht__table .cz-cht__th.is-num::before { left: auto; right: 16px; }
.cz-cht .cz-cht__table .cz-cht__th:last-child { padding-right: 0; }
.cz-cht .cz-cht__table .cz-cht__th.is-num:last-child::before { right: 0; }

.cz-cht .cz-cht__table .cz-cht__rh,
.cz-cht .cz-cht__table .cz-cht__td {
  padding: 13px 16px 13px 0;
  border: 0;
  border-bottom: 1px solid var(--cz-cht-hair);
  background: none;
  font-size: clamp(14px, .3vw + 13px, 15.5px);
  line-height: 1.44;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: top;
  text-align: left;
  text-wrap: pretty;
}

.cz-cht .cz-cht__table .cz-cht__rh {
  font-weight: 700;
  color: var(--cz-text, #14181c);
  padding-right: 20px;
}

.cz-cht .cz-cht__table .cz-cht__td {
  font-weight: 500;
  color: var(--cz-text, #14181c);
}

.cz-cht .cz-cht__table .cz-cht__td:last-child,
.cz-cht .cz-cht__table .cz-cht__rh:last-child { padding-right: 0; }

.cz-cht .cz-cht__table .cz-cht__td.is-num {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The marked row. A 2px rule under it in the highlight colour
   and the row head in the same — no fill, because a filled row
   is the wash this file exists to remove. */
.cz-cht .cz-cht__table .cz-cht__tr.is-mark .cz-cht__rh,
.cz-cht .cz-cht__table .cz-cht__tr.is-mark .cz-cht__td {
  border-bottom: 2px solid var(--cz-cht-mark);
}

.cz-cht .cz-cht__table .cz-cht__tr.is-mark .cz-cht__rh { color: var(--cz-cht-mark); }

/* Informs, does not decorate (R16): the rule under the row you
   are pointing at gets heavier. Nothing moves. */
@media (hover: hover) and (pointer: fine) {
  .cz-cht .cz-cht__table .cz-cht__tr:hover .cz-cht__rh,
  .cz-cht .cz-cht__table .cz-cht__tr:hover .cz-cht__td {
    border-bottom-color: var(--cz-cht-rule);
  }
}

/* HARVEY BALLS. Booz Allen's form, for the ordinal judgement
   this corpus keeps making and refusing to number: how well a
   thing fits a criterion. Five states, drawn with a conic
   gradient so nothing is loaded and nothing is an image, and
   the RATING IS ALSO A WORD so the cell never depends on the
   shape or the colour alone. */
.cz-cht__td.is-ball {
  white-space: nowrap;
}

.cz-cht__ball {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: -2px;
  box-shadow: inset 0 0 0 1.5px var(--mk, var(--cz-cht-1));
  background: conic-gradient(var(--mk, var(--cz-cht-1)) var(--fill, 0%), transparent 0);
}

.cz-cht__ball.is-b0 { --fill: 0%; }
.cz-cht__ball.is-b1 { --fill: 25%; }
.cz-cht__ball.is-b2 { --fill: 50%; }
.cz-cht__ball.is-b3 { --fill: 75%; }
.cz-cht__ball.is-b4 { --fill: 100%; }

.cz-cht__ballword {
  font-size: 13px;
  font-weight: 700;
  color: var(--cz-text, #14181c);
}


/* ============================================================
   10. STEPS — the numbered procedure, and the handoff

   The numeral carries the OWNER's colour, one slot per distinct
   authority in order of first appearance. So the same body is
   the same colour every time it recurs, and a change of colour
   always means a change of hands — which is what three articles
   in the corpus are arguing about and none of them could draw.

   The rail is a 1px line through the numerals, not a container.
   ============================================================ */

/* The head strip names what a step row carries, and a step row is
   a numeral and a block — not three columns. Measured on the lab
   page: the three-column grid put "HOW LONG" at x=713 and "WHO"
   at x=1470 with nothing under either of them, which is R5's
   alignment law broken by a header describing a layout that does
   not exist. Left-aligned, in reading order, over the block they
   describe. */
.cz-cht--steps .cz-cht__heads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-left: 49px;
}

.cz-cht--steps .cz-cht__head { text-align: left; }

.cz-cht__steps {
  position: relative;
  display: block;
  padding-top: 6px;
}

/* The rail. Behind the numerals, stopping at the last one. */
.cz-cht__steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 24px;
  bottom: 30px;
  width: 1px;
  background: var(--cz-cht-hair);
}

.cz-cht__step {
  position: relative;
  display: grid;
  grid-template-columns: 31px 1fr;
  column-gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cz-cht-hair);
}

.cz-cht__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--mk, var(--cz-cht-base));
  color: var(--cz-cht-on-mark, #ffffff);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cz-cht__step .cz-cht__body {
  display: block;
  /* The rules run the full width of the exhibit; the TEXT stays
     at a readable measure. That is the dossier: a wide ruled
     page with a narrow column of type on it. */
  max-width: 62ch;
}

.cz-cht__step .cz-cht__lab {
  display: block;
  font-size: clamp(15px, .34vw + 14px, 17px);
  font-weight: 700;
  line-height: 1.34;
}

.cz-cht__detail {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cz-mid, #5b6570);
  text-wrap: pretty;
}

.cz-cht__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
}

.cz-cht__dur {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cz-text, #14181c);
  font-variant-numeric: tabular-nums;
}

/* The authority. A left rule in the owner's colour — a mark,
   not a chip, so there is no filled pill anywhere. */
.cz-cht__own {
  padding-left: 10px;
  border-left: 3px solid var(--mk, var(--cz-cht-base));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cz-text, #14181c);
}

/* The handoff. Named in words as well as marked in colour. */
.cz-cht__hand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cz-cht-mark);
}

.cz-cht__step.is-handoff { border-top: 1.5px solid var(--cz-cht-mark); }
.cz-cht__step.is-handoff + .cz-cht__step { border-top: 0; }
.cz-cht__step.is-mark .cz-cht__lab { font-weight: 800; }


/* ============================================================
   11. CHECKS — the eligibility test

   The logic strip is the point of the device: a bulleted list
   renders "all of these" and "any of these" identically, and
   the difference is the whole meaning.

   Three states, three channels each — glyph, word and colour —
   so the exhibit survives greyscale, colour blindness and being
   read aloud.
   ============================================================ */

.cz-cht__logic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding-bottom: 9px;
  border-bottom: 1.5px solid var(--cz-cht-rule);
}

.cz-cht__logicword {
  padding-left: 11px;
  border-left: 4px solid var(--cz-cht-mark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--cz-cht-mark);
}

.cz-cht__logictext {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cz-mid, #5b6570);
}

.cz-cht__check {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cz-cht-hair);
}

.cz-cht__state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mk, var(--cz-cht-wait));
  color: var(--cz-cht-on-mark, #ffffff);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.cz-cht__check .cz-cht__body {
  display: block;
  max-width: 62ch;
}

.cz-cht__check .cz-cht__lab {
  display: block;
  font-size: clamp(15px, .34vw + 14px, 17px);
  font-weight: 700;
  line-height: 1.36;
}

.cz-cht__word {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mk, var(--cz-cht-wait));
}


/* ============================================================
   12. THE PHONE — designed, not scrolled

   R7 and the brief: "do NOT just let it scroll — design the
   small-screen behaviour."

   Bounded ranges only, never an open-ended max-width. A
   max-width query with no lower bound matches every width below
   it, which is the trap recorded at R7 that once collapsed the
   prose column to 135px.

   620px is the breakpoint because placement.css already uses it
   and because below it a label, a track and a value cannot
   share a line without one of them going under 12px.
   ============================================================ */

@media (max-width: 620px) {

  .cz-cht {
    margin: 26px 0;
  }

  /* label and value on one line; the track under both, full
     width; the note under that. Nothing is dropped and nothing
     scrolls. */
  .cz-cht__row,
  .cz-cht.is-noted .cz-cht__row {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 7px;
    padding: 13px 0;
  }

  /* Placed explicitly, not auto-flowed. The track spans both
     columns, so with auto-placement it claims row 2 and pushes the
     VALUE down to row 3 — measured at 375px: "4,000" landed under
     its own bar instead of beside its own label, which is the one
     pairing a reader needs. Four declarations fix it and they are
     cheaper than reordering the markup, which the desktop grid and
     the reading order both depend on. */
  .cz-cht__row .cz-cht__lab   { grid-column: 1; grid-row: 1; }
  .cz-cht__row .cz-cht__val   { grid-column: 2; grid-row: 1; }
  .cz-cht__row .cz-cht__track { grid-column: 1 / -1; grid-row: 2; height: 22px; }
  .cz-cht__row .cz-cht__note  { grid-column: 1 / -1; grid-row: 3; }

  .cz-cht__bar { height: 14px; }

  /* Only the first two heads survive: the third named a column
     that is no longer beside the other two. */
  .cz-cht__heads,
  .cz-cht.is-noted .cz-cht__heads {
    grid-template-columns: 1fr auto;
  }

  .cz-cht__head--note { display: none; }

  .cz-cht__axis,
  .cz-cht.is-noted .cz-cht__axis {
    grid-template-columns: 1fr;
  }

  .cz-cht__axis .cz-cht__tick { grid-column: 1; }
  .cz-cht__unit { display: none; }

  .cz-cht__stack { height: 40px; gap: 2px; }
  .cz-cht__segpct { font-size: 12px; }

  .cz-cht__keyrow,
  .cz-cht__total {
    grid-template-columns: 4px 1fr auto;
    column-gap: 11px;
  }

  .cz-cht__keyrow .cz-cht__val { grid-column: 2; font-size: 14px; text-align: left; }
  .cz-cht__keyrow .cz-cht__pct { grid-column: 3; grid-row: 1; }
  .cz-cht__keyrow .cz-cht__lab { grid-column: 2; grid-row: 1; }
  .cz-cht__total  .cz-cht__pct { grid-column: 3; }

  /* B298. The note is the FOURTH child of a three-column grid, so with no rule of its own it
     auto-placed into an implicit second row at column 1 — the 4px rule gutter. Measured on
     /uae-corporate-tax/ at 375: the note box was 4px wide and 874px tall, setting one letter
     per line, twice in the same figure. The `.cz-cht__row` variant twelve rules above has
     carried `grid-column: 1 / -1; grid-row: 3` since it was written; `keyrow` was missed, and
     every `brackets` exhibit with a note showed it. Placed from column 2 so the note hangs
     under the label rather than under the gutter, which is where `__lab` and `__val` already
     sit. */
  .cz-cht__keyrow .cz-cht__note {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 2px;
  }

  .cz-cht__scale { height: 46px; }
  .cz-cht__rate  { font-size: 13px; }
  .cz-cht__thresh { font-size: 12px; }

  .cz-cht__step { grid-template-columns: 27px 1fr; column-gap: 13px; }
  .cz-cht__num  { width: 27px; height: 27px; font-size: 14px; }
  .cz-cht__steps::before { left: 13px; }

  .cz-cht__check { grid-template-columns: 24px 1fr; column-gap: 13px; }
  .cz-cht__state { width: 24px; height: 24px; font-size: 13px; }
}

/* ------------------------------------------------------------
   THE TABLE ON A PHONE

   The header leaves the flow and every cell announces its own
   column through data-label, so a row becomes a small labelled
   record. This is why the PHP emits data-label at all: the
   alternative is a second copy of the header in the markup,
   which a screen reader would then read twice.

   640px rather than 620px on purpose: a table runs out of room
   before a two-column row does.
   ------------------------------------------------------------ */

@media (max-width: 640px) {

  .cz-cht--table .cz-cht__table,
  .cz-cht--table .cz-cht__table tbody,
  .cz-cht--table .cz-cht__tr {
    display: block;
    width: 100%;
  }

  /* Removed from the flow, not from the accessibility tree: the
     header cells still name the columns for a screen reader
     walking the table. */
  .cz-cht--table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .cz-cht .cz-cht__table .cz-cht__tr {
    padding: 4px 0 12px;
    border-bottom: 1.5px solid var(--cz-cht-rule);
  }

  .cz-cht .cz-cht__table .cz-cht__tr .cz-cht__rh {
    display: block;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--cz-cht-hair);
    font-size: 16px;
    font-weight: 800;
  }

  .cz-cht .cz-cht__table .cz-cht__tr .cz-cht__rh::before { content: none; }

  .cz-cht .cz-cht__table .cz-cht__tr .cz-cht__td {
    display: grid;
    grid-template-columns: minmax(88px, 38%) 1fr;
    column-gap: 14px;
    padding: 8px 0 0;
    border-bottom: 0;
    text-align: left;
  }

  .cz-cht .cz-cht__table .cz-cht__tr .cz-cht__td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--cz-mid, #5b6570);
  }

  .cz-cht .cz-cht__table .cz-cht__tr .cz-cht__td.is-num {
    text-align: left;
    justify-items: start;
  }

  .cz-cht .cz-cht__table .cz-cht__tr .cz-cht__td:empty { display: none; }
}


/* ------------------------------------------------------------
   THE NARROW PHONE — 375px and below

   Measured at 375px: the container is 343px wide. Only two
   things need to change there and both are type, not layout.
   Nothing here goes under 12px.
   ------------------------------------------------------------ */

@media (max-width: 400px) {

  .cz-cht { --cz-cht-gap: 11px; }

  .cz-cht__lab { font-size: 14.5px; }
  .cz-cht__val { font-size: 15px; }

  /* Two of the delta's three value parts plus an arrow will not
     hold one line at 343px. They stack, right-aligned, and the
     arrow is dropped because the stack already says which is
     which. */
  .cz-cht--delta .cz-cht__val { display: block; }
  .cz-cht--delta .cz-cht__arrow { display: none; }
  .cz-cht__va, .cz-cht__vb { display: block; }
}


/* ============================================================
   REDUCED MOTION, AND PRINT
   ============================================================
   Every pre-state neutralised and every transition removed,
   leaving the finished, fully visible exhibit. main.js also adds
   .visible to everything immediately when the reader prefers
   reduced motion, so this is the SECOND of two independent
   guarantees rather than the only one — and print gets it too,
   because a printed page never runs an observer.

   `all: revert-layer` is not used: it would take the marks'
   `transform-origin` with it. The two properties the motion
   system touches are listed by name, so nothing else moves. */

@media (prefers-reduced-motion: reduce) {

  .cz-cht *,
  .cz-cht *::before,
  .cz-cht *::after {
    transition: none;
    animation: none;
  }

  .cz-cht[data-reveal]:not(.visible) .cz-cht__bar,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__band,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__seg,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__cap,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__rule,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__dot,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__ball,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__num,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__row,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__tr,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__step,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__check,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__keyrow,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__total,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__ends {
    transform: none;
  }

  /* The threshold marker keeps its own centring transform. */
  .cz-cht[data-reveal]:not(.visible) .cz-cht__thresh {
    transform: translateX(-50%);
  }

  .cz-cht[data-reveal]:not(.visible) * {
    opacity: 1;
  }
}

@media print {

  .cz-cht *,
  .cz-cht *::before,
  .cz-cht *::after {
    transition: none;
    animation: none;
  }

  .cz-cht[data-reveal]:not(.visible) .cz-cht__bar,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__band,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__seg,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__cap,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__rule,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__dot,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__ball,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__num,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__row,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__tr,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__step,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__check,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__keyrow,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__total,
  .cz-cht[data-reveal]:not(.visible) .cz-cht__ends {
    transform: none;
  }

  .cz-cht[data-reveal]:not(.visible) * {
    opacity: 1;
  }
}


/* ============================================================
   NO SCRIPTING — the third guarantee
   ============================================================
   The reveal contract has two guarantees already: the pre-state only exists
   under `[data-reveal]:not(.visible)`, and main.js adds `.visible` to
   everything immediately when the reader prefers reduced motion or the browser
   has no IntersectionObserver. Both of those still need main.js to RUN.

   This is the case neither covers: scripting off, or main.js blocked, or it
   threw before it reached the observer. Without this rule the pre-state would
   be the final state and a bar at scaleX(0) is an invisible exhibit — the
   finished drawing is the default everywhere else in this file and it has to be
   the default here too.

   `scripting: none` is the media feature written for exactly this and it
   cannot false-positive: where it is unsupported the query never matches and
   the other two guarantees carry it, and where it is supported it matches only
   when script genuinely will not run. Cheap insurance against the one failure
   mode that turns an animation into a missing exhibit.
   ============================================================ */

@media (scripting: none) {

  .cz-cht[data-reveal]:not(.visible) * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* No stroke reset here, and none is needed: there is not one SVG element in
     this engine. Every mark is a div or a span whose geometry is a CSS custom
     property, so `opacity` and `transform` are the whole of its pre-state. */
}