/* elara_zero_drift.css: the PAGE layer for /AI/zero-drift, loaded by that page and no other.
   Tokens only, zero literals, same gates as elara_pages.css (tools/design_scan.py, tests/test_design_math.py).

   The split, 2026-09-07. elara_pages.css is the SYSTEM layer every chat-space page loads; this file holds
   what belongs to this page's subject. Measured before the move (C:\TempAifix\design-math\measure_page_coupling.py):
   71 rules in the shared sheet, 48 shared, 21 used by exactly one page -- 11 of them by /AI/zero-drift alone.
   Ten of those eleven are moved here.

   The seam rule is "would a SECOND page want this rule", not "does a second page use it today".

     MOVED   .pg-bars / .pg-bar and their two mobile overrides -- the comparison bars are how THIS page states
             a drift measurement. Nothing else in the space draws them.
     MOVED   .pg-table tr.ref td -- a page-specific table modifier, which the method note puts in the page layer
             beside cards and panels.
     STAYED  .pg-cmd, the command block. It is used only here today, so the coupling report counts it as
             single-page, but it is a generic content primitive in the same family as .pg-table and .pg-qa:
             any page that shows a reader a command to run would want it, and the seam rule is prospective.
             Moving it would have hit the count and missed the rule. One rule of the eleven therefore stays,
             deliberately, and the coupling report will keep showing it as single-page.

   Wiring, all four steps, or it 404s and the page renders unstyled: the <link> in elara_zero_drift.html AFTER
   elara_pages.css; CHAT_FILES in chat_build.py; SHEETS in tools/tier1_pages_measure.py, or the sheet escapes
   the literal ratchet; deploy/nginx is already generalised to elara_[a-z0-9_]+\.css. Restart the local server
   after adding it -- chat_assets.ASSETS is computed at import. */

/* the reference row: a comparator the page shows but does not claim */
.pg-table tr.ref td{color:var(--faint)}

/* bars: one height token; ours in gold, the comparator in --line2; the value sits inside the bar */
.pg-bars{display:grid;grid-template-columns:var(--col-label) minmax(0,1fr) minmax(0,1fr);gap:var(--sp1) var(--sp2);align-items:center;margin:0}
.pg-bars .lbl{font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--mut);text-align:right;font-variant-numeric:tabular-nums}
.pg-bars .hd{font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut);letter-spacing:var(--tr-wide);text-transform:uppercase;font-weight:var(--w-semi)}
.pg-bar{position:relative;height:var(--sp3);background:var(--tint-ink)}
.pg-bar i{position:absolute;top:0;bottom:0;left:0;background:var(--gold2)}
.pg-bar.cmp i{background:var(--line2)}
.pg-bar span{position:absolute;right:0;top:0;line-height:var(--sp3);font-size:var(--fs-step--2);color:var(--ink);background:var(--panel);padding:0 var(--sp-half);font-variant-numeric:tabular-nums;font-weight:var(--w-semi)}

/* the bars collapse to two columns on a phone: the comparator moves under ours rather than beside it */
@media(max-width:640px){
  .pg-bars{grid-template-columns:var(--col-label) minmax(0,1fr)}
  .pg-bars .cmp,.pg-bars .hd.cmp{grid-column:2}
}
.pg-idioms{--strobe-edge:var(--strobe-edge);--cta-gold-fill:var(--cta-gold-fill);--chip-fill:var(--chip-fill);--chip-line:var(--chip-line);--scrim-image:var(--scrim-image)}