/* Välkomstflödet, inloggningen, inbjudan, samtycket för appar, felsidorna (404 och 500) och
   återanslutningen. Allt utan appskal: två spalter, figuren i en scen till vänster (överst på telefon).

   Scenen är en mjuk yta (-soft) som byter färg med steget, och bär därför --on-soft, aldrig
   --on-color: den mörka texten på en -soft-yta blev 1,3:1 i mörkt läge på telefonens rumsrutor.
   Text på kort och papper är --ink och --ink-2. Färgen är dekor: varje val har också ord och bock.

   Reglerna låg tidigare delvis i husse-vuxen.css, som läses in sist och vann över den här filen.
   De är flyttade hit så att sidorna har ett ställe. Samtycket och 404 är statiska sidor utan
   krets, där filen inte länkas i App.razor; de länkar den själva i HeadContent. */

/* ── Tonerna ─────────────────────────────────────────────────────────────── */
.onb { --ton: var(--sky); --ton-soft: var(--sky-soft); --ton-ink: var(--sky-ink); }
.onb-ton-sun { --ton: var(--sun); --ton-soft: var(--sun-soft); --ton-ink: var(--sun-ink); }
.onb-ton-mint { --ton: var(--mint); --ton-soft: var(--mint-soft); --ton-ink: var(--mint-ink); }
.onb-ton-lilac { --ton: var(--lilac); --ton-soft: var(--lilac-soft); --ton-ink: var(--lilac-ink); }
.onb-ton-pink { --ton: var(--pink); --ton-soft: var(--pink-soft); --ton-ink: var(--tomato-ink); }
.onb-ton-tomato { --ton: var(--tomato); --ton-soft: var(--tomato-soft); --ton-ink: var(--tomato-ink); }
/* Solens mjuka yta blir lerbrun i mörkt läge. Där tar scenen himlen i stället, som startsidans hjälte. */
:root[data-theme="dark"] .onb-ton-sun { --ton: var(--sky); --ton-soft: var(--sky-soft); --ton-ink: var(--sky-ink); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .onb-ton-sun { --ton: var(--sky); --ton-soft: var(--sky-soft); --ton-ink: var(--sky-ink); }
}

.onb {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(320px, 5fr) 7fr;
    background: var(--paper);
    color: var(--ink);
}

/* ── Scenen: figuren, hans tecken och repliken ──────────────────────────── */
.onb-side {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 28px 36px;
    background: var(--ton-soft);
    color: var(--on-soft);
    border-right: var(--bw) solid var(--line);
    overflow: hidden;
    transition: background-color .5s var(--ease);
}
.onb-side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.onb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 650 24px/1 var(--f-display);
    letter-spacing: -0.03em;
    color: var(--on-soft);
    text-decoration: none;
}

.onb-scen { position: relative; margin: auto 0 0; display: grid; place-items: center; min-height: 280px; }
.onb-blob {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ton) 45%, transparent);
    transition: background-color .5s var(--ease);
}
.onb-blob-1 { width: 300px; height: 300px; left: 50%; top: 50%; translate: -50% -52%; }
.onb-blob-2 { width: 74px; height: 74px; right: 8%; top: 4%; background: color-mix(in srgb, var(--ton) 70%, transparent); animation: onb-flyt 7s ease-in-out infinite; }
.onb-mark {
    position: absolute; bottom: 18px; left: 50%; translate: -50% 0;
    width: 170px; height: 16px; border-radius: 50%;
    background: color-mix(in srgb, var(--on-soft) 14%, transparent);
}
.onb-husse { position: relative; z-index: 1; width: min(100%, 220px); animation: onb-andas 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.onb-husse .husse-wrap, .onb-husse svg { display: block; width: 100%; height: auto; }
/* Reaktionen: wrappern har ett nytt @key vid varje val, så hoppet spelas om varje gång. */
.onb-husse-rorelse { transform-origin: 50% 100%; animation: onb-hopp .7s var(--spring) both; }
@keyframes onb-andas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes onb-hopp {
    0% { transform: translateY(0) scale(1, 1); }
    25% { transform: translateY(0) scale(1.06, .92); }
    55% { transform: translateY(-18px) scale(.97, 1.04) rotate(-3deg); }
    80% { transform: translateY(0) scale(1.02, .98) rotate(1deg); }
    100% { transform: none; }
}
@keyframes onb-flyt { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, 12px); } }

.onb-tecken {
    position: absolute; z-index: 2; top: 10px; right: 12%;
    display: grid; place-items: center; min-width: 72px; height: 72px; padding: 0 12px;
    border-radius: 999px; background: var(--card); color: var(--ink);
    border: var(--bw) solid var(--line); box-shadow: var(--lift-s);
    animation: onb-tecken .55s var(--spring) both;
}
.onb-tecken svg { width: 40px; height: 40px; }
.onb-tecken-tal { font: 650 34px/1 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ton-ink); }
@keyframes onb-tecken { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

.onb-bubble {
    position: relative;
    z-index: 1;
    margin: 0 0 auto;
    padding: 16px 20px;
    background: var(--card);
    color: var(--ink);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-l) var(--r-l) var(--r-l) 6px;
    font: 600 18px/1.35 var(--f-display);
    letter-spacing: -0.01em;
    min-height: 3.2em;
}
/* Svansen pekar upp mot figuren. */
.onb-bubble::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 18px;
    height: 18px;
    background: var(--card);
    border-left: var(--bw) solid var(--line);
    border-top: var(--bw) solid var(--line);
    transform: translateX(-50%) rotate(45deg);
    border-top-left-radius: 4px;
}

/* ── Formulärsidan ──────────────────────────────────────────────────────── */
.onb-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(28px, 8vh, 88px) clamp(20px, 5vw, 64px) 56px;
    min-width: 0;
}
.onb-form { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 22px; }
.onb-pane { display: flex; flex-direction: column; gap: 18px; }
.onb-pane > * { margin: 0; }
.onb-form h1 {
    margin: 0;
    font: 650 clamp(34px, 4.4vw, 52px)/1.02 var(--f-display);
    letter-spacing: -0.035em;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.onb-form h1:focus { outline: none; }
.onb-h2 { margin: 0; font: 650 22px/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.onb-eyebrow { margin: 0; color: var(--ton-ink); }
.onb-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.onb-small { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.onb-small a, .onb-switch .unstyled, .onb-lank { color: var(--sky-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.onb-switch { margin: 0; font-size: 15px; color: var(--ink-2); }
.onb-switch .unstyled { min-height: 44px; }
.onb .field { margin: 0; }
.onb .field > label { font-weight: 700; color: var(--ink); }
.onb .field .onb-small { display: block; margin-top: 6px; }
.onb-fel {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0; padding: 12px 16px; line-height: 1.5;
    border-radius: var(--r-m); border: var(--bw-thin) solid var(--tomato);
    background: var(--tomato-soft); color: var(--on-soft);
    animation: onb-skaka .4s var(--ease);
}
.onb-fel svg { flex: none; margin-top: 2px; }
@keyframes onb-skaka { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.onb-dev { display: flex; flex-direction: column; gap: 8px; }
.onb-dev p { margin: 0; }
.onb-dev a { word-break: break-all; }
.onb code { font-size: 13px; word-break: break-all; }

/* Stegen glider in från det håll man går. */
.onb-pane--fram { animation: onb-in-fram .4s var(--ease) both; }
.onb-pane--bak { animation: onb-in-bak .4s var(--ease) both; }
@keyframes onb-in-fram { 0% { opacity: 0; transform: translateX(28px); } 100% { opacity: 1; transform: none; } }
@keyframes onb-in-bak { 0% { opacity: 0; transform: translateX(-28px); } 100% { opacity: 1; transform: none; } }

/* Före uppkopplingen: fälten och knapparna är avstängda. Först efter en kort stund syns det,
   så att den som har snabbt nät inte ser sidan blinka grå. */
.onb[data-live="nej"] :is(.btn, .input, .onb-type, .unstyled):disabled { opacity: 1; cursor: progress; animation: onb-somnig .25s ease .7s forwards; }
@keyframes onb-somnig { to { opacity: .55; } }
.onb-laddar {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 14.5px; color: var(--ink-2);
    opacity: 0; animation: onb-visa .25s ease .7s forwards;
}
.onb-laddar::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--line-strong); border-top-color: var(--ink);
    animation: onb-snurr .8s linear infinite;
}
@keyframes onb-visa { to { opacity: 1; } }
@keyframes onb-snurr { to { transform: rotate(360deg); } }

/* ── Stegmätaren: numrerade prickar med en linje emellan ───────────────── */
.onb .onb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.onb .onb-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.onb .onb-step:not(:last-child)::after {
    content: ""; position: absolute; top: 15px; left: 40px; right: 0; height: 2px; border-radius: 2px;
    background: var(--line);
}
.onb .onb-step.done:not(:last-child)::after { background: var(--ink); }
.onb-dot {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    font: 650 14px/1 var(--f-display); font-variant-numeric: tabular-nums;
    background: var(--card); color: var(--ink-2); border: var(--bw) solid var(--line-strong);
    transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--spring);
}
.onb-step.now .onb-dot { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ton) 55%, transparent); animation: onb-pop .5s var(--spring); }
.onb-step.done .onb-dot { background: var(--mint); color: var(--on-color); border-color: var(--mint); }
@keyframes onb-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.onb .onb-name { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.onb .onb-step.now .onb-name { color: var(--ink); }

/* Överlåtelsens stegstapel (#137) har tre steg och staplar, inte prickar. */
.onb-bar { display: block; height: 4px; border: 0; border-radius: 4px; background: var(--line); }
.onb-step.done .onb-bar, .onb-step.now .onb-bar { background: var(--ink); }
.onb-steps.onb-steps-3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.onb-steps-3 .onb-step { display: flex; flex-direction: column; gap: 6px; }
.onb-steps-3 .onb-name { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }

/* ── Boendetyperna: stora val med bild ─────────────────────────────────── */
.onb-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb-type {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 14px 16px;
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-m);
    cursor: pointer;
    transition: border-color .15s, box-shadow .2s var(--ease), transform .2s var(--spring);
}
.onb-type:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--lift-s); }
.onb-type:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.onb-type-ikon {
    flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
    background: var(--paper-2); color: var(--ink);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.onb-type-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onb-type-name { font: 650 21px/1.1 var(--f-display); letter-spacing: -0.02em; }
.onb-type-sub { font-size: 14px; color: var(--ink-2); }
.onb-type-bock {
    position: absolute; top: -9px; right: -9px; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
    transform: scale(0); transition: transform .3s var(--spring);
}
.onb-type.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.onb-type.on .onb-type-ikon { background: var(--sun); color: var(--on-color); }
.onb-type.on .onb-type-bock { transform: scale(1); }
.onb-type.on .onb-type-ikon svg { animation: onb-vink .5s var(--spring); }
@keyframes onb-vink { 0% { transform: scale(.7) rotate(-10deg); } 100% { transform: none; } }
.onb-type:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ── Siffran i steg 3: den växer med varje svar ────────────────────────── */
.onb-meter {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 16px;
    padding: 16px 20px;
    background: var(--mint-soft);
    color: var(--on-soft);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-l);
    line-height: 1.4;
}
.onb-big {
    font: 650 clamp(48px, 7vw, 64px)/1 var(--f-display);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    animation: onb-siffra .5s var(--spring);
}
@keyframes onb-siffra { 0% { transform: scale(.6) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }
.onb-meter-txt { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.onb-meter-txt > span:not(.onb-meter-l) { font-size: 14px; }
.onb-meter-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--on-soft) 14%, transparent); overflow: hidden; }
.onb-meter-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--on-soft); transition: width .4s var(--ease); }
/* Figurens replik står i scenen; på telefon är den långt upp när man svarar, så beskedet upprepas här. */
.onb-delta { display: none; margin: 0; font-weight: 700; animation: onb-in-fram .3s var(--ease) both; }
.onb-hoppa { align-self: flex-start; }

/* Frågorna: större chips, lättare att pricka på telefon. */
.onb .chips { gap: 10px; }
.onb .chip { min-height: 44px; padding: 8px 18px; font-size: 16px; transition: transform .2s var(--spring); }
.onb .chip:hover { transform: translateY(-2px); }
.onb .chip-on:not(.chip-unset) { animation: onb-chip .38s var(--spring); }
@keyframes onb-chip { 0% { transform: scale(.88); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* ── Slutsteget: huset är redo ─────────────────────────────────────────── */
.onb-forst {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px; border-radius: var(--r-l);
    background: var(--card); color: var(--ink);
    border: var(--bw) solid var(--line); border-left: 6px solid var(--sun);
    box-shadow: var(--lift-s);
}
.onb-forst-ikon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sun); color: var(--on-color); }
.onb-forst-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb-forst-l { font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.onb-forst strong { font: 650 19px/1.25 var(--f-display); }
.onb-forst-text > span:last-child { font-size: 14.5px; color: var(--ink-2); }

.onb-wheel { display: flex; flex-direction: column; gap: 14px; }
.onb-ar {
    list-style: none; margin: 0; padding: 14px 14px 10px;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end;
    background: var(--lilac-soft); color: var(--on-soft); border-radius: var(--r-m);
}
.onb-ar li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 92px; }
.onb-ar-stapel {
    display: block; width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px;
    height: max(4px, calc(var(--n) / var(--max) * 64px));
    background: var(--on-soft);
    transform-origin: 50% 100%; animation: onb-stapel .6s var(--spring) both;
}
.onb-ar li:nth-child(2n) .onb-ar-stapel { animation-delay: .04s; }
.onb-ar li:nth-child(3n) .onb-ar-stapel { animation-delay: .08s; }
@keyframes onb-stapel { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.onb-ar-man { font-size: 11px; font-weight: 700; text-transform: lowercase; }
.onb-wheel-list {
    list-style: none;
    margin: 0;
    padding: 4px 16px;
    max-height: 240px;
    overflow-y: auto;
    font-size: 15px;
    background: var(--card);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-m);
}
.onb-wheel-list li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
.onb-wheel-list li:last-child { border-bottom: 0; }
.onb-when { color: var(--ink-2); font-weight: 700; }
.onb-fler { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ── Knappraden ─────────────────────────────────────────────────────────── */
.onb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.onb-nav--ensam { justify-content: flex-start; }
.onb-nav .btn-lg { min-width: 9.5rem; }
.onb-nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ── Inloggningen: kolla mejlen ─────────────────────────────────────────── */
.onb-brev { width: 120px; }
.onb-brev svg { display: block; overflow: visible; }
.onb-brev-kuvert { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.onb-brev-flik { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.onb-brev-lapp { fill: var(--mint-soft); stroke: var(--ink); stroke-width: 3; animation: onb-lapp 1.1s var(--spring) .2s both; }
.onb-brev-rad { stroke: var(--on-soft); stroke-width: 3; stroke-linecap: round; animation: onb-lapp 1.1s var(--spring) .2s both; }
@keyframes onb-lapp { 0% { transform: translateY(26px); } 100% { transform: none; } }
.onb-sa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.onb-sa li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; }
.onb-sa-n {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    font: 650 14px/1 var(--f-display); background: var(--mint-soft); color: var(--on-soft);
}

/* ── Inbjudan och samtycket ─────────────────────────────────────────────── */
.onb-kort {
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px; border-radius: var(--r-l);
    background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); box-shadow: var(--lift-s);
}
.onb-kort > * { margin: 0; }
.onb-kort-hus { display: flex; align-items: center; gap: 14px; }
.onb-kort-hus .onb-type-ikon { background: var(--ton-soft); color: var(--on-soft); }
.onb-kort-hus strong { font: 650 22px/1.15 var(--f-display); letter-spacing: -0.02em; }
.onb-kort-rad { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-kort ul { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.onb-not { margin: 0; padding: 12px 16px; border-radius: var(--r-m); background: var(--sun-soft); color: var(--on-soft); line-height: 1.5; }

/* ── Felsidorna ─────────────────────────────────────────────────────────── */
/* 404: figuren letar, med ett förstoringsglas som sveper fram och tillbaka. */
.onb-letar { position: relative; z-index: 1; }
.onb-letar .onb-husse { animation: onb-titta 3.2s ease-in-out infinite; }
.onb-glas {
    position: absolute; z-index: 2; right: 6%; bottom: 28%; width: 76px; height: 76px;
    animation: onb-svep 3.2s ease-in-out infinite;
}
@keyframes onb-titta { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes onb-svep { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(-130px, -26px) rotate(10deg); } }
.onb-kod { font: 650 clamp(64px, 10vw, 120px)/0.9 var(--f-display); letter-spacing: -0.05em; color: var(--ton-ink); margin: 0; }
.onb-vagar { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Återanslutningen: ett lugnt kort med figuren som väntar ───────────── */
#components-reconnect-modal {
    width: min(380px, calc(100vw - 32px));
    padding: 24px 24px 22px;
    border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
    background: var(--card); color: var(--ink);
}
#components-reconnect-modal[open] {
    animation: components-reconnect-modal-fadeInOpacity .3s var(--ease, ease-out) .2s both;
}
#components-reconnect-modal::backdrop { background: color-mix(in srgb, #0A0712 45%, transparent); backdrop-filter: blur(2px); }
#components-reconnect-modal .components-reconnect-container { gap: 14px; }
/* Rutan själv får fokus när den öppnas; ringen hör hemma på knapparna i den, inte runt hela kortet. */
#components-reconnect-modal:focus-visible { outline: none; }
/* Vid nya försök står bara "Nytt försök om ..." kvar, inte båda raderna på en gång. */
#components-reconnect-modal.components-reconnect-retrying p.components-reconnect-first-attempt-visible:not(.ateranslut-lugn) { display: none; }
#components-reconnect-modal p { margin: 0; text-align: center; line-height: 1.5; color: var(--ink); }
#components-reconnect-modal .onb-ateranslut-rubrik { margin: 0; text-align: center; font: 650 22px/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
/* Rubriken säger vilket läge det är: tappad kontakt eller en paus som sidan själv tagit. */
#components-reconnect-modal .ateranslut-rubrik-paus { display: none; }
#components-reconnect-modal:is(.components-reconnect-paused, .components-reconnect-resume-failed) .ateranslut-rubrik-kontakt { display: none; }
#components-reconnect-modal:is(.components-reconnect-paused, .components-reconnect-resume-failed) .ateranslut-rubrik-paus { display: inline; }
#components-reconnect-modal .ateranslut-lage { display: grid; gap: 6px; }
#components-reconnect-modal .ateranslut-offline { display: none; font-weight: 600; }
body.is-offline #components-reconnect-modal:not(.components-reconnect-paused) .ateranslut-offline { display: block; }
/* Lugnet står mindre och i andra steget: det är en bisats till läget, inte ett nytt besked. */
#components-reconnect-modal p.ateranslut-lugn { font: 500 15px/1.45 var(--f-body); color: var(--ink-2); }
#components-reconnect-modal .ateranslut-knappar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#components-reconnect-modal button, #components-reconnect-modal button:active {
    min-height: 44px; padding: 0 22px;
    font-weight: 700; color: var(--paper); background-color: var(--ink);
    border: var(--bw) solid var(--ink); border-radius: var(--r-s); box-shadow: none;
}
/* Omladdningen är andrahandsvalet: kontur i stället för fyllning, så att Försök igen syns först. */
#components-reconnect-modal button.ateranslut-ladda, #components-reconnect-modal button.ateranslut-ladda:active {
    color: var(--ink); background-color: var(--card); border-color: var(--line);
}
#components-reconnect-modal button:hover { opacity: .9; }
#components-reconnect-modal button:active { transform: translateY(1px); }
#components-reconnect-modal button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.components-rejoining-animation { animation: none; }
.onb-ateranslut-husse { position: relative; display: grid; place-items: center; width: 120px; height: 104px; margin: 0 auto; }
.onb-ateranslut-husse::before {
    content: ""; position: absolute; inset: 6px 4px 0; border-radius: 50%;
    background: var(--sky-soft);
}
.onb-ateranslut-husse > * { position: relative; }
.onb-ateranslut-husse .husse { animation: onb-titta 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
#components-reconnect-modal:is(.components-reconnect-failed, .components-reconnect-paused, .components-reconnect-resume-failed) .onb-prickar { display: none; }
.onb-prickar { display: flex; justify-content: center; gap: 6px; }
.onb-prickar i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); animation: onb-prick 1.2s ease-in-out infinite; }
.onb-prickar i:nth-child(2) { animation-delay: .15s; }
.onb-prickar i:nth-child(3) { animation-delay: .3s; }
@keyframes onb-prick { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

/* ── Telefon: scenen blir ett band överst, knapparna sitter vid tummen ─── */
@media (max-width: 860px) {
    /* Utan raderna sträcktes scenen ut på korta sidor, och märket hamnade långt ner under en tom yta. */
    .onb { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .onb-side {
        position: relative;
        height: auto;
        display: grid;
        grid-template-columns: 96px 1fr;
        grid-template-areas: "top top" "scen bubble";
        gap: 12px 14px;
        align-items: center;
        padding: 14px 16px 18px;
        border-right: 0;
        border-bottom: var(--bw) solid var(--line);
    }
    .onb-side-top { grid-area: top; }
    .onb-brand { font-size: 20px; }
    .onb-scen { grid-area: scen; margin: 0; min-height: 0; }
    .onb-blob-1 { width: 108px; height: 108px; }
    .onb-blob-2, .onb-mark { display: none; }
    .onb-husse { width: 86px; }
    .onb-tecken { top: -10px; right: -12px; min-width: 38px; height: 38px; padding: 0 8px; border-width: 1.5px; }
    .onb-tecken svg { width: 22px; height: 22px; }
    .onb-tecken-tal { font-size: 18px; }
    .onb-bubble { grid-area: bubble; margin: 0; font-size: 15.5px; min-height: 0; padding: 12px 14px; border-radius: 18px 18px 18px 6px; }
    .onb-bubble::before { top: auto; bottom: 14px; left: -10px; transform: rotate(-45deg); }
    .onb-glas { width: 40px; height: 40px; right: -14px; bottom: 6px; }
    @keyframes onb-svep { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(-60px, -10px) rotate(10deg); } }
    .onb-main { padding: 22px 16px 0; }
    .onb-form { gap: 18px; }
    .onb-delta { display: block; }
    .onb-types { gap: 10px; }
    .onb-type { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 12px; }
    .onb-type-ikon { width: 48px; height: 48px; border-radius: 14px; }
    .onb-type-ikon svg { width: 34px; height: 34px; }
    .onb-type-name { font-size: 19px; }
    .onb-type-sub { font-size: 13px; }
    .onb-big { font-size: 48px; }
    .onb-ar { padding: 12px 8px 8px; gap: 3px; }
    .onb-ar-man { font-size: 10px; }
    /* Knapparna ligger kvar längst ner medan man scrollar genom frågorna, där tummen redan är. */
    .onb-nav {
        position: sticky; bottom: 0; z-index: 3;
        margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--paper); border-top: 1px solid var(--line);
    }
    .onb-nav--ensam .btn { flex: 1; }
    .onb-nav .btn-lg { flex: 1; min-width: 0; }
    .onb-pane > .onb-nav:last-child { margin-bottom: 0; }
    .onb-pane { padding-bottom: 0; }
}
@media (max-width: 380px) {
    .onb .onb-name { display: none; }
    .onb .onb-step:not(:last-child)::after { left: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Rutan för återanslutningen behåller sin intoning: den börjar osynlig och tonas fram. */
    .onb *, .onb *::before, .onb *::after, .onb-side, #components-reconnect-modal * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .onb-laddar, .onb[data-live="nej"] :is(.btn, .input, .onb-type, .unstyled):disabled { opacity: 1; }
    .onb-type:hover:not(:disabled) { transform: none; }
}