/* Muggen – felles stil. Glasert porselensblått, blekkblått og smørblomstgult. Lys og mørk modus. */
/* Skriftene ligger hos oss selv: raskere, virker uten nett og sender ingen data til Google (GDPR) */
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url('/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url('/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-display: swap; src: url('/static/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations'); }

:root {
  --ink: #14284B;
  --ink-soft: #3E5072;
  --bg: #EEF3FA;
  --paper: #FFFFFF;
  --field: #FFFFFF;
  --line: #6B7C9A;
  --line-soft: #D3DCEA;
  --butter: #F5C518;
  --butter-ink: #14284B;
  --moss: #1F7A4A;
  --moss-soft: #DDF1E5;
  --amber: #8A5100;
  --amber-soft: #FFF1CC;
  --amber-fill: #E89B0C;
  --berry: #B3263C;
  --berry-soft: #FBE5E9;
  --sky: #DCE7F6;
  --mono-bg: #EEF3FA;
  --shadow: 0 1px 0 rgba(20,40,75,.04), 0 8px 24px -12px rgba(20,40,75,.25);
  --radius-s: 12px;
  --radius-l: 22px;
  --display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E8EEF8; --ink-soft: #A9B7CF; --bg: #0E1A30; --paper: #16243F; --field: #1B2B4A; --line: #6F84A8; --line-soft: #2A3C60;
    --moss: #6FD39C; --moss-soft: #173A2B; --amber: #FFC766; --amber-soft: #3A2C0E;
    --berry: #FF8A9B; --berry-soft: #43202A; --sky: #22355A; --mono-bg: #1B2B4A; --shadow: 0 0 transparent;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.0625rem/1.5 var(--body); }
dd, .stat, .big-number, [data-amount], .price, .amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv dd { white-space: normal; }
.empty-state .tipped { width: 110px; height: 110px; color: var(--ink); margin: 0 auto 8px; display: block; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0 0 .4em; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
h2.h3 { font-size: 1.1rem; }
[tabindex='-1']:focus, [tabindex='-1']:focus-visible { outline: none; box-shadow: none; }
h1 { font-size: 2.3rem; font-weight: 800; }
h2 { font-size: 1.45rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 .8em; }
a { color: inherit; text-underline-offset: 3px; }
.quiet { color: var(--ink-soft); font-size: .94rem; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--butter); border-radius: 6px; }

/* Knapper */
button, .btn {
  font: 700 1rem/1.2 var(--body); text-align: center;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: .8em 1.3em; min-height: 48px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  transition: transform .12s var(--ease-out), box-shadow .12s, background .2s;
}
button:active, .btn:active { transform: translateY(2px); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-main:disabled { opacity: 1; background: var(--sky); color: var(--ink-soft); border-color: var(--line); box-shadow: none; }
.btn-main { background: var(--butter); color: var(--butter-ink); border-color: #14284B; box-shadow: 0 3px 0 #14284B; }
.btn-main:active { box-shadow: 0 1px 0 #14284B; }
.btn-big { width: 100%; font-size: 1.15rem; padding: 1em 1.3em; min-height: 58px; }
.btn-quiet { border-color: var(--line-soft); background: transparent; }
.btn-danger { border-color: var(--berry); color: var(--berry); background: transparent; }
.btn-small { padding: .45em .9em; font-size: .9rem; min-height: 44px; }
.chip { min-height: 44px; padding: .3em .85em; font-size: .9rem; border-color: var(--line-soft); background: var(--paper); }
.spinner { width: 1em; height: 1em; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skjema */
label { display: block; font-weight: 700; margin: .9em 0 .3em; }
input, select, textarea {
  font: 1rem var(--body); color: var(--ink); background: var(--field);
  width: 100%; padding: .75em .85em; min-height: 48px;
  border: 2px solid var(--line); border-radius: var(--radius-s);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(245,197,24,.45); }
.check { display: flex; gap: .6em; align-items: center; font-weight: 400; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: #14284B; flex: none; }
.row { display: flex; gap: .8em; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.hint { font-size: .88rem; color: var(--ink-soft); margin: .35em 0 0; }
.field-err { color: var(--berry); font-weight: 700; font-size: .92rem; margin: .4em 0 0; display: flex; gap: .4em; align-items: flex-start; }
.field-err::before { content: '!'; flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--berry); color: var(--paper); display: grid; place-items: center; font-size: .8em; margin-top: .1em; }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--berry); }
.live-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--moss); margin-right: .3em; vertical-align: 1px; animation: pulse 1.6s ease-in-out 4; }
.empty-state { text-align: center; padding: 30px 0; }
main.fade { animation: fade .14s ease-out; }
@keyframes fade { from { opacity: .2; } }

/* Gjestesider */
.guest { max-width: 480px; margin: 0 auto; padding: 14px 18px 56px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 8px; flex-wrap: wrap; }
.topbar-actions { display: flex; gap: 8px; }
.brand { display: flex; align-items: center; gap: .45em; font: 800 1.15rem var(--display); text-decoration: none; color: inherit; }
.brand svg { width: 28px; height: 28px; }
.charger-name { font-size: 2.4rem; margin-bottom: .1em; overflow-wrap: anywhere; }
.host { color: var(--ink-soft); margin-bottom: 14px; overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: .5em; border-radius: 999px; padding: .32em .85em; font-weight: 700; font-size: .92rem; background: var(--sky); color: var(--ink); }
.pill::before { content: ''; width: .62em; height: .62em; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok { background: var(--moss-soft); color: var(--moss); }
.pill.bad { background: var(--berry-soft); color: var(--berry); }
.pill.wait { background: var(--amber-soft); color: var(--amber); }
.pill.setup { background: transparent; color: var(--ink-soft, #4A5C7D); border: 1px dashed currentColor; }
.pill.live::before { animation: pulse 1.6s ease-in-out 3; }
.pill.slide-in.live::before { animation: pulse 1.6s ease-in-out 3; }
.pill.nodot::before { display: none; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.panel { background: var(--paper); border-radius: var(--radius-l); padding: 22px; margin: 16px 0; border: 2px solid var(--line-soft); box-shadow: var(--shadow); }
.panel.strong { border-color: var(--ink); }
.panel.warn { border-color: var(--amber-fill); background: var(--amber-soft); }
.price { font: 800 2.5rem/1 var(--display); margin: .1em 0 .15em; display: flex; align-items: baseline; gap: .3em; flex-wrap: wrap; }
.price small { font: 400 1rem var(--body); color: var(--ink-soft); }
.notice { border-radius: var(--radius-s); padding: 12px 14px; margin: 14px 0; background: var(--sky); }
.notice.bad { background: var(--berry-soft); color: var(--berry); }
.notice.ok { background: var(--moss-soft); color: var(--moss); }
.notice.warn { background: var(--amber-soft); color: var(--ink); border-left: 5px solid var(--amber-fill); }
.notice.dev { background: var(--amber-soft); color: var(--ink); border: 2px dashed var(--amber-fill); }
.enter { animation: enter .32s var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.slide-in { animation: enter .25s var(--ease-out); }

.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: .35em 0; margin: 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 700; text-align: right; padding-left: 1em; font-variant-numeric: tabular-nums; }
.kv .sum { border-top: 2px solid var(--ink); padding-top: .35em; font-size: 1.1rem; }
.meter { height: 12px; border-radius: 999px; background: var(--sky); overflow: hidden; margin: 12px 0 4px; border: 1px solid var(--line); }
.meter span { display: block; height: 100%; background: var(--ink); border-radius: 999px; transition: width .8s var(--ease-out); }
.meter.hot span { background: var(--amber-fill); }

.steps-ill { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; }
.steps-ill li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; }
.steps-ill li > span:last-child { padding-top: 11px; }
.steps-ill .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--sky); display: grid; place-items: center; }
.steps-ill .ico svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.big-number { font: 800 2.7rem/1 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* Muggen */
.jug-wrap { display: flex; justify-content: center; margin: 4px 0 2px; }
.jug { width: 190px; height: auto; overflow: visible; }
.jug .jug-body { fill: var(--paper); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.jug .jug-handle, .jug .jug-rim { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.jug .liquid { transition: transform 1.2s var(--ease-out); }
.jug .wave { fill: var(--butter); transition: fill .4s; }
.jug.waving .wave { animation: wave 1.6s ease-in-out infinite alternate; }
.jug .pausebars rect { fill: #14284B; opacity: 0; transition: opacity .15s; }
.jug[data-state='paused'] .pausebars rect { opacity: .8; }
.jug.refill { animation: refill .65s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 90%; }
@keyframes refill { 0% { transform: scale(1); } 35% { transform: scale(1.08) translateY(-4px); } 100% { transform: scale(1); } }
.jug .bolt path { fill: #14284B; opacity: 0; transform-box: fill-box; transform-origin: center; }
.jug[data-state='paused'] .wave { fill: var(--amber-fill); animation: none; }
.jug[data-state='done'] .wave { fill: #2F9E63; }
.jug[data-state='done'] { animation: clunk .5s var(--ease-out) .9s both; }
.jug[data-state='waiting'] .wave { fill: var(--sky); }
.jug.pour .bolt path { animation: bolt 1s ease-out; }
@keyframes wave { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes clunk { 0% { transform: scale(1); } 45% { transform: scale(1.05) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes bolt { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: .9; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1); } }

.check-anim { width: 72px; height: 72px; margin: 10px auto; display: block; }
.check-anim circle { fill: var(--moss-soft); }
.check-anim path { fill: none; stroke: var(--moss); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .45s var(--ease-out) .1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.paymethods { display: grid; gap: 10px; }
.paymethods button { border-radius: var(--radius-s); min-height: 56px; }
.paymethods .vipps { background: #C93C0B; border-color: #C93C0B; color: #fff; }
.paymethods .apple { background: #000; border-color: #000; color: #fff; }
.paymethods .google { background: #fff; border-color: #3C4043; color: #3C4043; }
details { border-top: 1px solid var(--line-soft); padding: 10px 0; }
details summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 12px; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: auto; margin-right: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease-out); }
details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.more > summary::after { display: none; }
details p { margin: .5em 0 0; }

dialog { scroll-padding-bottom: 110px; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px; max-width: 540px; width: calc(100% - 24px); color: var(--ink); background: var(--paper); max-height: 88vh; overflow: auto; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
dialog[open] { animation: dlgIn .18s var(--ease-out); }
@keyframes dlgIn { from { transform: scale(.96) translateY(6px); } }
dialog::backdrop { background: rgba(10,20,40,.55); animation: backdropIn .2s ease-out; }
@keyframes backdropIn { from { opacity: 0; } }
@media (prefers-color-scheme: dark) {
  dialog::backdrop { background: rgba(0,0,0,.65); }
  /* Valgt tilstand må synes i mørk modus */
  .seg button[aria-pressed='true'] { background: var(--butter); color: #14284B; }
  .seg, .seg button + button { border-color: var(--line); }
  input[type=radio], input[type=checkbox], .check input { accent-color: var(--butter); }
  .btn-main, .btn-main:active { box-shadow: 0 3px 0 #000; }
}
/* Bunnark (mobil «Mer») */
dialog.bottom { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; padding: 10px 16px max(16px, env(safe-area-inset-bottom)); border-width: 1px 0 0; }
dialog.bottom[open] { animation: slideUp .26s cubic-bezier(.32, .72, 0, 1); }
@keyframes slideUp { from { transform: translateY(100%); } }
dialog.bottom .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-soft); margin: 2px auto 12px; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li + li { border-top: 1px solid var(--line-soft); }
.sheet-list button { width: 100%; border: 0; background: transparent; justify-content: flex-start; border-radius: 12px; padding: 12px 6px; min-height: 52px; font-weight: 700; gap: 14px; }
.sheet-list button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sheet-list button::after { content: '›' / ''; margin-left: auto; font-size: 1.4rem; color: var(--ink-soft); }
.sheet-list button[aria-current='page'] { background: var(--sky); }
.sheet-list .danger { color: var(--berry); }
.sheet-list .danger::after { content: ''; }
dialog.sheet .list { display: grid; gap: 10px; margin-bottom: 12px; }
dialog .dlg-foot { position: sticky; bottom: -22px; background: var(--paper); padding: 14px 0 6px; margin-top: 14px; border-top: 1px solid var(--line-soft); }

.toast { position: fixed; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%); background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); padding: 12px 18px 12px 14px; border-radius: 16px; font-weight: 700; z-index: 60; box-shadow: 0 14px 34px -12px rgba(10,20,40,.55);
  animation: toastIn .22s cubic-bezier(.2, .8, .2, 1); width: max-content; max-width: min(92vw, 420px); display: flex; gap: 10px; align-items: center; text-align: left; }
.toast::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--moss); }
.toast.out { opacity: 0; transform: translate(-50%, 8px); transition: opacity .16s ease-in, transform .16s ease-in; }
.toast.bad { border-color: var(--berry); }
.toast.bad::before { background: var(--berry); }
.toast.warn { border-color: var(--amber-fill); }
.toast.warn::before { background: var(--amber-fill); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }
#extendbox.urgent { background: var(--amber-soft); border-radius: var(--radius-s); padding: 8px 10px; }
#extendbox svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; background: var(--mono-bg); padding: .1em .35em; border-radius: 6px; word-break: break-all; }
.empty { border: 2px dashed var(--line-soft); border-radius: var(--radius-l); padding: 26px; text-align: center; color: var(--ink-soft); }
.skeleton { height: 1.2em; border-radius: 8px; background: linear-gradient(90deg, var(--sky), var(--paper), var(--sky)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; margin: 10px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Eier-app */
.owner { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: #14284B; color: #fff; padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.side .brand { color: #fff; margin-bottom: 24px; }
.side nav { display: grid; gap: 4px; }
.side nav button { background: transparent; border: 0; color: #D3DDEF; justify-content: flex-start; border-radius: var(--radius-s); padding: .7em .8em; font-weight: 700; min-height: 44px; }
.side nav button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side nav button { gap: 12px; }
.side nav button[aria-current='page'] { background: #22385F; color: #fff; box-shadow: inset 4px 0 0 var(--butter); }
.side .foot { margin-top: 24px; font-size: .85rem; color: #A9B7CF; }
.side .foot a { color: #D3DDEF; }
.mobile-nav { display: none; }
main.content { padding: 28px 32px 80px; max-width: 1000px; min-width: 0; }
.head h1 { overflow-wrap: anywhere; min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; border-radius: var(--radius-s); }
/* Historikk som kort på smale skjermer */
.hcards { display: none; }
.hcard { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--radius-s); padding: 12px 14px; }
.hcard .top { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.hcard .top .amt { font-variant-numeric: tabular-nums; }
.hcard .meta { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }
.hcard details { border: 0; padding: 4px 0 0; }
.hcard details summary { min-height: 36px; font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
@media (max-width: 900px) { .hcards { display: grid; gap: 10px; } .htable { display: none; } }
/* Ladepunkt: sekundærhandlinger i en «Mer»-meny */
details.more { position: relative; border: 0; padding: 0; }
details.more > summary { list-style: none; border: 2px solid var(--line-soft); border-radius: 999px; padding: .45em .9em; min-height: 44px; font-size: .9rem; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { background: var(--sky); }
details.more .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px -16px rgba(10,20,40,.5); padding: 6px; min-width: 230px; display: grid; animation: dlgIn .15s var(--ease-out); }
details.more .menu button, details.more .menu a { border: 0; background: transparent; justify-content: flex-start; text-align: left; display: flex; align-items: center; color: var(--ink); text-decoration: none; border-radius: 10px; min-height: 44px; padding: .5em .8em; font-weight: 700; font-size: .95rem; width: 100%; }
details.more .menu button:hover, details.more .menu a:hover { background: var(--sky); }
details.more .menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
details.more .menu .danger { color: var(--berry); }
.savebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40; background: #14284B; color: #fff; border-radius: 999px; padding: 8px 8px 8px 18px; display: flex; gap: 8px; align-items: center; box-shadow: 0 14px 34px -12px rgba(10,20,40,.6); animation: toastIn .2s var(--ease-out); width: min(calc(100% - 32px), 460px); white-space: nowrap; }
.savebar span { flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.savebar button { min-height: 42px; padding: .5em 1.1em; }
.savebar .btn-quiet { color: #fff; border-color: rgba(255,255,255,.35); }
.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--butter); } 100% { box-shadow: 0 0 0 0 transparent; } }
.preview { background: var(--moss-soft); color: var(--ink); border-radius: var(--radius-s); padding: 12px 14px; margin-top: 14px; }
.preview strong { font-variant-numeric: tabular-nums; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin: .9em 0 .3em; }
.adv { border-top: 1px solid var(--line-soft); margin-top: 18px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex-wrap: wrap; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.card { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--radius-l); padding: 20px; box-shadow: var(--shadow); }
.card.feature { box-shadow: var(--shadow), inset 0 5px 0 var(--butter); }
.stat { font: 800 1.9rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.list { display: grid; gap: 10px; }
.item { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--radius-s); padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.item .grow { flex: 1 1 220px; min-width: 0; }
.item .name { font-weight: 700; }
table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius-s); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: .95rem; vertical-align: top; }
th { font-weight: 700; color: var(--ink-soft); background: var(--mono-bg); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: .5em 1em; min-height: 42px; flex: 1 1 0; white-space: nowrap; }
.seg button[aria-pressed='true'] { background: #14284B; color: #fff; }
.seg button + button { border-left: 2px solid var(--ink); }
.copy { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.copy code { flex: 1; min-width: 0; padding: .55em .7em; overflow-wrap: anywhere; word-break: break-all; }
.steps li { overflow-wrap: anywhere; }
.emu-log { background: #0F1F3B; color: #D7E3F7; border-radius: var(--radius-s); padding: 10px 12px; font: .82rem/1.45 ui-monospace, Menlo, monospace; max-height: 220px; overflow: auto; }
.led { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .3em; vertical-align: -1px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.actions > * { flex: 0 0 auto; }

@media (max-width: 760px) {
  .owner { grid-template-columns: 1fr; }
  .side { display: none; }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #14284B; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); }
  .mobile-nav button { background: transparent; border: 0; color: #D3DDEF; flex-direction: column; gap: 2px; min-height: 56px; font-size: .75rem; padding: 4px 2px; border-radius: 12px; }
  .mobile-nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav button[aria-current='page'] { color: var(--butter); background: #22385F; }
  main.content { padding: 18px 16px 110px; }
  html { scroll-padding-bottom: 96px; }
  .owner-page .toast { bottom: calc(76px + env(safe-area-inset-bottom) + 12px); }
  .owner-page .savebar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* «Mer …» på ladepunkt: legg menyen over bunnmenyen som et ark */
  details.more .menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); min-width: 0; animation: slideUp .22s cubic-bezier(.32, .72, 0, 1); }
  details.more[open]::before { content: ''; position: fixed; inset: 0; background: rgba(10,20,40,.35); z-index: 19; }
  h1 { font-size: 1.9rem; }
  .seg { width: 100%; }
}

[data-qr]:empty { display: none; }
dialog .dlg-foot > * { flex: 1 1 0; min-width: 0; }
/* Sjekkliste (Kom i gang / Koble til laderen) */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.card.checklist { padding: 20px; }
.checklist li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.checklist .tick { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; color: var(--paper); }
.checklist li.done .tick { background: var(--moss); border-color: var(--moss); animation: pop .3s var(--ease-out); }
.checklist li.done strong { color: var(--ink-soft); }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.1); } }
.ok-hint { color: var(--moss); font-weight: 700; }
.steps { padding-left: 1.2em; }
.steps li { margin-bottom: .4em; }

/* Klistremerke */
.sticker .short { font: 700 .95rem ui-monospace, Menlo, monospace; margin: 0; }
.sticker .phone { font-size: .85rem; margin: 4px 0 0; }
.sticker-page { display: grid; place-items: center; min-height: 100vh; background: #fff; color: #14284B; }
.sticker { width: 90mm; border: 3px solid #14284B; border-radius: 18px; padding: 7mm; text-align: center; background: #F5C518; color: #14284B; }
.sticker h1 { font-size: 1.8rem; margin: 0; }
.sticker .sub { font-weight: 700; margin: 0; }
.sticker .en { font-size: .85rem; margin: 2px 0 0; }
.sticker .qr { background: #fff; padding: 4mm; border-radius: 10px; margin: 4mm auto; width: fit-content; }

/* Kvittering */
.receipt-page { max-width: 640px; margin: 0 auto; padding: 14px 18px 48px; }
.ref-print { display: none; }
@media print {
  .noprint, .topbar-actions, .ref-field, .noprint-label { display: none !important; }
  .ref-print { display: block; font-weight: 700; margin-top: 10px; }
  body { background: #fff; color: #000; }
  .panel { box-shadow: none; border-color: #000; }
}

.sugg { background: var(--amber-soft); border-radius: var(--radius-s); padding: 10px 12px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; }
.linkbtn { border: 0; background: none; min-height: 44px; padding: 0 12px; color: var(--ink-soft); text-decoration: underline; font-weight: 400; box-shadow: none; }
.topups .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.topups .row > * { min-height: 52px; padding: .5em .4em; }
input[type=radio]:focus-visible { border-radius: 50%; outline-offset: 3px; }
.offline-banner { position: sticky; top: 0; z-index: 30; background: var(--ink); color: var(--paper); border-radius: 0 0 14px 14px; padding: 8px 14px; font-weight: 700; font-size: .92rem; margin: -14px -18px 12px; }
.pill.stale { background: var(--sky); color: var(--ink-soft); }
.pill.stale::before { animation: none; }
details.raise { margin-top: 12px; border-top: 0; }
details.raise > summary { justify-content: center; border: 2px solid var(--line-soft); border-radius: 999px; padding: 0 1em; }
.codefield { font: 700 1.6rem ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .4em; text-align: center; }
.legal h2 { margin-top: 1.4em; font-size: 1.2rem; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .4em; }
/* Mørk modus: valgt segment (må stå etter grunnregelen) */
@media (prefers-color-scheme: dark) {
  .seg button[aria-pressed='true'] { background: var(--butter); color: #14284B; }
}
/* Mobil: alle dialoger som bunnark, samme bevegelse */
@media (max-width: 760px) {
  dialog:not(.bottom) { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; border-width: 1px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); max-height: 92vh; }
  dialog:not(.bottom)[open] { animation: sheetIn .22s var(--ease-out); }
  @keyframes sheetIn { from { transform: translateY(24px); opacity: 0; } }
  .legal, main.content { scroll-padding-bottom: 120px; }
}
body.has-savebar main.content { padding-bottom: 170px; }
.jug[data-state='paused'] .bolt path, .jug[data-state='done'] .bolt path { opacity: 0 !important; animation: none !important; }
.jug.refill .liquid { transition-delay: .4s; }
.pill.free { background: var(--moss-soft); color: var(--moss); }
@media (hover: hover) {
  button:not(:disabled):hover, .btn:hover { background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }
  .btn-main:not(:disabled):hover { background: #F8D23E; transform: translateY(-1px); box-shadow: 0 4px 0 #14284B; }
  .side nav button:hover { background: #1C3157; color: #fff; }
  .mobile-nav button:hover { background: #1C3157; }
}
/* ---------- Runde 6: dialoger, lange tekster, stor skrift ---------- */
.dlg-x { position: sticky; top: -12px; float: right; margin: -8px -8px 0 8px; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 0; background: var(--sky); z-index: 3; }
.dlg-x svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
dialog { overscroll-behavior: contain; }
html:has(dialog[open]) { overflow: hidden; }
dialog.bottom .dlg-x { display: none; } /* bunnarket har Lukk-knapp og grep-strek */
.menu-close { display: none; }
@media (max-width: 760px) {
  html:has(details.more[open]) { overflow: hidden; }
  details.more .menu .menu-close { display: flex; justify-content: center; border-top: 1px solid var(--line-soft); border-radius: 0 0 10px 10px; margin-top: 4px; }
  dialog:not(.bottom)::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-soft); margin: -8px auto 10px; }
  body.has-savebar { scroll-padding-bottom: 190px; }
  html:has(body.has-savebar) { scroll-padding-bottom: 190px; }
}
.list { grid-template-columns: minmax(0, 1fr); }
.item .quiet, .item .name, .hcard .meta, .card .quiet, code { overflow-wrap: anywhere; }
.item > * { min-width: 0; }
.charger-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.head > div { min-width: 0; flex: 1 1 260px; }
.seg { flex-wrap: wrap; max-width: 100%; }
.seg button { white-space: normal; min-width: 0; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--butter); color: #14284B; padding: 10px 14px; border-radius: 10px; font-weight: 800; }
.skip:focus { top: 8px; }
.days { display: flex; flex-wrap: wrap; gap: 4px 14px; }
table.mini { width: 100%; margin-top: 8px; font-size: .9rem; border-collapse: collapse; }
table.mini th, table.mini td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; }
table.mini .num { text-align: right; white-space: nowrap; }
.emu-card a { display: inline-block; min-height: 44px; line-height: 44px; }
.side .foot a { display: inline-block; min-height: 44px; line-height: 44px; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.mobile-nav button span { font-size: clamp(9px, 2.7vw, .75rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coowner .seg { margin: 8px 0; }
.legalbox { border: 2px solid var(--line-soft); border-radius: var(--radius-s); padding: 10px 12px; font-size: .92rem; margin-top: 14px; }
.legalbox p { margin: 0 0 .4em; }
.feeline { font-size: .95rem; color: var(--ink-soft); margin-top: 2px; }
/* Redusert bevegelse – sist, så den overstyrer alt over */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: .92rem; }
.eta { font-size: .92rem; margin: 4px 0 0; }
select, input { max-width: 100%; }
.row > * { min-width: 0; }
.actions > * { max-width: 100%; }
.btn, button { white-space: normal; }
dl.kv > * { min-width: 0; overflow-wrap: anywhere; }
.sheet-list a { display: flex; align-items: center; min-height: 52px; padding: 12px 6px; font-weight: 700; text-decoration: none; color: inherit; border-radius: 12px; }
.sheet-list .danger, .sheet-list button.danger { color: var(--berry); }
dialog.bottom .sheet-list hr { display: none; }
.locgroup { border: 2px solid var(--line-soft); border-radius: var(--radius-l); padding: 14px; margin-bottom: 18px; background: color-mix(in srgb, var(--sky) 40%, transparent); }
.lochead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lochead > div { flex: 1 1 220px; }
/* ---------- Admin ---------- */
.admin-page { background: var(--bg, #EEF3FA); }
.admin-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #14284B; color: #fff; flex-wrap: wrap; }
.admin-top .brand { color: #fff; }
.admin-tabs { display: flex; gap: 4px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.admin-tabs button { background: transparent; border: 0; color: #D3DDEF; min-height: 44px; padding: 0 14px; border-radius: 10px; white-space: nowrap; font-weight: 700; }
.admin-tabs button[aria-current='page'] { background: #22385F; color: var(--butter); }
.admin-top #logout { color: #fff; border-color: #3A5180; }
.admin-main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi .stat { font-size: 1.6rem; }
.small, .quiet.small { font-size: .85rem; }
.small-kpis { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.issues li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.chart { margin: 0; }
.chart figcaption { font-weight: 700; margin-bottom: 8px; }
.chart svg { width: 100%; height: 160px; display: block; }
.chart rect { fill: var(--ink, #14284B); opacity: .85; }
.chart rect:hover { fill: var(--butter); opacity: 1; }
.chart-axis { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }
dialog.wide { max-width: 860px; }
@media (max-width: 760px) { .admin-top { padding: 8px 12px; } .admin-main { padding: 16px 12px 60px; } }
@media (max-width: 760px) { .admin-tabs { flex-wrap: wrap; order: 3; flex-basis: 100%; } .admin-top { justify-content: space-between; } }
.spotline svg { width: 100%; height: 40px; display: block; margin-top: 10px; }
.spotline rect { fill: var(--butter); stroke: none; }
.ok-panel { border-color: var(--moss); background: color-mix(in srgb, var(--moss-soft) 60%, var(--paper)); }
/* ---------- Små gleder ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
.confetti i { position: absolute; display: block; will-change: transform, opacity; }
.confetti i svg { width: 100%; height: 100%; display: block; }
.jug-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jug.slosh { animation: slosh .9s cubic-bezier(.36,.07,.19,.97); transform-origin: 50% 92%; }
@keyframes slosh { 0% { transform: rotate(0); } 15% { transform: rotate(-7deg); } 35% { transform: rotate(5deg); } 55% { transform: rotate(-3deg); } 75% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } }
.jug.tilt { animation: tilt 1.4s ease-in-out; transform-origin: 50% 92%; }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg) translateY(-2px); } 60% { transform: rotate(2deg); } }
.brand svg { transition: transform .3s var(--ease-out); }
.brand:hover svg { transform: rotate(-10deg) scale(1.06); }
.brand svg.spin-once { animation: logospin .6s var(--ease-out); }
@keyframes logospin { from { transform: rotate(-360deg) scale(.7); } }
/* Bølgestrek under overskrifter – mugge-motivet går igjen overalt */
.head h1::after, .guest h1::after, .receipt-page h1::after {
  content: ''; display: block; width: 72px; height: 10px; margin-top: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 6 q 7 -6 14 0 t 14 0 t 14 0 t 14 0 t 14 0' fill='none' stroke='%23F5C518' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
  animation: drawwave .9s var(--ease-out) .15s both;
}
@keyframes drawwave { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.btn-main { position: relative; overflow: hidden; }
.btn-main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.btn-main:not(:disabled):hover::after { animation: glint .8s ease-out; }
@keyframes glint { to { transform: translateX(120%); } }
button:active:not(:disabled), .btn:active { transform: translateY(2px) scale(.98); }
.card.feature .stat, .big-number { transition: color .3s; }
.stat.bump { animation: bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 40% { transform: scale(1.08); color: var(--moss); } }
.trip { display: inline-flex; gap: .4em; align-items: center; font-size: .94rem; color: var(--ink-soft); }
.trip svg { width: 18px; height: 18px; flex: none; }
.skeleton { background: linear-gradient(90deg, var(--sky) 25%, color-mix(in srgb, var(--butter) 30%, var(--sky)) 50%, var(--sky) 75%) 0 0 / 200% 100%; }
/* ---------- Maskoten: ansikt, humør, damp og søvn ---------- */
.jug { width: 210px; }
.jug-wrap.mini { margin: 0; }
.jug-wrap.mini .jug { width: 92px; }
.jug .body-g { transform-box: view-box; transform-origin: 50% 92%; }
.jug .face { pointer-events: none; }
.jug .eye { fill: #14284B; transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.jug .glint { fill: #fff; }
.jug .eyes { transition: transform .25s var(--ease-out); }
.jug .lid, .jug .brow, .jug .mouth { fill: none; stroke: #14284B; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.jug .mouth.grin { fill: #14284B; stroke-width: 4; }
.jug .mouth.oh { fill: #14284B; stroke: none; }
.jug .cheek { fill: #FF9BAE; opacity: 0; transition: opacity .3s; }
.jug .shades { opacity: 0; transform: translateY(-40px); transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.jug .shades rect { fill: #14284B; }
.jug .shades path { stroke: #14284B; stroke-width: 4; stroke-linecap: round; }
.jug .steam path { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.jug .zzz text { font: 800 22px var(--display); fill: var(--ink-soft); opacity: 0; }
/* humør */
.jug[data-mood='look'] .mouth.smile, .jug[data-mood='happy'] .mouth.smile, .jug[data-mood='busy'] .mouth.smile { opacity: 1; }
.jug[data-mood='look'] .eyes { animation: dart 3.2s ease-in-out 1.2s 2; }
.jug[data-mood='happy'] .cheek, .jug[data-mood='proud'] .cheek { opacity: .75; }
.jug[data-mood='happy'] .steam path, .jug[data-mood='busy'] .steam path { animation: steam 2.6s ease-out 4; }
.jug[data-mood='happy'] .steam path:nth-child(2), .jug[data-mood='busy'] .steam path:nth-child(2) { animation-delay: .8s; }
.jug[data-mood='happy'] .steam path:nth-child(3), .jug[data-mood='busy'] .steam path:nth-child(3) { animation-delay: 1.6s; }
.jug[data-mood='worried'] .brow, .jug[data-mood='worried'] .mouth.wobble { opacity: 1; }
.jug[data-mood='worried'] .brow:first-of-type { transform: rotate(-12deg); transform-box: fill-box; transform-origin: center; }
.jug[data-mood='proud'] .mouth.grin { opacity: 1; }
.jug[data-mood='proud'].wink .eye:nth-of-type(2) { animation: winkeye .5s ease-in-out; }
.jug[data-mood='sleep'] .eye, .jug[data-mood='sleep'] .glint { opacity: 0; }
.jug[data-mood='sleep'] .lid, .jug[data-mood='sleep'] .mouth.oh { opacity: 1; }
.jug[data-mood='sleep'] .mouth.oh { transform: scale(.7); transform-box: fill-box; transform-origin: center; }
.jug[data-mood='sleep'] .zzz text { animation: zzz 3s ease-out 3; }
.jug[data-mood='sleep'] .zzz text:nth-child(2) { animation-delay: .6s; }
.jug[data-mood='sleep'] .zzz text:nth-child(3) { animation-delay: 1.2s; }
.jug[data-mood='sleep'] .body-g { animation: breathe 3s ease-in-out 3; }
.jug[data-mood='cool'] .shades { opacity: 1; transform: none; }
.jug[data-mood='cool'] .mouth.smile { opacity: 1; }
.jug.blink .eye { animation: blink .18s ease-in-out; }
.jug.wake .eye, .jug.wake .glint { opacity: 1 !important; animation: wakeup .9s ease-out; }
.jug.wake .lid { opacity: 0 !important; }
.jug.dizzy .eyes { animation: dizzy .9s linear 1; transform-origin: 97px 112px; }
.jug.glugg .body-g { animation: glugg 1.6s cubic-bezier(.36,.07,.19,.97); }
.jug.glugg .mouth.oh { opacity: 1; }
.jug.clink .body-g { animation: clinkjug .25s ease-out; }
@keyframes blink { 50% { transform: scaleY(.1); } }
@keyframes winkeye { 50% { transform: scaleY(.1); } }
@keyframes wakeup { 0% { transform: scaleY(.1); } 40% { transform: scale(1.3); } 100% { transform: none; } }
@keyframes dart { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 55% { transform: translateX(6px); } 75% { transform: translate(2px, -3px); } }
@keyframes dizzy { to { transform: rotate(360deg); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: .7; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }
@keyframes breathe { 50% { transform: scale(1.025, .985); } }
@keyframes glugg { 0% { transform: rotate(0); } 20% { transform: rotate(-38deg) translate(-6px, -10px); } 30% { transform: rotate(-34deg) translate(-6px, -12px); } 40% { transform: rotate(-38deg) translate(-6px, -10px); } 50% { transform: rotate(-34deg) translate(-6px, -12px); } 75% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes clinkjug { 40% { transform: scale(1.04, .96); } }
.jug .bolt { transform: none; }
.jug .pausebars { display: none; }
@media (prefers-color-scheme: dark) { .jug .jug-body { fill: #EEF3FA; } .jug .eye, .jug .shades rect { fill: #14284B; } }

/* Gjestesiden: maskoten ved siden av navnet på laderen */
.charger-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.charger-hero .jug-wrap { margin-top: -6px; }

/* Bølgestreken under overskriftene er en ledning: hold over (eller trykk på) overskriften, så går det en gnist langs den */
.head h1, .guest h1, .receipt-page h1 { cursor: default; }
.head h1::after, .guest h1::after, .receipt-page h1::after {
  background: radial-gradient(circle at center, #FFF7C2 0 2px, rgba(245,197,24,.9) 3px, transparent 6px) no-repeat -12px 55% / 12px 12px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 6 q 7 -6 14 0 t 14 0 t 14 0 t 14 0 t 14 0' fill='none' stroke='%23F5C518' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.head h1:hover::after, .guest h1:hover::after, .receipt-page h1:hover::after, h1.zap::after { animation: zap .7s ease-in-out; }
@keyframes zap { from { background-position: -12px 55%, left center; } to { background-position: 80px 55%, left center; } }

/* Kilometerteller-tall */
.odo { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; vertical-align: top; }
.odo-strip { display: block; transition: transform .9s cubic-bezier(.2,.9,.3,1); }

/* Navigasjon: lynet blinker når noe lader, valgt ikon gjør et lite hopp */
.side nav button[aria-current='page'] svg, .mobile-nav button[aria-current='page'] svg { animation: hop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes hop { 40% { transform: translateY(-4px) rotate(-6deg); } }
[data-v='ladere'].live svg { color: var(--butter); animation: flicker 2.2s steps(1) 3; }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .2; } 12% { opacity: 1; } 16% { opacity: .3; } 22% { opacity: 1; } }
[data-v='ladere'].live { position: relative; }
[data-v='ladere'].live::after { content: ''; position: absolute; top: 8px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 2px #14284B; }
.side nav [data-v='ladere'].live::after { right: auto; left: 30px; top: 10px; }

/* Toast med en liten mugge i stedet for prikk */
.toast::before { width: 20px; height: 20px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 7h14l1 4c3 0 5 2 5 5s-2 5-5 5l-1 6c0 1-1 2-2 2H10c-1 0-2-1-2-2L7 9c0-1 0-2 1-2z' fill='%23F5C518' stroke='%2314284B' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M23 13.5c1.6 0 2.6 1 2.6 2.5s-1 2.5-2.6 2.5' fill='none' stroke='%2314284B' stroke-width='2.2'/%3E%3Ccircle cx='12.5' cy='15' r='1.4' fill='%2314284B'/%3E%3Ccircle cx='17.5' cy='15' r='1.4' fill='%2314284B'/%3E%3Cpath d='M12.5 19q2.5 2 5 0' fill='none' stroke='%2314284B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: toastjug .5s cubic-bezier(.34,1.56,.64,1) .05s both; }
.toast.bad::before { background-color: transparent; filter: hue-rotate(-50deg) saturate(1.6); }
.toast.warn::before { background-color: transparent; }
@keyframes toastjug { from { transform: rotate(-30deg) scale(.4); } }

/* Mugga som titter opp fra bunnen når du har scrollet helt ned */
.peek { position: fixed; right: 18px; bottom: -70px; width: 56px; height: 64px; z-index: 25; pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none; min-height: 0; transition: bottom .5s cubic-bezier(.34,1.56,.64,1); }
.peek.up { bottom: -18px; }
.owner-page .peek.up { bottom: calc(58px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .owner-page .peek.up { bottom: -18px; } }
.peek svg { width: 100%; height: 100%; }
.peek.up svg { animation: peekwave 1s ease-in-out .5s 2; transform-origin: 50% 100%; }
@keyframes peekwave { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* Beskjed fra eieren og vurdering etter ladingen */
.hostnote { margin: 14px 0 0; padding: 12px 14px 12px 16px; border-radius: var(--radius-s); background: var(--paper); border: 2px solid var(--line-soft); box-shadow: inset 6px 0 0 var(--butter); padding-left: 20px; }
.hostnote p { margin: .25em 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.rate-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rate-btns button[aria-pressed='true'] { background: var(--butter); border-color: #14284B; color: #14284B; }
.rate-btns button.pop span { display: inline-block; animation: thumb .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes thumb { 40% { transform: scale(1.6) rotate(-14deg); } }
.rate details.problem { margin-top: 10px; }

/* Kvitteringsstempel */
.receipt-panel { position: relative; }
.receipt-panel > .stamp { position: absolute; right: 8px; top: -22px; width: 82px; height: 82px; font-size: .82rem; margin: 0; background: color-mix(in srgb, var(--paper) 80%, transparent); }
.receipt-panel > .stamp svg { width: 24px; height: 24px; }
@media print { .stamp { animation: none; } }
.stamp { display: inline-grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 4px double var(--moss); color: var(--moss); font: 800 1rem/1.05 var(--display); text-align: center; transform: rotate(-12deg); margin: 4px auto 10px; animation: stamp .45s cubic-bezier(.2,1.4,.4,1) .3s both; }
.stamp svg { width: 30px; height: 30px; display: block; margin: 0 auto 2px; }
@keyframes stamp { from { opacity: 0; transform: rotate(-30deg) scale(1.8); } 70% { opacity: 1; transform: rotate(-10deg) scale(.94); } }

/* Skål! (hemmelig: skriv «skål» et sted uten skjemafelt) */
.cheers { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1001; }
.cheers i { position: absolute; width: 90px; height: 90px; top: calc(40% - 45px); }
.cheers i svg { width: 100%; height: 100%; }
.cheers i:first-child { left: calc(50% - 130px); animation: cheerL 1.3s cubic-bezier(.5,0,.3,1) both; }
.cheers i:last-child { right: calc(50% - 130px); animation: cheerR 1.3s cubic-bezier(.5,0,.3,1) both; transform: scaleX(-1); }
@keyframes cheerL { 0% { opacity: 0; transform: translateX(-60px); } 45% { opacity: 1; transform: translateX(42px) rotate(14deg); } 55% { transform: translateX(34px) rotate(8deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(20px); } }
@keyframes cheerR { 0% { opacity: 0; transform: scaleX(-1) translateX(-60px); } 45% { opacity: 1; transform: scaleX(-1) translateX(42px) rotate(14deg); } 55% { transform: scaleX(-1) translateX(34px) rotate(8deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: scaleX(-1) translateX(20px); } }

/* ---------- Kart ---------- */
.mugpin-wrap { background: none; border: 0; }
.mugpin { width: 34px; height: 42px; transform-origin: 50% 100%; filter: drop-shadow(0 2px 2px rgba(10,20,40,.35)); transition: transform .15s var(--ease-out); }
.mugpin svg { width: 100%; height: 100%; display: block; }
.leaflet-marker-icon:hover .mugpin, .leaflet-marker-icon:focus .mugpin { transform: scale(1.15) rotate(-6deg); }
.mugpin.pulse { animation: pinpop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes pinpop { 0% { transform: translateY(-14px) scale(.7); } 60% { transform: translateY(2px) scale(1.08, .92); } 100% { transform: none; } }
.leaflet-container { font: inherit; background: var(--sky); border-radius: var(--radius-s); }
.leaflet-container a { color: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: 16px; border: 2px solid #14284B; box-shadow: 0 14px 34px -12px rgba(10,20,40,.55); }
.leaflet-popup-content { margin: 12px 14px; font-size: .95rem; line-height: 1.4; }
.leaflet-popup-content .btn { min-height: 40px; }
.mp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mp-actions .btn-main { color: #14284B; }
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: brightness(.72) contrast(1.1) saturate(.75); }
  .leaflet-container a { color: var(--ink); }
  .leaflet-control-zoom a { background: var(--paper); color: var(--ink); }
}
/* Adressevelger med kart */
.placepicker { margin-top: 4px; }
.pp-combo { position: relative; }
.pp-list { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(10,20,40,.5); max-height: 260px; overflow: auto; }
.pp-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; gap: 0 .4em; align-items: center; }
.pp-list li[aria-selected='true'], .pp-list li[data-i]:hover { background: var(--sky); }
.pp-map { height: 230px; margin-top: 10px; border: 2px solid var(--line-soft); border-radius: var(--radius-s); overflow: hidden; }
.pp-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
fieldset.placefs { border-top: 1px solid var(--line-soft); margin-top: 14px; }
/* Minikart på gjestesiden */
.where { margin: 14px 0 0; }
.where .mini { height: 150px; border: 2px solid var(--line-soft); border-radius: var(--radius-s); overflow: hidden; }
.where .row { margin-top: 8px; }
/* Det åpne kartet */
.map-page { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.map-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #14284B; color: #fff; flex-wrap: wrap; z-index: 1001; }
.map-top .brand { color: #fff; }
.map-filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.map-filters .chip { background: transparent; color: #fff; border-color: #3A5180; min-height: 40px; }
.map-filters .chip[aria-pressed='true'] { background: var(--butter); color: #14284B; border-color: var(--butter); }
.map-filters .chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.map-main { flex: 1; display: grid; grid-template-columns: 1fr 360px; min-height: 0; }
.map-canvas { height: 100%; border-radius: 0; }
.map-list { overflow: auto; padding: 16px; background: var(--bg); border-left: 2px solid var(--line-soft); }
.map-list .grab { display: none; }
.ml-item { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; justify-content: flex-start; border: 2px solid var(--line-soft); background: var(--paper); border-radius: var(--radius-s); padding: 10px 12px; min-height: 56px; }
.ml-item .grow { flex: 1; min-width: 0; display: grid; }
.ml-item .ml-right { display: grid; justify-items: end; gap: 2px; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid #14284B; }
.st-free.dot, .lg.st-free::before { background: #F5C518; } .st-held.dot, .lg.st-held::before { background: #FFB347; } .st-busy.dot, .lg.st-busy::before { background: #7FA7E0; }
.st-closed.dot, .lg.st-closed::before { background: #C7CFDC; } .st-offline.dot, .lg.st-offline::before { background: #E8A0AC; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 8px; font-size: .85rem; }
.lg { display: inline-flex; gap: 6px; align-items: center; }
.lg::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #14284B; }
@media (max-width: 760px) {
  .map-main { grid-template-columns: 1fr; position: relative; }
  .map-list { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000; max-height: 34%; border: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px -18px rgba(10,20,40,.6); padding-bottom: max(16px, env(safe-area-inset-bottom)); transition: max-height .3s cubic-bezier(.32,.72,0,1); }
  .map-list.open { max-height: 78%; }
  .map-list .grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-soft); margin: -4px auto 10px; cursor: pointer; }
  .map-top { padding: 8px 12px; }
  .map-filters { margin-left: 0; width: 100%; }
}

/* Kontovelger */
.acct-switch { width: 100%; background: #22385F; border: 0; color: #fff; border-radius: var(--radius-s); padding: 10px 12px; margin: -8px 0 16px; display: grid; justify-items: start; text-align: left; gap: 2px; min-height: 52px; }
.acct-switch:hover { background: #2B4573; }
.acct-switch .acct-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.acct-switch .acct-type { font-size: .8rem; color: #A9B7CF; font-weight: 400; }
.acct-list { margin: 8px 0 14px; }
.acct-list button[aria-current='page'] strong::after { content: ' ✓'; color: var(--moss); }
/* Turbo (hemmelig) */
.turbo .jug .wave { animation-duration: .35s !important; fill: url(#none) #FF6B6B; }
.turbo .btn-main { background: linear-gradient(90deg, #F5C518, #FF9F43, #F5C518) 0 0 / 200% 100%; animation: turbo 1s linear 10; }
@keyframes turbo { to { background-position: -200% 0; } }
/* Sesong */
[data-season] .brand { position: relative; }
[data-season='jul'] .brand::before { content: '🎅'; position: absolute; left: 6px; top: -14px; font-size: 16px; transform: rotate(-18deg); pointer-events: none; }
[data-season='mai17'] .brand::before { content: '🇳🇴'; position: absolute; left: 18px; top: -12px; font-size: 13px; pointer-events: none; }
[data-season='halloween'] .brand::before { content: '🎃'; position: absolute; left: 12px; top: -12px; font-size: 13px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .confetti { display: none; }
}
.receipt-panel > h1, .receipt-panel > h2 { padding-right: 72px; }
.leaflet-popup-content a.btn { color: #14284B; }
.leaflet-popup-content a.btn-quiet { color: var(--ink); }
.leaflet-popup-content .mp > strong { font: 700 1.05rem var(--display); }
.ml-item .quiet, .ml-item .small { font-weight: 400; }

/* Innlogging: Vipps, Google, Apple og e-postlenke */
.btn-vipps { background: #FF5B24; color: #fff; border-color: #FF5B24; }
.btn-vipps:hover { background: #E84A15; }
.login-providers { margin-bottom: 4px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; margin: 14px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line, #D6DEEA); }

/* Kartboblen er alltid lys (som kartet), også i mørk modus: egne lyse fargeverdier inne i boblen */
.leaflet-container .leaflet-popup {
  --ink: #14284B; --ink-soft: #4A5C7D; --paper: #FFFFFF; --field: #FFFFFF; --line: #6F84A8; --line-soft: #D6DEEA; --sky: #E8EFF8;
  --moss: #1E7A4C; --moss-soft: #DFF3E7; --amber: #9A6200; --amber-soft: #FFF1D6; --berry: #B4233B; --berry-soft: #FCE4E8;
  color-scheme: light; color: var(--ink);
}
.leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background: #FFFFFF; color: #14284B; }
.leaflet-container .leaflet-popup-content a.btn-quiet { color: #14284B; background: #FFFFFF; border-color: #14284B; }
.leaflet-container a.leaflet-popup-close-button { color: #4A5C7D; }

/* OCPP-logg */
.ocpplog { width: 100%; border-collapse: collapse; }
.ocpplog td, .ocpplog th { vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line, #ddd); text-align: left; }
.ocpplog tr.bad td { background: color-mix(in srgb, var(--bad, #c0392b) 9%, transparent); }
.ocpplog .nowrap { white-space: nowrap; }
.ocpplog details.json pre { max-height: 22em; overflow: auto; font-size: 12px; background: var(--soft, #f4f4f4); padding: 8px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
dialog.wide { width: min(1000px, calc(100vw - 32px)); max-width: none; }
.sticker .sticker-id { margin: 6px 0 2px; font-size: .78rem; letter-spacing: .02em; }
.sticker .sticker-id strong { display: block; font: 800 2rem/1.1 var(--display); letter-spacing: .12em; }
.idtag { font: 700 .82em var(--mono, ui-monospace, monospace); letter-spacing: .08em; background: var(--soft, rgba(0,0,0,.06)); padding: 1px 6px; border-radius: 6px; }

/* Forside (muggen.no): «Lad nå» først, deretter for eiere */
.guest.wide { max-width: 760px; }
.landing .hero { text-align: center; padding: 8px 0 18px; }
.landing .hero h1 { font-size: clamp(2.3rem, 9vw, 3.4rem); margin-bottom: .2em; }
.landing .hero-jug { width: 110px; margin: 0 auto 4px; }
.landing .lead { font-size: 1.12rem; max-width: 34em; margin: 0 auto 6px; }
.landing .find { text-align: left; max-width: 520px; margin: 16px auto 10px; }
.landing .find label { font-weight: 700; }
.landing .find-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.landing .find-row .code-input { flex: 1 1 200px; font: 800 1.6rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: .55em .7em; min-height: 58px; }
.landing .find-row .code-input::placeholder { text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: 1.05rem; }
.landing .find-row .btn-big { flex: 1 1 140px; width: auto; }
.landing .hero-links { justify-content: center; max-width: 520px; margin: 0 auto; }
.landing .hero-links .btn { flex: 1 1 200px; }
.landing .owners { margin-top: 34px; padding-top: 26px; border-top: 2px solid var(--line-soft); }
.landing .kicker { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .82rem; color: var(--ink-soft); margin-bottom: .3em; }
.landing .owners h2 { font-size: clamp(1.7rem, 6vw, 2.3rem); }
.landing .steps { list-style: none; counter-reset: s; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.landing .steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: start; }
.landing .steps li::before { content: counter(s); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--butter); color: var(--butter-ink); font: 800 1.2rem/40px var(--display); text-align: center; }
.landing .steps li span { color: var(--ink-soft); }
.landing .who { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.landing .who .panel { margin: 0; padding: 16px; }
.landing .price-box { margin: 18px 0; }
.landing .faq { margin-top: 34px; }
.landing .foot { text-align: center; margin-top: 30px; }

/* Muggen-hjelpen (chat) */
dialog.chat { padding: 0; width: min(460px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 24px)); max-height: none; display: none; flex-direction: column; overflow: hidden; margin: auto 12px 12px auto; }
dialog.chat[open] { display: flex; }
@media (max-width: 600px) { dialog.chat { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; max-width: 100vw; } }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.chat-head h2 { margin: 0; font-size: 1.2rem; }
.chat-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; -webkit-overflow-scrolling: touch; }
.chat-contact { margin-bottom: 8px; }
.chat .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.chat .chip { min-height: 40px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.chat .msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.chat .msg.meg { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.chat .msg.hjelp { align-self: flex-start; background: var(--sky); border-bottom-left-radius: 4px; }
.chat .msg.form { max-width: 100%; width: 100%; background: var(--paper); border: 2px solid var(--line-soft); }
.chat .msg p:last-child { margin-bottom: 0; }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); align-items: flex-end; }
.chat-input textarea { flex: 1 1 auto; resize: none; min-height: 46px; max-height: 140px; }
.chat-input button { flex: 0 0 auto; min-height: 46px; }
.chat-human { margin: 0; padding: 0 16px 12px; text-align: center; font-size: .92rem; }
.chat-launch { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 10px 16px; min-height: 48px;
  background: var(--butter); color: var(--butter-ink); border: 2px solid var(--ink); font-weight: 800; box-shadow: var(--shadow); }
.chat-launch svg { width: 22px; height: 22px; }
@media print { .chat-launch { display: none; } }

/* Kvittering og nøkkeltall på smale skjermer: etikett over verdi, ingen ord delt midt i */
@media (max-width: 420px) {
  .receipt-panel .kv { grid-template-columns: 1fr; }
  .receipt-panel .kv dt { margin-top: .45em; }
  .receipt-panel .kv dd { text-align: left; padding-left: 0; overflow-wrap: break-word; }
  .receipt-panel .kv .sum { border-top: 0; }
  .receipt-panel .kv dt.sum { border-top: 2px solid var(--ink); }
}
.guest { overflow-x: clip; }
/* Toppfeltet bryter i stedet for å gi sidescroll ved stor tekst (WCAG 1.4.10) */
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
h1 { overflow-wrap: break-word; hyphens: manual; }
/* Tall: vanlig null (Atkinsons null med strek ligner Ø) */
.price, .big-number, .stat, dd, .num, .amt, [data-amount] { font-family: var(--display); }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
/* Mange ladepunkter: kompakte rader */
details.ccard { border: 2px solid var(--line-soft); border-radius: var(--radius-l); background: var(--paper); }
details.ccard > summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; min-height: 52px; list-style: none; }
details.ccard > summary::-webkit-details-marker { display: none; }
details.ccard > summary::after { content: '▾'; color: var(--ink-soft); }
details.ccard[open] > summary::after { content: '▴'; }
details.ccard > .card { border: 0; box-shadow: none; margin: 0; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--radius-l) var(--radius-l); }
details.ccard .cname { min-width: 0; flex: 1 1 180px; }
.ctools { margin-bottom: 16px; }

/* OCPP-logg på mobil: kort i stedet for bred tabell */
@media (max-width: 640px) {
  table.ocpplog thead { display: none; }
  table.ocpplog, table.ocpplog tbody { display: block; }
  table.ocpplog tr { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--line, #d6deea); }
  table.ocpplog td { display: block; border: 0; padding: 0; }
  table.ocpplog td:last-child { grid-column: 1 / -1; }
  table.ocpplog pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* Veiviser for nye eiere */
.wiz-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 8px 0 18px; flex-wrap: wrap; font-size: .85rem; }
.wiz-steps li { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.wiz-steps li span { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; font-size: .8rem; }
.wiz-steps li.now { color: var(--ink); font-weight: 700; }
.wiz-steps li.now span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wiz-steps li.done span { background: var(--moss); border-color: var(--moss); color: #fff; }
@media (max-width: 480px) { .wiz-steps li:not(.now) { font-size: 0; gap: 0; } .wiz-steps li:not(.now) span { font-size: .8rem; } }
.code-big { font-size: 2.2rem; letter-spacing: .12em; font-weight: 800; margin: .2em 0; }

/* Hjelp-knappen skal aldri dekke bunnmenyen på eiersiden (mobil): den løftes over menyen og blir rund */
@media (max-width: 760px) {
  body.owner-page .chat-launch { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; padding: 0; width: 52px; min-height: 52px; justify-content: center; }
  body.owner-page .chat-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.owner-page .content { padding-bottom: 150px; }
}

/* Min side: ladinger som kort – tåler stor tekst og smale skjermer */
.charge-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.charge-list li:last-child { border-bottom: 0; }
.charge-list .cl-main { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.charge-list .cl-right { text-align: right; flex: 0 0 auto; }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
.wiz-steps li.skipped span { border-style: dashed; color: var(--ink-soft); }

/* Kartet: samme farge for samme status på markør, liste og forklaring – pluss et tegn, så fargen ikke bærer alt */
.pill.mst { color: #14284B; border: 1.5px solid #14284B; }
.pill.mst::before { content: none; }
.pill.mst-free { background: #F5C518; } .pill.mst-free::after { content: ' ✓'; }
.pill.mst-held { background: #FFB347; } .pill.mst-held::after { content: ' ⏱'; }
.pill.mst-busy { background: #7FA7E0; } .pill.mst-busy::after { content: ' ⚡'; }
.pill.mst-closed { background: #C7CFDC; } .pill.mst-closed::after { content: ' ✕'; }
.pill.mst-offline { background: #E8A0AC; } .pill.mst-offline::after { content: ' ⏻'; }
.chat .chip { min-height: 44px; }
.landing .foot a, .foot a { display: inline-block; padding: 12px 4px; }
/* Hjelp-knappen viker for lagrelinja (den ligger ellers oppå «Lagre» på mobil) */
body:has(.savebar) .chat-launch { display: none; }
/* Stempelet på kvitteringen skal aldri gjøre siden bredere enn skjermen */
.guest { overflow-x: clip; }

/* Oversikt: akkurat nå og laderen i tall */
.live-now .ln-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ln-power { display: flex; align-items: center; gap: 8px; }
.ln-bolt svg { width: 30px; height: 30px; fill: var(--butter); stroke: var(--ink); animation: boltPulse 1.6s ease-in-out infinite; }
@keyframes boltPulse { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .ln-bolt svg { animation: none; } }
.meter { height: 6px; border-radius: 999px; background: var(--line-soft); margin-top: 6px; overflow: hidden; max-width: 240px; }
.meter span { display: block; height: 100%; background: var(--moss); border-radius: 999px; transition: width .6s var(--ease-out); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-l, 18px); padding: 14px 16px; }
.tile .stat { font-size: 1.6rem; }
figure.chart { margin: 0; }
figure.chart figcaption { margin-bottom: 10px; }
.bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--line); }
.bars .bar { flex: 1 1 0; min-width: 2px; background: var(--ink); border-radius: 4px 4px 0 0; opacity: .85; cursor: default; }
.bars .bar:hover, .bars .bar:focus { opacity: 1; background: var(--moss); outline: none; }
.bars-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.bar-tip { position: absolute; top: -6px; width: 120px; text-align: center; background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 700; padding: 4px 6px; border-radius: 8px; pointer-events: none; transform: translateY(-100%); }

/* Ladekurver */
.curves { display: grid; gap: 10px; }
figure.curve { margin: 0; position: relative; }
figure.curve figcaption { font-size: .9rem; margin-bottom: 2px; }
figure.curve svg { width: 100%; height: 120px; display: block; overflow: visible; touch-action: pan-y; }
figure.curve .cg { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
figure.curve .ct { fill: var(--ink-soft); font-size: 11px; font-family: var(--body); }
figure.curve .cl { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
figure.curve[data-key="kw"] .cl { stroke: var(--moss); }
figure.curve .ca { fill: var(--moss); opacity: .14; }
figure.curve .cx { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
figure.curve .cd { fill: var(--paper); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
figure.curve .hit:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.curve-tip { position: absolute; top: 18px; width: 140px; text-align: center; background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 700; padding: 4px 6px; border-radius: 8px; pointer-events: none; }

/* Avregning og andre utskriftsdokumenter */
.print-doc { background: var(--bg); }
.doc { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.doc th, .doc td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc .num { text-align: right; white-space: nowrap; }
.doc .kvtable tr.sum td { border-top: 2px solid var(--ink); }
@media print { .no-print { display: none !important; } .print-doc { background: #fff; } .doc { padding: 0; } }