/* =====================================================================
   MUSIKINSTRUMENTEN – gemensam stil
   css/ks-instrument.css   (bass, drums, flute, guitar, harp, piano,
                            saxophone, trombone, ukulele, violin, xylophone)

   Sidan följer temat (rymd, hav, korallrev, ljust, jul): bakgrunden,
   vänsterpanelens rubrik, beskrivning, tips och Tillbaka-knappen.

   Själva instrumentet står på en "konsertscen" (.ks-scen) med fasta,
   mörka färger i alla teman – precis som schackbrädet och kartan.
   Instrumenten är ritade för mörk bakgrund (guld, elfenben, neon), och
   deras egna reglage i vänsterpanelen ligger i en lika mörk
   reglagepanel (.ks-reglage). Scenens färg tas från instrumentets egen
   --bg, så varje instrument behåller sin känsla.

   Förut låg instrumentens regler för *, body och :root direkt på hela
   sidan: de nollställde marginaler överallt, målade över temats
   bakgrund och la mönster över hela fönstret. De är nu avgränsade till
   scenen (se kommentaren överst i varje instruments <style>).
   ===================================================================== */

/* ── Vänsterpanelen – följer temat ───────────────────────────────── */
main .left-container .instr-title {
    margin: 4px 0 6px; line-height: 1.15; text-wrap: balance;
    font: 700 clamp(1.4rem, 2.4vw, 2rem) 'Orbitron', sans-serif; letter-spacing: .04em;
    color: var(--color-accent-gold);
}
main .left-container .instr-subtitle {
    margin: 0 0 14px; font: 600 .85rem/1.5 'Exo 2', sans-serif; letter-spacing: .02em;
    color: var(--color-text-secondary); text-transform: none; opacity: 1;
}
main .left-container .instr-hint {
    margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
    font: 400 .82rem/1.6 'Exo 2', sans-serif; letter-spacing: 0; text-transform: none; opacity: 1;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary); border: 1px solid var(--color-border-subtle);
}
/* Tillbaka till instrumenten (Hemfärd-knappen, js/ks-raketknapp.js) */
main .left-container a.back-link {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; min-height: 42px;
    padding: 6px 18px; border-radius: 999px; text-decoration: none;
    font: 600 .92rem 'Exo 2', sans-serif; letter-spacing: 0; text-transform: none;
    color: var(--color-text-primary); background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-subtle); transition: border-color .15s ease;
}
main .left-container a.back-link:hover { color: var(--color-text-primary); border-color: var(--color-accent-gold); }
main .left-container a.back-link:focus-visible { outline: 3px solid var(--color-accent-gold); outline-offset: 2px; }

/* ── Reglagepanelen i vänsterkolumnen – fasta, mörka färger ───────── */
main .left-container .ks-reglage {
    margin: 6px 0 4px; padding: 14px; border-radius: 16px;
    background: linear-gradient(165deg, var(--ks-scen-1), var(--ks-scen-2));
    border: 1px solid var(--ks-scen-kant);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #eef2f8;
}

/* ── Konsertscenen – en mörk nyans ur temat ──────────────────────────
   Instrumenten är ritade för mörk bakgrund (guld, elfenben, neon), så
   scenen är alltid mörk – men i temats färg, inte svart: nattblå i rymd,
   havsblå i hav, korallrevets djupblå, skifferblå i ljust tema och
   djupröd i jul. Instrumentens egna --bg/--bg2 sätts till scenens färg,
   så att detaljer som fiolens f-hål och texten på aktiva knappar följer
   med. */
main {
    --ks-scen-1: #1e2766; --ks-scen-2: #0c1035; --ks-scen-kant: rgba(150, 170, 255, .28);
    --ks-scen-ljus: rgba(140, 160, 255, .14);
}
[data-theme="hav"] main {
    --ks-scen-1: #0f5a80; --ks-scen-2: #073049; --ks-scen-kant: rgba(120, 210, 255, .32);
    --ks-scen-ljus: rgba(120, 220, 255, .16);
}
[data-theme="ljus"] main {
    --ks-scen-1: #3b4d63; --ks-scen-2: #1f2b3a; --ks-scen-kant: rgba(0, 0, 0, .18);
    --ks-scen-ljus: rgba(255, 255, 255, .14);
}
html[data-variant="korall"] main {
    --ks-scen-1: #0e7490; --ks-scen-2: #0b3f57; --ks-scen-kant: rgba(255, 255, 255, .45);
    --ks-scen-ljus: rgba(180, 245, 255, .22);
}
[data-theme="jul"] main {
    --ks-scen-1: #7a1b22; --ks-scen-2: #350a10; --ks-scen-kant: rgba(255, 215, 120, .35);
    --ks-scen-ljus: rgba(255, 210, 140, .16);
}
main .ks-scen, main .ks-reglage { --bg: var(--ks-scen-2); --bg2: var(--ks-scen-1); }

main .content-container.ks-scen {
    position: relative; isolation: isolate;
    border-radius: 20px; padding: clamp(12px, 2vw, 22px);
    background:
        radial-gradient(ellipse 75% 55% at 50% 0%, var(--ks-scen-ljus), transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0, 0, 0, .35), transparent 70%),
        linear-gradient(170deg, var(--ks-scen-1), var(--ks-scen-2));
    border: 1px solid var(--ks-scen-kant);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #eef2f8;
}

@media (prefers-reduced-motion: reduce) {
    main .left-container a.back-link { transition: none; }
}

/* Fetstil i tipsrutan (t.ex. xylofonens tangentlista) – sidans egen stil gjorde den vit. */
main .left-container .instr-hint strong { color: var(--color-text-primary); font-weight: 700; letter-spacing: .08em; }

/* ── Inspelningsstudion (js/ks-studio.js) – följer temat ──────────── */
main .ks-studio {
    margin: 16px 0 0; padding: 14px; border-radius: 16px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary); font-family: 'Exo 2', sans-serif;
}
main .ks-studio.ks-st-spelar-in { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .25); }
main .ks-st-rubrik { margin: 0; font: 700 .95rem 'Orbitron', sans-serif; letter-spacing: .04em; color: var(--color-accent-gold); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
main .ks-st-rubrik::-webkit-details-marker { display: none; }
main .ks-st-rubrik::after { content: '▾'; margin-left: auto; color: var(--color-text-secondary); transition: transform .2s ease; }
main .ks-st-ruta:not([open]) .ks-st-rubrik::after { transform: rotate(-90deg); }
main .ks-st-rubrik:focus-visible { outline: 3px solid var(--color-accent-gold); outline-offset: 3px; border-radius: 6px; }
main .ks-st-inne { display: grid; gap: 10px; margin-top: 10px; }
main .ks-st-etikett { font: 700 .8rem 'Exo 2', sans-serif; color: var(--color-text-secondary); }
main .ks-st-komp { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
main .ks-st-val {
    min-width: 0; width: 100%; padding: 7px 8px; border-radius: 10px; font: 600 .85rem 'Exo 2', sans-serif;
    background: var(--color-bg-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-subtle);
}
main .ks-st-kryssrad { display: grid; gap: 4px; }
main .ks-st-kryss { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--color-text-secondary); cursor: pointer; }
main .ks-st-kryss input { width: 18px; height: 18px; accent-color: var(--color-accent-gold); }
main .ks-st-not { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--color-text-muted); }
main .ks-st-status { margin: 0; min-height: 1.2em; font: 700 .85rem 'Exo 2', sans-serif; color: var(--color-text-primary); }
main .ks-st-listrubrik { margin: 4px 0 0; font: 700 .72rem 'Orbitron', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
main .ks-st-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 38vh; overflow-y: auto; }
main .ks-st-tom { font-size: .82rem; color: var(--color-text-secondary); line-height: 1.5; }
main .ks-st-post {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; padding: 8px; border-radius: 12px;
    background: var(--color-bg-tertiary); border: 1px solid var(--color-border-subtle); transition: box-shadow .4s ease;
}
main .ks-st-post.ks-st-ny { box-shadow: 0 0 0 3px var(--color-accent-gold); }
main .ks-st-postikon { font-size: 1.4rem; line-height: 1; }
main .ks-st-info { display: grid; min-width: 0; }
main .ks-st-namn { font: 700 .88rem 'Exo 2', sans-serif; color: var(--color-text-primary); overflow-wrap: anywhere; }
main .ks-st-meta { font-size: .74rem; color: var(--color-text-secondary); }
main .ks-st-namnfalt { width: 100%; padding: 4px 6px; border-radius: 8px; font: 700 .88rem 'Exo 2', sans-serif;
    background: var(--color-bg-secondary); color: var(--color-text-primary); border: 2px solid var(--color-accent-gold); }
main .ks-st-postknappar { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }

/* Knapparna: egna regler som vinner över temats knappstil i css/style.css */
:root main .ks-studio button.ks-st-knapp:not(.sc-start):not(.ks-tts-figur) {
    min-height: 34px; padding: 4px 10px; border-radius: 10px; cursor: pointer; box-shadow: none;
    font: 700 .85rem 'Exo 2', sans-serif; line-height: 1;
    background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border-subtle);
}
:root main .ks-studio button.ks-st-knapp:not(.sc-start):not(.ks-tts-figur):hover:not(:disabled) { border-color: var(--color-accent-gold); }
:root main .ks-studio button.ks-st-knapp:not(.sc-start):not(.ks-tts-figur):disabled { opacity: .45; cursor: default; }
:root main .ks-studio button.ks-st-knapp:focus-visible { outline: 3px solid var(--color-accent-gold); outline-offset: 2px; }
:root main .ks-studio button.ks-st-ikon:not(.sc-start):not(.ks-tts-figur) { min-width: 36px; padding: 4px 8px; }
:root main .ks-studio button.ks-st-saker:not(.sc-start):not(.ks-tts-figur) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
/* Spela in: röd, så att den syns i alla teman (vit text, kontrast över 4.5) */
:root main .ks-studio button.ks-st-rec:not(.sc-start):not(.ks-tts-figur) {
    min-height: 48px; border-radius: 999px; font-size: 1rem; letter-spacing: .02em;
    background: #b91c1c; border: 2px solid #b91c1c; color: #fff;
}
:root main .ks-studio button.ks-st-rec:not(.sc-start):not(.ks-tts-figur):hover { background: #991b1b; border-color: #fff3; }
main .ks-st-spelar-in button.ks-st-rec { animation: ksStPuls 1.2s ease-in-out infinite; }
@keyframes ksStPuls { 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, .25); } }
@media (prefers-reduced-motion: reduce) { main .ks-st-spelar-in button.ks-st-rec { animation: none; } }

/* Tonknappar som var nästan svarta block: halvgenomskinliga, så att
   scenens temafärg skiner igenom (fiolens gridbräda, saxofonens klaffar). */
main .ks-scen .note-btn { background: rgba(0, 0, 0, .26); }
main .ks-scen .note-btn.open-string { background: rgba(0, 0, 0, .4); }
main .ks-scen .key-btn:not(.active) { background: rgba(0, 0, 0, .28); }