/*
  TODAY — the History window's Day view.
  Screen: 1394 × 1254 pt (the authored 1394pt width, window drawn taller than
  the 938pt default so the day closes on its night endpoint).

  Source: Sources/UI/Day/DayView.swift (HistoryDayContent, HistoryDateCell,
  HistoryEndpointCard, HistoryActivityThreadTimeline, HistoryStretchCardView,
  HistoryStretchTailView, HistoryCarriedStemOverlay, HistoryActivityCard),
  HistoryDayGutter.swift, Theme.History / Theme.Typography.history*.
  Data: HistoryDayGalleryFixture, state .monday (Aug 24, 2026), with the first
  stretch hovered as HistoryDayGalleryPreview does by default.
*/

.screen--day {
  width: 1394px;
  height: 1254px;

  /* Colorset values the shared tokens round differently. */
  --day-paper: #fbfbf8;               /* ContentFill */
  --day-card: #ffffff;                /* GlassCardFill */
  --day-border: #e0e1de;              /* GlassHairline */
  --day-card-shadow: rgba(36, 54, 64, 0.13); /* GlassCardShadowColor */
  --day-muted: #7d7d79;               /* MutedInk */
  --day-ink: #2b2b2b;                 /* fg */
  --day-selection: #117bc8;           /* SelectionFill */
  --day-selection-ink: #ffffff;       /* SelectionInk */
  --day-tile: #ffffff;                /* ToolbarHeaderFill */
  --day-fg-rgb: 43, 43, 43;
  --day-muted-rgb: 125, 125, 121;
}
:root[data-theme="dark"] .screen--day {
  --day-paper: #0b171c;
  --day-card: rgba(16, 33, 40, 0.98);
  --day-border: #29424b;
  --day-card-shadow: rgba(0, 0, 0, 0.42);
  --day-muted: #aeb8ba;
  --day-ink: #eaf2f4;
  --day-selection: #56c2ff;
  --day-selection-ink: #0b171c;
  --day-tile: rgba(14, 32, 38, 0.92);
  --day-fg-rgb: 234, 242, 244;
  --day-muted-rgb: 174, 184, 186;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen--day {
    --day-paper: #0b171c;
    --day-card: rgba(16, 33, 40, 0.98);
    --day-border: #29424b;
    --day-card-shadow: rgba(0, 0, 0, 0.42);
    --day-muted: #aeb8ba;
    --day-ink: #eaf2f4;
    --day-selection: #56c2ff;
    --day-selection-ink: #0b171c;
    --day-tile: rgba(14, 32, 38, 0.92);
    --day-fg-rgb: 234, 242, 244;
    --day-muted-rgb: 174, 184, 186;
  }
}

.screen--day .mac-window { width: 100%; height: 100%; background: var(--day-paper); }
.screen--day .history { background: var(--day-paper); }
/* navigationTopInset = 32 + 15 + 4 + 58 + 14 = 123; routes use the History muted/selection inks. */
.screen--day .history-rail { padding-top: 123px; }
.screen--day .history-rail span { color: var(--day-muted); }
.screen--day .history-rail .is-selected { color: var(--day-selection); }
.screen--day .history-content { padding: 0; color: var(--day-ink); }

.screen--day .day-mini {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  color: var(--day-muted);
}

/* ---------- Date strip + insights control ---------- */

.screen--day .day-top { display: flex; align-items: flex-end; }
.screen--day .day-strip {
  position: relative;
  flex: 1 1 auto;
  padding: 32px 20px 14px; /* titlebarInset, pageInset, dateStripVerticalInset */
}
.screen--day .day-dates { display: flex; justify-content: center; gap: 8px; }
.screen--day .day-date { width: 48px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.screen--day .day-date__cap {
  height: 15px; font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 0.45px;
  color: var(--day-muted);
}
.screen--day .day-date__pill {
  width: 48px; min-height: 58px; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.screen--day .day-date__weekday {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px; color: var(--day-muted);
}
.screen--day .day-date__num {
  font-size: 15px; line-height: 19px; letter-spacing: -0.08px; font-variant-numeric: tabular-nums;
  color: var(--day-ink);
}
.screen--day .day-date.is-selected .day-date__pill { background: var(--day-selection); }
.screen--day .day-date.is-selected .day-date__weekday,
.screen--day .day-date.is-selected .day-date__num { color: var(--day-selection-ink); }

/* Week step: a 108pt slot, centred on the date pills (cap height + tight above). */
.screen--day .day-step {
  position: absolute; left: 20px; top: 51px; height: 58px; width: 108px;
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; line-height: 13px; font-weight: 500; white-space: nowrap;
  color: rgba(var(--day-muted-rgb), 0.74);
}
.screen--day .day-step__arrow { position: relative; top: -2.25px; }

.screen--day .day-insights-control {
  flex: 0 0 200px; width: 200px; margin-bottom: 14px; padding: 0 8px;
  display: flex; align-items: center; gap: 4px; color: var(--day-muted);
}
.screen--day .day-insights-control .day-mini { color: inherit; }
.screen--day .day-insights-control__spacer { flex: 1; }
.screen--day .day-insights-control__hide { font-size: 12px; line-height: 16px; }
.screen--day .day-insights-control .lucide { width: 11px; height: 11px; stroke-width: 2.4; }

/* ---------- Chronology ---------- */

.screen--day .day-body { display: flex; align-items: flex-start; }
.screen--day .day-chronology { flex: 1 1 auto; min-width: 0; padding: 0 20px 20px; }
.screen--day .day-timeline { position: relative; display: flex; flex-direction: column; gap: 12px; }

/* The static 1pt sine wave 84pt in: amplitude 3, wavelength 24, threadInk. */
.screen--day .day-thread {
  position: absolute; top: 0; bottom: 0; left: 80px; width: 8px;
  background: rgba(var(--day-muted-rgb), 0.24);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cpath d='M 3.22 -1 L 4.00 0 L 4.78 1 L 5.50 2 L 6.12 3 L 6.60 4 L 6.90 5 L 7.00 6 L 6.90 7 L 6.60 8 L 6.12 9 L 5.50 10 L 4.78 11 L 4.00 12 L 3.22 13 L 2.50 14 L 1.88 15 L 1.40 16 L 1.10 17 L 1.00 18 L 1.10 19 L 1.40 20 L 1.88 21 L 2.50 22 L 3.22 23 L 4.00 24 L 4.78 25' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") repeat-y 0 0 / 8px 24px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'%3E%3Cpath d='M 3.22 -1 L 4.00 0 L 4.78 1 L 5.50 2 L 6.12 3 L 6.60 4 L 6.90 5 L 7.00 6 L 6.90 7 L 6.60 8 L 6.12 9 L 5.50 10 L 4.78 11 L 4.00 12 L 3.22 13 L 2.50 14 L 1.88 15 L 1.40 16 L 1.10 17 L 1.00 18 L 1.10 19 L 1.40 20 L 1.88 21 L 2.50 22 L 3.22 23 L 4.00 24 L 4.78 25' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") repeat-y 0 0 / 8px 24px;
}

/* Endpoint cards: authored sky, leading shade, white New York clock. */
.screen--day .day-endpoint {
  position: relative; height: 128px; border-radius: 17px; overflow: hidden;
  display: flex; align-items: center; padding: 0 22px;
  background-size: cover; background-position: center;
}
.screen--day .day-endpoint::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.02));
}
.screen--day .day-endpoint::after {
  content: ""; position: absolute; inset: 0; border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}
.screen--day .day-endpoint--morning { background-image: url("../img/sky-morning.jpg"); }
.screen--day .day-endpoint--night { background-image: url("../img/sky-night.jpg"); }

/* Clocks: New York number, SF Pro suffix, never wrapping. */
.screen--day .day-clock {
  display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
  color: var(--day-muted); font-variant-numeric: tabular-nums;
}
.screen--day .day-clock__num {
  font-family: var(--font-serif); font-size: 19px; line-height: 21px; letter-spacing: -0.12px;
}
.screen--day .day-clock__suffix {
  font-size: 9px; line-height: 11px; font-weight: 500; letter-spacing: 0.54px;
}
.screen--day .day-clock--endpoint {
  position: relative; z-index: 1; color: #fff;
  text-shadow: 0 3px 10px rgba(12, 22, 46, 0.32);
}
.screen--day .day-clock--endpoint .day-clock__num { font-size: 32px; line-height: 36px; letter-spacing: -0.36px; }
.screen--day .day-clock--endpoint .day-clock__suffix { font-size: 11px; line-height: 13px; letter-spacing: 0.66px; }

/* Rows own their 12pt gaps so a carried stem stays continuous. */
.screen--day .day-rows { display: flex; flex-direction: column; }
.screen--day .day-row { position: relative; padding-bottom: 12px; }
.screen--day .day-row--last { padding-bottom: 0; }
.screen--day .day-row--wrapped-right { padding-right: 13px; } /* one wrapGutter inside re:Work's stem */

/* Stream cards: 22pt inset, 110 / 494 / 262 columns with 22pt gaps. */
.screen--day .day-card {
  position: relative;
  display: grid; grid-template-columns: 110px minmax(160px, 1fr) 262px; column-gap: 22px;
  min-height: 168px; padding: 22px;
  background: var(--day-card); border-radius: 17px;
  box-shadow: inset 0 0 0 1px var(--day-border), 0 6px 24px var(--day-card-shadow);
}
.screen--day .day-card--head { border-bottom-right-radius: 0; }
.screen--day .day-card--tail {
  display: flex; align-items: baseline; gap: 22px; min-height: 0;
  border-top-right-radius: 0;
}
.screen--day .day-card__rail { position: relative; display: flex; flex-direction: column; }
.screen--day .day-card__rail .day-clock--end { position: absolute; left: 0; bottom: 16px; }
.screen--day .day-card--tail .day-card__rail { width: 110px; flex: none; }

.screen--day .day-card__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.screen--day .day-card__title {
  font-family: var(--font-serif); font-size: 24px; line-height: 27px; font-weight: 500;
  letter-spacing: -0.28px; color: var(--day-ink);
}
.screen--day .day-card__stream { font-size: 13px; line-height: 19px; color: var(--day-muted); }
.screen--day .day-card__story {
  margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--day-muted);
}
.screen--day .day-card__story b { font-weight: 400; color: var(--day-ink); }
.screen--day .day-card__evidence { display: flex; flex-direction: column; gap: 4px; }
.screen--day .day-card__recurrence { font-size: 12px; line-height: 16px; color: var(--day-ink); }
.screen--day .day-card__continues {
  font-size: 12px; line-height: 16px; font-style: italic; color: var(--day-muted); white-space: nowrap;
}

/* Focused Time: heading, then words and icon runs 4pt apart. */
.screen--day .day-focused { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.screen--day .day-focused__heading { display: inline-flex; align-items: baseline; gap: 7px; }
.screen--day .day-focused__heading b { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--day-ink); }
.screen--day .day-focused__heading span,
.screen--day .day-focused__words { font-size: 12px; line-height: 16px; color: var(--day-muted); }

/* A contributor with no cached icon: its initial on the overflow tile,
   ringed in card colour. Rounded squares are apps; circles are sites. */
.screen--day .day-icon {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--day-tile); color: var(--day-muted);
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  box-shadow: 0 0 0 1px var(--day-card), inset 0 0 0 1px var(--day-card);
}
.screen--day .day-icon--app { border-radius: 5px; }
.screen--day .day-icon--site { border-radius: 50%; }

/* Activity card: 262 × 132, work-type fills with white label ink. */
.screen--day .day-activity {
  width: 262px; height: 132px; border-radius: 11px; overflow: hidden;
  background: rgba(var(--day-fg-rgb), 0.10);
}
.screen--day .day-activity__row {
  display: flex; align-items: flex-start; gap: 8px; padding: 2px 11px 0; color: #fff;
  overflow: hidden;
}
.screen--day .day-activity__label {
  flex: 1; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -0.04px;
}
.screen--day .day-activity__pct {
  font-size: 10px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums;
}

/* The carried stem: card surface continuing down the right edge, necking in
   and flaring out through 12pt fillets, with no rule across either mouth. */
.screen--day .day-stem {
  position: absolute; right: 0; bottom: -68px; z-index: 3; overflow: visible;
}
.screen--day .day-stem__fill { fill: var(--day-card); }
.screen--day .day-stem__line { fill: none; stroke: var(--day-border); stroke-width: 1; }

/* Annotations: borderless, starting just past the wave (84 + 3 + 16). */
.screen--day .day-annotation {
  min-height: 56px; display: flex; align-items: center; padding-left: 103px;
  font-size: 12px; line-height: 16px; color: rgba(var(--day-muted-rgb), 0.82);
}

/* ---------- Insight gutter ---------- */

.screen--day .day-gutter {
  flex: 0 0 200px; width: 200px; padding: 0 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.screen--day .day-stat {
  width: 184px; padding: 10px; border-radius: 14px;
  background: var(--day-card);
  box-shadow: inset 0 0 0 1px rgba(var(--day-muted-rgb), 0.55), 0 8px 36px var(--day-card-shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.screen--day .day-stat__head { display: flex; flex-direction: column; gap: 4px; }
.screen--day .day-stat__total {
  font-family: var(--font-serif); font-size: 20px; line-height: 24px; font-weight: 600;
  letter-spacing: -0.2px; color: var(--day-ink); font-variant-numeric: tabular-nums;
}
.screen--day .day-stat__meta {
  font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--day-muted);
  font-variant-numeric: tabular-nums;
}
.screen--day .day-stat__list { display: flex; flex-direction: column; gap: 8px; }
.screen--day .day-stat__row { display: flex; align-items: center; gap: 4px; color: var(--day-ink); }
.screen--day .day-stat__row .lucide { width: 13px; height: 13px; flex: none; }
.screen--day .day-stat__label { flex: 1; font-size: 11px; line-height: 15px; font-weight: 500; }
.screen--day .day-stat__pct { font-family: var(--font-mono); font-size: 10px; line-height: 14px; }

.screen--day .day-stat--insight { gap: 8px; }
.screen--day .day-stat__headline {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: -0.02px; color: var(--day-ink);
}
.screen--day .day-stat__explanation {
  font-size: 11px; line-height: 15px; font-weight: 500; color: var(--day-muted);
}
.screen--day .day-stat__metrics {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--day-ink);
}
.screen--day .day-stat__metrics div { display: flex; justify-content: space-between; gap: 4px; }