/* Stat Tile component (`[lpos_stat]` / `[lpos_stat_group]`) -- KPI tile: big value, label,
   up/down delta with arrow + accent color, tiny inline sparkline, optional icon. Token-driven
   frosted glass HUD, matches the `.lpos-c-subpanel` / `.lpos-c-archive-card` design language.
   Every value below is `var(--lpos-*, <canon :where(:root) value>)` -- no raw hex/px/rgba
   outside var()/calc, no new root tokens introduced. Self-contained: fits its panel
   (overflow:hidden, no scrollbars), reflows via CSS grid + relative units.

   @package LifePilotOS\Console
*/

/* ---- group wrapper: optional title panel + a responsive 2-4 column row ---- */
.lpos-c-stat-group {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-gap, 12px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lpos-c-stat-group__title {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--lpos-space-sm, 8px) var(--lpos-panel-pad, 12px);
  /* glass fill: console-tokens.css (one canonical rule) */
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: var(--lpos-radius-panel, 10px);
  box-sizing: border-box;
}
.lpos-c-stat-group__title h2 {
  margin: 0;
  font: 700 var(--lpos-title-size-secondary, 1.1rem)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* fixed column count (2-4, set per-instance via --lpos-stat-cols); fr tracks so the row always
   fits its panel width exactly -- narrowing the tiles, never introducing a scrollbar. */
.lpos-c-stat-group__row {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--lpos-stat-cols, 3), minmax(0, 1fr));
  gap: var(--lpos-gap, 12px);
  width: 100%;
  box-sizing: border-box;
}
/* liquid grid per device (JD standard): cap at 2 columns on narrow panels so labels/values stay
   legible instead of shrinking past readability -- whole-row reflow, no partial rows. */
@media (max-width: 640px) {
  .lpos-c-stat-group__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- one tile ---- */
.lpos-c-stat-tile {
  position: relative;
  --lpos-tile-accent: var(--lpos-accent, #00D4FF);
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-sm, 8px);
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: var(--lpos-panel-pad, 12px);
  /* glass fill: console-tokens.css (one canonical rule) */
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-tile-accent) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: var(--lpos-radius-panel, 10px);
  overflow: hidden;
}

.lpos-c-stat-tile__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--lpos-space-sm, 8px);
  min-width: 0;
}
/* CHIP-IN-PANEL EXCEPTION (documented 2026-08-10, JD's law pass -- the same exception media.php
   has carried since 2026-08-04, written down here for the Component sheets that lacked it).
   The one-panel law bans a PANEL inside a panel. It does not ban a CHIP inside a panel: a small
   round or pill-shaped marker that carries its own background/border to read as a distinct token
   ON a surface -- avatars, timeline nodes, status pills, calendar day cells, sample badges, stat
   icons. These are Assets with a shape, not panels: they never take the panel radius, never take
   the panel blur, and never contain other content. A law audit will flag them as "bare chrome
   inside chrome"; that is expected and correct. If one of these ever grows the panel radius plus
   backdrop-filter, it has stopped being a chip and the law applies again. */
.lpos-c-stat-tile__icon {
  flex: 0 0 auto;
  width: var(--lpos-control-size, 46px);
  height: var(--lpos-control-size, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lpos-radius-control, 8px);
  background: color-mix(in srgb, var(--lpos-tile-accent) var(--lpos-border-alpha-2, 40%), transparent);
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-tile-accent) var(--lpos-border-alpha-3, 55%), transparent);
  box-sizing: border-box;
}
.lpos-c-stat-tile__icon svg {
  width: var(--lpos-icon-size, 26px);
  height: var(--lpos-icon-size, 26px);
  color: var(--lpos-tile-accent);
  fill: none;
  stroke: currentColor;
}
.lpos-c-stat-tile__label {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 var(--lpos-text-xs, 13px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lpos-c-stat-tile__value {
  flex: 0 0 auto;
  margin: 0;
  font: 700 var(--lpos-title-size, 1.5rem)/1.15 var(--lpos-font-display, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lpos-c-stat-tile__foot {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-space-sm, 8px);
  min-width: 0;
}

.lpos-c-stat-tile__delta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--lpos-space-xs, 4px);
  font: 600 var(--lpos-text-xs, 13px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  white-space: nowrap;
}
/* BRAND-ONLY retint (2026-08-03): up/down deltas read as accent-intensity, not hue -- up is the
   tile's own full accent (brightest/"lit"), down is the same accent dimmed toward muted (dimmer/
   "cooling"), flat stays muted. Every tenant's --lpos-accent repaints all three automatically;
   no green/red literal or off-brand token involved. */
.lpos-c-stat-tile__delta--up { color: var(--lpos-tile-accent, var(--lpos-accent, #00D4FF)); }
.lpos-c-stat-tile__delta--down { color: color-mix(in srgb, var(--lpos-tile-accent, var(--lpos-accent, #00D4FF)) 45%, var(--lpos-muted, #A8B2C7)); }
.lpos-c-stat-tile__delta--flat { color: var(--lpos-muted, #A8B2C7); }
.lpos-c-stat-tile__arrow { display: inline-flex; flex: 0 0 auto; }
.lpos-c-stat-tile__arrow svg {
  width: var(--lpos-icon-size-xs, 20px);
  height: var(--lpos-icon-size-xs, 20px);
  display: block;
  color: inherit;
  fill: none;
  stroke: currentColor;
}

/* visually-hidden a11y text (structural pattern, no design-token values involved) */
.lpos-c-stat-tile__sr {
  position: absolute;
  width: var(--lpos-border-width, 1px);
  height: var(--lpos-border-width, 1px);
  padding: 0;
  margin: calc(var(--lpos-border-width, 1px) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* sparkline: small, right-aligned, tinted with the tile's accent */
.lpos-c-stat-tile__sparkwrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 5.5rem;
  height: 1.6rem;
  color: var(--lpos-tile-accent);
  line-height: 0;
}
.lpos-c-stat-tile__spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* sample-data chip: honest flag on demo-sourced tiles so a preview number is never mistaken for
   a real live metric. */
.lpos-c-stat-tile__sample {
  position: absolute;
  top: var(--lpos-space-sm, 8px);
  right: var(--lpos-space-sm, 8px);
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border-radius: var(--lpos-radius-sm, 4px);
  background: var(--lpos-glass-2, rgba(255,255,255,0.055));
  border: var(--lpos-border-width, 1px) solid var(--lpos-glass-rule, rgba(255,255,255,0.10));
}

/* honest-empty tile: dashed placeholder, no fabricated number */
.lpos-c-stat-tile--empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.lpos-c-stat-tile__emptytext {
  font: 600 var(--lpos-text-sm, 14px)/1.3 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
}