@layer components {

  .insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    align-items: start;
    gap: var(--space-3);
  }

  .insight {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    min-width: 0;
  }

  
  .insight--wide { grid-column: 1 / -1; }

  .insight--locked { color: var(--ink-muted); }

  .insight__say {
    
    max-width: none;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .insight__figure {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-normal);
  }

  
  .insight__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  
  .insight__to { margin-block: calc(var(--space-2) * -1); }

  .insight__aside {
    color: var(--ink-faint);
    font-size: var(--text-sm);
  }

  .insight-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
  }

  .insight-windows {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
  }

  
  .button.insight-windows__choice[aria-current] {
    border-color: var(--accent);
    background: var(--accent-sunk);
    color: var(--ink);
  }

  
  .select.insight-lens { width: auto; min-width: 11rem; max-width: 18rem; }

  .insight-flow { display: grid; gap: var(--space); }

  .insight-flow__plot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 2px;
    block-size: 8rem;
    padding: var(--space);
    background: var(--surface-sunk);
    border-radius: var(--radius-inset);
  }

  .insight-flow__day {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--line-w-glyph);
    block-size: 100%;
    min-width: 0;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
  }

  .insight-flow__day:hover {
    background: color-mix(in oklab, var(--surface) 55%, var(--surface-sunk));
  }

  
  .insight-flow__stem {
    min-block-size: var(--line-w-glyph);
  }

  .insight-flow__stem--in  { border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
  .insight-flow__stem--out { border-radius: 0 0 var(--radius-xs) var(--radius-xs); }

  .insight-flow__stem--in  { background: var(--line-strong); }
  .insight-flow__stem--out { background: var(--go); }

  .insight-flow__axis,
  .insight-flow__key {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-faint);
    font-size: var(--text-xs);
  }

  .insight-flow__axis { justify-content: space-between; font-family: var(--font-mono); }

  .insight-flow__mark {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: var(--radius-pill);
    margin-inline-end: calc(var(--space) * -0.5);
  }

  .insight-flow__mark--in  { background: var(--line-strong); }
  .insight-flow__mark--out { background: var(--go); }

  .insight-band {
    display: flex;
    block-size: var(--space-4);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-sunk);
  }

  
  .insight-band__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 0;
    min-inline-size: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .insight-band__segment--fresh,
  .insight-band__segment--kept    { background: var(--go); color: var(--accent-ink); }
  .insight-band__segment--recent  { background: var(--go-sunk); color: var(--go); }
  .insight-band__segment--ageing,
  .insight-band__segment--late    { background: var(--warn-sunk); color: var(--warn); }
  .insight-band__segment--old,
  .insight-band__segment--overdue { background: var(--danger-sunk); color: var(--danger); }

  .insight-band__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space) var(--space-2);
    color: var(--ink-muted);
    font-size: var(--text-xs);
  }

  .insight-band__note { display: flex; align-items: center; gap: var(--space); }

  .insight-band__mark {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: var(--radius-pill);
  }

  .insight-band__mark--fresh,
  .insight-band__mark--kept    { background: var(--go); }
  .insight-band__mark--recent  { background: var(--go-sunk); border: var(--line-w) solid var(--go); }
  .insight-band__mark--ageing,
  .insight-band__mark--late    { background: var(--warn); }
  .insight-band__mark--old,
  .insight-band__mark--overdue { background: var(--danger); }

  .insight-bars { display: flex; flex-direction: column; gap: var(--space); }

  
  .insight-bar {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding-inline: var(--space);
    margin-inline: calc(var(--space) * -1);
  }

  .insight-bar:hover { background: var(--surface-hover); }

  .insight-bar__who {
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .insight-bar__track {
    block-size: var(--space);
    background: var(--surface-sunk);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  
  .insight-bar__fill {
    display: block;
    block-size: 100%;
    border-radius: var(--radius-pill);
    background: var(--colour, var(--accent));
  }

  .insight-bar--warn .insight-bar__fill { background: var(--warn); }

  .insight-bar__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    text-align: end;
  }

  .insight-rows { display: flex; flex-direction: column; }

  .insight-row {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding-inline: var(--space);
    margin-inline: calc(var(--space) * -1);
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
  }

  .insight-row:hover { background: var(--surface-hover); }

  .insight-row__ref { white-space: nowrap; }

  .insight-row__title {
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .insight-row__when {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    white-space: nowrap;
  }

  .insight-row__when--warn   { color: var(--warn); }
  .insight-row__when--danger { color: var(--danger); }

  .insight-tally {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
  }

  .insight-tally__figure { display: flex; flex-direction: column; gap: 2px; }

  .insight-tally__count {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
  }

  .insight-tally__count--new  { color: var(--new); }
  .insight-tally__count--warn { color: var(--warn); }

  .insight-tally__label { color: var(--ink-faint); font-size: var(--text-xs); }

  @media (width <= 48rem) {
    .insights { grid-template-columns: minmax(0, 1fr); }
    .insight-bar { grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem; }
    .insight-row { grid-template-columns: 4rem minmax(0, 1fr) auto; }

    .insight-windows { flex: 1 1 100%; flex-wrap: nowrap; }
    .insight-windows__choice { flex: 1; padding-inline: var(--space); }
    .select.insight-lens { flex: 1 1 100%; max-width: none; }
  }

  @media (width <= 48rem) {
    .insight-row {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "title title" "ref when";
      align-items: baseline;
      padding-block: var(--space);
    }

    .insight-row__title { grid-area: title; }
    .insight-row__ref   { grid-area: ref; }
    .insight-row__when  { grid-area: when; text-align: end; }
  }

  @media (width <= 40rem) {
    .insight { padding: var(--space-3); }
  }
}