/* Overskrifter og tall: Bricolage Grotesque (selvhostet, SIL OFL, se fonts/). Brødtekst forblir systemfonten. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f6f7f5;
  --surface: #ffffff;
  --text: #1c1f1d;
  --muted: #6b726d;
  --muted-bg: #e6e9e6;
  --border: #dde1dd;
  --accent: #00ae42;
  --muted-strong: #4a514c; /* dempet tekst på dempet bakgrunn (kontrast ≥ 4,5) */
  --accent-ink: #00692a;   /* tekst på lys bakgrunn */
  --accent-fill: #007a30;  /* flate med hvit tekst */
  --accent-text: #ffffff;
  --in: #00a03c;
  --out: #d97706;
  --danger: #c0392b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  --paper: #ffffff;       /* hvit flate for bilder, tegninger og kamera, også i mørk drakt */
  --paper-ink: #1c1f1d;
  --on-color: #ffffff;    /* tekst på mettede flater */
  --ink-soft: #333333;
  --black: #000000;
  --line: #cccccc;
  --warn: #b26a00;
  --vipps: #d4410a;       /* mørkere enn Vipps-oransje: hvit tekst må ha kontrast 4,5 : 1 */
  --out-fill: #b45309;    /* flate med tekst for «Sjekk ut» */
  --on-out: #ffffff;
  --alert: #e5484d;
  --fixed: #d98a00;
  --info-blue: #2f6fd6;
  --attn: #d9822b;
  --attn-strong: #b45309;
  --ok-green: #2a9d4b;
  --customer: #2f5bea;
  --star: #e0a100;
  --armed: #b3261e;
  --copper: #c99a2e;
  --copper-dark: #8a6a1c;
  --src-lib: #1d4ed8;
  --src-ams: #047857;
  --sb-ok-bg: #e4f6e9; --sb-ok-line: #8fd3a3; --sb-ok-ink: #14532d;
  --sb-warn-bg: #fff4d6; --sb-warn-line: #e8c65a; --sb-warn-ink: #5c4400;
  --sb-bad-bg: #fde7e7; --sb-bad-line: #e59a9a; --sb-bad-ink: #7a1414;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141615;
    --surface: #1d201e;
    --text: #e8ebe9;
    --muted: #9aa29d;
    --muted-bg: #2a2e2b;
    --border: #2f3431;
    --accent: #1fc25b;
    --accent-ink: #1fc25b;
    --muted-strong: #b4bbb6;
    --accent-fill: #1fc25b;
    --accent-text: #08130c;
    --in: #34c768;
    --out: #f59e0b;
    --danger: #ef6b5b;
    --shadow: none;
    --out-fill: #f59e0b;
    --on-out: #1a1200;
    --sb-ok-bg: #12301c; --sb-ok-line: #2c6b43; --sb-ok-ink: #b7eacb;
    --sb-warn-bg: #3a2f0c; --sb-warn-line: #7a6320; --sb-warn-ink: #f3d98a;
    --sb-bad-bg: #3d1515; --sb-bad-line: #8a3030; --sb-bad-ink: #f4b8b8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand svg { width: 32px; height: 32px; }
h1 { margin: 0; font: 700 20px/1.2 var(--display); letter-spacing: -.015em; }
h2 { margin: 0 0 8px; font: 700 19px/1.25 var(--display); letter-spacing: -.01em; }
h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.actions { display: flex; align-items: center; gap: 6px; }
.sync { font-size: 13px; color: var(--muted); }
.sync.error { color: var(--danger); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat {
  flex: 1 1 130px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.stat b { display: block; font: 700 24px/1.15 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* Bokser som filtrerer: klikkbare, aktiv = grønn kant. */
.stat-filter { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.stat-filter:hover { border-color: var(--accent); }
.stat-filter.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.stat-filter.owner-stat.active { border-left-color: var(--owner); }
.stat span { font-size: 13px; color: var(--muted); }

/* Lager: tallboksene ca. 30 % mindre. På PC står de i en egen smal kolonne til venstre for innholdet. Kolonnen følger
   siden når du ruller (ingen egen rulling og ingen fast høyde), så alt er synlig uansett vindushøyde og antall materialer.
   Før lå den utenfor skjermen på brede vinduer, siden innholdet bruker full bredde og ikke har venstremarg. */
.stats-side { gap: 7px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.stats-side .stat { padding: 8px 10px; border-radius: 9px; }
.stats-side .stat b { font-size: 17px; }
.stats-side .stat span { font-size: 11px; line-height: 1.3; display: block; }
/* Materialfilter under tallboksene. */
.rail-types { margin: 4px 0 14px; }
.rail-label { display: block; margin: 0 0 6px 2px; font-size: 14px; color: var(--muted); }
.rail-types .chips { gap: 6px; }
/* 15 % større skrift enn de vanlige filterknappene (13 px). */
.rail-types .chip { font-size: 15px; }
@media (min-width: 800px) {
  #tab-stock:not([hidden]) { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  #tab-stock > * { grid-column: 2; }
  #tab-stock > .stats-rail { grid-column: 1; grid-row: 1 / span 20; align-self: stretch; }
  .stats-side { grid-template-columns: 1fr; margin-bottom: 0; }
  .rail-types { margin-top: 14px; }
  .rail-types .chips { flex-direction: column; align-items: stretch; }
  .rail-types .chip { justify-content: flex-start; }
}

.panel {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.activity ul { list-style: none; margin: 0; padding: 0; }
.activity li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  min-width: 0;
}
.activity li:first-child { border-top: 0; }
.activity .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); }
.activity .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity .who { flex: none; font-size: 13px; color: var(--muted); }

.act { flex: none; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--muted-bg); }
.act-in { color: var(--in); background: color-mix(in srgb, var(--in) 14%, transparent); }
.act-out { color: var(--out); background: color-mix(in srgb, var(--out) 16%, transparent); }

.filters { display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row input { flex: 1 1 220px; }
.chip-row { display: flex; align-items: flex-start; gap: 10px; }
.chip-label { flex: none; width: 66px; padding-top: 5px; font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chip.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.chip-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .45); }
.count { margin: 0 0 8px 2px; font-size: 13px; color: var(--muted); }

input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.filter-row select { width: auto; flex: 0 1 auto; }

.grid, .grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.grid.grouped { display: block; }
.mat-group { margin-bottom: 22px; }
.mat-head { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.type-head { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 8px; font-size: 17px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; list-style: none; }
.mat-head::-webkit-details-marker, .type-head::-webkit-details-marker { display: none; }
/* Pil som viser om gruppen er åpen eller lukket. */
.mat-head::before, .type-head::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); transition: transform .12s ease; }
.mat-group[open] > .mat-head::before, .type-group[open] > .type-head::before { transform: rotate(90deg); }
.mat-head::before { font-size: 16px; }
.type-head::before { font-size: 14px; }
.type-group:not([open]) > .type-head { margin-bottom: 4px; }
/* Antallet i samme størrelse som overskriften, men dempet. */
.mat-head span, .type-head span { font-size: inherit; font-weight: inherit; color: var(--muted); }

.card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  color: inherit;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); }
.card.status-empty { opacity: .55; }
.swatch { position: relative; height: 96px; border-bottom: 1px solid var(--border); }
/* Fargefeltet er enden av en spole: en tynn ring og et sentrert hull, som i logoen. Gir også kontrast mot lyse farger. */
.card[class*="kind-"] .swatch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .55) 0 11px, rgba(0, 0, 0, .16) 11.5px 12.5px, transparent 13px); }
.swatch .badge { padding: 2px 9px; border-radius: 99px; font-size: 14.5px; font-weight: 600; background: var(--surface); }
.owner-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--owner);
  background: color-mix(in srgb, var(--owner) 12%, transparent);
}
.owner-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--owner); }
.owner-stat { border-left: 4px solid var(--owner); }
.owner-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-color);
  background: var(--owner);
}
/* Hvor mye som er igjen: stripe over hele kortets bredde (0–full rull). */
.left-bar { height: 9px; background: var(--muted-bg); }
.left-bar span { display: block; height: 100%; background: var(--accent); }
.left-bar.low span { background: var(--out); }
.left-bar.unknown { background: repeating-linear-gradient(90deg, var(--muted-bg) 0 6px, transparent 6px 10px); }
.card-body { flex: 1; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.card-title { font: 650 19px/1.2 var(--display); letter-spacing: -.01em; }
.card-type { font-size: 15.5px; color: var(--muted); }
/* Detaljer i liten, dempet tekst: eier og vekt. */
/* Eier nederst på kortet (vanlig størrelse; resten av kortet er 20 % større). */
.card-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--muted); }
.card-foot .lib-weight { font-weight: 400; }
.foot-owner { display: inline-flex; align-items: center; gap: 5px; }
.foot-owner .owner-dot { width: 8px; height: 8px; }
.hex { font-family: ui-monospace, Consolas, monospace; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12px; }
.card-meta span { padding: 1px 8px; border-radius: 99px; background: var(--muted-bg); }
.card-meta .owner { font-weight: 600; }
.badge-out { color: var(--out); }
.badge-empty { color: var(--muted); }
.card-note { font-size: 15.5px; color: var(--muted); }
.empty-msg { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 40px 0; }

dialog:focus { outline: none; }
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
dialog label input, dialog label select, dialog label textarea { margin-top: 4px; color: var(--text); }
/* Felt i dialoger: 16 px (ellers zoomer iOS) og minst 44 px høye, som skjemakort (designregler 3.1). */
dialog input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), dialog select { min-height: 44px; font-size: 16px; }
dialog textarea { font-size: 16px; }

.d-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.d-head h2 { margin: 0; }
.d-type { font-size: 15px; }
.d-swatch { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border); }
.muted { color: var(--muted); font-size: 13px; }

.d-quick { display: flex; gap: 8px; margin-bottom: 12px; }
.d-quick .btn { flex: 1; padding: 10px; font-size: 15px; }
.d-quick .d-borrow { flex: 1; margin: 0; }
.d-quick .d-borrow select { width: 100%; }
.d-refill { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.d-refill[hidden] { display: none; }
.d-refill input { width: auto; margin: 0; }
.pending-refill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }

/* Lånt filament */
.loan-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.loan-debt { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--out) 15%, transparent); font-size: 14px; }
.loan-debt.clear { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.loan-debt.mine-owe { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.loan-debt.mine-get { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.loans h2 { font-size: 16px; margin: 18px 0 8px; }
.loan-list { list-style: none; margin: 0; padding: 0; }
.loan-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.loan-list li:first-child { border-top: 0; }
.loan-list .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); }
.loan-what { flex: 1 1 220px; min-width: 0; }
.loan-what b { display: block; }
.loan-who { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.loan-who .owner-dot { display: inline-block; }
.loan-state { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--muted-bg); }
.loan-state.out { background: color-mix(in srgb, var(--out) 20%, transparent); }
.loan-state.owes { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.loan-state.returned, .loan-state.settled { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.loan-actions { display: flex; gap: 6px; align-items: center; }
.btn.btn-vipps { background: var(--vipps); border-color: var(--vipps); color: var(--on-color); }
.vipps-rows { display: grid; gap: 8px; margin: 10px 0; }
.a-color { display: flex; align-items: center; gap: 10px; }
.a-color input { width: 44px; height: 32px; padding: 2px; margin: 0; }
.vipps-row { display: grid; grid-template-columns: 70px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.vipps-amount { display: flex; align-items: center; gap: 6px; }
.vipps-amount input { flex: none; }
#v-price { font-size: 12px; }
.v-desktop { align-self: center; font-size: 13px; }
.v-qr { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; }
.v-qr[hidden] { display: none; }
.v-qr-code { flex: none; width: 150px; padding: 6px; background: var(--paper); border-radius: 10px; border: 1px solid var(--border); }
.v-qr-code svg { display: block; width: 100%; height: auto; }
.v-qr .hint { margin: 0; }
#v-open[hidden], .v-desktop[hidden] { display: none; }
.loan-actions select { width: auto; padding: 4px 8px; font-size: 13px; }
.loan-state.pending { background: color-mix(in srgb, var(--out) 30%, transparent); }
.pending-box { margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--out) 14%, transparent); }
.pending-box h2 { margin-top: 4px; }
.tab-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--out); color: var(--on-color); font-size: 12px; line-height: 18px; text-align: center; }
.stock-pending { display: block; width: 100%; margin-bottom: 12px; text-align: left; border: 0; font: inherit; cursor: pointer; }
.stock-pending[hidden] { display: none; }
.token-steps { margin: 0 0 10px; padding-left: 20px; }
.token-steps li { margin: 2px 0; }
#b-token { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
.act-detail { display: block; font-size: 12px; color: var(--muted); }
.act-filters { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.act-filters input { width: 100%; }

.d-rows { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.d-rows dt { color: var(--muted); }
.d-rows dd { margin: 0; overflow-wrap: anywhere; }

.d-history { list-style: none; margin: 0; padding: 0; max-height: 140px; overflow-y: auto; font-size: 13px; }
.d-history li { padding: 3px 0; }

.d-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.d-fields .wide { grid-column: 1 / -1; }

.d-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Brukere-vinduet kan bli langt (statistikk): Lukk-knappen står fast nederst mens man ruller. */
#users { overflow-y: auto; }
#users > form.d-buttons { position: sticky; bottom: -20px; margin: 12px -20px -20px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border); z-index: 1; }
.spacer { flex: 1; }

.btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); }
.btn-in { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); }
.btn-out { background: var(--out-fill); border-color: var(--out-fill); color: var(--on-out); }
.btn-danger { color: var(--danger); }

.hint { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.error { color: var(--danger); font-size: 13px; min-height: 1em; margin: 4px 0 0; }

@media (max-width: 520px) {
  .sync { display: none; }
  .filters select { flex: 1 1 45%; }
  .d-fields { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.u-list { list-style: none; margin: 0 0 12px; padding: 0; }
.u-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.u-list li:first-child { border-top: 0; }
.u-name { flex: 1; font-weight: 600; }
.u-form { display: flex; gap: 8px; margin-bottom: 8px; }
.u-form input[type=color] { flex: none; width: 44px; padding: 2px; height: auto; margin: 0; align-self: stretch; }
.u-form input:not([type=color]) { flex: 1 1 0; min-width: 0; }
.u-form .btn { flex: none; white-space: nowrap; }
.u-form .color-pick { flex: none; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.btn-small { padding: 4px 10px; font-size: 13px; }
:where(.btn-small) { min-height: 28px; }
code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--muted-bg); color: var(--text); }

.demo-banner { display: none; padding: 8px 16px; text-align: center; font-size: 14px; background: var(--sb-warn-bg); color: var(--sb-warn-ink); }
.demo-banner a { color: inherit; font-weight: 600; }
body.demo .demo-banner { display: block; }

.account-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.account-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.account-btn.logged-in { border-color: var(--accent); }
.account-btn[hidden] { display: none; }

/* Språkvalg øverst: flagg ved siden av kontoknappen. */
.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-flag { display: grid; place-items: center; width: 30px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .55; }
.lang-flag svg { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.lang-flag:hover, .lang-flag:focus-visible { opacity: 1; background: var(--muted-bg); }
.lang-flag.active { opacity: 1; border-color: var(--border); background: var(--surface); }
.lang-more { width: 24px; font-weight: 600; }
@media (max-width: 520px) { .lang-flag:not(.active) { display: none; } .lang-all .lang-flag:not(.active) { display: grid; } }
.lang-dialog { width: min(520px, calc(100vw - 32px)); }
.lang-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.lang-choice { display: inline-flex; align-items: center; gap: 8px; }
.lang-choice.active { border-color: var(--accent); }
.lang-flag-img svg { display: block; width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.lang-reqs { list-style: none; margin: 8px 0; padding: 0; }
.lang-reqs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; }
.lang-reqs li:first-child { border-top: 0; }
.lang-reqs .spacer { flex: 1; }
.lang-reqs .btn.active { border-color: var(--accent); }
.lang-voters { flex-basis: 100%; order: 3; font-size: 12px; }
.lang-add { display: flex; gap: 8px; margin: 8px 0; min-width: 0; }
.lang-add input { flex: 1 1 0; min-width: 0; margin: 0; }
.lang-add .btn { flex: none; }

/* Innstillinger → Oversettelser: norsk og engelsk ved siden av hverandre. */
.texts-editor #tx-q { width: 100%; margin: 8px 0; }
.tx-head, .tx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
.tx-head { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tx-row { padding: 10px 0; border-top: 1px solid var(--border); }
.tx-row.changed { border-left: 3px solid var(--accent); padding-left: 8px; }
.tx-cell { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.tx-cell textarea { width: 100%; min-width: 0; margin: 0; resize: vertical; font: inherit; font-size: 14px; line-height: 1.4; }
.tx-cell textarea[readonly] { background: var(--muted-bg); }
.tx-lang { display: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.tx-orig { font-size: 12px; }
.tx-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.tx-langs label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.tx-langs select { margin: 0; width: auto; }
.tx-src { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.tx-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
@media (max-width: 640px) {
  .tx-head { display: none; }
  .tx-row { grid-template-columns: minmax(0, 1fr); }
  .tx-lang { display: block; }
}

.notice { padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--out) 15%, transparent); font-size: 14px; }
.u-fresh table, .pw-table { border-collapse: collapse; margin: 6px 0 12px; }
.u-fresh td, .pw-table td { padding: 4px 14px 4px 0; }
.pw { font-size: 15px; user-select: all; }
.u-list li { flex-wrap: wrap; }
.u-email { flex: 1 1 200px; min-width: 0; max-width: 260px; padding: 4px 8px; font-size: 13px; }
.u-phone { flex: 0 1 130px; min-width: 0; padding: 4px 8px; font-size: 13px; }
.u-color { flex: none; width: 28px; height: 28px; padding: 1px; border-radius: 50%; cursor: pointer; }
.u-email-text { font-size: 13px; }
/* Brukerlisten: en rad med navn og kontaktinfo, og under den roller og knapper. */
#u-list li { display: block; padding: 12px 0; }
#u-list .u-main { display: grid; grid-template-columns: 28px minmax(120px, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: center; }
#u-list .u-name { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
#u-list .u-email, #u-list .u-phone { max-width: none; width: 100%; box-sizing: border-box; }
#u-list .u-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 0 38px; }
#u-list .u-roles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-right: auto; }
#u-list .u-btns { display: flex; flex-wrap: wrap; gap: 6px; }
#u-list .switch { font-weight: 500; }
.u-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  #u-list .u-main { grid-template-columns: 28px 1fr; }
  #u-list .u-email, #u-list .u-phone, #u-list .u-email-text { grid-column: 1 / -1; }
  #u-list .u-actions { margin-left: 0; }
}
.cards-panel h2, .settings-panel h2 { margin-top: 0; }
.settings-panel h3 { font-size: 15px; margin: 14px 0 6px; }
.setting { display: grid; gap: 4px; max-width: 560px; margin: 12px 0; font-size: 14px; color: var(--text); }
.setting-label { font-weight: 600; }
.setting-input { display: flex; align-items: center; gap: 8px; }
.setting-input input { flex: none; }
.setting .hint { margin: 0; }
.table-wrap { overflow-x: auto; }
.cards-table td { vertical-align: middle; }
.cards-table select, .cards-table input { width: auto; min-width: 120px; padding: 4px 8px; font-size: 13px; }
.cards-table .owner-dot { display: inline-block; vertical-align: middle; }
.u-pending { margin: 0 0 14px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.u-pending h3 { margin: 0 0 6px; font-size: 14px; }
.u-pending .u-list li { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.gate-links { font-size: 14px; margin: 12px 0 0; }

.tabs { display: flex; gap: 4px; max-width: 1200px; margin: 0 auto; padding: 12px 16px 0; }
/* Mange faner: én rad som kan rulles sideveis på smale skjermer. */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; white-space: nowrap; }
.tab {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tab.active { background: var(--text); border-color: var(--text); color: var(--bg); }

.ams-me-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ams-me-row > div:first-child { flex: 1 1 220px; }
.ams-me-row .hint { margin: 2px 0 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }

.ams-owner { margin-bottom: 20px; }
.ams-owner h2 { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 4px solid var(--owner); }
.ams-owner h2 .muted { font-weight: 400; }
/* AMS og bibliotek: hver sin sammenleggbare boks, med overskriften inne i boksen. */
.ams-fold, .library { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--owner); border-radius: 14px; box-shadow: var(--shadow); }
.ams-fold > summary, .library > summary { cursor: pointer; list-style-position: inside; }
.ams-fold > summary .muted, .library > summary .muted { font-weight: 400; margin-left: 6px; }
.ams-fold[open] > summary, .library[open] > summary { margin-bottom: 10px; }
/* Printerne inne i AMS-boksen: ingen egen ramme, skilt med strek ved flere. */
.ams-fold .printer { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.ams-fold .printer + .printer { padding-top: 12px; border-top: 1px solid var(--border); }
.printers { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* AMS-enhetene to og to ved siden av hverandre (én kolonne på smale skjermer). */
.ams-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
@media (max-width: 760px) { .ams-units { grid-template-columns: 1fr; } }
.printer { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--owner); border-radius: 14px; box-shadow: var(--shadow); }
.printer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.online-dot.on { background: var(--in); }
.ams-unit { padding: 8px 0; border-top: 1px solid var(--border); }
.ams-unit-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.trays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tray { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 10px; background: var(--bg); text-align: center; min-width: 0; }
.tray .slot { position: absolute; top: 4px; left: 6px; font-size: 11px; color: var(--muted); }
.tray-dot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--muted-bg); }
.empty-tray .tray-dot { background: transparent; border-style: dashed; }
.tray-text { width: 100%; font-size: 12px; overflow-wrap: anywhere; }
.tray-color { font-weight: 650; font-size: 13px; }
.remain { height: 5px; margin: 4px 0 2px; border-radius: 3px; background: var(--muted-bg); overflow: hidden; }
.remain span { display: block; height: 100%; background: var(--accent); }

@media (max-width: 520px) {
  .trays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.type-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 4px; scrollbar-width: thin; }
.type-tab {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.type-tab span { margin-left: 4px; font-weight: 400; color: var(--muted); }
.type-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

.news-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.news-head > div:first-child { flex: 1 1 320px; }
.news-head .hint { margin: 4px 0 0; }
.news-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.news-controls select { width: auto; }
.section-title { margin: 22px 0 10px; font-size: 18px; }
.section-title .muted { font-weight: 400; font-size: 14px; }

.news-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.news-type { display: flex; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.news-type img, .img-ph { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--muted-bg); }
.news-type-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }

.news-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.news-color {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.news-color:hover { border-color: var(--accent); }
.news-color-main { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.news-color.is-missing .news-swatch, .news-color.is-out .news-swatch { opacity: .6; }
.news-swatch { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); }
.news-color-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; }
.news-color-text b { font-size: 14px; }
.ext { color: var(--muted); }
/* Kildeikoner (lager, bibliotek, AMS) øverst til høyre, pilen til butikken nederst */
.news-side { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.news-sources { display: flex; gap: 4px; }
.news-sources .source { width: 22px; height: 22px; border: 1px solid var(--border); }
.news-sources .source svg { width: 13px; height: 13px; }
.owned { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--in); }
.owned .owner-dot { width: 8px; height: 8px; }

.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip span, .strip a { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); }
.strip.big a { width: 22px; height: 22px; }
.strip a.have { outline: 2px solid var(--in); outline-offset: 1px; }

.all-types { display: flex; flex-direction: column; gap: 8px; }
.all-type { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.all-type-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.all-type-head .btn { margin-left: auto; }
a.btn { text-decoration: none; display: inline-block; }

.lib-card .lib-grid { margin-top: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-top: 10px; }
.lib-item { position: relative; display: flex; gap: 10px; padding: 8px 34px 8px 10px; border-radius: 10px; background: var(--bg); }
/* Samme kildeikon som på spolekortene, øverst til høyre */
.tray > .source, .lib-item > .source { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 1px solid var(--border); }
.tray > .source svg, .lib-item > .source svg { width: 13px; height: 13px; }
.lib-empty { opacity: .5; }
.lib-swatch { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); }
.lib-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; flex: 1; }
.lib-loc { font-size: 12px; color: var(--accent-ink); font-weight: 600; }
.lib-weight { font-weight: 600; }
.share-toggles { display: flex; flex-direction: column; gap: 6px; }

.btn.confirming { background: var(--danger); border-color: var(--danger); color: var(--on-color); }

.stock { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; width: fit-content; }
.stock-in { color: var(--in); background: color-mix(in srgb, var(--in) 14%, transparent); }
.stock-out { color: var(--out); background: color-mix(in srgb, var(--out) 16%, transparent); }
.stock-missing { color: var(--muted); background: var(--muted-bg); }
.wish { align-self: flex-start; }
.wish.active { border-color: var(--accent); color: var(--accent-ink); }
.wish-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: var(--accent-fill); color: var(--accent-text); font-size: 11px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.type-wish { margin: 10px 0; }
.wait-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; }
.wait-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.wait-item.arrived { border-color: var(--in); box-shadow: 0 0 0 2px color-mix(in srgb, var(--in) 25%, transparent); }
.wait-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-left: auto; }
.waiters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; }
.waiters .owner-dot { width: 8px; height: 8px; }
details.all-type summary { list-style: none; cursor: pointer; }
details.all-type summary::-webkit-details-marker { display: none; }
details.all-type[open] { border-color: var(--accent); }
details.all-type > .news-colors { margin-top: 10px; }
.strip span.na { opacity: .35; }

.sub-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.sub-tab { padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.sub-tab.active { color: var(--text); border-bottom-color: var(--accent); }
[hidden] { display: none !important; }

.wait-img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--muted-bg); }

.shop-head { display: flex; flex-direction: column; gap: 10px; }
.shop-head .hint { margin: 0; }
.v-price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.price-chart { margin-top: 6px; font-size: 13px; }
.price-chart summary { cursor: pointer; color: var(--accent-ink); }
.price-chart svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.chart-legend i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.cart-add { align-self: flex-start; }
.variants li .cart-add { padding: 0 9px; line-height: 20px; margin-left: 6px; }
.cart-lines { display: grid; gap: 6px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.cart-line img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--paper); }
.cart-what { display: flex; flex-direction: column; min-width: 0; }
.cart-what .muted { font-size: 12px; overflow-wrap: anywhere; }
.cart-qty { display: flex; align-items: center; gap: 6px; }
.cart-qty b { min-width: 18px; text-align: center; }
.cart-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-price .muted { font-size: 12px; }
.cart-tips { margin: 6px 0; padding-left: 18px; font-size: 13px; color: var(--accent-ink); }
.cart-carrier { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; white-space: nowrap; }
.cart-carrier select { min-width: 0; flex: 1; }
.cart-sum { display: grid; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; border-top: 1px solid var(--border); }
.cart-sum-row.good span:last-child { color: var(--in); }
.cart-sum-row.sub { font-weight: 600; }
.cart-sum-row.total { font-size: 17px; font-weight: 700; border-top: 2px solid var(--text); }
@media (max-width: 560px) {
  .cart-line { grid-template-columns: 40px 1fr auto; }
  .cart-line img { width: 40px; height: 40px; }
  .cart-price { grid-column: 2 / -1; flex-direction: row; gap: 8px; justify-content: flex-end; }
}
.news-price { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.shop-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.shop-card.is-out .shop-img img { opacity: .5; }
.shop-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper); border-bottom: 1px solid var(--border); }
.shop-img img { width: 100%; height: 100%; object-fit: contain; }
.badge-new { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--accent-fill); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.shop-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.shop-name { font-weight: 650; color: inherit; text-decoration: none; }
.shop-name:hover { color: var(--accent-ink); }
.shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.variants { font-size: 13px; }
.variants summary { cursor: pointer; color: var(--muted); }
.variants ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.variants li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.variants li span:first-child { flex: 1 1 100%; }
.variants li span:last-child { flex: none; color: var(--in); font-weight: 600; }
.variants li.v-out span:last-child { color: var(--out); }
.shop-more { display: block; margin: 16px auto; }

/* Øverst til høyre på fargefeltet: status (Ute/Tom) og ikon for kilden */
.swatch-corner { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 6px; }
.source { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, .88); color: var(--ink-soft); }
.source svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.owner-tag { padding: 1px 8px; border-radius: 99px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .88); color: var(--ink-soft); }
.owner-tag { display: inline-flex; align-items: center; gap: 4px; }
.owner-tag .owner-dot { width: 7px; height: 7px; }
.source-library { color: var(--src-lib); }
.source-ams { color: var(--src-ams); }
.card.kind-library, .card.kind-ams { cursor: default; }
.card.kind-library:hover, .card.kind-ams:hover { transform: none; }
.card-loc { font-size: 14.5px; color: var(--accent-ink); }
.card-use { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14.5px; }
.card-use .owner-dot { flex: none; }

body.locked .sections, body.locked #parts-root, body.locked #market-root, body.locked .tabs, body.locked main, body.locked #open-users, body.locked #refresh, body.locked #sync, body.locked #open-messages, body.locked #open-ideas { display: none !important; }
.gate { display: grid; place-items: center; min-height: 70vh; padding: 16px; }
.gate-card { max-width: 420px; padding: 28px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.gate-card svg { width: 48px; height: 48px; }
.gate-card h2 { margin: 12px 0 8px; }
.gate-card .btn { margin: 8px 0 4px; padding: 10px 28px; }
.gate-wide { max-width: 720px; }
.gate-about { text-align: left; margin: 20px 0 8px; border-top: 1px solid var(--border); padding-top: 4px; }
.gate-about h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.gate-about ol, .gate-about ul { margin: 0; padding-left: 22px; line-height: 1.5; }
.gate-about li { margin: 6px 0; }
.gate-about p { margin: 14px 0 0; }
.gate-card a, .gate-card .link-btn { display: inline-block; min-height: 24px; padding: 2px 0; }

dialog.wide-dialog { width: min(820px, calc(100vw - 32px)); }
.stats-small .stat b { font-size: 18px; }
.day-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.day-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.day-bar span { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.day-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--border); }
.stat-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.stat-table .owner-dot { display: inline-block; vertical-align: middle; }
.login-log { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: 13px; }
.login-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 600px) { .stat-table th:nth-child(3), .stat-table td:nth-child(3), .stat-table th:nth-child(6), .stat-table td:nth-child(6) { display: none; } }

/* Produksjonsdato vises når musepekeren er over et kort (og ved tastaturfokus) */
.swatch .tip {
  position: absolute; inset: auto 6px 6px 6px; padding: 5px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center;
  background: rgba(20, 22, 21, .85); color: var(--on-color);
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.card:hover .swatch .tip, .card:focus-visible .swatch .tip { opacity: 1; transform: none; }
/* ---------- Hoveddeler: Filament / Komponenter ---------- */
.sections { display: flex; gap: 0; max-width: 1200px; margin: 0 auto; padding: 14px 16px 0; }
.section-btn {
  padding: 9px 22px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.section-btn:first-child { border-radius: 12px 0 0 12px; }
.section-btn:last-child { border-radius: 0 12px 12px 0; border-left: 0; }
.section-btn.active { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); }
.section-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- Komponenter ---------- */
.parts-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.parts-rail { position: sticky; top: 76px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; }
.parts-rail .stats-side { grid-template-columns: 1fr; }
.parts-cats .chips { flex-direction: column; align-items: stretch; }
.parts-cats .chip { justify-content: space-between; }
.chip-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.active .chip-n { color: inherit; opacity: .75; }
@media (max-width: 799px) {
  .parts-layout { grid-template-columns: 1fr; }
  .parts-rail { position: static; max-height: none; }
  .parts-rail .stats-side { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .parts-cats .chips { flex-direction: row; flex-wrap: wrap; }
}
.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.part-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; min-width: 0;
  background: var(--surface); color: inherit; font: inherit; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .12s ease, border-color .12s ease;
}
.part-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.part-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.part-card.used-up { opacity: .55; }
.part-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; background: var(--paper); border-bottom: 1px solid var(--border); overflow: hidden; }
.part-img img { width: 100%; height: 100%; object-fit: contain; }
.part-noimg { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; text-align: center; color: var(--muted-strong); background: var(--muted-bg); font-size: 13px; font-weight: 600; }
.part-cat { display: block; max-width: 100%; margin: 6px 10px 0; color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; flex: 1; min-width: 0; }
.part-title { font-weight: 650; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.part-variant { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.part-meta { font-size: 13px; font-variant-numeric: tabular-nums; }
.part-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--muted); }
.part-date { margin-left: auto; font-variant-numeric: tabular-nums; }
.parts-more { display: block; margin: 16px auto; }
.empty-parts { text-align: center; padding: 28px 16px; }

.part-detail { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; }
.part-detail-img { aspect-ratio: 1; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.part-detail-img img { width: 100%; height: 100%; object-fit: contain; }
.part-detail h2 { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.part-facts { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; }
.part-facts th { width: 120px; padding: 5px 10px 5px 0; text-align: left; vertical-align: top; color: var(--muted); font-weight: 500; }
.part-facts td { padding: 5px 0; overflow-wrap: anywhere; }
.part-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.part-edit .pd-note { grid-column: 1 / -1; }
.part-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rights-json { white-space: pre-wrap; max-height: 18rem; overflow: auto; }
.market-quote-title { margin-top: 0; }
.part-detail-text > h3 { margin: 24px 0 8px; font-size: 16px; }
.part-detail-text > .detail-head { margin-bottom: 4px; }
.part-detail-text > .part-actions { position: sticky; bottom: 0; z-index: 1; margin: 16px 0 0; padding: 12px 0; background: var(--surface); border-top: 1px solid var(--border); }
@media (max-width: 640px) { .part-detail { grid-template-columns: 1fr; } .part-detail-img { max-width: 220px; } }

.import-panel { max-width: 860px; }
.import-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.import-steps { padding-left: 22px; }
.import-steps li { margin: 8px 0; }
.bookmarklet { margin-top: 8px; cursor: grab; }
.import-log { list-style: none; padding: 0; margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.import-log li { padding: 4px 0; border-top: 1px solid var(--border); }
/* Langt navn i toppen: mindre skrift på smale skjermer, så knappene får plass. */
@media (max-width: 560px) { header h1 { font-size: 15px; line-height: 1.2; } }

/* Datablad og koblingsskjema i detaljvinduet */
.component-info { margin: 4px 0 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.component-info h3 { margin-top: 0; }
.component-info .mpn { font-family: ui-monospace, Consolas, monospace; text-transform: none; letter-spacing: 0; color: var(--text); }
.ds-links { font-size: 14px; }
.pinout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.pinout .hint { margin: 0 4px 0 0; }
.pin { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border: 1px solid var(--border); border-radius: 99px; font: 600 13px ui-monospace, Consolas, monospace; }
.pin b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--muted-bg); font-size: 11px; }
.schematic-fig { margin: 10px 0 0; }
.schematic-fig figcaption { font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.schematic-fig figcaption:first-child { color: var(--text); margin-bottom: 6px; }
.schematic-wrap { overflow-x: auto; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 8px; }
.schematic { display: block; width: 100%; min-width: 420px; max-width: 620px; height: auto; color: var(--text); }
.cat-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 6px 0 14px; }
.cat-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.cat-toggle input { width: 17px; height: 17px; accent-color: var(--accent); }
/* Pakketype: liten illustrasjon på kortet, større i detaljvinduet */
.part-pkg { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 1px 8px 1px 2px; border: 1px solid var(--border); border-radius: 99px; font: 600 11.5px ui-monospace, Consolas, monospace; color: var(--text); }
.part-pkg .pkg-art { flex: none; }
.pkg-row { display: flex; align-items: center; gap: 12px; }
.pkg-row .pkg-art { flex: none; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted-bg); }
.pkg-art { color: var(--text); }

/* Komponenter: undermeny og handlekurv */
.parts-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.parts-tab { padding: 7px 15px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.parts-tab.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.nav-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--muted-bg); color: var(--text); font-size: 12px; font-weight: 700; }
.nav-n.alert { background: var(--alert); color: var(--on-color); }
.req-panel { max-width: 980px; }
.req-panel h3 { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
.req-list { list-style: none; margin: 0 0 8px; padding: 0; }
.req-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.req-img { width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--paper); cursor: pointer; }
.req-img img { width: 100%; height: 100%; object-fit: contain; }
.req-img .part-noimg { font-size: 10px; }
.req-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-text b { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.req-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.req-meta .owner-dot { display: inline-block; margin-right: 4px; }
.req-loc { color: var(--accent-ink); font-weight: 700; font-size: 13.5px; }
.req-loc.missing { color: var(--muted); font-weight: 500; }
.req-note { font-size: 13px; font-style: italic; }
.req-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }
.req-qty label { font-size: 12px; color: var(--muted); }
.req-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.status-sent .req-status { color: var(--accent-ink); font-weight: 700; }
.status-declined .req-status { color: var(--alert); font-weight: 700; }
.req-actions { display: flex; gap: 6px; }
.req-list.done .req-row { opacity: .7; }
.req-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cart-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
.cart-add label { margin: 0; width: 90px; }
.cart-add label.grow { flex: 1 1 200px; width: auto; }
.cart-msg { min-height: 1em; margin: 4px 0 0; }
@media (max-width: 640px) {
  .req-row { grid-template-columns: 56px minmax(0, 1fr); }
  .req-qty { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 10px; }
  .req-actions { grid-column: 2; }
}
/* Kortet er en ramme med en åpne-knapp (bilde og tekst) og handlekurv-feltet under */
.part-card { cursor: default; }
.part-open { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.part-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.part-step { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); text-align: center; }
.part-step button { height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: 700 18px/1 system-ui, sans-serif; cursor: pointer; }
.part-step button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.part-step button:disabled { opacity: .35; cursor: default; }
.part-step.in-cart { color: var(--accent-ink); font-weight: 700; }
.part-step.in-cart button[data-cartstep="1"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); }
.cat-owner { margin: 10px 0 16px; }
.cat-owner h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 15px; }
.cat-owner h4 .owner-dot { align-self: center; }
.cat-toggle input:disabled + * { opacity: .6; }
/* Produktvinduet: kryss øverst til venstre som blir stående mens man ruller */
dialog.part-dialog { overflow-y: auto; }
.dlg-close {
  position: sticky; top: -10px; z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px; margin: -10px 0 -28px -10px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  font: 400 26px/1 system-ui, sans-serif; cursor: pointer;
}
.dlg-close:hover { border-color: var(--accent); color: var(--accent-ink); }
.dlg-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Produktvinduet: bilde, datablad og koblingsskjema i venstre kolonne */
dialog.part-dialog { width: min(1040px, calc(100vw - 32px)); }
.part-dialog .part-detail { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.part-detail-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.part-detail-side .part-detail-img { max-width: 100%; }
.part-detail-side .component-info { margin: 0; padding-top: 0; border-top: 0; }
.part-detail-side .schematic-wrap { padding: 6px; }
.part-detail-side .schematic { min-width: 0; }
@media (max-width: 720px) {
  .part-dialog .part-detail { grid-template-columns: 1fr; }
  .part-detail-side .part-detail-img { max-width: 260px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
  main { padding: 12px; }
  .sections { padding: 10px 12px 0; }
  .section-btn { flex: 1; padding: 9px 10px; font-size: 15px; }
  /* Faner og filterrader: én linje som rulles sidelengs, med toning som viser at det er mer */
  .tabs, .parts-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); }
  .parts-nav::-webkit-scrollbar { display: none; }
  .parts-tab, .tab { flex: none; padding: 7px 13px; }
  .chip-row { align-items: center; gap: 8px; }
  .chip-label { width: auto; padding-top: 0; }
  .chip-row .chips, .parts-cats .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 24px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 24px), transparent); }
  .chip-row .chips::-webkit-scrollbar, .parts-cats .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .filters { padding: 10px; gap: 8px; }
  .filter-row input { flex-basis: 100%; }
  .filter-row select { flex: 1 1 40%; }

  /* Komponenter: kompakt toppfelt og to kort i bredden */
  .parts-layout { gap: 10px; }
  .parts-rail .stats-side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
  .parts-rail .stat { padding: 7px 8px; }
  .parts-rail .stat span { font-size: 10.5px; }
  .parts-cats .rail-label { display: none; }
  .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .part-body { padding: 8px 9px 9px; gap: 2px; }
  .part-title { font-size: 13px; -webkit-line-clamp: 3; }
  .part-variant, .part-meta { font-size: 12px; }
  .part-foot { font-size: 11.5px; }
  .part-cat { font-size: 10.5px; margin-inline: 8px; }
  .part-pkg { font-size: 10.5px; }
  .part-step { grid-template-columns: 38px 1fr 38px; padding: 6px 8px 8px; font-size: 11.5px; }
  .part-step button { height: 36px; }

  /* Produktvinduet: hele skjermen; bilde, tittel og fakta først, så datablad og skjema */
  dialog.part-dialog { width: calc(100vw - 12px); max-width: none; max-height: calc(100vh - 12px); padding: 14px; border-radius: 14px; }
  .part-dialog .part-detail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .part-dialog .part-detail-side { display: contents; }
  .part-dialog .part-detail-img { order: 0; aspect-ratio: auto; height: 200px; max-width: 100%; }
  .part-dialog .part-detail-text { order: 1; }
  .part-dialog .part-detail-side .component-info { order: 2; }
  .part-facts th { width: 96px; }
  .part-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-add label { width: 70px; }
  .part-actions .btn { flex: 1; }
  .dlg-close { width: 40px; height: 40px; }

  /* Handlekurv og ønsker */
  .req-row { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .req-img { width: 52px; height: 52px; }
  .req-actions .btn { flex: 1; }
}
/* Rader som rulles sidelengs må få krympe, ellers blir hele siden bredere enn skjermen */
.parts-layout > *, .parts-rail, .parts-cats, .parts-main, .chip-row, .chip-row .chips { min-width: 0; }
/* Fotavtrykk (land pattern) */
.fp-art { color: var(--text); flex: none; }
.pkg-row { align-items: flex-start; }
.pkg-row .fp-art { padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); color: var(--paper-ink); }
.part-pkg .fp-art { color: var(--text); }
.fp-cap { display: inline-block; margin-top: 4px; font-size: 12px; }
@media (max-width: 600px) { .pkg-row { flex-direction: column; } }
.kicad-name { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: var(--muted-bg); font: 600 12px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.fp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font: 11.5px ui-monospace, Consolas, monospace; color: var(--muted); }
.fp-legend i { display: inline-block; width: 12px; height: 9px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; }
.fp-legend i.cu { background: var(--copper); border: 1px solid var(--copper-dark); }
.fp-legend i.silk { border: 1.5px solid currentColor; background: transparent; }
.fp-legend i.drill { width: 9px; border-radius: 50%; background: var(--surface); border: 1px solid var(--copper-dark); box-shadow: 0 0 0 2px var(--copper); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
.req-sum { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--muted); }
.req-sum b { color: var(--text); font-size: 15px; }
.req-total { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; align-items: baseline; margin: 4px 0 0; padding-top: 12px; border-top: 2px solid var(--border); font-weight: 600; }
.req-total .req-sum { margin-left: 0; }
.req-total > .hint { flex-basis: 100%; text-align: right; font-weight: 400; }
.req-calc { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.req-unit, .req-each { font-size: 13px; color: var(--muted); }
.req-line { min-width: 76px; text-align: right; font-size: 15px; }

/* Tallfelt: smale nok til 1–5 sifre med litt luft, i stedet for full bredde. */
input[type="number"] { display: block; width: calc(4ch + 30px); max-width: 100%; padding-inline: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.req-calc input[type="number"], .setting-input input[type="number"], .vipps-amount input[type="number"] { display: inline-block; }
#pd-pack, #pd-left { width: calc(7ch + 30px); }
.buy-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.buy-list .current { font-weight: 700; text-decoration: none; color: var(--text); }
.img-wrong-tag { display: inline-block; padding: 0 6px; border-radius: 99px; background: var(--alert); color: var(--on-color); font-size: 10.5px; }
.pd-imgwrong { margin-top: 2px; }
.img-wrong-tag.fixed { background: var(--fixed); }
.cat-edit-btn { margin-left: 8px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.chip-add { border-style: dashed; color: var(--muted); }
.chip.empty { display: none; }
body.dragging-part .chip.empty { display: inline-flex; opacity: .7; }
.chip.drop-hover { outline: 2px solid var(--accent); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.part-card[draggable="true"] { cursor: grab; }
body.dragging-part .parts-cats { position: sticky; top: env(safe-area-inset-top, 0px); }
.cat-edit { display: grid; gap: 6px; }
.cat-edit-row { display: flex; gap: 6px; align-items: center; }
.cat-edit-row input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 13px; }
.part-del { margin-right: auto; }
.part-del-confirm { margin-top: 12px; padding: 12px; border: 1px solid var(--danger); border-radius: 10px; }
.part-del-confirm p { margin: 0 0 10px; }
.btn-solid-danger { background: var(--danger); border-color: var(--danger); color: var(--on-color); }
.img-wrong-tag.web { background: var(--info-blue); }
.img-web-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--info-blue) 12%, transparent); font-size: 13px; }
.img-web-actions { display: flex; gap: 6px; margin-left: auto; }

/* ---------- Meldinger ---------- */
.msg-btn { position: relative; }
.msg-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: var(--on-color); font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
dialog.msg-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.msg-head h2 { margin: 0; }
.msg-head .chips { flex: 1 1 auto; min-width: 0; }
.msg-close { margin-left: auto; }
.msg-online { margin: 8px 0 12px; font-size: 13px; }
.msg-status { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--muted-bg); font-size: 13px; }
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.msg.new { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.msg-meta { position: static; z-index: auto; justify-content: flex-start; padding: 0; background: none; backdrop-filter: none; border: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.msg-time { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.msg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.msg-text { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.msg-actions .spacer { flex: 1; }
.msg-people { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--muted); }
.presence { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.presence i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: 1px solid var(--muted); box-sizing: border-box; }
.presence.on { color: var(--in); font-weight: 600; }
.presence.on i { background: var(--in); border-color: var(--in); }
.msg-online .presence { margin-right: 4px; vertical-align: -1px; }
.msg-empty { padding: 20px 0; }
.msg-to-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.msg-to { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-bottom: 10px; }
dialog label.msg-rcpt { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; min-width: 0; }
.msg-rcpt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.msg-rcpt input { flex: none; width: auto; margin: 0; padding: 0; }
.msg-rcpt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-rcpt .presence { margin-left: auto; }
.msg-compose textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.a-notify { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.a-notify legend { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.a-n-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; }
@media (max-width: 480px) {
  .msg-to { grid-template-columns: 1fr; }
  .msg-time { margin-left: 0; width: 100%; }
}

/* KiCad: symbol, fotavtrykk og pinnenumre for transistorer */
.kicad-box { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.kicad-box h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kicad-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; font-size: 13px; }
.kicad-box dt { color: var(--muted); }
.kicad-box dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kicad-name { font: 12.5px ui-monospace, Consolas, monospace; padding: 1px 5px; border-radius: 5px; background: var(--muted-bg); user-select: all; }
.kicad-pins { border-collapse: collapse; margin: 4px 0 8px; font-size: 13px; }
.kicad-pins th, .kicad-pins td { padding: 4px 12px; border: 1px solid var(--border); text-align: center; }
.kicad-pins thead th { background: var(--muted-bg); font-variant-numeric: tabular-nums; }
.kicad-pins tbody th { font-weight: 600; text-align: left; }
.kicad-pins td b { display: block; font: 700 15px ui-monospace, Consolas, monospace; }
.kicad-pins td span { display: block; font-size: 11px; color: var(--muted); }
.kicad-box .hint { margin: 4px 0; }
.kicad-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--out) 14%, var(--surface)); font-size: 13px; }

/* Forstørret fotavtrykk */
.fp-zoom-btn { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; }
.fp-zoom-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-zoom-icon { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .9); color: var(--paper-ink); font-size: 14px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
dialog.fp-zoom-dialog { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: hidden; display: none; flex-direction: column; gap: 8px; }
dialog.fp-zoom-dialog[open] { display: flex; }
.fpz-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fpz-tools { display: flex; align-items: center; gap: 6px; }
.fpz-tools .icon-btn { font-size: 18px; font-weight: 600; }
.fpz-tools .icon-btn:disabled { opacity: .4; cursor: default; }
.fpz-level { min-width: 48px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.fpz-stage { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: center; }
.fpz-stage.light { background: var(--paper); color: var(--paper-ink); }
.schematic-fig .schematic-wrap { cursor: zoom-in; }
.fpz-stage svg, .fpz-stage .schematic { min-width: 0; display: block; margin: 0 auto; width: calc(var(--fpz, 1) * 100%); max-width: none; height: auto; max-height: calc(var(--fpz, 1) * (100vh - 220px)); }

/* Ordredetaljer i produktvinduet: skjult til man åpner dem */
.part-facts .order-row { display: none; }
.part-facts.order-open .order-row { display: table-row; }
.order-toggle .order-hide, .part-facts.order-open .order-toggle .order-show { display: none; }
.part-facts.order-open .order-toggle .order-hide { display: inline; }

/* Forslag til forbedringer */
.idea-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.idea-form input, .idea-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.idea-form textarea { resize: vertical; }
.idea-tabs { margin: 6px 0 10px; }
.idea-list { display: flex; flex-direction: column; gap: 10px; }
.idea { padding: 10px 12px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--surface); min-width: 0; }
.idea.status-new { border-left-color: var(--out); }
.idea.status-approved { border-left-color: var(--accent); }
.idea.status-done { border-left-color: var(--in); opacity: .85; }
.idea.status-rejected { border-left-color: var(--danger); opacity: .8; }
.idea-head { position: static; z-index: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 10px; padding: 0; background: none; backdrop-filter: none; border: 0; }
.idea-head h3 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: normal; color: var(--text); overflow-wrap: anywhere; }
.idea-status { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.idea.status-approved .idea-status { color: var(--accent-ink); }
.idea.status-rejected .idea-status { color: var(--danger); }
.idea.status-done .idea-status { color: var(--in); }
.idea-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.idea-meta { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; }
.idea-reply { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--muted-bg); font-size: 13px; }
.idea-reply div { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-actions { position: static; display: flex; align-items: center; gap: 6px; padding: 0; background: none; backdrop-filter: none; border: 0; }
.idea-actions .spacer { flex: 1; }
.idea-admin { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.idea-admin textarea { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; }
.idea-admin-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* «Typical application» fra databladet: originalbildet på hvit bakgrunn også i mørkt tema */
.typical-fig .schematic-wrap { background: var(--paper); }
.typical-fig img { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.typical-fig figcaption a { white-space: nowrap; }
.fpz-stage img { display: block; margin: 0 auto; width: calc(var(--fpz, 1) * 100%); max-width: none; height: auto; background: var(--paper); }

/* Underfaner i Innstillinger */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.settings-body > h3:first-child { margin-top: 0; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Prosjekter */
.proj-new { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.proj-new input { flex: 1 1 240px; min-width: 0; }
.proj-filter { margin: 4px 0 12px; }
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.proj-card { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.proj-card.status-done { border-left-color: var(--in); opacity: .75; }
.proj-card.status-plan { border-left-color: var(--muted); }
.proj-card b { font-size: 15px; overflow-wrap: anywhere; }
.proj-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.proj-bar { display: block; height: 6px; border-radius: 99px; background: var(--muted-bg); overflow: hidden; }
.proj-bar i { display: block; height: 100%; background: var(--accent); }
.proj-bar.big { height: 10px; flex: 1 1 200px; }
.proj-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.proj-title { flex: 1 1 240px; min-width: 0; font-size: 20px; font-weight: 700; }
#proj-desc { width: 100%; box-sizing: border-box; margin: 8px 0; font: inherit; resize: vertical; }
.proj-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 4px; }
.proj-line .proj-state { display: block; font-size: 12px; color: var(--muted); }
.proj-line.st-ok .proj-state { color: var(--in); }
.proj-line.st-warn .proj-state { color: var(--out); }
.proj-line.st-bad .proj-state { color: var(--danger); font-weight: 600; }
.proj-buy { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.proj-buy input[name="label"], .proj-buy input[name="url"] { flex: 1 1 200px; min-width: 0; }
.proj-buy input[type="number"] { width: calc(6ch + 30px); }
.proj-more { margin: 12px 0; }
.proj-more summary { cursor: pointer; font-weight: 600; }
.proj-more textarea { width: 100%; box-sizing: border-box; font: 12.5px ui-monospace, Consolas, monospace; }
.proj-pick { list-style: none; padding: 0; margin: 8px 0; }
.bom-preview { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
.bom-preview ul { margin: 0 0 8px; padding-left: 18px; }
.proj-danger { margin-top: 18px; }
.proj-add select { width: 100%; }

/* Brukt */
.part-step.part-used-step { grid-template-columns: minmax(0, 1fr) auto; text-align: left; }
.part-used-step span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-step button.part-used { height: 28px; padding: 0 10px; font: 600 12px/1 system-ui, sans-serif; white-space: nowrap; }
@media (max-width: 600px) { .part-step.part-used-step { grid-template-columns: minmax(0, 1fr) auto; } .part-step button.part-used { height: 30px; padding: 0 8px; font-size: 11.5px; } }
.used-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; grid-column: 1 / -1; }
.used-row label { margin: 0; }
.used-row .hint { flex-basis: 100%; margin: 0; }

/* Godkjenn bilde rett fra kortet */
.img-ok { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--out) 10%, var(--surface)); cursor: pointer; }
.img-ok input { width: auto; margin: 0; }

/* Velg flere spoler (avkrysning på kortene og felles utsjekk) */
.pick-toggle.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.pick-bar { position: sticky; top: 8px; z-index: 5; display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 2px solid var(--accent); }
.pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pick-row .d-borrow { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; white-space: nowrap; }
.pick-row .d-borrow select { min-width: 0; max-width: 100%; }
.pick-row .d-refill { margin: 0; }
.pick-count { min-width: 5.5em; }
.pick-bar .hint, .pick-msg { margin: 0; }
.pick-msg:empty { display: none; }
.card.pickable { position: relative; }
.card.picked { outline: 3px solid var(--accent); outline-offset: -1px; }
.card.unpickable { opacity: .4; cursor: default; }
.card.unpickable:hover { transform: none; }
.pick-box { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--paper); background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.card.picked .pick-box { background: var(--accent); }
.card.picked .pick-box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-color); font-size: 15px; font-weight: 700; line-height: 1; }

/* Testknapper under «Godkjenning» (bare administrator) */
.loan-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* Godkjenning: tabell med avkrysning, «Merk alle» og felles godkjenning */
.appr-bar { position: sticky; top: 8px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.appr-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.appr-all input, .appr-check input { width: 18px; height: 18px; margin: 0; }
.appr-count { min-width: 5em; color: var(--muted); }
.appr-bulk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.appr-bulk select { width: auto; max-width: 170px; padding: 4px 8px; font-size: 13px; }
.appr-bar .btn-primary { margin-left: auto; }
.appr-h { margin: 16px 0 6px; }
.appr-head, .appr-row { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 112px 92px; gap: 10px; align-items: center; }
.appr-head { padding: 8px 12px 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.appr-list { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.appr-row { padding: 9px 12px; border-top: 1px solid var(--border); }
.appr-row:first-child { border-top: 0; }
.appr-row.picked { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.appr-what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appr-what .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); }
.appr-what .loan-what { flex: 1 1 auto; }
.appr-by { min-width: 0; }
.appr-by b { display: block; }
.appr-by .muted { font-size: 13px; }
.appr-to select { width: 100%; max-width: 190px; padding: 4px 8px; font-size: 13px; }
.appr-act { text-align: right; }
@media (max-width: 760px) {
  .appr-head { display: none; }
  .appr-bar .btn-primary { margin-left: 0; width: 100%; }
  .appr-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "c w a" "c b b" "c t t" "c r r"; row-gap: 6px; }
  .appr-check { grid-area: c; align-self: start; padding-top: 2px; }
  .appr-what { grid-area: w; }
  .appr-by { grid-area: b; }
  .appr-to { grid-area: t; }
  .appr-refill { grid-area: r; }
  .appr-act { grid-area: a; }
  .appr-to select { max-width: 100%; }
}
.appr-bar .pending-refill, .appr-refill .pending-refill { white-space: nowrap; }

/* Rull som venter på godkjent innsjekk, og hendelsesmerke i Godkjenning */
.card.status-pending { opacity: .75; outline: 2px dashed var(--out); outline-offset: -2px; }
.badge-pending { color: var(--out); }
.appr-kind { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.appr-kind.in { color: var(--in); background: color-mix(in srgb, var(--in) 14%, transparent); }
.appr-kind.out { color: var(--out); background: color-mix(in srgb, var(--out) 16%, transparent); }

/* Pil til toppen: fast på høyre side, utenfor innholdet når det er plass. */
.to-top { position: fixed; bottom: 20px; right: max(12px, calc((100vw - 1200px) / 2 - 60px)); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface, var(--bg)); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.to-top[hidden] { display: none; }
.to-top:hover { border-color: var(--accent); color: var(--accent-ink); }

.kit-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent-ink); margin: 2px 0; }
.kit-tag.kit-child { display: block; padding: 3px 8px; margin: 4px 0; border: 1px solid var(--accent); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-back { margin: 0 0 8px; }
.kit-back-name { display: block; font-size: 12px; }
.kit-back-box { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.kit-back-box .kit-back { margin: 0 0 4px; }
.kit-back-img { flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 8px; overflow: hidden; background: var(--paper); cursor: pointer; }
.kit-back-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ai-row { margin: 10px 0; }
.ai-box { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 8px; max-width: 100%; box-sizing: border-box; overflow-x: auto; }
.ai-box h3 { margin: 0 0 6px; font-size: 14px; }
.ai-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-table th, .ai-table td { text-align: left; padding: 4px 8px 4px 0; vertical-align: top; }
.ai-table td input[type="text"], .ai-table td select { width: 100%; min-width: 160px; box-sizing: border-box; }
.ai-table td textarea { width: 100%; min-width: 220px; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.35; }
.ai-table td:last-child { width: 55%; }
.ai-table .ai-now { color: var(--muted); overflow-wrap: anywhere; }
.ai-table input[data-aikitqty] { width: 4.5em; }
.kit-box { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 8px; }
.kit-box h3 { margin: 0 0 6px; font-size: 14px; }
.kit-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.kit-list th, .kit-list td { text-align: left; padding: 3px 8px 3px 0; vertical-align: top; }
.kit-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; }
.kit-add .grow { flex: 1 1 240px; min-width: 0; }
.kit-add textarea { width: 100%; box-sizing: border-box; }

.newpart { display: grid; gap: 10px; }
.newpart label { display: grid; gap: 4px; font-size: 13px; }
.np-img { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.np-preview { width: 140px; height: 140px; flex: none; border: 1px dashed var(--border, rgba(128,128,128,.5)); border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.np-preview img { width: 100%; height: 100%; object-fit: contain; }
.np-preview:has(img), .part-detail-img img { cursor: zoom-in; }
.np-actions { display: grid; gap: 8px; justify-items: start; flex: 1 1 220px; }
.np-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.np-msg.bad { color: var(--danger); }
.ai-table td > .hint { display: block; margin-top: 6px; white-space: nowrap; }

.kit-sum { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.kit-sum b { color: inherit; font-weight: 600; }
.kit-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.kit-tile { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 8px; overflow: hidden; background: rgba(128,128,128,.05); }
.kit-tile.empty { opacity: .6; }
.kit-tile-main { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; cursor: pointer; min-width: 0; flex: 1; }
.kit-tile-main:hover, .kit-tile-main:focus-visible { background: rgba(128,128,128,.12); }
.kit-tile-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kit-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.kit-stock { font-size: 12px; color: var(--muted); }
.kit-bar { display: block; height: 4px; border-radius: 2px; background: rgba(128,128,128,.25); overflow: hidden; }
.kit-bar i { display: block; height: 100%; background: var(--accent); }
.kit-desc { font-size: 11px; line-height: 1.3; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.kit-ds { font-size: 11px; padding: 4px 10px; border-top: 1px solid var(--border, rgba(128,128,128,.25)); text-decoration: none; }
.kit-ds:hover { text-decoration: underline; }
.kit-add-box > summary { cursor: pointer; font-size: 13px; padding: 2px 0; }
.kit-add-box[open] > summary { margin-bottom: 6px; }

/* Printtimer */
.prints-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.prints-list > * { min-width: 0; }
.prints-hours { font-size: 1.8rem; font-weight: 700; margin: 4px 0; }
#tab-prints .printer-head .btn { margin-left: auto; }

/* Kjøp og salg */
.section-btn:not(:first-child):not(:last-child) { border-radius: 0; border-left: 0; }
.market-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.market-grid > *, .market-form > * { min-width: 0; }
.market-card { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); cursor: default; }
.market-card[data-mopen] { cursor: pointer; }
.market-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.market-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.market-tags .tag, .tag-ok.tag, .market-card-head .tag { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; }
.market-card-head .tag.tag-ok, .market-tags .tag.tag-ok { border-color: var(--accent-ink); color: var(--accent-ink); }
.tag-ok { border-color: var(--accent-ink); color: var(--accent-ink); }
.tag-no { color: var(--muted); }
.market-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.market-form label { display: flex; flex-direction: column; gap: 4px; }
.market-form .wide { grid-column: 1 / -1; }
.market-form input:not([type=checkbox]), .market-form select, .market-form textarea { max-width: 100%; }
.market-printer { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.market-printer > .wide, .market-printer > fieldset { grid-column: 1 / -1; }
.market-dims { display: flex; align-items: center; gap: 6px; }
.market-dims input { width: 5.5em; }
.market-files { list-style: none; padding: 0; display: grid; gap: 8px; }
.market-preview { margin-top: 6px; max-width: 320px; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.market-preview img, .market-img { max-width: 100%; display: block; border-radius: 8px; }
.market-quote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--border); border-radius: 12px; }
.market-desc { white-space: pre-wrap; }

.market-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.market-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.market-tile b { font-size: 1.5rem; line-height: 1; }
.market-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.market-tile.attention { border-color: var(--attn); }
.market-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.market-table { width: 100%; border-collapse: collapse; }
.market-table th, .market-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.market-table th { white-space: nowrap; font-weight: 600; }
.market-table td.n { white-space: nowrap; }
.market-table tbody tr { cursor: pointer; }
.market-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.market-table tbody tr:last-child td { border-bottom: 0; }
.market-table tr.attention td:first-child { box-shadow: inset 4px 0 0 var(--attn); }
.tag-attn, .tag-new { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.tag-attn { background: var(--attn-strong); color: var(--on-color); }
.tag-new { background: var(--accent-fill); color: var(--accent-text); }
.market-timeline { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 4px; }
.section-btn .tab-count { margin-left: 6px; }

.market-tile.static { cursor: default; }
.market-tile.ok b { color: var(--ok-green); }
.market-tile .muted { font-size: .8rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; text-decoration: underline; cursor: pointer; }

.market-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.market-steps span { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--muted); }
.market-steps span.done { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); }
.market-addrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 8px 0; }
.market-delivery { margin: 12px 0; padding: 4px 14px 10px; border: 1px solid var(--border); border-radius: 12px; }

.sections.no-market .section-btn[data-section="parts"] { border-radius: 0 12px 12px 0; border-left: 0; }
.u-market-label { font-size: .85rem; white-space: nowrap; }

.market-cam { max-width: 640px; background: var(--black); border-radius: 12px; overflow: hidden; }
.market-cam img { display: block; width: 100%; height: auto; min-height: 120px; }
.market-unit-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.market-cam-set { border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; }

.market-profile h3 { margin: 14px 0 6px; }
.market-equip-group { border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px 12px; margin: 10px 0; }
.market-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.market-unit { border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; padding: 4px 12px; background: var(--surface); }
.market-unit > summary { cursor: pointer; padding: 6px 0; }
.market-unit-body { margin-top: 6px; padding-bottom: 8px; }

.rating { white-space: nowrap; font-size: .85rem; }
.rating-stars { color: var(--star); letter-spacing: 1px; }

/* Statuslinjer (statusbar.js) */
.statusbars:empty, .statusbar-slot:empty { display: none; }
.statusbars { max-width: 1200px; margin: 0 auto; padding: 8px 16px 0; display: grid; gap: 6px; }
.statusbar-slot { display: grid; gap: 6px; margin-bottom: 8px; }
.statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: .92rem; }
.statusbar .statusbar-text { flex: 1 1 auto; min-width: 0; }
.statusbar a { font-weight: 600; color: inherit; text-decoration: underline; }
.statusbar-close { background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.statusbar-info { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.statusbar-success { background: var(--sb-ok-bg); border-color: var(--sb-ok-line); color: var(--sb-ok-ink); }
.statusbar-warning { background: var(--sb-warn-bg); border-color: var(--sb-warn-line); color: var(--sb-warn-ink); }
.statusbar-critical { background: var(--sb-bad-bg); border-color: var(--sb-bad-line); color: var(--sb-bad-ink); }

/* «for kunder» ved siden av Nerdehagen: samme størrelse som overskriften */
.brand h1 .muted { font-size: inherit; font-weight: inherit; }

/* Tastaturfokus synlig overalt, og ingen bevegelse for de som ber om det. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Kundesiden (kunde.html) har egen aksentfarge, så den skiller seg fra medlemmenes sider (grønn). */
body.kunde { --accent: var(--customer); --accent-ink: #2447c4; --accent-fill: var(--customer); --accent-text: #ffffff; --in: var(--customer); }
@media (prefers-color-scheme: dark) { body.kunde { --accent: #8aa4ff; --accent-ink: #8aa4ff; --accent-fill: #8aa4ff; --accent-text: #0b1330; --in: #8aa4ff; } }

/* Åpen forside på kundesiden. */
.home-cta { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; max-width: 62ch; }
.home-cta h3 { margin-top: 0; }
.kind-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.kind-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.kind-card { position: relative; }
.kind-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kind-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.kind-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiz-summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.wiz-summary dt { color: var(--muted); }
.wiz-summary dd { margin: 0; overflow-wrap: anywhere; }
.seo-page { max-width: 880px; margin: 0 auto; padding: 16px; }
.seo-page h2 a { color: inherit; text-decoration: none; }
.seo-foot { max-width: 880px; margin: 24px auto; padding: 0 16px; }
.nerd-chat { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; max-width: 62ch; max-height: 55vh; overflow-y: auto; }
.nerd-msg { padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); max-width: 90%; }
.nerd-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nerd-msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* Besøk og statistikk (admin). */
.stat-range { display: flex; gap: 6px; margin: 4px 0 10px; }
.stat small { display: block; }
.stat-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 10px 0 4px; border-bottom: 1px solid var(--border); }
.stat-col { flex: 1; min-width: 2px; height: 100%; display: flex; flex-direction: column-reverse; }
.stat-col .seg { display: block; width: 100%; }
.seg.anon, .stat-key.anon { background: var(--muted); }
.seg.customer, .stat-key.customer { background: var(--customer); }
.seg.member, .stat-key.member { background: var(--accent); }
.stat-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; }
.stat-table { border-collapse: collapse; width: 100%; max-width: 560px; }
.stat-table th { text-align: left; font-weight: 500; padding: 3px 12px 3px 0; overflow-wrap: anywhere; }
.stat-table td.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }
.stat-table td:last-child { width: 40%; }
.stat-bar { display: block; height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.nerd-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; max-width: 62ch; }
.nerd-choices .chip { text-align: left; }

/* Marked (admin): poeng, nivå og parkering. */
.market-table tr.parked { opacity: .6; }
.late { color: var(--danger); }
.tag.tier-topp { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tag.tier-god { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tag.tier-svak { background: color-mix(in srgb, var(--danger) 18%, transparent); }

/* Toppmeny: lange navn kuttes med ellipse i stedet for å gjøre siden bredere enn skjermen. */
header > * { min-width: 0; }
.brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.brand h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { min-width: 0; flex: 0 1 auto; }
#who, #account-label { display: block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn { min-width: 0; max-width: 100%; }
@media (max-width: 520px) {
  header { padding: 10px 12px; gap: 8px; }
  .brand h1 .muted { display: none; }
  #who, #account-label { max-width: 11ch; }
}

/* Moderering (admin). */
.mod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.mod-reason select { max-width: 240px; }
.mod-card.mod-critical { border-color: var(--danger); }
.nerd-msg > span.muted { color: var(--muted-strong); }
/* Meldinger etter avtalen (T133): bildene i tråden */
.thread-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.thread-imgs figure { margin: 0; max-width: 160px; }
.thread-imgs img { display: block; max-width: 100%; border-radius: 8px; }
.thread-imgs figcaption { color: var(--muted-strong); font-size: 13px; }
.timeline { list-style: none; margin: 8px 0 12px; padding: 0 0 0 14px; border-left: 3px solid var(--border); }
.timeline li { margin: 0 0 10px; }
.timeline p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Trykkflater på minst 44 × 44 px på mobil og berøringsskjermer (T103). Små knapper får luft, ikonknapper blir større. */
@media (max-width: 640px), (pointer: coarse) {
  :where(.btn, .chip, .tab, .section-btn, .parts-tab, .type-tab, .sub-tab, .icon-btn, .lang-flag, .account-btn, .link-btn, .linkbtn, .linklike, .to-top, .dlg-close, summary) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  :where(.brand) { min-height: 44px; }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) { min-height: 44px; }
  :where(.switch, label.switch) { min-height: 44px; }
  :where(.linklike, .linkbtn, .link-btn) { justify-content: flex-start; }
  .lang-flag svg { flex: none; }
}
@media (max-width: 640px), (pointer: coarse) {
  .demo-banner a { display: inline-block; padding: 12px 8px; }
  .market-card-head a { display: inline-block; padding: 12px 0; }
}
@media (max-width: 640px), (pointer: coarse) {
  .part-step { grid-template-columns: 44px 1fr 44px; }
  .part-step button { height: 44px; min-width: 44px; }
  .part-used { min-height: 44px; min-width: 44px; }
}
/* Større trykkflater skal ikke gjøre toppmenyen bredere enn skjermen: den bryter over på flere linjer i stedet. */
@media (max-width: 520px) {
  header { flex-wrap: wrap; }
  header .actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

/* Personvern (admin): forespørsler med ett åpent kort om gangen */
.dsr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dsr-row { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.dsr-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.dsr-open > .dsr-head { border-bottom: 1px solid var(--border); }
.dsr-detail { padding: 4px 12px 12px; }
.dsr-detail h4 { margin: 14px 0 6px; }
.dsr-json, .dsr-preview { margin: 4px 0; padding: 8px; max-height: 18em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85em; border: 1px solid var(--border); border-radius: 8px; }
.dsr-preview { max-height: none; font-family: inherit; font-size: .95em; }
.dsr-section > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.dsr-more { margin-top: 14px; }
.dsr-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* Ny veiviser for kunder («Hva har du?», T118) */
.route-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 12px 0; }
.route-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; min-height: 88px; padding: 14px; font: inherit; color: inherit; cursor: pointer; }
.route-card.off { opacity: .55; cursor: not-allowed; }
.big-q { font-size: 1.15em; font-weight: 600; }
.progress { height: 6px; border-radius: 3px; background: var(--muted-bg); overflow: hidden; margin: 8px 0 4px; }
.progress > span { display: block; height: 100%; background: var(--accent); }
.brief-ready { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); }
.brief-ready.ok { border-color: var(--accent); }
.brief-ready ul { margin: 6px 0 0; padding-left: 1.2em; }

/* Bilder og filsjekk i den nye veiviseren (T121, T124) */
.img-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.img-card { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.img-card img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 6px; background: var(--muted-bg); }

/* «Lei en Nerd» bruker hele skjermen (T126): samtalen fyller bredden og skrivefeltet ligger nederst på skjermen. */
body.kunde:has(.nerd-full) main { max-width: none; padding-bottom: 0; }
.nerd-full { display: flex; flex-direction: column; min-height: calc(100dvh - 150px); }
.nerd-full .nerd-chat { flex: 0 0 auto; max-width: none; max-height: none; margin: 8px 0; padding-right: 4px; }
.nerd-full .nerd-msg { max-width: min(90%, 90ch); }
.nerd-full .nerd-choices { max-width: none; }
.nerd-full > form { margin: auto 0 0; padding: 8px 0 12px; border-top: 1px solid var(--border); }

/* 3D-forhåndsvisning (T123) */
.viewer3d { margin: 8px 0; }
.viewer3d-canvas { display: block; width: 100%; max-width: 900px; aspect-ratio: 640 / 420; touch-action: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: grab; }
.viewer3d-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.viewer3d-slot:empty { display: none; }
button.armed { outline: 2px solid var(--armed); outline-offset: 1px; font-weight: 600; }

/* Hjelp (T142): hjelperen for produsenter og hjelpetekstene på kundesiden */
.helper, .help-ctx, .help-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.9rem; margin: 0.6rem 0; }
.helper summary, .help-ctx summary, .help-item summary { cursor: pointer; font-weight: 600; padding-block: 0.35rem; }
.help-topic { margin-top: 0.6rem; max-width: 70ch; }
.help-topic h4 { margin: 0 0 0.2rem; font-size: 1rem; }
.help-guide .help-item { max-width: 72ch; }
.helper-log { display: grid; gap: 0.5rem; max-height: 22rem; overflow-y: auto; margin-block: 0.6rem; }
.helper-msg { margin: 0; padding: 0.5rem 0.75rem; border-radius: 8px; max-width: 70ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.helper-msg.me { background: var(--muted-bg); justify-self: end; }
.helper-msg.bot { border: 1px solid var(--border); }
.helper-msg.wait { color: var(--muted-strong); }
.helper-msg.error { border-color: var(--armed); }
.helper-form { display: grid; gap: 0.4rem; }
.helper-form textarea { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: inherit; color: inherit; resize: vertical; }

/* ===== Grensesnitt: bredde, rytme og navigasjon (T145, T148) =====
   Mål: bruke hele skjermen, felles avstander, tydelig navigasjon og kort som står på linje. Tall og farger kommer fra :root. */
:root { --pad: clamp(14px, 3vw, 44px); --gap: clamp(12px, 1.4vw, 20px); --radius: 14px; }
main { max-width: none; padding: 20px var(--pad) 56px; }
header { padding-inline: var(--pad); }
h2 { font-size: 24px; }
h3 { margin: 28px 0 10px; font: 700 17px/1.3 var(--display); letter-spacing: 0; text-transform: none; color: var(--text); }
/* Løpende tekst holdes på lesbar linjelengde mens kort, lister og tabeller bruker hele bredden. */
.market-body > p, .market-body > ol, .market-body > ul, .market-body .hint { max-width: 78ch; }

.market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap); align-items: stretch; }
.market-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--radius); }
.market-card > * { margin-block: 0; }
.market-card-head { align-items: center; gap: 10px; margin: 0; }
.market-card-head > b, .market-card-head > a { min-width: 0; overflow-wrap: anywhere; }
.market-card-head a, .market-card h4 a { color: inherit; text-decoration: none; }
.market-card-head a:hover, .market-card h4 a:hover { text-decoration: underline; }
.market-card .market-tags { margin-top: auto; }
.market-quote { align-items: center; padding: 14px 16px; border-radius: var(--radius); }
.market-quote > form, .market-quote > .settings-actions { flex: 1 1 100%; }
.market-quote .settings-actions { align-items: flex-start; }
.market-form { gap: 12px 16px; }
.market-form label { gap: 6px; }

@media (min-width: 1024px) {
  /* Kundesiden: navigasjonen står som en kolonne til venstre og innholdet bruker resten av bredden. */
  body.kunde .market-panel { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "nav title" "nav body"; column-gap: clamp(24px, 3vw, 56px); align-items: start; padding: 0; background: transparent; border: 0; box-shadow: none; }
  body.kunde .market-panel > h2 { grid-area: title; margin: 0 0 16px; font-size: 28px; }
  body.kunde .market-panel > nav.chips { grid-area: nav; position: sticky; top: 76px; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  body.kunde .market-panel > nav.chips .chip { justify-content: flex-start; width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; font-size: 15px; }
  body.kunde .market-panel > nav.chips .chip:hover { background: var(--muted-bg); }
  body.kunde .market-panel > nav.chips .chip.active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
  body.kunde .market-body { grid-area: body; min-width: 0; }
}
@media (max-width: 1023px) {
  body.kunde .market-panel > nav.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 8px; }
  body.kunde .market-panel > nav.chips::-webkit-scrollbar { display: none; }
  body.kunde .market-panel > nav.chips .chip { flex: none; }
}
.market-quote { row-gap: 10px; }
.market-quote > p { margin: 0; }
.market-quote .market-form { margin: 0; }
/* Alle sidens rader følger samme venstrekant og bredde som innholdet. */
.tabs, .sections, .statusbars { max-width: none; margin-inline: 0; padding-inline: var(--pad); }
.to-top { right: max(12px, calc(var(--pad) / 2)); }
/* På smal skjerm er toppfeltet to rader høyt. Da følger det med når man ruller, så det ikke dekker innholdet. */
@media (max-width: 700px) { header { position: static; } }

/* Produsentens navn som knapp og profilsiden (T148) */
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: currentColor; color: var(--accent-ink); }
.maker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; position: static; padding: 0; background: none; border: 0; backdrop-filter: none; }
.maker-head h2 { margin: 0; font-size: 26px; }
.maker-equip { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; }
@media (pointer: coarse), (max-width: 700px) { .link-btn { display: inline-flex; align-items: center; min-height: 44px; } }

/* Dra og slipp av filer (T147). Knappen «Velg fil» virker alltid; slipp er et tillegg og vises ikke på berøringsskjerm. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  label:has(> input[type="file"]:not([hidden]):not([disabled])) { display: block; padding: 14px 16px; border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--radius, 12px); transition: background .12s, border-color .12s; }
  label.drop-over:has(> input[type="file"]) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); border-style: solid; }
}
@media (hover: hover) and (pointer: fine) {
  [data-dropfor] { border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--radius, 12px); padding: 12px; transition: background .12s, border-color .12s; }
  [data-dropfor].drop-over { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); border-style: solid; }
}
.drop-msg { display: block; margin-top: 6px; font-size: 13px; color: var(--danger); font-weight: 600; }

/* Laserfiler (T146): merknader fra filsjekken */
.laser-warn { margin: 6px 0 0; padding: 10px 12px 10px 14px; border-left: 4px solid var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0; font-size: 14px; }
.laser-warn ul { margin: 4px 0 0; padding-left: 1.1rem; }
.laser-warn p { margin: 0 0 4px; }
ul.laser-warn { list-style: none; margin: 6px 0; }
ul.laser-warn li + li { margin-top: 4px; }
.laser-warn .hint { color: var(--text); }

/* Svart-hvitt med terskel (T146) */
.bw-box { display: grid; gap: 10px; }
.bw-box input[type="range"] { width: 100%; max-width: 420px; }
.bw-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bw-pair figure { margin: 0; }
.bw-pair img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.bw-pair figcaption { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Navn og «Produsent»-merke som lenke til profilen (T148) */
.tag-link { border: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.tag-link:hover { text-decoration-color: currentColor; }
.tag-link:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 700px) { .tag-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* Gjennomgang (T149): tittelraden vokser ikke når navigasjonen er høyere enn innholdet, og kortenes toppliste står til venstre. */
body.kunde .market-panel { grid-template-rows: auto 1fr; }
.market-card-head { justify-content: flex-start; flex-wrap: wrap; }
.kind-pick { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* «Slik betaler du»: en linje per opplysning i stedet for tre kolonner som flyter utover. */
.market-quote.pay-box { display: grid; gap: 4px; }
.market-quote.pay-box > * { margin: 0; }
.market-quote.pay-box > h3 { margin-bottom: 4px; }
.maker-inline > .link-btn { vertical-align: middle; }
.legal-box { margin: 18px 0; }
.legal-box h3 { margin: 0 0 8px; }
.legal-box details { margin: 6px 0; }
.tag-link { border-radius: 999px; padding: 2px 8px; background: var(--muted-bg, transparent); }
.muted .tag-link, p .tag-link { display: inline; min-height: 0; }
/* Avkrysningsfelt står ved siden av teksten, også inne i skjemaer (reglene for «.market-form label» gjør ellers feltene til kolonner). */
.market-form label.switch { flex-direction: row; align-items: center; }
.market-form fieldset.wide:not(.kind-pick) { display: grid; gap: 2px; min-width: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius, 12px); }
.market-form fieldset.wide:not(.kind-pick) > legend { padding: 0 6px; font-weight: 600; }

/* Store skjermer (T145): kort og lister bruker bredden, men felt og skjemaer på kundesiden holdes på lesbar bredde. */
body.kunde .market-form { max-width: min(100%, 960px); }
body.kunde .market-body p:not(.settings-actions) { max-width: min(100%, 80ch); }

/* Finn produsent: sammenligning (T132) */
.maker-compare { margin-top: 18px; }
.table-scroll { overflow-x: auto; }
.maker-compare table { border-collapse: collapse; width: 100%; min-width: 420px; }
.maker-compare th, .maker-compare td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.maker-compare tbody th { font-weight: 600; white-space: nowrap; }

/* Filtervalg i Finn produsent: avkrysningsboksene er minst 24 px (WCAG 2.2, målstørrelse) */
.maker-filter .switch input { width: 24px; height: 24px; }

/* Byggeklosser (docs/designregler.md): skjemakort for innlogging og enkle skjema, og meldinger. */
.form-card { width: min(100%, 460px); margin: 28px auto 56px; padding: 28px 28px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.form-card > * { margin: 0; }
.form-card h2 { font-size: 26px; line-height: 1.2; }
.form-card-back { align-self: flex-start; }
.form-card-lead { color: var(--muted-strong); }
.notice { padding: 10px 12px; background: var(--muted-bg); border-radius: 10px; color: var(--text); }
.form-card-form { display: flex; flex-direction: column; gap: 14px; }
.form-card-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.form-card-form input:not([type=hidden]) { width: 100%; min-height: 46px; font-size: 16px; }
.form-card-form .form-card-code { font-size: 22px; letter-spacing: .3em; text-align: center; }
.form-card-help-list { margin: 8px 0; padding-left: 20px; font-size: 14px; color: var(--muted-strong); }
.form-card-help { margin: -4px 0 0; font-size: 14px; color: var(--muted-strong); }
.form-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.form-card-actions .btn { width: 100%; min-height: 46px; justify-content: center; }
.form-card-actions .link-btn { align-self: center; }
.form-card-more summary { cursor: pointer; font-weight: 600; }
.form-card-more p { margin: 8px 0 0; color: var(--muted-strong); font-size: 14px; }
.form-card-fine { font-size: 13px; color: var(--muted-strong); border-top: 1px solid var(--border); padding-top: 12px; }
@media (max-width: 520px) { .form-card { margin: 12px auto 40px; padding: 20px 18px 18px; } }

/* Byggeklosser (docs/designregler.md, 3.2): sideinnledning, trinn og filter. */
.page-intro { max-width: 70ch; display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; }
.page-intro > * { margin: 0; }
.page-intro .lead { font-size: 17px; line-height: 1.55; color: var(--muted-strong); }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.market-body > .steps, .steps { max-width: none; list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 54px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); line-height: 1.45; }
.steps li::before { content: counter(step); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-text); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.filter-bar { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 14px; }
.find-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); gap: 12px; align-items: end; }
.filter-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; min-width: 0; }
.filter-bar input:not([type=checkbox]), .filter-bar select { width: 100%; min-height: 44px; font-size: 16px; }
.filter-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.filter-more > summary { list-style: none; }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary::before { content: "\25B8"; color: var(--muted-strong); }
.filter-more[open] > summary::before { content: "\25BE"; }
.filter-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 24px; padding: 8px 0 8px; }
.filter-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-self: start; }
.filter-group legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.filter-group .switch { font-weight: 500; }
.filter-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .find-row { grid-template-columns: 1fr; } }
/* Avkrysning som står alene på en rad (designregler 4.2): egen rad med luft, så den ikke overlapper feltene under. */
.switch-row { display: flex; margin: 8px 0 16px; min-height: 44px; align-items: center; }

/* Veiviser (designregler 3.5): hvert steg er et skjemakort. */
.wiz-progress { width: 100%; height: 6px; accent-color: var(--accent); }
.form-card-row { display: flex; gap: 8px; }
.form-card-row .btn { flex: 1; }
.form-card-form textarea, .form-card-form select { width: 100%; font-size: 16px; min-height: 46px; }
.form-card-form input[type=checkbox], .form-card-form input[type=radio] { width: auto; min-height: 0; }
.form-card-form .kind-card input { width: 100%; height: 100%; }
.form-card-form label.switch, .form-card-form .kind-card { font-weight: 400; flex-direction: row; align-items: center; gap: 8px; }
.form-card-form .kind-card { flex-direction: column; align-items: stretch; gap: 2px; }
.form-card-form .kind-card > b { font-weight: 600; }
.form-card-form .kind-pick { grid-template-columns: 1fr; }
.form-card-form fieldset { border: 0; padding: 0; margin: 0; }
.form-card-more label { margin-top: 12px; }
html { scroll-padding-top: 80px; } /* sticky toppfelt skal ikke dekke fokusert element (WCAG 2.4.11) */
.form-card-form .kind-card, .form-card-form label.switch { min-height: 44px; justify-content: center; }
.form-card-form label.switch { justify-content: flex-start; }

/* Detalj (designregler 3.4): overskrift med status, handlinger under, innholdet i seksjoner. */
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.detail-head h2 { margin: 0; overflow-wrap: anywhere; }
.detail-head .tag { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .85rem; white-space: nowrap; }
.page-intro + nav.chips { margin: 8px 0 16px; }
.market-cam > p { padding: 12px; }
.account-end { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); }
body.kunde .market-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), body.kunde .market-form select { min-height: 44px; }
[data-ptab][hidden] { display: none; }
/* Produsentsiden: luft mellom forklaring, faner og sideinnledning. */
#market-root .market-panel > .form-card-more { margin: 8px 0 12px; }
#market-root .market-panel > nav.chips { margin: 0 0 20px; }
#market-root .market-body > nav.chips { margin: 4px 0 20px; }
#market-root .market-body > .page-intro { margin-top: 0; }

/* Frakt og skjema (T149): tallfelt i skjemaer fyller cellen sin (den globale smale breden er for antall), mål-feltene deler raden,
   handlinger i et rutenett ligger på linje, og pakkekortene bruker bredden. */
.market-form label > input[type="number"] { width: 100%; text-align: left; }
.market-dims input, .market-dims input[type="number"] { flex: 1 1 0; width: auto; min-width: 0; }
.market-printer > .btn { justify-self: start; align-self: end; }
.market-grid.market-grid-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.market-printer > label:not(.wide):not(.switch) { justify-content: flex-end; }
/* Fast merke ved skrivefeltet til en KI (T152, anbefalt av Kommisjonens veiledning om art. 50). */
.ai-badge { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--muted-strong); }
/* Mine kjøp (kjop.js, designregler 3.2): innledning med import ved siden av teksten, butikkort med bilde som forstørres på stedet,
   ordrer med varene som rader, og linjen med antall og visning. */
.page-intro.kjop-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: 8px 32px; align-items: start; }
.kjop-intro > * { min-width: 0; }
.kjop-intro h2 { margin-top: 0; }
.kjop-import .page-actions { margin-top: 0; }
.kjop-steps { margin: 8px 0 0; padding-left: 20px; }
.kjop-filter { margin-top: 0; gap: 6px; font-size: 14px; }
.kjop-filter .find-row { gap: 8px; }
.kjop-filter .filter-field { flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.kjop-filter .filter-field > input, .kjop-filter .filter-field > select { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: 14px; }
.kjop-filter .filter-more > summary { min-height: 32px; }
.kjop-filter .filter-groups { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 2px 0 4px; }
.kjop-filter .filter-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kjop-filter .filter-group legend { float: left; margin: 0 10px 0 0; line-height: 36px; }
.kjop-filter .filter-inline { display: flex; gap: 8px; }
.kjop-filter .filter-inline input { width: 90px; }
.kjop-filter .filter-group legend { white-space: nowrap; }
.kjop-filter .filter-group select { min-width: 150px; max-width: 220px; }
.kjop-filter .filter-field > span { white-space: nowrap; }
}
@media (max-width: 559px) {
  .kjop-filter .filter-group { flex-direction: column; align-items: stretch; }
  .kjop-filter .filter-group legend { float: none; line-height: 1.3; }
  .kjop-filter .filter-field > input, .kjop-filter .filter-field > select { min-height: 44px; font-size: 16px; }
}
.kjop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 8px; }
.kjop-bar > p { margin: 0; }
.kjop-bar .chips { margin: 0; }
.kjop-img { flex: none; width: 72px; height: 72px; object-fit: contain; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; }
.kjop-img-small { width: 48px; height: 48px; }
button.kjop-zoom { position: relative; padding: 0; border: 0; border-bottom: 1px solid var(--border); cursor: zoom-in; display: block; width: 100%; }
button.kjop-img.kjop-zoom { width: 48px; height: 48px; padding: 0; border: 1px solid var(--border); overflow: hidden; }
.kjop-zoom img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kjop-zoom.is-zoom { cursor: zoom-out; }
.kjop-under, .kjop-over { position: absolute; inset: 0; }
.kjop-under { filter: blur(1px); }
.shop-card.is-zoom .shop-img { aspect-ratio: 1 / 1; }
.kjop-orders { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.kjop-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.kjop-lines li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.kjop-lines li > div { min-width: 0; overflow-wrap: anywhere; }
.kjop-lines li > div a { color: inherit; text-decoration: none; }
.kjop-lines li > div a:hover { color: var(--accent-ink); text-decoration: underline; }
.kjop-sum { display: grid; justify-items: end; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kjop-sum b { font-size: 1.05rem; }
.kjop-totals { display: grid; gap: 2px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.kjop-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.kjop-totals dt { color: var(--muted-strong); }
.kjop-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.kjop-qty { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 10px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 700; line-height: 1.4; pointer-events: none; }
.kjop-lines li.is-zoom { grid-template-columns: minmax(0, 1fr) auto; }
.kjop-lines li.is-zoom > .kjop-zoom { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 420px; position: relative; }
@media (min-width: 560px) { .shop-card.is-zoom { grid-column: span 2; } .shop-card.is-zoom .shop-img { aspect-ratio: 4 / 3; } }
@media (max-width: 720px) { .page-intro.kjop-intro { grid-template-columns: minmax(0, 1fr); } }

/* Mine kjøp: mindre miniatyrer og tre visninger (kort, liste, tabell). */
.shop-grid.kjop-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.kjop-cards .shop-img { aspect-ratio: 16 / 10; }
.kjop-cards .shop-body { padding: 8px 10px; gap: 3px; font-size: 14px; }
.kjop-cards .kjop-qty { top: 6px; left: 6px; padding: 0 8px; font-size: 12px; }
.kjop-img-small { width: 40px; height: 40px; }
button.kjop-img.kjop-zoom.kjop-img-small { width: 40px; height: 40px; }
.kjop-lines li { grid-template-columns: 40px minmax(0, 1fr) auto; }
.kjop-img-tiny, button.kjop-img.kjop-zoom.kjop-img-tiny { width: 32px; height: 32px; border-radius: 6px; }
.kjop-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.kjop-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--border); }
.kjop-row:first-child { border-top: 0; }
.kjop-row-order { grid-template-columns: minmax(0, 1fr) auto auto; }
.kjop-row > div { min-width: 0; overflow-wrap: anywhere; }
.kjop-row > div a { color: inherit; text-decoration: none; }
.kjop-row > div a:hover { color: var(--accent-ink); text-decoration: underline; }
.kjop-row .kjop-sum b { font-size: 14px; }
.kjop-row.is-out, .kjop-table tr.is-out { opacity: .6; }
.kjop-row.is-zoom { grid-template-columns: minmax(0, 1fr) auto; }
.kjop-row.is-zoom > .kjop-zoom { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 360px; position: relative; }
.kjop-tablewrap { overflow: auto; max-height: 75vh; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.kjop-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.3; }
.kjop-table th, .kjop-table td { padding: 4px 10px; text-align: left; vertical-align: middle; border-top: 1px solid var(--border); white-space: nowrap; }
.kjop-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); border-top: 0; border-bottom: 1px solid var(--border); font-weight: 700; }
.kjop-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kjop-table td:nth-child(2) { white-space: normal; min-width: 200px; max-width: 320px; }
.kjop-table td.kjop-names { white-space: normal; min-width: 260px; max-width: 480px; }
.kjop-table a { color: inherit; text-decoration: none; }
.kjop-table a:hover { color: var(--accent-ink); text-decoration: underline; }
.kjop-table .link-btn { font-size: inherit; }
.kjop-table td:first-child { padding: 3px 6px 3px 10px; }
.kjop-zoomrow td { white-space: normal; background: var(--paper); }
.kjop-bigimg, button.kjop-bigimg.kjop-zoom { width: 320px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; border: 0; display: block; position: relative; }
.kjop-bar { gap: 6px 14px; }
.kjop-install { margin-top: 6px; }
.kjop-install > summary { cursor: pointer; font-weight: 600; }
.kjop-install .kjop-steps { margin: 6px 0; line-height: 1.5; }
.ext-doc { max-width: 70ch; margin: 0 auto; padding: 24px 16px 48px; line-height: 1.55; }
.ext-doc section + section { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.ams-ext { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ams-ext > p { margin: 4px 0; }

/* Etiketter (Niimbot B21), bare for administrator Philippe */
.label-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .label-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.label-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.label-col h3, .label-col p { margin: 0; }
.label-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.label-row label { margin: 0; }
.label-canvas { width: min(100%, 384px); height: auto; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); image-rendering: pixelated; }
.scan-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; }
.scan-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.label-log textarea { width: 100%; margin: 8px 0; font-family: var(--mono, monospace); font-size: 13px; }
.label-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.label-result { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.label-result.active { border-color: var(--accent); background: var(--accent-fill); color: var(--accent-ink); }
.label-picked { margin: 0; }
.scan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.scan-head h2 { margin: 0; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
.scan-head .btn { flex: none; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-check { display: flex; align-items: center; gap: 8px; }
.bk-check input { width: auto; }
.brand img { width: 32px; height: 32px; flex: none; }

/* Nettbutikken (T167): varekort, produktside, handlekurv og kasse */
.nav-n[hidden] { display: none; }
.bk-cart-link .nav-n { background: var(--surface); color: var(--text); }
.bk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .bk-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } }
@media (max-width: 699px) { .bk-card-body { padding: 10px 10px 12px; } .bk-card-body .btn { padding-inline: 8px; font-size: .9rem; } }
.bk-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.bk-card-img { display: block; }
.bk-card img, .bk-product-img img, .bk-cart-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.bk-noimg { display: block; aspect-ratio: 1 / 1; background: var(--muted-bg); }
.bk-card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; }
.bk-card-body > * { margin: 0; }
.bk-card-body h3 { font-size: 1.05rem; }
.bk-card-body h3 a { color: inherit; text-decoration: none; }
.bk-card-body h3 a:hover { text-decoration: underline; }
.bk-card-body .btn { margin-top: auto; width: 100%; }
.bk-price { font-weight: 700; font-size: 1.15rem; }
.bk-price-big { font-size: 1.6rem; }
.bk-stock { font-size: .9rem; font-weight: 600; }
.bk-stock.ok { color: var(--accent-ink); }
.bk-stock.out { color: var(--danger); }
.bk-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.bk-tools label { flex: 1 1 200px; margin: 0; }
.bk-msg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bk-crumbs { margin: 0 0 12px; color: var(--muted-strong); }
.bk-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 800px) { .bk-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bk-product-img { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.bk-product-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-product-info > * { margin: 0; }
.bk-buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bk-buy label { margin: 0; }
.bk-qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.bk-qty input { width: 64px; margin: 0; text-align: center; }
.bk-facts { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 4px; color: var(--muted-strong); }
.bk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 900px) { .bk-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.bk-summary { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.bk-summary h3, .bk-summary p { margin: 0; }
.bk-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.bk-summary dd { margin: 0; text-align: right; }
.bk-summary .total { padding-top: 8px; border-top: 1px solid var(--border); font-weight: 800; font-size: 1.15rem; }
.bk-wide { width: 100%; text-align: center; }
.bk-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-form h3, .bk-pay { margin: 8px 0 0; }
.bk-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.bk-row label { margin: 0; }
.bk-empty { text-align: center; }
/* Nettbutikken: søk med forslag, kurv-skuff, fremdriftslinje og rabattkode */
.bk-head { flex-wrap: wrap; gap: 8px 16px; }
.bk-search { position: relative; flex: 1 1 280px; max-width: 520px; min-width: 0; }
.bk-search input { width: 100%; margin: 0; }
@media (max-width: 699px) { .bk-search { order: 3; flex-basis: 100%; max-width: none; } }
.bk-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 70vh; overflow: auto; }
.bk-sugg li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 10px; }
.bk-sugg li[aria-selected="true"] { background: var(--muted-bg); }
.bk-sugg li a { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px; color: inherit; text-decoration: none; }
.bk-sugg-img { width: 44px; height: 44px; flex: none; object-fit: contain; aspect-ratio: 1 / 1; border-radius: 6px; }
.bk-sugg-text { display: flex; flex-direction: column; min-width: 0; }
.bk-sugg-all a { justify-content: center; font-weight: 600; color: var(--accent-ink); }
.bk-card-step { display: flex; justify-content: center; margin-top: auto; }
.bk-card-step .bk-qty { margin: 0; }
.bk-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 100vw); display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: auto; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow); }
.bk-cart-drawer[hidden] { display: none; }
.bk-cart-drawer > * { margin: 0; }
.bk-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-cart-drawer-head h2 { margin: 0; font-size: 1.25rem; }
.bk-cart-drawer dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.bk-cart-drawer dd { margin: 0; text-align: right; }
.bk-cart-drawer .total { padding-top: 8px; border-top: 1px solid var(--border); font-weight: 800; font-size: 1.15rem; }
.bk-summary dl .total, .bk-summary dd.total { font-weight: 800; }
.bk-code summary { cursor: pointer; font-weight: 600; }
.bk-code form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.bk-code form label { flex: 1 1 140px; margin: 0; }
.bk-code-on { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-card-body .bk-lead, .bk-lead { margin: 0; font-size: .9rem; color: var(--muted-strong); }
.bk-delivery { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--muted-bg); font-size: .95rem; }
.bk-delivery ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.bk-ship-cards { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bk-ship-card { padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.bk-ship-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.bk-ship-head h3 { margin: 0; font-size: 1.05rem; }
.bk-ship-sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 8px 0 0; }
.bk-ship-sum dd { margin: 0; text-align: right; }
.bk-ship-sum .total { padding-top: 8px; border-top: 1px solid var(--border); font-weight: 800; }
/* Handlekurv som hos Oda: varekort, sammendrag som følger med, rabattkode som sammenleggbar linje, anbefalinger og fast knapp på mobil */
.bk-cart-main { min-width: 0; }
.bk-cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bk-cart-line { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.bk-cart-thumb { display: block; }
.bk-cart-thumb img, .bk-cart-thumb .bk-noimg { border-radius: 10px; }
.bk-cart-line-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 48px; }
.bk-cart-name { font-weight: 700; color: inherit; text-decoration: none; }
.bk-cart-name:hover { text-decoration: underline; }
.bk-cart-line-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.bk-cart-line-foot .bk-qty { margin: 0; }
.bk-trash { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.bk-trash:hover, .bk-trash:focus-visible { border-color: var(--danger); color: var(--danger); }
.bk-cart-lines-small .bk-cart-line { grid-template-columns: 56px minmax(0, 1fr); padding: 8px; }
.bk-cart-lines-small .bk-cart-line-main { padding-right: 0; }
.bk-cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
@media (min-width: 900px) { .bk-summary { position: sticky; top: 88px; } }
.bk-code summary { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: var(--muted-bg); list-style: none; cursor: pointer; font-weight: 600; }
.bk-code summary::-webkit-details-marker { display: none; }
.bk-code summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 5px; font-weight: 800; line-height: 1; }
.bk-code[open] summary::before { content: "−"; }
.bk-reco { margin-top: 32px; padding: 20px; background: var(--muted-bg); border-radius: var(--radius); }
.bk-reco h3 { margin: 0 0 12px; }
.bk-reco-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bk-reco-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; background: var(--surface); border-radius: 12px; }
.bk-reco-img img, .bk-reco-img .bk-noimg { width: 64px; height: 64px; border-radius: 8px; }
.bk-reco-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-cart-bar, .bk-cart-spacer { display: none; }
@media (max-width: 899px) {
  .bk-cart-spacer { display: block; height: 76px; }
  .bk-cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow); }
}
/* Handlekurv: forsendelsen er en åpen seksjon (varekortene har rammen), og antallsknappene er store nok til å treffe */
.bk-ship-card { padding: 0; background: none; border: 0; box-shadow: none; }
.bk-ship-head { margin-bottom: 8px; }
.bk-ship-card .bk-cart-lines { margin-bottom: 8px; }
.bk-ship-sum { padding: 12px; background: var(--muted-bg); border-radius: 10px; }
.bk-ship-sum .total { border-top-color: var(--border); }
.bk-cart-line-foot .bk-qty .btn { min-width: 40px; height: 40px; font-size: 1.1rem; }
.bk-cart-line-foot .bk-qty input { width: 56px; height: 40px; }
/* Selg i butikken (produsenter): skjema, mine varer og godkjenningskø */
.sell-form, .sell-queue { display: flex; flex-direction: column; gap: 12px; }
.sell-form h3, .sell-queue h3 { margin: 0; }
.sell-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sell-row label { margin: 0; }
.sell-hits { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sell-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sell-img { margin: 0; display: flex; align-items: center; gap: 12px; }
.sell-img img { border-radius: 8px; object-fit: contain; }
.sell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sell-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.sell-item > div:first-child { min-width: 0; flex: 1 1 260px; }
.sell-btns { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sell-inline { display: flex; flex-direction: column; margin: 0; font-size: .85rem; }
.sell-inline input { width: 90px; margin: 0; }
.sell-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--muted-bg); font-size: .85rem; font-weight: 600; }
.sell-approved { color: var(--accent-ink); }
.sell-rejected { color: var(--danger); }
.sell-row input { width: 100%; }