/* The onboarding form (REV-134, 12.11.2026): one thing per screen, 1:1 with the approved boards Onb-*-mobil/-pc.
   Measures come from the board template (gen-onb/lib.mjs). Every rule hangs under #onb.onb so older sheets that style
   #account, .ob-wizard or bare elements cannot reach in. Colours: ink, text, muted, grey surface, white cards; yellow only for
   the logo star, the current step and rating stars; green, red and yellow only as a real status. No pastel anywhere. */
@font-face{font-family:Geist;src:url('/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
#onb.onb{--onb-ink:#16181d;--onb-text:#3d4049;--onb-muted:#6b6f78;--onb-hair:rgba(16,24,40,.22);--onb-line:rgba(16,24,40,.13);--onb-field:rgba(16,24,40,.32);
 --onb-green:#1e8e3e;--onb-red:#d93025;--onb-yellow:#f9ab00;
 box-sizing:border-box;min-height:100vh;min-height:100dvh;width:100%;margin:0;padding:0;display:flex;flex-direction:column;background:#f3f3f2;color:var(--onb-ink);
 font-family:Geist,Arial,sans-serif;font-size:15px;line-height:22px;font-weight:400;letter-spacing:normal;text-align:left;-webkit-font-smoothing:antialiased}
#onb.onb *,#onb.onb *::before,#onb.onb *::after{box-sizing:border-box}
#onb.onb :is(h1,h2,p,ul,ol,li,label,fieldset){margin:0;padding:0}
#onb.onb :is(button,input,textarea,select){font-family:inherit;letter-spacing:normal;margin:0}
#onb.onb [hidden]{display:none!important}
#onb.onb svg{flex:none;display:block}
#onb.onb :is(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--onb-ink);outline-offset:2px}
#onb.onb .onb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The top: the logo to the left, «Logg inn» or «Logg ut» to the right. */
#onb.onb .onb-top{height:56px;flex:none;background:#fff;border-bottom:.5px solid var(--onb-hair);display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 20px;margin:0}
#onb.onb .onb-brand{height:44px;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--onb-ink);font-size:15px;line-height:22px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
#onb.onb .onb-brand svg{width:18px;height:18px}
#onb.onb .onb-side{height:44px;padding:0 10px;border:0;background:transparent;font-size:14px;line-height:20px;font-weight:500;color:var(--onb-ink);text-decoration:none;white-space:nowrap;display:flex;align-items:center;cursor:pointer}
#onb.onb .onb-side:disabled{color:var(--onb-muted);cursor:default}

/* The fixed order: steps, mark, one heading, one lead, one card, one button, one note, one link. */
#onb.onb .onb-main{flex:1;width:auto;max-width:none;margin:0;padding:28px 20px 32px;display:flex;flex-direction:column}
#onb.onb .onb-main.has-steps{padding-top:20px}
#onb.onb .onb-head{display:flex;flex-direction:column}
#onb.onb .onb-head:empty{display:none}
#onb.onb .onb-head.has-steps .onb-mark-wrap{margin-top:28px}
#onb.onb .onb-mark-wrap{display:flex}
#onb.onb .onb-h1{margin:0;font-size:26px;line-height:32px;font-weight:650;letter-spacing:-.02em;text-wrap:balance;color:var(--onb-ink)}
#onb.onb .onb-head.has-steps+.onb-h1{margin-top:28px}
#onb.onb .onb-head.has-mark+.onb-h1{margin-top:20px}
#onb.onb .onb-h1:focus{outline:0}
#onb.onb .onb-lead{margin-top:8px;font-size:15px;line-height:22px;color:var(--onb-text);text-wrap:pretty}
#onb.onb .onb-body{margin-top:20px}
#onb.onb .onb-body:empty{display:none}
#onb.onb .onb-feedback{margin-top:12px;font-size:14px;line-height:20px;color:var(--onb-text);text-wrap:pretty}
#onb.onb .onb-feedback:empty{display:none}
#onb.onb .onb-feedback.is-error,#onb.onb .onb-error{color:var(--onb-red)}
#onb.onb .onb-error{font-size:14px;line-height:20px;text-wrap:pretty}
#onb.onb .onb-btn{margin-top:20px;width:100%;height:52px;padding:0 16px;border-radius:10px;border:0;background:var(--onb-ink);color:#fff;font-size:15px;line-height:20px;font-weight:600;
 display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;text-decoration:none;box-shadow:none;min-height:0}
#onb.onb .onb-btn svg{width:18px;height:18px}
#onb.onb .onb-btn:disabled,#onb.onb .onb-btn[aria-disabled=true]{background:rgba(22,24,29,.26);cursor:default}
#onb.onb .onb-btn[aria-busy=true]{background:var(--onb-ink);opacity:.72}
#onb.onb .onb-note{margin-top:12px;text-align:center;font-size:13px;line-height:18px;color:var(--onb-muted);white-space:nowrap}
/* REV-138: the owner's word at «Slå på». A sentence, not a label: it may take two lines, never three. */
#onb.onb .onb-pledge{margin:12px 0 0;text-align:center;font-size:14px;line-height:20px;color:var(--onb-text);text-wrap:balance}
#onb.onb .onb-link{margin-top:8px;height:44px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;align-self:stretch;font-size:14px;line-height:20px;font-weight:500;color:var(--onb-ink);
 white-space:nowrap;text-decoration:underline;text-decoration-color:var(--onb-field);text-underline-offset:3px;cursor:pointer}
#onb.onb .onb-btn+.onb-link,#onb.onb .onb-note+.onb-link{margin-top:4px}
#onb.onb .onb-link:disabled{color:var(--onb-muted);cursor:default}

/* Three named steps over their bars. Done: ink with a check. Here: yellow bar, bold. Later: muted. */
#onb.onb .onb-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none}
#onb.onb .onb-step{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
#onb.onb .onb-step-name{display:flex;align-items:center;gap:4px;font-size:13px;line-height:18px;font-weight:500;color:var(--onb-muted);white-space:nowrap}
#onb.onb .onb-step-name svg{width:13px;height:13px}
#onb.onb .onb-step.is-done .onb-step-name{color:var(--onb-ink)}
#onb.onb .onb-step.is-here .onb-step-name{color:var(--onb-ink);font-weight:650}
#onb.onb .onb-step-bar{height:4px;border-radius:2px;background:var(--onb-line)}
#onb.onb .onb-step.is-done .onb-step-bar{background:var(--onb-ink)}
#onb.onb .onb-step.is-here .onb-step-bar{background:var(--onb-yellow)}

/* The mark over an outcome, or a system's logo on its own screen. Strong colours only. */
#onb.onb .onb-mark{width:56px;height:56px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center}
#onb.onb .onb-mark svg{width:28px;height:28px}
#onb.onb .onb-mark.is-ok{background:var(--onb-green)}
#onb.onb .onb-mark.is-stop{background:#fff;border:1.5px solid var(--onb-red)}
#onb.onb .onb-mark.is-wait{background:#fff;box-shadow:inset 0 0 0 .5px var(--onb-hair)}
#onb.onb .onb-mark.is-wait svg{animation:onb-spin 1s linear infinite}
@keyframes onb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#onb.onb .onb-mark.is-wait svg{animation:none}}
#onb.onb .onb-tile{width:40px;height:40px;flex:none;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 .5px var(--onb-hair);display:flex;align-items:center;justify-content:center}
#onb.onb .onb-tile img{width:24px;height:24px;object-fit:contain;display:block}
#onb.onb .onb-tile svg{width:20px;height:20px}
#onb.onb .onb-tile.is-large{width:56px;height:56px;border-radius:14px}
#onb.onb .onb-tile.is-large img{width:32px;height:32px}

/* One white card, with rows. */
#onb.onb .onb-card{background:#fff;border:.5px solid var(--onb-hair);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden;margin:0;padding:0}
#onb.onb .onb-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 16px;color:var(--onb-ink);text-decoration:none;width:100%;margin:0;border:0;border-radius:0;background:#fff;text-align:left;font:inherit;box-shadow:none}
#onb.onb .onb-row.onb-sep{border-top:.5px solid var(--onb-line)}
#onb.onb :is(a,button).onb-row{cursor:pointer}
#onb.onb :is(a,button).onb-row:disabled{cursor:default}
#onb.onb :is(a,button).onb-row:focus-visible{outline:2px solid var(--onb-ink);outline-offset:-2px}
#onb.onb .onb-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#onb.onb .onb-row-name{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--onb-ink)}
#onb.onb .onb-row-sub{font-size:13px;line-height:18px;color:var(--onb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
#onb.onb .onb-row.is-dim .onb-row-name{color:var(--onb-muted)}
#onb.onb .onb-chev{width:16px;height:16px}
#onb.onb .onb-avatar{width:36px;height:36px;flex:none;border-radius:50%;background:#eef0f2;color:var(--onb-ink);font-size:13px;line-height:18px;font-weight:600;display:flex;align-items:center;justify-content:center}
#onb.onb .onb-radio{width:20px;height:20px;flex:none;border-radius:50%;background:#fff;border:1.5px solid var(--onb-field)}
#onb.onb [aria-checked=true]>.onb-radio{border:6px solid var(--onb-ink)}
#onb.onb .onb-dot{width:8px;height:8px;flex:none;border-radius:50%}
#onb.onb .onb-dot.is-green{background:var(--onb-green)}#onb.onb .onb-dot.is-red{background:var(--onb-red)}#onb.onb .onb-dot.is-yellow{background:var(--onb-yellow)}

/* The search field as the first row of the card. */
#onb.onb .onb-search{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px 0 17px}
#onb.onb .onb-search.over-tiles{padding-left:27px}
#onb.onb .onb-search svg{width:18px;height:18px}
#onb.onb .onb-search input{flex:1;min-width:0;height:44px;padding:0 0 0 1px;border:0;outline:0;background:transparent;color:var(--onb-ink);font-size:15px;line-height:20px;font-weight:600;-webkit-appearance:none;appearance:none;box-shadow:none;border-radius:0}
#onb.onb .onb-search.over-tiles input{padding-left:11px}
#onb.onb .onb-search input:placeholder-shown{font-weight:400}
#onb.onb .onb-search input::placeholder{color:var(--onb-muted);opacity:1;font-weight:400}
#onb.onb .onb-search input::-webkit-search-cancel-button{-webkit-appearance:none}
#onb.onb .onb-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--onb-ink);border-radius:12px 12px 0 0}
#onb.onb .onb-search input:focus-visible{outline:0}

/* Fields stand on the grey surface. Focus: an ink frame and a soft ring. */
#onb.onb .onb-fields{display:flex;flex-direction:column;gap:14px}
#onb.onb .onb-field{display:flex;flex-direction:column;gap:6px}
#onb.onb .onb-label{font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;color:var(--onb-ink)}
#onb.onb .onb-input{width:100%;height:52px;padding:0 14px;border:.5px solid var(--onb-field);border-radius:10px;background:#fff;color:var(--onb-ink);font-size:15px;line-height:20px;font-weight:400;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none}
#onb.onb .onb-input:focus,#onb.onb .onb-input.is-focus{border:1.5px solid var(--onb-ink);box-shadow:0 0 0 4px rgba(22,24,29,.08)}
#onb.onb .onb-input[aria-invalid=true]{border:1px solid var(--onb-red)}
#onb.onb .onb-input::placeholder{color:var(--onb-muted);opacity:1}
#onb.onb .onb-hint{font-size:13px;line-height:18px;color:var(--onb-muted);white-space:nowrap}
#onb.onb .onb-secret{position:relative}
#onb.onb .onb-secret .onb-input{padding-right:64px}
#onb.onb .onb-secret button{position:absolute;top:4px;right:4px;height:44px;padding:0 12px;border:0;background:transparent;color:var(--onb-ink);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;cursor:pointer}
#onb.onb .onb-stack{display:flex;flex-direction:column;gap:14px}

/* Six code boxes. A wrong code is red. */
#onb.onb .onb-code{display:flex;gap:8px}
#onb.onb .onb-code input{flex:1;min-width:0;width:auto;height:60px;padding:0;border:.5px solid var(--onb-field);border-radius:10px;background:#fff;color:var(--onb-ink);font-size:22px;line-height:28px;font-weight:600;text-align:center;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none}
#onb.onb .onb-code input:focus{border:1.5px solid var(--onb-ink);box-shadow:0 0 0 4px rgba(22,24,29,.08)}
#onb.onb .onb-code.is-bad input{border:1px solid var(--onb-red)}
#onb.onb .onb-code input:disabled{background:#fff;color:var(--onb-muted)}

/* Start: the product at a glance. */
#onb.onb .onb-glance{display:flex;flex-direction:column;gap:8px;max-width:350px;margin-bottom:8px}
#onb.onb .onb-bubble{padding:9px 14px;font-size:14px;line-height:20px;white-space:nowrap}
#onb.onb .onb-bubble.is-dark{align-self:flex-start;background:var(--onb-ink);color:#fff;border-radius:16px 16px 16px 4px}
#onb.onb .onb-bubble.is-light{align-self:flex-end;background:#fff;color:var(--onb-ink);box-shadow:inset 0 0 0 .5px var(--onb-hair);border-radius:16px 16px 4px 16px}
#onb.onb .onb-glance-stars{align-self:flex-end;height:28px;display:flex;align-items:center;gap:8px}
#onb.onb .onb-glance-stars img{width:20px;height:20px;object-fit:contain}
#onb.onb .onb-stars{display:flex;gap:2px}
#onb.onb .onb-stars svg{width:18px;height:18px}

/* The Google profile: where it is, then name, address and rating. */
#onb.onb .onb-map{position:relative;height:110px;overflow:hidden;border-bottom:.5px solid var(--onb-line)}
#onb.onb .onb-map>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#onb.onb .onb-map .onb-pin{position:absolute;left:50%;top:50%;margin:-30px 0 0 -14px;width:28px;height:34px}
#onb.onb .onb-profile{display:flex;align-items:flex-start;gap:12px;padding:16px}
#onb.onb .onb-profile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#onb.onb .onb-profile-name{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#onb.onb .onb-profile-sub{font-size:13px;line-height:18px;color:var(--onb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#onb.onb .onb-rating{margin-top:6px;display:flex;align-items:center;gap:8px}
#onb.onb .onb-rating b{font-size:15px;line-height:20px;font-weight:600}
#onb.onb .onb-rating .onb-stars{gap:1px}
#onb.onb .onb-rating .onb-stars svg{width:15px;height:15px}

/* Step 3: the SMS as the customer gets it, when it goes, and the one choice. */
#onb.onb .onb-sms{display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px}
#onb.onb .onb-sms-head{display:flex;flex-direction:column;gap:6px}
#onb.onb .onb-small{font-size:13px;line-height:18px;color:var(--onb-muted);white-space:nowrap}
#onb.onb .onb-sms-text{align-self:flex-start;background:var(--onb-ink);color:#fff;border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:15px;line-height:22px;text-wrap:pretty;overflow-wrap:anywhere}
#onb.onb .onb-sms-when{display:flex;align-items:center;justify-content:space-between;gap:12px}
#onb.onb .onb-inline-link{padding:0;border:0;background:transparent;min-height:0;height:auto;width:auto;font-size:14px;line-height:20px;font-weight:500;color:var(--onb-ink);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--onb-field);text-underline-offset:3px;cursor:pointer}
#onb.onb .onb-choice{border-top:.5px solid var(--onb-line)}
#onb.onb .onb-textarea{width:100%;height:97px;padding:14px;border:1.5px solid var(--onb-ink);box-shadow:0 0 0 4px rgba(22,24,29,.08);border-radius:10px;background:#fff;color:var(--onb-ink);font-size:15px;line-height:22px;resize:none;display:block;outline:0}
#onb.onb .onb-count{align-self:flex-end;font-size:13px;line-height:18px;color:var(--onb-muted);white-space:nowrap}

/* The receipt: who gets the first SMS, and when. */
#onb.onb .onb-faces{display:flex;flex:none}
#onb.onb .onb-faces .onb-avatar{box-shadow:0 0 0 2px #fff}
#onb.onb .onb-faces .onb-avatar+.onb-avatar{margin-left:-8px}
#onb.onb .onb-row.is-receipt{padding:12px 16px}
/* A value to hand on (address, key): label over the value, never clipped. */
#onb.onb .onb-value{display:flex;flex-direction:column;gap:2px;padding:12px 16px}
#onb.onb .onb-value+.onb-value{border-top:.5px solid var(--onb-line)}
#onb.onb .onb-value b{font-size:15px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
/* Onb-google-tilkoblet (REV-138): the searches the app follows. A quiet head row, then one row per search with its kind
   at the right; lower than a row with a tile, as the board draws it. */
#onb.onb .onb-searches .onb-row{min-height:48px;padding:8px 16px;justify-content:space-between}
#onb.onb .onb-searches .onb-searches-head{min-height:44px}

/* A provider's own controls from Innstillinger, mounted inside the one screen when the form has no own screen for it. */
#onb.onb .onb-provider{margin-top:20px}

/* Touch screens get 16 px in fields so the phone does not zoom in on focus. */
@media (pointer:coarse){#onb.onb :is(.onb-input,.onb-search input){font-size:16px}}

/* PC: the same screen in one column of 520 px, centred, straight on the grey surface. The heading starts 134 px down. */
@media (min-width:720px){
 #onb.onb .onb-top{height:auto;background:transparent;border-bottom:0;padding:18px 24px 0 20px}
 #onb.onb .onb-brand,#onb.onb .onb-side{height:40px}
 #onb.onb .onb-side{padding:0}
 #onb.onb .onb-main,#onb.onb .onb-main.has-steps{width:520px;margin:0 auto;padding:48px 0 64px}
 #onb.onb .onb-head,#onb.onb .onb-head:empty{display:flex;height:134px;flex:none;justify-content:flex-end;padding-bottom:20px}
 #onb.onb .onb-head.has-steps{justify-content:space-between}
 #onb.onb .onb-head.has-steps .onb-mark-wrap{margin-top:0}
 #onb.onb .onb-head+.onb-h1,#onb.onb .onb-head.has-steps+.onb-h1,#onb.onb .onb-head.has-mark+.onb-h1{margin-top:0}
 #onb.onb .onb-h1{font-size:36px;line-height:42px}
 #onb.onb .onb-lead{margin-top:10px}
 #onb.onb :is(.onb-body,.onb-btn,.onb-provider){margin-top:24px}
}
/* Fields show focus with their own ink frame and ring; no second outline around it. */
#onb.onb :is(.onb-input,.onb-code input,.onb-textarea):focus-visible{outline:0}

/* The setup after sign-in: the wizard host fills the page; the app's menus are already hidden on this view. */
body.customer-app #account[data-view=onboarding] #workspace-view.onb-host,#account[data-view=onboarding] #workspace-view.onb-host{display:block;width:100%;max-width:none;margin:0;padding:0;min-height:100vh;min-height:100dvh;background:#f3f3f2}
#account[data-view=onboarding]:has(.onb-host){background:#f3f3f2}
#onb.onb .onb-provider select.onb-input,#onb.onb select.onb-input{padding-right:36px;background:#fff}
#onb.onb .onb-feedback .onb-inline-link{margin-left:8px}
/* «Endre» under the SMS gets a 44 px tap area; the negative margin keeps the line where it was (REV-138). */
#onb.onb .onb-sms-when .onb-inline-link{padding:12px 8px;margin:-12px -8px}
/* While «Slå på» works, the choice and «Endre» are locked and look it; the chosen row keeps its mark (REV-138). */
#onb.onb :is(.onb-choice .onb-row,.onb-sms-when .onb-inline-link)[aria-disabled=true]{opacity:.55;cursor:default}
/* A form or a login inside the screen keeps the same column, so the fixed order and its spacing hold. */
#onb.onb :is(.onb-form,.onb-auth){display:flex;flex-direction:column}
#onb.onb .onb-form[hidden]{display:none}
#onb.onb .onb-when-short{display:none}
@media (max-width:370px){#onb.onb .onb-when-full{display:none}#onb.onb .onb-when-short{display:inline}}