/* sections/history-stats.css · owner: history-stats-agent
   DESIGN_SPEC §9 (history). Every selector starts with #history or .history.
   Values without a token are written inline as the spec gives them. */

/* ---------- Shell ---------- */
#history {
  width: 100%;
  max-width: var(--container-max);           /* 1000 / 772 / 342 via the band's 24px padding */
  overflow: hidden;
}

.history__inner {                            /* #passport-parallax */
  display: flex;
  flex-direction: column;
  gap: var(--space-64);                      /* header → stack, replaces --section-header-pb */
}

/* ---------- Header (1000×286 · 342×408 phone) ---------- */
.history__header {
  display: flex;
  flex-direction: column;
  gap: var(--section-header-gap);
}

.history__title,
.history__lead {
  max-width: var(--text-w-feature);
}

.history__title { color: var(--color-text); }
.history__lead  {
  color: var(--color-text-65);
  /* tokens.css has no --ls-lead-l-tight; Inter tracking for 22/500 (−0.42) and 16/500 (−0.14)
     is exactly --ls-lead-l at every breakpoint (typography.md §3), so the lead wraps to 5·5·8 lines */
  letter-spacing: var(--ls-lead-l);
}

/* ---------- Stack ---------- */
.history__stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);                      /* 32 / 24 / 32 */
}

/* ---------- Wide card (1000×480) ---------- */
.history__wide {
  position: relative;
  height: 480px;
  border-radius: var(--radius-20);
  background: var(--color-surface);
  overflow: hidden;
  isolation: isolate;
}

.history__wide-text {
  position: relative;
  z-index: var(--z-raised);
  height: 100%;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.history__wide-title {
  max-width: 40%;                            /* 368 at 1440, 277 at 820 */
  color: var(--color-text-ink-violet);
}

.history__wide-body {
  max-width: 38%;                            /* 350 at 1440, 263 at 820 */
  color: var(--color-text-body-violet);
}

/* Parallax layer: 572×480 at left 428 (200 on tablet) */
.history__layer {
  position: absolute;
  top: 0;
  left: 428px;
  width: 572px;
  height: 480px;
  z-index: var(--z-base);
}

/* Columns: 368×1007, two 368×534 slots at y 0 and 473 */
.history__col {
  position: absolute;
  width: 368px;
  height: 1007px;
  overflow: hidden;
  will-change: transform;
}

.history__col--1 { left: 307px; top: -222px; }
.history__col--2 { left: 59px;  top: -266px; }

.history__slot {
  position: relative;
  width: 368px;
  aspect-ratio: 368 / 534;
}

.history__slot + .history__slot {
  position: absolute;
  top: 473px;
  left: 0;
}

/* Phone placeholder fill. The 368×534 slot is phone + drop-shadow area: the reference phone
   sits at slot x 11, y 0 and measures 214×441 (ratio 0.485), which leaves a 32px gap between
   the two slots of a column and keeps column 2 clear of column 1. */
.history__phone {
  position: absolute;
  top: 0;
  left: 11px;
  width: 214px;
  height: 441px;
  border-radius: var(--radius-40);
  background: var(--grad-placeholder);
  box-shadow: var(--shadow-soft-03);
  overflow: hidden;
}

/* Generic stats-screen mock: gradient blocks only, no text */
.history__phone-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-20);
}

.history__phone-ui > span,
.history__ui-stats > i,
.history__ui-chart > i {
  display: block;
  background: var(--color-bg);
  border-radius: var(--radius-6);
}

.history__phone-ui > .history__ui-notch {
  align-self: center;
  width: 34%;
  height: 20px;
  margin-bottom: var(--space-12);
  border-radius: var(--radius-pill);
  opacity: .5;
}

.history__phone-ui > .history__ui-label { width: 38%; height: 10px; opacity: .55; }
.history__phone-ui > .history__ui-number { width: 64%; height: 32px; opacity: .85; border-radius: var(--radius-10); }
.history__phone-ui > .history__ui-sub { width: 46%; height: 10px; opacity: .45; }

.history__phone-ui > .history__ui-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
  background: none;
}

.history__ui-stats > i {
  flex: 1;
  height: 44px;
  opacity: .5;
  border-radius: var(--radius-10);
}

.history__phone-ui > .history__ui-chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-8);
  background: none;
}

.history__ui-chart > i {
  flex: 1;
  opacity: .6;
  border-radius: var(--radius-6) var(--radius-6) 0 0;
}

.history__ui-chart > i:nth-child(1) { height: 35%; }
.history__ui-chart > i:nth-child(2) { height: 55%; }
.history__ui-chart > i:nth-child(3) { height: 42%; }
.history__ui-chart > i:nth-child(4) { height: 70%; }
.history__ui-chart > i:nth-child(5) { height: 50%; }
.history__ui-chart > i:nth-child(6) { height: 88%; }
.history__ui-chart > i:nth-child(7) { height: 62%; }

/* ---------- Pair (484×703 · 374×600 · 342×600) ---------- */
.history__pair {
  display: flex;
  gap: var(--card-gap);
}

.history__card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 703px;
  padding: var(--card-pad);
  border-radius: var(--radius-20);
  overflow: hidden;
  isolation: isolate;
}

/* Card 1: text on top of a full-bleed background slot */
.history__card--1 { background: var(--color-surface); }

.history__card1-bg {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 702px;                             /* 484×702 · 374×536 · 342×493 */
  object-fit: cover;
  z-index: var(--z-base);
}

.history__card1-text {
  position: relative;
  z-index: var(--z-raised);
  color: var(--color-text-body-violet);
}

.history__leadin { color: var(--color-accent-violet); }

/* Card 2: violet gradient, title, centered board graphic, indicator bar */
.history__card--2 { background: var(--grad-card-violet); }

.history__card2-title {
  position: relative;
  z-index: var(--z-raised);
  color: var(--color-text-inverse);
}

.history__board {
  position: absolute;
  top: 50%;
  left: var(--card-pad);
  right: var(--card-pad);
  aspect-ratio: 404 / 246;                   /* 1.642: 404×246 · 294×179 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8%;
  padding: 5% 4%;
  border-radius: var(--radius-12);
  background: var(--grad-placeholder-dark);
}

.history__board-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 14%;
  padding-bottom: 3%;
  border-bottom: 2px solid var(--color-accent-violet-soft);
}

.history__board-head > span {
  display: block;
  height: 60%;
  border-radius: var(--radius-6);
  background: var(--color-text-inverse-60);
}

.history__board-icon { aspect-ratio: 1; }
.history__board-name { width: 22%; }
.history__board-tag  { width: 26%; margin-left: auto; opacity: .6; }

.history__board-tiles {
  flex: 1;
  display: flex;
  gap: 3%;
}

.history__board-tiles > i {
  position: relative;
  flex: 1;
  border-radius: var(--radius-6);
  background: var(--grad-placeholder-dark);
  border: 1px solid var(--color-border-dark);
}

.history__board-tiles > i::after {               /* split-flap seam */
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--color-divider-dark);
}

.history__board-tiles > i:nth-child(-n+2) { background: var(--color-text-inverse-50); }

.history__board-strip {
  display: flex;
  justify-content: space-between;
  gap: 6%;
  height: 12%;
}

.history__board-strip > i {
  flex: 1;
  border-radius: var(--radius-6);
  background: var(--color-text-inverse-50);
  opacity: .5;
}

.history__indicator {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 89px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .2);       /* --color-thumb-indicator-dark (not in tokens.css) */
}

/* ---------- Tablet (790–1199) ---------- */
@media (max-width: 1199.98px) {
  .history__layer { left: 200px; }
  .history__col--1 { left: 276px; top: -162px; }
  .history__col--2 { display: none; }

  .history__card { height: 600px; }
  .history__card1-bg { top: 109px; height: 536px; }
}

/* ---------- Phone (≤789) ---------- */
@media (max-width: 789.98px) {
  .history__header { padding-top: var(--space-80); }

  .history__wide { height: 600px; }

  .history__wide-text {
    height: auto;
    justify-content: flex-start;
    gap: var(--space-20);
  }

  .history__wide-title,
  .history__wide-body { max-width: 100%; }

  /* Layer covers the card; columns use card-relative offsets (DESIGN_SPEC §9 note).
     The spec's 212 / 328 were captured with the live parallax frozen at about ∓29px, so the
     resting (offset 0) tops are 212 + 29 = 241 and 328 − 29 = 299. */
  .history__layer {
    left: 0;
    width: 100%;
    height: 100%;
  }

  .history__col--1 { display: block; left: 157px; top: 241px; }
  .history__col--2 { display: block; left: -91px; top: 299px; }

  .history__pair { flex-direction: column; }

  .history__card { flex: none; height: 600px; }
  .history__card1-bg { top: 107px; height: 493px; }
}

/* ---------- Reduced motion: columns sit at their final (0) offset ---------- */
@media (prefers-reduced-motion: reduce) {
  .history__col { transform: none; will-change: auto; }
}