/* projects.: 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; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0 auto; padding: 12px 16px 80px; max-width: 980px; font: calc(16px * var(--skala)) / 1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }
h1 { font-size: 1.45em; line-height: 1.25; margin: 0; letter-spacing: -.015em; }
h2 { font-size: 1.1em; margin: 0 0 6px; }
h3 { font-size: 1em; margin: 0 0 6px; }
a { color: var(--accent); }
.meta, small { 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.topp { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
header.topp .hoger { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#status { min-height: 1.2em; margin: 0 0 6px; color: var(--svag); font-size: .875em; }
#status.fel { 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: 38px; }
button.sek { background: transparent; color: var(--text); border-color: var(--linje); }
button.fara { background: transparent; color: var(--fel); border-color: var(--fel); }
button.lank { background: none; border: 0; color: var(--accent); padding: 0; min-height: 0; text-decoration: underline; text-underline-offset: 2px; text-align: left; }
button.ikon { min-width: 38px; padding: 4px 8px; background: transparent; color: var(--svag); border-color: transparent; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; color: var(--text); background: var(--kort); border: 1px solid var(--linje); border-radius: 8px; padding: 6px 8px; min-height: 38px; max-width: 100%; }
textarea { width: 100%; resize: vertical; }
input[type=checkbox] { accent-color: var(--accent); width: 20px; height: 20px; min-height: 0; vertical-align: -4px; }
input.bred, textarea.bred { width: 100%; }
label.falt { display: block; margin: 8px 0; color: var(--svag); font-size: .9em; }
label.falt > input, label.falt > select, label.falt > textarea { display: block; width: 100%; margin-top: 3px; color: var(--text); font-size: 1.05em; }
.rad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.rad > .vaxa { flex: 1; min-width: 140px; }
.kort { background: var(--kort); border: 1px solid var(--linje); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.kort.klick { cursor: pointer; }
.kort.klick:hover { border-color: var(--accent); }
.rubrik { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rubrik h2, .rubrik h3 { margin: 0; }
.chip { display: inline-block; font-size: .76em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linje); color: var(--svag); white-space: nowrap; }
.chip.accent { border-color: var(--accent); color: var(--accent); }
.chip.fylld { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip.varning { border-color: var(--varning); color: var(--varning); }
.chip.ai { border-color: var(--varning); color: var(--varning); font-weight: 650; }
.tom { color: var(--svag); font-style: italic; }
nav.flikar { display: flex; gap: 2px; overflow-x: auto; margin: 6px -16px 12px; padding: 0 16px; border-bottom: 1px solid var(--linje); scrollbar-width: none; }
nav.flikar button { background: none; color: var(--svag); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 10px; white-space: nowrap; }
nav.flikar button[aria-current] { color: var(--text); border-bottom-color: var(--accent); font-weight: 650; }
nav.flikar .prick { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--varning); margin-left: 4px; vertical-align: 2px; }
ul.lista { list-style: none; padding: 0; margin: 6px 0; }
ul.lista li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linje); }
ul.lista li:last-child { border-bottom: 0; }
ul.lista li .text { flex: 1; overflow-wrap: anywhere; white-space: pre-wrap; }
ul.lista li.klar .text { color: var(--svag); text-decoration: line-through; }
.grupp-rubrik { color: var(--svag); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 8px; }
.tabellram { overflow-x: auto; margin: 0 -4px 8px; }
table { border-collapse: collapse; width: 100%; font-size: .93em; }
th, td { padding: 4px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: middle; }
th { color: var(--svag); font-weight: 500; font-size: .85em; }
td input, td select { width: 100%; min-width: 60px; padding: 4px 6px; min-height: 34px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.saknas td { background: color-mix(in srgb, var(--varning) 12%, transparent); }
.stang { display: flex; align-items: stretch; height: 30px; border: 1px solid var(--linje); border-radius: 6px; overflow: hidden; margin: 4px 0; background: var(--bg); }
.stang .bit { background: var(--accent); color: var(--accent-text); font-size: .7em; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--kort); padding: 0 2px; }
.stang .spill { flex: 1; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--linje) 4px 6px); }
.bild { max-width: 100%; max-height: 260px; border-radius: 10px; display: block; margin: 4px 0; cursor: zoom-in; }
.ai-ruta { border: 1px dashed var(--accent); }
.alt { border-left: 4px solid var(--linje); }
.alt.vald { border-left-color: var(--accent); }
dialog { border: 1px solid var(--linje); border-radius: 16px; background: var(--kort); color: var(--text); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog.helbild { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; padding: 0; background: #000; }
dialog.helbild img { width: 100%; height: 100%; object-fit: contain; }
.fast-knapp { position: fixed; right: 16px; bottom: 16px; border-radius: 999px; min-height: 52px; padding: 0 20px; box-shadow: 0 4px 14px rgb(0 0 0 / .25); font-weight: 650; }
.ritning-ram { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; }
.ritning-ram .rad { margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--linje); }
.ritning-ram .yta { flex: 1; position: relative; }
@media (min-width: 760px) { .tva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }