/*
  WORK — History window, roster route.
  Screen: 1394 × 1310 (the History window's default 1394 width; the height is
  cropped a little way into the third stream card, where the page scrolls).

  Source: Sources/UI/Week/WorkRosterView.swift (WorkRosterList, WorkRosterCard,
  WorkStreamFacts), WorkGlobalSummaryCards.swift (ledger, mix, continuity and
  daily cards), Sources/UI/Day/HistoryRecurringCalendar.swift, ControlPill.swift;
  values from Theme.History, Theme.Typography, Theme.Spacing. Content is
  WorkRosterPreviewGallery(part: .page): the populated roster and its facts,
  over WorkGlobalSummaryPreviewGallery.s1, with 2026-09-16 as today.
*/

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

  /* 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); also the text
     field placeholder. */
  --work-3rd-ink: rgba(0, 0, 0, 0.26);
  /* Theme.History.workActivityLabel: secondary in Light, tertiary in Dark. */
  --work-activity-label: var(--muted-ink);
  /* NSOutlineView disclosure triangle (DisclosureGroup on macOS). */
  --work-disclosure: rgba(0, 0, 0, 0.5);
}
@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);
    --work-activity-label: rgba(255, 255, 255, 0.25);
    --work-disclosure: rgba(255, 255, 255, 0.55);
  }
}
: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);
  --work-activity-label: rgba(255, 255, 255, 0.25);
  --work-disclosure: rgba(255, 255, 255, 0.55);
}

.screen--work {
  /* Theme.History summary fills. */
  --work-credited: var(--blue);                           /* support(.blue, 100) */
  --work-uncredited: rgba(var(--work-fg), 0.24);          /* summaryUncreditedFill */
  --work-strip-track: rgba(var(--work-fg), 0.06);         /* summaryStripTrack */
  --work-strip-remainder: rgba(var(--work-fg), 0.16);     /* summaryStripRemainder */
  --work-zero: rgba(var(--work-fg), 0.32);                /* summaryUnavailableHatch */
  --work-field: rgba(var(--work-fg), 0.06);               /* Theme.fill(6) */
  --work-pill: rgba(var(--work-fg), 0.05);                /* Theme.fill(5) */
  --work-cal-period: color-mix(in srgb, var(--selection) 32%, transparent);
  --work-cal-observed: color-mix(in srgb, var(--selection) 11%, transparent);
}

.screen--work .mac-window { width: 100%; height: 100%; background: var(--work-paper); }
.screen--work .history { background: var(--work-paper); }
/* WORK pads itself (WorkRosterList: Spacing.card on every side) and ignores
   the titlebar safe area, so the shell's page inset is not added here. */
.screen--work .history-content { padding: 0; }

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

.screen--work .work-title { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.14px; }
.screen--work .work-body { font-size: 13px; line-height: 19px; }
.screen--work .work-small { font-size: 12px; line-height: 16px; }
.screen--work .work-smallstrong { font-size: 12px; line-height: 16px; font-weight: 500; }
.screen--work .work-mini { font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px; }
.screen--work .work-figure,
.screen--work .work-fact__value { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.34px; }
.screen--work .work-num { font-variant-numeric: tabular-nums; }
.screen--work .work-2nd { color: var(--muted-ink); }
.screen--work .work-3rd { color: var(--work-3rd-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: 16px;
}

.screen--work .work-headrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.screen--work .work-headrow > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ControlPill: small 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; /* Theme.History.cardGap */
  margin-bottom: 24px; /* Spacing.section */
}
.screen--work .work-card {
  padding: 18px; /* summaryCardInset */
  background: var(--work-card);
  border: 1px solid var(--hairline);
  border-radius: 17px;
  min-width: 0;
}
.screen--work .work-heading-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px; /* Spacing.related above the row */
}
.screen--work .work-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

/* Ledger: figures 40%, attribution 60% of the row beside the 12pt gap. */
.screen--work .work-ledger { display: flex; flex-direction: column; gap: 12px; }
.screen--work .work-ledger__row { display: grid; grid-template-columns: 2fr 3fr; gap: 12px; }
.screen--work .work-ledger__figures { display: flex; flex-direction: column; gap: 2px; }
.screen--work .work-ledger__attr { display: flex; flex-direction: column; gap: 8px; }
.screen--work .work-parts { display: flex; gap: 24px; }
.screen--work .work-part { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.screen--work .work-part__label { display: flex; align-items: baseline; gap: 4px; }
.screen--work .work-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.screen--work .work-coverage { display: flex; flex-direction: column; gap: 8px; }
.screen--work .work-coverage hr { margin: 0; border: 0; height: 1px; background: var(--hairline); }
.screen--work .work-disclosure { display: flex; align-items: center; gap: 4px; }
.screen--work .work-disclosure__tri { color: var(--work-disclosure); }
.screen--work .work-disclosure__tri .lucide { width: 12px; height: 12px; stroke-width: 2.6; }
.screen--work .work-disclosure .work-small { display: flex; gap: 4px; align-items: baseline; }
.screen--work .work-dot { color: var(--work-3rd-ink); }

/* Mix cards. */
.screen--work .work-mix { display: flex; flex-direction: column; gap: 8px; }
.screen--work .work-cardhead { display: flex; flex-direction: column; gap: 2px; }
.screen--work .work-mix .work-strip { margin: 4px 0; }
.screen--work .work-mixrows { display: flex; flex-direction: column; }
.screen--work .work-mixrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 19px;
}
.screen--work .work-mixrow__icon .lucide { width: 16px; height: 16px; }
.screen--work .work-mixrow__label { flex: 1; min-width: 0; }
.screen--work .work-chev { color: var(--work-3rd-ink); }
.screen--work .work-chev .lucide { width: 12px; height: 12px; }

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

/* Recorded by day: title column, chart, All days in one row. */
.screen--work .work-daily { display: flex; align-items: flex-start; gap: 12px; }
.screen--work .work-daily__info { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.screen--work .work-daily__chart { flex: 1; display: flex; align-items: flex-end; gap: 4px; }
.screen--work .work-day {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
}
.screen--work .work-day__glyph { height: 10px; }
.screen--work .work-day__mark {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.screen--work .work-bar { display: block; width: 100%; max-width: 28px; border-radius: 2px; background: var(--work-credited); }
.screen--work .work-zero { display: block; width: 100%; max-width: 28px; height: 2px; border-radius: 1px; background: var(--work-zero); }
.screen--work .work-alldays { display: flex; align-items: center; gap: 2px; }
.screen--work .work-alldays .lucide { width: 12px; height: 12px; }

/* ---------- Roster ---------- */

.screen--work .work-rosterhead { display: flex; align-items: baseline; gap: 12px; }
.screen--work .work-spacer { flex: 1; }
.screen--work .work-search {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 280px;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--work-field);
  font-size: 13px;
  line-height: 19px;
}
.screen--work .work-search__icon { color: var(--work-3rd-ink); }
.screen--work .work-search__icon .lucide { width: 12px; height: 12px; stroke-width: 2.4; }
.screen--work .work-search__placeholder { color: var(--work-3rd-ink); }

.screen--work .work-roster { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.screen--work .work-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px; /* Theme.History.cardInset */
  background: var(--work-card);
  border: 1px solid var(--hairline);
  border-radius: 17px;
  min-width: 0;
}
.screen--work .work-stream__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen--work .work-facts { display: flex; align-items: flex-start; gap: 24px; }
.screen--work .work-figures { display: flex; align-items: flex-start; gap: 24px; flex: none; }
.screen--work .work-fact { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }

/* Recurring calendar: 18 × 16 day cells, 2 between rows, 12 between months. */
.screen--work .work-cal { flex: 1; min-width: 0; display: flex; gap: 12px; overflow: hidden; }
.screen--work .work-cal__month { display: flex; flex-direction: column; gap: 2px; }
.screen--work .work-cal__cap {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.45px;
  color: var(--muted-ink);
}
.screen--work .work-cal__week { display: flex; }
.screen--work .work-cal__week > i {
  display: block;
  width: 18px;
  height: 16px;
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-align: center;
  color: var(--muted-ink);
}
.screen--work .work-cal__week > i.is-obs { color: var(--ink); background: var(--work-cal-observed); }
.screen--work .work-cal__week > i.is-period { background: var(--work-cal-period); font-weight: 700; }
.screen--work .work-cal__week > i.is-single { border-radius: 5px; }
.screen--work .work-cal__week > i.is-start { border-radius: 5px 0 0 5px; }
.screen--work .work-cal__week > i.is-end { border-radius: 0 5px 5px 0; }

/* Activity mix: an 8pt capsule, then the three largest named. */
.screen--work .work-activity { display: flex; flex-direction: column; gap: 4px; }
.screen--work .work-activity__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; }
.screen--work .work-activity__bar > i { display: block; height: 100%; }
.screen--work .work-activity__labels { color: var(--work-activity-label); white-space: nowrap; }