/* ==========================================================================
   EVAL · css/viz.css — the answer visualization library (SPEC-ASK-V2 §2).
   Owner: viz agent. Tokens only, no hex codes. Every shape in here is LAYOUT
   for primitives that already exist in components.css — the ring, the bar, the
   tile, the pill, the avatar, the section head, the tier chip — so a figure
   Val draws inside a bubble is the same object as the figure one tap deep in
   its curtain, not a second drawing that happens to agree.
   ========================================================================== */

/* ---------- the block card ---------------------------------------------- */
/* A block is an inset surface: it sits INSIDE something (an assistant bubble, a
   curtain body, a card) and has to read as part of it, so it takes the family's
   soft surface rather than a second white card with a second shadow. */
.viz {
  display: flex;
  flex-direction: column;
  /* a <button> sizes to its contents even as a block-level flex container, so a
     block WITH a destination drew half the width of the identical block without
     one — the width belongs to the block, not to whether it is tappable */
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 12px 13px 13px;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  /* a block is a button whenever it has a destination: the lift belongs here */
  transition: transform var(--dur-liftUp) var(--ease);
}
.viz-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.viz .sec-head { margin-top: 0; }
.viz .sec-head .cv { flex: 0 0 auto; display: flex; color: var(--muted2); opacity: .7; }
.viz-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.viz .sec-head + .viz-body { margin-top: 11px; }

/* Inside an answer the surrounding bubble is already --card, and --surf is a
   half-step from white in light: the inset step that reads on both themes is
   --surf2, the same one the answer's tiles take. */
.ask-b .viz { background: var(--surf2); }
.ask-b .viz-stack, .ask-b > .viz { margin-top: 13px; }

/* ---------- kpis: the tile grid ----------------------------------------- */
/* No chrome of its own — a tile is already a surface, and a card around four
   cards is a box around boxes. The grid rule is the answer tiles' own: one
   tile fills the width, two pair up, three run across, four make the 2x2, so
   there is never a half-empty row or an orphan at double the area. */
/* `.viz.viz-kpis` and not `.viz-kpis`: inside a bubble `.ask-b .viz` outranks a
   single class, and the tile grid drew its own tinted box under tiles of exactly
   the same tint — a surface inside a surface inside a bubble. */
.viz.viz-kpis { background: none; border: 0; padding: 0; }
.viz-kpis .viz-body { gap: 0; }
.viz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.viz-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.viz-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.viz-kpis .tile { background: var(--surf2); border-color: var(--line2); }
.viz-kpis .tile b { font-size: var(--fs-d3); letter-spacing: -.7px; white-space: nowrap; }

/* ---------- bars: lanes on one shared scale ----------------------------- */
.viz-rows { display: flex; flex-direction: column; min-width: 0; }
.viz-bars .viz-rows { gap: 11px; }
.viz-bar {
  display: grid;
  grid-template-columns: minmax(64px, 104px) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 11px;
  min-width: 0;
}
.viz-bl {
  grid-column: 1; min-width: 0;
  font-size: var(--fs-row); font-weight: 600; color: var(--ink2); letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viz-bt { grid-column: 2; min-width: 0; }
.viz-bv {
  grid-column: 3; text-align: right; white-space: nowrap;
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.2px; color: var(--ink);
}

/* ---------- ring: the same dial the Pace curtain draws ------------------ */
.viz-dial { display: flex; align-items: center; gap: 16px; min-width: 0; }
.viz-ring-l { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.viz-of { font-size: var(--fs-sub); font-weight: 500; color: var(--muted); }

/* ---------- compare: two figures and, when it is honest, their share ---- */
.viz-cmp { display: flex; align-items: center; gap: 13px; min-width: 0; }
.viz-half { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.viz-half.r { align-items: flex-end; text-align: right; }
.viz-half b {
  font-family: var(--font-head); font-size: var(--fs-d2); font-weight: 800;
  letter-spacing: -1px; line-height: var(--lh-tight); color: var(--ink); white-space: nowrap;
}
.viz-half span { font-size: var(--fs-sub); font-weight: 500; color: var(--muted); }
.viz-vs { flex: 0 0 auto; width: 1px; align-self: stretch; min-height: 38px; background: var(--line); }

/* ---------- list / people: the family's rows, compact ------------------- */
.viz-list .row, .viz-people .row { min-height: 42px; padding: 6px 0; }
.viz-c {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.2px; color: var(--ink);
}
/* the tail of a trimmed list is a count, not a caption: it says how many rows
   the dataset holds that this block did not draw */
.viz-more .tt { font-weight: 600; color: var(--muted); }
.viz-p { gap: 10px; }

/* ---------- table: small tables only ------------------------------------ */
.viz-table table { width: 100%; border-collapse: collapse; }
.viz-table th {
  font-family: var(--font-head); font-size: var(--fs-pill); font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 0 0 8px; white-space: nowrap;
}
.viz-table td {
  font-size: var(--fs-row); font-weight: 500; color: var(--ink2);
  padding: 9px 0; border-top: 1px solid var(--line2);
}
.viz-table td:first-child { font-weight: 600; color: var(--ink); }
.viz-table th.r, .viz-table td.r { text-align: right; }
.viz-table td.r {
  font-family: var(--font-head); font-weight: 800; color: var(--ink);
  letter-spacing: -.2px; white-space: nowrap;
}
.viz-table th + th, .viz-table td + td { padding-left: 12px; }

/* ---------- spark: one line over an ordered series ---------------------- */
.viz-sp-f { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.viz-sp-f b {
  font-family: var(--font-head); font-size: var(--fs-d2); font-weight: 800;
  letter-spacing: -1px; line-height: var(--lh-tight); color: var(--ink);
}
.viz-sp-f span {
  font-size: var(--fs-sub); font-weight: 500; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The plot stretches to the block's width, so the viewBox height IS the css
   height: the head dot can be placed in pixels down and per cent across
   without an svg circle being stretched into an ellipse with it. */
.viz-sp { position: relative; height: 64px; min-width: 0; }
.viz-sp svg { width: 100%; height: 100%; }
.viz-sp-a { fill: var(--lav); stroke: none; }
.viz-sp-l { fill: none; stroke: var(--pur); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.viz-sp-d {
  position: absolute; width: 11px; height: 11px; border-radius: var(--r-pill);
  background: var(--pur); border: 2px solid var(--card);
  transform: translate(-50%, -50%); pointer-events: none;
}

/* ---------- ladder: the RDR tiers --------------------------------------- */
.viz-lad-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.viz-lad-t strong {
  font-family: var(--font-head); font-size: var(--fs-d2); font-weight: 800;
  letter-spacing: -1px; line-height: var(--lh-tight); color: var(--ink);
}
.viz-lad-t span {
  font-size: var(--fs-row); font-weight: 500; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The chip itself is the family's .ptier (today declared in css/curtains/pace.css,
   flagged for components.css) — this is only the row it sits in, repeated here so
   a ladder is legible in any window that loads viz.css. */
.viz-ladder .ptiers { display: flex; gap: 7px; min-width: 0; }
/* A tier that is neither banked nor being chased takes its fill from --surf2 —
   which is also the block's own fill inside an assistant bubble, so the chip
   disappeared into the card and "Super 137" read as loose text beside two
   chips. The chip already carries a 1px transparent border for the `now`
   state; here it gets a hairline so it is a chip on either surface. */
.viz-ladder .ptier:not(.hit):not(.now) { border-color: var(--line2); }

/* ---------- phone ------------------------------------------------------- */
@media (max-width: 999px) {
  .viz { padding: 11px 12px 12px; }
  /* 393px cannot hold label + track + figure on one line without shaving the
     label to an ellipsis: the figure stays beside its name and the track takes
     the full width under them. */
  .viz-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 7px; }
  .viz-bl { grid-row: 1; }
  .viz-bv { grid-row: 1; grid-column: 2; }
  .viz-bt { grid-row: 2; grid-column: 1 / 3; }
  .viz-bars .viz-rows { gap: 13px; }
  .viz-dial { gap: 13px; }
  .viz-sp { height: 56px; }
  .viz-table th + th, .viz-table td + td { padding-left: 9px; }
  .viz-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}