/*
  INSIGHTS — History window, Insights route (formerly WORK's summary).
  Screen: 1394 × 1060 (the History window's default 1394 width; the page is
  cut at the window's height, inside the Continuity cards, where it scrolls).

  Source: Sources/UI/Week/WorkRosterView.swift (WorkInsightsList,
  WorkGlobalSummary, WorkPeriodControl), WorkSummaryStats.swift (stats card and
  clock), WorkSummaryMixCard.swift, WorkSummaryComparison.swift (change column
  and sparkline), WorkSummarySwitches.swift, WorkSummaryTransitions.swift,
  WorkSummaryContinuity.swift, WorkGlobalSummaryCards.swift (card chrome,
  strip, columns), Components/ControlPill.swift, History/HistoryPageLayout.swift
  (controls band); values from Theme.History, Theme.Typography, Theme.Spacing.
  Content is WorkGlobalSummaryPreviewGallery.s1 with s1Comparison, 2026-09-16
  as today, in WorkRosterPreviewGallery(part: .insightsShell)'s frame.
*/

.screen--work {
  width: 1394px;
  height: 1060px;

  /* Theme.Surface.contentFill (ContentFill) — the page and rail paper. */
  --work-paper: #fbfbf8;
  /* Theme.History.cardFill (GlassCardFill). */
  --work-card: #ffffff;
  /* Theme.fill(n) is `fg` at n% opacity. */
  --work-fg: 43, 43, 43;
  /* NSColor.tertiaryLabelColor — Theme.text(.tertiary). */
  --work-3rd-ink: rgba(0, 0, 0, 0.26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen--work {
    --work-paper: #0b171c;
    --work-card: rgba(16, 33, 40, 0.98);
    --work-fg: 234, 242, 244;
    --work-3rd-ink: rgba(255, 255, 255, 0.25);
  }
}
:root[data-theme="dark"] .screen--work {
  --work-paper: #0b171c;
  --work-card: rgba(16, 33, 40, 0.98);
  --work-fg: 234, 242, 244;
  --work-3rd-ink: rgba(255, 255, 255, 0.25);
}

.screen--work {
  /* Theme.History summary fills. */
  --work-data: var(--blue);                               /* summaryCreditedFill: support(.blue, 100) */
  --work-clock-band: color-mix(in srgb, var(--blue) 20%, transparent); /* summaryClockFill */
  --work-clock-rim: rgba(var(--work-fg), 0.45);           /* summaryClockRim */
  --work-strip-track: rgba(var(--work-fg), 0.06);         /* summaryStripTrack */
  --work-strip-remainder: rgba(var(--work-fg), 0.16);     /* summaryStripRemainder */
  --work-pill: rgba(var(--work-fg), 0.05);                /* Theme.fill(5) */
}

.screen--work .mac-window { width: 100%; height: 100%; background: var(--work-paper); }
.screen--work .history { background: var(--work-paper); }

/* ---------- Type ---------- */

.screen--work .work-section { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.14px; color: var(--ink); }
.screen--work .work-body { font-size: 13px; line-height: 19px; }
.screen--work .work-strong { font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: -0.02px; color: var(--ink); }
.screen--work .work-small { font-size: 12px; line-height: 16px; }
.screen--work .work-eyebrow { font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px; white-space: nowrap; }
.screen--work .work-num { font-variant-numeric: tabular-nums; }
.screen--work .work-2nd { color: var(--muted-ink); }
.screen--work .work-link { color: var(--selection); white-space: nowrap; }
.screen--work .lucide { display: block; }

/* ---------- Page ---------- */

.screen--work .work-page { display: flex; flex-direction: column; padding-bottom: 16px; }

/* historyControlsBand: titlebarInset 32 above, a 77pt band (date strip
   height), 14 below; the period pill alone, at the band's bottom trailing. */
.screen--work .work-band {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 77px;
  padding: 32px 0 14px;
}

/* ControlPill: secondary type, 12 × 4 padding, fill(5) capsule, 14pt icon. */
.screen--work .work-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--work-pill);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.screen--work .work-pill__icon .lucide { width: 14px; height: 14px; }
.screen--work .work-pill__chev { color: var(--work-3rd-ink); }
.screen--work .work-pill__chev .lucide { width: 12px; height: 12px; }
/* SteadyWidthText: as wide as the widest option. */
.screen--work .work-steady { display: inline-grid; }
.screen--work .work-steady > span { grid-area: 1 / 1; }
.screen--work .work-steady > span[aria-hidden] { visibility: hidden; }

/* ---------- Summary ---------- */

.screen--work .work-summary { display: flex; flex-direction: column; gap: 12px; /* cardGap */ }
.screen--work .work-card {
  padding: 18px; /* summaryCardInset */
  background: var(--work-card);
  border: 1px solid var(--hairline);
  border-radius: 17px;
  min-width: 0;
}
/* WorkSummaryColumnsLayout: two equal columns beside the 12pt gap. */
.screen--work .work-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.screen--work .work-heading { display: flex; align-items: baseline; gap: 8px; padding-top: 8px; }

/* Stats card: card fill, no border; the clock in the leading quarter, the
   three figures centred beside it. 24 vertical, 18 + 8 horizontal; 8 below. */
.screen--work .work-stats {
  display: grid;
  grid-template-columns: calc((100% - 12px) * 0.25) 1fr;
  gap: 12px;
  padding: 24px 26px;
  margin-bottom: 8px;
  background: var(--work-card);
  border-radius: 17px;
}
.screen--work .work-clock { position: relative; width: 150px; height: 150px; justify-self: center; }
.screen--work .work-clock svg { display: block; }
.screen--work .work-clock__band { fill: var(--work-clock-band); }
.screen--work .work-clock__line { fill: none; stroke: var(--work-data); stroke-width: 1.75; stroke-linejoin: round; }
.screen--work .work-clock__face { fill: var(--work-card); stroke: var(--work-clock-rim); stroke-width: 2; }
.screen--work .work-clock__ticks { fill: none; stroke: var(--hairline); stroke-width: 1; }
.screen--work .work-clock > span { position: absolute; transform: translate(-50%, -50%); }
.screen--work .work-figures { display: flex; gap: 12px; align-self: center; }
.screen--work .work-figure { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.screen--work .work-figure__value { font-size: 32px; line-height: 36px; letter-spacing: -0.36px; color: var(--ink); white-space: nowrap; }

/* Allocation strip: 9 high, capsule, 2 between segments, over the track. */
.screen--work .work-strip {
  display: flex;
  gap: 2px;
  height: 9px;
  margin: 4px 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--work-strip-track);
}
.screen--work .work-strip > i { flex-basis: 0; min-width: 0; }

/* Mix cards. */
.screen--work .work-mix { display: flex; flex-direction: column; gap: 8px; }
.screen--work .work-mixhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.screen--work .work-mixrows { display: flex; flex-direction: column; }
.screen--work .work-mixrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink);
}
.screen--work .work-mixrow__icon,
.screen--work .work-chev { align-self: center; }
.screen--work .work-mixrow__icon .lucide { width: 16px; height: 16px; }
.screen--work .work-mixrow__label { flex: 1; min-width: 0; }
.screen--work .work-col-dur { width: 64px; text-align: right; }
.screen--work .work-col-share { width: 40px; text-align: right; }
.screen--work .work-col-change { width: 150px; text-align: right; white-space: nowrap; }
.screen--work .work-spark { display: block; flex: none; }
.screen--work .work-spark path { fill: none; stroke: var(--muted-ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.screen--work .work-spark circle { fill: var(--muted-ink); }
.screen--work .work-chev { color: var(--work-3rd-ink); }
.screen--work .work-chev .lucide { width: 12px; height: 12px; }

/* App switches by day: counts over bars (max 22 wide, 56 tall), a hairline
   baseline, dates beneath. */
.screen--work .work-switches { display: flex; flex-direction: column; gap: 8px; }
.screen--work .work-switches__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.screen--work .work-chart { display: flex; flex-direction: column; gap: 2px; }
.screen--work .work-chart__bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.screen--work .work-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.screen--work .work-bar { display: block; width: 100%; max-width: 22px; border-radius: 2px; background: var(--work-data); }
.screen--work .work-chart hr { margin: 0; border: 0; height: 1px; background: var(--hairline); }
.screen--work .work-chart__labels { display: flex; gap: 4px; }
.screen--work .work-chart__labels > span { flex: 1 1 0; text-align: center; }

/* Continuity cards. */
.screen--work .work-cont { display: flex; flex-direction: column; gap: 4px; }