/* Insights: hero, range, rail, counterparties and the Custom popover.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

/* ————— hero ————— */
.ins-hero { margin-bottom: var(--space-4); }
.ins-readout { min-width: 0; }

/* The window the figures are for, after the label, as the demo's phrase. */
.ins-window { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ins-window:not(:empty)::before { content: "· "; }
.ins-date { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ins-state { margin-top: var(--space-12); max-width: 56ch; font-size: var(--text-14); }
.ins-retry { margin-top: var(--space-12); }
.ins-range { flex: none; }
.ins-range[hidden] { display: none; }
.ins-range-custom { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-chart { min-height: 210px; }
.ins-chart[hidden] { display: none; }
.ins-currency-row { margin-bottom: var(--space-16); }

/* Waiting: a skeleton the shape of what arrives, then later reads dim what
   is there rather than blanking it. */
.ins-skel-value { width: 260px; max-width: 70%; height: 40px; margin-top: var(--space-10); }
.ins-skel-date { width: 72px; height: 12px; margin-top: var(--space-10); }
.ins-skel-chart { height: 196px; margin-top: var(--space-8); border-radius: var(--r-card); }
.ins-skel-label { width: 64px; height: 10px; }
.ins-skel-figure { width: 120px; height: 20px; margin-top: var(--space-12); }
#ins-root .ins-readout, #ins-root .ins-chart, #ins-root #ins-body { transition: opacity var(--dur-2) var(--ease); }
#ins-root.is-busy .ins-readout, #ins-root.is-busy .ins-chart, #ins-root.is-busy #ins-body { opacity: 0.5; pointer-events: none; }

/* ————— stat rail ————— */
.ins-rail { margin-top: var(--space-24); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ins-rail-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ins-rail .stat-cell:first-child { padding-left: 0; }
.ins-rail .tile-value { overflow-wrap: anywhere; }
.ins-rail .tile-sub:empty { display: none; }
@media (max-width: 1099px) {
  .ins-rail-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ins-rail-5 .stat-cell:nth-child(4) { border-left: none; padding-left: 0; }
}
@media (max-width: 760px) {
  .ins-rail, .ins-rail-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-rail .stat-cell { padding: var(--space-14) var(--space-12); }
  .ins-rail .stat-cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .ins-rail .stat-cell:nth-child(even) { border-left: 1px solid var(--border-faint); }
  /* An odd last figure sits alone on its row, so its rule and its figure take the whole row, not half of it. */
  .ins-rail .stat-cell:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* ————— counterparties beside what this covers ————— */
.ins-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-44); align-items: start; margin-top: var(--space-32); }
@media (max-width: 900px) { .ins-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); } }
.ins-section { margin: 0; }
.ins-party-name { min-width: 0; flex-shrink: 1; overflow-wrap: anywhere; }
.ins-party .def-value { flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-party-group + .ins-party-group { margin-top: var(--space-16); }
/* A group's heading carries its See all at the far end. */
.ins-group-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); padding-bottom: var(--space-4); }
.ins-none { padding: var(--space-4) 0; }

/* ————— the Custom popover ————— */
.ins-custom { padding: var(--space-14) var(--space-16); width: 300px; max-width: 100%; }
.ov-sheet .ins-custom { width: auto; }
.ins-custom-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.ins-custom .field { margin-bottom: 0; min-width: 0; }
.ins-custom-actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-16); }

/* ————— the full list behind See all ————— */
.cp-controls { display: flex; gap: var(--space-8); margin-bottom: var(--space-12); flex-wrap: wrap; }
.cp-controls .tx-search { flex: 1 1 160px; }

@media (max-width: 640px) {
  .ins-range { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ins-range .seg-btn { flex: 1 0 auto; }
}