/* PPM-Valet — page-specific layout on top of organic.css (design system). */
body { margin: 0; }

/* Results chart — categorical series colors (dataviz skill reference palette,
   validated against this site's card surface #ebddc5: run
   node scripts/validate_palette.js "#2a78d6,#008300,#e87ba4,#eda100"
   --mode light --surface "#ebddc5"). No dark variant: this page has one
   fixed warm palette, no theme toggle exists to validate against. */
:root {
  --series-strategin: #2a78d6;
  --series-msci:       #008300;
  --series-ap7:         #e87ba4;
  --series-omx30:      #eda100;
  --chart-grid: var(--color-divider);
  --chart-axis: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.pv-wrap { max-width: 1040px; padding: 0 120px 0 64px; }
.pv-circle { border-radius: 50%; }
.pv-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.pv-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.pv-cta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pv-table-wrap { overflow-x: auto; }
.pv-consent { font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); display: flex; gap: 6px; align-items: flex-start; flex-basis: 100%; }
.pv-consent input { margin-top: 3px; }

.pv-period.is-active { background: var(--color-accent); color: var(--color-bg); }
.btn-sm { padding: 4px 12px; font-size: 13px; }
.chart-period-btn.is-active { background: var(--color-accent); color: var(--color-bg); }

.pv-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); font-size: 12px; color: var(--color-text); }
.pv-legend-key { display: inline-flex; align-items: center; gap: 6px; }
.pv-legend-swatch { width: 14px; height: 2px; display: inline-block; }

#results-tooltip {
  position: absolute; display: none; padding: 8px 10px; font-size: 12px;
  pointer-events: none; z-index: 5; white-space: nowrap;
}
#results-tooltip-row { display: flex; justify-content: space-between; gap: 12px; }

#positions-card.is-locked { filter: blur(7px); }
/* Blurred placeholder for the pending holdings chart: only the bars blur
   (.holdings-chart-bars), the heading stays sharp, and the explanation sits
   in an unblurred box on top — same layering as #positions-gate below. */
.holdings-chart-bars.is-pending { filter: blur(6px); opacity: .6; pointer-events: none; }
.holdings-chart-note-box {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding: var(--space-3); text-align: center;
}
.holdings-chart-note-box > div {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3);
  max-width: 90%;
}
/* Gate visibility is driven by this class ONLY — the inline style on the
   div must NOT set `display`, or it would override `display:none` here (inline
   beats stylesheet) and the gate would show even when logged in. */
#positions-gate { display: none; }
#positions-gate.is-visible {
  display: flex;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border-radius: calc(var(--radius-lg) * 1.15);
}

@media (max-width: 900px) {
  .pv-wrap { padding: 0 24px; }
  .nav { flex-wrap: wrap; gap: var(--space-2); }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .pv-grid2, .pv-grid4 { grid-template-columns: 1fr 1fr; }
  .pv-cta { flex-direction: column; align-items: stretch; }
  .pv-cta .btn { width: 100%; }
}
@media (max-width: 480px) {
  .pv-grid2, .pv-grid4 { grid-template-columns: 1fr; }
}

/* ── Startsidans hjälpklasser (designhandoff 2026-08-01) ──────────────
   Designsystemet i organic.css äger färg, typsnitt, spacing och radier.
   Här ligger bara layouthjälparna som handoffen definierar och som inte
   fanns sedan tidigare. Brytpunkterna följer handoffens tabell:
   >1000px full layout, ≤1000px smalare sidopadding, ≤760px en kolumn,
   ≤420px mindre rubrik och siffra.                                     */
/* Startsidan får handoffens symmetriska 64px. .pv-wrap i sig lämnas orörd:
   den bär en asymmetrisk padding (120px höger) och används av base.html på
   samtliga undersidor, som ligger utanför det här uppdraget. */
.pv-home { margin: 0 auto; padding: 0 64px; }
.pv-nav  { max-width: 1040px; margin: 0 auto; padding: var(--space-4) 64px; }
.pv-nav .btn, .pv-home .btn { white-space: nowrap; }

/* Sifferbrickorna i "Så går det till". */
.pv-step {
  width: 44px; height: 44px;
  background: var(--color-accent-200); color: var(--color-accent-800);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 20px;
}

.pv-grid3  { display: grid; grid-template-columns: repeat(3, 1fr); }
.pv-bignum { font-size: 44px; line-height: 1.05; margin: 4px 0 8px; }
.pv-compare { font-size: 16px; opacity: .75; }
.pv-compare strong { font-variant-numeric: tabular-nums; }

/* Siffertabeller ska radas upp — annars hoppar decimalerna mellan raderna. */
.table td, .pv-bignum { font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .pv-wrap  { padding: 0 40px; }
  .pv-home  { padding: 0 40px; }
  .pv-nav   { padding: var(--space-4) 40px; }
  .pv-bignum { font-size: 38px; }
}
@media (max-width: 760px) {
  .pv-wrap  { padding: 0 20px; }
  .pv-home  { padding: 0 20px; }
  .pv-nav   { padding: var(--space-3) 20px; flex-wrap: wrap; row-gap: var(--space-2); }
  .pv-nav a { font-size: 15px; }
  .pv-grid3 { grid-template-columns: 1fr; gap: var(--space-2); }
  .pv-bignum { font-size: 40px; }
  h1 { font-size: 38px; }
  h2 { font-size: 27px; }
  .table { font-size: 14px; }
  .table th, .table td { padding: 8px 10px; }
  .pv-home section { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
}
@media (max-width: 420px) {
  h1 { font-size: 32px; }
  .pv-bignum { font-size: 36px; }
}

/* ── Villkorsrutan vid registrering ───────────────────────────────────
   <dialog> ärver inte sidans typografi i alla webbläsare, och dess
   default-ram är fyrkantig — resten av sajten har inga skarpa hörn. */
.pv-dialog {
  max-width: 560px; width: calc(100% - 2 * var(--space-4));
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-body);
  box-shadow: var(--shadow-lg);
}
.pv-dialog h2, .pv-dialog h3 { font-family: var(--font-heading); font-weight: 400; }
.pv-dialog::backdrop { background: color-mix(in srgb, var(--color-text) 45%, transparent); }
@media (max-width: 760px) {
  .pv-dialog { padding: var(--space-4); }
  .pv-dialog .btn { width: 100%; }
}