/* ============================================================
   ORON — SEKSJON: problem  ·  «Regnestykket»

   Signaturvisualen er ett diagram, ikke to leketøysrutenett:
   en felles x-akse for hele måneden, med to oppsamlingskurver
   over aksen (byrået flater ut på 2, Oron klatrer til 30) og to
   rytmespor under den (byrået: 30 hårstreker der to er dager med
   artikkel — Oron: 30 streker, en per dag). Til høyre står selve
   regnestykket: kroner delt på artikler.

   Oransje er skalpell: en kurve, ett nesten usynlig felt under
   den, 30 tynne streker og en prikk. Alt annet er blekk og
   hårstrek.
   ============================================================ */

.s-problem {
  /* En kilde til de små målene — settes om ved brekkpunkt, aldri
     duplisert som løse pikselverdier lenger nede i fila. */
  --problem-micro:    var(--fs-caption);
  --problem-name-w:   clamp(72px, 5.4vw, 82px);
  --problem-keys-w:   clamp(200px, 20vw, 268px);
  /* Diagramhøyden styres direkte, ikke via sideforhold: sporet
     bytter bredde når regnestykket flytter under ved 1024, og et
     sideforhold ville da slått ut i et hopp i høyden. */
  --problem-plot-h:   clamp(150px, 20vw, 250px);
  --problem-lane-h:   var(--s-6); /* høyden på ett rytmespor */
  --problem-hair-w:   1px;        /* dag uten artikkel: hårstrek */
  --problem-pub-w:    min(6px, 40%);
  --problem-bar-w:    min(8px, 44%);
}

/* ------------------------------------------------------------
   1 · Overskriftsrad — asymmetrisk: utsagn venstre, ingress høyre
   ------------------------------------------------------------ */

.s-problem .problem-head {
  max-width: none;
}

.s-problem .problem-head .eyebrow {
  margin-bottom: clamp(var(--s-5), 1.6vw, var(--s-7));
}

.s-problem .problem-head__row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(var(--s-10), 6vw, var(--s-24));
  align-items: start;
}

.s-problem .problem-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--or-ink-900);
  text-wrap: balance;
  max-width: 17ch;
}

/* Punchlinen får sin egen linje — bruddet er slaget, ikke farge */
.s-problem .problem-h2__punch {
  display: block;
  margin-top: 0.16em;
}

.s-problem .problem-nbr {
  white-space: nowrap;
}

/* Optisk grunnlinje mot h2. Halvskytingen over h2 er
   (48 × 1.14 − 48) / 2 = 3.4 px, over ingressen
   (21 × 1.55 − 21) / 2 = 5.8 px, og resten er forskjellen i
   overlengde (48 − 21 = 27 px × overlengdeforholdet). Verdien er
   målt mot faktisk grunnlinje ved 1024/1440/1920 — mål på nytt
   hvis --fs-lead eller --fs-h2 endres. */
.s-problem .problem-lead {
  max-width: 44ch;
  padding-top: 1.05em;
}

/* ------------------------------------------------------------
   2 · Panelet — diagram til venstre, regnestykket til høyre
   ------------------------------------------------------------ */

.s-problem .problem-panel {
  margin-top: clamp(var(--s-12), 5vw, var(--s-20));
  background: var(--or-white);
  border: 1px solid var(--or-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-sm);
  padding: clamp(var(--s-5), 2.4vw, var(--s-8));
}

.s-problem .problem-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-2) var(--s-2) clamp(var(--s-5), 2vw, var(--s-7));
  border-bottom: 1px solid var(--or-border-soft);
}

.s-problem .problem-panel__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--or-ink-900);
}

.s-problem .problem-panel__meta {
  font-size: var(--problem-micro);
  font-weight: var(--fw-medium);
  color: var(--or-ink-500);
  line-height: 1.4;
}

.s-problem .problem-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--problem-keys-w);
  column-gap: clamp(var(--s-8), 3.6vw, var(--s-16));
  padding: clamp(var(--s-7), 3vw, var(--s-10)) var(--s-2) var(--s-2);
}

/* — diagrammet: ett rutenett, fire rader, felles x-akse — */

.s-problem .problem-chart {
  align-self: start; /* diagrammet skal ikke strekkes av nabokolonnen */
  display: grid;
  grid-template-columns: var(--problem-name-w) minmax(0, 1fr);
  grid-template-rows: auto var(--problem-lane-h) var(--problem-lane-h) auto;
  column-gap: var(--s-3);
}

.s-problem .problem-chart__plot {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  display: grid; /* ingen anonym linjeboks under lerretet — rytmesporene
                    skal henge i aksen, ikke 19 px under den */
  margin-bottom: var(--s-1);
}

.s-problem .problem-chart__canvas {
  position: relative;
  margin-left: calc(var(--problem-name-w) + var(--s-3));
  height: var(--problem-plot-h);
  overflow: hidden;
  /* dette er den felles aksen begge rytmesporene henger fra */
  border-bottom: 1px solid var(--or-border-strong);
}

/* Skalaen: 0, 15 og 30 artikler. Linjene ligger nøyaktig der kurven
   treffer verdien, ikke på runde piksler — 30 er toppen av trappa. */
.s-problem .problem-chart__ylab {
  position: absolute;
  left: 0;
  width: var(--problem-name-w);
  text-align: right;
  transform: translateY(-50%);
  font-size: var(--problem-micro);
  line-height: 1;
  color: var(--or-ink-500);
}

.s-problem .problem-chart__grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--or-border);
}

.s-problem .problem-chart__ylab--hi,
.s-problem .problem-chart__grid--hi  { top: 1.5%; }
.s-problem .problem-chart__ylab--mid,
.s-problem .problem-chart__grid--mid { top: 50.75%; }

.s-problem .problem-plot {
  position: relative;
  z-index: 1; /* kurvene ligger over rutenettlinjene */
  display: block;
  width: 100%;
  height: 100%;
}

.s-problem .problem-plot__stop-a { stop-color: var(--or-orange); stop-opacity: 0.13; }
.s-problem .problem-plot__stop-b { stop-color: var(--or-orange); stop-opacity: 0; }

.s-problem .problem-plot__line {
  fill: none;
  /* trappa beholder samme strektykkelse i begge akser, uansett
     hvilket sideforhold plottet får ved brekkpunktene */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}

.s-problem .problem-plot__line--oron {
  stroke: var(--or-orange);
  stroke-width: 2.25;
}

.s-problem .problem-plot__line--byra {
  stroke: var(--or-ink-500);
  stroke-width: 1.75;
}

/* — rytmesporene: 30 dager, samme rutenett som kurven over — */

.s-problem .problem-chart__name {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  font-size: var(--problem-micro);
  font-weight: var(--fw-semi);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--or-ink-500);
}

.s-problem .problem-chart__name--oron {
  grid-row: 3;
  color: var(--or-ink-900);
}

.s-problem .problem-chart__track {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  align-items: start;
}

.s-problem .problem-chart__track--byra { grid-row: 2; }

.s-problem .problem-chart__track--oron {
  grid-row: 3;
  border-top: 1px solid var(--or-border-soft);
}

.s-problem .problem-tick {
  justify-self: center;
  width: var(--problem-hair-w);
  height: 36%;
  background: var(--or-border-strong);
}

.s-problem .problem-chart__track--byra .problem-tick.is-pub {
  width: var(--problem-pub-w);
  height: 72%;
  border-radius: var(--r-pill);
  background: var(--or-ink-900);
}

/* Tonen stiger med kurven over — full oransje først mot slutten av
   måneden. Massen står, kromaet faller. */
.s-problem .problem-chart__track--oron .problem-tick {
  width: var(--problem-bar-w);
  height: 72%;
  border-radius: var(--r-pill);
  background: var(--or-orange);
  opacity: calc(0.46 + var(--i, 0) * 0.0186);
}

.s-problem .problem-chart__days {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-3);
  font-size: var(--problem-micro);
  line-height: 1;
  color: var(--or-ink-500);
}

/* Sveipet: diagrammet tegnes fra dag 1 til dag 30 når panelet ruller
   inn. Bare transform — og standardtilstanden er SYNLIG, så et
   uteblitt .is-in aldri kan etterlate visualen usynlig. */
.s-problem .problem-chart__wipe {
  grid-column: 2;
  grid-row: 1 / -1;
  z-index: 2;
  position: relative;
  background: var(--or-white);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.js-ready .s-problem .problem-chart__wipe {
  transition: transform 900ms var(--e-out) 240ms;
}

.js-ready .s-problem .problem-panel[data-reveal]:not(.is-in) .problem-chart__wipe {
  transform: scaleX(1);
}

/* — regnestykket: kroner delt på artikler, felles venstrekant — */

.s-problem .problem-keys {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(var(--s-8), 3vw, var(--s-12));
}

.s-problem .problem-key {
  border-top: 1px solid var(--or-border);
  padding-top: clamp(var(--s-3), 1.2vw, var(--s-4));
}

.s-problem .problem-key__id {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--problem-micro);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--or-ink-500);
}

.s-problem .problem-key--oron .problem-key__id {
  color: var(--or-ink-900);
}

.s-problem .problem-key__dot {
  width: var(--s-2);
  height: var(--s-2);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--or-ink-400);
}

.s-problem .problem-key--oron .problem-key__dot {
  background: var(--or-orange);
}

.s-problem .problem-key__fig {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: clamp(var(--s-3), 1.4vw, var(--s-5));
}

.s-problem .problem-key__num {
  font-size: clamp(2rem, 1.28rem + 2.05vw, 3.125rem); /* 32 → 50 */
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
  line-height: 1;
  color: var(--or-ink-500);
}

.s-problem .problem-key--oron .problem-key__num {
  color: var(--or-ink-900);
}

.s-problem .problem-key__unit {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  letter-spacing: -0.014em;
  color: var(--or-ink-500);
}

.s-problem .problem-key__note {
  margin-top: var(--s-3);
  font-size: var(--problem-micro);
  line-height: 1.5;
  color: var(--or-ink-500);
  text-wrap: pretty;
}

.s-problem .problem-key__note + .problem-key__note {
  margin-top: var(--s-1);
}

.s-problem .problem-key__kr {
  font-weight: var(--fw-semi);
  color: var(--or-ink-900);
}

/* ------------------------------------------------------------
   3 · Tre smertepunkter — stille, typografiske, uten alarmfarge
   ------------------------------------------------------------ */

.s-problem .problem-pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(var(--s-12), 5vw, var(--s-20));
  border-top: 1px solid var(--or-border);
}

.s-problem .problem-pain {
  padding: clamp(var(--s-7), 2.6vw, var(--s-10)) clamp(var(--s-5), 2.6vw, var(--s-10))
           clamp(var(--s-8), 3.4vw, var(--s-14)) 0;
}

.s-problem .problem-pain + .problem-pain {
  border-left: 1px solid var(--or-border);
  padding-left: clamp(var(--s-5), 2.6vw, var(--s-10));
}

.s-problem .problem-pain__no {
  display: block;
  font-size: var(--problem-micro);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--or-ink-500);
}

.s-problem .problem-pain__title {
  margin-top: clamp(var(--s-5), 1.8vw, var(--s-7));
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--or-ink-900);
}

.s-problem .problem-pain__text {
  margin-top: var(--s-3);
  color: var(--or-ink-500);
  text-wrap: pretty;
  max-width: 34ch;
}

/* ------------------------------------------------------------
   4 · Overgangen — hårstreken som varmes opp mot svaret
   ------------------------------------------------------------ */

/* båndet lukkes av overgangens hårstrek — de loddrette skillene
   går dermed fra kant til kant, som i en tabell */
.s-problem .problem-turn {
  position: relative;
  border-top: 1px solid var(--or-border);
  padding: clamp(var(--s-10), 4vw, var(--s-16)) 0 0 clamp(var(--s-6), 2.4vw, var(--s-10));
}

/* ekte forbindelse: fra hårstreken over og helt ned til setningen */
.s-problem .problem-turn__rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--or-border-strong) 0%, var(--or-orange) 100%);
}

.s-problem .problem-turn__text {
  font-size: clamp(1.5rem, 1.06rem + 1.28vw, 2.125rem); /* 24 → 34 */
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: var(--ls-h2);
  color: var(--or-ink-900);
}

/* ============================================================
   Responsivt
   ============================================================ */

@media (max-width: 1024px) {
  .s-problem .problem-head__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(var(--s-6), 3vw, var(--s-8));
  }
  .s-problem .problem-h2 {
    max-width: 20ch;
  }
  .s-problem .problem-lead {
    max-width: 58ch;
    padding-top: 0;
  }
  .s-problem .problem-panel__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(var(--s-8), 4vw, var(--s-12));
  }
  /* begge halvdeler ved siden av hverandre — sammenligningen skal
     aldri splittes over to skjermhøyder */
  .s-problem .problem-keys {
    flex-direction: row;
    gap: clamp(var(--s-6), 4vw, var(--s-12));
  }
  .s-problem .problem-key {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .s-problem .problem-pains {
    grid-template-columns: minmax(0, 1fr);
  }
  .s-problem .problem-pain {
    padding-right: 0;
    padding-bottom: clamp(var(--s-6), 3vw, var(--s-8));
  }
  .s-problem .problem-pain + .problem-pain {
    border-left: 0;
    border-top: 1px solid var(--or-border);
    padding-left: 0;
    padding-top: clamp(var(--s-6), 3vw, var(--s-8));
  }
  .s-problem .problem-pain__text {
    max-width: 52ch;
  }
}

@media (max-width: 560px) {
  .s-problem {
    --problem-micro: var(--fs-small); /* ingenting under 14 px ved 390 */
    --problem-lane-h: var(--s-5);
  }
  .s-problem .problem-h2,
  .s-problem .problem-lead,
  .s-problem .problem-pain__text {
    max-width: none;
  }
  .s-problem .problem-key__fig {
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* visualen skal aldri bli stående bak et sveip som ikke kjører */
  .s-problem .problem-chart__wipe,
  .js-ready .s-problem .problem-panel[data-reveal]:not(.is-in) .problem-chart__wipe {
    transform: scaleX(0) !important;
    transition: none !important;
  }
}