/* ==========================================================================
   EVAL · css/curtains/pace.css — the inside of the Pace curtain.
   Owner: pace curtain agent. Tokens only, no hex codes; the band, pull tab,
   scrim and entrance belong to the engine. Structures here are layout for the
   primitives in components.css (ring, bar, pill, tile, section head) plus one
   local piece, the ladder tier chip (.ptier) — a candidate for components.css.
   ========================================================================== */

/* ---------- the one-line read above the sections ------------------------ */
.pace-top { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---------- THIS MONTH: three dials ------------------------------------- */
/* auto-fit, so a store with two lanes in the feed gets two full tiles, never a hole */
.pace-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; }

.pdial {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-width: 0;
  padding: 12px 10px 11px; text-align: center;
  background: var(--surf); border: 1px solid var(--line2); border-radius: var(--r-md);
  transition: transform var(--dur-liftUp) var(--ease);
}
.pdial .pd-l { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.pdial .pd-l b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: var(--ls-head); color: var(--ink);
}
.pdial .pd-v { display: flex; align-items: center; gap: 7px; max-width: 100%; }
.pdial .pd-of { font-size: var(--fs-sub); font-weight: 500; color: var(--muted); white-space: nowrap; }

/* The pace tick is the whole point of these rings, and it is now the PRIMITIVE's
   own weight: components.css draws it as the bar's target tick bent round the
   dial — ink at .34 light / .52 dark, crossing the whole stroke. This file kept
   a private copy at grey .92, which read as a stray hyphen floating beside two
   of the three dials and vanished into the green on the third. One instrument,
   one rule (SPEC §0: no parallel look in a feature file). */

/* ---------- THIS QUARTER: the two RDR ladders --------------------------- */
.pace-rdrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }

.prdr {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 13px 15px 14px; text-align: left;
  background: var(--surf); border: 1px solid var(--line2); border-radius: var(--r-md);
  transition: transform var(--dur-liftUp) var(--ease);
}
.prdr .pr1 { display: flex; align-items: center; gap: 9px; min-width: 0; }
.prdr .pr1 b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: var(--ls-head); color: var(--ink); white-space: nowrap;
}
.prdr .pr2 { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.prdr .pr2 strong {
  font-family: var(--font-head); font-size: var(--fs-d1); font-weight: 800;
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink);
}
.prdr .pr2 span {
  font-size: var(--fs-row); font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the ladder's tier chips: banked tiers read green, the one being chased is outlined */
.ptiers { display: flex; gap: 7px; }
.ptier {
  flex: 1; min-width: 0; padding: 6px 4px; text-align: center;
  border-radius: var(--r-sm); background: var(--surf2); border: 1px solid transparent;
}
.ptier b {
  display: block; font-size: var(--fs-pill); font-weight: 700; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptier span {
  display: block; margin-top: 1px; font-family: var(--font-head);
  font-size: var(--fs-h3); font-weight: 800; color: var(--ink2);
}
.ptier.hit { background: var(--goodBg); }
.ptier.hit b, .ptier.hit span { color: var(--goodInk); }
.ptier.now { background: var(--card); border-color: var(--pur); }
.ptier.now b, .ptier.now span { color: var(--purInk); }

/* ---------- THE GAP: four figures --------------------------------------- */
.pace-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 10px; }

/* ---------- elapsed meters + selling days ------------------------------- */
.pace-foot {
  display: flex; align-items: center; gap: 16px; margin-top: 12px;
  padding: 13px 15px; background: var(--surf);
  border: 1px solid var(--line2); border-radius: var(--r-md);
}
.pmeter { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pmeter .pm-h { display: flex; align-items: center; gap: 9px; }
.pmeter .pm-h b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: var(--ls-head); color: var(--ink); white-space: nowrap;
}
.pmeter .pm-v { font-size: var(--fs-sub); font-weight: 600; color: var(--muted); }
/* ELAPSED TIME CARRIES NO TONE. The two meters at the foot of this curtain are
   the same kind of fact — how much of a period has gone — and they were drawn in
   two different inks: "Quarter elapsed 93%" in the brand ramp and "Month elapsed
   80%" in --amber → --peach, because the window asks the primitive for `warm`.
   Side by side with no key, and with amber meaning Due / Watch / warn everywhere
   else in EVAL, the month bar read as a warning about the calendar. Nobody is
   behind because it is the 24th. Both meters take the brand ramp here, so the
   pair reads as one instrument; the READING beside them ("4 selling days left")
   is where a verdict belongs. The `warm` class is still on the element — when
   js/curtains/pace.js stops passing the tone this rule becomes a no-op and can
   go with it. */
.pace-foot .pmeter .bar > i { background: var(--gradR); }

/* ---------- a shorter iPad (1024x768): the same board, tighter ---------- */
@media (min-width: 1000px) and (max-height: 800px) {
  .pace-dials, .pace-rdrs, .pace-gaps { margin-top: 8px; }
  .pdial { padding: 10px 10px 9px; gap: 5px; }
  .prdr { padding: 11px 14px 12px; gap: 8px; }
  .prdr .pr2 strong { font-size: var(--fs-d2); }
  .pace-gaps .tile { padding: 10px 13px; }
  .pace-foot { margin-top: 10px; padding: 11px 15px; }
}

/* ---------- phone: the same shapes, stacked where 393px asks for it ------ */
@media (max-width: 999px) {
  .pace-dials { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .pdial { padding: 11px 6px 10px; gap: 5px; }
  .pdial .pd-l, .pdial .pd-v { flex-direction: column; gap: 5px; }
  .pdial .pd-l { gap: 6px; }

  .pace-rdrs { grid-template-columns: 1fr; gap: 10px; }
  .pace-gaps { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

  .pace-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .pace-foot > .pill { align-self: center; }
}