/* hydrauliskt_sprang.css – Hydrauliskt språng. Allt ligger under .hsp-sida, och färgerna i egna variabler, så att inget påverkar sajtens header.
   Sidan frångår medvetet mall.php (rotens CLAUDE.md avsnitt 6, "Arbetsyta"): sidovyn och resultaten ska synas medan man ändrar.
   --hsp-hojd sätts av skriptet (matHojd()), så att arbetsytan fyller fönstret. */

.hsp-sida {
    --hsp-primar: #2563eb;
    --hsp-primar-hover: #1d4ed8;
    --hsp-mork: #1e293b;
    --hsp-morkast: #0f172a;
    --hsp-kort: #ffffff;
    --hsp-text: #333333;
    --hsp-dampad: #64748b;
    --hsp-kant: #e2e8f0;
    --hsp-lage1: #f59e0b;
    --hsp-lage2: #38bdf8;
    --hsp-lage3: #14b8a6;
    --hsp-lage4: #a78bfa;
    --hsp-lage5: #f472b6;
    color: var(--hsp-text);
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.4;
}
.hsp-sida [hidden] { display: none !important; }
.hsp-sida *, .hsp-sida *::before, .hsp-sida *::after { box-sizing: border-box; }

/* Raden överst */
.hsp-topp {
    background: linear-gradient(135deg, var(--hsp-morkast), var(--hsp-primar));
    color: #fff;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}
.hsp-topp h1 { font-size: 1.05rem; font-weight: 700; margin: 0; white-space: nowrap; }
.hsp-status {
    flex: 1 1 200px; min-width: 0; font-size: 0.76rem; font-weight: 600; line-height: 1.3; color: #dbeafe;
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px;
}
.hsp-status.sparat, .hsp-status.osparat, .hsp-status.fel { flex: 0 1 auto; padding: 3px 9px; border-radius: 8px; margin-right: auto; }
.hsp-status strong { overflow-wrap: anywhere; }
.hsp-status.sparat { background: #ecfdf5; color: #065f46; }
.hsp-status.osparat { background: #fffbeb; color: #92400e; }
.hsp-status.fel { background: #fef2f2; color: #991b1b; }
.hsp-status .hsp-lank-knapp { color: inherit; }
.hsp-knappar { display: flex; flex-wrap: wrap; gap: 5px; }
.hsp-tk {
    border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; padding: 5px 9px; border-radius: 6px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.3;
}
.hsp-tk:hover { background: rgba(255,255,255,0.24); }
.hsp-tk:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hsp-tk-primar { background: #fff; border-color: #fff; color: var(--hsp-primar-hover); }
.hsp-tk-primar:hover { background: #dbeafe; }
.hsp-meddelande { margin: 8px 12px 0; padding: 8px 12px; border-radius: 8px; font-size: 0.86rem; background: #ecfdf5; color: #065f46; }
.hsp-meddelande.varning { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.hsp-noscript { margin: 8px 12px 0; padding: 8px 12px; border-radius: 8px; font-size: 0.86rem; background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

/* Arbetsytan */
.hsp-yta {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 320px;
    gap: 10px;
    height: var(--hsp-hojd, 640px);
    padding: 10px 12px 0;
}
.hsp-spalt {
    background: var(--hsp-kort);
    border: 1px solid var(--hsp-kant);
    border-radius: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
}
.hsp-spalt h2 { font-size: 1rem; font-weight: 700; color: var(--hsp-mork); margin: 0 0 8px; }
.hsp-mitt { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }

/* Vänsterspalten */
.hsp-gastrad { font-size: 0.78rem; line-height: 1.4; color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 7px 9px; margin: 0 0 8px; }
.hsp-gastrad a { color: inherit; font-weight: 700; }
.hsp-val { border: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hsp-val-tre { grid-template-columns: repeat(3, 1fr); margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--hsp-kant); }
.hsp-val-tre.hsp-val-forst { margin-top: 0; padding-top: 0; border-top: none; }
.hsp-tvarsnitt { margin-top: 8px; background: #f8fafc; border: 1px solid var(--hsp-kant); border-radius: 8px; padding: 5px 8px; }
.hsp-tvarsnitt span { display: block; font-size: 0.7rem; font-weight: 600; color: var(--hsp-dampad); }
.hsp-tvarsnitt svg { display: block; width: 100%; height: auto; }
.hsp-tv-kant { fill: none; stroke: #475569; stroke-width: 2; }
.hsp-tv-y1 { fill: rgba(245, 158, 11, 0.75); }
.hsp-tv-y2 { fill: rgba(56, 189, 248, 0.55); }
.hsp-tv-text { fill: var(--hsp-mork); font-size: 10.5px; font-weight: 600; }
.hsp-ned-hint { font-size: 0.72rem; color: var(--hsp-dampad); line-height: 1.35; margin: 0 0 6px; }
.hsp-val legend { font-size: 0.74rem; font-weight: 600; color: var(--hsp-dampad); padding: 0; margin: 0 0 3px; grid-column: 1 / -1; }
.hsp-val label { display: block; margin: 0; cursor: pointer; }
.hsp-val input { position: absolute; opacity: 0; pointer-events: none; }
.hsp-val span {
    display: block; text-align: center; font-size: 0.82rem; font-weight: 600; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #f8fafc; color: var(--hsp-mork);
}
.hsp-val input:checked + span { background: var(--hsp-primar); border-color: var(--hsp-primar); color: #fff; }
.hsp-val input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.hsp-val input:focus-visible + span { outline: 2px solid var(--hsp-primar); outline-offset: 1px; }

.hsp-reglage { --hsp-farg: #94a3b8; background: #f8fafc; border: 2px solid var(--hsp-kant); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.hsp-reglage:last-child { margin-bottom: 0; }
.hsp-reglage[data-lage="1"] { --hsp-farg: var(--hsp-lage1); }
.hsp-reglage[data-lage="2"] { --hsp-farg: var(--hsp-lage2); }
.hsp-reglage[data-lage="3"] { --hsp-farg: var(--hsp-lage3); }
.hsp-reglage[data-lage="4"] { --hsp-farg: var(--hsp-lage4); }
.hsp-reglage[data-lage="5"] { --hsp-farg: var(--hsp-lage5); }
.hsp-reglage[data-lage="6"] { --hsp-farg: #a78bfa; }
.hsp-reglage[data-lage="7"] { --hsp-farg: #f472b6; }
.hsp-reglage.aktiv { border-color: var(--hsp-farg); background: #fff; }
.hsp-reglage-topp { display: grid; grid-template-columns: minmax(0, 1fr) 118px 24px; gap: 6px; align-items: center; }
.hsp-reglage-topp label { font-size: 0.82rem; font-weight: 600; margin: 0; line-height: 1.25; color: var(--hsp-mork); }
.hsp-falt { display: flex; align-items: center; gap: 4px; }
.hsp-sida .hsp-falt input {
    flex: 1 1 auto; min-width: 0; width: 100%; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.92rem; font-family: inherit;
    font-weight: 600; text-align: right; background: #fff; color: var(--hsp-text); font-variant-numeric: tabular-nums;
}
.hsp-sida .hsp-falt input.fel { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.hsp-enhet { flex: 0 0 34px; font-size: 0.76rem; color: var(--hsp-dampad); }
.hsp-ater {
    width: 24px; height: 24px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: var(--hsp-dampad); font-size: 0.8rem; line-height: 1;
    padding: 0; cursor: pointer;
}
.hsp-ater:hover { background: #f1f5f9; color: var(--hsp-mork); }
.hsp-sida input[type="range"] { display: block; width: 100%; margin: 8px 0 2px; accent-color: var(--hsp-farg); cursor: pointer; }
.hsp-reglage-text { font-size: 0.72rem; color: var(--hsp-dampad); line-height: 1.35; margin: 3px 0 0; }
.hsp-gasttext { font-size: 0.7rem; color: var(--hsp-dampad); margin-top: 2px; }
.hsp-gasttext a { color: inherit; }
.hsp-notis { font-size: 0.74rem; line-height: 1.35; border-radius: 4px; padding: 4px 7px; margin-top: 5px; background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.hsp-notis a { color: inherit; font-weight: 700; }
.hsp-notis.fel { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* Sidovyn */
.hsp-vy { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--hsp-morkast); border-radius: 8px; padding: 6px 8px 6px; }
.hsp-vy-rubrik { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; color: #fff; margin-bottom: 5px; }
.hsp-vy-titel { font-size: 0.85rem; font-weight: 700; }
.hsp-lage { font-size: 0.76rem; font-weight: 700; color: #fff; background: #334155; border-left: 4px solid var(--hsp-lage1); padding: 2px 9px; border-radius: 4px; }
.hsp-lage[data-lage="2"] { border-left-color: var(--hsp-lage2); }
.hsp-lage[data-lage="3"] { border-left-color: var(--hsp-lage3); }
.hsp-lage[data-lage="4"] { border-left-color: var(--hsp-lage4); }
.hsp-lage[data-lage="5"] { border-left-color: var(--hsp-lage5); }
.hsp-lage[data-lage="6"] { border-left-color: #a78bfa; }
.hsp-lage[data-lage="7"] { border-left-color: #f472b6; }
.hsp-vyval { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.hsp-vyval button { background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 5px; font: inherit; font-size: 0.74rem; font-weight: 600; padding: 2px 10px; cursor: pointer; }
.hsp-vyval button:hover { background: #475569; }
.hsp-vyval button.aktiv { background: var(--hsp-primar); border-color: var(--hsp-primar); color: #fff; }
.hsp-vyval button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hsp-rityta { flex: 1 1 auto; min-height: 0; position: relative; background: var(--hsp-mork); border-radius: 6px; overflow: hidden; }
.hsp-rityta svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.hsp-fotnot { font-size: 0.72rem; color: #cbd5e1; margin: 5px 2px 0; line-height: 1.35; }
.hsp-hjalp { flex: 0 0 auto; font-size: 0.84rem; color: var(--hsp-mork); margin: 0; padding: 7px 10px; background: var(--hsp-kort); border: 1px solid var(--hsp-kant); border-radius: 8px; line-height: 1.4; }
.hsp-lank-knapp { font: inherit; font-weight: 600; color: var(--hsp-primar); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; }

/* Ritningens delar */
.hsp-vatten { fill: url(#hsp-vattenfarg); }
.hsp-yta-linje { fill: none; stroke: #bae6fd; stroke-width: 2; }
.hsp-strom { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.hsp-golv { fill: #64748b; }
.hsp-ror { fill: #64748b; }
.hsp-lucka { fill: #cbd5e1; }
.hsp-skala line { stroke: rgba(255,255,255,0.55); stroke-width: 1; }
.hsp-skala text { fill: rgba(255,255,255,0.8); font-size: 10px; }
.hsp-rub { fill: #cbd5e1; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.hsp-rub-mitt { fill: #fff; font-size: 12px; font-weight: 700; }
.hsp-energi { fill: none; stroke: #fcd34d; stroke-width: 1.6; stroke-dasharray: 7 5; }
.hsp-energi-hjalp { fill: none; stroke: #fcd34d; stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.hsp-energi-text { fill: #fde68a; font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--hsp-mork); stroke-width: 3px; }
.hsp-dE { stroke: #fca5a5; stroke-width: 1.6; fill: none; }
.hsp-dE-text { fill: #fecaca; font-size: 12px; font-weight: 700; }
.hsp-mat-y1 { stroke: var(--hsp-lage1); stroke-width: 2; }
.hsp-mat-y2 { stroke: #5eead4; stroke-width: 2; }
.hsp-start { stroke: #fde68a; stroke-width: 1; stroke-dasharray: 4 4; }
.hsp-start-text { fill: #fde68a; font-size: 10.5px; }
.hsp-strale { fill: rgba(255, 255, 255, 0.24); }
.hsp-yc { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 2 4; }
.hsp-yc-text { fill: rgba(255, 255, 255, 0.8); font-size: 10.5px; }
.hsp-krav { stroke: #fca5a5; stroke-width: 1.4; stroke-dasharray: 6 4; }
.hsp-krav-text { fill: #fecaca; font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--hsp-mork); stroke-width: 3px; }
.hsp-golvmatt { stroke: #fff; stroke-width: 1; fill: none; }
.hsp-bas-vatten { fill: url(#hsp-vattenfarg-b); }
.hsp-block { fill: #e2e8f0; stroke: #0f172a; stroke-width: 0.8; }
.hsp-bas-led { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; }
.hsp-d-ruta { fill: none; stroke: #64748b; stroke-width: 1; }
.hsp-d-rut { stroke: #334155; stroke-width: 1; }
.hsp-d-text { fill: #cbd5e1; font-size: 10.5px; }
.hsp-d-kurva { fill: none; stroke: #60a5fa; stroke-width: 2.5; }
.hsp-d-ref { fill: none; stroke: #94a3b8; stroke-width: 1.2; stroke-dasharray: 5 4; }
.hsp-d-hjalp { fill: none; stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 3 3; }
.hsp-d-matt { fill: none; stroke: #fff; stroke-width: 1.2; }
.hsp-d-mattext { fill: #fff; font-size: 11px; font-weight: 600; }
.hsp-d-etikett { font-size: 11.5px; font-weight: 700; }
.hsp-d-y1 { fill: var(--hsp-lage1); }
.hsp-d-y2 { fill: #5eead4; }
.hsp-d-yc { fill: #cbd5e1; }
.hsp-d-yt { fill: #f9a8d4; }
.hsp-d-krav { fill: #fecaca; }
.hsp-golvtext { fill: #fff; font-size: 10.5px; font-weight: 600; }
.hsp-etikett rect { stroke-width: 1.5; rx: 4px; ry: 4px; }
.hsp-etikett text { font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.hsp-etikett-y1 rect { fill: #422006; stroke: var(--hsp-lage1); }
.hsp-etikett-y1 text { fill: #fde68a; }
.hsp-etikett-y2 rect { fill: #042f2e; stroke: #2dd4bf; }
.hsp-etikett-y2 text { fill: #99f6e4; }
.hsp-plan-ruta { fill: rgba(15, 23, 42, 0.92); stroke: #475569; stroke-width: 1; rx: 5px; ry: 5px; }
.hsp-plan-text { fill: #e2e8f0; font-size: 10.5px; font-weight: 600; }
.hsp-plan-kanal { fill: #1d6fd1; stroke: #bae6fd; stroke-width: 1; }
.hsp-plan-pil { stroke: #fff; stroke-width: 1.5; fill: none; }

/* Rörelsen: pilarna följer flödet, och valsen roterar moturs (ytan går bakåt mot strålen). */
.hsp-pil { fill: #fff; opacity: 0; animation: hsp-pil var(--hsp-tid, 1s) linear infinite; animation-delay: var(--hsp-fordrojning, 0s); }
@keyframes hsp-pil {
    0% { transform: translateX(0); opacity: 0; }
    15% { opacity: 0.95; }
    85% { opacity: 0.95; }
    100% { transform: translateX(var(--hsp-tur, 40px)); opacity: 0; }
}
.hsp-virvel {
    fill: none; stroke: #e0f2fe; stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center;
    animation: hsp-virvel var(--hsp-varv, 2.4s) linear infinite;
}
@keyframes hsp-virvel { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hsp-pil { animation: none; opacity: 0.95; }
    .hsp-virvel { animation: none; }
}

/* Högerspalten */
.hsp-resultat { padding-bottom: 34px; }
.hsp-typ { border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #f1f5f9; border: 1px solid var(--hsp-kant); border-left: 5px solid #94a3b8; }
.hsp-typ strong { display: block; font-size: 1rem; color: var(--hsp-morkast); }
.hsp-typ span { display: block; font-size: 0.76rem; color: var(--hsp-dampad); line-height: 1.35; }
.hsp-typ[data-typ="undulart"], .hsp-typ[data-typ="svagt"] { background: #eff6ff; border-left-color: #3b82f6; }
.hsp-typ[data-typ="oscillerande"] { background: #fffbeb; border-left-color: #d97706; }
.hsp-typ[data-typ="stabilt"] { background: #f0fdf4; border-left-color: #16a34a; }
.hsp-typ[data-typ="kraftigt"] { background: #fef2f2; border-left-color: #dc2626; }
.hsp-varning {
    background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #d97706; padding: 7px 10px; border-radius: 6px; margin-bottom: 8px;
    font-size: 0.78rem; color: #92400e; line-height: 1.4;
}
.hsp-varning strong { color: #b45309; display: block; margin-bottom: 2px; font-size: 0.82rem; }
.hsp-summa { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.hsp-summa b { font-weight: inherit; }
.hsp-summa-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.84rem; padding: 1px 0; }
.hsp-summa-rad > :last-child { white-space: nowrap; }
.hsp-summa-total { border-bottom: 2px solid #93c5fd; margin-bottom: 4px; padding-bottom: 4px; color: var(--hsp-morkast); font-weight: 700; }
.hsp-summa-total strong { font-size: 1.45rem; font-weight: 800; }
.hsp-ned { border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #f1f5f9; border: 1px solid var(--hsp-kant); border-left: 5px solid #94a3b8; font-variant-numeric: tabular-nums; }
.hsp-ned > strong { display: block; font-size: 0.92rem; color: var(--hsp-morkast); }
.hsp-ned > span { display: block; font-size: 0.76rem; color: var(--hsp-mork); line-height: 1.35; margin-bottom: 4px; }
.hsp-ned .hsp-summa-rad { font-size: 0.8rem; }
.hsp-ned[data-lage="ok"] { background: #f0fdf4; border-left-color: #16a34a; }
.hsp-ned[data-lage="forskjutet"], .hsp-ned[data-lage="drankt"] { background: #fffbeb; border-left-color: #d97706; }
.hsp-ned[data-lage="ingen"], .hsp-ned[data-lage="over"], .hsp-ned[data-lage="fullt"] { background: #fef2f2; border-left-color: #dc2626; }
.hsp-langd { background: #f8fafc; border: 1px solid var(--hsp-kant); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.hsp-langd b { font-weight: inherit; }
.hsp-langd .hsp-summa-rad { font-size: 0.78rem; color: var(--hsp-dampad); }
.hsp-langd-not { font-size: 0.72rem; color: var(--hsp-dampad); line-height: 1.35; margin: 3px 0 0; }
.hsp-langd .hsp-langd-total { font-size: 0.84rem; font-weight: 700; color: var(--hsp-morkast); border-bottom: 1px solid var(--hsp-kant); margin-bottom: 2px; padding-bottom: 3px; }
.hsp-tal-rutnat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.hsp-tal { background: #f1f5f9; border-radius: 6px; padding: 4px 8px; min-width: 0; font-variant-numeric: tabular-nums; }
.hsp-tal span { display: block; font-size: 0.7rem; color: var(--hsp-dampad); }
.hsp-tal strong { font-size: 0.95rem; color: var(--hsp-mork); overflow-wrap: anywhere; }
.hsp-tal b { font-weight: 700; }
.hsp-liten { font-size: 0.74rem; color: var(--hsp-dampad); line-height: 1.4; margin: 8px 0 0; }
.hsp-liten strong { color: var(--hsp-mork); }

/* Texterna under arbetsytan */
.hsp-om { max-width: 1000px; margin: 0 auto; padding: 16px 12px 0; }
.hsp-info { background: #f8fafc; border: 1px solid #cbd5e1; border-left: 4px solid var(--hsp-primar); padding: 14px; border-radius: 6px; font-size: 0.85rem; color: #475569; line-height: 1.5; }
.hsp-info > strong:first-child { color: var(--hsp-mork); font-size: 0.9rem; }
.hsp-info p { margin: 6px 0; }
.hsp-info ol { margin: 8px 0 0; padding-left: 20px; }
.hsp-friskrivning { margin-top: 14px; font-size: 0.78rem; color: var(--hsp-dampad); border-top: 1px solid var(--hsp-kant); padding-top: 10px; line-height: 1.4; }

/* Utskriftsblocket fylls av skriptet och syns bara på papper. Gäster får bara en uppmaning att logga in. */
.hsp-utskrift, .hsp-utskrift-las { display: none; }

/* Mina beräkningar och dialogerna */
.hsp-dlg { border: none; border-radius: 12px; padding: 0; color: var(--hsp-text); width: min(620px, calc(100% - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.hsp-dlg::backdrop { background: rgba(15, 23, 42, 0.55); }
.hsp-dlg-inre { padding: 20px; }
.hsp-dlg-inre h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--hsp-mork); }
.hsp-dlg-inre p { margin: 8px 0; font-size: 0.9rem; line-height: 1.45; }
.hsp-dlg-inre p.hsp-dlg-liten, .hsp-dlg-liten { font-size: 0.8rem; color: var(--hsp-dampad); line-height: 1.4; }
.hsp-dlg-etikett { display: block; font-weight: 600; font-size: 0.86rem; margin: 10px 0 3px; }
.hsp-sida .hsp-dlg input[type="text"], .hsp-sida .hsp-dlg input[type="date"], .hsp-sida .hsp-dlg input[type="search"] {
    width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.9rem; font-family: inherit; background: #fff; color: var(--hsp-text);
}
.hsp-dlg-inre p.hsp-fel { color: #b91c1c; font-size: 0.82rem; margin: 4px 0; }
.hsp-mina-rad { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hsp-kant); }
.hsp-mina-inne { flex: 1; min-width: 0; }
.hsp-mina-namn { font-weight: 700; color: var(--hsp-mork); overflow-wrap: anywhere; }
.hsp-mina-knappar { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.hsp-mina-sok { margin: 8px 0; }
.hsp-knapp-fara { background: #fff; border-color: #fca5a5; color: #b91c1c; }
.hsp-knapp-fara:hover { background: #fef2f2; color: #991b1b; }
.hsp-dlg-knappar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.hsp-dlg-hoger { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.hsp-knapp {
    display: inline-block; border: 1px solid #cbd5e1; background: #f1f5f9; color: var(--hsp-mork); padding: 6px 11px; border-radius: 6px; font-size: 0.84rem;
    font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none; text-align: center;
}
.hsp-knapp:hover { background: #e2e8f0; color: var(--hsp-mork); text-decoration: none; }
.hsp-knapp-primar { background: var(--hsp-primar); border-color: var(--hsp-primar); color: #fff; }
.hsp-knapp-primar:hover { background: var(--hsp-primar-hover); color: #fff; }

/* Laptop och surfplatta: indata till vänster, sidovyn överst och resultaten under den. Resultaten får inte plats i en låg ruta, så här
   får sidan bli högre än fönstret och rulla som vanligt. */
@media screen and (max-width: 1250px) {
    .hsp-yta {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "indata mitt" "indata resultat";
        height: auto;
        min-height: var(--hsp-hojd, 640px);
    }
    .hsp-indata { grid-area: indata; }
    .hsp-mitt { grid-area: mitt; }
    .hsp-resultat { grid-area: resultat; padding-bottom: 10px; overflow: visible; }
    .hsp-rityta { flex: none; aspect-ratio: 900 / 400; }
    .hsp-tal-rutnat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobil: en spalt. Sidovyn ligger kvar överst medan man ändrar, om skärmen är tillräckligt hög. */
@media screen and (max-width: 900px) {
    .hsp-yta { display: flex; flex-direction: column; height: auto; padding: 8px 8px 0; }
    .hsp-mitt { display: contents; }
    .hsp-vy { order: 1; flex: none; }
    .hsp-indata { order: 2; }
    .hsp-hjalp { order: 3; }
    .hsp-resultat { order: 4; padding-bottom: 34px; }
    .hsp-spalt { overflow: visible; }
    .hsp-rityta { aspect-ratio: auto; height: 220px; }
    .hsp-fotnot { display: none; }
    .hsp-tal-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hsp-topp h1 { white-space: normal; }
    .hsp-status { flex: 1 1 100%; }
    .hsp-tk { flex: 1 1 auto; }
    .hsp-knappar { width: 100%; }
    .hsp-mina-rad { flex-direction: column; align-items: stretch; }
    .hsp-mina-knappar { justify-content: flex-start; }
}
@media screen and (max-width: 900px) and (min-height: 600px) {
    .hsp-vy { position: sticky; top: 62px; z-index: 20; }
}

/* ---------- Utskrift ---------- */

@media print {
    @page { size: A4 portrait; margin: 10mm 12mm; }
    header, footer, nav, .hsp-topp, .hsp-meddelande, .hsp-dlg, .hsp-indata, .hsp-hjalp, .hsp-info { display: none !important; }
    body { background: #fff !important; color: #000; font-size: 9pt; }
    .hsp-yta { display: block; height: auto; padding: 0; }
    .hsp-resultat { height: auto; overflow: visible; border: none; padding: 0; margin-top: 3mm; }
    .hsp-utskrift { display: block; }
    .hsp-utskrift h2 { font-size: 13pt; margin: 0 0 1mm; border-bottom: 2px solid #000; padding-bottom: 1mm; }
    .hsp-utskrift p { margin: 1mm 0; font-size: 8pt; overflow-wrap: anywhere; }
    .hsp-utskrift table { display: block; columns: 2; column-gap: 4mm; font-size: 8.5pt; margin-top: 2mm; }
    .hsp-utskrift tr { display: flex; break-inside: avoid; border-bottom: 1px solid #bbb; }
    .hsp-utskrift th { flex: 0 0 52%; padding: 0.4mm 1mm 0.4mm 0; text-align: left; }
    .hsp-utskrift td { flex: 1 1 auto; padding: 0.4mm 0; text-align: left; }
    .hsp-mitt { display: block; margin-top: 3mm; }
    .hsp-vy { display: block; background: #0f172a; break-inside: avoid; padding: 1mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hsp-vy-rubrik, .hsp-vyval { display: none; }
    .hsp-energi-text, .hsp-krav-text { stroke: none; }
    .hsp-rityta { position: static; aspect-ratio: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hsp-rityta svg { position: static; width: 100%; height: auto; }
    .hsp-fotnot { font-size: 7.5pt; }
    .hsp-resultat h2 { font-size: 11pt; margin-bottom: 1mm; }
    .hsp-typ, .hsp-varning, .hsp-summa, .hsp-ned, .hsp-langd { padding: 1mm 2mm; margin-bottom: 1.5mm; }
    .hsp-ned > strong { font-size: 9.5pt; }
    .hsp-ned > span { font-size: 8pt; }
    .hsp-ned .hsp-summa-rad, .hsp-langd .hsp-summa-rad { font-size: 8pt; }
    #hsp-ned-rader, #hsp-langd, #hsp-b-rader, #hsp-b-block { columns: 2; column-gap: 6mm; }
    .hsp-langd-not { font-size: 7.5pt; margin: 0; }
    .hsp-med-bas #hsp-langd { display: none; }
    .hsp-typ strong { font-size: 10pt; }
    .hsp-typ span, .hsp-varning, .hsp-varning strong { font-size: 8pt; }
    .hsp-summa-rad { font-size: 8.5pt; }
    .hsp-summa-total strong { font-size: 13pt; }
    .hsp-tal-rutnat { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1mm; }
    .hsp-tal-in { display: none; }
    .hsp-tal { padding: 0.6mm 1mm; }
    .hsp-tal span { font-size: 7pt; }
    .hsp-tal strong { font-size: 9pt; }
    .hsp-liten { font-size: 8pt; margin-top: 1.5mm; }
    .hsp-summa, .hsp-typ, .hsp-tal, .hsp-varning, .hsp-ned, .hsp-langd { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
    .hsp-om { max-width: 100%; padding: 0; margin-top: 3mm; }
    .hsp-friskrivning { font-size: 7.5pt; color: #333; border-top: 1px solid #000; margin-top: 2mm; padding-top: 1mm; }
    .hsp-gast .hsp-yta, .hsp-gast .hsp-utskrift, .hsp-gast .hsp-om { display: none !important; }
    .hsp-gast .hsp-utskrift-las { display: block; font-size: 12pt; }
}