/* Solcellskalkylatorn – all styling scoped under .skk so it never touches the theme.
   Fonts are inherited from the theme. Override colors by redefining the --skk-* variables. */
.skk{
  --skk-bg:#f3f5f7; --skk-surface:#ffffff; --skk-ink:#15202b; --skk-muted:#5a6775; --skk-line:#d9dfe6;
  --skk-cell:#1d3a5c; --skk-sun:#e38b12; --skk-sun-soft:#fdf1df;
  --skk-stock:#6a4fb3; --skk-save:#2f8f6b; --skk-loan:#8a94a0;
  --skk-good:#1f7a55; --skk-bad:#b4442c;
  --skk-num:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color:var(--skk-ink); font-size:15px; line-height:1.5; margin:24px 0; max-width:100%;
}
.skk *,.skk *::before,.skk *::after{box-sizing:border-box}
.skk .skk-title{margin:0 0 16px}
.skk h3{font-size:18px;line-height:1.25;font-weight:700;margin:0 0 4px;color:var(--skk-ink)}
.skk .skk-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
.skk.skk-narrow .skk-grid{grid-template-columns:minmax(0,1fr)}
.skk .skk-panel{background:var(--skk-surface);border:1px solid var(--skk-line);border-radius:10px;padding:18px}
.skk .skk-inputs{display:grid;gap:18px;background:var(--skk-bg)}
.skk fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.skk legend{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--skk-cell);margin:0 0 10px;padding:0;border:0;width:auto}
.skk .skk-row{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center}
.skk .skk-row label{font-size:14px;margin:0;font-weight:400;color:var(--skk-ink)}
.skk .skk-row small{display:block;color:var(--skk-muted);font-size:12px;line-height:1.3}
.skk .skk-inp{position:relative}
.skk .skk-inp input,.skk .skk-inp select{
  width:100%;height:auto;min-height:0;margin:0;box-shadow:none;
  font:500 14px/1.3 var(--skk-num);color:var(--skk-ink);background:var(--skk-surface);
  border:1px solid var(--skk-line);border-radius:6px;padding:7px 46px 7px 9px;text-align:right;
  -moz-appearance:textfield}
.skk .skk-inp input::-webkit-outer-spin-button,.skk .skk-inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.skk .skk-inp select{padding-right:9px;text-align:left;font-family:inherit}
.skk .skk-u{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:12px var(--skk-num);color:var(--skk-muted);pointer-events:none}
.skk input:focus-visible,.skk select:focus-visible,.skk button:focus-visible,.skk summary:focus-visible{outline:2px solid var(--skk-sun);outline-offset:2px}
.skk .skk-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--skk-surface);border:1px solid var(--skk-line);border-radius:8px;padding:3px}
.skk .skk-seg button{font:600 13px var(--skk-num);border:0;background:transparent;color:var(--skk-muted);padding:8px 0;margin:0;border-radius:6px;cursor:pointer;box-shadow:none;min-height:0;line-height:1.2;text-transform:none;letter-spacing:0}
.skk .skk-seg button[aria-pressed="true"]{background:var(--skk-cell);color:#fff}
.skk .skk-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:0;cursor:pointer}
.skk .skk-check input{margin:3px 0 0;accent-color:var(--skk-sun);width:auto}
.skk .skk-results{display:grid;gap:18px;min-width:0}
.skk .skk-verdict{background:var(--skk-sun-soft);border:1px solid rgba(227,139,18,.35);border-radius:10px;padding:16px 18px}
.skk .skk-k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#b06a08}
.skk .skk-verdict p{margin:6px 0 0;font-size:18px;line-height:1.4;font-weight:600}
.skk .skk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--skk-line);border:1px solid var(--skk-line);border-radius:10px;overflow:hidden}
.skk .skk-kpi{background:var(--skk-surface);padding:12px 14px;min-width:0}
.skk .skk-l{font-size:12px;color:var(--skk-muted)}
.skk .skk-v{font:500 20px/1.2 var(--skk-num);margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.skk .skk-s{font-size:12px;color:var(--skk-muted)}
.skk .skk-sub{color:var(--skk-muted);font-size:13px;margin:0 0 12px}
.skk .skk-bars{display:grid;gap:10px}
.skk .skk-bar{display:grid;grid-template-columns:140px minmax(0,1fr) 68px;gap:12px;align-items:center;font-size:14px}
.skk .skk-bar .skk-t{height:14px;background:var(--skk-bg);border-radius:3px;position:relative;overflow:hidden}
.skk .skk-bar .skk-t i{position:absolute;top:0;bottom:0;left:0;border-radius:3px}
.skk .skk-bar .skk-n{font:500 14px var(--skk-num);text-align:right;font-variant-numeric:tabular-nums}
.skk .skk-scroll{overflow-x:auto;max-width:100%}
.skk .skk-mt{margin-top:12px}
.skk svg{display:block;max-width:100%;height:auto}
.skk svg text{font-family:var(--skk-num);font-size:11px;fill:var(--skk-muted)}
.skk .skk-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;margin-top:8px}
.skk .skk-legend span{display:inline-flex;align-items:center;gap:6px}
.skk .skk-legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
.skk table{width:100%;border-collapse:collapse;font-size:13px;margin:0;border:0;background:transparent}
.skk th,.skk td{padding:7px 8px;text-align:right;border:0;border-bottom:1px solid var(--skk-line);white-space:nowrap;background:transparent;color:var(--skk-ink)}
.skk th:first-child,.skk td:first-child{text-align:left}
.skk th{font-weight:600;color:var(--skk-muted);font-size:12px}
.skk td{font-family:var(--skk-num);font-variant-numeric:tabular-nums}
.skk .skk-sens td.skk-hl{background:var(--skk-sun-soft);font-weight:600}
.skk .skk-pos{color:var(--skk-good)} .skk .skk-neg{color:var(--skk-bad)}
.skk details summary{cursor:pointer;font-size:18px;font-weight:700;list-style:none}
.skk details summary::-webkit-details-marker{display:none}
.skk details summary::after{content:" +";color:var(--skk-muted)}
.skk details[open] summary::after{content:" –"}
.skk .skk-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.skk .skk-notes{font-size:13px;color:var(--skk-muted)}
.skk .skk-notes ul{padding-left:18px;margin:8px 0}
.skk .skk-notes li{margin-bottom:4px}
.skk .skk-notes a{color:var(--skk-cell)}
@media (prefers-reduced-motion:no-preference){.skk .skk-bar .skk-t i{transition:width .35s ease}}

/* Container-width breakpoints are set by JS (.skk-narrow / .skk-tiny), so the layout
   adapts to the content column rather than the whole screen. */
.skk.skk-narrow .skk-two{grid-template-columns:minmax(0,1fr)}
.skk.skk-tiny .skk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.skk.skk-tiny .skk-bar{grid-template-columns:104px minmax(0,1fr) 60px;font-size:13px}
.skk.skk-tiny .skk-panel{padding:14px}
.skk.skk-tiny .skk-row{grid-template-columns:minmax(0,1fr) 124px}