/*
  Today panel — menu-bar NSPanel, the rebuilt ("v2") layout. 390 × content
  height (the spec allows 340–720). Borderless: no title bar or traffic
  lights, paper masked to a 22pt continuous radius. It hangs 6pt below its
  status item (StatusItemController.panelGap); site.css places it.

  Source: Sources/UI/Panel/PanelView.swift (TodayPanelLayout),
  PanelNarrationCard.swift, PanelTodaySections.swift; Theme.Today,
  Theme.Typography, Theme.StreamColor; reference/layout-constants.md.
  Sample data: TodayPanelLayoutPreviewGallery — `.full` up to 11:40 AM for
  the morning panel, `.afterHours` for the night one. Shared by
  today-panel.html and today-panel-night.html (the night variant adds
  .screen--today-panel-night).
*/

.screen--today-panel {
  /* Colorsets tokens.css does not carry, or carries from a different asset. */
  --tp-paper: #fbfbf8;               /* ContentFill */
  --tp-card: #ffffff;                /* GlassCardFill */
  --tp-card-border: #e0e1de;         /* GlassHairline */
  --tp-card-shadow: rgba(36, 54, 64, 0.13); /* GlassCardShadowColor */
  --tp-line: #e6e7e4;                /* Hairline */
  --tp-wash: #ffffff;                /* ToolbarHeaderFill */
  --tp-highlight-deep: #065ba3;      /* Theme.highlight(.coraBlue).deep, both appearances */
  --tp-on-image: #ffffff;            /* Artwork.overlayInk */
  --tp-header-shadow: rgba(4, 18, 46, 0.46);
  --tp-sky-shade: rgba(6, 52, 121, 0.18);  /* daySkyShade */
  --tp-sky-lift: rgba(255, 255, 255, 0.04);
  --tp-sky: url("../img/sky-morning.jpg");
  /* Theme.StreamColor tones (Light). Stream colours come from the anchor
     key: preview:arbor is magenta, preview:editorial blue. */
  --tp-magenta: #c4286e;
  --tp-blue: #2563eb;
  --tp-item-fill: rgba(43, 43, 43, 0.42);     /* Theme.fill(42): meetings, personal */
  --tp-else-fill: rgba(43, 43, 43, 0.2);      /* Theme.fill(20): everything else */
  --tp-disabled-ink: rgba(0, 0, 0, 0.26);     /* tertiaryLabelColor */

  position: relative;
  width: 390px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--tp-paper);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 18px 50px rgba(20, 30, 40, 0.24),
    0 4px 14px rgba(20, 30, 40, 0.1);
}
.screen--today-panel.screen--today-panel-night {
  --tp-sky: url("../img/sky-night.jpg");
  --tp-sky-shade: rgba(2, 9, 35, 0.14);    /* nightSkyShade */
}

:root[data-theme="dark"] .screen--today-panel {
  --tp-paper: #0b171c;
  --tp-card: rgba(16, 33, 40, 0.98);
  --tp-card-border: #29424b;
  --tp-card-shadow: rgba(0, 0, 0, 0.42);
  --tp-line: #29424b;
  --tp-wash: rgba(14, 32, 38, 0.92);
  --tp-magenta: #ff78b5;
  --tp-blue: #739bff;
  --tp-item-fill: rgba(234, 242, 244, 0.42);
  --tp-else-fill: rgba(234, 242, 244, 0.2);
  --tp-disabled-ink: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 18px 50px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen--today-panel {
    --tp-paper: #0b171c;
    --tp-card: rgba(16, 33, 40, 0.98);
    --tp-card-border: #29424b;
    --tp-card-shadow: rgba(0, 0, 0, 0.42);
    --tp-line: #29424b;
    --tp-wash: rgba(14, 32, 38, 0.92);
    --tp-magenta: #ff78b5;
    --tp-blue: #739bff;
    --tp-item-fill: rgba(234, 242, 244, 0.42);
    --tp-else-fill: rgba(234, 242, 244, 0.2);
    --tp-disabled-ink: rgba(255, 255, 255, 0.25);
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.14),
      0 18px 50px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Sky header ---------- */

.screen--today-panel .tp-sky {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 180px;              /* Today.headerHeight (O40) */
  padding: 18px;                  /* headerInset */
  background: var(--tp-sky) center / cover no-repeat;
}
.screen--today-panel .tp-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--tp-sky-shade), transparent 50%, var(--tp-sky-lift));
}
.screen--today-panel .tp-sky > * { position: relative; }

.screen--today-panel .tp-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;                       /* Spacing.micro */
  /* .shadow(color: headerShadow, radius: 5, y: 1) */
  filter: drop-shadow(0 1px 5px var(--tp-header-shadow));
}
.screen--today-panel .tp-date {
  /* Typography.hero: New York 32/36 regular, tracking -0.36 */
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: var(--tp-on-image);
}
.screen--today-panel .tp-meta {
  /* Typography.secondary 12/16, monospaced digits; observed = overlayInk 84% */
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.84);
}
.screen--today-panel .tp-spacer {
  flex: 1 1 0;
  min-height: 12px;               /* Spacing.element */
}

/* Narration card: two lines at most (narrationMaxLines), full width. */
.screen--today-panel .tp-narration {
  margin: 0;
  padding: 16px 17px;             /* summaryVertical/HorizontalInset */
  background: var(--tp-card);
  border-radius: 14px;            /* summaryRadius */
  box-shadow: 0 9px 26px var(--tp-card-shadow); /* radius 13, y 9 */
  /* Typography.body 13/19 */
  font-size: 13px;
  line-height: 19px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.screen--today-panel .tp-stream { font-weight: 500; }
.screen--today-panel .tp-num { font-variant-numeric: tabular-nums; }

.screen--today-panel .tp-tone--magenta { --tone: var(--tp-magenta); }
.screen--today-panel .tp-tone--blue { --tone: var(--tp-blue); }
.screen--today-panel .tp-neutral { --tone: var(--tp-item-fill); }
.screen--today-panel .tp-stream,
.screen--today-panel .tp-row-title[class*="tp-tone--"] { color: var(--tone); }

/* ---------- Today's work ---------- */

.screen--today-panel .tp-content {
  display: flex;
  flex-direction: column;
  gap: 16px;                      /* Spacing.card */
  padding: 16px 18px;             /* Spacing.card × Today.contentInset */
}
.screen--today-panel .tp-work {
  display: flex;
  flex-direction: column;
  gap: 8px;                       /* Spacing.related */
}
.screen--today-panel .tp-heading-label {
  /* Typography.secondaryStrong 12/16 medium, muted */
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--muted-ink);
}
/* One capsule per row, then everything else; 2pt apart. */
.screen--today-panel .tp-bar {
  display: flex;
  gap: 2px;                       /* workBarGap */
  height: 8px;                    /* workBarHeight */
}
.screen--today-panel .tp-bar i {
  flex-basis: 0;
  border-radius: 999px;
  background: var(--tone);
}
.screen--today-panel .tp-rows { display: flex; flex-direction: column; }
.screen--today-panel .tp-row {
  display: flex;
  align-items: center;
  gap: 8px;                       /* Spacing.related */
  min-height: 44px;               /* minimumTarget */
}
/* The dot is aligned on the title's first baseline, as a shape is in a
   .firstTextBaseline HStack: its bottom edge sits on the baseline. */
.screen--today-panel .tp-dot {
  flex: none;
  align-self: flex-start;
  width: 8px;                     /* rowMarkSize */
  height: 8px;
  margin-top: calc((44px - 35px) / 2 + 7px);
  border-radius: 50%;
  background: var(--tone);
}
.screen--today-panel .tp-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.screen--today-panel .tp-row-title {
  /* Typography.bodyStrong 13/19 semibold, tracking -0.02 */
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: -0.02px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen--today-panel .tp-row-detail {
  /* Typography.secondary 12/16, muted */
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen--today-panel .tp-row-dur {
  /* Typography.body, on the title's baseline */
  align-self: flex-start;
  margin-top: calc((44px - 35px) / 2);
  font-size: 13px;
  line-height: 19px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

/* ---------- Rest of today and This week so far ---------- */

.screen--today-panel .tp-rule { height: 1px; background: var(--tp-line); }

.screen--today-panel .tp-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;                       /* Spacing.related */
  min-height: 44px;               /* minimumTarget */
  padding: 0 18px;                /* contentInset */
  font-size: 12px;                /* Typography.secondary 12/16 */
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.screen--today-panel .tp-rest b { font-weight: 500; } /* secondaryStrong's weight */
.screen--today-panel .tp-week {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  white-space: nowrap;
}
.screen--today-panel .tp-week-title { font-weight: 500; }
/* Before the week's midpoint the link is disabled: tertiary ink, no arrow. */
.screen--today-panel .tp-week.is-locked { color: var(--tp-disabled-ink); }

/* ---------- Footer ---------- */

.screen--today-panel .tp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;             /* footerVertical/HorizontalInset */
  background: var(--tp-wash);
}
.screen--today-panel .tp-settings {
  display: grid;
  place-items: center;
  width: 30px;                    /* iconButtonSize */
  height: 30px;
  color: var(--ink);
}
.screen--today-panel .tp-settings .lucide { width: 16px; height: 16px; }
.screen--today-panel .tp-details {
  display: inline-flex;
  align-items: center;
  gap: 8px;                       /* Spacing.related */
  min-height: 34px;               /* historyButtonMinHeight */
  padding: 0 16px;                /* Spacing.card */
  border-radius: 999px;
  background: var(--tp-highlight-deep);
  color: var(--tp-on-image);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.screen--today-panel .tp-details .lucide { width: 16px; height: 16px; }