/* 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 -- session 37 redesign: twelve equal tiles. The S&P 500 first,
   then all eleven sectors sorted best to worst.

   3 columns x 4 rows, not 4x3: the panel's WIDTH is fixed (rule 8 -- 393
   design px, scaled) but its HEIGHT is whatever the device gives, and at
   4x3 the tile size was bound by the fixed width, leaving the taller-than-
   wide panel mostly empty above and below the grid (reviewer: "we can use
   all that extra space"). 3x4 is bound by height instead in the same box,
   which is the shape that actually fills a panel this narrow and this
   tall.

   Session 38 lane E, same reviewer word one step further -- "make these
   boxes a bit bigger." A SQUARE tile (the min of the two axis-bound sizes)
   can only ever fill the tighter axis; by the time the panel had grown
   past what a square tile needs, the looser axis was back to being a
   tile's worth of dead space, above and below the grid. `sizeGrid()` in
   js/forms/close.js now sizes `.cl-grid`'s width and height to the panel's
   full width and full height independently -- a tile is a rectangle when
   the two axes disagree, not a square capped by the smaller one -- so
   `margin:0 auto` here is now a no-op most devices (the grid fills the box
   on both axes) and only centres on the rare device where rounding leaves
   a stray fractional pixel.
 * ------------------------------------------------------------------ */
.card.close .vizsec{padding:20px 0}
.closeviz{display:flex;flex-direction:column;justify-content:center;width:100%;
  height:100%;min-height:0;padding:0 4px;
  /* the neutral tile ground, read by js/forms/close.js at wire time --
     one declaration, so the JS colour ramp and the CSS rest state can never
     disagree about what "neutral" is. */
  --tile-base:#16181B}

.cl-grid{flex:0 0 auto;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:7px}

/* One tile: a short sector name and its move, background carrying direction
   and magnitude together, both text lines centred (reviewer: "center the
   data" -- they read top-left before this). `background-color` is set
   inline by initCloseTiles -- the ramp is a continuous mix toward
   --up/--down sized by the day's own biggest mover, which a fixed CSS class
   step cannot express. `.na` (rest, and a genuinely flat tile at every
   frame) keeps --tile-base; the class still exists so a card with no
   script -- a crash, or the no-JS-at-all case -- shows a real, inert tile
   rather than an unstyled one. No `aspect-ratio` here: sizeGrid() already
   hands this element an exact box on both axes via the grid's own explicit
   width/height and equal 1fr tracks -- square only when the panel's width
   and height happen to agree, a rectangle otherwise -- and a second,
   independent square constraint on the tile itself could only disagree
   with that at a sub-pixel rounding and force a scrollbar or a gap. */
.cl-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius-sm);padding:10px;min-width:0;background:var(--tile-base);
  opacity:0;transform:scale(.92);
  transition:opacity .32s ease-out var(--d),transform .32s cubic-bezier(.16,1,.3,1) var(--d),
             background-color .18s linear}
.card.in .cl-tile{opacity:1;transform:none}

.cl-tname{font-size:12px;font-weight:600;letter-spacing:-.005em;line-height:1.2;
  text-align:center;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
/* Value text stays a fixed ink/muted colour -- never --up/--down -- because
   the background is the thing that ramps all the way to a saturated
   --up/--down at the day's biggest mover, and coloured text on a
   same-coloured background disappears exactly there (measured: Industrials
   at -1.51%, the worst mover on 2026-09-09, printed unreadable red-on-red
   before this). Direction and magnitude are both already the background;
   the text only has to stay legible on top of it. */
.cl-tval{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1;
  text-align:center;font-variant-numeric:tabular-nums;color:var(--ink)}
.cl-tile.na .cl-tval,.cl-tile.na .cl-tname{color:var(--muted)}
/* The one place the figure/label step up a size: js/forms/close.js's
   sizeGrid() is the one decision of WHETHER a tile grew enough to want it
   (compares the tighter of the two axes -- the one the label's two-line
   wrap and the value are actually bound by -- against a threshold), and
   this is the only place that decision has an effect. Never read a tile's
   own rect from CSS to make the same call twice. */
.cl-grid--lg .cl-tname{font-size:13px}
.cl-grid--lg .cl-tval{font-size:20px}
/* The S&P tile is the same square as every sector -- "no hero above" -- but
   it is still the index the other eleven are measured against, so its name
   carries a touch more weight to read first without growing the tile. */
.cl-tile.cl-index .cl-tname{color:var(--ink);font-weight:700}
/* A tinted (non-flat) tile's name goes to full ink too, for the same
   contrast reason the value does -- --muted on a saturated background at
   the top of the ramp reads as barely-there grey on red. */
.cl-tile.up .cl-tname,.cl-tile.dn .cl-tname{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .cl-tile{opacity:1;transform:none;transition:background-color .01s linear}
}

/* ------------------------------------------------------------------ *
   Legacy -- the pre-redesign index/breadth-sentence/strip/best-worst face,
   verbatim, kept so batches pinned to this renderer and written before
   `tiles` existed (2026-09-01 through 2026-09-04-close, AGENTS.md rule 7:
   a stored batch is evidence at its own shape) still draw correctly.
   js/forms/close.js's `visualCloseLegacy` draws `.closeviz-legacy` instead
   of `.closeviz`'s new `.cl-grid`, so nothing above this line can collide
   with it -- these are a completely disjoint set of class names.
 * ------------------------------------------------------------------ */
.closeviz-legacy{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:0 15px}

.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}

.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)}
.cl-primary.na .cl-idxval{color:var(--muted)}

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

.cl-strip{flex:none;display:flex;gap:5px}
.cl-strip i{flex:1;height:34px;border-radius:var(--radius-xs);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)}

.cl-end{flex:none;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;
  padding:14px 15px;border-radius:var(--radius-md);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)}
.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}
}