/* Degmaskinen – Kalkylatorn
   Allt är namnrymdat med .dgk- för att inte krocka med temat.
   Typsnitt laddas från plugin-filen (dgk-fonts). */

.dgk-root{
  --blue:#2D4769;
  --panel:#22374F;
  --edge:#3A5273;
  --green:#3CAE60;
  --paper:#F4F5E6;
  --ink:#1C2B3F;
  --muted:#9BAEC4;
  --warn:#E08A72;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}
/* Grundstilar på roten i stället för body — pluginet ska inte
   påverka resten av sidan.
   Samma uppbyggnad som väljaren: mörkblå chassi, ljus text,
   en mörkare panel för det man ställer in. */
.dgk-root{
  background:var(--blue);color:var(--paper);
  font-family:var(--serif);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.dgk-root .dgk-wrap{max-width:680px;margin:0 auto;padding:48px 20px 56px}

/* Eyebrow — samma roll som i väljaren. */
.dgk-root .dgk-eyebrow{
  font-family:var(--mono);font-size:11px;line-height:1.2;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);margin:0 0 18px;
}

/* Färgen måste sättas explicit. Temats egna h1/h2-regler slår
   ärvd färg, och då blir rubriken mörk mot mörk botten. */
.dgk-root .dgk-h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,5vw,36px);line-height:1.15;
  letter-spacing:-.01em;color:var(--paper);margin:0 0 14px;
}
.dgk-lede{color:var(--muted);margin:0 auto 36px;max-width:52ch}

/* ---------- inmatning ---------- */
.dgk-root .dgk-panel{
  background:var(--panel);color:var(--paper);
  border-radius:2px;padding:26px 22px;margin-bottom:30px;
}
.dgk-field{margin-bottom:22px}
.dgk-field:last-child{margin-bottom:0}
.dgk-root .dgk-field > label{
  display:block;font-family:var(--mono);font-size:11px;
  line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.dgk-inputrow{display:flex;align-items:baseline;gap:9px}
.dgk-root .dgk-inputrow input[type=text],
.dgk-root .dgk-inputrow input[type=number]{
  flex:1;min-width:0;background:transparent;border:0;
  color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:26px;
  padding:2px 0 4px;-moz-appearance:textfield;
}
.dgk-root .dgk-inputrow input::-webkit-outer-spin-button,
.dgk-inputrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dgk-root .dgk-inputrow input:focus{outline:0;color:var(--green)}
.dgk-unit{font-family:var(--mono);font-size:13px;color:var(--muted)}

.dgk-rangewrap{margin-top:4px}
.dgk-root input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;
  background:transparent;cursor:pointer;height:34px;margin:0;
  touch-action:pan-y;
}
.dgk-root input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--edge);border-radius:2px;
}
.dgk-root input[type=range]::-moz-range-track{
  height:2px;background:var(--edge);border-radius:2px;
}
.dgk-root input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--green);border:0;margin-top:-12px;
}
.dgk-root input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--green);border:0;
}
input[type=range]:focus{outline:0}
.dgk-root input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(60,174,96,.30);
}
.dgk-root input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px rgba(60,174,96,.30);
}
.dgk-root .dgk-ends{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;color:#7A8BA0;margin-top:2px;
}

.dgk-chips{margin:10px -4px -4px;font-size:0}
.dgk-root .dgk-chip{
  display:inline-block;margin:4px;vertical-align:top;
  font-family:var(--mono);font-size:13px;line-height:1.2;
  padding:9px 14px;background:transparent;color:var(--paper);
  border:1px solid var(--edge);border-radius:2px;cursor:pointer;
}
.dgk-chip:hover{border-color:var(--green)}
.dgk-chip[aria-pressed=true]{border-color:var(--green);color:var(--green)}
.dgk-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- svar ---------- */
.dgk-root .dgk-answer{
  border-left:3px solid var(--green);padding-left:18px;margin-bottom:34px;
}
.dgk-answer.dgk-short{border-left-color:var(--warn)}
.dgk-root .dgk-kicker{
  font-family:var(--mono);font-size:11px;line-height:1.2;
  letter-spacing:.18em;text-transform:uppercase;
  color:#8A9AAF;margin:0 0 8px;
}
.dgk-root .dgk-big{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,6vw,40px);line-height:1.05;
  letter-spacing:-.01em;color:var(--paper);margin:0 0 10px;
}
.dgk-answer p{margin:0;color:var(--muted)}

/* ---------- graf ---------- */
.dgk-chartbox{margin-bottom:34px}
svg{width:100%;height:auto;display:block}
.dgk-root .dgk-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:12px;
  font-family:var(--mono);font-size:12px;color:var(--muted);
}
.dgk-legend span{display:flex;align-items:center;gap:7px}
.dgk-swatch{width:14px;height:2px;display:inline-block}

/* ---------- krav ---------- */
.dgk-root .dgk-required{
  background:var(--panel);color:var(--paper);
  border-radius:2px;padding:24px 22px;margin-bottom:34px;
}
.dgk-required .dgk-kicker{color:var(--muted)}
.dgk-required .dgk-big{color:var(--paper)}
.dgk-required p{margin:0;color:var(--muted);font-size:16px}
.dgk-required.dgk-hot .dgk-big{color:#F0A38F}

/* ---------- boost ---------- */
.dgk-root .dgk-h2{
  font-family:var(--display);font-weight:600;font-size:21px;
  letter-spacing:-.01em;color:var(--paper);margin:0 0 4px;
}
.dgk-sub{color:var(--muted);font-size:15px;margin:0 0 18px}
/* Smalare block så etikett och siffra hör ihop visuellt.
   Justeringen sätts explicit — annars ärvs temats centrering
   och raderna hamnar var för sig. */
.dgk-boost{
  border-top:1px solid var(--edge);
  max-width:440px;margin:0 auto;
}
.dgk-root .dgk-boost div{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:13px 0;border-bottom:1px solid var(--edge);
  text-align:left;
}
.dgk-boost .dgk-what{flex:1}
.dgk-root .dgk-boost .dgk-gain{
  font-family:var(--display);font-weight:600;font-size:16px;
  white-space:nowrap;color:var(--green);text-align:right;
}

.dgk-root .dgk-foot{
  margin-top:38px;font-family:var(--mono);font-size:12px;
  line-height:1.6;color:#8A9AAF;
}
/* Mediefrågor lägger inte till specificitet — samma prefix som
   basreglerna behövs för att de ska slå igenom.
   align-items måste också bytas: i kolumnriktning styr den den
   horisontella axeln, och baseline krymper spannen till
   innehållsbredd så att text-align inte har något att centrera inom. */
@media(max-width:520px){
  .dgk-root .dgk-chip{padding:9px 8px;font-size:12px}
  .dgk-root .dgk-boost div{
    flex-direction:column;align-items:stretch;
    gap:3px;padding:15px 0;text-align:center;
  }
  .dgk-root .dgk-boost .dgk-what{flex:none;text-align:center}
  .dgk-root .dgk-boost .dgk-gain{font-size:18px;text-align:center}
}