/* v3 KPI band, hero figure, Needs attention (core §3, §7; reference §7;
   plan §11 #101, #102; boards Hybrid, HybridPhoneSA). One bordered band split
   by 1px dividers into 2–4 cells (2 × 2 when the band is narrower than 48rem),
   never a card per figure.
   Change line: colour by MEANING (good / bad / review / neutral), the words
   always say the direction. Macros: core/components/_lg_kpi.html. */

.lg-kpi { margin: 0; container: lg-kpi / inline-size; }
.lg-kpi__band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.lg-kpi__band[data-cells="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-kpi__band[data-cells="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Event dashboards show only what the event is set up for (decision 345), so a
   band can hold 1, 5 or 6 cards; every row is filled (344): one card = the
   whole row, five = 3 + 2 (6-column grid), six = 3 + 3. */
.lg-kpi__band[data-cells="1"] { grid-template-columns: minmax(0, 1fr); }
.lg-kpi__band[data-cells="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lg-kpi__band[data-cells="5"] > .lg-kpi__cell { grid-column: span 2; }
.lg-kpi__band[data-cells="5"] > .lg-kpi__cell:nth-child(n + 4) { grid-column: span 3; }
.lg-kpi__band[data-cells="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-kpi__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}
.lg-kpi__cell + .lg-kpi__cell { border-left: 1px solid var(--border); }
.lg-kpi__label {
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
}
.lg-kpi__body { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; min-width: 0; }
/* Tabular figures: these values refresh live, so digits mustn't shift (#102). */
.lg-kpi__value {
  position: relative;
  display: block;
  font-size: var(--size-kpi);
  line-height: var(--leading-kpi);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.lg-kpi__link { text-decoration: none; }
.lg-kpi__link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; }
.lg-kpi__narrow { display: none; }
.lg-kpi__change, .lg-kpi__fact {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
}
.lg-kpi__fact { color: var(--text-muted); }
.lg-kpi__change svg { flex: none; margin-top: 0.125rem; }
.lg-kpi__change--good    { color: var(--success); }
.lg-kpi__change--bad     { color: var(--danger); }
.lg-kpi__change--review  { color: var(--warning); }
.lg-kpi__change--neutral { color: var(--text-muted); }
.lg-kpi__spark { margin-top: var(--space-1); }

/* ---------- Hero figure: the one lead number (Hero type, proportional, #102) ---------- */
.lg-hero { display: flex; flex-direction: column; gap: var(--space-1); }
.lg-hero__label { margin: 0; color: var(--text-muted); font-size: var(--size-label); line-height: var(--leading-label); }
.lg-hero__value {
  position: relative;
  display: block;
  font-size: var(--size-hero);
  line-height: var(--leading-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ---------- Needs attention ---------- */
.lg-attn__list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.lg-attn__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  text-decoration: none;
}
.lg-attn__row:hover { background: var(--row-hover); }
.lg-attn__dot {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-top: 0.375rem;
  border-radius: 50%;
}
.lg-attn__row--danger  .lg-attn__dot { background: var(--danger); }
.lg-attn__row--warning .lg-attn__dot { background: var(--warning); }
.lg-attn__row--info    .lg-attn__dot { background: var(--primary); }
.lg-attn__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.lg-attn__summary { font-weight: 600; }
.lg-attn__detail { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }
.lg-attn__action { flex: none; color: var(--primary); font-size: var(--size-label); }
.lg-attn__row:hover .lg-attn__action { text-decoration: underline; }
.lg-attn__chevron { display: none; flex: none; color: var(--text-muted); }
.lg-attn__empty { margin: var(--space-3) 0 0; color: var(--text-muted); }

/* ---------- Phones: 2 × 2, shorter money, rows with a chevron ---------- */
/* 2 × 2 whenever the band itself is narrow (phones, tablets, laptops with
   the sidebar open), not only on phones: 4 cells under ~12rem each wrap
   "NZD 58,240.00" and the change lines (found in the phase 4 checks). */
@container lg-kpi (max-width: 48rem) {
  .lg-kpi__band, .lg-kpi__band[data-cells="3"], .lg-kpi__band[data-cells="5"],
  .lg-kpi__band[data-cells="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-kpi__band[data-cells="1"] { grid-template-columns: minmax(0, 1fr); }
  .lg-kpi__band[data-cells="5"] > .lg-kpi__cell:nth-child(n) { grid-column: auto; }
  .lg-kpi__band[data-cells="3"] .lg-kpi__cell:last-child,
  .lg-kpi__band[data-cells="5"] > .lg-kpi__cell:last-child { grid-column: 1 / -1; }
  .lg-kpi__cell + .lg-kpi__cell { border-left: 0; }
  .lg-kpi__cell:nth-child(even) { border-left: 1px solid var(--border); }
  .lg-kpi__cell:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

@media (max-width: 39.99em) {
  .lg-kpi__cell { padding: var(--space-3) var(--space-4); }
  /* The short value / change shows; the full one stays for screen readers. */
  .lg-kpi__value:has(.lg-kpi__narrow) .lg-kpi__wide,
  .lg-kpi__change:has(.lg-kpi__narrow) .lg-kpi__wide {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .lg-kpi__narrow { display: inline; }
  .lg-hero__value { font-size: 2.25rem; line-height: 2.75rem; }
  .lg-hero__value:has(.lg-kpi__narrow) .lg-kpi__wide {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .lg-attn__action { display: none; }
  .lg-attn__chevron { display: inline-flex; align-self: center; }
}

/* ---------- Cards: each figure its own card (board Hybrid) ----------
   Same cells, no shared frame: a gap instead of dividers, every card equal
   height with the sparkline on its bottom edge. A figure with a link is
   clickable as a whole card (the value link's ::after covers the card; the
   sparkline sits above it so its tooltips still work). */
.lg-kpi--cards .lg-kpi__band {
  gap: var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
/* Raised (owner chose A, session 12; Atlassian raised / overlay): a soft
   shadow at rest; light mode needs no border, dark keeps one. */
.lg-kpi--cards .lg-kpi__cell,
.lg-kpi--cards .lg-kpi__cell + .lg-kpi__cell {
  position: relative;
  border: 1px solid var(--raised-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}
.lg-kpi--cards .lg-kpi__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* A small icon in a soft blue square names the figure at a glance. */
.lg-kpi__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-control);
  background: var(--primary-tint);
  color: var(--primary-ink);
}
/* A figure that needs a look: muted amber card, amber icon square. */
.lg-kpi--cards .lg-kpi__cell--warning,
.lg-kpi--cards .lg-kpi__cell--warning:nth-child(n) {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: var(--warning-tint);
}
.lg-kpi--cards .lg-kpi__cell--warning .lg-kpi__icon { background: var(--surface); color: var(--warning); }
.lg-kpi__cell--warning .lg-meter__fill { fill: var(--warning); }
.lg-kpi--cards .lg-kpi__cell--danger { background: var(--danger-tint); }
.lg-kpi--cards .lg-kpi__cell--danger .lg-kpi__icon { background: var(--surface); color: var(--danger); }

/* Hover lift (pointer devices only, cards that open something): the card
   moves up 2px and a stronger shadow fades in (opacity of a ::before, so
   only transform and opacity animate). Press: a small push-in. */
.lg-kpi--cards .lg-kpi__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-raised-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease);
}
.lg-kpi--cards .lg-kpi__cell { transition: transform var(--dur-enter) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .lg-kpi--cards .lg-kpi__cell:has(.lg-kpi__link):hover { transform: translateY(-2px); }
  .lg-kpi--cards .lg-kpi__cell:has(.lg-kpi__link):hover::before { opacity: 1; }
}
.lg-kpi--cards .lg-kpi__cell:has(.lg-kpi__link):active { transform: scale(0.98); transition-duration: var(--dur-fast); }

/* Live refresh: a card whose number changed glows soft blue, then fades
   (js/v3/kpi-live.js adds the class; one authored moment). */
.lg-kpi--cards .lg-kpi__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px var(--primary);
  opacity: 0;
  pointer-events: none;
}
.lg-kpi--cards .lg-kpi__cell--changed::after { animation: lg-kpi-changed 900ms var(--ease) both; }
/* Both layers sit behind the text but above the card's own background
   (the card is its own stacking context). */
.lg-kpi--cards .lg-kpi__cell { isolation: isolate; }
.lg-kpi--cards .lg-kpi__cell::before,
.lg-kpi--cards .lg-kpi__cell::after { z-index: -1; }
@keyframes lg-kpi-changed { 0% { opacity: .9; } 100% { opacity: 0; } }
/* Ledger 2 motion 319 (4): the new figure itself fades in (120ms), with the glow. */
.lg-kpi--cards .lg-kpi__cell--changed .lg-kpi__value { animation: lg-kpi-value-in var(--dur-fast) var(--ease) both; }
@keyframes lg-kpi-value-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lg-kpi--cards .lg-kpi__cell, .lg-kpi--cards .lg-kpi__cell::before { transition: none; }
  .lg-kpi--cards .lg-kpi__cell:has(.lg-kpi__link):hover,
  .lg-kpi--cards .lg-kpi__cell:has(.lg-kpi__link):active { transform: none; }
  /* The changed-value glow stays: it only fades (no movement). */
}
/* Compact: the trend sits beside the number (not under it), every card has
   a second line, and a capacity-style figure gets a thin bar, so no card is
   a big empty box (skills critique, session 12). */
.lg-kpi--cards .lg-kpi__cell { padding: var(--space-4); gap: var(--space-2); }
.lg-kpi--cards .lg-kpi__body { flex: 1; gap: var(--space-1); }
/* Number + trend on one row that wraps: a long value pushes the sparkline
   under it (it ran into "NZD 58,240.00" at 1440px; "115" split on phones). */
.lg-kpi__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.lg-kpi--cards .lg-kpi__value { white-space: nowrap; }
.lg-kpi--cards .lg-kpi__spark { position: relative; z-index: 1; flex: 1 0 5rem; max-inline-size: 7rem; margin: 0 0 0.375rem; }
.lg-kpi__meter { display: block; inline-size: 100%; block-size: 0.375rem; margin-top: var(--space-2); }
/* The whole card is the link; it lifts on hover instead of changing colour. */
.lg-kpi--cards .lg-kpi__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lg-kpi--cards .lg-kpi__link:hover { color: inherit; text-decoration: none; }
.lg-kpi--cards .lg-kpi__link:focus-visible { outline: none; }
.lg-kpi--cards .lg-kpi__cell:has(.lg-kpi__link:focus-visible) { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
@container lg-kpi (max-width: 48rem) {
  .lg-kpi--cards .lg-kpi__band { gap: var(--space-3); }
  .lg-kpi--cards .lg-kpi__cell:nth-child(n) { border: 1px solid var(--raised-border); }
}