/* close
   Split from the single v22 stylesheet. Everything here is scoped to
   .card.close and this form's own class prefix (rule 14: a change made for one
   card form is scoped to that form, by class). */
/* ------------------------------------------------------------------ *
   The Close
 * ------------------------------------------------------------------ */
/* lane-close-panel, 2026-09-03: the stage lays out for the panel it is
   given -- a range, ~375-570 design px across devices (NEXT.md, "each form
   fills its panel") -- never a number. The rule this replaces capped
   `.vizsec` at a literal 640-765px floor tuned against one phone, which is
   exactly the per-form-floor plumbing session 32 pulled out (`--faceh-min`,
   a per-form scale factor). It is gone rather than re-tuned: under the
   current shell (`lane-shell-flex-panel`, session 33) the block above the
   panel is a FIXED reserve, sized once, so `.card.solo .vizsec` is already
   `flex:1;min-height:0;overflow:hidden` with no height or cap of its own --
   whatever the panel is given IS what `.vizsec` gets. This form needs no
   override of `.vizsec` to hold that; the work moves inside `.closeviz`
   instead (below), which now flexes to whatever height it is handed rather
   than assuming 569, 765 or any other one number. */
.card.close .vizsec{padding:20px 0}
.closeviz{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:0 15px}

/* Six gaps stand in for what used to be plain margins/padding between the
   five things this form draws -- the index, the breadth sentence, the
   strip, BEST, WORST (see js/forms/close.js: "Five things, and no more").
   A margin cannot flex-shrink; only a flex item can. So each gap that is
   free to give under a short panel is a real, empty flex item, and every
   content block below carries `flex:none` so it is never one of the things
   asked to shrink -- the words are not shortened and a row is never
   clipped, only the space between rows is spent. `.card.close:not(.open)
   .vizsec`'s old 765px floor clipped the WORST row before this landed;
   nothing here has a floor above zero, and nothing needs one, because
   emptying every gap still leaves a real one: the five content blocks
   alone measure 287px (74+19+34+80+80, all four viewports checked) against
   a ~375px panel at the shortest of them.

   Two tiers, not one uniform shrink. g1 and g5 are pure position padding --
   distance from the top of the panel to the first thing drawn, and from the
   strip's own group to the results' own group -- with no relationship
   pinned to the exact number, so they carry most of the give and carry it
   fastest (flex-shrink:6). g2, g3, g4 and g6 are gaps this file's own
   comments already argue for on meaning, not just spacing (see .cl-breadth,
   .cl-strip and .cl-end below), and shrink at a sixth of the rate
   (flex-shrink:1) -- a merely-short panel spends g1/g5 first and only
   reaches a documented gap once those two are already at zero. */
.cl-gap{flex-grow:0;min-height:0}
.cl-gap.g1{flex:0 6 57px}
.cl-gap.g2{flex:0 1 26px}
.cl-gap.g3{flex:0 1 11px}
.cl-gap.g4{flex:0 1 40px}
.cl-gap.g5{flex:0 6 12px}
.cl-gap.g6{flex:0 1 14px}

/* one index, large */
/* `flex:none`: a content block never shrinks (see the gap comment above) --
   the position it starts at is now g1, a sibling flex item, rather than its
   own margin, which is why the margin that used to open this rule is gone. */
.cl-primary{flex:none;display:flex;flex-direction:column;gap:5px}
.cl-idxname{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none}
.cl-idxval{font-size:clamp(44px,13vw,58px);font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--up)}
.cl-primary.dn .cl-idxval{color:var(--down)}
/* A non-numeric pct (fe-002) draws neither -- the sheet had no third colour
   for that until now, so ".na" fell through to the default above and a
   stored "n/a" read as a real gain. Never reachable from a real payload:
   direction() maps every finite pct, including zero, to up or dn. */
.cl-primary.na .cl-idxval{color:var(--muted)}

.cl-breadth{flex:none;font-size:15px;font-weight:600;color:var(--muted)}

/* Eleven blocks, unlabelled, in rank order. The point is the run of colour --
   it says two-and-nine before a reader has read a single number, which is
   what the eleven-row ranking it replaced could never do. */
.cl-strip{flex:none;display:flex;gap:5px}
.cl-strip i{flex:1;height:34px;border-radius:5px;background:var(--line);
  transform:scaleY(.35);transform-origin:center;opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1) var(--d),opacity .28s ease-out var(--d),
             background-color .28s ease-out var(--d)}
.card.in .cl-strip i{transform:none;opacity:1}
.card.in .cl-strip i.up{background:var(--up)}
.card.in .cl-strip i.dn{background:var(--down)}

/* the two ends of the day, as the card's main contrast. No longer wrapped in
   a `.cl-ends` flex column -- g4/g5/g6 above are its old margin-bottom,
   padding-top and row gap, three of the six shared spacers now, so the
   wrapper had nothing left to size and was one more flex context the
   column's shrink math would have had to cross without shrinking anything
   itself. The strip and these two results are still one thought, which is
   what g4 (the old 40px, protected) still argues for -- 106px flush between
   them read as two unrelated blocks, and the reclaimed space is still
   margin rather than a break in the middle of a group, it is just a sibling
   flex item rather than one row's own margin-bottom.

   `.cl-end.worst` carries the `margin-bottom:auto` the wrapper used to:
   same mechanism -- an auto margin on the LAST flex item in the column
   spends whatever the panel does not need -- same element order, so a tall
   panel still parks the extra room below WORST rather than spreading it
   through the column above. */
.cl-end{flex:none;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;
  padding:14px 15px;border-radius:10px;background:#0E0F11}
.cl-end.best{background:rgba(51,224,142,.065)}
.cl-end.worst{margin-bottom:auto;background:rgba(255,77,61,.065)}
.cl-tag{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin-bottom:3px}
.cl-end.best .cl-tag{color:var(--up)}
.cl-end.worst .cl-tag{color:var(--down)}
/* 18px, measured: "Communication Services" is the longest GICS sector name
   and it truncates at 20px in the width this row leaves it. Sized against the
   worst case rather than against whichever sector happened to lead today. */
.cl-sector{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-move{font-style:normal;font-size:18px;font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-end.best .cl-move{color:var(--up)}
.cl-end.worst .cl-move{color:var(--down)}

@media (prefers-reduced-motion:reduce){
  .cl-strip i{transform:none;opacity:1;transition:none}
}