/* Per-client report landing page. Loaded alongside styles.css, which supplies
   the :root tokens, the reset and the body chrome. Only landing-specific
   classes live here; no new design tokens are introduced. */

.landing { max-width: 880px; margin: 0 auto; }

/* The header reuses the report's .masthead / .logo / .issue classes from
   styles.css so the two surfaces are pixel-identical and never drift. */

/* Featured latest report — the default action. A light card like the rest,
   set apart by size and a dark .btn-primary-style CTA (the only place the
   inverse surface is used, matching how the report uses it: on buttons). */
.landing-featured {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.landing-featured:hover { transform: translateY(-2px); box-shadow: var(--shadow-button); }
.landing-featured:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 3px; }
.landing-featured-label {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--taupe);
}
.landing-featured-period {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--deep-navy);
}
.landing-featured-cta {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-inverse);
  color: var(--bg-primary);
  font-size: var(--text-medium);
  letter-spacing: -0.02em;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-button);
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* Content-card hover pattern — see docs/design-tokens.md. */
.landing-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.landing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button);
}
.landing-card:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 3px; }
.landing-card-period { font-weight: 500; }
.landing-card-arrow { color: var(--taupe); }

.landing-empty {
  color: var(--taupe);
  font-size: var(--text-large);
}

@media (max-width: 640px) {
  .landing-grid { grid-template-columns: 1fr 1fr; }
}

/* Vitals: standing audience-behaviour cards below the report list. Reuses the
   same card surface and tokens as the report; no new design tokens. */
.vitals { margin-top: var(--space-10); }
.vitals-head, .pulse-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.vitals-title, .pulse-title { font-size: var(--text-large); font-weight: 600; letter-spacing: -0.02em; color: var(--deep-navy); margin: 0; }
.vitals-subhead, .pulse-subhead { font-size: var(--text-small); color: var(--taupe); }
.vitals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 640px) { .vitals-grid { grid-template-columns: 1fr; } }
.vitals-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.vitals-card-head { display: flex; align-items: center; gap: var(--space-2); color: var(--deep-navy); margin-bottom: var(--space-4); }
.vitals-icon { flex: none; }
.vitals-card-label { font-size: var(--text-small); font-weight: 600; letter-spacing: -0.01em; }
.vitals-card-value-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.vitals-card-value {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 40px;
  line-height: 1.05;
  color: var(--deep-navy);
}
/* small caption beside the big value */
.vitals-card-note { font-size: var(--text-small); color: var(--taupe); }
.vitals-card-body { font-size: var(--text-small); color: var(--text-primary); margin: 0; }
.vitals-updated { margin-left: auto; font-size: var(--text-2xs); color: var(--taupe); }

/* teaser: appended after the real cards; dashed + muted so it reads as
   "more to come", never a broken/empty data card. */
.vitals-card--soon { background: transparent; border: 1px dashed var(--stone); }
.vitals-card--soon .vitals-card-head,
.vitals-card--soon .vitals-card-body { color: var(--taupe); }

/* Vitals card mini-viz. Inline, token-only, no charting library. */
.vv { margin: var(--space-1) 0 var(--space-2); }

/* compare: stacked labelled bars (e.g. member vs non-member) */
.vv-compare { display: flex; flex-direction: column; gap: var(--space-2); }
.vv-row { display: grid; grid-template-columns: 5.5em 1fr auto; align-items: center; gap: var(--space-2); }
.vv-row-label { font-size: var(--text-2xs); color: var(--taupe); letter-spacing: -0.01em; }
.vv-track { height: 10px; background: var(--stone-faint); border-radius: var(--radius-full); overflow: hidden; }
.vv-fill { display: block; height: 100%; background: var(--forest-green); border-radius: var(--radius-full); }
.vv-row-value { font-size: var(--text-2xs); font-weight: 600; color: var(--deep-navy); }

/* split: one proportion bar with two segments + end captions */
.vv-split-bar { display: flex; height: 22px; border-radius: var(--radius-sm); overflow: hidden; }
.vv-seg { display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: 600; min-width: 0; }
.vv-seg--lead { background: var(--forest-green); color: var(--bg-primary); }
.vv-seg--rest { background: var(--stone-faint); color: var(--taupe); }
.vv-split-caps { display: flex; justify-content: space-between; margin-top: var(--space-1); }
.vv-cap { font-size: var(--text-2xs); color: var(--taupe); }

/* segments: 2-4 proportional segments, light-to-dark = sooner-to-later */
.vv-segments .vv-split-bar { gap: 2px; }
.vv-seg--s1 { background: var(--green-tint); color: var(--forest-green); }
.vv-seg--s2 { background: color-mix(in srgb, var(--forest-green) 55%, white); color: var(--bg-primary); }
.vv-seg--s3 { background: var(--forest-green); color: var(--bg-primary); }
.vv-seg--s4 { background: color-mix(in srgb, var(--forest-green) 80%, black); color: var(--bg-primary); }
.vv-segments .vv-split-caps { gap: var(--space-2); }
.vv-segments .vv-cap { flex: 1 1 0; text-align: center; }
.vv-segments .vv-cap:first-child { text-align: left; }
.vv-segments .vv-cap:last-child { text-align: right; }

/* months: 12 mini bars, optional highlighted months */
.vv-months { display: block; width: 100%; height: auto; }
.vv-bar { fill: var(--stone); }
.vv-bar--hi { fill: var(--coral); }
.vv-mlabel { font-size: 5px; fill: var(--taupe); }