/* Research 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 64px; 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 6px; letter-spacing: -.015em; }
h2 { font-size: 1.15em; line-height: 1.3; margin: 0 0 4px; }
h3 { font-size: 1.02em; margin: 0 0 6px; }
p { margin: 8px 0; }
a { color: var(--accent); }
small, .meta { color: var(--svag); font-size: .875em; }
.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: 10px; flex-wrap: wrap; padding-bottom: 8px; }
header .hoger { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
#tabs button { background: none; color: var(--svag); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 10px; white-space: nowrap; }
#tabs button[aria-current] { color: var(--text); border-bottom-color: var(--accent); font-weight: 650; }
#status { min-height: 1.2em; margin: 0 0 8px; color: var(--svag); font-size: .875em; }
#status.fel, #errors p { color: var(--fel); }
button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); padding: 6px 12px; min-height: 36px; }
button.sekundar { background: transparent; color: var(--text); border-color: var(--linje); }
button.fara { color: var(--fel); border-color: var(--fel); }
button.lank { background: none; border: 0; color: var(--accent); padding: 2px 0; min-height: 0; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
button.lank.stor { font-size: 1.05em; font-weight: 650; text-decoration: none; }
button.liten, .liten { font-size: .8em; }
button.liten { min-height: 0; padding: 0 6px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--kort); border: 1px solid var(--linje); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
textarea { width: 100%; resize: vertical; }
input[type=text], input[type=password] { width: 100%; }
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; vertical-align: -3px; }
label { display: block; margin: 8px 0; color: var(--svag); font-size: .9em; }
label > input[type=text], label > textarea, label > select { display: block; margin-top: 4px; color: var(--text); font-size: 1.05em; width: 100%; }
.rad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.rad label { margin: 0; }
.rad > label > select, .rad > label > input { display: inline-block; width: auto; margin: 0 0 0 4px; }
.valj { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.valj select { width: auto; max-width: 70vw; }
.kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
details.kort > summary { cursor: pointer; list-style: none; }
details.kort > summary::-webkit-details-marker { display: none; }
details > summary { cursor: pointer; color: var(--svag); margin: 6px 0; }
.rubrikrad { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rubrikrad h2, .rubrikrad h3 { margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-block; font-size: .78em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linje); color: var(--svag); white-space: nowrap; }
.chip.fraga { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.chip.ok, .chip.delad { border-color: var(--accent); color: var(--accent); }
.chip.varning { border-color: var(--varning); color: var(--varning); }
.chip.status-analysis, .chip.status-writing, .chip.status-review { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip.status-published { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.lankar { display: flex; gap: 4px 14px; flex-wrap: wrap; margin: 6px 0; }
.lista { padding-left: 18px; margin: 6px 0; }
.lista li { margin: 3px 0; }
.verktyg { border-top: 1px solid var(--linje); padding-top: 10px; margin-top: 10px; }
.tom { color: var(--svag); font-style: italic; }
h2.omrade { color: var(--svag); font-size: .85em; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 8px; }
.falt h4 { margin: 8px 0 0; font-size: .78em; text-transform: uppercase; letter-spacing: .05em; color: var(--svag); }
.falt p { margin: 2px 0 6px; white-space: pre-wrap; }
.tabellram { overflow-x: auto; margin: 0 0 12px; }
table { border-collapse: collapse; font-size: .92em; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: top; }
table.jamfor td { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.jamfor td.ogranskad { font-style: italic; color: var(--svag); }
table.matt { margin: 8px 0; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0; font-size: .92em; }
dt { color: var(--svag); }
dd { margin: 0; overflow-wrap: anywhere; }
fieldset.granska { border: 1px solid var(--linje); border-radius: 10px; margin: 10px 0 0; padding: 4px 12px 8px; }
fieldset.granska legend { color: var(--svag); font-size: .85em; padding: 0 4px; }
fieldset.granska label { color: var(--text); }
table.arshjul { width: 100%; table-layout: fixed; }
table.arshjul th:first-child { width: 32%; font-weight: 500; font-size: .85em; padding: 6px 6px 6px 0; overflow-wrap: anywhere; }
table.arshjul thead th { font-size: .75em; }
table.arshjul thead th { text-align: center; color: var(--svag); font-weight: 500; padding: 4px 0; }
table.arshjul td { padding: 0; height: 28px; border-left: 1px solid var(--linje); }
table.arshjul td.pa { background: var(--accent); }
table.arshjul td.pa.osaker { background: repeating-linear-gradient(135deg, var(--accent) 0 4px, transparent 4px 8px); }
table.arshjul .nu { box-shadow: inset 2px 0 0 var(--varning); }
table.arshjul thead th.nu { color: var(--varning); font-weight: 700; box-shadow: none; }
.poang { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.poang strong { font-size: 1.4em; }
progress { width: 100%; accent-color: var(--accent); }
dialog.ark { border: 1px solid var(--linje); border-radius: 16px; background: var(--kort); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.dokument { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 10; }
.dokument .topp { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--linje); }
.dokument .topp strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dokument iframe { flex: 1; border: 0; width: 100%; background: #fff; }
.dokument .md { flex: 1; overflow: auto; padding: 16px; max-width: 820px; margin: 0 auto; width: 100%; }