/* Aha! Matte – stilar för verktygen (Web Components utan skugg-DOM,
   så att stadiets tema gäller även inne i verktyget). */

aha-procentremsa, aha-tallinje, aha-brakstavar, aha-balansvag, aha-rutnat, aha-grafritare,
aha-tiobasblock, aha-klocka, aha-algebrabrickor, aha-geometriyta, aha-slumpmaskin, aha-diagrambyggare,
aha-lutningsverktyg, aha-lanekalkyl { display: block; }

.pr { display: flex; flex-direction: column; gap: 18px; }
.pr-rad { display: flex; flex-direction: column; gap: 6px; }
.pr-etikett { display: flex; justify-content: space-between; gap: 12px; }
.pr-etikett strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pr-spar {
  position: relative; height: 38px; border-radius: 8px; background: var(--yta-2);
  touch-action: pan-y;
}
.pr-dragbar { cursor: ew-resize; }
.pr-stapel { position: absolute; inset: 0 auto 0 0; border-radius: 8px; min-width: 0; }
.pr-stapel-0 { background: var(--stapel-0); }
.pr-stapel-1 { background: var(--stapel-1); }
.pr-stapel-2 { background: var(--stapel-2); }
.pr-stapel.pr-okand { background: transparent; border: 2px dashed var(--stapel-2); }
.pr-dragbar .pr-stapel::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; right: 5px; width: 4px; border-radius: 2px;
  background: var(--yta); opacity: 0.85;
}
.pr-bort {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden; white-space: nowrap;
  color: var(--text-2); font-size: 0.85em; font-variant-numeric: tabular-nums;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--linje) 6px 8px);
  pointer-events: none;
}
.pr-bort span { background: var(--yta-2); padding: 0 6px; border-radius: 6px; }

.pr-skala { position: relative; height: 44px; font-size: 0.8em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pr-skala span {
  position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.25;
  transform: translateX(-50%); white-space: nowrap;
}
.pr-skala span::before { content: ""; width: 2px; height: 7px; background: var(--text-2); margin-bottom: 2px; }
.pr-skala span:first-child { transform: none; align-items: flex-start; }
.pr-skala span:last-child { transform: translateX(-100%); align-items: flex-end; }
.pr-skala b { color: var(--text); }

.pr-reglage, .vt-reglage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 28px; }
.pr-reglage label, .vt-reglage label { display: flex; justify-content: space-between; gap: 12px; }
.pr-reglage output, .vt-reglage output { font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-reglage input[type="range"], .vt-reglage input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }

.pr-rutor, .vt-rutor { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pr-ruta, .vt-ruta { padding: 12px 14px; border-radius: var(--radie-liten); background: var(--yta-2); display: flex; flex-direction: column; gap: 2px; }
.pr-ruta span, .vt-ruta span { font-size: 0.85em; color: var(--text-2); }
.pr-ruta strong, .vt-ruta strong { font-family: var(--typ-rubrik); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-ruta.pr-ruta-verklig { background: var(--accent-svag); color: var(--accent-svag-text); }
.pr-ruta.pr-ruta-verklig span { color: inherit; }
.pr-ruta.pr-ruta-skillnad { background: var(--sol-svag); color: var(--sol-svag-text); }
.pr-ruta.pr-ruta-skillnad span { color: inherit; }

@media (max-width: 520px) {
  .pr-skala span:nth-child(2), .pr-skala span:nth-child(4) { display: none; }
}

/* ---------- Gemensamt för verktygen ---------- */

.vt-ruta-stark { background: var(--accent-svag); color: var(--accent-svag-text); }
.vt-ruta-stark span { color: inherit; }
.vt-ruta strong { overflow-wrap: anywhere; }
.vt-falt { display: flex; flex-direction: column; gap: 8px; }
.vt-faltnamn { font-weight: 700; }
.vt-val { min-height: 44px; padding: 8px 16px; }
.vt-dold {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Runt handtag att dra i, 44 px stort för fingret. */
.vt-handtag {
  position: absolute; z-index: 1; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; touch-action: none; cursor: grab;
}
.vt-handtag::after {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--yta); box-shadow: 0 0 0 2px var(--accent);
}
.vt-handtag:active { cursor: grabbing; }
.vt-handtag:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }

.brak {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.brak > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px; }

/* ---------- Tallinjen ---------- */

.tl { display: flex; flex-direction: column; gap: 16px; }
.tl-yta { padding-inline: 26px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-dragbar { cursor: pointer; }
.tl-linje { position: relative; height: 96px; }
.tl-linje.tl-med-hopp { height: 142px; }
.tl-axel { position: absolute; left: -16px; right: -16px; top: 52px; height: 3px; border-radius: 2px; background: var(--text); }
.tl-streck { position: absolute; top: 47px; width: 2px; height: 13px; margin-left: -1px; background: var(--text-2); }
.tl-streck.tl-stort { top: 42px; height: 23px; background: var(--text); }
.tl-tal {
  position: absolute; top: 68px; transform: translateX(-50%);
  font-size: 0.85em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-punkt { position: absolute; top: 0; z-index: 1; transform: translateX(-50%); border-radius: 10px; }
.tl-punkt span {
  display: flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 8px;
  border-radius: 10px; background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-punkt::after {
  content: ""; position: absolute; left: 50%; top: 36px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--accent);
}
.tl-punkt-1 span { background: var(--sol); color: var(--sol-text); }
.tl-punkt-1::after { border-top-color: var(--sol); }
.tl-dragbar .tl-punkt { cursor: grab; }
.tl-punkt:focus-visible { z-index: 2; }
.tl-hopp { position: absolute; left: 0; top: 92px; width: 100%; height: 30px; overflow: visible; }
.tl-hopp path { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 6 5; }
.tl-hopptext {
  position: absolute; top: 116px; transform: translateX(-50%);
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vt-ruta.tl-ruta-0 { background: var(--accent-svag); color: var(--accent-svag-text); }
.vt-ruta.tl-ruta-1 { background: var(--sol-svag); color: var(--sol-svag-text); }
.tl-ruta-0 span, .tl-ruta-1 span { color: inherit; }

/* ---------- Bråkstavarna ---------- */

.bs { display: flex; flex-direction: column; gap: 18px; }
.bs-staplar { display: flex; flex-direction: column; gap: 10px; }
.bs-rad { display: grid; grid-template-columns: 4.3em minmax(0, 1fr) 3.6em; align-items: center; gap: 10px; }
.bs-valbar .bs-rad[data-rad] { cursor: pointer; }
.bs-namn { font-weight: 700; font-size: 0.9em; color: var(--text-2); line-height: 1.2; }
.bs-spar {
  display: flex; height: 48px; overflow: hidden;
  border-radius: var(--radie-liten); border: 2px solid var(--linje); background: var(--yta-2);
}
.bs-vald .bs-spar { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bs-bit {
  flex: none; container-type: inline-size; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-right: 2px solid var(--kant); background: var(--accent-svag); color: var(--accent-svag-text);
  font-weight: 700; font-size: 0.85em; font-variant-numeric: tabular-nums;
}
.bs-rad-1 .bs-bit { background: var(--sol-svag); color: var(--sol-svag-text); }
.bs-hel .bs-bit { flex: 1; background: var(--accent); color: var(--accent-text); }
.bs-hel .bs-bit:last-child { border-right: 0; }
@container (max-width: 34px) { .bs-bit > span { display: none; } }
.bs-summa {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--typ-rubrik); font-weight: 700; font-size: 1.25rem;
}
.bs-blandad { font-family: var(--typ-text); font-size: 0.75rem; color: var(--text-2); }
.bs-kontroll { display: flex; flex-direction: column; gap: 14px; }
.bs-bitar { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-ny {
  min-width: 56px; min-height: 48px; padding: 0 12px;
  border-radius: var(--radie-liten); border: 2px solid var(--kant); background: var(--yta); color: var(--text);
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.bs-ny:hover { background: var(--accent-svag); color: var(--accent-svag-text); }
.bs-besked { min-height: 1.5em; font-weight: 700; }

/* ---------- Balansvågen ---------- */

.bv { display: flex; flex-direction: column; gap: 16px; }
.bv-bild { display: block; width: 100%; height: auto; max-height: 340px; }
.bv-stativ { stroke: var(--text); stroke-width: 10; stroke-linecap: round; }
.bv-fot, .bv-balk rect { fill: var(--text); }
.bv-led { fill: var(--sol); stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.bv-snore { fill: none; stroke: var(--text-2); stroke-width: 2; }
.bv-skalform { fill: var(--yta-2); stroke: var(--kant); stroke-width: 3; stroke-linejoin: round; }
.bv-pase path { fill: var(--sol-svag); stroke: var(--text); stroke-width: 2; }
.bv-pase text {
  fill: var(--sol-svag-text); text-anchor: middle;
  font-family: var(--typ-rubrik); font-style: italic; font-weight: 700; font-size: 22px;
}
.bv-kula { fill: var(--stapel-2); stroke: var(--text); stroke-width: 1.5; }
.bv-text { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.bv-ekvation {
  font-family: var(--typ-rubrik); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-variant-numeric: tabular-nums;
}
.bv-lage { color: var(--text-2); }
.bv-sidor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.bv-sida { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bv-stegare { display: grid; max-width: 200px; grid-template-columns: 44px minmax(2em, 1fr) 44px; align-items: center; gap: 2px 6px; }
.bv-stegare > span { grid-column: 1 / -1; color: var(--text-2); font-size: 0.9em; }
.bv-stegare output { text-align: center; font-weight: 700; font-size: 1.2em; font-variant-numeric: tabular-nums; }
.bv-plus {
  width: 44px; height: 44px; border-radius: var(--radie-liten); border: 2px solid var(--kant);
  background: var(--yta); color: var(--text); font: inherit; font-weight: 700; font-size: 1.3em; line-height: 1; cursor: pointer;
}
.bv-plus:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Rutnätet ---------- */

.rn { display: flex; flex-direction: column; gap: 16px; }
.rn-yta { position: relative; align-self: flex-start; max-width: 100%; user-select: none; -webkit-user-select: none; }
.rn-bild { display: block; max-width: 100%; }
.rn-yta:has(.vt-handtag) .rn-bild { cursor: pointer; }
.rn-papper { stroke: var(--linje); stroke-width: 1; opacity: 0.7; }
.rn-del-a { fill: var(--accent-svag); }
.rn-del-b { fill: var(--sol-svag); }
.rn-del-c { fill: var(--yta-2); }
.rn-enhet { stroke: var(--kant); stroke-opacity: 0.2; stroke-width: 1; }
.rn-kant { fill: none; stroke: var(--kant); stroke-width: 2.5; }
.rn-delning { stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 7 5; }
.rn-sidtext { fill: var(--text); font-weight: 700; font-size: 15px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.rn-sidtext-v { text-anchor: end; dominant-baseline: central; }
.rn-areatext {
  fill: var(--text); text-anchor: middle; dominant-baseline: central;
  font-family: var(--typ-rubrik); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
}
.rn-areatext-a { fill: var(--accent-svag-text); }
.rn-areatext-b { fill: var(--sol-svag-text); }
.rn-delning-b::after, .rn-delning-h::after { inset: 13px; border: 0; background: var(--yta); box-shadow: 0 0 0 3px var(--text); }
.rn-summa { font-family: var(--typ-rubrik); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* ---------- Grafritaren ---------- */

.gr { display: flex; flex-direction: column; gap: 14px; }
.gr-formel {
  font-family: var(--typ-rubrik); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-variant-numeric: tabular-nums;
}
.gr-yta { position: relative; align-self: center; max-width: 100%; user-select: none; -webkit-user-select: none; }
.gr-bild {
  display: block; max-width: 100%; background: var(--yta);
  outline: 1px solid var(--linje); outline-offset: -1px; border-radius: var(--radie-liten);
}
.gr-yta:has(.vt-handtag) .gr-bild { cursor: crosshair; }
.gr-rutnat { stroke: var(--linje); stroke-width: 1; opacity: 0.6; }
.gr-axel { stroke: var(--text); stroke-width: 1.6; }
.gr-tal { fill: var(--text-2); font-size: 13px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.gr-tal-h { text-anchor: end; }
.gr-tal-v { text-anchor: start; }
.gr-axelnamn { fill: var(--text); font-style: italic; font-weight: 700; font-size: 15px; }
.gr-axelnamn-x { text-anchor: end; }
.gr-kurva { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.gr-kurva-2 { stroke: var(--sol); stroke-dasharray: 10 6; }
.gr-skugga { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.8; }
.gr-prick { fill: var(--sol); stroke: var(--text); stroke-width: 2; }
.gr-hjalp { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.gr .vt-ruta strong { font-size: 1.2rem; }

/* ---------- Tiobasblocken ---------- */

.tb { display: flex; flex-direction: column; gap: 16px; }
.tb-kolumner { display: grid; grid-template-columns: repeat(var(--kolumner), minmax(0, 1fr)); gap: 10px; }
.tb-kolumn { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tb-rubrik { font-weight: 700; text-align: center; }
.tb-yta {
  min-height: 150px; padding: 10px; border-radius: var(--radie-liten); background: var(--yta-2);
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 5px;
}
.tb-kolumn-e .tb-yta { display: grid; grid-template-columns: repeat(5, 16px); grid-auto-rows: 16px; align-content: start; }
.tb-block { display: block; border: 2px solid var(--kant); }
.tb-block-h {
  width: 60px; height: 60px; background-color: var(--accent-svag);
  background-image: linear-gradient(var(--linje) 1px, transparent 1px), linear-gradient(90deg, var(--linje) 1px, transparent 1px);
  background-size: 10% 10%;
}
.tb-block-t { width: 16px; height: 84px; background-color: var(--sol-svag); background-image: linear-gradient(var(--linje) 1px, transparent 1px); background-size: 100% 10%; }
.tb-block-e { width: 16px; height: 16px; background: var(--sol); }
.tb-kolumn .tb-yta { flex: 1; }
/* Talet över knapparna, så att stegaren får plats i en smal kolumn. */
.tb-stegare { width: 100%; max-width: 132px; margin-inline: auto; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.tb-stegare output { grid-column: 1 / -1; grid-row: 1; }
.tb-stegare .bv-plus { width: 100%; }
.tb-summa { font-family: var(--typ-rubrik); font-weight: 700; font-size: 1.3em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Klockan ---------- */

.kl { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kl-yta { position: relative; width: min(100%, 300px); user-select: none; -webkit-user-select: none; }
.kl-bild { display: block; width: 100%; height: auto; }
.kl-yta:has(.vt-handtag) .kl-bild { cursor: pointer; }
.kl-tavla { fill: var(--yta); stroke: var(--kant); stroke-width: 4; }
.kl-streck { stroke: var(--text-2); stroke-width: 1.5; }
.kl-streck-stort { stroke: var(--text); stroke-width: 3; }
.kl-siffra { fill: var(--text); font-family: var(--typ-rubrik); font-weight: 700; font-size: 16px; text-anchor: middle; }
.kl-timvisare { stroke: var(--text); stroke-width: 7; stroke-linecap: round; }
.kl-minutvisare { stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.kl-nav { fill: var(--text); }
.kl-text { text-align: center; }
.kl-digital { font-family: var(--typ-rubrik); font-weight: 800; font-size: 2rem; font-variant-numeric: tabular-nums; }
.kl-ord { font-weight: 700; font-size: 1.2em; }

/* ---------- Algebrabrickorna ---------- */

.ab { display: flex; flex-direction: column; gap: 16px; }
.ab-rader { display: flex; flex-direction: column; gap: 10px; }
.ab-rad { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: center; gap: 10px; }
.ab-namn { font-family: var(--typ-rubrik); font-weight: 700; }
.ab-brickor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 52px; padding: 6px;
  border-radius: var(--radie-liten); background: var(--yta-2);
}
.ab-bricka {
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 2px solid var(--kant); border-radius: 4px; background: var(--accent-svag); color: var(--accent-svag-text);
  font: inherit; font-weight: 700; font-size: 0.85em; cursor: pointer;
}
span.ab-bricka { cursor: default; }
.ab-x2 { width: 56px; height: 56px; }
.ab-x { width: 56px; height: 30px; }
.ab-e { width: 30px; height: 30px; }
.ab-neg { background: var(--sol-svag); color: var(--sol-svag-text); border-style: dashed; }
.ab-tips { font-size: 0.9em; }

/* ---------- Geometriytan ---------- */

.geo { display: flex; flex-direction: column; gap: 16px; }
.geo-yta { align-self: center; }
.geo-kvadrat { stroke: var(--kant); stroke-width: 2; }
.geo-triangel { fill: var(--sol); fill-opacity: 0.45; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.geo-ratvinkel { fill: none; stroke: var(--text); stroke-width: 2; }

/* ---------- Slumpmaskinen ---------- */

.sm { display: flex; flex-direction: column; gap: 14px; }
.sm-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sm-senast { font-family: var(--typ-rubrik); font-weight: 700; font-size: 1.3em; }
.sm-diagram { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; }
.sm-stapel { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.sm-procent { min-height: 1.3em; font-size: 0.8em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-spar { position: relative; width: 100%; height: 160px; border-radius: 6px 6px 0 0; background: var(--yta-2); }
.sm-fyll { position: absolute; left: 12%; right: 12%; bottom: 0; border-radius: 4px 4px 0 0; background: var(--accent); }
.sm-teori { position: absolute; left: 0; right: 0; height: 3px; margin-bottom: -1.5px; background: var(--text); }
.sm-namn { font-weight: 700; font-size: 0.9em; }
.sm-antal { font-weight: 700; }

/* ---------- Diagrambyggaren ---------- */

.db { display: flex; flex-direction: column; gap: 14px; }
.db-stapel { fill: var(--accent-svag); stroke: var(--kant); stroke-width: 1.5; }
.db-varde { fill: var(--accent-svag-text); font-weight: 700; font-size: 13px; text-anchor: middle; }

/* ---------- Lutningsverktyget ---------- */

.lv-tangent { stroke: var(--sol); stroke-width: 3; stroke-dasharray: 10 5; }
.lv-sekant { stroke: var(--text-2); stroke-width: 2.5; stroke-dasharray: 3 5; }
.lv-area { fill: var(--accent-svag); opacity: 0.85; }

/* ---------- Lånekalkylen ---------- */

.lk { display: flex; flex-direction: column; gap: 10px; }
.lk-diagram {
  display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 8px 8px 0;
  border-radius: var(--radie-liten); background: var(--yta-2); border-bottom: 2px solid var(--text);
}
.lk-stapel { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.lk-stapel.lk-start { background: var(--stapel-2); }
.lk-axel { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--text-2); }

@media (prefers-reduced-motion: no-preference) {
  .bv-balk, .bv-skal { transition: transform 0.45s ease; }
  .sm-fyll { transition: height 0.25s ease; }
}

@media (max-width: 520px) {
  .sm-tva-tarningar .sm-procent { display: none; }
  .tb-block-h { width: 44px; height: 44px; }
}

@media (max-width: 520px) {
  .tl-tal.tl-glest { display: none; }
}

/* Labbet */
.labb-rad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.labb-falt { display: flex; flex-direction: column; gap: 6px; }
.labb-falt label, .labb-falt .falt-namn { font-weight: 700; }
.labb-falt input[type="text"] {
  width: 8em; height: 48px; padding: 0 12px; border-radius: var(--radie-liten);
  border: 2px solid var(--kant); background: var(--yta); color: var(--text); font: inherit; font-weight: 700;
}