/* jobbspesialist.no: one shared stylesheet for all pages.
   Rules: 4px spacing scale, one accent, radius 4px, 1px lines, no shadows or gradients,
   system fonts only (no external requests). */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;

  --bg: #ffffff;
  --surface: #f7faf8;
  --text: #15201c;
  --muted: #4d5b56;
  --line: #d9e1de;
  --line-strong: #b4c3be;
  --accent: #0f5c4b;
  --accent-hover: #0a4a3c;
  --accent-weak: #e2eeea;
  --on-accent: #ffffff;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --max: 1120px;
  --measure: 70ch;
  --radius: 4px;
  --tap: 56px;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.6 var(--font);
}
body.simple { font-size: 20px; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }
p, li { max-width: var(--measure); }
p { margin: var(--s3) 0 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s4); }
.skip { position: absolute; left: var(--s4); top: -100px; background: var(--surface); padding: var(--s2) var(--s3); z-index: 10; }
.skip:focus { top: var(--s2); }

/* Header */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6); padding-top: var(--s3); padding-bottom: var(--s3); }
.brand { font-weight: 700; font-size: 19px; color: var(--text); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 16px; }
.site-nav a { color: var(--muted); text-decoration: none; padding: var(--s1) 0; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.search-open {
  margin-left: auto; display: flex; align-items: center; gap: var(--s3);
  font: inherit; font-size: 15px; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: var(--s1) var(--s2) var(--s1) var(--s3); cursor: pointer; min-height: 40px;
}
kbd { font: 500 12px/1 var(--mono); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s1); color: var(--muted); white-space: nowrap; }

main { padding: var(--s10) 0 var(--s20); }
.lede { font-size: 1.1em; color: var(--muted); margin-top: var(--s3); }
.note { color: var(--muted); font-size: 0.9em; }

/* Big choices on the front page and in Selvkartet */
.tiles { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.tile {
  display: flex; flex-direction: column; gap: var(--s2); width: 100%; height: 100%;
  min-height: 120px; padding: var(--s5) var(--s6); text-align: left;
  background: var(--surface); color: var(--text); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; cursor: pointer;
}
.tile:hover { border-color: var(--accent); color: var(--text); }
.tile-title { font-size: 22px; font-weight: 700; color: var(--accent); }
.tile-text { color: var(--muted); font-size: 18px; max-width: none; }
.status { margin-top: auto; font-size: 15px; color: var(--muted); }
.status.done { color: var(--accent); font-weight: 600; }

.help { margin-top: var(--s12); padding: var(--s5) var(--s6); background: var(--accent-weak); border-radius: var(--radius); }
.help h2 { font-size: 20px; }
.help ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.help a { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: var(--s3) var(--s6); font: 600 18px/1.2 var(--font);
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-weak); color: var(--accent); }
.btn.small { min-height: 40px; padding: var(--s2) var(--s3); font-size: 15px; }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); align-items: center; }

/* Fagside layout with sticky table of contents */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s12); }
.toc { position: sticky; top: var(--s6); align-self: start; font-size: 15px; }
.toc-label { margin: 0 0 var(--s2); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: var(--s1) var(--s3); margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.doc-section { padding-top: var(--s12); scroll-margin-top: var(--s4); }
.doc-section:first-of-type { padding-top: var(--s8); }
.doc-section h3 { margin-top: var(--s8); }
.doc-section ul, .doc-section ol { padding-left: var(--s6); margin: var(--s3) 0 0; }
.doc-section li + li { margin-top: var(--s1); }
.meta { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Tables: hairlines, no zebra, tabular figures */
table { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-variant-numeric: tabular-nums; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line); }
thead th { font-weight: 600; font-size: 14px; color: var(--muted); border-bottom-color: var(--line-strong); }
td:last-child, th:last-child { padding-right: 0; }

/* Copyable templates */
.tpl { margin-top: var(--s4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.tpl-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.tpl pre { margin: 0; padding: var(--s4); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }

/* Search dialog */
dialog.search { width: min(640px, calc(100vw - var(--s8))); max-height: 80vh; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); margin-top: 10vh; }
dialog.search::backdrop { background: rgba(10, 20, 16, 0.5); }
.search-field { display: flex; border-bottom: 1px solid var(--line); }
.search-field input { flex: 1; min-width: 0; font: inherit; font-size: 19px; padding: var(--s4); border: 0; background: transparent; color: var(--text); }
.search-field input:focus { outline: none; }
.search-field button { font: inherit; font-size: 15px; border: 0; background: none; color: var(--muted); padding: 0 var(--s4); cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: var(--s2) 0; max-height: 60vh; overflow-y: auto; }
.search-results a { display: block; padding: var(--s2) var(--s4); text-decoration: none; color: var(--text); }
.search-results a[aria-selected="true"], .search-results a:hover { background: var(--accent-weak); }
.search-results .hit-group { display: block; font-size: 13px; color: var(--muted); }
.search-results .hit-text { display: block; font-size: 15px; color: var(--muted); }
.search-empty { padding: var(--s4); color: var(--muted); margin: 0; }

/* Selvkartet */
.sk-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.progress { font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar { height: 8px; background: var(--line); border-radius: var(--radius); margin: var(--s2) 0 var(--s6); overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--accent); }
.question { font-size: 26px; font-weight: 600; line-height: 1.35; max-width: 30ch; }
.choices { display: grid; gap: var(--s3); margin-top: var(--s6); max-width: 560px; }
.choice {
  min-height: var(--tap); padding: var(--s3) var(--s4); text-align: left;
  font: 500 19px/1.35 var(--font); color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
}
.choice:hover { border-color: var(--accent); background: var(--accent-weak); }
.choice.picked { border-color: var(--accent); background: var(--accent-weak); font-weight: 700; }
.choices.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.digits { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 360px; }
.choices.digits .choice { text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; }

label.field-label { display: block; font-size: 24px; font-weight: 600; line-height: 1.35; }
.hint { color: var(--muted); margin-top: var(--s2); }
textarea, input.text {
  width: 100%; max-width: 640px; margin-top: var(--s4); padding: var(--s3) var(--s4);
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
textarea { min-height: 160px; resize: vertical; }
textarea.cv { min-height: 280px; max-width: none; font-size: 17px; }
input.digits-in { font: 600 32px/1 var(--mono); letter-spacing: 0.2em; text-align: center; max-width: 320px; }

.stage { display: flex; align-items: center; justify-content: center; min-height: 200px; margin-top: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.big-digit { font: 700 96px/1 var(--mono); color: var(--accent); }
.symbol { font-size: 96px; line-height: 1; color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.legend span { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 22px; font-variant-numeric: tabular-nums; }
.sequence { font: 600 34px/1.3 var(--mono); color: var(--accent); margin-top: var(--s4); overflow-wrap: anywhere; }

.bars { display: grid; gap: var(--s5); margin-top: var(--s6); max-width: 640px; }
.bar-name { font-weight: 600; }
.bar { height: 12px; background: var(--line); border-radius: var(--radius); margin-top: var(--s2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.bar-text { color: var(--muted); font-size: 17px; margin-top: var(--s1); }

.box { margin-top: var(--s6); padding: var(--s5) var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.box h3 { margin-bottom: var(--s2); }
.box ul { padding-left: var(--s6); margin: var(--s2) 0 0; }
.box li + li { margin-top: var(--s2); }
.calm { margin-top: var(--s6); padding: var(--s4) var(--s5); background: var(--accent-weak); border-radius: var(--radius); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); padding: 0; list-style: none; }
.chips li { padding: var(--s1) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 16px; }
.type-code { font: 700 48px/1 var(--mono); color: var(--accent); letter-spacing: 0.04em; }
.job + .job { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.job-area { color: var(--muted); font-size: 17px; }
.write-lines { display: none; }
.error { color: var(--text); background: var(--accent-weak); padding: var(--s3) var(--s4); border-radius: var(--radius); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s10); font-size: 15px; color: var(--muted); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s8); }
.site-foot p { margin: 0; }

/* Narrow screens: normal flow, no hidden navigation */
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: var(--s6); }
  .toc { position: static; }
  .toc ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); border-left: 0; }
  .toc a { padding: var(--s1) 0; border: 0; margin: 0; }
}
@media (max-width: 680px) {
  h1 { font-size: 30px; }
  h2 { font-size: 23px; }
  .question { font-size: 23px; }
  .tiles { grid-template-columns: 1fr; }
  .choices.grid3 { grid-template-columns: 1fr; }
  .search-open kbd { display: none; }
  .search-open { margin-left: 0; }
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  table.stack td { display: block; border: 0; padding: var(--s1) 0; }
  table.stack td:first-child { font-weight: 600; }
  table.stack td + td::before { content: attr(data-label) ": "; color: var(--muted); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Print: one section or a Selvkartet summary to bring to a meeting */
@media print {
  .site-head, .site-foot, .toc, .row, .tpl-head button, .sk-top, .skip, dialog { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; }
  .doc { display: block; }
  .doc-section { padding-top: var(--s6); break-inside: avoid-page; }
  table, tr, .box, .tpl { break-inside: avoid; }
  .box, .tpl, .calm { border: 1px solid #999; background: #fff; }
  a { color: #000; }
  .meta a::after { content: " (" attr(href) ")"; }
  .write-lines { display: block; }
  .write-lines p { border-bottom: 1px solid #999; height: 28px; margin: 0; max-width: none; }
}

/* "Skriv ut denne delen": app.js marks one section, the rest is hidden on paper */
@media print {
  body.print-one .doc-section:not(.print-target),
  body.print-one .doc > header,
  body.print-one main > header { display: none !important; }
}

/* ---------- Pictures (line icons from assets/ikoner.svg) ---------- */
.ico, .tile-ico, .choice-ico, .pole-ico, .card-ico, .hero-ico { display: block; flex: none; color: var(--accent); }
.tile-ico { width: 48px; height: 48px; }
.choice-ico { width: 72px; height: 72px; }
.pole-ico { width: 32px; height: 32px; }
.card-ico { width: 40px; height: 40px; }
.hero-ico { width: 96px; height: 96px; }
.ico-box { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: none; background: var(--accent-weak); border-radius: var(--radius); }

.choices.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.choice.pic { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; padding: var(--s6) var(--s4); min-height: 200px; justify-content: center; }
.choice.pic-row { display: flex; align-items: center; gap: var(--s4); }
.pole-list { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s3); max-width: 640px; }
.pole-list li { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pole-list.big li { padding: var(--s4) var(--s5); }

.via-group { margin-top: var(--s8); }
.via-group h3 { display: flex; align-items: center; gap: var(--s3); }
.via-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.via { display: flex; flex-direction: column; gap: var(--s1); text-align: left; min-height: var(--tap); padding: var(--s3) var(--s4); font: inherit; font-size: 17px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.via span { color: var(--muted); }
.via strong { font-size: 19px; }
.via:hover { border-color: var(--accent); }
.via[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); outline: 2px solid var(--accent); outline-offset: -2px; }
.via[aria-pressed="true"] strong::after { content: "  ✓"; color: var(--accent); }

/* ---------- Occupation list ---------- */
.filters { display: grid; gap: var(--s4); margin-top: var(--s8); }
.filters input[type="search"] { width: 100%; max-width: 480px; min-height: var(--tap); padding: var(--s3) var(--s4); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-btn { min-height: 44px; padding: var(--s2) var(--s4); font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.count { color: var(--muted); font-size: 16px; margin-top: var(--s4); }

.cards { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.card { display: flex; gap: var(--s4); align-items: flex-start; height: 100%; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.card:hover { border-color: var(--accent); color: var(--text); }
.card-title { display: block; font-weight: 700; font-size: 19px; color: var(--accent); }
.card-text { display: block; color: var(--muted); font-size: 16px; margin-top: var(--s1); }
.tag { display: inline-block; margin-top: var(--s2); padding: 0 var(--s2); font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted); }

/* ---------- Occupation page ---------- */
.yrke-head { display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap; }
.yrke-head .ico-box { width: 128px; height: 128px; }
.yrke-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin-top: var(--s8); }
.yrke-facts .box { margin-top: 0; }
.subtle-link { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s8); font-size: 16px; color: var(--muted); }
.subtle-link:hover { color: var(--accent); }
.crumbs { font-size: 16px; margin-bottom: var(--s6); }

/* ---------- Jobbkompass ---------- */
.q-ico { width: 120px; height: 120px; margin: var(--s4) 0; }
.answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); max-width: 560px; margin-top: var(--s6); }
.answers .choice { text-align: center; font-size: 21px; }
.mode-switch { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

@media (max-width: 680px) {
  .choices.pair { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .choice.pic { min-height: 160px; padding: var(--s4) var(--s2); font-size: 17px; }
  .choice-ico { width: 56px; height: 56px; }
  .answers { grid-template-columns: 1fr; }
  .yrke-head .ico-box { width: 88px; height: 88px; }
  .hero-ico { width: 64px; height: 64px; }
}
@media print {
  .filters, .subtle-link { display: none; }
  .ico-box { background: none; }
}

.h3 { font-size: 20px; font-weight: 600; }
.similar, .kompass-h { margin-top: var(--s12); }
.front-intro { max-width: 40ch; }

.card-title, .tile-title, h1 { hyphens: auto; overflow-wrap: break-word; }
.signature { color: var(--muted); font-size: 14px; letter-spacing: 0.02em; }