/* Study Hub: samma tema som Fånga (Skog, Hav, Lavendel, Korall; ljust, mellan, mörkt, papper).
   html[data-lage] väljer läge, html[data-farg] accentfärg, --skala textstorlek. Saknas de följer
   mobilen systemet (fanga.tema i localStorage) och VS Code editorns ljust/mörkt (se adaptrarna).
   Ändras färgerna i Fånga (public/index.html) bör de ändras här också. */
:root {
  --a-ljus: #48513a; --a-mork: #c5d2ac;
  --bg: #f6f3eb; --kort: #fffdf8; --text: #292e22; --svag: #6c6e62; --linje: #ddd9cd;
  --accent: var(--a-ljus); --accent-text: #fffdf8; --fel: #b3261e; --varning: #9a6a1c;
  --skala: 1;
  color-scheme: light dark;
}
:root[data-farg='hav'] { --a-ljus: #1f5fa8; --a-mork: #6aa8f0; }
:root[data-farg='lavendel'] { --a-ljus: #5b4bb7; --a-mork: #a99cf3; }
:root[data-farg='korall'] { --a-ljus: #b84a2e; --a-mork: #f28b6d; }
:root[data-lage='ljust'] { color-scheme: light; }
:root[data-lage='morkt'] {
  --bg: #191c17; --kort: #22261f; --text: #f3f0e4; --svag: #b0b3a2; --linje: #424638;
  --accent: var(--a-mork); --accent-text: #191c17; --fel: #ff8a80; --varning: #e0b060; color-scheme: dark;
}
:root[data-lage='mellan'] {
  --bg: #3a3f36; --kort: #454b40; --text: #efece2; --svag: #c4c6b8; --linje: #575e50;
  --accent: var(--a-mork); --accent-text: #22261f; --fel: #ffb0a6; --varning: #e0b060; color-scheme: dark;
}
:root[data-lage='papper'] {
  --bg: #f3eee2; --kort: #ebe4d3; --text: #2f2c26; --svag: #7b7568; --linje: #ddd4c1;
  --accent: var(--a-ljus); --accent-text: #f7f3ea; --fel: #a3321f; color-scheme: light;
}
:root[data-lage='papper'] body { font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; }
@media (prefers-color-scheme: dark) {
  :root:not([data-lage]) {
    --bg: #191c17; --kort: #22261f; --text: #f3f0e4; --svag: #b0b3a2; --linje: #424638;
    --accent: var(--a-mork); --accent-text: #191c17; --fel: #ff8a80; --varning: #e0b060;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; padding: 16px 16px 48px; max-width: 920px;
  font: calc(16px * var(--skala)) / 1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}
h1 { font-size: 1.5em; line-height: 1.25; margin: 0 0 8px; letter-spacing: -.015em; }
h2 { font-size: 1.2em; line-height: 1.3; margin: 0 0 8px; }
h3 { font-size: 1.05em; margin: 16px 0 6px; }
p { margin: 8px 0; }
a { color: var(--accent); }
small, .meta { color: var(--svag); font-size: .875em; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--linje); border-radius: 10px; padding: 12px; }

/* Ordmärket: se Decisions/2026-11-06 Wordmark.md i ekosystem-repot */
.ordmarke { display: inline-flex; align-items: center; min-height: 36px; font-weight: 750; letter-spacing: -.025em;
  font-size: calc(20px * var(--skala)); line-height: 1; color: var(--text); text-decoration: none; }
.ordmarke .punkt { color: var(--accent); }

header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
header label { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--svag); font-size: .875em; }
header select { min-width: 0; max-width: 46vw; }

nav { display: flex; gap: 4px; padding: 4px; margin: 4px 0 16px; background: var(--kort); border: 1px solid var(--linje); border-radius: 14px; position: sticky; top: 0; z-index: 2; }
nav button { flex: 1; min-height: 40px; padding: 6px 8px; background: transparent; color: var(--svag); border: 0; border-radius: 10px; font-weight: 600; }
nav button[aria-current=true] { background: var(--accent); color: var(--accent-text); }
nav button:not([aria-current=true]):hover { color: var(--accent); background: transparent; }

button, select, input, textarea {
  font: inherit; color: var(--text); background: var(--kort);
  border: 1px solid var(--linje); border-radius: 10px; padding: 10px 14px; min-height: 44px;
}
button { cursor: pointer; font-weight: 600; background: var(--accent); color: var(--accent-text); border-color: transparent; }
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
button.sekundar, .actions button.sekundar { background: transparent; color: var(--accent); border-color: var(--linje); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { width: 100%; min-height: 150px; resize: vertical; }
input[type=search] { width: 100%; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 20px; height: 20px; padding: 0; accent-color: var(--accent); }
label { display: block; margin: 10px 0; }
label select, label input:not([type=checkbox]):not([type=radio]) { margin-left: 8px; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.actions button { flex: 0 1 auto; }
.actions button:not(:first-child) { background: transparent; color: var(--accent); border-color: var(--linje); }

.card { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px; padding: 16px; margin: 12px 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.grid .card { margin: 0; }
.badge { display: inline-block; padding: 2px 10px; border: 1px solid var(--linje); border-radius: 999px; margin: 2px 4px 2px 0; font-size: .8125em; color: var(--svag); background: var(--bg); }
.hint { border-left: 3px solid var(--accent); padding: 4px 14px; margin: 12px 0; background: var(--bg); border-radius: 0 10px 10px 0; }
.warning { border-left: 3px solid var(--varning); padding: 4px 14px; margin: 12px 0; }
.timer { font-variant-numeric: tabular-nums; font-size: 1.25em; font-weight: 700; }
.math { overflow-x: auto; }
.katex-display { overflow-x: auto; overflow-y: hidden; }
img.answer { max-width: 100%; max-height: 400px; object-fit: contain; border-radius: 10px; }
details { margin: 12px 0; }
summary { cursor: pointer; min-height: 32px; font-weight: 600; }

#status { min-height: 1.6em; margin: 0 0 8px; color: var(--svag); font-size: .875em; }
#errors { color: var(--fel); white-space: pre-wrap; }

@media (max-width: 600px) {
  body { padding: 12px 12px 40px; }
  header #refresh { order: 1; margin-left: auto; min-height: 40px; padding: 6px 12px; }
  header label { order: 2; width: 100%; margin-left: 0; }
  header select { flex: 1; max-width: none; }
  .card { padding: 14px; }
  .actions button { flex: 1 1 auto; }
}

@media print {
  header, nav, #status, #errors, button, .actions, textarea, input, select { display: none !important; }
  body { background: white; color: black; max-width: none; padding: 0; }
  .card { break-inside: avoid; border: none; background: white; }
  details:not([open]) { display: none; }
  .hint { border-color: black; }
  a { color: black; }
}