/*
  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; shell from Sources/UI/History/HomeView.swift; values from
  Theme.You and Theme.Typography. Content is YouPreviewData.mature verbatim.
  The evidence popover is open on the Focus claim (Recurring, held 9 weeks),
  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%; }

/* YOU pads itself (Spacing.group / Spacing.terminal); 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 h1,
.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-mini-plain {
  font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: 0.45px;
  color: var(--you-tertiary);
}
.screen--you .you-h1 {
  font-family: var(--font-serif);
  font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.34px;
  color: var(--ink);
}
.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 ---------- */

.screen--you .you-page {
  max-width: 1040px;               /* Theme.You.profileMaxWidth */
  padding: 32px 20px;              /* Spacing.terminal / Spacing.group */
  display: flex; flex-direction: column; gap: 24px; /* Spacing.section */
}
.screen--you .you-heading { display: flex; flex-direction: column; gap: 8px; }

.screen--you .you-columns {
  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 */
}
.screen--you .you-section { display: flex; flex-direction: column; gap: 12px; }
.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);
}
.screen--you .you-variant {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 20px;
}
.screen--you .you-bullets { display: flex; flex-direction: column; gap: 12px; }
.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;
}

/* 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); }

/* ---------- Trend ---------- */

.screen--you .you-trend { display: flex; flex-direction: column; gap: 8px; }
.screen--you .you-trend svg { display: block; width: 680px; height: 72px; overflow: visible; }
.screen--you .you-trend polyline {
  fill: none; stroke: var(--selection); stroke-width: 2;
}
.screen--you .you-trend circle { fill: var(--selection); }
.screen--you .you-trend__labels { display: flex; justify-content: space-between; }

/* ---------- 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__title {
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink);
}
.screen--you .you-evrow { display: flex; flex-direction: column; gap: 2px; }
.screen--you .you-evrow .you-mini { display: block; }
.screen--you .you-evrow__value {
  display: block;
  font-size: 12px; line-height: 16px; color: var(--muted-ink);
}