:root {
  --bg: #f4f1ea;
  --surface: #ffffff;
  --text: #1d1d1b;
  --muted: #6b675f;
  --line: #ddd7cb;
  --accent: #c2410c;
  --accent-text: #ffffff;
  --danger: #b42318;
  --shared: #eeebe4;
  --ok: #1f7a3d;
  --varn: #a15c00;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #242220;
    --text: #f1eee8;
    --muted: #a39e94;
    --line: #3a3733;
    --accent: #f97316;
    --accent-text: #1d1d1b;
    --danger: #f87171;
    --shared: #2f2c29;
    --ok: #4cc276;
    --varn: #f0a63a;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.topbar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  /* Långa titlar som "Besiktningsrapport 3V olika håll" bryts på två rader i stället för att klippas. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Ord delas inte (2026-10-27): setTitle minskar texten tills orden och raderna får plats. */
  overflow-wrap: normal;
  word-break: normal;
}

.topbar a {
  color: var(--accent);
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar .back { justify-content: flex-start; }
/* Pilen ritas som symbol så att den ligger i linje med ? och kugghjulet (2026-10-20). */
.topbar .back svg { margin-left: -6px; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 24px 0 8px; }
.card h2 { margin-top: 4px; }

.muted { color: var(--muted); font-size: 15px; }
.error { color: var(--danger); }

.card, .list {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
}

.list { list-style: none; padding: 0; }
.list li + li { border-top: 1px solid var(--line); }
.list a, .list .item {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}
.list .main { font-weight: 600; }
.list .sub { color: var(--muted); font-size: 14px; }

.notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff4e5;
  color: #7a3e00;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) { .notice { background: #3b2a14; color: #fcd9a8; } }

.button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}
.button.big { min-height: 52px; font-size: 18px; }
.button.primary { background: var(--accent); color: var(--accent-text); }
.button.danger { color: var(--danger); margin-top: 32px; }

.field { display: block; margin: 0 0 12px; }
.field > span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px; /* under 16px zoomar Safari in */
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
}
.field select { appearance: none; -webkit-appearance: none; }
.field.shared output {
  display: block;
  padding: 10px 12px;
  border: 1px solid transparent; /* samma höjd som en inmatningsruta bredvid */
  border-radius: 8px;
  background: var(--shared);
  min-height: 44px;
}

.field.shared.ute output { border-color: var(--danger); color: var(--danger); background: rgba(180, 35, 24, .1); font-weight: 700; }

.row { display: flex; gap: 12px; }
.row > .field { flex: 1; }
.row > .check { flex: 1; min-width: 0; }
/* Kryssruta bredvid en textruta: i höjd med rutan, inte med etiketten ovanför. */
.row:has(> .field) > .check { align-self: flex-end; margin-bottom: 12px; }
/* Rutorna i en rad hamnar i linje även när en etikett bryts på två rader. */
.row > .field { display: flex; flex-direction: column; justify-content: flex-end; }

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.check input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.check.disabled { color: var(--muted); }
.check small { color: var(--muted); }

.sublabel, .grouplabel { font-weight: 600; margin: 12px 0 4px; }

.group { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.group-body { padding-left: 0; }

.segmented { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.segmented legend { font-size: 14px; color: var(--muted); margin-bottom: 4px; padding: 0; }
.segmented label { flex: 1 1 auto; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  text-align: center;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.segmented input:checked + span { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.measures { display: grid; gap: 6px; }
.mrow { display: grid; grid-template-columns: 2.2em 1fr 1fr 1fr 3em; gap: 6px; align-items: center; }
.mrow.head span { font-size: 12px; color: var(--muted); }
.mrow input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 17px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
  text-align: center;
}
.mrow input.auto { color: var(--muted); }
.mrow input::placeholder { color: var(--muted); opacity: .7; }
.mrow .mval {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 2px;
  font: inherit; font-size: 17px; text-align: center;
  background: none; border: 0; color: var(--text); cursor: pointer;
}
.mrow .mval.auto { color: var(--muted); }
.mrow .mval.tom { color: var(--muted); opacity: .7; }
.measures-wrap .note { margin: 0 0 8px; }
.mname { font-weight: 600; }
.mrow.skip { opacity: .5; }
.mname .krav { display: block; white-space: nowrap; font-size: 10px; font-weight: 400; color: var(--muted); line-height: 1.1; }
/* Ifyllt mått som inte krävs för besiktningstypen (2026-10-25). */
.mrow.skip.extra { opacity: 1; }
.mrow.extra .krav { color: var(--accent); font-weight: 600; }
.mrow.extra input[aria-label$="uppmatt"] { border: 1px dashed var(--accent); }
.mrow output { text-align: center; color: var(--muted); }
.mrow.ute { opacity: 1; }
.mrow.ute output { color: var(--danger); font-weight: 700; }
.mrow.ute input { border-color: var(--danger); color: var(--danger); background: rgba(180, 35, 24, .1); }

.files { padding-left: 20px; word-break: break-word; }
.files li { margin-bottom: 8px; }
.files a { color: var(--accent); }
.files .storlek { color: var(--muted); white-space: nowrap; }
/* Kryssruta per fil i Skicka in jobb (2026-10-26). */
.files.valbara { list-style: none; padding-left: 0; }
.files.valbara li { display: flex; gap: 10px; align-items: flex-start; }
.files.valbara input { width: 22px; height: 22px; flex: none; margin: 0; }
/* Avsnitten Säkerhet och Dokumentation bland blanketterna (2026-10-26). */
h3.avsnitt { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.card > h3.avsnitt:first-child { margin-top: 0; }

details summary { cursor: pointer; font-weight: 600; min-height: 32px; }
/* Sektion i en blankett som går att fälla ihop. */
details.section > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; list-style: none; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary h2, details.section > summary h3 { margin: 0; }
/* Blankettvalet i Nytt jobb går att fälla ihop (2026-10-26). */
details.blankettval { margin-top: 0; }
details.blankettval .card { box-shadow: none; padding: 0; margin: 0; border: 0; }
details.section > summary::after { content: '›'; color: var(--muted); font-size: 24px; line-height: 1; transform: rotate(90deg); transition: transform .15s; }
details.section:not([open]) > summary::after { transform: none; }
details.section[open] > summary { margin-bottom: 8px; }
details[open] summary { margin-bottom: 12px; }

/* Safari på iPhone ger datum- och tidsfält en egen minsta bredd som spräcker rutan. */
.field input[type="date"], .field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 1.4;
  height: 48px; /* samma höjd i Safari som i andra webbläsare */
}
.field input[type="date"]::-webkit-date-and-time-value, .field input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field { min-width: 0; }

.stack > * + * { margin-top: 8px; }

.figure {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
}
.bildruta { margin: 4px 0; }
.bildruta > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; }
.bildruta > summary::-webkit-details-marker { display: none; }
.bildruta > summary .ikon { flex: none; color: var(--muted); }
.bildruta-namn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bildruta-lage { margin-left: auto; font-size: 14px; white-space: nowrap; }
.bildruta-hel { margin-top: 8px; }
.figure img { display: block; width: 100%; height: auto; }
.figure span { display: block; margin-top: 4px; font-size: 13px; color: #6b675f; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  flex-direction: column;
}
/* Bildvisare med egen zoom, se showImage. */
/* Dubbeltryck zoomar inte sidan (2026-10-22). Nyp-zoom finns kvar, och bilder zoomas i sin egen vy. */
html { touch-action: manipulation; }
.zoom-stage { flex: 1; position: relative; overflow: hidden; touch-action: none; }
.zoom-stage img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.zoom-tools { display: flex; justify-content: center; gap: 12px; padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px); background: rgba(0, 0, 0, .05); }
.zoom-tools button { min-width: 64px; min-height: 44px; border: 0; border-radius: 22px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 20px; }
.overlay .close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  right: 12px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 20px;
}

.row.datum { align-items: end; }
.row.datum .field { flex: 1 1 auto; min-width: 0; }
/* Samma höjd och nederkant som datumrutan bredvid, så att rutan står mitt för den. */
.check.natt { flex: 0 0 auto; margin-bottom: 12px; height: 48px; min-height: 0; align-self: flex-end; white-space: nowrap; }

/* Upprepade rader, t.ex. svetsar */
.rowcard { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 12px; }
.rowhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
/* Hopfällbara rader, t.ex. svetsar (2026-10-27). */
details.rowcard > summary { display: flex; align-items: baseline; gap: 10px; min-height: 40px; padding: 6px 0; list-style: none; font-weight: normal; }
details.rowcard > summary::-webkit-details-marker { display: none; }
details.rowcard > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 22px; transition: transform .15s; }
details.rowcard[open] > summary::after { transform: rotate(90deg); }
details.rowcard > summary .rad-sammanfattning { color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.rowcard[open] > summary { margin-bottom: 0; }
.rowhead.hoger { justify-content: flex-end; margin-bottom: 4px; }
.rows > .button { width: 100%; margin-top: 12px; }
button.link { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--accent); }
button.link.danger { color: var(--danger); }
.plus-row { display: flex; align-items: center; gap: 8px; }
.plus-row input { flex: 1; min-width: 0; }
.plus-row .button.nu { flex: none; width: auto; min-height: 48px; padding: 0 18px; margin: 0; border: 1px solid var(--line); }
.plus-sign { font-size: 20px; font-weight: 600; }
.kmm-karta, .dp-narmast { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--accent); cursor: pointer; }
.kmm-karta .ikon, .dp-narmast .ikon { margin: 0; width: 22px; height: 22px; }
.kmm-karta:disabled, .dp-narmast:disabled { color: var(--muted); }
button.link.inline { padding: 0; font-size: inherit; text-decoration: underline; }
.note.info { font-size: 14px; border-left: 3px solid var(--accent); padding: 4px 0 4px 10px; margin: 4px 0 8px; }
.note.info p { margin: 0 0 6px; }
.check.sub { padding-left: 36px; }
/* Kontrollpunkt med kryssruta och text som fälls ut (TDOK-kraven). */
.check.punkt { align-items: flex-start; gap: 0; }
.punkt-box { display: flex; align-items: center; min-height: 44px; padding-right: 12px; flex: none; }
.check.punkt details { flex: 1; min-width: 0; }
.check.punkt summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-weight: normal; list-style: none; }
.check.punkt summary::-webkit-details-marker { display: none; }
.check.punkt summary::after { content: '›'; color: var(--muted); font-size: 22px; transition: transform .15s; }
.check.punkt details[open] summary { margin-bottom: 4px; }
.check.punkt details[open] summary::after { transform: rotate(90deg); }
.tdok { font-size: 14px; padding-bottom: 12px; }
.tdok h4 { margin: 12px 0 4px; font-size: 14px; }
.tdok p { margin: 0 0 6px; }
.tdok p.pkt { padding-left: 1.4em; text-indent: -1.4em; }
.note.rule { white-space: pre-line; font-size: 13px; margin: 6px 0 16px 36px; }

/* Plats: knappar och karta */
.row.geo { margin-top: 8px; }
.row.geo .button { flex: 1; min-height: 44px; }
.map-overlay { background: #000; }
.map-overlay .map { position: absolute; inset: 0; }
.map-crosshair { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; z-index: 1000; pointer-events: none;
  background: linear-gradient(var(--danger), var(--danger)) center / 3px 100% no-repeat, linear-gradient(var(--danger), var(--danger)) center / 100% 3px no-repeat; filter: drop-shadow(0 0 1px #fff); }
.map-hint { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: 12px; right: 12px; z-index: 1000; margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.92); color: #222; font-size: 14px; }
.map-bar { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 1000; display: flex; gap: 8px; }
.map-bar .button { flex: 1; }
.map-bar .button:nth-child(2) { flex: 0 0 52px; }
.map-minpos { position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 1000; width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 22px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.kmm-bar .button:nth-child(2) { flex: 1; }
.segmented.sub { padding-left: 24px; margin-top: -4px; }
.note.rule.radio { margin: -6px 0 16px 0; }

/* Regelverkstext som fälls ut (TMALL 0737). */
details.info-block { border-top: 1px solid var(--line); }
details.info-block:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
details.info-block summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; list-style: none; color: var(--accent, inherit); }
details.info-block summary::-webkit-details-marker { display: none; }
details.info-block summary::after { content: '›'; color: var(--muted); font-size: 22px; transition: transform .15s; }
details.info-block[open] summary::after { transform: rotate(90deg); }
.tdok p.kid { margin: 10px 0 2px; font-size: 12px; color: var(--muted); }
.tdok p.rad { margin: 8px 0 2px; font-style: italic; font-weight: 600; }
.info-summary { width: 100%; border-collapse: collapse; margin: 4px 0 10px; font-size: 14px; }
.info-summary th, .info-summary td { text-align: left; vertical-align: top; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.info-summary th { font-weight: 600; width: 55%; }
.button.info-image { display: block; width: 100%; text-align: left; margin: 0 0 8px; min-height: 44px; }

/* Tabell med mätpunkter (skevningsprotokoll). */
.matrix-wrap { overflow-x: auto; margin: 0 -4px 12px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.matrix th, .matrix td { padding: 2px 3px; text-align: center; border-bottom: 1px solid var(--line); }
.matrix thead th { font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.matrix tbody th { font-weight: 600; width: 2.5em; }
.matrix input { width: 100%; min-width: 3.5em; height: 40px; text-align: center; font-size: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.matrix td.calc { color: var(--muted); font-variant-numeric: tabular-nums; }
.matrix td.calc.warn { color: var(--danger); font-weight: 600; }
.matrix input.warn { border-color: var(--danger); color: var(--danger); font-weight: 600; background: rgba(180, 35, 24, .1); }
.matrix .with-sign { display: flex; gap: 2px; align-items: center; }
.matrix .with-sign input { min-width: 2.8em; }
.matrix button.sign { flex: none; width: 30px; height: 40px; border: 1px solid var(--line); border-radius: 6px; background: var(--shared); color: var(--text); font-size: 18px; padding: 0; }
.matrix tbody.span tr { height: 23px; }
.matrix tbody.span td, .matrix tbody.span th { border-bottom: 0; }
.matrix tbody.span tr.top > th, .matrix tbody.span tr.top > td:not(.calc) { border-top: 1px solid var(--line); }
.matrix tbody.span td.calc { border-top: 1px solid var(--line); border-left: 1px solid var(--line); cursor: pointer; }
.matrix tbody.span td.calc.tom { background: repeating-linear-gradient(-30deg, transparent 0 8px, var(--line) 8px 9px); cursor: default; }
.matrix tbody th.mark { color: var(--accent-text); background: var(--accent); border-radius: 6px; }
.matrix tbody th.dim { color: var(--line); }

/* Nytt jobb: rubrik i kort och föreslagna dokument. */
.card h3 { margin: 0 0 8px; font-size: 15px; }
.check small.forslag { color: var(--accent); font-size: 13px; }

/* Bilder i jobbet. */
.bildgrupp { margin: 10px 0; }
.bildrubrik { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.miniatyrer { display: flex; flex-wrap: wrap; gap: 8px; }
.miniatyr { position: relative; width: 72px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; }
.miniatyr .visa { width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.miniatyr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatyr .bort { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 24px; }
.miniatyr.ny { font-size: 28px; color: var(--accent); }

/* Varningen innan filerna skapas (2026-10-20). */
.card.varning { background: #fff4e5; color: #7a3e00; }
.card.varning ul { margin: 8px 0 12px; padding-left: 20px; }
@media (prefers-color-scheme: dark) { .card.varning { background: #3b2a14; color: #fcd9a8; } }

/* Jobbets status i listan (2026-10-20): Pågående, Skickat, Avslutat. */
.status-tag { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff4e5; color: #7a3e00; }
.status-tag.s-1 { background: #e6f2ff; color: #0b4a8b; }
.status-tag.s-2 { background: #e8f5e9; color: #1b5e20; }
@media (prefers-color-scheme: dark) {
  .status-tag { background: #3b2a14; color: #fcd9a8; }
  .status-tag.s-1 { background: #13304f; color: #b7d8ff; }
  .status-tag.s-2 { background: #173a1c; color: #b9e6bd; }
}
.status-val { margin-bottom: 8px; position: relative; }
/* Hänglås vid statusen: låser upp hela jobbet (2026-10-27). */
.status-val > .las { position: absolute; top: -10px; right: -6px; width: 44px; height: 40px; padding: 0; border: 0; background: none; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.status-val > .las svg { width: 22px; height: 22px; }
/* Blankettens hänglås bredvid namnet i toppraden (2026-10-27). */
.topbar .las-topp { flex: none; width: 36px; height: 44px; margin-left: -4px; padding: 0; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.topbar .las-topp[hidden] { display: none; }
.topbar .las-topp.last { color: var(--accent); }
.topbar .las-topp svg { width: 22px; height: 22px; }

/* Sök i jobblistan och blankettstatus med varning (2026-10-20). */
.sok { width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); min-height: 44px; }
.list .sub.varn { color: var(--danger); }

/* Kom igång (2026-10-20). */
.steg { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steg li.card { margin: 0; }
.steg li strong { display: block; font-size: 18px; margin-bottom: 4px; }
.steg li.klar strong { color: var(--accent); }
.steg li .button { margin-top: 8px; }

/* Hjälp: ?-knappen bredvid kugghjulet och hjälpsidan över allt annat (2026-10-20). */
/* ? och kugghjulet ritade som symboler i samma stil och storlek (2026-10-20). */
.topbar a.ikon svg { width: 28px; height: 28px; display: block; }
.hjalp-overlay {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: var(--bg); color: var(--text);
  padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 24px);
}
.hjalp-huvud {
  position: sticky; top: 0; display: flex; align-items: center; gap: 8px;
  max-width: 640px; margin: 0 auto; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.hjalp-huvud h2 { flex: 1; margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.hjalp-stang { min-width: 44px; min-height: 44px; font-size: 22px; background: none; border: 0; color: var(--accent); cursor: pointer; }
.hjalp-text { max-width: 640px; margin: 0 auto; padding: 8px 16px; line-height: 1.5; }
.hjalp-text .hjalp-intro { font-size: 17px; }
.hjalp-text h3 { margin: 20px 0 6px; font-size: 16px; }
.hjalp-text p, .hjalp-text li { margin: 0 0 8px; }
.hjalp-text ul { padding-left: 20px; margin: 0 0 8px; }
.hjalp-text a { color: var(--accent); }

/* Appens logga bredvid namnet på startsidan (2026-10-20): stål och glöd i ljust läge,
   varselorange i mörkt läge. */
.topbar .logo { width: 32px; height: 32px; flex: none; }
.logo-bg { fill: #0b0b0f; }
.logo-ral { fill: url(#logo-stal); }
.logo-gnista { fill: #ef4444; }
.logo-mitt { fill: #fbbf24; }
@media (prefers-color-scheme: dark) {
  .logo-bg { fill: #f97316; }
  .logo-ral { fill: #1f2937; }
  .logo-gnista { fill: #fde047; }
  .logo-mitt { fill: #fff; }
}
.card > .check + .field { margin-top: 12px; }
.check .doknamn small.hel { display: block; font-size: 13px; line-height: 1.3; margin-top: 2px; }
.check:has(> .doknamn) { align-items: flex-start; padding: 6px 0; }
.check:has(> .doknamn) input { margin-top: 1px; }
/* Kopiera jobbnamnet, bredvid titeln på jobbsidan (2026-10-20). */
.topbar .kopiera { flex: none; width: 36px; height: 44px; margin-left: -4px; padding: 0; border: 0; background: none; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.topbar .kopiera[hidden] { display: none; }
.topbar .kopiera svg { width: 22px; height: 22px; }
.topbar .kopiera.klar svg { display: none; }
.topbar .kopiera.klar::after { content: '✓'; font-size: 22px; font-weight: 700; }
/* Kopieraknapp i en ruta: ligger inuti rutans högra kant. */
.field:has(> .kopiera) { position: relative; }
.field > .kopiera { position: absolute; right: 4px; bottom: 4px; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.field > .kopiera svg { width: 20px; height: 20px; }
.field:has(> .kopiera) > input { padding-right: 44px; }
.kopiera.klar svg { display: none; }
.field > .kopiera.klar::after { content: '✓'; font-size: 20px; font-weight: 700; }
/* Hänglås till höger om blankettens namn (2026-10-21). */
.list li.med-las { display: flex; align-items: center; }
.list li.med-las > a { flex: 1; min-width: 0; }
/* Blankettens läge i jobbet (2026-10-27): ikon till vänster om namnet. */
.blankettlista .list a { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; }
.blankettlista .list a > .text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blankettlista .lage { flex: none; display: flex; color: var(--muted); }
.blankettlista .lage svg { width: 24px; height: 24px; }
.blankett-summa { margin: 0 0 4px; font-weight: 600; }
.list .las { flex: none; width: 40px; height: 48px; margin-right: 6px; padding: 0; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.list .las.last { color: var(--accent); }
.list .las svg { width: 22px; height: 22px; }
fieldset.blankett { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.behorigheter { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
fieldset.behorigheter legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
/* Låst: inget går att ändra, men avsnitten går att fälla ihop och bilder att titta på. */
fieldset.blankett.last :is(input, select, textarea):disabled { opacity: 0.75; -webkit-text-fill-color: currentColor; }
.las-note { display: flex; align-items: center; gap: 10px; }
.las-note svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.las-note span { flex: 1; }
.las-note .button { width: auto; margin: 0; padding: 8px 14px; }
/* Låsbara avsnitt på jobbsidan: hänglåset till höger i rubriken (2026-10-21). */
details.lasbar > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
details.lasbar > summary::-webkit-details-marker { display: none; }
details.lasbar > summary::before { content: '›'; color: var(--muted); font-size: 22px; line-height: 1; transition: transform .15s; }
details.lasbar[open] > summary::before { transform: rotate(90deg); }
details.lasbar > summary .las { margin-left: auto; flex: none; width: 44px; height: 36px; padding: 0; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: flex-end; }
details.lasbar > summary .las.last { color: var(--accent); }
details.lasbar > summary .las svg { width: 22px; height: 22px; }
details.lasbar.last :is(input, select, textarea):disabled { opacity: 0.75; -webkit-text-fill-color: currentColor; }
details.lasbar.last .miniatyr.ny, details.lasbar.last .bort { display: none; }

/* Förslag att avsluta gamla skickade jobb (2026-10-21). */
.notice .button { align-self: flex-start; margin-top: 6px; }
/* Senaste Skicka in på jobbsidan (2026-10-21). */
.inskickat { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.inskickat summary { cursor: pointer; }
.inskickat .varn { color: var(--danger); font-weight: 600; }
.inskickat .files { margin: 6px 0; }
.export .notis { font-weight: 600; }
.dela-blankett { margin-top: 16px; }
/* Ändra blanketter under blankettlistan (2026-10-21). */
details.andra-blanketter { margin: -4px 0 16px; }
details.andra-blanketter > summary { display: flex; align-items: center; gap: 8px; list-style: none; color: var(--accent); min-height: 40px; padding: 0 4px; }
details.andra-blanketter > summary::-webkit-details-marker { display: none; }
details.andra-blanketter[open] { background: var(--surface); border-radius: 12px; padding: 8px 16px 12px; }
details.andra-blanketter .button { margin-top: 8px; }
/* Alla hänglås i en rak linje med blankettlistans (2026-10-21): 48 px breda, ikonen i mitten,
   högerkanten 6 px innanför kortets kant. */
details.lasbar > summary .las { width: 48px; justify-content: center; margin-right: -10px; }
details.andra-blanketter { padding: 0 16px; }
details.andra-blanketter > summary { padding: 0; }
details.andra-blanketter > summary::before { content: '›'; color: var(--muted); font-size: 22px; line-height: 1; transition: transform .15s; }
details.andra-blanketter[open] > summary::before { transform: rotate(90deg); }
/* En låst blankett går inte att kryssa ur (2026-10-21). */
.check.last { opacity: .6; }

/* Lägg till/ta bort som liten text under rubriken */
details.andra-blanketter { margin: -6px 0 8px; padding: 0 2px; }
details.andra-blanketter:not([open]) > summary { min-height: 28px; font-size: 14px; font-weight: 500; }
details.andra-blanketter:not([open]) > summary::before { font-size: 18px; }
details.andra-blanketter[open] { padding: 8px 16px 12px; margin-bottom: 12px; }
/* Utfällda hänvisningar till andra dokument under ett stycke i kraven (2026-10-22) */
.tdok .hanvisning { margin: 4px 0 12px 1.4em; }
.tdok .hanvisning .button.info-image { min-height: 0; padding: 8px 12px; margin: 0 0 6px; font-size: 14px; }
.tdok .ref, .guide .ref { color: var(--accent); text-decoration: underline; cursor: pointer; }
.tdok .hanvisning .hanvisning { margin: 0 0 8px 1em; }
/* Guiden Klassificera rälsfel, se js/ralsfel.js. */
.overlay.guide { background: var(--bg); color: var(--text); overflow-y: auto; padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 24px); }
.overlay.guide h2 { margin: 6px 56px 12px 0; }
.guide-body { max-width: 640px; }
.guide-body .button { display: block; width: 100%; margin: 0 0 10px; text-align: left; }
.guide-val strong { display: block; }
.guide-val span { display: block; font-weight: normal; font-size: 14px; color: var(--muted); margin-top: 2px; }
.guide-spar { font-size: 14px; margin: 0 0 8px; }
.guide-nr { font-size: 44px; font-weight: 700; color: var(--accent); margin: 8px 0 0; }
.guide-namn { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
/* Svetsstöd, se js/svetsstod.js. */
.svetsstod { display: flex; gap: 8px; margin-top: 8px; }
.svetsstod .button { flex: 1; }
.tappning { margin: 6px 0 0; }
.tappning.matt { font-size: 14px; color: var(--muted); }
.tappning.matt.nu { color: var(--accent); font-weight: 600; }
.tappning.matt .link { margin-left: 10px; }
.guide-namn .rad { display: block; }
.guide-body .row { display: flex; gap: 8px; }
.guide-body .row .field { flex: 1; min-width: 0; }
.guide-body .varningar { margin: 8px 0; }
.guide-body ul { padding-left: 1.2em; }
.guide-body li { margin-bottom: 4px; }
.tidrad { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tidrad span { flex: 1; }
.tidrad output { min-width: 3.2em; text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 600; }
.guide-body .tidrad .button { display: inline-block; width: 52px; margin: 0; text-align: center; font-size: 22px; }
.svetsa .fasrubrik { font-size: 22px; font-weight: 600; text-align: center; margin: 16px 0 0; }
.storklocka { font-size: min(30vw, 30vh); line-height: 1; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; margin: 8px 0; }
.storklocka.over { color: var(--accent); }
.svetsa .fasbesked { text-align: center; font-size: 18px; min-height: 3em; }
.smaklockor { display: flex; justify-content: center; gap: 24px; margin: 12px 0 20px; text-align: center; }
.smaklockor span { display: block; font-size: 13px; color: var(--muted); }
.smaklockor strong { font-size: 28px; font-variant-numeric: tabular-nums; }
@keyframes blink { 0%, 60% { background: var(--accent); } 100% { background: var(--bg); } }
.overlay.guide.blink { animation: blink 1.2s ease-out 2; }
/* Förvarning tio sekunder före nästa steg: gul. */
.storklocka.snart { color: #d97706; }
@keyframes blink-gul { 0%, 60% { background: #facc15; } 100% { background: var(--bg); } }
.overlay.guide.blink-gul { animation: blink-gul 1s ease-out 1; }
/* Under blinkningen blir texten vit (orange) eller mörk (gul) så att klockan syns, och
   knapparna får vit bakgrund (2026-10-22). */
@keyframes text-vit { 0%, 60% { color: #fff; } }
@keyframes text-mork { 0%, 60% { color: #1d1d1b; } }
@keyframes knapp-vit { 0%, 60% { background: #fff; color: #c2410c; } }
.overlay.guide.blink :is(h2, .storklocka, .fasrubrik, .fasbesked, .smaklockor span, .smaklockor strong) { animation: text-vit 1.2s ease-out 2; }
.overlay.guide.blink .button { animation: knapp-vit 1.2s ease-out 2; }
.overlay.guide.blink-gul :is(h2, .storklocka, .fasrubrik, .fasbesked, .smaklockor span, .smaklockor strong) { animation: text-mork 1s ease-out 1; }
/* Varningar i lathunden och klockrutan, som varningarna före Skapa filer. */
.guide-body .notis { background: #fff4e5; color: #7a3e00; border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
@media (prefers-color-scheme: dark) { .guide-body .notis { background: #3b2a14; color: #fcd9a8; } }
/* Bedömningsstöd som kort, se js/bedomning.js (2026-10-22). */
.bedomning .bed-punkt { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; background: var(--surface); }
.bedomning .bed-punkt summary { padding: 12px 14px; font-weight: 600; cursor: pointer; }
.bedomning .bed-punkt[open] summary { border-bottom: 1px solid var(--line); }
.bedomning .bed-rad, .bedomning .bed-niva { padding: 8px 14px; }
.bedomning .bed-rad p, .bedomning .bed-niva p { margin: 2px 0; }
.bedomning .bed-niva { border-left: 5px solid; margin: 6px 10px; border-radius: 4px; }
.bedomning .bed-niva > strong { display: block; font-size: 14px; }
.bedomning .bed-akut { border-color: #c62828; }
.bedomning .bed-v { border-color: #ef6c00; }
.bedomning .bed-m { border-color: #f9a825; }
.bedomning .bed-b { border-color: #9e9e9e; }
.bedomning .bed-niva.tom { opacity: .6; }
.bedomning .button.liten { width: auto; padding: 6px 12px; font-size: 14px; margin-top: 6px; min-height: 0; }
/* Fällbar textruta, t.ex. kommentar per svets (2026-10-22). */
.fallbar-text { margin: 8px 0; }
.fallbar-text summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }
.fallbar-text .field { margin-top: 4px; }
/* Avsnitt ur regelverken som text och tabeller (js/regelverk.js, 2026-10-22). */
.regelverk .rv-text { font-size: 15px; line-height: 1.45; margin: 12px 0; }
.regelverk .rv-text h3 { font-size: 16px; margin: 18px 0 6px; }
.regelverk .rv-text p { margin: 0 0 8px; }
.regelverk .rv-krav { margin: 12px 0 2px !important; font-size: 12px; font-weight: 600; color: var(--muted); }
.regelverk .rv-rad { border-left: 4px solid var(--line); padding: 2px 0 2px 10px; margin: 8px 0 10px; color: var(--muted); }
.regelverk .rv-rad > strong { display: block; color: var(--text); font-size: 13px; }
.regelverk .rv-li { display: flex; gap: .5em; margin: 0 0 6px; }
.regelverk .rv-mark { flex: 0 0 auto; min-width: 1.3em; }
.regelverk .rv-tabelltitel { font-weight: 600; margin-top: 14px !important; }
.regelverk .rv-fotnot { font-size: 13px; color: var(--muted); }
.regelverk .rv-tabell { overflow-x: auto; margin: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.regelverk .rv-tabell table { border-collapse: collapse; font-size: 13px; line-height: 1.3; min-width: 100%; }
.regelverk .rv-tabell :is(th, td) { border: 1px solid var(--line); padding: 4px 4px; hyphens: auto; -webkit-hyphens: auto; vertical-align: top; text-align: left; white-space: pre-line; }
.regelverk .rv-tabell th { background: var(--surface); font-weight: 600; }
/* Breda tabeller rullas i sidled; första kolumnen står kvar. */
.regelverk .rv-tabell td:first-child { position: sticky; left: 0; background: var(--bg); }
.regelverk .rv-figur { margin: 6px 0 12px; }
.regelverk .rv-figur .visa { display: block; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.regelverk .rv-figur img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.regelverk .rv-figur figcaption { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Svetslogg (2026-10-26). */
table.logg { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.logg th, table.logg td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
table.logg thead th { color: var(--muted); font-size: 14px; }
table.logg tbody th { font-weight: 600; }
table.logg .tal { text-align: right; }
table.logg tr:last-child th, table.logg tr:last-child td { border-bottom: 0; }

/* Röstinmatning (2026-10-26). */
.rost { margin: 0 0 12px; }
.rost .lyssnar { background: var(--accent); color: var(--accent-text); }
.rost-par { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 17px; font-variant-numeric: tabular-nums; }
.rost-val { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 12px; font-size: 17px; font-variant-numeric: tabular-nums; }
.rost.flytande {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  max-width: 560px; margin: 0 auto; max-height: 55vh; overflow-y: auto;
  padding: 12px 44px 12px 12px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.rost.flytande .note { margin: 6px 0; }
.rost-stang {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: var(--shared); color: var(--text); font-size: 20px; line-height: 32px;
}
/* Plats under sista måttet så att den svävande rutan inte döljer det. */
body.rost-pa { padding-bottom: 50vh; }

/* Skärmen hålls tänd (vaken.js, 2026-10-26). Liten rad överst, ovanför svetsstödets ruta. */
.vaken {
  position: fixed; z-index: 200; top: calc(env(safe-area-inset-top) + 4px); left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px; font-size: 12px; pointer-events: none; white-space: nowrap;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
}
.vaken-video { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; bottom: 0; }

/* Neutraliseringskalkylatorn (kalkylator.js, 2026-10-26). */
.kalk-knapp { margin: 0 0 12px; }
.kalk-svar { font-size: 28px; font-weight: 700; margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
.kalk-svar small { font-size: 16px; font-weight: 400; color: var(--muted); }
.calc-notis { display: block; margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--danger); background: rgba(180, 35, 24, .1); }
.calc-notis[hidden] { display: none; }

/* Brandrisk i heta arbeten (brandrisk.js, 2026-10-26). Färgerna som Brandrisk Ute: grön till röd. */
.brandrisk .button { align-self: flex-start; }
.brandrisk-svar p { margin: 8px 0 0; }
.brandrisk-svar small { display: block; font-weight: 400; font-size: 14px; }
.brandrisk-niva { font-weight: 700; padding: 8px 10px; border-radius: 8px; border-left: 6px solid; }
.niva-1 { border-color: #2e7d32; } .niva-2 { border-color: #7cb342; } .niva-3 { border-color: #fbc02d; }
.niva-4 { border-color: #fb8c00; } .niva-5 { border-color: #e53935; } .niva-6 { border-color: #8e0000; }
.field .notis, .brandrisk-svar .notis { background: #fff4e5; color: #7a3e00; border-radius: 8px; padding: 8px 10px; }
@media (prefers-color-scheme: dark) { .field .notis, .brandrisk-svar .notis { background: #3b2a14; color: #fcd9a8; } }

/* Driftplatser i rutan Plats (driftplatser.js, 2026-10-26). */
.dp-forslag { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; }
.dp-val { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 15px; }
.dp-val small { color: var(--muted); }
.dp-forslag[hidden], .dp-betyder[hidden] { display: none; }
.dp-betyder { margin: -4px 0 8px; }

/* Km + m från position eller karta (kmm.js, 2026-10-26). */
.kmm-status { margin: 6px 0 0; }
.kmm-andra { display: block; margin-top: 4px; }
.map-lager { position: absolute; top: calc(env(safe-area-inset-top) + 60px); right: 12px; z-index: 1000; display: flex; gap: 4px; }
.map-lager .button { padding: 6px 10px; font-size: 14px; }
.km-tavla { background: none; border: 0; }
.km-tavla span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 5px; border: 2px solid #ff5a1f; border-radius: 3px; background: #fff; color: #111; font: 700 12px/1.2 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.dp-grans { background: none; border: 0; }
.dp-grans span { display: inline-block; transform: translate(8px, -125%); padding: 0 4px; border-radius: 3px; background: #1f6fff; color: #fff; font: 600 11px/1.4 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Linjeikoner (js/ikoner.js, 2026-10-26): före texten, eller efter med klassen efter. */
.ikon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: .4em; flex: none; }
.ikon.efter { margin: 0 0 0 .35em; }
.ikon.mellan { margin: 0 .2em; width: 1em; height: 1em; vertical-align: -0.15em; color: var(--muted); }
.ikon.ok { color: var(--ok); }
.ikon.varn { color: var(--varn); }
.ikon.fel { color: var(--danger); }
.ikon.acc { color: var(--accent); }
.ikon-saknas { color: var(--muted); }
.button.primary .ikon.acc { color: inherit; }
[aria-expanded="true"] > .ikon.vrid { transform: rotate(180deg); }
.overlay .close .ikon, .hjalp-stang .ikon, .map-minpos .ikon { margin: 0; width: 22px; height: 22px; vertical-align: middle; }
.med-ikon { display: flex; align-items: flex-start; gap: .45em; }
.med-ikon > .ikon { margin: .1em 0 0; }
.svetsstod .button { padding-inline: 8px; white-space: nowrap; }
/* Kartlager (js/kartlager.js, 2026-10-26). */
.kartlager-panel { position: absolute; top: calc(env(safe-area-inset-top) + 104px); right: 12px; z-index: 1001; width: min(280px, calc(100% - 24px)); max-height: calc(100% - env(safe-area-inset-top) - 200px); overflow-y: auto; padding: 12px; border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.3); display: grid; gap: 4px; }
.kartlager-panel > strong { font-size: 15px; margin-bottom: 4px; }
.kartlager-rad { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.kartlager-rad input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.kartlager-prick { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); flex: none; }
.kartlager-not { margin: 6px 0; font-size: 13px; color: var(--muted); }
.kartlager-panel > .button { margin: 0; padding: 8px; }
.kartlager-popup { font: 14px/1.35 system-ui, sans-serif; display: grid; gap: 6px; min-width: 180px; }
.kartlager-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.kartlager-popup dt { color: #6b675f; }
.kartlager-popup dd { margin: 0; font-weight: 600; }
.kartlager-popup .button { margin: 4px 0 0; padding: 8px; background: #c2410c; color: #fff; }
.kartlager-flytta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kartlager-meter { width: 56px; padding: 6px 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; }
.kartlager-riktning { display: flex; gap: 4px; }
.kartlager-riktning .button { margin: 0; padding: 6px 10px; width: auto; background: #eee; color: #c2410c; }
.kartlager-riktning .button.primary { background: #c2410c; color: #fff; }
.kartlager-tips { margin: 0; font-size: 12px; color: #6b675f; }
.kartlager-popup > .button + .button { background: #eee; color: #c2410c; }

.kmm-stolpe { display: block; margin-top: 4px; }
.map-vaxel-tips { flex: 1; align-self: center; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.92); color: #222; font-size: 15px; text-align: center; }
.bis-namn { background: none; border: 0; }
.bis-namn span { display: inline-block; transform: translate(9px, -50%); padding: 0 4px; border-left: 3px solid; border-radius: 3px; background: rgba(255,255,255,.92); color: #111; font: 600 11px/1.4 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; }
.kmm-fraga { margin: 8px 0 0; }
.kmm-fraga .row { gap: 8px; }

/* SoS-planen (2026-10-26): knappar, foton av planen, roller och signaturer. */
.knapprad { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.knapprad .button { flex: 1 1 10em; }
.sos-foton { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.sos-foton > p { grid-column: 1 / -1; margin: 0; }
.sos-foto { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sos-foto img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }
.sos-oversikt h3 { margin: 12px 0 4px; font-size: 15px; }
.roller { list-style: none; margin: 0; padding: 0; }
.roller li { display: flex; flex-wrap: wrap; gap: 0 .6em; padding: 6px 0; border-bottom: 1px solid var(--line, #e3e0d8); }
.roller .roll { flex: 1 0 100%; font-size: 13px; color: var(--muted, #6b675f); }
.roller a { margin-left: auto; }
.signaturer { display: flex; flex-direction: column; gap: 8px; }
.signatur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line, #e3e0d8); }
.signatur img { height: 44px; max-width: 50%; background: #fff; border-radius: 4px; }
.signatur .link { margin-left: auto; }
.signaturyta { display: block; width: 100%; height: 220px; background: #fff; border: 1px solid #b9b4a8; border-radius: 8px; touch-action: none; margin: 8px 0; }
/* Risker ur stödtexten att kryssa i (TMALL 0482, 2026-10-26). */
details.riskval { margin: 8px 0; }
details.riskval > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.field.risk > strong { display: block; margin: 8px 0 2px; }
/* Signeringsläge för SoS-planerna (2026-10-26). */
.signeringslage .las-lage { display: flex; align-items: center; gap: 6px; margin: 0 56px 4px 0; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.signeringslage .close { display: none; }
.signeringslage h3 { margin: 20px 0 6px; font-size: 1.05rem; }
dl.las { margin: 0; }
.las-rad { padding: 8px 0; border-bottom: 1px solid var(--line); }
.las-rad dt { color: var(--muted); font-size: 0.85rem; }
.las-rad dd { margin: 2px 0 0; font-size: 1.05rem; white-space: pre-wrap; }
.las-rad.fraga { display: flex; gap: 12px; align-items: baseline; }
.las-rad.fraga dt { flex: 1; color: var(--text); font-size: 1rem; }
.las-rad.fraga dd { margin: 0; font-weight: 600; }
.las-risk { padding: 8px 0; border-bottom: 1px solid var(--line); }
.las-risk p { margin: 2px 0 0; white-space: pre-wrap; }
.las-sidor { display: grid; gap: 8px; margin: 12px 0; }
.las-sidor img { width: 100%; border: 1px solid var(--line); }
.signeringslage .button.big { width: 100%; margin-top: 16px; }
.signeringslage .avsluta { width: 100%; margin-top: 24px; }
.signeringslage h2 { font-size: 1.4rem; text-transform: none; letter-spacing: 0; color: var(--text); margin-top: 8px; }
.behorighet-rad .field.giltig { margin: 0 0 8px 34px; }

/* Mätläge i besiktningsrapporterna (2026-10-28): ett mått i taget, stora knappar för handskar. */
.matlage-knapp { width: 100%; margin-bottom: 12px; }
.overlay.matlage { display: flex; flex-direction: column; gap: 10px; }
.overlay.matlage > * { flex: none; }
.overlay.matlage .knapprad { margin: 0; }
.overlay.matlage h2 { margin-bottom: 0; }
.ml-prickar { flex: none; min-height: 42px; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.ml-prick { flex: none; min-width: 40px; height: 34px; padding: 0 8px; border-radius: 17px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.ml-prick.klar { background: var(--line); }
.ml-prick.ute { border-color: var(--danger); color: var(--danger); }
.ml-prick.nu { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.ml-huvud { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: end; gap: 8px; }
.ml-namn { font-size: 52px; font-weight: 700; line-height: 1; }
.ml-steg { font-size: 15px; }
.ml-varde small { display: block; color: var(--muted); font-size: 14px; }
.ml-varde strong { font-size: 26px; }
.ml-uppmatt { display: block; text-align: center; font-size: 64px; font-weight: 700; min-height: 80px; line-height: 80px; border: 2px solid var(--accent); border-radius: 14px; background: var(--surface); font-variant-numeric: tabular-nums; }
.ml-uppmatt.tom::before { content: 'Uppmätt'; color: var(--muted); font-size: 28px; font-weight: 400; }
.ml-diff { text-align: center; font-size: 22px; min-height: 28px; }
.ml-diff.ute { color: var(--danger); font-weight: 700; }
.ml-tangenter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ml-tangent { min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 30px; font-weight: 600; display: grid; place-items: center; touch-action: manipulation; }
.ml-tangent:active { background: var(--line); }
.ml-tangent .ikon { margin: 0; width: 30px; height: 30px; }
.ml-knappar .button { flex: 1; }
/* Avsnittets förklaring bakom Så fyller du i (2026-10-27). */
details.sektion-hjalp { margin: -4px 0 8px; }
details.sektion-hjalp > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 500; color: var(--accent); list-style: none; }
details.sektion-hjalp > summary::-webkit-details-marker { display: none; }
details.sektion-hjalp > summary svg { width: 18px; height: 18px; }
details.sektion-hjalp[open] > summary { margin-bottom: 4px; }

/* Inställningarnas grupper (2026-10-27). */
details.installning { margin: 4px 0; border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
details.installning > summary h2 { margin: 8px 0; }
details.installning h3 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Smala påminnelser på startsidan (2026-10-27). */
.notice.smal { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; margin-bottom: 8px; }
.notice.smal strong { flex: none; }
.notice.smal span { flex: 1; min-width: 0; font-size: 14px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice.smal svg { flex: none; width: 20px; height: 20px; }
details.rowcard > summary strong { flex: none; white-space: nowrap; }

/* Val med symboler, t.ex. strecken och loggan på rälsmärkningen (2026-10-28). */
.symbolval > span:first-child { display: block; margin-bottom: 6px; }
.symboler { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.symbol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; min-height: 64px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; font-size: 14px; text-align: left; }
.symbol .symbol-bild svg { display: block; max-width: 100%; height: auto; }
.symbol[aria-pressed="true"] { border: 2px solid var(--accent); padding: 9px; font-weight: 600; }
/* Mätläge och Röstinmatning bredvid varandra över måttabellen (2026-10-28). */
.matt-knappar { display: flex; gap: 8px; margin-bottom: 12px; }
.matt-knappar > * { flex: 1 1 0; min-width: 0; margin: 0; }
.matt-knappar .rost:not(.flytande) .button { width: 100%; margin: 0; }
.matt-knappar .matlage-knapp { margin: 0; }
.matt-knappar .button.med-ikon { padding-inline: 8px; justify-content: center; align-items: center; white-space: nowrap; }
.matt-knappar .button.med-ikon > .ikon { margin: 0; }

/* Mottagare och ämne över Skicka in jobb (2026-10-28). */
.mottagare { margin-bottom: 8px; }
.mottagare-rad { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.mottagare-rad > .muted { flex: 0 0 44px; }
.mottagare-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Visa i Kartor (2026-10-28): över knappen för min position. */
.map-kartor { position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 144px); z-index: 1000; display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; padding: 8px 14px; font-size: 15px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.map-kartor .ikon { width: 18px; height: 18px; margin: 0; }

/* Flytten från github.io och Beta-markeringen på startsidan (2026-10-28). */
.notice ol.flytt { margin: 6px 0 2px; padding-left: 20px; font-size: 15px; }
.notice ol.flytt li { margin: 2px 0; }
.kanal-beta { margin: 0 0 10px; padding: 6px 12px; border-radius: 10px; border: 1px dashed currentColor; font-size: 14px; opacity: .85; }
.kanal-beta strong { margin-right: 4px; }

/* Ny version klar i Stabil (2026-10-28). */
.ny-version { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 40; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }

/* Stoppad version (stopp.json, 2026-10-28). */
.stoppad-version { position: sticky; top: 0; z-index: 60; margin: 0; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: #b91c1c; color: #fff; font-weight: 600; }
.notice.varning-ruta { border-left: 4px solid #b91c1c; }