* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d2433; background: #f5f6f8; }
a { color: #1f5fbf; }
header { position: sticky; top: 0; z-index: 2; display: flex; gap: 1rem; align-items: center; padding: .6rem 1rem; background: #1d2433; color: #fff; }
.logga { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
#kurser { display: flex; gap: .25rem; }
#kurser a { color: #cfd6e4; text-decoration: none; padding: .3rem .6rem; border-radius: 6px; }
#kurser a.vald { background: #fff; color: #1d2433; }
#sok { margin-left: auto; padding: .4rem .6rem; border-radius: 6px; border: 0; width: 14rem; max-width: 40vw; }
#meny { display: none; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }
#layout { display: flex; }
#trad { width: 21rem; flex-shrink: 0; height: calc(100vh - 3rem); position: sticky; top: 3rem; overflow-y: auto; padding: 1rem; background: #fff; border-right: 1px solid #e1e4ea; font-size: .92rem; }
.flikar { display: flex; gap: .25rem; margin-bottom: .8rem; flex-wrap: wrap; }
#trad .flikar a { display: inline-block; border: 1px solid #d5d9e1; border-radius: 999px; padding: .2rem .7rem; }
#trad .flikar a.vald { background: #1d2433; color: #fff; border-color: #1d2433; }
#trad h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7385; margin: 1rem 0 .3rem; }
#trad h2:first-child { margin-top: 0; }
#trad a { display: flex; justify-content: space-between; gap: .5rem; text-decoration: none; color: #1d2433; padding: .2rem .4rem; border-radius: 4px; }
#trad a:hover { background: #eef1f6; }
#trad a.vald { background: #dfe8f7; font-weight: 600; }
#trad a.avsnitt { font-weight: 600; }
#trad a.del { padding-left: 1.2rem; }
#trad a.tomdel { color: #9aa1b0; }
#trad .antal { background: #1f5fbf; color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; height: 1.2rem; line-height: 1.2rem; font-weight: 600; }
main { flex: 1; padding: 1.5rem 2rem; max-width: 60rem; }
main h1 { margin: 0 0 .2rem; font-size: 1.5rem; }
.sidor { color: #6b7385; margin: 0 0 1.2rem; }
.kort { background: #fff; border: 1px solid #e1e4ea; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.kort h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.kort h3 a { color: inherit; text-decoration: none; }
.meta { color: #6b7385; font-size: .85rem; margin-bottom: .5rem; }
.meta .tag { display: inline-block; background: #eef1f6; border-radius: 4px; padding: 0 .4rem; margin-right: .3rem; }
.kort p { margin: .4rem 0 .7rem; }
.filer { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.knapp { display: inline-block; padding: .4rem .8rem; border-radius: 6px; background: #1f5fbf; color: #fff; text-decoration: none; font-size: .9rem; border: 0; cursor: pointer; }
.knapp.sekundar { background: #eef1f6; color: #1d2433; }
.knapp.liten { padding: .2rem .5rem; font-size: .78rem; background: none; color: #6b7385; border: 1px solid #d5d9e1; }
.tom { color: #6b7385; }
@media (max-width: 800px) {
  #meny { display: block; }
  #kurser { display: none; }
  #trad { display: none; position: fixed; inset: 3rem 0 0 0; width: auto; height: auto; z-index: 3; }
  #trad.oppen { display: block; }
  main { padding: 1rem; }
  #sok { width: 9rem; }
}

#trad .kap h2 { display: flex; align-items: center; margin: .2rem 0; text-transform: none; letter-spacing: 0; font-size: .95rem; color: #1d2433; }
#trad .kap h2 a { flex: 1; font-weight: 700; }
#trad .kap { border-bottom: 1px solid #eef1f6; padding: .2rem 0; }
#trad .rad { display: flex; align-items: center; padding-left: .6rem; }
#trad .rad a { flex: 1; }
#trad .pil { background: none; border: 0; cursor: pointer; width: 1.4rem; flex-shrink: 0; color: #6b7385; font-size: .85rem; padding: .2rem 0; }
#trad .pil:hover { color: #1d2433; }
#trad a.del { padding-left: 2.6rem; }

/* Färg per filtyp – alla knappar ska se klickbara ut */
.knapp.typ-arbetsblad { background: #1f5fbf; }
.knapp.typ-losningar { background: #1e8a5a; }
.knapp.typ-lararblad { background: #6b3fa0; }
.knapp.typ-exitticket, .knapp.typ-presentation, .knapp.typ-prov, .knapp.typ-ovrigt { background: #fff; color: #1f5fbf; border: 2px solid #1f5fbf; padding: calc(.4rem - 2px) calc(.8rem - 2px); }
.knapp { font-weight: 600; transition: filter .15s, transform .15s; }
.knapp:hover { filter: brightness(1.12); transform: translateY(-1px); }
.knapp.liten:hover { transform: none; }

.lasar { margin-bottom: 1rem; }
.lasar > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: .4rem 0 .8rem; color: #1d2433; display: flex; align-items: center; gap: .5rem; }
.lasar > summary .antal { background: #1f5fbf; color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .8rem; }

/* Spel: interaktivt, så det ska lysa lite mer än de andra */
.knapp.typ-spel { background: linear-gradient(135deg, #ff7a18, #e1306c); color: #fff; box-shadow: 0 2px 10px rgba(225, 48, 108, .35); }
.knapp.typ-spel::before { content: "▶ "; font-size: .8em; }
.knapp.typ-spel:hover { box-shadow: 0 4px 16px rgba(225, 48, 108, .5); }