/* FireHub Brannkostnadskalkulator — shell styles.
 * Spec: BuildSpec v0.3.1 §7 + brannkalkulator-layout-spec.md + brannkalkulator-design-tokens.md.
 * Tokens come from /shared/brand.css. Don't invent new brand colors.
 * Class taxonomy mirrors rendered.html visual reference.
 */

:root {
  --bkc-green: #16a34a;
  --bkc-green-bg: rgba(22,163,74,0.10);
  --bkc-green-line: rgba(22,163,74,0.30);
  --bkc-amber: #b45309;
  --bkc-amber-bg: rgba(202,138,4,0.12);
  --bkc-amber-line: rgba(202,138,4,0.32);
  --bkc-orange: #c2410c;
  --bkc-orange-bg: rgba(249,115,22,0.12);
  --bkc-orange-line: rgba(249,115,22,0.34);
  --bkc-gray: #475569;
  --bkc-gray-bg: rgba(100,116,139,0.10);
  --bkc-gray-line: rgba(100,116,139,0.28);
}

.bkc {
  width: min(1280px, 100%);
  margin: 0 auto;
  font-family: var(--body);
  color: var(--ink);

  /* Calculator radius system (Tema 4 corr. 8) — one scale, applied everywhere instead of one-off
   * values. Cards stay softly rounded but less inflated; chips/badges/tags and small buttons get
   * tighter, more squared corners for a more professional component language. Bars, sliders, the
   * on/off switch and the floating scenario pills keep their own shapes (intentionally pill/round). */
  --bkc-r-card: 12px;     /* large surfaces: analysis cards, panels, method, buckets */
  --bkc-r-control: 6px;   /* buttons and larger interactive controls — flatter than cards */
  --bkc-r-seg: 7px;       /* segmented controls (country / year / scenario) */
  --bkc-r-chip: 5px;      /* chips, badges, tags, small inline labels */

  /* Display-number scale (Tema 6) — one shared set of figure sizes instead of many one-off
   * clamps, so every total reads as part of the same system. Hierarchy from strongest down:
   *   hero  → Nullvisjon human "40" (the highest cost on the page)
   *   xl    → main economic estimate, addressable value, active "Ditt scenario"
   *   lg    → Nullvisjon animal "1 250", sticky scenario card
   *   md    → card totals (Hvem), Juster result, recap, SE/DK range
   *   sm    → basis header / detail figures */
  --bkc-num-hero: clamp(34px, 4.2vw, 48px);
  --bkc-num-xl:   clamp(28px, 3.4vw, 40px);
  --bkc-num-lg:   clamp(26px, 3vw, 34px);
  --bkc-num-md:   clamp(22px, 2.4vw, 28px);
  --bkc-num-sm:   clamp(20px, 2vw, 24px);

  /* Text scale (typography normalisation) — one shared set of body/heading/note/label sizes so the
   * scattered 9.5–13.5px micro-sizes collapse to a clear hierarchy. Figure tokens above are unchanged.
   *   body-lg → primary explanatory copy (matches hero body)
   *   body    → normal explanatory copy inside cards/boxes
   *   secondary → smaller explanatory copy / helper text (still readable, not metadata)
   *   note    → true source/method/metadata notes (quiet)
   *   label   → eyebrows/kickers/micro-labels (uppercase keys) — visually secondary
   *   card-h  → card/section-block headings */
  --bkc-text-body-lg:   clamp(17px, 1.5vw, 19px);
  --bkc-text-body:      clamp(16px, 1.3vw, 18px);
  --bkc-text-secondary: 14px;
  --bkc-text-note:      12px;
  --bkc-text-label:     11px;
  --bkc-text-card-h:    18px;
}

/* —— shell —— */
.bkc-shell {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* —— controls band (datagrunnlag + region) — sits mid-page below the narrative summary —— */
.bkc-head {
  padding: 16px 20px;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card);
  background: var(--paper-2);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 32px;
}
.bkc-kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet);
  display: inline-flex; align-items: center; gap: 8px;
}
.bkc-kicker::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fire-500);
}
.bkc-head-controls {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}

/* —— databasis (yearMode toggle) —— */
.bkc-databasis {
  display: inline-flex; flex-direction: column; gap: 6px;
}
.bkc-databasis-note {
  font-size: 13px; color: var(--ink-soft);
  margin: 0; line-height: 1.5; max-width: 60ch;
}
.bkc-time {
  display: inline-flex;
  border: 1px solid var(--navy-200);
  border-radius: var(--bkc-r-seg);
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  font-family: var(--mono);
}
.bkc-time button {
  appearance: none; background: transparent; border: 0;
  padding: 7px 12px; font: inherit; font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-quiet); cursor: pointer;
  transition: background .15s, color .15s;
}
.bkc-time button + button { border-left: 1px solid var(--navy-100); }
.bkc-time button:hover { color: var(--ink); }
.bkc-time button.is-on {
  background: var(--fire-500); color: #fff;
}

/* —— regions (country selector) —— */
.bkc-regions {
  display: inline-flex;
  border: 1px solid var(--navy-200);
  border-radius: var(--bkc-r-seg);
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.bkc-region {
  appearance: none; background: transparent; border: 0;
  padding: 7px 12px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet); cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.bkc-region + .bkc-region { border-left: 1px solid var(--navy-100); }
.bkc-region:hover { color: var(--ink); }
.bkc-region.is-on { background: var(--navy-900); color: #fff; }
.bkc-region .pending-mark {
  font-size: 10px; letter-spacing: 0.1em;
  padding: 1px 6px; border-radius: var(--bkc-r-chip);
  background: var(--warn-50); color: var(--warn);
}

/* —— region note (SE/DK) — calm method/source note, not a warning —— */
.bkc-regnote {
  margin: 14px 0 0;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--navy-100);
  border-left: 3px solid var(--navy-200);
  border-radius: var(--bkc-r-card);
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft);
}
.bkc-regnote-txt { margin: 0; }

/* —— body (legacy single-card shell — no longer rendered) —— */
.bkc-body { padding: 28px; display: flex; flex-direction: column; gap: 32px; }

/* —— sectioned page (public explainer first, calculator second) ——
 * Global width rule (Tema 9): every calculator section spans the full content width and is EITHER
 *   (a) full-width — bridge/Forebygging, Juster, the detail panels; OR
 *   (b) a true equal-logic pair — firstview (estimate | consequence), Hvor | Hvem (.bkc-di-breaks),
 *       the influence two-column (.bkc-scenario-panel).
 * No mid-width cards. The only narrow surfaces are the auxiliary scenario notes (recap / impact),
 * which are deliberate centred summaries, not content sections. */
.bkc-sections { display: flex; flex-direction: column; }
.bkc-sec {
  padding: clamp(26px, 3.5vh, 42px) 0;
  border-top: 1px solid var(--navy-100);
}
.bkc-sec:first-child { padding-top: 6px; border-top: 0; }
/* tighter rhythm where the brief flagged excess */
.bkc-sec--firstview { padding-top: 4px; }
/* top control band = country + data basis only (Tema 4 correction — actions live in the model card) */
.bkc-sec--controls { padding-top: clamp(20px, 2.8vh, 30px); padding-bottom: clamp(8px, 1.4vh, 14px); }
/* model block — the Hvor/Hvem pair (with card-level actions) + the panels they open below it,
   grouped with the control block above (no divider between them) */
.bkc-sec--model { padding-top: clamp(12px, 1.8vh, 20px); border-top: 0; display: flex; flex-direction: column; gap: 20px; }
.bkc-main-econ .bkc-econ-sep { margin-top: 10px; }
.bkc-sec-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 16px;
}

/* —— first view — editorial two-column (narrative + estimate | consequence) —— */
.bkc-firstview {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
/* estimate block (heading + supporting text) on a slightly translucent white surface so it sits
   clearly on the grid background — architectural: small radius, subtle border (Tema top-section) */
.bkc-fv-left {
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(255,255,255,0.6); border: 1px solid var(--navy-100); border-radius: 4px;
  padding: clamp(20px, 3vw, 28px); align-self: start;
}
.bkc-intro { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 56ch; }
/* the estimate number is the strongest text after the hero */
.bkc-main-econ .bkc-h2 { font-size: var(--bkc-num-xl); max-width: 18ch; margin: 0 0 12px; }
.bkc-figure { color: var(--ink); white-space: nowrap; }   /* ink, not orange — see .bkc-figure below (Tema 6) */
/* consequence cards stack in the narrower right column so each sentence gets full width */
.bkc-fv-right .bkc-impact-grid { grid-template-columns: 1fr; }

/* controls — clean groups (country + data note), readable when stacked on mobile */
.bkc-controls-panel { max-width: 760px; }
.bkc-ctrl-group { display: flex; flex-direction: column; gap: 8px; }
.bkc-ctrl-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); margin: 0; }

@media (max-width: 900px) {
  .bkc-firstview { grid-template-columns: 1fr; gap: 26px; }
  /* mobile: consequence cards come before the narrative (part of the opening argument) */
  .bkc-fv-right { order: -1; }
  /* addressable panel (Tema 4 corr. 6): single column, value block before the body text so the
     number is seen early; the selector stays directly under the value. */
  .bkc-scenario-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "head"
      "result"
      "body";
    row-gap: 0;
  }
  .bkc-scenario-panel > h4 { margin-bottom: 16px; }
  .bkc-scenario-panel > .bkc-scn-result { margin-bottom: 18px; }
  .bkc-scenario-panel > .bkc-scn-body { margin-bottom: 0; }
}
@media (max-width: 700px) {
  .bkc-head { flex-direction: column; align-items: stretch; gap: 14px; }
}

/* —— front view (always visible) —— */
.bkc-front {
  display: flex; flex-direction: column; gap: 32px;
}

/* F1 · human + animal strip */
/* F1 · human + animal impact — two separate high-importance cards (was a dark text box) */
.bkc-human-strip { padding: 0; }
.bkc-human-strip .eyebrow { color: var(--fire-600); margin-bottom: 14px; }
.bkc-impact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.bkc-impact-grid.is-single { grid-template-columns: 1fr; max-width: 560px; }
.bkc-impact-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--navy-100);
  border-left: 3px solid var(--fire-500);
  border-radius: var(--bkc-r-card); padding: 24px 26px;
  /* no shadow — flat, consistent with the other human-consequence metric cards (Tema metric-unify) */
}
.bkc-impact-ico { flex-shrink: 0; color: var(--fire-600); line-height: 0; margin-top: 4px; }
.bkc-impact-ico svg { width: 30px; height: 30px; }
.bkc-impact-label {
  display: block; font-size: var(--bkc-text-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 8px;
}
/* Nullvisjon sentence — the count is the visual anchor (key figure), the rest stays readable but
   secondary. Serious and factual, not tabloid (Tema 4 corr. 7). */
.bkc-impact-line {
  font-family: var(--display); font-weight: 500; font-size: var(--bkc-text-body);
  line-height: 1.5; color: var(--ink-soft); margin: 0;
}
/* "40" is the strongest number on the page — human life is the highest cost, so it uses the hero
   step (larger than the economic estimate and the Hvem total) and orange, while staying serious and
   factual, not tabloid (Tema 4 corr. 8 · scale Tema 6). */
.bkc-impact-fig {
  font-weight: 700; color: var(--fire-600);
  font-size: var(--bkc-num-hero); line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 3px; white-space: nowrap;
}
/* "1 250" — a secondary key number: still orange and clearly above body text, but below "40" */
.bkc-impact-line.is-minor .bkc-impact-fig { font-size: var(--bkc-num-lg); }
.bkc-impact-note {
  font-size: var(--bkc-text-secondary); line-height: 1.5; color: var(--ink-soft); margin: 14px 0 0;
}
.bkc-impact-src {
  font-size: var(--bkc-text-label); letter-spacing: 0.06em; color: var(--ink-quiet); margin: 6px 0 0;
}
/* Human-life module (P2I1C) — one larger, calm card (replaces the people+animal two-card grid),
   with a synchronized country selector below it. Reuses .bkc-impact-line / .bkc-impact-fig for the
   fatality number and .bkc-regions/.bkc-region for the selector buttons. */
.bkc-life-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border: 1px solid var(--navy-100); border-left: 3px solid var(--fire-500);
  border-radius: var(--bkc-r-card); padding: 28px 30px;
  min-height: 148px;   /* stable across NO/SE/DK — no layout jump on country switch */
}
.bkc-life-ico { flex-shrink: 0; color: var(--fire-600); line-height: 0; margin-top: 4px; }
.bkc-life-ico svg { width: 40px; height: 40px; }
.bkc-life-body { min-width: 0; }
.bkc-life-label {
  display: block; font-size: var(--bkc-text-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 10px;
}
.bkc-life-src { font-size: var(--bkc-text-label); letter-spacing: 0.06em; color: var(--ink-quiet); margin: 10px 0 0; }
.bkc-life-select { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 700px) {
  .bkc-life-card { padding: 22px 20px; min-height: 0; }
  .bkc-life-ico svg { width: 34px; height: 34px; }
}
/* main estimate — emphasised figure. Ink, NOT the strong orange used for the Nullvisjon "40"
   (Tema 6): orange now reads as human-life emphasis + active adjusted scenario, so the economic
   estimate must not compete with "40" on colour. Wording and value unchanged. */
.bkc-figure { color: var(--ink); }
/* SE/DK preliminary single line (dark-on-light) */
.bkc-h1 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-md);
  line-height: 1.25; letter-spacing: -0.015em;
  margin: 0; color: var(--ink);
}
@media (max-width: 700px) {
  .bkc-impact-grid { grid-template-columns: 1fr; }
}

/* F2 · main econ */
.bkc-main-econ {
  text-align: left;
}
.bkc-main-econ .eyebrow { margin-bottom: 10px; }
.bkc-h2 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-xl);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 24ch;
}
.bkc-h2 .accent { color: var(--fire-600); }
.bkc-econ-sent {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 8px;
}
.bkc-econ-sep {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 6px 0 0;
}

/* F3 · explain */
.bkc-explain { max-width: 60ch; }
.bkc-explain .eyebrow { margin-bottom: 8px; }
.bkc-explain p {
  font-size: var(--bkc-text-body-lg); line-height: 1.6;   /* standard body size (matches hero body) */
  color: var(--ink-soft);
  margin: 0;
}
.bkc-explain p strong {
  font-weight: 600;
  color: var(--ink);
}

/* F4 · front single break (isfjell-kuttet) */
.bkc-front-break {
  background: var(--paper-2);
  border-radius: var(--bkc-r-card);
  padding: 22px 26px;
}
.bkc-front-break .eyebrow { margin-bottom: 10px; }
.bkc-front-break h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 20px; line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
.bkc-front-break .lede {
  font-size: 15px; color: var(--ink-soft);
  margin: 0 0 18px; max-width: 60ch;
}
.bkc-front-buckets {
  display: flex; flex-direction: column; gap: 12px;
}

/* shared bar-row */
.bkc-bar-row { display: flex; flex-direction: column; gap: 6px; }
.bkc-bar-top {
  display: flex; align-items: baseline; gap: 12px;
  justify-content: space-between;
}
.bkc-bar-name {
  font-size: 14px; color: var(--ink-soft);
  font-weight: 500;
}
.bkc-bar-name strong { color: var(--ink); font-weight: 600; }
/* per-line values (e.g. "6,92 mrd") — a little stronger and more readable than before, but still
   well below the card total and far below Nullvisjon "40"; the percent stays secondary (Tema 4 corr. 8) */
.bkc-bar-val {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.bkc-bar-val .pct { color: var(--ink-quiet); font-weight: 400; margin-left: 8px; }
/* dark/navy by default; orange only when the row is affected by an adjustment (Tema 8),
   matching the detail rows (.bkc-line.is-adjusted .l-val). The percent stays quiet. */
.bkc-bar-row.is-adjusted .bkc-bar-val { color: var(--fire-600); }
.bkc-bar-track {
  height: 8px; border-radius: 999px;
  background: var(--navy-100);
  overflow: hidden;
  position: relative;
}
.bkc-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .4s ease;
}
.bkc-fill-synlig { background: var(--fire-500); }
.bkc-fill-skjult { background: var(--navy-700); }
.bkc-fill-skjult.is-privat { background: var(--navy-400); }
.bkc-fill-payer { background: var(--fire-500); }
.bkc-fill-payer.p-1 { opacity: 1; }
.bkc-fill-payer.p-2 { opacity: 0.85; }
.bkc-fill-payer.p-3 { opacity: 0.7; }
.bkc-fill-payer.p-4 { opacity: 0.55; }
.bkc-fill-payer.p-5 { opacity: 0.4; }

/* F5 · FireHub bridge */
/* prevention composition: a positioned wrapper holds a narrower text card + the diorama as an
   independent floating layer in the right zone (the image is NOT in the card flow). */
.bkc-bridge-wrap { position: relative; overflow: visible; }
.bkc-bridge {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-left: 3px solid var(--fire-500);
  border-radius: var(--bkc-r-card);
  padding: 22px 24px;
}
.bkc-bridge .eyebrow { margin-bottom: 10px; }
.bkc-h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
}
.bkc-bridge-conn {
  font-size: var(--bkc-text-body); line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}
/* diorama — floating visual layer, no surface of its own. Mobile-first: a calm block below the
   text, centred. object-fit: contain keeps the apartment scene uncropped. */
.bkc-bridge-fig { margin: 18px auto 0; width: min(252px, 76%); }   /* ~10% smaller cap (P2H6C-C) */
.bkc-bridge-fig img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Desktop: card ~68% wide; the image floats absolutely in the right zone as its own layer.
   NO min-height / padding / spacer — the text card alone sets the section height, so the image
   never reserves space or pushes the cost cards. The wrapper's height equals the card height (the
   card is its only in-flow child), so anchoring with top: 50% / translateY(-50%) locks the image's
   vertical centre to the prevention card's centre. The PNG carries ~28%/25% transparent top/bottom
   margins, so the visible diorama stays within the card's band while the (transparent) box edges
   overflow harmlessly — no overlap with the section above or the cost cards below. max-height bounds
   the box on wide screens; it stays inside the content width (no h-scroll). */
@media (min-width: 901px) {
  .bkc-bridge { width: 68%; max-width: 700px; }
  .bkc-bridge-fig {
    position: absolute; right: clamp(0px, 2%, 28px); top: 50%; transform: translateY(-50%);
    width: clamp(288px, 28.8vw, 432px); margin: 0; pointer-events: none; z-index: 2;   /* ~10% smaller (P2H6C-C) */
  }
  .bkc-bridge-fig img {
    width: auto; height: auto; max-width: 100%;
    max-height: clamp(396px, 43.2vw, 630px); object-fit: contain;   /* ~10% smaller (P2H6C-C) */
  }
}

/* F6 · drill-in trigger */
/* "Se detaljene" — a full-width footer action integrated under the model/distribution block,
   reads as a card action that unfolds the detail below (Tema 4) */
.bkc-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  appearance: none; background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-control);
  padding: 15px 22px;
  font-family: var(--display); font-weight: 500; font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.bkc-trigger:hover {
  background: var(--paper-2);
  border-color: var(--navy-200);
  color: var(--ink);
}
.bkc-trigger-label { display: inline-block; }
.bkc-trigger::after {
  content: '›';
  font-size: 18px;
  color: var(--fire-600);
  margin-left: auto;
  transition: transform .2s;
}
.bkc.is-expanded .bkc-trigger::after { transform: rotate(90deg); }

/* —— expanded / drill-in —— */
.bkc-expanded {
  margin-top: 0;
  display: none;
  flex-direction: column;
  gap: 28px;
}
.bkc.is-expanded .bkc-expanded {
  display: flex;
}

/* D1 · both breakdowns side by side */
.bkc-di-breaks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.bkc-break {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card);
  padding: 22px 24px;
  /* flex column so the bottom element (Hvor: control row · Hvem: country narrative) pins to the
     card's lower edge; the grid pair already stretches both cards to equal height (P2H6B). */
  display: flex; flex-direction: column;
}
.bkc-break h4 {
  /* mid-level heading — aligned with the prevention-bridge line style (.bkc-h3): display 700,
     tight tracking, a clean step below it in the same scale */
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-text-card-h); line-height: 1.25; letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
/* card header: title left, shared total top-right as a prominent figure (Tema 4 corr. 7).
   Same number on both cards = one sum, two perspectives. Dominant inside the card, but kept
   secondary to the hero estimate (dark ink, not orange — orange stays the hero/Nullvisjon accent). */
.bkc-break-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 0 0 4px;
}
.bkc-break-head h4 { margin: 0; }
.bkc-break-head-l { min-width: 0; }
.bkc-break-total { flex-shrink: 0; text-align: right; line-height: 1; }
.bkc-break-total-v {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-md);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--ink); white-space: nowrap;
}
.bkc-break .lede {
  font-size: var(--bkc-text-secondary); color: var(--ink-quiet);
  margin: 0 0 18px; max-width: 44ch;
}
/* narrow phones: if the title + total get cramped side by side, drop the total under the title */
@media (max-width: 480px) {
  .bkc-break-head { flex-direction: column; gap: 6px; }
  .bkc-break-total { text-align: left; }
}
.bkc-breaks { display: flex; flex-direction: column; gap: 10px; }

/* datagrunnlag text inside the clean "Hvor kostnaden lander" card (after the intro) */
.bkc-card-databasis { margin: 2px 0 16px; }

/* Footer zone at the BOTTOM of the "Hvor kostnaden lander" card (Tema 4 corr. 4 · P2H6C):
   "Velg land: NO SE DK" + "Se detaljene" / "Endre forutsetninger", separated from the bars by a
   hairline. It carries an invisible narrative spacer (.is-spacer) so this footer reserves the same
   height as the "Hvem betaler" narrative footer — the two hairlines line up and the controls sit
   vertically centred in the band instead of being pushed to the absolute card bottom. The panels the
   actions toggle still render BELOW the two-card row. */
.bkc-card-controls {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--navy-100);
  display: grid;   /* spacer + control row share one cell; the spacer sets the height */
}
.bkc-card-controls > .bkc-payer-narrative.is-spacer {
  grid-area: 1 / 1;
  margin-top: 0; padding-top: 0; border-top: 0;   /* height sizer only — no second hairline */
}
.bkc-card-controls-inner {
  grid-area: 1 / 1; align-self: center;   /* centre the controls within the reserved footer height */
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.bkc-break--hvor { display: flex; flex-direction: column; }   /* lets the footer sit at the bottom */
.bkc-land-group { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bkc-land-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); }
.bkc-card-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.bkc-card-action {
  display: inline-flex; align-items: center; gap: 8px;
  appearance: none; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--navy-200);
  border-radius: var(--bkc-r-control); padding: 9px 14px;
  font-family: var(--display); font-weight: 500; font-size: 13.5px;
  color: var(--ink-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.bkc-card-action:hover { background: #fff; border-color: var(--navy-300); color: var(--ink); }
.bkc-card-action.is-on { background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.40); color: var(--fire-600); }
.bkc-card-action::after { content: '›'; font-size: 16px; color: var(--fire-600); transition: transform .2s; }
.bkc-card-action.is-on::after { transform: rotate(90deg); }
@media (max-width: 700px) {
  /* stack cleanly at the bottom of the card: Velg land · NO/SE/DK · Se detaljene · Endre forutsetninger */
  .bkc-card-controls { flex-direction: column; align-items: stretch; gap: 14px; }
  .bkc-land-group { flex-direction: column; align-items: stretch; gap: 8px; }
  .bkc-card-controls .bkc-regions { display: flex; }
  .bkc-card-controls .bkc-region { flex: 1; justify-content: center; }
  .bkc-card-actions { margin-left: 0; flex-direction: column; gap: 10px; }
  .bkc-card-action { justify-content: space-between; width: 100%; }
  .bkc-card-action::after { margin-left: auto; }
}

/* D2 · addressable panel — toned down (no longer a standalone "success" box).
   Two-column analytical block (Tema 4 corr. 6): text column left, addressable
   result column right. Grid areas drive the responsive reflow. */
/* —— post-model impact narrative: global context → local consequence → addressable risk ——
   Wrapper is .bkc-impactnarr (NOT .bkc-impact — that class is the old 440px scenario-impact card). */
.bkc-impactnarr { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
/* header: text column (left) + global anchor fact block (right) */
.bkc-impact-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.9fr);
  gap: clamp(20px, 4vw, 48px); align-items: start;
}
.bkc-impact-head-text { min-width: 0; }
.bkc-impact-head .eyebrow { margin: 0 0 8px; color: var(--ink-quiet); }
.bkc-impact-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); margin: 0; max-width: 30ch;
}
.bkc-impact-intro { font-size: var(--bkc-text-body-lg); line-height: 1.6; color: var(--ink-soft); margin: 10px 0 0; max-width: 64ch; }   /* standard body size */
/* Three impact-narrative container surfaces (Tema 3-containers): each .bkc-icard is the single white,
   architectural/editorial surface — very small radius (not soft SaaS), subtle border. All main text
   sits inside one of these; the inner blocks below have their own card styling stripped. */
.bkc-icard {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: 4px;
  padding: clamp(22px, 3vw, 32px);
}
/* global anchor — one analytical data point, not a banner; a fire-accented metric block inside the
   global container (no own card surface). */
.bkc-impact-fact {
  border-left: 3px solid var(--fire-500);
  padding: 2px 0 2px 18px;
}
.bkc-impact-fact-num {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-xl); line-height: 1; letter-spacing: -0.02em; color: var(--fire-600);
}
/* deliberate orange signal accents: "Globalt problem" eyebrow + the selected-country fatality count */
.bkc-eyebrow-em { color: var(--fire-600); }
.bkc-isub-lead-num { color: var(--fire-600); }
.bkc-impact-fact-label { font-size: var(--bkc-text-secondary); font-weight: 600; color: var(--ink); margin-top: 4px; }
.bkc-impact-fact-sub { font-size: var(--bkc-text-note); color: var(--ink-soft); margin-top: 2px; }
.bkc-impact-fact-clar { font-size: var(--bkc-text-note); line-height: 1.45; color: var(--ink-quiet); margin: 10px 0 0; }
@media (max-width: 700px) {
  .bkc-impact-head { grid-template-columns: 1fr; }
}

/* subareas A (liv, helse og dyr) and B (hva FireHub kan påvirke) — same white card language,
   stacked under one header so they read as one story, two clearly separated parts. */
/* subareas are now content blocks inside .bkc-icard containers — no own card surface */
.bkc-isub { background: transparent; border: 0; border-radius: 0; padding: 0; }
.bkc-isub-title { font-family: var(--display); font-weight: 700; font-size: var(--bkc-text-card-h); margin: 0 0 12px; color: var(--ink); }
.bkc-isub-lead {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; color: var(--ink); margin: 0; max-width: 38ch;
}
.bkc-isub-src { font-size: var(--bkc-text-label); letter-spacing: 0.04em; color: var(--ink-quiet); margin: 14px 0 0; }
.bkc-isub-animal { font-size: var(--bkc-text-secondary); line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; }

/* prevention-potential bridge — secondary content block inside the human container, separated from
   "Liv, helse og dyr" by a hairline divider; the closing line is the only orange accent. */
.bkc-pbridge {
  margin-top: clamp(16px, 2.5vh, 22px);
  padding-top: clamp(16px, 2.5vh, 22px);
  border-top: 1px solid var(--navy-100);
}
.bkc-pbridge-title { font-family: var(--display); font-weight: 700; font-size: var(--bkc-text-card-h); margin: 0 0 10px; color: var(--ink); }
.bkc-pbridge-body { font-size: var(--bkc-text-body); line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; max-width: 72ch; }
.bkc-pbridge-support { font-size: var(--bkc-text-secondary); line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; max-width: 72ch; }
.bkc-pbridge-closing { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--fire-600); margin: 0; }
.bkc-pbridge-src { font-size: var(--bkc-text-label); letter-spacing: 0.04em; color: var(--ink-quiet); margin: 12px 0 0; }

/* compact fatality history reused on the LIGHT narrative surface (dark .bkc-hc-* base is no longer
   rendered) — recolour for dark-on-light here. */
.bkc-impactnarr .bkc-hc-history { margin-top: 16px; max-width: 420px; }   /* compact — bars don't span the full card */
.bkc-impactnarr .bkc-hc-history-title { color: var(--ink-quiet); font-size: var(--bkc-text-label); }
.bkc-impactnarr .bkc-hc-bar-year { color: var(--ink-quiet); font-size: var(--bkc-text-label); }
.bkc-impactnarr .bkc-hc-bar-track { background: var(--navy-100); }
.bkc-impactnarr .bkc-hc-bar-fill { background: var(--navy-300); }
.bkc-impactnarr .bkc-hc-bar-row.is-latest .bkc-hc-bar-fill { background: var(--fire-500); }
.bkc-impactnarr .bkc-hc-bar-val { color: var(--ink); font-size: var(--bkc-text-note); }
/* latest-year value: keep it readable on the light card (the dark base set it to #fff = invisible
   here) — orange to match the highlighted bar (Tema metric-unify) */
.bkc-impactnarr .bkc-hc-bar-row.is-latest .bkc-hc-bar-val { color: var(--fire-600); }

/* 3 support points in subarea B */
.bkc-impact-points { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bkc-impact-points li { position: relative; padding-left: 20px; font-size: var(--bkc-text-secondary); line-height: 1.5; color: var(--ink-soft); }
.bkc-impact-points li::before { content: '›'; position: absolute; left: 4px; color: var(--fire-600); }

/* low-emphasis "Kilder og forbehold" — small, calm, never dominates */
.bkc-impact-sources { margin-top: clamp(16px, 2.5vh, 24px); border-top: 1px solid var(--navy-100); padding-top: 16px; }
.bkc-impact-sources-title { font-size: var(--bkc-text-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 8px; }
.bkc-impact-src-line { font-size: var(--bkc-text-note); line-height: 1.5; color: var(--ink-soft); margin: 0 0 4px; max-width: 80ch; }
.bkc-impact-src-note { font-size: var(--bkc-text-note); line-height: 1.5; color: var(--ink-quiet); margin: 4px 0 0; max-width: 80ch; }

/* addressable subarea — content block inside the addressable container (no own card surface);
   keeps its two-column grid (text + 3 points | live addressable value + scenario). */
.bkc-scenario-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow result"
    "head    result"
    "body    result";
  align-items: start;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 0;
}
.bkc-scenario-panel > .eyebrow { grid-area: eyebrow; }
.bkc-scenario-panel > h4 { grid-area: head; }
.bkc-scenario-panel > .bkc-scn-body { grid-area: body; }
.bkc-scenario-panel > .bkc-scn-result { grid-area: result; align-self: start; }
/* Country selector inside the right result stack (P2I1E fix) — sits under the question line, centred,
   no divider, visually part of the "Påvirkbar del" block. */
.bkc-scn-select {
  display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px;
}
.bkc-scenario-panel .eyebrow { color: var(--ink-quiet); margin-bottom: 8px; }
.bkc-scenario-panel h4 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-text-card-h); line-height: 1.35;
  margin: 0 0 14px;
  color: var(--ink);
  max-width: 42ch;
}
.bkc-scenario-panel p {
  font-size: var(--bkc-text-body); color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 60ch;
  line-height: 1.55;
}
.bkc-scenario-panel .bkc-scn-body p:last-child { margin-bottom: 0; }
/* compact "how the addressable estimate is calculated" note (Tema 8) — understated, secondary */
.bkc-scenario-panel .bkc-scn-calc {
  font-size: var(--bkc-text-note); line-height: 1.5; color: var(--ink-quiet);
  margin: 14px 0 0; max-width: 64ch;
}
/* right-hand summary column — one centred stack: eyebrow · amount · Lav/Middels/Høy · question · selector */
.bkc-scn-result { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* reflective question under the Lav/Base/Høy selector (Tema 6) — muted, one short line, no clutter */
.bkc-scn-q {
  margin: 10px 0 0; max-width: 32ch;
  font-size: var(--bkc-text-note); line-height: 1.45; color: var(--ink-quiet);
}
.bkc-scenario-panel .figlab {
  font-family: var(--mono); font-size: var(--bkc-text-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bkc-green);
  margin: 0 0 6px;
}
.bkc-big {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-xl);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink);
}
.bkc-big .unit {
  font-size: 0.55em; color: var(--ink-soft);
  font-weight: 500;
  margin-left: 8px;
}
.bkc-seg {
  display: inline-flex;
  border: 1px solid var(--bkc-green-line);
  border-radius: var(--bkc-r-seg);
  overflow: hidden;
  background: #fff;
  margin-top: 14px;
}
.bkc-seg button {
  appearance: none; background: transparent; border: 0;
  padding: 7px 14px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet); cursor: pointer;
}
.bkc-seg button + button { border-left: 1px solid var(--bkc-green-line); }
.bkc-seg button:hover { color: var(--ink); }
.bkc-seg button.is-on { background: var(--bkc-green); color: #fff; }

/* —— "Endre forutsetninger" assumption panel (Pass 1.8b) —— */
.bkc-assume { display: flex; flex-direction: column; gap: 14px; }
.bkc-assume-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  appearance: none; background: transparent;
  border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  padding: 11px 16px;
  font-family: var(--display); font-weight: 500; font-size: 14px;
  color: var(--ink-soft); cursor: pointer; align-self: flex-start;
  transition: background .15s, color .15s, border-color .15s;
}
.bkc-assume-trigger:hover { background: var(--paper-2); border-color: var(--navy-300); color: var(--ink); }
.bkc-assume-trigger::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s; margin-top: -2px;
}
.bkc-assume-trigger.is-open::after { transform: rotate(225deg); margin-top: 2px; }
/* Juster forutsetninger is a full-width work area (Tema 9 global rule), not a mid-width card —
   it reads as one deliberate block, like the Forebygging/detail panels. Inside, the controls + live
   result split into two columns at >=920px (see .bkc-assume-grid); text keeps its own readable cap.
   Surface (Tema 9-styling): same white card language as the model/detail cards — not a separate
   beige module — so it reads as an alternative view under the same control row. */
.bkc-assume-panel {
  background: #fff; border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card); padding: clamp(20px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 18px;
}
.bkc-assume-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bkc-assume-h4 { font-family: var(--display); font-weight: 700; font-size: var(--bkc-text-card-h); margin: 0; color: var(--ink); }
.bkc-assume-status {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: var(--bkc-r-chip); white-space: nowrap;
  color: var(--ink-quiet); background: #fff; border: 1px solid var(--navy-200);
}
.bkc-assume-status.is-adjusted {
  color: var(--fire-600); border-color: rgba(249,115,22,0.40); background: rgba(249,115,22,0.08);
}
.bkc-assume-intro { font-size: var(--bkc-text-secondary); line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 64ch; }
/* (Tema 9B) the Juster-only scenario selector was removed — its .bkc-assume-scenario* rules with it.
   The Lav/Base/Høy selector now lives only in "Hva FireHub kan påvirke" (.bkc-seg there is untouched). */
.bkc-assume-rows { display: flex; flex-direction: column; gap: 16px; }
.bkc-assume-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(180px, 280px);
  gap: 8px 22px; align-items: start;
}
.bkc-assume-row-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bkc-assume-row-label { font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.bkc-assume-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--fire-600); background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.34); padding: 1px 7px; border-radius: var(--bkc-r-chip);
}
.bkc-assume-help { font-size: var(--bkc-text-secondary); color: var(--ink-quiet); line-height: 1.45; }
.bkc-assume-control { display: flex; align-items: center; gap: 12px; }
.bkc-assume-val { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); min-width: 52px; text-align: right; }
.bkc-assume-row.is-adjusted .bkc-assume-val { color: var(--fire-600); font-weight: 600; }
.bkc-assume-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--navy-200); cursor: pointer; outline: none;
}
.bkc-assume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fire-500); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer;
}
.bkc-assume-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fire-500); border: 2px solid #fff; cursor: pointer;
}
.bkc-assume-slider:focus-visible { box-shadow: 0 0 0 3px rgba(249,115,22,0.25); }
.bkc-assume-reset {
  align-self: flex-start; appearance: none; cursor: pointer;
  background: #fff; border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  padding: 9px 16px; font-family: var(--display); font-weight: 500; font-size: 13px;
  color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s;
}
.bkc-assume-reset:hover:not(:disabled) { border-color: rgba(249,115,22,0.5); color: var(--fire-600); }
.bkc-assume-reset:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 700px) {
  .bkc-assume-row { grid-template-columns: 1fr; gap: 10px; }
  .bkc-assume-control { width: 100%; }
  .bkc-assume-reset { width: 100%; text-align: center; }
}

/* —— Basis/Juster paired layout (Tema 2) —— */
/* Juster panel: controls (left) paired with the live scenario result (right) on desktop */
.bkc-assume-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.bkc-assume-col-controls { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 920px) {
  .bkc-assume-grid { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.9fr); gap: 32px; align-items: start; }
  .bkc-assume-result { position: sticky; top: 20px; }
}
.bkc-assume-result {
  /* white card surface + border — same language as the calculator cards (pristine); the adjusted
     state below keeps its orange tint */
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--bkc-r-card);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 7px;
}
.bkc-assume-result.is-adjusted {
  background: rgba(249,115,22,0.05); border-color: rgba(249,115,22,0.26); border-left: 3px solid var(--fire-500);
}
.bkc-assume-result-k { font-size: var(--bkc-text-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); }
.bkc-assume-result.is-adjusted .bkc-assume-result-k { color: var(--fire-600); }
.bkc-assume-result-v {
  font-family: var(--display); font-weight: 700; font-size: var(--bkc-num-md); line-height: 1.05; color: var(--ink);
}
.bkc-assume-result.is-adjusted .bkc-assume-result-v { color: var(--fire-600); }
.bkc-assume-result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; }
.bkc-assume-result-rk { font-size: 12.5px; color: var(--ink-soft); }
.bkc-assume-result-rv { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.bkc-assume-result-rv.is-delta { color: var(--fire-600); font-weight: 600; }
.bkc-assume-result-count { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--ink-quiet); }
.bkc-assume-result-hint { margin: 0; font-size: var(--bkc-text-secondary); line-height: 1.5; color: var(--ink-soft); }

/* Basis header — opens the model view with the baseline result + model basis */
.bkc-basis-head {
  background: #fff; border: 1px solid var(--navy-100); border-radius: var(--bkc-r-card);
  padding: 18px 20px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.bkc-basis-head .eyebrow { margin: 0; }
.bkc-basis-head-result { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bkc-basis-head-k { font-size: var(--bkc-text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-quiet); }
.bkc-basis-head-v { font-family: var(--display); font-weight: 700; font-size: var(--bkc-num-sm); color: var(--ink); }
.bkc-basis-head-title { margin: 4px 0 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.bkc-basis-head-body { margin: 0; font-size: var(--bkc-text-secondary); line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }
/* Claim-safety model-estimate note under the headline total (P2I1) — quiet, one line, not defensive. */
.bkc-econ-modelnote { margin: 8px 0 0; font-size: var(--bkc-text-label); line-height: 1.45; color: var(--ink-quiet); max-width: 60ch; }
/* Country narrative footer inside the "Hvem betaler" card (P2H6B). Pinned to the card's lower edge
   (margin-top:auto) and separated from the payer rows by a hairline — a compact, confident
   explanation, not a warning. All three country texts are stacked in ONE grid cell (only .is-on is
   visible); the cell therefore always reserves the height of the longest text, so switching
   NO/SE/DK never shifts the paired-card height. */
.bkc-payer-narrative {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--navy-100);
  display: grid;
}
.bkc-payer-narrative p {
  grid-area: 1 / 1;   /* stack all three in the same cell → cell sizes to the tallest */
  margin: 0; font-size: var(--bkc-text-secondary); line-height: 1.55; color: var(--ink-soft);
  max-width: none;    /* use the available card width — capped by the half-width card itself (P2H6C) */
}
.bkc-payer-narrative p:not(.is-on) { visibility: hidden; }
/* shared scenario marker + global reset inside "Se detaljene" (shows only when adjusted) — same
   override state as the Juster panel, so reset-all works identically from either panel. */
.bkc-basis-head-scenario {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--navy-100);
}
.bkc-basis-head-adj {
  font-size: 10.5px; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: var(--bkc-r-chip); white-space: nowrap;
  color: var(--fire-600); border: 1px solid rgba(249,115,22,0.40); background: rgba(249,115,22,0.08);
}
.bkc-basis-head-reset {
  margin-left: auto; appearance: none; cursor: pointer;
  background: #fff; border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  padding: 8px 14px; font-family: var(--display); font-weight: 500; font-size: 13px;
  color: var(--ink-soft); transition: color .15s, border-color .15s;
}
.bkc-basis-head-reset:hover { color: var(--fire-600); border-color: rgba(249,115,22,0.5); }

/* comparison summary + "Brukerjustert" markers (Pass 1.8c — NO live) */
.bkc-assume-compare {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--navy-100);
  border-left: 3px solid var(--fire-500);
  border-radius: var(--bkc-r-card); padding: 14px 18px;
}
.bkc-assume-cmp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bkc-assume-cmp-label { font-size: 13px; color: var(--ink-soft); }
.bkc-assume-cmp-val { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.bkc-assume-cmp-val.is-yours { color: var(--fire-600); font-weight: 600; }
.bkc-assume-cmp-val.is-delta { color: var(--ink-soft); }
.bkc-adj-tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--fire-600); background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.34);
  padding: 1px 7px; border-radius: var(--bkc-r-chip); white-space: nowrap;
}
.bkc-main-econ .bkc-adj-tag { margin-left: 0; margin-top: 10px; }
.bkc-line.is-adjusted .l-val { color: var(--fire-600); font-weight: 600; }

/* —— inline per-line editor (Pass 1.8g) —— */
.bkc-line-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 16px; }
.bkc-sedk-line-actions { grid-column: 1 / -1; display: flex; align-items: center; margin-top: 4px; }
.bkc-juster-btn {
  appearance: none; background: transparent; border: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-quiet); cursor: pointer; padding: 2px 8px; border-radius: var(--bkc-r-chip);
  transition: color .15s, background .15s;
}
.bkc-juster-btn:hover { color: var(--fire-600); background: var(--fire-50); }
.bkc-juster-btn.is-on { color: var(--fire-600); }
.bkc-juster-btn.is-edited {
  color: var(--fire-600); background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.34);
}
.bkc-line-edit {
  grid-column: 1 / -1;
  margin: 6px 16px 6px 44px;
  padding: 14px 16px;
  background: #fff; border: 1px solid var(--navy-100);
  border-left: 2px solid var(--fire-500); border-radius: var(--bkc-r-control);
  max-width: 860px;
}
.bkc-sedk-line .bkc-line-edit { margin-left: 0; }
/* two-part editor (Tema 9C): Beregningsgrunnlag (basis, secondary) + Justering (controls).
   Side by side on desktop, stacked on mobile. */
.bkc-le-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px 22px; align-items: start;
}
.bkc-le-basis, .bkc-le-adjust { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bkc-le-basis .bkc-basis, .bkc-le-basis .bkc-sedk-l-basis { margin: 0; }
.bkc-le-adjust-title {
  margin: 0; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.bkc-le-vals { display: flex; flex-direction: column; gap: 4px; }
.bkc-le-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bkc-le-label { font-size: 12.5px; color: var(--ink-soft); }
.bkc-le-v { font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.bkc-le-v.is-yours { color: var(--fire-600); font-weight: 600; }
.bkc-le-control { display: flex; align-items: center; gap: 12px; }
.bkc-le-control .bkc-assume-slider { flex: 1; }
.bkc-le-mult { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; min-width: 130px; text-align: right; }
.bkc-le-reset {
  align-self: flex-start; appearance: none; cursor: pointer;
  background: transparent; border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-soft); transition: color .15s, border-color .15s;
}
.bkc-le-reset:hover { color: var(--fire-600); border-color: rgba(249,115,22,0.5); }
@media (max-width: 700px) {
  .bkc-line-edit { margin-left: 16px; max-width: none; }
  .bkc-le-grid { grid-template-columns: 1fr; gap: 16px; }   /* stack: Beregningsgrunnlag then Justering */
  .bkc-le-control { flex-wrap: wrap; }
  .bkc-le-control .bkc-assume-slider { flex: 1 1 100%; }
  .bkc-le-mult { min-width: 0; text-align: left; }
  .bkc-le-reset { width: 100%; text-align: center; }
}
.bkc-le-impact {
  margin: 0; font-family: var(--mono); font-size: 12px;
  color: var(--fire-600); font-weight: 600;
}

/* —— Method architecture P1 (BKC-METHOD-P1-UI-SHELL) — "Regnestykke" under Juster —— */
.bkc-method {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--navy-200);
  display: flex; flex-direction: column; gap: 10px;
}
.bkc-method-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bkc-method-eyebrow { font-size: var(--bkc-text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fire-600); }
.bkc-method-illus { font-size: 11px; color: var(--ink-quiet); font-style: italic; }
.bkc-method-formula { margin: 0; font-size: var(--bkc-text-secondary); line-height: 1.45; color: var(--ink); font-weight: 600; max-width: 80ch; }
/* three clear layers: A Dagens modellverdi · B Regnestykke · C Påvirkbar andel */
.bkc-method-layer { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--navy-100); }
.bkc-method-layer:first-of-type { border-top: 0; padding-top: 0; }
.bkc-method-layer-k { font-size: var(--bkc-text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); }
.bkc-method-layer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bkc-method-layer--current { background: var(--paper-2); border: 1px solid var(--navy-100); border-radius: var(--bkc-r-control); padding: 12px 14px; border-top: 0; }
.bkc-method-current-v { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bkc-method-layer-note { margin: 0; font-size: var(--bkc-text-note); line-height: 1.45; color: var(--ink-soft); }
.bkc-method-field-note { grid-column: 1 / -1; font-size: 11px; color: var(--ink-quiet); }
.bkc-method-pending {
  margin: 0; font-size: var(--bkc-text-note); line-height: 1.5; color: var(--ink-soft);
  background: var(--paper-2); border: 1px dashed var(--navy-200); border-radius: var(--bkc-r-control); padding: 10px 12px;
}
.bkc-method-fields { display: flex; flex-direction: column; gap: 8px; }
.bkc-method-field { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: 10px; }
.bkc-method-field-lab { font-size: var(--bkc-text-note); color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bkc-method-chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-quiet); background: var(--paper-2); border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-chip); padding: 1px 6px; white-space: nowrap;
}
.bkc-method-input {
  width: 100%; font-family: var(--mono); font-size: 13px; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  background: #fff; text-align: right;
}
.bkc-method-input:focus { outline: none; border-color: var(--fire-500); }
.bkc-method-locked { font-size: 13px; color: var(--ink); text-align: right; display: block; }
.bkc-method-results {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper-2); border: 1px solid var(--navy-100); border-radius: var(--bkc-r-control); padding: 10px 12px;
}
.bkc-method-result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bkc-method-result-k { font-size: var(--bkc-text-note); color: var(--ink-soft); }
.bkc-method-sub-v { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bkc-method-adr-v { font-size: 13px; color: var(--fire-600); white-space: nowrap; }
.bkc-method-expl { margin: 0; font-size: var(--bkc-text-note); line-height: 1.5; color: var(--ink-soft); max-width: 80ch; }
.bkc-method-src { font-size: var(--bkc-text-label); letter-spacing: 0.04em; color: var(--ink-quiet); margin: 0; }
.bkc-method-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }
.bkc-method-link {
  appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--fire-600);
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.bkc-method-link:hover, .bkc-method-link.is-on { border-bottom-color: var(--fire-500); }
/* Level 2 detail */
.bkc-method-detail, .bkc-method-feedback {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 6px; padding: 12px; border: 1px solid var(--navy-100); border-radius: var(--bkc-r-control); background: #fff;
}
.bkc-method-sub-eyebrow { font-size: var(--bkc-text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); margin: 0; }
.bkc-method-part { display: flex; flex-direction: column; gap: 2px; }
.bkc-method-part-lab { font-size: var(--bkc-text-note); font-weight: 600; color: var(--ink); }
.bkc-method-part-expr { font-family: var(--mono); font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.bkc-method-assume { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; align-items: baseline; }
.bkc-method-assume-lab { font-size: var(--bkc-text-note); color: var(--ink); }
.bkc-method-assume-val { font-size: var(--bkc-text-note); color: var(--ink-soft); }
.bkc-method-assume-type { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-quiet); }
.bkc-method-risk { margin: 2px 0 0; font-size: var(--bkc-text-note); line-height: 1.5; color: var(--fire-600); }
/* tab switch: Beregningsgrunnlag | Send innspill */
.bkc-method-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--navy-100); }
.bkc-method-tab {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  padding: 7px 12px 9px; margin-bottom: -1px;
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink-quiet);
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.bkc-method-tab:hover { color: var(--ink-soft); }
.bkc-method-tab.is-on { color: var(--ink); border-bottom-color: var(--fire-500); }
/* logical-chain line (full breakdown, e.g. "51 938 × 4 mannskap × 2 timer × kr 2 000") */
.bkc-method-chain { margin: 0 0 2px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
/* Feedback shell */
.bkc-method-fb-intro { margin: 0; font-size: var(--bkc-text-note); line-height: 1.5; color: var(--ink-soft); }
.bkc-method-fb-section { font-size: var(--bkc-text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); margin: 4px 0 0; }
.bkc-method-fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bkc-method-fb-field { display: flex; flex-direction: column; gap: 3px; }
.bkc-method-fb-field.is-full { grid-column: 1 / -1; }
.bkc-method-fb-lab { font-size: var(--bkc-text-note); color: var(--ink-soft); }
.bkc-method-fb-req { color: var(--fire-600); font-weight: 700; }
.bkc-method-fb-input {
  width: 100%; font-family: var(--body); font-size: 13px; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control); background: #fff;
}
.bkc-method-fb-input:focus { outline: none; border-color: var(--fire-500); }
.bkc-method-fb-input[readonly] { background: var(--paper-2); color: var(--ink-soft); }
.bkc-method-fb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.bkc-method-fb-send {
  appearance: none; cursor: not-allowed; opacity: 0.6;
  background: var(--paper-2); border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  padding: 7px 14px; font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink-soft);
}
.bkc-method-fb-note { font-size: var(--bkc-text-label); letter-spacing: 0.03em; color: var(--ink-quiet); margin: 0; }
@media (max-width: 700px) {
  .bkc-method-field { grid-template-columns: 1fr; gap: 4px; }
  .bkc-method-input { text-align: left; }
  .bkc-method-assume { grid-template-columns: 1fr; gap: 2px; }
  .bkc-method-fb-grid { grid-template-columns: 1fr; }
}

/* —— scenario impact summary near the main total (Pass 1.8h) —— */
.bkc-impact {
  margin-top: 16px; max-width: 440px;
  background: rgba(249,115,22,0.06);
  border: 1px solid rgba(249,115,22,0.26);
  border-left: 3px solid var(--fire-500);
  border-radius: var(--bkc-r-card); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.bkc-impact-yours { display: flex; flex-direction: column; gap: 2px; }
.bkc-impact-yours .bkc-impact-k {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fire-600);
}
.bkc-impact-yours-v {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-xl); line-height: 1.04; color: var(--fire-600);
}
.bkc-impact-meta { display: flex; flex-direction: column; gap: 5px; }
.bkc-impact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.bkc-impact-k { font-size: 13px; color: var(--ink-soft); }
.bkc-impact-v { font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.bkc-impact-v.is-delta { color: var(--fire-600); font-weight: 600; }
.bkc-impact-reset {
  align-self: flex-start; appearance: none; cursor: pointer;
  background: #fff; border: 1px solid rgba(249,115,22,0.4); border-radius: var(--bkc-r-control);
  padding: 8px 14px; font-family: var(--display); font-weight: 500; font-size: 13px;
  color: var(--fire-600); transition: background .15s, border-color .15s;
}
.bkc-impact-reset:hover { background: rgba(249,115,22,0.08); border-color: var(--fire-500); }

/* stronger but calm feedback on adjusted rows (orange left accent + faint tint) */
.bkc-line.is-adjusted { box-shadow: inset 2px 0 0 var(--fire-500); background: rgba(249,115,22,0.035); }
.bkc-sedk-line.is-adjusted { box-shadow: inset 2px 0 0 var(--fire-500); background: rgba(249,115,22,0.035); }
.bkc-bar-row.is-adjusted { box-shadow: inset 2px 0 0 var(--fire-500); padding-left: 8px; border-radius: 4px; }

@media (max-width: 700px) {
  .bkc-impact { max-width: none; }
  .bkc-impact-row { gap: 10px; }
}

/* —— persistent live scenario layer (Pass 1.8i) —— */
.bkc-dock { /* wrapper only; the card / bar position themselves (fixed) */ }
@media (min-width: 901px) { .bkc-dock-mobile { display: none; } }
@media (max-width: 900px) { .bkc-dock-desktop { display: none; } }

/* desktop "Ditt scenario" status bar — compact, calm, fixed bottom-centre (line-edit companion).
   Centred via left/right + margin auto (no transform) so the entrance animation can use transform. */
.bkc-scenbar {
  position: fixed; left: 0; right: 0; bottom: 16px; margin: 0 auto; z-index: 80;
  width: fit-content; max-width: calc(100vw - 48px);
  display: inline-flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--navy-100);
  border-left: 3px solid var(--fire-500); border-radius: var(--bkc-r-control);
  padding: 10px 12px 10px 18px;
  box-shadow: 0 10px 28px -14px rgba(17,24,39,0.30);
}
.bkc-scenbar-k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fire-600); }
.bkc-scenbar-v { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; }
.bkc-scenbar-delta { font-family: var(--mono); font-size: 13px; color: var(--fire-600); font-weight: 600; white-space: nowrap; }
.bkc-scenbar-count { font-family: var(--mono); font-size: 11px; color: var(--ink-quiet); white-space: nowrap; }
.bkc-scenbar-reset {
  appearance: none; cursor: pointer; white-space: nowrap;
  background: #fff; border: 1px solid var(--navy-200); border-radius: var(--bkc-r-control);
  padding: 7px 14px; font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink-soft);
  transition: color .15s, border-color .15s;
}
.bkc-scenbar-reset:hover { color: var(--fire-600); border-color: rgba(249,115,22,0.5); }

/* desktop result card */
.bkc-dock-card {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 290px; max-width: calc(100vw - 48px);
  background: var(--paper, #fff); border: 1px solid rgba(249,115,22,0.30);
  border-left: 3px solid var(--fire-500);
  border-radius: var(--bkc-r-card); padding: 16px 18px 18px;
  box-shadow: 0 12px 30px -12px rgba(17,24,39,0.28);
  display: flex; flex-direction: column; gap: 9px;
}
.bkc-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bkc-dock-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fire-600);
}
.bkc-dock-min {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  width: 24px; height: 24px; border-radius: 6px; line-height: 1;
  font-size: 18px; color: var(--ink-quiet);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.bkc-dock-min:hover { background: rgba(249,115,22,0.08); color: var(--fire-600); }
.bkc-dock-dominant {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-lg); line-height: 1.04; color: var(--fire-600);
}
.bkc-dock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bkc-dock-k { font-size: 12.5px; color: var(--ink-soft); }
.bkc-dock-v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.bkc-dock-v.is-delta { color: var(--fire-600); font-weight: 600; }
.bkc-dock-count {
  margin: 2px 0 0; font-family: var(--mono); font-size: 11px; color: var(--ink-quiet);
}
.bkc-dock-help { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.bkc-dock-reset {
  margin-top: 4px; align-self: flex-start; appearance: none; cursor: pointer;
  background: #fff; border: 1px solid rgba(249,115,22,0.4); border-radius: var(--bkc-r-control);
  padding: 8px 14px; font-family: var(--display); font-weight: 500; font-size: 13px;
  color: var(--fire-600); transition: background .15s, border-color .15s;
}
.bkc-dock-reset:hover { background: rgba(249,115,22,0.08); border-color: var(--fire-500); }

/* desktop / mobile minimized pill */
.bkc-dock-pill, .bkc-mbar-pill {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--fire-600); color: #fff; border: 0;
  border-radius: 999px; padding: 10px 16px;
  box-shadow: 0 10px 24px -10px rgba(249,115,22,0.6);
  font-family: var(--display); font-size: 13px; font-weight: 500;
}
.bkc-dock-pill:hover, .bkc-mbar-pill:hover { background: var(--fire-700, #c2410c); }
.bkc-pill-k { opacity: 0.85; }
.bkc-pill-v { font-weight: 700; }

/* mobile sticky bottom bar */
.bkc-mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--paper, #fff); border-top: 1px solid rgba(249,115,22,0.30);
  box-shadow: 0 -8px 24px -14px rgba(17,24,39,0.3);
}
.bkc-mbar-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bkc-mbar-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fire-600);
}
.bkc-mbar-dom {
  font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--fire-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bkc-mbar-delta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.bkc-mbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bkc-mbar-reset {
  appearance: none; cursor: pointer; white-space: nowrap;
  background: #fff; border: 1px solid rgba(249,115,22,0.45); border-radius: var(--bkc-r-control);
  padding: 8px 12px; font-family: var(--display); font-size: 12.5px; font-weight: 500; color: var(--fire-600);
}
.bkc-mbar-min {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  width: 30px; height: 30px; border-radius: var(--bkc-r-control); font-size: 18px; color: var(--ink-quiet);
  display: flex; align-items: center; justify-content: center;
}
.bkc-mbar-min:hover { background: rgba(249,115,22,0.08); color: var(--fire-600); }
/* keep the bar from covering the last calculator content */
@media (max-width: 900px) { .bkc.bkc-has-mbar .bkc-sections { padding-bottom: 92px; } }
/* keep the desktop scenario bar from covering the last content */
@media (min-width: 901px) { .bkc.bkc-has-scenbar .bkc-sections { padding-bottom: 84px; } }

/* closing recap (normal flow) */
.bkc-recap {
  margin: 4px auto 0; max-width: 460px;
  background: rgba(249,115,22,0.045); border: 1px solid rgba(249,115,22,0.20);
  border-radius: var(--bkc-r-card); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.bkc-recap-title {
  margin: 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet);
}
.bkc-recap-yours-k { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fire-600); margin-top: 2px; }
.bkc-recap-dominant {
  font-family: var(--display); font-weight: 700; font-size: var(--bkc-num-md);
  line-height: 1.04; color: var(--fire-600);
}
.bkc-recap-count { margin: 2px 0 0; font-family: var(--mono); font-size: 11px; color: var(--ink-quiet); }
.bkc-recap-rows { display: flex; flex-direction: column; gap: 5px; }
.bkc-recap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.bkc-recap-k { font-size: 13px; color: var(--ink-soft); }
.bkc-recap-v { font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.bkc-recap-v.is-delta { color: var(--fire-600); font-weight: 600; }

/* calm entrance — only on first appearance (.bkc-dock--anim) and only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .bkc-dock--anim .bkc-dock-card, .bkc-dock--anim .bkc-mbar,
  .bkc-dock--anim .bkc-dock-pill, .bkc-dock--anim .bkc-mbar-pill,
  .bkc-dock--anim .bkc-scenbar { animation: bkc-dock-in .26s ease-out both; }
  @keyframes bkc-dock-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* D3 · legend */
.bkc-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 18px 24px;
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
}
.bkc-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft);
}
.bkc-legend-item .swatch {
  width: 10px; height: 10px; border-radius: 3px;
}
.bkc-legend-item .swatch.public { background: var(--bkc-green); }
.bkc-legend-item .swatch.industry { background: var(--bkc-amber); }
.bkc-legend-item .swatch.proxy { background: var(--bkc-orange); }
.bkc-legend-item .swatch.assumption { background: var(--bkc-gray); }

/* —— buckets / modules / lines —— */
.bkc-bucket {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card);
  padding: 22px 24px;
}
.bkc-bucket-head {
  display: flex; align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--navy-100);
  margin-bottom: 14px;
}
.bkc-bucket-head h4 {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; margin: 0;
  color: var(--ink);
}
.bkc-bucket-head .b-sum {
  font-family: var(--mono); font-size: 14px;
  color: var(--ink-soft);
  margin-left: auto;
}
.bkc-bucket-head .b-pct {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}
.bkc-bucket-desc {
  font-size: 13px; color: var(--ink-quiet);
  margin: -10px 0 14px;
  max-width: 64ch;
  line-height: 1.5;
}

.bkc-module {
  border-top: 1px solid var(--navy-100);
  padding: 14px 0;
}
.bkc-module:first-of-type { border-top: 0; padding-top: 0; }
.bkc-mod-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 6px;
}
.bkc-mod-head .mod-num {
  font-family: var(--mono); font-size: 11px;
  color: var(--fire-600);
  letter-spacing: 0.08em;
  min-width: 30px;
}
.bkc-mod-head .mod-name {
  font-family: var(--display); font-weight: 600;
  font-size: 15px; color: var(--ink);
}
.bkc-mod-head .mod-sum {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-soft);
  margin-left: auto;
}
.bkc-mod-desc {
  font-size: 13px; color: var(--ink-quiet);
  margin: 0 0 10px 44px;
  max-width: 60ch;
  line-height: 1.5;
}
.bkc-toggle {
  appearance: none;
  width: 32px; height: 18px;
  border: 1px solid var(--navy-200);
  border-radius: var(--bkc-r-chip);   /* flat switch, not a pill (was 999px) — global toggle style */
  background: var(--paper-2);
  position: relative;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.bkc-toggle::after {
  content: ''; position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px; border-radius: var(--bkc-r-chip);   /* squared knob to match the flat track */
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: transform .15s;
}
.bkc-toggle.is-on {
  background: var(--bkc-green-bg);
  border-color: var(--bkc-green-line);
}
.bkc-toggle.is-on::after {
  transform: translateX(13px);
  background: var(--bkc-green);
}

.bkc-line {
  display: grid;
  /* name | value | badge — the leading L-code column was removed (Tema 6); line.id is internal */
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0 10px 44px;
  border-top: 1px dashed var(--navy-100);
  font-size: 14px;
}
.bkc-line:first-child { border-top: 0; }
.bkc-line.dim {
  opacity: 0.78;
}
.bkc-line.is-off {
  opacity: 0.35;
  text-decoration: line-through;
}
.bkc-line .l-name {
  color: var(--ink-soft);
}
.bkc-line .l-name strong { color: var(--ink); font-weight: 500; }
.bkc-line .l-val {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.bkc-line .l-val.l-count {
  color: var(--ink-soft);
  font-style: italic;
}

/* badge */
.bkc-badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: var(--bkc-r-chip);
  border: 1px solid transparent;
  white-space: nowrap;
}
.bkc-badge.public,
.bkc-badge.bkc-green-bg {
  background: var(--bkc-green-bg);
  color: var(--bkc-green);
  border-color: var(--bkc-green-line);
}
.bkc-badge.industry,
.bkc-badge.bkc-amber-bg {
  background: var(--bkc-amber-bg);
  color: var(--bkc-amber);
  border-color: var(--bkc-amber-line);
}
.bkc-badge.proxy,
.bkc-badge.bkc-orange-bg {
  background: var(--bkc-orange-bg);
  color: var(--bkc-orange);
  border-color: var(--bkc-orange-line);
}
.bkc-badge.assumption,
.bkc-badge.bkc-gray-bg {
  background: var(--bkc-gray-bg);
  color: var(--bkc-gray);
  border-color: var(--bkc-gray-line);
}

/* Beregningsgrunnlag (per-line basis) — no longer a separate popover; rendered inside the line
   editor's basis column (Tema 9C). The standalone "Basis" button + its open/close state were removed. */
.bkc-basis {
  padding: 14px 16px;
  background: var(--paper-2);
  border-left: 2px solid var(--fire-500);
  border-radius: var(--bkc-r-control);
  font-size: 13px; line-height: 1.55;
  color: var(--ink-soft);
}
/* "Beregningsgrunnlag" card heading + lead note (Tema 8) */
.bkc-basis-title {
  margin: 0 0 8px; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.bkc-basis-note { margin: 0; font-size: var(--bkc-text-secondary); line-height: 1.55; color: var(--ink-soft); }
.bkc-basis-inner dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 10px 0 0;
}
.bkc-basis-inner dt {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}
.bkc-basis-inner dd {
  margin: 0;
  font-size: 13px; color: var(--ink-soft);
}

/* uerstattelig — notsum strip */
.bkc-bucket.bkc-uerstattelig { background: var(--navy-950); color: #fff; }
.bkc-bucket.bkc-uerstattelig .bkc-bucket-head h4 { color: #fff; }
.bkc-bucket.bkc-uerstattelig .bkc-bucket-head .b-sum { color: rgba(255,255,255,0.75); }
.bkc-bucket.bkc-uerstattelig .bkc-bucket-desc { color: rgba(255,255,255,0.6); }
.bkc-bucket.bkc-uerstattelig .bkc-mod-head .mod-name { color: #fff; }
.bkc-bucket.bkc-uerstattelig .bkc-mod-head .mod-num { color: var(--fire-300); }
.bkc-bucket.bkc-uerstattelig .bkc-mod-desc { color: rgba(255,255,255,0.55); }
.bkc-bucket.bkc-uerstattelig .bkc-module { border-top-color: rgba(255,255,255,0.12); }
.bkc-bucket.bkc-uerstattelig .bkc-line { border-top-color: rgba(255,255,255,0.12); }
.bkc-bucket.bkc-uerstattelig .bkc-line .l-val { color: rgba(255,255,255,0.85); }
.bkc-bucket.bkc-uerstattelig .bkc-line .l-name strong { color: #fff; }
.bkc-bucket.bkc-uerstattelig .bkc-line .l-name { color: rgba(255,255,255,0.7); }
/* (Tema 9C) the Beregningsgrunnlag now renders inside the white line editor, so it keeps the normal
   light styling even on the dark uerstattelig card — no dark-card basis overrides needed. */

/* —— human-cost section: "Uerstattelig — liv, helse og dyr" (human-first, dark) —— */
.bkc-humancost .bkc-bucket-desc { max-width: 72ch; }
.bkc-hc-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px; align-items: start; margin-top: 4px;
}
.bkc-hc-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--bkc-r-card);
  padding: 18px 20px;
}
.bkc-hc-eyebrow {
  display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fire-300); margin-bottom: 8px;
}
.bkc-hc-lead {
  font-family: var(--display); font-weight: 600;
  font-size: 17px; line-height: 1.4; color: #fff; margin: 0; max-width: 46ch;
}
.bkc-hc-world .bkc-hc-lead { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.92); }
.bkc-hc-history { margin-top: 16px; }
.bkc-hc-history-title {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin: 0 0 8px;
}
.bkc-hc-bars { display: flex; flex-direction: column; gap: 5px; }
.bkc-hc-bar-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; }
.bkc-hc-bar-year { font-size: 11px; color: rgba(255,255,255,0.55); }
.bkc-hc-bar-track {
  height: 7px; border-radius: var(--bkc-r-chip);
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.bkc-hc-bar-fill { height: 100%; border-radius: var(--bkc-r-chip); background: rgba(255,255,255,0.32); }
.bkc-hc-bar-row.is-latest .bkc-hc-bar-fill { background: var(--fire-500); }
.bkc-hc-bar-val { font-size: 12px; color: rgba(255,255,255,0.9); white-space: nowrap; }
.bkc-hc-bar-row.is-latest .bkc-hc-bar-val { color: #fff; font-weight: 600; }
.bkc-hc-status { color: var(--fire-300); }
.bkc-hc-src { font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); margin: 14px 0 0; }
.bkc-hc-def { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 4px 0 0; max-width: 60ch; }
.bkc-hc-note { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.5); margin: 6px 0 0; max-width: 60ch; }
.bkc-hc-animal { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.65); margin: 12px 0 0; }
.bkc-hc-support { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 16px 0 0; max-width: 72ch; }
.bkc-hc-method { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.45); margin: 10px 0 0; max-width: 72ch; }
@media (max-width: 700px) {
  .bkc-hc-grid { grid-template-columns: 1fr; }
}
.bkc-notsum {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fire-300);
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(249,115,22,0.18);
  border-radius: var(--bkc-r-chip);
  white-space: nowrap;
}

/* D4 · method */
.bkc-method {
  background: #fff;
  border: 1px solid var(--navy-100);
  border-radius: var(--bkc-r-card);
  padding: 22px 24px;
}
.bkc-method .eyebrow { margin-bottom: 8px; }
.bkc-method h4 {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; line-height: 1.3;
  margin: 0 0 10px;
  color: var(--ink);
  max-width: 56ch;
}
.bkc-method p {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 10px;
  max-width: 70ch;
}
.bkc-method .sources {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  margin-top: 10px;
}

/* basis tag on distribution rows (SE/DK) — small, calm, non-cluttering */
.bkc-basis-tag {
  display: inline-block; margin-left: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: var(--bkc-r-chip);
  vertical-align: middle; white-space: nowrap;
  border: 1px solid var(--navy-100);
  color: var(--ink-soft); background: var(--paper-2);
}
.bkc-basis-tag.is-lokal { color: var(--bkc-green); border-color: var(--bkc-green-line); background: var(--bkc-green-bg); }
.bkc-basis-tag.is-modell { color: var(--ink-soft); }

/* SE/DK detail — structured "Grunnlag og beregning" view (reuses the NO card/row grammar) */
.bkc-sedk-detail { display: flex; flex-direction: column; gap: 18px; }
.bkc-sedk-detail > .eyebrow { margin: 0; }
.bkc-sedk-card .bkc-bucket-head { margin-bottom: 8px; }
.bkc-sedk-anslag-card .bkc-bucket-head { align-items: center; padding-bottom: 12px; }
.bkc-sedk-anslag-right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.bkc-sedk-anslag-val {
  font-family: var(--display); font-weight: 700;
  font-size: var(--bkc-num-sm); color: var(--fire-600);
}
.bkc-sedk-sub { font-size: 13px; color: var(--ink-quiet); margin: 0; }
.bkc-sedk-explain { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; max-width: 70ch; }
.bkc-sedk-rows { display: flex; flex-direction: column; }
.bkc-sedk-line {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 11px 0;
  border-top: 1px dashed var(--navy-100);
}
.bkc-sedk-line:first-child { border-top: 0; }
.bkc-sedk-l-namewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bkc-sedk-l-name { font-size: 14px; color: var(--ink); }
.bkc-sedk-l-name strong { font-weight: 600; }
.bkc-sedk-l-sub { font-size: 11.5px; color: var(--ink-quiet); }
.bkc-sedk-l-val {
  font-family: var(--mono); font-size: 14px; color: var(--ink-soft);
  white-space: nowrap; text-align: right;
}
.bkc-sedk-l-val.is-note { font-family: var(--body); font-size: 13px; color: var(--ink-quiet); font-style: italic; }
.bkc-sedk-l-share { color: var(--ink-quiet); font-size: 11px; }
.bkc-sedk-l-tag { display: flex; justify-content: flex-end; }
.bkc-sedk-l-tag .bkc-basis-tag { margin-left: 0; }
/* SE/DK per-row Basis explanation (Tema 6) — NO-parity "how this number was derived": a short note
   + Kilde/Grunnlag · Modellbruk · Betaler. Mirrors the NO basis surface (paper inset, fire accent). */
.bkc-sedk-l-basis {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 2px solid var(--fire-500);
  border-radius: var(--bkc-r-control);
}
.bkc-sedk-l-basis-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }
.bkc-sedk-l-basis-fields {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 14px; margin: 10px 0 0;
}
.bkc-sedk-l-basis-fields dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-quiet); }
.bkc-sedk-l-basis-fields dd { margin: 0; font-size: 13px; color: var(--ink-soft); }
.bkc-sedk-kilder { margin: 0; }
@media (max-width: 700px) {
  .bkc-sedk-line { grid-template-columns: 1fr auto; }
  .bkc-sedk-l-tag { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; }
}
@media (max-width: 560px) {
  /* anslag head stacks: title on line 1, value + tag on a full-width line 2 (no squeezed wrap) */
  .bkc-sedk-anslag-card .bkc-bucket-head { flex-wrap: wrap; }
  .bkc-sedk-anslag-right { margin-left: 0; margin-top: 8px; width: 100%; }
}

/* foot */
.bkc-foot {
  border-top: 1px solid var(--navy-100);
  padding: 18px 28px;
  background: var(--paper-2);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between;
}

/* —— preliminary state for SE/DK —— */
.bkc.is-preliminary .bkc-shell {
  /* preliminary still renders, but visually softens */
}
.bkc.is-preliminary .bkc-expanded {
  /* Pål's note: SE/DK has bottom-up data now but status=preliminary. Show with a regnote at top. */
}

/* —— responsive degrade —— */
@media (max-width: 920px) {
  .bkc-head { padding: 18px 20px 16px; }
  .bkc-body { padding: 22px 20px; }
  .bkc-di-breaks { grid-template-columns: 1fr; }
  /* single column: no equal-height pairing, so drop the reserved footer band to avoid dead space.
     The left-card spacer is removed and the narrative collapses to its active text's natural height. */
  .bkc-card-controls > .bkc-payer-narrative.is-spacer { display: none; }
  .bkc-payer-narrative p:not(.is-on) { display: none; }
  .bkc-line {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .bkc-line .l-val { grid-column: 2; grid-row: 1; }
  .bkc-line .bkc-badge { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .bkc-line-actions { margin-left: 0; }
  /* bucket head wraps so the sum + "aldri i økonomisk total" tag never overflow on narrow screens */
  .bkc-bucket-head { flex-wrap: wrap; }
}