/* Written by Richard Christopher, Copyright 2026 Mindfull */
/*
 * ANALYTICS: one continuous page. The heading with its period, then the figures in blocks parted by
 * space, then one quiet Details. One hairline, under the head; nothing is boxed inside the page.
 * Tokens only (global.css); spacing on the 4px scale; sans throughout.
 *
 * THE KIT'S CONTROLS KEEP THEIR OWN LOOK (the progress rows, the status line, the buttons). The Details
 * is the shared disclosure and a field the shared field, whose look is the shared parts' sheet's
 * (`ui/parts.css`); a control's corner and a target's height are the two sizes that sheet declares.
 */
.unified-insights {
  display: grid; gap: var(--space-5);
  /* The page keeps Activity's column: stepping into it from the summary does not move the page. */
  box-sizing: border-box; width: 100%; max-width: calc(1120px + 2 * var(--space-3)); min-width: 0;
  margin-inline: auto; padding: var(--space-4) var(--space-3) var(--space-6);
  color: var(--text); font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-normal);
}
.unified-insights *, .unified-insights *::before, .unified-insights *::after { box-sizing: border-box; }
.unified-insights [hidden] { display: none !important; }
.unified-insights :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------ THE HEAD: what the page is, and of which period ------------------ */
.unified-insight-head { display: grid; gap: var(--space-3); min-width: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
/* The heading is as wide as its word: it takes focus when the page opens (`view.js`), and its ring is drawn round that. */
.unified-insight-head h1 { justify-self: start; margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); border-radius: var(--feed-radius); }
.unified-insight-period, .unified-insight-range { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); min-width: 0; }
/* A field here is the shared field (`ui/parts.css`), as wide as what it holds; the kit's buttons keep their look at a full target. */
.unified-insights .feed-field-control { width: auto; max-width: 100%; }
.unified-insights .cloudcanvas-ui-button { min-height: var(--feed-target); max-width: 100%; padding-inline: var(--space-4); }
.unified-insight-window { margin: 0; color: var(--text-dim); font-size: var(--text-base); }
.unified-insight-error { margin: 0; color: var(--fail); }
.unified-insight-state { min-width: 0; }

/* ------------------ THE FIGURES ------------------ */
.unified-insight-body, .unified-insight-figures { display: grid; gap: var(--space-5); min-width: 0; }
.unified-insight-block { display: grid; gap: var(--space-2); min-width: 0; }
.unified-insight-block h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.unified-insight-block [role='list'] { display: grid; gap: var(--space-2); min-width: 0; }
/* Each total is a caption over its number: the list runs in columns, a caption and its number to each. */
.unified-insight-metrics {
  display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content;
  gap: var(--space-1) var(--space-6); margin: 0; min-width: 0;
}
.unified-insight-metrics dt { color: var(--text-dim); font-size: var(--text-base); }
.unified-insight-metrics dd { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.unified-insight-pages { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The Details sits flush with the page it closes. */
.unified-insights > .feed-details { padding-inline: 0; max-width: 68ch; }