/* Spareflyt Dag — svart, skarp, tiling-WM-aktig. Mobil først.
   Nær-ren svart base, hvit tekst, to vivide aksenter (teal + gull) brukt skarpt. Ingen myke paneler. */
:root {
  --bg: #000;
  --tile: #050505;
  --tile2: #0a0a0a;
  --line: #1a1a1a;
  --line2: #2c2c2c;
  --ink: #fff;
  --mid: #b5b5b5;
  --dim: #9a9a9a;
  --accent: #3ddec8;
  --gold: #f0c14a;
  --ok: #3ddec8;
  --warn: #ffb020;
  --crit: #ff4d4d;
  --mood: var(--ok);
  --gap: 16px;
  --r: 12px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --touch: 48px;
  --sat: env(safe-area-inset-top, 0px);
  --air: 10px;
  --noise: url(bg-noise.png?v=20);
  color-scheme: dark;
}
/* bakgrunnstile (v19): 256 CSS px, generert i 1x/2x/3x slik at hver celle = 1 ekte enhetspiksel (skarpt, ingen skalering) */
@media (min-resolution: 1.5dppx) { :root { --noise: url(bg-noise-2x.png?v=20); } }
@media (min-resolution: 2.5dppx) { :root { --noise: url(bg-noise-3x.png?v=20); } }
body[data-mood="ok"] { --mood: var(--ok); }
body[data-mood="warn"] { --mood: var(--warn); }
body[data-mood="over"] { --mood: var(--crit); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* bakgrunn (v19, omp.sh-lignende «dus»): svart + rolig, organisk dither på 1 enhetspiksel (snitt ~15/255, maks 40/255; ingen sjakkrute, ingen periodisk variasjon) + veldig svak
   teal/hvit vignett for dybde. Ingen tåke-lag (v10 fjernet). Tile 256 CSS px i 1x/2x/3x (se --noise). Ligger på html, så den dekker også gummibånd-området. */
html {
  -webkit-text-size-adjust: 100%; background-color: var(--bg);
  background-image: var(--noise), radial-gradient(120% 70% at 50% -8%, rgba(61, 222, 200, .055), rgba(61, 222, 200, 0) 62%), radial-gradient(90% 60% at 50% 112%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 70%);
  background-size: 256px 256px, 100% 100vh, 100% 100vh; background-size: 256px 256px, 100% 100lvh, 100% 100lvh; background-position: 0 0, 0 0, 0 0; background-repeat: repeat, no-repeat, no-repeat;
  overscroll-behavior-y: none;
}
body { image-rendering: auto; } /* ikke arv pixelated til canvas/bilder */
body {
  font-family: var(--font); color: var(--ink); background: transparent;
  min-height: 100dvh; line-height: 1.4; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button, a, select, summary { touch-action: manipulation; }
/* tydelig tastatur-/fokusmarkering (kun :focus-visible, påvirker ikke trykk med finger/mus) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.q:focus-visible, input:focus-visible, select:focus-visible { outline: none; }
::selection { background: rgba(61, 222, 200, .3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* én skarp humør-linje øverst, ellers ren svart */
/* humør-linja (.moodline, v15): vanlig element i flyten rett under toppraden (logo/nav) — se v15-seksjonen nederst */
.wrap {
  position: relative; z-index: 1; width: 100%; max-width: 480px; margin: 0 auto;
  padding: calc(var(--sat) + var(--air)) max(14px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(14px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: var(--gap);
}

/* forsiden: luft mellom logo, hero, input, logg, uke og mål */
.home { display: flex; flex-direction: column; gap: 18px; }

/* header / logo (liten) */
.top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 2px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.mark { width: 34px; height: 34px; display: block; flex: none; shape-rendering: geometricPrecision; }
.word { font-family: var(--font); font-weight: 800; font-size: 1.12rem; letter-spacing: -.05em; line-height: 1; }
.brand .word { display: flex; flex-direction: row; align-items: baseline; }
.word em { font-style: normal; color: var(--accent); }
/* «.no» = ekte liten tekst (v13): gull som logoens startprikk (#f0c14a, ~12:1 mot svart), ca. 0,58 em av «flyt», medium (500), på samme grunnlinje; «.»-en er startprikken, «Spareflyt» er hovedbudskapet */
.tld { display: inline-block; flex: none; font-family: var(--font); font-weight: 500; font-size: .58em; line-height: 1; letter-spacing: 0; color: var(--gold); margin-left: .12em; text-shadow: none; -webkit-font-smoothing: antialiased; }
.pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line2); border-radius: 8px; text-decoration: none;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; color: var(--mid); background: #000;
}
.pill:active { transform: scale(.96); }
.pill:active, .pill:hover { color: #000; background: var(--accent); border-color: var(--accent); }
/* «Flyt»-knapp i topp-navigasjonen (forside + budsjett) → flyt.html */
.topnav { display: flex; align-items: center; gap: 8px; }
.pill.flyt { border-color: rgba(61, 222, 200, .55); color: var(--accent); }
.pill.flyt::before { content: ""; width: 10px; height: 10px; margin-right: 8px; flex: none; background: linear-gradient(90deg, var(--accent) 0 60%, transparent 60% 66%, var(--gold) 66%); box-shadow: 0 -1px 0 #000 inset; }
.pill.flyt:hover, .pill.flyt:active { color: #000; background: var(--accent); border-color: var(--accent); }

.tile { background: #040404; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; }
.cap { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cap.gold { color: var(--gold); }
.hint { font-size: .8rem; color: var(--dim); margin-top: 12px; }
.hint.center { text-align: center; }
code { font-family: var(--mono); color: var(--mid); }

/* ===== hero: partikkelflyt + stort tall + mål (sluket) ===== */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 196px; padding: 12px 14px 14px; background: #000;
  border: 1px solid color-mix(in srgb, var(--mood) 32%, #1a1a1a); border-radius: var(--r); transition: border-color .5s;
}
.flow-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; image-rendering: crisp-edges; image-rendering: pixelated; }  /* lavoppløselig buffer (1 celle = 3 CSS px) skaleres med nearest-neighbour */
.hero > :not(canvas) { position: relative; z-index: 1; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 22px; }
.src { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); white-space: nowrap; }
.src b { color: var(--mood); font-weight: 700; }
.srcdot { width: 9px; height: 9px; border-radius: 0; background: var(--mood); display: inline-block; }
.hero-sub { font-family: var(--mono); font-size: .68rem; color: var(--dim); text-align: right; max-width: 52%; line-height: 1.3; }
.hero-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; padding: 4px 0; text-shadow: 0 0 14px #000, 0 0 3px #000; }
.hero-mid .cap { color: var(--mid); margin-bottom: 2px; }
.figrow { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.fig {
  font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.05em; color: #fff;
  text-shadow: 0 0 3px #000; transition: color .4s;
}
body[data-mood="warn"] .fig, .splash[data-mood="warn"] .fig { color: #ffd488; }
body[data-mood="over"] .fig, .splash[data-mood="over"] .fig { color: #ff8585; }
.fig[data-size="xl"] { font-size: 4.6rem; }
.fig[data-size="l"] { font-size: 3.8rem; }
.fig[data-size="m"] { font-size: 3rem; }
.fig[data-size="s"] { font-size: 2.3rem; }
.figunit { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--mid); letter-spacing: .04em; }
.pulse { animation: pulse .8s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mood) 70%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes breathe { 50% { opacity: .55; } }

/* mål (sluk) i bunnen av heroen */
.hero-goal { display: flex; flex-direction: column; gap: 6px; }
.hero-goal { text-shadow: 0 0 6px #000, 0 0 2px #000; }
.fo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.fo-lbl { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.fo-name { font-weight: 700; font-size: .92rem; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-nums { display: inline-flex; align-items: baseline; font-family: var(--mono); white-space: nowrap; }
.fo-val { font-size: 1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fo-val::after { content: " " attr(data-unit); font-size: .72rem; color: var(--mid); font-weight: 600; }
.fo-of { font-size: .72rem; color: var(--dim); margin-left: .35em; }
.bar { position: relative; height: 6px; background: #121212; border-radius: 99px; overflow: hidden; --a: 0%; --b: 0%; transition: transform .12s, box-shadow .12s; transform-origin: center; }
.bar .solid { position: absolute; left: 0; top: 0; bottom: 0; width: var(--a); background: var(--gold); border-radius: 99px; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.bar .live { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--b); background: repeating-linear-gradient(135deg, var(--accent) 0 4px, rgba(61, 222, 200, .35) 4px 8px); transition: left .9s cubic-bezier(.2, .8, .2, 1), width .9s cubic-bezier(.2, .8, .2, 1); animation: flow 1.2s linear infinite; background-size: 11.3px 11.3px; }
.bar.neg .live { background: repeating-linear-gradient(135deg, var(--crit) 0 4px, rgba(255, 77, 77, .35) 4px 8px); animation: none; }
.bar.bump { transform: scaleY(1.9); box-shadow: 0 0 0 1px rgba(240, 193, 74, .9); }
@keyframes flow { to { background-position: 11.3px 0; } }
.fo-sub { font-family: var(--mono); font-size: .68rem; color: var(--dim); line-height: 1.25; }
.fo-sub.good { color: var(--accent); }
.fo-sub.bad { color: #ff7b7b; }
.bar.glow { animation: barglow 1s ease-out; }
@keyframes barglow { 0% { box-shadow: 0 0 0 1px rgba(240, 193, 74, .9); } 100% { box-shadow: 0 0 0 4px rgba(240, 193, 74, 0); } }

/* ===== inntasting ===== */
.entry-row { display: flex; gap: 6px; align-items: stretch; }
.q {
  flex: 1; min-width: 0; height: 54px; padding: 0 14px; border-radius: 10px; background: #000; border: 1px solid #3a3a3a; outline: none;
  font-family: var(--mono); font-size: 1.1rem; font-weight: 500; color: #fff; caret-color: var(--accent);
}
.q::placeholder { color: #9a9a9a; }
.q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 222, 200, .22); }
/* forsidens input (v7): litt mer synlig enn vanlig felt, men rolig (ikke demo-input): 56px, 1.5px teal kant, svak ring som styrkes ved fokus, ingen glød */
.entry-lbl { display: block; margin: 0 2px 6px; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.entry .q { height: 56px; border: 1.5px solid rgba(61, 222, 200, .55); box-shadow: 0 0 0 3px rgba(61, 222, 200, .08); background: #000; }
.entry .q::placeholder { font-size: .92rem; font-weight: 500; color: #a0a0a0; }
.entry .q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 222, 200, .3); }
.entry .curchip select { height: 56px; }
.entry .go { width: 60px; height: 56px; font-size: 1.8rem; }
.curchip { position: relative; display: flex; }
.curchip select {
  appearance: none; -webkit-appearance: none; height: 54px; min-width: 66px; padding: 0 10px; text-align: center; text-align-last: center;
  background: #000; border: 1px solid #3a3a3a; border-radius: 10px; font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--mid); cursor: pointer;
}
.curchip.foreign select { color: var(--gold); border-color: var(--gold); }
.go {
  width: 54px; height: 54px; border-radius: 10px; border: 0; cursor: pointer; background: var(--accent); color: #000;
  font-size: 1.6rem; font-weight: 800; line-height: 1; transition: transform .12s, filter .2s;
}
.go:active { transform: scale(.94); }
.go:disabled { filter: grayscale(.6) brightness(.6); }
.busy .go { animation: breathe 1s infinite; }
.preview { font-family: var(--mono); font-size: .72rem; color: var(--dim); margin: 10px 2px 0; min-height: 1.15em; overflow-wrap: anywhere; }
.preview.bad { color: #ff7b7b; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ===== uke + rekke i én slank rad ===== */
.weekrow { background: #030303; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.mini { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding-right: 10px; border-right: 1px solid var(--line); }
.mini-fig { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mini.hot .mini-fig { color: var(--accent); text-shadow: 0 0 14px rgba(61, 222, 200, .6); }
.mini-sub { font-family: var(--mono); font-size: .62rem; color: var(--dim); line-height: 1.15; max-width: 5.2em; }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.d { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.d .dw { font-family: var(--mono); font-size: .58rem; font-weight: 600; color: var(--dim); line-height: 1; }
.d .dot { width: 12px; height: 12px; border-radius: 50%; background: #1a1a1a; border: 1px solid transparent; }
.d.under .dot { background: var(--accent); box-shadow: 0 0 8px rgba(61, 222, 200, .6); }
.d.over .dot { background: var(--crit); }
.d.pre .dot { background: transparent; border-color: #2c2c2c; }
.d.today .dot { outline: 1.5px solid #fff; outline-offset: 2px; }
.d.today .dw { color: #fff; }

/* ===== logg: 3 rader synlige, resten scroller ===== */
.log { background: #030303; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 8px; }
.log-head { display: flex; justify-content: space-between; align-items: baseline; min-height: 22px; margin-bottom: 4px; }
.loglist { list-style: none; max-height: 132px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.loglist li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); min-height: 44px; animation: slidein .35s ease-out; }
.loglist li:first-child { border-top: 0; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
.l-left { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.l-lab { color: #e6e6e6; font-size: .92rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-meta { font-family: var(--mono); font-size: .62rem; color: var(--dim); line-height: 1.2; }
.l-amt { font-family: var(--mono); font-weight: 700; font-size: 1rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x { width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--dim); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 10px; }
.x:hover, .x:active { color: var(--crit); background: rgba(255, 77, 77, .1); }
.empty { font-size: .84rem; color: var(--dim); padding: 10px 12px; margin: 4px 0 6px; border: 1px dashed var(--line2); border-radius: 10px; text-align: center; line-height: 1.45; }
.empty b { color: var(--mid); font-weight: 600; }

/* ===== tips: legg til på hjemskjerm ===== */
.a2hs { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border: 1px dashed var(--line2); border-radius: var(--r); background: #030303; }
.a2hs p { flex: 1; font-family: var(--mono); font-size: .74rem; line-height: 1.4; color: var(--mid); }
.tick { animation: tick .45s ease-out; }
@keyframes tick { 0% { color: var(--accent); transform: scale(1.06); } 100% { transform: none; } }
.crow strong { display: inline-block; transform-origin: right center; }

/* ===== banner ===== */
.banner { display: flex; align-items: center; gap: 8px; padding: 14px 6px 14px 16px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--tile); }
.banner .b-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.banner strong { font-size: .98rem; }
.banner span { font-family: var(--mono); font-size: .76rem; color: var(--mid); }
.banner.good { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(61, 222, 200, .06); animation: glowin 1.6s ease-out; }
.banner.good strong { color: var(--accent); }
.banner.soft { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
@keyframes glowin { 0% { box-shadow: 0 0 0 0 rgba(61, 222, 200, .6); } 100% { box-shadow: 0 0 40px 0 transparent; } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: fall 1.8s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .2; } }

/* ===== toast ===== */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translate(-50%, 20px);
  max-width: min(92vw, 440px); z-index: 60; padding: 12px 16px; border-radius: 12px;
  background: #0c0c0c; border: 1px solid var(--line2); font-family: var(--mono); font-size: .8rem; color: var(--ink);
  opacity: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .9); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity .25s, transform .25s; }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin-top: 8px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-family: var(--mono); font-size: .78rem; color: var(--dim); text-decoration: none; }
.foot a:hover, .foot a:active { color: var(--accent); }

/* ===== onboarding / skjema ===== */
.onb { display: flex; flex-direction: column; gap: 22px; padding-top: 10px; }
.steps { display: flex; gap: 6px; }
.steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.steps i.on { background: var(--accent); }
.kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.big { font-size: clamp(1.9rem, 8.5vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin-bottom: 24px; }
.h2 { font-size: 1.6rem; letter-spacing: -.03em; font-weight: 800; margin: 4px 2px 6px; }
.curgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cur-opt {
  height: 72px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--tile); cursor: pointer;
  font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--mid); transition: all .15s;
}
.curgrid.small .cur-opt { height: 52px; font-size: .95rem; }
.cur-opt:active { transform: scale(.96); }
.cur-opt:focus-visible { outline-offset: 2px; }
.cur-opt.on { color: #05231f; background: var(--accent); border-color: var(--accent); }
.form { display: flex; flex-direction: column; gap: 24px; }
.tile.form { gap: 26px; }
.sect { display: flex; flex-direction: column; }
.sect + .sect, .form > .sect + .sect { padding-top: 22px; border-top: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 8px; }
.lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.lbl small { text-transform: none; letter-spacing: 0; font-size: .7rem; }
.moneyrow { display: flex; align-items: center; gap: 8px; }
input.money, input.txt, .line .lab {
  flex: 1; min-width: 0; height: 56px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); outline: none;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}
input.txt, .line .lab { font-size: 1.05rem; font-weight: 500; font-family: var(--font); }
input.money { text-align: right; }
.field > input.txt { flex: none; width: 100%; }
input.money.derived { color: var(--mid); border-style: dashed; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 222, 200, .14); }
.cur { font-family: var(--mono); color: var(--mid); width: 2.4rem; font-size: .9rem; }
.lines { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.line { display: flex; gap: 8px; align-items: center; }
.line .lab { flex: 1.3; height: 48px; font-size: 1rem; }
.line input.money { flex: 1; height: 48px; font-size: 1.05rem; }
.lineact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.addline { min-height: 44px; padding: 0 14px; background: transparent; border: 1px dashed var(--line2); border-radius: 12px; color: var(--mid); font-family: var(--mono); font-size: .8rem; cursor: pointer; }
.addline:hover, .addline:active { color: var(--accent); border-color: var(--accent); }
.qf-toggle { border-style: solid; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--line2)); }
.qf-toggle[aria-expanded="true"] { background: rgba(240, 193, 74, .08); border-color: var(--gold); }
.qf { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: #000; animation: slidein .2s ease-out; }
.qf-chip { min-height: 44px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line2); background: var(--tile2); color: #fff; font-family: var(--font); font-weight: 600; font-size: .84rem; cursor: pointer; }
.qf-chip:hover, .qf-chip:active { background: var(--accent); color: #000; border-color: var(--accent); }
.calc { background: var(--tile); border: 1px solid var(--line2); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.crow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.crow strong { font-family: var(--mono); font-size: 1rem; color: var(--mid); font-variant-numeric: tabular-nums; }
.crow.main strong { font-size: 1.6rem; color: #fff; }
.crow.neg strong { color: #ff7b7b; }
.warn { font-size: .8rem; color: var(--warn); }
.nav { display: flex; gap: var(--gap); }
.btn {
  min-height: 56px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line2); background: var(--tile); cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 1rem; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.btn.primary { background: var(--accent); color: #05231f; border-color: var(--accent); flex: 1; }
.btn.ghost { color: var(--mid); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn { transition: transform .12s, background-color .15s, border-color .15s, color .15s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.primary:active:not(:disabled) { filter: brightness(.9); }
.btn.ghost:hover, .btn.ghost:active { border-color: var(--mid); color: #fff; }
.nav .btn.ghost { flex: 0 0 110px; }
.soon { font-style: normal; font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 99px; padding: 2px 8px; }

/* budsjett-side */
.bud { display: flex; flex-direction: column; gap: var(--gap); }
#editor { display: flex; flex-direction: column; gap: var(--gap); }
.gold-t { border-color: color-mix(in srgb, var(--gold) 22%, var(--line)); }
.jsonview {
  margin: 10px 0; max-height: 260px; overflow: auto; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .7rem; color: var(--mid); white-space: pre; -webkit-overflow-scrolling: touch;
}
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
.btnrow .btn { flex: 1 1 140px; font-size: .9rem; }
.empty-state > p { font-size: 1rem; line-height: 1.45; color: var(--mid); }
.empty-state > p strong { color: #fff; }
.empty-state .row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.empty-state .btn { flex: 1; }
.warnbtn { width: 100%; color: #ff7b7b; border-color: rgba(255, 92, 92, .3); }
.danger { padding: 8px; }


.foot a.quiet { font-size: .7rem; color: #858585; }

/* =====================================================================
   Splash / Om Spareflyt (steg 0): logo → hero → STOR input → chips → tags → CTA
   ===================================================================== */
body.sp-open { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #000; --mood: var(--ok); }
.splash[data-mood="warn"] { --mood: var(--warn); }
.splash[data-mood="over"] { --mood: var(--crit); }
.splash::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--noise) 0 0 / 256px 256px repeat, radial-gradient(120% 70% at 50% -8%, rgba(61, 222, 200, .055), rgba(61, 222, 200, 0) 62%); }
/* v19: pikselskarp (nearest) kun ved heltalls-DPR (1x/2x/3x = tilen vises 1:1); ved brøk-DPR (f.eks. 2.625) ville pixelated gi alias/moiré, så der brukes vanlig glatt skalering */
@media (resolution: 1dppx), (resolution: 2dppx), (resolution: 3dppx) { html, .splash::before { image-rendering: crisp-edges; image-rendering: pixelated; } }
.sp-scroll { position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sp-in {
  width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(14px, 2.2dvh, 20px);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) max(14px, env(safe-area-inset-right, 0px)) 14px max(14px, env(safe-area-inset-left, 0px));
}
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sp-side { display: flex; align-items: flex-start; gap: 4px; flex: none; }
.sp-mark { display: block; width: 56px; height: 56px; margin: 4px 2px 0 0; border-radius: 14px; box-shadow: 0 0 0 1px #2a2a2a; image-rendering: auto; }
.sp-x { width: 44px; height: 44px; margin: -6px -8px 0 0; border: 0; background: transparent; color: var(--mid); font-size: 1.8rem; line-height: 1; cursor: pointer; border-radius: 10px; }
.sp-x:hover, .sp-x:active { color: #fff; background: rgba(255, 255, 255, .06); }

/* stablet logo (beholdt, mindre) */
.sp-logo { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 0 2px; font-weight: 800; font-size: clamp(3rem, 16.5vw, 4.3rem); line-height: .84; letter-spacing: -.07em; color: #fff; }
.sp-l1 { display: block; }
.sp-l2 { display: flex; align-items: baseline; width: 100%; }
.sp-l2 em { font-style: normal; color: var(--accent); text-shadow: 0 0 30px rgba(61, 222, 200, .5); }
.sp-l2 .tld { margin-left: .1em; }
.sp-tag { margin: 16px 2px 8px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; }

.sp-in { min-height: 100%; }
.sp-hero { min-height: 196px; flex: 0 0 auto; }
.sp-tools { display: flex; align-items: center; margin: -9px -8px -9px 0; }
.sp-mini { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--dim); font-family: var(--mono); font-size: .78rem; cursor: pointer; border-radius: 10px; }
.sp-mini:hover, .sp-mini:active { color: var(--accent); }
.sp-mini.night { color: var(--gold); font-weight: 600; }

/* demo-input: skal være det tydeligste på siden */
.sp-entry { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sp-lbl { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); }
.sp-entry .q { height: 60px; font-size: 1.1rem; background: #000; border: 2px solid var(--accent); color: #fff; padding: 0 14px; box-shadow: 0 0 0 0 rgba(61, 222, 200, .5); animation: spcall 2.2s ease-in-out infinite; }
.sp-entry .q::placeholder { color: #a6a6a6; font-weight: 500; }
.sp-entry .q:focus, .sp-entry .q.typing { animation: none; box-shadow: 0 0 0 4px rgba(61, 222, 200, .3), 0 0 24px rgba(61, 222, 200, .35); background: #031311; }
@keyframes spcall { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 222, 200, .0); } 50% { box-shadow: 0 0 0 4px rgba(61, 222, 200, .22), 0 0 18px rgba(61, 222, 200, .25); } }
.go-txt { width: auto; min-width: 104px; height: 60px; padding: 0 16px; font-family: var(--font); font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.sp-pv { margin: 0 2px; }
.sp-chips { display: flex; gap: 8px; }
.sp-chip {
  flex: 1 1 0; min-height: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line2); background: #000; cursor: pointer;
  font-family: var(--mono); font-weight: 600; font-size: .84rem; color: #fff; transition: transform .12s, border-color .2s, box-shadow .2s;
}
.sp-chip:hover { border-color: var(--accent); }
.sp-chip:active { transform: scale(.95); background: var(--accent); color: #000; }
.sp-invite .sp-chip { animation: spinvite 1.8s ease-in-out infinite; }
.sp-invite .sp-chip:nth-child(2) { animation-delay: .25s; }
.sp-invite .sp-chip:nth-child(3) { animation-delay: .5s; }
@keyframes spinvite { 0%, 100% { border-color: var(--line2); } 50% { border-color: var(--accent); box-shadow: 0 0 12px rgba(61, 222, 200, .3); } }

/* forklaringskjede: én slank rad med små tagger */
.sp-tags { list-style: none; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: nowrap; margin-top: 6px; }
.sp-tags li { font-family: var(--mono); font-size: .64rem; letter-spacing: .02em; color: var(--mid); padding: 3px 7px; border: 1px solid var(--line2); border-radius: 6px; white-space: nowrap; }
.sp-tags li { position: relative; }
.sp-tags li:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-52%); color: var(--dim); font-size: .9rem; }
.sp-tags li.mid { color: var(--accent); border-color: rgba(61, 222, 200, .5); }
.sp-tags li.gold { color: var(--gold); border-color: rgba(240, 193, 74, .5); }

/* fast primærknapp */
.sp-cta { position: relative; z-index: 2; padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 12px); background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
.sp-cta-in { max-width: 480px; margin: 0 auto; padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); display: flex; }
.sp-cta .btn { width: 100%; min-height: 56px; font-size: 1.1rem; }

.sp-in-anim .sp-head, .sp-in-anim .sp-hero, .sp-in-anim .sp-entry { animation: spin .6s cubic-bezier(.2, .8, .2, 1) both; }
.sp-in-anim .sp-hero { animation-delay: .08s; } .sp-in-anim .sp-entry { animation-delay: .16s; }
@keyframes spin { from { opacity: 0; transform: translateY(12px); } }

@media (max-height: 700px) {
  .sp-in { gap: 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .sp-mark { width: 44px; height: 44px; border-radius: 11px; } .sp-logo { font-size: 2.7rem; } .sp-tag { margin: 10px 2px 4px; font-size: 1rem; }
  .sp-hero { min-height: 176px; } .hero { min-height: 176px; } .fig[data-size="xl"] { font-size: 4rem; }
  .sp-entry .q, .go-txt { height: 56px; }
}
@media (max-width: 360px) {
  .fig[data-size="xl"] { font-size: 4rem; } .fig[data-size="l"] { font-size: 3.4rem; }
  .go-txt { min-width: 92px; padding: 0 12px; } .sp-tags li { font-size: .6rem; padding: 3px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sp-entry .q { box-shadow: 0 0 0 3px rgba(61, 222, 200, .22); }
}

/* =====================================================================
   v10: app-ikon-knapper + «Legg til på hjemskjermen»-dialog (js/install.js)
   ===================================================================== */
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.word-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.mark-btn { flex: none; width: 44px; height: 44px; margin: 0 -5px 0 -5px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; border-radius: 10px; -webkit-appearance: none; appearance: none; }
.mark-btn:active .mark { transform: scale(.92); }
.mark-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.sp-mark-btn { flex: none; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 14px; -webkit-appearance: none; appearance: none; }
.sp-mark-btn:active .sp-mark { transform: scale(.94); }
.sp-mark-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.a2hs-b { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid rgba(61, 222, 200, .55); border-radius: 8px; background: #000; color: var(--accent); font-family: var(--mono); font-size: .72rem; font-weight: 700; cursor: pointer; }
.a2hs-b:active { background: var(--accent); color: #000; }

body.ins-open { overflow: hidden; }
.ins { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.ins[hidden] { display: none !important; }
.ins-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); opacity: 0; transition: opacity .18s steps(4); }
.ins-sheet { position: relative; width: 100%; max-width: 480px; max-height: min(92dvh, 720px); overflow-y: auto; overscroll-behavior: contain; outline: none;
  background: #050505; border: 1px solid var(--line2); border-bottom: 0; border-radius: 14px 14px 0 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateY(24px); opacity: 0; transition: transform .2s steps(5), opacity .2s steps(5); }
.ins.on .ins-bd { opacity: 1; } .ins.on .ins-sheet { transform: none; opacity: 1; }
.ins-grip { width: 36px; height: 4px; margin: 2px auto 8px; background: var(--line2); }
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ins-head h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.ins-x { flex: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--mid); font-size: 1.8rem; line-height: 1; cursor: pointer; border-radius: 10px; }
.ins-x:hover, .ins-x:active { color: #fff; background: rgba(255, 255, 255, .06); }
.ins-lead { margin: 2px 0 12px; color: var(--mid); font-size: .86rem; line-height: 1.45; }
.ins-done { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; padding: 14px; border: 1px solid rgba(61, 222, 200, .55); background: #000; font-size: .94rem; line-height: 1.4; }
.ins-done b { color: #fff; }
.ins-done span:last-child { color: var(--mid); }
.ins-ok { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent); color: #000; font-weight: 800; font-size: 1.1rem; }
.ins-go { width: 100%; min-height: 52px; margin: 0 0 12px; border: 0; background: var(--accent); color: #000; font-weight: 800; font-size: 1rem; cursor: pointer; border-radius: 8px; }
.ins-go:active { filter: brightness(1.12); }
.ins-tabs { display: flex; gap: 0; border: 1px solid var(--line2); background: #000; }
.ins-tabs button { flex: 1; min-height: 44px; padding: 0 4px; border: 0; border-right: 1px solid var(--line2); background: transparent; color: var(--mid); font-family: var(--mono); font-size: .72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ins-tabs button:last-child { border-right: 0; }
.ins-tabs button.on { background: var(--accent); color: #000; font-weight: 700; }
.ins-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.ins-panel { margin-top: 12px; padding: 2px 0 0; outline: none; }
.ins-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ins-pt { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.ins-steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.ins-steps li { counter-increment: s; position: relative; padding: 0 0 0 36px; min-height: 26px; font-size: .92rem; line-height: 1.45; color: #dcdcdc; }
.ins-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(61, 222, 200, .55); color: var(--accent); font-family: var(--mono); font-size: .76rem; font-weight: 700; background: #000; }
.ins-steps b { color: #fff; font-weight: 700; }
.ins-ic { display: inline-block; vertical-align: -3px; margin: 0 1px; color: var(--accent); }
.ins-dots { display: inline-block; min-width: 14px; text-align: center; color: var(--accent); font-weight: 800; }
.ins-close { display: block; width: 100%; min-height: 48px; margin-top: 14px; border: 1px solid var(--line2); background: #000; color: var(--mid); font-weight: 700; font-size: .92rem; cursor: pointer; border-radius: 8px; }
.ins-close:active { color: #000; background: var(--accent); border-color: var(--accent); }
@media (min-width: 700px) { .ins { align-items: center; } .ins-sheet { border-bottom: 1px solid var(--line2); border-radius: 14px; padding-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .ins-bd, .ins-sheet { transition: none; } }


/* =====================================================================
   v13: ingen sideveis scroll, og humør-linja øverst følger siden
   Rotårsak (budsjett): <strong> i .crow (Dagsbeløp / Disponibelt) kunne ikke krympe eller brytes, så et langt beløp (f.eks. 123 456 789 012 kr) stakk ut av flisen og
   gjorde siden bredere enn skjermen (360 px → layout 368 px). Den 2 px brede humør-linja (.glow) var position:fixed og ble stående igjen mens siden ble panorert sideveis.
   Nå: beløp brytes/kan bli på egen linje, alle flater har min-width:0, .wrap klipper (overflow-x: clip), og linja er position:sticky øverst i <body>
   (width:100 % = nøyaktig bredden til siden; følger sideveis, står fast vertikalt).
   ===================================================================== */
.wrap { overflow-x: clip; min-width: 0; }
.wrap > *, .bud > *, .home > *, .onb > *, .tile, .calc, .log, .weekrow, .banner, .hero, .field, .sect { min-width: 0; max-width: 100%; }
.crow { flex-wrap: wrap; }
.crow .cap, .crow > span { min-width: 0; }
.crow strong { margin-left: auto; max-width: 100%; text-align: right; overflow-wrap: anywhere; }
.hero-top { flex-wrap: wrap; }
.hero-sub { margin-left: auto; min-width: 0; overflow-wrap: anywhere; }
.l-lab, .fo-name { min-width: 0; }
.loglist li { min-width: 0; }
.l-amt { flex: none; max-width: 55%; text-align: right; overflow-wrap: anywhere; }
.jsonview { max-width: 100%; }
.preview, .hint, .lbl, .cap { overflow-wrap: anywhere; }
.top { gap: 8px; }
.topnav { flex: 0 1 auto; min-width: 0; }
@media (max-width: 374px) {
  .top { gap: 4px; } .brand { gap: 6px; } .topnav { gap: 5px; }
  .pill { padding: 0 10px; font-size: .72rem; } .pill.flyt::before { margin-right: 6px; }
}

/* =====================================================================
   v16: sikkerhetskopi — påminnelse (forside), «Importer»-lenke (splash/onboarding), gjenopprettingsdialog, status på budsjett
   ===================================================================== */
.bkp { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 6px 10px; border: 1px solid var(--line2); border-left: 3px solid var(--gold); border-radius: var(--r); background: var(--tile); min-width: 0; max-width: 100%; }
.bkp-t { font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.bkp-b { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
@media (max-width: 340px) { .bkp-b .bkp-go { flex-basis: 100%; } }
.bkp-b button { min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; font-family: var(--font); font-size: .74rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; color: var(--mid); }
.bkp-b .bkp-l { flex: 0 0 auto; }
.bkp-b .bkp-go { flex: 1 1 auto; background: var(--accent); border-color: var(--accent); color: #05231f; font-weight: 700; }
.bkp-b .bkp-go:active:not(:disabled) { filter: brightness(.9); }
.bkp-b .bkp-go:disabled { opacity: .5; }
.bkp-b .bkp-l:hover, .bkp-b .bkp-l:active { color: #fff; border-color: var(--mid); }
body.sp-open .bkp, body.bk-open .bkp { display: none; }

.restore-row { display: flex; justify-content: center; margin-top: 2px; }
.restore-link { min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer; font-family: var(--mono); font-size: .72rem; line-height: 1.3; color: var(--dim); text-align: center; border-radius: 8px; }
.restore-link u { color: var(--accent); text-underline-offset: 3px; font-weight: 600; }
.restore-link:hover, .restore-link:active { color: var(--mid); }
.onb .restore-row { margin-top: 4px; }
.sp-in .restore-row { margin-top: 0; }

.bkp-status { font-family: var(--mono); color: var(--mid); margin-top: 10px; }

.bk-dlg { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
.bk-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.bk-box { position: relative; width: 100%; max-width: 360px; max-height: 100%; overflow-y: auto; padding: 18px 16px 16px; border: 1px solid var(--line2); border-top: 3px solid var(--gold); border-radius: var(--r); background: #050505; outline: none; }
.bk-box h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.bk-k { margin-top: 8px; font-family: var(--mono); font-size: .72rem; color: var(--dim); overflow-wrap: anywhere; }
.bk-sum { margin: 14px 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #000; }
.bk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; }
.bk-row + .bk-row { border-top: 1px solid var(--line); }
.bk-row dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mid); flex: none; }
.bk-row dd { font-weight: 700; font-size: .95rem; color: #fff; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.bk-act { display: flex; gap: 10px; }
.bk-act .btn { flex: 1 1 0; min-height: 52px; font-size: .95rem; padding: 0 12px; }

/* =====================================================================
   v14: kategorier på utgifter, ukesoppsummering, «Måneden din», tilbake-knapp på budsjett
   Piksel-uttrykk: firkantede flater, hele piksler, trinnvis animasjon, ingen glød. Alle tekstfarger ≥ AA mot svart/#050505.
   ===================================================================== */
.cdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 0; background: #aab0ba; }

/* logglinje: kategori-brikke (trykk = velger) på linja under etiketten, sammen med klokkeslett */
.l-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.l-sub .l-meta { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catchip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 70%; height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--line2); border-radius: 0; background: #000; color: var(--mid);
  font-family: var(--mono); font-size: .62rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; }
.catchip::after { content: ''; position: absolute; left: -4px; right: -4px; top: -11px; bottom: -11px; }   /* ≥ 44 px treffflate uten at brikken blir stor */
.catchip:hover, .catchip:active { color: #fff; border-color: var(--mid); }
.catchip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* uke-brikke i 7-dagers-raden */
.weekrow { grid-template-columns: auto minmax(0, 1fr) auto; }
.wkchip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 8px; border: 1px solid rgba(61, 222, 200, .55); border-radius: 0; background: #000; color: var(--accent);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wkchip::after { content: ''; position: absolute; left: -4px; right: -4px; top: -4px; bottom: -4px; }
.wkchip:active { background: var(--accent); color: #000; }
.wk-ic { display: block; flex: none; }

/* tilbud: «Se uken din» / «Måneden din» */
.offer { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 14px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: var(--r); background: #030303; }
.offer[hidden] { display: none; }
.o-t { flex: 1; min-width: 0; font-family: var(--mono); font-size: .78rem; color: #e6e6e6; line-height: 1.3; }
.o-b { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--accent); color: #000; font-family: var(--mono); font-size: .76rem; font-weight: 700; cursor: pointer; }
.o-b:active { filter: brightness(1.12); }
.wrap > .home > .offer, .offer { min-width: 0; max-width: 100%; }

/* bunnark */
.sh-sheet { padding-bottom: 0; }
.sh-kick { margin: -2px 0 10px; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sh-body { min-width: 0; padding-bottom: 8px; }
.sh-cta { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 14px); background: #050505; border-top: 1px solid var(--line); }
.sh-cta[hidden] { display: none; }
.sh-cta .btn { flex: 1 1 0; min-width: 0; }
.sh-cta .btn.ghost { flex: 0 0 34%; }
.sh-cap { margin: 16px 0 8px; }
.sh-sheet .st, .sh-sheet .stgrid, .sh-sheet .catlist, .sh-sheet .cr, .sh-sheet .dl, .sh-sheet .mo-goal { min-width: 0; max-width: 100%; }

/* kategori-velger */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-opt { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 0; background: #000; color: #fff;
  font-family: var(--font); font-weight: 700; font-size: .86rem; line-height: 1.2; text-align: left; cursor: pointer; }
.cat-opt .cdot { width: 12px; height: 12px; }
.cat-n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cat-ok { flex: none; color: var(--accent); font-weight: 800; }
.cat-opt.on { border-color: var(--accent); background: rgba(61, 222, 200, .08); }
.cat-opt:active { background: var(--accent); color: #000; border-color: var(--accent); }
.cat-opt:active .cat-ok { color: #000; }
.cat-opt:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* uke: valg + stolpediagram (7 søyler av 3×1 piksel-ruter) */
.seg { display: flex; border: 1px solid var(--line2); margin: 0 0 14px; }
.seg button { flex: 1; min-height: 44px; padding: 0 6px; border: 0; border-right: 1px solid var(--line2); background: transparent; color: var(--mid); font-family: var(--mono); font-size: .74rem; font-weight: 600; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #000; font-weight: 700; }
.seg button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.wk-chart { margin: 0 0 12px; padding: 10px 6px 8px; border: 1px solid var(--line); background: #000; }
.wk-svg { display: block; width: 100%; height: auto; max-height: 150px; margin: 0 auto; }
.wk-lab { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 6px; text-align: center; font-family: var(--mono); font-size: .72rem; font-weight: 600; color: #9a9a9a; }
.wk-lab .now { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.wk-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.wk-key span { display: inline-flex; align-items: center; gap: 6px; }
.wk-key i { width: 8px; height: 8px; display: inline-block; }
.wk-key .ln { height: 2px; width: 12px; background: #8d8d8d; }
.wk-lead { margin: 0 0 12px; font-size: .95rem; color: var(--mid); line-height: 1.3; }
.wk-lead b { font-family: var(--mono); font-size: 1.5rem; color: #fff; letter-spacing: -.03em; }

.stgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line2); background: #000; }
.st-v { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.15; overflow-wrap: anywhere; }
.st-s { font-family: var(--mono); font-size: .66rem; color: var(--dim); line-height: 1.3; overflow-wrap: anywhere; }
.st.good .st-v { color: var(--accent); }
.st.bad .st-v { color: #ff8585; }

/* piksel-søyle: 20 ruter */
.pxb { position: relative; height: 8px; background: #161616; --f: 0%; --c: var(--accent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 1px), transparent calc(5% - 1px) 5%); mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 1px), transparent calc(5% - 1px) 5%); }
.pxb::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--f); background: var(--c); }
.catlist { display: flex; flex-direction: column; gap: 10px; }
.cr { display: flex; flex-direction: column; gap: 5px; }
.cr-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cr-top .cdot { align-self: center; width: 10px; height: 10px; }
.cr-n { flex: 1; min-width: 0; font-size: .86rem; color: #e6e6e6; overflow-wrap: anywhere; }
.cr-a { flex: none; max-width: 50%; font-family: var(--mono); font-size: .84rem; font-weight: 700; color: #fff; text-align: right; overflow-wrap: anywhere; }
.sh-fb { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 4px; padding: 12px; border: 1px solid var(--line2); background: #000; font-size: .9rem; line-height: 1.4; color: #f0f0f0; }
.pxq { flex: none; width: 8px; height: 8px; margin-top: .45em; background: var(--gold); }

/* Måneden din */
.mo-big { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px; }
.mo-fig { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mo-fig b { font-family: var(--mono); font-size: 2.4rem; font-weight: 700; letter-spacing: -.05em; line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.mo-fig i { font-style: normal; font-family: var(--mono); font-size: 1rem; color: var(--mid); }
.mo-of { font-family: var(--mono); font-size: .74rem; color: var(--dim); overflow-wrap: anywhere; }
.dls { margin: 12px 0 0; }
.dl { display: grid; grid-template-columns: 7.6rem auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.dl .cap { font-size: .62rem; letter-spacing: .08em; white-space: nowrap; }
.dl-d { font-family: var(--mono); font-size: .92rem; color: #fff; }
.dl-s { justify-self: end; font-family: var(--mono); font-size: .72rem; color: var(--mid); text-align: right; overflow-wrap: anywhere; }
.mo-goal { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); background: #000; }
.mo-gtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.mo-gtop .cap { min-width: 0; overflow-wrap: anywhere; }
.mo-gtop b { font-family: var(--mono); color: #fff; font-size: 1.05rem; }
/* piksel-stjerner (kun når måneden endte under budsjett): to hopp i hele piksler, ingen glød */
.flr { display: flex; justify-content: center; gap: 16px; padding: 4px 0 12px; }
.flr-s { display: block; width: 36px; height: 36px; animation: hop .8s steps(1, end) 2; }
.flr-s.s1 { animation-delay: .2s; } .flr-s.s2 { animation-delay: .4s; }
@keyframes hop { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .flr-s { animation: none; } .ins-bd, .ins-sheet { transition: none; } }

/* budsjett: stor «Tilbake til Spareflyt»-knapp nederst (samme .btn.primary som ellers) */
.back-bottom { display: block; margin-top: 4px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.back-btn { width: 100%; min-height: 64px; flex: none; font-size: 1.1rem; }
.back-btn .back-ar { font-family: var(--mono); font-weight: 800; font-size: 1.25rem; line-height: 1; }
.back-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* ===== v14: «Ny utgift» / «Ny sparing» (pikselkant, ingen glød, ingen avrunding) ===== */
.modeseg { display: flex; gap: 0; margin: 0 0 8px; width: max-content; max-width: 100%; border: 1px solid var(--line2); border-radius: 0; }
.mode { position: relative; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 0; background: #000; color: var(--mid); cursor: pointer; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.mode + .mode { border-left: 1px solid var(--line2); }
.mode::after { content: ''; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }                  /* ≥ 44 px treffflate */
.mode.on { background: var(--accent); color: #000; }
.mode#m-sav.on { background: var(--gold); color: #000; }
.mode:not(.on):hover { color: #fff; }
.mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; z-index: 1; }
.entry.sav .q { border: 2px solid var(--gold); box-shadow: none; caret-color: var(--gold); }
.entry.sav .q:focus { border-color: var(--gold); box-shadow: none; }
.entry.sav .go { background: var(--gold); }
.preview.sav { color: var(--gold); }
#log li.sav { border-left: 3px solid var(--gold); padding-left: 10px; background: rgba(240, 193, 74, .07); }
#log li.sav .l-lab { color: var(--gold); }
#log li.sav .l-amt { color: var(--gold); }
#log li.sav .catchip { color: var(--gold); border-color: rgba(240, 193, 74, .55); cursor: default; }
.sav-line { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(240, 193, 74, .07); font-family: var(--mono); font-size: .8rem; color: var(--gold); font-weight: 700; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .mode { transition: none; } }
.entry.sav .q::placeholder { font-size: .8rem; letter-spacing: -.01em; }
.entry .q { text-overflow: ellipsis; }

/* =====================================================================
   v15: luft øverst i app-modus, humør-linja som del av headeren, diskret torefos.no-lenke
   Rotårsak (iPhone, hjemskjerm/standalone, status-bar-style black-translucent): siden tegnes helt opp under statuslinja. Den fikse 2 px-linja lå på y=0, dvs.
   bak klokke/batteri (usynlig), og fra v13 sticky (stod stille). Toppraden hadde bare safe-area + 6 px og ble trang mot statuslinja.
   Nå: --sat = safe-area-inset-top; .wrap/.fl-top/.sp-in får padding-top = --sat + --air (10 px i nettleser, 14 px i display-mode: standalone).
   Linja (.moodline, 2 px, humørfarge) er et vanlig blokkelement rett under headeren, i full sidebredde, uten fixed/sticky: scroller med siden og ligger alltid under statuslinja.
   ===================================================================== */
@media (display-mode: standalone) { :root { --air: 14px; } }
html.standalone { --air: 14px; } /* iOS: navigator.standalone (liten inline-skript i <head>) */
.moodline { display: block; flex: none; max-width: none; height: 2px; margin: calc(4px - var(--gap)) calc(-1 * max(14px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(14px, env(safe-area-inset-left, 0px))); background: var(--mood); opacity: .9; transition: background .5s; pointer-events: none; }
.fl-top { padding-top: calc(var(--sat) + var(--air)); height: calc(var(--sat) + var(--air) + 44px); }
.sp-in { padding-top: calc(var(--sat) + var(--air) + 6px); }
@media (max-height: 700px) { .sp-in { padding-top: calc(var(--sat) + var(--air)); } }
/* torefos.no øverst til høyre (forsiden): egen tynn rad over logo/nav, 11 px mono, dempet grå (--dim #9a9a9a ≈ 7,5:1 mot svart). Treffflate ≥ 44 px bred × 44 px høy via padding/negativ marg (nav-pillene ligger over i nedre kant). */
.corner { display: flex; justify-content: flex-end; height: 22px; margin: 0; }
.corner + .top { margin-top: calc(-1 * var(--gap)); }
.tn-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px; min-width: 44px; margin: -11px -8px -11px 0; padding: 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .02em; color: var(--dim); text-decoration: none; }
.tn-link:hover, .tn-link:active { color: #fff; text-decoration: underline; }
.tn-link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* =====================================================================
   v17: «Toggle TUI» — forsiden som terminal (html.tui, js/tui.js)
   Samme DOM og samme logikk som vanlig forside; her skjules/omstiles bare. Helt svart (ingen tekstur/vignett/humørlinje/fliser/avrundede kort/rammer — kun ASCII-linjer),
   monospace overalt, kun «spareflyt.no» er farget (teal/gull som logoen); alt annet hvitt/grått på svart (dempet grå #9a9a9a ≥ 7:1). Inputfelt ≥ 16 px (ingen iOS-zoom), treffflater ≥ 44 px.
   Safe-area: .wrap beholder padding-top = safe-area + 10/14 px (v15). Ingen glød/skygger.
   ===================================================================== */
.tui-only { display: none; }
.tui-open-row { display: flex; justify-content: flex-end; margin-top: 0; }
.tui-open { min-height: 44px; padding: 0 4px 0 12px; border: 0; background: transparent; font-family: var(--mono); font-size: .7rem; font-weight: 500; line-height: 1; letter-spacing: .02em; color: var(--dim); cursor: pointer; border-radius: 8px; }
.tui-open::before { content: ">_ "; }
.tui-open:hover, .tui-open:active { color: #fff; text-decoration: underline; }
html.tui, html.tui body { background: #000 !important; background-image: none !important; }
html.tui body { font-family: var(--mono); color: #e6e6e6; }
html.tui ::selection { background: #555; color: #fff; }
html.tui .wrap *, html.tui .toast { font-family: var(--mono) !important; text-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; }
html.tui .wrap :focus-visible { outline: 1px dashed #fff; outline-offset: 0; }
html.tui .wrap { max-width: 560px; gap: 0; }
html.tui .corner, html.tui .wrap > header.top, html.tui .moodline, html.tui #bkp, html.tui #banner, html.tui #offer, html.tui #a2hs, html.tui .weekrow, html.tui .foot,
html.tui .modeseg, html.tui .tui-open-row, html.tui .confetti, html.tui #entry .curchip { display: none !important; }
html.tui .home { gap: 6px; }
html.tui .tui-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; min-width: 0; }
.tui-brand { font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.tui-brand .tb1 { color: #e6e6e6; } .tui-brand .tb2 { color: #3ddec8; } .tui-brand .tb3 { color: #f0c14a; }
.tui-exit { min-height: 44px; padding: 0 0 0 12px; border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: #9a9a9a; white-space: nowrap; }
.tui-exit:hover, .tui-exit:active { color: #fff; text-decoration: underline; }
html.tui .tui-rem { display: block; padding: 4px 0 2px; line-height: 1.15; overflow-wrap: anywhere; color: #fff; }
.tui-rl { font-size: 14px; color: #9a9a9a; }
.tui-rn { font-size: clamp(32px, 11vw, 52px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
/* flyt-stripe: heroen krympes til ~3 tekstrader høy; pikselpartiklene (canvas) beholdes, monokrome */
html.tui #hero { display: block; position: relative; min-height: 0; height: 72px; padding: 0; border: 0; background: #000; overflow: hidden; animation: none; transition: none; }
html.tui #hero > :not(canvas) { display: none !important; }
html.tui #hero::before, html.tui #hero::after { content: "--------------------------------------------------------------------------------------------------------------------------------------------"; position: absolute; left: 0; right: 0; z-index: 2; height: 12px; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 12px; color: #4a4a4a; pointer-events: none; }
html.tui #hero::before { top: 0; } html.tui #hero::after { bottom: 0; }
html.tui .pulse, html.tui .bump { animation: none; }
/* prompt: «> Brus 35█» (#q ligger gjennomsiktig over speilet) */
html.tui #entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; margin: 4px 0 0; }
html.tui #entry .entry-row { display: contents; }
html.tui .tui-prompt { display: block; grid-area: 1 / 1; min-height: 44px; padding: 10px 0; font-size: 16px; line-height: 24px; color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.tui-ps { color: #9a9a9a; }
.tui-ph { color: #9a9a9a; }
.tui-block { display: inline-block; min-width: 1ch; background: #9a9a9a; color: #000; white-space: pre; }
html.tui #entry:focus-within .tui-block { background: #fff; animation: tui-blink 1.06s steps(1, end) infinite; }
@keyframes tui-blink { 50% { background: transparent; color: #fff; } }
html.tui #entry .q, html.tui #entry.sav .q, html.tui #entry .q:focus, html.tui #entry.sav .q:focus {
  grid-area: 1 / 1; position: relative; z-index: 2; width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none;
  font-size: 16px; line-height: 24px; font-weight: 500; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
}
html.tui #entry .q::placeholder, html.tui #entry.sav .q::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
html.tui #entry .go, html.tui #entry.sav .go { grid-area: 1 / 2; position: relative; z-index: 2; align-self: stretch; width: auto; min-width: 44px; height: auto; min-height: 44px; padding: 0 0 0 10px; border: 0; background: transparent; color: #e6e6e6; font-size: 0; cursor: pointer; transform: none; }
html.tui #entry .go::before { content: "[enter]"; font-size: 14px; line-height: 1; }
html.tui #entry .go:disabled { filter: none; color: #9a9a9a; }
html.tui .busy .go { animation: none; }
html.tui .tui-modes { display: flex; align-items: center; gap: 4px; grid-column: 1 / -1; min-height: 44px; min-width: 0; }
.tui-m { min-height: 44px; min-width: 44px; padding: 0 10px 0 0; border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: #9a9a9a; white-space: nowrap; }
.tui-m[aria-pressed="true"] { color: #fff; }
.tui-m:hover, .tui-m:active { color: #fff; }
.tui-curbtn { margin-left: auto; padding: 0 0 0 10px; color: #e6e6e6; }
html.tui .preview, html.tui .preview.sav, html.tui .preview.bad { grid-column: 1 / -1; margin: 0 0 2px; min-height: 1.15em; font-size: 13px; line-height: 1.3; color: #9a9a9a; }
html.tui .preview.bad { color: #fff; }
html.tui .shake { animation: none; }
/* logg: «14:32 Brus 35 kr [mat] [x]», nyeste først, ~8 rader synlige, resten scroller */
html.tui .log { background: transparent; border: 0; padding: 0; margin-top: 4px; }
html.tui .log::before { content: "--------------------------------------------------------------------------------------------------------------------------------------------"; display: block; height: 12px; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 12px; color: #4a4a4a; }
html.tui .log-head { min-height: 28px; margin: 0; align-items: center; }
html.tui .log .cap { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #9a9a9a; }
html.tui .loglist { max-height: 352px; scrollbar-color: #666 #000; }
html.tui .loglist li, html.tui #log li.sav { display: flex; align-items: center; gap: 0 8px; min-height: 44px; border: 0; padding: 0; background: transparent; animation: none; font-size: 14px; }
html.tui .l-left, html.tui .l-sub { display: contents; }
html.tui .l-meta { order: 1; flex: none; display: block; max-width: 5ch; overflow: hidden; white-space: nowrap; font-size: 14px; color: #9a9a9a; }
html.tui .l-lab, html.tui #log li.sav .l-lab { order: 2; flex: 1 1 0; min-width: 0; font-size: 14px; color: #e6e6e6; }
html.tui .l-amt, html.tui #log li.sav .l-amt { order: 3; flex: none; max-width: 50%; font-size: 14px; font-weight: 600; color: #fff; }
html.tui .catchip, html.tui #log li.sav .catchip { order: 4; flex: none; position: static; display: inline-flex; align-items: center; gap: 0; font-weight: 500; max-width: 30%; height: auto; padding: 0; border: 0; background: transparent; color: #9a9a9a; font-size: 14px; pointer-events: none; overflow: hidden; white-space: nowrap; }
html.tui .catchip::before { content: "["; }
html.tui .catchip::after { content: "]"; position: static; inset: auto; }
html.tui .catchip .cdot { display: none; }
html.tui #log .x { order: 5; flex: none; width: 44px; height: 44px; margin-left: -4px; padding: 0; border: 0; background: transparent; color: #9a9a9a; font-size: 0; cursor: pointer; }
html.tui #log .x::before { content: "[x]"; font-size: 14px; line-height: 1; }
html.tui #log .x:hover, html.tui #log .x:active { color: #fff; background: transparent; text-decoration: underline; }
html.tui .empty { margin: 0; padding: 6px 0; border: 0; text-align: left; font-size: 13px; color: #9a9a9a; }
html.tui .empty b { color: #9a9a9a; font-weight: 400; }
html.tui .toast { left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: none; max-width: none; padding: 10px 0; border: 0; background: #000; color: #e6e6e6; font-size: 14px; text-align: left; }
html.tui .toast.show { transform: none; }
html.tui .toast::before { content: "# "; color: #9a9a9a; }
@media (prefers-reduced-motion: reduce) { html.tui #entry:focus-within .tui-block { animation: none; } }

/* ==========================================================================
   v18: diskret «[early release]»-merke (liten mono, dempet grå #9a9a9a ≥ AA, ingen layoutendring)
   Forside/budsjett: under «spareflyt.no» i headeren (absolutt, header-høyden 44 px uendret). Splash: under slagordet.
   Flyt: nederst i toppraden. TUI: ved siden av merkelinja (under den ≤ 420 px).
   ========================================================================== */
.er { font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 10px; letter-spacing: .02em; color: var(--dim); text-transform: none; white-space: nowrap; pointer-events: none; user-select: none; -webkit-user-select: none; }
.word-link { position: relative; }
.word-link .er { position: absolute; left: 0; bottom: 1px; }
.sp-er { margin: -2px 2px 8px; font-size: 11px; line-height: 14px; }
.fl-top { position: relative; }
.fl-er { position: absolute; right: 8px; bottom: 2px; font-size: 9px; line-height: 9px; }
@media (min-width: 521px) { .fl-er { right: 14px; } }
.tui-er { margin-right: auto; padding-left: 10px; font-size: 12px; line-height: 1; color: #9a9a9a; }
html.tui .tui-top { position: relative; }
@media (max-width: 420px) { html.tui .tui-er { position: absolute; left: 0; bottom: 2px; margin: 0; padding: 0; font-size: 11px; line-height: 11px; } }
html:not(.tui) .tui-er { display: none; }

/* ---- v20: Spareflyt-logoen (inline SVG: fet S, gull kildeprikk, partikkelstrøm). Flyten går fra prikken og nedover S-en; prikken har en stille glød-puls.
   Billig: kun stroke-dashoffset på én sti + opacity/transform på glød-sirkelen. Av ved prefers-reduced-motion. ---- */
.mark .sf-flow, .sp-mark .sf-flow { animation: sf-flow 2.4s linear infinite; }
.mark .sf-halo, .sp-mark .sf-halo { transform-box: fill-box; transform-origin: center; animation: sf-halo 2.8s ease-in-out infinite; }
@keyframes sf-flow { to { stroke-dashoffset: -6; } }
@keyframes sf-halo { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .mark .sf-flow, .sp-mark .sf-flow, .mark .sf-halo, .sp-mark .sf-halo { animation: none; } }