/*
  YOU — History window, profile route.
  Screen: 1394 × 938 (the History window's default size; min 970 × 700).

  Source: Sources/UI/You/YouContent.swift, YouEvidenceDisclosure.swift,
  YouView.swift (YouRoutePreviewGallery); shell from Sources/UI/History/HomeView.swift; values from
  Theme.You and Theme.Typography. Content is YouPreviewData.mature verbatim.
  Wide layout, top of the page: the Overview, Your working time, Focus,
  and the start of What you work on, with the profile summary in the right column. The Supporting
  evidence popover is open on the Focus claim, as a click on its receipt
  leaves it.
*/

.screen--you {
  width: 1394px;
  height: 938px;

  /* NSColor.tertiaryLabelColor — Theme.text(.tertiary). Not a token. */
  --you-tertiary: rgba(0, 0, 0, 0.26);
  /* Native NSPopover material, approximated as a flat fill. */
  --you-popover-fill: #f6f6f5;
  --you-popover-edge: rgba(0, 0, 0, 0.12);
  --you-popover-shadow: 0 8px 28px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen--you {
    --you-tertiary: rgba(255, 255, 255, 0.25);
    --you-popover-fill: #1e2a2e;
    --you-popover-edge: rgba(255, 255, 255, 0.14);
    --you-popover-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] .screen--you {
  --you-tertiary: rgba(255, 255, 255, 0.25);
  --you-popover-fill: #1e2a2e;
  --you-popover-edge: rgba(255, 255, 255, 0.14);
  --you-popover-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.screen--you .mac-window { width: 100%; height: 100%; }

/* YouContent pads itself (History.pageInset / contentTopInset); HomeView
   adds no page inset around YouView, so the shared content padding is removed. */
.screen--you .history-content { padding: 0; }
.screen--you .history { grid-template-rows: 100%; overflow: hidden; }

.screen--you h2,
.screen--you p,
.screen--you ul { margin: 0; padding: 0; font: inherit; }
.screen--you ul { list-style: none; }

/* ---------- Type roles (Theme.Typography) ---------- */

.screen--you .you-mini {
  font-family: var(--font-sans);
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  text-transform: uppercase;
  color: var(--you-tertiary);
}
.screen--you .you-small {
  font-size: 12px; line-height: 16px; color: var(--muted-ink);
}
.screen--you .you-title {
  font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.14px;
  color: var(--ink);
}
.screen--you .you-narrative {
  font-family: var(--font-serif);
  font-size: 15px; line-height: 23px; letter-spacing: -0.08px;
  color: var(--ink);
}
.screen--you .you-body {
  font-size: 13px; line-height: 19px; color: var(--ink);
}
.screen--you .you-strong {
  font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: -0.02px;
  color: var(--ink);
}

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

/* YouContent: no title and no controls (the rail names the page). Page inset
   20 on both sides, content line at History.contentTopInset (123), bottom
   Spacing.terminal; capped at profileMaxWidth and pinned leading. Wide
   layout: article column, then the summary in the right column. */
.screen--you .you-page {
  box-sizing: border-box;
  max-width: 1040px;               /* profileMaxWidth, insets included */
  padding: 123px 20px 32px;        /* contentTopInset / pageInset / Spacing.terminal */
  display: flex; align-items: flex-start;
  gap: 48px;                       /* profileColumnGap */
}

/* ---------- Article ---------- */

.screen--you .you-article {
  flex: 0 1 680px; min-width: 500px; max-width: 680px;
  display: flex; flex-direction: column; gap: 40px; /* sectionGap */
}
/* Overview and each chapter: heading, then its parts. */
.screen--you .you-section { display: flex; flex-direction: column; gap: 12px; } /* sectionHeadingSummaryGap */
.screen--you .you-section__head { display: flex; flex-direction: column; gap: 8px; }
.screen--you .you-section__marker {
  display: block; width: 32px; height: 2px; background: var(--selection);
}
/* Patterns / Record / Earlier: an eyebrow over its lines (paragraphGap). */
.screen--you .you-part { display: flex; flex-direction: column; gap: 8px; }
.screen--you .you-patterns { display: flex; flex-direction: column; gap: 12px; }
.screen--you .you-variant {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 20px;              /* Spacing.group */
}
.screen--you .you-bullets { display: flex; flex-direction: column; gap: 12px; } /* Spacing.element */
.screen--you .you-bullets li { display: flex; align-items: baseline; gap: 8px; }
.screen--you .you-bullet__dot {
  font-size: 13px; line-height: 19px; color: var(--you-tertiary); flex: none;
}
/* Earlier claims no longer hold: one step back from the current ones. */
.screen--you .you-body.is-secondary { color: var(--muted-ink); }

/* The receipt: a 14pt receipt-text glyph in a 28pt target, leading-aligned,
   centred on the sentence's cap height (themeIconBaseline). */
.screen--you .you-receipt {
  position: relative;
  display: inline-block;
  width: 28px; height: 14px;
  margin-right: -14px;             /* the target's trailing half is empty */
  vertical-align: calc(0.35em - 7px);
  color: var(--muted-ink);
}
.screen--you .you-receipt > .lucide {
  display: block; width: 14px; height: 14px;
}
.screen--you .you-receipt.is-active { color: var(--selection); }

/* ---------- Profile summary ---------- */

.screen--you .you-summary {
  flex: none; width: 260px;
  display: flex; flex-direction: column; gap: 16px; /* summaryFactGap */
  padding: 20px;
  background: var(--fill-5);
  border: 1px solid var(--hairline);
  border-radius: 10px;             /* Radius.control */
}
.screen--you .you-summary hr {
  margin: 0; border: 0; height: 1px; background: var(--hairline);
}
.screen--you .you-fact { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Evidence popover (native NSPopover, arrowEdge .bottom) ---------- */

.screen--you .you-popover {
  position: absolute;
  z-index: 10;
  top: 21px;                       /* bottom of the 28pt target */
  left: 14px;                      /* centred on the target */
  width: 360px;                    /* evidencePreviewWidth */
  transform: translateX(-50%);
  font-family: var(--font-sans);
  letter-spacing: normal;
  color: var(--ink);
  white-space: normal;
}
.screen--you .you-popover__arrow {
  position: absolute;
  top: 0; left: 50%;
  width: 26px; height: 11px;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 1;
}
.screen--you .you-popover__arrow::before {
  content: "";
  position: absolute;
  left: 50%; top: 5px;
  width: 15px; height: 15px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  background: var(--you-popover-fill);
  box-shadow: 0 0 0 0.5px var(--you-popover-edge);
}
.screen--you .you-popover__card {
  display: block;
  margin-top: 10px;
  max-height: 480px;               /* evidencePreviewMaximumHeight; scrolls past it */
  overflow: hidden;
  border-radius: 10px;
  background: var(--you-popover-fill);
  box-shadow: 0 0 0 0.5px var(--you-popover-edge), var(--you-popover-shadow);
}
.screen--you .you-popover__content {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;                   /* evidencePreviewPadding */
}
.screen--you .you-popover__content > span { display: block; }
/* YouEvidencePreviewCardContent: secondaryStrong title, Spacing.element. */
.screen--you .you-popover__title {
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink);
}
/* YouEvidenceDetails: the summary, then Period and Held for (Spacing.micro). */
.screen--you .you-popover__summary {
  font-size: 12px; line-height: 16px; color: var(--ink);
}
.screen--you .you-popover__content > .you-popover__lines {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; line-height: 16px; color: var(--muted-ink);
}
.screen--you .you-popover__lines > span { display: block; }