/*!
 * Solkalkulator for solskjerming-as.no
 * Copyright (c) 2026 Solskjerming AS. Med enerett.
 *
 * Del av https://www.solskjerming-as.no/kjopshjelp/solkalkulator - ikke publisert for gjenbruk.
 * Kopiering, distribusjon eller bruk av koden helt eller delvis, i egne eller andres tjenester,
 * krever skriftlig samtykke fra Solskjerming AS. Kontakt: post@solskjerming-as.no
 *
 * @fingerprint sk-solkalkulator-2026-09-09
 */
/*
 * Solkalkulator - side-spesifikke stiler.
 * Scopet under .solkalk for aa ikke kollidere med det globale Bootstrap 3-gridet i Dstyle.css.
 * Fargetokens: brand (--sk-brand/-dark) fra knappe-/lenkefargene i Dstyle.css (#61594a/#766a52);
 * --sk-warm/--sk-green er funksjonsfarger for "uten"/"med skjerming" (spec solkalkulator-spec.md §8).
 */

.solkalk {
	--sk-brand: #61594a;
	--sk-brand-dark: #4a4438;
	--sk-warm: #d9531e;
	--sk-warm-soft: #f4a15a;
	--sk-green: #3f9142;
	--sk-green-soft: #8fc48f;
	--sk-bg-card: #faf8f4;
	--sk-border: #e5ded2;
	--sk-text-muted: #766a52;

	max-width: 100%;
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	color: #333;
}

.solkalk h2, .solkalk h3 {
	font-family: Montserrat, sans-serif;
}

.solkalk__panel {
	background: var(--sk-bg-card);
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 24px;
}

/* ── Kontroller ─────────────────────────────────────────────── */

.solkalk__controls {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
}

.solkalk__field--full {
	grid-column: 1 / -1;
}

.solkalk__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* bootstrap.css har `input[type="range"] { width: 100% }` (spesifisitet 0,1,1),
   som slår klassen over (0,1,0). Den skjulte rotasjons-slideren ble derfor
   363px bred, ikke 1px, og dro dokumentet 20px ut i ALLE viewporter — `clip`
   skjuler malingen, ikke layouten. Kompound-selektoren (0,2,1) vinner uansett
   rekkefølge på stilarkene. */
input[type="range"].solkalk__sr-only {
	width: 1px;
}

.solkalk__hus-compact {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.solkalk__hus-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 24px;
	align-items: start;
	margin-bottom: 18px;
}

.solkalk__hus-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.solkalk__hus-map {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solkalk__hus-map > label {
	font-weight: 600;
	font-size: 13px;
	color: var(--sk-text-muted);
}

@media (min-width: 768px) {
	.solkalk__hus-top {
		grid-template-columns: minmax(240px, 1fr) minmax(0, 1.15fr);
	}
}

.solkalk__hus-form .solkalk__areas {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.solkalk__orient-suggest {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-brand-dark);
}

.solkalk__orient-suggest:empty {
	display: none;
}

.solkalk__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solkalk__field label {
	font-weight: 600;
	font-size: 13px;
	color: var(--sk-text-muted);
}

.solkalk__field select,
.solkalk__field input[type="number"] {
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--sk-border);
	border-radius: 5px;
	font-size: 15px;
	background: #fff;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.solkalk__field input[type="range"] {
	min-height: 44px;
}

/* minmax(0, 1fr) av samme grunn som i .solkalk__3d-controls: uten det holder
   tallfeltenes egenbredde kolonnene fra aa krympe, og Nord-feltet legger seg
   oppaa rotasjons-kolonnen i 4-spalters desktop-oppsett. */
.solkalk__areas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.solkalk__areas .solkalk__field label {
	white-space: nowrap;
}

.solkalk__rotation-value,
.solkalk__weather-value {
	font-weight: 600;
	color: var(--sk-brand-dark);
}

.solkalk__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.solkalk__toggle input {
	width: 20px;
	height: 20px;
}

/* ── Adressesøk (fase 5) ────────────────────────────────────── */

.solkalk__address {
	position: relative;
}

.solkalk__address input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--sk-border);
	border-radius: 5px;
	font-size: 15px;
	background: #fff;
	box-sizing: border-box;
}

.solkalk__address-results {
	position: absolute;
	z-index: 1200;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	max-height: 240px;
	overflow-y: auto;
}

.solkalk__address-results li {
	padding: 10px 12px;
	min-height: 44px;
	display: flex;
	align-items: center;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
}

.solkalk__address-results li:hover {
	background: var(--sk-bg-card);
}

.solkalk__address-selected {
	margin-top: 8px;
	font-size: 13px;
	color: var(--sk-text-muted);
}

.solkalk__address-selected button {
	margin-left: 10px;
	border: none;
	background: none;
	color: var(--sk-brand);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px;
}

/* ── Resultatkort ───────────────────────────────────────────── */

.solkalk__results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
}

.solkalk__hus-form .solkalk__card {
	padding: 12px 10px;
}

.solkalk__hus-form .solkalk__card-value {
	font-size: 22px;
}

.solkalk__card {
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}

.solkalk__card-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sk-text-muted);
	margin-bottom: 6px;
}

.solkalk__card-value {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.solkalk__card-value small {
	font-size: 14px;
	font-weight: 500;
}

.solkalk__card--warm .solkalk__card-value { color: var(--sk-warm); }
.solkalk__card--green .solkalk__card-value { color: var(--sk-green); }

.solkalk__card-sub {
	font-size: 12px;
	color: var(--sk-text-muted);
	margin-top: 4px;
}

/* ── 3D-eksponeringsrom (fase 7 / v2) ──────────────────────── */

.solkalk__3d-intro p {
	font-size: 14px;
	color: var(--sk-text-muted);
	line-height: 1.5;
	margin: 0 0 12px;
}

.solkalk__btn {
	display: inline-block;
	padding: 11px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--sk-brand);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.solkalk__btn:hover { background: var(--sk-brand-dark); }
.solkalk__btn[disabled] { opacity: 0.6; cursor: wait; }

.solkalk__3d-status {
	margin-left: 12px;
	font-size: 13px;
	color: var(--sk-text-muted);
}

.solkalk__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	cursor: pointer;
	padding-top: 8px;
}

/* minmax(0, 1fr): uten det tvinger selectens lange husnavn (og sliderne) kolonnene
   bredere enn panelet og gir horisontal scroll på mobil (Håkon 2026-09-03). */
.solkalk__3d-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	margin-bottom: 14px;
}

.solkalk__3d-controls .solkalk__field,
.solkalk__3d-controls select,
.solkalk__3d-controls input[type="range"] {
	min-width: 0;
	max-width: 100%;
}

.solkalk__3d-controls select { width: 100%; }

.solkalk__field--wide { grid-column: 1 / -1; }

.solkalk__field-hint {
	display: block;
	font-size: 12px;
	color: var(--sk-text-muted);
	margin-top: 4px;
}

.solkalk__compass {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 8px;
}

.solkalk__compass button {
	min-width: 42px;
	padding: 6px 10px;
	border: 1px solid var(--sk-border);
	border-radius: 6px;
	background: #fff;
	font-weight: 700;
	cursor: pointer;
	color: var(--sk-brand-dark);
}

.solkalk__compass button.is-active {
	background: var(--sk-brand);
	border-color: var(--sk-brand);
	color: #fff;
}

@media (max-width: 767px) {
	.solkalk__3d-controls { grid-template-columns: minmax(0, 1fr); }
}

/* Mobil: simuler/vær/måned/klokke over 3D, hus/orientering/sted under.
   Desktop: venstre kolonne (top+below) og 3D til høyre. */
.solkalk__3d-layout {
	display: grid;
	gap: 14px 20px;
	grid-template-areas:
		"top"
		"stage"
		"below";
}
.solkalk__3d-top { grid-area: top; }
.solkalk__3d-stage { grid-area: stage; min-width: 0; }
.solkalk__3d-below { grid-area: below; min-width: 0; }

.solkalk__3d-top .solkalk__checkbox {
	padding-top: 0;
	margin-bottom: 8px;
	font-size: 14px;
}

.solkalk__3d-top .solkalk__checkbox--nudge {
	padding: 6px 10px;
	margin: 0 0 8px;
	border: 1.5px solid var(--sk-brand);
	border-radius: 8px;
	background: transparent;
	box-shadow: 0 0 0 0 rgba(97, 89, 74, 0.2);
	animation: sk-nudge-border 1.8s ease-in-out infinite;
}

@keyframes sk-nudge-border {
	0%, 100% {
		border-color: rgba(97, 89, 74, 0.35);
		box-shadow: 0 0 0 0 rgba(97, 89, 74, 0.12);
	}
	50% {
		border-color: var(--sk-brand);
		box-shadow: 0 0 0 4px rgba(97, 89, 74, 0.16);
	}
}

@media (prefers-reduced-motion: reduce) {
	.solkalk__3d-top .solkalk__checkbox--nudge {
		animation: none;
		border-color: var(--sk-brand);
		box-shadow: 0 0 0 3px rgba(97, 89, 74, 0.12);
	}
}

.solkalk__3d-top .solkalk__sim-controls {
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 8px 0 0;
}

.solkalk__3d-below .solkalk__field {
	margin-bottom: 12px;
}

.solkalk__3d-below .solkalk__compass {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 4px;
}

.solkalk__3d-below .solkalk__compass button {
	min-width: 0;
	padding: 6px 2px;
	font-size: 12px;
}

.solkalk__3d-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 8px;
	font-size: 13px;
}

.solkalk__peak3d {
	font-weight: 700;
	color: var(--sk-brand-dark);
}

#sk-peak3d-value.is-blink,
.solkalk__card-value.is-blink {
	animation: sk-blink 0.9s ease-in-out infinite;
}

@keyframes sk-blink {
	50% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
	#sk-peak3d-value.is-blink,
	.solkalk__card-value.is-blink {
		animation: none;
		opacity: 0.7;
	}
}

.solkalk__3d-footer .solkalk__sim-readout {
	margin-left: 0;
}

.solkalk__scene3d {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #9fc6ee;
	touch-action: none;
	/* Boksen eier hoyde/bredde-forholdet (0.62), og lerretet fyller den helt.
	   Uten aspect-ratio ble lerretet w*0.62 hoyt mens min-height holdt boksen
	   hoyere, slik at differansen sto igjen som en blå stripe under 3D-en. */
	aspect-ratio: 100 / 62;
	min-height: 220px;
	/* `width: 100%` er ikke pynt: med `aspect-ratio` + `min-height` og bredde
	   `auto` utleder begge motorene bredden fra min-høyden (220 / 0.62 = 355px)
	   og lar boksen bli bredere enn kolonnen. Eksplisitt bredde stopper det.
	   `min-width: 0` alene virker i WebKit, men IKKE i Chromium — målt. */
	width: 100%;
}

.solkalk__scene3d .solkalk__3d-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px;
	text-align: center;
	color: #2b3a4a;
	font-weight: 600;
}

.solkalk__scene3d canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.solkalk__horizon-status {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--sk-text-muted);
}

.solkalk__plot-wrap {
	position: relative;
}

.solkalk__plot-map {
	aspect-ratio: 1 / 1;
	height: auto;
	min-height: 240px;
	max-height: 480px;
	width: 100%;
	border-radius: 8px;
	border: 1px solid var(--sk-border);
	background: #dce6d6;
	overflow: hidden;
	z-index: 0;
}

.solkalk__map-north {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 500;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--sk-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	color: var(--sk-brand-dark);
	pointer-events: none;
}

.solkalk__map-dir {
	background: none !important;
	border: none !important;
}

.solkalk__map-dir-arrow {
	width: 0;
	height: 0;
	margin: 0 auto;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 22px solid #c62828;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
	transform-origin: 50% 70%;
}

.solkalk__plot-map.leaflet-container {
	font-family: inherit;
}

.solkalk__map-marker {
	background: none !important;
	border: none !important;
}

.solkalk__map-pin {
	width: 18px;
	height: 18px;
	background: #c62828;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ── Solbanesimulator (fase 3) ─────────────────────────────── */

.solkalk__scene-subtitle {
	margin: -4px 0 14px;
	font-size: 13px;
	color: var(--sk-text-muted);
}

.solkalk__sim-controls {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
	margin-bottom: 14px;
}

.solkalk__scene {
	border-radius: 10px;
	overflow: hidden;
}

.solkalk__scene svg {
	width: 100%;
	height: auto;
	display: block;
}

.solkalk__legend--wrap {
	flex-wrap: wrap;
	align-items: center;
}

.solkalk__sim-readout {
	margin-left: auto;
	font-weight: 600;
	color: var(--sk-brand-dark);
}

.solkalk__scene-note {
	font-size: 13px;
	color: var(--sk-text-muted);
	line-height: 1.5;
	margin: 12px 0 0;
}

/* ── Vindusutsikt-simulator (fase 4) ────────────────────────── */

.solkalk__facade-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.solkalk__facade-btn {
	padding: 10px 18px;
	min-height: 44px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1.5px solid var(--sk-border);
	background: #fff;
	color: #333;
	transition: 0.2s;
}

.solkalk__facade-btn.is-active {
	border-color: var(--sk-warm);
	background: var(--sk-warm);
	color: #fff;
}

.solkalk__window-views {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.solkalk__glare-text {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	background: #e9f2e8;
	border: 1px solid var(--sk-border);
}

.solkalk__glare-text.solkalk__glare--strong {
	background: #fbe9dc;
}

/* ── Grafer ─────────────────────────────────────────────────── */

.solkalk__charts {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 20px;
}

.solkalk__chart-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--sk-brand-dark);
}

.solkalk__chart svg {
	width: 100%;
	height: auto;
	display: block;
}

.solkalk__legend {
	display: flex;
	gap: 18px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--sk-text-muted);
}

.solkalk__legend-swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	margin-right: 5px;
	vertical-align: -1px;
}

/* Varmekart-forklaringen. Vises bare i de sekundene kartet står på (JS setter
   [hidden]). Fargestripa fylles fra heatmap.js sin egen skala, ikke fra en kopi
   her - se showHeatLegend() i solkalkulator.js. */
.solkalk__heat-legend {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--sk-border, #dcdcdc);
	border-radius: 6px;
	background: #fbfbfb;
}

.solkalk__heat-bar {
	height: 10px;
	border-radius: 5px;
	/* Fallback hvis JS ikke rakk å sette gradienten fra heatmap.js. */
	background: linear-gradient(to right, #1f5fa6, #2a9d9b, #8cbf3f, #f0c419, #e87a1e, #cf2020);
}

/* Sjekkboksen for solbane-animasjonen ligger rett over 3D-visningen, ogsaa paa
   mobil der kolonnene stables (Haakon 2026-09-05). */
.solkalk__animate-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 8px;
}

.solkalk__animate-bar .solkalk__field-hint {
	flex: 1 1 240px;
	min-width: 0;
}

.solkalk__heat-status {
	margin: 0;
	font-size: 12px;
	color: var(--sk-text-muted);
}

.solkalk__heat-text {
	margin: 7px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sk-text-muted);
}

.solkalk__heat-end {
	font-weight: 600;
	color: var(--sk-brand-dark);
	white-space: nowrap;
}

/* ── CTA + forutsetninger ───────────────────────────────────── */

.solkalk__see-also {
	text-align: center;
	font-size: 13px;
	color: var(--sk-text-muted);
	margin: 0 0 8px;
}

.solkalk__see-also a {
	color: var(--sk-brand);
	font-weight: 600;
}

.solkalk__cta {
	text-align: center;
	margin: 8px 0 24px;
}

.solkalk__cta a {
	display: inline-block;
	color: #fff;
	background: var(--sk-brand);
	font-weight: 600;
	padding: 12px 28px;
	border-radius: 5px;
	text-decoration: none;
	transition: 0.3s;
}

.solkalk__cta a:hover {
	background: var(--sk-brand-dark);
	color: #fff;
	text-decoration: none;
}

.solkalk__assumptions {
	font-size: 13px;
	color: var(--sk-text-muted);
	border-top: 1px dashed var(--sk-border);
	padding-top: 14px;
}

.solkalk__assumptions summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--sk-brand-dark);
}

.solkalk__assumptions p {
	margin: 10px 0 0;
	line-height: 1.5;
}

/* ── FAQ (fase 6) ───────────────────────────────────────────── */

.solkalk__faq {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px dashed var(--sk-border);
}

.solkalk__faq h3 {
	font-size: 14px;
	margin: 36px 0 4px;
	color: var(--sk-brand-dark);
}

.solkalk__faq h3:first-of-type {
	margin-top: 0;
}

.solkalk__faq p {
	font-size: 13px;
	color: var(--sk-text-muted);
	line-height: 1.55;
	margin: 0;
}

/* ── «Få tilsendt din rapport» ──────────────────────────────── */

.solkalk__rapport-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
	align-items: end;
}

.solkalk__rapport-form input[type="text"],
.solkalk__rapport-form input[type="email"],
.solkalk__rapport-form input[type="tel"] {
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--sk-border);
	border-radius: 5px;
	font-size: 15px;
	background: #fff;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.solkalk__field-optional {
	font-weight: 400;
	text-transform: none;
}

.solkalk__required {
	color: var(--sk-warm);
}

.solkalk__rapport .solkalk__checkbox,
.solkalk__modell .solkalk__checkbox {
	font-weight: 400;
	font-size: 13px;
	align-items: flex-start;
	line-height: 1.45;
}

.solkalk__rapport .solkalk__checkbox input,
.solkalk__modell .solkalk__checkbox input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.solkalk__rapport .solkalk__checkbox a,
.solkalk__modell .solkalk__checkbox a {
	color: var(--sk-brand);
	font-weight: 600;
}

/* Knapp + status paa samme linje. Uten dette havner knappen i et
   .solkalk__field (flex column) og strekkes ut i hele panelbredden. */
.solkalk__rapport-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.solkalk__rapport-actions .solkalk__btn {
	flex: 0 0 auto;
}

.solkalk__rapport-status {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-text-muted);
}

.solkalk__rapport-status.is-error { color: var(--sk-warm); }
.solkalk__rapport-status.is-ok { color: var(--sk-green); }

/* ── Modellering av bolig (erstatter Se også / Få tilbud) ───── */

.solkalk__modell-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px 28px;
	align-items: start;
}

.solkalk__modell-copy p {
	margin: 0 0 10px;
	line-height: 1.55;
}

.solkalk__modell-copy p:last-of-type {
	margin-bottom: 12px;
}

.solkalk__modell-thumb {
	display: block;
	max-width: 280px;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #e8e2d6;
	line-height: 0;
	cursor: zoom-in;
}

.solkalk__modell-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.solkalk__modell-thumb:focus {
	outline: 2px solid var(--sk-brand);
	outline-offset: 2px;
}

@media (min-width: 992px) {
	.solkalk__modell-body {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
	}

	.solkalk__modell-thumb {
		max-width: 320px;
	}
}

@media (max-width: 767px) {
	.solkalk__rapport-form { grid-template-columns: minmax(0, 1fr); }
	.solkalk__rapport-actions { align-items: flex-start; flex-direction: column; }
	.solkalk__rapport-actions .solkalk__btn { width: 100%; }
}

/* == Desktop (>=992px): utnytt full sidebredde og komprimer hoeyden =========
   Siden er 1366px bred (.container i Dstyle.css), og kalkulatoren gaar naa i
   full bredde som broedteksten. Da blir 2-spalters kontroller unoedig brede og
   stabelen unoedig hoey, saa desktop faar:
   - «Ditt hus»: 4 kolonner (2 rader i stedet for 5)
   - 3D-panelet: kontroller i egen kolonne til venstre for selve 3D-bildet,
     slik at sliderne staar rett ved siden av det de styrer (Haakon 2026-09-03).
   ========================================================================== */
@media (min-width: 992px) {
	.solkalk__controls {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px 20px;
	}

	/* Adressesoek og glassareal tar halve raden hver i stedet for hele. */
	.solkalk__controls > .solkalk__field--full {
		grid-column: span 2;
	}

	/* Venstre kolonne (simuler/vær/tid + hus/sted) ved siden av 3D. */
	.solkalk__3d-layout {
		grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"top stage"
			"below stage";
		gap: 16px 24px;
		align-items: start;
	}

	.solkalk__3d-top .solkalk__field input[type="range"],
	.solkalk__3d-below .solkalk__field input[type="range"] {
		min-height: 36px;
	}

	.solkalk__3d-stage .solkalk__legend {
		margin-top: 10px;
	}

	.solkalk__controls > .solkalk__field {
		justify-content: flex-end;
	}

	.solkalk__hus-compact {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
		gap: 16px 24px;
		align-items: start;
	}

	.solkalk__scene3d {
		min-height: 380px;
	}
}

@media (max-width: 767px) {
	.solkalk__controls,
	.solkalk__results,
	.solkalk__charts,
	.solkalk__sim-controls {
		grid-template-columns: 1fr 1fr;
	}
	.solkalk__areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.solkalk__results {
		grid-template-columns: 1fr 1fr;
	}
	.solkalk__sim-readout {
		margin-left: 0;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.solkalk__controls,
	.solkalk__areas,
	.solkalk__results,
	.solkalk__charts,
	.solkalk__sim-controls,
	.solkalk__window-views {
		grid-template-columns: 1fr;
	}

	.solkalk__hus-form .solkalk__areas,
	.solkalk__hus-form .solkalk__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}