/* =====================================================================
   Kunskapsstjärnan – emojiväljaren
   css/ks-emoji-chooser.css   (js/ks-emoji-chooser.js)

   Följer sajtens temavariabler, med reservfärger om de saknas. Bara
   klasser som börjar med .ksev – inga nakna elementselektorer.
   ===================================================================== */
.ksev {
    --ksev-yta:  var(--color-bg-secondary, #16202c);
    --ksev-yta2: var(--color-bg-tertiary, #1e2d40);
    --ksev-kant: var(--color-border-subtle, #2a3a4e);
    --ksev-text: var(--color-text-primary, #ecf0f1);
    --ksev-mu:   var(--color-text-muted, #95a5a6);
    --ksev-gul:  #f5c518;
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: min(560px, calc(100vw - 20px)); max-height: calc(100vh - 24px);
    padding: 14px 16px 16px; box-sizing: border-box; overflow: hidden;
    display: none; flex-direction: column;
    border: 1px solid var(--ksev-kant); border-radius: 18px;
    background: var(--ksev-yta); color: var(--ksev-text);
    font-family: 'Exo 2', system-ui, sans-serif;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.ksev[open] { display: flex; }
[data-theme="ljus"] .ksev { --ksev-yta: #ffffff; --ksev-yta2: #f4f6f9; --ksev-kant: #dbe2ea; --ksev-text: #1e293b; --ksev-mu: #64748b; --ksev-gul: #eab308; }
.ksev::backdrop { background: rgba(0, 0, 0, .45); }
.ksev *, .ksev *::before, .ksev *::after { box-sizing: border-box; }
.ksev :focus-visible { outline: 3px solid #3498db; outline-offset: 2px; }

.ksev-topp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ksev-rubrik { margin: 0; font: 800 1.1rem 'Exo 2', sans-serif; }
.ksev-stang {
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--ksev-kant); background: var(--ksev-yta2); color: var(--ksev-text); font-size: 1rem;
}
.ksev-flikar {
    display: flex; flex-wrap: wrap; gap: 3px; margin: 10px -4px 0; padding: 4px;
}
.ksev-flik {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; cursor: pointer; font-size: 1.35rem; line-height: 1;
    border: 2px solid transparent; background: var(--ksev-yta2); color: var(--ksev-text);
}
.ksev-flik[aria-selected="true"] { border-color: var(--ksev-gul); background: color-mix(in srgb, var(--ksev-gul) 18%, var(--ksev-yta2)); }
.ksev-tema { margin: 8px 2px 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ksev-mu); }
.ksev-rutnat {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px;
    overflow-y: auto; min-height: 120px; padding: 2px;
}
.ksev-under { grid-column: 1 / -1; margin: 6px 2px 2px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ksev-mu); }
.ksev-under:first-child { margin-top: 0; }
.ksev-emoji {
    height: 46px; border-radius: 10px; cursor: pointer; font-size: 1.7rem; line-height: 1; padding: 0;
    border: 2px solid transparent; background: transparent; color: var(--ksev-text);
    transition: transform .1s, background .1s;
}
.ksev-emoji:hover { background: var(--ksev-yta2); transform: scale(1.12); }
.ksev-emoji.vald { border-color: var(--ksev-gul); background: color-mix(in srgb, var(--ksev-gul) 18%, transparent); }

.ksev-panel { display: flex; flex-direction: column; min-height: 0; }

/* Inbäddad i sidan (KSEmojival.inbaddad) – ingen ruta, inget skuggfall */
.ksev.ksev-inbaddad {
    position: static; inset: auto; margin: 0; height: auto; width: 100%; max-height: none;
    display: flex; padding: 8px 10px 10px; border-radius: 14px; box-shadow: none;
    background: var(--ksev-yta2);
}
.ksev-inbaddad .ksev-flikar { margin-top: 0; }
.ksev-inbaddad .ksev-flik { background: var(--ksev-yta); }
.ksev-inbaddad .ksev-rutnat { max-height: 212px; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.ksev-inbaddad .ksev-emoji { height: 42px; font-size: 1.5rem; }
.ksev-inbaddad .ksev-emoji:hover { background: var(--ksev-yta); }

/* Standardstil för "➕ Fler" när sidan inte ger en egen klass */
.ksev-fler {
    min-height: 36px; padding: 4px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap;
    border: 1px dashed var(--color-border-subtle, #3a4d63); background: transparent;
    color: var(--color-text-primary, #ecf0f1); font: 700 .85rem 'Exo 2', system-ui, sans-serif;
}
.ksev-fler:hover { border-style: solid; }

/* Fältet som öppnar väljaren */
.ksev-falt { cursor: pointer; caret-color: transparent; }
.ksev-falt:focus { caret-color: auto; }

@media (prefers-reduced-motion: reduce) { .ksev-emoji { transition: none; } .ksev-emoji:hover { transform: none; } }