/* Grund: reset, typografi och de komponenter som återkommer överallt. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-strong); }
h1 { font-size: clamp(28px, 5vw, 42px); letter-spacing: -0.03em; }
h2 { font-size: clamp(20px, 3vw, 26px); }
h3 { font-size: 16px; }
p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

svg.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; flex: none; }

:where(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
  border-radius: 4px;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.secondary { color: var(--ink-secondary); }
.strong { color: var(--ink-strong); }
.pos { color: var(--good); }
.neg { color: var(--critical); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Utan JavaScript räknar sidan inte. Säg det, i stället för att visa tomma tal. */
.noscript {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 18px;
  background: var(--warning-wash); color: var(--warning);
  border-bottom: 1px solid var(--warning-line);
  font-size: 13.5px; line-height: 1.5;
}

/* ------------------------------------------------------------- knappar -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  font: 500 14.5px/1 var(--font); letter-spacing: -0.01em;
  color: var(--ink-invert); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r-control);
  cursor: pointer; transition: background .15s ease, transform .12s ease;
}
/*
 * Färgen måste stå här. Regeln a:hover längre upp är starkare än .btn, så en
 * länk som ser ut som en knapp fick mörk text på mörk botten vid hover, alltså
 * osynlig text. Understrykningen är samma kvitto som en länk ger: den syns även
 * för den som inte uppfattar den lilla skillnaden mellan två marinblå toner.
 */
.btn:hover {
  background: var(--accent-strong); border-color: var(--accent-strong);
  color: var(--ink-invert);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; text-decoration: none; }
.btn .icon { transition: transform .18s ease; }

.btn--ghost { color: var(--accent); background: var(--surface); border-color: var(--hairline-strong); }
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }

.btn--quiet {
  min-height: 34px; padding: 0 12px; font-size: 13px;
  color: var(--ink-secondary); background: transparent; border-color: var(--hairline-strong);
}
.btn--quiet:hover { background: var(--surface-sunken); color: var(--ink-strong); border-color: var(--hairline-strong); }

.btn--dashed { border-style: dashed; border-color: var(--accent-line); color: var(--accent); background: transparent; }
.btn--dashed:hover { background: var(--accent-soft); border-style: solid; }

.btn--block { width: 100%; }
/* Mindre knapp för sekundära vägar. Fortfarande över WCAG 2.2 kravet på 24 px. */
.btn--small { min-height: 36px; padding: 0 12px; font-size: 13.5px; }

/* ------------------------------------------------------------ underlaget -
 *
 * Knappen som hämtar underlaget är slutet på arbetet, och den enda knapp i
 * produkten som får kännas som en belöning. Tre lägen: pilen vinkar när man
 * hovrar, ikonen snurrar medan filen byggs, och en bock på grön botten
 * kvitterar att den är hämtad. Allt annat vore en färgnyans att missa.
 */
.btn--underlag:hover .icon { animation: vinka 1.1s ease-in-out infinite; }
.btn--underlag[data-lage='arbetar'] { cursor: progress; }
.btn--underlag[data-lage='arbetar'][disabled] { opacity: 1; }
.btn--underlag[data-lage='arbetar'] .icon { animation: snurra .9s linear infinite; }
.btn--underlag[data-lage='klart'],
.btn--underlag[data-lage='klart']:hover { background: var(--good); border-color: var(--good); }
.btn--underlag[data-lage='klart'] .icon { animation: kvittens .45s cubic-bezier(.2, 1.6, .4, 1); }
.btn--underlag[data-lage='fel'],
.btn--underlag[data-lage='fel']:hover { background: var(--critical); border-color: var(--critical); }

@keyframes vinka {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(3px); }
  70% { transform: translateY(0); }
}
@keyframes snurra { to { transform: rotate(360deg); } }
@keyframes kvittens {
  0% { transform: scale(.4) rotate(-25deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* --------------------------------------------------------------- kort --- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.card__body { padding: 18px; }

/* ------------------------------------------------- stapel och förklaring - */

.bar {
  display: flex; gap: 2px; height: 13px; margin: 14px 0 12px;
  border-radius: var(--r-pill); overflow: hidden; background: var(--surface-sunken);
}
.bar span { transition: width .25s cubic-bezier(.4, 0, .2, 1); min-width: 2px; }
.bar span:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.bar span:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }

.legend { display: grid; gap: 8px; }
.legend__row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.legend__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend__name { color: var(--ink-secondary); }
.legend__value { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.legend--inline { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legend--inline .legend__row { font-size: 12.5px; }

/* ------------------------------------------------------------- etikett -- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500;
  background: var(--surface-sunken); color: var(--ink-secondary);
  border: 1px solid var(--hairline);
}
.chip--good { background: var(--good-wash); color: var(--good); border-color: transparent; }
.chip--ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip--warning { background: var(--warning-wash); color: var(--warning); border-color: transparent; }
.chip--critical { background: var(--critical-wash); color: var(--critical); border-color: transparent; }

/* -------------------------------------------------------------- fält ---- */

/*
 * align-content är stretch som standard i grid. Ett fält som saknar hjälptext
 * fick därför sina rader utspridda över hela cellhöjden, och reglagen i samma
 * rad hamnade upp till 27 px från varandra. start packar dem uppifrån.
 */
.field { display: grid; gap: 6px; align-content: start; }
.field__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field__label { font-size: 13px; color: var(--ink-secondary); }
.field__hint { font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
.field__hint strong { color: var(--ink-secondary); font-weight: 500; }

.input {
  width: 100%; min-height: 40px; padding: 0 11px;
  font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover { border-color: var(--accent-line); }
.input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(107, 143, 175, .18); }
.input:disabled { background: var(--surface-sunken); color: var(--ink-secondary); }
.input--text { text-align: left; font-family: var(--font); font-weight: 400; font-size: 14px; }

.input-wrap { display: flex; align-items: center; gap: 8px; }
.input-wrap .input { flex: 1; }
.field__unit { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }

select.input {
  text-align: left; font-family: var(--font); font-weight: 400; font-size: 14px;
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* reglage */
/* Handtaget är det vanligaste träffmålet i hela produkten. WCAG 2.2 kräver 24 px,
   praxis är 44. 28 är kompromissen som ryms utan att spåret blir klumpigt. */
input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; display: block;
}
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--hairline-strong); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hairline-strong); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px;
  border-radius: 50%; background: var(--accent-line); border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(30, 58, 82, .3);
}
input[type='range']::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-line); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(30, 58, 82, .3);
}
/* Ett avstängt reglage ska se avstängt ut, annars drar man i det förgäves. */
input[type='range']:disabled { cursor: not-allowed; opacity: .45; }
input[type='range']:focus-visible::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 0 4px rgba(107, 143, 175, .25); }
input[type='range']:focus-visible::-moz-range-thumb { background: var(--accent); box-shadow: 0 0 0 4px rgba(107, 143, 175, .25); }

/* segmenterad väljare */
.segmented {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--surface-sunken); border-radius: var(--r-control);
  border: 1px solid var(--hairline);
}
.segmented button {
  min-height: 32px; padding: 0 13px; border: 0; border-radius: 6px;
  font: 400 13px/1 var(--font); color: var(--ink-secondary);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.segmented button[aria-pressed='true'] {
  background: var(--surface); color: var(--ink-strong); font-weight: 500;
  border: 1px solid var(--hairline); margin: -1px;
}
.segmented--small button { min-height: 28px; padding: 0 9px; font-size: 12px; }

/* Etiketten är träffytan, och den ska hålla 24 px enligt WCAG 2.5.8. */
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; color: var(--ink-secondary); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ------------------------------------------------------------ tabeller -- */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: right; padding: 8px 10px; font-weight: 600; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-secondary);
  background: var(--surface-head); white-space: nowrap;
}
.table th:first-child, .table td:first-child { text-align: left; }
.table td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-sunken); }
.table tfoot td { font-weight: 600; color: var(--ink-strong); border-top: 1px solid var(--hairline-strong); }
.table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-control); }

/* -------------------------------------------------------------- övrigt -- */

.stack > * + * { margin-top: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.wrap-row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Delad sidhuvud och faktabrickor: används av kalkylen, snabbkalkylen och om-sidan. */

/* ------------------------------------------------------------- toppbar -- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink-strong); }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: auto; display: block; }
.brand__name { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.brand__tag { font-size: 11.5px; color: var(--ink-muted); letter-spacing: .01em; }
/* Namnet står aldrig ensamt, inte heller på telefon. Där hamnar raden under i stället. */
@media (max-width: 640px) {
  .brand__name, .brand__tag { display: block; }
  .brand__tag { font-size: 10.5px; line-height: 1.3; }
  .brand img { width: 30px; }
}
.topbar__spacer { flex: 1; }

.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact {
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 11px; border-radius: var(--r-control);
  background: var(--surface-sunken); font-size: 12.5px;
}
.fact__label { color: var(--ink-secondary); }
.fact__value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-strong); }
.fact--good { background: var(--good-wash); }
.fact--warning { background: var(--warning-wash); }
.fact--critical { background: var(--critical-wash); }