/* =====================================================================
   Klockutforskaren – stil
   css/clockexplorer.css
   (clockexplorermenu.php, clockexplorer.php, clockexplorerlesson.php)

   Följer temat via variablerna i css/style.css. Tidigare var panelerna
   svarta och texterna guldgula eller ljusgrå, vilket gav nästan osynlig
   text i det ljusa temat (se lektionens högerspalt).
   style.css färgar "main button" i ljust tema och hav – reglerna här har
   id i väljaren (#ce-meny, #ce-kontroll, #ce-lektion …) och vinner därför.
   ===================================================================== */

.ce-tema {
    --ce-yta:   var(--color-bg-secondary, #111827);
    --ce-yta2:  var(--color-bg-tertiary, #1a2235);
    --ce-kant:  var(--color-border-subtle, #2a3550);
    --ce-kant2: var(--color-accent-border, #3b4a6b);
    --ce-text:  var(--color-text-primary, #e2e8f0);
    --ce-text2: var(--color-text-secondary, #94a3b8);
    --ce-mu:    var(--color-text-muted, #64748b);
    --ce-guld:  #fcd34d;
    --ce-acc:   #f59e0b;
    --ce-sek:   #93c5fd;
    --ce-ok:    #22c55e;
    --ce-tim:   #3b82f6;         /* skrivs över med elevens färg */
    --ce-min:   #ef4444;
    --ce-skugga: 0 6px 20px rgba(0,0,0,.35);
    color: var(--ce-text);
    font-family: 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .ce-tema {
    --ce-yta: #ffffff; --ce-yta2: #f4f6f9; --ce-kant: #e2e8f0; --ce-kant2: #cbd5e1;
    --ce-text: #1e293b; --ce-text2: #475569; --ce-mu: #64748b;
    --ce-guld: #b45309; --ce-acc: #d97706; --ce-sek: #1d4ed8; --ce-ok: #15803d;
    --ce-skugga: 0 6px 18px rgba(35,48,58,.12);
}
.ce-tema *, .ce-tema *::before, .ce-tema *::after { box-sizing: border-box; }

/* ── Knappar ────────────────────────────────────────────────────── */
#ce-meny .ce-btn, #ce-kontroll .ce-btn, #ce-hoger .ce-btn, #ce-lektion-nav .ce-btn, #ce-lektion-mitt .ce-btn, #ce-lektion-text .ce-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer; width: auto;
    background: var(--ce-yta2); color: var(--ce-text); border: 1px solid var(--ce-kant2);
    font: 700 .98rem 'Exo 2', system-ui, sans-serif; text-decoration: none; line-height: 1.15;
    transform: none; box-shadow: none; transition: border-color .15s, background .15s, filter .15s;
}
#ce-meny .ce-btn:hover, #ce-kontroll .ce-btn:hover, #ce-hoger .ce-btn:hover, #ce-lektion-nav .ce-btn:hover, #ce-lektion-mitt .ce-btn:hover, #ce-lektion-text .ce-btn:hover { border-color: var(--ce-acc); }
.ce-tema .ce-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ce-acc) 60%, transparent); outline-offset: 2px; }
#ce-meny .ce-btn.ce-primar, #ce-kontroll .ce-btn.ce-primar, #ce-lektion-nav .ce-btn.ce-primar { background: #facc15; border-color: #facc15; color: #1c1917; }
#ce-kontroll .ce-btn.ce-min { border-color: color-mix(in srgb, var(--ce-min) 70%, transparent); background: color-mix(in srgb, var(--ce-min) 12%, var(--ce-yta2)); }
#ce-kontroll .ce-btn.ce-tim { border-color: color-mix(in srgb, var(--ce-tim) 70%, transparent); background: color-mix(in srgb, var(--ce-tim) 12%, var(--ce-yta2)); }
#ce-kontroll .ce-btn.ce-min:hover { border-color: var(--ce-min); }
#ce-kontroll .ce-btn.ce-tim:hover { border-color: var(--ce-tim); }
.ce-btn.ce-talar { border-color: var(--ce-acc) !important; animation: ce-puls 1s ease-in-out infinite; }
@keyframes ce-puls { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ce-acc) 30%, transparent); } }

/* ═════════════════════════════════════════════════════════════════
   clockexplorermenu.php
   ═════════════════════════════════════════════════════════════════ */
#ce-meny { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; margin: 0 auto; }
.ce-panel { background: var(--ce-yta); border: 1px solid var(--ce-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--ce-skugga); }
.ce-panel h2 { margin: 0 0 12px; font: 700 clamp(.9rem, 1.4vw, 1.05rem) 'Orbitron', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ce-text2); }
.ce-rad { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ce-kant); flex-wrap: wrap; }
.ce-rad:last-child { border-bottom: 0; }
.ce-etikett { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
.ce-etikett b { display: block; font-size: 1.02rem; }
.ce-etikett small { display: block; color: var(--ce-text2); font-size: .85rem; }
.ce-visarprov { width: 30px; height: 7px; border-radius: 4px; flex-shrink: 0; }
.ce-visarprov.ce-kort { width: 20px; height: 9px; }

/* Klocktyp */
.ce-lagen { display: flex; gap: 8px; flex-wrap: wrap; }
#ce-meny .ce-lage { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--ce-kant2); background: var(--ce-yta2); color: var(--ce-text); font: 700 .95rem 'Exo 2', sans-serif; cursor: pointer; transform: none; box-shadow: none; }
#ce-meny .ce-lage:hover { border-color: var(--ce-acc); }
#ce-meny .ce-lage[aria-checked="true"] { border-color: var(--ce-acc); background: color-mix(in srgb, var(--ce-acc) 16%, var(--ce-yta2)); }

/* Färgrutor */
.ce-farger { display: flex; gap: 8px; flex-wrap: wrap; }
#ce-meny .ce-farg {
    width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer; position: relative;
    border: 3px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.3); transform: none; transition: transform .12s;
}
#ce-meny .ce-farg:hover { transform: scale(1.1); }
#ce-meny .ce-farg[aria-checked="true"] { border-color: var(--ce-text); outline: 3px solid var(--ce-acc); outline-offset: 1px; }
#ce-meny .ce-farg[aria-checked="true"]::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#ce-meny .ce-farg[disabled] { opacity: .25; cursor: not-allowed; transform: none; }
.ce-farg-varning { color: var(--ce-mu); font-size: .85rem; margin: 4px 0 0; }

/* Växelknapp */
.ce-vaxel { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.ce-vaxel input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.ce-vaxel span { position: absolute; inset: 0; border-radius: 30px; background: var(--ce-kant2); transition: background .2s; }
.ce-vaxel span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ce-vaxel input:checked + span { background: var(--ce-ok); }
.ce-vaxel input:checked + span::after { transform: translateX(22px); }
.ce-vaxel input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--ce-acc) 60%, transparent); outline-offset: 2px; }

/* Vänsterspalten */
.ce-vanster { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.ce-forhand { width: min(40vmin, 170px); height: min(40vmin, 170px); border-radius: 50%; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.ce-digital { font: 700 clamp(1.8rem, 4vw, 2.6rem) 'Orbitron', sans-serif; color: var(--ce-guld); letter-spacing: .06em; line-height: 1; }
#ce-vanster-kort .ce-kortlank {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 14px; border-radius: 14px;
    background: var(--ce-yta2); border: 1px solid var(--ce-kant2); color: var(--ce-text); text-decoration: none; text-align: center;
    font-family: 'Exo 2', sans-serif; cursor: pointer; transform: none; box-shadow: none;
}
#ce-vanster-kort .ce-kortlank:hover { border-color: var(--ce-acc); }
.ce-kortlank .ce-ikon { font-size: 1.9rem; line-height: 1; }
.ce-kortlank b { font-size: 1.02rem; }
.ce-kortlank small { color: var(--ce-text2); font-size: .85rem; line-height: 1.35; }
.ce-kortlank .ce-framsteg { color: var(--ce-ok); font-weight: 700; font-size: .85rem; }
#ce-vanster-kort { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#ce-vanster-kort .ce-aterstall { background: none; border: 0; color: var(--ce-mu); text-decoration: underline; cursor: pointer; font: .85rem 'Exo 2', sans-serif; min-height: 0; padding: 4px; }

/* ═════════════════════════════════════════════════════════════════
   clockexplorer.php
   ═════════════════════════════════════════════════════════════════ */
#ce-kontroll { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#ce-kontroll h3 { margin: 6px 0 0; font: 700 .78rem 'Orbitron', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ce-text2); display: flex; align-items: center; gap: 8px; }
#ce-kontroll .ce-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#ce-kontroll .ce-btn { width: 100%; }
.ce-streck { display: inline-block; width: 22px; height: 6px; border-radius: 3px; }

.ce-klockyta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 100%; }
#ce-canvas { width: min(62vmin, 400px); height: min(62vmin, 400px); border-radius: 50%; display: block; touch-action: none; cursor: default;
    filter: drop-shadow(0 8px 26px rgba(0,0,0,.35)); }
#ce-canvas.ce-kan-dra { cursor: grab; }
#ce-canvas.ce-drar { cursor: grabbing; }
#ce-canvas:focus-visible { outline: 4px solid color-mix(in srgb, var(--ce-acc) 70%, transparent); outline-offset: 6px; }
.ce-digitalstor { font: 700 clamp(2.6rem, 8vw, 5rem) 'Orbitron', sans-serif; color: var(--ce-guld); letter-spacing: .05em; line-height: 1; text-align: center; }
.ce-digitalstor small { display: block; font: 600 clamp(.9rem, 1.8vw, 1.1rem) 'Exo 2', sans-serif; color: var(--ce-text2); letter-spacing: 0; margin-top: 6px; }
.ce-dygn { display: flex; gap: 6px; }
#ce-kontroll .ce-dygn .ce-btn[aria-pressed="true"], .ce-klockyta .ce-dygn .ce-btn[aria-pressed="true"] { border-color: var(--ce-acc); background: color-mix(in srgb, var(--ce-acc) 16%, var(--ce-yta2)); }
.ce-klockyta .ce-dygn .ce-btn { display: inline-flex; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--ce-kant2); background: var(--ce-yta2); color: var(--ce-text); font: 700 .9rem 'Exo 2', sans-serif; cursor: pointer; }
.ce-hjalp { color: var(--ce-mu); font-size: .9rem; text-align: center; margin: 0; max-width: 32em; }

#ce-hoger { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#ce-hoger .ce-tidtext { margin: 0; font: 800 clamp(1.4rem, 3vw, 2.1rem) 'Exo 2', sans-serif; color: var(--ce-guld); line-height: 1.25; }
#ce-hoger .ce-tidtext2 { margin: 0; font: 600 clamp(1rem, 2vw, 1.35rem) 'Exo 2', sans-serif; color: var(--ce-sek); }
.ce-puls { animation: ce-snap .2s ease-out; }
@keyframes ce-snap { 50% { opacity: .35; transform: scale(1.04); } }

/* ═════════════════════════════════════════════════════════════════
   clockexplorerlesson.php
   ═════════════════════════════════════════════════════════════════ */
#ce-lektion-nav { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.ce-prickar { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#ce-lektion-nav .ce-prick {
    width: 14px; height: 14px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--ce-kant2); border: 2px solid var(--ce-kant2); transform: none; box-shadow: none; transition: transform .15s;
}
#ce-lektion-nav .ce-prick.ce-klar { background: var(--ce-ok); border-color: var(--ce-ok); }
#ce-lektion-nav .ce-prick[aria-current="step"] { background: #facc15; border-color: #d97706; transform: scale(1.4); }
#ce-lektion-nav .ce-btn { width: 100%; }
#ce-lektion-mitt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 100%; }
#ce-lektion-canvas { width: min(58vmin, 360px); height: min(58vmin, 360px); border-radius: 50%; filter: drop-shadow(0 6px 22px rgba(0,0,0,.3)); }
.ce-etikettstor { font: 800 clamp(1.4rem, 3.5vw, 2.2rem) 'Exo 2', sans-serif; color: var(--ce-guld); min-height: 1.3em; text-align: center; }
.ce-pop { animation: ce-pop .22s ease-out; }
@keyframes ce-pop { from { opacity: .2; transform: scale(.94); } }
#ce-lektion-text { display: flex; flex-direction: column; gap: 10px; width: 100%; animation: ce-in .28s ease-out; }
@keyframes ce-in { from { opacity: 0; transform: translateY(8px); } }
.ce-steg { font: 700 .75rem 'Orbitron', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ce-text2); }
.ce-lektion-titel { margin: 0; font: 800 clamp(1.4rem, 3vw, 2rem) 'Exo 2', sans-serif; color: var(--ce-text); line-height: 1.2; }
.ce-lektion-brod { margin: 0; font: 600 clamp(1.02rem, 2vw, 1.2rem) 'Exo 2', sans-serif; color: var(--ce-text); line-height: 1.7; }
.ce-lektion-brod em, .ce-fakta em { font-style: normal; font-weight: 800; color: var(--ce-guld); }
.ce-tema .c-hour { color: var(--ce-tim); font-weight: 800; }
.ce-tema .c-min  { color: var(--ce-min); font-weight: 800; }
.ce-fakta { padding: 12px 16px; border-radius: 14px; background: var(--ce-yta2); border: 1px solid var(--ce-kant2); color: var(--ce-text); font-weight: 700; line-height: 1.65; }
.ce-fakta:empty { display: none; }
.finish-stars { font-size: 2.4rem; letter-spacing: 6px; }

@media (max-width: 640px) {
    .ce-prickar { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    #ce-kontroll .ce-par { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ce-puls, .ce-pop, #ce-lektion-text, .ce-btn.ce-talar { animation: none !important; }
}