/* =====================================================================
   Hjälpmedlen – färger och inställningar
   css/study-tools.css

   Läggs till av js/study-tools.js själv (fönstren kan öppnas på vilken
   sida som helst). Bygger på css/provverkstad.css men gäller bara det som
   har klassen .st-farg (verktyget), .st-fonster (det flytande fönstret)
   eller .st-inst (inställningarna) – Provverkstadens egna verktyg i
   provet påverkas inte.

   --st-acc  verktygets accentfärg, satt av js/study-tools.js
             (miniräknare orange, kulram röd, räknestavar lila …).
   Materialets färger (kulor, stavar, block) är fasta med flit – de ska
   se ut som riktigt material i alla teman.
   ===================================================================== */

:is(main, #pv-lager) .st-farg {
    --st-acc: #f97316;
    --st-acc-svag: color-mix(in srgb, var(--st-acc) 16%, transparent);
    --st-acc-kant: color-mix(in srgb, var(--st-acc) 55%, var(--color-border-subtle));
}

/* ── Gemensamt ─────────────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-knapp {
    border-color: var(--st-acc-kant);
    background: var(--st-acc-svag);
    font-weight: 600;
}
:is(main, #pv-lager) .st-farg .st-knapp:hover { border-color: var(--st-acc); background: color-mix(in srgb, var(--st-acc) 26%, transparent); }
:is(main, #pv-lager) .st-farg .st-knapp-farg {
    background: var(--b); border-color: color-mix(in srgb, var(--b) 70%, #000); color: #111;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
:is(main, #pv-lager) .st-farg .st-knapp-farg:hover { filter: brightness(1.08); background: var(--b); }
:is(main, #pv-lager) .st-farg .st-summa {
    display: inline-block; margin: 8px 0 6px; padding: 3px 12px;
    border-radius: 999px; font-weight: 700; font-size: .95rem;
    background: var(--st-acc-svag); border: 1px solid var(--st-acc-kant);
    color: var(--color-text-primary);
}
:is(main, #pv-lager) .st-farg .st-summa[hidden] { display: none; }
:is(main, #pv-lager) .st-farg .st-summa-liten { margin: 0 0 0 6px; padding: 1px 9px; font-size: .8rem; }

/* Färgväljare: runda knappar, vald har ring */
:is(main, #pv-lager) .st-farg .st-fargrad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
:is(main, #pv-lager) .st-farg .st-fargknapp {
    width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--f); border: 2px solid rgba(0, 0, 0, .35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3); font-size: 15px; line-height: 1;
    transition: transform .12s;
}
:is(main, #pv-lager) .st-farg .st-fargknapp:hover { transform: scale(1.1); }
:is(main, #pv-lager) .st-farg .st-fargknapp[aria-checked="true"] {
    transform: scale(1.12);
    outline: 3px solid var(--st-acc); outline-offset: 2px;
}
:is(main, #pv-lager) .st-farg .st-suddknapp { background: var(--color-bg-tertiary); border-color: var(--color-border-subtle); }

/* ── Miniräknaren ──────────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-mr-utrakning {
    min-height: 1.2em; text-align: right; font-size: .85rem; opacity: .75;
    padding: 0 12px 2px; font-family: 'Orbitron', sans-serif; letter-spacing: .5px;
}
:is(main, #pv-lager) .st-farg .st-mr-display {
    background: linear-gradient(135deg, color-mix(in srgb, var(--st-acc) 22%, var(--color-bg-tertiary)), var(--color-bg-tertiary));
    border: 2px solid var(--st-acc-kant); border-radius: 12px; font-size: 1.8rem;
}
:is(main, #pv-lager) .st-farg .st-mr .pv-knappsats button {
    border-radius: 12px; font-weight: 700; font-size: 1.15rem; border-width: 2px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .28); transition: transform .06s, box-shadow .06s, filter .1s;
}
:is(main, #pv-lager) .st-farg .st-mr .pv-knappsats button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
:is(main, #pv-lager) .st-farg .st-mr .pv-knappsats button:hover { filter: brightness(1.08); }
/* Regnbåge: varje siffra har sin färg (--i 0–10) */
:is(main, #pv-lager) .st-farg .st-mr-regnbage .st-mr-siffra {
    background: hsl(calc(var(--i, 0) * 33) 85% 62%); border-color: hsl(calc(var(--i, 0) * 33) 70% 42%); color: #111;
}
:is(main, #pv-lager) .st-farg .st-mr-regnbage .pv-op { background: #1f2937; border-color: #f97316; color: #fdba74; }
:is(main, #pv-lager) .st-farg .st-mr-regnbage .st-mr-fn { background: #fde68a; border-color: #d97706; color: #111; }
:is(main, #pv-lager) .st-farg .st-mr-regnbage .st-mr-lika { background: #f97316; border-color: #c2410c; color: #fff; }
/* Hav */
:is(main, #pv-lager) .st-farg .st-mr-hav .st-mr-siffra { background: #bae6fd; border-color: #0284c7; color: #0c4a6e; }
:is(main, #pv-lager) .st-farg .st-mr-hav .pv-op { background: #0d9488; border-color: #115e59; color: #fff; }
:is(main, #pv-lager) .st-farg .st-mr-hav .st-mr-fn { background: #99f6e4; border-color: #0f766e; color: #134e4a; }
:is(main, #pv-lager) .st-farg .st-mr-hav .st-mr-lika { background: #2563eb; border-color: #1e3a8a; color: #fff; }
/* Godis */
:is(main, #pv-lager) .st-farg .st-mr-godis .st-mr-siffra { background: #fbcfe8; border-color: #db2777; color: #831843; }
:is(main, #pv-lager) .st-farg .st-mr-godis .pv-op { background: #a855f7; border-color: #6b21a8; color: #fff; }
:is(main, #pv-lager) .st-farg .st-mr-godis .st-mr-fn { background: #e9d5ff; border-color: #9333ea; color: #581c87; }
:is(main, #pv-lager) .st-farg .st-mr-godis .st-mr-lika { background: #ec4899; border-color: #9d174d; color: #fff; }
/* Klassisk: som förut, bara knapparna lite tydligare */
:is(main, #pv-lager) .st-farg .st-mr-klassisk .pv-knappsats button { box-shadow: none; border-width: 1px; font-weight: 500; }

/* ── Kulramen ──────────────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-kulram {
    background: linear-gradient(180deg, #a16207, #78350f); border-radius: 12px;
    padding: 8px 10px; box-shadow: inset 0 0 0 4px #92400e, 0 3px 8px rgba(0, 0, 0, .3);
}
:is(main, #pv-lager) .st-farg .st-kulram .pv-kulrad {
    height: 24px; gap: 3px; position: relative;
    background: linear-gradient(transparent 46%, #d6d3d1 46% 54%, transparent 54%);   /* tråden */
}
:is(main, #pv-lager) .st-farg .st-kula {
    width: 20px; height: 20px; border: none;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 38%), var(--k);
    box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
    transition: transform .1s;
}
:is(main, #pv-lager) .st-farg .st-kula:hover { transform: scale(1.12); }
:is(main, #pv-lager) .st-farg .st-kula-b { filter: saturate(1.1) brightness(.92); }
:is(main, #pv-lager) .st-farg .st-kulram .pv-kulspalt { border: none; }
:is(main, #pv-lager) .st-farg .st-kulsiffra {
    min-width: 26px; margin-left: 6px; text-align: center; font-weight: 800; font-size: .8rem;
    color: #fef3c7; background: rgba(0, 0, 0, .35); border-radius: 999px; padding: 1px 5px;
}

/* ── Räknestavarna ─────────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-stav {
    height: 24px; background: var(--s); border-radius: 5px; font-weight: 800; font-size: .78rem;
    border: 1px solid color-mix(in srgb, var(--s) 60%, #000);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .1s;
}
:is(main, #pv-lager) .st-farg .st-stav:hover { transform: translateY(-2px); }
/* Rutor: en lodrät linje per enhet (stavens längd = --n rutor) */
:is(main, #pv-lager) .st-farg .st-stav-rutor {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 1px, transparent 1px);
    background-size: 20px 100%; background-position: -1px 0;
}
:is(main, #pv-lager) .st-farg .st-stavpalett { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
:is(main, #pv-lager) .st-farg .pv-stavyta { border: 2px dashed var(--st-acc-kant); background: var(--st-acc-svag); border-radius: 12px; }

/* ── Tiobasmaterialet ──────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-block {
    background-color: var(--b); border-color: color-mix(in srgb, var(--b) 55%, #000);
    border-radius: 2px; box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
}
:is(main, #pv-lager) .st-farg .st-blockyta { box-sizing: border-box; max-width: 100%; border: 2px dashed var(--st-acc-kant); background: var(--st-acc-svag); border-radius: 12px; }
:is(main, #pv-lager) .st-farg .st-blockkol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
:is(main, #pv-lager) .st-farg .st-blockkolumn {
    border-radius: 10px; padding: 6px; min-height: 70px;
    background: color-mix(in srgb, var(--b) 14%, transparent); border: 1px solid color-mix(in srgb, var(--b) 45%, transparent);
}
:is(main, #pv-lager) .st-farg .st-kolrubrik { display: block; font-size: .74rem; font-weight: 800; margin-bottom: 5px; }
:is(main, #pv-lager) .st-farg .st-blocklada { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; }

/* ── Hundrarutan ───────────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-hundra { gap: 3px; }
:is(main, #pv-lager) .st-farg .st-hundra button { border-radius: 6px; font-weight: 600; transition: transform .08s; }
:is(main, #pv-lager) .st-farg .st-hundra button:hover { transform: scale(1.08); border-color: var(--st-acc); }
:is(main, #pv-lager) .st-farg .st-hundra button[aria-pressed="true"] {
    background: var(--m); border-color: color-mix(in srgb, var(--m) 60%, #000); color: #111; font-weight: 800;
}
/* Hjälplinjer */
:is(main, #pv-lager) .st-farg .st-monster-rader button:is([data-rad="1"], [data-rad="3"], [data-rad="5"], [data-rad="7"], [data-rad="9"]):not([aria-pressed="true"]) {
    background: var(--st-acc-svag);
}
:is(main, #pv-lager) .st-farg .st-monster-femmor button:is([data-kol="4"], [data-kol="9"]):not([aria-pressed="true"]) {
    background: var(--st-acc-svag); border-color: var(--st-acc-kant);
}
/* Dolda tal: syns först när rutan markeras */
:is(main, #pv-lager) .st-farg .st-dolda button:not([aria-pressed="true"]) { color: transparent; }

/* ── Bråkcirklarna ─────────────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .st-braklista { display: flex; flex-wrap: wrap; gap: 10px; }
:is(main, #pv-lager) .st-farg .st-brakkort {
    flex: 1 1 180px; padding: 8px 10px; border-radius: 12px; margin: 0;
    background: color-mix(in srgb, var(--d) 10%, transparent); border: 1px solid color-mix(in srgb, var(--d) 45%, transparent);
}
:is(main, #pv-lager) .st-farg .st-brakfigur svg { display: block; margin: 6px auto; max-width: 100%; height: auto; }
:is(main, #pv-lager) .st-farg .pv-brakdel { stroke-width: 2; transition: fill .15s; }
:is(main, #pv-lager) .st-farg .pv-brakdel.pv-klickbar:hover { fill: color-mix(in srgb, var(--d) 30%, transparent); }
:is(main, #pv-lager) .st-farg .pv-brakdel.pv-fargad { fill: var(--d); }

:is(main, #pv-lager) .st-farg .st-brakrad { display: flex; align-items: center; justify-content: center; gap: 8px; }
:is(main, #pv-lager) .st-farg .st-brakrad .st-summa { margin: 4px 0; }
:is(main, #pv-lager) .st-farg .st-stegknapp { min-width: 34px; font-size: 1.1rem; font-weight: 800; padding: 2px 8px; border-color: var(--d); background: color-mix(in srgb, var(--d) 20%, transparent); }
:is(main, #pv-lager) .st-farg .st-braketikett { fill: var(--color-text-primary); font-weight: 800; pointer-events: none; font-family: 'Exo 2', sans-serif; }
:is(main, #pv-lager) .st-farg .pv-fargad + .st-braketikett { fill: #111; }
:is(main, #pv-lager) .st-farg .st-brakjamfor-rad { display: block; width: fit-content; margin: 10px auto 4px; font-size: 1.25rem; padding: 4px 18px; letter-spacing: .5px; }
:is(main, #pv-lager) .st-farg .st-brakjamfor-rad[hidden] { display: none; }
:is(main, #pv-lager) .st-farg .st-form-tallinje svg, :is(main, #pv-lager) .st-farg .st-form-rektangel svg { width: 100%; max-width: 320px; }

/* ── Kladdbladet: papper ───────────────────────────────────────────── */
:is(main, #pv-lager) .st-farg .pv-kladd { border: 2px solid var(--st-acc-kant); border-radius: 12px; }
:is(main, #pv-lager) .st-farg .st-papper-rutat {
    background-image: linear-gradient(color-mix(in srgb, var(--st-acc) 30%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--st-acc) 30%, transparent) 1px, transparent 1px);
    background-size: 4.4% 6.3%;
}
:is(main, #pv-lager) .st-farg .st-papper-linjerat {
    background-image: linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, var(--st-acc) 40%, transparent) 0);
    background-size: 100% 8.6%;
}
:is(main, #pv-lager) .st-farg .st-papper-prickat {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--st-acc) 55%, transparent) 1.4px, transparent 1.6px);
    background-size: 4.4% 6.3%;
}

/* ── Det flytande fönstret ─────────────────────────────────────────── */
#pv-lager .st-fonster { border: 2px solid var(--st-acc); overflow: hidden; }
#pv-lager .st-fonster .pv-vhuvud {
    background: linear-gradient(90deg, var(--st-acc), color-mix(in srgb, var(--st-acc) 55%, #7c3aed));
    color: #fff; border-bottom: none;
}
#pv-lager .st-fonster .pv-vtitel { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
#pv-lager .st-fonster .pv-vhuvud .pv-knapp {
    background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: #fff;
}
#pv-lager .st-fonster .pv-vhuvud .pv-knapp:hover,
#pv-lager .st-fonster .pv-vhuvud .pv-knapp[aria-expanded="true"] { background: rgba(255, 255, 255, .35); }
#pv-lager .st-vinstpanel {
    padding: 8px 12px; border-bottom: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--st-acc) 8%, var(--color-bg-secondary));
    max-height: 45%; overflow: auto; flex: 0 0 auto;
}

/* ── Inställningarna (menysidan och ⚙ i fönstret) ──────────────────── */
:is(main, #pv-lager) .st-inst { display: grid; gap: 12px; }
:is(main, #pv-lager) .st-inst .st-instnamn { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 5px; opacity: .85; }
:is(main, #pv-lager) .st-inst .st-seg { display: flex; flex-wrap: wrap; gap: 6px; }
:is(main, #pv-lager) .st-inst .st-segknapp {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .85rem; font-weight: 600;
    background: var(--color-bg-tertiary); color: var(--color-text-primary);
    border: 2px solid var(--color-border-subtle); transition: border-color .12s, background .12s;
}
:is(main, #pv-lager) .st-inst .st-segknapp:hover { border-color: var(--st-acc-kant); }
:is(main, #pv-lager) .st-inst .st-segknapp[aria-checked="true"] {
    background: color-mix(in srgb, var(--st-acc) 22%, var(--color-bg-tertiary));
    border-color: var(--st-acc);
}
:is(main, #pv-lager) .st-inst .st-segknapp[aria-checked="true"]::after { content: "✓"; font-weight: 900; color: var(--st-acc); }
:is(main, #pv-lager) .st-inst .st-segknapp:focus-visible { outline: 3px solid var(--st-acc); outline-offset: 2px; }
:is(main, #pv-lager) .st-inst .st-prov { display: inline-flex; }
:is(main, #pv-lager) .st-inst .st-prov i {
    width: 12px; height: 12px; border-radius: 50%; margin-left: -4px;
    border: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px var(--color-bg-tertiary);
}
:is(main, #pv-lager) .st-inst .st-prov i:first-child { margin-left: 0; }

/* Den fristående sidan: verktyget i en ram i sin accentfärg */
main .st-verktygsyta:has(> .st-farg) { border-top: 4px solid var(--st-sida-acc, var(--color-accent-gold)); }

@media (prefers-reduced-motion: reduce) {
    :is(main, #pv-lager) .st-farg * { transition: none !important; }
}