/* ==========================================================================
   UI fragments

   Small building blocks that look like CAT360 without being screenshots: a
   window frame, KPI tiles, a data table, bar charts, flag chips and a
   citation popover. Built in HTML and CSS so they stay sharp at any size,
   take the brand tokens, and can animate. Every figure in them is sample
   data, and each window says so in its header.

   Growth animations (bars, stacked segments) run inside a .ui-grow parent
   when it gains .is-active or .is-revealed, and only once main.js has set
   html.reveal-ready. Without JS, or under reduced motion, they render in
   their final state.
   ========================================================================== */

/* Shared by every fragment, including chips and popovers used on their own
   outside a window. */
:root {
  --ui-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --ui-line: var(--purple-tint-3);
  --ui-soft: var(--off-white);
  --ui-reclaim: var(--gold);
  --ui-error: #c8364a;
  --ui-evidence: var(--purple-accent);
}

.ui-window {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  color: var(--purple-primary);
  font-size: 0.8125rem;
  text-align: left;
}

.ui-window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--ui-line);
  background: var(--form-bg);
}

.ui-window__dots {
  display: flex;
  gap: 0.3125rem;
}

.ui-window__dots span {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--purple-tint-2);
}

.ui-window__title {
  font-weight: 700;
  color: var(--purple-heading);
}

.ui-window__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.ui-window__body {
  padding: 1rem;
  overflow-x: auto;
}

/* On a phone the tenant name and period crowd the title; the sample-data
   chip stays. */
@media (max-width: 559px) {
  .ui-window__tenant {
    display: none;
  }
}

/* ── Chips ──────────────────────────────────────────────────────────────── */

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 99px;
  background: var(--purple-tint-1);
  color: var(--purple-heading);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-chip--reclaim { background: color-mix(in srgb, var(--ui-reclaim) 18%, white); color: var(--gold-text); }
.ui-chip--error { background: color-mix(in srgb, var(--ui-error) 12%, white); color: var(--ui-error); }
.ui-chip--evidence { background: color-mix(in srgb, var(--ui-evidence) 12%, white); color: var(--purple-accent-hover); }
.ui-chip--ok { background: #e6f5ec; color: #1f7a45; }

/* ── KPI tiles ──────────────────────────────────────────────────────────── */

.ui-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem;
}

.ui-kpi {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--border-radius);
  background: var(--white);
}

.ui-kpi__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ui-kpi__value {
  display: block;
  color: var(--purple-heading);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ui-kpi--hero .ui-kpi__value {
  font-size: 1.625rem;
}

.ui-kpi__note {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
}

/* ── Table ──────────────────────────────────────────────────────────────── */

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ui-table th {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--ui-line);
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--off-white);
  white-space: nowrap;
}

.ui-table tr:last-child td {
  border-bottom: 0;
}

.ui-table .num {
  text-align: right;
}

.ui-table .code {
  font-family: var(--ui-mono);
  font-size: 0.75rem;
}

.ui-table tr.is-flagged td {
  background: color-mix(in srgb, var(--ui-flag, var(--ui-error)) 7%, white);
}

.ui-table tr.is-flagged td:first-child {
  box-shadow: inset 3px 0 0 var(--ui-flag, var(--ui-error));
}

/* ── Horizontal bars ────────────────────────────────────────────────────── */

.ui-hbars {
  display: grid;
  gap: 0.625rem;
}

.ui-hbar {
  display: grid;
  grid-template-columns: 7.5rem 1fr 4.5rem;
  align-items: center;
  gap: 0.75rem;
}

.ui-hbar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-hbar__track {
  height: 0.625rem;
  border-radius: 99px;
  background: var(--ui-soft);
  overflow: hidden;
}

.ui-hbar__fill {
  display: block;
  width: var(--w, 50%);
  height: 100%;
  border-radius: inherit;
  background: var(--ui-fill, var(--purple-accent));
  transform-origin: left center;
}

.ui-hbar__value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Stacked bar ────────────────────────────────────────────────────────── */

.ui-stack {
  display: flex;
  height: 1.25rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ui-soft);
}

.ui-stack__seg {
  width: var(--w);
  background: var(--ui-fill);
  transform-origin: left center;
}

.ui-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin-top: 0.625rem;
  font-size: 0.75rem;
}

.ui-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.ui-legend span::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 3px;
  background: var(--ui-fill);
}

/* ── Column chart ───────────────────────────────────────────────────────── */

.ui-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 0.375rem;
  height: 9rem;
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--ui-line);
}

.ui-columns__bar {
  height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  background: var(--ui-fill, var(--purple-accent));
  transform-origin: bottom center;
}

.ui-columns__bar.is-muted {
  background: var(--purple-tint-2);
}

.ui-columns__axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.375rem;
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: 0.625rem;
  text-align: center;
}

/* ── Donut ──────────────────────────────────────────────────────────────── */

.ui-donut {
  --p: 50;
  position: relative;
  display: grid;
  place-items: center;
  width: 6.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--ui-fill, var(--purple-accent)) calc(var(--p) * 1%), var(--purple-tint-1) 0);
}

.ui-donut::before {
  content: '';
  position: absolute;
  inset: 0.875rem;
  border-radius: 50%;
  background: var(--white);
}

.ui-donut__value {
  position: relative;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--purple-heading);
}

.ui-donut__value small {
  display: block;
  color: var(--text-muted);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Citation popover ───────────────────────────────────────────────────── */

.ui-popover {
  position: relative;
  padding: 1rem 1.125rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  color: var(--purple-primary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ui-popover__title {
  margin: 0.375rem 0 0.25rem;
  color: var(--purple-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.ui-popover__cites {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px dashed var(--purple-tint-2);
  display: grid;
  gap: 0.5rem;
}

.ui-popover__cites li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ui-popover__cites svg {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.125rem;
  color: var(--purple-accent);
}

.ui-popover__cites strong {
  color: var(--purple-heading);
  font-weight: 600;
}

/* ── Growth animation ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .ui-grow .ui-columns__bar,
  .ui-grow .ui-hbar__fill,
  .ui-grow .ui-stack__seg {
    transition: transform var(--dur-slow, 0.8s) var(--ease-out, ease-out);
    transition-delay: calc(var(--i, 0) * 45ms);
  }

  .reveal-ready .ui-grow:not(.is-active):not(.is-revealed) .ui-columns__bar {
    transform: scaleY(0.04);
  }

  .reveal-ready .ui-grow:not(.is-active):not(.is-revealed) .ui-hbar__fill,
  .reveal-ready .ui-grow:not(.is-active):not(.is-revealed) .ui-stack__seg {
    transform: scaleX(0.02);
  }
}