/* ============================================================
   Seiva Savings Calculator — module styles
   All rules scoped under .seiva-calc so nothing leaks into the
   host page. Design tokens live on the container and are
   overridden per-instance by the Theme fields (see module.html).
   ============================================================ */

.seiva-calc {
  /* token fallbacks — the Theme fields override these inline */
  --color-primary-50: #004D33;
  --color-primary-40: #00875A;
  --color-primary-30: #0ACC8B;
  --color-primary-20: #C5E5DB;
  --color-primary-10: #E1F5EE;
  --color-primary-05: #F2FAF7;
  --color-accent-40: #5F68D3;
  --color-text: #141414;
  --color-text-muted: #424242;
  --color-text-subtle: #888888;
  --color-neutral-20: #E0E0E0;
  --color-neutral-10: #F5F5F5;
  --sv-bg: #FFFFFF;
  --sv-radius: 16px;
  --sv-font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sv-font-display: "Besley", Georgia, "Times New Roman", serif;
  --sv-shadow-focus: 0 0 0 3px rgba(95, 104, 211, 0.35);

  /* ---- the module's own unit --------------------------------------------
     Everything below is sized in --u, never in rem. A host theme owns the
     root font-size (Visma's is 10px), and rem-sized modules dropped into it
     shrink to 62.5 %. --u instead follows the calculator's own width:
     14px on phones, 16px at the 78-unit content cap, 18px on a full-bleed
     desktop band. Text, controls, icons, radii and spacing all ride on it,
     so the calculator keeps its proportions at every size.

     The viewport-based value here is the fallback; .sv-band is a size
     container and its children redefine --u from the band's own width
     where container query units are supported (see below). */
  --u: calc(clamp(14px, 10px + 0.48vw, 18px) * var(--sv-scale, 1));
  /* Theme -> Text scale multiplies --u; the three sizes below are the
     defaults that Theme -> Headline / Eyebrow / Intro size override
     (module.html sets them in --u, so they stay responsive) */
  --sv-h1: calc(var(--u) * 3);
  --sv-eyebrow: calc(var(--u) * 0.82);
  --sv-intro: calc(var(--u) * 1.125);
  font-size: var(--u);
  font-family: var(--sv-font-body);
  color: var(--color-text);
  line-height: 1.5;
  box-sizing: border-box;
}
.seiva-calc *, .seiva-calc *::before, .seiva-calc *::after { box-sizing: border-box; }
.seiva-calc svg { flex: none; }
/* an optional text whose box the editor cleared is removed, not left as an
   empty pill or paragraph; the UA's [hidden] loses to our display: flex */
.seiva-calc [hidden] { display: none !important; }
/* a select still on its placeholder reads as a prompt, not a value */
.sv-input.is-placeholder { color: var(--color-text-subtle); }
.sv-band { container-type: inline-size; }
@supports (width: 1cqi) {
  .sv-band > * { --u: calc(clamp(14px, 10px + 0.48cqi, 18px) * var(--sv-scale, 1)); }
}

/* icons: the SVGs carry width/height attributes as a no-CSS fallback;
   these rules are what actually size them */
.sv-card__ic svg { width: calc(var(--u) * 1.375); height: calc(var(--u) * 1.375); }
.sv-card__chk svg { width: calc(var(--u) * 0.8125); height: calc(var(--u) * 0.8125); }
.sv-cost .stk svg { width: calc(var(--u) * 0.75); height: calc(var(--u) * 0.75); opacity: .7; }
.sv-how__chev svg { width: calc(var(--u) * 1.375); height: calc(var(--u) * 1.375); }
.sv-ico-doc { width: calc(var(--u) * 4); height: calc(var(--u) * 5); }
.sv-ico-badge { width: var(--u); height: var(--u); }

/* ---- data sheet status -------------------------------------------------
   The workbook is the only source of content, so nothing is shown until it
   loads. Hiding rather than dimming avoids a flash of Swedish on a Danish or
   Norwegian page, since the field defaults are the Swedish master. */
.sv-status { display: none; }
.seiva-calc.is-sv-loading > .sv-band,
.seiva-calc.is-sv-loading > .sv-bar,
.seiva-calc.is-sv-blocked > .sv-band,
.seiva-calc.is-sv-blocked > .sv-bar { visibility: hidden; }
.seiva-calc.is-sv-loading .sv-status,
.seiva-calc.is-sv-blocked .sv-status { display: flex; }
.sv-status { flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.5); min-height: calc(var(--u) * 18); padding: calc(var(--u) * 2) calc(var(--u) * 1.25); text-align: center; font-family: var(--sv-font-body); color: var(--color-text-muted); }
.sv-status.is-error { gap: calc(var(--u) * 0.35); }
.sv-status.is-error strong { font-size: calc(var(--u) * 1); color: var(--color-text); }
.sv-status.is-error span { font-size: calc(var(--u) * 0.875); max-width: calc(var(--u) * 34); line-height: 1.5; }
.sv-spin { width: calc(var(--u) * 1.75); height: calc(var(--u) * 1.75); border: 2px solid var(--color-primary-20); border-top-color: var(--color-primary-40); border-radius: 50%; animation: sv-spin .7s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sv-spin { animation-duration: 2.4s; } }

/* ---- the content column -------------------------------------------------
   The calculator should sit exactly where the block above it sits. Rather
   than reading the host theme's CSS variables (a var() that resolves to
   something calc() can't use makes the WHOLE declaration invalid, and the
   var() fallback does not catch that — only an undefined variable does),
   module.js measures the page: the nearest theme module's content box gives
   --sv-col (its width) and --sv-gutter (its distance from the viewport
   edge), and its wrapper's padding-top gives --sv-vpad. Whatever the theme
   does at any breakpoint — fixed gutters, a centred column, an expanded
   block — the calculator copies the result.

   Without a theme module to measure (a bare test page, another theme) the
   module's own cap and gutters apply. */
.sv-band { background: var(--color-primary-05); border-top: 1px solid var(--color-primary-10); border-bottom: 1px solid var(--color-primary-10); padding: var(--sv-vpad, calc(var(--u) * 3.5)) 0; }
.sv-wrap {
  max-width: calc(var(--sv-col, calc(var(--u) * 75)) + 2 * var(--sv-gutter, calc(var(--u) * 1.5)));
  margin: 0 auto;
  padding: 0 var(--sv-gutter, calc(var(--u) * 1.5));
}

.sv-head { margin-bottom: calc(var(--u) * 2.5); max-width: calc(var(--u) * 46); }
.sv-head .sv-logo { max-height: calc(var(--u) * 2); width: auto; margin-bottom: calc(var(--u) * 1.5); display: block; }
.sv-eyebrow { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.4375); font-weight: 600; font-size: var(--sv-eyebrow); padding: calc(var(--u) * 0.4375) calc(var(--u) * 0.875); border-radius: 9999px; margin-bottom: calc(var(--u) * 1); text-transform: uppercase; letter-spacing: .08em; background: var(--color-primary-10); color: var(--color-primary-50); }
.sv-h1 { font-family: var(--sv-font-display); font-weight: 500; font-size: clamp(calc(var(--sv-h1) * 0.62), calc(var(--sv-h1) * 0.47) + 2.2vw, var(--sv-h1)); line-height: 1.1; letter-spacing: -1px; margin: 0 0 calc(var(--u) * 1); }
.sv-intro { font-size: var(--sv-intro); line-height: 1.7; color: var(--color-text-muted); }
.sv-intro p { margin: 0; }

.sv-calc { display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 2.5); }
.sv-form, .sv-result { min-width: 0; }
@media (min-width: 1024px) {
  .sv-calc { grid-template-columns: calc(var(--u) * 31.375) minmax(calc(var(--u) * 26.25), 1fr); grid-auto-rows: 1fr; align-items: stretch; }
}
.sv-form { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.sv-quals { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); }
.sv-q label { display: block; font-family: var(--sv-font-display); font-weight: 500; font-size: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 0.5); }
.sv-input { width: 100%; padding: calc(var(--u) * 0.875) calc(var(--u) * 1); border: 1px solid var(--color-primary-20); border-radius: calc(var(--u) * 0.75); font-family: var(--sv-font-body); font-size: calc(var(--u) * 0.95); color: var(--color-text); background: #fff; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300875A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right calc(var(--u) * 1) center; }

.sv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.75); }
.sv-card { display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 0.75); min-height: calc(var(--u) * 6.5); padding: calc(var(--u) * 1); border-radius: var(--sv-radius); background: #fff; border: 1px solid var(--color-primary-20); cursor: pointer; text-align: left; font-family: var(--sv-font-body); transition: border-color .16s, box-shadow .16s; }
.sv-card__ic { color: var(--color-text-subtle); transition: color .16s; }
.sv-card__name { font-weight: 600; font-size: calc(var(--u) * 0.95); color: var(--color-text-muted); transition: color .16s; }
.sv-card:hover { border-color: var(--color-primary-40); }
.sv-card.is-on { border-color: var(--color-primary-40); box-shadow: 0 calc(var(--u) * 0.3125) 2.5px -2px rgba(0,77,51,.06), 0 calc(var(--u) * 0.6875) calc(var(--u) * 0.5) calc(var(--u) * -0.375) rgba(0,77,51,.10), 0 1px 1.5px rgba(0,77,51,.12); }
.sv-card.is-on .sv-card__ic { color: var(--color-primary-40); }
.sv-card.is-on .sv-card__name { color: var(--color-text); }
.sv-card__top { display: flex; align-items: center; justify-content: space-between; }
.sv-card__chk { width: calc(var(--u) * 1.375); height: calc(var(--u) * 1.375); border-radius: 9999px; background: var(--color-primary-40); display: none; place-items: center; color: #fff; }
.sv-card.is-on .sv-card__chk { display: grid; }

.sv-result { position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; }
@media (min-width: 1024px) { .sv-result { position: sticky; top: calc(var(--sv-sticky, 0px) + 24px); } }
.sv-panel { display: flex; flex-direction: column; justify-content: space-between; flex: 1; background: var(--sv-bg); border: 1px solid var(--color-primary-20); border-radius: calc(var(--u) * 1.5); padding: calc(var(--u) * 2) calc(var(--u) * 1.75); box-shadow: 0 calc(var(--u) * 1.75) calc(var(--u) * 0.875) calc(var(--u) * -1.125) rgba(0,77,51,.06), 0 calc(var(--u) * 0.4375) calc(var(--u) * 0.4688) calc(var(--u) * -0.375) rgba(0,77,51,.07); }

.sv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--u) * 1.5) calc(var(--u) * 0.75) calc(var(--u) * 0.75); gap: calc(var(--u) * 0.375); }
.sv-empty h3 { font-family: var(--sv-font-display); font-weight: 500; font-size: calc(var(--u) * 1.5); color: var(--color-text); margin: calc(var(--u) * 0.625) 0 0; }
.sv-empty__p { font-size: calc(var(--u) * 0.95); color: var(--color-text-muted); line-height: 1.55; max-width: 34ch; }
.sv-empty__p p { margin: 0; }
.sv-empty__btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 1); background: var(--color-primary-50); color: #fff; border: none; border-radius: 9999px; font-family: var(--sv-font-body); font-weight: 700; font-size: calc(var(--u) * 1); padding: calc(var(--u) * 0.875) calc(var(--u) * 1.625); cursor: pointer; transition: background .16s; }
.sv-empty__btn:hover { background: var(--color-primary-40); }

.sv-full { display: flex; flex-direction: column; gap: calc(var(--u) * 1.25); }
.sv-kicker { font-size: calc(var(--u) * 0.875); font-weight: 600; color: var(--color-primary-50); margin: 0; }
.sv-pct { font-family: var(--sv-font-display); font-weight: 600; font-size: clamp(calc(var(--u) * 2.25), calc(var(--u) * 1.6) + 2.2vw, calc(var(--u) * 3.5)); line-height: 1; letter-spacing: -1.5px; color: var(--color-primary-40); margin: 0; }
.sv-pct .sv-kr { font-size: .4em; letter-spacing: 0; font-weight: 500; color: var(--color-primary-50); margin-left: .28em; }
.sv-note { font-size: calc(var(--u) * 0.8125); color: var(--color-text-muted); line-height: 1.5; }
.sv-note p { margin: 0; }

.sv-how { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.75); width: 100%; background: var(--color-primary-05); border: 1px solid var(--color-primary-10); border-radius: calc(var(--u) * 0.75); padding: calc(var(--u) * 1) calc(var(--u) * 1.125); cursor: pointer; font-family: var(--sv-font-body); transition: background .16s; }
.sv-how:hover { background: var(--color-primary-10); }
.sv-how__h { display: flex; align-items: center; gap: calc(var(--u) * 0.5); }
.sv-how__h b { font-size: calc(var(--u) * 0.875); font-weight: 700; color: var(--color-text); }
.sv-how__chev { color: var(--color-text-muted); transition: transform .26s ease; display: flex; }
.sv-how[aria-expanded="false"] .sv-how__chev { transform: rotate(-90deg); }
.sv-howbody { overflow: hidden; max-height: calc(var(--u) * 32.5); transition: max-height .3s ease, opacity .2s ease, margin .3s ease; opacity: 1; }
.sv-howbody.is-collapsed { max-height: 0; opacity: 0; margin-top: calc(var(--u) * -1.25); }
.sv-sum { background: var(--color-primary-05); border: 1px solid var(--color-primary-10); border-radius: calc(var(--u) * 0.75); padding: calc(var(--u) * 0.375) calc(var(--u) * 1.125) calc(var(--u) * 1); }
.sv-sumrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.6875) 0; border-top: 1px solid var(--color-primary-10); }
.sv-sumrow:first-child { border-top: none; }
.sv-sumrow .k { font-size: calc(var(--u) * 0.875); color: var(--color-text-muted); }
.sv-sumrow .v { font-size: calc(var(--u) * 0.875); font-weight: 700; color: var(--color-text); text-align: right; }
.sv-sumnote { font-size: calc(var(--u) * 0.78); color: var(--color-primary-50); line-height: 1.5; margin-top: calc(var(--u) * 0.75); }
.sv-sumnote p { margin: 0; }

/* The breakdown table. Header and every row share ONE set of columns:
   [data-sv-rows] is the grid, header and rows are subgrids spanning it. With
   each row as its own grid (the old way) the auto-sized cost column landed
   in a different place on every row, so the figures never stacked. Browsers
   without subgrid fall back to per-row columns (@supports below). */
.sv-table { --sv-cols: minmax(0, 1fr) auto calc(var(--u) * 1.25) auto; border: 1px solid var(--color-neutral-20); border-radius: calc(var(--u) * 0.75); overflow: hidden; }
.sv-table [data-sv-rows] { display: grid; grid-template-columns: var(--sv-cols); align-content: start; max-height: calc(var(--u) * 13.75); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-primary-20) transparent; }
.sv-table [data-sv-rows]::-webkit-scrollbar { width: calc(var(--u) * 0.375); }
.sv-table [data-sv-rows]::-webkit-scrollbar-track { background: transparent; }
.sv-table [data-sv-rows]::-webkit-scrollbar-thumb { background: var(--color-primary-20); border-radius: 999px; }
.sv-table__h, .sv-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
@supports not (grid-template-columns: subgrid) {
  .sv-table__h, .sv-row { grid-template-columns: var(--sv-cols); }
}
.sv-table__h { position: sticky; top: 0; z-index: 1; background: var(--color-neutral-10); padding: calc(var(--u) * 0.75) calc(var(--u) * 1); }
.sv-table__h span { font-size: calc(var(--u) * 0.8125); font-weight: 600; color: #A5A5A5; white-space: nowrap; }
/* the heading's right edge meets the figures' right edge: the stepper
   button has horizontal padding the heading must mirror */
.sv-table__h span:nth-child(2) { text-align: right; padding-right: calc(var(--u) * 0.375); }
.sv-table__h span:nth-child(4) { text-align: right; }
.sv-row { padding: calc(var(--u) * 0.625) calc(var(--u) * 1); border-top: 1px solid var(--color-neutral-20); }
.sv-row .nm { font-size: calc(var(--u) * 0.9375); color: var(--color-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-cost { grid-column: 2; display: flex; align-items: center; gap: calc(var(--u) * 0.25); justify-content: flex-end; border: none; background: none; cursor: pointer; font-family: var(--sv-font-body); padding: calc(var(--u) * 0.25) calc(var(--u) * 0.375); border-radius: calc(var(--u) * 0.5625); transition: background .14s; white-space: nowrap; }
.sv-cost:hover { background: var(--color-primary-05); }
.sv-cost .stk { display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--color-text-subtle); }
.sv-cost .num { display: flex; align-items: baseline; gap: calc(var(--u) * 0.25); line-height: 1.2; white-space: nowrap; }
.sv-cost .num b { font-weight: 600; font-size: calc(var(--u) * 0.9375); color: #252626; font-variant-numeric: tabular-nums; }
.sv-cost .sv-kr { font-size: calc(var(--u) * 0.8125); color: var(--color-text-subtle); font-weight: 500; }
.sv-row .sep { grid-column: 3; color: var(--color-text-subtle); text-align: center; }
.sv-row .save { grid-column: 4; font-weight: 700; font-size: calc(var(--u) * 0.875); color: var(--color-primary-40); white-space: nowrap; padding-left: calc(var(--u) * 0.5); text-align: right; font-variant-numeric: tabular-nums; }
.sv-table__foot { background: #f2f2f2; border-top: 1px solid var(--color-neutral-20); padding: calc(var(--u) * 0.75) calc(var(--u) * 1); font-size: calc(var(--u) * 0.75); color: #252626; line-height: 1.5; }
.sv-table__foot p { margin: 0; }

.sv-ctas { display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); }
.sv-cta { display: flex; width: 100%; align-items: center; justify-content: center; min-height: calc(var(--u) * 3.375); padding: calc(var(--u) * 0.9375) calc(var(--u) * 1.125); background: var(--color-primary-50); color: #fff; border: none; border-radius: 9999px; font-family: var(--sv-font-body); font-weight: 700; font-size: calc(var(--u) * 1); cursor: pointer; transition: background .16s; }
.sv-cta:hover { background: var(--color-primary-40); }
.sv-secondary { display: block; text-align: center; background: none; border: none; color: var(--color-primary-50); font-weight: 600; font-size: calc(var(--u) * 0.84); text-decoration: none; cursor: pointer; font-family: var(--sv-font-body); }
.sv-secondary:hover { text-decoration: underline; }

/* mobile sticky bar */
.sv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; gap: calc(var(--u) * 0.75); align-items: center; padding: calc(var(--u) * 0.75) calc(var(--u) * 1); background: #fff; border-top: 1px solid var(--color-neutral-20); box-shadow: 0 calc(var(--u) * -0.5) calc(var(--u) * 1.5) rgba(20,20,20,.10); }
.sv-bar.is-show { display: flex; }
.sv-bar__txt { flex: 1; min-width: 0; }
.sv-bar__k { font-size: calc(var(--u) * 0.66); color: var(--color-text-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sv-bar__v { font-family: var(--sv-font-display); font-weight: 600; color: var(--color-primary-40); font-size: calc(var(--u) * 1.3); line-height: 1.05; }
.sv-bar .sv-cta { margin: 0; width: auto; min-height: calc(var(--u) * 2.875); padding: calc(var(--u) * 0.75) calc(var(--u) * 1.25); flex: none; font-size: calc(var(--u) * 0.95); }

/* modals — the amount wheel's item, band, list padding and edit-field
   heights are one snap geometry and stay in px on purpose; its text scales */
.sv-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: calc(var(--u) * 1); background: rgba(20,20,20,.5); }
.sv-modal.is-open { display: flex; }
.sv-sheet { width: 100%; max-width: calc(var(--u) * 24); background: #fff; border-radius: calc(var(--u) * 1.5); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(20,20,20,.12); overflow: hidden; display: flex; flex-direction: column; }
.sv-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 1.25) calc(var(--u) * 1.375) calc(var(--u) * 0.25); }
.sv-sheet__head .t { display: flex; flex-direction: column; gap: 1px; }
.sv-sheet__head .t b { font-family: var(--sv-font-display); font-weight: 500; font-size: calc(var(--u) * 1.15); }
.sv-sheet__head .t small { font-size: calc(var(--u) * 0.78); color: var(--color-text-muted); }
.sv-mclose { border: none; background: var(--color-neutral-10); width: calc(var(--u) * 2.125); height: calc(var(--u) * 2.125); border-radius: 9999px; cursor: pointer; font-size: calc(var(--u) * 1.125); color: var(--color-text-muted); flex: none; }
.sv-wheelhint { text-align: center; font-size: calc(var(--u) * 0.72); color: var(--color-text-subtle); margin: 2px 0 0; }
.sv-wheelwrap { position: relative; margin: 4px 22px 0; }
.sv-wheel { position: relative; height: 226px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: transparent; z-index: 1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.sv-wheel::-webkit-scrollbar { display: none; }
.sv-wheel__list { padding: 91px 0; display: flex; flex-direction: column; }
.sv-wheel__item { height: 44px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; font-family: var(--sv-font-display); font-size: calc(var(--u) * 1.45); font-weight: 500; color: var(--color-text-subtle); cursor: pointer; transition: color .12s, transform .12s; line-height: 1; }
.sv-wheel__item.is-sel { color: var(--color-text); transform: scale(1.04); }
.sv-wheel__item .u { font-size: calc(var(--u) * 0.95); color: var(--color-text-subtle); font-weight: 400; margin-left: 5px; font-family: var(--sv-font-body); }
.sv-wheel__band { position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); border-top: 1px solid var(--color-primary-20); border-bottom: 1px solid var(--color-primary-20); background: var(--color-primary-05); border-radius: 10px; pointer-events: none; z-index: 0; }
.sv-wheel__edit { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; display: none; align-items: center; justify-content: center; z-index: 3; }
.sv-wheel__edit.show { display: flex; }
.sv-wheel__edit input { width: 100%; height: 44px; border: none; background: #fff; outline: none; text-align: center; font-family: var(--sv-font-display); font-size: calc(var(--u) * 1.45); font-weight: 500; color: var(--color-text); border-radius: 10px; box-shadow: var(--sv-shadow-focus); }
.sv-sheet__foot { padding: calc(var(--u) * 0.875) calc(var(--u) * 1.375) calc(var(--u) * 1.375); }
.sv-wheel-done { display: flex; width: 100%; align-items: center; justify-content: center; min-height: calc(var(--u) * 3.125); background: var(--color-primary-50); color: #fff; border: none; border-radius: 9999px; font-family: var(--sv-font-body); font-weight: 700; font-size: calc(var(--u) * 1); cursor: pointer; }
.sv-wheel-done:hover { background: var(--color-primary-40); }

/* focus states */
.sv-input:focus, .sv-cta:focus-visible, .sv-card:focus-visible, .sv-wheel-done:focus-visible, .sv-how:focus-visible, .sv-cost:focus-visible, .sv-empty__btn:focus-visible, .sv-secondary:focus-visible { outline: none; box-shadow: var(--sv-shadow-focus); border-radius: 10px; }

@media (max-width: 1024px) {
  .sv-band { padding: var(--sv-vpad, calc(var(--u) * 2.5)) 0; }
  .sv-table { --sv-cols: minmax(0, 1fr) auto 0 auto; }
  .sv-table__h { padding: calc(var(--u) * 0.625) calc(var(--u) * 0.75); }
  .sv-table__h span { font-size: calc(var(--u) * 0.72); }
  .sv-row { padding: calc(var(--u) * 0.625) calc(var(--u) * 0.75); }
  .sv-row .nm { font-size: calc(var(--u) * 0.875); }
  .sv-row .sep { display: none; }
  .sv-row .save { font-size: calc(var(--u) * 0.8125); }
  .sv-cost { padding: calc(var(--u) * 0.25) 2px; }
  .sv-cost .num b { font-size: calc(var(--u) * 0.875); }
  .sv-cost .sv-kr { font-size: calc(var(--u) * 0.75); }
}
/* Smallest phones: very large real savings figures (into the hundreds of
   thousands/millions of kr) plus long category names no longer fit on one
   line even with auto-sized columns — stack each row into two lines instead
   of relying on ellipsis-truncating the category name down to nothing. */
@media (max-width: 416px) {
  .sv-table__h { display: none; }
  .sv-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nm cost" "save save";
    row-gap: calc(var(--u) * 0.375);
  }
  .sv-row .nm { grid-area: nm; }
  .sv-cost { grid-area: cost; grid-column: auto; }
  .sv-row .sep { display: none; }
  .sv-row .save {
    grid-area: save; grid-column: auto;
    white-space: normal; padding-left: 0; text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) { .seiva-calc * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- layout: full width / full height ------------------------------------
   Host themes (Visma's included) box every module into a centred content
   column — a three-column grid of gutter | capped content | gutter
   plus the drag-and-drop row's own max-width — and the calculator's own
   .sv-wrap caps and centres again inside that. Boxed twice, it reads as a
   card. With the Layout toggles on, the module breaks out of the column
   itself: no theme or template change, and !important where a theme rule
   would otherwise win.

   --sv-vw      viewport width WITHOUT the scrollbar, measured by module.js.
                100vw includes the scrollbar, so a band sized with it would
                run under the scrollbar and be clipped on the right.
   --sv-header  the site header's height, also measured, so "one screen
                tall" means the screen below the header.
   --sv-sticky  the same height only while the header is sticky/fixed, so
                the sticky result panel clears it — and doesn't leave a gap
                when the header scrolls away.
   All three fall back sanely until module.js has run.

   Only the BAND breaks out. The content inside stays in the measured
   content column (see .sv-wrap above), so it lines up with the block above
   it and keeps the page's side gutters.

   The breakout needs the ancestors between the band and the page to be
   free of overflow: hidden/clip and of transforms; in the Visma theme
   neither applies to a module placed in a drag-and-drop section. */
.seiva-calc.sv-fullwidth .sv-band {
  width: var(--sv-vw, 100vw) !important;
  max-width: none !important;
  margin-left: calc(50% - var(--sv-vw, 100vw) / 2) !important;
  margin-right: 0 !important;
  border-left: 0;
  border-right: 0;
}

.seiva-calc.sv-fullheight .sv-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--sv-header, 0px)) !important;
}
@supports (height: 100dvh) {
  .seiva-calc.sv-fullheight .sv-band { min-height: calc(100dvh - var(--sv-header, 0px)) !important; }
}
.seiva-calc.sv-fullheight .sv-wrap { width: 100%; }