/* ============================================================================
   THE DEADLINE RULER (ledger P3-2) — base audit §5.3 + §5.13
   ----------------------------------------------------------------------------
   Bar LENGTH is calendar time and nothing else, so the two bars under one
   heading are directly comparable and the break is visible as length. Bar COLOUR
   is the badge state, which means --mira appears here only where law does.
   Container queries use `plate` (ledger C16).
   ========================================================================= */

.ruler-plate { position: relative; }
.dr-intro { color: var(--star-dim); max-width: 80ch; margin: 0 0 1.75rem; }

.dr-clock { padding-block: 1.1rem; border-top: var(--hair) solid color-mix(in srgb, var(--star) 12%, transparent); }
.dr-clock:first-of-type { border-top: 0; }

.dr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .7rem; }
.dr-label { font-family: var(--f-display); font-size: var(--d5); color: var(--star); }
.dr-count { color: var(--star-dim); font-size: var(--m-small); margin-left: auto; }
.dr-head .badge { white-space: normal; }

/* Two bars per clock. The label sits on its own line at narrow widths and beside
   the bar once there is room — same data, no reflow of the comparison itself. */
.dr-bar-row { display: grid; grid-template-columns: 1fr; gap: .2rem; margin-bottom: .45rem; align-items: center; }
@container plate (min-width: 760px) { .dr-bar-row { grid-template-columns: 22rem minmax(0, 1fr); gap: 1rem; } }
.dr-bar-l { color: var(--star-dim); letter-spacing: .03em; }

.dr-bar {
  display: flex; align-items: center; justify-content: flex-end;
  min-width: 6rem; height: 1.7rem; padding-right: .55rem;
  border-radius: 0;                       /* charts have square corners */
  transform-origin: left center;
}
.dr-bar-v { font-size: var(--m-tick); color: var(--star); opacity: .92; }

/* ⛔ Colour here is the SEMANTIC state, not decoration. --mira only where law. */
.dr-bar-statute { background: color-mix(in srgb, var(--mira) 42%, transparent);
                  border-left: var(--hair-strong) solid var(--mira); }
.dr-bar-policy  { background: color-mix(in srgb, var(--phosphor) 38%, transparent);
                  border-left: var(--hair-strong) solid var(--phosphor); }
.dr-bar-nofix   { background: color-mix(in srgb, var(--star-dim) 26%, transparent);
                  border-left: var(--hair-strong) solid var(--star-dim); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Bars draw in on scroll — the ONE sequenced moment base audit §5.3 asks for.
       scaleX, never width: width animation is layout, scaleX is the compositor. */
    .dr-bar { animation: draw-x linear both; animation-timeline: view(); animation-range: entry 12% entry 58%; }
  }
}

.dr-note { color: var(--star-dim); margin: .55rem 0 0; max-width: 82ch; }
.dr-note .badge { margin-right: .35rem; }

/* ── The clocks that do not exist in law ─────────────────────────────────
   Drawn as an OPEN-ENDED bar with no terminus (base audit §5.3): there is no
   statutory end point to draw, so the diagram does not draw one. */
.dr-nofix { margin-top: 1.75rem; padding-top: 1.25rem;
            border-top: var(--hair) solid color-mix(in srgb, var(--star) 22%, transparent); }
.dr-region { color: var(--star-dim); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .9rem; }
.dr-nofix-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-block: .5rem; }
.dr-open {
  flex: 1 1 8rem; height: 1.7rem; min-width: 6rem;
  border-left: var(--hair-strong) solid var(--star-dim);
  background: linear-gradient(90deg, color-mix(in srgb, var(--star-dim) 22%, transparent), transparent 92%);
}
.dr-nofix-row .dr-count { margin-left: 0; }

.dr-prov { color: var(--star-dim); margin: 1.5rem 0 0; max-width: 88ch; }

@media print {
  .ruler-plate { background: #fff; color: #000; }
  .dr-label, .dr-bar-v { color: #000; }
  .dr-bar { border: 1px solid #666; }
}

/* ══ THE CLOCK LEDGER (replaces the bar chart) ═══════════════════════
   The bar rules above are now inert — nothing emits .dr-bar. They are left in
   place because they document the two-start-date comparison the worked example
   still uses. */
.dl-group { margin-top: clamp(1.5rem, 3.2vh, 2.4rem); }
.dl-group:first-of-type { margin-top: .9rem; }
.dl-h {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 500; color: var(--star);
  padding-bottom: .4rem;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--star) 22%, transparent);
}
.dl-n { margin-left: auto; color: var(--star-dim); font-variant-numeric: tabular-nums; }
.dl-what { margin: .45rem 0 .9rem; color: var(--star-dim); max-width: 74ch; }

/* ⚠ A FLOOR IS MARKED, because the direction of safety is inverted on it.
   Everything else on this plate can be tightened; these cannot. */
.dl-min .dl-h { border-bottom-color: color-mix(in srgb, var(--amber, #C89B3C) 55%, transparent); }

.dl-row {
  padding: .8rem 0 .9rem;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--star) 10%, transparent);
  break-inside: avoid;
}
.dl-label { margin: 0; font-size: .98rem; font-weight: 500; color: var(--star); }
.dl-count { margin: .25rem 0 .5rem; }
.dl-v { font-size: 1.5rem; color: var(--star); font-variant-numeric: tabular-nums; }
.dl-u { color: var(--star-dim); font-size: var(--m-tick); }

/* the facts grid: label left, value right, at a readable measure */
.dl-facts {
  margin: 0; display: grid; gap: .28rem .9rem;
  grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
}
.dl-facts dt {
  color: var(--star-dim); font-size: var(--m-tick);
  letter-spacing: .04em; text-transform: uppercase;
}
.dl-facts dd { margin: 0; max-width: 68ch; color: var(--star); }
.dl-facts .badge { margin-right: .3rem; }
.dl-warn { color: var(--star-dim); }

.dl-worked { margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.dl-ex-label { margin: .2rem 0 .5rem; }
.dl-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.dl-ex li {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .4rem 0; border-bottom: var(--hair) solid color-mix(in srgb, var(--star) 10%, transparent);
}
.dl-ex-why { color: var(--star-dim); flex: 1 1 100%; }

@media (max-width: 720px) {
  .dl-facts { grid-template-columns: 1fr; gap: .1rem; }
  .dl-facts dt { margin-top: .45rem; }
}