/* Det som bara finns i Skolan. Grunden (färger, typsnitt, flikraden, knapparna) är sajt.css ur site/bygg.py. */
.skolan-flikar{grid-template-columns:repeat(4,minmax(0,1fr))}
.skolan-flikar.ut{grid-template-columns:repeat(2,minmax(0,1fr))}
.utform{display:none}
.lankknapp{background:none;border:0;color:var(--mint);font:inherit;font-size:14px;min-height:44px;padding:0 8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.liten{font-size:14px}
.fel{color:#FF8A73}
.ratt{color:var(--mint)}
.notera{color:var(--dampad)}
.tom{border:1px dashed var(--linje);border-radius:6px;padding:24px 16px;color:var(--dampad);text-align:center}
.fortsatt{display:grid;gap:2px;padding:16px 18px;margin:8px 0 16px;border:1px solid var(--mint);border-radius:8px;text-decoration:none;color:var(--text);background:var(--yta)}
.fortsatt .etikett{margin:0}
.framsteg{margin:8px 0 0;max-width:40rem}
.framsteg p{margin:0 0 4px}
progress.matare{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:4px;background:var(--linje);overflow:hidden;color:var(--mint)}
progress.matare::-webkit-progress-bar{background:var(--linje);border-radius:4px}
progress.matare::-webkit-progress-value{background:var(--mint);border-radius:4px}
progress.matare::-moz-progress-bar{background:var(--mint);border-radius:4px}
.modullista{list-style:none;margin:0;padding:0;max-width:44rem}
.modullista li{display:grid;grid-template-columns:2.4rem 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linje)}
.modulnr{font-family:var(--mono);font-size:14px;color:var(--mint);padding-top:10px}
.modultext{display:grid;gap:4px;min-width:0}
.modullista .kommande .punkt-rubrik{color:var(--dampad)}
.modullista .kommande .modulnr{color:var(--dampad)}
.innehall-lista li{grid-template-columns:2.4rem 1fr}
.modulnav{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding-top:16px;border-top:1px solid var(--linje)}
.modulnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--linje);border-radius:22px;text-decoration:none;color:var(--text);font-size:14px}

/* modultexten */
.modul{max-width:44rem}
.modul h1{font-size:clamp(1.9rem,8vw,2.8rem)}
.modul h2{margin-top:1.8em}
.modul img{display:block;max-width:100%;height:auto;border-radius:6px;margin:12px 0 20px;background:var(--yta)}
.modul ul,.modul ol{padding-left:1.3em}
.modul li{margin:.25em 0}
.media{margin:12px 0 24px}
.media video,.media audio,.video-plats video{display:block;width:100%;border-radius:6px;background:#000}
.media-plats,.video-plats p{border:1px dashed var(--linje);border-radius:6px;padding:14px 16px;margin:0}
details.facit{border:1px solid var(--linje);border-radius:6px;padding:0 16px;margin:16px 0;background:var(--yta)}
details.facit>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;color:var(--mint);font-weight:600}
details.facit[open]{padding-bottom:12px}

/* uppgifterna */
.uppgift{border:1px solid var(--linje);border-radius:8px;padding:14px 16px;margin:20px 0;background:var(--yta)}
.uppgift.klar{border-color:#1BA583}
.klar-markering{color:var(--mint);font-weight:600}
.uppgift .fraga{font-weight:600}
.svarsrad{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.svarsrad label{flex-basis:100%}
.uppgift input[type=text]{font:inherit;font-family:var(--mono);font-size:17px;min-height:48px;padding:0 12px;border:1px solid var(--linje);border-radius:6px;background:var(--bg);color:var(--text);width:min(14rem,100%)}
.uppgift button{font:inherit;cursor:pointer;background:none}
.uppgift .knapp-fylld{background:var(--mint)}
.aterkoppling-ruta{margin-top:10px}
.flerval fieldset{border:0;margin:0;padding:0}
.flerval legend{font-weight:600;margin-bottom:6px}
.alternativ{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;cursor:pointer}
.alternativ input{width:20px;height:20px;accent-color:var(--mint);flex:none}
.reglage{display:grid;gap:10px;margin:8px 0}
.reglage-rad{display:grid;gap:4px}
.reglage-rad input[type=range]{width:100%;min-height:44px;accent-color:var(--mint)}
.kalkyl-ut{margin:8px 0 0}
.kalkyl-ut>div{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--linje)}
.kalkyl-ut dt{font-size:14px;color:var(--dampad)}
.kalkyl-ut dd{margin:0;font-family:var(--mono);font-size:16px;font-weight:600}

/* grafövningarna */
.graf-mono{font-family:var(--mono)}
.graf-yta{position:relative;width:100%;margin:8px 0;touch-action:none;user-select:none;-webkit-user-select:none}
.genomgang .graf-yta{touch-action:pan-y}
.pekare{position:absolute;left:0;top:0;width:28px;height:28px;margin:-3px 0 0 -4px;pointer-events:none;opacity:0;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.pekare.synlig{opacity:1}
.graf-svg{display:block;width:100%;height:auto;background:var(--bg);border:1px solid var(--linje);border-radius:6px;cursor:crosshair}
.graf-svg:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.genomgang .graf-svg{cursor:default}
.verktyg{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.verktyg-knapp{min-height:44px;padding:0 14px;border:1px solid var(--linje);border-radius:22px;color:var(--text);font-family:var(--mono);font-size:13.5px}
.verktyg-knapp[aria-pressed=true]{border-color:var(--mint);background:rgba(60,240,197,.12);color:var(--mint)}
.graf-hjalp{font-size:14px;margin:0}
.markeringslista{list-style:none;margin:6px 0;padding:0}
.markeringslista li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--linje)}
.markeringslista li{flex-wrap:nowrap}
.markeringslista input[type=text]{width:6.5rem;min-height:44px;font-size:16px}
.markeringslista .lankknapp{margin-left:auto}
.markering-namn{min-width:4.6rem;font-size:14px}
.prick{width:12px;height:12px;border-radius:6px;display:inline-block;background:var(--text)}
.p-stöd{background:#089981}.p-motstånd{background:#f23645}.p-band,.p-trend,.p-kanal{background:#2962ff}.p-snitt{background:#6e9ef0}.p-snitt50{background:#d4a72c}.p-saljgrans{background:#ff9800}.p-mal{background:#00bcd4}
.graf-svar h4{margin:14px 0 4px;font-size:1rem}
.resultat{font-weight:700;margin:12px 0 0}
.aterkoppling{margin:0;padding-left:1.2em}
.aterkoppling li{margin:6px 0}
.genomgang{border-bottom:1px solid var(--linje);padding-bottom:16px;margin-bottom:16px}
.genomgang-text{min-height:5.2em;margin:6px 0}
.spelare{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px}
.spelare .knapp{min-height:44px;padding:0 16px}
.spelare .knapp:disabled{opacity:.4}
.video-plats{margin:6px 0}
.rita{animation:rita 1.4s ease-out forwards}
.rita.lang{animation-duration:2.6s}
.tona{animation:tona .9s ease-out both}
@keyframes rita{to{stroke-dashoffset:0}}
@keyframes tona{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rita,.tona{animation:none;stroke-dashoffset:0}}
@media (min-width:720px){
  .utform{display:block}
  .skolan-flikar.ut{display:flex}
  .markeringslista input[type=text]{width:10rem}
}
.ut-nederst{margin:28px 0 0}

/* FIRE-kalkylen */
@media (max-width:719px){.fire-grid,.fire-grid.fire-tre{grid-template-columns:minmax(0,1fr)}}
.fire-markning{border-left:3px solid var(--mint);padding-left:12px}
.fire-val{display:grid;gap:12px;margin:8px 0 14px}
.fire-kryss{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600}
.fire-kryss input{width:20px;height:20px;accent-color:var(--mint);flex:none}
.fire-inmatning select{font:inherit;min-height:48px;padding:0 12px;background:var(--yta);color:var(--text);border:1px solid var(--linje);border-radius:6px}
.fire-etikett{font-family:var(--mono);font-size:12px;font-weight:600}
.fire-etikett.fire-lag{fill:var(--neg)}.fire-etikett.fire-mellan{fill:var(--bla)}.fire-etikett.fire-hog{fill:var(--mint)}
.fire-maletikett{fill:var(--text)}
.fire-nyckel{display:inline-flex;align-items:center;gap:6px;margin-right:10px;white-space:nowrap}
.fire-nyckel::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--text)}
/* Verktyg, Mina analyser och Månadens fall */
.verktygslista,.fall-lista{list-style:none;margin:0;padding:0;max-width:44rem}
.bestall{display:grid;gap:14px;max-width:34rem}
.typval{border:0;margin:0;padding:0}
.typval legend{font-weight:600;margin-bottom:4px}
.falt-rad{display:grid;gap:6px}
.falt-rad label{font-weight:600}
.falt-rad p{margin:0}
.falt-rad input{font:inherit;font-size:17px;min-height:48px;padding:0 12px;border:1px solid var(--linje);border-radius:6px;background:var(--yta);color:var(--text);width:100%;box-sizing:border-box}
.falt-rad input:focus{outline:2px solid var(--mint);outline-offset:1px;border-color:var(--mint)}
#b-fri{font-family:var(--mono);text-transform:uppercase}
.bestall .knapp{justify-self:start;cursor:pointer;font:inherit;font-weight:600}
.analys-steg{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.analys-steg li{font-family:var(--mono);font-size:12px;padding:4px 10px;border:1px solid var(--linje);border-radius:999px;color:var(--dampad)}
.analys-steg li.gjort{border-color:var(--mint);color:var(--mint)}
.analys-steg li[aria-current=step]{background:rgba(60,240,197,.12)}
.analyslista li{grid-template-columns:1fr}
.analys-stoppad .punkt-rubrik{color:var(--dampad)}
.tabell{overflow-x:auto;margin:12px 0 20px}
.tabell table{border-collapse:collapse;font-size:15px;min-width:100%}
.tabell th,.tabell td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linje);vertical-align:top}
.tabell th{color:var(--dampad);font-weight:600}
.modul blockquote{margin:16px 0;padding:4px 0 4px 14px;border-left:3px solid var(--linje);color:var(--dampad)}
.modul code{font-family:var(--mono);font-size:.92em}
.inte-rad{max-width:44rem;margin:28px 0 0;padding:14px 16px;border:1px solid var(--linje);border-radius:8px;background:var(--yta);font-size:15px}
.inte-rad p{margin:0}

/* FIRE-kalkylen, forts. */
.fire-nyckel.fire-lag::before{background:var(--neg)}.fire-nyckel.fire-mellan::before{background:var(--bla)}.fire-nyckel.fire-hog::before{background:var(--mint)}