/* ===== Familiens Atlas ===== */
:root {
  --ink: #11192b;
  --ink-2: #1d2a44;
  --paper: #f7f1e6;
  --paper-2: #efe5d3;
  --sand: #e6d5b8;
  --terra: #c8553d;
  --terra-2: #e07a5f;
  --sea: #2a7f8f;
  --gold: #d9a441;
  --muted: #6b7385;
  --glass: rgba(250, 246, 238, .78);
  --glass-line: rgba(255, 255, 255, .6);
  --text: #18202f;
  --shadow: 0 18px 50px -18px rgba(17, 25, 43, .45), 0 4px 14px -6px rgba(17, 25, 43, .25);
  --r: 18px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
body.night {
  --glass: rgba(20, 28, 46, .74);
  --glass-line: rgba(255, 255, 255, .09);
  --text: #eef0f5;
  --muted: #9aa3b8;
  --paper: #1a2338;
  --paper-2: #222d47;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#map { position: fixed; inset: 0; background: #aad3df; z-index: 0; }
body.night #map { background: #0e1626; }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 400;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(17, 25, 43, .28) 100%);
}
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.55) !important; border-radius: 8px 0 0 0; }
.leaflet-control-zoom { display: none; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  border-radius: var(--r);
}
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- knapper og felter ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 600; font-size: 14px;
  background: rgba(17, 25, 43, .07); transition: transform .15s, background .2s, box-shadow .2s;
}
body.night .btn { background: rgba(255,255,255,.08); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--terra); color: #fff; box-shadow: 0 10px 24px -10px rgba(200, 85, 61, .8); }
.btn-primary:hover { background: #b6492f; }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; color: #b23a2a; }
.btn-wide { width: 100%; padding: 14px 18px; font-size: 15px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center;
  background: rgba(17, 25, 43, .06); transition: background .2s;
}
body.night .icon-btn { background: rgba(255,255,255,.08); }
.icon-btn:hover { background: rgba(17, 25, 43, .12); }
.link { border: 0; background: none; color: var(--terra); font-weight: 600; padding: 0 4px; }

.fld { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.fld input, .fld textarea, .fld select {
  width: 100%; border: 1px solid rgba(17, 25, 43, .14); border-radius: 12px; padding: 11px 13px;
  font-size: 15px; font-weight: 400; color: var(--text); background: rgba(255,255,255,.7); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
body.night .fld input, body.night .fld textarea, body.night .fld select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--terra); box-shadow: 0 0 0 4px rgba(200, 85, 61, .15); }
.fld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- låseskærm ---------- */
.gate {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(ellipse at 50% 35%, rgba(17,25,43,.35), rgba(17,25,43,.82));
  backdrop-filter: blur(3px);
  transition: opacity .8s ease, visibility .8s;
}
body.stage-app .gate { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-card {
  width: min(420px, 100%); text-align: center; padding: 38px 32px 30px; border-radius: 28px;
  background: rgba(247, 241, 230, .92); color: #18202f;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  animation: rise .9s cubic-bezier(.2,.8,.2,1) both;
}
.gate-card .fld { color: #6b7385; text-align: left; }
.compass { width: 74px; height: 74px; margin: 0 auto 14px; color: var(--ink); animation: spin-in 1.6s cubic-bezier(.2,.8,.2,1) both; }
.compass svg { width: 100%; height: 100%; stroke: none; }
.gate-title { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(32px, 7vw, 42px); line-height: 1.05; margin: 8px 0 6px; letter-spacing: -.01em; }
.gate-sub { margin: 0 0 24px; color: #6b7385; }
.gate-form { display: grid; gap: 14px; }
.fld-code input { text-align: center; font-size: 22px; letter-spacing: .3em; padding: 14px; }
.gate-err { min-height: 20px; margin: 12px 0 0; color: #b23a2a; font-size: 14px; font-weight: 500; }
.gate-card.shake { animation: shake .45s; }
.demo-note { margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(42,127,143,.1); color: #1f5f6b; font-size: 13px; line-height: 1.45; }
.demo-note b { letter-spacing: .08em; }

/* ---------- app-krom ---------- */
body:not(.stage-app) .topbar, body:not(.stage-app) .brand, body:not(.stage-app) .dock, body:not(.stage-app) .timeline, body:not(.stage-app) .fab-wrap { display: none; }
.brand {
  position: fixed; top: 16px; right: 16px; z-index: 900; width: 330px; padding: 18px 18px 14px;
  animation: slide-in-r .8s .2s cubic-bezier(.2,.8,.2,1) both;
}
.brand-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.brand-title { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 30px; line-height: 1.05; margin: 4px 0 0; letter-spacing: -.01em; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; }
.stat { padding: 8px 4px 6px; border-radius: 12px; text-align: center; background: rgba(17,25,43,.045); }
body.night .stat { background: rgba(255,255,255,.05); }
.stat b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.flags:empty { display: none; }
.flag {
  border: 0; padding: 5px 6px 5px 6px; border-radius: 999px; background: rgba(17,25,43,.06);
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.flag:hover { background: rgba(17,25,43,.12); transform: translateY(-1px); }
.flag i { font-style: normal; font-size: 10.5px; font-weight: 700; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: rgba(17,25,43,.08); color: var(--muted); text-align: center; }
.flag.on i { background: rgba(255,255,255,.2); color: #fff; }
.flag-all { padding: 5px 11px; }
body.night .flag { background: rgba(255,255,255,.07); }
.flag img { width: 18px; height: 13px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.flag.on { background: var(--ink); color: #fff; }

.dock {
  position: fixed; left: 16px; bottom: calc(16px + var(--safe-b)); z-index: 900; display: flex; gap: 2px; padding: 6px;
  animation: slide-up .8s .35s cubic-bezier(.2,.8,.2,1) both;
}
.dock-btn {
  border: 0; background: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; font-size: 13.5px; font-weight: 600; transition: background .2s;
}
.dock-btn:hover, .dock-btn.on { background: rgba(17,25,43,.08); }
body.night .dock-btn:hover, body.night .dock-btn.on { background: rgba(255,255,255,.08); }
.dock-btn[data-act="play"] svg { fill: var(--terra); stroke: var(--terra); }

.timeline {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--safe-b)); z-index: 890;
  max-width: min(560px, calc(100vw - 720px)); padding: 6px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  animation: fade-in 1s .5s both;
}
.timeline::-webkit-scrollbar { display: none; }
.timeline:empty { display: none; }
.yr {
  border: 0; background: none; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; position: relative;
}
.yr i { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); height: 3px; border-radius: 2px; background: var(--terra); opacity: .55; }
.yr.on { background: var(--ink); color: #fff; }
body.night .yr.on { background: #fff; color: var(--ink); }

.fab-wrap { position: fixed; right: 16px; bottom: calc(16px + var(--safe-b)); z-index: 950; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab {
  display: flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 22px 15px 18px;
  background: var(--terra); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 16px 34px -12px rgba(200, 85, 61, .9), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s, background .2s;
  animation: pop-in .7s .6s cubic-bezier(.2,1.4,.4,1) both;
}
.fab:hover { transform: translateY(-2px); background: #b6492f; }
.fab svg { width: 22px; height: 22px; stroke-width: 2.4; transition: transform .3s; }
.fab-wrap.open .fab svg { transform: rotate(135deg); }
.fab-menu {
  display: grid; gap: 4px; padding: 6px; border-radius: 20px; background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  transform-origin: bottom right; transform: scale(.85) translateY(10px); opacity: 0; pointer-events: none; transition: .22s cubic-bezier(.2,.8,.2,1);
}
.fab-wrap.open .fab-menu { transform: none; opacity: 1; pointer-events: auto; }
.fab-menu button { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 11px 14px; border-radius: 14px; }
.fab-menu button:hover { background: rgba(17,25,43,.07); }
body.night .fab-menu button:hover { background: rgba(255,255,255,.07); }
.fab-menu svg { color: var(--terra); width: 22px; height: 22px; }
.fab-menu b { display: block; font-size: 14px; }
.fab-menu small { color: var(--muted); font-size: 12px; }
body.viewer .fab-wrap { display: none; }

.placing-hint {
  position: fixed; top: 18px; left: 50%; transform: translate(-50%, -140%); z-index: 1000; padding: 12px 18px;
  font-weight: 600; font-size: 14px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; border-radius: 999px; opacity: 0;
}
body.placing .placing-hint { transform: translate(-50%, 0); opacity: 1; }
body.placing #map { cursor: crosshair; }

/* ---------- markører ---------- */
.pin { position: relative; width: 54px; height: 62px; }
.pin-face {
  position: absolute; left: 0; top: 0; width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  background: var(--c, var(--terra)); border: 3px solid #fff;
  box-shadow: 0 0 0 2.5px var(--c, var(--terra)), 0 10px 22px -6px rgba(17,25,43,.6);
  transition: transform .25s cubic-bezier(.2,1.4,.4,1);
  display: grid; place-items: center; color: #fff; font-family: var(--serif); font-size: 21px; font-style: italic;
}
/* Billedet ligger absolut i cirklen, så det aldrig kan vokse ud over den (gav store ovaler) */
.pin-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pin::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: #fff; box-shadow: 2px 2px 0 0 var(--c, var(--terra)); border-radius: 0 0 3px 0; z-index: -1;
}
.pin:hover .pin-face, .pin.active .pin-face { transform: scale(1.14) translateY(-3px); }
.pin.active .pin-face { box-shadow: 0 0 0 3px var(--c, var(--terra)), 0 0 0 9px rgba(200,85,61,.25), 0 14px 26px -6px rgba(17,25,43,.6); }
.pin.small { width: 40px; height: 48px; }
.pin.small .pin-face { width: 40px; height: 40px; font-size: 16px; border-width: 2.5px; }
.pin.wish .pin-face { background: rgba(255,255,255,.9); color: var(--c, var(--gold)); border-style: dashed; border-color: var(--c, var(--gold)); box-shadow: 0 8px 18px -6px rgba(17,25,43,.5); }
.pin.wish::after { background: var(--c, var(--gold)); box-shadow: none; }
.pin.wish .pin-face svg { width: 20px; height: 20px; }
.pin-drop { animation: drop .6s cubic-bezier(.2,1.6,.4,1) both; }
.home-pin { width: 36px; height: 36px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 8px 18px -6px rgba(0,0,0,.6); }
.home-pin svg { width: 18px; height: 18px; }

.stack { position: relative; width: 66px; height: 66px; }
.stack .card {
  position: absolute; inset: 6px; border-radius: 12px; background: #fff center/cover; border: 3px solid #fff;
  box-shadow: 0 8px 18px -8px rgba(17,25,43,.7);
}
.stack .card:nth-child(1) { transform: rotate(-9deg) translate(-4px, 2px); }
.stack .card:nth-child(2) { transform: rotate(7deg) translate(4px, 0); }
.stack .card:nth-child(3) { transform: rotate(-1deg); }
.stack .card.blank { background: linear-gradient(135deg, var(--terra-2), var(--terra)); }
.stack b {
  position: absolute; right: -4px; top: -4px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--ink); color: #fff; font-size: 12.5px; display: grid; place-items: center; box-shadow: 0 0 0 2.5px #fff;
}
.stack:hover .card:nth-child(1) { transform: rotate(-14deg) translate(-9px, 2px); }
.stack:hover .card:nth-child(2) { transform: rotate(12deg) translate(9px, 0); }
.stack .card { transition: transform .3s cubic-bezier(.2,1.4,.4,1); }

.trip-line { stroke-dasharray: 2 9; stroke-linecap: round; animation: flow 1.6s linear infinite; }
.cinema-line { stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }

/* ---------- detalje-ark ---------- */
.sheet {
  position: fixed; top: 16px; right: 16px; bottom: 16px; width: 420px; z-index: 960;
  background: var(--paper); border-radius: 24px; box-shadow: 0 30px 80px -24px rgba(17,25,43,.6);
  transform: translateX(calc(100% + 40px)); transition: transform .5s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet.open { transform: none; }
.sheet-hero { position: relative; height: 260px; flex: none; background: linear-gradient(135deg, var(--c, var(--terra)), var(--ink)); overflow: hidden; }
.sheet-hero img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; animation: kenburns 18s ease-out both; }
.sheet-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,25,43,.35) 0, transparent 30%, transparent 50%, rgba(17,25,43,.85)); pointer-events: none; }
.sheet-hero .hero-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.75); font-family: var(--serif); font-style: italic; font-size: 64px; }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(10px); }
.sheet-close:hover { background: rgba(255,255,255,.35); }
.sheet-title-wrap { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; color: #fff; }
.sheet-title-wrap .eyebrow { color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 6px; }
.sheet-title-wrap .eyebrow img { width: 18px; height: 13px; border-radius: 2px; }
.sheet-title { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05; margin: 6px 0 0; letter-spacing: -.01em; text-wrap: balance; }
.sheet-body { padding: 18px 22px 22px; overflow-y: auto; flex: 1; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(17,25,43,.06); font-size: 13px; font-weight: 500; border: 0; }
body.night .chip { background: rgba(255,255,255,.07); }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.chip svg { width: 15px; height: 15px; }
.note { font-family: var(--serif); font-size: 17px; line-height: 1.6; white-space: pre-wrap; margin: 4px 0 18px; }
.note:empty { display: none; }
.gallery { columns: 2; column-gap: 8px; }
.gallery figure { margin: 0 0 8px; break-inside: avoid; border-radius: 12px; overflow: hidden; position: relative; cursor: zoom-in; background: var(--paper-2); }
.gallery img { width: 100%; display: block; transition: transform .5s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figure.cover::before { content: 'Forside'; position: absolute; left: 8px; top: 8px; z-index: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: rgba(17,25,43,.7); color: #fff; }
.drop {
  border: 2px dashed rgba(17,25,43,.18); border-radius: 16px; padding: 18px; text-align: center; color: var(--muted);
  font-size: 14px; margin-top: 8px; transition: .2s; cursor: pointer;
}
body.night .drop { border-color: rgba(255,255,255,.18); }
.drop.over, .drop:hover { border-color: var(--terra); background: rgba(200,85,61,.06); color: var(--terra); }
.drop b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.sheet-actions { display: flex; gap: 8px; justify-content: space-between; padding: 12px 18px calc(12px + var(--safe-b)); border-top: 1px solid rgba(17,25,43,.08); flex: none; }
.progress { height: 4px; border-radius: 2px; background: rgba(17,25,43,.1); overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--terra); width: 0; transition: width .3s; }

/* ---------- liste-skuffe ---------- */
.drawer {
  position: fixed; top: 16px; left: 16px; bottom: 90px; width: 340px; z-index: 880; display: flex; flex-direction: column;
  transform: translateX(-30px); opacity: 0; pointer-events: none; transition: .35s cubic-bezier(.2,.8,.2,1);
}
.drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.drawer-head { padding: 16px 16px 10px; display: grid; gap: 10px; }
.drawer-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 24px; display: flex; justify-content: space-between; align-items: center; }
.search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(17,25,43,.06); }
body.night .search { background: rgba(255,255,255,.07); }
.search input { border: 0; outline: 0; background: none; flex: 1; font-size: 14px; min-width: 0; }
.search svg { color: var(--muted); width: 18px; height: 18px; }
.drawer-list { overflow-y: auto; padding: 0 8px 10px; flex: 1; }
.drawer-list h3 { font-family: var(--serif); font-size: 15px; font-weight: 600; margin: 14px 8px 4px; color: var(--muted); }
.item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: 14px; transition: background .15s; }
.item:hover { background: rgba(17,25,43,.06); }
body.night .item:hover { background: rgba(255,255,255,.06); }
.item .th { width: 52px; height: 52px; border-radius: 12px; flex: none; background: var(--c) center/cover; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-style: italic; font-size: 20px; }
.item b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.item small { color: var(--muted); font-size: 12.5px; }
.empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.empty .big { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--text); display: block; margin-bottom: 6px; }

.popover {
  position: fixed; left: 16px; bottom: calc(80px + var(--safe-b)); z-index: 920; padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  transform: translateY(10px); opacity: 0; pointer-events: none; transition: .25s cubic-bezier(.2,.8,.2,1);
}
.popover.open { transform: none; opacity: 1; pointer-events: auto; }
.style-btn { border: 0; background: none; padding: 4px; border-radius: 14px; display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.style-btn .sw { width: 76px; height: 56px; border-radius: 10px; background: center/cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.style-btn.on .sw { box-shadow: 0 0 0 3px var(--terra); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 1750; display: grid; place-items: center; padding: 16px; background: rgba(17,25,43,.45); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: .3s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-card {
  width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--paper); border-radius: 26px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); transform: translateY(20px) scale(.97); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.modal.open .modal-card { transform: none; }
/* Pin-editoren i siden, så nålen kan ses og trækkes imens */
@media (min-width: 761px) {
  .modal.docked { justify-items: end; align-items: stretch; background: none; backdrop-filter: none; pointer-events: none; }
  .modal.docked .modal-card { pointer-events: auto; width: 440px; max-height: none; transform: translateX(40px); }
  .modal.docked.open .modal-card { transform: none; }
}
.modal-card.wide { width: min(760px, 100%); }
.m-head { padding: 24px 26px 6px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.m-head h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 30px; line-height: 1.1; }
.m-body { padding: 14px 26px 8px; display: grid; gap: 14px; }
.m-foot { padding: 14px 26px 24px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.m-foot .spacer { flex: 1; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(17,25,43,.06); }
body.night .seg { background: rgba(255,255,255,.07); }
.seg button { border: 0; background: none; border-radius: 10px; padding: 10px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--paper); color: var(--text); box-shadow: 0 2px 8px -2px rgba(17,25,43,.25); }
.tabs { display: flex; gap: 4px; padding: 0 26px; border-bottom: 1px solid rgba(17,25,43,.08); }
.tabs button { border: 0; background: none; padding: 12px 6px; margin-right: 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--text); border-color: var(--terra); }
.results { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.results button { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 10px; border-radius: 12px; }
.results button:hover { background: rgba(17,25,43,.06); }
.results img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex: none; }
.results b { display: block; font-size: 14.5px; }
.results small { color: var(--muted); font-size: 12.5px; }
.pick-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.swatches button.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c); }
.people { display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(17,25,43,.04); }
body.night .person { background: rgba(255,255,255,.05); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: var(--c); }
.person small { color: var(--muted); display: block; font-size: 12px; }
.code-out { font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: .06em; padding: 14px; text-align: center; border-radius: 14px; background: var(--ink); color: #fff; user-select: all; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.groups { display: grid; gap: 10px; }
.group { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(17,25,43,.04); align-items: center; }
.group .strip { display: flex; }
.group .strip img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; border: 2px solid var(--paper); margin-left: -14px; }
.group .strip img:first-child { margin-left: 0; }
.group input[type=text] { width: 100%; border: 0; background: none; font-weight: 600; font-size: 15px; outline: none; padding: 2px 0; border-bottom: 1px dashed rgba(17,25,43,.2); }
.group small { color: var(--muted); font-size: 12.5px; }
.group label.tick { display: flex; gap: 8px; align-items: center; }

/* ---------- lysboks ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1800; background: rgba(8, 11, 20, .96); display: none; touch-action: none; }
.lightbox.open { display: block; animation: fade-in .25s both; }
.lb-stage { position: absolute; inset: 60px 0 90px; display: grid; place-items: center; }
.lb-stage img { max-width: calc(100vw - 32px); max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: lb-in .35s cubic-bezier(.2,.8,.2,1) both; }
.lb-top { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; }
.lb-top .icon-btn, .lb-nav { background: rgba(255,255,255,.1); color: #fff; }
.lb-top .icon-btn:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-count { font-size: 13px; opacity: .7; font-variant-numeric: tabular-nums; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; padding: 0 16px calc(var(--safe-b)); }
.lb-cap input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 10px; padding: 9px 12px; width: min(420px, 60vw); outline: none; }
.lb-cap p { font-family: var(--serif); font-style: italic; font-size: 18px; margin: 0; text-align: center; }
.lb-cap .btn { background: rgba(255,255,255,.1); color: #fff; padding: 9px 14px; font-size: 13px; }

/* ---------- biograf-tilstand ---------- */
.cinema { position: fixed; inset: 0; z-index: 1700; pointer-events: none; display: none; }
body.playing .cinema { display: block; }
.cinema::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 0% 100%, rgba(8,11,20,.72), transparent 70%); opacity: 0; transition: opacity 1s; }
body.playing .cinema:has(.reel.show)::before { opacity: 1; }
.cine-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 4px #fff, 0 0 30px 8px rgba(200,85,61,.7); position: relative; }
.cine-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid #fff; animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
body.playing .topbar, body.playing .side, body.playing .memory, body.playing .brand, body.playing .dock, body.playing .timeline, body.playing .fab-wrap, body.playing .sheet, body.playing .drawer, body.playing .leaflet-marker-pane, body.playing .leaflet-control-container { opacity: 0; pointer-events: none; transition: opacity .6s; }
.bar { position: absolute; left: 0; right: 0; height: 0; background: #05070d; transition: height .9s cubic-bezier(.6,0,.2,1); }
.bar.top { top: 0; } .bar.bot { bottom: 0; }
body.playing .bar { height: 9vh; }
.reel {
  position: absolute; left: 6vw; bottom: calc(9vh + 32px); width: min(480px, 88vw); pointer-events: auto; color: #fff;
  opacity: 0; transform: translateY(20px); transition: .7s cubic-bezier(.2,.8,.2,1);
}
.reel.show { opacity: 1; transform: none; }
.reel-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -20px rgba(0,0,0,.8); border: 6px solid #fff; }
.reel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.reel-photo img.on { opacity: 1; animation: kenburns 7s ease-out both; }
.reel-photo .noimg { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--c, var(--terra)), var(--ink)); font-family: var(--serif); font-style: italic; font-size: 80px; color: rgba(255,255,255,.8); }
.reel-text { margin-top: 16px; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.reel-text .eyebrow { color: rgba(255,255,255,.85); display: flex; gap: 8px; align-items: center; }
.reel-text .eyebrow img { width: 20px; height: 14px; border-radius: 2px; }
.reel-text h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(34px, 5vw, 54px); line-height: 1; margin: 8px 0 0; }
.reel-text p { font-family: var(--serif); font-size: 16px; opacity: .85; margin: 10px 0 0; line-height: 1.5; max-width: 440px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reel-ctl { position: absolute; right: 4vw; bottom: calc(9vh + 32px); display: flex; gap: 8px; pointer-events: auto; }
.reel-ctl .icon-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px); }
.reel-ctl .icon-btn:hover { background: rgba(255,255,255,.28); }
.reel-prog { position: absolute; left: 0; right: 0; top: 9vh; height: 3px; background: rgba(255,255,255,.12); }
.reel-prog i { display: block; height: 100%; background: var(--terra-2); width: 0; transition: width .6s; }
.reel-title { position: absolute; left: 0; right: 0; top: calc(9vh + 26px); text-align: center; color: #fff; font-family: var(--serif); font-style: italic; font-size: 22px; text-shadow: 0 2px 16px rgba(0,0,0,.7); opacity: .9; }
.reel-intro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; pointer-events: none; opacity: 0; transition: opacity 1s; }
.reel-intro.show { opacity: 1; }
.reel-intro h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(44px, 9vw, 96px); margin: 0; line-height: 1; text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.reel-intro p { letter-spacing: .3em; text-transform: uppercase; font-size: 12px; margin: 16px 0 0; opacity: .85; }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); animation: toast 3.4s both; }
.toast.err { background: #8e2a1d; }

/* ---------- animationer ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes spin-in { from { transform: rotate(-200deg) scale(.6); opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-30px); } }
@keyframes slide-in-r { from { opacity: 0; transform: translateX(30px); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(30px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes drop { from { transform: translateY(-60px); opacity: 0; } 60% { opacity: 1; } }
@keyframes flow { to { stroke-dashoffset: -22; } }
@keyframes kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- om stedet ---------- */
.credit-tag { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.85); background: rgba(17,25,43,.45); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(6px); }
.sheet-hero .credit-tag { top: 16px; bottom: auto; right: 64px; }
.reel-photo .credit-tag { bottom: 10px; right: 10px; }
.about { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(17,25,43,.1); }
body.night .about { border-color: rgba(255,255,255,.1); }
.about h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 24px; margin: 0 0 12px; }
.about h4 { margin: 18px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.about-now { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(42,127,143,.12), rgba(217,164,65,.12)); margin-bottom: 14px; }
.about-now:empty { display: none; }
.now-big { font-family: var(--serif); font-size: 30px; line-height: 1; white-space: nowrap; }
.about-now b { display: block; font-size: 14px; }
.about-now small { color: var(--muted); font-size: 12.5px; }
.about-fact { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); }
.about-ex { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.about-link { font-size: 13px; font-weight: 600; color: var(--terra); text-decoration: none; }
.about-link:hover { text-decoration: underline; }
.commons { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -22px; padding-left: 22px; padding-right: 22px; scrollbar-width: thin; }
.commons img { height: 120px; width: auto; min-width: 120px; max-width: 220px; object-fit: cover; border-radius: 12px; flex: none; scroll-snap-align: start; cursor: zoom-in; background: var(--paper-2); transition: transform .3s; }
.commons img:hover { transform: scale(1.03); }
.credit { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.pin.wish-photo { width: 54px; height: 62px; }
.pin.wish-photo .pin-face { width: 54px; height: 54px; border-style: solid; border-color: #fff; background: var(--c, var(--gold)); box-shadow: 0 0 0 2.5px var(--c, var(--gold)), 0 10px 22px -6px rgba(17,25,43,.6); }
.pin.wish-photo::after { background: #fff; box-shadow: 2px 2px 0 0 var(--c, var(--gold)); }
.pin .wish-star { position: absolute; right: -5px; top: -5px; z-index: 2; width: 22px; height: 22px; fill: #d9a441; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* ---------- på denne dag ---------- */
.memory {
  position: fixed; right: 16px; top: 290px; z-index: 930; display: flex; gap: 12px; align-items: center; width: 330px; padding: 10px 12px 10px 10px;
  text-align: left; border: 1px solid var(--glass-line); opacity: 0; transform: translateX(30px); transition: .6s cubic-bezier(.2,.8,.2,1); cursor: pointer;
}
.memory.show { opacity: 1; transform: none; }
.memory-img { width: 64px; height: 64px; border-radius: 14px; background: center/cover; flex: none; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.memory small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); font-weight: 700; }
.memory b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.15; }
.memory em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.memory-x { position: absolute; top: 6px; right: 10px; font-style: normal; color: var(--muted); font-size: 12px; padding: 4px; }

/* ---------- menu ---------- */
.menu-list { display: grid; gap: 6px; }
.menu-list button { display: flex; gap: 14px; align-items: center; text-align: left; border: 0; padding: 12px; border-radius: 16px; background: rgba(17,25,43,.04); }
body.night .menu-list button { background: rgba(255,255,255,.05); }
.menu-list button:hover { background: rgba(17,25,43,.08); }
.menu-list b { display: block; font-size: 15px; }
.menu-list small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(200,85,61,.12); color: var(--terra); flex: none; }
.mi-dark { background: var(--ink); color: #fff; }
.lock-hero { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.lock-hero svg { width: 28px; height: 28px; }
.modal-card.shake { animation: shake .45s; }
.invite-msg { width: 100%; min-height: 92px; border-radius: 12px; border: 1px solid rgba(17,25,43,.14); padding: 12px; font-size: 14px; line-height: 1.5; background: rgba(255,255,255,.6); resize: none; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row a.btn { text-decoration: none; color: inherit; }

/* ---------- admin-panel ---------- */
.cp {
  position: fixed; inset: 0; z-index: 1600; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--paper);
  opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.cp.open { opacity: 1; transform: none; pointer-events: auto; }
body.cp-open .brand, body.cp-open .dock, body.cp-open .timeline, body.cp-open .fab-wrap, body.cp-open .memory { visibility: hidden; }
.cp-nav { background: var(--ink); color: #eef0f5; display: flex; flex-direction: column; padding: 26px 16px 18px; gap: 18px; }
.cp-brand .eyebrow { color: rgba(255,255,255,.55); }
.cp-brand h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 26px; line-height: 1.1; margin: 6px 0 0; }
.cp-nav nav { display: grid; gap: 2px; }
.cp-nav nav button { display: flex; gap: 12px; align-items: center; border: 0; background: none; color: rgba(238,240,245,.75); padding: 11px 12px; border-radius: 12px; font-weight: 600; font-size: 14.5px; text-align: left; }
.cp-nav nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.cp-nav nav button.on { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 var(--terra-2); }
.cp-foot { margin-top: auto; display: grid; gap: 8px; }
.cp-foot .btn { justify-content: flex-start; }
.cp-foot .btn:not(.btn-primary) { background: rgba(255,255,255,.08); color: #fff; }
.cp-timer { font-size: 12px; color: rgba(255,255,255,.55); padding: 0 4px 4px; }
.cp-main { overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 34px clamp(18px, 4vw, 56px) 60px; }
.cp-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); margin: 0 0 6px; letter-spacing: -.01em; }
.cp-lead { color: var(--muted); font-size: 15px; margin: 0 0 22px; max-width: 640px; line-height: 1.5; }
.cp-h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 22px; margin: 28px 0 12px; }
.cp-box .cp-h3 { margin-top: 0; }
.cp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cp-stat { padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(17,25,43,.06), 0 8px 24px -16px rgba(17,25,43,.4); }
body.night .cp-stat { background: var(--paper-2); }
.cp-stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-stat span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cp-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
.cp-qbtn { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid rgba(17,25,43,.1); background: rgba(255,255,255,.55); text-decoration: none; color: inherit; transition: .2s; }
.cp-qbtn:hover { border-color: var(--terra); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(200,85,61,.7); }
.cp-qbtn svg { color: var(--terra); width: 24px; height: 24px; margin-bottom: 6px; }
.cp-qbtn b { font-size: 15px; }
.cp-qbtn small { color: var(--muted); font-size: 12.5px; }
.cp-feed { display: grid; gap: 2px; max-width: 720px; }
.cp-row { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 10px; border-radius: 14px; font-size: 14.5px; }
.cp-row:hover { background: rgba(17,25,43,.05); }
.cp-row small { display: block; color: var(--muted); font-size: 12px; }
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cp-card { padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(17,25,43,.06), 0 10px 30px -20px rgba(17,25,43,.5); display: grid; gap: 14px; align-content: start; }
body.night .cp-card { background: var(--paper-2); }
.cp-card-top { display: flex; gap: 12px; align-items: center; }
.cp-card-top b { font-size: 17px; }
.cp-card-top small { display: block; color: var(--muted); font-size: 12.5px; }
.avatar.big { width: 46px; height: 46px; font-size: 18px; }
.you { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--terra); background: rgba(200,85,61,.12); padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg button[disabled] { opacity: .35; cursor: not-allowed; }
.cp-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-card-actions .btn { padding: 8px 12px; font-size: 13px; }
.cp-invite { border: 2px dashed rgba(200,85,61,.35); background: rgba(200,85,61,.04); box-shadow: none; }
.cp-invite-title { display: flex; gap: 8px; align-items: center; font-size: 16px; color: var(--terra); }
.cp-search { max-width: 520px; margin-bottom: 14px; background: #fff; box-shadow: 0 1px 0 rgba(17,25,43,.06); }
.cp-table { display: grid; gap: 6px; }
.cp-trow { display: grid; grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(17,25,43,.05); }
body.night .cp-trow { background: var(--paper-2); }
.cp-trow .th { width: 52px; height: 52px; border-radius: 12px; background: var(--c) center/cover; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-style: italic; font-size: 20px; }
.cp-tmain b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-tmain small, .cp-tmeta { color: var(--muted); font-size: 12.5px; }
.cp-tmeta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cp-tmeta i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-left: 6px; }
.cp-tmeta em { font-style: normal; opacity: .7; }
.cp-tact { display: flex; gap: 6px; }
.cp-tact .btn { padding: 8px 12px; font-size: 13px; }
.cp-trip { grid-template-columns: 40px minmax(0, 1fr) auto; }
.cp-trip .cp-tmain { display: grid; gap: 8px; }
.cp-inline { border: 0; border-bottom: 1px dashed rgba(17,25,43,.25); background: none; font-size: 15px; font-weight: 600; padding: 4px 0; outline: none; max-width: 360px; }
.cp-inline:focus { border-bottom-color: var(--terra); }
.cp-trip .swatches button { width: 20px; height: 20px; }
.cp-newtrip { display: flex; gap: 8px; margin-top: 14px; max-width: 560px; }
.cp-newtrip input { flex: 1; border: 1px solid rgba(17,25,43,.14); border-radius: 999px; padding: 10px 16px; font-size: 14px; outline: none; background: #fff; }
.cp-form { display: grid; gap: 14px; max-width: 760px; }
.cp-box { padding: 20px; border-radius: 20px; background: #fff; display: grid; gap: 12px; box-shadow: 0 1px 0 rgba(17,25,43,.06), 0 10px 30px -22px rgba(17,25,43,.5); }
body.night .cp-box { background: var(--paper-2); }
.cp-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.switch { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; padding-top: 6px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .sl { width: 46px; height: 28px; border-radius: 14px; background: rgba(17,25,43,.2); position: relative; flex: none; transition: .25s; margin-top: 2px; }
.switch .sl::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: .25s cubic-bezier(.2,1.4,.4,1); }
.switch input:checked + .sl { background: var(--sea); }
.switch input:checked + .sl::after { transform: translateX(18px); }
.switch input:focus-visible + .sl { box-shadow: 0 0 0 4px rgba(42,127,143,.25); }
.switch b { display: block; font-size: 15px; }
.switch small { color: var(--muted); font-size: 13px; line-height: 1.45; }

@media (max-width: 860px) {
  .cp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .cp-brand h2 { display: none; }
  .cp-main > * { max-width: 100%; }
  .cp-nav { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px; gap: 10px; }
  .cp-brand { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .cp-brand h2 { font-size: 20px; margin: 0; }
  .cp-nav nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 -12px; padding: 0 12px; }
  .cp-nav nav::-webkit-scrollbar { display: none; }
  .cp-nav nav button { white-space: nowrap; padding: 9px 12px; }
  .cp-nav nav button.on { box-shadow: inset 0 -3px 0 var(--terra-2); }
  .cp-foot { position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 2; grid-template-columns: 1fr 1fr; align-items: center; background: var(--ink); padding: 8px; border-radius: 18px; box-shadow: var(--shadow); }
  .cp-timer { display: none; }
  .cp-foot .btn { justify-content: center; }
  .cp-main { padding: 22px 16px 110px; }
  .cp-trow { grid-template-columns: 48px minmax(0, 1fr); }
  .cp-trow .th { width: 48px; height: 48px; }
  .cp-tmeta { grid-column: 2; }
  .cp-tact { grid-column: 1 / -1; justify-content: flex-end; }
  .cp-trip { grid-template-columns: 40px minmax(0, 1fr); }
  .memory { left: 10px; right: 10px; width: auto; top: auto; bottom: calc(140px + var(--safe-b)); }
}

/* ---------- mobil / tablet ---------- */
@media (max-width: 1100px) {
  .timeline { left: 16px; right: 16px; transform: none; max-width: none; bottom: calc(84px + var(--safe-b)); }
}
@media (max-width: 760px) {
  .brand { top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; width: auto; padding: 12px 14px 10px; }
  .brand-title { font-size: 24px; }
  .brand .eyebrow { font-size: 10px; }
  .stats { margin-top: 10px; }
  .stat { padding: 5px 2px 4px; }
  .stat b { font-size: 18px; }
  .stat span { font-size: 9px; }
  /* Landeknapperne er genveje: én vandret række man kan swipe i */
  .flags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -14px 0; padding: 0 14px 2px; }
  .flags::-webkit-scrollbar { display: none; }
  .dock { left: 10px; bottom: calc(10px + var(--safe-b)); }
  .dock-btn { padding: 10px 12px; }
  .dock-btn span { display: none; }
  .dock-btn[data-act="play"] span { display: inline; }
  .timeline { left: 10px; right: 10px; bottom: calc(76px + var(--safe-b)); }
  .fab-wrap { right: 10px; bottom: calc(10px + var(--safe-b)); }
  .fab { padding: 15px; }
  .fab span { display: none; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 86dvh; border-radius: 26px 26px 0 0; transform: translateY(105%); }
  .sheet-hero { height: 220px; }
  .drawer { left: 10px; right: 10px; top: auto; bottom: calc(130px + var(--safe-b)); width: auto; height: 58dvh; transform: translateY(30px); }
  .popover { left: 10px; bottom: calc(72px + var(--safe-b)); grid-template-columns: repeat(3, 1fr); }
  .m-head, .m-body, .m-foot { padding-left: 18px; padding-right: 18px; }
  .tabs { padding: 0 18px; }
  .row2 { grid-template-columns: 1fr; }
  .lb-nav { display: none; }
  .reel { left: 5vw; bottom: calc(9vh + 90px); }
  .reel-ctl { right: 50%; transform: translateX(50%); bottom: calc(9vh + 20px); }
  .gallery { columns: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Computer: alle kort samlet i én kolonne i højre side ---------- */
.side { display: contents; } /* mobil: kortene ligger som før */
@media (min-width: 761px) {
  :root { --col: 380px; }
  .side {
    display: flex; flex-direction: column; gap: 10px; position: fixed; top: 16px; right: 16px; bottom: 16px;
    width: var(--col); z-index: 900; pointer-events: none;
  }
  .side > * { pointer-events: auto; }
  .side .brand { position: relative; top: auto; right: auto; left: auto; width: auto; flex: none; }
  .side .memory { position: relative; top: auto; right: auto; left: auto; width: auto; flex: none; }
  .side .drawer { position: relative; inset: auto; width: auto; flex: 1 1 auto; min-height: 0; transform: none; }
  .side .drawer:not(.open) { display: none; }
  .sheet { width: calc(var(--col) + 40px); }
  body.cp-open .side { visibility: hidden; }
}

/* ---------- Status: hvem er jeg, og er admin åben eller låst? ---------- */
.who { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(17,25,43,.08); flex-wrap: wrap; }
body.night .who { border-color: rgba(255,255,255,.1); }
.who:empty { display: none; }
.who-me { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.who-me .avatar { width: 26px; height: 26px; font-size: 12px; }
.who-me small { color: var(--muted); }
.lockpill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 11px 6px 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: transform .15s, background .2s; }
.lockpill svg { width: 15px; height: 15px; stroke-width: 2.2; }
.lockpill:hover { transform: translateY(-1px); }
.lockpill.locked { background: rgba(17,25,43,.07); color: var(--muted); }
body.night .lockpill.locked { background: rgba(255,255,255,.08); }
.lockpill.open { background: var(--terra); color: #fff; box-shadow: 0 0 0 0 rgba(200,85,61,.6); animation: lockpulse 2.4s ease-out infinite; }
.lock-now { border: 0; background: none; color: var(--terra); font-size: 12.5px; font-weight: 700; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }
.who > .lockpill { margin-left: auto; }
@keyframes lockpulse { 0% { box-shadow: 0 0 0 0 rgba(200,85,61,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(200,85,61,0); } }
/* Når admin er åben: tydelig ramme om hele skærmen */
body.sudo-on::after { content: ''; position: fixed; inset: 0; border: 4px solid var(--terra); pointer-events: none; z-index: 2500; box-shadow: inset 0 0 40px rgba(200,85,61,.25); }
body.sudo-on .brand { box-shadow: 0 0 0 2px var(--terra), var(--shadow); }
@media (max-width: 760px) {
  .who { margin-top: 8px; padding-top: 8px; }
  .who-me small { display: none; }
}

/* ---------- Topbar: årstal, handlinger, status og Indsæt pin ---------- */
.topbar { display: contents; } /* mobil: børnene ligger fast placeret som før */
.tb-right { display: contents; }
@media (max-width: 760px) {
  #menuBtn { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 905; }
  .who { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 66px; z-index: 905; margin: 0; padding: 0; border: 0; }
  .who-me, .lock-now { display: none; }
  .brand-row { padding-right: 150px; }
}
@media (min-width: 761px) {
  .topbar {
    position: fixed; top: 12px; left: 12px; right: 12px; height: 60px; z-index: 950; isolation: isolate;
    display: flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; border-radius: 18px;
    animation: slide-up-top .7s .15s cubic-bezier(.2,.8,.2,1) both;
  }
  .topbar::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  }
  .topbar .timeline {
    position: static; transform: none; animation: none; max-width: none; flex: 0 1 auto; min-width: 0;
    background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .topbar .timeline:empty { display: none; }
  .topbar .dock {
    position: static; animation: none; padding: 0 0 0 8px; margin-left: 4px; background: none; border: 0; border-left: 1px solid rgba(17,25,43,.1);
    border-radius: 0; box-shadow: none; flex: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.night .topbar .dock { border-color: rgba(255,255,255,.12); }
  .topbar .dock-btn { padding: 9px 12px; }
  .tb-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
  .topbar .who { margin: 0; padding: 0; border: 0; flex-wrap: nowrap; }
  .topbar .fab-wrap { position: relative; right: auto; bottom: auto; display: block; }
  .topbar .fab { padding: 10px 18px 10px 14px; font-size: 14px; box-shadow: 0 10px 22px -10px rgba(200,85,61,.9); }
  .topbar .fab svg { width: 18px; height: 18px; }
  .topbar .fab-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 300px; transform-origin: top right; transform: scale(.9) translateY(-8px); }
  .topbar .fab-wrap.open .fab-menu { transform: none; }
  .side { top: 84px; }
  .sheet { top: 84px; }
  .placing-hint { top: 84px; }
  .toasts { top: 84px; }
  .popover { top: 80px; bottom: auto; }
  body.cp-open .topbar { visibility: hidden; }
}
/* Smallere skærme: kun ikoner på knapperne, så alt kan være i topbaren */
@media (min-width: 761px) and (max-width: 1380px) {
  .topbar .dock-btn span { display: none; }
  .topbar .dock-btn[data-act="play"] span { display: inline; }
  .topbar .who-me small { display: none; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .topbar .who-me { display: none; }
  .topbar .dock-btn[data-act="play"] span { display: none; }
}
@keyframes slide-up-top { from { opacity: 0; transform: translateY(-16px); } }

/* ---------- Admin-panel: topbar og centreret indhold (afløser sidebjælken) ---------- */
.cp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.cp-nav { flex-direction: row; align-items: center; gap: 18px; padding: 12px 20px; }
.cp-brand { flex: none; display: flex; align-items: baseline; gap: 10px; }
.cp-brand h2 { font-size: 22px; margin: 0; white-space: nowrap; }
.cp-nav nav { display: flex; gap: 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.cp-nav nav::-webkit-scrollbar { display: none; }
.cp-nav nav button { white-space: nowrap; padding: 9px 14px; }
.cp-nav nav button.on { box-shadow: inset 0 -3px 0 var(--terra-2); }
.cp-foot { margin-top: 0; display: flex; align-items: center; gap: 8px; flex: none; position: static; background: none; padding: 0; box-shadow: none; }
.cp-timer { padding: 0 6px 0 0; white-space: nowrap; }
.cp-main { padding: 40px 24px 70px; }
.cp-main > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.cp-head { text-align: center; }
.cp-head h1 { margin-bottom: 4px; }
.cp-lead { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.cp-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cp-quick { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cp-feed { max-width: 760px; }
.cp-form { max-width: 760px; }
.cp-search { max-width: 560px; }
.cp-newtrip { max-width: 560px; }
.cp-h3 { max-width: 1080px; }
@media (max-width: 1100px) { .cp-timer { display: none; } .cp-brand .eyebrow { display: none; } }
@media (max-width: 860px) {
  .cp-nav { flex-wrap: wrap; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; }
  .cp-brand { order: 1; }
  .cp-nav nav { order: 3; width: 100%; margin: 0 -12px; padding: 0 12px; }
  .cp-foot { order: 2; margin-left: auto; position: static; left: auto; right: auto; bottom: auto; grid-template-columns: none; }
  .cp-foot .btn { padding: 8px 12px; font-size: 13px; }
  .cp-main { padding: 22px 16px 60px; }
}

/* ---------- Steder-listen: kan klappes sammen til én linje ---------- */
.fold { border: 0; background: none; padding: 0; font: inherit; display: inline-flex; align-items: center; gap: 8px; color: inherit; cursor: pointer; }
.fold small { font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(17,25,43,.07); border-radius: 10px; padding: 2px 8px; }
.fold svg { width: 18px; height: 18px; color: var(--muted); transition: transform .25s; }
.drawer.folded .fold svg { transform: rotate(-90deg); }
.drawer.folded .search, .drawer.folded .drawer-list { display: none; }
.drawer.folded .drawer-head { padding-bottom: 14px; }
.side .drawer.folded { flex: none; }

/* ---------- Søgefelt i topbaren ---------- */
.tb-search { display: none; }
@media (min-width: 761px) {
  .tb-search {
    position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 300px; min-width: 170px; height: 40px;
    padding: 0 10px 0 12px; border-radius: 12px; background: rgba(17,25,43,.06); transition: background .2s, box-shadow .2s, flex-basis .3s;
  }
  body.night .tb-search { background: rgba(255,255,255,.08); }
  .tb-search:focus-within { background: var(--paper); box-shadow: 0 0 0 2px var(--terra); flex-basis: 380px; }
  .tb-search > svg { width: 18px; height: 18px; color: var(--muted); }
  .tb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; }
  .tb-search kbd { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid rgba(17,25,43,.18); border-radius: 6px; padding: 1px 6px; }
  .tb-search:focus-within kbd { display: none; }
  .tb-results {
    position: absolute; top: calc(100% + 10px); left: 0; width: max(100%, 380px); max-height: min(70vh, 520px); overflow-y: auto;
    padding: 6px; border-radius: 18px; background: var(--paper); box-shadow: 0 30px 70px -20px rgba(17,25,43,.55), 0 0 0 1px rgba(17,25,43,.06);
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: .18s;
  }
  .tb-search.open .tb-results { opacity: 1; transform: none; pointer-events: auto; }
  .tb-label { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .tb-hit { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 12px; }
  .tb-hit.on, .tb-hit:hover { background: rgba(200,85,61,.1); }
  .tb-hit b { display: block; font-size: 14.5px; }
  .tb-hit small { color: var(--muted); font-size: 12.5px; }
  .tb-th { width: 42px; height: 42px; border-radius: 10px; flex: none; background: var(--c, var(--terra)) center/cover; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-style: italic; font-size: 18px; }
  .tb-flag { background: rgba(17,25,43,.06); }
  .tb-flag img { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; }
}
@media (min-width: 761px) and (max-width: 1180px) { .tb-search { flex-basis: 200px; min-width: 140px; } .tb-search kbd { display: none; } }
/* Hele "Steder"-linjen kan klikkes, pilen sidder yderst til højre */
.drawer-head h2 { gap: 8px; }
.fold { flex: 1; min-width: 0; justify-content: flex-start; padding: 6px 0; margin: -6px 0; border-radius: 10px; }
.fold svg { margin-left: auto; width: 20px; height: 20px; }
.drawer-head:has(.fold):hover .fold svg { color: var(--terra); }
.drawer.folded .drawer-head { cursor: pointer; }

/* Låst: "Indsæt pin" er dæmpet med hængelås; et tryk beder om koden */
.fab .fab-lock { display: none; }
body.locked .fab { background: rgba(17,25,43,.72); box-shadow: none; }
body.locked .fab:hover { background: rgba(17,25,43,.88); }
body.locked .fab .fab-plus { display: none; }
body.locked .fab .fab-lock { display: block; }

/* Den skjulte "Klik på kortet"-bjælke må ikke fange klik (den lå over topbarens knapper) */
.placing-hint { pointer-events: none; visibility: hidden; }
body.placing .placing-hint { pointer-events: auto; visibility: visible; }
/* Kortstil-vælgeren: kun fade/skub, ikke glide hen over skærmen */
.popover { transition: opacity .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1); }

/* Fotostriben i "Om stedet" holder sig inden for arkets margen */
.commons { margin: 0; padding: 2px 0 10px; scrollbar-width: thin; scrollbar-color: rgba(17,25,43,.25) transparent; }
.commons::-webkit-scrollbar { height: 6px; }
.commons::-webkit-scrollbar-thumb { background: rgba(17,25,43,.22); border-radius: 3px; }
.commons::-webkit-scrollbar-track { background: transparent; }
.commons img { border-radius: 14px; }
/* "km til New York": navnet afkortes pænt, og feltet kan trykkes */
.stat span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.stat.click { cursor: pointer; transition: background .15s; }
.stat.click:hover { background: rgba(200,85,61,.12); }

/* Steder / Drømmesteder: to faner i samme kort */
.drawer-head h2 { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.ltab { flex: none; color: var(--muted); font-size: 20px; }
.ltab.on { color: var(--text); font-size: 24px; }
.drawer.folded .ltab { color: var(--text); font-size: 22px; }
.drawer.folded .ltab + .ltab { color: var(--muted); }
.ltab .ltab-star { margin-left: 0; width: 15px; height: 15px; fill: var(--gold); stroke: var(--gold); transform: none !important; }
.ltab:hover { color: var(--terra); }
.fold-chev { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.fold-chev svg { width: 20px; height: 20px; color: var(--muted); transition: transform .25s; }
.drawer-head h2:hover .fold-chev svg { color: var(--terra); }
.drawer.folded .fold-chev svg { transform: rotate(-90deg); }
.drawer.folded .drawer-head .chip { display: none; }
.drawer-head > .chip { justify-self: start; }

/* ---------- Små animationer (kun ved handling eller én gang ved åbning) ---------- */
/* Nålene drysser ned */
.sprinkle { animation: sprinkle .75s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes sprinkle { from { opacity: 0; transform: translateY(-38px) scale(.6); } 60% { opacity: 1; } }
/* Forhåndsvisning ved hover */
.leaflet-tooltip.pin-tip {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 14px;
  background: var(--paper); color: var(--text); font-family: var(--sans); white-space: nowrap;
  box-shadow: 0 16px 34px -12px rgba(17,25,43,.55), 0 0 0 1px rgba(17,25,43,.06);
  animation: tip-in .22s cubic-bezier(.2,1.2,.4,1) both;
}
.leaflet-tooltip.pin-tip::before { border-top-color: var(--paper); }
.pin-tip .tip-img { width: 46px; height: 46px; border-radius: 10px; background: center/cover; flex: none; }
.pin-tip .tip-txt { display: grid; padding: 4px 0 4px 6px; }
.pin-tip b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.15; }
.pin-tip small { color: var(--muted); font-size: 12px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(6px) scale(.94); } }
/* Ring-bølge når et sted åbnes */
.ripple { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--c, var(--terra)); animation: ripple 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes ripple { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(6); opacity: 0; } }
/* Hjemmet trækker vejret */
.home-pin { position: relative; }
.home-pin::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; border: 2px solid var(--ink); opacity: 0; animation: breathe 4.5s ease-out infinite; }
body.night .home-pin::after { border-color: #fff; }
@keyframes breathe { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

/* Låst: "Indsæt pin" er helt væk (lås op med "Låst"-knappen i topbaren) */
body.locked .fab-wrap { display: none !important; }
/* Menuen under "Indsæt pin" er helt ugennemsigtig, så den ikke blander sig med kortene bagved */
.fab-menu { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 24px 60px -18px rgba(17,25,43,.55), 0 0 0 1px rgba(17,25,43,.06); }
/* Åben: hold musen over knappen, så står der "Lås nu" */
.lockpill .lp-hover { display: none; }
.lockpill.open:hover .lp-txt { display: none; }
.lockpill.open:hover .lp-hover { display: inline; }
.lockpill.open:hover { animation: none; background: var(--ink); }

/* ---------- Hover på en nål: et blødt lys toner ind over cirklen (nålen bliver hvor den er) ---------- */
.pin-shadow, .pin-halo { display: none; }
.pin-face::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 75%);
  transition: opacity .35s ease;
}
.pin:hover .pin-face { transform: none; }
.pin:hover .pin-face::after { opacity: 1; }

/* Forhåndskortet: boksen står stille (Leaflet placerer den), kun indholdet glider op */
.leaflet-tooltip.pin-tip { background: none; border: 0; box-shadow: none; padding: 0; animation: none; }
.leaflet-tooltip.pin-tip::before { display: none; }
.tip-card {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px;
  background: var(--paper); color: var(--text); white-space: nowrap;
  box-shadow: 0 16px 34px -12px rgba(17,25,43,.55), 0 0 0 1px rgba(17,25,43,.06);
  animation: tip-up .32s .08s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes tip-up { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Fanerne som tydelige knapper: valgt = mørk, den anden = lys */
.drawer-head h2 { gap: 8px; }
.ltab, .ltab.on, .drawer.folded .ltab, .drawer.folded .ltab + .ltab {
  font-size: 17px; padding: 8px 14px; margin: 0; border-radius: 12px; gap: 7px;
  background: rgba(17,25,43,.06); color: var(--text); transition: background .2s, color .2s;
}
body.night .ltab { background: rgba(255,255,255,.08); }
.ltab:hover { background: rgba(200,85,61,.12); color: var(--text); }
.drawer:not(.folded) .ltab.on { background: var(--ink); color: #fff; box-shadow: 0 6px 14px -8px rgba(17,25,43,.7); }
body.night .drawer:not(.folded) .ltab.on { background: #fff; color: var(--ink); }
.ltab small { background: rgba(17,25,43,.1); color: inherit; opacity: .8; }
.drawer:not(.folded) .ltab.on small { background: rgba(255,255,255,.2); }

/* Lås-knappen holder samme bredde ved hover ("Lås nu" ligger oven i den lange tekst), så intet flimrer */
.lockpill { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; }
.lockpill .lp-txt, .lockpill .lp-hover { grid-area: 1 / 2; display: block; text-align: center; }
.lockpill .lp-hover { visibility: hidden; }
.lockpill.open:hover .lp-txt { display: block; visibility: hidden; }
.lockpill.open:hover .lp-hover { display: block; visibility: visible; }

/* ---------- Mørk tilstand ---------- */
/* Lys/mørk-knappen i topbaren (kun computer; på mobil ligger den i menuen) */
#themeBtn { display: none; }
#themeBtn .i-sun { display: none; }
body.dark #themeBtn .i-sun { display: block; }
body.dark #themeBtn .i-moon { display: none; }
@media (min-width: 761px) { #themeBtn { display: grid; } }

body.night {
  --paper: #151d2f;
  --paper-2: #1e2842;
  --glass: rgba(17, 23, 39, .82);
  --glass-line: rgba(255, 255, 255, .08);
  --text: #edf0f6;
  --muted: #98a2b8;
  --shadow: 0 22px 60px -20px rgba(0, 0, 0, .75), 0 4px 14px -6px rgba(0, 0, 0, .5);
}
body.dark { background: #0b111d; }
body.dark #map { background: #0e1626; }
/* Det klassiske OSM-kort i nat-farver: farverne vendes og dæmpes, nålenes fotos rører vi ikke */
body.dark-tiles .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
body.dark .vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .45) 100%); }
body.dark .leaflet-control-attribution { background: rgba(15, 20, 34, .7) !important; color: #98a2b8; }
body.dark .leaflet-control-attribution a { color: #c9d1e3; }

/* Flader der var hvide */
body.night .cp-search, body.night .cp-newtrip input, body.night .cp-qbtn { background: var(--paper-2); color: var(--text); border-color: rgba(255,255,255,.08); }
body.night .invite-msg { background: var(--paper-2); color: var(--text); border-color: rgba(255,255,255,.1); }
body.night .tb-search { background: rgba(255,255,255,.07); }
body.night .tb-search kbd { border-color: rgba(255,255,255,.2); }
body.night .tb-results, body.night .tip-card { box-shadow: 0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
body.night .tb-flag, body.night .ltab small, body.night .fold small { background: rgba(255,255,255,.1); }
body.night .flag:hover, body.night .ltab:hover { background: rgba(224,122,95,.18); }
body.night .flag i { background: rgba(255,255,255,.1); }
body.night .toast { background: #26324f; }
body.night .sheet-actions { border-color: rgba(255,255,255,.08); }
body.night .lockpill.open:hover { background: #fff; color: var(--ink); }
body.night .home-pin { background: #edf0f6; color: var(--ink); box-shadow: 0 0 0 3px #0b111d, 0 8px 18px -6px rgba(0,0,0,.8); }
body.night .pin-face { border-color: #edf0f6; }
body.night .pin::after { background: #edf0f6; }
body.night .stack .card { border-color: #edf0f6; }
body.night .stack b { box-shadow: 0 0 0 2.5px #0b111d; }
body.night .modal { background: rgba(0,0,0,.55); }
body.night .cp-nav { background: #0b111d; }
body.night .chip i, body.night .avatar { box-shadow: 0 0 0 1px rgba(255,255,255,.1); }

/* Låseskærmen i mørk */
body.dark .gate { background: radial-gradient(ellipse at 50% 35%, rgba(5,8,15,.4), rgba(5,8,15,.88)); }
body.dark .gate-card { background: rgba(21, 29, 47, .95); color: #edf0f6; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
body.dark .gate-card .fld { color: #98a2b8; }
body.dark .gate-sub { color: #98a2b8; }
body.dark .compass { color: #edf0f6; }
body.dark .demo-note { background: rgba(42,127,143,.18); color: #9fd3dc; }

/* Lås-knappen: åben → lille menu med Administration og Lås nu */
.lockwrap { position: relative; display: inline-flex; }
.lockpill { grid-template-columns: auto auto auto; }
.lp-chev { width: 14px !important; height: 14px !important; transition: transform .2s; }
.lockwrap.open .lp-chev { transform: rotate(180deg); }
.lockpill.open:hover { background: #b6492f; }
body.night .lockpill.open:hover { background: #b6492f; color: #fff; }
.lockmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 270px; padding: 6px; border-radius: 16px; display: grid; gap: 2px;
  background: var(--paper); box-shadow: 0 24px 60px -18px rgba(17,25,43,.55), 0 0 0 1px rgba(17,25,43,.06);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none; transition: .18s;
}
.lockwrap.open .lockmenu { opacity: 1; transform: none; pointer-events: auto; }
.lockmenu button { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 12px; }
.lockmenu button:hover { background: rgba(200,85,61,.1); }
.lockmenu svg { color: var(--terra); width: 20px; height: 20px; }
.lockmenu b { display: block; font-size: 14px; }
.lockmenu small { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .lockmenu { right: -50px; } }
/* Seneste aktivitet i sit eget centrerede kort */
.cp-activity { max-width: 760px !important; margin: 26px auto 0 !important; gap: 4px; }
.cp-activity .cp-h3 { margin: 0 0 6px; }
.cp-activity .cp-feed { max-width: none; }
.cp-activity .cp-row { width: 100%; }
.cp-activity .cp-row + .cp-row { border-top: 1px solid rgba(17,25,43,.06); border-radius: 0; }
body.night .cp-activity .cp-row + .cp-row { border-color: rgba(255,255,255,.06); }
.cp-activity .cp-row:hover { border-radius: 12px; }

/* Valg af lys/mørk i menuen */
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.theme-pick button { display: grid; gap: 6px; justify-items: center; border: 0; background: rgba(17,25,43,.04); padding: 10px 6px; border-radius: 14px; font-size: 12.5px; font-weight: 600; text-align: center; }
body.night .theme-pick button { background: rgba(255,255,255,.05); }
.theme-pick button.on { box-shadow: 0 0 0 2px var(--terra); }
.tp-sw { width: 64px; height: 40px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.tp-light { background: linear-gradient(90deg, #f7f1e6 0 35%, #aad3df 35% 60%, #f2efe9 60%); }
.tp-darkui { background: linear-gradient(90deg, #151d2f 0 35%, #aad3df 35% 60%, #f2efe9 60%); }
.tp-dark { background: linear-gradient(90deg, #151d2f 0 35%, #1d3540 35% 60%, #232a33 60%); }
/* Mørk menu + lyst kort: kortet bevarer sine lyse farver */
body.light-map #map { background: #aad3df; }
body.light-map .vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(17,25,43,.28) 100%); }

/* Admin-topbar: valgt fane = lys pille + kort centreret streg (ikke en streg langs hele den runde kant) */
.cp-nav nav button { position: relative; box-shadow: none !important; border-radius: 12px; }
.cp-nav nav button.on { background: rgba(255,255,255,.14); color: #fff; }
.cp-nav nav button.on::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 22px; height: 3px; margin-left: -11px;
  border-radius: 3px; background: var(--terra-2);
}
.cp-nav nav { padding-bottom: 8px; margin-bottom: -8px; }

/* Hover på genvejskortene i admin: tynd orange kant + neutral dybde (ingen rødlig glød) */
.cp-qbtn { transition: transform .2s, border-color .2s, box-shadow .25s, background .2s; }
.cp-qbtn:hover { transform: translateY(-2px); border-color: var(--terra); box-shadow: 0 0 0 1px var(--terra), 0 14px 30px -16px rgba(17,25,43,.45); }
body.night .cp-qbtn:hover { background: #222d49; box-shadow: 0 0 0 1px rgba(224,122,95,.9), 0 18px 34px -16px rgba(0,0,0,.8); }
body.night .cp-qbtn svg { color: var(--terra-2); }
body.night .cp-stat, body.night .cp-card, body.night .cp-box, body.night .cp-trow { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 14px 30px -20px rgba(0,0,0,.8); }
.cp-toolrow { display: flex; justify-content: center; margin-bottom: 14px; }
.cp-toolrow .btn svg { width: 18px; height: 18px; }

/* Primærknapper: altid orange (også i mørk tilstand) og en neutral skygge i stedet for rødlig glød */
.btn-primary, body.night .btn-primary { background: var(--terra); color: #fff; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); }
.btn-primary:hover, body.night .btn-primary:hover { background: #b6492f; }
.fab, .topbar .fab { box-shadow: 0 8px 18px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); }
/* Dialogen er synlig med det samme den åbner (så kodefeltet kan få fokus), og skjules først efter fade-ud */
.modal.open { transition: opacity .3s, visibility 0s; }
.modal:not(.open) { transition: opacity .3s, visibility 0s .3s; }
/* Den orange "åben"-ramme vises kun på kortet, ikke inde i administrationen */
body.cp-open.sudo-on::after { display: none; }
/* Kode-dialogen uden knap: lille diskret hjælpelinje */
.code-help { text-align: center; color: var(--muted); font-size: 13px; margin: 0; min-height: 18px; transition: color .2s; }
.code-help.ok { color: #3f9a6a; font-weight: 600; }
.gate-err.ok { color: #3f9a6a; }

/* Familie-fanen: det fælles Administrator-kort øverst, centreret */
.cp-adminbox { max-width: 760px !important; margin: 0 auto 8px !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-adminbox .cp-card-top b { font-size: 17px; }
.cp-adminbox .cp-card-top small { display: block; color: var(--muted); font-size: 13px; max-width: 420px; }
.lock-hero.small { width: 46px; height: 46px; border-radius: 14px; margin: 0; flex: none; }
.lock-hero.small svg { width: 22px; height: 22px; }
.cp-center { text-align: center; margin-top: 30px; }

/* "Alle de steder"-kortet kan minimeres til kun navnet */
.brand-row { cursor: pointer; align-items: center; }
.brand-fold { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.brand-fold svg { width: 18px; height: 18px; transition: transform .25s; }
#brand.mini .brand-fold svg { transform: rotate(180deg); }
#brand.mini .stats, #brand.mini .flags { display: none; }
#brand.mini { padding-bottom: 16px; }
#brand.mini .brand-title { font-size: 24px; }
.brand-row:hover .brand-fold { background: rgba(200,85,61,.14); }

/* "Indsæt pin" nederst i højre hjørne (ikke i topbaren); kolonnen slutter over den */
@media (min-width: 761px) {
  .fab-wrap { position: fixed; right: 16px; bottom: calc(16px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-end; z-index: 950; }
  .side { bottom: 92px; }
  .fab { padding: 15px 22px 15px 18px; font-size: 15px; }
}

/* "Alle de steder"-kolonnen fast i VENSTRE side (pin-ark og editor ligger i højre) */
@media (min-width: 761px) {
  .side { left: 16px; right: auto; bottom: 16px; }
  .side .brand { animation-name: slide-in; }
  .memory { transform: translateX(-30px); }
  .memory.show { transform: none; }
}

/* ---------- Installérbar app ---------- */
.steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.upd-pill, .install-hint {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--safe-b)); z-index: 2600;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 16px;
  background: var(--ink); color: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); font-size: 14px; font-weight: 600;
  animation: rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.upd-pill .btn { padding: 8px 14px; }
.install-hint { background: var(--glass); color: var(--text); padding: 8px 10px; width: min(420px, calc(100vw - 20px)); bottom: calc(90px + var(--safe-b)); }
.install-hint img { width: 40px; height: 40px; border-radius: 10px; }
.install-hint span { flex: 1; display: grid; }
.install-hint small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.install-hint .btn { padding: 8px 14px; }
.ih-x { border: 0; background: none; color: var(--muted); padding: 6px; font-size: 14px; }

/* "Indsæt pin" vises altid. Låst (eller gæst): hængelås på knappen, et tryk beder om admin-koden og åbner bagefter menuen */
body.locked .fab-wrap, body.viewer .fab-wrap { display: flex !important; }
body.locked .fab, body.viewer .fab { background: var(--terra); box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); }
body.locked .fab:hover, body.viewer .fab:hover { background: #b6492f; }
body.viewer .fab .fab-plus { display: none; }
body.viewer .fab .fab-lock { display: block; }
.cam-btn { justify-self: start; margin-top: -4px; }
.cam-btn svg { width: 18px; height: 18px; }

/* ---------- Beskeder: store, tydelige knapper (også til ældre) ---------- */
.nt { gap: 16px; }
.nt-big { font-size: 18px; line-height: 1.5; margin: 0; }
.nt-lead { font-size: 17px; font-weight: 600; margin: 4px 0 -4px; }
.nt-status { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(17,25,43,.06); font-size: 19px; flex-wrap: wrap; }
body.night .nt-status { background: rgba(255,255,255,.06); }
.nt-status small { color: var(--muted); font-size: 15px; }
.nt-dot { width: 14px; height: 14px; border-radius: 50%; background: #b0b6c2; flex: none; }
.nt-status.on { background: rgba(63,154,106,.14); }
.nt-status.on .nt-dot { background: #3f9a6a; box-shadow: 0 0 0 5px rgba(63,154,106,.22); }
.nt-switch { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(17,25,43,.04); cursor: pointer; }
body.night .nt-switch { background: rgba(255,255,255,.05); }
.nt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.nt-switch .sl { width: 62px; height: 36px; border-radius: 18px; background: rgba(17,25,43,.25); position: relative; flex: none; transition: .25s; }
.nt-switch .sl::after { content: ''; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: .25s cubic-bezier(.2,1.4,.4,1); }
.nt-switch input:checked + .sl { background: #3f9a6a; }
.nt-switch input:checked + .sl::after { transform: translateX(26px); }
.nt-switch input:focus-visible + .sl { box-shadow: 0 0 0 4px rgba(63,154,106,.3); }
.nt-switch b { display: block; font-size: 17px; }
.nt-switch small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.nt-btn { font-size: 17px; padding: 16px 20px; }
.nt-btn svg { width: 22px; height: 22px; }
.nt-off { justify-self: center; font-size: 15px; padding: 6px; }
.nt-hint { text-align: center; font-size: 14px; }
.nt-steps { font-size: 17px; }
.push-ask { flex-wrap: wrap; width: min(460px, calc(100vw - 20px)); padding: 12px 14px; }
.push-ask b { font-size: 16px; line-height: 1.35; }
.pa-bell { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(200,85,61,.14); color: var(--terra); flex: none; }
.pa-btns { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }
.pa-btns .btn { padding: 11px 18px; font-size: 15px; }

/* ---------- Slet billeder (nemt på telefonen) ---------- */
.ph-del { display: none; position: absolute; right: 8px; top: 8px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: #c0392b; color: #fff; place-items: center; box-shadow: 0 6px 14px -4px rgba(0,0,0,.5); }
.ph-del svg { width: 22px; height: 22px; }
.gallery.del-mode .ph-del { display: grid; animation: pop-in .25s both; }
.gallery.del-mode figure { cursor: default; }
.gallery.del-mode figure img { filter: brightness(.85); }
.ph-tools { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.ph-tools .btn svg { width: 17px; height: 17px; }
.btn-danger-on { background: #c0392b !important; color: #fff !important; }
.sheet-cam { margin-top: 10px; }
.lb-del { background: rgba(192,57,43,.9) !important; color: #fff !important; padding: 9px 14px; }
.lb-del svg { width: 18px; height: 18px; }

/* Spørgsmålet om beskeder: klokke + tekst øverst, knapper i bunden */
.install-hint.push-ask { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; width: min(440px, calc(100vw - 20px)); padding: 16px; }
.push-ask .pa-bell { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; }
.push-ask .pa-bell svg { width: 24px; height: 24px; }
.push-ask .pa-text { display: grid; gap: 4px; }
.push-ask .pa-text b { font-size: 17px; line-height: 1.3; font-weight: 700; }
.push-ask .pa-text small { color: var(--muted); font-size: 14px; line-height: 1.45; font-weight: 400; }
.push-ask .pa-btns { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.push-ask .pa-btns .btn { padding: 12px 22px; font-size: 16px; }

/* Computer: Steder-listen er et panel under "Steder"-knappen i topbaren (ikke i venstre kolonne) */
@media (min-width: 761px) {
  .side .drawer {
    position: fixed; top: 82px; left: 300px; width: 420px; height: auto; max-height: calc(100vh - 106px); z-index: 960;
    background: var(--paper); backdrop-filter: none; box-shadow: 0 30px 70px -20px rgba(17,25,43,.6), 0 0 0 1px rgba(17,25,43,.06);
    animation: drop-panel .2s cubic-bezier(.2,.8,.2,1) both;
  }
  body.night .side .drawer { box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); }
  .side .drawer .fold-chev svg { transform: rotate(180deg); }
  .side .drawer .drawer-head h2 { cursor: default; }
  .side .drawer .ltab { pointer-events: none; }
}
@keyframes drop-panel { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 761px) { .side .drawer .drawer-list { min-height: 0; } }

/* ---------- Topbar: vælgere for År og Rejse (skalerer til mange) ---------- */
.timeline { overflow: visible !important; gap: 6px; }
.tf { position: relative; }
.tf-btn {
  display: inline-flex; align-items: center; gap: 7px; max-width: 220px; border: 0; padding: 8px 10px 8px 11px; border-radius: 11px;
  background: rgba(17,25,43,.06); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
body.night .tf-btn { background: rgba(255,255,255,.08); }
.tf-btn:hover { background: rgba(200,85,61,.14); }
.tf-btn.on { background: var(--ink); color: #fff; }
body.night .tf-btn.on { background: #fff; color: var(--ink); }
.tf-btn svg { width: 17px; height: 17px; flex: none; }
.tf-lbl { overflow: hidden; text-overflow: ellipsis; }
.tf-chev { width: 14px !important; height: 14px !important; opacity: .7; transition: transform .2s; }
.tf.open .tf-chev { transform: rotate(180deg); }
.tf-x { margin-left: 2px; padding: 0 4px; border-radius: 6px; font-size: 12px; opacity: .8; }
.tf-x:hover { background: rgba(255,255,255,.2); opacity: 1; }
.tf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.tf-menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 40; width: 300px; max-height: min(64vh, 460px); overflow-y: auto; padding: 6px;
  border-radius: 16px; background: var(--paper); box-shadow: 0 26px 60px -18px rgba(17,25,43,.6), 0 0 0 1px rgba(17,25,43,.06);
  display: none;
}
body.night .tf-menu { box-shadow: 0 26px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); }
.tf.open .tf-menu { display: block; animation: drop-panel .18s both; }
.tf[data-tf="trip"] .tf-menu { width: 340px; }
.tf-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 11px; font-size: 14px; }
.tf-item:hover { background: rgba(200,85,61,.1); }
.tf-item.on { background: rgba(200,85,61,.16); }
.tf-item b { font-weight: 600; }
.tf-item small { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.tf-name { display: grid; min-width: 0; }
.tf-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-name small { margin-left: 0; }
.tf-bar { height: 5px; border-radius: 3px; background: var(--terra); opacity: .55; }
.tf-search { margin: 2px 2px 6px; }
.tf-list { display: grid; gap: 1px; }
@media (max-width: 760px) {
  .tf-menu { top: auto; bottom: calc(100% + 10px); left: 0; width: min(320px, calc(100vw - 30px)); max-height: 55vh; }
  .tf[data-tf="trip"] .tf-menu { left: auto; right: 0; width: min(340px, calc(100vw - 30px)); }
  .timeline { flex-wrap: nowrap; }
  .tf-btn { max-width: 46vw; }
}
.stat span em { display: block; font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { grid-template-columns: repeat(2, 1fr) !important; }

/* ---------- Ny version / Det er nyt ---------- */
.upd-pill { align-items: flex-start; max-width: min(460px, calc(100vw - 20px)); padding: 12px 12px 12px 16px; }
.upd-text { display: grid; gap: 4px; }
.upd-list { margin: 0; padding-left: 18px; font-weight: 400; font-size: 13px; line-height: 1.4; opacity: .9; }
.upd-list:empty { display: none; }
.upd-pill .btn { flex: none; align-self: center; }
.news { gap: 18px; }
.news h3 { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; display: flex; align-items: baseline; gap: 10px; }
.news h3 small { font-family: var(--sans); font-style: normal; font-size: 12px; color: var(--muted); }
.news ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
/* Påkrævet dato */
.fld .req { font-style: normal; font-weight: 600; font-size: 11px; color: var(--terra); margin-left: 4px; }
.g-date { display: grid; gap: 4px; margin-top: 6px; font-size: 12.5px; color: var(--terra); font-weight: 600; }
.g-date input { border: 1px solid rgba(200,85,61,.5); border-radius: 10px; padding: 7px 10px; background: transparent; color: var(--text); }

/* ---------- Topbar: "find steder" samlet i én gruppe ---------- */
.tb-group { display: contents; }
.tb-list { display: none; } /* mobil: Steder ligger i bundmenuen som før */
@media (min-width: 761px) {
  .tb-group { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 15px; background: rgba(17,25,43,.05); min-width: 0; flex: 0 1 auto; }
  body.night .tb-group { background: rgba(255,255,255,.05); }
  .tb-list { display: flex; flex: none; }
  .tb-list.on { background: var(--ink); color: #fff; }
  body.night .tb-list.on { background: #fff; color: var(--ink); }
  .dock .dock-btn[data-act="list"] { display: none; } /* computer: Steder sidder i gruppen */
  .tb-group .tb-search { flex: 0 1 260px; }
  .tb-group .tb-search:focus-within { flex-basis: 340px; }
  .topbar .dock { border-left: 1px solid rgba(17,25,43,.12); margin-left: 6px; }
}
@media (min-width: 761px) and (max-width: 1380px) { .tb-list span { display: none; } }

/* Søgefeltet for sig selv, cirka midt i topbaren */
@media (min-width: 761px) {
  .topbar > .tb-search { margin: 0 auto; flex: 0 1 320px; }
  .topbar > .tb-search:focus-within { flex-basis: 400px; }
  .tb-right { margin-left: 0; }
}
/* Brede skærme: søgefeltet præcis midt på skærmen (der er plads på begge sider) */
@media (min-width: 1600px) {
  .topbar > .tb-search { position: absolute; left: 50%; transform: translateX(-50%); width: 320px; margin: 0; }
  .topbar > .tb-search:focus-within { width: 400px; }
  .topbar .dock { margin-left: auto; }
}
.bk-progress { max-width: 760px; margin: 14px auto 0; gap: 8px; }
.bk-progress .progress { margin: 0; }
.bk-help { max-width: 760px; margin: 18px auto 0 !important; }

/* =====================================================================
   MOBIL (genstart): én ren opbygning, som lægger sig oven på det gamle.
   Øverst: navn + tal + lås + menu. Nederst: Steder, År og Rejse i én bar,
   kortknapper lodret i højre side og Indsæt pin i hjørnet.
   ===================================================================== */
@media (max-width: 760px) {
  :root { --m-gap: 10px; --m-bar: 56px; --safe-t: env(safe-area-inset-top, 0px); --m-bot: calc(var(--m-gap) + var(--m-bar) + 10px + var(--safe-b)); }
  /* Kortet dækker hele skærmen, også under Safaris værktøjslinje og hjemme-stregen */
  /* Kortet fylder præcis skærmen (højere end skærmen gjorde siden rulbar, så fingeren flyttede hele appen) */
  #map, .vignette { inset: 0; height: auto; }

  /* ---------- Hovedet ---------- */
  .brand {
    position: fixed; top: calc(var(--m-gap) + var(--safe-t)); left: var(--m-gap); right: var(--m-gap); width: auto;
    padding: 9px 112px 9px 16px; border-radius: 20px; min-height: var(--m-bar); box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; animation: slide-down-m .6s .1s cubic-bezier(.2,.8,.2,1) both;
  }
  .brand .eyebrow, .brand-fold { display: none; }
  .brand-row { padding-right: 0; display: block; }
  .brand-title, #brand.mini .brand-title { font-size: 21px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stats, #brand.mini .stats { display: flex !important; gap: 12px; margin: 3px 0 0; }
  .stat { background: none !important; padding: 0; display: inline-flex; align-items: baseline; gap: 4px; border-radius: 0; }
  .stat b { font-family: var(--sans); font-size: 13px; font-weight: 700; display: inline; }
  .stat span { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
  /* Landene: en række genveje lige under hovedet, man kan swipe i */
  .flags {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 2px 0 6px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; transition: opacity .2s;
  }
  .flag { background: var(--glass) !important; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 6px 16px -8px rgba(17,25,43,.45), 0 0 0 1px var(--glass-line); padding: 6px 9px 6px 7px; font-size: 13px; }
  .flag.on { background: var(--ink) !important; }
  body.night .flag.on { background: #fff !important; color: var(--ink); }
  #brand.mini { padding-bottom: 9px; }

  /* Lås og menu i hovedets højre side */
  #menuBtn, .who { position: fixed; top: calc(var(--m-gap) + var(--safe-t) + 8px); z-index: 905; }
  #menuBtn { right: calc(var(--m-gap) + 8px); width: 40px; height: 40px; border-radius: 13px; }
  .who { right: calc(var(--m-gap) + 56px); margin: 0; padding: 0; border: 0; }
  .who-me, .lock-now { display: none; }
  .lockpill { width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 13px; display: inline-grid; grid-template-columns: 1fr; place-items: center; }
  .lockpill svg { grid-area: 1 / 1; margin: 0; }
  .lockpill svg { width: 18px; height: 18px; }
  .lockpill .lp-txt, .lockpill .lp-hover, .lockpill .lp-chev { display: none !important; }
  .lockmenu { right: -48px; width: min(290px, calc(100vw - 20px)); }

  /* ---------- Bundbaren: Steder, År og Rejse ---------- */
  .tb-group {
    display: flex; position: fixed; left: var(--m-gap); right: calc(var(--m-gap) * 2 + var(--m-bar)); bottom: calc(var(--m-gap) + var(--safe-b));
    height: var(--m-bar); z-index: 950; align-items: center; gap: 4px; padding: 0 6px; box-sizing: border-box; isolation: isolate;
    animation: slide-up .6s .2s cubic-bezier(.2,.8,.2,1) both;
  }
  /* Glasset ligger på et lag bag ved, så menuerne kan lægge sig fast i forhold til skærmen */
  .tb-group::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 20px; background: var(--glass);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
  .tb-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 11px; font-weight: 600; flex: none; border-radius: 14px; }
  .tb-list svg { width: 20px; height: 20px; }
  .tb-list.on { background: var(--ink); color: #fff; }
  body.night .tb-list.on { background: #fff; color: var(--ink); }
  .tb-group .timeline {
    position: static; transform: none; animation: none; max-width: none; flex: 1 1 auto; min-width: 0; display: flex; gap: 4px;
    background: none; border: 0; box-shadow: none; padding: 0 0 0 6px; border-left: 1px solid rgba(17,25,43,.1); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.night .tb-group .timeline { border-color: rgba(255,255,255,.12); }
  .tb-group .tf { flex: 1 1 0; min-width: 0; display: flex; position: static; }
  .tb-group .tf-btn { max-width: none; width: 100%; min-width: 0; justify-content: center; padding: 10px 8px; font-size: 13.5px; border-radius: 13px; }
  .tb-group .tf-lbl { min-width: 0; }
  .tb-list span { display: inline !important; }
  .tb-group .tf-btn > svg:first-child { display: none; } /* plads til hele teksten */
  .tb-group .tf-btn { gap: 4px; }
  /* Menuerne for år og rejse: et panel lige over baren i hele bredden */
  .tb-group .tf-menu, .tb-group .tf[data-tf="trip"] .tf-menu {
    position: fixed; top: auto; left: var(--m-gap); right: var(--m-gap); width: auto; bottom: var(--m-bot); max-height: 60dvh; border-radius: 20px; padding: 8px;
  }
  .tf-item { padding: 12px; font-size: 15px; }

  /* ---------- Kortknapper: lodret i højre side, over Indsæt pin ---------- */
  .dock {
    left: auto; right: var(--m-gap); bottom: var(--m-bot); flex-direction: column; gap: 2px; padding: 4px; border-radius: 18px;
    background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--glass-line); box-shadow: var(--shadow); animation: slide-up .6s .3s cubic-bezier(.2,.8,.2,1) both;
  }
  .dock .dock-btn[data-act="list"] { display: none; }
  .dock-btn { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 14px; }
  .dock-btn span, .dock-btn[data-act="play"] span { display: none; }
  .dock-btn svg { width: 21px; height: 21px; }

  /* ---------- Indsæt pin ---------- */
  .fab-wrap { right: var(--m-gap); bottom: calc(var(--m-gap) + var(--safe-b)); }
  .fab { width: var(--m-bar); height: var(--m-bar); padding: 0; justify-content: center; border-radius: 20px; }
  .fab span { display: none; }
  .fab svg { width: 24px; height: 24px; }
  .fab-menu { width: min(330px, calc(100vw - 20px)); }
  .fab-menu button { padding: 13px 14px; }

  /* ---------- Listen over steder: et panel mellem hovedet og baren ---------- */
  .drawer {
    left: var(--m-gap); right: var(--m-gap); width: auto; top: calc(var(--m-gap) + var(--safe-t) + var(--m-bar) + 10px); bottom: var(--m-bot); height: auto;
    z-index: 945; border-radius: 22px; transform: translateY(16px);
  }
  .drawer.open { transform: none; }
  .drawer.folded .search { display: flex; }
  .drawer.folded .drawer-list { display: block; }
  .drawer .item { padding: 10px 8px; }
  body:has(.drawer.open) .flags { opacity: 0; pointer-events: none; }

  /* ---------- Kortstil ---------- */
  .popover { left: var(--m-gap); right: calc(var(--m-gap) * 2 + 54px); bottom: var(--m-bot); top: auto; grid-template-columns: repeat(3, 1fr); }

  /* ---------- Ark, hint og beskeder ---------- */
  .sheet { z-index: 960; top: calc(var(--m-gap) + var(--safe-t) + var(--m-bar) + 10px); height: auto; border-radius: 24px 24px 0 0; }
  body:has(.sheet.open) .flags { opacity: 0; pointer-events: none; }
  .placing-hint { top: calc(var(--m-gap) + var(--safe-t) + var(--m-bar) + 10px); left: var(--m-gap); right: var(--m-gap); transform: translateY(-20px); text-align: center; }
  body.placing .placing-hint { transform: none; }
  .toasts { top: calc(var(--m-gap) + var(--safe-t) + var(--m-bar) + 12px); }
  .upd-pill, .install-hint { left: var(--m-gap); right: var(--m-gap); transform: none; max-width: none; width: auto; bottom: var(--m-bot); }

  /* ---------- Vinduer (kode, ny pin, menu): oppe fra toppen, så tastaturet ikke skubber dem ud af skærmen ---------- */
  .modal { place-items: start center; padding: calc(var(--m-gap) + var(--safe-t)) var(--m-gap) calc(var(--m-gap) + var(--safe-b)); }
  .modal .modal-card { border-radius: 22px; width: 100%; max-height: calc(100dvh - 2 * var(--m-gap) - var(--safe-t) - var(--safe-b)); }
  /* Knapperne (Gem, Sæt pinnen) står altid synligt nederst i vinduet */
  .modal .m-foot { position: sticky; bottom: 0; z-index: 3; background: var(--paper); padding-top: 12px; padding-bottom: 14px; box-shadow: 0 -10px 20px -14px rgba(0,0,0,.5); }
  .modal .m-foot .btn { flex: 1; justify-content: center; }
  .modal .m-foot .spacer { display: none; }
  /* Datofelter på iPhone: må ikke stikke ud til højre */
  .fld input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; min-height: 48px; }
  .fld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  .row2.dates { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .row2.dates > * { min-width: 0; }
  .modal .m-head h2 { font-size: 24px; }
  .lock-hero { width: 52px; height: 52px; border-radius: 16px; }
  .lock-hero svg { width: 24px; height: 24px; }

  /* I administrationen: beskeder nederst, så de ikke dækker fanerne */
  body.cp-open .toasts { top: auto; bottom: calc(96px + var(--safe-b)); }

  /* Rammen om skærmen når admin er åben: tyndere på telefonen */
  body.sudo-on::after { border-width: 3px; }
}
/* Ny version-boksen gemmer sig, mens et vindue er åbent */
body:has(.modal.open) .upd-pill, body:has(.modal.open) .install-hint { display: none; }
@keyframes slide-down-m { from { opacity: 0; transform: translateY(-20px); } }

/* ---------- Telefon/touch: kortet skal glide let under fingeren ----------
   Glas-blur bag knapperne og uendelige animationer bliver regnet om ved hvert ryk i kortet.
   På touch-skærme bruges i stedet næsten tætte farver, og intet bevæger sig af sig selv. */
@media (pointer: coarse), (max-width: 760px) {
  :root { --glass: rgba(250, 246, 238, .94); }
  body.night { --glass: rgba(20, 28, 46, .94); }
  .glass, .brand, .drawer, .dock, .tb-group::before, .flag, .popover, .fab-menu, .tf-menu, .modal, .sheet-close {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .trip-line, .home-pin::after, .lockpill.open { animation: none !important; }
  .vignette { display: none; }
  body.sudo-on::after { box-shadow: none; }
  #map { touch-action: none; }
  .leaflet-marker-icon, .leaflet-marker-shadow { will-change: auto; }
}

/* iPhone zoomer ind, når man trykker i et felt med skrift under 16 px, og bliver hængende zoomet.
   Derfor er alle felter mindst 16 px på telefonen. */
@media (pointer: coarse), (max-width: 760px) {
  input, textarea, select, .search input, .tb-search input, .cp-newtrip input, .group input[type=text], .fld input, .fld textarea, .fld select { font-size: 16px !important; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* Beskeder nederst (ny version, kladde, app-tip) må ikke ligge oven i hinanden eller oven på et åbent sted */
body:has(#draftAsk) .upd-pill, body:has(#draftAsk) .install-hint:not(#draftAsk) { display: none; }
@media (max-width: 760px) {
  body:has(.sheet.open) .upd-pill, body:has(.sheet.open) .install-hint, body:has(.drawer.open) .upd-pill, body:has(.drawer.open) .install-hint { display: none; }
}

/* Admin åben: ingen rød ramme om skærmen. I stedet er hængelåsen tydeligt levende:
   en ring der pulserer ud fra knappen, og låsen der vipper en gang imellem.
   Kun transform og opacity, så det koster næsten intet, mens man trækker i kortet. */
body.sudo-on::after { display: none !important; }
body.sudo-on .brand { box-shadow: var(--shadow) !important; }
.lockpill.open { position: relative; animation: none !important; overflow: visible; }
.lockpill.open::before, .lockpill.open::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--terra); pointer-events: none;
  animation: lockring 2s cubic-bezier(.2,.7,.3,1) infinite;
}
.lockpill.open::after { animation-delay: 1s; }
.lockpill.open > svg { transform-origin: 50% 75%; animation: lockwiggle 3s ease-in-out infinite; }
.lockpill.open:hover::before, .lockpill.open:hover::after { animation-play-state: paused; opacity: 0; }
@keyframes lockring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes lockwiggle {
  0%, 62%, 100% { transform: rotate(0); }
  68% { transform: rotate(-16deg); } 74% { transform: rotate(13deg); } 80% { transform: rotate(-8deg); } 86% { transform: rotate(4deg); } 92% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .lockpill.open::before, .lockpill.open::after, .lockpill.open > svg { animation: none !important; } }

/* Smalle telefoner: tallene må ikke løbe ind under låsen; Ny version-boksen er kort (listen vises efter opdateringen) */
@media (max-width: 760px) {
  .stats, #brand.mini .stats { overflow: hidden; white-space: nowrap; gap: 10px; }
  .upd-pill { align-items: center; padding: 10px 10px 10px 16px; }
  .upd-pill .upd-list { display: none; }
}
@media (max-width: 380px) {
  .brand { padding-left: 14px; }
  .brand-title, #brand.mini .brand-title { font-size: 19px; }
  .stats, #brand.mini .stats { gap: 8px; }
  .stat b { font-size: 12.5px; }
  .stat span { font-size: 11px; }
  .tb-list { padding: 6px 7px; }
  .tb-group .tf-btn { padding: 10px 5px; font-size: 13px; }
}
@media (max-width: 760px) { .upd-pill, .install-hint { right: calc(var(--m-gap) * 2 + 54px); } } /* plads til kortknapperne */

/* Siden selv må ALDRIG kunne rulle eller hoppe (iPhone-gummieffekt): kun kortet og listerne bevæger sig */
html, body { overflow: hidden; overscroll-behavior: none; }
@media (pointer: coarse), (max-width: 760px) {
  html { height: 100%; position: fixed; inset: 0; }
  body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* Det, der skal kunne rulles eller skrives i, får fingeren tilbage */
  .drawer-list, .sheet-body, .modal, .modal-card, .tf-menu, .fab-menu, .cp, .cp-main, .cp-nav nav, .flags, .tb-results, .lockmenu, .popover {
    touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  input, textarea, select, [contenteditable], .sheet-body p, .note { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
  button, a, .flag, .item { touch-action: manipulation; }
  #map, #map * { touch-action: none; }
}

/* ---------- Rettelser fra fejl-scanningen ---------- */
/* Den skjulte Indsæt pin-menu var en usynlig plade, der slugte tryk på kort og knapper nederst til højre */
.fab-wrap { pointer-events: none; }
.fab-wrap > .fab, .fab-wrap.open .fab-menu { pointer-events: auto; }
/* Smal computer / iPad på højkant: ingen søgefelt i topbaren (listen har sin egen søgning), så år og rejser ikke flyder ind over */
@media (min-width: 761px) and (max-width: 1080px) {
  .topbar > .tb-search { display: none; }
  .tb-group { flex: none; }
  .topbar .dock { margin-left: auto; }
}
@media (max-width: 760px) {
  /* Lås-menuen ligger over listen og det åbne sted */
  .who, #menuBtn { z-index: 970; }
  /* Bundbaren må ikke have en transform (så ligger År/Rejse-menuerne i hele skærmens bredde) */
  .tb-group { animation: none; }
  .tb-group::before { animation: slide-up .6s .2s cubic-bezier(.2,.8,.2,1) both; }
  /* Beskeder i hele bredden */
  .toasts { left: var(--m-gap); right: var(--m-gap); transform: none; justify-items: center; }
  /* Landene vises altid på telefonen */
  #brand.mini .flags { display: flex; }
}

/* ---------- Opdatering (administration) ---------- */
.cp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); margin-left: 6px; display: inline-block; box-shadow: 0 0 0 3px rgba(200,85,61,.2); }
.upd-box { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.upd-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.upd-row b { font-size: 22px; font-variant-numeric: tabular-nums; }
.upd-new { border-top: 1px solid rgba(17,25,43,.08); padding-top: 12px; display: grid; gap: 8px; }
body.night .upd-new { border-color: rgba(255,255,255,.08); }
.upd-new ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; }
.upd-new .btn { justify-self: start; }
.upd-actions { display: flex; gap: 8px; }
.upd-err { color: var(--terra) !important; }
.upd-auto { max-width: 760px; margin: 16px auto 0; }
.upd-last { max-width: 760px; margin: 16px auto 0 !important; display: grid; gap: 10px; }
.upd-last p { margin: 0; }
.upd-last .btn { justify-self: start; }

/* Landeknapperne er fjernet efter Bos ønske (de fyldte mere og mere på telefonen) */
.flags { display: none !important; }

/* ---------- Dashboard (Oversigt) ---------- */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; max-width: 1080px; }
.dash-card { align-content: start; }
.dash-card .btn { justify-self: start; }
.dash-wide { grid-column: 1 / -1; }
.dash-big { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.dash-big:first-letter { text-transform: uppercase; }
.dash-rows { display: grid; gap: 6px; font-size: 14px; }
.dash-rows > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(17,25,43,.1); padding-bottom: 5px; }
body.night .dash-rows > div { border-color: rgba(255,255,255,.08); }
.dash-rows span { color: var(--muted); }
.dash-rows b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dash-rows .ok, .dash-ok { color: #2f9e5a; } .dash-rows .bad { color: var(--terra); }
.dash-ok { margin: 0; font-weight: 700; }
.dash-warn { background: rgba(200,85,61,.12); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; }
.dash-warn p { margin: 0; color: var(--terra); }
.dev-tag { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(42,127,143,.5); color: var(--sea); vertical-align: 1px; }
.dev-tag.new { border-color: #2f9e5a; color: #2f9e5a; }
/* ---------- Enheder (Familie & koder) ---------- */
.dev-box { max-width: 1080px; margin: 22px auto 0 !important; }
.dev-nums { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.dev-nums div { display: grid; }
.dev-nums b { font-family: var(--serif); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dev-nums span { color: var(--muted); font-size: 13px; }
.dev-table { display: grid; font-size: 14px; }
.dev-head, .dev-row { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) 140px 140px 60px; gap: 12px; align-items: center; padding: 9px 6px; }
.dev-table.has-place .dev-head, .dev-table.has-place .dev-row { grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) minmax(140px, 1.4fr) 140px 140px 60px; }
.dev-head { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid rgba(17,25,43,.1); }
.dev-row { border-bottom: 1px solid rgba(17,25,43,.06); }
body.night .dev-head, body.night .dev-row { border-color: rgba(255,255,255,.07); }
.dev-group { color: var(--sea); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; padding: 14px 6px 4px; }
.dev-group i { font-style: normal; background: rgba(42,127,143,.15); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.dev-name { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dev-name svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
.dev-name small, .dev-place small { display: block; color: var(--muted); font-size: 12.5px; }
.dev-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dev-who .avatar { width: 24px; height: 24px; font-size: 11px; flex: none; }
.dev-when { font-variant-numeric: tabular-nums; }
.dev-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dev-box > .btn { justify-self: start; }
.btn-danger-soft { color: var(--terra); box-shadow: inset 0 0 0 1px rgba(200,85,61,.5); background: none; }
/* Admin-lås i Indstillinger */
.lock-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lock-opt { border: 1px solid rgba(17,25,43,.14); background: none; border-radius: 12px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; display: grid; text-align: left; }
.lock-opt small { color: var(--muted); font-weight: 500; font-size: 12px; }
.lock-opt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.lock-opt.on small { color: rgba(255,255,255,.7); }
body.night .lock-opt { border-color: rgba(255,255,255,.14); }
body.night .lock-opt.on { background: #fff; color: var(--ink); }
body.night .lock-opt.on small { color: var(--muted); }
/* Telefon: tabellen som kort */
@media (max-width: 760px) {
  .dev-head { display: none; }
  .dev-row, .dev-table.has-place .dev-row { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 4px; }
  .dev-name { grid-column: 1 / -1; }
  .dev-who { grid-column: 1; }
  .dev-n { grid-column: 2; grid-row: 2; }
  .dev-n::after { content: ' gange'; font-weight: 400; color: var(--muted); }
  .dev-place { grid-column: 1 / -1; }
  .dev-when { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
  .dev-when:nth-last-child(3)::before { content: 'Første: '; }
  .dev-when:nth-last-child(2)::before { content: 'Seneste: '; }
  .dash { grid-template-columns: 1fr; }
}

/* Admin-topbaren med 7 faner: navnene står uden ikoner, når pladsen bliver trang, og låse-teksten skjules */
.cp-nav nav button { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1600px) {
  .cp-timer { display: none; }
  .cp-nav nav button { padding: 9px 10px; gap: 8px; font-size: 14px; }
}
@media (min-width: 861px) and (max-width: 1500px) {
  .cp-nav nav button svg { display: none; }
  .cp-brand h2 { display: none; }
}

/* ---------- Dashboard v2: kompakt ---------- */
.dash-alert { max-width: 1080px; margin: 12px auto 0; background: rgba(200,85,61,.13); border: 1px solid rgba(200,85,61,.35); border-radius: 16px; padding: 12px 16px; display: grid; gap: 4px; font-size: 14.5px; }
.dash-alert > b { color: var(--terra); }
.dash-alert p { margin: 0; }
.dash-status { max-width: 1080px; margin: 12px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: start; }
.dash-tile { text-align: left; border: 0; border-radius: 16px; padding: 12px 16px; background: #fff; display: grid; gap: 1px; box-shadow: 0 1px 0 rgba(17,25,43,.06), 0 8px 24px -16px rgba(17,25,43,.4); transition: transform .15s, box-shadow .15s; }
body.night .dash-tile { background: var(--paper-2); color: var(--text); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 14px 30px -20px rgba(0,0,0,.8); }
.dash-tile:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(224,122,95,.7), 0 12px 26px -16px rgba(0,0,0,.6); }
.dash-tile span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.dash-tile b { font-size: 19px; font-weight: 700; line-height: 1.25; }
.dash-tile small { color: var(--muted); font-size: 12.5px; }
.dash-tile em { font-style: normal; color: var(--terra-2, var(--terra)); font-weight: 700; }
.dash-tile.good b { color: #3fb06b; }
.dash-tile.warn b, .dash-tile.hot b { color: var(--terra); }
.dash-details { max-width: 1080px; margin: 10px auto 0 !important; }
.dash-two { max-width: 1080px; margin: 12px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.dash-two .cp-box { gap: 8px; }
.dash-two .cp-feed { max-width: none; }
.dash-two .cp-row { padding: 7px 6px; }
.dash-two .btn-sm, .btn-sm { justify-self: start; padding: 7px 14px; font-size: 13.5px; }
.dash-quick { max-width: 1080px; margin: 12px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dash-quick .btn svg { width: 17px; height: 17px; }
.dash-rows > div { align-items: baseline; }
@media (max-width: 760px) {
  .dash-status { grid-template-columns: 1fr 1fr; }
  .dash-two { grid-template-columns: 1fr; }
  .cp-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .cp-stat { padding: 12px; }
  .cp-stat b { font-size: 26px; }
}

/* ---------- Grafer i administrationen (farver valideret for lys og mørk) ---------- */
:root { --ch-a: #c8553d; --ch-b: #1786a3; }
body.night { --ch-a: #d0603f; --ch-b: #1f93b0; }
.dash-charts { max-width: 1080px; margin: 12px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.ch-card { gap: 10px; }
.ch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ch-head .cp-h3 { margin: 0; }
.ch-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ch-empty { margin: 0; padding: 18px 0; }
.ch-toggle { display: flex; gap: 2px; background: rgba(17,25,43,.06); border-radius: 10px; padding: 2px; flex: none; }
body.night .ch-toggle { background: rgba(255,255,255,.06); }
.ch-toggle button { border: 0; background: none; border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ch-toggle button.on { background: var(--ink); color: #fff; }
body.night .ch-toggle button.on { background: #fff; color: var(--ink); }
/* Besøg: areal + linje, usynlige søjler som hover-mål */
.ch-plot { position: relative; height: 130px; }
.ch-area { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-fill { fill: var(--ch-b); opacity: .16; }
.ch-line { fill: none; stroke: var(--ch-b); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ch-base { stroke: rgba(17,25,43,.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.night .ch-base { stroke: rgba(255,255,255,.12); }
.ch-hits { position: absolute; inset: 0; display: flex; }
.ch-hit { flex: 1; position: relative; cursor: crosshair; }
.ch-hit::before { content: ''; position: absolute; left: var(--x); top: 0; bottom: 6px; width: 1px; background: rgba(17,25,43,.25); opacity: 0; }
.ch-hit::after { content: ''; position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ch-b); box-shadow: 0 0 0 2px var(--paper); opacity: 0; }
body.night .ch-hit::before { background: rgba(255,255,255,.3); }
.ch-hits { --dummy: 0; }
.ch-hit:hover::before, .ch-hit:hover::after { opacity: 1; }
/* .ch-hit fylder sin egen skive; markøren tegnes i forhold til hele grafen */
.ch-hits .ch-hit { position: static; }
.ch-hits { position: absolute; }
.ch-hit::before, .ch-hit::after { pointer-events: none; }
.ch-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
/* Steder pr. år: søjler */
.ch-cols { display: flex; align-items: stretch; gap: 2px; height: 150px; }
.ch-col { flex: 1; min-width: 0; border: 0; background: none; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: pointer; }
.ch-col:disabled { cursor: default; }
.ch-bar { width: min(34px, 80%); background: var(--ch-a); border-radius: 4px 4px 0 0; position: relative; transition: filter .15s; }
.ch-col:not(:disabled):hover .ch-bar { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ch-a); }
.ch-bar em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-style: normal; font-weight: 700; font-size: 12.5px; padding-bottom: 2px; color: var(--text); }
.ch-col small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Vandrette søjler (rejser, mest åbnede) */
.ch-rows { display: grid; gap: 2px; }
.ch-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 34px; gap: 10px; align-items: center; border: 0; background: none; padding: 6px 6px; border-radius: 10px; text-align: left; font-size: 13.5px; cursor: pointer; color: var(--text); }
.ch-row:hover { background: rgba(17,25,43,.05); }
body.night .ch-row:hover { background: rgba(255,255,255,.05); }
.ch-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-track { height: 12px; border-radius: 0 4px 4px 0; }
.ch-hbar { display: block; height: 100%; background: var(--c, var(--ch-a)); border-radius: 0 4px 4px 0; }
.ch-row b { text-align: right; font-variant-numeric: tabular-nums; }
/* Tooltip */
.ch-tip { position: fixed; z-index: 4000; pointer-events: none; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); white-space: nowrap; }
body.night .ch-tip { background: #fff; color: var(--ink); }
/* Besøg opdelt i typer */
.dev-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-sum span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(17,25,43,.05); font-size: 13px; color: var(--muted); }
body.night .dev-sum span { background: rgba(255,255,255,.06); }
.dev-sum svg { width: 16px; height: 16px; color: var(--text); }
.dev-sum b { color: var(--text); font-size: 14px; }
.dev-sub { color: var(--sea); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
.dev-mini .dev-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(42,127,143,.12); color: var(--sea); flex: none; }
.dev-mini .dev-ico svg { width: 18px; height: 18px; }
.dev-mini small .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 0; }
@media (max-width: 760px) { .dash-charts { grid-template-columns: 1fr; } .ch-cols { height: 130px; } }

/* Søjlerne måles inden i deres egen boks (plads til tal over og årstal under) */
.ch-cols { padding-top: 18px; }
.ch-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.ch-col small { height: 14px; }
@media (min-width: 900px) { .dash-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Zoom i billedvisningen */
.lightbox .lb-stage img { touch-action: none; user-select: none; -webkit-user-select: none; transform-origin: center; will-change: transform; cursor: zoom-in; }
.lightbox.zoomed .lb-stage img { cursor: grab; border-radius: 0; box-shadow: none; }
.lightbox.zoomed .lb-stage img:active { cursor: grabbing; }
.lightbox.zoomed .lb-nav, .lightbox.zoomed .lb-cap, .lightbox.zoomed .lb-hint { opacity: 0; pointer-events: none; }
.lightbox .lb-stage { overflow: hidden; touch-action: none; }
.lb-hint { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,.85); background: rgba(0,0,0,.45); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; pointer-events: none; animation: lbhint 3.5s ease forwards; white-space: nowrap; }
@keyframes lbhint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .lb-hint { display: none; } }

/* Billedet passer altid til skærmen (højden regnes ud fra skærmen, ikke fra boksen: procent-højde svigter på nogle telefoner) */
.lb-stage { top: calc(60px + env(safe-area-inset-top, 0px)); bottom: calc(90px + var(--safe-b, 0px)); }
.lb-stage img { width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px - env(safe-area-inset-top, 0px) - var(--safe-b, 0px)); }
.lb-top { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }
.lb-hint { display: none !important; } /* zoom findes stadig (knib/dobbelttryk), men uden hjælpetekst */

/* Graf-kortene (og besøg/aktivitet) er lige høje i hver række; en tom graf står midt i sit kort */
.dash-charts, .dash-two { align-items: stretch; }
.ch-card { grid-template-rows: auto 1fr; }
.ch-card > :last-child { align-self: center; }
.ch-card > .ch-rows, .ch-card > .ch-cols { align-self: end; }

/* Indholdet står øverst i de lige høje kort */
.dash-two .cp-box, .ch-card { align-content: start; }
.ch-card > .ch-rows { align-self: start; }
.ch-toggle button { padding: 5px 8px; }

/* Låse-knappen: kun ikon når der er åbent; ringen er mindre og roligere, så den ikke rammer nabo-knapperne */
.lockpill.open .lp-txt:empty { display: none; }
.lockpill.open { gap: 4px; padding-left: 10px; padding-right: 8px; }
@keyframes lockring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }
.lockpill.open::before, .lockpill.open::after { animation-duration: 2.6s; }
.lockpill.open::after { animation-delay: 1.3s; }

/* Besked med knap (Fortryd) */
.toast.has-act { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast button { border: 0; background: rgba(255,255,255,.18); color: inherit; font-weight: 700; border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.toast button:hover { background: rgba(255,255,255,.3); }
/* Papirkurv */
.trash-box { max-width: 1080px; margin: 22px auto 0 !important; }
.trash-box .th { width: 46px; height: 46px; border-radius: 12px; background-size: cover; background-position: center; filter: grayscale(.6); opacity: .85; }
.trash-th { display: grid; place-items: center; background: rgba(17,25,43,.1); font-weight: 700; color: var(--muted); }
body.night .trash-th { background: rgba(255,255,255,.08); }
.trash-box > .btn { justify-self: start; }
.cp-adminbtns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Under afspilning: bundbaren (Steder/År/Rejse) skjules også */
body.playing .tb-group, body.playing .who, body.playing #menuBtn, body.playing .upd-pill, body.playing .install-hint { display: none !important; }

/* Afspilning: knapperne skal kunne ses, også på et lyst kort (mørk plade, stort Stop-kryds) */
.reel-ctl { z-index: 5; background: rgba(11,17,29,.82); padding: 6px; border-radius: 999px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); }
.reel-ctl .icon-btn { background: rgba(255,255,255,.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.reel-ctl .icon-btn:last-child { background: var(--terra); }
@media (max-width: 760px) {
  .reel-ctl { bottom: calc(9vh + 16px + var(--safe-b, 0px)); }
  .reel-ctl .icon-btn { width: 50px; height: 50px; }
}

/* =====================================================================
   TELEFON v2: alt i én knap-søjle i højre side, valg som popups (ingen bundbar)
   ===================================================================== */
.rail-only { display: none !important; }
@media (max-width: 760px) {
  :root { --m-bot: calc(var(--m-gap) + var(--m-bar) + 10px + var(--safe-b)); --rail: 60px; }
  /* Bundbaren skjules, men År/Rejse-menuerne inde i den bruges stadig som popups */
  .tb-group { visibility: hidden; pointer-events: none; animation: none; }
  .tb-group::before { display: none; }
  .tb-group .tf-menu { visibility: visible; pointer-events: auto; }
  /* Søjlen */
  .rail-only { display: flex !important; }
  .rail-only[hidden] { display: none !important; }
  .dock { width: var(--rail); padding: 4px; gap: 2px; bottom: var(--m-bot); max-height: calc(100dvh - var(--m-bot) - var(--safe-t) - 90px); overflow-y: auto; scrollbar-width: none; }
  .dock .dock-btn[data-act="list"] { display: flex; }
  .dock .dock-btn { width: 100%; height: auto; min-height: 50px; flex-direction: column; gap: 2px; padding: 6px 2px; border-radius: 13px; }
  .dock .dock-btn span, .dock .dock-btn[data-act="play"] span { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
  .dock .dock-btn svg { width: 20px; height: 20px; }
  .dock .dock-btn.on { background: var(--ink); color: #fff; }
  .dock .dock-btn.on span { color: rgba(255,255,255,.85); }
  body.night .dock .dock-btn.on { background: #fff; color: var(--ink); }
  body.night .dock .dock-btn.on span { color: var(--muted); }
  .dock .dock-btn[data-act="trip"].on { box-shadow: inset 0 -3px 0 var(--c, transparent); }
  /* Popups midt på skærmen (År, Rejse, Kortstil) */
  .tb-group .tf-menu, .tb-group .tf[data-tf="trip"] .tf-menu {
    left: var(--m-gap); right: var(--m-gap); top: 50%; bottom: auto; transform: translateY(-50%); max-height: 70dvh; z-index: 1600;
    border-radius: 22px; padding: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  }
  body.tf-pop::before { content: ''; position: fixed; inset: 0; z-index: 1500; background: rgba(11,17,29,.45); pointer-events: none; }
  .tf-pophead { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px 8px; }
  .tf-pophead b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; }
  .tf-pophead .icon-btn { width: 38px; height: 38px; }
  .popover { left: var(--m-gap); right: var(--m-gap); top: 50%; bottom: auto; transform: translateY(-46%); z-index: 1600; }
  .popover.open { transform: translateY(-50%); }
  /* Plads: listen, beskeder og "ny version" går ikke ind over søjlen */
  .drawer { bottom: calc(var(--m-gap) + var(--safe-b)); right: calc(var(--m-gap) * 2 + var(--rail)); }
  .upd-pill, .install-hint { bottom: calc(var(--m-gap) + var(--safe-b)); right: calc(var(--m-gap) * 2 + var(--rail)); }
  .fab-wrap { bottom: calc(var(--m-gap) + var(--safe-b)); }
  .fab { width: var(--rail); height: var(--rail); }
}
@media (min-width: 761px) { .tf-pophead { display: none; } }
@media (max-width: 760px) { .tb-group { position: static; z-index: auto; isolation: auto; } }
@media (max-width: 760px) { .dock .dock-btn span, .dock .dock-btn[data-act="play"] span { white-space: normal; font-size: 10px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } }

/* Telefon: menuen ligger i søjlen; i toppen er der kun låsen */
@media (max-width: 760px) {
  #menuBtn { display: none !important; }
  .who { right: calc(var(--m-gap) + 8px); }
  .brand { padding-right: 64px; }
  .lockmenu { right: 0; }
}

/* =====================================================================
   TELEFON v3: bundark (som Apple Maps / Polarsteps) + tre små runde knapper
   ===================================================================== */
.ms-peek, .ms-chips { display: none; }
@media (max-width: 760px) {
  :root { --peek: calc(64px + var(--safe-b)); }
  /* Menuen tilbage i toppen ved siden af låsen */
  #menuBtn { display: grid !important; }
  .who { right: calc(var(--m-gap) + 56px); }
  .brand { padding-right: 112px; }
  .lockmenu { right: -48px; }
  /* Bundarket */
  .drawer {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: calc(100dvh - var(--safe-t) - 86px);
    z-index: 945; border-radius: 24px 24px 0 0; opacity: 1 !important; pointer-events: auto !important; display: flex;
    transform: translateY(calc(100% - var(--peek))); transition: transform .32s cubic-bezier(.2,.8,.2,1); padding-bottom: var(--safe-b);
    box-shadow: 0 -12px 40px -18px rgba(0,0,0,.55); border-bottom: 0;
  }
  .drawer.open { transform: translateY(0); }
  .drawer.folded .drawer-list, .drawer .drawer-list { display: block; }
  .ms-peek { display: block; padding: 8px 16px 10px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
  .ms-handle { display: block; width: 42px; height: 5px; border-radius: 3px; background: rgba(17,25,43,.22); margin: 0 auto 8px; }
  body.night .ms-handle { background: rgba(255,255,255,.25); }
  .ms-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ms-sum { display: grid; min-width: 0; }
  .ms-sum b { font-size: 17px; }
  .ms-sum small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-fit { border: 0; background: rgba(17,25,43,.07); color: var(--text); border-radius: 12px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; flex: none; }
  body.night .ms-fit { background: rgba(255,255,255,.08); }
  .ms-fit svg { width: 16px; height: 16px; }
  .ms-chips { display: grid; gap: 8px; padding: 2px 0 10px; }
  .ms-chiprow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
  .ms-chiprow::-webkit-scrollbar { display: none; }
  .ms-chip { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; background: rgba(17,25,43,.07); color: var(--text); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  body.night .ms-chip { background: rgba(255,255,255,.08); }
  .ms-chip.on { background: var(--ink); color: #fff; }
  body.night .ms-chip.on { background: #fff; color: var(--ink); }
  .ms-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
  .drawer-head { padding-top: 0; }
  .drawer-head h2 { display: none; }
  .drawer-head > .chip { display: none; }
  /* Tre små runde knapper i højre side (Afspil, Kortstil, Beskeder) */
  .dock { width: auto; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; gap: 10px; bottom: calc(var(--peek) + 12px + var(--rail) + 12px); max-height: none; overflow: visible; }
  .dock .dock-btn[data-act="list"], .dock .dock-btn[data-act="fit"], .dock .rail-only { display: none !important; }
  .dock .dock-btn { width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: 0 8px 20px -10px rgba(0,0,0,.55); }
  .dock .dock-btn span, .dock .dock-btn[data-act="play"] span { display: none !important; }
  .dock .dock-btn svg { width: 20px; height: 20px; }
  /* Indsæt pin lige over striben; beskeder og "ny version" ligeså */
  .fab-wrap { bottom: calc(var(--peek) + 12px); }
  .fab { width: 56px; height: 56px; }
  .upd-pill, .install-hint { bottom: calc(var(--peek) + 12px); right: calc(var(--m-gap) * 2 + 56px); }
  .leaflet-bottom { bottom: var(--peek); }
  body.tf-pop::before { display: none; }
}

@media (max-width: 760px) {
  .ms-down, .drawer.open .ms-up { display: none; }
  .drawer.open .ms-down { display: block; }
  /* Mens arket er oppe, er knapperne på kortet væk */
  body:has(.drawer.open) .fab-wrap, body:has(.drawer.open) .dock { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Indsæt pin viser altid +. Låst: et tryk beder hurtigt om koden og åbner så "Ny pin". Kigge-koder kan ikke sætte pins, så knappen er skjult for dem */
body.locked .fab .fab-plus { display: block !important; }
body.locked .fab .fab-lock, body.viewer .fab .fab-lock { display: none !important; }
body.viewer .fab-wrap { display: none !important; }

/* =====================================================================
   TELEFON v4: ingen stribe i bunden. Knappen Steder (rund, i højre side) åbner listen som popup
   ===================================================================== */
@media (max-width: 760px) {
  :root { --peek: var(--safe-b); }
  .drawer {
    left: var(--m-gap); right: var(--m-gap); top: calc(var(--m-gap) + var(--safe-t) + var(--m-bar) + 10px); bottom: calc(var(--m-gap) + var(--safe-b)); height: auto;
    border-radius: 22px; z-index: 1600; padding-bottom: 0;
    transform: translateY(14px) scale(.98); opacity: 0 !important; visibility: hidden; pointer-events: none !important;
    transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  }
  .drawer.open { transform: none; opacity: 1 !important; visibility: visible; pointer-events: auto !important; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  body:has(.drawer.open)::before { content: ''; position: fixed; inset: 0; z-index: 1500; background: rgba(11,17,29,.45); }
  .ms-peek { padding: 14px 12px 10px 16px; cursor: default; touch-action: auto; }
  .ms-handle { display: none; }
  .ms-close { width: 38px; height: 38px; flex: none; }
  .ms-row { gap: 8px; }
  .ms-sum { flex: 1; }
  /* Fire runde knapper: Steder, Afspil, Kortstil, Beskeder */
  .dock { bottom: calc(var(--m-gap) + var(--safe-b) + 56px + 12px); }
  .dock .dock-btn[data-act="list"] { display: grid !important; place-items: center; }
  .dock .dock-btn[data-act="list"].on { background: var(--ink); color: #fff; }
  .fab-wrap { bottom: calc(var(--m-gap) + var(--safe-b)); }
  .upd-pill, .install-hint { bottom: calc(var(--m-gap) + var(--safe-b)); }
  .leaflet-bottom { bottom: 0; }
}

@media (max-width: 760px) {
  .dock .dock-btn[data-act="list"] { position: relative; }
  .dock .dock-btn[data-act="list"].filtered::after { content: ''; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 2px var(--paper); }
}

/* Chips brydes over linjer (ingen side-scroll); lange rejsenavne afkortes */
@media (max-width: 760px) {
  .ms-chiprow { flex-wrap: wrap; overflow: visible; }
  .ms-chip { max-width: 100%; padding: 7px 12px; font-size: 13.5px; }
  .ms-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ms-chip i { flex: none; }
  .ms-more { background: none !important; box-shadow: inset 0 0 0 1px rgba(17,25,43,.18); color: var(--muted); }
  body.night .ms-more { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
}

/* År og rejse vælges med to knapper i Steder-popuppen; valget åbner som popup ovenpå */
.ms-picks { display: none; }
@media (max-width: 760px) {
  .ms-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 10px 16px; }
  .ms-pick { display: flex; align-items: center; gap: 7px; min-width: 0; border: 0; border-radius: 13px; padding: 10px 10px 10px 12px; background: rgba(17,25,43,.07); color: var(--text); font-weight: 600; font-size: 14px; text-align: left; }
  body.night .ms-pick { background: rgba(255,255,255,.08); }
  .ms-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-pick svg { width: 17px; height: 17px; flex: none; }
  .ms-pick .ms-chev { width: 14px; height: 14px; opacity: .6; }
  .ms-pick.on { background: var(--ink); color: #fff; }
  body.night .ms-pick.on { background: #fff; color: var(--ink); }
  .ms-pick .tf-dot { flex: none; }
  /* Valg-popuppen ligger over Steder-popuppen */
  .tb-group .tf-menu, .tb-group .tf[data-tf="trip"] .tf-menu { z-index: 1750; }
  body.tf-pop::before { display: block; content: ''; position: fixed; inset: 0; z-index: 1700; background: rgba(11,17,29,.35); pointer-events: none; }
}
@media (max-width: 760px) { .tb-group .timeline, .tb-group .tf { z-index: auto !important; } } /* ellers låses År/Rejse-popuppen inde under Steder-popuppen */

/* Lukkeknappen på et sted: altid tydelig, også på lyse fotos */
.sheet-close { width: 42px; height: 42px; background: rgba(11,17,29,.72) !important; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 18px -6px rgba(0,0,0,.6); }
.sheet-close svg { width: 20px; height: 20px; stroke-width: 2.6; }
.sheet-close:hover { background: rgba(11,17,29,.9) !important; }

/* År/Rejse-popuppen skal skille sig tydeligt ud fra Steder-popuppen bagved: sløret, mørkere baggrund + lysere kort med kant */
@media (max-width: 760px) {
  body.tf-pop::before { background: rgba(5,8,15,.55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .tb-group .tf-menu, .tb-group .tf[data-tf="trip"] .tf-menu { background: var(--paper); box-shadow: 0 0 0 1px rgba(17,25,43,.08), 0 30px 80px -20px rgba(0,0,0,.8); }
  body.night .tb-group .tf-menu { background: #2a3654; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 80px -20px rgba(0,0,0,.9); }
  body.night .tb-group .tf-item.on { background: rgba(224,122,95,.28); }
}
@media (max-width: 760px) { body.tf-pop::before, body.tf-pop:has(.drawer.open)::before { z-index: 1700 !important; display: block; } }

/* Alle luk-kryds er rød-orange med hvidt kryds, så de skiller sig ud fra de andre knapper */
.icon-btn[data-m="close"], .sheet-close, .icon-btn[data-msclose], .icon-btn[data-tfclose], .icon-btn[data-lbx="close"], .reel-ctl [data-p="stop"] {
  background: var(--terra) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(200,85,61,.9);
}
.icon-btn[data-m="close"]:hover, .sheet-close:hover, .icon-btn[data-msclose]:hover, .icon-btn[data-tfclose]:hover, .icon-btn[data-lbx="close"]:hover, .reel-ctl [data-p="stop"]:hover { background: #b6492f !important; }
.icon-btn[data-m="close"] svg, .icon-btn[data-msclose] svg, .icon-btn[data-tfclose] svg, .icon-btn[data-lbx="close"] svg { stroke-width: 2.6; }
.sheet-close { box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 18px -6px rgba(0,0,0,.6); }

/* Billedvisning: link til fotograf læsbart på mørk baggrund */
.lb-cap a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }
/* Telefon på langs (lav skærm): billedet fylder hele skærmen, knapper og tekst ligger ovenpå */
@media (max-height: 520px) and (orientation: landscape) {
  .lightbox .lb-stage { top: 0; bottom: 0; left: 0; right: 0; }
  .lightbox .lb-stage img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
  .lightbox .lb-top { z-index: 4; height: auto; padding: 10px max(14px, env(safe-area-inset-right)) 26px max(14px, env(safe-area-inset-left)); background: linear-gradient(rgba(0,0,0,.6), transparent); }
  .lightbox .lb-cap { z-index: 4; height: auto; padding: 26px 16px 10px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
  .lightbox .lb-cap p { font-size: 18px; margin: 0; }
  .lightbox .lb-nav { display: grid !important; z-index: 4; width: 54px; height: 54px; background: rgba(11,17,29,.65) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
  .lightbox .lb-prev { left: max(12px, env(safe-area-inset-left)); }
  .lightbox .lb-next { right: max(12px, env(safe-area-inset-right)); }
  .lightbox .lb-top .icon-btn { width: 46px; height: 46px; }
}
body:has(.lightbox.open) .upd-pill, body:has(.lightbox.open) .install-hint, body:has(.lightbox.open) .toasts { display: none; }

/* ---------- Rettelser fra fejl-scanningen (19-10) ---------- */
[hidden] { display: none !important; }
/* Fortryd-beskeden bliver synlig, så længe den kan trykkes */
.toast.has-act { animation-duration: 8s; }
@media (max-width: 760px) {
  /* Tryk uden for Steder-popuppen lukker den (trykket går igennem til kortet) */
  body:has(.drawer.open)::before { pointer-events: none; }
  /* År/Rejse-popuppen toner bare frem (ellers hopper den op fra midten) */
  .tb-group .tf.open .tf-menu { animation: tfpop .2s ease both; }
  /* Lav skærm (telefon på langs): knapperne i en række ved siden af + */
}
@keyframes tfpop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) and (max-height: 460px) {
  .dock { flex-direction: row; bottom: calc(var(--m-gap) + var(--safe-b) + 5px); right: calc(var(--m-gap) * 2 + 56px); }
}

/* Graf-kort kan trykkes på og vises stort */
.ch-click { cursor: pointer; }
.ch-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.ch-exp { width: 34px; height: 34px; border: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(17,25,43,.07); color: var(--muted); flex: none; }
body.night .ch-exp { background: rgba(255,255,255,.08); }
.ch-exp svg { width: 16px; height: 16px; }
.ch-click:hover .ch-exp { color: var(--terra); }
.ch-big { padding-top: 4px; }
.ch-bigwrap { display: grid; gap: 12px; }
.ch-bigwrap .ch-plot { height: 220px; }
.ch-cols.big { height: 220px; }
/* Store vandrette søjler: navnet fuldt ud på sin egen linje, søjle + tal under */
.ch-rows.big .ch-row { grid-template-columns: 1fr 40px; grid-template-areas: "l l" "t n"; gap: 4px 10px; padding: 8px 6px; }
.ch-rows.big .ch-label { grid-area: l; white-space: normal; overflow: visible; font-weight: 600; }
.ch-rows.big .ch-track { grid-area: t; }
.ch-rows.big b { grid-area: n; }

/* Forstør-knappen er tydelig (orange), og kortet løfter sig let ved hover */
.ch-exp { background: rgba(200,85,61,.14) !important; color: var(--terra) !important; }
body.night .ch-exp { color: #ee8a6f !important; }
.ch-click { transition: transform .15s, box-shadow .15s; }
.ch-click:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(224,122,95,.5), 0 14px 30px -18px rgba(0,0,0,.6); }
.dash-two .ch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dash-two .ch-head .cp-h3 { margin: 0; }
.ch-big .dev-box { margin: 0 !important; box-shadow: none; padding: 0; background: none; }
.ch-big .dev-box > .cp-h3 { display: none; }
.ch-big [data-a="devforget"] { display: none; }

/* Computer: navn og tal står i topbaren; kortet til venstre er væk (Bos ønske: der er så lidt info) */
.tb-brand { display: none; }
@media (min-width: 761px) {
  .tb-brand { display: grid; flex: 0 1 auto; min-width: 0; padding: 0 10px 0 8px; margin-right: 4px; cursor: pointer; line-height: 1.15; border-right: 1px solid rgba(17,25,43,.1); }
  body.night .tb-brand { border-color: rgba(255,255,255,.12); }
  .tb-brand b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
  .tb-brand small { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
  .tb-brand:hover b { color: var(--terra); }
  .side .brand { display: none; }
  .topbar > .tb-search { flex-basis: 240px; }
}
@media (min-width: 761px) and (max-width: 1500px) {
  .topbar .dock-btn span, .topbar .dock-btn[data-act="play"] span { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .tb-brand small { display: none; }
  .tb-brand b { font-size: 17px; max-width: 160px; }
}
.fld-note { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 6px; }

/* Datoer pr. rejse i Redigér pin */
.trip-dates { display: grid; gap: 8px; margin-top: -4px; }
.trip-dates .hint { margin: 0; font-size: 13px; }
.trip-date { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px 12px; border-radius: 14px; background: rgba(17,25,43,.05); border-left: 4px solid var(--c); }
body.night .trip-date { background: rgba(255,255,255,.05); }
.trip-date > span { grid-column: 1 / -1; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.trip-date > span i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.trip-date label { display: grid; gap: 3px; min-width: 0; }
.trip-date small { color: var(--muted); font-size: 12px; font-weight: 600; }
.trip-date input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid rgba(17,25,43,.14); border-radius: 10px; padding: 8px 10px; background: transparent; color: var(--text); font: inherit; }
body.night .trip-date input { border-color: rgba(255,255,255,.14); }

/* Bydel: link til byen den hører til */
.about-parent { margin-left: 14px; }

/* Tegnestift-nåle (valg i Indstillinger) */
.tack { width: 30px; height: 42px; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(17,25,43,.35)); transform-origin: 50% 100%; transition: transform .15s; }
.tack svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tack .tk-body { fill: var(--c, #c8553d); stroke: rgba(0,0,0,.28); stroke-width: 1; }
.tack .tk-dot { fill: rgba(0,0,0,.32); }
.tack:hover, .tack.active { transform: scale(1.22); }
.tack.active .tk-dot { fill: #fff; }
.tack-cluster { border-radius: 50%; display: grid; place-items: center; background: #c8553d; color: #fff; font: 700 14px/1 var(--sans, system-ui); box-shadow: 0 0 0 5px rgba(200,85,61,.28), 0 4px 10px rgba(17,25,43,.35); cursor: pointer; }
.pin-prev { display: grid; place-items: center; background: rgba(17,25,43,.06) !important; }
body.night .pin-prev { background: rgba(255,255,255,.07) !important; }
.pin-prev .pp-tack { width: 22px; height: 31px; --c: #c8553d; }
.pin-prev .pp-tack svg { width: 100%; height: 100%; }
.pin-prev .pp-tack .tk-body { fill: var(--c); }
.pin-prev .pp-tack .tk-dot { fill: rgba(0,0,0,.32); }
.pin-prev .pp-photo { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #c8553d; background: linear-gradient(135deg, #8fb3c9, #d9c49a); }

/* Kørt rute: til/fra i Kortstil-vælgeren (fylder hele bredden under kortstilene) */
.route-toggle { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(17,25,43,.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
body.night .route-toggle { background: rgba(255,255,255,.07); }
.route-toggle .rt-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(200,85,61,.14); color: var(--terra); flex: none; }
.route-toggle .rt-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.route-toggle > span:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.route-toggle b { font-size: 13px; }
.route-toggle small { font-size: 11.5px; color: var(--muted); }
.route-toggle .rt-sw { width: 38px; height: 22px; border-radius: 11px; background: rgba(17,25,43,.2); position: relative; flex: none; transition: background .2s; }
.route-toggle .rt-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.route-toggle.on .rt-sw { background: var(--terra); }
.route-toggle.on .rt-sw::after { transform: translateX(16px); }
.trip-road { stroke-linejoin: round; stroke-linecap: round; }

/* Kortets linjelag (rejser, ruter) må ikke ramme den generelle ikon-regel svg { 20px } */
.leaflet-pane > svg { width: auto; height: auto; }

/* Rækkefølge-nummer på nålene, når en rejse er valgt */
.pin-num { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: #fff; color: #11192b; border: 2px solid var(--c, #c8553d); font: 800 11px/16px var(--sans, system-ui); text-align: center; box-shadow: 0 2px 5px rgba(17,25,43,.35); z-index: 3; pointer-events: none; }
.tack { position: relative; }
.tack .pin-num { top: -8px; right: -10px; }
.pin.small .pin-num { top: -7px; right: -7px; }
/* Klynge på en valgt rejse: rækkefølgen ("4–5") i hvid pille som numrene på nålene */
.stack.ordered b { width: auto; min-width: 26px; padding: 0 6px; border-radius: 12px; background: #fff; color: #11192b; border: 2px solid #c8553d; white-space: nowrap; font-size: 11px; }
.tack-cluster.ordered { font-size: 12px; white-space: nowrap; }

/* Start- og målflag på rejsens første og sidste nål */
.pin-num { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.pin-num svg { width: 9px; height: 9px; fill: currentColor; stroke: none; flex: none; }
.pin-num.start { background: #2e8b57; color: #fff; border-color: #fff; }
.pin-num.end { background: #11192b; color: #fff; border-color: #fff; }
/* Rute-editor */
.trip-road.editable { cursor: pointer; }
.leg-pop .leaflet-popup-content-wrapper { border-radius: 16px; background: #fffaf2; color: var(--ink); box-shadow: var(--shadow); }
.leg-pop .leaflet-popup-tip { background: #fffaf2; }
body.night .leg-pop .leaflet-popup-content-wrapper, body.night .leg-pop .leaflet-popup-tip { background: #1d2a44; color: #eef1f6; }
body.night .leg-pop .btn:not(.btn-primary) { color: #eef1f6; }
.leg-pop .leaflet-popup-content { margin: 14px 14px 12px; }
.leg-ed { display: grid; gap: 8px; min-width: 220px; font-family: var(--sans, system-ui); }
.leg-ed .le-title { font-size: 15px; }
.leg-ed .le-info { color: var(--muted); font-size: 12.5px; }
.leg-ed .le-btn { width: 100%; justify-content: center; }
.leg-ed .le-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.leg-ed .le-reset { font-size: 12.5px; text-align: left; padding: 0; }
.leg-ed .le-hint { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.via-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #11192b; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: grab; box-sizing: border-box; }
.leg-alt { cursor: pointer; }
.pin-tip-mini { font: 600 12px var(--sans, system-ui); }

/* Samlet km for den valgte rejse (skilt nederst til venstre på kortet) */
.trip-km { position: fixed; left: 16px; bottom: calc(24px + var(--safe-b)); z-index: 880; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 16px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); box-sizing: border-box; pointer-events: none; }
.trip-km .tk-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--c, var(--terra)); color: #fff; flex: none; }
.trip-km .tk-ico svg { width: 20px; height: 20px; }
.trip-km .tk-txt { display: grid; gap: 1px; min-width: 0; }
.trip-km b { font: 700 15px/1.2 var(--sans); }
.trip-km small { font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) { .trip-km { left: var(--m-gap, 10px); bottom: calc(var(--m-bot, 84px) + 4px); } }
/* Kundeudgaven: skiltet kan trykkes og åbner turens strækninger */
.trip-km.tk-click { pointer-events: auto; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.trip-km.tk-click:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); }
.trip-km.tk-click:focus-visible { outline: 2px solid var(--c, var(--terra)); outline-offset: 2px; }
.trip-km .mr-chev { width: 20px; height: 20px; margin-left: 2px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Telefon: valgt rejse/år som pille under toppen (computeren har filtrene i topbaren) */
.m-filter { display: none; }
@media (max-width: 760px) {
  .m-filter { display: flex; position: fixed; left: var(--m-gap, 10px); right: calc(var(--m-gap, 10px) + 60px); z-index: 860; gap: 6px; align-items: center; pointer-events: none; }
  .m-filter > * { pointer-events: auto; }
  .mf-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 19px; background: #11192bE6; color: #fff; font: 600 13.5px var(--sans); box-shadow: 0 4px 14px rgba(17,25,43,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .mf-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--terra)); flex: none; }
  .mf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .mf-chip svg { width: 16px; height: 16px; flex: none; }
  .mf-chip .mf-caret { width: 15px; height: 15px; opacity: .75; }
  .mf-chip.mf-ghost { background: #11192bB3; }
  .mf-x { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: #d64532; color: #fff; box-shadow: 0 4px 14px rgba(17,25,43,.3); }
  .mf-x svg { width: 18px; height: 18px; stroke-width: 2.4; }
  /* Km-skiltet helt nede i hjørnet, mindre og roligere */
  .trip-km { left: 8px; bottom: calc(8px + var(--safe-b)); padding: 6px 10px 6px 6px; gap: 8px; border-radius: 13px; max-width: calc(100vw - 96px); }
  .trip-km .tk-ico { width: 26px; height: 26px; border-radius: 8px; }
  .trip-km .tk-ico svg { width: 16px; height: 16px; }
  .trip-km b { font-size: 13px; }
  .trip-km small { font-size: 10.5px; }
  body.tf-pop .m-filter, body.tf-pop .trip-km, body:has(#drawer.open) .trip-km, body:has(#modal.open) .trip-km, body:has(#sheet.open) .trip-km { display: none; }
}

/* Ruter-knappen: tydelig når ruterne vises */
.dock-btn.route-btn.on svg { color: var(--terra); }
.dock-btn.route-btn:not(.on) svg { opacity: .55; }
.dock-btn.route-btn.on { background: transparent; }
body.night .dock-btn.route-btn.on { background: transparent; }
@media (max-width: 760px) {
  .dock .dock-btn.route-btn.on { background: var(--terra); color: #fff; }
  .dock .dock-btn.route-btn.on svg { color: #fff; }
  body.night .dock .dock-btn.route-btn.on { background: var(--terra); color: #fff; }
}

/* Ruter-popup */
.popover.route-pop { grid-template-columns: 1fr; width: 320px; max-width: calc(100vw - 20px); box-sizing: border-box; gap: 6px; padding: 10px; }
.route-pop .rp-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 4px; }
.route-pop .rp-head b { font: 700 15px var(--sans); }
.route-pop .rp-head small { font-size: 11.5px; color: var(--muted); }
.route-pop .route-toggle { margin-top: 0; }
.route-toggle.dis { opacity: .45; }
.route-toggle:not(.on) .rt-ico { background: rgba(17,25,43,.08); color: var(--muted); }
body.night .route-toggle:not(.on) .rt-ico { background: rgba(255,255,255,.08); }
@media (max-width: 760px) { .popover.route-pop { width: auto; grid-template-columns: 1fr; } }

/* Klynge med rækkefølge i tegnestift-tilstand: bredere pille i stedet for en for lille cirkel */
.tack-cluster.ordered { padding: 0 10px; border-radius: 999px; box-sizing: border-box; }
.tack-cluster b { white-space: nowrap; }

/* ---------- Rettelser fra den dybe scanning (1.0.63) ---------- */
/* Computer: Kortstil- og Ruter-popuppen ligger over et åbent sted */
@media (min-width: 761px) { .popover { z-index: 980; } }
/* Smal computer og iPad: topbaren må ikke flyde over, når Ruter-knappen er med */
@media (min-width: 761px) {
  .tb-group { flex: 0 1 auto; min-width: 0; }
  .tb-group .timeline, .tb-group .tf { min-width: 0; }
  .tf-btn { max-width: 100%; min-width: 0; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .topbar .dock-btn[data-act="fit"] { display: none; } /* navnet i topbaren viser også alt */
}
/* Telefon: rejse-pillen under navnekortet, også på iPhone-hjemmeskærm med statuslinje */
@media (max-width: 760px) {
  .m-filter { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + var(--m-bar, 56px) + 10px); }
}
/* Under afspilning skal pillen og km-skiltet væk */
body.playing .m-filter, body.playing .trip-km, body.playing .leg-pop { display: none !important; }
/* Datofelterne for ekstra rejser på iPhone, som de andre datofelter */
.trip-date input[type="date"] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; min-height: 44px; text-align: left; }
.trip-date input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Bred, usynlig tryk-streg på en strækning, der kan rettes */
.trip-hit { cursor: pointer; }

/* Tryk-stregen på ruter er død, mens man sætter en ny nål eller afspiller */
body.placing .leaflet-pane > svg path.trip-hit, body.playing .leaflet-pane > svg path.trip-hit { pointer-events: none; }
/* Tegnestift-klyngen med rækkefølge vokser med teksten og bliver i midten */
.tc-wrap { display: flex; justify-content: center; }
.tc-wrap > .tack-cluster { flex: none; width: max-content; }

/* Advarsel ved et usandsynligt langt besøg */
.td-warn { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: #b4432f; background: rgba(180,67,47,.1); padding: 6px 10px; border-radius: 8px; }
body.night .td-warn { color: #f0a08e; background: rgba(224,122,100,.15); }

/* Admin-listen: mærke ved datoer der ser forkerte ud */
.cp-warn { display: inline-block; margin-top: 3px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: #c0412c; padding: 2px 8px; border-radius: 999px; cursor: help; }

/* Blyant midt på en strækning, der kan rettes */
.leg-pen { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c, #c8553d); border: 2.5px solid var(--c, #c8553d); box-shadow: 0 2px 6px rgba(17,25,43,.35); cursor: pointer; box-sizing: border-box; transition: transform .15s; }
.leg-pen:hover { transform: scale(1.15); }
.leg-pen svg { width: 16px; height: 16px; stroke-width: 2.2; }
body.placing .leg-pen-icon, body.playing .leg-pen-icon { display: none !important; } /* hele markøren, ellers tager den trykket */
/* "Ret ruten hertil" på stedets kort */
.sheet-route { padding: 4px 0 6px; }
.sheet-route .btn { width: 100%; justify-content: center; gap: 8px; }
.sheet-route .btn svg { width: 16px; height: 16px; }
/* Forklaring i Ruter-popuppen */
.rp-help { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(127,127,127,.45); margin-top: 2px; }
.rp-help .rp-pen { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--terra); color: var(--terra); flex: none; }
.rp-help .rp-pen svg { width: 14px; height: 14px; }
.rp-help b { font-size: 13px; display: block; }
.rp-help small { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Ruter-popuppen kan rulle på lave skærme */
.popover.route-pop { max-height: calc(100dvh - 120px); overflow-y: auto; }

/* ---------- Gæster ---------- */
body.guest .who, body.guest #who { display: none !important; }
body.guest #dock [data-act="notify"], body.guest .rp-help { display: none !important; }
.guest-note { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(42,127,143,.12); }
.guest-note b { font-size: 14px; }
.guest-note small { font-size: 12.5px; color: var(--muted); }
.guest-card small + small { margin-top: 2px; }
.guest-card.expired { opacity: .6; }
.gw-chip.on { background: var(--ink); color: #fff; }
body.night .gw-chip.on { background: #fff; color: var(--ink); }
.qr-box { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; margin-top: 10px; }
.qr-box img { width: 220px; height: 220px; image-rendering: pixelated; }
.qr-box small { color: #4a5568; text-align: center; font-size: 12.5px; }

/* Gæster har deres egen blå farve, så man ikke forveksler en gæst med familien */
:root { --guest: #3d8fd6; --guest-d: #2f78bb; }
.guest-tag { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--guest); color: #fff; font: 700 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.cp-guests { margin-top: 28px; padding: 6px 18px 20px; border-radius: 22px; background: rgba(61,143,214,.07); border: 1px solid rgba(61,143,214,.25); }
.cp-guests .cp-h3 { color: var(--guest); }
.guest-card { border-left: 4px solid var(--guest); }
.cp-guests .cp-invite { border-color: rgba(61,143,214,.5); background: rgba(61,143,214,.06); }
.cp-guests .cp-invite-title { color: var(--guest); }
.cp-guests .btn-primary, .modal-card:has(.guest-eyebrow) .btn-primary { background: var(--guest); }
.cp-guests .btn-primary:hover, .modal-card:has(.guest-eyebrow) .btn-primary:hover { background: var(--guest-d); }
.modal-card:has(.guest-eyebrow) { border-top: 4px solid var(--guest); }
.guest-eyebrow { color: var(--guest) !important; }
.modal-card:has(.guest-eyebrow) .gw-chip.on { border-color: var(--guest); background: rgba(61,143,214,.18); }

/* Backup: én rolig kolonne, to lige store knapper og vejledningen i samme bredde */
.bk-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; }
.bk-wrap .cp-lead { margin: 0 auto; }
.bk-quick { grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 0; }
.bk-quick .cp-qbtn { padding: 22px 22px 20px; min-width: 0; align-content: start; }
.bk-quick .cp-qbtn svg { width: 30px; height: 30px; }
.bk-quick .cp-qbtn b { font-size: 16.5px; margin-top: 2px; }
.bk-quick .cp-qbtn small { font-size: 13.5px; line-height: 1.45; }
.bk-wrap .bk-help { margin: 0; padding: 26px 30px; max-width: none; width: auto; justify-self: stretch; }
.bk-wrap .bk-help .cp-h3 { margin-top: 0; }
.bk-wrap .bk-progress { margin: 0; }
@media (max-width: 640px) { .bk-quick { grid-template-columns: 1fr; } .bk-wrap .bk-help { padding: 20px; } }

/* Musikvalg under Indstillinger */
.music-btn .mus-ico { display: grid; place-items: center; font-size: 18px; background: rgba(61,143,214,.14); color: var(--text); }
.music-btn.on .mus-ico { background: var(--terra); color: #fff; }

/* Afspilning på telefon: tynd bjælke foroven, knapperne bor i den nederste bjælke, teksten står over den */
@media (max-width: 760px) {
  body.playing .bar.top { height: calc(34px + env(safe-area-inset-top, 0px)); }
  body.playing .bar.bot { height: calc(78px + var(--safe-b, 0px)); }
  .reel-prog { top: calc(34px + env(safe-area-inset-top, 0px)); }
  .reel-ctl { bottom: calc(12px + var(--safe-b, 0px)); background: transparent; box-shadow: none; padding: 0; }
  .reel { left: 4vw; width: 92vw; bottom: calc(78px + 16px + var(--safe-b, 0px)); }
  .reel-photo { border-width: 4px; border-radius: 14px; }
  .reel-text { margin-top: 12px; }
  .reel-text .eyebrow { font-size: 10.5px; letter-spacing: .12em; line-height: 1.4; }
  .reel-text h2 { font-size: clamp(28px, 8vw, 38px); line-height: 1.05; }
  .reel-text p { -webkit-line-clamp: 2; font-size: 14.5px; }
}

/* Sprogvalg: DA/EN */
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--muted); }
.lang-btns { display: flex; gap: 6px; }
.lang-btns .chip { padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.lang-btns .chip.on { background: var(--terra); color: #fff; border-color: var(--terra); }
.gate-card { position: relative; }
.gate-lang { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; }
.gate-lang button { border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--muted); font: 700 11px/1 Inter, system-ui, sans-serif; padding: 6px 8px; border-radius: 8px; letter-spacing: .06em; }
.gate-lang button.on { background: var(--terra); border-color: var(--terra); color: #fff; }

/* Oversigt: smagsprøve-flisen er blå som selve smagsprøven */
.dash-tile.demo { border-color: rgba(61,143,214,.45); background: linear-gradient(135deg, rgba(61,143,214,.16), rgba(61,143,214,.05)); }
.dash-tile.demo b { color: var(--guest); }

/* Sandkassen (smagsprøven): ingen hængelås, ingen administration, ingen beskeder */
body.kunde #who, body.kunde .who, body.kunde [data-act="notify"], body.kunde [data-o="notify"] { display: none !important; }
body.sandbox [data-o="logout"]:not(.link) { display: none !important; }

/* Skyens demo: link til simulationen af oprettelse og betaling */
.demo-signup { display: block; margin-top: 12px; text-align: center; font-weight: 600; color: var(--terra-2); text-decoration: none; }
.demo-signup:hover { text-decoration: underline; }
body.sandbox .demo-signup { display: none; }

/* Færge: lille skib midt på sejlruten */
.ferry-icon { background: none; border: 0; }
.ferry { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--c, var(--terra)); display: grid; place-items: center; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5); }
.ferry svg { width: 17px; height: 17px; fill: none; stroke: var(--c, var(--terra)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.placing .ferry-icon, body.playing .ferry-icon { display: none; }

/* Test-demoen: simuleret abonnement (bjælke, betalingsvindue, Mit abonnement). Kun med A.payDemo */
.pay-bar { position: fixed; z-index: 1500; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(11,17,29,.9); color: #fff; font-size: 14px; box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); backdrop-filter: blur(10px); max-width: calc(100vw - 24px); }
.pay-bar > span { display: grid; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.pay-bar b { color: #f2c14e; }
.pay-bar.paid b { color: #7fe0a8; }
.pay-bar .pd-prog { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.pay-bar .pd-prog i { display: block; height: 100%; background: #f2c14e; transition: width .6s; }
.pay-bar button { flex: none; border: 0; border-radius: 999px; padding: 9px 13px; background: rgba(255,255,255,.12); color: #fff; font: 700 13.5px Inter, system-ui, sans-serif; cursor: pointer; }
.pay-bar button:hover { background: rgba(255,255,255,.22); }
.pay-bar button.hot { background: var(--terra); }
.pay-bar [data-pd="play"], .pay-bar [data-pd="ff"] { width: 38px; padding: 9px 0; }
body.playing .pay-bar, body:has(.drawer.open) .pay-bar { display: none; }
@media (max-width: 760px) {
  .pay-bar { left: 10px; right: 10px; transform: none; top: calc(env(safe-area-inset-top, 0px) + 122px); bottom: auto; font-size: 13px; padding-left: 12px; }
  .pay-bar > span { flex: 1; }
  .pay-bar [data-pd="sub"] { padding: 9px 11px; }
}
.pd .pd-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.pd .pd-plan { display: grid; gap: 2px; text-align: left; padding: 14px; border-radius: 16px; border: 2px solid rgba(127,140,160,.3); background: transparent; color: inherit; cursor: pointer; }
.pd .pd-plan.on { border-color: var(--terra); background: rgba(200,85,61,.1); }
.pd .pd-plan b { font-size: 16px; }
.pd .pd-plan span { font-family: var(--serif); font-style: italic; font-size: 26px; }
.pd .pd-plan small { color: var(--muted); font-size: 12.5px; }
.pd .pd-auto { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 0 0 12px; cursor: pointer; }
.pd .pd-auto input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--terra); }
.pd .pd-pay { padding: 16px; border-radius: 16px; background: #fff; color: #1b2333; }
.pd .pd-test { margin: -16px -16px 12px; padding: 7px; border-radius: 16px 16px 0 0; background: #f6a623; color: #3b2600; font-size: 12px; font-weight: 700; text-align: center; }
.pd .pd-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.pd .pd-methods button { padding: 11px 4px; border-radius: 10px; border: 1.5px solid #dfe5ec; background: #fff; color: #1b2333; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.pd .pd-methods button.on { border-color: #635bff; box-shadow: 0 0 0 3px rgba(99,91,255,.15); }
.pd .pd-paybtn { width: 100%; padding: 14px; border: 0; border-radius: 10px; background: #635bff; color: #fff; font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
.pd .pd-pay small { display: block; margin-top: 8px; text-align: center; color: #8a93a3; font-size: 12px; }
.pd .pd-later { display: block; margin: 14px auto 0; }
.pd .spin { display: inline-block; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: pdspin .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes pdspin { to { transform: rotate(360deg); } }
.pd .pd-ok { width: 64px; height: 64px; margin: 6px auto; border-radius: 50%; background: rgba(92,200,140,.18); display: grid; place-items: center; }
.pd .pd-ok svg { width: 32px; height: 32px; fill: none; stroke: #2fa66a; stroke-width: 2.5; }
.pd .pd-rows { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px; border-radius: 14px; background: rgba(127,140,160,.1); }
.pd .pd-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.pd .pd-rows span { color: var(--muted); }
.pd .btn { width: 100%; margin-top: 8px; }
.pd .pd-danger { color: #d1495b; }

/* Smagsprøven: nyt sted som guide (et trin ad gangen, Tilbage og Næste) */
#pinForm.wiz [data-wstep]:not(.w-on) { display: none !important; }
#pinForm.wiz .wiz-lead { margin: 0 0 6px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.m-foot.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-foot.wiz-foot .wiz-dots { display: flex; gap: 6px; }
.m-foot.wiz-foot .wiz-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(127,140,160,.35); }
.m-foot.wiz-foot .wiz-dots i.on { background: var(--terra); }
body.kunde #fabMenu::before { content: 'Tilføj et sted'; display: block; padding: 4px 6px 8px; font-weight: 700; font-size: 15px; color: var(--muted); }
html[lang="en"] body.kunde #fabMenu::before { content: 'Add a place'; }

/* Smagsprøven: nyt sted er gemt (NY-mærke på nålen og en tydelig bekræftelse) */
.pin-new { position: absolute; top: -8px; left: -10px; z-index: 3; padding: 3px 7px; border-radius: 999px; background: #f2c14e; color: #1b2333; font: 800 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; box-shadow: 0 3px 8px -2px rgba(0,0,0,.45); }
.is-new .pin-face, .tack.is-new svg { animation: newPulse 1.6s ease-in-out infinite; }
@keyframes newPulse { 50% { box-shadow: 0 0 0 8px rgba(242,193,78,.35); transform: scale(1.06); } }
.new-ok { text-align: center; padding-top: 26px; }
.new-ok h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; margin: 8px 0 6px; }
.new-ok-ico { width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; background: rgba(92,200,140,.18); display: grid; place-items: center; }
.new-ok-ico svg { width: 34px; height: 34px; fill: none; stroke: #2fa66a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.new-ok-btns { display: grid; gap: 8px; margin-top: 16px; }
.new-ok-btns .link { margin-top: 4px; }

/* Ny tur: guiden og det lille navnefelt */
.tw .wiz-lead { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.tw .tw-count { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.tw .tw-list { display: grid; gap: 6px; max-height: 46vh; overflow: auto; padding-right: 2px; }
.tw .tw-row { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 14px; background: rgba(127,140,160,.1); cursor: pointer; }
.tw .tw-row input { width: 22px; height: 22px; flex: none; accent-color: var(--terra); }
.tw .tw-row b { display: block; font-size: 15px; }
.tw .tw-row small { color: var(--muted); font-size: 13px; }
.tw .tw-preview { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(127,140,160,.1); margin: 0 0 14px; }
.tw .tw-preview i { width: 34px; height: 6px; border-radius: 3px; background: var(--c); }
.tw .tw-preview small { margin-left: auto; color: var(--muted); }
.trip-ask { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.trip-ask input { flex: 1 1 180px; min-width: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(127,140,160,.35); background: transparent; color: inherit; font: inherit; }

/* Smagsprøven: tur-vælger som knap + liste */
#pinForm.wiz #tripPick { display: none !important; }
.trip-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(127,140,160,.35); background: rgba(127,140,160,.08); color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.trip-btn span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; opacity: .7; }
.tb-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.trip-pop { z-index: 3000; display: flex; flex-direction: column; padding: 20px; border-radius: 26px; background: var(--paper, #1b2333); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
body.night .trip-pop, body.dark .trip-pop { background: #18233a; }
.trip-pop .tp-head b { display: block; font-size: 20px; font-family: var(--serif); font-style: italic; font-weight: 400; }
.trip-pop .tp-head small { color: var(--muted); }
.trip-pop .tp-q { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(127,140,160,.35); background: transparent; color: inherit; font: inherit; }
.trip-pop .tp-list { flex: 1; overflow: auto; display: grid; align-content: start; gap: 6px; margin: 12px 0; }
.trip-pop .tp-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(127,140,160,.1); color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.trip-pop .tp-row.on { border-color: var(--terra); background: rgba(47,127,184,.14); }
.trip-pop .tp-row span { flex: 1; }
.trip-pop .tp-row em { font-style: normal; font-weight: 800; color: var(--terra); }
.trip-pop .tp-foot { display: flex; gap: 8px; justify-content: space-between; }
/* Guiden: kortet let sløret bag trin 3 og 4 */
#map { transition: filter .35s; }
body.wiz-blur #map { filter: blur(3px) brightness(.85); }

/* Smagsprøven: "Hvor er stedet?" med store, farvede valg (find dem på farven, ikke kun teksten) */
body.kunde .fab-menu { width: min(420px, calc(100vw - 20px)); padding: 16px 14px 10px; border-radius: 24px; gap: 0; }
body.kunde #fabMenu::before { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 23px; color: var(--text, #fff); padding: 0 6px 12px; }
body.kunde .fab-menu button { --k: var(--terra); width: 100%; gap: 14px; padding: 12px; margin: 0 0 8px; border-radius: 18px; background: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); }
body.kunde .fab-menu button:hover { background: color-mix(in srgb, var(--k) 22%, transparent); }
body.kunde .fab-menu button svg { width: 48px; height: 48px; padding: 12px; border-radius: 15px; background: var(--k); color: #fff; flex: none; }
body.kunde .fab-menu b { font-size: 17.5px; line-height: 1.25; }
body.kunde .fab-menu small { font-size: 14.5px; line-height: 1.35; }
body.kunde .fab-menu [data-add="here"] { --k: #2fa66a; }
body.kunde .fab-menu [data-add="click"] { --k: #2f7fb8; }
body.kunde .fab-menu [data-add="search"] { --k: #d9a441; }
body.kunde .fab-menu [data-add="photos"] { --k: #8a5cc8; }

/* Kortstil og Ruter: overskrift med ✕, og dock-knappen markeret mens popuppen er åben */
.popover .pop-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 6px 6px; }
.popover .pop-head b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; }
.popover .rp-head { position: relative; padding-right: 44px; }
.popover .rp-head .pop-x { position: absolute; right: 0; top: 0; }
.pop-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--terra); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.pop-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.dock .dock-btn.pop-on { background: var(--terra) !important; color: #fff !important; border-color: var(--terra) !important; }
.dock .dock-btn.pop-on span { color: rgba(255,255,255,.9) !important; }
/* Telefon: et tryk må ikke efterlade knappen i "mus over"-tilstand (den så gennemsigtig ud) */
@media (hover: none) {
  .dock-btn:hover, body.night .dock-btn:hover { background: inherit; }
  .dock .dock-btn:hover:not(.on):not(.pop-on) { background: var(--glass); }
}

/* Smagsprøven, telefon: mens Steder-listen er åben, er topbjælken væk og listen går helt op */
@media (max-width: 760px) {
  body.kunde:has(.drawer.open) .brand, body.kunde:has(.drawer.open) #mFilter, body.kunde:has(.drawer.open) #payBar { opacity: 0; visibility: hidden; pointer-events: none; }
  body.kunde .drawer { top: calc(var(--m-gap) + var(--safe-t)); }
}

/* Smagsprøven: kortet let sløret bag alle popups (men skarpt, mens man trækker en ny nål eller peger på kortet) */
body.kunde:is(:has(#modal.open), :has(.popover.open), :has(.drawer.open), :has(.fab-wrap.open)):not(.wiz-sharp):not(.placing) #map { filter: blur(3px) brightness(.85); }
/* Ruter og Kortstil: fast baggrund og et ordentligt kryds i overskriften */
body.kunde .popover { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.kunde .route-pop .route-toggle { background: rgba(127,140,160,.12); }
.route-pop .rp-head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 2px 2px 8px 6px; }
.route-pop .rp-head b { grid-column: 1; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; }
.route-pop .rp-head small { grid-column: 1; grid-row: 2; }
.popover .rp-head .pop-x { position: static; grid-column: 2; grid-row: 1 / span 2; }
.popover .rp-head { padding-right: 2px; }

/* Smagsprøven: farver der skiller tingene ad (ikke blå i blå) og tydelig tekst */
body.kunde { --muted: #b7c2d6; }
body.kunde .route-toggle { --k: #2f7fb8; padding: 12px; gap: 12px; }
body.kunde .route-toggle[data-rt="lines"] { --k: #2f7fb8; }
body.kunde .route-toggle[data-rt="roads"] { --k: #e07a3a; }
body.kunde .route-toggle[data-rt="home"] { --k: #2fa66a; }
body.kunde .route-toggle[data-rt="km"] { --k: #d9a441; }
body.kunde .route-toggle[data-rt="nums"] { --k: #8a5cc8; }
body.kunde .route-toggle .rt-ico { width: 42px; height: 42px; border-radius: 13px; background: var(--k); color: #fff; }
body.kunde .route-toggle .rt-ico svg { width: 22px; height: 22px; }
body.kunde .route-toggle:not(.on) .rt-ico { background: rgba(127,140,160,.25); color: var(--muted); }
body.kunde .route-toggle.on .rt-sw { background: var(--k); }
body.kunde .route-toggle b { font-size: 16.5px; }
body.kunde .route-toggle small { font-size: 14px; line-height: 1.35; }
body.kunde .route-toggle .rt-sw { width: 46px; height: 28px; border-radius: 14px; }
body.kunde .route-toggle .rt-sw::after { width: 22px; height: 22px; }
body.kunde .route-toggle.on .rt-sw::after { transform: translateX(18px); }
body.kunde .rp-help b { font-size: 16px; }
body.kunde .rp-help small { font-size: 14px; line-height: 1.45; }
/* Kortstil: større navne under billederne */
body.kunde #layerPop .style-btn { font-size: 15px; font-weight: 600; }
/* Steder-listen og menuen: større, klarere tekst */
body.kunde .drawer-list b, body.kunde .menu-list b { font-size: 17px; }
body.kunde .drawer-list small, body.kunde .menu-list small { font-size: 14.5px; }

/* Smagsprøven: menuen med en farve pr. punkt (ikke blå i blå) */
body.kunde .menu-list [data-o] .mi { --k: #6b85a8; background: var(--k) !important; color: #fff !important; }
body.kunde .menu-list [data-o] .mi svg { stroke: #fff; }
body.kunde .menu-list [data-o="plan"] .mi { --k: #c99a2e; }
body.kunde .menu-list [data-o="restart"] .mi { --k: #e07a3a; }
body.kunde .menu-list [data-o="trips"] .mi { --k: #8a5cc8; }
body.kunde .menu-list [data-o="install"] .mi { --k: #2fa66a; }
body.kunde .menu-list [data-o="about"] .mi { --k: #6b85a8; }
/* Navnet og tallene øverst kan trykkes på */
@media (max-width: 760px) { body.kunde .brand .brand-title, body.kunde .brand .stats { cursor: pointer; } }

/* Smagsprøven: Steder-listen med turens farve (stribe + navn) og farvede vælgere */
body.kunde .drawer-list .item.has-trip { position: relative; box-shadow: inset 4px 0 0 var(--tc); padding-left: 14px; }
body.kunde .drawer-list .it-trip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--text, #fff); font-style: normal; font-size: 12.5px; font-weight: 600; }
body.kunde .drawer-list .it-trip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
body.kunde .drawer-list h3 { color: #f2c14e; font-size: 18px; }
body.kunde .ms-pick[data-mspick="year"] > svg:first-child { color: #d9a441; }
body.kunde .ms-pick[data-mspick="trip"] > svg:first-child { color: #b48be6; }
body.kunde .ms-fit svg { color: #5cc88c; }

/* Smagsprøven, telefon: Ruter står fast øverst (ikke centreret), og hjælpeteksten har fast højde, så kontakterne ikke hopper */
@media (max-width: 760px) {
  body.kunde .popover.route-pop { top: calc(var(--m-gap, 12px) + var(--safe-t, 0px) + 12px); transform: translateY(8px); }
  body.kunde .popover.route-pop.open { transform: none; }
}
body.kunde .route-pop .rp-help { min-height: 108px; align-items: flex-start; }

/* Smagsprøven: Kortstil bor i menuen under "Udseende" (én knap mindre på kortet) */
body.kunde .dock [data-act="layers"] { display: none !important; }
.menu-sec { margin: 10px 4px 2px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-sub { margin: 4px 4px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.menu-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-styles .style-btn { font-size: 14px; }

/* Smagsprøven: DA/EN som små knapper i menuens top, og kortstilene som fliser */
.menu-lang { display: flex; gap: 4px; margin-left: auto; margin-right: 10px; align-self: center; }
.menu-lang button { border: 1px solid rgba(127,140,160,.35); background: transparent; color: var(--muted); font: 700 12.5px/1 var(--sans, Inter), sans-serif; padding: 9px 11px; border-radius: 10px; letter-spacing: .06em; }
.menu-lang button.on { background: var(--terra); border-color: var(--terra); color: #fff; }
.lang-row[hidden] { display: none !important; }
.menu-styles .style-btn { display: grid; justify-items: center; gap: 6px; width: auto; min-width: 0; padding: 8px; text-align: center; font-size: 13.5px; line-height: 1.2; }
.menu-styles .style-btn .sw { width: 100%; height: 46px; border-radius: 10px; }

/* Smagsprøven: menu som rækker med › og en stille fod */
.mrows { gap: 8px; }
.mrows .mrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 18px; border: 0; background: rgba(127,140,160,.1); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mrows .mrow > span:nth-child(2) { flex: 1; min-width: 0; }
.mrows .mrow b { display: block; font-size: 17px; }
.mrows .mrow small { display: block; font-size: 14px; color: var(--muted); }
.mrows .mr-chev { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.kunde .mrows [data-o="look"] .mi { --k: #2fa3b8; }
.menu-foot { display: flex; justify-content: center; gap: 10px; margin: 18px 0 4px; color: var(--muted); font-size: 14px; }
.menu-foot .link { color: var(--muted); font-size: 14px; }
.m-back { border: 0; background: none; color: var(--terra); font: 700 14px/1 var(--sans, Inter), sans-serif; padding: 0 0 6px; cursor: pointer; }
.menu-sub { margin: 14px 4px 8px; }
/* Undersider i menuen glider som på en telefon */
@keyframes slideIn { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideBack { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card.slide-in { animation: slideIn .26s cubic-bezier(.2,.8,.2,1); }
.modal-card.slide-back { animation: slideBack .26s cubic-bezier(.2,.8,.2,1); }
.menu-early { margin: 16px 4px 0; padding: 12px 14px; border-radius: 14px; background: rgba(217,164,65,.14); color: inherit; font-size: 14px; line-height: 1.45; }
/* Smagsprøven: topbaren og "Vælg rejse" sløres også, når et vindue eller +-menuen er åben */
body.kunde:is(:has(#modal.open), :has(.popover.open), :has(.fab-wrap.open)):not(.wiz-sharp):not(.placing) :is(#brand, #mFilter) { filter: blur(3px) brightness(.8); pointer-events: none; transition: filter .2s; }
/* Smagsprøven: "Fra billeder" væk (telefonens browser fjerner tit fotoets GPS, så den virker upålidelig) */
#fabMenu [data-add="photos"] { display: none; } /* "Fra billeder" væk overalt (telefonens browser fjerner tit fotoets GPS, så den virker upålidelig); Bo bad selv om det 22-10-2026 */
/* Smagsprøven: tydelig START og SLUT under rejsens første og sidste sted */
.pin-se { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); padding: 2px 7px; border-radius: 8px; font: 800 10px/14px var(--sans, system-ui); letter-spacing: .06em; color: #fff; white-space: nowrap; pointer-events: none; z-index: 3; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 1.5px solid #fff; }
.pin-se.start { background: #2e8b57; }
.pin-se.end { background: #11192b; }
.tack .pin-se { bottom: -16px; }
/* Zoomet godt ind: stedets titel under nålen (klassen pin-names sættes på kortet i app.js) */
.pin-name { display: none; position: absolute; left: 50%; top: 100%; margin-top: 3px; transform: translateX(-50%); max-width: calc(var(--name-fs, 12px) * 12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .15em .65em; border-radius: .7em; background: rgba(255,255,255,.95); color: #11192b; font: 700 var(--name-fs, 12px)/1.35 var(--sans, system-ui); transition: font-size .2s; box-shadow: 0 2px 6px rgba(17,25,43,.35); pointer-events: none; z-index: 2; }
.pin-names .pin-name { display: block; }
.pin-se ~ .pin-name { margin-top: 22px; }
/* Smagsprøven: navn på atlasset med en lille forhåndsvisning af topbaren */
.name-prev { margin: 4px 0 16px; padding: 14px 16px; border-radius: 16px; background: rgba(127,140,160,.12); }
.name-prev b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.2; }
.name-prev small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.name-lbl { display: block; margin: 12px 0 0; font-weight: 700; font-size: 15px; }
.name-lbl small { font-weight: 400; color: var(--muted); }
.name-in { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid rgba(127,140,160,.35); background: rgba(127,140,160,.08); color: inherit; font: 17px var(--sans, Inter), sans-serif; }
.name-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.name-ideas button { border: 0; border-radius: 999px; padding: 8px 13px; background: rgba(47,127,184,.16); color: inherit; font: 600 14px var(--sans, Inter), sans-serif; cursor: pointer; }
body.kunde .mrows [data-o="name"] .mi { --k: #d9643a; }
/* Hjemmeskærm-appen på iPhone (klassen sættes i app.js): som Smart-SIS er html og body IKKE låst fast til vinduet (ellers stopper alt
   ved de 879, iOS giver appen), body har skærmens fulde højde, og kortet, login og stedkortet ligger i body */
html.ios-pwa { position: static !important; inset: auto; height: auto; overflow-x: hidden; overflow-y: visible; background: #0b1626; }
html.ios-pwa body { position: relative !important; inset: auto; height: var(--full-h, 100%) !important; overflow: visible; overflow-x: clip; touch-action: none; }
html.ios-pwa :is(#map, #gate, #smag) { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: auto !important; }
@media (max-width: 760px) { html.ios-pwa body.kunde .sheet { position: absolute; bottom: 0; } }
.set-diag { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); opacity: .7; }

/* ===== Smagsprøven: farvekode i alle vinduer (ikke blå i blå) =====
   blå = gå videre · grøn = gem/færdig · neutral = luk/fortryd · guld = valgt · hver liste/chip sin egen farve */
body.kunde .modal-card .icon-btn[data-m="close"] { background: rgba(255,255,255,.1); color: #e8eef7; box-shadow: none; }
body.kunde .modal-card .m-head .eyebrow { color: #e0a95a; }
body.kunde .m-back { color: #e0a95a; }
body.kunde .modal-card .m-foot .btn:not(.btn-primary) { background: rgba(255,255,255,.08); color: #e8eef7; border: 1px solid rgba(255,255,255,.14); }
/* gem/færdig = grøn */
body.kunde .modal-card :is([data-save], #saveBtn, [data-m="yes"]:not([style])), body.kunde .modal-card .m-foot [data-m="close"].btn-primary { background: #2fa66a; border-color: #2fa66a; color: #fff; }
body.kunde .modal-card .wiz-foot .btn-primary[data-w="next"] { background: #2f7fb8; }
body.kunde .m-foot.wiz-foot .wiz-dots i.on { background: #e0a95a; }
/* valgt = guld ring */
body.kunde .theme-pick button.on { box-shadow: 0 0 0 2px #e0a95a; }
body.kunde .style-btn.on .sw { box-shadow: 0 0 0 3px #e0a95a; }
body.kunde .style-btn.on { color: #f0c27a; }
/* navn: chips i hver sin farve, forhåndsvisning med varm kant */
body.kunde .name-prev { border-left: 4px solid #e0a95a; background: rgba(224,169,90,.1); }
body.kunde .name-ideas button:nth-child(4n+1) { background: rgba(47,166,106,.22); color: #9fe0bd; }
body.kunde .name-ideas button:nth-child(4n+2) { background: rgba(224,122,58,.22); color: #f6b98e; }
body.kunde .name-ideas button:nth-child(4n+3) { background: rgba(138,92,200,.25); color: #cdb4f2; }
body.kunde .name-ideas button:nth-child(4n+4) { background: rgba(217,164,65,.22); color: #f0d08c; }
body.kunde .name-in:focus { outline: none; border-color: #e0a95a; }
/* Mine ture: + Ny tur lilla (som i menuen), Vis blå, Redigér orange; hver tur får sin egen farvekant */
body.kunde .modal-card [data-t="new"] { background: #8a5cc8; border-color: #8a5cc8; color: #fff; }
body.kunde .modal-card [data-t="show"] { background: rgba(47,127,184,.22); color: #a9d2f0; border: 0; }
body.kunde .modal-card [data-t="edit"] { background: rgba(224,122,58,.2); color: #f6b98e; border: 0; }
body.kunde .modal-card .people .person { border-left: 4px solid var(--c, transparent); }
/* Mit abonnement som vindue oven på kortet */
#subFrame { position: fixed; inset: 0; z-index: 5000; background: #0b1626; animation: slideIn .26s cubic-bezier(.2,.8,.2,1); }
#subFrame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* "Stedet er gemt": Færdig er et stille link; beskeder lægger sig nederst, mens et vindue er åbent (ikke oven i vinduet) */
body.kunde .new-ok-btns .link { background: none; border: 0; color: var(--muted); font: 600 16px var(--sans, Inter), sans-serif; padding: 12px; text-decoration: none; }
body.kunde:has(#modal.open) .toasts { top: auto; bottom: calc(28px + var(--safe-b)); }
/* Listen (kundeudgaven): "Vis alle steder på kortet" som en tydelig række under År/Rejser, væk fra luk-krydset */
.ms-fitrow { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--ms-pad, 16px)); margin: 10px var(--ms-pad, 16px) 4px; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(47,166,106,.16); color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ms-fitrow svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #5fd39a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-fitrow b { display: block; font-size: 16px; }
.ms-fitrow small { display: block; font-size: 13.5px; color: var(--muted); }
/* Kundeudgaven: rolig stedkort-bund med to knapper; resten ligger bag valgene */
.kunde-skjult { display: none !important; }
body.kunde .kunde-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.kunde .kunde-acts .btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 16px; }
body.kunde .kunde-acts .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.kunde .kunde-acts .btn:not(.btn-primary) { background: rgba(138,92,200,.22); color: #e2d4fb; border: 0; }
body.kunde .mrows .r-blue .mi { --k: #2f7fb8; } body.kunde .mrows .r-green .mi { --k: #2fa66a; }
body.kunde .mrows .r-gold .mi { --k: #d9a441; } body.kunde .mrows .r-red .mi { --k: #c84a3d; }
body.kunde .mrows .r-red b { color: #ff9f8f; }
/* Telefon: topbaren og "Vælg rejse" går væk, mens et sted er åbent */
@media (max-width: 760px) { body.kunde:has(#sheet.open) :is(#brand, #mFilter) { opacity: 0; pointer-events: none; transition: opacity .2s; } }
body.kunde .menu-list [data-go] .mi { --k: #6b85a8; background: var(--k) !important; color: #fff !important; }
body.kunde .mrows .r-blue .mi { --k: #2f7fb8; } body.kunde .mrows .r-green .mi { --k: #2fa66a; } body.kunde .mrows .r-gold .mi { --k: #d9a441; } body.kunde .mrows .r-red .mi { --k: #c84a3d; }
#subFrame.out { animation: subOut .26s ease both; pointer-events: none; }
@keyframes subOut { to { transform: translateX(40%); opacity: 0; } }
/* Kundeudgaven: knapperne i siden får hver sin farve (samme farver som i menuen), ikke mørk i mørk */
body.kunde .dock .dock-btn { --k: #9fb3cc; }
body.kunde .dock .dock-btn[data-act="list"] { --k: #5fd39a; }
body.kunde .dock .dock-btn[data-act="play"] { --k: #f2c14e; }
body.kunde .dock #smagShare { --k: #c3a2f5; }
body.kunde .dock .dock-btn[data-act="routes"] { --k: #7cc0f0; }
body.kunde .dock .dock-btn[data-act="trip"], body.kunde .dock .dock-btn[data-act="year"] { --k: #f0a070; }
body.kunde .dock .dock-btn svg { stroke: var(--k) !important; }
body.kunde .dock .dock-btn[data-act="play"] svg { fill: var(--k) !important; }
@media (max-width: 760px) {
  body.kunde .dock .dock-btn { background: color-mix(in srgb, var(--k) 16%, #141c2c) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 45%, transparent), 0 6px 16px -6px rgba(0,0,0,.5); }
  body.kunde .dock .dock-btn.on { background: color-mix(in srgb, var(--k) 70%, #141c2c) !important; }
  body.kunde .dock .dock-btn.on svg { stroke: #fff !important; }
}
.pd-vat { display: flex; justify-content: space-between; margin: 0 0 12px; font-size: 14px; color: #6b7385; }
.pd-vat b { color: #1b2333; }

/* Kundeudgaven: + og Ruter i varme, levende farver i stedet for flad blå */
body.kunde .fab { background: linear-gradient(135deg, #ff9a62, #e5533d) !important; color: #fff; box-shadow: 0 10px 24px -8px rgba(229,83,61,.75), inset 0 1px 0 rgba(255,255,255,.25) !important; border: 0; }
body.kunde .fab-wrap.open .fab { background: linear-gradient(135deg, #5c6b86, #3a465e) !important; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6) !important; }
body.kunde .dock .dock-btn[data-act="routes"] { --k: #4fd1c0; }
@media (max-width: 760px) { body.kunde .dock .dock-btn[data-act="routes"].on { background: linear-gradient(135deg, #3fc1b0, #2f86c8) !important; box-shadow: 0 10px 22px -8px rgba(47,134,200,.7) !important; } }
/* Kundeudgaven, afspil på telefon: hele skærmen bruges. Ingen sorte bjælker; stort billede med teksten i et mørkt felt lige under (let at læse) */
@media (max-width: 760px) {
  body.kunde.playing .bar { height: 0 !important; }
  body.kunde .cinema::before { display: none; }
  body.kunde .cinema::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(90px + env(safe-area-inset-top, 0px)); background: linear-gradient(rgba(5,8,15,.75), transparent); pointer-events: none; }
  body.kunde .reel-prog { top: calc(8px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; height: 4px; border-radius: 4px; z-index: 2; }
  body.kunde .reel-title { top: calc(20px + env(safe-area-inset-top, 0px)); z-index: 2; font-size: 20px; }
  body.kunde .reel { left: 12px; right: 12px; width: auto; bottom: calc(88px + var(--safe-b, 0px)); }
  body.kunde .reel-photo { border: 0; border-radius: 20px 20px 0 0; aspect-ratio: 4 / 3.2; box-shadow: none; }
  body.kunde .reel-text { margin: 0; padding: 14px 16px 16px; border-radius: 0 0 20px 20px; background: rgba(10,15,26,.94); text-shadow: none; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
  body.kunde .reel-text .eyebrow { color: #e0a95a; font-size: 11px; }
  body.kunde .reel-text h2 { font-size: clamp(28px, 8.5vw, 36px); color: #fff; }
  body.kunde .reel-text p { opacity: 1; color: #d6e0ee; font-size: 15.5px; -webkit-line-clamp: 3; }
  body.kunde .reel-ctl { bottom: calc(16px + var(--safe-b, 0px)) !important; background: rgba(10,15,26,.9) !important; padding: 6px !important; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7) !important; }
}
/* Udseende: musikvalg med farvet markering */
.music-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.music-pick button { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 0; background: rgba(127,140,160,.12); color: inherit; font: 600 14px var(--sans, Inter), sans-serif; text-align: left; cursor: pointer; }
.music-pick button span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(242,193,78,.22); color: #f2c14e; flex: none; }
.music-pick button.on { box-shadow: 0 0 0 2px #e0a95a; background: rgba(224,169,90,.14); }
/* Afspilleren (kundeudgaven): musikvalg lige over knapperne */
.reel-music { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(280px, 86vw); display: grid; gap: 6px; padding: 12px; border-radius: 18px; background: rgba(10,15,26,.96); box-shadow: 0 20px 40px -12px rgba(0,0,0,.8); color: #fff; }
.reel-music b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #e0a95a; padding: 2px 4px 4px; }
.reel-music button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; font: 600 15px var(--sans, Inter), sans-serif; text-align: left; cursor: pointer; }
.reel-music button span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(242,193,78,.22); color: #f2c14e; flex: none; }
.reel-music button.on { box-shadow: 0 0 0 2px #e0a95a; background: rgba(224,169,90,.16); }
body.kunde .reel-ctl [data-p="music"] svg { stroke: #f2c14e; }
/* Nyt sted (kundeudgaven): hvert trin sin farve. Trin 1 (Tilføj et sted) er grøn i plus-menuen; 2 blå, 3 guld, 4 lilla */
#modalCard.wizc { --wk: #4a9fd8; }
#modalCard.wizc.ws-1 { --wk: #e0a95a; }
#modalCard.wizc.ws-2 { --wk: #a57be0; }
body.kunde #modalCard.wizc .m-head .eyebrow { color: var(--wk); }
body.kunde #modalCard.wizc .m-head h2 { color: #fff; }
body.kunde #modalCard.wizc .wiz-lead { border-left: 3px solid var(--wk); padding-left: 10px; }
body.kunde #modalCard.wizc .fld { color: color-mix(in srgb, var(--wk) 75%, #fff); }
body.kunde #modalCard.wizc .fld :is(input, textarea, select) { border-color: color-mix(in srgb, var(--wk) 45%, transparent); }
body.kunde #modalCard.wizc .fld :is(input, textarea, select):focus { border-color: var(--wk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk) 25%, transparent); outline: none; }
body.kunde #modalCard.wizc #edDrop { border-color: color-mix(in srgb, var(--wk) 60%, transparent); background: color-mix(in srgb, var(--wk) 10%, transparent); }
body.kunde #modalCard.wizc #edCam { background: color-mix(in srgb, var(--wk) 22%, transparent); color: #fff; border: 0; }
body.kunde #modalCard.wizc .trip-btn { border-color: color-mix(in srgb, var(--wk) 50%, transparent); }
body.kunde #modalCard.wizc .wiz-foot .btn-primary[data-w="next"] { background: var(--wk); border-color: var(--wk); color: #fff; }
body.kunde #modalCard.wizc .wiz-foot #saveBtn { background: #2fa66a; border-color: #2fa66a; }
body.kunde #modalCard.wizc .wiz-dots i.on:nth-child(1) { background: #2fa66a; }
body.kunde #modalCard.wizc .wiz-dots i.on:nth-child(2) { background: #4a9fd8; }
body.kunde #modalCard.wizc .wiz-dots i.on:nth-child(3) { background: #e0a95a; }
body.kunde #modalCard.wizc .wiz-dots i.on:nth-child(4) { background: #a57be0; }
/* Nyt sted: navneforslag ud fra nålen + stedet som en linje */
.wiz-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; }
.wiz-ideas:empty { display: none; }
.wiz-ideas small { width: 100%; font-size: 12.5px; color: var(--muted); }
.wiz-ideas button { border: 0; border-radius: 999px; padding: 8px 13px; font: 600 14px var(--sans, Inter), sans-serif; cursor: pointer; background: color-mix(in srgb, var(--wk, #4a9fd8) 22%, transparent); color: #fff; }
.wiz-where { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(127,140,160,.1); font-size: 15px; }
.wiz-where button { border: 0; background: none; color: var(--wk, #4a9fd8); font: 700 14px var(--sans, Inter), sans-serif; cursor: pointer; padding: 4px 6px; }
body.kunde .modal-card .m-foot .btn, body.kunde .wiz-foot .btn { white-space: nowrap; }
/* Nyt sted: samme størrelse hele vejen (forslagene får plads fra start, trinene er lige høje) */
.wiz-ideas { min-height: 66px; align-content: flex-start; }
.wiz-ideas em { font-style: normal; font-size: 14px; color: var(--muted); padding: 8px 0; }
@media (max-width: 760px) { #pinForm.wiz { min-height: 370px; } }
/* Nyt sted på telefon: alle fire trin er lige store og sidder samme sted (trin 1 = plus-menuen, trin 2-4 = vinduet) */
.fm-head, .fm-dots { display: none; }
@media (max-width: 760px) {
  body.kunde { --wizH: min(540px, calc(100dvh - 2 * var(--m-gap) - var(--safe-t) - var(--safe-b) - 90px)); }
  body.kunde #modalCard.wizc { height: var(--wizH); display: flex; flex-direction: column; }
  body.kunde #modalCard.wizc #pinForm { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; align-content: start; }
  body.kunde #modalCard.wizc .m-foot { margin-top: auto; }
  body.kunde #fabMenu { position: fixed; top: calc(var(--m-gap) + var(--safe-t)); left: var(--m-gap); right: var(--m-gap); width: auto !important; height: var(--wizH); display: flex; flex-direction: column; gap: 0; padding: 18px 16px 14px; border-radius: 22px; transform-origin: bottom right; }
  body.kunde #fabMenu::before { display: none; }
  body.kunde .fm-head { display: block; padding: 2px 4px 10px; }
  body.kunde .fm-head .eyebrow { color: #5fd39a; }
  body.kunde .fm-head h2 { margin: 4px 0 8px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.1; color: #fff; }
  body.kunde .fm-head .wiz-lead { margin: 0; border-left: 3px solid #5fd39a; padding-left: 10px; color: var(--muted); font-size: 15px; }
  body.kunde .fm-dots { display: flex; justify-content: center; gap: 6px; margin-top: auto; padding-top: 10px; }
  body.kunde .fm-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(127,140,160,.35); }
  body.kunde .fm-dots i:first-child { background: #2fa66a; }
}
/* Kundeudgaven: stedkortet i faner (Dit sted / Om stedet / Billeder), man swiper vandret imellem dem */
body.kunde .sheet-body:has(#swPages) { display: flex; flex-direction: column; overflow: hidden; padding: 14px 0 0; }
body.kunde .sheet-body:has(#swPages) > .meta { padding: 0 18px; flex: none; }
.sw-tabs { display: flex; gap: 4px; margin: 12px 18px 0; padding: 4px; border-radius: 14px; background: rgba(127,140,160,.12); flex: none; }
.sw-tabs button { flex: 1; border: 0; border-radius: 10px; padding: 10px 4px; background: none; color: var(--muted); font: 700 14.5px var(--sans, Inter), sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.sw-tabs button.on { color: #fff; }
.sw-tabs button:nth-child(1).on { background: #2fa66a; }
.sw-tabs button:nth-child(2).on { background: #2f7fb8; }
.sw-tabs button:nth-child(3).on { background: #8a5cc8; }
.sw-tabs button:nth-child(4).on { background: #e0803a; }
.sw-tabs:has(button:nth-child(4)) button { font-size: 13px; padding: 10px 2px; }
.sw-pages { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sw-pages::-webkit-scrollbar { display: none; }
.sw-page { flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; padding: 14px 18px 18px; }
.sw-page.about { margin: 0; border: 0; }
.sw-page .note:empty { display: none; }
.sw-empty { margin: 6px 0 12px; padding: 14px; border-radius: 14px; background: rgba(47,166,106,.12); color: var(--text, #eaf4fb); font-size: 15px; line-height: 1.45; }
.sw-page #aboutCommons h4 { margin-top: 0; }
.sw-page .commons { grid-template-columns: 1fr 1fr; }
/* Telefon: stedet fylder hele skærmen (kortet i baggrunden er ikke nødvendigt her) */
@media (max-width: 760px) {
  body.kunde .sheet { top: 0 !important; bottom: 0; height: auto !important; border-radius: 0; z-index: 970; }
  body.kunde .sheet-hero { height: 34vh; height: 34dvh; min-height: 200px; }
  body.kunde .sheet-close { top: calc(12px + var(--safe-t)); }
  body.kunde .sheet-hero .credit-tag { top: calc(16px + var(--safe-t)); }
}
/* Ruter: "Ret en rute" er en knap med pil, der fører hele vejen til editoren */
.rp-help.rp-go { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0 !important; margin-top: 8px; padding: 14px; border: 0 !important; border-radius: 16px; background: linear-gradient(135deg, rgba(63,193,176,.22), rgba(47,134,200,.22)); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-help.rp-go > span:nth-child(2) { flex: 1; min-width: 0; }
.rp-help.rp-go b { display: block; font-size: 16px; }
.rp-help.rp-go small { display: block; color: var(--muted); font-size: 13.5px; }
.rp-help.rp-go .mr-chev { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.kunde .menu-list .rw-row .mi { background: var(--tc) !important; }
.rw-row b { overflow: hidden; text-overflow: ellipsis; }
body.kunde .route-pop .rp-help.rp-go { align-items: center; }
/* Listen: to genveje side om side (Vis alle / Ret en rute) med luft ned til søgefeltet */
.ms-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px var(--ms-pad, 16px) 18px; }
.ms-quick:has(> :only-child) { grid-template-columns: 1fr; }
.ms-quick .ms-fitrow { width: auto; margin: 0; padding: 11px 12px; gap: 10px; }
.ms-quick .ms-fitrow b { font-size: 15px; }
.ms-quick .ms-fitrow small { font-size: 12.5px; }
.ms-quick .ms-route { background: rgba(63,193,176,.16); }
.ms-quick .ms-route svg { stroke: #4fd1c0; width: 20px; height: 20px; fill: none; stroke-width: 2; }
/* Beskeder (fx "Filen er hentet") ses også, mens Mit abonnement ligger oven på kortet */
body:has(#subFrame) .toasts { z-index: 5100; }
/* Listen: én genvej øverst, og en lille ✎ på hvert sted (ret stedet direkte) */
.ms-quick:has(> :only-child) .ms-fitrow { width: 100%; }
body.kunde .drawer .item { position: relative; padding-right: 54px; }
.it-edit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(47,127,184,.2); color: #8fc6ee; }
.it-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.it-edit:active { background: rgba(47,127,184,.4); }

/* Fanen Billeder: et gitter med to kolonner (ikke en vandret stribe inde i den vandrette fane-swipe) */
.sw-page .commons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
.sw-page .commons img { width: 100%; min-width: 0; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
html[lang="en"] .gallery figure.cover::before { content: 'Cover'; }
/* Telefon (kundeudgaven): det man bruger mest sidder nederst ved tommelfingeren, sjældne ting øverst; ekstra luft over + mod fejltryk */
@media (max-width: 760px) {
  body.kunde .dock [data-act="routes"] { order: 1; }
  body.kunde .dock #smagShare { order: 2; }
  body.kunde .dock [data-act="play"] { order: 3; }
  body.kunde .dock [data-act="list"] { order: 4; }
  body.kunde .dock { margin-bottom: 18px; } /* oven på den placering, telefon-layoutet allerede har */
}

.rate-box { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: rgba(245,154,181,.1); }
.rate-box > b { display: block; font-size: 16px; margin-bottom: 10px; }
.rate-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rate-yn button { border: 0; border-radius: 14px; padding: 12px; background: rgba(127,140,160,.14); color: inherit; font: 700 16px var(--sans, Inter), sans-serif; cursor: pointer; }
.rate-yn [data-rate="1"].on { background: #2fa66a; color: #fff; }
.rate-yn [data-rate="0"].on { background: #c84a3d; color: #fff; }
.rate-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.rate-tags button { border: 0; border-radius: 999px; padding: 7px 11px; background: rgba(127,140,160,.14); color: inherit; font: 600 13px var(--sans, Inter), sans-serif; cursor: pointer; }
.rate-tags button.on { background: #f59ab5; color: #2a1020; }
.rate-box small { color: var(--muted); font-size: 12.5px; }

/* Swipe-hint og "✓ Gemt" */
.sw-hint { margin: 8px 18px 0; font-size: 13px; color: var(--muted); text-align: center; animation: swhint 2.4s ease-in-out infinite; flex: none; }
@keyframes swhint { 0%, 100% { transform: none; } 50% { transform: translateX(-6px); } }
.rate-box { position: relative; }
.rate-ok { position: absolute; top: 12px; right: 14px; padding: 4px 10px; border-radius: 999px; background: #2fa66a; color: #fff; font: 700 13px var(--sans, Inter), sans-serif; opacity: 0; }
.rate-ok.show { animation: rateok 2s ease both; }
@keyframes rateok { 0% { opacity: 0; transform: translateY(4px); } 12%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.back-hint { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--muted); animation: swhint2 2.4s ease-in-out infinite; }
@keyframes swhint2 { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

/* Swipe-prikker: svæver nederst i swipe-området (skubber ikke til noget) */
.sw-dots { position: absolute; left: 0; right: 0; bottom: calc(6px + var(--safe-b, 0px)); display: flex; justify-content: center; gap: 7px; pointer-events: none; z-index: 2; }
.sw-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(160,175,200,.4); transition: background .2s, transform .2s; }
.sw-dots i.on { background: #fff; transform: scale(1.15); }
.sw-hint { display: none !important; }
/* Stedkortet (kundeudgaven): knapperne svæver nederst oven på indholdet (ingen fast bjælke) */
body.kunde .sheet { position: fixed; }
body.kunde .kunde-acts { position: absolute; left: 14px; right: 14px; bottom: calc(14px + var(--safe-b, 0px)); z-index: 4; padding: 0; border: 0 !important; background: none !important; pointer-events: none; }
body.kunde .kunde-acts .btn { pointer-events: auto; box-shadow: 0 12px 28px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
body.kunde .kunde-acts .btn:not(.btn-primary) { background: #3a2f5c !important; }
body.kunde .sheet:has(.kunde-acts) .sw-dots { bottom: calc(84px + var(--safe-b, 0px)); }
body.kunde .sheet:has(.kunde-acts) .sheet-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(transparent, var(--paper, #141c2c) 70%); pointer-events: none; z-index: 1; }

/* Kontrol-rettelser til stedkortet */
body.kunde .sheet:has(.kunde-acts) .sheet-body::after { height: calc(110px + var(--safe-b, 0px)); }
body.kunde:not(.night) { --muted: #5b6476; }
body.kunde:not(.night) .sw-dots i.on { background: #2f7fb8; }
@media (min-width: 761px) { body.kunde .sheet-hero { height: clamp(100px, 30vh, 260px); } }
@media (min-width: 761px) and (max-height: 520px) { body.kunde .sheet { top: 8px; bottom: 8px; } body.kunde .sheet-hero { height: 72px; } }
.sw-page > .progress { margin: 0 0 10px; }

/* ===== Dit rejseliv, minder og rejsebog (kundeudgaven) ===== */
body.kunde .menu-list [data-o="life"] .mi { --k: #e0a95a; }
.life-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.life-tile { padding: 14px; border-radius: 16px; display: grid; gap: 2px; }
.life-tile b { font: 700 30px/1 var(--serif); }
.life-tile small { font-size: 13.5px; opacity: .9; }
.life-tile.t1 { background: rgba(47,166,106,.2); color: #8fe6b5; }
.life-tile.t2 { background: rgba(138,92,200,.24); color: #d8c4fa; }
.life-tile.t3 { background: rgba(47,127,184,.24); color: #a9d2f0; }
.life-tile.t4 { background: rgba(224,169,90,.22); color: #f3cf92; }
body:not(.night) .life-tile.t1 { color: #1e7a4c; } body:not(.night) .life-tile.t2 { color: #5b3a94; } body:not(.night) .life-tile.t3 { color: #1f5f8f; } body:not(.night) .life-tile.t4 { color: #8a5a10; }
.life-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.life-flags img { width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.life-years { display: grid; gap: 8px; }
.life-year { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(127,140,160,.1); }
.ly-y { font: 700 20px/1 var(--serif); color: #e0a95a; min-width: 52px; }
.ly-mid { flex: 1; min-width: 0; }
.ly-mid b { display: block; font-size: 15px; }
.ly-mid small img { width: 18px; height: 12px; border-radius: 2px; margin: 4px 4px 0 0; }
.ly-btn { border: 0; border-radius: 999px; padding: 8px 11px; font: 700 13px var(--sans, Inter), sans-serif; cursor: pointer; white-space: nowrap; }
.ly-btn.film { background: rgba(242,193,78,.2); color: #f2c14e; }
.ly-btn.book { background: rgba(138,92,200,.25); color: #d8c4fa; }
.life-tip { margin-top: 12px; }
/* "Denne uge for X år siden" */
.mem-card { position: fixed; left: 50%; top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 120px); transform: translate(-50%, -12px); z-index: 940; width: min(380px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #3a2f5c, #2a3b5c); color: #fff; text-align: left; font: inherit; box-shadow: 0 18px 40px -14px rgba(0,0,0,.7); opacity: 0; transition: .5s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
.mem-card.show { opacity: 1; transform: translate(-50%, 0); }
.mem-img { width: 56px; height: 56px; border-radius: 12px; background: center/cover #24304a; flex: none; display: grid; place-items: center; font-size: 24px; }
.mem-mid { flex: 1; min-width: 0; }
.mem-mid small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #f3cf92; font-weight: 700; }
.mem-mid b { display: block; font: 400 20px/1.15 var(--serif); font-style: italic; }
.mem-mid em { display: block; font-style: normal; font-size: 13px; opacity: .8; }
.mem-x { font-style: normal; opacity: .7; padding: 6px; }
@media (min-width: 761px) { .mem-card { left: auto; right: 16px; top: 90px; transform: translateX(20px); } .mem-card.show { transform: none; } }
/* Rejsebogen */
#book { position: fixed; inset: 0; z-index: 6000; overflow-y: auto; background: #e9e4da; color: #1b2333; font-family: var(--sans, Inter), sans-serif; }
.book-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + var(--safe-t, 0px)) 14px 10px; background: #13233a; color: #fff; }
.book-bar span { font-weight: 700; }
.book-bar .btn { white-space: nowrap; }
.book-page { max-width: 760px; margin: 18px auto; padding: 28px; background: #fffdf8; border-radius: 6px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.35); }
.book-cover h1 { font: 400 40px/1.1 var(--serif); font-style: italic; margin: 6px 0; color: #13233a; }
.bk-eyebrow { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a6b3a; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.bk-eyebrow img { width: 20px; height: 14px; border-radius: 2px; }
.bk-span { margin: 0 0 10px; color: #4a5468; }
.bk-stats { display: flex; gap: 18px; margin: 8px 0 16px; color: #4a5468; }
.bk-stats b { color: var(--c, #2f7fb8); font-size: 20px; }
.bk-map { height: 340px; border-radius: 10px; overflow: hidden; background: #dfe7ee; }
.bk-pin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font: 700 12px/1 var(--sans, Inter), sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.bk-place { display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; }
.bk-num { width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 17px/1 var(--sans, Inter), sans-serif; }
.bk-txt h2 { font: 400 28px/1.15 var(--serif); font-style: italic; margin: 4px 0 8px; color: #13233a; }
.bk-note { margin: 0 0 8px; font: 18px/1.5 var(--serif); }
.bk-fact { margin: 0; font-size: 14px; color: #5b6476; line-height: 1.5; }
.bk-photos { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; }
.bk-photos.n2 { grid-template-columns: 1fr 1fr; } .bk-photos.n3, .bk-photos.n4 { grid-template-columns: 1fr 1fr; }
.bk-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.bk-foot { text-align: center; color: #8a8f99; font-size: 12px; margin: 10px 0 40px; }
.bk-printhint { margin: 14px 0 0; font-size: 13px; color: #6f6656; }
.bkp { display: none; }
/* Print og PDF: en rigtig bog i A4. Hvide kort på beige papir ligesom i appen, men på faste sider:
   to steder pr. side (kortene deler siden lige, og billedet fylder resten), sidetal og en lille fremdriftslinje i bunden.
   Ingen sidemargen, så browseren ikke skriver dato og adresse i kanten */
@media print {
  @page { size: A4; margin: 0; }
  body.book-open > *:not(#book) { display: none !important; }
  html, body { height: auto !important; overflow: visible !important; background: #e9e4da !important; }
  html, body, #book, #book * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #book { position: static; overflow: visible; background: #e9e4da; }
  #book > :not(.bkp) { display: none !important; }
  .bkp { display: block; color: #1f1d1a; font: 10pt/1.45 var(--sans, Inter), system-ui, sans-serif; }
  .bkp-sheet { position: relative; width: 210mm; height: 296.6mm; box-sizing: border-box; padding: 10mm 12mm 17mm; display: flex; flex-direction: column; gap: 6mm; break-after: page; overflow: hidden; }
  .bkp-sheet:last-child { break-after: auto; }
  .bkp-card { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 4mm; box-sizing: border-box; background: #fffdf8; border-radius: 4mm; box-shadow: 0 .6mm 2.4mm rgba(70, 52, 20, .22); padding: 8mm 9mm; overflow: hidden; }
  .bkp-eb { margin: 0; font: 600 7.5pt/1.2 var(--sans, Inter), sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
  .bkp h2 { margin: 0; font: italic 400 26pt/1.1 var(--serif); color: #13233a; text-wrap: balance; }
  /* sidefod: turens navn, hvor langt man er nået, sidetal */
  .bkp-foot { position: absolute; left: 13mm; right: 13mm; bottom: 6.5mm; display: flex; align-items: center; gap: 5mm; font: 600 7pt var(--sans, Inter), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6f6656; }
  .bkp-foot span { flex: none; max-width: 80mm; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bkp-prog { flex: 1; height: .3mm; background: #cdc3b0; position: relative; }
  .bkp-prog i { position: absolute; left: 0; top: -.15mm; height: .6mm; background: var(--c); border-radius: 1mm; }
  .bkp-prog i::after { content: ''; position: absolute; right: -1mm; top: -.7mm; width: 2mm; height: 2mm; border-radius: 50%; background: var(--c); }
  .bkp-foot b { font: 400 11pt var(--serif); letter-spacing: 0; color: #1f1d1a; }
  /* forsiden: jeres eget billede øverst, titlen under */
  .bkp-cover .bkp-card { padding: 0; gap: 0; }
  .bkp-herobox { position: relative; flex: 1; min-height: 0; background: #e3ddd0; }
  .bkp-herobox img, .bkp-mapbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .bkp-herobox svg, .bkp-mapbox svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
  .bkp-ctext { padding: 10mm 12mm 9mm; }
  .bkp-ctext h1 { margin: 2.5mm 0 1.5mm; font: italic 400 40pt/1.04 var(--serif); color: #13233a; text-wrap: balance; }
  .bkp-span { margin: 0; font: 13pt var(--serif); color: #5f5a52; }
  .bkp-crow { display: flex; align-items: baseline; gap: 8mm; margin-top: 7mm; padding-top: 4mm; border-top: .3mm solid #e2d9c8; }
  .bkp-crow span { font: 600 7pt var(--sans, Inter), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6f6656; }
  .bkp-crow span b { font: 400 20pt var(--serif); letter-spacing: 0; color: var(--c); margin-right: 1.8mm; }
  .bkp-crow em { margin-left: auto; font: 600 7pt var(--sans, Inter), sans-serif; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #9a917f; }
  /* ruten: tal, lande, kortet og indholdet med sidetal */
  .bkp-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: .3mm solid #e2d9c8; border-bottom: .3mm solid #e2d9c8; }
  .bkp-stats div { padding: 3mm 4mm; border-left: .3mm solid #e2d9c8; }
  .bkp-stats div:first-child { border-left: 0; padding-left: 0; }
  .bkp-stats b, .bkp-nums b { display: block; font: 300 26pt/1.05 var(--serif); color: var(--c); font-variant-numeric: lining-nums; }
  .bkp-stats small, .bkp-nums small { font: 600 6.8pt var(--sans, Inter), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6f6656; }
  .bkp-flags { display: flex; flex-wrap: wrap; gap: 2mm 5mm; font-size: 9pt; color: #45413b; }
  .bkp-flags span { display: inline-flex; align-items: center; gap: 1.6mm; }
  .bkp-flags img, .bkp-meta img { width: 5mm; height: 3.6mm; object-fit: cover; border-radius: .5mm; box-shadow: 0 0 0 .2mm rgba(0, 0, 0, .18); flex: none; }
  .bkp-mapbox { position: relative; flex: 1; min-height: 50mm; border-radius: 2.5mm; overflow: hidden; background: #eef0ec; }
  .bkp-idx { columns: 2; column-gap: 9mm; margin: 0; padding: 0; list-style: none; }
  .bkp-idx li { display: flex; align-items: baseline; gap: 2.5mm; padding: 1.2mm 0; break-inside: avoid; }
  .bkp-idx .n { flex: none; width: 6mm; font: 600 8.5pt var(--sans, Inter), sans-serif; color: var(--c); font-variant-numeric: tabular-nums; }
  .bkp-idx .t { font: 11pt var(--serif); color: #1f1d1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56mm; }
  .bkp-idx .d { flex: 1; min-width: 4mm; border-bottom: .3mm dotted #bdb5a6; transform: translateY(-1mm); }
  .bkp-idx .p { font: 11pt var(--serif); font-variant-numeric: tabular-nums; }
  .bkp-idx.dense li { padding: .5mm 0; } .bkp-idx.dense .t, .bkp-idx.dense .p { font-size: 9.5pt; }
  .bkp-index .bkp-idx { margin-top: 3mm; }
  /* stederne: nummer, sted og dato, titel, en lille rutetegning; billedet og teksten side om side (skiftevis) */
  .bkp-h { display: flex; align-items: flex-start; gap: 4mm; }
  .bkp-n { flex: none; min-width: 14mm; font: 300 30pt/.9 var(--serif); color: var(--c); font-variant-numeric: lining-nums tabular-nums; }
  .bkp-ht { flex: 1; min-width: 0; }
  .bkp-meta { margin: 0 0 1.2mm; display: flex; align-items: center; gap: 2mm; font: 600 7pt var(--sans, Inter), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a6b3a; white-space: nowrap; overflow: hidden; }
  .bkp-meta span { overflow: hidden; text-overflow: ellipsis; }
  .bkp-meta em { flex: none; font: 400 8.5pt var(--sans, Inter), sans-serif; font-style: normal; letter-spacing: 0; text-transform: none; color: #5f5a52; }
  .bkp-meta em::before { content: '·'; margin-right: 2mm; color: #b8ad98; }
  .bkp-h h3 { margin: 0; font: italic 400 22pt/1.08 var(--serif); color: #13233a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bkp-mini { flex: none; width: 17mm; height: 17mm; margin-top: -1mm; }
  .bkp-mini svg { width: 100%; height: 100%; display: block; }
  .bkp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 61% minmax(0, 1fr); gap: 6mm; }
  .bkp-card.alt .bkp-body { grid-template-columns: minmax(0, 1fr) 61%; }
  .bkp-card.alt .bkp-ph { order: 2; }
  .bkp-card.bare .bkp-body { grid-template-columns: minmax(0, 1fr); }
  .bkp-ph { min-height: 0; display: grid; gap: 2mm; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
  .bkp-ph img, .bkp-ph figure { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 40%; border-radius: 2.5mm; display: block; margin: 0; }
  .bkp-ph figure { position: relative; overflow: hidden; }
  .bkp-ph figcaption { position: absolute; right: 2mm; bottom: 1.5mm; font-size: 6.5pt; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .8); }
  .bkp-ph.n2 { grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 1fr); }
  .bkp-ph.n3 { grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 2fr) minmax(0, 1fr); }
  .bkp-ph.n3 img:first-child { grid-row: 1 / 3; }
  .bkp-ph.n4 { grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
  .bkp-ph.none { background: #f3eee4; border-radius: 2.5mm; place-items: center; }
  .bkp-ph.none svg { width: 78%; height: 78%; }
  .bkp-tx { min-height: 0; display: flex; flex-direction: column; gap: 4mm; overflow: hidden; }
  .bkp-note { margin: 0; font: 13pt/1.4 var(--serif); color: #1f1d1a; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
  .bkp-fact p { margin: 0; font-size: 8.8pt; line-height: 1.5; color: #45413b; }
  .bkp-fact p:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
  .bkp-tx > * { flex-shrink: 0; }
  .bkp-card:not(.solo) .bkp-note { -webkit-line-clamp: 5; }
  .bkp-card:not(.solo) .bkp-note ~ .bkp-fact p:last-child { -webkit-line-clamp: 6; }
  .bkp-fact .bkp-fl { margin-bottom: 1mm; font: 600 6.8pt var(--sans, Inter), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
  .bkp-fl span { color: #9a917f; letter-spacing: .06em; text-transform: none; font-weight: 400; }
  .bkp-camp { margin: auto 0 0; padding-top: 2.5mm; border-top: .3mm solid #e2d9c8; font-size: 9pt; color: #1f1d1a; }
  .bkp-camp b { display: block; margin-bottom: .6mm; font: 600 6.8pt var(--sans, Inter), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #2f8a5a; }
  /* et sted alene på siden: billedet i hele bredden, teksten under i to spalter */
  .bkp-card.solo .bkp-body, .bkp-card.solo.alt .bkp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .bkp-card.solo .bkp-ph { order: 0; }
  .bkp-card.solo .bkp-tx { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; }
  .bkp-card.solo .bkp-camp { grid-column: 1 / -1; }
  .bkp-card.solo.bare .bkp-body { grid-template-rows: auto; }
  /* til sidst: turen i tal, linjer til egne noter og hvor tingene kommer fra */
  .bkp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7mm 6mm; padding: 5mm 0; border-top: .3mm solid #e2d9c8; border-bottom: .3mm solid #e2d9c8; }
  .bkp-nums b.town { font: italic 400 16pt/1.15 var(--serif); color: #13233a; padding-bottom: 1.2mm; }
  .bkp-notes-h { margin-top: 2mm; }
  .bkp-lines { flex: 1; min-height: 30mm; display: flex; flex-direction: column; }
  .bkp-lines i { flex: 1; border-bottom: .3mm solid #ddd3c1; }
  .bkp-colo { margin: 0; font-size: 7.3pt; line-height: 1.5; color: #6f6656; }
}

/* Camperlog */
.camp-box { position: relative; margin: 0 0 14px; padding: 14px; border-radius: 16px; background: rgba(47,166,106,.1); }
.camp-box > b { display: block; font-size: 16px; margin-bottom: 10px; }
.camp-stays { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-stays button { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 12px; background: rgba(127,140,160,.14); color: inherit; font: 600 13.5px var(--sans, Inter), sans-serif; cursor: pointer; }
.camp-stays button.on { background: #2fa66a; color: #fff; }
.camp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; font-weight: 600; font-size: 14.5px; }
.camp-price input { width: 92px; padding: 9px 10px; border-radius: 10px; border: 1.5px solid rgba(47,166,106,.45); background: rgba(127,140,160,.08); color: inherit; font: 600 16px var(--sans, Inter), sans-serif; }
.camp-price em { font-style: normal; color: var(--muted); }
.camp-price small { flex-basis: 100%; color: var(--muted); font-weight: 400; }
.camp-box .rate-note { display: block; margin-top: 6px; }
.camp-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-sum span { padding: 7px 11px; border-radius: 999px; background: rgba(47,166,106,.16); font-size: 13.5px; font-weight: 600; }
.camp-sum .avg { background: rgba(242,193,78,.2); color: #f2c14e; }
#book .camp-sum span { background: #e3f3ea; color: #1e5c3b; } #book .camp-sum .avg { background: #fbf0d6; color: #7a5a10; }
#book .camp-sum { margin: 6px 0 10px; }
.bk-camp { margin: 0 0 8px; font-size: 14px; color: #1e5c3b; font-weight: 600; }

/* Næste tur og drømmesteder */
body.kunde .menu-list [data-o="next"] .mi { --k: #3fc1b0; }
.next-chip { position: fixed; z-index: 880; right: var(--m-gap, 10px); top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + var(--m-bar, 56px) + 14px); padding: 9px 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #3fc1b0, #2f86c8); color: #fff; font: 600 14px var(--sans, Inter), sans-serif; box-shadow: 0 10px 22px -8px rgba(47,134,200,.7); cursor: pointer; max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-chip b { font-weight: 800; }
@media (min-width: 761px) { .next-chip { top: 90px; right: 16px; } }
body.playing .next-chip, body.kunde:has(#sheet.open) .next-chip, body:has(.drawer.open) .next-chip { display: none; }
.next-count { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(63,193,176,.22), rgba(47,134,200,.22)); }
.next-count b { font: 700 44px/1 var(--serif); color: #7fe0d4; }
.next-count span { font-size: 16px; font-weight: 600; }
.dream-add { display: flex; gap: 8px; align-items: center; }
.dream-add .name-in { margin: 0; flex: 1; }
.dream-list { display: grid; gap: 6px; margin-top: 10px; }
.dream-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(242,193,78,.12); }
.dream-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dream-row button { border: 0; border-radius: 999px; padding: 6px 11px; background: rgba(47,127,184,.25); color: inherit; font: 600 13px var(--sans, Inter), sans-serif; cursor: pointer; }
.dream-row button.x { background: none; color: var(--muted); }
.dream-all { width: 100%; margin-top: 10px; background: rgba(242,193,78,.18) !important; color: #f2c14e !important; border: 0 !important; }
.dream-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #13233a; border: 2px solid #f2c14e; font-size: 15px; box-shadow: 0 3px 8px rgba(0,0,0,.4); }

/* Dit rejseliv: steder I vil tilbage til */
.life-back { display: flex; flex-wrap: wrap; gap: 6px; }
.life-back button { border: 0; border-radius: 999px; padding: 8px 12px; background: rgba(47,166,106,.2); color: #8fe6b5; font: 600 14px var(--sans, Inter), sans-serif; cursor: pointer; }
body:not(.night) .life-back button { color: #1e7a4c; }
/* Stedkortets faner: prikkerne placeres i forhold til swipe-området, og der er luft under det sidste indhold */
.sheet-body:has(#swPages) { position: relative; }
.sw-page { padding-bottom: 26px !important; }
body.kunde .sheet:has(.kunde-acts) .sw-page { padding-bottom: calc(104px + var(--safe-b, 0px)) !important; }

/* Kontrol-rettelser: rejsebog-print, nedtællingschip, minde-kort, lyst tema */
@media print { html, body { position: static !important; inset: auto !important; } }
@media (max-width: 760px) { body:has(#mFilter .mf-x) .next-chip, body:has(#mFilter .mf-chip:not(.mf-ghost)) .next-chip { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + var(--m-bar, 56px) + 58px); } }
@media (min-width: 761px) { .mem-card { top: 140px; } }
body.playing .mem-card { display: none; }
body:not(.night) .ly-btn.film { color: #8a5a10; } body:not(.night) .ly-btn.book { color: #5b3a94; }
body:not(.night) .camp-sum .avg { color: #7a5a10; } body:not(.night) .dream-all { color: #7a5a10 !important; } body:not(.night) .next-count b { color: #1e7f74; }
.dream-row button.x { min-width: 40px; min-height: 40px; }

/* ===== Alt i appen (app centret, kundeudgaven) =====
   Farvede felter med navn under ikonet, store trykflader, faste pladser. Lyst tema som standard, mørkt under body.night */
.hub { container: hub / inline-size; }
.hub [data-c="gold"] { --b: #d9a441; --hi: #e6b85a; --lo: #c48e2c; --deep: #9a6d1c; }
.hub [data-c="rose"] { --b: #cd4a78; --hi: #df6598; --lo: #bd3962; --deep: #8d3053; }
.hub [data-c="violet"] { --b: #9052c0; --hi: #9c6dda; --lo: #8640ab; --deep: #5e2f86; }
.hub [data-c="leather"] { --b: #9c6a48; --hi: #b27e63; --lo: #8b5d37; --deep: #694a34; }
.hub [data-c="coral"] { --b: #c8553d; --hi: #de6c60; --lo: #b64724; --deep: #883a26; }
.hub [data-c="sky"] { --b: #0285b4; --hi: #2b9cc3; --lo: #0074a5; --deep: #055a7c; }
.hub [data-c="green"] { --b: #21914e; --hi: #53a45b; --lo: #02814b; --deep: #066442; }
.hub [data-c="teal"] { --b: #2a7f8f; --hi: #46959f; --lo: #196f83; --deep: #14505e; }
.hub [data-c="indigo"] { --b: #6660cb; --hi: #6f7ae0; --lo: #5f4eb8; --deep: #3f3787; }
.hub [data-c="amber"] { --b: #b96a00; --hi: #d17e3c; --lo: #a16000; --deep: #6f4300; }
.hub [data-c="plum"] { --b: #a8488d; --hi: #b862aa; --lo: #9a3878; --deep: #6c2655; }
.hub [data-c="blue"] { --b: #3a74d4; --hi: #428ee6; --lo: #3862c4; --deep: #234a92; }
.hub [data-c="slate"] { --b: #667383; --hi: #798897; --lo: #596474; --deep: #3d4652; }
/* hovedet bliver stående, mens man ruller */
.hub-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 22px 24px 12px; background: var(--paper); transition: box-shadow .15s; }
.hub-head.scrolled { box-shadow: 0 1px 0 rgba(127, 140, 160, .3); }
.hub-head .eyebrow { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.hub-head h2 { margin: 2px 0 0; font: italic 600 1.75rem/1.1 var(--serif); outline: none; }
.hub-close { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 88px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: rgba(127, 140, 160, .16); color: inherit; font: 600 16px var(--sans); cursor: pointer; }
.hub-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hub-in { padding: 0 24px 22px; }
.hub-intro { margin: 0 0 16px; font-size: 1rem; line-height: 1.45; color: var(--muted); }
/* "I dag": ét kort øverst med det mest aktuelle */
.hub-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 156px; padding: 18px 20px; border: 0; border-radius: 22px; text-align: left; color: #fff; font: inherit; cursor: pointer; overflow: hidden;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--hi) 70%, transparent), transparent 60%), linear-gradient(135deg, var(--lo), var(--deep));
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--deep) 85%, #000); transition: transform .16s, box-shadow .16s; -webkit-tap-highlight-color: transparent; }
.hh-txt { display: grid; gap: 4px; min-width: 0; }
.hh-txt small { font: 700 15px var(--sans); opacity: .95; }
.hh-txt b { font: italic 600 24px/1.12 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hh-txt em { font-style: normal; font-size: 16px; opacity: .95; }
.hh-btn { justify-self: start; margin-top: 10px; display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 23px; background: #fff; color: #11192b; font: 700 16px var(--sans); }
.hh-num { display: grid; justify-items: center; text-align: center; padding-right: 4px; }
.hh-num b { font: 700 4.75rem/.9 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.hh-num b.word { font-size: 1.8rem; line-height: 1.1; }
.hh-num small { font: 600 15px var(--sans); }
.hh-num.photo b { font-size: 6rem; background: var(--img) center/cover; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .6); }
.hh-glyph svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub-hero[data-c="gold"] { color: #11192b; background: radial-gradient(70% 90% at 100% 0%, rgba(255, 236, 190, .6), transparent 60%), linear-gradient(135deg, #e6b85a, #d9a441 55%, #c48e2c); }
.hub-hero[data-c="gold"] .hh-btn { background: #11192b; color: #fff; }
/* grupperne */
.hub-sec { margin-top: 28px; }
.hub-sec h3 { margin: 0; font: italic 600 22px/1.2 var(--serif); }
.hub-sec > p { margin: 2px 0 12px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 8.25rem; padding: 14px; border-radius: 20px; text-align: left; font: inherit; color: #18202f; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, color-mix(in srgb, var(--b) 10%, #fff) 0%, #fff 75%); border: 1.5px solid color-mix(in srgb, var(--b) 40%, #fff);
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--b) 45%, transparent); transition: transform .16s, box-shadow .16s, border-color .16s; }
body.night .hub-tile { color: #edf0f6; background: linear-gradient(145deg, color-mix(in srgb, var(--b) 22%, #1e2842) 0%, color-mix(in srgb, var(--b) 8%, #1e2842) 75%); border-color: color-mix(in srgb, var(--b) 70%, #151d2f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px -14px rgba(0, 0, 0, .7); }
.hub-chip { flex: none; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, var(--hi) 0%, var(--b) 55%, var(--lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(17, 25, 43, .08), 0 6px 12px -6px color-mix(in srgb, var(--b) 60%, transparent); }
body.night .hub-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 12px -6px rgba(0, 0, 0, .5); }
@supports (corner-shape: squircle) { .hub-chip { border-radius: 22px; corner-shape: squircle; } }
.hub-chip svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.hub-tile[data-c="gold"] .hub-chip { color: #11192b; }
.hub-tt { display: grid; gap: 3px; min-width: 0; }
.hub-tt b { font: 600 1.125rem/1.22 var(--sans); text-wrap: balance; hyphens: auto; }
.hub-tt small { font-size: .9375rem; line-height: 1.35; color: #444c5d; }
body.night .hub-tt small { color: #c5ccda; }
.hub-pill { justify-self: start; display: inline-flex; align-items: center; height: 28px; margin-top: 6px; padding: 0 10px; border-radius: 14px; background: #d9a441; color: #11192b; font: 700 .9375rem var(--sans); }
.hub-pill.quiet { background: #e7e9ee; color: #18202f; }
body.night .hub-pill.quiet { background: rgba(255, 255, 255, .12); color: #edf0f6; }
.hub-dots { display: flex; gap: 4px; margin-top: 8px; }
.hub-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
/* Dit rejseliv: hele bredden, med tre tal under */
.hub-tile[data-go="life"] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.hub-tile[data-go="life"] .hub-chip { margin: 0; }
.hub-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; width: 100%; }
.hub-strip span { display: grid; gap: 2px; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--b) 16%, transparent); }
.hub-strip b { font: 600 30px/1 var(--serif); font-variant-numeric: lining-nums; }
.hub-strip small { font-size: 15px; color: #444c5d; }
body.night .hub-strip small { color: #c5ccda; }
.hub-big { display: none; }
/* telefon: 2 spalter; brede felter ligger på tværs med ikonet til venstre */
@container hub (max-width: 29.99em) {
  .hub-tile[data-sp="2"] { grid-column: 1 / -1; }
  .hub-tile[data-sp="2"]:not([data-go="life"]) { flex-direction: row; align-items: center; gap: 14px; min-height: 104px; }
  .hub-tile[data-sp="2"]:not([data-go="life"]) .hub-chip { margin: 0; }
}
/* computer: 3 spalter */
@container hub (min-width: 30em) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hub-tile[data-sd="2"] { grid-column: span 2; }
  .hub-tile { padding: 14px 12px; }
  .hub-tt b { font-size: 1.0625rem; }
  .hub-tile[data-sd="3"] { grid-column: 1 / -1; }
  .hub-tile[data-sd="3"]:not([data-go="life"]) { flex-direction: row; align-items: center; gap: 14px; min-height: 104px; }
  .hub-tile[data-sd="3"]:not([data-go="life"]) .hub-chip { margin: 0; }
  .hub-tile[data-go="next"] { padding-right: 104px; }
  .hub-tile[data-go="next"] .hub-pill { display: none; }
  .hub-big { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; }
  .hub-big b { font: 600 44px/1 var(--serif); color: var(--b); font-variant-numeric: lining-nums tabular-nums; }
  body.night .hub-big b { color: color-mix(in srgb, var(--hi) 70%, #fff); }
  .hub-big small { font-size: 15px; color: #444c5d; }
  body.night .hub-big small { color: #c5ccda; }
  .hub-head h2 { font-size: 1.875rem; }
  .hh-txt b { font-size: 28px; }
  .hub-hero { min-height: 164px; }
}
/* stor tekst på telefonen: én spalte, ikonet til venstre */
@container hub (max-width: 19em) {
  .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-tile { grid-column: auto !important; flex-direction: row; align-items: center; gap: 14px; min-height: 76px; }
  .hub-tile .hub-chip { margin: 0; }
  .hub-tile[data-go="life"] { display: flex; flex-wrap: wrap; }
}
/* tryk og mus */
.hub-tile:active, .hub-hero:active { transform: scale(.97); transition-duration: .09s; }
.hub-tile:active .hub-chip { filter: brightness(1.08); }
@media (hover: hover) and (pointer: fine) {
  .hub-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--b) 85%, transparent); box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--b) 60%, rgba(0, 0, 0, .5)); }
  .hub-hero:hover { transform: translateY(-2px); }
}
.hub :is(.hub-tile, .hub-hero, .hub-set, .hub-close, .hub-seg button):focus-visible { outline: 3px solid #8a5a00; outline-offset: 2px; }
body.night .hub :is(.hub-tile, .hub-hero, .hub-set, .hub-close, .hub-seg button):focus-visible { outline-color: #d9a441; }
/* indstillinger: en rolig liste */
.hub-settings .mrows { display: grid; gap: 8px; }
.hub .hub-set { min-height: 64px; }
.hs-chip { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e3e6ea; color: #475263; }
body.night .hs-chip { background: rgba(255, 255, 255, .08); color: #c9ced5; }
.hs-chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub .hub-set.done { cursor: default; }
.hub-lang { flex-wrap: wrap; }
.hub-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(127, 140, 160, .14); }
.hub-seg button { min-height: 44px; min-width: 88px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: inherit; font: 600 15px var(--sans); cursor: pointer; }
.hub-seg button.on { background: #11192b; color: #fff; }
body.night .hub-seg button.on { background: #fff; color: #11192b; }
.hub-foot { margin-top: 18px; }
.hub-foot .link { min-height: 48px; }
/* kommer frem: felterne toner ind et for et (kun når app centret åbnes, ikke ved Tilbage) */
.hub-enter :is(.hub-hero, .hub-tile) { animation: hubIn .18s ease-out both; animation-delay: calc(min(var(--i), 10) * 20ms); }
@keyframes hubIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hub-enter :is(.hub-hero, .hub-tile) { animation: none; } .hub :is(.hub-tile, .hub-hero) { transition: none; } }
@media (max-width: 760px) { .hub-head { padding: 18px 18px 10px; } .hub-in { padding: 0 18px 20px; } }
/* knappen der åbner app centret: ikon og navn, aldrig kun et ikon */
body.kunde #menuBtn.hub-btn { width: auto; display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 22px; font: 600 15px var(--sans); white-space: nowrap; }
body.kunde #menuBtn.hub-btn svg { width: 22px; height: 22px; flex: none; }
/* felternes egne sider: minder og camperlog */
.memo-row .mem-img { width: 56px; height: 56px; }
.memo-row em { display: block; font-style: normal; font-size: 14px; color: var(--muted); }
.cl-ic { font-size: 26px; background: rgba(102, 96, 203, .18) !important; }
.hub-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }

/* App centret: knappen væk under filmen, og plads til den ved siden af navnet på telefonen */
body.kunde.playing #menuBtn.hub-btn { display: none !important; }
@media (max-width: 760px) { body.kunde .brand { padding-right: 160px; } }

/* ===== App centret v2: swipe-sider på telefon, overblik på computer =====
   Telefon: én side ad gangen (I dag, Gense, Planlæg, På tur, Del), prikker og "Næste side ›" nederst. Ingen lang rullen */
.modal-card.hub-card { display: flex; flex-direction: column; overflow: hidden; height: auto; max-height: min(calc(100dvh - 32px), 820px); }
@media (max-width: 760px) { .modal-card.hub-card { max-height: calc(100dvh - 2 * var(--m-gap, 10px) - var(--safe-t, 0px) - var(--safe-b, 0px)); } }
.hub-card .hub { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hub-card .hub-head { position: static; flex: none; }
.hub-pager { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hub-pager::-webkit-scrollbar { display: none; }
.hub-page { flex: 0 0 100%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; padding: 2px 24px 18px; }
.hub-page h3 { margin: 2px 0 0; font: italic 600 26px/1.15 var(--serif); }
.hub-expl { margin: 2px 0 14px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.hub-page .hub-hero { margin-bottom: 12px; }
.hub-desk { display: none; }
.hub-nav { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid rgba(127, 140, 160, .22); }
.hub-pn { min-height: 46px; max-width: 100%; padding: 0 14px; border: 0; border-radius: 23px; font: 600 15px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hub-pn.prev { justify-self: start; background: rgba(127, 140, 160, .16); color: inherit; }
.hub-pn.next { justify-self: end; background: color-mix(in srgb, var(--pc, #667383) 78%, #000); color: #fff; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--pc, #667383) 80%, #000); }
.hub-pn.off { visibility: hidden; }
.hub-pdots { display: flex; align-items: center; justify-content: center; }
.hub-pdots button { width: 20px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hub-pdots button::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgba(127, 140, 160, .45); transition: transform .15s, background-color .15s; }
.hub-pdots button.on::before { background: var(--pc); transform: scale(1.4); }
.hub :is(.hub-pn, .hub-pdots button):focus-visible { outline: 3px solid #8a5a00; outline-offset: 2px; }
body.night .hub :is(.hub-pn, .hub-pdots button):focus-visible { outline-color: #d9a441; }
@media (max-width: 760px) { .hub-page { padding: 2px 18px 16px; } .hub-nav { padding: 8px 12px 10px; } }
/* Computer: alt på én skærm. "I dag" øverst i hele bredden, grupperne som kolonner med hver sin farve */
@media (min-width: 1000px) {
  .modal-card.hub-card { width: min(1240px, calc(100vw - 64px)); height: auto; max-height: calc(100dvh - 40px); overflow-y: auto; }
  .hub-card .hub-head { padding: 26px 32px 6px; }
  .hub-card .hub-pager { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 24px; overflow: visible; padding: 4px 32px 30px; }
  .hub-card .hub-page { overflow: visible; padding: 0; }
  .hub-card .hub-page:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: stretch; }
  .hub-card .hub-page:first-child .hub-intro { grid-column: 1 / -1; margin: 0 0 14px; }
  .hub-card .hub-page:first-child .hub-hero { margin: 0; height: 100%; }
  .hub-card .hub-page:first-child .hub-grid { grid-template-columns: minmax(0, 1fr); height: 100%; }
  .hub-card .hub-page:first-child .hub-tile { height: 100%; }
  .hub-card .hub-page:not(:first-child) { border-top: 3px solid var(--pc); padding-top: 12px; }
  .hub-card .hub-page h3 { font-size: 22px; }
  .hub-card .hub-page:not(:first-child) .hub-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .hub-card .hub-page:not(:first-child) .hub-tile { grid-column: auto !important; flex-direction: row; align-items: center; gap: 12px; min-height: 84px; padding: 12px 14px; }
  .hub-card .hub-page:not(:first-child) .hub-chip { width: 46px; height: 46px; margin: 0; border-radius: 14px; }
  .hub-card .hub-page:not(:first-child) .hub-chip svg { width: 24px; height: 24px; }
  .hub-card .hub-tile[data-go="next"] { padding-right: 14px; }
  .hub-card .hub-big { display: none !important; }
  .hub-card .hub-tile[data-go="next"] .hub-pill { display: inline-flex !important; }
  .hub-card .hub-nav { display: none; }
  .hub-card .hub-phone { display: none; }
  .hub-card .hub-desk { display: inline; }
}
/* Indstillinger: eget tandhjul ved siden af "Alt i appen" (temaknappen er flyttet ind under Udseende) */
body.kunde #themeBtn { display: none !important; }
body.kunde #setBtn { width: 44px; height: 44px; border-radius: 22px; display: grid !important; place-items: center; }
body.kunde #setBtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.kunde.playing #setBtn { display: none !important; }
@media (max-width: 760px) {
  body.kunde #setBtn { position: fixed; top: calc(var(--m-gap) + var(--safe-t) + 8px); right: calc(var(--m-gap) + 8px + var(--mbw, 136px) + 8px); z-index: 905; }
  body.kunde .brand { padding-right: 214px; }
}
.set-sheet .hub-in { padding-top: 0; }
/* Næste tur i siden i stedet for Afspil (Afspil ligger i app centret) */
body.kunde .dock [data-act="play"] { display: none !important; }
body.kunde .dock #nextBtn { --k: #4fd1c0; order: 3; }
body.kunde #nextBtn .nb-num { font: 800 17px/1 var(--sans); }
body.kunde #nextBtn .nb-cap { font: 700 9.5px/1 var(--sans); }
body.kunde #nextBtn .nb-lbl { display: none !important; }
body.kunde .dock #nextBtn.has-count { flex-direction: column; justify-content: center; align-items: center; gap: 1px; color: #fff; background: linear-gradient(135deg, #3fc1b0, #2f86c8) !important; box-shadow: 0 10px 22px -8px rgba(47, 134, 200, .7) !important; }
@media (max-width: 760px) { body.kunde .dock #nextBtn.has-count { display: flex; } }
@media (min-width: 761px) {
  body.kunde .dock #nextBtn.has-count { flex-direction: row; width: auto; padding: 0 14px; border-radius: 999px; }
  body.kunde .dock #nextBtn.has-count :is(.nb-num, .nb-cap) { display: none; }
  body.kunde .dock #nextBtn.has-count .nb-lbl { display: inline !important; font: 600 14px var(--sans); color: #fff; white-space: nowrap; }
}
.hub-pill { flex: none; white-space: nowrap; }
/* Computer: et rigtigt gitter. Rækkerne flugter på tværs af grupperne, og alle felter i en række er lige høje (subgrid) */
@media (min-width: 1000px) {
  .hub-card .hub-pager { grid-template-rows: auto auto repeat(var(--rows, 4), 1fr); row-gap: 0; }
  .hub-card .hub-page:first-child { grid-row: 1; margin-bottom: 26px; }
  .hub-card .hub-page:not(:first-child) { grid-row: 2 / span var(--span, 5); display: grid; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .hub-card .hub-page:not(:first-child) .hub-grid { display: contents; }
  .hub-card .hub-page:not(:first-child) .hub-tile { min-height: 92px; }
  .hub-ph .hub-expl { margin-bottom: 2px; }
}
/* Rejsebogen på skærmen: kortet (Leaflet) må ikke lægge sig over den faste topbjælke, når man ruller */
.bk-map { position: relative; z-index: 0; isolation: isolate; }
.book-bar { z-index: 20; }
/* Telefon og tablet: app centret fylder hele højden, og felterne er store kort, der deler siden mellem sig */
@media (max-width: 999px) {
  .modal-card.hub-card { height: min(calc(100dvh - 32px), 860px); }
  .hub-card .hub-page { display: flex; flex-direction: column; }
  .hub-card .hub-page > .hub-grid { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: 1fr; gap: 12px; }
  .hub-card .hub-page .hub-tile:not([data-go="life"]) { grid-column: auto !important; flex-direction: row !important; align-items: center; gap: 16px; min-height: 88px; padding: 14px 18px; }
  .hub-card .hub-page .hub-tile:not([data-go="life"]) .hub-chip { width: 60px; height: 60px; margin: 0; border-radius: 18px; }
  .hub-card .hub-page .hub-chip svg { width: 30px; height: 30px; }
  .hub-card .hub-page .hub-tt b { font-size: 1.25rem; }
  .hub-card .hub-page .hub-tt small { font-size: 1rem; }
  .hub-card .hub-page:first-child > .hub-hero { flex: 1 1 0; margin-bottom: 12px; }
  .hub-card .hub-page:first-child > .hub-grid { flex: 1 1 0; }
  .hub-card .hub-tile[data-go="life"] { align-content: center; }
  .hub-card .hub-tile[data-go="next"] .hub-big { display: grid; position: static; transform: none; margin-left: auto; justify-items: center; }
  .hub-card .hub-tile[data-go="next"] .hub-big b { font: 600 40px/1 var(--serif); color: var(--b); font-variant-numeric: lining-nums tabular-nums; }
  body.night .hub-card .hub-tile[data-go="next"] .hub-big b { color: color-mix(in srgb, var(--hi) 70%, #fff); }
  .hub-card .hub-tile[data-go="next"] .hub-big small { font-size: 14px; color: #444c5d; }
  body.night .hub-card .hub-tile[data-go="next"] .hub-big small { color: #c5ccda; }
  .hub-card .hub-tile[data-go="next"]:has(.hub-big) .hub-pill { display: none; }
}
@media (max-width: 760px) { .modal-card.hub-card { height: calc(100dvh - 2 * var(--m-gap, 10px) - var(--safe-t, 0px) - var(--safe-b, 0px)); } }
/* Stedkortet (kundeudgaven): "Ret" med blyanten oppe i billedet ved siden af ✕; billedkreditten flytter ned i hjørnet */
.sheet-edit { position: absolute; top: 14px; right: 64px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 12px; border: 0; border-radius: 21px; background: rgba(11, 17, 29, .72); color: #fff; font: 700 15px var(--sans); cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 18px -6px rgba(0, 0, 0, .6); }
.sheet-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sheet-edit:hover { background: #2f7fb8; }
body.kunde .sheet-edit { top: calc(12px + var(--safe-t)); }
/* Kundeudgaven: "Ret" i fast mørkeblå med guldkant, så den ikke går i ét med et sløret eller mørkt foto */
body.kunde .sheet-edit { background: var(--brand-ink); box-shadow: 0 0 0 2px #d9a441, 0 6px 18px -6px rgba(0, 0, 0, .6); }
body.kunde .sheet-hero .credit-tag { top: auto !important; bottom: 10px; right: 12px; }
.own-ph { display: grid; gap: 12px; margin-bottom: 18px; }
.own-ph h4 { margin: 0; }
/* Rejsebogen på telefon: bjælken passer i bredden, og bogen ruller kun op og ned (ikke til siden ved et skævt swipe) */
#book { overflow-x: hidden; overscroll-behavior: contain; }
.book-bar .bk-short { display: none; }
@media (max-width: 560px) {
  .book-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .book-bar > span { display: none; }
  .book-bar .bk-long { display: none; }
  .book-bar .bk-short { display: inline; }
}
/* Næste tur m.fl.: datofeltet på iPhone må ikke gøre vinduet bredere (så kan det trækkes til siden som et elastik) */
body.kunde #modalCard { overflow-x: hidden; }
.name-in[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 50px; text-align: left; }
.name-in[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Vil du tilbage hertil? Én knap til mærkerne (popup) i stedet for mange pills */
.rate-pick { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(127, 140, 160, .14); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rate-pick .rp-ic { flex: none; min-width: 34px; font-size: 22px; letter-spacing: -2px; }
.rate-pick .rp-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rate-pick .rp-txt b { font-size: 16px; }
.rate-pick .rp-txt small { font-size: 14px; color: var(--muted); }
.rate-pick .mr-chev { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tag-list { display: grid; gap: 8px; }
.tag-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 14px; border: 2px solid transparent; border-radius: 16px; background: rgba(127, 140, 160, .12); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tag-row .tg-ic { font-size: 26px; flex: none; width: 34px; text-align: center; }
.tag-row b { flex: 1; font-size: 17px; }
.tag-row .tg-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(127, 140, 160, .5); color: transparent; font-weight: 800; flex: none; }
.tag-row.on { border-color: #2fa66a; background: rgba(47, 166, 106, .16); }
.tag-row.on .tg-check { background: #2fa66a; border-color: #2fa66a; color: #fff; }
.tag-row.bad.on { border-color: #d9643a; background: rgba(217, 100, 58, .16); }
.tag-row.bad.on .tg-check { background: #d9643a; border-color: #d9643a; }
.tag-done { width: 100%; margin-top: 6px; min-height: 50px; font-size: 16px; }
/* Forklaringer øverst på Camperlog, Gem en kopi og Rejsebrev */
.ex-intro { padding: 14px 16px; border-radius: 16px; background: rgba(47, 127, 184, .14); }
.ex-intro b { display: block; font-size: 17px; margin-bottom: 4px; }
.ex-intro p { margin: 0; font-size: 15px; line-height: 1.5; }
.ex-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ex-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.ex-list li span { font-size: 22px; flex: none; }
.ex-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px; line-height: 1.45; }
.ex-go { width: 100%; min-height: 54px; font-size: 17px; }
.cl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-stats div { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(102, 96, 203, .16); }
.cl-stats b { font: 600 28px/1 var(--serif); }
.cl-stats small { font-size: 14px; color: var(--muted); }
/* Rejsebrev: et eksempel på mailen */
.lt-mail { border-radius: 16px; overflow: hidden; background: #fbf8f2; color: #1b2333; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6); }
.lt-head { display: grid; gap: 3px; padding: 12px 14px; background: #ece6da; font-size: 14px; }
.lt-head small { display: inline-block; min-width: 46px; color: #6f6656; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lt-body { padding: 14px; display: grid; gap: 10px; font-size: 15px; }
.lt-body p { margin: 0; }
.lt-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .25); }
.lt-item img, .lt-noimg { width: 72px; height: 72px; flex: none; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #e9e4da; font-size: 26px; }
.lt-item b { display: block; font: italic 400 19px/1.2 var(--serif); }
.lt-item small { color: #6f6656; font-size: 13px; }
.lt-item p { margin-top: 4px; font-size: 14px; }
.lt-btn { justify-self: start; padding: 10px 16px; border-radius: 999px; background: #2f7fb8; color: #fff; font-weight: 700; font-size: 15px; }
.lt-foot { font-size: 12px; color: #6f6656; }
.lt-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(127, 140, 160, .12); font-weight: 600; font-size: 16px; cursor: pointer; }
.lt-toggle input { -webkit-appearance: none; appearance: none; flex: none; width: 54px; height: 32px; margin: 0; border-radius: 16px; background: rgba(127, 140, 160, .45); position: relative; cursor: pointer; transition: background .15s; }
.lt-toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.lt-toggle input:checked { background: #2fa66a; }
.lt-toggle input:checked::after { transform: translateX(22px); }
body.kunde #modalCard .tag-done { background: #2fa66a !important; border-color: #2fa66a !important; color: #fff !important; }
/* Højrepil på alle felter i app centret: man kan se, at de åbner noget */
.hub-chev { flex: none; display: grid; place-items: center; margin-left: auto; }
.hub-chev .mr-chev { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.hub-tile[data-go="life"] { grid-template-columns: auto minmax(0, 1fr) auto; }
.hub-tile[data-go="next"] .hub-big + .hub-chev { margin-left: 10px; }
@media (min-width: 1000px) { .hub-card .hub-page:not(:first-child) .hub-tile .hub-chev { margin-left: auto; } }
/* Tandhjulet yderst til højre, "Alt i appen" lige til venstre for det */
@media (max-width: 760px) {
  body.kunde #setBtn { right: calc(var(--m-gap) + 8px); }
  body.kunde #menuBtn.hub-btn { right: calc(var(--m-gap) + 8px + 44px + 8px); }
}
body.kunde #menuBtn.hub-btn .hub-grid-ic { width: 22px; height: 22px; }
/* Telefon: vinduer uden tekstfelter står midt på skærmen */
@media (max-width: 760px) { body.kunde .modal.mid { place-items: center; } }
/* Næste tur som guide */
.nx-row .nx-ic { font-size: 22px; background: color-mix(in srgb, var(--k) 30%, transparent) !important; }
.nx-big { font-size: 19px !important; padding: 15px 16px !important; }
.nx-datebox { overflow: hidden; border-radius: 14px; }
.nx-step .name-ideas button { padding: 11px 15px; font-size: 15px; }
.nx-go { width: 100%; min-height: 52px; font-size: 17px; }
/* App centret: på telefonen er overskriften den side, man står på ("Alt i appen" står småt ovenover); på computeren "Alt i appen" */
.hub-page-t { display: none; }
@media (max-width: 999px) {
  .hub-card .hub-desk-t { display: none; }
  .hub-card .hub-page-t { display: inline; }
  .hub-card .hub-page h3 { display: none; }
  .hub-card .hub-head .eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #e0a95a; }
}
/* Mine ture: tallet i turens farve og knappen til en ny tur */
.trip-row .rw-dot { display: grid; place-items: center; color: #fff; font: 800 16px var(--sans); }
.trip-new { width: 100%; min-height: 50px; font-size: 16px; }
.hub-head h2 { margin-top: 6px; }
/* Filmen: tæller på billedet (1/6) */
.reel-count { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 4px 11px; border-radius: 999px; background: rgba(10, 15, 26, .72); color: #fff; font: 700 13px var(--sans); letter-spacing: .03em; }
/* Filmen på telefon: billedet fylder pladsen mellem punktet øverst og knapperne nederst */
@media (max-width: 760px) {
  body.kunde .reel { top: calc(env(safe-area-inset-top, 0px) + 21vh); display: flex; flex-direction: column; }
  body.kunde .reel-photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 140px; }
  body.kunde .reel-text { flex: none; }
  body.kunde .popover.route-pop { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; max-height: calc(100dvh - 40px); }
}
/* Filmen på telefon: teksten under billedet står i midten */
@media (max-width: 760px) {
  body.kunde .reel-text { text-align: center; }
  body.kunde .reel-text .eyebrow { justify-content: center; }
  body.kunde .reel-text p { margin-left: auto; margin-right: auto; }
}
/* "Tilbage" nederst på telefonen (kundeudgaven); på computeren bliver den stående øverst */
.m-backbar, .bb-wrap { display: none; }
@media (max-width: 760px) {
  body.kunde .modal-card.has-bb .m-head .m-back { display: none; }
  body.kunde .modal-card.has-bb .m-head .back-hint { display: none; }
  body.kunde .modal-card.has-bb .m-backbar { display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
  body.kunde .modal-card.has-bb .bb-wrap { display: flex; align-items: center; gap: 10px; flex: none; }
  body.kunde .modal-card.has-bb .m-foot:has(.bb-wrap) .bb-hint { display: none; }
  body.kunde .modal-card .m-back2 { flex: none !important; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(224, 169, 90, .18); color: #e0a95a; font: 700 16px var(--sans); cursor: pointer; }
  body.kunde:not(.night) .modal-card .m-back2 { background: #f3e6cf; color: #8a5a10; }
  body.kunde .modal-card .bb-hint { font-size: 14px; color: var(--muted); }
  body.kunde .modal-card.has-bb .m-foot .nx-go { flex: 1; width: auto; }
}
/* Dit sted: to rolige rækker */
.place-rows { display: grid; gap: 8px; margin-bottom: 16px; }
.place-rows .mrows { display: grid; gap: 10px; }
.pr-row { min-height: 84px; }
.pr-row .pr-ic { width: 52px !important; height: 52px !important; font-size: 26px; border-radius: 16px !important; background: color-mix(in srgb, var(--k) 28%, transparent) !important; }
.pr-row.done .pr-ic { background: color-mix(in srgb, var(--k) 55%, transparent) !important; }
.pr-row b { font-size: 17px; }
.pr-row small { font-size: 14.5px; }
.place-rows .rate-note { padding: 0 4px; }
/* guiderne */
.yn-big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yn-big button { display: grid; justify-items: center; gap: 6px; min-height: 140px; padding: 18px; border: 2px solid transparent; border-radius: 22px; background: rgba(47, 166, 106, .14); color: inherit; font: 700 20px var(--sans); cursor: pointer; }
.yn-big button span { font-size: 46px; line-height: 1; }
.yn-big button.no { background: rgba(217, 100, 58, .14); }
.yn-big button.on { border-color: #2fa66a; background: rgba(47, 166, 106, .3); }
.yn-big button.no.on { border-color: #d9643a; background: rgba(217, 100, 58, .3); }
.yn-skip { justify-self: center; min-height: 44px; font-size: 15px; }
.camp-big { display: flex; align-items: center; gap: 12px; }
.camp-big input { flex: 1; min-width: 0; }
.camp-big em { font-style: normal; font-weight: 600; color: var(--muted); flex: none; }
.tag-done { flex: 1; }
body.kunde .modal-card [data-cpgo], body.kunde .modal-card .nx-go { background: #2fa66a !important; border-color: #2fa66a !important; color: #fff !important; }
body.kunde .modal-card .nx-go.nx-next { background: #2f7fb8 !important; border-color: #2f7fb8 !important; }
/* Navigationsbjælke i bunden på alle undersider (kundeudgaven): "‹ Planlæg" i stedet for pilen øverst */
body.kunde .modal-card.has-bb .m-head .m-back, body.kunde .modal-card.has-bb .m-head .back-hint { display: none !important; }
body.kunde .modal-card.has-bb .m-backbar { display: flex !important; align-items: center; gap: 14px; position: sticky; bottom: 0; z-index: 3; background: var(--paper); border-top: 1px solid rgba(127, 140, 160, .22); padding: 10px 16px 14px; }
body.kunde .modal-card.has-bb .bb-wrap { display: flex !important; align-items: center; gap: 10px; flex: none; max-width: 55%; }
body.kunde .modal-card.has-bb .m-foot:has(.bb-wrap) { position: sticky; bottom: 0; z-index: 3; background: var(--paper); border-top: 1px solid rgba(127, 140, 160, .22); }
body.kunde .modal-card.has-bb .m-foot:has(.bb-wrap) .bb-hint { display: none; }
body.kunde .modal-card .m-back2 { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(127, 140, 160, .16); color: inherit; font: 700 16px var(--sans); cursor: pointer; }
body.kunde .modal-card .m-back2 .bb-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.kunde:not(.night) .modal-card .m-back2 { background: #e7e9ee; color: #18202f; }
body.kunde .modal-card .bb-hint { margin-left: auto; font-size: 14px; color: var(--muted); }
@media (pointer: fine) { body.kunde .modal-card .bb-hint { display: none; } }
body.kunde .modal-card.has-bb > div[style="height:12px"], body.kunde .modal-card.has-bb > div[style="height:16px"] { display: none; }
/* Felterne i app centret på telefonen: stort svagt ikon i baggrunden og et kig ind i indholdet */
.hub-more, .hub-wm { display: none; }
@media (max-width: 999px) {
  .hub-card .hub-tile { overflow: hidden; }
  .hub-card .hub-wm { display: block; position: absolute; right: -18px; bottom: -22px; width: 132px; height: 132px; color: var(--b); opacity: .13; pointer-events: none; transform: rotate(-8deg); }
  body.night .hub-card .hub-wm { color: var(--hi); opacity: .16; }
  .hub-card .hub-wm svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .hub-card .hub-tile > :not(.hub-wm) { position: relative; z-index: 1; }
  .hub-card .hub-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
  .hm-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--b) 18%, transparent); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .hm-ph { display: flex; }
  .hm-ph img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; border: 2px solid var(--paper); margin-left: -10px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
  .hm-ph img:first-child { margin-left: 0; }
  .hm-books { display: flex; gap: 8px; }
  .hm-book { position: relative; width: 54px; height: 70px; border-radius: 4px 8px 8px 4px; overflow: hidden; background: var(--tc); box-shadow: inset 4px 0 0 rgba(0, 0, 0, .25), 0 6px 12px -6px rgba(0, 0, 0, .6); }
  .hm-book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
  .hm-book i { position: absolute; left: 6px; right: 4px; bottom: 4px; font: italic 600 9px/1.1 var(--serif); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Indstillinger i farver */
.set-sheet .hub-set .hs-chip { background: var(--k, #667383) !important; color: #fff !important; }
/* Knapperne i siden (telefon): de valgte i den valgte rækkefølge, tomme pladser med + */
@media (max-width: 760px) {
  body.kunde .dock .dk-off { display: none !important; }
  body.kunde .dock .dk-on, body.kunde .dock .dk-plus { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
  body.kunde .dock .dk-cust { color: var(--k); }
  body.kunde .dock .dk-cust svg { width: 20px; height: 20px; fill: none; stroke: var(--k) !important; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  body.kunde .dock .dk-cust span { display: none !important; }
  body.kunde .dock .dk-plus { --k: #9fb3cc; background: rgba(15, 22, 36, .55) !important; box-shadow: none !important; border: 2px dashed rgba(255, 255, 255, .45) !important; color: #fff; }
  body.kunde .dock .dk-plus b { font-size: 22px; line-height: 1; font-weight: 700; }
}
@media (min-width: 761px) { body.kunde .dock .dk-cust { display: none !important; } }
.dk-ic { width: 44px !important; height: 44px !important; border-radius: 13px !important; background: var(--k) !important; color: #fff !important; display: grid; place-items: center; flex: none; }
.dk-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dk-empty { background: transparent !important; border: 2px dashed rgba(127, 140, 160, .6); color: var(--muted) !important; font-size: 20px; }
.dk-n { flex: none; width: 26px; text-align: center; font: 800 16px var(--sans); color: var(--muted); }
.dk-reset { justify-self: center; min-height: 44px; }
/* Telefon: kiggene ind i indholdet fylder højst én linje, og på sider med fire felter vises de ikke (ingen rullen) */
@media (max-width: 999px) {
  .hub-card .hub-more { flex-wrap: nowrap; overflow: hidden; }
  .hub-card .hub-more .hm-chip { flex: 0 1 auto; min-width: 0; }
  .hub-card .hub-grid:has(> .hub-tile:nth-child(4)) .hub-more { display: none; }
}
@media (max-width: 999px) {
  .hub-card .hub-more { flex-wrap: wrap; align-content: flex-start; max-height: 48px; overflow: hidden; }
  .hub-card .hub-more .hm-chip { flex: none; }
}
@media (max-width: 999px) { .hub-card .hub-more { row-gap: 24px; column-gap: 6px; } }
/* Ingen orddeling i feltnavne ("Næ-ste tur") */
.hub-tt b { hyphens: manual; -webkit-hyphens: manual; }
/* Mindre computerskærme: to brede kolonner i stedet for fire smalle */
@media (min-width: 1000px) and (max-width: 1279px) {
  .modal-card.hub-card { width: min(1000px, calc(100vw - 48px)); }
  .hub-card .hub-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 26px; }
  .hub-card .hub-page:first-child { grid-row: auto; margin-bottom: 0; }
  .hub-card .hub-page:not(:first-child) { grid-row: auto; display: block; }
  .hub-card .hub-page:not(:first-child) .hub-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px; margin-top: 12px; }
}
/* Kortet: ingen fokus-firkant omkring ruter og nåle, når man har trykket på dem (Chrome tegner ellers en ramme om hele stregen) */
.leaflet-container .leaflet-interactive:focus, .leaflet-container path:focus, .leaflet-marker-icon:focus { outline: none; }
.leaflet-container .leaflet-interactive:focus-visible, .leaflet-marker-icon:focus-visible { outline: 3px solid #e0a95a; outline-offset: 2px; }
/* Strækningsvinduet i farver (kundeudgaven): hvert valg sin farve, Gem grøn, Fortryd neutral */
body.kunde .leg-ed .le-title { font: italic 600 19px/1.2 var(--serif); }
body.kunde .leg-ed .le-btn { min-height: 46px; border: 0 !important; font-weight: 700; }
body.kunde .leg-ed [data-le="alts"] { background: rgba(47, 127, 184, .22) !important; color: #a9d2f0 !important; }
body.kunde .leg-ed [data-le="via"] { background: rgba(224, 169, 90, .2) !important; color: #f3cf92 !important; }
body.kunde .leg-ed [data-le="ferry"], body.kunde .leg-ed [data-le="road"] { background: rgba(79, 209, 192, .18) !important; color: #8fe6d8 !important; }
body.kunde .leg-ed [data-le="ferry"]::before { content: '⛴️ '; }
body.kunde .leg-ed [data-le="road"]::before { content: '🚐 '; }
body.kunde .leg-ed [data-le="alts"]::before { content: '🔀 '; }
body.kunde .leg-ed [data-le="via"]::before { content: '✋ '; }
body.kunde .leg-ed [data-le="save"] { background: #2fa66a !important; border-color: #2fa66a !important; color: #fff !important; }
body.kunde .leg-ed [data-le="save"]:disabled { opacity: .5; }
body.kunde .leg-ed [data-le="cancel"] { background: rgba(127, 140, 160, .16) !important; border: 0 !important; }
body.kunde:not(.night) .leg-ed [data-le="alts"] { color: #1d5f8f !important; }
body.kunde:not(.night) .leg-ed [data-le="via"] { color: #8a5a10 !important; }
body.kunde:not(.night) .leg-ed :is([data-le="ferry"], [data-le="road"]) { color: #1d6b62 !important; }
body.kunde .leg-ed .le-hint { color: var(--muted); }
/* Mindekortet går af vejen, mens man retter en strækning eller har et vindue åbent */
body:has(.leg-pop) .mem-card, body:has(#modal.open) .mem-card, body.playing .mem-card { opacity: 0 !important; pointer-events: none !important; }
/* Klokken (kundeudgaven): rund knap under topbjælken til højre, rød prik med antal, ringer et par gange når der er nyt */
.bell-btn { position: fixed; z-index: 880; right: calc(var(--m-gap, 10px) + 8px); top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + var(--m-bar, 56px) + 14px); width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3a2f5c, #2a3b5c); color: #f3cf92; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(243, 207, 146, .35); cursor: pointer; }
.bell-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 8%; }
.bell-btn.ring svg { animation: bellRing 1.4s ease-in-out .8s 3; }
@keyframes bellRing { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-8deg); } 50% { transform: rotate(4deg); } }
.bell-dot { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5483d; color: #fff; font: 800 12px/20px var(--sans); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #1a2338; }
@media (min-width: 761px) { .bell-btn { top: 90px; right: 16px; } }
@media (max-width: 760px) { body:has(#mFilter .mf-x) .bell-btn, body:has(#mFilter .mf-chip:not(.mf-ghost)) .bell-btn { top: calc(var(--m-gap) + var(--safe-t) + var(--m-bar) + 58px); } }
body.playing .bell-btn, body:has(#sheet.open) .bell-btn, body:has(.drawer.open) .bell-btn, body:has(#modal.open) .bell-btn, body:has(.leg-pop) .bell-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .bell-btn.ring svg { animation: none; } }
/* Navnefeltet viser og vælger turen (kundeudgaven); på telefonen erstatter det rækken "Vælg rejse" og tallene */
.brand-pick { display: none; }
@media (max-width: 760px) {
  body.kunde #mFilter { display: none !important; }
  body.kunde #brand .stats { display: none !important; }
  body.kunde .brand-pick { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
  body.kunde .bell-btn { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + var(--m-bar, 56px) + 14px) !important; }
}
.bp-btn { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 34px; padding: 4px 10px 4px 9px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, rgba(255, 255, 255, .06)); color: inherit; font: 600 14.5px var(--sans); cursor: pointer; }
.bp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.bp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-btn small { flex: none; font-size: 12.5px; opacity: .75; font-weight: 500; }
.bp-caret { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.bp-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(229, 72, 61, .85); color: #fff; cursor: pointer; }
.bp-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 760px) {
  body.kunde .brand-pick { margin-right: -196px; }
  body.kunde .bp-btn small { display: none; }
  body.kunde .bell-btn { top: calc(var(--brand-b, 80px) + 12px) !important; }
}
/* Knapperne i siden: ikonet har fast størrelse, teksten tager resten */
.mrows .mrow > .dk-ic { flex: none !important; }
.mrows .mrow > .dk-ic + span { flex: 1; min-width: 0; }
@media (max-width: 760px) { body.kunde .brand-pick { margin-top: 20px; } }
/* "✓ Gemt" øverst midt på skærmen (kundeudgaven): dækker ingen knapper, forsvinder af sig selv */
.saved-pill { position: fixed; z-index: 3100; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border-radius: 999px; background: #2fa66a; color: #fff; font: 700 15px var(--sans); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55); pointer-events: none; opacity: 0; transform: translate(-50%, -16px); transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.saved-pill span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 13px; }
.saved-pill.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .saved-pill { transition: none; } }
/* Nyt sted på telefon: lavere kort midt på skærmen (op i toppen kun mens tastaturet er fremme), og intet ligger hen over guiden */
@media (max-width: 760px) {
  body.kunde { --wizH: min(450px, calc(100dvh - 2 * var(--m-gap) - var(--safe-t) - var(--safe-b) - 90px)); }
  body.kunde #fabMenu { top: max(calc(var(--m-gap) + var(--safe-t)), calc((100dvh - var(--wizH)) / 2)); }
  body.kunde .modal:has(#modalCard.wizc.wiznew) { place-items: center; }
  body.kunde .modal:has(#modalCard :is(input:not([type="checkbox"]), textarea):focus) { place-items: start center; }
  body.kunde .fab-wrap.open { z-index: 1760; }
  body.kunde .fab-menu button { padding: 16px 14px; }
}
/* Når et vindue er åbent oven på noget (fx "Hvad vil du rette?" over stedkortet): det bagved sløres og dæmpes */
body.kunde:has(#modal.open) :is(#sheet, #brand, #dock, .bell-btn, #tripKm, #setBtn, #menuBtn) { filter: blur(3px) brightness(.7); transition: filter .2s; }
/* Nyt sted, trin 1: knapperne i toppen væk, så de ikke ligger hen over guiden */
body.kunde:has(.fab-wrap.open) :is(#menuBtn, #setBtn, .bell-btn, #brand) { visibility: hidden; }
/* Nyt sted, trin 2 (man kan trække nålen): kortet sløres, men nålene står skarpt */
body.kunde.wiz-sharp:has(#modal.open) #map :is(.leaflet-tile-pane, .leaflet-overlay-pane) { filter: blur(3px) brightness(.8); transition: filter .2s; }
/* Telefon (kundeudgaven): ingen "Mine rejser"-titel i toppen; turvalget står på første linje ved siden af knapperne */
@media (max-width: 760px) {
  body.kunde #brand .brand-row { display: none !important; }
  body.kunde .brand-pick { margin: 0 !important; min-height: 44px; }
  body.kunde #brand { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
}
/* Sløret baggrund, også når Ruter- eller Kortstil-vinduet er åbent */
body.kunde:has(.popover.open) :is(#sheet, #brand, #dock, .bell-btn, #tripKm, #setBtn, #menuBtn, .fab-wrap) { filter: blur(3px) brightness(.7); transition: filter .2s; }
/* "✓ Gemt" inde i et åbent vindue: på linjen over overskriften, lige til venstre for ✕ */
body.kunde #modalCard :is(.m-head, .hub-head) { position: relative; }
.saved-in { position: absolute; top: 20px; right: 84px; display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: #2fa66a; color: #fff; font: 700 13.5px var(--sans); pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.saved-in span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 11px; }
.saved-in.show { opacity: 1; transform: none; }
.hub-head .saved-in { top: 14px; right: 116px; }
.camp-big + .name-ideas button.on, .nx-step .name-ideas button.on { outline: 3px solid #2fa66a; outline-offset: 1px; }
body.kunde .modal-card .name-ideas button[data-cpv].on { background: #2fa66a !important; color: #fff !important; }
.saved-in { top: 12px; padding: 3px 10px 3px 6px; font-size: 12.5px; }
.saved-in span { width: 16px; height: 16px; font-size: 10px; }
/* Telefon (kundeudgaven): feltet i toppen kun når en tur eller et år er valgt; ellers står knapperne alene på kortet */
@media (max-width: 760px) {
  body.kunde:not(.has-tf) #brand { display: none !important; }
  body.kunde:not(.has-tf) :is(#menuBtn.hub-btn, #setBtn) { background: #1a2338 !important; color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
  body.kunde:not(.night):not(.has-tf) :is(#menuBtn.hub-btn, #setBtn) { background: #fffaf2 !important; color: #18202f; }
  /* alle vinduer midt på skærmen; kun mens man skriver i et felt, rykker vinduet op (tastaturet) */
  body.kunde .modal { place-items: center; }
  body.kunde .modal:has(#modalCard :is(input:not([type="checkbox"]):not([type="hidden"]), textarea):focus) { place-items: start center; }
}
/* Telefon: den valgte tur som en pille under knapperne (venstre), klokken til højre på samme linje */
@media (max-width: 760px) {
  body.kunde.has-tf #brand { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 62px) !important; left: var(--m-gap, 10px) !important; right: auto !important; width: auto !important; max-width: calc(100vw - 2 * var(--m-gap, 10px) - 64px); padding: 5px !important; border-radius: 999px !important; min-height: 0 !important; }
  body.kunde.has-tf #brand .bp-caret { display: none; }
  body.kunde .bell-btn { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 62px) !important; }
}
/* Forside: jeres eget billede eller Wikipedia */
.cover-pick { display: grid; gap: 8px; }
.cover-pick > b { font-size: 15px; }
.cp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-seg button { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 12px 6px 6px; border: 2px solid transparent; border-radius: 16px; background: rgba(127, 140, 160, .12); color: inherit; font: 600 15px var(--sans); text-align: left; cursor: pointer; }
.cp-seg img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: none; }
.cp-seg button.on { border-color: #8a5cc8; background: rgba(138, 92, 200, .2); }
@media (max-width: 760px) {
  body.kunde :is(#menuBtn.hub-btn, #setBtn) { background: #1a2338 !important; color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
  body.kunde:not(.night) :is(#menuBtn.hub-btn, #setBtn) { background: #fffaf2 !important; color: #18202f; }
}
/* Telefon (kundeudgaven): ingen topbar. "Alt i appen" er øverste knap i siden, tandhjulet ligger i app centret, klokken alene i hjørnet */
.hub-hbtns { display: flex; gap: 8px; flex: none; }
.hub-gear { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(127, 140, 160, .16); color: inherit; cursor: pointer; }
.hub-gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 761px) { .hub-gear { display: none; } }
@media (max-width: 760px) {
  body.kunde :is(#menuBtn, #setBtn) { display: none !important; }
  body.kunde .dock { align-items: flex-end; }
  body.kunde .dock .dk-hubbtn { width: auto !important; height: 46px; padding: 0 16px 0 12px !important; border-radius: 23px !important; flex-direction: row !important; gap: 8px; background: #1a2338 !important; color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1) !important; }
  body.kunde:not(.night) .dock .dk-hubbtn { background: #fffaf2 !important; color: #18202f; }
  body.kunde .dock .dk-hubbtn svg { width: 22px !important; height: 22px !important; stroke: none !important; }
  body.kunde .dock .dk-hubbtn b { font: 600 15px var(--sans); white-space: nowrap; }
  body.kunde .bell-btn { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 8px) !important; }
  body.kunde.has-tf #brand { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 8px) !important; }
  body.kunde .modal-card .hub-head { padding-right: 14px; }
}
@media (max-width: 760px) { body.kunde #menuBtn.hub-btn, body.kunde #setBtn.set-btn { display: none !important; } }
/* Telefon: klokken, knapperne i siden og + står på samme lodrette linje (samme midte som +) */
@media (max-width: 760px) {
  body.kunde .dock { right: calc(var(--m-gap, 10px) + 5px) !important; }
  body.kunde .bell-btn { width: 46px; height: 46px; right: calc(var(--m-gap, 10px) + 5px) !important; }
}
/* "Alt i appen" som rund knap som de andre; navnet står som et skilt til venstre, indtil man har brugt den tre gange */
@media (max-width: 760px) {
  body.kunde .dock .dk-hubbtn { width: 46px !important; height: 46px; padding: 0 !important; border-radius: 50% !important; justify-content: center; position: relative; overflow: visible; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(230, 184, 90, .55) !important; }
  body.kunde .dock .dk-hubbtn b { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 7px 12px; border-radius: 12px; background: #1a2338; color: #fff; font: 600 14px var(--sans); white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); pointer-events: none; }
  body.kunde .dock .dk-hubbtn b::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
  body.kunde:not(.night) .dock .dk-hubbtn b { background: #fffaf2; color: #18202f; }
  body.kunde.hub-known .dock .dk-hubbtn b { display: none; }
}
/* Søjlen i siden fanger kun tryk på selve knapperne; resten af dens område er kort (man kan trække i kortet bag den) */
@media (max-width: 760px) {
  body.kunde .dock { pointer-events: none; }
  body.kunde .dock > * { pointer-events: auto; }
}
/* "Alt i appen" som lodret pølse: samme bredde som cirklerne, ikon øverst og navnet under (altid synligt) */
@media (max-width: 760px) {
  body.kunde .dock .dk-hubbtn { width: 50px !important; height: 92px !important; border-radius: 25px !important; flex-direction: column !important; justify-content: center; gap: 5px; padding: 8px 0 !important; margin-right: -2px; }
  body.kunde .dock .dk-hubbtn b, body.kunde.hub-known .dock .dk-hubbtn b { display: block !important; position: static; transform: none; padding: 0; background: none !important; box-shadow: none; font: 800 10.5px/1.15 var(--sans); text-align: center; color: inherit; white-space: normal; }
  body.kunde .dock .dk-hubbtn b::after { display: none; }
}
/* Knapperne i siden (telefon): alle ens, mørk cirkel med farvet ring og farvet ikon, hver sin farve */
@media (max-width: 760px) {
  body.kunde .dock .dock-btn[data-act="routes"] { --k: #4fd1c0; }
  body.kunde .dock #nextBtn { --k: #7cc0f0; }
  body.kunde .dock #smagShare { --k: #c3a2f5; }
  body.kunde .dock .dock-btn[data-act="list"] { --k: #5fd39a; }
  body.kunde .dock .dock-btn:not(.dk-hubbtn):not(.dk-plus), body.kunde .dock .dock-btn.on:not(.dk-hubbtn), body.kunde .dock .dock-btn[data-act="routes"].on, body.kunde .dock #nextBtn.has-count {
    background: color-mix(in srgb, var(--k) 14%, #141c2c) !important; color: var(--k);
    box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--k) 80%, transparent), 0 8px 18px -8px rgba(0, 0, 0, .65) !important; border: 0 !important;
  }
  body.kunde .dock .dock-btn:not(.dk-hubbtn):not(.dk-plus) svg { stroke: var(--k) !important; }
  body.kunde .dock .dock-btn[data-act="routes"].on { background: color-mix(in srgb, var(--k) 30%, #141c2c) !important; }
  body.kunde .dock #nextBtn.has-count .nb-num { color: #fff; }
  body.kunde .dock #nextBtn.has-count .nb-cap { color: var(--k); }
  body.kunde:not(.night) .dock .dock-btn:not(.dk-hubbtn):not(.dk-plus), body.kunde:not(.night) .dock #nextBtn.has-count { background: #fffaf2 !important; }
  body.kunde:not(.night) .dock #nextBtn.has-count .nb-num { color: #18202f; }
  body.kunde .bell-btn { box-shadow: inset 0 0 0 2.5px rgba(243, 207, 146, .8), 0 8px 18px -8px rgba(0, 0, 0, .65); }
}
/* Telefon (kundeudgaven): tandhjulet øverst til højre, klokken lige under, på samme linje som knapperne i siden */
@media (max-width: 760px) {
  body.kunde #setBtn.set-btn { display: grid !important; position: fixed; top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 8px); right: calc(var(--m-gap, 10px) + 5px); z-index: 905; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, #9fb3cc 14%, #141c2c) !important; color: #c9d6e8; box-shadow: inset 0 0 0 2.5px rgba(159, 179, 204, .8), 0 8px 18px -8px rgba(0, 0, 0, .65) !important; }
  body.kunde:not(.night) #setBtn.set-btn { background: #fffaf2 !important; color: #475263; }
  body.kunde .bell-btn { top: calc(var(--m-gap, 10px) + var(--safe-t, 0px) + 64px) !important; }
  body.kunde.has-tf #brand { max-width: calc(100vw - 2 * var(--m-gap, 10px) - 66px); }
  body.playing #setBtn, body:has(#modal.open) #setBtn, body:has(.fab-wrap.open) #setBtn { visibility: hidden; }
}
/* Hilsner fra familien og Skriv sammen (kundeudgaven, demo) */
.hub [data-c="mint"] { --b: #17a08c; --hi: #3fbfac; --lo: #0e8a78; --deep: #0b5e52; }
.fam-box { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(205, 74, 120, .12); }
.fam-box > b { font-size: 16px; }
.fam-r { display: flex; gap: 12px; align-items: flex-start; }
.fam-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; font: 800 16px var(--sans); }
.fam-av.big { width: 56px; height: 56px; font-size: 24px; }
.fam-t { display: grid; gap: 2px; min-width: 0; }
.fam-t b { font-size: 15.5px; } .fam-t b i { font-style: normal; }
.fam-t small { font-size: 15px; line-height: 1.4; }
.fam-t em { font-style: normal; font-size: 13px; color: var(--muted); }
.by-chip { background: rgba(23, 160, 140, .18) !important; color: #7fe0d0; }
body:not(.night) .by-chip { color: #0b5e52; }
.lt-heart { justify-self: start; margin-top: 8px; padding: 7px 12px; border: 0; border-radius: 999px; background: #fde6ee; color: #b0305f; font: 700 14px var(--sans); cursor: pointer; }
.lt-heart:disabled { background: #e3f3ea; color: #1e5c3b; }
.lt-item > div { display: grid; }
.bd-who { display: flex; align-items: center; gap: 14px; }
.bd-who b { display: block; font-size: 20px; } .bd-who small { color: var(--muted); font-size: 15px; }
.bd-stop { justify-self: start; min-height: 44px; color: #e5483d !important; }
.bd-eb { margin: 0; color: #3fbfac !important; }
.bd-card { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(23, 160, 140, .12); }
.bd-card small { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.bd-card p { margin: 0; font-size: 16px; line-height: 1.45; }
.bd-link { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(79, 209, 192, .14); color: #9fe8dc; font-weight: 600; font-size: 14.5px; word-break: break-all; }
body:not(.night) .bd-link { color: #1d6b62; }
.bd-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-btns .btn { min-height: 50px; justify-content: center; border: 0 !important; }
body.kunde .modal-card .bd-sms { background: #2fa66a !important; color: #fff !important; }
body.kunde .modal-card .bd-copy { background: rgba(138, 92, 200, .28) !important; color: #e2d4fb !important; }
/* Stedkortet på telefon: lavere billede, så der er mere plads til indholdet (tryk på billedet for at se det stort) */
@media (max-width: 760px) { body.kunde .sheet-hero { height: 24vh; height: 24dvh; min-height: 170px; max-height: 230px; } }
/* Sprogvalg: FR og ES kun i kundeudgaven; fire sprog i to rækker i Indstillinger */
body:not(.kunde) .gate-lang .lang-k { display: none; }
.hub-seg.lang4 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.hub-seg.lang4 button:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); } /* fem sprog: det sidste i halv bredde, midt under de andre */
.hub-lang:has(.lang4) { flex-wrap: wrap; }
.hub-lang:has(.lang4) .hub-seg { flex-basis: 100%; margin-top: 8px; }
/* Computer: teksten står samme sted i alle felter, øverst ud for ikonet, så overskrifterne flugter i hver række. Mærker ligger under teksten */
@media (min-width: 1000px) {
  .hub-card .hub-page:not(:first-child) .hub-tile { align-items: flex-start; }
  .hub-card .hub-page:not(:first-child) .hub-tile .hub-tt { padding-top: 1px; }
  .hub-card .hub-page:not(:first-child) .hub-tile .hub-chev { align-self: center; }
  /* rækkerne bliver mindst så høje som indholdet (ellers klippes "Denne uge" og "Demo" af på en lav skærm) */
  .hub-card .hub-pager { grid-template-rows: auto auto repeat(var(--rows, 4), minmax(min-content, 1fr)); }
}
/* Hilsner fra familien: svar med ét tryk. "✍️ Ole" ved stedet er en knap til alt, hvad rejsemakkeren har skrevet */
button.by-chip { border: 0; font: inherit; cursor: pointer; }
.fam-reply { justify-self: start; margin-top: 4px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(205, 74, 120, .2); color: inherit; font: 700 15px var(--sans); cursor: pointer; }
.fam-reply:active { transform: scale(.97); }
.fam-me { justify-self: start; display: grid; gap: 1px; margin-top: 4px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .1); font-size: 15px; line-height: 1.4; }
body:not(.night) .fam-me { background: #fff; }
.fam-me small { font-size: 12px; font-weight: 700; color: var(--muted); }
.fam-me .fam-liked { font-style: normal; font-size: 13px; color: var(--muted); }
.fam-quote { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(205, 74, 120, .12); }
.fam-quote > span:last-child { display: grid; gap: 2px; }
.fam-quote small { font-size: 15px; line-height: 1.4; }
.fam-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.fam-quick button { min-height: 46px; padding: 0 16px; border: 2px solid transparent; border-radius: 999px; background: rgba(17, 25, 43, .06); color: inherit; font: 600 16px var(--sans); cursor: pointer; }
body.night .fam-quick button { background: rgba(255, 255, 255, .08); }
.fam-quick button.on { border-color: #cd4a78; background: rgba(205, 74, 120, .16); }
.fam-in { width: 100%; padding: 12px 14px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); border-radius: 14px; background: transparent; color: inherit; font: 400 17px/1.4 var(--sans); resize: vertical; }
/* Hilsnerne som lille beskedboks under "Dit sted"; et tryk åbner samtalen */
.fam-note { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(205, 74, 120, .14); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fam-note:active { transform: scale(.98); }
.fam-note > svg { flex: none; width: 20px; height: 20px; opacity: .6; }
.fam-avs { flex: none; display: flex; }
.fam-avs .fam-av { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(17, 25, 43, .9); }
.fam-avs .fam-av + .fam-av { margin-left: -14px; }
.fam-nt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.fam-nt b { font-size: 16px; }
.fam-nt small { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-nt em { font-style: normal; font-size: 13px; color: var(--muted); }
.fam-count { flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box; border-radius: 13px; background: #e5483d; color: #fff; font: 800 14px var(--sans); }
/* Samtalen: familiens hilsner som bobler til venstre, dine svar til højre */
.fam-chat { display: grid; gap: 8px; }
.fam-chat .fam-in-b { display: grid; gap: 2px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: rgba(205, 74, 120, .16); }
.fam-chat .fam-me { justify-self: end; max-width: 85%; border-radius: 16px 16px 4px 16px; background: rgba(46, 139, 87, .22); }
body:not(.night) .fam-chat .fam-me { background: #dff3e7; }
.fam-chat .fam-reply { justify-self: start; margin: 0 0 10px 50px; min-height: 44px; }
.dn-page { display: grid; gap: 12px; }
.lightbox .lb-cap .lb-usecover { background: #d9a441; color: #11192b; font-weight: 700; }
/* Log ud (login-demoen): synlig ved tandhjulet på computeren; på telefonen ligger den i Indstillinger */
body.kunde .out-btn { height: 44px; padding: 0 14px; border-radius: 22px; display: inline-flex !important; align-items: center; gap: 6px; font: 600 14px var(--sans); white-space: nowrap; }
body.kunde .out-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { body.kunde .out-btn { display: none !important; } }
body.kunde.playing .out-btn { display: none !important; }
/* Indstillinger: abonnementet som guldkort øverst, flag ved sproget, farvede ikoner, Til/Fra-mærkat */
.set-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; width: 100%; margin: 0 0 14px; padding: 16px 18px; border: 0; border-radius: 22px; text-align: left; font: inherit; color: #1d1606; cursor: pointer;
  background: linear-gradient(135deg, #f2cf73 0%, #d9a441 55%, #c88a2e 100%); box-shadow: 0 16px 34px -18px rgba(217, 164, 65, .9), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .15s; }
.set-plan:active { transform: scale(.98); }
.set-plan .sp-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .35); }
.set-plan .sp-ic svg { width: 28px; height: 28px; fill: none; stroke: #3a2a06; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-plan .sp-txt { display: grid; gap: 2px; min-width: 0; }
.set-plan small { font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(29, 22, 6, .7); }
.set-plan b { font: italic 600 24px/1.15 var(--serif); }
.set-plan em { font-style: normal; font-size: 15px; color: rgba(29, 22, 6, .85); }
.set-plan .sp-bar { display: block; height: 7px; margin-top: 6px; border-radius: 9px; background: rgba(29, 22, 6, .16); overflow: hidden; }
.set-plan .sp-bar i { display: block; height: 100%; border-radius: 9px; background: #3a2a06; }
.set-plan .sp-go { grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 10px 16px; border-radius: 999px; background: #1d1606; color: #f6d98b; font: 700 15px var(--sans); }
.set-plan.expired { background: linear-gradient(135deg, #f28b6b, #d9573a); }
.set-plan.paid { background: linear-gradient(135deg, #8fd3a6, #3f9a6a); }
.set-sheet .hub-set .hs-chip { background: linear-gradient(145deg, color-mix(in srgb, var(--k, #667383) 70%, #fff), var(--k, #667383)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px var(--k, #667383); }
.set-sheet .hub-set .hs-chip.hs-flag { padding: 0; overflow: hidden; background: none !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 16px -8px rgba(0, 0, 0, .5); }
.hs-chip.hs-flag svg { width: 100%; height: 100%; stroke: none; }
.set-pill { flex: none; margin-left: auto; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: inherit; font: 700 13px var(--sans); }
body:not(.night) .set-pill { background: #e7e9ee; }
.set-pill.on { background: #3f9a6a; color: #fff; }
.set-pill + svg { margin-left: 8px; }
.lp-list { display: grid; gap: 10px; }
.lp-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border: 2px solid transparent; border-radius: 18px; background: rgba(17, 25, 43, .05); color: inherit; font: 700 19px var(--sans); text-align: left; cursor: pointer; }
body.night .lp-btn { background: rgba(255, 255, 255, .07); }
.lp-btn.on { border-color: #d9a441; }
.lp-btn i { margin-left: auto; font-style: normal; color: #d9a441; font-size: 20px; }
.lp-flag { display: grid; width: 42px; height: 28px; border-radius: 6px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.lp-flag svg { width: 100%; height: 100%; }
/* Ruteredigering: forslagene vælges med en bjælke forneden (popuppen er skjult imens) */
.leg-pop.le-hidden { display: none; }
.leg-bar { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 1200; width: min(420px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #1d2a44; color: #eef1f6; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
body:not(.night) .leg-bar { background: #fffaf2; color: var(--ink); }
.leg-bar b { font: italic 600 19px var(--serif); }
.leg-bar small { font-size: 15px; opacity: .85; }
.leg-bar .le-row { margin-top: 8px; display: flex; gap: 8px; }
.leg-bar .btn { min-height: 46px; flex: 1; }
.le-ferry-link { display: block; margin: 8px auto 0; font-size: 14px; }
/* Filmen på telefon: billedet fylder hele skærmen, når filmen holder ved et sted (kortet ses i overgangene, mens den flyver videre).
   Teksten står i en mørk overgang forneden, tæller og fotokredit lige under statuslinjen */
@media (max-width: 760px) {
  body.kunde .reel { top: 0; left: 0; right: 0; bottom: 0; width: auto; display: block; transform: scale(1.03); }
  body.kunde .reel.show { transform: none; }
  body.kunde .reel-photo { position: absolute; inset: 0; aspect-ratio: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  body.kunde .reel-photo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 2; background: linear-gradient(rgba(5, 8, 14, .55), transparent); pointer-events: none; }
  body.kunde .reel-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 66%; z-index: 2; background: linear-gradient(transparent, rgba(5, 8, 14, .55) 40%, rgba(5, 8, 14, .94)); pointer-events: none; }
  body.kunde .reel-text { position: absolute; left: 0; right: 0; bottom: calc(92px + var(--safe-b, 0px)); z-index: 3; padding: 0 22px; background: none; box-shadow: none; border-radius: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
  body.kunde .reel-text h2 { font-size: clamp(32px, 9.5vw, 42px); }
  body.kunde .reel-text p { font-size: 16.5px; color: #e6edf6; -webkit-line-clamp: 4; }
  body.kunde .reel-count { top: calc(var(--safe-t, 0px) + 26px); left: 16px; }
  body.kunde .reel-photo .credit-tag { top: calc(var(--safe-t, 0px) + 26px); right: 16px; bottom: auto; z-index: 3; }
  body.kunde .reel-prog { z-index: 6; }
}
/* Filmen på computeren: et større billede (men kortet ses stadig ved siden af) */
@media (min-width: 761px) {
  body.kunde .reel { width: min(720px, 52vw, calc((70vh - 200px) * 1.333)); }
}
/* Ruteforslag: nummer-mærkater på kortet og bokse i bjælken i samme farve */
.alt-tag { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font: 800 16px var(--sans); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); cursor: pointer; transition: opacity .2s, transform .2s; }
.alt-tag.dim { opacity: .45; transform: scale(.85); }
.alt-boxes { display: grid; gap: 6px; margin-top: 8px; max-height: 38vh; overflow-y: auto; }
.alt-box { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; border: 2px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .07); color: inherit; font: inherit; text-align: left; cursor: pointer; }
body:not(.night) .alt-box { background: rgba(17, 25, 43, .05); }
.alt-box i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font: 800 15px var(--sans); font-style: normal; }
.alt-box span { display: grid; gap: 1px; }
.alt-box b { font: 700 16px var(--sans); }
.alt-box small { font-size: 13.5px; opacity: .8; }
.alt-box.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
.leg-bar .le-row .btn-primary:disabled { opacity: .45; }
/* Brand: guld og mørkeblå (kundeudgaven). Hovedknapper i guld med mørkeblå tekst, etiketter i guld, guldkant på "Alt i appen".
   Fanernes og guidernes egne farver og grøn til/fra beholdes, så man stadig kan finde rundt på farverne */
body.kunde { --brand-gold: linear-gradient(135deg, #f2cf73, #d9a441 55%, #c88a2e); --brand-ink: #11192b; }
body.kunde .btn-primary,
body.kunde .modal-card :is([data-save], #saveBtn, [data-m="yes"]:not([style])), body.kunde .modal-card .m-foot [data-m="close"].btn-primary,
body.kunde .modal-card .wiz-foot .btn-primary[data-w="next"],
body.kunde .modal-card [data-cpgo], body.kunde .modal-card .nx-go, body.kunde .modal-card .nx-go.nx-next,
body.kunde .leg-ed .btn-primary, body.kunde .leg-bar .btn-primary {
  background: var(--brand-gold) !important; border-color: #d9a441 !important; color: var(--brand-ink) !important; box-shadow: 0 10px 22px -12px rgba(217, 164, 65, .85) !important; }
body.kunde #modalCard.wizc .wiz-foot .btn-primary[data-w="next"] { background: var(--wk) !important; border-color: var(--wk) !important; color: #fff !important; box-shadow: none !important; } /* guiderne beholder deres farve */
body.kunde .modal-card .name-ideas button[data-cpv].on { background: var(--brand-gold) !important; color: var(--brand-ink) !important; }
body.kunde.night .eyebrow, body.kunde .hub .eyebrow, body.kunde .modal-card .m-head .eyebrow { color: #e6b85a; }
body.kunde:not(.night) .modal-card .m-head .eyebrow { color: #9a6b1f; }
body.kunde #dk-hubfix { box-shadow: 0 0 0 2px #d9a441, 0 10px 22px -10px rgba(217, 164, 65, .7) !important; }
/* Stedlisten: knap til at vende rækkefølgen */
.sort-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.sort-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Log ud: rød knap i fuld bredde nederst i Indstillinger (adskilt fra resten, som i telefonens egne indstillinger) */
.set-logout { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 18px 0 4px; border: 2px solid rgba(225, 85, 100, .55); border-radius: 18px; background: rgba(225, 85, 100, .08); color: #f39aa4; font: 700 17px var(--sans); cursor: pointer; }
body:not(.night) .set-logout { color: #b3263a; border-color: rgba(179, 38, 58, .45); background: rgba(179, 38, 58, .05); }
.set-logout svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-logout:active { transform: scale(.98); }
body.kunde .out-btn { color: #f39aa4; }
/* "Alle Funktionen" (tysk) er længere end de andre sprog: lidt mindre skrift, så ordet ikke skæres i pølsens kant */
@media (max-width: 760px) {
  html[lang="de"] body.kunde .dock .dk-hubbtn b, html[lang="de"] body.kunde.hub-known .dock .dk-hubbtn b { font-size: 8.2px !important; letter-spacing: -.25px; }
}
/* Tilpas appen: knappen med øjet ved tandhjulet, felterne som kontakter, og linjen "2 skjulte · Tilpas" nederst på siderne */
.hub-tilpas { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px 0 13px; border: 0; border-radius: 24px; background: rgba(127, 140, 160, .16); color: inherit; font: 700 15px var(--sans); cursor: pointer; white-space: nowrap; }
.hub-tilpas svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-tilpas.done { background: #2fa66a; color: #fff; }
.hub-hidden { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 4px; min-height: 44px; padding: 0 18px; border: 1.5px dashed rgba(127, 140, 160, .45); border-radius: 999px; background: none; color: var(--muted); font: 600 14.5px var(--sans); cursor: pointer; }
.hub-hidden svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hub-edtop { display: grid; gap: 10px; margin-bottom: 14px; }
.hub-edtop p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.hub-edtop .hub-seg { display: grid; grid-template-columns: 1fr 1fr; }
.hub-edtop .hub-seg button { min-height: 50px; font-size: 16px; }
.hub-editing .hub-tile { position: relative; }
.hub-editing .hub-tile .hub-chev, .hub-editing .hub-tile .hub-more, .hub-editing .hub-tile .hub-big { display: none; }
.hub-vis { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 9px; border-radius: 16px; background: #2fa66a; color: #fff; font: 700 13px var(--sans); pointer-events: none; }
.hub-vis svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hub-vis.off { background: #5b6577; }
.hub-vis.fixed { background: rgba(127, 140, 160, .25); color: var(--muted); padding: 0 11px; }
.hub-tile.is-off { opacity: .55; filter: saturate(.3); }
.hub-tile.is-off .hub-tt b { text-decoration: line-through; }
.hub-tile[data-fixed] { cursor: default; }
@media (max-width: 760px) {
  .hub-card .hub-head .hub-close span { display: none; } /* plads til "Tilpas" i toppen: Luk viser kun krydset */
  .hub-card .hub-head .hub-close { width: 48px; padding: 0; justify-content: center; }
}
/* Nyt sted, trin "Hvad hedder stedet?": roligere og i trinnets farve. Spørgsmålet står i overskriften, så feltet behøver ingen etiket;
   stedet og "træk nålen" er samlet i ét farvet kort, og knapperne forneden er lidt slankere */
body.kunde #modalCard.wizc .wiz-lead { border-left: 0; padding-left: 0; margin-bottom: 10px; }
#pinForm.wiz > p.hint { display: none !important; }
body.kunde #modalCard.wizc .fld:has(input[name="title"]) > span { display: none; }
body.kunde #modalCard.wizc .fld input[name="title"] { min-height: 56px; font-size: 20px; font-weight: 600; background: color-mix(in srgb, var(--wk) 10%, transparent); border-width: 2px; }
body.kunde #modalCard.wizc .wiz-ideas { min-height: 0; margin: 8px 0 14px; }
body.kunde #modalCard.wizc .wiz-ideas small { width: auto; margin-right: 2px; }
body.kunde #modalCard.wizc .wiz-ideas button { min-height: 40px; padding: 0 16px; border: 1.5px solid color-mix(in srgb, var(--wk) 60%, transparent); background: color-mix(in srgb, var(--wk) 18%, transparent); }
body.kunde #modalCard.wizc .wiz-where { justify-content: flex-start; gap: 12px; padding: 12px; border: 1.5px solid color-mix(in srgb, var(--wk) 35%, transparent); background: color-mix(in srgb, var(--wk) 12%, transparent); }
.wiz-where .ww-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--wk, #4a9fd8) 25%, transparent); font-size: 19px; }
.wiz-where .ww-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.wiz-where .ww-t b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-where .ww-t small { font-size: 13px; line-height: 1.35; color: var(--muted); }
body.kunde #modalCard.wizc .wiz-where button { flex: none; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--wk); border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--wk) 30%, transparent); }
body.kunde #modalCard.wizc .wiz-foot .btn { min-height: 46px; padding: 0 18px; font-size: 15.5px; }
body.kunde #modalCard.wizc #pinForm > * { flex-shrink: 0; } /* felterne må ikke klemmes sammen (så løb forslagene ind over stedet) */
body.kunde #modalCard.wizc .wiz-where .ww-t small { font-size: 12.5px; }
/* Tilpas: mærket sidder i feltets hjørne (ikke inde i feltets egen opstilling), og vejledningen "Swipe for at se mere" er væk imens */
.hub-card .hub-tile > .hub-vis { position: absolute !important; top: 10px; right: 10px; left: auto; margin: 0; grid-area: auto; }
.hub-card.hub-editing .hub-intro { display: none; }
.hub-card.hub-editing .hub-tile { padding-top: 46px; }
@media (max-width: 760px) { .hub-card .hub-head .hub-close { min-width: 48px; } }
.hub-card.hub-editing .hub-page:first-child .hub-tile { height: auto; }
/* Skriv sammen: hvad rejsemakkeren kan, samlet i en infoboks */
.bd-info { display: grid; gap: 10px; margin: 16px 0 6px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(23, 160, 140, .35); background: rgba(23, 160, 140, .12); }
.bd-info > b { font-size: 15px; color: #3fbfac; }
body:not(.night) .bd-info > b { color: #0b5e52; }
.hub-card.hub-editing .hub-page:first-child .hub-grid { flex: none; height: auto; grid-auto-rows: auto; align-content: start; } .hub-card.hub-editing .hub-page:first-child .hub-tile { align-self: start; min-height: 0; }
/* Login (kundeudgaven): ét sprogvalg med flag, samme form som "Tilbage"; et tryk folder de seks sprog ud */
.gate-lang.gl-k { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); display: block; z-index: 5; }
.gate-lang.gl-k button { border: 0; font: 700 15px Inter, system-ui, sans-serif; letter-spacing: 0; cursor: pointer; }
.gl-cur { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 12px; border-radius: 999px !important; background: rgba(255, 255, 255, .1) !important; color: #cfe3f3 !important; }
.gl-cur svg { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .2s; }
.gate-lang.open .gl-cur svg { transform: rotate(180deg); }
.gl-flag { display: inline-flex; width: 26px; height: 18px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); flex: none; }
.gl-flag svg { width: 100%; height: 100%; stroke: none !important; stroke-width: 0; }
.gl-menu { display: none; position: absolute; top: 52px; right: 0; width: min(300px, calc(100vw - 24px)); grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: 18px; background: #11192b; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.gate-lang.open .gl-menu { display: grid; }
.gl-menu button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .06) !important; color: #e8eef7 !important; text-align: left; }
.gl-menu button.on { background: linear-gradient(135deg, #f2cf73, #d9a441) !important; color: #1b2333 !important; }
.hub-tcount { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 2px; border-radius: 11px; background: #d9a441; color: #1b2333; font: 800 12.5px var(--sans); font-style: normal; }
.set-ver { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
/* Ret kortet: bjælken øverst med Færdig, vippende nåle og blyanten i siden, mens man retter */
#mapEditBar { position: fixed; top: calc(12px + var(--safe-t, env(safe-area-inset-top, 0px))); left: 12px; right: 84px; z-index: 960; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'ic tt done' 'help help help'; align-items: center; column-gap: 12px; row-gap: 6px; padding: 10px 10px 12px 12px; border-radius: 20px; background: #11192b; color: #fff; border: 2px solid #f2c14e; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); animation: meIn .3s ease both; }
@keyframes meIn { from { transform: translateY(-16px); opacity: 0; } }
@media (min-width: 761px) { #mapEditBar { top: 84px; left: 50%; right: auto; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); animation: none; } } /* under topbjælken */
#mapEditBar .me-ic { grid-area: ic; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f2c14e; color: #1b2333; }
#mapEditBar .me-ic svg { width: 22px; height: 22px; stroke-width: 2.2; }
#mapEditBar .me-t { display: contents; }
#mapEditBar .me-t b { grid-area: tt; font-size: 17px; line-height: 1.2; }
#mapEditBar .me-t small { grid-area: help; font-size: 13px; line-height: 1.4; color: #c5ccda; }
#mapEditBar .me-done { grid-area: done; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: #2fa66a; color: #fff; font: 700 16px var(--sans); cursor: pointer; }
body.map-edit .leaflet-marker-icon > :is(.pin, .tack) { animation: meWiggle .32s ease-in-out infinite alternate; transform-origin: 50% 100%; }
body.map-edit .leaflet-marker-icon:nth-child(2n) > :is(.pin, .tack) { animation-delay: -.16s; }
@keyframes meWiggle { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { body.map-edit .leaflet-marker-icon > :is(.pin, .tack) { animation: none; outline: 2px dashed #f2c14e; outline-offset: 3px; border-radius: 50%; } }
body.map-edit .leaflet-marker-draggable { cursor: grab; }
#dk-edit.on { box-shadow: 0 0 0 3px #f2c14e, 0 8px 20px -6px rgba(0, 0, 0, .6); }
body.map-edit .toasts { top: calc(var(--me-h, 120px) + 24px + var(--safe-t, env(safe-area-inset-top, 0px))); } /* beskeder lægger sig under ret-bjælken */
/* Computer: blyanten (Ret kortet) står også i topbjælken; de andre valgfrie knapper er kun til telefonen */
@media (min-width: 761px) {
  body.kunde .dock #dk-edit.dk-on { display: inline-flex !important; align-items: center; gap: 6px; color: #f2c14e; }
  body.kunde .dock #dk-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; }
  body.kunde .dock #dk-edit span { display: inline !important; font-weight: 600; }
}
/* Klyngerne får også et navneskilt ("Hirtshals +1") */
:is(.stack, .tack-cluster) { position: relative; }
:is(.stack, .tack-cluster) .pin-name { margin-top: 6px; z-index: 4; }
:is(.stack, .tack-cluster) .pin-name i { font-style: normal; color: #5b6577; font-weight: 800; }
/* Nålene og klyngerne skaleres med zoomen (--pin-s sættes i app.js), så steder tæt på hinanden ikke dækker hinanden; navnet følger med ned */
.leaflet-marker-icon > :is(.pin, .stack) { scale: var(--pin-s, 1); transform-origin: 50% 100%; }
.leaflet-marker-icon > .stack { transform-origin: 50% 50%; }
.leaflet-marker-icon > :is(.pin, .stack) .pin-name { scale: calc(1 / var(--pin-s, 1)); transform-origin: 50% 0; }
.pin-names .name-hide .pin-name { display: none; } /* ingen plads til navnet her: det kommer, når man zoomer ind */
/* Samtalen med familien: skrivefelt nederst som i en besked-app, de færdige svar som små knapper på én linje, der kan swipes */
.fam-compose { display: grid !important; gap: 8px; padding-top: 10px !important; }
.fam-compose .fc-quick { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding-bottom: 2px; scrollbar-width: none; }
.fam-compose .fc-quick::-webkit-scrollbar { display: none; }
.fam-compose .fc-quick button { flex: none; min-height: 40px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
.fam-compose .fc-row { display: flex; align-items: flex-end; gap: 8px; }
.fam-compose .fam-in { flex: 1; min-height: 50px; max-height: 120px; padding: 13px 16px; border-radius: 25px; resize: none; font-size: 17px; }
.fc-send { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: #2fa66a; color: #fff; cursor: pointer; }
.fc-send svg { width: 22px; height: 22px; stroke-width: 2.2; }
.fam-compose .bb-wrap { order: 3; }
/* Navnet sidder øverst, så det dækker lidt af toppen af cirklen og ikke nålens spids (Bos ønske 22-10-2026) */
.leaflet-marker-icon .pin-name { top: auto; bottom: 100%; margin: 0 0 -12px; }
.leaflet-marker-icon :is(.pin, .stack) .pin-name { transform-origin: 50% 100%; }
.leaflet-marker-icon .pin.small .pin-name { margin-bottom: -10px; }
.leaflet-marker-icon .tack .pin-name { margin-bottom: -6px; }
.leaflet-marker-icon .pin-se ~ .pin-name, .leaflet-marker-icon :is(.stack, .tack-cluster) .pin-name { margin: 0 0 -12px; }
.leaflet-marker-icon .pin-name { z-index: 5; }
/* De færdige svar ligger bag smileyen i skrivefeltet (som i Messenger) og foldes ud over feltet */
.fam-compose .fc-quick { display: none; flex-wrap: wrap; overflow: visible; }
.fam-compose.open .fc-quick { display: flex; }
.fc-field { flex: 1; position: relative; display: flex; }
.fc-field .fam-in { padding-right: 52px; }
.fc-emo { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #2f7fb8; color: #fff; cursor: pointer; }
.fc-emo svg { width: 24px; height: 24px; stroke-width: 2; }
.fam-compose.open .fc-emo { background: #d9a441; color: #1b2333; }
/* Samtalen med familien: altid samme størrelse, ligesom en besked-app; samtalen ruller indeni (nyeste nederst), skrivefeltet står fast */
#modalCard:has(.fam-chat) { height: min(82vh, 720px); height: min(82dvh, 720px); display: flex; flex-direction: column; }
#modalCard:has(.fam-chat) > .m-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#modalCard:has(.fam-chat) > .m-foot { flex: none; }
#modalCard:has(.fam-chat) .fam-chat { align-content: start; } /* boblerne holder deres egen højde, selv om vinduet er stort */
#modalCard:has(.fam-chat) .fam-me { align-content: start; }
.fam-compose { justify-content: stretch !important; }
.fam-compose .fc-row { width: 100%; }
/* Hilsnerne på stedet som en lille samtale: overskrift, den nyeste hilsen som boble og et svarfelt */
.fam-note { display: grid !important; gap: 10px; padding: 14px !important; }
.fam-note > svg { display: none; }
.fn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fn-top b { font-size: 15px; }
.fn-msg { display: flex; align-items: flex-end; gap: 10px; }
.fn-msg .fam-av { width: 36px; height: 36px; font-size: 15px; }
.fn-bub { display: grid; gap: 2px; padding: 9px 14px; border-radius: 4px 16px 16px 16px; background: rgba(205, 74, 120, .2); min-width: 0; }
.fn-bub b { font-size: 15.5px; } .fn-bub small { font-size: 15px; line-height: 1.35; }
.fn-msg em { font-style: normal; font-size: 12.5px; color: var(--muted); padding-bottom: 4px; white-space: nowrap; }
.fn-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 6px 0 16px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .16); color: var(--muted); font-size: 15px; }
body:not(.night) .fn-reply { border-color: rgba(17, 25, 43, .18); }
.fn-reply i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2fa66a; color: #fff; }
.fn-reply svg { width: 17px; height: 17px; stroke-width: 2.2; }
/* Rejsevalget i "Ret stedet": én rolig række pr. rejse */
.tpk-list { display: grid !important; gap: 6px; }
.tpk-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 14px; background: rgba(127, 140, 160, .12); color: inherit; font: 600 16px var(--sans); text-align: left; cursor: pointer; }
.tpk-row > i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.tpk-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpk-row .tpk-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(127, 140, 160, .45); color: transparent; font-size: 13px; }
.tpk-row.on { border-color: var(--c, #2fa66a); background: color-mix(in srgb, var(--c, #2fa66a) 16%, transparent); }
.tpk-row.on .tpk-check { background: var(--c, #2fa66a); border-color: var(--c, #2fa66a); color: #fff; }
.tpk-row.tpk-new { background: none; border: 1.5px dashed rgba(127, 140, 160, .45); color: var(--muted); }
.tpk-row.tpk-new .tpk-check { display: none; }
.leaflet-marker-icon .pin-name { transform: none; translate: -50% 0; } /* centreret, også når nålen er skaleret: translate efter scale (med transform kom den op til 8 px skævt) */
/* Ingen plads ovenover: navnet ved siden af cirklen (sættes af nameDeclutter) */
.leaflet-marker-icon.name-r .pin-name, .leaflet-marker-icon.name-l .pin-name { bottom: auto; top: 50%; margin: 0; translate: 0 -50%; }
.leaflet-marker-icon.name-r .pin-name { left: calc(100% - 4px); right: auto; transform-origin: 0 50%; }
.leaflet-marker-icon.name-l .pin-name { left: auto; right: calc(100% - 4px); transform-origin: 100% 50%; }
.leaflet-marker-icon:is(.name-r, .name-l) .pin .pin-name { top: 27px; }
.leaflet-marker-icon:is(.name-r, .name-l) .pin.small .pin-name { top: 20px; }
/* Færgen gynger blidt på bølgerne (ikke ved "mindre bevægelse") */
.ferry svg { animation: ferryRock 3.2s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes ferryRock { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .ferry svg { animation: none; } }
/* Menu-knappen (startmenu). Søjlen af knapper i siden skjules; én knap over + åbner et panel med store farvede felter */
body.dock-multi #dock .dock-btn, body.dock-multi #dk-hubfix, body.dock-multi #nextBtn, body.dock-multi #smagShare { display: none !important; }
#dkStart { position: fixed; right: 10px; bottom: calc(96px + var(--safe-b, 0px)); z-index: 951; display: grid; place-items: center; gap: 2px; width: 72px; height: 72px; border: 2px solid #d9a441; border-radius: 22px; background: #11192b; color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); cursor: pointer; }
#dkStart svg { width: 26px; height: 26px; }
#dkStart b { font: 700 13px var(--sans); }
#dkStart.on { background: #d9a441; color: #1b2333; }
#startMenu { position: fixed; right: 10px; left: 10px; bottom: calc(180px + var(--safe-b, 0px)); z-index: 952; display: grid; gap: 10px; padding: 14px; border-radius: 24px; background: #11192b; border: 1.5px solid rgba(217,164,65,.5); box-shadow: 0 24px 50px -14px rgba(0,0,0,.75); animation: smIn .22s cubic-bezier(.2,.8,.2,1) both; transform-origin: 90% 100%; }
@keyframes smIn { from { opacity: 0; transform: scale(.9) translateY(14px); } }
#startMenu .sm-hub { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #f2cf73, #d9a441 55%, #c88a2e); color: #1b2333; font: 800 17px var(--sans); cursor: pointer; }
#startMenu .sm-hub svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
#startMenu .sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#startMenu .sm-tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 86px; padding: 8px 4px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--k) 22%, #1b2333); color: #fff; font: 700 13.5px/1.2 var(--sans); text-align: center; cursor: pointer; }
#startMenu .sm-tile svg { width: 28px; height: 28px; fill: none; stroke: var(--k); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* TEST multiknap, runde 2: overskrift med kryds, felter i samme stil som Alt i appen (hvid chip, gradient) og levende indhold */
#startMenu .sm-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 4px; }
#startMenu .sm-head b { font: 600 22px/1 var(--serif); color: #fff; }
#startMenu .sm-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #c8553d; color: #fff; cursor: pointer; }
#startMenu .sm-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; }
#startMenu .sm-tile { position: relative; overflow: hidden; justify-items: start; align-content: start; gap: 4px; min-height: 104px; padding: 10px 10px 9px; text-align: left; background: linear-gradient(150deg, color-mix(in srgb, var(--k) 42%, #1b2333) 0%, color-mix(in srgb, var(--k) 14%, #1b2333) 85%); border: 1.5px solid color-mix(in srgb, var(--k) 55%, transparent); }
#startMenu .sm-chip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; margin-bottom: 4px; }
#startMenu .sm-chip svg { width: 21px; height: 21px; stroke: color-mix(in srgb, var(--k) 70%, #11192b); }
#startMenu .sm-tile b { font-size: 14px; line-height: 1.15; }
#startMenu .sm-tile small { font-size: 12px; color: #c5ccda; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#startMenu .sm-big { position: absolute; top: 6px; right: 9px; font: 600 30px/1 var(--serif); font-style: normal; color: #fff; }
#startMenu .sm-big + small { position: absolute; top: 37px; right: 9px; font-size: 11px; }
#startMenu .sm-ph { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 11px; background: center/cover; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
/* Panelet må aldrig gå op over skærmen (Chrome med adresselinje): højst skærmens højde, ellers ruller felterne indeni */
#startMenu { max-height: calc(100dvh - 180px - var(--safe-b, 0px) - var(--safe-t, env(safe-area-inset-top, 0px)) - 16px); overflow-y: auto; overscroll-behavior: contain; grid-template-rows: auto auto 1fr; }
#startMenu .sm-tile { min-height: 92px; }
@media (max-height: 700px) { #startMenu .sm-tile { min-height: 78px; } #startMenu .sm-chip { width: 30px; height: 30px; } }
/* Panelet fylder skærmen fra toppen og ned til Menu-knappen; felterne deler højden ligeligt */
#startMenu { top: calc(var(--safe-t, env(safe-area-inset-top, 0px)) + 10px); bottom: calc(176px + var(--safe-b, 0px)); max-height: none; align-content: stretch; }
#startMenu .sm-grid { grid-auto-rows: minmax(78px, 1fr); }
#startMenu .sm-tile { min-height: 0; }
#startMenu .sm-tile { background: linear-gradient(150deg, color-mix(in srgb, var(--k) 62%, #1b2333) 0%, color-mix(in srgb, var(--k) 24%, #1b2333) 90%); }
#startMenu .sm-grid { grid-auto-rows: 1fr; min-height: 0; }
#startMenu .sm-tile { padding: 8px 9px; gap: 2px; align-content: center; }
#startMenu .sm-chip { width: 32px; height: 32px; margin-bottom: 2px; }
#startMenu .sm-chip svg { width: 19px; height: 19px; }
#startMenu .sm-tile b { font-size: 13.5px; }
#startMenu .sm-big { font-size: 26px; }
#startMenu .sm-big + small { top: 33px; }
#startMenu .sm-ph { width: 34px; height: 34px; }
#startMenu .sm-hub { min-height: 50px; }
/* Tilpas menuen: øjet på hvert felt; skjulte felter nedtonede, mens man tilpasser, og væk bagefter (felterne deler så pladsen) */
#startMenu .sm-hb { display: flex; gap: 8px; }
#startMenu .sm-ed { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 11px; border: 0; border-radius: 22px; background: rgba(255,255,255,.12); color: #fff; font: 700 15px var(--sans); cursor: pointer; }
#startMenu .sm-ed svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
#startMenu .sm-ed.on { background: #2fa66a; }
#startMenu .sm-eye { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2fa66a; color: #fff; }
#startMenu .sm-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
#startMenu .sm-off { opacity: .45; filter: saturate(.2); }
#startMenu .sm-off .sm-eye { background: #5b6577; }
#startMenu.sm-editing .sm-tile:not(.sm-off) { animation: meWiggle .32s ease-in-out infinite alternate; }
#startMenu.sm-editing .sm-big, #startMenu.sm-editing .sm-big + small, #startMenu.sm-editing .sm-ph { display: none; }
#startMenu .sm-tile { -webkit-touch-callout: none; user-select: none; }
#startMenu .sm-tile { align-content: start; padding-top: 12px; } /* ikonet står samme sted i alle felter, uanset hvor lang teksten er */
/* Menu og + er lige store og flugter (64 x 64), med samme afstand imellem */
body.dock-multi #fab { width: 64px !important; height: 64px !important; border-radius: 20px !important; }
#dkStart { width: 64px; height: 64px; border-radius: 20px; bottom: calc(118px + var(--safe-b, 0px)); }
#dkStart svg { width: 22px; height: 22px; } #dkStart b { font-size: 12.5px; }
#startMenu { bottom: calc(194px + var(--safe-b, 0px)); }
/* Lav skærm (fx Chrome med adresselinje): de små billeder i felterne væk, så alle felterne på siden kan ses uden at rulle */
@media (max-width: 760px) and (max-height: 760px) { .hub-card .hub-page:not(:first-child) .hub-more { display: none; } .hub-card .hub-page:not(:first-child) .hub-tile { min-height: 0; } }
@media (max-width: 760px) and (max-height: 760px) {
  .hub-card .hub-page .hub-tile:not([data-go="life"]) { min-height: 0 !important; padding: 10px 14px !important; gap: 12px !important; }
  .hub-card .hub-page .hub-tile:not([data-go="life"]) .hub-chip { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
  .hub-card .hub-page .hub-tile .hub-pill { padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
  .hub-card .hub-grid { gap: 8px !important; }
  .hub-card .hub-ph { margin-bottom: 6px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .hub-card .hub-page .hub-tile:not([data-go="life"]) { padding: 8px 14px !important; }
  .hub-card .hub-expl { font-size: 14px; margin: 0 0 4px; }
  .hub-card .hub-page .hub-tile .hub-tt small { line-height: 1.3; }
}
/* Menu og + i ét fælles kort, oven over hinanden */
body.dock-multi .fab-wrap::before { content: ''; position: fixed; right: 4px; bottom: calc(38px + var(--safe-b, 0px)); width: 76px; height: 152px; border-radius: 26px; background: rgba(11, 17, 29, .82); border: 1.5px solid rgba(217, 164, 65, .45); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: -1; pointer-events: none; }
body.dock-multi #fab { box-shadow: none !important; }
#dkStart { bottom: calc(118px + var(--safe-b, 0px)); box-shadow: none; }
body.dock-multi .fab-wrap::before { bottom: calc(4px + var(--safe-b, 0px)); height: 184px; }
body.dock-multi #dkStart { border-color: transparent; background: rgba(255,255,255,.08); }
body.dock-multi #dkStart.on { background: #d9a441; }
/* Menu og + tættere sammen (lavere kort) */
#dkStart { bottom: calc(84px + var(--safe-b, 0px)); }
body.dock-multi .fab-wrap::before { height: 150px; }
#startMenu { bottom: calc(160px + var(--safe-b, 0px)); }
/* Skift side (venstrehåndet): Menu, + og kortet i venstre side */
#startMenu .sm-hand { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
#startMenu .sm-hand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.hand-left .fab-wrap { right: auto !important; left: 10px !important; align-items: flex-start; }
body.hand-left #dkStart { right: auto; left: 10px; }
body.hand-left.dock-multi .fab-wrap::before { right: auto; left: 4px; }
/* Menuen, runde 4: felterne i deres naturlige højde (panelet strækkes ikke), større ikon, og fotos som baggrund på nogle felter */
#startMenu { top: auto; max-height: calc(100dvh - 194px - var(--safe-b, 0px) - var(--safe-t, env(safe-area-inset-top, 0px)) - 16px); grid-template-rows: auto auto auto; }
#startMenu .sm-grid { grid-auto-rows: auto; }
#startMenu .sm-tile { min-height: 96px; padding: 10px 10px 9px; align-content: start; }
#startMenu .sm-chip { width: 42px; height: 42px; border-radius: 13px; }
#startMenu .sm-chip svg { width: 25px; height: 25px; }
#startMenu .sm-photo { background: linear-gradient(180deg, rgba(10,16,28,.15) 0%, rgba(10,16,28,.55) 45%, rgba(10,16,28,.88) 100%), var(--img) center/cover; border-color: color-mix(in srgb, var(--k) 70%, transparent); }
#startMenu .sm-photo b, #startMenu .sm-photo small { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
#startMenu .sm-photo small { color: #e8eef7; }
#startMenu { max-height: calc(100dvh - 160px - var(--safe-b, 0px) - var(--safe-t, env(safe-area-inset-top, 0px)) - 16px); }
#startMenu .sm-tile { min-height: 88px; padding: 9px 10px 8px; }
#startMenu .sm-chip { margin-bottom: 1px; }
/* Menuen med to sider: faneblade øverst, siderne swipes vandret, 6 felter pr. side (2 rækker af 3) */
#startMenu .sm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.08); }
#startMenu .sm-tabs button { min-height: 42px; border: 0; border-radius: 11px; background: none; color: #c5ccda; font: 700 15px var(--sans); cursor: pointer; }
#startMenu .sm-tabs button.on { background: #fff; color: #11192b; }
#startMenu .sm-pager { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
#startMenu .sm-pager::-webkit-scrollbar { display: none; }
#startMenu .sm-pager > .sm-grid { scroll-snap-align: start; align-content: start; }
#startMenu .sm-pager .sm-tile { min-height: 112px; }
#startMenu { grid-template-rows: auto auto auto auto; }
/* Menuen, runde 5: store, tydelige ikoner midt i hvert felt med teksten under (ingen fotos) */
#startMenu .sm-pager .sm-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 118px; padding: 10px 6px; }
#startMenu .sm-chip { width: 58px; height: 58px; border-radius: 18px; margin: 0; }
#startMenu .sm-chip svg { width: 34px; height: 34px; }
#startMenu .sm-pager .sm-tile b { font-size: 14.5px; line-height: 1.15; }
#startMenu .sm-pager .sm-tile small { font-size: 12px; max-width: 100%; }
#startMenu .sm-big { position: static; font-size: 22px; line-height: 1; }
#startMenu .sm-big + small { position: static; }
#startMenu .sm-eye { top: 6px; right: 6px; }
#startMenu .sm-chip svg { fill: none; stroke: color-mix(in srgb, var(--k) 78%, #11192b); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
/* To små prikker under felterne viser, at der er en side mere (man kan swipe); fanebladene er kun en overskrift, ikke knapper at trykke på */
#startMenu .sm-dots { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 2px; }
#startMenu .sm-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .2s, width .2s; }
#startMenu .sm-dots i.on { width: 22px; border-radius: 4px; background: #d9a441; }
#startMenu .sm-swipe { margin-left: 8px; font-size: 12.5px; color: #8e9bb3; }
#startMenu .sm-tabs { background: none; padding: 0; gap: 18px; justify-content: start; display: flex; }
#startMenu .sm-tabs button { min-height: 32px; padding: 0 2px; border-radius: 0; background: none !important; color: #8e9bb3; font: 700 18px var(--sans); border-bottom: 3px solid transparent; }
#startMenu .sm-tabs button.on { color: #fff; border-bottom-color: #d9a441; }
#startMenu { grid-template-rows: auto auto auto auto auto; }
/* Prikkerne som på en smartphone: små og stille, uden tekst */
#startMenu .sm-dots i { width: 7px; height: 7px; background: rgba(255,255,255,.3); }
#startMenu .sm-dots i.on { width: 7px; border-radius: 50%; background: #fff; }
#startMenu .sm-dots { gap: 8px; padding: 4px 0 0; }
/* Felterne skrumper lidt, så der er plads til prikkerne */
#startMenu .sm-pager .sm-tile { min-height: 98px; gap: 4px; padding: 8px 6px; }
#startMenu .sm-chip { width: 52px; height: 52px; border-radius: 16px; }
#startMenu .sm-chip svg { width: 30px; height: 30px; }
#startMenu .sm-pager .sm-tile b { font-size: 14px; }
/* Renere, mere forskellige farver på felterne: mindre mørk blandet ind, så de ikke alle bliver brunlige */
#startMenu .sm-tile { background: linear-gradient(155deg, color-mix(in srgb, var(--k) 92%, #11192b) 0%, color-mix(in srgb, var(--k) 58%, #11192b) 100%); border: 0; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
#startMenu .sm-pager .sm-tile small { color: rgba(255,255,255,.85); }
#startMenu .sm-chip svg { stroke: color-mix(in srgb, var(--k) 100%, #000 25%); }
/* Alle felter lige høje, med ikonet samme sted øverst og teksten i en fast zone under (1 til 3 linjer) */
#startMenu .sm-pager .sm-grid { grid-auto-rows: 118px; }
#startMenu .sm-pager .sm-tile { justify-content: flex-start; height: 100%; min-height: 0; padding: 10px 6px 6px; gap: 0; }
#startMenu .sm-chip { flex: none; margin-bottom: 6px; }
#startMenu .sm-pager .sm-tile b { display: flex; align-items: center; justify-content: center; min-height: 2.3em; line-height: 1.15; }
#startMenu .sm-pager .sm-tile small, #startMenu .sm-big, #startMenu .sm-big + small { line-height: 1.1; }
#startMenu .sm-big { font-size: 18px; } 
#startMenu .sm-big + small { font-size: 11px; }
#startMenu .sm-pager .sm-grid { grid-auto-rows: 126px; }
#startMenu .sm-pager .sm-tile { padding: 10px 6px 10px; }
#startMenu .sm-pager .sm-tile b { min-height: 2.1em; }
/* Ikon og tekst som én fast blok, lodret midt i feltet: ikonet i samme højde i alle felter, og teksten har altid plads til to linjer */
#startMenu .sm-pager .sm-tile { justify-content: center; align-content: center; padding: 6px; }
#startMenu .sm-chip { margin: 0 0 8px; }
#startMenu .sm-pager .sm-tile > b { min-height: 0; height: 2.3em; display: flex; align-items: center; justify-content: center; }
#startMenu .sm-pager .sm-tile > small { display: block; height: 1.1em; margin-top: 2px; }
#startMenu .sm-pager .sm-tile > b + small:empty { display: none; }
#startMenu .sm-pager .sm-grid { grid-auto-rows: 118px; }
/* Tekststørrelse (Udseende): vinduer, menuer og stedkort skaleres; kortet og knapperne i siden røres ikke */
body.tx-big :is(#modalCard, #sheet .sheet-body, #drawer) { zoom: 1.14; }
body.tx-huge :is(#modalCard, #sheet .sheet-body, #drawer) { zoom: 1.28; }
/* menuen skaleres ikke som helhed (den er fast placeret), kun teksten i den */
body.tx-big #startMenu .sm-tile > b { font-size: 15.5px; } body.tx-big #startMenu .sm-tile > small { font-size: 13.5px; } body.tx-big #startMenu .sm-tabs button { font-size: 20px; }
body.tx-huge #startMenu .sm-tile > b { font-size: 17px; } body.tx-huge #startMenu .sm-tile > small { font-size: 15px; } body.tx-huge #startMenu .sm-tabs button { font-size: 22px; }
.tx-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 10px; }
body.tx-huge #startMenu:not(.sm-list) .sm-pager .sm-grid { grid-auto-rows: 138px; }
body.tx-big #startMenu:not(.sm-list) .sm-pager .sm-grid { grid-auto-rows: 130px; }
body.tx-huge #startMenu .sm-tile > b { font-size: 16.5px; } body.tx-huge #startMenu .sm-tile > small { font-size: 14px; height: 1.3em; }
body.tx-huge #startMenu .sm-pager .sm-tile > b { height: 2.4em; }
/* Udseende nr. 3: ikoner med tekst under, som på iPhones hjemmeskærm (farvet afrundet ikon, hvidt tegn, navnet under). ?stil=ikoner eller knappen i toppen */
#startMenu .sm-hb { gap: 6px; }
#startMenu.sm-icons .sm-pager .sm-grid { grid-auto-rows: 118px; gap: 8px 4px; }
#startMenu.sm-icons .sm-pager .sm-tile { background: none !important; box-shadow: none; border: 0; padding: 4px 2px; justify-content: flex-start; }
#startMenu.sm-icons .sm-chip { width: 72px; height: 72px; border-radius: 20px; margin: 0 0 7px; background: linear-gradient(160deg, color-mix(in srgb, var(--k) 100%, #fff 12%), color-mix(in srgb, var(--k) 84%, #000)); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
#startMenu.sm-icons .sm-chip svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 2; }
#startMenu.sm-icons .sm-pager .sm-tile > b { height: auto; min-height: 0; font-size: 14.5px; font-weight: 600; }
#startMenu.sm-icons .sm-pager .sm-tile > small { height: auto; font-size: 12px; color: #9fb0c8; margin-top: 1px; }
#startMenu.sm-icons .sm-big { display: none; }
/* Ruter-vinduet har Tilbage til Menu på telefonen (hvor det åbnes fra Menu); på computeren er der ikke noget at gå tilbage til */
/* Rutevinduets top er et gitter: Tilbage øverst, så overskriften, så underteksten; krydset yderst til højre */
/* "← Tilbage" til Menu i Vis rejse og Steder: kun på telefonen, hvor de åbnes fra Menu */
/* Navneforslag: én række, der kan swipes vandret (ingen pills på flere linjer, som skubbede ind i stedkortet) */
body.kunde #modalCard.wizc .wiz-ideas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: center; gap: 8px; margin: 8px -6px 14px; padding: 2px 6px 6px; min-height: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body.kunde #modalCard.wizc .wiz-ideas::-webkit-scrollbar { display: none; }
body.kunde #modalCard.wizc .wiz-ideas > * { flex: none; }
body.kunde #modalCard.wizc .wiz-ideas small { width: auto; }
body.kunde #modalCard.wizc .wiz-ideas button { white-space: nowrap; }
body.kunde #modalCard.wizc .wiz-ideas { padding: 6px 6px 8px; }
body.kunde #modalCard.wizc .wiz-ideas button { min-height: 42px; padding: 0 18px; }
/* Guidernes Tilbage og Næste som runde pile (teksten er der stadig for skærmlæsere): fylder langt mindre; sidste trin ("Gem stedet") beholder sin tekst */
body.kunde .wiz-foot { align-items: center; gap: 10px; }
body.kunde .wiz-foot [data-w="back"], body.kunde .wiz-foot [data-w="next"] { position: relative; flex: none; width: 56px; height: 56px; min-height: 56px; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; overflow: hidden; }
body.kunde .wiz-foot [data-w="back"]::after, body.kunde .wiz-foot [data-w="next"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; }
body.kunde .wiz-foot [data-w="next"]::after { transform: translateX(-3px) rotate(-45deg); }
body.kunde .wiz-foot [data-w="back"]::after { transform: translateX(3px) rotate(135deg); }
body.kunde .wiz-foot .wiz-dots { flex: 1; justify-content: center; }
body.kunde .wiz-foot #saveBtn { flex: 1; min-height: 56px; }
/* Navneforslag uden kasse: bare tekst med en fin streg under, i en række der kan swipes */
body.kunde #modalCard.wizc .wiz-ideas button { background: none !important; border: 0 !important; border-bottom: 2px solid color-mix(in srgb, var(--wk) 70%, transparent) !important; border-radius: 0 !important; padding: 0 2px !important; min-height: 38px; font-size: 16px; }
body.kunde #modalCard.wizc .wiz-ideas { gap: 18px; }
body.kunde #modalCard.wizc .wiz-ideas button { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--wk) 70%, transparent); border-radius: 0 !important; }
/* Vinduerne i menuens farver: en farvet kant, et farvet navn, farvede knapper og en svag farve i baggrunden, så vinduet hører sammen med sit ikon */
.modal-card.wcol { border: 1.5px solid color-mix(in srgb, var(--wc) 65%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 20%, #141c30) 0%, color-mix(in srgb, var(--wc) 6%, #141c30) 48%) , #141c30; }
.modal-card.wcol .m-head h2 { color: color-mix(in srgb, var(--wc) 42%, #fff); }
.modal-card.wcol .m-head .eyebrow { color: color-mix(in srgb, var(--wc) 70%, #fff); }
.modal-card.wcol .m-back { color: color-mix(in srgb, var(--wc) 55%, #fff) !important; }
.modal-card.wcol .mrow, .modal-card.wcol .ex-intro, .modal-card.wcol .life-tile { background: color-mix(in srgb, var(--wc) 14%, rgba(255,255,255,.05)) !important; border-color: color-mix(in srgb, var(--wc) 30%, transparent) !important; }
.modal-card.wcol .btn-primary, .modal-card.wcol .nx-go { background: var(--wc) !important; border-color: var(--wc) !important; color: #fff !important; }
.modal-card.wcol .mi { color: var(--wc); }
.modal-card.wcol .hint, .modal-card.wcol .menu-sub { color: color-mix(in srgb, var(--wc) 25%, #c5ccda); }
.modal-card.wcol .m-foot, .modal-card.wcol .m-backbar { background: color-mix(in srgb, var(--wc) 22%, #141c30) !important; border-top-color: color-mix(in srgb, var(--wc) 40%, transparent) !important; }
.modal-card.wcol .m-foot .btn:not(.btn-primary), .modal-card.wcol .m-back2 { background: color-mix(in srgb, var(--wc) 30%, rgba(255,255,255,.06)) !important; color: #fff !important; border-color: color-mix(in srgb, var(--wc) 50%, transparent) !important; }
#startMenu .sm-hub { display: none; }
.modal-card.wcol .m-foot .m-back2, .modal-card.wcol .m-backbar .m-back2 { background: var(--wc) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
/* Mere luft omkring ikonerne i menuen */
#startMenu.sm-icons .sm-pager .sm-grid { grid-auto-rows: 132px; gap: 14px 6px; padding: 6px 0 2px; }
#startMenu.sm-icons .sm-pager .sm-tile { padding: 8px 2px; }
#startMenu.sm-icons .sm-chip { margin: 0 0 10px; }
#startMenu .sm-tabs { margin-bottom: 6px; }
#startMenu .sm-dots { padding-top: 10px; }
#startMenu { max-height: calc(100dvh - 160px - var(--safe-b, 0px) - var(--safe-t, env(safe-area-inset-top, 0px)) - 16px); }
/* Ingen rullebjælker i vinduerne (de kom frem ved et lodret swipe), og et swipe på et vindue ruller ikke kortet bagved */
.modal-card, .modal-card * { scrollbar-width: none; -ms-overflow-style: none; }
.modal-card::-webkit-scrollbar, .modal-card *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal, .modal-card { overscroll-behavior: contain; }
/* Chatten holder sig oven over tastaturet: kortet følger den synlige højde (--vvh) og står øverst, så skrivefeltet aldrig ligger bag tastaturet */
body.kb-open #modal:has(.fam-chat) { align-items: start; padding-top: calc(var(--vvt, 0px) + var(--safe-t, 0px) + 8px); }
body.kb-open #modalCard:has(.fam-chat) { height: calc(var(--vvh, 100dvh) - var(--safe-t, 0px) - 28px); max-height: calc(var(--vvh, 100dvh) - var(--safe-t, 0px) - 28px); }
body.kb-open #modalCard:has(.fam-chat) .fam-compose .fc-quick { display: none; }

/* Sider der swipes imellem med prikker nederst (Skriv sammen) */
.pg-body { padding: 0 !important; overflow: hidden !important; display: flex; }
.pg-pager { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pg-pager::-webkit-scrollbar { display: none; }
.pg-page { scroll-snap-align: start; padding: 4px 20px 12px; overflow-y: auto; scrollbar-width: none; }
.pg-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 calc(14px + var(--safe-b, 0px)); }
.pg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(120,130,150,.35); transition: background .2s; }
.pg-dots i.on { background: var(--wc, #17a08c); }

.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.ph-th { aspect-ratio: 1; border: 0; border-radius: 12px; background-color: rgba(120,130,150,.25); background-size: cover; background-position: center; cursor: pointer; }

/* TEST: frosted glas (body.glas). Ikke for gennemsigtigt: kortet bagved skal kunne ses, men teksten skal altid kunne læses */
body.glas .modal-card, body.glas #startMenu {
  background: linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 46%, rgba(22, 30, 52, .80)) 0%, rgba(22, 30, 52, .74) 55%, color-mix(in srgb, var(--wc, #5a6a90) 24%, rgba(22, 30, 52, .78)) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .26) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 24px 60px -18px rgba(0, 0, 0, .7) !important;
}
body.glas .modal-card.wcol .m-foot, body.glas .modal-card.wcol .m-backbar { background: rgba(255, 255, 255, .06) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.glas .modal-card.wcol .mrow, body.glas .modal-card.wcol .ex-intro, body.glas .modal-card.wcol .life-tile { background: rgba(255, 255, 255, .09) !important; border-color: rgba(255, 255, 255, .16) !important; }
body.glas:not(.night) .modal-card, body.glas:not(.night) #startMenu { color: #fff; }
body.glas #dkStart { -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); background: rgba(22, 30, 52, .72); border: 1px solid rgba(255, 255, 255, .28); }

/* Glasplade: en lys kant foroven, en blød glans på skrå og lidt dybde, så kortene ligner en tyk glasplade over kortet */
body.glas .modal-card, body.glas #startMenu { position: relative; overflow: hidden; }
body.glas #startMenu { position: fixed; }
body.glas .modal-card::before, body.glas #startMenu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%);
}
body.glas .modal-card > *, body.glas #startMenu > * { position: relative; z-index: 1; }
body.glas .modal-card { box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(0,0,0,.25), inset 1px 0 0 rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.75), 0 6px 14px -6px rgba(0,0,0,.4) !important; }
/* Menuen: det kort, man åbner mest, får et flottere farveforløb gennem de tre ikonfarver */
body.glas #startMenu {
  background: linear-gradient(160deg, rgba(240,138,36,.42) 0%, rgba(224,64,159,.34) 34%, rgba(74,82,224,.40) 68%, rgba(16,183,212,.34) 100%), rgba(18, 26, 48, .78) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 8px rgba(0,0,0,.3), 0 30px 64px -18px rgba(0,0,0,.75) !important;
}
/* Skriv sammen: luft mellem invitationen, knapperne og teksten under */
.bd-card { margin-bottom: 22px; }
.bd-btns { display: flex; gap: 14px; margin: 0 0 22px; }
.bd-btns .btn { flex: 1; min-height: 56px; }
.pg-page .hint { margin-top: 6px; line-height: 1.5; }

/* Ingen lyse hjørner: glansen er kun en tynd kant foroven, og menuens farveforløb er mørkere (især orange i hjørnet øverst til venstre) */
body.glas .modal-card::before, body.glas #startMenu::before { background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 14%); }
body.glas .modal-card { background: linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 30%, rgba(16, 22, 40, .86)) 0%, rgba(16, 22, 40, .84) 55%, color-mix(in srgb, var(--wc, #5a6a90) 18%, rgba(16, 22, 40, .84)) 100%) !important; }
body.glas #startMenu { background: linear-gradient(160deg, rgba(150,70,20,.30) 0%, rgba(150,30,100,.30) 34%, rgba(50,56,160,.36) 68%, rgba(10,110,140,.32) 100%), rgba(14, 20, 38, .86) !important; }

.ph-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; opacity: .85; }
.ph-trip { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ph-trip i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ph-place { margin: 10px 2px 6px; font-weight: 700; opacity: .9; }
.ph-th { position: relative; }
.ph-th.on { outline: 3px solid var(--wc, #2a9d8f); outline-offset: -3px; }
.ph-ck { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); border: 2px solid #fff; }
.ph-th.on .ph-ck { background: var(--wc, #2a9d8f); }
.ph-del { position: sticky; bottom: 0; padding: 10px 0 4px; }
.ph-del .btn { width: 100%; min-height: 54px; }

/* Tilbage nederst i Vis rejse, Steder og Ruter (åbnet fra Menu, kun telefon) */
.pn-back { display: none; }
body.dock-multi .pn-back { display: flex; position: sticky; bottom: 0; z-index: 3; margin: 8px -8px -8px; padding: 10px 14px 12px; border-top: 1px solid rgba(255,255,255,.14); background: inherit; border-radius: 0 0 22px 22px; }
body.dock-multi .drawer > .pn-back { margin: 0; flex: none; }
.pn-back2 { display: inline-flex; align-items: center; gap: 6px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--pc, #5a6a90); color: #fff; font: 700 16px var(--sans); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.tf-menu, .drawer, .popover.route-pop { --pc: #f08a24; }
.drawer { --pc: #2fb84e; }
.popover.route-pop { --pc: #00b39b; }
/* Glas og farveforløb også på Vis rejse, Steder og Ruter (telefon) */
body.glas.dock-multi .tf-menu, body.glas.dock-multi .drawer, body.glas.dock-multi .popover.route-pop {
  background: linear-gradient(155deg, color-mix(in srgb, var(--pc) 30%, rgba(16, 22, 40, .86)) 0%, rgba(16, 22, 40, .84) 55%, color-mix(in srgb, var(--pc) 18%, rgba(16, 22, 40, .84)) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid color-mix(in srgb, var(--pc) 55%, rgba(255,255,255,.22)) !important; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 6px rgba(0,0,0,.25), 0 30px 60px -20px rgba(0,0,0,.75) !important;
}
body.glas.dock-multi .tf-menu, body.glas.dock-multi .drawer, body.glas.dock-multi .popover.route-pop { color: #fff; }
/* Ny Tilbage-knap: lille glaspille med tynd kant i vinduets farve, fast højde (så bunden ikke hopper, når skrifttypen er hentet) */
body.kunde .modal-card .m-back2, .pn-back2 {
  --bc: var(--wc, var(--pc, #7f8ca0));
  box-sizing: border-box; height: 40px !important; min-height: 40px !important; padding: 0 16px 0 12px !important; gap: 6px !important; line-height: 1;
  background: color-mix(in srgb, var(--bc) 14%, rgba(255,255,255,.06)) !important; color: color-mix(in srgb, var(--bc) 35%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--bc) 60%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 15px var(--sans) !important; letter-spacing: 0;
}
body.kunde:not(.night) .modal-card .m-back2 { background: color-mix(in srgb, var(--bc) 14%, rgba(255,255,255,.06)) !important; color: color-mix(in srgb, var(--bc) 35%, #fff) !important; }
body.kunde .modal-card.has-bb .m-backbar, body.dock-multi .pn-back, .modal-card.wcol .m-backbar {
  box-sizing: border-box; height: 64px !important; min-height: 64px; padding: 12px 16px !important; margin-top: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)) !important; border-top: 0 !important; align-items: center;
}
body.dock-multi .pn-back { margin: 0 -8px -8px; }
body.kunde .modal-card .m-back2 .bb-to, .pn-back2 span { display: inline-block; }
body.kunde .modal-card.wcol .m-foot .m-back2, body.kunde .modal-card.wcol .m-backbar .m-back2, body.kunde .modal-card.wcol .m-back2 {
  background: color-mix(in srgb, var(--wc) 14%, rgba(255,255,255,.06)) !important; color: color-mix(in srgb, var(--wc) 35%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--wc) 60%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body.kunde .modal-card.wcol .m-backbar, body.glas .modal-card.wcol .m-backbar { background: linear-gradient(180deg, transparent, rgba(0,0,0,.2)) !important; border-top: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.kunde .modal-card.has-bb .m-backbar, body.kunde .modal-card.wcol .m-backbar, body.dock-multi .pn-back { background: linear-gradient(180deg, rgba(16,22,40,0), rgba(16,22,40,.92) 55%) !important; }

/* Telefon i vandret: kun en besked om at dreje (appen er lavet til stående) */
#rotateMsg { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  body.phone-only #rotateMsg { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #0f1626; color: #fff; text-align: center; padding: 24px; font: 600 18px var(--sans); }
  body.phone-only #rotateMsg svg { width: 56px; height: 56px; fill: none; stroke: #e0a95a; stroke-width: 1.8; stroke-linecap: round; animation: rotHint 2.4s ease-in-out infinite; }
}
@keyframes rotHint { 0%, 100% { transform: rotate(90deg); } 45%, 70% { transform: rotate(0deg); } }

/* Intet bagved må følge med, når man swiper i et kort eller en liste */
.tf-menu, #drawer, .drawer-list, .popover, #startMenu, .modal-card, .m-body, .sheet-body, .tf-list { overscroll-behavior: contain; }
body.tf-pop::before { pointer-events: auto !important; touch-action: none; }
html, body { overscroll-behavior: none; }

/* RETTELSE: glas-reglen satte overflow: hidden på kortene, så de ikke kunne rulles. Kortene ruller igen; glansen ligger nu som et lag i selve baggrunden i stedet for et ::before, der ville rulle med indholdet */
body.glas .modal-card, body.glas #startMenu { overflow-x: hidden !important; overflow-y: auto !important; }
body.glas .modal-card::before, body.glas #startMenu::before { display: none !important; }
body.glas .modal-card { background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 14%), linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 30%, rgba(16, 22, 40, .86)) 0%, rgba(16, 22, 40, .84) 55%, color-mix(in srgb, var(--wc, #5a6a90) 18%, rgba(16, 22, 40, .84)) 100%) !important; }

/* Mere uigennemsigtigt glas: farverne i knapper og rækker må ikke fade ud i baggrunden */
body.glas .modal-card { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 14%), linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 26%, #121a2e) 0%, #121a2e 58%, color-mix(in srgb, var(--wc, #5a6a90) 16%, #121a2e) 100%) !important; }
body.glas .modal-card.wcol .mrow, body.glas .modal-card.wcol .ex-intro, body.glas .modal-card.wcol .life-tile { background: color-mix(in srgb, var(--wc) 16%, #1b2338) !important; border-color: color-mix(in srgb, var(--wc) 35%, transparent) !important; }
body.glas.dock-multi .tf-menu, body.glas.dock-multi .drawer, body.glas.dock-multi .popover.route-pop { background: linear-gradient(155deg, color-mix(in srgb, var(--pc) 24%, #121a2e) 0%, #121a2e 58%, color-mix(in srgb, var(--pc) 14%, #121a2e) 100%) !important; }
/* Steder, Vis rejse og Ruter: rækkerne beholder deres egne farver og afstand (min tidligere farve-regel fjernes) */
body.dock-multi .drawer .item { margin-bottom: 8px; }
body.dock-multi .drawer .item.on, body.dock-multi .tf-item.on { }

/* Vinduer åbner uden at vokse (skalering fik Tilbage-bunden til at hoppe på plads): kun en lille opadgående glidning og fade */
body.kunde .modal-card { transform: translateY(14px); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
body.kunde .modal.open .modal-card { transform: none; }
.tf-new b { color: #f08a24; }

/* Steder: hver række er et eget kort med luft imellem, så rækkerne ikke flyder sammen */
body.dock-multi .drawer .drawer-list .item { background: color-mix(in srgb, var(--pc, #2fb84e) 12%, #1b2338); border: 1px solid rgba(255,255,255,.1); border-left-width: 4px; margin: 0 0 10px; padding: 10px 10px 10px 12px; border-radius: 16px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.7); }
body.dock-multi .drawer .drawer-list .item:hover { background: color-mix(in srgb, var(--pc, #2fb84e) 20%, #1b2338); }
body.dock-multi .drawer .drawer-list { padding: 0 10px 12px; }
body.dock-multi .drawer .drawer-list h3 { margin: 16px 6px 8px; }

/* Blyant på hver rejse i Mine rejser */
.tf-item { position: relative; }
.tf-pen { margin-left: auto; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.1); color: inherit; cursor: pointer; }
.tf-pen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Km-kortet er større og lettere at læse på en telefon */
@media (max-width: 760px) {
  .trip-km { gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; max-width: calc(100vw - 32px); }
  .trip-km .tk-ico { width: 48px; height: 48px; border-radius: 15px; }
  .trip-km .tk-ico svg { width: 28px; height: 28px; }
  .trip-km b { font-size: 21px; line-height: 1.2; }
  .trip-km small { font-size: 16px; line-height: 1.3; }
  .trip-km .mr-chev { width: 26px; height: 26px; }
}

/* Tilbage nederst i stedkortet (telefon), i tommelfingerens rækkevidde */
.sheet-back { display: none; }
@media (max-width: 760px) {
  .sheet-back { display: flex; flex: none; box-sizing: border-box; height: calc(64px + var(--safe-b, 0px)); padding: 12px 16px var(--safe-b, 0px); align-items: center; background: linear-gradient(180deg, rgba(16,22,40,0), rgba(16,22,40,.92) 55%); }
  .sheet-back .pn-back2 { --pc: #2fb84e; }
}

/* Kort med en lang liste (Mine drømmesteder): fast højde, overskriften står stille, listen ruller, Tilbage i bunden */
body .modal-card.card-fix, body.glas .modal-card.card-fix { display: flex; flex-direction: column; height: min(640px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); overflow: hidden !important; }
.modal-card.card-fix .m-head { flex: none; }
.modal-card.card-fix .m-body { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain; }
.modal-card.card-fix .m-backbar, .modal-card.card-fix .m-foot { flex: none; }

/* Burgermenu i Menu-panelet: Tilpas og Knapperne i siden ligger bag ☰ */
#startMenu .sm-more-w { position: relative; display: inline-block; }
#startMenu .sm-burger { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
#startMenu .sm-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#startMenu .sm-more { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 230px; padding: 6px; border-radius: 16px; background: #1b2338; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); display: grid; gap: 2px; }
#startMenu .sm-more[hidden] { display: none; }
#startMenu .sm-mi { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: 600 16px var(--sans); text-align: left; cursor: pointer; white-space: nowrap; }
#startMenu .sm-mi:hover { background: rgba(255,255,255,.1); }
#startMenu .sm-mi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Alle luk-kryds er runde (ikke afrundede firkanter) */
.icon-btn[data-m="close"], .icon-btn[data-tfclose], .icon-btn[data-x="close"], .sheet-close, .pop-x, .sm-x, .lb-top .icon-btn[data-lbx="close"], body.kunde .modal-card .m-head .icon-btn { border-radius: 50% !important; aspect-ratio: 1; }

/* Burgermenuens liste ligger over fliserne */
#startMenu .sm-head { position: relative; z-index: 40; }
#startMenu .sm-more { z-index: 50; background: #1b2338 !important; }
#startMenu .sm-head { z-index: 400 !important; }
#startMenu .sm-more { z-index: 500; align-content: start; grid-auto-rows: 48px; width: max-content; max-width: calc(100vw - 60px); }
#startMenu .sm-mi { height: 48px !important; min-height: 0 !important; padding: 0 14px !important; margin: 0 !important; }

/* Km-kortet: hver linje for sig med luft imellem (ikke en lang sætning, der ombrydes), og det går aldrig ind under Menu-knapperne */
.trip-km small span { display: block; margin-top: 4px; }
.trip-km b { display: block; }
@media (max-width: 760px) { .trip-km { right: auto; max-width: calc(100vw - 150px); } .trip-km small span { margin-top: 6px; } }
/* Burgeren til venstre ved titlen, krydset alene til højre: svært at ramme den forkerte */
#startMenu .sm-head { display: flex; align-items: center; gap: 14px; }
#startMenu .sm-hb { display: contents; }
#startMenu .sm-more-w { order: 1; margin-right: auto; }
#startMenu .sm-x, #startMenu .sm-ed { order: 2; }
#startMenu .sm-head > b { order: 0; }
#startMenu .sm-more { left: 0; right: auto; }

@media (max-width: 760px) {
  .trip-km { gap: 12px; padding: 12px 14px 12px 12px; max-width: calc(100vw - 112px); }
  .trip-km .tk-ico { width: 40px; height: 40px; border-radius: 13px; }
  .trip-km .tk-ico svg { width: 24px; height: 24px; }
  .trip-km b { font-size: 19px; white-space: nowrap; }
  .trip-km small { font-size: 14.5px; }
  .trip-km .mr-chev { display: none; }
}

/* Skriv sammen: hvad må den inviterede (kontakter, som i Bos gæsteguide) */
.bd-ph { font: italic 400 24px var(--serif); margin: 4px 0 12px; }
.bd-perm { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 0 0 10px; padding: 0 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.07); color: inherit; font: 600 16px var(--sans); text-align: left; cursor: pointer; }
.bd-perm .bp-ic { font-size: 24px; flex: none; }
.bd-perm b { flex: 1; font-weight: 600; }
.bp-sw { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.22); transition: background .2s; }
.bp-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.bd-perm.on .bp-sw { background: var(--wc, #17a08c); }
.bd-perm.on .bp-sw::after { transform: translateX(20px); }
.bd-swipe { text-align: center; margin: 14px 0 0; opacity: .7; font-weight: 600; }
.pg-dots i { cursor: pointer; }

/* Ingen lyse nuancer øverst til venstre: farveforløbet starter mørkt, og den lyse glans er kun en tynd kant */
body.glas .modal-card { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 10%), linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 12%, #10172a) 0%, #10172a 55%, color-mix(in srgb, var(--wc, #5a6a90) 18%, #10172a) 100%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -2px 6px rgba(0,0,0,.25), 0 30px 60px -20px rgba(0,0,0,.75) !important; }
body.glas.dock-multi .tf-menu, body.glas.dock-multi .drawer, body.glas.dock-multi .popover.route-pop { background: linear-gradient(155deg, color-mix(in srgb, var(--pc) 12%, #10172a) 0%, #10172a 55%, color-mix(in srgb, var(--pc) 18%, #10172a) 100%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), 0 30px 60px -20px rgba(0,0,0,.75) !important; }
body.glas #startMenu { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -2px 8px rgba(0,0,0,.3), 0 30px 64px -18px rgba(0,0,0,.75) !important; }

/* Rejsebogen på telefon: Tilbage og PDF nederst (tommelfinger-afstand), ikke øverst */
@media screen and (max-width: 760px) {
  #book .book-bar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; padding: 14px 16px calc(12px + var(--safe-b, 0px)); background: linear-gradient(180deg, rgba(19,35,58,0), rgba(19,35,58,.96) 55%); border: 0; }
  #book .book-bar > span { display: none; }
  #book .book-bar .btn { height: 44px; min-height: 44px; border-radius: 999px; padding: 0 20px; font-size: 16px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.7); }
  #book { padding-bottom: calc(84px + var(--safe-b, 0px)); }
}

/* Karakter med stjerner: skyderen fylder stjernerne */
.stars { position: relative; display: inline-block; font-size: 44px; line-height: 1; letter-spacing: 4px; white-space: nowrap; }
.stars i, .stars b { font-style: normal; font-weight: 400; display: block; }
.stars i { color: rgba(255,255,255,.18); }
.stars b { position: absolute; left: 0; top: 0; overflow: hidden; width: var(--p, 0%); color: #f5c542; text-shadow: 0 0 14px rgba(245,197,66,.45); }
.star-big { display: grid; justify-items: center; gap: 10px; margin: 18px 0 14px; }
.star-val b { font: 700 40px var(--sans); }
.star-val span { font: 600 18px var(--sans); opacity: .7; }
.star-sl { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 6px 0 8px; }
.star-sl::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.18); }
.star-sl::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -13px; border-radius: 50%; background: #f5c542; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.star-sl::-moz-range-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.18); }
.star-sl::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #f5c542; border: 3px solid #fff; }

/* Ret kortet på telefon: rund ✓-knap over Menu */
#meDone { position: fixed; z-index: 960; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #2fb84e; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.65), inset 0 1.5px 0 rgba(255,255,255,.35); cursor: pointer; }
#meDone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Tryk-bare tal i Min camperlog */
.cl-stats button { position: relative; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; }
.cl-stats button .mr-chev, .cl-stats button svg.mr-chev { position: absolute; right: 8px; top: 10px; width: 18px; height: 18px; opacity: .55; }
.cl-stats button:active { transform: scale(.97); }
.cl-stat-hint { margin: 4px 2px 10px; }
.cl-big { grid-template-columns: 1fr 1fr; }

/* Fortryd en sendt besked */
.fam-undo { margin-left: 10px; padding: 2px 8px; border: 0; background: transparent; color: inherit; opacity: .75; text-decoration: underline; font: 600 12.5px var(--sans); cursor: pointer; }

/* Lange navne (fx tysk): navnet må fylde to linjer, og linjen under bliver ikke skåret af */
#startMenu.sm-icons .sm-tile { height: auto !important; min-height: 132px; overflow: visible !important; align-content: start; }
#startMenu.sm-icons .sm-pager .sm-tile > b { height: auto !important; min-height: 2.4em; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
#startMenu.sm-icons .sm-pager .sm-tile > small { height: auto !important; overflow: visible !important; }
#startMenu.sm-icons .sm-pager .sm-tile > b { min-height: 0 !important; }
#startMenu.sm-icons .sm-grid { align-items: start; row-gap: 14px; }
#startMenu.sm-icons .sm-pager { align-items: start; padding-bottom: 6px; }

/* Beta-mærke på felter, der endnu kun er en prøve */
#startMenu .sm-chip { position: relative; }
#startMenu .sm-beta { position: absolute; right: -6px; top: -6px; z-index: 2; padding: 2px 7px; border-radius: 999px; background: #fff; color: #1b2333; font: 800 10.5px/1.3 var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 3px 8px -2px rgba(0,0,0,.5); }

/* Admin: Brugere og måling */
.tm-wrap { display: grid; gap: 14px; }
.tm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tm-seg { display: inline-flex; border-radius: 999px; background: rgba(127,140,160,.18); padding: 3px; }
.tm-seg button { border: 0; background: transparent; color: inherit; padding: 8px 14px; border-radius: 999px; font: 600 14px var(--sans); cursor: pointer; }
.tm-seg button.on { background: #d9a441; color: #1b2333; }
.tm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tm-tile { padding: 14px; border-radius: 16px; background: rgba(127,140,160,.14); display: grid; gap: 2px; }
.tm-tile b { font: 700 26px var(--serif); }
.tm-tile span { font-weight: 600; }
.tm-tile small { opacity: .7; font-size: 12.5px; }
.tm-h { margin: 8px 0 0; font: italic 400 22px var(--serif); }
.tm-days { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 6px 2px 0; }
.tm-days > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.tm-days i { display: block; width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #f2cf73, #c88a2e); }
.tm-days small { font-size: 10.5px; opacity: .7; }
.tm-table { display: grid; gap: 6px; }
.tm-row { display: grid; grid-template-columns: 2.4fr .8fr .6fr .9fr .9fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(127,140,160,.1); align-items: center; font-size: 14px; }
.tm-row small { display: block; opacity: .65; font-size: 12px; }
.tm-hd { background: transparent; font-weight: 700; font-size: 12.5px; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }
.tm-feats { display: grid; gap: 6px; }
.tm-f { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(127,140,160,.1); overflow: hidden; font-size: 14px; }
.tm-f i { position: absolute; left: 0; bottom: 0; height: 3px; background: #d9a441; opacity: .85; }
.tm-f small { opacity: .65; }
.tm-errs { display: grid; gap: 6px; }
.tm-e { padding: 10px 12px; border-radius: 12px; background: rgba(209,73,91,.14); font-size: 14px; }
.tm-e small { display: block; opacity: .75; margin-top: 3px; }
.tm-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 760px) { .tm-row { grid-template-columns: 1.6fr .7fr .5fr; } .tm-row > span:nth-child(n+4) { display: none; } }

/* Lettere at læse (også for ældre): forklaringer og små knapper i kortene er mindst 14 px */
.modal-card .hint, .modal-card .menu-sub { font-size: 14.5px; }
.modal-card .ly-btn { font-size: 14px; }
.modal-card .mrow small, .modal-card .life-tile small { font-size: 14px; }

/* Menuens sider swipes kun vandret: ikonerne kan ikke trækkes op og ned som en elastik */
#startMenu .sm-pager, .pg-pager, #smagShareM .ss-pager { overflow-y: hidden !important; overscroll-behavior: none; touch-action: pan-x; }
#startMenu .sm-pager .sm-grid { touch-action: pan-x; }

/* Tal-mærke i hjørnet af felterne (som ulæste beskeder); Beta-mærket flytter til venstre hjørne */
#startMenu .sm-badge { position: absolute; right: -9px; top: -9px; z-index: 3; min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; background: #ff3b30; color: #fff; border: 2.5px solid #1a1530; font: 800 14px/1 var(--sans); font-style: normal; box-shadow: 0 4px 10px -2px rgba(0,0,0,.5); }
#startMenu .sm-beta { right: auto; left: -8px; }
@media screen and (max-width: 760px) {
  #book .book-bar { background: linear-gradient(180deg, rgba(233,228,218,0), rgba(233,228,218,.97) 55%); }
  #book .book-bar .btn:not(.btn-primary) { background: #13233a; color: #fff; border-color: transparent; }
}

/* Tal-mærket er en rund cirkel (ikke en pølse), og tallet står midt i */
#startMenu .sm-badge { width: 30px; height: 30px; min-width: 30px; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 50%; font-variant-numeric: tabular-nums; font-size: 15px; line-height: 1; right: -8px; top: -8px; }
#startMenu .sm-badge[data-len="2"] { font-size: 13.5px; letter-spacing: -.03em; }
#startMenu .sm-badge[data-len="3"], #startMenu .sm-badge[data-len="4"] { width: auto; padding: 0 8px; border-radius: 999px; font-size: 13px; letter-spacing: -.03em; }

/* ✓-knappen i Ret kortet: swipe opad godkender (pilen viser det); mere luft ned til Menu */
#meDone { transition: transform .18s, opacity .18s; touch-action: none; }
#meDone.drag { transition: none; }
#meDone::before { content: '︿'; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 700 18px/1 var(--sans); color: #2fb84e; text-shadow: 0 1px 4px rgba(0,0,0,.5); animation: meHint 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes meHint { 0%, 100% { opacity: .25; transform: translate(-50%, 3px); } 50% { opacity: 1; transform: translate(-50%, -3px); } }

/* Færgen sejler frem og tilbage: skibet vender om i havnen, og navneskiltet viser, hvor den er på vej hen */
.ferry-icon { overflow: visible; }
.ferry-w { width: 28px; height: 28px; transition: transform .6s; }
.ferry-w.back { transform: scaleX(-1); }
.ferry-tag { position: absolute; left: 33px; top: 4px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.95); color: #1b2333; border: 1.5px solid var(--c, #5a6a90); font: 700 11.5px/1.2 var(--sans, system-ui); box-shadow: 0 3px 8px -3px rgba(0,0,0,.45); pointer-events: none; }
.ferry-icon.tag-l .ferry-tag { left: auto; right: 33px; }
body.night .ferry-tag { background: rgba(22,30,48,.95); color: #fff; }

/* Banen for swipet: en lodret kapsel over ✓-knappen (som stregen, man swiper op ad for at lukke en telefon), med pile der peger opad og en udfyldning, der følger fingeren */
#meDone::before { display: none; }
#meTrack { position: fixed; z-index: 955; width: 64px; box-sizing: border-box; border-radius: 999px; background: rgba(20, 30, 46, .55); border: 1.5px solid rgba(47, 184, 78, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; overflow: hidden; --p: 0; }
#meTrack u { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: linear-gradient(0deg, rgba(47,184,78,.55), rgba(47,184,78,.15)); }
#meTrack i { position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: solid rgba(255,255,255,.85); border-width: 3px 0 0 3px; transform: rotate(45deg); opacity: 0; animation: meChev 1.8s ease-in-out infinite; }
#meTrack i:nth-child(1) { top: 40%; animation-delay: .5s; } #meTrack i:nth-child(2) { top: 26%; animation-delay: .25s; } #meTrack i:nth-child(3) { top: 12%; }
@keyframes meChev { 0%, 100% { opacity: 0; } 40% { opacity: .95; } }

/* Lange stednavne må aldrig dække krydset eller Ret: titlen reagerer ikke på tryk, knapperne ligger øverst, og titlen skrumper og afkortes efter tre linjer */
.sheet-title-wrap { pointer-events: none; right: 76px; }
.sheet-title-wrap * { pointer-events: none; }
.sheet-close, .sheet-edit { z-index: 8 !important; }
.sheet-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sheet-title.long { font-size: 28px; line-height: 1.08; }
.sheet-title.xlong { font-size: 23px; line-height: 1.1; }
@media (max-width: 760px) { .sheet-title-wrap { max-height: calc(100% - 78px); } }
/* Landelinjen over titlen er højst én linje (afkortes med …), så en lang adresse ikke skubber titlen op under knapperne */
.sheet-title-wrap .eyebrow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-title-wrap .eyebrow img { display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* Hvor gemmes tingene: vises nederst i Indstillinger, så man kan se, om man bruger sin egen server eller en prøveversion */
.set-where { margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(127,140,160,.14); display: grid; gap: 4px; font-size: 14.5px; line-height: 1.4; }
.set-where small { opacity: .7; font-size: 13px; }

/* Alle rækker i Indstillinger er lige høje; kontakter er små, så titlen ikke ombrydes på tre linjer */
.mrow.hub-set { height: 96px; min-height: 96px; box-sizing: border-box; align-items: center; }
.mrow.hub-set > span:nth-of-type(2) { min-width: 0; }
.mrow.hub-set b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.mrow.hub-set small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.set-sw { flex: none; position: relative; width: 48px; height: 29px; border-radius: 999px; background: rgba(255,255,255,.22); margin-left: 6px; transition: background .2s; }
.set-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; transition: transform .2s; }
.set-sw.on { background: #2fb84e; }
.set-sw.on::after { transform: translateX(19px); }

/* Mærke på tandhjulet: Bo (hans egen udgave) eller Demo (smagsprøven og demo-serveren) */
#setBtn { position: relative; }
.env-tag { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; font: 800 10px/1.3 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; white-space: nowrap; border: 2px solid #0f1626; box-shadow: 0 3px 8px -2px rgba(0,0,0,.5); }
.env-tag.bo { background: #2fb84e; color: #fff; }
.env-tag.demo { background: #f2c14e; color: #1b2333; }

/* Hent fra en backup */
.im-wrap { display: grid; gap: 14px; }
.im-pick { display: grid; gap: 6px; justify-items: start; }
.im-pick .btn { min-height: 52px; padding: 0 26px; }
.im-pick small { opacity: .75; word-break: break-all; }
.im-err { padding: 12px 14px; border-radius: 14px; background: rgba(209,73,91,.18); color: #ffb3bd; font-weight: 600; }
.im-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.im-sum > div { padding: 12px 8px; border-radius: 14px; background: rgba(127,140,160,.14); text-align: center; display: grid; gap: 2px; }
.im-sum b { font: 700 24px var(--serif); }
.im-sum small { font-size: 12.5px; opacity: .8; }
.im-go { width: 100%; min-height: 54px; }
.im-prog { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(127,140,160,.14); }
.im-prog .bk-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.im-prog .bk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2cf73, #c88a2e); transition: width .2s; }
.im-note { margin-top: 2px; }
@media (max-width: 420px) { .im-sum { grid-template-columns: repeat(2, 1fr); } }

/* Indstillinger som app-ikoner, ligesom Menu (abonnementskortet i toppen er uændret) */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 6px; padding: 8px 0 4px; }
.st-tile { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 4px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; min-width: 0; }
.st-tile.done { cursor: default; opacity: .9; }
.st-chip { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; margin-bottom: 6px; background: linear-gradient(160deg, color-mix(in srgb, var(--k) 100%, #fff 12%), color-mix(in srgb, var(--k) 84%, #000)); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.st-chip svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-chip.st-flag { background: none; box-shadow: none; }
.st-chip.st-flag img, .st-chip.st-flag svg { width: 64px; height: 44px; border-radius: 8px; }
.st-tile b { font: 600 14.5px/1.2 var(--sans); max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-tile small { font-size: 12.5px; color: var(--muted, #9fb0c8); max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.25em; line-height: 1.25; }
.st-dot { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: #6b7a99; border: 3px solid #1a1f33; }
.st-dot.on { background: #2fb84e; }
@media (max-width: 380px) { .st-chip { width: 64px; height: 64px; } .st-chip svg { width: 35px; height: 35px; } }

/* Sprog: kloden med det valgte flag som lille mærke */
.st-flagb { position: absolute; right: -8px; bottom: -6px; width: 34px; height: 24px; border-radius: 6px; overflow: hidden; border: 2.5px solid #1a1f33; background: #fff; display: grid; place-items: center; font-style: normal; box-shadow: 0 3px 8px -2px rgba(0,0,0,.5); }
.st-flagb img, .st-flagb svg { width: 100%; height: 100%; object-fit: cover; fill: initial; stroke: none; }
.snd-off { opacity: .45; pointer-events: none; }

/* Lyde-kortet: rækkerne er lige brede, og emoji-ikonerne står i ens felter */
.snd-list { display: grid; gap: 10px; }
.snd-list > div { display: grid; gap: 10px; transition: opacity .2s; }
.snd-list .route-toggle { width: 100%; box-sizing: border-box; min-height: 68px; margin: 0 !important; }
.snd-list .rt-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; flex: none; }
/* Backup-kortet: trinene vises kun på telefon, filens placering kun på computer */
.ex-touch { display: none; }
@media (pointer: coarse) { .ex-touch { display: block; } .ex-desk { display: none; } }

/* Tilbage-knappen: mindst 48 px høj (let at ramme for alle) */
body.kunde .modal-card .m-back2, .pn-back2, .sheet-back .pn-back2 { height: 48px !important; min-height: 48px !important; padding: 0 20px 0 16px !important; font-size: 16px !important; }
body.kunde .modal-card.has-bb .m-backbar, body.dock-multi .pn-back { height: 72px !important; min-height: 72px; }
.sheet-back { height: calc(72px + var(--safe-b, 0px)) !important; }
/* Tekststørrelse ved første start */
.tx-opts { display: grid; gap: 12px; margin: 6px 0 14px; }
.tx-opt { display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 0 22px; border-radius: 20px; border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: inherit; font-family: var(--sans); cursor: pointer; text-align: left; }
.tx-opt b { font-weight: 800; min-width: 64px; }
.tx-opt span { font-weight: 600; }
.tx-opt:active { border-color: #d9a441; background: rgba(217,164,65,.16); }

/* Topbar på computer: Demo-mærket sidder i hjørnet af tandhjulet (ikke under bjælken), og Log ud er kun et ikon, så bjælken ikke løber ud over skærmen */
@media (min-width: 761px) {
  .set-btn .env-tag { bottom: auto; top: -7px; left: auto; right: -14px; transform: none; font-size: 9px; padding: 1px 6px; border-width: 1.5px; }
  .tb-right .out-btn { width: 44px; padding: 0; justify-content: center; }
  .tb-right .out-btn span { display: none; }
}

/* Dato under navnet i nåleskiltet: skiltet bliver en linje højere, og datoen er lille og dæmpet */
.pin-name .pin-dt { display: block; margin-top: 1px; font-size: .78em; font-weight: 600; letter-spacing: .01em; opacity: .72; line-height: 1.15; }
.pin-name { line-height: 1.2; }

/* Ny rejse: årsknapper og dato-valg over listen over steder */
.tw-years { margin: 0 0 10px; }
.tw-dates { margin: 0 0 8px; }
.tw-dates summary { cursor: pointer; padding: 8px 0; font-weight: 600; opacity: .85; }
.tw-list { max-height: 46vh; overflow-y: auto; }

.tw-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.tw-bar .tw-count { margin: 0; }
.tw-years .chip.on { background: #d9a441; color: #1b2333; border-color: transparent; }

/* Årspiller: guld = det år, listen viser; farvet kant og tal = der er valgt steder fra det år; fyldt = hele året er valgt */
.tw-years .chip { display: inline-flex; align-items: center; gap: 7px; }
.tw-years .chip.has { border-color: #2fb84e; background: rgba(47,184,78,.16); color: inherit; }
.tw-years .chip.full { background: #2fb84e; color: #fff; border-color: #2fb84e; }
.tw-years .chip.on { box-shadow: 0 0 0 2px #d9a441; }
.tw-years .chip.on:not(.has) { background: #d9a441; color: #1b2333; }
.tw-n { font-style: normal; font-weight: 800; font-size: .78em; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #2fb84e; color: #fff; display: inline-grid; place-items: center; }
.tw-years .chip.full .tw-n { background: #fff; color: #1b7a34; }

/* Kortene får deres farve tilbage: mørkt udgangspunkt (ingen lyse hjørner), men tydeligt farvet i knappens farve */
body.glas .modal-card { background: linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 34%, #10172a) 0%, color-mix(in srgb, var(--wc, #5a6a90) 14%, #10172a) 55%, color-mix(in srgb, var(--wc, #5a6a90) 26%, #10172a) 100%) !important; }
body.glas.dock-multi .tf-menu, body.glas.dock-multi .drawer, body.glas.dock-multi .popover.route-pop { background: linear-gradient(155deg, color-mix(in srgb, var(--pc) 34%, #10172a) 0%, color-mix(in srgb, var(--pc) 14%, #10172a) 55%, color-mix(in srgb, var(--pc) 26%, #10172a) 100%) !important; }

/* Små, rolige skilte: datoen er lille, og skiltet fylder så lidt som muligt */
.pin-name .pin-dt { font-size: .74em; }

/* Plus-knappens kort: samme orange som plus-knappen, i alle trin. Kortet står i toppen (tastaturet), og midten bruges aldrig */
#modalCard.wizc, #modalCard.wizc.ws-1, #modalCard.wizc.ws-2 { --wk: #ee6a3c; --wc: #ee6a3c; }
body.glas #modalCard.wizc { border-color: color-mix(in srgb, #ee6a3c 55%, rgba(255,255,255,.2)) !important; }
body.kunde #modalCard.wizc .btn-primary { background: linear-gradient(135deg, #f58a4d, #e0553a) !important; border-color: transparent !important; color: #fff !important; }
body.glas .fab-menu { background: linear-gradient(155deg, color-mix(in srgb, #ee6a3c 34%, #10172a) 0%, color-mix(in srgb, #ee6a3c 14%, #10172a) 55%, color-mix(in srgb, #ee6a3c 26%, #10172a) 100%) !important; border: 1px solid color-mix(in srgb, #ee6a3c 55%, rgba(255,255,255,.2)); }
#modal:has(#modalCard.wizc) { align-items: flex-start !important; padding-top: calc(var(--safe-t, 0px) + 12px) !important; }
/* Rejse-vælgeren er et eget helskærmsark, ikke noget, der hænger fast på kortet (så bunden ikke bliver afskåret) */
.trip-pop { position: fixed !important; top: calc(var(--safe-t, 0px) + 10px) !important; left: 10px !important; right: 10px !important; bottom: calc(var(--safe-b, 0px) + 10px) !important; width: auto !important; height: auto !important; max-height: none !important; z-index: 3000; background: linear-gradient(155deg, #3a2a1e 0%, #10172a 55%, #2a1c14 100%) !important; border: 1px solid rgba(238,106,60,.55); }
.trip-pop .tp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 10px 0; }
.trip-pop .tp-foot { flex: none; display: flex; gap: 10px; justify-content: space-between; padding-top: 8px; }
/* Trin 4: billederne står først, med små billeder af dem, der er lagt til, og teksten under */
#modalCard.wizc form.wiz { display: flex; flex-direction: column; }
#modalCard.wizc #edDrop { order: 1; } #modalCard.wizc #edCam { order: 2; } #modalCard.wizc #edThumbs { order: 3; } #modalCard.wizc form.wiz > [data-wstep="2"]:not(#edDrop):not(#edCam):not(#edThumbs) { order: 4; }
#modalCard.wizc textarea[name="note"] { min-height: 84px; max-height: 120px; }
.ed-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ed-thumbs:empty { display: none; }
.ed-thumbs img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }
.ed-thumbs .et-more { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); font-weight: 700; }

/* Friskere farver: kortene tager mere af ikonets farve, så kort og ikoner hører sammen */
body.glas .modal-card { background: linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 58%, #1a2140) 0%, color-mix(in srgb, var(--wc, #5a6a90) 28%, #151c36) 55%, color-mix(in srgb, var(--wc, #5a6a90) 46%, #1a2140) 100%) !important; }
body.glas .modal-card.wcol .mrow, body.glas .modal-card.wcol .ex-intro, body.glas .modal-card.wcol .life-tile { background: color-mix(in srgb, var(--wc) 26%, #1d2640) !important; border-color: color-mix(in srgb, var(--wc) 55%, transparent) !important; }
body.glas .fab-menu { background: linear-gradient(155deg, color-mix(in srgb, #ee6a3c 58%, #1a2140) 0%, color-mix(in srgb, #ee6a3c 28%, #151c36) 55%, color-mix(in srgb, #ee6a3c 46%, #1a2140) 100%) !important; }
body.kunde .fab-menu button { background: color-mix(in srgb, var(--k) 30%, rgba(14, 20, 40, .55)); border-color: color-mix(in srgb, var(--k) 70%, transparent); box-shadow: 0 8px 18px -12px var(--k); }
body.kunde .fab-menu button:hover { background: color-mix(in srgb, var(--k) 40%, rgba(14, 20, 40, .5)); }
body.kunde .fab-menu button svg { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Nyt sted, trin 2/4: kompakt, så stedet er synligt over knapperne (uden at man skal scrolle) */
#modalCard.wizc.ws-0 .wiz-lead { display: none; }
body.kunde #modalCard.wizc .wiz-ideas { min-height: 0 !important; height: auto !important; margin: 4px -6px 8px !important; }
body.kunde #modalCard.wizc .wiz-where { margin: 0 0 8px; padding: 10px 12px; }
body.kunde #modalCard.wizc .wiz-where .ww-t small { display: none; }
body.kunde #modalCard.wizc .m-foot.wiz-foot { background: color-mix(in srgb, #ee6a3c 14%, #111a2f) !important; }
#modalCard.wizc #pinForm { padding-bottom: 12px; }

/* Nyt sted, trin 4/4: højere kort og kompakt billedfelt, så skrivefeltet kan ses over knapperne */
#modalCard.wizc.ws-2, body.glas #modalCard.wizc.ws-2 { min-height: min(600px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px) !important; }
#modalCard.wizc.ws-2 .wiz-lead { display: none; }
#modalCard.wizc.ws-2 #edDrop { min-height: 0 !important; padding: 12px !important; }
#modalCard.wizc.ws-2 #edCam { min-height: 44px !important; }
#modalCard.wizc.ws-2 #pinForm { padding-bottom: 24px; }

/* "Stedet er gemt" og "Del, når I kører videre": orange kort, farvede knapper og mere luft */
#modalCard:has(.new-ok) { --wc: #ee6a3c; --wk: #ee6a3c; }
body.glas #modalCard:has(.new-ok) { border-color: color-mix(in srgb, #ee6a3c 55%, rgba(255,255,255,.2)) !important; }
.new-ok { padding: 30px 8px 12px; }
.new-ok h2 { margin: 14px 0 10px; }
.new-ok .hint { margin: 0 0 8px; line-height: 1.5; }
.new-ok-btns { gap: 16px !important; margin-top: 26px !important; }
body.kunde .new-ok-btns .btn { min-height: 54px; border: 0 !important; color: #fff !important; font-weight: 700; box-shadow: 0 10px 20px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3); }
body.kunde .new-ok-btns .btn[data-k="see"], body.kunde .new-ok-btns .btn[data-k="later"] { background: linear-gradient(135deg, #f58a4d, #e0553a) !important; }
body.kunde .new-ok-btns .btn[data-k="share"], body.kunde .new-ok-btns .btn[data-k="now"] { background: linear-gradient(135deg, #20b69d, #12846f) !important; }
body.kunde .new-ok-btns .btn[data-k="more"] { background: linear-gradient(135deg, #4a9fe0, #2a6fc0) !important; }

/* Genvej til Del i Invitér rejsemakker */
.bd-share { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 14px 10px 10px; border: 1.5px solid color-mix(in srgb, #e0409f 60%, transparent); border-radius: 16px; background: color-mix(in srgb, #e0409f 22%, transparent); color: #fff; font: 700 15.5px var(--sans, Inter), sans-serif; text-align: left; cursor: pointer; }
.bd-share svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: linear-gradient(160deg, #e85aa8, #b8307f); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bd-share:active { transform: scale(.98); }

/* Ægte farver: kortene bruger vinduets egen farve, ikke en afdæmpet blanding med marineblå */
body.glas .modal-card { background: linear-gradient(155deg, color-mix(in srgb, var(--wc, #5a6a90) 84%, #000) 0%, color-mix(in srgb, var(--wc, #5a6a90) 64%, #000) 100%) !important; }
body.glas .modal-card.wcol .mrow, body.glas .modal-card.wcol .ex-intro, body.glas .modal-card.wcol .life-tile { background: color-mix(in srgb, var(--wc) 55%, #000) !important; border-color: color-mix(in srgb, var(--wc) 90%, #fff) !important; }
body.glas .fab-menu { background: linear-gradient(155deg, color-mix(in srgb, #ee6a3c 86%, #000) 0%, color-mix(in srgb, #ee6a3c 66%, #000) 100%) !important; }
body.kunde .fab-menu button { background: linear-gradient(135deg, color-mix(in srgb, var(--k) 80%, #000), color-mix(in srgb, var(--k) 58%, #000)); border-color: color-mix(in srgb, var(--k) 100%, #fff 15%); }
body.kunde .fab-menu button:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--k) 90%, #000), color-mix(in srgb, var(--k) 68%, #000)); }
body.kunde .fab-menu button svg { background: color-mix(in srgb, var(--k) 100%, #fff 12%); }

/* Tekstkontrast på de farvede kort: lys tekst på den ægte farve, knapper der står tydeligt frem */
body.glas .modal-card { --muted: rgba(255, 255, 255, .86); }
body.glas .modal-card .eyebrow, body.glas .modal-card .guest-eyebrow { color: #fff3dc !important; opacity: .95; letter-spacing: .14em; }
body.glas .modal-card .hint, body.glas .modal-card .wiz-lead, body.glas .modal-card small, body.glas .modal-card .fld > span { color: rgba(255, 255, 255, .88) !important; }
body.glas .modal-card.wcol .m-foot, body.glas #modalCard.wizc .m-foot.wiz-foot { background: color-mix(in srgb, var(--wc, #5a6a90) 50%, #000) !important; border-top: 1px solid rgba(255, 255, 255, .18) !important; }
body.glas #modalCard.wizc .wiz-ideas small { color: rgba(255, 255, 255, .9) !important; }
body.glas #modalCard.wizc .wiz-where { border-color: rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .22); }
body.glas #modalCard.wizc .wiz-where button { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .18); }
body.kunde #modalCard.wizc .wiz-foot .btn-primary { background: linear-gradient(135deg, #c2410c, #8f2d06) !important; border: 2.5px solid #fff !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(0,0,0,.6) !important; }
body.glas .modal-card .wiz-dots i { background: rgba(255, 255, 255, .4); }
body.glas .modal-card .wiz-dots i.on { background: #fff; }

/* Kort i kort: felter, knapper og felter til billeder har mørk, gennemsigtig bund og hvid tekst, så de står tydeligt på kortets farve */
body.glas .modal-card input:not([type="checkbox"]):not([type="radio"]), body.glas .modal-card select, body.glas .modal-card textarea { background: rgba(0, 0, 0, .3) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5) !important; }
body.glas .modal-card input::placeholder, body.glas .modal-card textarea::placeholder { color: rgba(255, 255, 255, .72) !important; opacity: 1; }
body.glas .modal-card .fld > span, body.glas .modal-card .fld > span *, body.glas .modal-card .fld-note, body.glas .modal-card .req { color: #fff !important; opacity: .95; }
body.glas #modalCard.wizc #edDrop { background: rgba(0, 0, 0, .26) !important; border-color: rgba(255, 255, 255, .65) !important; color: #fff !important; }
body.glas #modalCard.wizc #edDrop *, body.glas #modalCard.wizc #edCam, body.glas #modalCard.wizc #edCam * { color: #fff !important; }
body.glas #modalCard.wizc #edCam { background: rgba(0, 0, 0, .3) !important; border: 1.5px solid rgba(255, 255, 255, .5) !important; }
body.glas .modal-card .btn:not(.btn-primary) { background: rgba(0, 0, 0, .3) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5) !important; }
body.glas .modal-card .chip, body.glas .modal-card .pick-row button { background: rgba(0, 0, 0, .28); color: #fff; border-color: rgba(255, 255, 255, .45); }
body.glas .modal-card .chip.on, body.glas .modal-card .pick-row button.on { background: #fff; color: #7a2a05; border-color: #fff; }

/* Skarpt i stedet for tåget: ingen sløring bag kort og ingen halvgennemsigtige flader */
body.glas .modal-card, body.glas #startMenu, body.glas .modal-card *, body.glas .fab-menu, body.glas .m-foot, body.glas .m-backbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.wiz-blur #map { filter: none !important; }
body.glas .modal-card.wcol .mrow, body.glas .modal-card.wcol .ex-intro, body.glas .modal-card.wcol .life-tile, body.glas .modal-card .mrow { background: color-mix(in srgb, var(--wc, #5a6a90) 45%, #000) !important; border: 1.5px solid color-mix(in srgb, var(--wc, #5a6a90) 70%, #fff) !important; box-shadow: none !important; }
body.glas .modal-card::before, body.glas .modal-card::after { display: none !important; }
#modal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(6, 10, 20, .6) !important; }

/* Flere felter i kort på farve: rejsevælger, "påkrævet" og de små tekster */
body.glas .modal-card .trip-btn, body.glas .modal-card .tpk-list button, body.glas .modal-card .tpk-list .chip { background: rgba(0, 0, 0, .3) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5) !important; }
body.glas .modal-card .trip-btn *, body.glas .modal-card .tpk-list * { color: #fff !important; }
body.glas .modal-card em.req { color: #ffe9a8 !important; font-weight: 700; }
body.glas #modalCard.wizc input[name="title"] { background: rgba(0, 0, 0, .34) !important; border: 2px solid #fff !important; color: #fff !important; box-shadow: none !important; }
body.glas #modalCard.wizc textarea[name="note"] { background: rgba(0, 0, 0, .3) !important; }
body.glas #modalCard.wizc textarea::placeholder, body.glas #modalCard.wizc input::placeholder { color: rgba(255, 255, 255, .78) !important; }

/* Ingen gul glød omkring knapperne i kortene: en rolig, mørk skygge */
body.glas .modal-card .btn, body.glas .modal-card .btn-primary, body.kunde .new-ok-btns .btn { box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .55) !important; }
.chip.wx { font-weight: 700; }

/* Camperlog og bedømmelse: tydelige rækker og felter på kortets farve */
body.glas .modal-card .tag-row, body.glas .modal-card .yn-big, body.glas .modal-card .name-ideas button { background: rgba(0, 0, 0, .3) !important; border: 1.5px solid rgba(255, 255, 255, .5) !important; color: #fff !important; box-shadow: none !important; }
body.glas .modal-card .tag-row.on { background: color-mix(in srgb, #1fb870 55%, #000) !important; border-color: #fff !important; }
body.glas .modal-card .tag-row.bad.on { background: color-mix(in srgb, #e0453a 60%, #000) !important; }
body.glas .modal-card .tag-row * { color: #fff !important; }
body.glas .modal-card .tg-check { border-color: rgba(255, 255, 255, .8) !important; }
body.glas .modal-card .star-sl, body.glas .modal-card .star-big { filter: none; }
body.glas .modal-card .pg-dots i { background: rgba(255, 255, 255, .4); }
body.glas .modal-card .pg-dots i.on { background: #fff; }
body.glas .modal-card .menu-sub, body.glas .modal-card .yn-skip { color: rgba(255, 255, 255, .9) !important; }

/* Når tastaturet er oppe, står kortet øverst og følger den synlige højde, så skrivefeltet ikke ligger bag tastaturet */
body.kb-open #modal { align-items: flex-start !important; padding-top: calc(var(--vvt, 0px) + var(--safe-t, 0px) + 8px) !important; }
body.kb-open #modalCard { max-height: calc(var(--vvh, 100dvh) - var(--safe-t, 0px) - 20px) !important; }
body.kb-open #modalCard:has(.fam-chat) { height: calc(var(--vvh, 100dvh) - var(--safe-t, 0px) - 20px) !important; }

/* Camperlog: runde pile nederst (tilbage og næste), ligesom i Nyt sted */
.modal-card:has(.cw-nav) .m-backbar { display: none !important; }
.cw-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; flex: none; }
.cw-nav .pg-dots { margin: 0; padding: 0; }
.cw-b { flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .3); cursor: pointer; padding: 0; }
.cw-b svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cw-b.cw-n { background: linear-gradient(135deg, #ffd15a, #f2a81e); border-color: #fff; }
.cw-b.cw-n svg { stroke: #3a2a00; }
.cw-b:active { transform: scale(.94); }
body.glas .modal-card input[type="range"] { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Ingen "Gemt"-piller */
.saved-in, .saved-pill, .rate-ok { display: none !important; }

/* Ja/Nej i Camperlog: to pæne knapper i hver sin farve, uden ramme om dem begge */
body.glas .modal-card .yn-big { background: none !important; border: 0 !important; box-shadow: none !important; gap: 14px; }
body.glas .modal-card .yn-big button { border-radius: 22px; border: 2px solid rgba(255, 255, 255, .55) !important; color: #fff !important; font-weight: 700; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .6) !important; }
body.glas .modal-card .yn-big button[data-yn="1"] { background: linear-gradient(160deg, #2fc67a, #148a52) !important; }
body.glas .modal-card .yn-big button[data-yn="0"] { background: linear-gradient(160deg, #ee6258, #b92f26) !important; }
body.glas .modal-card .yn-big button.on { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 8px 16px -10px rgba(0, 0, 0, .6) !important; }

/* Sidste side i Camperlog: pilen bliver til en tydelig Færdig-knap */
.cw-n .cw-chk, .cw-n .cw-t { display: none; }
.cw-last .cw-n { width: auto; min-width: 140px; padding: 0 24px; border-radius: 999px; gap: 8px; display: flex; align-items: center; justify-content: center; }
.cw-last .cw-n .cw-arr { display: none; }
.cw-last .cw-n .cw-chk { display: block; }
.cw-last .cw-n .cw-t { display: inline; color: #3a2a00; font: 800 17px var(--sans, Inter), sans-serif; }

/* Tilbage-swipe: kortet glider ud til højre, og det forrige kort toner blødt ind på stedet (ikke fra siden), så det føles som ét flydende træk */
@keyframes slideBack { from { transform: translateX(-6%) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card.slide-back { animation: slideBack .3s cubic-bezier(.2,.8,.2,1) both; }

/* Swipe-prikkerne ligger i en lille mørk pille, og siderne har luft nederst, så prikkerne ikke ligger oven i billederne */
.sw-dots { left: 50% !important; right: auto !important; transform: translateX(-50%); padding: 6px 11px; border-radius: 999px; background: rgba(8, 16, 30, .78); }
.sw-dots i { background: rgba(255, 255, 255, .4) !important; }
.sw-dots i.on { background: #fff !important; }
.sw-page { padding-bottom: 64px; }

/* Stedets forside: knapperne ligger tydeligt oven på billedet, uden slør eller zoom bagved */
.sheet-hero img { animation: none !important; filter: none !important; }
.sheet-hero::after { background: linear-gradient(180deg, transparent 0, transparent 55%, rgba(17, 25, 43, .8)) !important; }
.sheet-hero .sheet-edit, .sheet-hero .sheet-close { z-index: 6 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sheet-hero .sheet-close { background: #0e1626 !important; }

/* Stedets overskrift på billedet: mørk bund og hvid tekst med skygge, så den er let at læse */
.sheet-hero::after { background: linear-gradient(180deg, rgba(8, 14, 26, .35) 0, transparent 26%, rgba(8, 14, 26, .55) 52%, rgba(8, 14, 26, .94) 100%) !important; }
.sheet-title-wrap .eyebrow { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .7); font-weight: 700; }
.sheet-title-wrap .sheet-title { text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }

/* Billeder på stedets kort: to ens knapper i hver sin farve */
.ph-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
.ph-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 20px; color: #fff; font: 700 16px var(--sans, Inter), sans-serif; cursor: pointer; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .6); }
.ph-act svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-pick { background: linear-gradient(160deg, #3d9be0, #2468b8); }
.ph-cam { background: linear-gradient(160deg, #f58a4d, #d9482f); }
.ph-act:active { transform: scale(.97); }

/* Rød prik på fanen Dit sted, når en hilsen venter på svar */
.sw-tabs button { position: relative; }
.tab-dot { position: absolute; top: 6px; right: 10px; width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #1a2238; }

/* Billeder fra Wikipedia: et lille kort med + og en kontakt, så forslagene ikke fylder mere end jeres egne billeder */
.wp-card { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; padding: 8px 10px 8px 8px; border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.wp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; padding: 2px; font: inherit; }
.wp-main:disabled { opacity: .6; cursor: default; }
.wp-plus { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(160deg, #9a6bd8, #6a3fb0); color: #fff; font: 700 26px/1 var(--sans, Inter), sans-serif; }
.wp-main b { display: block; font-size: 15.5px; }
.wp-main small { display: block; opacity: .75; font-size: 13px; }
.wp-sw { flex: none; width: 52px; height: 30px; position: relative; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); cursor: pointer; padding: 0; transition: background .2s; }
.wp-sw .rt-sw { position: absolute; inset: 0; }
.wp-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.wp-sw.on { background: #2fb86f; }
.wp-sw.on::after { transform: translateX(22px); }
.wp-card.off .wp-plus { background: rgba(255, 255, 255, .15); }

/* Mindre knapper til billeder, og forsidevalget ligger under billederne, så intet hopper, når man lægger et billede ind */
.ph-actions { gap: 10px; margin: 2px 0 10px; }
.ph-act { flex-direction: row; min-height: 52px; gap: 10px; border-radius: 16px; font-size: 15px; }
.ph-act svg { width: 24px; height: 24px; }
.cover-pick { margin-top: 14px; }

/* Stjerne på hvert billede: tryk for at gøre det til forsidebillede */
.gallery figure { position: relative; }
.ph-cov { position: absolute; left: 8px; top: 8px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background: rgba(10, 16, 30, .7); display: grid; place-items: center; padding: 0; cursor: pointer; }
.ph-cov svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.ph-cov.on { background: #f2b81e; border-color: #fff; }
.ph-cov.on svg { fill: #3a2a00; stroke: #3a2a00; }

/* Billeder-fanen ryddet op: album, én række knapper (vælg, tag, slet) og et lille Wikipedia-kort. Ingen prikker, de er overflødige under fanerne */
.sw-dots { display: none !important; }
.ph-actions { grid-template-columns: 1fr 1fr auto; }
.ph-act.ph-del-t { min-height: 52px; width: 52px; padding: 0; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); }
.ph-act.ph-del-t.on { background: #c0392b; border-color: #fff; }
.wp-card { margin: 4px 0 8px; }

/* Knapperne står over albummet, og teksten brydes ikke */
.ph-act { white-space: nowrap; font-size: 14.5px; gap: 8px; padding: 0 8px; }
.ph-act svg { width: 22px; height: 22px; flex: none; }
.ph-actions { margin: 0 0 14px; }
.ph-actions { grid-template-columns: 1fr auto; }

/* Swipe-prikkerne er tilbage: de står under siden i en lille linje (ikke oven i indholdet) */
.sw-dots { display: flex !important; position: static !important; transform: none !important; left: auto !important; right: auto !important; bottom: auto !important; justify-content: center; gap: 8px; padding: 8px 0 10px; margin: 0 auto; background: none !important; flex: none; }
.sw-dots i { width: 8px; height: 8px; background: rgba(255, 255, 255, .35) !important; }
.sw-dots i.on { background: #fff !important; }
.sw-page { padding-bottom: 12px; }

/* Wikipedia-forslag: lille galleri med små felter, man vælger imellem, og ét tryk til at lægge dem i albummet */
.wp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 8px; }
.wp-head h4 { margin: 0; font-size: 15px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 232px; overflow-y: auto; border-radius: 14px; }
.wp-t { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2.5px solid transparent; background: #0e1626; }
.wp-t img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.wp-t.on { border-color: #2fb86f; }
.wp-ck { position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .4); display: grid; place-items: center; }
.wp-ck svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.wp-t.on .wp-ck { background: #2fb86f; }
.wp-t.on .wp-ck svg { opacity: 1; }
.wp-z { position: absolute; right: 5px; bottom: 5px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 0; cursor: pointer; }
.wp-z svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.wp-add { width: 100%; margin-top: 10px; min-height: 50px; border-radius: 16px; border: 0 !important; background: linear-gradient(160deg, #3d9be0, #2468b8) !important; color: #fff !important; font-weight: 700; font-size: 16px; }
.wp-add:disabled { opacity: .45; }
.wp-hide { display: block; margin: 8px auto 0; }

/* Billedvisning på telefon: billedet fylder, og knapperne (forside, slet) og billedteksten står nederst ved tommelfingeren */
.lb-top { background: linear-gradient(rgba(0, 0, 0, .55), transparent); z-index: 4; }
.lb-stage { top: 0 !important; bottom: 0 !important; }
.lb-stage img { max-height: 100dvh !important; max-width: 100vw !important; border-radius: 0; }
.lb-cap { height: auto !important; flex-direction: column; align-items: stretch; gap: 10px; padding: 26px 16px calc(14px + var(--safe-b, 0px)) !important; background: linear-gradient(transparent, rgba(0, 0, 0, .78) 40%); z-index: 4; }
.lb-acts { display: flex; gap: 10px; }
.lb-cov { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .55) !important; background: rgba(0, 0, 0, .45) !important; color: #fff !important; font-weight: 700; }
.lb-cov svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.lb-cov.on { background: #f2b81e !important; color: #3a2a00 !important; border-color: #fff !important; }
.lb-cov.on svg { fill: #3a2a00; stroke: #3a2a00; }
.lb-acts .lb-del { min-height: 46px; border-radius: 14px; border: 2px solid #fff !important; padding: 0 18px; display: flex; align-items: center; gap: 6px; }
.lb-cap input { width: 100% !important; }

/* Forside-ikon ved Ret på stedets billede, og vælgeren til forsidebillede */
.sheet-hero-acts { position: absolute; top: 14px; right: 64px; z-index: 6; display: flex; align-items: center; gap: 8px; }
body.kunde .sheet-hero-acts { top: calc(12px + var(--safe-t)); }
.sheet-hero-acts .sheet-edit { position: static !important; }
.sheet-cov { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #0e1626; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 18px -6px rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 0; cursor: pointer; }
.sheet-cov svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-h { margin: 8px 0; font-size: 14px; opacity: .85; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cp-t { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; border: 3px solid transparent; padding: 0; background: #0e1626; cursor: pointer; }
.cp-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-t .wp-ck { left: 6px; top: 6px; }
.cp-t.on { border-color: #2fb86f; }
.cp-t.on .wp-ck { background: #2fb86f; }
.cp-t.on .wp-ck svg { opacity: 1; }
.lb-usecover { white-space: nowrap; min-height: 46px; padding: 0 20px; border-radius: 14px; font-weight: 700; }
.wp-grid.wp-big { max-height: 52vh; }

/* Album: valgfri størrelse (2, 3 eller 4 i bredden), kamera/Wikipedia-mærke på hvert billede, og forsideordet væk (stjernen viser det) */
.gallery.cols-2 { columns: 2; } .gallery.cols-3 { columns: 3; column-gap: 6px; } .gallery.cols-4 { columns: 4; column-gap: 5px; }
.gallery.cols-3 figure, .gallery.cols-4 figure { margin-bottom: 6px; border-radius: 9px; }
.gallery figure.cover::before { display: none !important; }
.ph-src { position: absolute; left: 6px; bottom: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 16, 30, .65); display: grid; place-items: center; pointer-events: none; }
.ph-src svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-src.wk { background: rgba(138, 79, 232, .85); }
.gallery.cols-3 .ph-cov, .gallery.cols-4 .ph-cov { width: 30px; height: 30px; left: 5px; top: 5px; }
.gallery.cols-3 .ph-cov svg, .gallery.cols-4 .ph-cov svg { width: 16px; height: 16px; }
.gallery.cols-4 .ph-src, .gallery.cols-3 .ph-src { width: 22px; height: 22px; left: 5px; bottom: 5px; }
.gallery.cols-4 .ph-src svg, .gallery.cols-3 .ph-src svg { width: 13px; height: 13px; }
.ph-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.ph-headrow h4 { margin: 0; }
.ph-size { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.ph-size button { width: 36px; height: 32px; border: 0; border-radius: 9px; background: none; display: grid; place-items: center; padding: 0; cursor: pointer; }
.ph-size svg { width: 20px; height: 20px; fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.6; }
.ph-size button.on { background: rgba(255, 255, 255, .2); }
.ph-size button.on svg { stroke: #fff; }
/* Prikkerne står nederst i bundlinjen midt for Tilbage-knappen */
.sheet-back { position: relative; }
.sheet-back .sw-dots { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; padding: 0 !important; margin: 0 !important; pointer-events: none; }

/* Stedets forside: kun Luk øverst. Billedikonet til forsidevalg nede i hjørnet, Ret ved datoen, og et højere billede */
.sheet-hero-acts { top: auto !important; right: 14px !important; bottom: 14px; }
.sheet-hero .credit-tag { right: 64px !important; bottom: 18px !important; top: auto !important; }
.meta { align-items: center; }
.meta .sheet-edit-meta { position: static !important; margin-left: auto; height: 38px; padding: 0 14px 0 11px; border-radius: 19px; background: var(--brand-ink, #0e1626); color: #fff; box-shadow: 0 0 0 2px #d9a441; display: inline-flex; align-items: center; gap: 6px; border: 0; font-weight: 700; cursor: pointer; }
.meta .sheet-edit-meta svg { width: 17px; height: 17px; }
@media (max-width: 760px) { body.kunde .sheet-hero { height: 34vh; height: 34dvh; min-height: 210px; max-height: 320px; } }

/* Ingen stjerner på billederne i albummet: forsidebilledet vælges med billedikonet øverst på stedets billede */
.ph-cov { display: none !important; }

/* Ret er kun en lille rund pen ved datoen, så der er plads til rejse-pillen på samme linje */
.meta .sheet-edit-meta { width: 38px; padding: 0 !important; justify-content: center; }
.meta .sheet-edit-meta span { display: none; }
.meta { flex-wrap: wrap; row-gap: 8px; }
.ph-actions { grid-template-columns: 1fr !important; }
.ph-act .ph-chev { width: 18px; height: 18px; margin-left: 4px; opacity: .85; }

/* Billedvisning: ingen sløret eller mørk kant øverst, kun tallet og Luk-knappen */
.lb-top, .lightbox .lb-top { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.lightbox, .lightbox * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lb-count { text-shadow: 0 1px 4px rgba(0, 0, 0, .9); opacity: .9; }

/* Stedets billede: ingen mørk eller sløret kant øverst, knapperne ligger frit oven på billedet */
.sheet-hero::after { background: linear-gradient(180deg, transparent 0, transparent 50%, rgba(8, 14, 26, .55) 72%, rgba(8, 14, 26, .94) 100%) !important; }
.sheet-hero .sheet-close, .sheet-hero .sheet-hero-acts, .sheet-hero .credit-tag { z-index: 8 !important; }
.sheet, .sheet *, .sheet-hero { -webkit-backdrop-filter: none; }
.sheet-close { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Spørgsmål (fx Slet billedet?) ligger oven på billedvisningen, ikke bagved */
body:has(.lightbox.open) #modal { z-index: 1900 !important; }

/* Billeder-menuerne: ens rækker i hver sin farve, med farvet ikon */
body.glas .modal-card .mrow[data-pm], body.glas .modal-card .mrow[data-ap] { min-height: 84px; background: linear-gradient(135deg, color-mix(in srgb, var(--k) 78%, #000), color-mix(in srgb, var(--k) 52%, #000)) !important; border: 2px solid color-mix(in srgb, var(--k) 70%, #fff) !important; align-items: center; }
body.glas .modal-card .mrow[data-pm] .mi, body.glas .modal-card .mrow[data-ap] .mi { background: color-mix(in srgb, var(--k) 100%, #fff 14%) !important; color: #fff !important; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
body.glas .modal-card .mrow[data-pm] .mi svg, body.glas .modal-card .mrow[data-ap] .mi svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.glas .modal-card .mrow[data-pm] small, body.glas .modal-card .mrow[data-ap] small { color: rgba(255, 255, 255, .9) !important; }

/* Billedikon, Ret og Luk: tre ens runde knapper på én linje øverst på stedets billede */
.sheet-hero-acts { top: calc(12px + var(--safe-t, 0px)) !important; bottom: auto !important; right: 64px !important; gap: 10px !important; }
.sheet-hero-acts .sheet-cov, .sheet-hero-acts .sheet-edit, .sheet-hero .sheet-close { width: 42px !important; height: 42px !important; border-radius: 50% !important; padding: 0 !important; background: #0e1626 !important; border: 0 !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 18px -6px rgba(0, 0, 0, .6) !important; display: grid !important; place-items: center; }
.sheet-hero-acts .sheet-edit span { display: none !important; }
.sheet-hero-acts .sheet-edit { position: static !important; }
.sheet-hero-acts .sheet-edit svg, .sheet-hero-acts .sheet-cov svg { width: 20px !important; height: 20px !important; }

/* De tre runde knapper står i en lodret række i højre side af stedets billede: Luk, Ret, Billeder */
.sheet-hero-acts { top: calc(64px + var(--safe-t, 0px)) !important; right: 14px !important; flex-direction: column-reverse !important; gap: 10px !important; }
.sheet-hero .credit-tag { right: 70px !important; }

/* Mit abonnement i Indstillinger: luft til den blå top og mørkere tekst, så det kan læses på guldet */
.set-sheet .set-plan { margin-top: 16px; color: #140e02; }
.set-sheet .set-plan small { color: #2b1f05; }
.set-sheet .set-plan em { color: #1d1606; font-weight: 500; }
.set-sheet .set-plan .sp-bar { background: rgba(29, 22, 6, .28); }
/* Knapperne øverst på kortet flyttes lidt ned, så de ikke rører den uskarpe top */
@media (max-width: 760px) {
  body.kunde #setBtn, body.kunde #menuBtn.hub-btn { top: calc(var(--m-gap) + var(--safe-t) + 16px); }
}

/* Menu-kortet er mindre gennemsigtigt: kortet bagved må kun ane */
body.glas #startMenu, body #startMenu { background: linear-gradient(160deg, rgba(150,70,20,.30) 0%, rgba(150,30,100,.30) 34%, rgba(50,56,160,.36) 68%, rgba(10,110,140,.32) 100%), rgba(14, 20, 38, .97) !important; }

/* Tilpas i Menu: guldpille med hvid ring, som de runde knapper */
#startMenu .sm-ed { background: linear-gradient(145deg, #f3cf7a, #d9a441); color: #2a1d04; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 16px -6px rgba(0,0,0,.55); padding: 0 16px 0 12px; }
#startMenu .sm-ed svg { stroke-width: 2.2; }
#startMenu .sm-ed.on { background: linear-gradient(145deg, #5cd08f, #2fa66a); color: #fff; }
#startMenu .sm-x { box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 16px -6px rgba(0,0,0,.55); }

/* Mine beskeder: Ny besked, slet samtale og valg af modtager og sted */
.chat-item { display: flex; align-items: center; gap: 8px; }
.chat-item .chat-row { flex: 1; min-width: 0; }
.chat-del { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(229, 72, 61, .9); color: #fff; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.chat-del svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-new { display: block; width: 100%; margin: 0 0 12px; padding: 14px 16px; border: 0; border-radius: 999px; background: #1d1606; color: #f6d98b; font: 700 16px var(--sans); cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.chat-new:disabled { opacity: .45; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.nc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: inherit; font: 600 15px var(--sans); cursor: pointer; }
.nc-chip .fam-av { width: 28px; height: 28px; font-size: 14px; }
.nc-chip.on { background: #f3cf7a; color: #2a1d04; box-shadow: 0 0 0 2px #fff; }
.nc-go { margin-top: 6px; }

/* Tilpas i Menu: kun det runde øje (guld, hvid ring) med luft ud til Luk. "Færdig" er stadig en pille med tekst */
#startMenu .sm-ed:not(.on) { width: 44px; padding: 0; justify-content: center; margin-right: 14px; }
#startMenu .sm-ed:not(.on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tilpas-øjet står for sig selv til højre på fanelinjen, efter Mere */
#startMenu .sm-tabs .sm-ed { margin: 0 0 0 auto; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; border-bottom: 0; color: #2a1d04; }
#startMenu .sm-tabs .sm-ed.on { width: auto; padding: 0 14px 0 10px; border-radius: 19px; color: #fff; }
#startMenu .sm-tabs .sm-ed svg { width: 20px; height: 20px; }
#startMenu .sm-tabs .sm-ed { background: linear-gradient(145deg, #f3cf7a, #d9a441) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 4px 12px -4px rgba(0,0,0,.55); }
#startMenu .sm-tabs .sm-ed.on { background: linear-gradient(145deg, #5cd08f, #2fa66a) !important; }

/* Tilpas er en fane som de andre efter Mere (ingen ikon); i redigering hedder den Færdig og lyser grønt */
#startMenu .sm-tabs .sm-ed, #startMenu .sm-tabs .sm-ed:not(.on) { width: auto; height: auto; min-height: 32px; margin: 0 0 0 auto; padding: 0 2px; border-radius: 0; background: none !important; box-shadow: none; color: #8e9bb3; border-bottom: 3px solid transparent; font: 700 18px var(--sans); }
#startMenu .sm-tabs .sm-ed span { position: static; width: auto; height: auto; clip: auto; }
#startMenu .sm-tabs .sm-ed.on { background: none !important; color: #7fe0a8; border-bottom-color: #5cd08f; padding: 0 2px; border-radius: 0; }

/* Gæste-demo (?gaest=1): plusset skriver en besked, og Menu har kun det, en gæst må */
body.gdemo .fab-wrap { display: flex !important; }
body.gdemo .fab { background: #3d8fd6 !important; }
body.gdemo .fab .fab-plus { display: block !important; }
body.gdemo .fab .fab-lock { display: none !important; }
body.gdemo #fabMenu { display: none !important; }
body.gdemo :is(#menuBtn, #setBtn, #hubBtn) { display: none !important; }
.g-banner { position: fixed; left: 50%; bottom: calc(10px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 940; display: grid; gap: 1px; padding: 8px 16px; border: 0; border-radius: 18px; background: rgba(17, 25, 43, .92); color: #fff; font: 600 13px var(--sans); text-align: center; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 8px 20px -8px rgba(0,0,0,.6); cursor: pointer; }
.g-banner span { color: #f6d98b; font-size: 12px; }
.g-try { display: grid; gap: 2px; width: 100%; margin-top: 14px; padding: 14px 16px; border: 2px dashed rgba(246, 217, 139, .6); border-radius: 18px; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.g-try small { opacity: .8; font-size: 13.5px; }
.gq-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.gq-quick button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: inherit; font: 600 14px var(--sans); cursor: pointer; }
.gq-in { width: 100%; box-sizing: border-box; border-radius: 16px; padding: 12px 14px; font: 16px var(--sans); }

/* Billeder på stedet: ét stort billede ad gangen findes nu (til dem, der ser dårligt), og Billeder-knappen fylder mindre */
.gallery.cols-1 { columns: 1; }
.gallery.cols-1 figure { margin-bottom: 12px; border-radius: 14px; }
.ph-actions { display: flex; justify-content: flex-start; gap: 10px; margin: 2px 0 10px; }
.ph-act.ph-pick { min-height: 42px; padding: 0 16px; border-radius: 999px; gap: 8px; font-size: 14.5px; }
.ph-act.ph-pick svg { width: 20px; height: 20px; }
.ph-act.ph-del-t { min-height: 42px; width: 42px; }
body.kunde.gdemo :is(#menuBtn, #setBtn, #hubBtn, .bell-btn, #brand .demo-tag), body.kunde.gdemo .demo-badge { display: none !important; }

/* Gæsten (delt link) ser hverken velkomst, rundtur, installation, abonnement eller betaling */
html.gdemo-html :is(#smag, #smagTour, #smagInst, #smagUpd, #smagName, #smagShare, .pay-bar, .upd-pill, .install-hint, .set-plan, [data-o="plan"]) { display: none !important; }
.g-box { display: grid; gap: 12px; padding-top: 6px; }
.g-box .fam-chat { max-height: 38vh; overflow-y: auto; }

/* Bunden på stedkortet (Tilbage og prikker) fylder mindre */
.sheet-back { height: calc(52px + var(--safe-b, 0px)) !important; padding-top: 6px !important; padding-bottom: calc(var(--safe-b, 0px) + 2px) !important; }
body.kunde .sheet-back .pn-back2, .sheet-back .pn-back2 { height: 38px !important; min-height: 38px !important; padding: 0 16px 0 12px !important; font-size: 14.5px !important; box-shadow: none; }
.sheet-back .sw-dots i { width: 6px !important; height: 6px !important; }

/* Billeder-knappen står præcis som den grønne fane: samme venstre kant, bredde, højde og hjørner */
.ph-actions { margin-left: 4px; }
.ph-act.ph-pick { width: calc((100% - 16px) / 3); height: 37px !important; min-height: 37px !important; padding: 0 6px !important; border-radius: 10px !important; gap: 6px; justify-content: center; font: 700 14.5px var(--sans, Inter), sans-serif !important; box-shadow: none; border-width: 0; }
.ph-act.ph-pick > svg:first-child { display: none; }
.ph-act.ph-pick .ph-chev { width: 16px; height: 16px; }
.ph-act.ph-del-t { height: 37px !important; min-height: 37px !important; width: 37px; border-radius: 10px; }
.sw-note-btn { width: auto; display: inline-block; margin-top: 4px; padding: 11px 20px; font-size: 15px; }

/* Ret stedet som guide: noten får al pladsen, og tastaturet dækker den aldrig */
#pinForm.wiz textarea[name="note"] { min-height: 32vh; font-size: 17px; line-height: 1.45; }
#modalCard.kb-open { max-height: calc(var(--vvh, 100dvh) - 12px) !important; }
#modalCard.kb-open .wiz-lead, #modalCard.kb-open .m-head .eyebrow { display: none; }
#modalCard.kb-open .m-head { padding-top: 12px; padding-bottom: 0; }
#modalCard.kb-open #pinForm.wiz textarea[name="note"] { min-height: 0; height: 100%; }

/* Tilbage og prikker flyder oven på stedkortet i stedet for en egen bjælke: pladsen bruges til indholdet */
#sheet .sheet-back { position: absolute !important; left: 0; right: 0; bottom: 0; height: auto !important; padding: 0 12px calc(8px + var(--safe-b, 0px)) !important; background: none !important; pointer-events: none; z-index: 5; }
#sheet .sheet-back > * { pointer-events: auto; }
#sheet .sheet-back .pn-back2 { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 20px -6px rgba(0, 0, 0, .75) !important; }
#sheet .sheet-back .sw-dots { padding: 5px 9px !important; background: rgba(8, 16, 30, .72) !important; border-radius: 999px; pointer-events: none; }
#sheet .sw-page { padding-bottom: calc(64px + var(--safe-b, 0px)); }

/* Billedstørrelse står på linje med Billeder-knappen, og overskriften Jeres billeder er væk: mere plads */
.ph-headrow h4 { display: none; }
.ph-headrow { justify-content: flex-end; margin-top: 0; }
.own-ph:has(.ph-actions) { position: relative; }
.own-ph:has(.ph-actions) .ph-headrow { position: absolute; top: 0; right: 0; margin: 0; padding: 0; }
.own-ph:has(.ph-actions) .ph-size { height: 37px; box-sizing: border-box; align-items: center; }

/* Billedet på stedet glider blødt over i kortet i stedet for en hård kant */
.sheet-hero::after { background: linear-gradient(180deg, rgba(17,25,43,.30) 0, transparent 28%, transparent 42%, color-mix(in srgb, var(--paper) 22%, transparent) 62%, color-mix(in srgb, var(--paper) 62%, transparent) 82%, var(--paper) 100%) !important; }

/* Fotoet selv toner ud nedad og "bløder" over det mørkeblå, i stedet for en mørk kant */
.sheet-hero { background: var(--paper) !important; }
.sheet-hero img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 48%, rgba(0,0,0,.55) 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 48%, rgba(0,0,0,.55) 74%, transparent 100%); }
.sheet-hero::after { background: linear-gradient(180deg, rgba(17,25,43,.30) 0, transparent 26%) !important; }
.sheet-hero :is(h1, h2, .sheet-title, .eyebrow, .sheet-flag) { text-shadow: 0 2px 14px rgba(0, 0, 0, .75); }

/* Fotoet bløder først UNDER stedets navn: titlen løftes, og billedet får en strimmel mere til at tone ud i */
.sheet-title-wrap { bottom: 42px !important; }
.sheet-hero img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, rgba(0,0,0,.55) 91%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 0, #000 80%, rgba(0,0,0,.55) 91%, transparent 100%) !important; }
@media (max-width: 760px) { body.kunde .sheet-hero { height: calc(24dvh + 24px) !important; min-height: 194px !important; max-height: 254px !important; } }
@media (min-width: 761px) { body.kunde .sheet-hero { height: calc(clamp(100px, 30vh, 260px) + 24px) !important; } }

/* Tilbage: fuldt dækkende og tydelig oven på billederne, og prikkerne står midt på samme linje */
#sheet .sheet-back .pn-back2 { background: #1f7a43 !important; color: #fff !important; border: 0 !important; height: 42px !important; min-height: 42px !important; font-size: 16px !important; box-shadow: 0 0 0 2px #fff, 0 8px 20px -6px rgba(0, 0, 0, .8) !important; }
#sheet .sheet-back .sw-dots { top: calc((100% - 8px - var(--safe-b, 0px)) / 2) !important; }

/* Billedmenuerne: mere luft under den nederste række */
.modal-card .m-body:has(> .menu-list.mrows) { padding-bottom: calc(28px + var(--safe-b, 0px)); }

/* Endnu blødere overgang: længere strimmel under navnet, jævn aftoning, og indholdet glider ind over den */
.sheet-title-wrap { bottom: 82px !important; }
.sheet-hero img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.9) 76%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.28) 93%, rgba(0,0,0,.1) 97%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.9) 76%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.28) 93%, rgba(0,0,0,.1) 97%, transparent 100%) !important; }
@media (max-width: 760px) { body.kunde .sheet-hero { height: calc(24dvh + 64px) !important; min-height: 234px !important; max-height: 294px !important; } }
@media (min-width: 761px) { body.kunde .sheet-hero { height: calc(clamp(100px, 30vh, 260px) + 64px) !important; } }
body.kunde #sheet .sheet-body { margin-top: -40px; position: relative; z-index: 1; }

/* Tilbage står på linje med de andre knapper (venstre kant og bredde som Billeder-knappen), og prikkerne har god plads */
#sheet .sheet-back { padding-left: 22px !important; padding-right: 22px !important; }
#sheet .sheet-back .pn-back2 { width: calc((100% - 52px) / 3); justify-content: center; padding: 0 8px !important; }

/* Luk-kryds længere væk fra den uskarpe top (statuslinjen) alle steder */
.lightbox .lb-top { padding-top: calc(env(safe-area-inset-top, 0px) + 24px) !important; }
body.kunde .sheet-close { top: calc(26px + var(--safe-t, 0px)) !important; }
.sheet-hero-acts { top: calc(78px + var(--safe-t, 0px)) !important; }
body.kunde .sheet-edit { top: calc(26px + var(--safe-t, 0px)); }
.book-bar { padding-top: calc(24px + var(--safe-t, 0px)) !important; }
#sheet .sheet-back .pn-back2 { width: calc((100% - 48px) / 3); }

/* Tilbage på stedet: rund knap med pil, som Luk og Ret øverst */
#sheet .sheet-back .pn-back2.pn-round { width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center; }
#sheet .sheet-back .pn-round svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Tilbage overalt: rund knap med pil (alle kan forstå den), og uden en egen bund-sektion */
body.kunde .modal-card .m-back2.m-round, .pn-back2.pn-round, .book-bar .bk-round { display: inline-flex !important; align-items: center; justify-content: center; width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; border-radius: 50% !important; flex: none; background: color-mix(in srgb, var(--wc, #2fa66a) 80%, #000) !important; color: #fff !important; border: 0 !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 20px -6px rgba(0, 0, 0, .75) !important; }
.m-back2.m-round svg, .pn-back2.pn-round svg, .bk-round svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Vinduer uden egen bund: bjælken er usynlig og fylder intet, pilen svæver nederst til venstre */
body.kunde .modal-card.has-bb .m-backbar { position: sticky !important; bottom: 0; height: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible; z-index: 6; }
body.kunde .modal-card.has-bb .m-backbar .m-back2 { position: absolute; left: 14px; bottom: calc(14px + var(--safe-b, 0px)); }
body.kunde .modal-card.has-bb:has(.m-backbar) .m-body, body.kunde .modal-card.has-bb:has(.m-backbar) .hub-in { padding-bottom: calc(78px + var(--safe-b, 0px)); }
/* Lister (Steder, Ruter, Vis rejse) */
body.dock-multi .pn-back { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; overflow: visible; }
body.dock-multi .pn-back .pn-back2 { position: absolute; left: 14px; bottom: 14px; }
/* Rejsebogen */
.book-bar .bk-round { width: 42px !important; height: 42px !important; min-height: 42px !important; }
body.kunde .modal-card.wcol .m-backbar .m-back2.m-round, body.kunde .modal-card.wcol .m-foot .m-back2.m-round, body.kunde .modal-card .m-back2.m-round { background: color-mix(in srgb, var(--wc, #2fa66a) 78%, #000) !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 8px 20px -6px rgba(0, 0, 0, .75) !important; }

/* Fotokrediteringen står over datoen og vejret, ikke oven i dem */
body.kunde .sheet-hero .credit-tag { bottom: 56px !important; top: auto !important; }

/* Tilbage-pilen: lavere ned, kraftigere farve og skygge, og ALTID luft under sidste række, så intet skjules */
body.kunde .modal-card.has-bb .m-backbar .m-back2 { left: 12px; bottom: calc(10px + var(--safe-b, 0px)); }
body.dock-multi .pn-back .pn-back2 { left: 12px; bottom: 10px; }
body.kunde .modal-card .m-back2.m-round, body.kunde .modal-card.wcol .m-backbar .m-back2.m-round, body.kunde .modal-card.wcol .m-foot .m-back2.m-round, .pn-back2.pn-round, .book-bar .bk-round { background: color-mix(in srgb, var(--wc, #2fa66a) 52%, #000) !important; box-shadow: 0 0 0 2.5px #fff, 0 12px 26px -4px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5) !important; }
.modal-card.has-bb > :has(+ .m-backbar), body.dock-multi :has(+ .pn-back) { padding-bottom: calc(86px + var(--safe-b, 0px)) !important; }
body.dock-multi .drawer-list { padding-bottom: calc(86px + var(--safe-b, 0px)); }

/* Tilpas: en guldpille med blyant lige efter Mere, stor nok til at ramme (ikke helt ude ved krydset) */
#startMenu .sm-tabs .sm-ed, #startMenu .sm-tabs .sm-ed:not(.on) { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 4px !important; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; border-bottom: 0; background: rgba(243, 207, 122, .2) !important; color: #f6d98b; font: 700 16px var(--sans); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .55); }
#startMenu .sm-tabs .sm-ed svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#startMenu .sm-tabs .sm-ed.on { background: #2fa66a !important; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85); padding: 0 16px 0 12px; border-bottom: 0; }

/* Fotokreditering som lille linje lige under titlen (flytter sig med den, kolliderer ikke); pladsen er der fra start */
.sheet-hero .credit-tag { display: none !important; }
.credit-line { display: block; margin-top: 6px; font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); visibility: hidden; }
.credit-line.on { visibility: visible; }
.sheet-title-wrap .sheet-title, .sheet-title-wrap .eyebrow, .sheet-title-wrap .credit-line { text-shadow: 0 2px 16px rgba(0, 0, 0, .9), 0 0 5px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .8); }
.credit-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Tilpas: en stor guldblyant lige efter ordet Menu (ikke en fane) */
#startMenu .sm-ttl { display: inline-flex; align-items: center; gap: 12px; }
#startMenu .sm-pen { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 0; background: linear-gradient(145deg, #f8dc8a, #dca640); color: #2a1d04; cursor: pointer; box-shadow: 0 0 0 2.5px #fff, 0 10px 22px -4px rgba(0, 0, 0, .65); }
#startMenu .sm-pen svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#startMenu .sm-pen.on { background: linear-gradient(145deg, #62d596, #2fa66a); color: #fff; }
#startMenu .sm-tabs .sm-ed { display: none !important; }

/* Steder, Ruter og År/Rejse-listerne: ingen lys tåge i hjørnet. Mørk, jævn bund med kun et svagt farveskær nederst til højre */
body.glas.dock-multi .tf-menu, body.glas.dock-multi .drawer, body.glas.dock-multi .popover.route-pop { background: linear-gradient(155deg, color-mix(in srgb, var(--pc, #2fb84e) 9%, #0f1627) 0%, #0f1627 50%, color-mix(in srgb, var(--pc, #2fb84e) 16%, #0f1627) 100%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -20px rgba(0, 0, 0, .75) !important; }
body.glas.dock-multi .drawer::before, body.glas.dock-multi .drawer::after { display: none !important; }

/* Blyanten ved Menu: bare en gul blyant, uden cirkel (stort trykområde, men ingen baggrund) */
#startMenu .sm-pen { background: none !important; box-shadow: none !important; color: #ffd24d; width: 48px; height: 48px; }
#startMenu .sm-pen svg { width: 32px; height: 32px; stroke-width: 2.4; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
#startMenu .sm-pen.on { background: none !important; color: #6be09f; }

/* ENS Tilbage-placering: en fast, gennemsigtig strimmel (64 px) nederst kun til pilen. Pilen står altid samme afstand fra bunden */
body.kunde .modal-card.has-bb .m-backbar { position: sticky !important; bottom: 0; display: flex !important; align-items: center; height: 64px !important; min-height: 64px !important; padding: 0 14px var(--safe-b, 0px) !important; margin: 0 !important; border: 0 !important; background: none !important; overflow: visible; flex: none; }
body.kunde .modal-card.has-bb .m-backbar .m-back2 { position: static !important; left: auto !important; bottom: auto !important; }
body.dock-multi .pn-back { position: sticky !important; bottom: 0; display: flex !important; align-items: center; height: 64px !important; min-height: 64px !important; padding: 0 14px !important; margin: 0 !important; border: 0 !important; background: none !important; overflow: visible; flex: none; }
body.dock-multi .pn-back .pn-back2 { position: static !important; left: auto !important; bottom: auto !important; }
body.kunde .modal-card.has-bb > :has(+ .m-backbar), body.dock-multi :has(+ .pn-back), body.dock-multi .drawer-list, body.kunde .modal-card.has-bb:has(.m-backbar) .m-body, body.kunde .modal-card.has-bb:has(.m-backbar) .hub-in { padding-bottom: 10px !important; }
body.kunde .modal-card.has-bb .m-backbar { padding: 0 14px !important; }

/* Teksten i stedlisten går aldrig ind under blyanten */
body.dock-multi .drawer .drawer-list .item:has(.it-edit), .drawer-list .item:has(.it-edit) { padding-right: 62px !important; }
.drawer-list .item:has(.it-edit) > span:not(.it-edit) { min-width: 0; overflow-wrap: anywhere; }

/* Resten af Tilbage-knapperne (rute-forslag, rejse-popup) er også runde pile */
.le-round, .tp-round { display: inline-grid !important; place-items: center; width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: #1f7a43 !important; color: #fff !important; box-shadow: 0 0 0 2px #fff, 0 8px 18px -6px rgba(0,0,0,.7) !important; }
.le-round svg, .tp-round svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* "Du retter kortet": glider ind fra venstre i hjørnet øverst, stor og gul */
.side-toast { position: fixed; z-index: 3100; top: calc(var(--safe-t, 0px) + 74px); left: 0; display: flex; align-items: center; gap: 12px; padding: 14px 24px 14px 16px; border-radius: 0 999px 999px 0; background: #ffd24d; color: #1b1405; font: 800 17px var(--sans); box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6); transform: translateX(-110%); transition: transform .45s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.side-toast.in { transform: none; }
.side-toast .st-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* Tilbage-pilen har ÉN farve overalt: hvid cirkel med mørk pil (tydelig på alle kortfarver, adskilt fra de blå og røde kryds) */
body.kunde .modal-card .m-back2.m-round, body.kunde .modal-card.wcol .m-backbar .m-back2.m-round, body.kunde .modal-card.wcol .m-foot .m-back2.m-round, .pn-back2.pn-round, #sheet .sheet-back .pn-back2.pn-round, .book-bar .bk-round, .le-round, .tp-round { background: #fff !important; color: #11192b !important; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .4) !important; }
.m-back2.m-round svg, .pn-back2.pn-round svg, .bk-round svg, .le-round svg, .tp-round svg { stroke: #11192b !important; stroke-width: 2.8; }

/* ALLE luk-knapper (cirkler med kryds) er røde overalt */
body.kunde .modal-card .m-head .icon-btn:not(.m-round), body.kunde .modal-card .hub-close, .hub-close, .icon-btn[data-m="close"]:not(.m-round), .icon-btn[data-msclose], .icon-btn[data-tfclose], .lb-top .icon-btn[data-lbx="close"], .icon-btn[data-lbx="close"], body.kunde .sheet-close, .sheet-close, #startMenu .sm-x, .pop-x, .sm-x, .tf-pophead .icon-btn { background: #d6402c !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 18px -6px rgba(0, 0, 0, .6) !important; }
.icon-btn[data-m="close"]:not(.m-round) svg, .hub-close svg, .sheet-close svg, #startMenu .sm-x svg, .icon-btn[data-msclose] svg, .icon-btn[data-tfclose] svg, .icon-btn[data-lbx="close"] svg, .tf-pophead .icon-btn svg { stroke: #fff !important; }

/* Strimlen med Tilbage-pilen er ALTID gennemsigtig, også i de farvede vinduer og de faste kort */
body.kunde .modal-card.has-bb .m-backbar, body.kunde .modal-card.wcol .m-backbar, body.kunde .modal-card.has-bb.wcol .m-backbar, body.kunde .modal-card.card-fix .m-backbar, body.kunde .modal-card.wcol.has-bb .m-foot.m-backbar, .modal-card .m-foot.m-backbar, body.dock-multi .pn-back, body.dock-multi .drawer > .pn-back { background: transparent !important; background-image: none !important; border: 0 !important; border-top: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Luft mellem det røde kryds øverst og første række nedenunder */
body.kunde .modal-card .m-head, body.kunde .modal-card .hub-head { padding-bottom: 16px !important; }
body.kunde .modal-card .m-head + .m-body, body.kunde .modal-card .m-head + form { padding-top: 6px; }

/* Gennemsigtig bund: indholdet glider ind under strimlen (som i Mit rejseliv), og pilen står stadig samme sted. Luft i enden, så intet skjules */
body.kunde .modal-card.has-bb .m-backbar, body.dock-multi .pn-back { margin-top: -64px !important; pointer-events: none; z-index: 6; }
.m-backbar .m-back2, .pn-back .pn-back2, .pn-back .yr-dots, .pn-back .yr-count { pointer-events: auto; }
body.kunde .modal-card.has-bb > :has(+ .m-backbar), body.dock-multi .drawer-list, body.kunde .modal-card.has-bb:has(.m-backbar) .m-body, body.kunde .modal-card.has-bb:has(.m-backbar) .hub-in { padding-bottom: 78px !important; }
body.dock-multi .tf-menu :has(+ .pn-back) { padding-bottom: 0 !important; }
body.dock-multi .tf-menu .tf-item:has(+ .pn-back) { margin-bottom: 76px; }
body.dock-multi .tf-menu .tf-list:has(+ .pn-back) { padding-bottom: 76px !important; }
/* Årstal som sider man swiper imellem (telefon) med prikker i bunden ved siden af pilen */
body.dock-multi .drawer-list.yr-mode { display: flex; flex-direction: column; min-height: 0; overflow: hidden !important; padding-bottom: 0 !important; }
.yr-pages { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.yr-pages::-webkit-scrollbar { display: none; }
.yr-page { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; padding: 0 2px 78px; }
.pn-back .yr-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 999px; background: rgba(8, 16, 30, .6); }
.yr-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .38); cursor: pointer; }
.yr-dots i.on { background: #fff; transform: scale(1.2); }
.pn-back .yr-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px; background: rgba(8, 16, 30, .6); color: #fff; font: 700 14px var(--sans); white-space: nowrap; }
.yr-page { padding: 0 6px 78px; scrollbar-width: none; }
.yr-page::-webkit-scrollbar { display: none; }

/* Popups følger farven på det kort, de kom fra: År- og rejse-vælgeren hører til Mine steder (grøn), ikke en anden farve */
body.glas.dock-multi .tf-menu, .tf-menu { --pc: #2fb84e; }
body.dock-multi .tf-menu .tf-item.on { background: color-mix(in srgb, var(--pc) 30%, rgba(16, 22, 40, .6)) !important; }
body.dock-multi .tf-menu .tf-bar { background: var(--pc) !important; opacity: .75; }
body.dock-multi .tf-menu .tf-item:hover { background: color-mix(in srgb, var(--pc) 16%, transparent); }

/* SYNLIG gennemsigtig bund: en blød, mørk aftoning bag pilen (som i Mit rejseliv), så man ser strimlen og intet støder ind i pilen */
body.kunde .modal-card.has-bb .m-backbar, body.kunde .modal-card.wcol .m-backbar, body.kunde .modal-card.has-bb.wcol .m-backbar, body.kunde .modal-card.card-fix .m-backbar, body.kunde .modal-card.wcol.has-bb .m-foot.m-backbar, .modal-card .m-foot.m-backbar, body.dock-multi .pn-back, body.dock-multi .drawer > .pn-back { background: linear-gradient(180deg, rgba(10, 16, 30, 0) 0%, rgba(10, 16, 30, .72) 42%, rgba(10, 16, 30, .9) 100%) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 0 0 22px 22px; }
/* Årstal øverst: man kan se, hvilket man står på */
.yr-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 10px; margin: 0; flex: none; }
.yr-tabs::-webkit-scrollbar { display: none; }
.yr-chip { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font: 700 17px var(--sans); cursor: pointer; }
.yr-chip.on { background: #ffd24d; color: #1b1405; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); }
.yr-page h3 { display: none; }

/* Popups har 10 px kant indeni: pilen trækkes ud, så den står SAMME afstand fra bunden og venstre som i vinduerne (10 / 15 px) */
body.dock-multi .popover .pn-back, body.dock-multi .tf-menu .pn-back { margin: -64px -10px -10px !important; }
body.dock-multi .popover .pn-back, body.dock-multi .tf-menu .pn-back { bottom: -10px !important; }
body.dock-multi #routePop { display: flex; flex-direction: column; }
body.dock-multi #routePop .pn-back { margin-top: auto !important; flex: none; }
/* Vinduer med egne knapper ved siden af pilen (Hvor skal I hen? m.fl.): samme afstand til bunden som de andre */
body.kunde .modal-card.has-bb .m-foot:has(.bb-wrap) { padding-bottom: 6px !important; }

/* Camperlog-tallene er knapper: de skal have kortets mørke bokse, ikke browserens hvide knapflade */
.cl-stats button { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .1) !important; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cl-stats button small { color: rgba(255, 255, 255, .78); }
.cl-stats button b { font: 600 28px/1 var(--serif); color: #fff; }

/* Guiderne (nyt sted, ret sted): samme mørke gennemsigtige bund som resten, og indholdet glider ind under den */
body.kunde .modal-card .m-foot.wiz-foot { position: sticky; bottom: 0; z-index: 6; height: 64px; margin-top: -64px !important; padding: 0 14px !important; align-items: center; border: 0 !important; border-top: 0 !important; background: linear-gradient(180deg, rgba(10, 16, 30, 0) 0%, rgba(10, 16, 30, .72) 42%, rgba(10, 16, 30, .9) 100%) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 0 0 22px 22px; box-shadow: none !important; }
body.kunde .modal-card:has(.wiz-foot) #pinForm.wiz, body.kunde .modal-card:has(.wiz-foot) .m-body { padding-bottom: 80px; }
/* Øvrige bunde med knapper (Fortryd/Gem m.fl.): ingen massiv bjælke, men samme aftoning */
body.kunde .modal-card .m-foot:not(.m-backbar):not(.wiz-foot) { background: linear-gradient(180deg, rgba(10, 16, 30, 0) 0%, rgba(10, 16, 30, .55) 40%, rgba(10, 16, 30, .8) 100%) !important; border-top: 0 !important; }
body.glas.kunde #modalCard.wizc .m-foot.wiz-foot, body.kunde #modalCard.wizc .m-foot.wiz-foot, body.glas.kunde #modalCard.wcol .m-foot.wiz-foot { background: linear-gradient(180deg, rgba(10, 16, 30, 0) 0%, rgba(10, 16, 30, .72) 42%, rgba(10, 16, 30, .9) 100%) !important; border: 0 !important; border-top: 0 !important; }

/* Med tastaturet oppe: noten fylder hele kortet (billedfelterne gemmer sig, mens man skriver), så feltet ikke skrumper */
#modalCard.kb-open #pinForm.wiz { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#modalCard.kb-open #pinForm.wiz .fld:has(textarea[name="note"]) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#modalCard.kb-open #pinForm.wiz textarea[name="note"] { flex: 1; height: auto !important; min-height: 130px; }
#modalCard.kb-open #edDrop, #modalCard.kb-open #edCam, #modalCard.kb-open .ed-thumbs { display: none !important; }

/* Notefeltet må vokse, når tastaturet er oppe (ingen loft på højden) */
#modalCard.kb-open #pinForm.wiz textarea[name="note"] { max-height: none !important; }
/* Luk i Indstillinger m.fl.: bare den røde cirkel med kryds (ingen tekst) */
.hub-close, body.kunde .modal-card .hub-close { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; border-radius: 50% !important; gap: 0 !important; justify-content: center; }
.hub-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Den mørke overskriftsbjælke i Indstillinger glider blødt ned i kortet i stedet for en hård kant */
.set-sheet .hub-head, .hub-card.set-sheet .hub-head { background: linear-gradient(180deg, var(--paper, #141b2e) 0%, var(--paper, #141b2e) 45%, rgba(20, 27, 46, 0) 100%) !important; padding-bottom: 28px !important; margin-bottom: -10px; box-shadow: none !important; }
/* Mit abonnement: læsbar mørk tekst på guldet */
.set-sheet .set-plan small, .set-sheet .set-plan > .sp-txt > small, .hub .set-plan small { color: #2b1f05 !important; opacity: 1 !important; text-shadow: none !important; }
.set-sheet .set-plan b, .set-sheet .set-plan em { color: #140e02 !important; }

/* Navn-vinduet: roligere. Kort forklaring, forhåndsvisningen øverst, felterne med god luft, Gem som den ene store knap, og bunden kun til pilen */
.name-body { display: grid; gap: 4px; }
.name-lead { margin: 0 0 6px; font-size: 14.5px !important; line-height: 1.45; color: rgba(255, 255, 255, .78); }
body.kunde .name-prev { margin: 4px 0 18px; padding: 16px 18px; border-radius: 18px; background: rgba(0, 0, 0, .22); border-left: 4px solid #ffd24d; }
body.kunde .name-prev b { font-size: 26px; color: #fff; }
body.kunde .name-prev small { color: rgba(255, 255, 255, .72); }
.name-lbl { margin: 14px 0 0; color: #fff; }
.name-in { margin-top: 8px; background: rgba(0, 0, 0, .25) !important; border-color: rgba(255, 255, 255, .22) !important; color: #fff; }
.name-ideas { margin: 12px 0 4px; }
.name-save { width: 100%; min-height: 54px; margin-top: 22px; border-radius: 999px; font-size: 17px; }
.name-keep { display: block; margin: 12px auto 0; padding: 8px 14px; background: none; border: 0; color: rgba(255, 255, 255, .78); font: 600 15px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Mens man trækker i et kort, slås glas-sløringen fra og kortet løftes til sit eget lag: kortet bagved flimrer ikke */
.modal-card.swiping, body:has(.modal-card.swiping) #modal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modal-card.swiping { will-change: transform, opacity; transform: translateZ(0); }
body:has(.modal-card.swiping) .leaflet-container { will-change: auto; }

/* Mine ruter: to sider man swiper imellem, Rejser (med km og ret en strækning) og Visning */
.rp-tabs { display: flex; gap: 8px; margin: 2px 2px 10px; flex: none; }
.rp-tabs button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font: 700 16px var(--sans); cursor: pointer; }
.rp-tabs button.on { background: #ffd24d; color: #1b1405; }
.rp-pages { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rp-pages::-webkit-scrollbar { display: none; }
.rp-page { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding: 0 2px 80px; scrollbar-width: none; }
.rp-page::-webkit-scrollbar { display: none; }
.rp-lead { margin: 0 0 4px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.rp-trip { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .08); color: inherit; font: inherit; text-align: left; cursor: pointer; border-left: 4px solid var(--tc, #888); }
.rp-trip > span:nth-of-type(1) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rp-trip b { font-size: 17px; }
.rp-trip small { font-size: 14px; color: rgba(255, 255, 255, .72); }
.rp-trip .tf-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tc, #888); }
.rp-edit { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.rp-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn-back .rp-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 9px; padding: 7px 12px; border-radius: 999px; background: rgba(8, 16, 30, .6); pointer-events: none; }
.rp-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .38); }
.rp-dots i.on { background: #fff; transform: scale(1.2); }
#routePop .route-toggle { margin-top: 0; }
/* Mine ruter fylder kun det, der skal bruges (ikke hele skærmen), men aldrig mere end skærmen */
body.dock-multi #routePop { bottom: auto !important; height: auto !important; max-height: calc(100dvh - var(--safe-t, 0px) - 150px); }
body.dock-multi #routePop .rp-pages { flex: 0 1 auto; }
body.dock-multi #routePop .rp-page { max-height: calc(100dvh - var(--safe-t, 0px) - 340px); }

/* Kun ÉN opdateringsmelding: appens egen (med det nye) vinder over velkomstsidens */

/* Ret en rute: Fortryd er rødlig, og rækkerne i listerne er lige høje */
.leg-ed [data-le="cancel"], .leg-ed .le-row .btn:not(.btn-primary) { background: rgba(214, 64, 44, .26) !important; color: #ffd6cf !important; border-color: rgba(214, 64, 44, .55) !important; }
.mrow.rw-row, .rp-trip { min-height: 84px; box-sizing: border-box; align-items: center; }
.mrow.rw-row > span:nth-of-type(2) b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-trip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-trip > span:nth-of-type(1) { min-width: 0; }

/* Rejse-pillen øverst viser også kilometerne (ét sted at kigge og trykke) */
.bp-btn.has-km { flex-wrap: wrap; row-gap: 1px; padding-bottom: 7px; border-radius: 18px; }
.bp-km { flex: 1 0 100%; padding-left: 17px; font: 500 12.5px/1.25 var(--sans); opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow.rw-row { height: 92px; }
.bp-km { white-space: normal; overflow: visible; text-overflow: clip; }

/* Kilometerkortet nederst: firkantet, mørkt og med tydelig tekst. Kortet står ikke oven i Menu-knapperne til højre */
body.kunde .trip-km { left: 10px; right: auto; bottom: calc(var(--m-bot, 84px) - 14px); max-width: calc(100vw - 118px); padding: 12px 16px 12px 12px; border-radius: 14px; background: rgba(12, 18, 32, .95) !important; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 16px 34px -10px rgba(0, 0, 0, .7); align-items: flex-start; gap: 12px; }
body.kunde .trip-km .tk-ico { width: 40px; height: 40px; border-radius: 12px; }
body.kunde .trip-km .tk-ico svg { width: 23px; height: 23px; }
body.kunde .trip-km .tk-txt { gap: 3px; }
body.kunde .trip-km b { font: 700 18px/1.2 var(--sans); color: #fff; }
body.kunde .trip-km small { display: grid; gap: 2px; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .88); }

/* Samlet rejsekort nederst på telefonen: navn, rødt kryds, "dette er rejsens rute" og kilometer i ét firkantet kort */
body.trip-card .brand-pick, body.trip-card .m-filter { display: none !important; }
body.kunde .trip-km.tk-card { display: grid; gap: 7px; align-items: stretch; pointer-events: auto; left: 10px; right: 96px; max-width: none; padding: 12px 12px 12px 14px; border-radius: 14px; border-left: 5px solid var(--c, #e0a95a); background: rgba(12, 18, 32, .96) !important; }
.tk-card .tk-top { display: flex; align-items: center; gap: 10px; }
.tk-card .tk-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.tk-card .tk-name { flex: 1; min-width: 0; font: 700 18px/1.2 var(--sans); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-card .tk-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #d6402c; color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); cursor: pointer; }
.tk-card .tk-x svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.tk-card .tk-tag { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.tk-card .tk-pill { flex: none; padding: 2px 9px; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 11.5px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.tk-card .tk-km { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14); }
.tk-card .tk-km span { font-size: 15px; color: #fff; }
.tk-card .tk-km span:first-child { font: 700 18px/1.2 var(--sans); }
body.kunde .trip-km.tk-card { width: calc(100vw - 20px - 86px); max-width: calc(100vw - 106px); right: auto; box-sizing: border-box; }
.tk-card > * { min-width: 0; }
.tk-card .tk-tag { flex-wrap: wrap; }
.tk-card .tk-name { white-space: normal; overflow: visible; text-overflow: clip; }

/* Kun den hvide opdateringsknap øverst */
.upd-pill, #updPill { display: none !important; } /* den sorte knap nederst er væk; den hvide øverst (smagUpd) bliver */
/* Rejsekortet ligger længere nede, så det ikke dækker ruten */
body.kunde .trip-km.tk-card { bottom: calc(10px + var(--safe-b, 0px)); }
body.leg-editing #tripKm { display: none !important; }

/* Kryds i kortets bokse (rute-editor m.fl.): rød cirkel som alle andre luk-knapper */
.leaflet-popup-close-button { top: 8px !important; right: 8px !important; width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50%; background: #d6402c !important; color: #fff !important; font: 400 26px/34px var(--sans) !important; text-align: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.leaflet-popup-close-button:hover { background: #b6492f !important; color: #fff !important; }
.leg-ed { padding-right: 34px; }

/* "Sejlede I et stykke?": rigtig knap med luft over, under og i siderne */
.leg-ed .le-ferry-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 16px 0 6px; padding: 14px 16px; min-height: 52px; border: 0; border-radius: 999px; background: rgba(76, 201, 190, .16); color: #8fe6dc; font: 700 15.5px/1.25 var(--sans); text-align: center; text-decoration: none; }
.leg-ed .le-hint { display: block; margin-top: 12px; }
.leg-ed { padding-bottom: 6px; }

/* Tilbage-pil øverst i alle rute-boksene */
.leg-ed .le-back { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 10px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #11192b; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6); cursor: pointer; }
.leg-ed .le-back svg { width: 21px; height: 21px; fill: none; stroke: #11192b; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.leg-ed { padding-right: 0 !important; }
.leg-ed .le-title, .leg-ed .le-info { padding-right: 34px; }
.leg-ed .le-btn, .leg-ed .le-row, .leg-ed .le-ferry-link { margin-left: 0; margin-right: 0; }

/* Mine ruter, Rejser: tryk på rækken viser ruten; Ret-knappen åbner strækningerne */
.rp-item { display: flex; align-items: stretch; gap: 8px; }
.rp-item .rp-trip { flex: 1; min-width: 0; }
.rp-trip.on { background: color-mix(in srgb, var(--tc) 28%, rgba(255, 255, 255, .06)); }
.rp-on { flex: none; padding: 3px 10px; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 12px/1.4 var(--sans); }
.rp-item .rp-edit { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 64px; min-height: 84px; padding: 0; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 13px var(--sans); cursor: pointer; }
.rp-item .rp-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-item .rp-trip b { white-space: normal; overflow: visible; text-overflow: clip; }
.rp-item .rp-trip, .rp-item .rp-edit { min-height: 84px; height: auto; }

/* Forslags-bjælken: rund Tilbage-knap (ikke oval) og "Vælg denne rute" fylder resten */
.leg-bar .le-row { align-items: center; }
.leg-bar .le-row .le-round { flex: 0 0 46px !important; width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 50% !important; background: #fff !important; }
.leg-bar .le-row .btn-primary { flex: 1 1 auto; min-height: 46px; }

/* Via-prikker: stort trykområde (40 px), selve prikken er stadig lille */
.leaflet-marker-icon > .via-dot { margin: 9px; }
.le-via { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0; }
.leg-ed .le-via .btn { min-height: 46px; padding: 0 10px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font: 700 14.5px var(--sans); line-height: 1.2; }
.leg-ed .le-via .le-reset { background: rgba(80, 150, 215, .28); color: #bfe0ff; }

/* Rejsekortet nederst vækker lidt opmærksomhed: glider ind nedefra, gløder blidt et par gange, og RUTE-mærket popper frem. Slukket ved "reducer bevægelse" */
@keyframes tkIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tkGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 16px 34px -10px rgba(0, 0, 0, .7), 0 0 0 0 color-mix(in srgb, var(--c, #ffd24d) 0%, transparent); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 16px 34px -10px rgba(0, 0, 0, .7), 0 0 22px 4px color-mix(in srgb, var(--c, #ffd24d) 55%, transparent); } }
@keyframes tkPill { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tkNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
body.kunde .trip-km.tk-card { animation: tkIn .55s cubic-bezier(.2, .9, .3, 1) both, tkGlow 2.4s ease-in-out .7s 3; }
.tk-card .tk-pill { animation: tkPill .5s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.tk-card.tk-click .tk-tag::after { content: '›'; margin-left: auto; align-self: center; font: 700 26px/1 var(--sans); color: #ffd24d; animation: tkNudge 1.4s ease-in-out 1s 4; }
@media (prefers-reduced-motion: reduce) { body.kunde .trip-km.tk-card, .tk-card .tk-pill, .tk-card.tk-click .tk-tag::after { animation: none !important; } }
body.via-picking .leaflet-container { cursor: crosshair; }
.via-bar { z-index: 1300; }

/* Blød opdatering: siden toner ud og den nye toner ind */
html.fade-out body { opacity: 0; transition: opacity .2s ease-in; }
@keyframes pgIn { from { opacity: 0; } to { opacity: 1; } }
html.fade-in body { animation: pgIn .5s ease-out both; }
@media (prefers-reduced-motion: reduce) { html.fade-out body { transition: none; } html.fade-in body { animation: none; } }

.dream-card .dr-star { flex: none; font-size: 22px; line-height: 1; }
body.dream-on #tripKm { display: none !important; }
.dream-all { width: 100%; min-height: 50px; margin: 6px 0 4px; border-radius: 999px; font-weight: 700; }

/* Min næste rejse (rødt kort): rækker og nedtælling står mørkeblå med tydelig kontrast, ikke rødt på rødt */
.modal-card .next-count { background: #0f1a30 !important; border: 0; border-left: 5px solid #ffd24d; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.modal-card .next-count b { color: #ffd24d !important; }
.modal-card .next-count span { color: #fff !important; font-weight: 700; }
.modal-card .mrow.nx-row { background: #14213b !important; border: 0 !important; border-left: 5px solid var(--k, #ffd24d) !important; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); color: #fff; }
.modal-card .mrow.nx-row b { color: #fff; }
.modal-card .mrow.nx-row small { color: rgba(255, 255, 255, .8); }
.modal-card .mrow.nx-row .nx-ic { background: color-mix(in srgb, var(--k, #ffd24d) 40%, #14213b) !important; }
.modal-card .nx-step .dream-row { background: #14213b !important; border-left: 5px solid #ffd24d; color: #fff; }
.modal-card .dream-all { background: #14213b !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
body.kunde .modal-card.wcol .mrow.nx-row, body.kunde .modal-card.wcol .mrows .mrow.nx-row { background: #14213b !important; border: 0 !important; border-left: 5px solid var(--k, #ffd24d) !important; }
body.kunde .modal-card.wcol .dream-all, body.kunde .modal-card.wcol .nx-step .dream-row { background: #14213b !important; border-color: transparent !important; }
body.kunde .modal-card.wcol .nx-step .dream-row { border-left: 5px solid #ffd24d !important; }
.tk-card .tk-back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6); cursor: pointer; }
.tk-card .tk-back svg { width: 20px; height: 20px; fill: none; stroke: #11192b; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* Mens drømmestederne vises: kun stjernerne på kortet. Steder, navne, ruter og hjem skjules (og kommer tilbage, når man slår visningen fra) */
.leaflet-pane { transition: opacity .3s; }
body.dream-on .leaflet-marker-pane .leaflet-marker-icon:not(.dream-mk), body.dream-on .leaflet-shadow-pane { opacity: 0 !important; pointer-events: none !important; }
body.dream-on .leaflet-pane:not(.leaflet-map-pane):not(.leaflet-tile-pane):not(.leaflet-tooltip-pane):not(.leaflet-marker-pane):not(.leaflet-popup-pane) { opacity: 0 !important; pointer-events: none !important; }
body.dream-on .brand-pick, body.dream-on .m-filter { display: none !important; }
.dream-card .tk-name { font-size: 17px; }
.dream-card .tk-top { gap: 8px; }
.dream-card { gap: 10px; padding-bottom: 12px; }
.dream-card .tk-backrow { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 15px var(--sans); text-align: left; cursor: pointer; }
.dream-card .tk-backrow .tk-back { box-shadow: none; }
.leaflet-tooltip.dream-tip { background: #0f1a30; color: #fff; border: 0; border-radius: 999px; padding: 6px 12px; font: 700 14px var(--sans); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6); white-space: nowrap; }
.leaflet-tooltip-top.dream-tip::before { border-top-color: #0f1a30; }

/* Forslag til Hvor skal I hen?: rigtige steder med flag og fuld adresse */
.nx-sug { display: grid; gap: 6px; margin-top: 8px; }
.nx-sg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nx-sg img, .nx-sg .nx-nf { flex: none; width: 24px; height: 17px; border-radius: 3px; object-fit: cover; }
.nx-sg span:last-child { display: grid; min-width: 0; }
.nx-sg b { font-size: 16px; }
.nx-sg small { font-size: 13px; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hjem-knap under klokken */
.bell-btn.home-btn { background: linear-gradient(135deg, #1d5a4a, #1c7a63); color: #bff3df; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(191, 243, 223, .4); }
.home-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.dream-on .home-btn { display: none; }

/* DEMO-mærket: øverst i midten af kortet i stedet for ved tandhjulet */
#setBtn .env-tag { position: fixed !important; top: calc(var(--safe-t, 0px) + 6px) !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; z-index: 906; padding: 3px 12px; font-size: 11px; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .5); }
.nx-wizgo { width: 100%; min-height: 54px; margin: 12px 0 4px; border-radius: 999px; font-size: 16.5px; }

/* Billeder (samlet): hver rejse er et mørkt kort med tre billeder på række og stedets navn på billedet. "Vælg" er en tydelig knap */
.ph-bar { opacity: 1; margin: 0 0 10px; }
.ph-bar span { font: 700 16px var(--sans); }
.ph-selbtn { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: #11192b; font: 800 15px var(--sans); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); cursor: pointer; }
.ph-selbtn.on { background: #ffd24d; }
.ph-card { margin: 0 0 14px; padding: 12px 12px 14px; border-radius: 18px; background: rgba(8, 14, 28, .55); border-left: 5px solid var(--tc, #7c8aa5); }
.ph-card .ph-trip { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ph-card .ph-trip i { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); flex: none; }
.ph-card .ph-trip b { flex: 1; min-width: 0; font: 700 17px/1.25 var(--sans); color: #fff; }
.ph-card .ph-trip small { flex: none; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; }
.ph-card .ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-card .ph-th { border-radius: 10px; overflow: hidden; }
.ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); color: #fff; font: 700 11.5px/1.2 var(--sans); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.chat-empty { display: grid; gap: 10px; padding: 4px 0; }
.chat-empty b { font: 700 19px var(--sans); color: #fff; }
.chat-empty p { margin: 0 0 4px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.chat-empty .btn { min-height: 52px; border-radius: 999px; font-size: 16px; }
.chat-empty .btn:not(.btn-primary) { background: rgba(255, 255, 255, .16); color: #fff; border: 0; }

/* Enkel menu: egne genveje (4 eller 6) med stiplede tomme pladser, og alle funktioner på side to */
#startMenu .sm-slots { grid-auto-rows: minmax(110px, 1fr); align-content: stretch; gap: 12px; padding-bottom: 8px; }
#startMenu .sm-slots.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(130px, 1fr); }
#startMenu .sm-slots.n4 .sm-chip { transform: scale(1.18); }
#startMenu .sm-slot { background: transparent !important; border: 2px dashed rgba(255, 255, 255, .42) !important; border-radius: 22px; box-shadow: none !important; color: rgba(255, 255, 255, .8); cursor: pointer; }
#startMenu .sm-slot .sm-chip.sm-plus { background: rgba(255, 255, 255, .1) !important; box-shadow: none !important; border: 0; }
#startMenu .sm-slot .sm-plus svg { stroke: rgba(255, 255, 255, .85); stroke-width: 2.4; }
#startMenu .sm-slot:active { background: rgba(255, 255, 255, .08) !important; }
#startMenu .sm-all { grid-auto-rows: auto; overflow-y: auto; align-content: start; max-height: calc(100dvh - 300px); scrollbar-width: none; padding-bottom: 12px; }
#startMenu .sm-all::-webkit-scrollbar { display: none; }
#startMenu .sm-minus { position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d6402c; color: #fff; font: 800 20px/1 var(--sans); box-shadow: 0 0 0 2px #fff; }
#startMenu .sm-count { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; color: rgba(255, 255, 255, .85); font: 600 15px var(--sans); }
#startMenu .sm-count button { min-width: 52px; min-height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 800 16px var(--sans); cursor: pointer; }
#startMenu .sm-count button.on { background: #ffd24d; color: #1b1405; }
#startMenu .sm-pick { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: 16px; border-radius: inherit; background: #101a30; }
#startMenu .sm-pickhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#startMenu .sm-pickhead b { font: italic 600 22px var(--serif); color: #fff; }
#startMenu .sm-pickback { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
#startMenu .sm-pickback svg { width: 22px; height: 22px; fill: none; stroke: #11192b; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#startMenu .sm-picklist { display: grid; gap: 8px; overflow-y: auto; scrollbar-width: none; flex: 1; align-content: start; }
#startMenu .sm-pickrow { display: flex; align-items: center; gap: 14px; padding: 8px 12px; min-height: 62px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .08); color: #fff; font: 700 17px var(--sans); text-align: left; cursor: pointer; }
#startMenu .sm-pickrow .sm-chip { flex: none; width: 46px; height: 46px; }

/* Enkel menu, rettelser: vælgeren lægger sig ovenpå (glas-reglen gjorde den statisk), ingen stiplet kant, kategorier og rulning */
body.glas #startMenu > .sm-pick, #startMenu > .sm-pick { position: absolute !important; inset: 0; z-index: 30 !important; }
#startMenu .sm-slot { border: 0 !important; background: rgba(255, 255, 255, .05) !important; border-radius: 20px; }
#startMenu .sm-pager { align-items: start; }
#startMenu .sm-all { display: block; max-height: calc(100dvh - 330px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 2px 12px; }
#startMenu .sm-all .sm-cg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; grid-auto-rows: auto; margin-bottom: 6px; }
#startMenu .sm-cat { margin: 14px 4px 8px; font: 800 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
#startMenu .sm-cat:first-child { margin-top: 2px; }
body.glas #startMenu > .sm-pick, #startMenu > .sm-pick { z-index: 999 !important; }
#startMenu .sm-pick .sm-pickhead { padding-top: 4px; }

#startMenu .sm-pickrow .sm-pt { display: grid; gap: 2px; min-width: 0; }
#startMenu .sm-pickrow .sm-pt b { font: 700 17px/1.2 var(--sans); }
#startMenu .sm-pickrow .sm-pt small { font: 500 13.5px/1.3 var(--sans); color: rgba(255, 255, 255, .72); }
#startMenu .sm-pickrow { min-height: 72px; }

/* Alle funktioner: lange rækker med en kort forklaring (som i vælgeren) */
#startMenu .sm-rows { display: grid; gap: 8px; margin-bottom: 4px; }
#startMenu .sm-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 8px 14px 8px 10px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #fff; text-align: left; cursor: pointer; }
#startMenu .sm-row:active { background: rgba(255, 255, 255, .16); }
#startMenu .sm-row .sm-chip { flex: none; width: 48px; height: 48px; }
#startMenu .sm-row .sm-pt { display: grid; gap: 2px; min-width: 0; }
#startMenu .sm-row .sm-pt b { font: 700 17px/1.2 var(--sans); }
#startMenu .sm-row .sm-pt small { font: 500 13.5px/1.3 var(--sans); color: rgba(255, 255, 255, .72); }
#startMenu .sm-rowbadge { position: static; margin-left: auto; flex: none; }

/* Menukortet har fast højde, så det ikke hopper mellem siderne; de lange rækker ruller */
#startMenu .sm-pager { height: min(540px, calc(100dvh - 300px)); transition: none; }
#startMenu .sm-pager > .sm-grid { height: 100%; box-sizing: border-box; }
#startMenu .sm-all { max-height: none; overflow-y: auto; }
#startMenu .sm-slots { align-content: start; }

/* Lang række + rund plus-knap, der lægger funktionen på forsiden */
#startMenu .sm-rw { position: relative; }
#startMenu .sm-rw .sm-row { padding-right: 66px; }
#startMenu .sm-addrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #ffd24d; color: #1b1405; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); cursor: pointer; }
#startMenu .sm-addrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }

#startMenu .sm-picklead { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
#startMenu .sm-picklead b { color: #ffd24d; }

/* Vælgerne: Tilbage nederst med den halvmørke aftoning, som i resten af appen */
#startMenu .sm-pick .sm-pickhead { padding-left: 4px; }
#startMenu .sm-pick .sm-picklist { padding-bottom: 84px; }
#startMenu .sm-pickbar { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; display: flex; align-items: center; padding: 0 14px 6px; border-radius: 0 0 inherit inherit; background: linear-gradient(180deg, rgba(10, 16, 30, 0) 0%, rgba(10, 16, 30, .72) 42%, rgba(10, 16, 30, .92) 100%); pointer-events: none; }
#startMenu .sm-pickbar .sm-pickback { pointer-events: auto; width: 46px; height: 46px; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .4); }
/* Lavere, men stadig fast menukort (ca. 450 px): fire genveje fylder det næsten helt, og de lange rækker ruller */
#startMenu .sm-pager { height: min(400px, calc(100dvh - 330px)); }
#startMenu .sm-slots.n4 { grid-auto-rows: minmax(120px, 1fr); }

/* Lavere fast menukort (ca. 475 px) og en diskret gul "Rediger" foran blyanten */
#startMenu .sm-pager { height: min(300px, calc(100dvh - 380px)); }
#startMenu .sm-slots.n4 { grid-auto-rows: minmax(110px, 1fr); }
#startMenu .sm-pen { width: auto; height: 40px; padding: 0 6px 0 10px; gap: 6px; display: inline-flex; align-items: center; }
#startMenu .sm-pen svg { width: 24px; height: 24px; }
#startMenu .sm-pentx { font: 700 15px var(--sans); color: #ffd24d; opacity: .9; }
#startMenu .sm-pen.on .sm-pentx { color: #6be09f; }
/* Meget lavere menukort (ca. 410 px): to rækker genveje, resten ruller */
#startMenu .sm-pager { height: min(238px, calc(100dvh - 430px)); }
#startMenu .sm-slots, #startMenu .sm-slots.n4 { grid-auto-rows: minmax(96px, 1fr); gap: 8px; padding-bottom: 0; }
#startMenu .sm-slots.n4 .sm-chip { transform: none; }
#startMenu { gap: 8px; padding-bottom: 12px; }
#startMenu .sm-pager { height: min(268px, calc(100dvh - 400px)); }
#startMenu .sm-slots { overflow-y: auto; scrollbar-width: none; align-content: start; }
#startMenu .sm-slots::-webkit-scrollbar { display: none; }
#startMenu .sm-slots, #startMenu .sm-slots.n4 { grid-auto-rows: minmax(112px, auto); }
/* Lodret rulning med fingeren i menuens lister (pan-x forbød den) */
#startMenu .sm-pager { touch-action: pan-x pan-y; }
#startMenu .sm-all, #startMenu .sm-slots { touch-action: pan-y; }
#startMenu .sm-pager .sm-grid.sm-all, #startMenu .sm-pager .sm-grid.sm-slots { touch-action: pan-y !important; }

.bell-btn.mode-btn { background: linear-gradient(135deg, #3a2f5c, #2a3b5c); color: #d9ccff; }
body.dream-on .mode-btn { display: none; }

#startMenu .sm-count { order: -1; margin: 0 0 4px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); position: sticky; top: 0; z-index: 4; }
/* Menuens sider: både sidelæns swipe (mellem Mine genveje og Alle funktioner) og lodret rulning */
#startMenu .sm-pager, #startMenu .sm-pager .sm-grid, #startMenu .sm-pager .sm-grid.sm-all, #startMenu .sm-pager .sm-grid.sm-slots { touch-action: pan-x pan-y !important; }

/* Redigér: 4/6 som to piller i fanelinjen (i stedet for Alle funktioner), og ikonerne starter lige under */
#startMenu .sm-tabs .sm-count { order: 0; position: static; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 0; background: none; color: rgba(255, 255, 255, .8); font: 600 15px var(--sans); }
#startMenu .sm-tabs .sm-count button { min-width: 48px; min-height: 40px; }
#startMenu .sm-slots { align-content: start; }

#startMenu.sm-editing .sm-all { display: none; }
#startMenu.sm-editing .sm-pager { overflow-x: hidden; }
#startMenu .sm-tabs.sm-tabs-edit { display: flex; align-items: center; }
#startMenu .sm-tabs.sm-tabs-edit .sm-count button { min-height: 40px; min-width: 48px; padding: 0 14px; border-radius: 999px !important; border: 0 !important; background: rgba(255, 255, 255, .16) !important; color: #fff !important; font: 800 16px var(--sans); border-bottom: 0 !important; }
#startMenu .sm-tabs.sm-tabs-edit .sm-count button.on { background: #ffd24d !important; color: #1b1405 !important; }
/* 4/6-pillerne: slankere og tæt på "Mine genveje" */
#startMenu .sm-tabs.sm-tabs-edit { justify-content: flex-start; gap: 18px; }
#startMenu .sm-tabs.sm-tabs-edit .sm-count { margin: 0; gap: 6px; font-size: 14px; }
#startMenu .sm-tabs.sm-tabs-edit .sm-count button { min-height: 30px; min-width: 38px; padding: 0 10px; font-size: 14.5px; }

/* Basis: kun pins, tekst og fotos. Skjuler klokke, rejse-felter, kilometerkort, rute- og delefunktioner */
body.basic :is(#bellBtn, .brand-pick, .m-filter, #tripKm, #mapEditBar, .next-chip, .upd-pill) { display: none !important; }
body.basic #startMenu .sm-tabs.sm-basic-tabs button[data-smpg="1"], body.basic #startMenu .sm-all, body.basic #startMenu .sm-dots { display: none !important; }
body.basic #startMenu .sm-pager { height: auto; }
body.basic #startMenu .sm-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
body.basic .sheet .sw-tabs { display: none; }
.basic-btn { background: linear-gradient(135deg, #4a3a14, #6b5217); color: #ffe9a0; }

/* Skins */
body.skin-dag #homeBtn, body.skin-dag:not(.salg) #bellBtn { display: none !important; }
.sk-row { display: flex; align-items: center; gap: 14px; }
.sk-row .sk-dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); font-weight: 800; }
.sk-row.on .sk-dot { background: #ffd24d; border-color: #ffd24d; color: #1b1405; }
.sk-row.on { background: rgba(255, 210, 77, .14); }

.sk-fab { display: none; }
body.skin-runde .sk-fab, body.skin-basis .sk-fab { display: grid; }
body.skin-dag #homeBtn, body.skin-dag #bellBtn { display: none !important; }

/* Udseende-knap altid på forsiden: øverst til venstre */
.sk-fab, body.skin-runde .sk-fab, body.skin-basis .sk-fab { display: grid !important; left: calc(var(--m-gap, 10px) + 5px) !important; right: auto !important; width: 44px; height: 44px; background: rgba(17, 25, 43, .88); color: #ffe9a0; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 233, 160, .45); }
body:has(.drawer.open) .sk-fab, body:has(#modal.open) .sk-fab { display: none !important; }

/* Skin Kort: som Apple og Google Kort */
body:is(.skin-kort, .skin-bund) :is(.dock, .fab-wrap, #homeBtn, #bellBtn) { display: none !important; }
.kort-bar { display: none; }
body:is(.skin-kort, .skin-bund) .kort-bar { display: block; position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b, 0px)); z-index: 900; padding: 8px 14px 16px; border-radius: 28px; background: rgba(250, 250, 252, .94); color: #11192b; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 -2px 30px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .1); }
body.night:is(.skin-kort, .skin-bund) .kort-bar, body.dark:is(.skin-kort, .skin-bund) .kort-bar { background: rgba(28, 33, 50, .94); color: #fff; box-shadow: 0 -2px 30px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .12); }
.kb-handle { display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: rgba(120, 128, 150, .45); }
.kb-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(120, 128, 150, .16); color: inherit; font: 500 17px var(--sans); text-align: left; cursor: pointer; }
.kb-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .6; flex: none; }
.kb-search span { opacity: .6; }
.kb-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.kb-act { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: 600 13px var(--sans); }
.kb-act span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c) 70%, #000); }
.kb-act svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kb-act:active span { transform: scale(.94); }
body:has(.drawer.open) .kort-bar, body:has(#sheet.open) .kort-bar, body:has(#modal.open) .kort-bar, body:has(#startMenu) .kort-bar, body.tf-pop .kort-bar, body.dream-on .kort-bar { display: none !important; }
body:is(.skin-kort, .skin-bund) #startMenu { bottom: calc(12px + var(--safe-b, 0px)); }
body:is(.skin-kort, .skin-bund) :is(#dkStart, #startBtn, .dock-start) { display: none !important; }

.sk-row .sk-dot { font: 800 15px var(--sans); }

/* Dag: plus-menuen er to store ikoner, uden kort, overskrift og tekst (ét kort ord under hvert). "Søg et sted" er skjult */
@media (max-width: 760px) {
  body.skin-dag.kunde #fabMenu { top: auto !important; bottom: calc(196px + var(--safe-b, 0px)); left: 14px; right: 14px; width: auto !important; height: auto !important; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; grid-template-columns: 1fr 1fr; gap: 14px; transform-origin: bottom center; display: grid; }
  body.skin-dag.kunde:has(.fab-wrap.open) #map { filter: none !important; }
  body.skin-dag #fabMenu .fm-head, body.skin-dag #fabMenu .fm-dots, body.skin-dag #fabMenu::before { display: none !important; }
  body.skin-dag #fabMenu [data-add="search"], body.skin-dag #fabMenu [data-add="photos"] { display: none !important; }
  body.skin-dag #fabMenu > button[data-add="here"], body.skin-dag #fabMenu > button[data-add="click"] { display: grid !important; justify-items: center; align-content: center; gap: 10px; min-height: 168px; padding: 18px 10px; border: 0; border-radius: 30px; color: #fff; box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .65), inset 0 0 0 3px rgba(255, 255, 255, .55); }
  body.skin-dag #fabMenu > button[data-add="here"] { background: linear-gradient(160deg, #3fc27a, #1d7a4a); }
  body.skin-dag #fabMenu > button[data-add="click"] { background: linear-gradient(160deg, #4aa3e8, #1f5f9f); }
  body.skin-dag #fabMenu > button[data-add] > svg { width: 84px; height: 84px; stroke-width: 1.7; }
  body.skin-dag #fabMenu > button[data-add] > span { position: static; }
  body.skin-dag #fabMenu > button[data-add] > span > * { display: none; }
  body.skin-dag #fabMenu > button[data-add]::after { content: attr(data-cap) !important; display: block !important; color: #fff !important; position: static !important; opacity: 1 !important; width: auto !important; height: auto !important; background: none !important; font: 800 19px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
}

@media (max-width: 760px) { body.skin-dag #fabMenu > button[data-add="search"], body.skin-dag #fabMenu > button[data-add="photos"] { display: none !important; } }
/* PC har tastatur: der vises Søg et sted */
@media (min-width: 761px) { body.skin-dag #fabMenu > button[data-add="photos"] { display: none !important; } }

/* Dag: runde knapper (plus og Menu) */
body.skin-dag.kunde .fab { border-radius: 50% !important; aspect-ratio: 1; }
body.skin-dag.kunde #dkStart { border-radius: 50% !important; aspect-ratio: 1; }
body.skin-dag.kunde .fab-wrap { background: none !important; border: 0 !important; box-shadow: none !important; }
body.skin-dag.dock-multi .fab-wrap::before { display: none !important; }
body.skin-dag.kunde #fab, body.skin-dag.kunde #dkStart { border-radius: 50% !important; width: 68px !important; height: 68px !important; }

/* Dag: ingen orange. Plus-knappen og Nyt sted-kortet har samme grønne farve */
body.skin-dag.kunde #fab { background: linear-gradient(160deg, #3fb870, #2f9d5a 55%, #1f7a45) !important; box-shadow: 0 10px 22px -8px rgba(31, 122, 69, .85), inset 0 1px 0 rgba(255,255,255,.25) !important; }
body.skin-dag #modalCard.wizc.wiznew, body.skin-dag #modalCard.wizc.wiznew.ws-1, body.skin-dag #modalCard.wizc.wiznew.ws-2, body.skin-dag #modalCard:has(.new-ok) { --wk: #2f9d5a; --wc: #2f9d5a; }
body.skin-dag.glas #modalCard.wizc.wiznew, body.skin-dag.glas #modalCard:has(.new-ok) { border-color: color-mix(in srgb, #2f9d5a 55%, rgba(255,255,255,.2)) !important; }
body.skin-dag.glas #modalCard.wizc.wiznew { background: linear-gradient(155deg, color-mix(in srgb, #2f9d5a 70%, #0d1f17) 0%, color-mix(in srgb, #2f9d5a 42%, #0d1f17) 100%) !important; }
body.skin-dag.glas .fab-menu { background: linear-gradient(155deg, color-mix(in srgb, #2f9d5a 86%, #000) 0%, color-mix(in srgb, #2f9d5a 66%, #000) 100%) !important; }
body.skin-dag.kunde #modalCard.wizc.wiznew .m-foot.wiz-foot { background: color-mix(in srgb, #2f9d5a 14%, #0f1a16) !important; }
body.skin-dag #modalCard.wizc.wiznew .wiz-next, body.skin-dag #modalCard.wizc.wiznew [data-next] { background: #2f9d5a !important; }

/* Nyt sted, trin 2: store forslag man kan trykke på */
body.kunde #modalCard.wizc .wiz-ideas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; align-items: center; }
body.kunde #modalCard.wizc .wiz-ideas > small { flex: 0 0 100%; font: 800 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
body.kunde #modalCard.wizc .wiz-ideas button { min-height: 54px; padding: 0 22px; border: 0 !important; border-radius: 999px; background: rgba(255, 255, 255, .2) !important; color: #fff !important; font: 800 19px var(--sans); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
body.kunde #modalCard.wizc .wiz-ideas button::after, body.kunde #modalCard.wizc .wiz-ideas button::before { display: none !important; }
body.kunde #modalCard.wizc .wiz-ideas button:active { background: rgba(255, 255, 255, .38) !important; }
body.kunde #modalCard.wizc .wiz-where { margin-top: 18px; }
body.kunde #modalCard.wizc .wiz-where .ww-t small { display: none; }
body.kunde #modalCard.wizc .wiz-where .ww-t b { font-size: 19px; white-space: normal; }
body.kunde #modalCard.wizc .wiz-ideas > button { border-radius: 999px !important; padding: 0 24px !important; min-height: 56px !important; }

/* Hjem-kort: store knapper med ikon og ét ord */
.hm-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.hm-kid { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 150px; padding: 16px 10px; border: 0; border-radius: 26px; background: color-mix(in srgb, var(--k) 70%, #10172a); color: #fff; font: 800 20px var(--sans); cursor: pointer; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.hm-kid:active { transform: scale(.97); }
.hm-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: rgba(255, 255, 255, .2); }
.hm-ic svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Dag: ét farvetema overalt. Kort og vinduer har samme grønne farve; ikonerne beholder deres egne farver */
body.skin-dag .modal-card, body.skin-dag #modalCard { --wc: #2f9d5a !important; --wk: #2f9d5a !important; --bc: #2f9d5a !important; }
body.skin-dag .tf-menu, body.skin-dag .drawer, body.skin-dag .popover, body.skin-dag .popover.route-pop, body.skin-dag #sheet { --pc: #2f9d5a !important; --wc: #2f9d5a !important; --bc: #2f9d5a !important; }

/* Rækker med en farvet firkant: firkanten får et ikon (rejsens farve = dens linje på kortet) */
body.kunde .menu-list .rw-row .mi.rw-dot { background-color: var(--tc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 6.5l6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z%22/%3E%3Cpath d=%22M9 4v13.5M15 6.5V20%22/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 58% !important; }
body.kunde .menu-list .rw-row[data-py] .mi.rw-dot, body.kunde .menu-list .rw-row[data-bky] .mi.rw-dot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%224%22 y=%225.5%22 width=%2216%22 height=%2214.5%22 rx=%222.5%22/%3E%3Cpath d=%22M4 10h16M8.5 3.5v4M15.5 3.5v4%22/%3E%3C/svg%3E") !important; }

/* SKINS-knappen: ikon og ordet SKINS */
.sk-fab, body.skin-runde .sk-fab, body.skin-basis .sk-fab { width: auto !important; min-width: 44px; height: 44px; padding: 0 14px 0 10px; gap: 6px; grid-auto-flow: column; align-items: center; border-radius: 999px !important; }
.sk-fab svg { width: 22px; height: 22px; }
.sk-fab span { font: 800 12px/1 var(--sans); letter-spacing: .1em; }
body .sk-fab#skinFab { width: fit-content !important; right: auto !important; max-width: 140px; }

/* Hjem-menuen: søjle af piller over Menu-knappen */
#homeFold { position: fixed; right: 12px; z-index: 950; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#homeFold .hf-pill { flex: none; } /* må ikke klemmes sammen, så de rører hinanden */
.hf-pill { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 22px; border: 0; border-radius: 999px; background: rgba(16, 22, 40, .92); color: #fff; font: 800 18px var(--sans); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; animation: hfIn .22s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.hf-pill:active { transform: scale(.96); }
.hf-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--k); }
.hf-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hfIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
/* Menu-knappen løftes lidt fra plus-knappen */
body.skin-dag.kunde #dkStart { margin-bottom: 10px; }

/* Dag, mobil: Nyt sted som flydende piller over kortet i stedet for et stort kort */
@media (max-width: 760px) {
  body.skin-dag.kunde .modal:has(#modalCard.wizc.wiznew) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; place-items: start center; padding: calc(10px + var(--safe-t, 0px)) 10px 0; pointer-events: none; }
  body.skin-dag.kunde:has(#modalCard.wizc.wiznew) #map { filter: none !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew { pointer-events: none; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 100%; max-width: 560px; max-height: none !important; height: auto !important; overflow: visible !important; display: flex; flex-direction: column; gap: 10px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew > * { pointer-events: auto; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 10px 10px 22px; border-radius: 999px; background: rgba(16, 22, 40, .92); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
  body.skin-dag.kunde #modalCard.wizc.wiznew .m-head h2 { margin: 0; font-size: 21px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .m-head .eyebrow { margin: 0 0 2px; font-size: 11px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz { display: flex; flex-direction: column; gap: 10px; padding: 0 !important; margin: 0; background: none !important; max-height: calc(100dvh - 250px); overflow-y: auto; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-lead { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .fld:not(.kunde-skjult), body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where, body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas, body.skin-dag.kunde #modalCard.wizc.wiznew .drop { margin: 0; border-radius: 28px; background: rgba(16, 22, 40, .92); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .16); padding: 12px 18px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .fld input, body.skin-dag.kunde #modalCard.wizc.wiznew .fld textarea { background: rgba(255, 255, 255, .1) !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where { padding: 8px 10px 8px 12px; border-radius: 999px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; border-radius: 999px; scrollbar-width: none; margin-top: 0; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas > small { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas button { flex: none; min-height: 44px !important; font-size: 17px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .m-foot.wiz-foot { position: static !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
}
@media (max-width: 760px) {
  body.skin-dag.kunde.wiz-sharp:has(#modalCard.wizc.wiznew) #map :is(.leaflet-tile-pane, .leaflet-overlay-pane) { filter: none !important; }
  body.skin-dag.kunde:has(#modalCard.wizc.wiznew) :is(#sheet, #brand, #dock, .bell-btn, #tripKm, #setBtn, #menuBtn, #mFilter) { filter: none !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew label.fld:first-of-type, body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz > label.fld.w-on:not(.kunde-skjult) { background: none !important; box-shadow: none !important; padding: 0; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz > label.fld > span { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz > label.fld input { border-radius: 999px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), inset 0 0 0 2px #fff; background: rgba(16, 22, 40, .94) !important; }
}
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas { background: none !important; box-shadow: none !important; padding: 2px 0 !important; border-radius: 0; margin: 0 -10px; padding-inline: 10px !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas button { background: rgba(16, 22, 40, .94) !important; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .4) !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .m-foot.wiz-foot { display: flex; align-items: center; justify-content: space-between; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot .btn:not(.btn-primary) { background: rgba(16, 22, 40, .94) !important; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .4) !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-dots { padding: 10px 14px; border-radius: 999px; background: rgba(16, 22, 40, .94); }
}
@media (max-width: 760px) { body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-dots { flex: 0 0 auto !important; width: auto !important; } }
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz .row2.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; border-radius: 28px; background: rgba(16, 22, 40, .92); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz .row2.dates > label.fld { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0; border-radius: 0; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz .row2.dates > label.fld > span { display: block; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz .row2.dates input { border-radius: 16px; font-size: 16px; padding-inline: 12px; background: rgba(255, 255, 255, .1) !important; box-shadow: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz .row2.dates .td-warn { grid-column: 1 / -1; }
}

/* Smart plus: nål på GPS-positionen med tre runde knapper */
#pinBar { position: fixed; left: 50%; bottom: calc(26px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 960; display: flex; align-items: center; gap: 18px; }
#pinBar button { display: grid; place-items: center; width: 76px; height: 76px; border: 0; border-radius: 50%; color: #fff; cursor: pointer; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .35); }
#pinBar .pb-x { background: #d8412f; }
#pinBar .pb-ok { width: 96px; height: 96px; background: linear-gradient(160deg, #3fb870, #1f7a45); }
#pinBar svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#pinBar .pb-ok svg { width: 46px; height: 46px; }
#pinBar .pb-tap { display: grid; justify-items: center; gap: 2px; padding: 10px 14px; border-radius: 22px; background: rgba(16, 22, 40, .92); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); }
#pinBar .pb-tap svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#pinBar .pb-tap b { font: 800 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
body.smartpin :is(#fabWrap, #dkStart, #homeFold, #skinFab, #homeBtn, #kortBar) { display: none !important; }

/* Vis forslag: foldes ud i Dag; GPS-ikon henter navnet fra positionen igen */
.wiz-ideas .wi-toggle, .wiz-ideas .wi-gps { display: none; }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas { flex-wrap: wrap !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; align-items: center; }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(16, 22, 40, .94); color: #fff; font: 800 17px var(--sans); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas.open .wi-toggle svg { transform: rotate(180deg); }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-gps { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #2f9d5a; color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-gps svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas > small, body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas > em, body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas > [data-idea] { display: none; }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas.open > [data-idea] { display: inline-flex; align-items: center; }
body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas.open > em { display: block; padding: 6px 10px; border-radius: 999px; background: rgba(16, 22, 40, .94); }

/* Smart plus: navnet på stedet som en pille over knapperne */
#pinName { position: fixed; left: 50%; bottom: calc(150px + var(--safe-b, 0px)); transform: translateX(-50%) scale(.96); z-index: 960; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 22px; border-radius: 999px; background: rgba(16, 22, 40, .94); color: #fff; font: 800 20px var(--sans); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .22); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
#pinName.show { opacity: 1; transform: translateX(-50%); }
#pinName b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.smartpin :is(#pinName) { display: flex !important; }

/* Nyt sted: roligere forslag */
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas.open { flex-wrap: wrap !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-toggle, body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-gps { min-height: 44px; height: 44px; font-size: 16px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas .wi-gps { width: 44px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas.open > [data-idea] { min-height: 40px !important; padding: 0 16px !important; font-size: 16px !important; font-weight: 700; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where { padding: 6px 8px 6px 10px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-t b { font-size: 16px; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-ic { transform: scale(.8); }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where button { padding: 0 14px; min-height: 38px; font-size: 15px; }
}

/* Vis forslag samlet med adressen: én pille, og forslagene i en lille rude */
.ww-sug { display: none; }
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-ideas { display: none !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where { flex-wrap: nowrap; gap: 8px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-t { flex: 1; min-width: 0; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-sug { display: inline-flex; align-items: center; flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: #2f9d5a; color: #fff; font: 800 14px var(--sans); }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where [data-wedit] { display: none; }
}
#ideaPop { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 20px; background: rgba(8, 12, 24, .5); }
#ideaPop .ip-card { width: min(420px, 100%); max-height: 80dvh; overflow-y: auto; display: grid; gap: 10px; padding: 18px; border-radius: 28px; background: rgba(16, 22, 40, .97); color: #fff; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
#ideaPop .ip-h { margin: 2px 4px 4px; font: 800 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
#ideaPop .ip-opt { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 800 18px var(--sans); text-align: left; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); cursor: pointer; }
#ideaPop .ip-opt:active { background: rgba(255, 255, 255, .28); }
#ideaPop .ip-gps { background: #2f9d5a; }
#ideaPop .ip-gps svg { width: 24px; height: 24px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
#ideaPop .ip-edit { background: none; font-weight: 700; font-size: 16px; justify-content: center; opacity: .85; }
#ideaPop .ip-none { margin: 4px; opacity: .7; }

#pinBar .pb-cam { background: rgba(16, 22, 40, .94); }
#pinBar { gap: 14px; }

/* Billedtrinnet (Nyt sted 4/4): to store runde valg, en tydelig tekstpille og en grøn gem-knap */
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow-y: auto; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) > * { grid-column: 1 / -1; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edCam, body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop { grid-column: auto; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 120px; margin: 0; padding: 10px; border: 0 !important; border-radius: 30px; background: rgba(16, 22, 40, .94) !important; color: #fff; font: 800 18px var(--sans); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edCam { order: 1; background: linear-gradient(160deg, #3fb870, #1f7a45) !important; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop { order: 2; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edCam svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop::before { content: ''; width: 54px; height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4 17l5-4.5 4 3.5 3-2.5 4 3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop > span { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop > b { font-size: 18px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edThumbs { order: 3; display: flex; gap: 8px; overflow-x: auto; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edThumbs img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) > label.fld { order: 4; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) > label.fld > span { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) > label.fld textarea { min-height: 96px; padding: 14px 18px; border-radius: 28px; background: rgba(16, 22, 40, .94) !important; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .3); color: #fff; }
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) > p.hint { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot #saveBtn { background: linear-gradient(160deg, #3fb870, #1f7a45) !important; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .45) !important; }
}

/* Skraldespand: kommer frem i siden, når man trækker en nål i ret-tilstand */
#trashDrop { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 970; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(16, 22, 40, .92); color: #fff; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(255, 255, 255, .4); animation: trashIn .18s ease-out; pointer-events: none; }
#trashDrop svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#trashDrop.hot { background: #d8412f; transform: translateY(-50%) scale(1.18); }
@keyframes trashIn { from { opacity: 0; transform: translateY(-50%) translateX(30px); } to { opacity: 1; transform: translateY(-50%); } }
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew form.wiz:has(#edDrop.w-on) > label.fld { display: none; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edCam { grid-column: 1 / -1; min-height: 170px; font-size: 22px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edCam svg { width: 84px; height: 84px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop { grid-column: 1 / -1; min-height: 0; display: flex; justify-content: center; gap: 12px; padding: 10px 18px; border-radius: 999px; font-size: 17px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew #edDrop::before { width: 30px; height: 30px; }
}

/* Nye steder: tal på Steder og en Ny-mærkat i listen, til stedet er åbnet */
.hf-ic { position: relative; }
.hf-badge { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 14px var(--sans); font-style: normal; box-shadow: 0 0 0 2px rgba(16, 22, 40, .95); }
.it-new { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 12px/1.3 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
/* Prøvekluden: Stedet er gemt i grønt */
body.skin-dag #modalCard:has(.new-ok) .btn-primary { background: linear-gradient(160deg, #3fb870, #1f7a45) !important; }

/* Nyt sted: frem og tilbage som runde knapper i siden af skærmen */
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot > .btn { position: fixed !important; top: 56%; z-index: 2; width: 66px; height: 66px; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot > .btn:not(.btn-primary) { left: 8px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot > .btn-primary { right: 8px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot > .btn svg { width: 34px; height: 34px; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot > #saveBtn { top: 56%; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot > #saveBtn::before { content: ''; width: 36px; height: 36px; display: block; margin: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-foot .wiz-dots { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b, 0px)); transform: translateX(-50%); }
}

/* Multiknap i adresse-pillen: blyant (vælg andet navn) og GPS (tilbage til navnet fra positionen) */
.ww-multi { display: none; }
@media (max-width: 760px) {
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-multi { display: inline-flex; flex: none; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-multi button { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #2f9d5a; color: #fff; }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-multi button + button { background: rgba(255, 255, 255, .16); }
  body.skin-dag.kunde #modalCard.wizc.wiznew .wiz-where .ww-multi svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

#pinName .pn-t { display: grid; min-width: 0; line-height: 1.2; }
#pinName .pn-t b { font-size: 20px; }
#pinName .pn-t small { font: 600 14px var(--sans); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Manuel nål: søgefelt øverst, ingen kamera-knap */
#pinBar button.pb-tap { width: auto; height: auto; border-radius: 22px; }
#pinBar.manual .pb-cam, #pinBar.manual .pb-tap { display: none; }
#pinSearch { position: fixed; left: 12px; right: 12px; top: calc(14px + var(--safe-t, 0px)); z-index: 965; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 0 20px; border-radius: 28px; background: rgba(16, 22, 40, .95); color: #fff; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
#pinSearch svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
#pinSearch input { flex: 1; min-width: 0; height: 58px; border: 0; background: none; color: #fff; font: 700 19px var(--sans); outline: none; }
#pinSearch .ps-res { flex: 0 0 100%; display: grid; gap: 4px; padding-bottom: 8px; }
#pinSearch .ps-res:empty { display: none; }
#pinSearch .ps-res button { text-align: left; border: 0; border-radius: 16px; padding: 12px 14px; background: rgba(255, 255, 255, .1); color: #fff; font: 600 16px var(--sans); }
body.smartpin:has(#pinSearch) #pinName { bottom: calc(150px + var(--safe-b, 0px)); }

#pinName { pointer-events: auto; }
#pinName .pn-edit { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -10px -4px 4px; padding: 0; border: 0; border-radius: 50%; background: #2f9d5a; color: #fff; }
#pinName .pn-edit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ideaPop .ip-f { display: grid; gap: 4px; color: #fff; }
#ideaPop .ip-f span { font: 800 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-left: 6px; }
#ideaPop .ip-f input { height: 54px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 700 18px var(--sans); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); outline: none; }

/* Navnet i en pille og blyanten i sin egen boble */
#pinName { background: none !important; box-shadow: none !important; padding: 0 !important; gap: 12px; border-radius: 0; }
#pinName .pn-pill { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 22px; border-radius: 999px; background: rgba(16, 22, 40, .94); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
#pinName .pn-edit { width: 54px; height: 54px; margin: 0; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
#pinName .pn-edit svg { width: 26px; height: 26px; }
#pinName { width: max-content; max-width: calc(100vw - 24px); }
#pinName .pn-pill { flex: 0 1 auto; }

/* Smart plus, ny placering: navn og fortryd øverst, kamera og Gem nederst */
#pinTop { position: fixed; left: 12px; right: 12px; top: calc(12px + var(--safe-t, 0px)); z-index: 960; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
#pinTop > * { pointer-events: auto; }
#pinTop .pt-row { display: flex; align-items: center; gap: 12px; width: 100%; }
#pinTop .pb-x { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: #d8412f; color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .4); }
#pinTop .pb-x svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
#pinTop #pinName { position: static; transform: none; opacity: 1; display: flex; align-items: center; gap: 10px; width: auto; flex: 1; min-width: 0; max-width: none; pointer-events: auto; }
#pinTop #pinName .pn-pill { flex: 1 1 auto; }
#pinTop .pb-manual { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(16, 22, 40, .94); color: #fff; font: 800 14px var(--sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
#pinTop .pb-manual[hidden] { display: none; }
#pinTop .pb-manual svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#pinBar { gap: 28px; }
#pinBar .pb-cam { position: relative; width: 92px; height: 92px; background: rgba(16, 22, 40, .94); }
#pinBar .pb-cam svg { width: 44px; height: 44px; }
#pinBar .pb-n { position: absolute; top: -4px; right: -4px; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 15px var(--sans); font-style: normal; box-shadow: 0 0 0 2px rgba(16, 22, 40, .95); }
#pinBar .pb-n[hidden] { display: none; }
#pinBar .pb-ok { position: relative; width: 92px; height: 92px; touch-action: none; user-select: none; -webkit-user-select: none; }
#pinBar .pb-ok svg { width: 46px; height: 46px; }
#pinBar .pb-ring { position: absolute; inset: -6px; border-radius: 50%; border: 5px solid transparent; pointer-events: none; }
#pinBar .pb-ok.hold .pb-ring { border-color: #ffd24d; animation: pbHold .7s linear forwards; }
@keyframes pbHold { from { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); } 25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%); } to { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } }
body.smartpin #setBtn { display: none !important; }
#pinSearch { top: calc(150px + var(--safe-t, 0px)); }

#ideaPop .ip-opt { justify-content: center; text-align: center; }
#ideaPop .ip-r { justify-content: flex-start; text-align: left; min-height: 46px; font-size: 16px; font-weight: 600; }
#ideaPop .ip-res { display: grid; gap: 6px; }
#ideaPop .ip-res:empty { display: none; }

/* Dråbe-nål som i Google Kort, med navn over */
.gp-wrap { background: none; border: 0; }
.gp { position: absolute; left: -22px; top: -62px; width: 44px; height: 62px; pointer-events: auto; }
.gp-pin { position: absolute; left: 0; bottom: 0; width: 44px; height: 62px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4)); }
.gp-label { position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%); max-width: 220px; padding: 6px 14px; border-radius: 999px; background: rgba(16, 22, 40, .94); color: #fff; font: 800 15px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .3); }

/* Tre ikoner i bunden: Manuel, pin-vælger (til/fra) og kamera. Gem sidder øverst */
#pinTop .pb-ok { width: 64px; height: 64px; min-height: 0; border-radius: 50%; border: 0; background: linear-gradient(160deg, #3fb870, #1f7a45); color: #fff; display: grid; place-items: center; position: relative; touch-action: none; box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.4); }
#pinTop .pb-ok svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#pinTop .pb-ok .pb-ring { position: absolute; inset: -6px; border-radius: 50%; border: 5px solid transparent; pointer-events: none; }
#pinTop .pb-ok.hold .pb-ring { border-color: #ffd24d; animation: pbHold .7s linear forwards; }
#pinBar { gap: 16px; }
#pinBar button { width: 84px; height: 84px; }
#pinBar .pb-manual { flex-direction: column; gap: 4px; background: rgba(16, 22, 40, .94); }
#pinBar .pb-manual svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
#pinBar .pb-manual b { font: 800 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#pinBar .pb-peg { background: rgba(16, 22, 40, .94); }
#pinBar .pb-peg svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#pinBar .pb-peg.on { background: #2f7de8; box-shadow: 0 12px 24px -10px rgba(0,0,0,.7), 0 0 0 4px #fff; }
#pinBar .pb-cam { width: 84px; height: 84px; }
#pinBar { gap: 40px; }
#pinBar button { width: 92px; height: 92px; }
#pinTop { gap: 22px; }
#pinTop .pb-ok { margin-right: 4px; }

/* Runde knapper i siden: kryds, blyant, søg og OK */
#pinTop { left: 12px; right: 12px; display: block; }
#pinTop .pt-row { display: block; width: auto; margin-right: 84px; }
#pinTop #pinName { display: block; }
#pinTop #pinName .pn-pill { width: 100%; box-sizing: border-box; }
#pinTop .pb-x, #pinTop #pinName .pn-edit, #pinTop .pb-lup, #pinTop .pb-ok { position: fixed; right: 12px; width: 64px; height: 64px; margin: 0; }
#pinTop .pb-x { top: calc(34% + 0px); }
#pinTop #pinName .pn-edit { top: calc(34% + 78px); }
#pinTop .pb-lup { top: calc(34% + 156px); display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(16, 22, 40, .94); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.35); }
#pinTop .pb-lup svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#pinTop .pb-ok { top: calc(34% + 234px); }
#pinBar { gap: 40px; }
#pinBar .pb-peg, #pinBar .pb-cam { width: 92px !important; height: 92px !important; flex: none; }
#pinSearch { top: calc(88px + var(--safe-t, 0px)); right: 90px; }
#pinTop #pinName .pn-edit { background: #f2b81e !important; color: #1b1405 !important; }
html body.smartpin.kunde #setBtn, html body.smartpin #setBtn.icon-btn, html body.smartpin .set-btn { display: none !important; visibility: hidden !important; }

.pn-mode { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; border-radius: 50%; background: #2f9d5a; color: #fff; }
.pn-mode.fing { background: #2f7de8; }
.pn-mode svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pinTop .pt-row { margin: 0 auto; width: max-content; max-width: 100%; }
#pinTop #pinName .pn-pill { width: auto; max-width: 100%; justify-content: center; }

#pinName.away .pn-mode { animation: pnAway 1.2s ease-in-out infinite; box-shadow: 0 0 0 3px #ffd24d; }
@keyframes pnAway { 50% { transform: scale(1.18); } }

#pinTop #pinName .pn-edit { display: none !important; }
#pinTop .pb-lup { top: calc(34% + 78px); }
#pinTop .pb-ok { top: calc(34% + 156px); }
#pinTop .pb-ok.peg { background: linear-gradient(160deg, #4aa3e8, #1f5f9f); }

#savedChip { position: fixed; left: 50%; bottom: calc(28px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 970; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 24px); padding: 8px 8px 8px 12px; border-radius: 999px; background: rgba(16, 22, 40, .96); color: #fff; font: 800 17px var(--sans); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .25); animation: trashIn .2s ease-out; }
#savedChip .sc-ok { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #2f9d5a; }
#savedChip svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#savedChip .sc-edit { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: #f2b81e; color: #1b1405; font: 800 16px var(--sans); }
#savedChip .sc-x { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #d8412f; color: #fff; }

.pin-name .pin-src { display: inline-block; width: 14px; height: 14px; margin: 0 4px -2px 0; fill: none; stroke: #2f9d5a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pin-name .pin-src.fing { stroke: #2f7de8; }
.sheet-trash { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(216, 65, 47, .95); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.sheet-trash svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-wrap.ghost { opacity: .45; filter: grayscale(.4); pointer-events: none; }

/* Prøvekluden: listen har år-piller, så Alle år/Alle rejser-vælgerne er overflødige; runde knapper; år-pillen stikker ikke ud */
body.skin-dag.kunde .ms-picks { display: none !important; }
body.skin-dag.kunde .ms-close { width: 46px; height: 46px; padding: 0; border-radius: 50% !important; background: #d8412f; color: #fff; display: grid; place-items: center; }
.yr-tabs { padding: 8px 4px 12px; align-items: center; }
.yr-chip, .yr-chip.on { box-sizing: border-box; height: 40px; min-height: 40px; box-shadow: none; }
.yr-chip.on { outline: 2px solid #ffd24d; outline-offset: 0; }
/* Redigér-bjælken lægges øverst, så den ikke dækker ikonerne nederst */
#savedChip { bottom: auto; top: calc(74px + var(--safe-t, 0px)); }
/* Blå OK pulserer, så man ser, at man godkender en finger-nål */
#pinTop .pb-ok.peg { animation: okPulse 1.3s ease-in-out infinite; }
@keyframes okPulse { 0%, 100% { transform: scale(1); box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), 0 0 0 0 rgba(74, 163, 232, .7); } 50% { transform: scale(1.1); box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), 0 0 0 12px rgba(74, 163, 232, 0); } }

.drawer .item b .pin-src { display: inline-block; width: 16px; height: 16px; margin: 0 6px -2px 0; fill: none; stroke: #5fd39a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.drawer .item b .pin-src.fing { stroke: #4aa3e8; }

/* Blå OK: svag, rolig puls plus et lille 'pop' ved skiftet, så nye brugere lægger mærke til den */
#pinTop .pb-ok.peg { animation: okPulse 2.4s ease-in-out infinite; }
#pinTop .pb-ok.pop { animation: okPop .5s ease-out, okPulse 2.4s ease-in-out .5s infinite; }
@keyframes okPulse { 0%, 100% { transform: scale(1); box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), 0 0 0 0 rgba(74,163,232,.45); } 50% { transform: scale(1.05); box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), 0 0 0 8px rgba(74,163,232,0); } }
@keyframes okPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

#savedChip { position: fixed; overflow: hidden; }
#savedChip .sc-bar { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 4px; border-radius: 2px; background: #ffd24d; transform-origin: left; animation: scBar 12s linear forwards; }
@keyframes scBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Stedkort: de tre knapper under krydset får mere luft ned fra krydset */
.sheet-hero-acts { top: calc(104px + var(--safe-t, 0px)) !important; gap: 14px !important; }
.yr-chip.on { outline: none !important; box-shadow: none !important; transform: none !important; }
.yr-tabs { padding: 6px 6px 12px; }

.gp-wrap .gp-fill { fill: #2f9d5a; transition: fill .25s; }
.gp-wrap.fing .gp-fill { fill: #2f7de8; }
.gp-wrap.gps .gp-fill { fill: #2f9d5a; }

/* Ring om nålen: grøn = sat med GPS, blå = sat med fingeren */
.pin.src-gps .pin-face { box-shadow: 0 0 0 4px #2f9d5a, 0 4px 10px rgba(0,0,0,.35) !important; }
.pin.src-finger .pin-face { box-shadow: 0 0 0 4px #2f7de8, 0 4px 10px rgba(0,0,0,.35) !important; }
/* Tidsbjælken fejer gennem hele Redigér-bjælken og skrumper mod venstre */
#savedChip .sc-bar { inset: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: 0; background: linear-gradient(90deg, rgba(255, 210, 77, .38), rgba(255, 210, 77, .22)); z-index: 0; }
#savedChip > :not(.sc-bar) { position: relative; z-index: 1; }

/* Knap nr. 3: min position (zoom ind/ud) */
#locBtn { position: fixed; z-index: 880; width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(16, 22, 40, .9); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.3); }
#locBtn svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#locBtn.on { background: #2f7de8; }
#locBtn.busy svg { animation: locSpin 1s linear infinite; }
@keyframes locSpin { to { transform: rotate(360deg); } }
body.smartpin #locBtn, body:has(#modal.open) #locBtn, body:has(#drawer.open) #locBtn, body:has(#sheet.open) #locBtn, body:has(#homeFold) #locBtn { display: none !important; }

/* År-pillen flugter med kortene under (samme kant) */
.drawer .yr-tabs { margin: 0 var(--ms-pad, 16px) !important; padding: 6px 0 12px !important; }
.drawer .yr-chip, .drawer .yr-chip.on { margin: 0; transform: none !important; }

/* Papirkurv-knap i Steder-listen */
.tr-btn { position: absolute; top: 14px; right: 70px; z-index: 3; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.tr-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 13px var(--sans); font-style: normal; box-shadow: 0 0 0 2px rgba(16,22,40,.95); }
.tr-badge[hidden] { display: none; }
.tr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-restore { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #2f9d5a; color: #fff; font: 800 15px var(--sans); }
.tr-empty { width: 100%; min-height: 52px; margin-top: 14px; border: 0; border-radius: 999px; background: #d8412f; color: #fff; font: 800 17px var(--sans); }

/* Overskrift i Steder: papirkurv og sammenfold ved siden af krydset */
.ms-trash, .ms-fold { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.ms-trash svg, .ms-fold svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ms-fold[aria-expanded="false"] svg { transform: rotate(180deg); }
.ms-row { gap: 8px; }
/* Sammenfoldet: Vis alle steder og søg skjules */
#drawer.qcol .ms-quick, #drawer.qcol .drawer-head .search { display: none !important; }

/* Prøvekluden: kort og vinduer i samme mørke blå som menu-pillerne; grøn bruges kun til knapper og accenter */
body.skin-dag.kunde .modal-card, body.skin-dag.kunde #modalCard, body.skin-dag.glas .modal-card, body.skin-dag.kunde .drawer, body.skin-dag.kunde .tf-menu, body.skin-dag.kunde .popover, body.skin-dag.glas .drawer, body.skin-dag.glas .tf-menu, body.skin-dag.glas .popover { background: rgba(16, 22, 40, .96) !important; border-color: rgba(255, 255, 255, .18) !important; }
body.skin-dag.kunde .modal-card .mrow, body.skin-dag.glas .modal-card .mrow, body.skin-dag.kunde .modal-card.wcol .mrow, body.skin-dag.kunde .drawer .item, body.skin-dag.kunde .drawer .ms-fitrow, body.skin-dag.kunde .drawer .ms-pick { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .12) !important; }
body.skin-dag.kunde .modal-card .m-foot, body.skin-dag.glas .modal-card.wcol .m-foot { background: transparent !important; }

/* Hjem-knapper: levende farver med glans i stedet for matte */
.hm-kid { background: linear-gradient(155deg, color-mix(in srgb, var(--k) 78%, #fff) 0%, var(--k) 45%, color-mix(in srgb, var(--k) 72%, #000) 100%) !important; box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--k) 80%, #000), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.15) !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.hm-ic { background: rgba(255,255,255,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 12px -6px rgba(0,0,0,.35); }
.hm-kid:nth-child(1) { --k: #3a7bff !important; } .hm-kid:nth-child(2) { --k: #ff9f1c !important; } .hm-kid:nth-child(3) { --k: #12c2a4 !important; }
.hm-kid:nth-child(4) { --k: #8b5cf6 !important; } .hm-kid:nth-child(5) { --k: #ff4d8d !important; } .hm-kid:nth-child(6) { --k: #26b5e8 !important; }

.trip-new { width: 100%; min-height: 56px; margin-top: 14px; border: 0; border-radius: 999px; background: linear-gradient(160deg, #3fb870, #1f7a45); color: #fff; font: 800 18px var(--sans); box-shadow: 0 10px 22px -12px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.35); }

.trip-plus { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(160deg, #3fb870, #1f7a45); color: #fff; margin-right: 8px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.4); }
.trip-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.m-head:has(.trip-plus) { display: flex; align-items: center; }
.m-head:has(.trip-plus) > div:first-child { flex: 1; min-width: 0; }

.ms-plus { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(160deg, #3fb870, #1f7a45); color: #fff; box-shadow: 0 8px 18px -10px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.4); }
.ms-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
/* Menu-søjlen: alle piller lige brede */
#homeFold { align-items: stretch; }
.hf-pill { width: 230px; justify-content: space-between; }

/* Prøvekluden: Menu øverst, kompas i midten, plus nederst, med luft imellem; pænere farve på Menu */
body.skin-dag.kunde #dkStart { margin-bottom: 112px; background: linear-gradient(160deg, #4a5bb8 0%, #2a3478 55%, #1b2150 100%) !important; box-shadow: 0 12px 24px -10px rgba(10, 14, 40, .8), inset 0 1.5px 0 rgba(255,255,255,.3), inset 0 0 0 1.5px rgba(255,255,255,.18) !important; }
body.skin-dag.kunde #locBtn { background: linear-gradient(160deg, #3a4a8a, #1b2150); }
body.skin-dag.kunde #locBtn.on { background: linear-gradient(160deg, #4aa3e8, #1f5f9f); }
/* Steder-overskrift i Prøvekluden: kun titel + tre små knapper, uden lang undertekst */
body.skin-dag.kunde .ms-peek .ms-sum small { display: none; }
body.skin-dag.kunde .ms-peek .ms-sum b { font-size: 24px; white-space: nowrap; }
body.skin-dag.kunde .ms-row { gap: 6px; align-items: center; }
body.skin-dag.kunde .ms-row .ms-sum { flex: 1; min-width: 0; }
body.skin-dag.kunde .ms-plus, body.skin-dag.kunde .ms-fold, body.skin-dag.kunde .ms-trash, body.skin-dag.kunde .ms-close { width: 42px !important; height: 42px !important; }
body.skin-dag.kunde .ms-plus svg, body.skin-dag.kunde .ms-fold svg, body.skin-dag.kunde .ms-trash svg { width: 22px; height: 22px; }

.trip-ask2 { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.trip-ask2 input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: 700 17px var(--sans); box-shadow: inset 0 0 0 2px #4aa3e8; outline: none; }
.trip-ask2 .ta-ok { min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(160deg, #3fb870, #1f7a45); color: #fff; font: 800 16px var(--sans); }
.trip-ask2 .ta-x { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; }
/* Stedkort: de tre knapper skal være i billedet (ikke klippet) */
.sheet-hero-acts { top: calc(80px + var(--safe-t, 0px)) !important; gap: 8px !important; }
.sheet-hero-acts > button { width: 42px !important; height: 42px !important; min-height: 0 !important; padding: 0 !important; }
.sheet-hero-acts .sheet-edit svg, .sheet-hero-acts .sheet-cov svg, .sheet-hero-acts .sheet-trash svg { width: 20px !important; height: 20px !important; }
body.skin-dag.kunde .ms-row { gap: 14px; }
body.skin-dag.kunde .ms-row .ms-close { margin-left: 4px; }

.side-toast.st-ok { background: #2f9d5a; color: #fff; }
.side-toast.st-hold { background: #2f7de8; color: #fff; }
.side-toast.st-share { background: #8b5cf6; color: #fff; }

/* Auto/Manuel-kontakt */
#pinBar { gap: 22px; }
#pinBar .pb-peg { width: 170px !important; height: 92px !important; border-radius: 999px !important; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 22px 0 14px; background: linear-gradient(160deg, #2e8a55, #1d5c38); transition: background .25s; }
#pinBar .pb-peg .pg-knob { flex: none; width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 12px -4px rgba(0,0,0,.5); }
#pinBar .pb-peg .pg-knob svg { width: 38px; height: 38px; stroke: #1d5c38; }
#pinBar .pb-peg .pg-t { font: 800 17px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
#pinBar .pb-peg.on { background: linear-gradient(160deg, #3a8cf0, #1f5fb8); flex-direction: row-reverse; padding: 0 14px 0 22px; box-shadow: 0 12px 24px -10px rgba(0,0,0,.7), 0 0 0 3px #fff; }
#pinBar .pb-peg.on .pg-knob svg { stroke: #1f5fb8; }
#pinBar .pb-cam { width: 92px !important; height: 92px !important; }
.gp-tag { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: #2f9d5a; color: #fff; font: 800 11px var(--sans); letter-spacing: .12em; box-shadow: 0 4px 10px -4px rgba(0,0,0,.6); }
.gp-wrap.fing .gp-tag { display: none; }
.gp-hand { display: none; position: absolute; left: 50%; bottom: 14px; width: 40px; height: 40px; margin-left: -6px; pointer-events: none; }
.gp-hand .gp-hand-ic { width: 40px; height: 40px; fill: #fff; stroke: #1b2150; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.gp-wrap.hint .gp-hand { display: block; animation: gpDrag 1.8s ease-in-out infinite; }
@keyframes gpDrag { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(34px, -24px); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
.fly-pin { position: fixed; z-index: 3200; width: 44px; height: 62px; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.fly-pin svg { width: 44px; height: 62px; }
.fly-pin.gps path { fill: #2f9d5a; } .fly-pin.fing path { fill: #2f7de8; }
#dkStart.got { animation: menuGot .9s ease-out; }
@keyframes menuGot { 0% { transform: scale(1); } 30% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(255, 210, 77, .55); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 77, 0); } }
#pinBar .pb-peg { width: 186px !important; }
#pinBar .pb-peg.on { padding: 0 14px 0 26px; }
#pinBar .pb-peg .pg-t { font-size: 16px; }

/* Delt Auto | Manuel-kontakt */
#pinBar .pb-peg { width: auto !important; height: 84px !important; padding: 5px !important; gap: 4px !important; display: flex !important; flex-direction: row !important; align-items: stretch; border-radius: 999px !important; background: rgba(16, 22, 40, .94) !important; box-shadow: 0 12px 24px -10px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.3) !important; }
#pinBar .pb-peg.on { flex-direction: row !important; box-shadow: 0 12px 24px -10px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.3) !important; }
#pinBar .pb-peg .pg-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 92px !important; height: auto !important; padding: 0 !important; border: 0; border-radius: 999px !important; background: transparent !important; color: rgba(255,255,255,.65); box-shadow: none !important; transition: background .2s, color .2s; }
#pinBar .pb-peg .pg-seg svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#pinBar .pb-peg .pg-seg b { font: 800 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#pinBar .pb-peg .pg-seg.on { color: #fff; background: linear-gradient(160deg, #3fb870, #1f7a45) !important; }
#pinBar .pb-peg .pg-seg[data-seg="man"].on { background: linear-gradient(160deg, #3a8cf0, #1f5fb8) !important; }

/* Al information på selve dråben; boblen i toppen er skjult */
#pinTop #pinName { display: none !important; }
.gp-top { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.gp-top .gp-tag { position: static; transform: none; font-size: 12px; padding: 3px 12px; }
.gp-top .gp-label { position: static; transform: none; left: auto; bottom: auto; display: grid; justify-items: center; gap: 1px; max-width: 280px; min-width: 90px; padding: 8px 18px 9px; border-radius: 22px; font: 800 20px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.gp-top .gp-label b { font: 800 20px/1.15 var(--sans); max-width: 244px; overflow: hidden; text-overflow: ellipsis; }
.gp-top .gp-label small { font: 600 15px/1.2 var(--sans); opacity: .8; max-width: 244px; overflow: hidden; text-overflow: ellipsis; }
.gp-wrap.fing .gp-top .gp-label { box-shadow: 0 6px 14px -6px rgba(0,0,0,.7), inset 0 0 0 2px #4aa3e8; }
.gp-wrap.gps .gp-top .gp-label { box-shadow: 0 6px 14px -6px rgba(0,0,0,.7), inset 0 0 0 2px #2f9d5a; }
/* Navnet på dråben: ingen afskæring, passende bredde */
.gp-top .gp-label { width: max-content; max-width: 300px; min-width: 0; padding: 8px 20px 9px; overflow: visible; }
.gp-top .gp-label b { display: block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-top .gp-label small { display: block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Redigér-bjælken lægger sig under side-toasten */
#savedChip { top: calc(148px + var(--safe-t, 0px)); }

/* Fast Steder-knap mellem Menu og min position */
#stedBtn { position: fixed; z-index: 880; width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(160deg, #3fb870, #1f7a45); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.35); }
#stedBtn svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#stedBtn.got { animation: menuGot .9s ease-out; }
body.skin-dag.kunde #dkStart { margin-bottom: 190px; }
body.smartpin #stedBtn, body:has(#modal.open) #stedBtn, body:has(#drawer.open) #stedBtn, body:has(#sheet.open) #stedBtn, body:has(#homeFold) #stedBtn { display: none !important; }

/* Manuel: dråben er låst, og den lille finger viser, at man skal trække i kortet */
@keyframes gpDrag { 0% { transform: translate(40px, 8px); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(-30px, -8px); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(40px, 8px); opacity: 0; } }
.gp-wrap.hint .gp-hand { left: 100%; bottom: 8px; margin-left: 4px; }

#dkStart.got, #stedBtn.got { animation: menuGot 1.3s ease-out; }
@keyframes menuGot { 0% { transform: scale(1); } 25% { transform: scale(1.3); box-shadow: 0 0 0 14px rgba(255, 210, 77, .6); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 77, 0); } }

/* Lille kort på et sted, mens smart plus er åben */
#miniCard { position: fixed; z-index: 975; width: 330px; max-width: calc(100vw - 20px); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(16, 22, 40, .96); color: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.25); animation: trashIn .18s ease-out; }
#miniCard .mc-t { flex: 1; min-width: 0; display: grid; }
#miniCard .mc-t b { font: 800 17px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#miniCard .mc-t small { font: 600 13px var(--sans); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#miniCard button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; }
#miniCard .mc-del { background: #d8412f; }
#miniCard .mc-open { background: #2f9e57; }
#miniCard .mc-fix { background: #2f6fd6; }
#miniCard .mc-x { background: rgba(255,255,255,.16); }
#miniCard svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Steder: numre og ryd-op-tilstand */
.it-no { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-right: 8px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: 800 13px var(--sans); font-style: normal; vertical-align: 1px; }
.it-del { display: none; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #d8412f; color: #fff; margin-left: 8px; }
.it-del svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
#drawer.listedit .it-del { display: grid; }
#drawer.listedit .it-edit { display: none !important; }
#drawer.listedit .item { animation: itWiggle .5s ease-in-out infinite alternate; }
@keyframes itWiggle { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }
.ms-edit { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.ms-edit svg { width: 22px; height: 22px; }
.ms-edit.on { background: #f2b81e; color: #1b1405; }

/* Hoppende prikker, mens position og navn findes */
.gp-dots { display: inline-flex !important; gap: 7px; align-items: center; height: 24px; padding: 0 6px; }
.gp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block; animation: gpDot .9s ease-in-out infinite; }
.gp-dots i:nth-child(2) { animation-delay: .15s; } .gp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gpDot { 0%, 60%, 100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-9px); opacity: 1; } }

/* Klokken under tandhjulet i Prøvekluden (smagsprøve og demoer) */
body.skin-dag.salg #bellBtn { display: grid !important; top: calc(var(--safe-t, 0px) + 122px); right: 16px; }

.bell-enable { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; padding: 14px 18px; border: 0; border-radius: 22px; background: linear-gradient(160deg, #3a8cf0, #1f5fb8); color: #fff; text-align: left; box-shadow: 0 10px 22px -12px rgba(0,0,0,.6), inset 0 1.5px 0 rgba(255,255,255,.35); }
.bell-enable .be-ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.25); }
.bell-enable svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bell-enable b { display: block; font: 800 18px var(--sans); }
.bell-enable small { display: block; font: 500 14px var(--sans); opacity: .85; }

.bell-enable { background: rgba(255,255,255,.07) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18) !important; padding: 12px 14px !important; }
.bell-enable .be-ic { background: #2f7de8; }
.bell-enable .be-t { flex: 1; min-width: 0; }
.bell-enable b { font-size: 17px; }
.be-sw { flex: none; position: relative; width: 62px; height: 36px; border: 0; border-radius: 999px; background: rgba(255,255,255,.22); transition: background .2s; }
.be-sw i { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: transform .2s; }
.be-sw.on { background: #2f9d5a; }
.be-sw.on i { transform: translateX(26px); }

/* Kameraet vinker, til der er taget et billede */
#pinBar .pb-cam:has(.pb-n.zero) { animation: camNudge 2.6s ease-in-out 1.2s infinite; }
@keyframes camNudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255,255,255,.22); } 90% { transform: scale(1); } }
#pinBar .pb-n.zero { background: #d8412f; color: #fff; }

body.smartpin #bellBtn { display: none !important; }
.fly-pin .fp-new { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; background: #ffd24d; color: #1b1405; font: 800 12px/1.3 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 3px 8px rgba(0,0,0,.4); }

/* Kameraet ryster med mellemrum, til der er et billede */
#pinBar .pb-cam:has(.pb-n.zero) { animation: camShake 3.4s ease-in-out 1.5s infinite; }
@keyframes camShake { 0%, 72%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-10deg) scale(1.08); } 80% { transform: rotate(9deg) scale(1.08); } 84% { transform: rotate(-7deg) scale(1.06); } 88% { transform: rotate(5deg) scale(1.04); } 92% { transform: rotate(-2deg) scale(1); } }
body.smartpin.skin-dag.salg #bellBtn, body.smartpin.skin-dag #bellBtn { display: none !important; }

/* Skalering: knapperne følger skærmens bredde (--sc sættes i app.js) */
body.skin-dag.kunde #fab, body.skin-dag.kunde #dkStart { width: calc(68px * var(--sc, 1)) !important; height: calc(68px * var(--sc, 1)) !important; }
body.skin-dag.kunde #dkStart svg { transform: scale(var(--sc, 1)); }
#stedBtn, #locBtn { width: calc(64px * var(--sc, 1)); height: calc(64px * var(--sc, 1)); }
#stedBtn svg, #locBtn svg { width: calc(34px * var(--sc, 1)); height: calc(34px * var(--sc, 1)); }
#pinBar { zoom: var(--sc, 1); }
#pinTop .pb-x, #pinTop #pinName .pn-edit, #pinTop .pb-lup, #pinTop .pb-ok { width: calc(64px * var(--sc, 1)) !important; height: calc(64px * var(--sc, 1)) !important; right: calc(12px * var(--sc, 1)); }
#pinTop .pb-ok svg, #pinTop .pb-x svg, #pinTop .pb-lup svg { width: calc(34px * var(--sc, 1)); height: calc(34px * var(--sc, 1)); }
.hf-pill { zoom: var(--sc, 1); }
.gp-wrap .gp { zoom: var(--sc, 1); }
#savedChip, .side-toast { zoom: var(--sc, 1); }

/* Siden: de tre knapper lidt længere ned, og luft imellem (skalerer med skærmen) */
#pinTop .pb-x { top: 41%; }
#pinTop .pb-lup { top: calc(41% + 78px * var(--sc, 1)); }
#pinTop .pb-ok { top: calc(41% + 156px * var(--sc, 1)); }
/* Mere luft mellem knapperne i stakken til højre */
body.skin-dag.kunde #dkStart { margin-bottom: calc(190px * var(--sc, 1)); }
/* Steder-knappen er pink, så den ikke ligner plus (grøn) */
#stedBtn { background: linear-gradient(160deg, #f26aa0 0%, #d9407f 55%, #a82a62 100%); box-shadow: 0 10px 22px -10px rgba(120, 20, 70, .8), inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 0 0 2px rgba(255,255,255,.28); }

/* Blødere fold ud og sammen */
.hf-pill { animation: hfIn .38s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes hfIn { from { opacity: 0; transform: translateY(26px) scale(.82); } to { opacity: 1; transform: none; } }
#homeFold.closing .hf-pill { animation: hfOut .3s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc((5 - var(--i)) * 30ms); }
@keyframes hfOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(30px) scale(.8); } }

/* Vælg-tilstand i Steder: runde afkrydsninger og samlet slet */
.it-chk { display: none; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.55); margin-left: 8px; }
.it-chk svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.it-chk.on { background: #d8412f; border-color: #d8412f; }
.it-chk.on svg { opacity: 1; }
#drawer.listedit .it-chk { display: grid; }
.it-del { display: none !important; }
#drawer.listedit .item { animation: none !important; }
#selBar { position: absolute; left: 14px; right: 14px; bottom: 76px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(16, 22, 40, .97); color: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.25); }
#selBar b { flex: 1; text-align: center; font: 800 17px var(--sans); }
#selBar .sb-all { border: 0; background: rgba(255,255,255,.14); color: #fff; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 800 14px var(--sans); }
#selBar .sb-del { display: inline-flex; align-items: center; gap: 6px; min-width: 56px; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: #d8412f; color: #fff; font: 800 17px var(--sans); }
#selBar .sb-del[disabled] { opacity: .4; }
#selBar .sb-del svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drawer { position: relative; }
#selBar { position: fixed !important; left: 26px; right: 26px; bottom: calc(96px + var(--safe-b, 0px)); z-index: 960; }
/* Overskriften i Steder: mindre knapper, så titlen får plads */
body.skin-dag.kunde .ms-row { gap: 8px; }
body.skin-dag.kunde .ms-plus, body.skin-dag.kunde .ms-fold, body.skin-dag.kunde .ms-trash, body.skin-dag.kunde .ms-close, body.skin-dag.kunde .ms-edit { width: 38px !important; height: 38px !important; }
body.skin-dag.kunde .ms-peek .ms-sum b { font-size: 20px; }

/* Prøvekluden: beskeder nederst i midten, væk fra tandhjul, klokke og knapper */
@media (max-width: 760px) {
  body.skin-dag .toasts { top: auto !important; bottom: calc(26px + var(--safe-b, 0px)); left: 14px; right: calc(96px * var(--sc, 1)); transform: none; }
  body.skin-dag.smartpin .toasts { bottom: calc(150px + var(--safe-b, 0px)); }
  body.skin-dag .toasts > * { max-width: 100%; }
}

/* Flyt nål: pulserende ring om det gamle sted */
.mv-wrap { background: none; border: 0; }
.mv-ring { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; border: 4px solid #2f7de8; background: rgba(47,125,232,.18); animation: mvRing 1.6s ease-out infinite; }
.mv-ring.r2 { animation-delay: .8s; }
@keyframes mvRing { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(1.6); opacity: 0; } }

.chip.tr-more[hidden] { display: none; }
.chip.tr-plus { font-weight: 800; background: rgba(17,25,43,.12); }
body.night .chip.tr-plus { background: rgba(255,255,255,.16); }

/* Menu-knappen: teksten rykket op mod midten */
body.skin-dag.kunde #dkStart { gap: 0 !important; align-content: center; }
body.skin-dag.kunde #dkStart b { margin-top: -5px; }
body.skin-dag.kunde #dkStart svg { margin-top: -2px; }

/* Tom Billeder-side på stedkortet: hjælpetekst og stor knap */
.ph-empty { display: grid; justify-items: center; gap: 8px; margin: 26px 8px 0; padding: 26px 18px; border-radius: 20px; border: 2px dashed rgba(127,140,160,.4); text-align: center; }
.ph-empty svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.ph-empty b { font: 800 18px var(--sans); }
.ph-empty p { margin: 0; font: 500 15px/1.4 var(--sans); opacity: .75; }
.ph-empty-btn { margin-top: 6px; padding: 14px 26px; border: 0; border-radius: 999px; background: #2fa66a; color: #fff; font: 800 16px var(--sans); }
/* Uden billeder erstatter den store knap i den tomme boks den blå Billeder-knap */
.ph-actions.ph-none { display: none; }

/* Skin Bund-menu: fanebjælke med løftet plus */
body.skin-bund .kort-bar.bund-bar { display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: end; left: 0; right: 0; bottom: 0; padding: 10px 6px max(8px, calc(var(--safe-b, 0px) - 14px)); border-radius: 24px 24px 0 0; }
.bb-tab { display: grid; justify-items: center; gap: 3px; min-height: 48px; padding: 2px 0; border: 0; background: none; color: inherit; font: 700 12px var(--sans); cursor: pointer; opacity: .78; }
.bb-tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bb-tab:active { opacity: 1; transform: scale(.94); }
.bb-plus { justify-self: center; align-self: start; width: 66px; height: 66px; margin-top: -34px; display: grid; place-items: center; border: 4px solid rgba(250, 250, 252, .96); border-radius: 50%; background: #2fa66a; color: #fff; box-shadow: 0 10px 22px -8px rgba(20, 90, 50, .8); cursor: pointer; }
body.night .bb-plus, body.dark .bb-plus { border-color: rgba(28, 33, 50, .96); }
.bb-plus svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.bb-plus:active { transform: scale(.94); }

/* Bund-menu: kildeangivelsen (OpenStreetMap) skal blive synlig, så den flyttes op over bjælken */
body.skin-bund .leaflet-bottom { bottom: calc(86px + var(--safe-b, 0px)); }
body.skin-bund :is(#stedBtn, #locBtn) { display: none !important; }
.bb-tab.on { opacity: 1; color: #6fb8ff; }

/* Smart plus: ✓-knappen viser selv, hvad man skal gøre: en finger trykker, og ringen fylder, som når man holder nede */
#pinTop .pb-ok.demo .pb-ring { border-color: #ffd24d; animation: pbDemo 2.6s linear infinite; }
.pb-ok.demo::after { content: ''; position: absolute; right: -10px; bottom: -14px; width: 34px; height: 34px; pointer-events: none; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='%2311192b' stroke-width='1.4' stroke-linejoin='round'><path d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11l.5-.5V9a1.5 1.5 0 0 1 3 0v2a1.5 1.5 0 0 1 3 0v4.5a5.5 5.5 0 0 1-5.5 5.5h-1.2a5.5 5.5 0 0 1-4.3-2.1L4.5 15.5a1.4 1.4 0 0 1 2-2L9 15.5z'/></svg>"); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); animation: pbFinger 2.6s ease-in-out infinite; }
@keyframes pbFinger { 0% { transform: translate(8px, 8px) scale(1); opacity: 0; } 8% { transform: translate(0, 0) scale(1); opacity: 1; } 14% { transform: translate(-6px, -6px) scale(.88); opacity: 1; } 80% { transform: translate(-6px, -6px) scale(.88); opacity: 1; } 92% { transform: translate(6px, 6px) scale(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes pbDemo { 0% { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); opacity: 1; } 10% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%); opacity: 1; } 20% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%); opacity: 1; } 30% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%); opacity: 1; } 40% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); opacity: 1; } 85% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); opacity: 1; } 95% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); opacity: 0; } 100% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); opacity: 0; } }

/* Smart plus, Manuel: instruktionen midt på skærmen under dråben */
#moveHint { position: fixed; z-index: 3100; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; background: #2f7de8; color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55); font: 800 16px var(--sans); white-space: nowrap; pointer-events: none; animation: moveHintIn .25s ease-out; }
#moveHint svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes moveHintIn { from { opacity: 0; margin-top: 10px; } }

/* Prøvekluden 2: Menu-folden er mere kompakt og står lige over Menu-fanen */
body.skin-bund #homeFold { right: 10px; gap: 12px; }
body.skin-bund .hf-pill { height: 48px; width: 200px; padding: 0 6px 0 18px; font-size: 16px; }
body.skin-bund .hf-ic { width: 38px; height: 38px; }
body.skin-bund .hf-ic svg { width: 22px; height: 22px; }

/* Smart plus: kameraet vrikker ikke (kun OK-knappen viser, hvad man skal gøre), og har sin egen farve */
#pinBar .pb-cam, #pinBar .pb-cam:has(.pb-n.zero) { animation: none !important; background: linear-gradient(160deg, #2fb5a3, #1c7f86) !important; }

/* Kildeangivelsen (OpenStreetMap): lille afrundet glas-pille, der flyder over kortet. Teksten skal blive stående */
.leaflet-control-attribution { margin: 0 8px 8px 0 !important; padding: 3px 10px !important; border-radius: 999px !important; font: 600 10.5px/1.4 var(--sans) !important; color: #3b4660 !important; background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(255, 255, 255, .6); }
.leaflet-control-attribution a { color: inherit !important; text-decoration: none !important; }
body.dark .leaflet-control-attribution, body.night .leaflet-control-attribution { color: #c9d1e3 !important; background: rgba(15, 20, 34, .62) !important; }

/* Fingeren, der viser at kortet kan flyttes, står under dråben */
.gp-wrap.hint .gp-hand { left: 50%; bottom: -210px; margin-left: -20px; }

/* Prøvekluden 2: stor Gem-knap med tekst, og "Nyt sted" under plus */
.pb-oklbl { display: none; }
body.skin-bund #pinTop .pb-ok { width: auto !important; min-width: calc(64px * var(--sc, 1)); padding: 0 calc(22px * var(--sc, 1)) 0 calc(16px * var(--sc, 1)); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 800 calc(20px * var(--sc, 1)) var(--sans); }
body.skin-bund #pinTop .pb-ok .pb-oklbl { display: inline; }
body.skin-bund #pinTop .pb-ok .pb-ring { display: none; }
body.skin-bund #pinTop .pb-ok.ready { animation: gemGlow 1.6s ease-in-out infinite; }
@keyframes gemGlow { 0%, 100% { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), 0 0 0 0 rgba(63, 184, 112, .55); } 50% { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7), 0 0 0 12px rgba(63, 184, 112, 0); } }
.bb-pl { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(8px, calc(var(--safe-b, 0px) - 14px)); font: 700 12px var(--sans); opacity: .9; pointer-events: none; }

/* Prøvekluden 2: Gem-knappen er rund, med Gem under fluebenet */
body.skin-bund #pinTop .pb-ok { width: calc(68px * var(--sc, 1)) !important; height: calc(68px * var(--sc, 1)) !important; min-width: 0; padding: 0; border-radius: 50% !important; flex-direction: column; gap: 0; font-size: calc(14px * var(--sc, 1)); line-height: 1; }
body.skin-bund #pinTop .pb-ok svg { width: calc(30px * var(--sc, 1)); height: calc(30px * var(--sc, 1)); }

/* Prøvekluden 2: Steder-fanen springer og lyser, når dråben lander */
.bb-tab.got { animation: tabGot 1.3s ease-out; }
.bb-tab.got svg { animation: tabGotIc 1.3s ease-out; }
@keyframes tabGot { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 77, .7); border-radius: 18px; background: rgba(255, 210, 77, .0); } 25% { box-shadow: 0 0 0 10px rgba(255, 210, 77, .5); background: rgba(255, 210, 77, .22); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 77, 0); background: rgba(255, 210, 77, 0); } }
@keyframes tabGotIc { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.4); color: #ffd24d; } 50% { transform: scale(.9); } 70% { transform: scale(1.12); } }

/* Prøvekluden 2: toasts (fx Fortryd) ligger over bund-menuen */
body.skin-bund .toasts { bottom: calc(118px + var(--safe-b, 0px)) !important; }

/* Prøvekluden 2: ingen kameraknap, og et billedligt spørgsmål ved Gem */
body.skin-bund #pinBar .pb-cam { display: none !important; }
#ideaPop .ip-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ideaPop .ip-tile { display: grid; justify-items: center; align-content: center; gap: 10px; aspect-ratio: 1; padding: 12px; border: 0; border-radius: 24px; color: #fff; font: 800 16px/1.2 var(--sans); text-align: center; }
#ideaPop .ip-tile.cam { background: linear-gradient(160deg, #2fb5a3, #1c7f86); }
#ideaPop .ip-tile.pick { background: linear-gradient(160deg, #7a6ae0, #4a3fb0); }
#ideaPop .ip-tile svg { width: 58px; height: 58px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ideaPop .ip-tile:active { transform: scale(.96); }
#ideaPop .ip-skip { justify-content: center; background: rgba(255, 255, 255, .12); }
#ideaPop .ip-skip svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Prøvekluden 2: tre valg, Auto, Manuel og Fra før */
#pinBar .pb-peg .pg-seg[data-seg="ago"].on { background: linear-gradient(160deg, #8a6ae6, #5236b3) !important; }
#pinBar .pb-peg .pg-seg { width: 84px !important; }
#ideaPop .ip-pickday { position: relative; overflow: hidden; }
#ideaPop .ip-pickday input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Kildeangivelsen (OSM) flyttet: nederst til venstre over bund-menuen, og øverst til venstre, mens man sætter et sted (så den ikke ligger i vejen for Auto/Manuel) */
body.skin-bund .leaflet-bottom.leaflet-right { right: auto !important; left: 0 !important; }
body.skin-bund .leaflet-bottom.leaflet-right .leaflet-control-attribution { margin: 0 0 8px 8px !important; }
body.smartpin .leaflet-bottom.leaflet-right { bottom: auto !important; top: calc(var(--safe-t, 0px) + 8px) !important; left: 0 !important; right: auto !important; }
body.smartpin .leaflet-bottom.leaflet-right .leaflet-control-attribution { margin: 0 0 0 8px !important; }

/* Prøvekluden 2: rød luk-knap på spørgsmålene, og større "Gem uden billede" */
#ideaPop .ip-gfx { position: relative; padding-top: 22px; }
#ideaPop .ip-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #d6402c; color: #fff; z-index: 1; }
#ideaPop .ip-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
#ideaPop .ip-gfx .ip-h { margin-right: 46px; }
#ideaPop .ip-skip { min-height: 68px; font-size: 19px; }
#ideaPop .ip-skip svg { width: 28px; height: 28px; }

/* Prøvekluden 2: pin-visningens bund-bjælke (Auto, Manuel, Gem, Tidligere, Annuller). De gamle knapper er skjult, men får tryk videre */
body.skin-bund #pinBar, body.skin-bund #pinTop .pb-x, body.skin-bund #pinTop .pb-ok { display: none !important; }
#pinNav { display: none; }
body.skin-bund #pinNav { display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 905; padding: 10px 6px max(8px, calc(var(--safe-b, 0px) - 14px)); border-radius: 24px 24px 0 0; background: rgba(250, 250, 252, .94); color: #11192b; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 -2px 30px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .1); }
body.dark.skin-bund #pinNav, body.night.skin-bund #pinNav { background: rgba(28, 33, 50, .94); color: #fff; box-shadow: 0 -2px 30px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .12); }
#pinNav .bb-tab.on { opacity: 1; color: #6fb8ff; }
#pinNav .pn-x { color: #d6402c; opacity: 1; }
#pinNav .pn-gem.ready { animation: gemGlow 1.6s ease-in-out infinite; }

/* Prøvekluden 2: bund-bjælkerne en anelse større */
body.skin-bund :is(#pinNav, .bund-bar) .bb-tab { min-height: 56px; gap: 4px; font-size: 13.5px; }
body.skin-bund :is(#pinNav, .bund-bar) .bb-tab svg { width: 30px; height: 30px; }
body.skin-bund :is(#pinNav, .bund-bar) .bb-plus { width: 74px; height: 74px; margin-top: -40px; }
body.skin-bund :is(#pinNav, .bund-bar) .bb-plus svg { width: 36px; height: 36px; }
body.skin-bund :is(#pinNav, .bund-bar) { grid-template-columns: 1fr 1fr 92px 1fr 1fr; }
body.skin-bund :is(#pinNav, .bund-bar) .bb-pl { font-size: 13.5px; }

body.skin-bund :is(#pinNav, .bund-bar) .bb-tab b { white-space: nowrap; }

/* Prøvekluden 2: fælles bund-bjælke i lister og vinduer, farven følger vinduet (--nc) */
body.skin-bund.has-nav :is(.m-backbar, .pn-back) { display: none !important; }
body.has-nav #modal { padding-bottom: 104px !important; }
body.has-nav .drawer { bottom: 96px !important; }
#navBar { display: grid; grid-template-columns: 1fr 1fr 92px 1fr 1fr; align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; padding: 10px 6px max(8px, calc(var(--safe-b, 0px) - 14px)); border-radius: 24px 24px 0 0; background: rgba(250, 250, 252, .96); color: #11192b; border-top: 3px solid var(--nc, #5a6a90); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 -2px 30px rgba(0, 0, 0, .25); }
body.dark #navBar, body.night #navBar { background: rgba(28, 33, 50, .96); color: #fff; }
#navBar .bb-tab { min-height: 56px; gap: 4px; font-size: 13.5px; }
#navBar .bb-tab svg { width: 30px; height: 30px; }
#navBar .bb-tab b { white-space: nowrap; }
#navBar .bb-tab.on { opacity: 1; color: var(--nc, #6fb8ff); }
#navBar .bb-plus { width: 74px; height: 74px; margin-top: -40px; background: var(--nc, #2fa66a); }
#navBar .bb-plus svg { width: 36px; height: 36px; }
#navBar .bb-pl { font-size: 13.5px; }
#navBar { z-index: 1800; }
body.has-nav :is(.m-round, .pn-round, .bk-round, .le-round, .tp-round) { display: none !important; }
body.has-nav #drawer.drawer { bottom: calc(104px + var(--safe-b, 0px)) !important; }
body.has-nav #modalCard .m-backbar, body.has-nav #modalCard .m-foot.m-backbar, body.has-nav #modalCard .m-round, body.has-nav #drawer .pn-back, body.has-nav #drawer .pn-round { display: none !important; }
body.has-nav #drawer .drawer-list { padding-bottom: 120px; }

#navBar.no-plus { grid-template-columns: repeat(4, 1fr); }
body.has-nav #drawer .ms-edit, body.has-nav #drawer .ms-plus, body.has-nav .modal-card .trip-plus { display: none !important; }

/* Når bund-bjælken er der, har Steder-listen en fast højde mellem toppen og bjælken, så den kan rulles */
body.has-nav #drawer.drawer { position: fixed !important; left: 10px !important; right: 10px !important; width: auto !important; top: calc(var(--safe-t, 0px) + 12px) !important; bottom: calc(104px + var(--safe-b, 0px)) !important; height: auto !important; max-height: none !important; transform: none; }
#navBar.five { grid-template-columns: repeat(5, 1fr); }

/* Prøvekluden 2, Steder: filter-række (rejse og Vis alle), søgning og Vis alle-boksen ligger i bunden/Mere */
body.has-nav #drawer .ms-quick, body.has-nav #drawer .ms-trash, body.has-nav #drawer [data-msedit] { display: none !important; }
.fl-row { display: flex; gap: 8px; padding: 0 16px 8px; flex-wrap: wrap; }
.fl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: inherit; font: 800 16px var(--sans); max-width: 100%; }
.fl-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-chip svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fl-chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.fl-chip.on { background: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: inset 0 0 0 2px var(--c); }
.fl-clear { background: #d6402c; color: #fff; }

/* Tidligere: kun søgning først. Navn og adresse kommer frem, hvis man vil skrive dem selv */
#ideaPop .ip-first { position: relative; }
#ideaPop .ip-first .ip-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #d6402c; color: #fff; }
#ideaPop .ip-first .ip-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
#ideaPop .ip-first:not(.ip-picked) > .ip-f:not(.ip-s), #ideaPop .ip-first:not(.ip-picked) > [data-ok], #ideaPop .ip-first.ip-picked > .ip-own { display: none; }
#ideaPop .ip-first .ip-s > span { margin-right: 48px; }
#ideaPop .ip-first .ip-s input { min-height: 60px; font-size: 19px; }
#ideaPop .ip-first .ip-r { min-height: 60px; font-size: 16px; white-space: normal; text-align: left; }

/* Prøvekluden 2: lister og vinduer bruger hele skærmen (ingen kort i baggrunden), og bund-bjælken står nederst. Knapper, der skal bruge kortet, lukker vinduet først */
body.has-nav #modal { padding: 0 !important; place-items: stretch !important; background: #0e1526 !important; }
body:not(.dark).has-nav #modal { background: #eef1f7 !important; }
body.has-nav #modal #modalCard { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding-top: calc(var(--safe-t, 0px) + 6px); padding-bottom: calc(104px + var(--safe-b, 0px)); display: flex; flex-direction: column; }
body.has-nav #modalCard .m-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.has-nav #drawer.drawer { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; border-radius: 0 !important; background: #0e1526 !important; padding-top: calc(var(--safe-t, 0px) + 8px); box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 1700; }
body:not(.dark).has-nav #drawer.drawer { background: #eef1f7 !important; }
body.has-nav #drawer .drawer-list { padding-bottom: calc(120px + var(--safe-b, 0px)); }

body.has-nav #modalCard .m-body > .menu-list { align-content: start; }

/* Prøvekluden 2: Menu-folden som en boble med pil, fæstet til Menu-fanen */
body.skin-bund #homeFold { right: 8px; width: 236px; gap: 0; padding: 6px 8px; border-radius: 22px; background: rgba(250, 250, 252, .98); color: #11192b; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .1); align-items: stretch; margin-bottom: 4px; }
body.dark.skin-bund #homeFold, body.night.skin-bund #homeFold { background: rgba(28, 33, 50, .98); color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .14); }
body.skin-bund #homeFold::after { content: ''; position: absolute; right: 26px; bottom: -9px; width: 20px; height: 20px; background: inherit; transform: rotate(45deg); border-radius: 0 0 5px 0; box-shadow: 4px 4px 8px -6px rgba(0, 0, 0, .4); }
body.skin-bund .hf-pill { width: auto; height: 54px; padding: 0 8px; border-radius: 14px; background: none; box-shadow: none; color: inherit; flex-direction: row-reverse; justify-content: flex-end; gap: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 17px; }
body.skin-bund .hf-pill + .hf-pill { border-top: 1px solid rgba(127, 140, 160, .25); border-radius: 0 0 14px 14px; }
body.skin-bund .hf-pill:active { background: rgba(127, 140, 160, .18); }
body.skin-bund .hf-ic { width: 38px; height: 38px; }
body.skin-bund .hf-ic svg { width: 22px; height: 22px; }

/* Prøvekluden 2: fliserne i Menu og rejsesiderne er flade og kompakte i stedet for store og blanke */
body.has-nav .hm-kids { gap: 12px; margin-top: 14px; }
body.has-nav .hm-kid { justify-items: start; align-content: space-between; text-align: left; min-height: 116px; padding: 16px; border-radius: 22px; background: color-mix(in srgb, var(--k) 16%, #1a2236) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 42%, transparent) !important; }
body:not(.dark).has-nav .hm-kid { background: color-mix(in srgb, var(--k) 14%, #fff) !important; }
body.has-nav .hm-ic { width: 48px; height: 48px; border-radius: 15px; background: var(--k) !important; box-shadow: none !important; }
body.has-nav .hm-ic svg { width: 27px; height: 27px; stroke-width: 2; }
body.has-nav .hm-kid b { font: 800 19px/1.2 var(--sans); text-shadow: none !important; color: #fff; }
body:not(.dark).has-nav .hm-kid b { color: #11192b; }

body.has-nav .hm-kids { align-content: start; grid-auto-rows: 116px; }

/* Steder, Mere: boble med pil over fanen */
#mereBubble { position: fixed; z-index: 1850; width: 232px; padding: 6px 8px; border-radius: 22px; background: rgba(250, 250, 252, .98); color: #11192b; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .1); animation: okHintIn .2s ease-out; }
body.dark #mereBubble, body.night #mereBubble { background: rgba(34, 40, 60, .99); color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .16); }
#mereBubble::after { content: ''; position: absolute; right: var(--ar, 26px); bottom: -9px; width: 20px; height: 20px; background: inherit; transform: rotate(45deg); border-radius: 0 0 5px 0; }
#mereBubble .mb-row { display: flex; align-items: center; gap: 14px; width: 100%; height: 56px; padding: 0 8px; border: 0; border-radius: 14px; background: none; color: inherit; font: 800 17px var(--sans); text-align: left; }
#mereBubble .mb-row + .mb-row { border-top: 1px solid rgba(127, 140, 160, .25); border-radius: 0 0 14px 14px; }
#mereBubble .mb-row:active { background: rgba(127, 140, 160, .18); }
#mereBubble .mb-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--k); flex: none; }
#mereBubble .mb-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#mereBubble .mb-n { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: #d6402c; color: #fff; font: 800 14px var(--sans); font-style: normal; }

/* Bobler (Menu og Mere): mørk, sløret baggrund bag dem, solid boble, og lidt højere oppe med længere pil */
#bubbleScrim { position: fixed; inset: 0; background: rgba(6, 10, 22, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: okHintIn .2s ease-out; }
#bubbleScrim.on-mere { z-index: 1840; }
#bubbleScrim.on-fold { z-index: 940; }
body.skin-bund #homeFold, #mereBubble { background: #fff; }
body.dark.skin-bund #homeFold, body.night.skin-bund #homeFold, body.dark #mereBubble, body.night #mereBubble { background: #232a40; }
body.skin-bund #homeFold::after, #mereBubble::after { bottom: -13px; width: 28px; height: 28px; border-radius: 0 0 6px 0; }

#bubbleScrim.on-mere { z-index: 1790; }
#bubbleScrim.on-fold { z-index: 895; }
body.skin-bund #homeFold::after, #mereBubble::after { right: var(--ar, 26px); bottom: -30px; width: 32px; height: 31px; transform: none; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, 100% 0, 50% 100%); }
body.skin-bund #homeFold { --ar: 26px; }

/* Menu-bjælken: sektionerne i deres egne farver, Luk i midten */
body.skin-bund .kort-bar.menu-mode .mb-t svg { color: var(--k); stroke: var(--k); }
body.skin-bund .kort-bar.menu-mode .mb-t { opacity: 1; }
body.skin-bund .kort-bar.menu-mode .mb-x { background: #5a6a90; }
body.skin-bund .kort-bar.menu-mode { animation: menuBarIn .22s ease-out; }
@keyframes menuBarIn { from { transform: translateY(14px); opacity: .6; } }

/* Bobler og bjælke-skift åbner og lukker blødt */
#mereBubble, body.skin-bund #homeFold { transform-origin: calc(100% - var(--ar, 26px) - 16px) 100%; }
#mereBubble { animation: bubIn .34s cubic-bezier(.2, .9, .3, 1.15) both; }
#mereBubble.closing { animation: bubOut .2s ease-in both; }
#mereBubble .mb-row { animation: bubRow .3s ease-out both; }
#mereBubble .mb-row:nth-child(2) { animation-delay: .05s; }
body.skin-bund #homeFold:not(.closing) { animation: bubIn .34s cubic-bezier(.2, .9, .3, 1.15) both; }
body.skin-bund #homeFold.closing { animation: bubOut .24s ease-in both; }
body.skin-bund #homeFold .hf-pill, body.skin-bund #homeFold.closing .hf-pill { animation: none; }
body.skin-bund #homeFold .hf-pill { animation: bubRow .3s ease-out both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
#bubbleScrim { animation: scrimIn .25s ease-out both; }
#bubbleScrim.closing { animation: scrimOut .22s ease-in both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(16px) scale(.78); } }
@keyframes bubOut { to { opacity: 0; transform: translateY(12px) scale(.86); } }
@keyframes bubRow { from { opacity: 0; transform: translateY(8px); } }
@keyframes scrimIn { from { opacity: 0; } }
@keyframes scrimOut { to { opacity: 0; } }
body.skin-bund .kort-bar.swap { animation: barSwap .26s cubic-bezier(.2, .9, .3, 1.1); }
body.skin-bund .kort-bar.swap > * { animation: barSwapIn .3s ease-out both; }
@keyframes barSwap { from { transform: translateY(10px); opacity: .75; } }
@keyframes barSwapIn { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* Prøvekluden 2: hvert område har sin farve på ikonet (samme farve, som det åbner i) */
body.skin-bund :is(.bund-bar, #navBar) :is([data-kb="list"], [data-nb="steder"]) svg { stroke: #ee5fa8; }
body.skin-bund :is(.bund-bar, #navBar) :is([data-kb="trips"], [data-nb="rejser"]) svg { stroke: #f5a04a; }
body.skin-bund .bund-bar [data-kb="loc"] svg { stroke: #5aa0f5; }
body.skin-bund :is(.bund-bar, #navBar) :is([data-kb="menu"], [data-nb="menu"]) svg { stroke: #9aa6f5; }
body.skin-bund #navBar [data-nb="film"] svg { stroke: #8a8cf5; }
body.skin-bund #navBar [data-nb="book"] svg { stroke: #f5a04a; }
body.skin-bund #navBar [data-nb="map"] svg { stroke: #3fcfb4; }
body.skin-bund #navBar [data-nb="search"] svg { stroke: #6fb8ff; }
body.skin-bund :is(.bund-bar, #navBar) .bb-tab { opacity: 1; }
body.skin-bund :is(.bund-bar, #navBar) .bb-tab b { opacity: .88; }
body.skin-bund #navBar .bb-tab.on b { color: var(--nc); opacity: 1; }
body.skin-bund #navBar .grp-t svg { stroke: var(--k); }
body.skin-bund #navBar .grp-t b { white-space: nowrap; font-size: 12.5px; }

/* Fliser med lille info: tal og billeder i stedet for tekst */
body.has-nav .hm-kids { grid-auto-rows: 150px; }
body.has-nav .hm-kid { grid-template-rows: auto 1fr auto; align-content: stretch; gap: 8px; }
body.has-nav .hm-kid .hm-ic { grid-row: 1; }
body.has-nav .hm-kid b { grid-row: 3; align-self: end; }
.hm-info { grid-row: 2; align-self: center; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.mi-c { display: inline-flex; align-items: center; gap: 4px; font: 800 14px var(--sans); font-style: normal; color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .1); padding: 3px 8px 3px 6px; border-radius: 999px; }
body:not(.dark) .mi-c { color: #11192b; background: rgba(0, 0, 0, .07); }
.mi-c svg { width: 15px; height: 15px; fill: none; stroke: var(--k, currentColor); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mi-th { display: inline-flex; margin-right: 2px; }
.mi-th img { width: 28px; height: 28px; border-radius: 9px; object-fit: cover; border: 2px solid #1a2236; margin-left: -8px; }
.mi-th img:first-child { margin-left: 0; }
body.has-nav .hm-kids { grid-auto-rows: 168px; }
.mi-c { font-size: 13.5px; padding: 3px 7px 3px 5px; }

/* Prøvekluden 2: hele bjælken i vinduet får sidens farve (mørk nuance), ikoner og tekst er hvide */
body.skin-bund #navBar { background: color-mix(in srgb, var(--nc, #5a6a90) 50%, #0b1122); border-top: 0; color: #fff; box-shadow: 0 -6px 26px -8px color-mix(in srgb, var(--nc, #5a6a90) 70%, transparent); }
body.skin-bund #navBar .bb-tab svg, body.skin-bund #navBar .grp-t svg { stroke: #fff !important; }
body.skin-bund #navBar .bb-tab b { color: #fff; opacity: .92; }
body.skin-bund #navBar .bb-tab.on { background: rgba(255, 255, 255, .18); border-radius: 16px; }
body.skin-bund #navBar .bb-tab.on b { color: #fff; }
body.skin-bund #navBar .bb-plus { background: #fff; color: var(--nc); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); border-color: color-mix(in srgb, var(--nc, #5a6a90) 50%, #0b1122); }
body.skin-bund #navBar .bb-plus svg { stroke: var(--nc) !important; }
body.skin-bund #navBar .bb-pl { color: #fff; }

/* Menu-sider og rejsesider: stablede kort, ét pr. række, med ikon, navn og små tal */
body.has-nav .hm-kids { grid-template-columns: 1fr; grid-auto-rows: minmax(104px, auto); gap: 12px; margin-top: 10px; }
body.has-nav .hm-kid { display: grid; grid-template-columns: 60px 1fr 22px; grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: center; align-content: center; justify-items: start; padding: 14px 18px; min-height: 104px; }
body.has-nav .hm-kid .hm-ic { grid-column: 1; grid-row: 1 / span 2; width: 60px; height: 60px; border-radius: 18px; }
body.has-nav .hm-kid .hm-ic svg { width: 32px; height: 32px; }
body.has-nav .hm-kid b { grid-column: 2; grid-row: 1; align-self: end; font-size: 21px; }
body.has-nav .hm-kid .hm-info { grid-column: 2; grid-row: 2; align-self: start; align-items: center; min-height: 28px; }
body.has-nav .hm-kid:not(:has(.hm-info)) b { grid-row: 1 / span 2; align-self: center; }
body.has-nav .hm-kid::after { content: ''; grid-column: 3; grid-row: 1 / span 2; width: 12px; height: 12px; border: solid rgba(255, 255, 255, .6); border-width: 0 3px 3px 0; transform: rotate(-45deg); justify-self: center; }
body:not(.dark).has-nav .hm-kid::after { border-color: rgba(17, 25, 43, .5); }
.mi-c { font-size: 15px; padding: 4px 10px 4px 8px; }
.mi-c svg { width: 17px; height: 17px; }
.mi-th img { width: 32px; height: 32px; }

/* Enkle sider: kun en stor Tilbage-knap, ingen overflødige faner */
#navBar.slim { display: flex; justify-content: center; padding-top: 12px; }
#navBar.slim .bb-tab { flex: 0 1 260px; flex-direction: row; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 17px; }
#navBar.slim .bb-tab svg { width: 26px; height: 26px; }
#navBar.slim .bb-tab { display: flex; }
#navBar.slim { grid-template-columns: 1fr !important; }

body.has-nav #selBar { bottom: calc(112px + var(--safe-b, 0px)); z-index: 1750; }

/* Enkel Tilbage-bjælke: lav bjælke med én stor, midtstillet knap */
body.skin-bund #navBar.slim { display: flex; align-items: center; justify-content: center; padding: 10px 16px max(10px, calc(var(--safe-b, 0px) - 6px)); }
body.skin-bund #navBar.slim .bb-tab { flex: 1 1 auto; max-width: 340px; width: 100%; height: 58px; min-height: 58px; padding: 0 28px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); font: 800 19px/1 var(--sans); }
body.skin-bund #navBar.slim .bb-tab b { font-size: 19px; line-height: 1; opacity: 1; }
body.skin-bund #navBar.slim .bb-tab svg { width: 26px; height: 26px; flex: none; }

body.skin-bund .kort-bar.menu-mode .mb-x { background: #d6402c; box-shadow: 0 8px 20px -8px rgba(214, 64, 44, .7); }
body.skin-bund .kort-bar.menu-mode .mb-x ~ .bb-pl { color: #ff8f80; }

/* Hver bjælke har sin farve, så man kan se, at man er skiftet: kort = mørk, Menu = indigo, nyt sted = grøn, sider = sidens farve */
body.skin-bund .kort-bar.menu-mode { background: color-mix(in srgb, #5b6bd6 52%, #0b1122); box-shadow: 0 -6px 26px -8px rgba(91, 107, 214, .7); }
body.skin-bund .kort-bar.menu-mode .mb-t svg { stroke: #fff; color: #fff; }
body.skin-bund .kort-bar.menu-mode .bb-tab b, body.skin-bund .kort-bar.menu-mode .bb-pl { color: #fff; }
body.skin-bund .kort-bar.menu-mode .mb-x ~ .bb-pl { color: #fff; }
body.skin-bund #pinNav { background: color-mix(in srgb, #2fa66a 48%, #0b1122); box-shadow: 0 -6px 26px -8px rgba(47, 166, 106, .6); }
body.skin-bund #pinNav .bb-tab svg, body.skin-bund #pinNav .bb-tab b, body.skin-bund #pinNav .bb-pl { stroke: #fff; color: #fff; }
body.skin-bund #pinNav .bb-tab b { stroke: none; opacity: .92; }
body.skin-bund #pinNav .bb-tab.on { background: rgba(255, 255, 255, .22); border-radius: 16px; color: #fff; }
body.skin-bund #pinNav .bb-tab.on b { opacity: 1; }
body.skin-bund #pinNav .pn-x { color: #ffb3a8; }
body.skin-bund #pinNav .pn-x svg { stroke: #ffb3a8; }
body.skin-bund #pinNav .bb-plus { background: #fff; border-color: color-mix(in srgb, #2fa66a 48%, #0b1122); }
body.skin-bund #pinNav .bb-plus svg { stroke: #1f7a4a; }

/* Menu som stak af kort over bjælken (Prøvekluden 2): ingen Luk-knap, Menu-fanen lukker */
#menuStack { position: fixed; left: 10px; right: 10px; z-index: 930; padding-top: calc(var(--n, 3) * 38px); animation: msIn .3s cubic-bezier(.2, .9, .3, 1.1) both; }
#menuStack.closing { animation: msOut .22s ease-in both; }
@keyframes msIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes msOut { to { opacity: 0; transform: translateY(18px) scale(.97); } }
#menuStack .ms-card { position: absolute; left: calc(var(--d) * 12px); right: calc(var(--d) * 12px); top: calc((var(--n, 3) - var(--d)) * 38px); height: 120px; border-radius: 24px 24px 0 0; background: color-mix(in srgb, var(--k) 38%, #111827); border-top: 3px solid var(--k); box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, .55); z-index: calc(10 - var(--d)); }
#menuStack .ms-card.front { position: relative; top: auto; left: auto; right: auto; height: auto; border-radius: 26px; border: 0; background: color-mix(in srgb, var(--k) 32%, #141b2e); box-shadow: inset 0 3px 0 var(--k), 0 -14px 34px -12px rgba(0, 0, 0, .6); padding-bottom: 12px; z-index: 20; }
#menuStack .ms-head { display: flex; align-items: center; width: 100%; height: 38px; padding: 0 18px; border: 0; background: none; color: #fff; font: 800 15px var(--sans); text-align: left; letter-spacing: .02em; }
#menuStack .ms-card.front .ms-head { height: 44px; font-size: 17px; pointer-events: none; }
#menuStack .ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
#menuStack .ms-grid.n1 { grid-template-columns: 1fr; }
#menuStack .ms-tile { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; align-content: center; min-height: 92px; padding: 12px; border: 0; border-radius: 20px; background: rgba(8, 12, 24, .42); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 45%, transparent); color: #fff; text-align: left; }
#menuStack .ms-tile:active { transform: scale(.97); }
#menuStack .ms-ic { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--k); }
#menuStack .ms-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#menuStack .ms-tile b { grid-column: 2; grid-row: 1; align-self: end; font: 800 16px/1.15 var(--sans); }
#menuStack .ms-tile .hm-info { grid-column: 2; grid-row: 2; align-self: start; min-height: 0; gap: 4px; }
#menuStack .ms-tile:not(:has(.hm-info)) b { grid-row: 1 / span 2; align-self: center; }
#menuStack .mi-c { font-size: 12.5px; padding: 2px 7px 2px 5px; }
#menuStack .mi-c svg { width: 14px; height: 14px; }
#menuStack .mi-th img { width: 24px; height: 24px; }
body.skin-bund .kort-bar [data-kb="menu"].open svg { stroke: #fff; }

/* Spillekort: de bagerste kort står i vifte med lidt drejning og popper op efter hinanden */
#menuStack .ms-card:not(.front) { transform-origin: 50% 100%; transform: rotate(calc((var(--d) - 1.5) * 1.6deg)); animation: cardPop .42s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--d) * 70ms + 60ms); }
#menuStack .ms-card.front { animation: cardFront .34s cubic-bezier(.2, .9, .3, 1.15) both; }
#menuStack .ms-card:not(.front):active { filter: brightness(1.2); }
@keyframes cardPop { from { opacity: 0; transform: translateY(70px) rotate(0deg) scale(.9); } }
@keyframes cardFront { from { opacity: 0; transform: translateY(40px) scale(.94); } }

/* Menu-bjælken (Prøvekluden 2): erstatter forsiden, mens stakken er åben. Fire sektioner og Luk, ingen plus */
body.skin-bund .kort-bar.menu-mode { grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, #5b6bd6 40%, #0b1122); }
body.skin-bund .kort-bar.menu-mode .mb-t { opacity: 1; }
body.skin-bund .kort-bar.menu-mode .mb-t svg { stroke: var(--k); color: var(--k); }
body.skin-bund .kort-bar.menu-mode .mb-t.on { background: rgba(255, 255, 255, .16); border-radius: 16px; }
body.skin-bund .kort-bar.menu-mode .mb-close svg { stroke: #ff7a66; }
body.skin-bund .kort-bar.menu-mode .mb-close b { color: #ff9d8f; }

#menuScrim { position: fixed; inset: 0; z-index: 920; background: rgba(6, 10, 22, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: scrimIn .25s ease-out both; }
#menuScrim.closing { animation: scrimOut .22s ease-in both; }

body.skin-bund #kortBar.menu-mode { z-index: 940; }

/* Menu-bjælken følger det aktive korts farve */
body.skin-bund .kort-bar.menu-mode { background: color-mix(in srgb, var(--mc, #5b6bd6) 46%, #0b1122); box-shadow: 0 -6px 26px -8px color-mix(in srgb, var(--mc, #5b6bd6) 80%, transparent); transition: background .35s ease, box-shadow .35s ease; }
body.skin-bund .kort-bar.menu-mode .mb-t svg { stroke: #fff; color: #fff; opacity: .75; }
body.skin-bund .kort-bar.menu-mode .mb-t b { color: #fff; opacity: .8; }
body.skin-bund .kort-bar.menu-mode .mb-t.on { background: color-mix(in srgb, var(--mc, #5b6bd6) 70%, #fff 8%); }
body.skin-bund .kort-bar.menu-mode .mb-t.on svg, body.skin-bund .kort-bar.menu-mode .mb-t.on b { opacity: 1; }
body.skin-bund .kort-bar.menu-mode .mb-close svg { stroke: #ffb3a8; opacity: 1; }
body.skin-bund .kort-bar.menu-mode .mb-close b { color: #ffc2b8; opacity: 1; }

/* Friskere farver i Menu-stakken og bjælken */
#menuStack .ms-card { background: linear-gradient(170deg, color-mix(in srgb, var(--k) 70%, #1b2240), color-mix(in srgb, var(--k) 44%, #141a30)); border-top-color: color-mix(in srgb, var(--k) 70%, #fff); }
#menuStack .ms-card.front { background: linear-gradient(170deg, color-mix(in srgb, var(--k) 66%, #1b2240), color-mix(in srgb, var(--k) 38%, #141a30)); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--k) 70%, #fff), 0 -14px 34px -12px rgba(0, 0, 0, .55); }
#menuStack .ms-tile { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(0, 0, 0, .5); }
#menuStack .ms-ic { background: linear-gradient(150deg, color-mix(in srgb, var(--k) 70%, #fff), var(--k)); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
#menuStack .mi-c { background: rgba(255, 255, 255, .2); color: #fff; }
#menuStack .mi-c svg { stroke: #fff; }
body.skin-bund .kort-bar.menu-mode { background: linear-gradient(180deg, color-mix(in srgb, var(--mc, #5b6bd6) 74%, #1b2240), color-mix(in srgb, var(--mc, #5b6bd6) 50%, #141a30)); }
body.skin-bund .kort-bar.menu-mode .mb-t.on { background: rgba(255, 255, 255, .26); }
body.skin-bund .kort-bar.menu-mode .mb-t svg { opacity: .9; }
body.skin-bund .kort-bar.menu-mode .mb-t b { opacity: .92; }
body.skin-bund .kort-bar.menu-mode .mb-close svg { stroke: #fff; }
body.skin-bund .kort-bar.menu-mode .mb-close b { color: #fff; }
body.skin-bund .kort-bar.menu-mode .mb-close { background: rgba(214, 64, 44, .75); border-radius: 16px; }

/* Menu-bjælken viser det forreste korts egne funktioner */
body.skin-bund .kort-bar.menu-mode .mb-t b { white-space: nowrap; font-size: 12.5px; }
body.skin-bund .kort-bar.menu-mode .mb-t svg { stroke: #fff; opacity: 1; }
body.skin-bund .kort-bar.menu-mode .mb-t:not(.mb-close) svg { stroke: #fff; }

/* Menu-bjælken: genvejene til kortene. Sider åbnet fra Menu viser kortets funktioner */
body.skin-bund .kort-bar.menu-mode .mb-t svg { stroke: var(--k); opacity: 1; }
body.skin-bund .kort-bar.menu-mode .mb-t.on svg { stroke: #fff; }
body.skin-bund .kort-bar.menu-mode .mb-close svg { stroke: #fff; }
body.skin-bund #navBar .grp-t b { white-space: nowrap; font-size: 12.5px; }

/* Luk: hvid fane med rødt kryds, så den kan ses på alle farver */
body.skin-bund .kort-bar.menu-mode .mb-close { background: #fff; border-radius: 16px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
body.skin-bund .kort-bar.menu-mode .mb-close svg { stroke: #d6402c; stroke-width: 2.6; }
body.skin-bund .kort-bar.menu-mode .mb-close b { color: #d6402c; opacity: 1; font-weight: 800; }

/* Luk: samme stregtykkelse som de andre ikoner, og en slankere boks */
body.skin-bund .kort-bar.menu-mode .mb-close svg { stroke-width: 2; }
body.skin-bund .kort-bar.menu-mode .mb-close b { font-weight: 700; }
body.skin-bund .kort-bar.menu-mode .mb-close { background: rgba(255, 255, 255, .94); margin: 4px 6px; padding: 0; border-radius: 14px; box-shadow: none; }

/* Beskrivelse under hver funktion */
#menuStack .ms-tile { grid-template-rows: auto auto auto; min-height: 104px; }
#menuStack .ms-ic { grid-row: 1 / span 3; }
#menuStack .ms-tile b { grid-row: 1; align-self: end; }
#menuStack .ms-desc { grid-column: 2; grid-row: 2; font: 600 12.5px/1.25 var(--sans); color: rgba(255, 255, 255, .85); }
#menuStack .ms-tile .hm-info { grid-row: 3; }
#menuStack .ms-tile:not(:has(.hm-info)) b { grid-row: 1; align-self: end; }

/* Stakken: tydelighed frem for tal. Navn og en klar beskrivelse */
#menuStack .ms-tile { grid-template-columns: 54px 1fr; grid-template-rows: auto auto; min-height: 104px; padding: 14px; column-gap: 14px; row-gap: 3px; }
#menuStack .ms-ic { width: 54px; height: 54px; border-radius: 16px; grid-row: 1 / span 2; }
#menuStack .ms-ic svg { width: 30px; height: 30px; }
#menuStack .ms-tile b { grid-row: 1; font-size: 17px; align-self: end; }
#menuStack .ms-desc { grid-row: 2; align-self: start; font: 600 14px/1.25 var(--sans); color: rgba(255, 255, 255, .92); }
#menuStack .ms-tile { grid-template-columns: 46px 1fr; column-gap: 11px; padding: 12px 10px 12px 12px; }
#menuStack .ms-ic { width: 46px; height: 46px; border-radius: 14px; }
#menuStack .ms-ic svg { width: 26px; height: 26px; }
#menuStack .ms-tile b { font-size: 16px; }
#menuStack .ms-desc { font-size: 13.5px; }

/* Stedkortet: knapperne i toppen er flyttet ned i bund-bjælken */
body.has-sted #sheet .sheet-hero-acts, body.has-sted #sheet .sheet-close { display: none !important; }
body.has-sted #sheet { padding-bottom: calc(100px + var(--safe-b, 0px)); }
body.skin-bund #navBar [data-nb="del"] svg, body.skin-bund #navBar [data-nb="del"] b { stroke: #ffb3a8; color: #ffb3a8; }
body.skin-bund #navBar [data-nb="del"] b { stroke: none; }

/* Steder: knapperne i toppen (luk og fold sammen) erstattes af bund-bjælken */
body.has-nav #drawer :is(.ms-close, [data-msclose], .ms-fold, [data-msfold], .fold-chev) { display: none !important; }

/* Stedkortet: faneknapperne (Billeder, Dagbog, Om stedet, Rejser) ligger i bund-bjælken */
body.has-sted #sheet .sw-tabs { display: none !important; }
body.skin-bund #navBar[data-ctx="sted"] .bb-tab b { font-size: 12px; }
body.skin-bund #navBar[data-ctx="sted"] .bb-tab svg { stroke: #fff; }

/* Mere: et spillekort over bjælken, som på forsiden */
#mereBubble { position: fixed; left: 10px; right: 10px; width: auto; z-index: 1850; padding: 0; background: none; box-shadow: none; border-radius: 0; animation: cardFront .34s cubic-bezier(.2, .9, .3, 1.15) both; }
#mereBubble.closing { animation: bubOut .2s ease-in both; }
#mereBubble::after { display: none; }
#mereBubble .ms-card.front { position: relative; border-radius: 26px; background: linear-gradient(170deg, color-mix(in srgb, var(--k) 62%, #1b2240), color-mix(in srgb, var(--k) 36%, #141a30)); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--k) 70%, #fff), 0 -14px 34px -12px rgba(0, 0, 0, .55); padding-bottom: 12px; color: #fff; }
#mereBubble .ms-head { height: 44px; padding: 0 18px; display: flex; align-items: center; font: 800 17px var(--sans); }
#mereBubble .ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
#mereBubble .ms-grid.n3 .ms-tile:first-child { grid-column: 1 / -1; }
#mereBubble .ms-tile { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 11px; row-gap: 3px; align-items: center; align-content: center; min-height: 92px; padding: 12px 10px 12px 12px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(0, 0, 0, .5); color: #fff; text-align: left; }
#mereBubble .ms-tile:active { transform: scale(.97); }
#mereBubble .ms-ic { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--k) 70%, #fff), var(--k)); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
#mereBubble .ms-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#mereBubble .ms-tile b { grid-column: 2; grid-row: 1; align-self: end; font: 800 16px/1.15 var(--sans); }
#mereBubble .ms-desc { grid-column: 2; grid-row: 2; align-self: start; font: 600 13.5px/1.25 var(--sans); color: rgba(255, 255, 255, .92); }

/* Forreste kort = lille stedkort: billeder og note */
.it-prev { display: none; }
.it-prev .ip-th { display: flex; gap: 6px; align-items: center; }
.it-prev .ip-th img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6); }
.it-prev .ip-th i { font: 800 14px var(--sans); font-style: normal; color: rgba(255, 255, 255, .85); padding-left: 4px; }
.it-prev .ip-note { font: 500 13.5px/1.35 var(--sans); color: rgba(255, 255, 255, .85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

body.has-nav #drawer.drawer { bottom: 0 !important; }
body.has-nav #modal #modalCard { padding-bottom: 0 !important; }

/* Kabale (1.0.411): kortet i midten ligger øverst og står stille midt på skærmen. Kortene over det stikker op med toppen, kortene under stikker ned med bunden, og man ruller stakken forbi midten.
   Hvert kort har sin egen faste højde (--kh, lav uden rejse og note) og ligger med bunden ind under det næste, så hvert kort viser en strimmel (--ks). Kun stablingen skifter, når man ruller (JS sætter z-index, .front og .kab-ned), så listen hopper aldrig.
   Fokus starter ved det første kort og glider ned til lidt over midten, når man ruller. JS sætter luft under listen (--kb), så det sidste kort kan rulles op i fokus */
body.spillekort { --kr: 22px; }
body.spillekort .item { --kh: 104px; --ks: 64px; }
body.spillekort .item:has(.it-trip, .ip-note) { --kh: 172px; } /* kun stort, når der er rejse eller note at vise */
body.spillekort .rw-row { --kh: 108px; --ks: 74px; }
body.spillekort .memo-row { --kh: 118px; --ks: 80px; }
body.spillekort .drawer-list, body.spillekort .yr-page, body.spillekort #modalCard .menu-list:has(> .rw-row, > .memo-row) { gap: 0 !important; row-gap: 0 !important; }
body.spillekort .drawer-list, body.spillekort .yr-page { padding: 12px 14px var(--kb, 120px) !important; }
body.spillekort #modalCard .menu-list:has(> .rw-row, > .memo-row) { padding: 8px 2px var(--kb, 120px) !important; }
body.spillekort #modalCard .m-body { padding-bottom: 0 !important; align-content: start !important; }
body.spillekort :is(.drawer-list .item, .yr-page .item, #modalCard .rw-row, #modalCard .memo-row) {
  position: relative !important; display: flex; align-items: flex-start; box-sizing: border-box; width: 100%; height: var(--kh) !important; min-height: 0 !important; flex: none;
  margin: 0 0 calc(var(--ks) - var(--kh)) !important; padding: 10px 14px !important; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: var(--kr) !important; transform: none !important; rotate: var(--rot, 0deg); translate: 0 0;
  background: color-mix(in srgb, var(--tc, #6a78a0) 16%, #262f4a) !important; box-shadow: 0 0 14px -4px rgba(0, 0, 0, .7), inset 0 3px 0 -1px color-mix(in srgb, var(--tc, #8a96bd) 75%, transparent) !important;
  transition: rotate .25s ease, translate .25s ease, scale .25s ease; animation: kabIn .35s cubic-bezier(.2, .9, .3, 1.1) both; }
body.spillekort :is(.drawer-list .item, .yr-page .item, #modalCard .rw-row, #modalCard .memo-row):not(:has(+ :is(.item, .rw-row, .memo-row))) { margin-bottom: 0 !important; } /* det sidste kort før en overskrift eller listens ende */
/* Kortene under fokus viser deres bund, så indholdet ligger i bunden. JS flytter dem (--kty), så alle bund-strimler er lige høje */
body.spillekort :is(.drawer-list .item, .yr-page .item, #modalCard .rw-row, #modalCard .memo-row).kab-ned { align-items: flex-end; translate: 0 var(--kty, 0px); }
body.spillekort :is(.drawer-list .item, .yr-page .item) .th { width: 44px !important; height: 44px !important; flex: none; transition: width .25s ease, height .25s ease; }
body.spillekort :is(.drawer-list .item, .yr-page .item) > span:nth-child(2) { min-width: 0; flex: 1; }
body.spillekort :is(.drawer-list .item, .yr-page .item) b { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
body.spillekort :is(.drawer-list .item, .yr-page .item) small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.spillekort :is(.drawer-list .item, .yr-page .item) :is(.it-edit, .it-trip, .it-prev) { display: none !important; }
/* Kortet i midten: lige, lidt større og med skygge. Det viser stort billede, rejse, billeder og note */
body.spillekort :is(.drawer-list .item, .yr-page .item, #modalCard .rw-row, #modalCard .memo-row).front { --rot: 0deg; scale: 1.03; align-items: flex-start; padding-top: 14px !important; box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .85), inset 0 3px 0 -1px color-mix(in srgb, var(--tc, #8a96bd) 75%, transparent) !important; }
body.spillekort #modalCard :is(.rw-row, .memo-row).front { align-items: center; }
/* Kortet i fokus: billedet fylder hele kortets højde i venstre side, teksten står til højre, så kortet aldrig ser tomt ud */
body.spillekort :is(.drawer-list .item, .yr-page .item).front .th { width: min(108px, calc(var(--kh) - 28px)) !important; height: calc(var(--kh) - 28px) !important; border-radius: 14px; font-size: 40px; }
body.spillekort :is(.drawer-list .item, .yr-page .item).front small { white-space: normal; }
body.spillekort :is(.drawer-list .item, .yr-page .item).front .it-trip { display: inline-flex !important; margin-top: 8px; width: max-content; max-width: 100%; }
body.spillekort :is(.drawer-list .item, .yr-page .item).front .it-prev { display: block !important; margin-top: 8px; }
body.spillekort :is(.drawer-list .item, .yr-page .item).front .it-prev .ip-th { display: none; }
body.spillekort :is(.drawer-list .item, .yr-page .item).front .it-prev .ip-note { -webkit-line-clamp: 3; }
@keyframes kabIn { from { opacity: 0; } }
/* Intet vip nogen steder (ejerens ønske 01-11-2026) */
body.spillekort :is(.drawer-list .item, .yr-page .item).front .it-trip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; }
body.spillekort :is(.drawer-list .item, .yr-page .item).front .it-trip i { display: inline-block; vertical-align: 1px; margin-right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }

/* Menu-stakken som kabalen (1.0.414): alle kort lige brede og lige (intet vip, ingen tilspidsning), samme runde hjørner og kant, og lige høje strimler bagved. Farverne og fliserne beholdes */
#menuStack { padding-top: calc(var(--n, 3) * 46px); }
#menuStack .ms-card:not(.front) { left: 0 !important; right: 0 !important; top: calc((var(--n, 3) - var(--d)) * 46px) !important; height: 140px; transform: none !important; border-radius: 22px 22px 0 0 !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-bottom: 0 !important; box-shadow: 0 -5px 12px -6px rgba(0, 0, 0, .6), inset 0 3px 0 -1px color-mix(in srgb, var(--k) 70%, #fff) !important; }
#menuStack .ms-card:not(.front) .ms-head { height: 46px; }
#menuStack .ms-card.front { border-radius: 22px !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 -5px 12px -6px rgba(0, 0, 0, .6), 0 10px 26px -6px rgba(0, 0, 0, .7), inset 0 3px 0 -1px color-mix(in srgb, var(--k) 70%, #fff) !important; }
@keyframes cardPop { from { opacity: 0; transform: translateY(40px); } }
/* Menu-stakken vendt (1.0.415, ejerens ønske): det valgte kort ligger øverst, og de andre stikker ud under det med deres bund og navn */
#menuStack { padding-top: 0 !important; padding-bottom: calc(var(--n, 3) * 46px); }
#menuStack .ms-card:not(.front) { top: auto !important; bottom: calc((var(--n, 3) - var(--d)) * 46px); z-index: calc(10 - var(--d)); display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0 0 22px 22px !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-top: 0 !important; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6), inset 0 -3px 0 -1px color-mix(in srgb, var(--k) 70%, #fff) !important; }
#menuStack .ms-card:not(.front) .ms-head { flex: none; }
#menuStack .ms-card.front { z-index: 20; }
/* Prikker i siden af kabalen (1.0.418): en lille kapsel i luften til højre for kortene, midt ud for listen. Prikken for kortet i fokus er en aflang streg i rejsens farve */
body.spillekort:has(#kabDots.show) :is(.drawer-list, .yr-page) { padding-right: 22px !important; }
body.spillekort:has(#kabDots.show) #modalCard .menu-list:has(> .rw-row, > .memo-row) { padding-right: 16px !important; }
#kabDots { position: fixed; z-index: 1790; display: none; flex-direction: column; align-items: center; gap: 5px; width: 12px; padding: 7px 0; border-radius: 99px; background: rgba(255, 255, 255, .07); pointer-events: none; transition: top .2s ease; }
#kabDots.show { display: flex; }
#kabDots i { flex: none; width: 4px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .32); transition: height .22s ease, background .22s ease; }
#kabDots i.edge { width: 3px; height: 3px; opacity: .7; }
#kabDots i.on { width: 4px; height: 16px; background: color-mix(in srgb, var(--tc, #c9d2ea) 75%, #fff); }
/* Mere-kortet: ingen firkant bag de runde hjørner (en ældre regel gav boblen baggrund og skygge), og samme kort-form som kabalen */
#mereBubble { background: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#mereBubble .ms-card.front { border-radius: 22px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .7), inset 0 3px 0 -1px color-mix(in srgb, var(--k) 70%, #fff); }
/* Mere-kortet som taleboble: en spids i bunden peger ned på Mere-knappen (JS sætter --tx ud for knappens midte) */
#mereBubble .ms-card.front::after { content: ''; position: absolute; z-index: -1; left: calc(var(--tx, 50%) - 17px); bottom: -17px; width: 32px; height: 32px; transform: rotate(45deg); border-radius: 0 0 5px 0; background: color-mix(in srgb, var(--k) 37%, #141a30); border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); box-shadow: 6px 6px 10px -6px rgba(0, 0, 0, .6); }
/* Tre funktioner i et menu-kort: den sidste fylder hele bredden, så der ikke står et tomt hul (fx Album uden Camperlog i Prøvekluden 3) */
#menuStack .ms-grid.n3 .ms-tile:last-child { grid-column: 1 / -1; }