:root {
  --ui-bg: #fbfaf7;
  --ui-ink: #1d2428;
  --ui-muted: #6b7378;
  --ui-line: #e4e1da;
  --ui-accent: #1c2247;
  --ui-accent-ink: #ffffff;
  --stage: #e6e2da;
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.45 "Archivo", system-ui, sans-serif;
  color: var(--ui-ink);
  background: var(--ui-bg);
}
button, input, select { font: inherit; color: inherit; }

.app { display: grid; grid-template-columns: 380px 1fr; height: 100vh; }

/* ---------- Sidepanel ---------- */
.panel {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ui-line);
  overflow-y: auto;
  background: var(--ui-bg);
}
.brand { display: flex; gap: 12px; align-items: center; padding: 18px 20px 10px; }
.brand .merkenavn { display: block; font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 400; letter-spacing: -.01em; line-height: 1.15; color: var(--ui-ink); text-decoration: none; }
.brand .merkenavn:hover { color: var(--ui-accent); }
.brand span { font-size: 12px; color: var(--ui-muted); }
.logo { display: inline-flex; flex: none; color: var(--ui-ink); border-radius: 50%; }
.logo:hover { color: var(--ui-accent); }
.logo:focus-visible, .merkenavn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ikon { flex: none; vertical-align: -2px; }

.step { padding: 14px 20px 16px; border-top: 1px solid var(--ui-line); }
.step:first-of-type { border-top: 0; }
.step h2 {
  margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px;
}
.step h2 span {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ui-ink); color: var(--ui-bg); font-size: 11px; letter-spacing: 0;
}
.hint { color: var(--ui-muted); font-size: 13px; margin: 8px 0 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ui-line);
  background: #fff; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: #c9c4b9; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.active { background: var(--ui-ink); color: var(--ui-bg); border-color: var(--ui-ink); }
.link { background: none; border: 0; padding: 0; color: var(--ui-accent); cursor: pointer; text-decoration: underline; font-size: 13px; }

input[type="search"], .field input, .field select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ui-line); background: #fff;
}
input:focus-visible, select:focus-visible, .btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }

.search { position: relative; }
.results { list-style: none; margin: 4px 0 0; padding: 0; }
.results li button {
  width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.results li button:hover, .results li button:focus-visible { background: #efece5; }
.results small { display: block; color: var(--ui-muted); font-size: 12px; }
.found { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px;
  padding: 8px 10px; border-radius: 8px; background: #efece5; font-size: 13px; flex-wrap: wrap; }
.found .found-mask { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.found .found-mask[hidden] { display: none; }

/* Tittelvarsel (js/app.js visTittelvarsel): utsnittet viser et annet sted enn tittelen etter søk. */
.title-note {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: #fff4d6; border: 1px solid #e8c56a; border-left-width: 4px;
  animation: title-note-in .25s ease-out;
}
.title-note p { margin: 0 0 8px; }
.title-note p#title-note-text { font-weight: 600; }
.title-note .title-note-more { color: #6b5a2a; font-size: 12.5px; margin-top: -4px; }
.title-note .btn.small { white-space: normal; text-align: left; }
@keyframes title-note-in { from { opacity: 0; transform: translateY(-4px); } }

.row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.features { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.features li { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 6px; }
.features input { width: 100%; padding: 5px 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
.features .meta { grid-column: 2 / -1; font-size: 12px; color: var(--ui-muted); margin-top: -4px; }
.features .icon-btn { border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--ui-muted); }
.features .icon-btn:hover { background: #efece5; color: var(--ui-ink); }
.sym { width: 18px; height: 22px; display: grid; place-items: center; }
.sym img { max-width: 18px; max-height: 22px; }
.features .shapes { display: flex; gap: 2px; margin-top: 0; }
.shape { border: 1px solid transparent; background: none; border-radius: 6px; padding: 2px 3px; cursor: pointer; line-height: 0; }
.shape img { height: 18px; width: auto; }
.shape:hover { background: #efece5; }
.shape[aria-pressed="true"] { border-color: var(--ui-ink); background: #fff; }

.themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-card {
  border: 1px solid var(--ui-line); background: #fff; border-radius: 10px; padding: 6px 6px 7px; cursor: pointer;
  display: grid; gap: 3px; font-size: 12.5px; font-weight: 600; text-align: left;
}
.style-card .swatch { height: auto; aspect-ratio: 4 / 3; margin-bottom: 3px; }
.style-card .swatch svg { position: absolute; inset: 0; }
.style-card .swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fade-in .25s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.style-card small { font-weight: 400; font-size: 11px; color: var(--ui-muted); }
.style-card.active { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.style-note { margin: 8px 0 12px; }
.sub-label { font-size: 12px; font-weight: 600; color: var(--ui-muted); margin: 0 0 6px; }
.style-group:not(:first-child) { margin-top: 14px; }
.theme-group { margin: 10px 0 6px; }
.more-palettes { margin-top: 6px; }
.more-palettes summary { cursor: pointer; font-size: 12.5px; color: var(--ui-muted); margin-bottom: 6px; }
.toggles .toggle { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 4px 0; font-size: 13px; }
.theme-card {
  border: 1px solid var(--ui-line); background: #fff; border-radius: 8px; padding: 6px 4px 5px; cursor: pointer;
  display: grid; justify-items: center; gap: 4px; font-size: 11.5px;
}
.theme-card.active { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.swatch { width: 100%; height: 34px; border-radius: 5px; position: relative; overflow: hidden; }

.adjust { margin-top: 10px; }
.adjust summary { cursor: pointer; font-size: 13px; color: var(--ui-ink); }
.colors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0; }
.colors label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.colors input[type="color"] { width: 30px; height: 24px; border: 1px solid var(--ui-line); border-radius: 5px; padding: 0; background: none; cursor: pointer; }

.toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { border: 1px solid var(--ui-line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; background: #fff; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-bg); border-color: var(--ui-ink); }

.layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.layout-card { border: 1px solid var(--ui-line); background: #fff; border-radius: 8px; padding: 8px 2px; cursor: pointer; display: grid; gap: 6px; justify-items: center; font-size: 11px; }
.layout-card.active { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.thumb { width: 44px; height: 58px; background: #f6f3ec; border: 1px solid #d8d3c8; position: relative; }
.thumb i { position: absolute; background: #9fbfcd; }
.thumb b { position: absolute; height: 3px; background: #444; }
.thumb-kontur i { inset: 6px 6px 18px; }
.thumb-kontur b { left: 14px; right: 14px; bottom: 9px; height: 2px; box-shadow: 0 -5px 0 -1px #999; }
.thumb-minimal i { inset: 5px 5px 16px; }
.thumb-minimal b { left: 12px; right: 12px; bottom: 8px; }
.thumb-klassisk { outline: 1px solid #444; outline-offset: -3px; }
.thumb-klassisk i { left: 6px; right: 6px; top: 13px; bottom: 12px; }
.thumb-klassisk b { left: 6px; width: 20px; top: 7px; }
.thumb-atlas { outline: 2px solid #222; outline-offset: -3px; }
.thumb-atlas i { inset: 7px; outline: 1px solid #444; }
.thumb-atlas b { right: 10px; width: 16px; top: 14px; box-shadow: 0 0 0 4px rgba(255,255,255,.75); }
.thumb-sirkel i { width: 32px; height: 32px; left: 5px; top: 7px; border-radius: 50%; }
.thumb-sirkel b { left: 12px; right: 12px; bottom: 9px; }
.thumb-info i { left: 5px; right: 5px; top: 13px; bottom: 17px; }
.thumb-info b { left: 5px; width: 22px; top: 5px; }
.thumb-info::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 7px; height: 5px;
  border-top: 1px solid #444; background: repeating-linear-gradient(90deg, #d1495b 0 6px, transparent 6px 12px) 0 2px / 100% 2px no-repeat; }

.facts-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ui-line); display: grid; gap: 6px; justify-items: start; }
.facts-box > * { margin: 0; }
.facts-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: 13px; }
.facts-list { list-style: none; padding: 0; display: grid; gap: 6px; width: 100%; }
.facts-list:empty { display: none; }
.facts-list li { display: grid; grid-template-columns: 18px 1fr 1.3fr auto; align-items: center; gap: 6px; }
.facts-list input:not([type]) { width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
.facts-list .icon-btn { border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--ui-muted); }
.facts-list .icon-btn:hover { background: #efece5; color: var(--ui-ink); }
.facts-box .check { padding: 4px 0 0; }
.facts-box textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ui-line); background: #fff; font: inherit; font-size: 13px; resize: vertical; }
.facts-status { font-size: 12px; }

.field { display: grid; gap: 4px; font-size: 12.5px; color: var(--ui-muted); margin-top: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 9px; }

.seg { display: flex; border: 1px solid var(--ui-line); border-radius: 8px; overflow: hidden; margin-bottom: 8px; background: #fff; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 4px; cursor: pointer; font-size: 13px; }
.seg button + button { border-left: 1px solid var(--ui-line); }
.seg button[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-bg); }
.scale-info { font-size: 12.5px; color: var(--ui-muted); margin: 10px 0 0; }

.order-bar {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--ui-bg); border-top: 1px solid var(--ui-line);
}
.order-bar small { display: block; color: var(--ui-muted); font-size: 11.5px; }
.order-bar strong { font-size: 20px; }

/* ---------- Scene med plakaten ---------- */
.stage {
  position: relative; container-type: size;
  display: grid; place-items: center; overflow: hidden;
  background: var(--stage);
  background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 14px 14px;
}

.stage-scroll { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.lupe-btn { position: absolute; left: 16px; bottom: 16px; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.lupe-btn::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.500' stroke-linecap='round'%3E%3Ccircle cx='6.800' cy='6.800' r='4.500'/%3E%3Cpath d='m10.200 10.200 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.500' stroke-linecap='round'%3E%3Ccircle cx='6.800' cy='6.800' r='4.500'/%3E%3Cpath d='m10.200 10.200 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lupe-btn[aria-pressed="true"]::before { display: none; }
.lupe-btn[aria-pressed="true"] { background: var(--ui-ink); color: #fff; border-color: var(--ui-ink); }
/* Med mus vises lupen av seg selv over kartet: knappen trengs bare på berøringsskjermer, tipset bare med mus. */
.lupe-tips {
  position: absolute; left: 16px; bottom: 12px; z-index: 3; margin: 0; pointer-events: none;
  font-size: 12px; color: var(--ui-muted); display: flex; align-items: center; gap: 6px;
}
.lupe-tips::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.500' stroke-linecap='round'%3E%3Ccircle cx='6.800' cy='6.800' r='4.500'/%3E%3Cpath d='m10.200 10.200 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.500' stroke-linecap='round'%3E%3Ccircle cx='6.800' cy='6.800' r='4.500'/%3E%3Cpath d='m10.200 10.200 4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) { .lupe-btn { display: none; } }
@media (hover: none) { .lupe-tips { display: none; } }

/* Lupe (js/lupe.js): et lite utsnitt i trykkoppløsning. Med mus fanger den ingen hendelser; på berøringsskjerm
   fanger flata fingeren over scenen mens lupen er åpen. */
.lupe-flate { position: absolute; inset: 0; z-index: 4; touch-action: none; cursor: default; }
.lupe-flate.over { cursor: none; }
.lupe-hint {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 120px);
  padding: 8px 14px; border-radius: 10px; background: var(--ui-ink); color: #fff; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; text-align: center;
}
.lupe { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; visibility: hidden; }
.lupe.vis { visibility: visible; }
.lupe-clip {
  position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: var(--stage, #e9e6df);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.25), 0 14px 40px rgba(0,0,0,.35);
  contain: strict; isolation: isolate;
}
.lupe-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lupe-world > .poster { box-shadow: none; transition: none; }
.lupe-kart { position: absolute; }
.map-frame canvas.lupe-sky { position: absolute; z-index: 1; pointer-events: none; }
.lupe-merke {
  position: absolute; inset: 0; z-index: 10; display: grid; align-content: center; justify-items: center; gap: 28%;
  transform: rotate(-24deg); pointer-events: none; user-select: none;
  font: 600 12px/1 "Archivo", system-ui, sans-serif; letter-spacing: .08em; white-space: nowrap;
  color: rgba(40,40,40,.09); text-shadow: 0 0 1px rgba(255,255,255,.12);
}
.lupe-info {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  padding: 3px 9px; border-radius: 6px; background: rgba(20,24,28,.78); color: #fff; font-size: 11.5px;
}
.lupe.laster .lupe-info::after { content: " · laster …"; }
.lupe-lukk {
  position: absolute; right: 2px; top: 2px; width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  border: 0; background: var(--ui-ink); color: #fff; font-size: 15px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
@media (pointer: fine) { .lupe-lukk { display: none; } }

.poster {
  --ar: 0.714;
  --paper: #fbf8f1; --ink: #1f2d3a; --accent: #d1495b;
  width: min(86cqw, 86cqh * var(--ar));
  aspect-ratio: var(--ar);
  position: relative;
  container-type: size;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px rgba(40,30,10,.22);
  transition: box-shadow .2s;
}
/* ---------- «Se i ramme» (js/app.js renderRamme): bare visning i editoren, aldri i trykket ----------
   Rammene er Blender-renderne fra butikken (butikk/bilder/ramme/blender/, samme bilder som .mock-eik/-svart/-hvit/
   -valnott og .mock-pp i butikk/css/stil.css). Der ligger et <img> i et fast 30 × 40-vindu; her må rammen passe alle
   formater og liggende, så bildet legges rundt plakaten med border-image (9-slice): hjørnene beholdes, listene strekkes.
   Mål fra tools/ramme-webp.py-tallene i stil.css, omregnet til bildets piksler (1100 × 1318) og cm (24,15 px per cm,
   lista er 2 cm): --rl/--rr/--rt/--rb = fra plakatkanten til bildekanten (list + ev. passepartout + skygge) i cm.
   --wcm og --hcm (papirets mål i cm) settes av layoutMap i app.js; --cm (1 cm papir) regnes ut i CSS. Klassene sitter på .stage, ikke på
   .poster, så kopien i bestillingsdialogen og lupen aldri får ramme. */
.stage.i-ramme {
  --ramme: url("butikk/bilder/ramme/blender/eik.webp");
  --rl: 5.511; --rr: 10.277; --rt: 5.229; --rb: 9.656;
  --ramme-slice: 126.3 248.2 233.2 133.1;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #ece7dd 0%, #e3dccf 70%, #d6cebf 100%);
}
.stage.i-ramme.ramme-pp {
  --ramme: url("butikk/bilder/ramme/blender/eik-pp.webp");
  --rl: 9.495; --rr: 14.257; --rt: 10.609; --rb: 15.035;
  --ramme-slice: 256.2 344.3 363.1 229.3;
}
.stage.ramme-svart { --ramme: url("butikk/bilder/ramme/blender/svart.webp"); }
.stage.ramme-svart.ramme-pp { --ramme: url("butikk/bilder/ramme/blender/svart-pp.webp"); }
.stage.ramme-hvit { --ramme: url("butikk/bilder/ramme/blender/hvit.webp"); }
.stage.ramme-hvit.ramme-pp { --ramme: url("butikk/bilder/ramme/blender/hvit-pp.webp"); }
.stage.ramme-valnott { --ramme: url("butikk/bilder/ramme/blender/valnott.webp"); }
.stage.ramme-valnott.ramme-pp { --ramme: url("butikk/bilder/ramme/blender/valnott-pp.webp"); }
/* Plakaten krymper så rammen og skyggen (som faller mot høyre og ned) får plass; plakaten står fortsatt midt i scenen. */
.stage.i-ramme .poster {
  width: min(calc(86cqw * var(--wcm, 50) / (var(--wcm, 50) + 2 * var(--rr))),
    calc(86cqh * var(--ar) * var(--hcm, 70) / (var(--hcm, 70) + 2 * var(--rb))));
  box-shadow: none;
}
.stage.i-ramme .poster::after {
  /* 1 cm papir: plakaten er container (container-type: size), så 100cqw her er plakatens bredde. */
  --cm: calc(100cqw / var(--wcm, 50));
  content: ""; position: absolute; z-index: 5; pointer-events: none;
  top: calc(var(--rt) * var(--cm) * -1); right: calc(var(--rr) * var(--cm) * -1);
  bottom: calc(var(--rb) * var(--cm) * -1); left: calc(var(--rl) * var(--cm) * -1);
  border-style: solid; border-color: transparent;
  border-width: calc(var(--rt) * var(--cm)) calc(var(--rr) * var(--cm)) calc(var(--rb) * var(--cm)) calc(var(--rl) * var(--cm));
  border-image: var(--ramme) var(--ramme-slice) / calc(var(--rt) * var(--cm)) calc(var(--rr) * var(--cm)) calc(var(--rb) * var(--cm)) calc(var(--rl) * var(--cm)) stretch;
}

.poster.frame-svart { box-shadow: 0 0 0 12px #161616, 0 0 0 13px #000, 0 22px 46px rgba(0,0,0,.35); }
.poster.frame-eik { box-shadow: 0 0 0 12px #b98b58, 0 0 0 13px #8e6538, 0 22px 46px rgba(60,35,10,.32); }

.poster-inner {
  position: absolute; inset: 0; display: grid; min-height: 0;
}
.map-frame { grid-area: map; position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.map-el { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.p-titleblock { display: contents; }
.p-kicker { grid-area: kicker; text-transform: uppercase; letter-spacing: .3em; color: var(--kicker); font-size: 2cqmin; padding-left: .3em; }
.p-scaletext { display: none; }
.p-title { grid-area: title; margin: 0; font-weight: 600; line-height: 1.05; }
.p-sub { grid-area: sub; }
.p-coords { grid-area: coords; font-family: "IBM Plex Mono", monospace; letter-spacing: .08em; opacity: .72; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.p-legend { grid-area: legend; list-style: none; margin: 0; padding: 0; }
.p-scale { grid-area: scale; }
.p-north { grid-area: north; }
.p-attrib { grid-area: attrib; font-size: max(5px, .8cqmin); opacity: .5; }

.font-serif .p-title, .font-serif .p-sub { font-family: "Fraunces", Georgia, serif; }
.font-sans .p-title, .font-sans .p-sub { font-family: "Archivo", system-ui, sans-serif; }
.font-sans .p-title { font-weight: 800; }
.font-mono .p-title, .font-mono .p-sub { font-family: "IBM Plex Mono", monospace; font-weight: 500; }
.font-engraved .p-title { font-family: "Bungee Shade", "Archivo", sans-serif; font-weight: 400; letter-spacing: .1em; }
.font-engraved .p-sub { font-family: "Archivo", system-ui, sans-serif; }
.hide-coords .p-coords { display: none; }
.p-legend .mk { height: 2.4cqmin; width: auto; }

/* Layout: Minimal */
.layout-minimal .poster-inner {
  padding: 6cqmin 6cqmin 3cqmin;
  grid-template-rows: 1fr auto auto auto auto auto;
  grid-template-areas: "map" "kicker" "title" "sub" "coords" "attrib";
  text-align: center;
}
/* Tynn nøkkellinje rundt kartet: lyse kartkanter (snø, lyst land) flyter ellers ut i papiret. */
.layout-minimal .map-frame { outline: max(1px, .1cqmin) solid color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.layout-minimal .p-kicker { margin-top: 4.5cqmin; }
.layout-minimal .p-title { font-size: 7.5cqmin; letter-spacing: .22em; text-transform: uppercase; margin-top: 4.5cqmin; padding-left: .22em; }
/* Sperrede versaler i serif står finere i normal vekt enn halvfet (mer luft i bokstavene, roligere gråtone). */
.layout-minimal.font-serif .p-title, .layout-atlas.font-serif .p-title { font-weight: 400; }
.layout-minimal .p-kicker:not([hidden]) + .p-title { margin-top: 1.2cqmin; }
.layout-minimal .p-sub { font-size: 2.3cqmin; margin-top: 1.6cqmin; }
.layout-minimal.font-serif .p-sub { font-style: italic; }
/* Kort hårstrek mellom tittel/undertittel og koordinatene (kartusj-detalj). */
.layout-minimal .p-coords::before, .layout-sirkel .p-coords::before {
  content: ""; display: block; width: 5cqmin; height: max(1px, .1cqmin); margin: 0 auto 1.7cqmin;
  background: color-mix(in srgb, var(--ink) 55%, var(--paper));
}
.layout-minimal .p-coords { font-size: 1.45cqmin; margin-top: 1.8cqmin; }
.layout-minimal .p-attrib, .layout-sirkel .p-attrib { margin-top: 2.2cqmin; font-size: max(4.5px, .62cqmin); opacity: .45; }
.layout-minimal .p-legend, .layout-minimal .p-scale, .layout-minimal .p-north { display: none; }

/* Layout: Kontur (som konturplakatene i butikken): bred ren kant (2 cm på 30 x 40), kart uten ramme,
   sperret serif-tittel under, nordpil og målestokk nederst. */
.layout-kontur .poster-inner {
  padding: 6.67cqmin 6.67cqmin 3.5cqmin;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto auto auto auto auto;
  grid-template-areas: "map map map" "kicker kicker kicker" "title title title" "sub sub sub" "coords coords coords" "north attrib scale";
  text-align: center; align-items: center;
}
.layout-kontur .map-frame { align-self: stretch; }
.layout-kontur .p-kicker { margin-top: 4cqmin; }
.layout-kontur .p-title { font-size: 6.4cqmin; letter-spacing: .24em; text-transform: uppercase; margin-top: 4cqmin; padding-left: .24em; }
.layout-kontur.font-serif .p-title { font-weight: 400; }
.layout-kontur .p-kicker:not([hidden]) + .p-title { margin-top: 1.2cqmin; }
.layout-kontur .p-sub { font-size: 2.1cqmin; margin-top: 1.4cqmin; letter-spacing: .18em; text-transform: uppercase; }
.layout-kontur .p-coords { font-size: 1.35cqmin; margin-top: 1.6cqmin; }
.layout-kontur .p-attrib { font-size: max(4.5px, .58cqmin); opacity: .45; margin-top: 3cqmin; }
.layout-kontur .p-north { justify-self: start; margin-top: 3cqmin; height: 4cqmin; }
.layout-kontur .p-scale { justify-self: end; margin-top: 3cqmin; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.05cqmin; letter-spacing: .08em; text-transform: uppercase; text-align: right; opacity: .8; }
.layout-kontur .p-scale .bar {
  height: .7cqmin; margin-bottom: .6cqmin; margin-left: auto; box-sizing: border-box;
  border: 0 solid currentColor; border-bottom-width: max(1px, .12cqmin);
  border-left-width: max(1px, .12cqmin); border-right-width: max(1px, .12cqmin); background: none;
}
.layout-kontur .p-legend { display: none; }

/* Layout: Turkart (klassisk) */
.layout-klassisk .poster-inner {
  padding: 6cqmin;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas: "kicker north" "title north" "sub north" "map map" "legend scale" "coords coords";
  column-gap: 3cqmin;
}
/* Krediteringen deler bunnlinja med koordinatene (høyrestilt). Før lå den i høyre kolonne og gjorde den like bred som
   teksten, så tittel og undertittel ble trange og nordpila havnet midt på arket. */
.layout-klassisk .p-attrib { grid-area: coords; justify-self: end; align-self: end; }
.layout-klassisk .poster-inner::before {
  content: ""; position: absolute; inset: 2.6cqmin; border: max(1px, .25cqmin) solid var(--ink); pointer-events: none;
}
.layout-klassisk .map-frame { border: max(1px, .3cqmin) solid var(--ink); margin: 2.5cqmin 0; }
.layout-klassisk .p-title { font-size: 6cqmin; }
.layout-klassisk .p-sub { font-size: 2.2cqmin; margin-top: .8cqmin; }
.layout-klassisk .p-north { width: 3.6cqmin; align-self: center; justify-self: end; }
.layout-klassisk .p-legend { display: flex; flex-wrap: wrap; gap: 1cqmin 3cqmin; font-size: 1.7cqmin; align-content: start; }
.layout-klassisk .p-legend li { display: flex; align-items: center; gap: 1cqmin; }
.layout-klassisk .p-kicker { font-size: 1.6cqmin; padding-left: 0; margin-bottom: .6cqmin; }
.p-legend .ln { width: 3.5cqmin; height: .5cqmin; border-radius: 1cqmin; background: var(--accent); }
.layout-klassisk .p-scale { justify-self: end; font-family: "IBM Plex Mono", monospace; font-size: 1.5cqmin; text-align: right; }
.layout-klassisk .p-scale .bar {
  height: 1cqmin; margin: 0 0 .6cqmin auto; border: max(1px, .2cqmin) solid var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 25%, transparent 25% 50%, var(--ink) 50% 75%, transparent 75%);
}
.layout-klassisk .p-coords { font-size: 1.4cqmin; margin-top: 1.5cqmin; }
.layout-klassisk .p-attrib { margin-top: 1.5cqmin; text-align: right; }

/* Layout: Sirkel */
.layout-sirkel .poster-inner {
  padding: 8cqmin 8cqmin 3cqmin;
  grid-template-rows: 1fr auto auto auto auto auto;
  grid-template-areas: "map" "kicker" "title" "sub" "coords" "attrib";
  justify-items: center; text-align: center;
}
.layout-sirkel .map-frame {
  height: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  /* Dobbel ring som på et instrument: kraftig indre ring, luft, og en tynn ytre hårstrek. */
  box-shadow: 0 0 0 max(1px, .3cqmin) var(--ink), 0 0 0 1.3cqmin var(--paper),
    0 0 0 calc(1.3cqmin + max(1px, .1cqmin)) color-mix(in srgb, var(--ink) 55%, var(--paper));
}
.layout-sirkel .p-kicker { margin-top: 5cqmin; }
.layout-sirkel .p-title { font-size: 7cqmin; margin-top: 5cqmin; }
.layout-sirkel .p-kicker:not([hidden]) + .p-title { margin-top: 1.2cqmin; }
.layout-sirkel .p-sub { font-size: 2.4cqmin; margin-top: 1.2cqmin; font-style: italic; }
.layout-sirkel .p-coords { font-size: 1.45cqmin; margin-top: 1.8cqmin; }
.layout-sirkel .p-legend, .layout-sirkel .p-scale, .layout-sirkel .p-north { display: none; }

/* Layout: Atlas – én tynn linje rundt kartet, tittelen ligger i kartet */
.layout-atlas .poster-inner { padding: 4.5cqmin; grid-template: "map" 1fr / 1fr; }
.layout-atlas .map-frame {
  padding: 0; background: none; box-shadow: none;
  outline: max(1px, .2cqmin) solid var(--ink); outline-offset: 1cqmin;
}
.layout-atlas .p-titleblock {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  width: 54%; padding: 6cqmin 5cqmin; text-align: center;
  background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--paper) 94%, transparent) 60%, transparent 100%);
}
.layout-atlas.pos-tr .p-titleblock { top: 6cqmin; right: 6cqmin; }
.layout-atlas.pos-tl .p-titleblock { top: 6cqmin; left: 6cqmin; }
.layout-atlas.pos-br .p-titleblock { bottom: 6cqmin; right: 6cqmin; }
.layout-atlas.pos-bl .p-titleblock { bottom: 6cqmin; left: 6cqmin; }
.layout-atlas .p-kicker { font-size: 2.2cqmin; margin-bottom: 2cqmin; }
.layout-atlas .p-title { font-size: 7cqmin; letter-spacing: .2em; text-transform: uppercase; line-height: 1.12; padding-left: .2em; }
.layout-atlas.font-engraved .p-title { letter-spacing: .14em; padding-left: .14em; }
.layout-atlas .p-sub { font-size: 1.7cqmin; margin-top: 1.8cqmin; text-transform: uppercase; letter-spacing: .12em; padding-left: .12em; }
.layout-atlas .p-sub::before {
  content: ""; display: block; width: 4.5cqmin; height: max(1px, .1cqmin); margin: 0 auto 1.7cqmin;
  background: color-mix(in srgb, var(--ink) 60%, var(--paper));
}
.layout-atlas .p-scaletext { display: block; font-size: 1.5cqmin; margin-top: .8cqmin; letter-spacing: .08em; font-variant-numeric: tabular-nums lining-nums; }
.layout-atlas .p-coords { display: block; font-size: 1.2cqmin; margin-top: .9cqmin; }
.layout-atlas.hide-coords .p-coords { display: none; }
.layout-atlas .p-legend {
  position: absolute; z-index: 2; left: 6cqmin; bottom: 6cqmin; pointer-events: none;
  display: grid; gap: .8cqmin; padding: 1.4cqmin 1.8cqmin; font-size: 1.5cqmin;
  background: color-mix(in srgb, var(--paper) 88%, transparent); border: max(1px, .12cqmin) solid var(--ink);
}
.layout-atlas.pos-bl .p-legend { left: auto; right: 6cqmin; }
.layout-atlas .p-legend:empty { display: none; }
.layout-atlas .p-legend li { display: flex; align-items: center; gap: 1cqmin; }
/* bottom 1.7cqmin: under rammelinja (som går 3,3–3,5cqmin fra kanten), ikke oppi den. */
/* nowrap: krediteringen og UTM-infolinja deler bunnlinja; fitBottomLine (js/utm-ramme.js) korter ned/skalerer så de
   aldri overlapper, i stedet for at krediteringen brytes opp i rammen. */
/* Dempet 8. nov.: .75cqmin og 45 % blekk (var .95cqmin / 55 %). I trykk 3,75 mm ≈ 10,6 pt på 50×70 og 2,25 mm ≈ 6,4 pt på
   30×40 (minst ca. 5,5 pt for å kunne leses på nært hold). Samme innhold – begge rettighetshaverne skal stå. */
.layout-atlas .p-attrib { position: absolute; right: 5cqmin; bottom: 1.7cqmin; font-size: max(4.5px, .58cqmin); line-height: 1; white-space: nowrap; opacity: .45; }
.layout-atlas .p-scale, .layout-atlas .p-north { display: none; }
.p-legend .ln { width: 3.5cqmin; height: .5cqmin; border-radius: 1cqmin; background: var(--accent); }

/* Layout: Infografikk – kart med faktalinje (tall fra Wikidata) og kort tekst */
.p-facts { display: none; grid-area: facts; }
.layout-info .poster-inner {
  padding: 7cqmin 7cqmin 3.5cqmin;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas: "kicker kicker" "title title" "sub sub" "map map" "facts facts" "coords attrib";
}
.layout-info .p-kicker { font-size: 1.7cqmin; padding-left: 0; margin-bottom: 1cqmin; }
.layout-info .p-title { font-size: 8cqmin; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.layout-info.font-engraved .p-title { letter-spacing: .08em; }
.layout-info .p-sub { font-size: 2.2cqmin; margin-top: 1.4cqmin; }
.layout-info .map-frame { margin-top: 3.5cqmin; }
.layout-info .p-facts { display: block; margin-top: 3.5cqmin; }
.p-factgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.layout-info .p-factgrid { border-top: max(1px, .35cqmin) solid var(--ink); }
.p-factgrid li { padding: 2.4cqmin 2cqmin 0; min-width: 0; }
.p-factgrid li:first-child { padding-left: 0; }
.p-factgrid li + li { border-left: max(1px, .12cqmin) solid color-mix(in srgb, var(--ink) 30%, transparent); }
.p-factgrid li::before { content: ""; display: block; width: 3.5cqmin; height: .6cqmin; background: var(--accent); margin-bottom: 1.8cqmin; }
.p-fact-v { display: block; font-size: 3.9cqmin; font-weight: 600; line-height: 1; white-space: nowrap; }
.p-fact-l { display: block; font-size: 1.3cqmin; text-transform: uppercase; letter-spacing: .16em; margin-top: 1.1cqmin; opacity: .7; }
.p-facttext { margin: 0; font-size: 1.85cqmin; line-height: 1.45; max-width: 78%; }
.layout-info .p-factgrid:not([hidden]) + .p-facttext { margin-top: 3cqmin; }
.layout-info .p-coords { font-size: 1.4cqmin; margin-top: 3cqmin; white-space: nowrap; margin-right: 3cqmin; }
.layout-info .p-attrib { margin-top: 3cqmin; text-align: right; }
.layout-info .p-legend, .layout-info .p-scale, .layout-info .p-north { display: none; }
.font-serif .p-fact-v, .font-serif .p-facttext { font-family: "Fraunces", Georgia, serif; }
.font-sans .p-fact-v, .font-engraved .p-fact-v { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; }
.font-mono .p-fact-v { font-family: "IBM Plex Mono", monospace; font-weight: 500; }

.zoom { position: absolute; right: 16px; top: 16px; z-index: 6; display: grid; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.zoom button { width: 36px; height: 36px; border: 0; background: #fff; font-size: 18px; cursor: pointer; }
.zoom button + button { border-top: 1px solid var(--ui-line); }

.mode-banner {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  background: var(--ui-ink); color: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px;
}
.mode-banner .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }

/* ---------- Bestillingsdialog ---------- */
dialog {
  border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px));
  box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--ui-ink); background: var(--ui-bg);
}
dialog::backdrop { background: rgba(20,24,28,.45); }
.dlg { padding: 22px 24px; }
.dlg h3 { margin: 0 0 4px; font-size: 20px; }
.dlg .sub { color: var(--ui-muted); margin: 0 0 16px; font-size: 13px; }
.dlg-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.dlg-poster { position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.dlg-poster .poster { pointer-events: none; }
.dlg table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dlg td { padding: 4px 0; vertical-align: top; }
.dlg td:last-child { text-align: right; }
.dlg tr.total td { border-top: 1px solid var(--ui-line); padding-top: 8px; font-weight: 700; font-size: 15px; }
.dlg .meta td { color: var(--ui-muted); }
.dlg .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dlg .notice { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #fff4d6; font-size: 13px; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; }
  .stage { order: -1; height: 62vh; }
  .panel { border-right: 0; overflow: visible; }
  .themes { grid-template-columns: repeat(3, 1fr); }
  .styles { grid-template-columns: repeat(2, 1fr); }
  .dlg-grid { grid-template-columns: 1fr; }
  .dlg-poster { justify-self: center; }
}

/* Atlas-tillegg (js/utm-ramme.js): tittelsky-varianter og UTM-ramme. state.sky / state.utmRamme. */
.layout-atlas.sky-raster .p-titleblock, .layout-atlas.sky-kurve .p-titleblock, .layout-atlas.sky-rutenett .p-titleblock { background: none; }
.map-frame canvas.p-sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* UTM-rutenett (state.rutenett): over kartet/skylerretet, under tittel og tegnforklaring (z-index 2). */
.map-frame svg.p-grid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.p-utm { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.p-utm .utm-tick { stroke: var(--ink); fill: none; stroke-linecap: butt; }
.p-utm .utm-lbl { fill: var(--ink); fill-opacity: .72; font-family: "Archivo", system-ui, sans-serif; font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.p-utminfo { display: none; }
.layout-atlas.utm .p-utminfo {
  display: block; position: absolute; left: 5cqmin; bottom: 1.7cqmin; white-space: nowrap;
  font-size: max(5.5px, .78cqmin); line-height: 1; opacity: .55; letter-spacing: .03em; /* var .95cqmin / 60 % (8. nov.) */
}
/* Med UTM-ramme tegnes rammelinja i SVG (tynnere, 0,1 cqmin, eller stripe) – CSS-linja slås av. */
.layout-atlas.utm .map-frame { outline: none; }

/* ---------- Kundeflyt (8. nov.): startmaler, «Flere valg», størrelse med pris, bestilling, melding, mobil ---------- */
.maler-wrap { margin-top: 14px; }
.maler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* Kortet låses: én kolonne som aldri blir bredere enn kortet (minmax(0, 1fr)), bildet har fast forhold (240 × 318,
   samme som bilder/maler/*.jpg) og fyller bredden, og navnet brytes ved myk bindestrek (js/maler.js) eller hvor som
   helst, høyst to linjer. Lange navn kan derfor ikke gjøre kortet større enn de andre. */
.mal-card {
  min-width: 0; overflow: hidden;
  border: 1px solid var(--ui-line); background: #fff; border-radius: 8px; padding: 4px 4px 5px; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; justify-items: stretch;
  font-size: 11px; line-height: 1.2; text-align: center;
}
.mal-card img { width: 100%; height: auto; aspect-ratio: 240 / 318; object-fit: cover; object-position: center top; border-radius: 4px; background: #efece5; display: block; }
.mal-card span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-width: 0; font-size: 10px; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: manual;
}
.mal-card:hover { border-color: #c9c4b9; }
.mal-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }

.seg button small { display: block; font-size: 11.5px; opacity: .7; }

.step.more { padding-bottom: 12px; }
.step.more > summary { cursor: pointer; list-style: none; }
.step.more > summary::-webkit-details-marker { display: none; }
.step.more > summary h2 { margin-bottom: 2px; }
/* Etikettene viser hva som finnes under «Flere valg»; klikk åpner panelet og ruller til gruppen. */
.more-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 0 0 28px; }
.more-chips button {
  border: 1px solid var(--ui-line); background: #fff; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; color: var(--ui-ink); cursor: pointer; line-height: 1.35;
}
.more-chips button:hover { border-color: #c9c4b9; background: #f6f3ec; }
.more-chips button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.more-group { scroll-margin-top: 12px; }
.more-group.blink { animation: more-blink 1.4s ease-out; }
@keyframes more-blink { 0%, 30% { background: #fff4d6; } 100% { background: transparent; } }

/* «Se i ramme» i steg 4 */
.se-ramme { margin-top: 14px; }
.rammer { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ramme-valg {
  border: 1px solid var(--ui-line); background: #fff; border-radius: 8px; padding: 6px 2px 5px; cursor: pointer;
  display: grid; justify-items: center; gap: 4px; font-size: 11.5px; min-width: 0;
}
.ramme-valg:hover { border-color: #c9c4b9; }
.ramme-valg[aria-pressed="true"] { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.ramme-prove { width: 24px; height: 30px; border-radius: 2px; background: #fbf8f1; box-shadow: inset 0 0 0 4px var(--list, #fff), 0 1px 2px rgba(0,0,0,.2); }
.ramme-ingen .ramme-prove { box-shadow: 0 1px 2px rgba(0,0,0,.2); outline: 1px dashed #b9b3a6; outline-offset: 2px; }
.ramme-eik { --list: #c79d68; }
.ramme-svart { --list: #232323; }
.ramme-hvit { --list: #f4f2ec; }
.ramme-valnott { --list: #5e3d27; }
.se-ramme .check { padding: 8px 0 0; }
.se-ramme .check.av { opacity: .45; }
.se-ramme .hint { margin-top: 4px; font-size: 12.5px; }
.step.more[open] > summary h2 span { transform: rotate(45deg); }
.step.more h2 span { transition: transform .15s; }
.more-group { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--ui-line); }
.more-group:first-of-type { border-top: 0; padding-top: 4px; }
.more-group .check { padding: 8px 0 0; }

.btn.big { padding: 11px 18px; font-size: 15px; }

.sizes { display: grid; gap: 6px; margin-bottom: 12px; }
.size-card {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px;
}
.size-card[aria-pressed="true"] { border-color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-ink); }
.size-card span { font-variant-numeric: tabular-nums; }
.dlg .hint { font-size: 12.5px; }
.dlg-snart p { margin: 0 0 10px; }

.toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 14px; align-items: center; max-width: min(620px, calc(100% - 32px));
  padding: 10px 16px; border-radius: 10px; background: var(--ui-ink); color: var(--ui-bg); font-size: 13.5px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.toast .link { color: #ffd98a; font-weight: 600; white-space: nowrap; }

.mobile-note {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(20,24,28,.55);
}
.mobile-card { background: var(--ui-bg); border-radius: 14px; padding: 22px 20px; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mobile-card strong { font-size: 18px; display: block; margin-bottom: 8px; }
.mobile-card p { margin: 0 0 16px; color: var(--ui-muted); }
.mobile-card .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mobile-card a.btn { text-decoration: none; color: inherit; }

@media (max-width: 700px) {
  .maler { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .zoom button { width: 40px; height: 40px; }
  .lupe-btn { font-size: 13px; padding: 7px 10px; }
  /* Meldingen over Lupe-knappen, i full bredde, så teksten ikke presses sammen. */
  .toast { bottom: 62px; left: 16px; right: 16px; transform: none; max-width: none; flex-wrap: wrap; gap: 4px 14px; }
}