/* ==========================================================================
   EVAL · css/curtains/closing.css — the Closing curtain body.
   Owner: closing curtain agent. Tokens only; the band, pull tab, scrim and the
   entrance motion belong to the engine.
   Shape: the store summary on top, six lanes on one shared rate scale, and the
   value of one more sale in every lane at the bottom.
   ========================================================================== */

/* ---------- shared figure type ------------------------------------------ */
.clo-fig {
  font-family: var(--font-head); font-weight: 800;
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.clo-lb {
  font-size: var(--fs-sub); font-weight: 600; color: var(--muted);
  white-space: nowrap;
}

/* The target read-out: the tick in the bar, said in the app's one notation.
   "of 12%" is how the Store page prints the same fact, so a rate is never
   written two ways in two windows. A glyph standing in for the word read as a
   typo six times down the screen, so the word does the work and the bar keeps
   the mark. */
.clo-target {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: var(--fs-sub); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.clo-track { display: block; min-width: 0; }

/* ---------- the store summary ------------------------------------------- */
.clo-store { gap: 13px; }
.clo-store-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.clo-store-fig { font-size: var(--fs-d1); }
.clo-store-top .pill { margin-left: auto; align-self: center; }
.clo-line { display: flex; align-items: center; gap: 12px; }
.clo-line .clo-track { flex: 1; }
.clo-store-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* ---------- the lanes ---------------------------------------------------- */
.clo-list { display: flex; flex-direction: column; }
.clo-list > .clo-row + .clo-row { border-top: 1px solid var(--line2); }

/* A roll-up is not a source: Internet total is the two internet lanes added up,
   and its leads are already counted in the figure the section head carries. It
   says so by sitting indented under them in the lighter, quieter weight the
   other four names do not use — no glyph, which would only read as one more
   stray mark in a column of ticks. The indent lives inside the name cell, so
   every track still starts and ends on the same two lines as the lanes above. */
.clo-roll .clo-name {
  padding-left: 13px; color: var(--muted); font-weight: 600;
}

.clo-row {
  display: grid; width: 100%; text-align: left; align-items: center;
  min-height: 56px; padding: 9px 0; column-gap: 12px; row-gap: 8px;
  /* every track is a fixed width so six bars start and end on the same two
     lines — a lane is read by comparing it with the lane above it */
  grid-template-columns: 116px 88px minmax(72px, 1fr) 56px 78px 76px;
  grid-template-areas: "name rate track target counts pill";
  transition: transform var(--dur-liftUp) var(--ease);
}
.clo-name {
  grid-area: name; min-width: 0;
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -.25px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clo-rate { grid-area: rate; font-size: var(--fs-d2); }
.clo-row > .clo-track { grid-area: track; }
.clo-row > .clo-target { grid-area: target; }
.clo-counts {
  grid-area: counts; justify-self: end; white-space: nowrap;
  font-size: var(--fs-sub); font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.clo-counts b { font-family: var(--font-head); font-weight: 800; color: var(--ink2); }
.clo-row > .pill { grid-area: pill; justify-self: end; }

/* ---------- one more per lane -------------------------------------------- */
.clo-worth {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 12px 22px;
}
.clo-worth.one { grid-template-columns: minmax(0, 1fr); }
.clo-worth-l { display: flex; align-items: baseline; gap: 9px; }
.clo-worth-from {
  font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 700;
  color: var(--muted2); font-variant-numeric: tabular-nums;
}
.clo-worth-arrow { align-self: center; color: var(--muted2); display: flex; }
.clo-worth-to { font-size: var(--fs-d1); }
.clo-worth-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px; row-gap: 7px;
}
.clo-wl { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.clo-wl em {
  flex: 1; min-width: 0; font-style: normal; font-size: var(--fs-sub);
  font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clo-wl b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Phone: the lane becomes two lines, the worth card stacks.
   ========================================================================== */
@media (max-width: 999px) {
  .clo-store-tiles { gap: 8px; }

  .clo-row {
    grid-template-columns: 112px minmax(0, 1fr) 72px;
    grid-template-areas:
      "name counts pill"
      "rate track  target";
    column-gap: 11px; row-gap: 10px; min-height: 64px; padding: 11px 0;
  }
  .clo-rate { font-size: var(--fs-d3); }

  .clo-worth { grid-template-columns: minmax(0, 1fr); gap: 13px; }
}

/* THE SLACK. The panel is 780px and six lanes do not fill it, so the list takes
   what is left over (engine .curtain-body.fill > .grow) and spreads it between
   the lane rows instead of leaving it in one dead band under the last card. The
   rows keep their own minimum height; only the air between them moves. */
.clo-list.grow { justify-content: space-between; }