/* Svarly designsystem. Used by the prototype now and by the React app later. */

@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("./fonter/instrument-sans-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("./fonter/instrument-sans-latin-500-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("./fonter/instrument-sans-latin-600-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("./fonter/instrument-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("./fonter/instrument-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("./fonter/instrument-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }

/* The colours, light (the default). Dark mode below gives the same tokens other values; a page only ever uses tokens.
   The previews of the customer's chat (.sw.innebygd: Utseende, Testchat, Regler) always get the light values, so the
   chat looks there as it does on the customer's website, whatever the app's mode. No color-scheme here: the meta tag in
   index.html says «light dark» and the browser's own parts follow it, exactly as before dark mode (an explicit «light»
   draws a search field a hair differently). */
:root, .sw.innebygd {
  /* Ink: text, and the fill of the strongest buttons and badges, with --pa-blekk on it. */
  --blekk:#111214; --blekk-2:#3A3B3D; --stein:#6E6F6C; --stein-2:#8A8B88;
  --pa-blekk:#FFFFFF; --blekk-hover:#2A2C2F;
  --linje:#E6E6E3; --linje-2:#EFEFEC; --bakgrunn:#F4F4F2; --flate:#FFFFFF; --flate-2:#FAFAF8;
  /* What is chosen on --bakgrunn: the chosen tab in a segment, the current page in the menu. */
  --flate-hevet:#FFFFFF;
  /* What floats over the page: dialogs, menus, the bar for chosen pages. Lighter than the page in dark mode. */
  --flate-flyt:#FFFFFF;
  /* A border on hover, the border of a field on hover and of a drop zone, and of a rule with a warning. */
  --linje-hover:#D7D7D3; --linje-felt:#D2D2CE; --linje-advar:#CFCFCA;
  /* Badges, the visitor's messages and the skeleton: a quiet grey fill, with its text. */
  --fyll:#EDEDEA; --fyll-tekst:#55574F; --skjelett-glans:#F6F6F4;
  --lime:#C6F432; --lime-myk:#EEF9C7; --pa-lime:#111214; --lime-tekst:#3F4F05;
  /* The lime badge («Kjøpssignal», «Med», «Klar»): lime with ink in light, a quiet tint with lime text in dark. */
  --merke-lime:#C6F432; --merke-lime-tekst:#111214;
  /* «Someone waits» on the overview, and the dashed edge of an internal note. */
  --lime-flate:#FBFEF1; --lime-flate-2:#F7FCE3; --lime-kant:#B9D94A; --notat-kant:#B9C77E;
  --feil:#B42318; --feil-myk:#FDECEA; --feil-kant:#F3C8C3; --feil-linje:#EBC9C4; --feil-fylt:#B42318; --pa-feil:#FFFFFF;
  --gronn:#2F7D4A; --varsel:#B54708;
  /* Surfaces that stay dark in both modes: code (--natt) and what floats over the page, toasts and tips (--hevet). */
  --natt:#111214; --natt-ramme:none; --hevet:#111214;
  /* The switch (on: an ink track with the lime knob, as in the design manual), and the bars in the charts on Innsikt. */
  --bryter-av:#D6D6D2; --bryter-knott:#FFFFFF; --bryter-pa:#111214; --bryter-pa-knott:#C6F432; --bryter-pa-ramme:none;
  --stolpe:#C9CAC6; --strek:#B9BAB6;
  /* Behind a dialog and the menu on a phone. */
  --slor:rgba(17,18,20,.32);
  /* The colour of shadows and of hover tints, as r,g,b for rgba(var(--tone), .04): darker on light, lighter on dark. */
  --skyggetone:17,18,20; --tone:17,18,20;
  --skygge:0 1px 2px rgba(17,18,20,.06), 0 8px 24px rgba(17,18,20,.08);
  /* A card someone can click, on hover (a.kort, the numbers on Innsikt, the choices in «Legg til kunnskap»). */
  --loft:0 1px 2px rgba(17,18,20,.06), 0 6px 16px rgba(17,18,20,.09);
  --nedtrekk-pil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E6F6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* Dark mode: by the system's setting unless «Lyst» is chosen in Profil, or «Mørkt» chosen (src/app/tema.ts sets
   data-tema on <html> before the first paint, public/tema.js). Warm near-black, the same lime as the one accent. Body
   text 15:1 on --flate, --stein 6.7:1, --stein-2 4.3:1. A black shadow barely shows on near-black, so the shadows here
   also light the top edge a little (inset, not a ring). Only on screen: a printout (Innsikt, «Skriv ut / PDF») is
   always light. The two blocks must stay the same (tests/tema.test.ts). */
@media screen and (prefers-color-scheme:dark) {
  :root:not([data-tema="lys"]) {
    color-scheme:dark;
    --blekk:#ECECE8; --blekk-2:#C3C4BF; --stein:#9D9E99; --stein-2:#7B7C78;
    --pa-blekk:#111214; --blekk-hover:#D4D5D0;
    --linje:#33332F; --linje-2:#262624; --bakgrunn:#0E0E0D; --flate:#161615; --flate-2:#1E1E1C; --flate-hevet:#262624; --flate-flyt:#1F1F1D;
    --linje-hover:#46463F; --linje-felt:#4A4A44; --linje-advar:#57574F;
    --fyll:#2A2A27; --fyll-tekst:#C8C9C4; --skjelett-glans:#343431;
    --lime:#C6F432; --lime-myk:#2A3112; --pa-lime:#111214; --lime-tekst:#CFE97A;
    --merke-lime:rgba(198,244,50,.14); --merke-lime-tekst:#C6F432;
    --lime-flate:#1B200F; --lime-flate-2:#222914; --lime-kant:#5E7A1A; --notat-kant:#5E6B2C;
    --feil:#F97066; --feil-myk:#3A1A16; --feil-kant:#6B2C25; --feil-linje:#5C2822; --feil-fylt:#C93A2E; --pa-feil:#FFFFFF;
    --gronn:#5BC283; --varsel:#F5A055;
    --natt:#0A0A09; --natt-ramme:inset 0 0 0 1px #2B2B28; --hevet:#2C2C29;
    --bryter-av:#3D3D39; --bryter-knott:#DCDCD8; --bryter-pa:#050505; --bryter-pa-knott:#C6F432; --bryter-pa-ramme:inset 0 0 0 1px #57574F;
    --stolpe:#545550; --strek:#5C5D59;
    --slor:rgba(0,0,0,.6);
    --skyggetone:0,0,0; --tone:255,255,255;
    --skygge:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.6);
    --loft:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.7);
    --nedtrekk-pil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239D9E99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    --avkrysset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111214' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.8 8.3 2.7 2.6 5.7-5.8'/%3E%3C/svg%3E");
    --delvis-avkrysset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111214' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
  }
  :root:not([data-tema="lys"]) .sw.innebygd { color-scheme:light; }
  /* Checkboxes and radios: the app's own in dark, warm and the same in Chrome and Safari (the browsers' dark ones are cool
     grey, and differ). Like light mode: a quiet edge, and filled with ink when chosen. Not in the previews of the chat.
     No specificity (:where), so the sizes set elsewhere (16 px in Kunnskap) still apply. */
  :where(:root:not([data-tema="lys"]) input:is([type="checkbox"], [type="radio"]):not(.sw *)) { appearance:none; -webkit-appearance:none; width:13px; height:13px; border:1px solid var(--stein-2); border-radius:3px; background:var(--flate); color:var(--blekk); cursor:pointer; flex:none; transition:border-color .12s, background-color .12s; }
  :where(:root:not([data-tema="lys"]) input[type="radio"]:not(.sw *)) { border-radius:50%; }
  :where(:root:not([data-tema="lys"]) input:is([type="checkbox"], [type="radio"]):not(.sw *):hover) { border-color:var(--blekk-2); }
  :where(:root:not([data-tema="lys"]) input[type="checkbox"]:is(:checked, :indeterminate):not(.sw *)) { border-color:var(--blekk); background:var(--blekk) var(--avkrysset) center / 100% no-repeat; }
  :where(:root:not([data-tema="lys"]) input[type="checkbox"]:indeterminate:not(.sw *)) { background-image:var(--delvis-avkrysset); }
  :where(:root:not([data-tema="lys"]) input[type="radio"]:checked:not(.sw *)) { border-color:var(--blekk); background:var(--blekk); box-shadow:inset 0 0 0 2.5px var(--flate); }
  :where(:root:not([data-tema="lys"]) input:is([type="checkbox"], [type="radio"]):disabled:not(.sw *)) { opacity:.5; cursor:default; }
}
@media screen {
  :root[data-tema="mork"] {
    color-scheme:dark;
    --blekk:#ECECE8; --blekk-2:#C3C4BF; --stein:#9D9E99; --stein-2:#7B7C78;
    --pa-blekk:#111214; --blekk-hover:#D4D5D0;
    --linje:#33332F; --linje-2:#262624; --bakgrunn:#0E0E0D; --flate:#161615; --flate-2:#1E1E1C; --flate-hevet:#262624; --flate-flyt:#1F1F1D;
    --linje-hover:#46463F; --linje-felt:#4A4A44; --linje-advar:#57574F;
    --fyll:#2A2A27; --fyll-tekst:#C8C9C4; --skjelett-glans:#343431;
    --lime:#C6F432; --lime-myk:#2A3112; --pa-lime:#111214; --lime-tekst:#CFE97A;
    --merke-lime:rgba(198,244,50,.14); --merke-lime-tekst:#C6F432;
    --lime-flate:#1B200F; --lime-flate-2:#222914; --lime-kant:#5E7A1A; --notat-kant:#5E6B2C;
    --feil:#F97066; --feil-myk:#3A1A16; --feil-kant:#6B2C25; --feil-linje:#5C2822; --feil-fylt:#C93A2E; --pa-feil:#FFFFFF;
    --gronn:#5BC283; --varsel:#F5A055;
    --natt:#0A0A09; --natt-ramme:inset 0 0 0 1px #2B2B28; --hevet:#2C2C29;
    --bryter-av:#3D3D39; --bryter-knott:#DCDCD8; --bryter-pa:#050505; --bryter-pa-knott:#C6F432; --bryter-pa-ramme:inset 0 0 0 1px #57574F;
    --stolpe:#545550; --strek:#5C5D59;
    --slor:rgba(0,0,0,.6);
    --skyggetone:0,0,0; --tone:255,255,255;
    --skygge:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.6);
    --loft:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.7);
    --nedtrekk-pil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239D9E99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    --avkrysset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111214' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.8 8.3 2.7 2.6 5.7-5.8'/%3E%3C/svg%3E");
    --delvis-avkrysset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111214' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
  }
  :root[data-tema="mork"] .sw.innebygd { color-scheme:light; }
  /* Checkboxes and radios: the app's own in dark, warm and the same in Chrome and Safari (the browsers' dark ones are cool
     grey, and differ). Like light mode: a quiet edge, and filled with ink when chosen. Not in the previews of the chat.
     No specificity (:where), so the sizes set elsewhere (16 px in Kunnskap) still apply. */
  :where(:root[data-tema="mork"] input:is([type="checkbox"], [type="radio"]):not(.sw *)) { appearance:none; -webkit-appearance:none; width:13px; height:13px; border:1px solid var(--stein-2); border-radius:3px; background:var(--flate); color:var(--blekk); cursor:pointer; flex:none; transition:border-color .12s, background-color .12s; }
  :where(:root[data-tema="mork"] input[type="radio"]:not(.sw *)) { border-radius:50%; }
  :where(:root[data-tema="mork"] input:is([type="checkbox"], [type="radio"]):not(.sw *):hover) { border-color:var(--blekk-2); }
  :where(:root[data-tema="mork"] input[type="checkbox"]:is(:checked, :indeterminate):not(.sw *)) { border-color:var(--blekk); background:var(--blekk) var(--avkrysset) center / 100% no-repeat; }
  :where(:root[data-tema="mork"] input[type="checkbox"]:indeterminate:not(.sw *)) { background-image:var(--delvis-avkrysset); }
  :where(:root[data-tema="mork"] input[type="radio"]:checked:not(.sw *)) { border-color:var(--blekk); background:var(--blekk); box-shadow:inset 0 0 0 2.5px var(--flate); }
  :where(:root[data-tema="mork"] input:is([type="checkbox"], [type="radio"]):disabled:not(.sw *)) { opacity:.5; cursor:default; }
}
:root[data-tema="lys"] { color-scheme:light; }

/* What stands for the customer's website in the app (the surfaces behind the bubbles on Utseende, the test chat's
   stage): light in both modes, as most websites are, so the chat is seen as visitors see it. */
:root { --nettside:#F4F4F2; --nettside-tekst:#6E6F6C; }

:root {
  --skrift:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-felt:6px; --r-kort:10px; --r-flate:12px;
  --side:248px;
  /* One left edge on every page: the page starts --kant in from the panel and is left-aligned, never centred, so the edge
     stays put when moving between pages. --innhold is the width of an ordinary page, --lesebredde that of a page of
     forms and text (.side.smal), which is narrow towards the right. Tables and the two-pane pages (.side.bred) may use the
     whole width, from the same edge. */
  --kant:40px; --innhold:1120px; --lesebredde:640px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--skrift); font-size:14px; line-height:1.5; color:var(--blekk); background:var(--bakgrunn); -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4 { margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:600; }
h1 { font-size:24px; } h2 { font-size:16px; } h3 { font-size:14px; }
p { margin:0; }
a { color:inherit; }
a:not([class]) { text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--stein-2); }
a:not([class]):hover { text-decoration-color:var(--blekk); }
button, input, textarea, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--blekk); outline-offset:2px; }
.svak { color:var(--stein); }
.liten { font-size:13px; }
.mini { font-size:12px; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono { font-family:var(--mono); font-size:13px; }
/* The knobs in the Utseende icon: the surface under them, in both modes. */
.ikon-hull { fill:var(--flate); }

/* «Hopp til innholdet»: the first tab stop on every page, out of sight until it has focus. */
.hopp { position:fixed; top:8px; left:8px; z-index:60; padding:8px 14px; border:0; border-radius:var(--r-felt); background:var(--blekk); color:var(--pa-blekk); font:inherit; font-size:14px; font-weight:500; cursor:pointer; transform:translateY(calc(-100% - 16px)); }
.hopp:focus { transform:none; }

/* Layout */
.app { display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh; }
.innhold { margin:8px 8px 8px 0; background:var(--flate); border:1px solid var(--linje); border-radius:var(--r-flate); min-width:0; }
.side { max-width:calc(var(--innhold) + 2 * var(--kant)); margin:0; padding:32px var(--kant) 64px; }
.side.smal { max-width:calc(var(--lesebredde) + 2 * var(--kant)); }
.side.bred { max-width:none; }
.mobiltopp, .meny-bak { display:none; }
.midt { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:center; padding:24px 16px; }

/* Sidetopp */
.sidetopp { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.sidetopp h1 { margin-bottom:4px; }
/* Overskriften og innholdsflaten får fokus etter navigering, for skjermlesere. De er ikke kontroller, så ingen ring. */
.sidetopp h1:focus, .innhold:focus { outline:none; }
.sidetopp .ingress { color:var(--stein); max-width:60ch; }
.sidetopp .handlinger, .seksjon-topp .handlinger { display:flex; gap:8px; flex-wrap:wrap; }
.smuler { display:flex; gap:6px; color:var(--stein); font-size:13px; margin-bottom:10px; }
.smuler a { text-decoration:none; color:inherit; }
.smuler a:hover { color:var(--blekk); }
.smuler > * + *::before { content:"/"; margin-right:6px; color:var(--stein-2); }

/* Seksjoner */
.seksjon { scroll-margin-top:24px; }
.seksjon + .seksjon { margin-top:36px; }
/* Skjema delt i seksjoner med en linje mellom */
.skilte-seksjoner .seksjon + .seksjon { padding-top:32px; border-top:1px solid var(--linje-2); }
/* A section of facts no wider than they need, with its button at their right edge. */
.seksjon.smal { max-width:520px; }
/* Kunde's Innstillinger: the form, Personer og tilgang and Slett kunden with the same space and line between them. */
.kundeinnstillinger > .seksjon { margin-top:32px; padding-top:32px; border-top:1px solid var(--linje-2); }
.seksjon-topp { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.seksjon-topp h2 { display:flex; align-items:baseline; gap:8px; }
.seksjon-topp h2 .antall { font-size:13px; font-weight:500; color:var(--stein); }
.seksjon-topp .ingress { color:var(--stein); font-size:13px; margin-top:2px; }

/* Knapper */
.knapp { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--r-felt); border:1px solid transparent; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .12s, border-color .12s; }
.knapp svg { width:16px; height:16px; flex:none; }
.knapp.primaer { background:var(--blekk); color:var(--pa-blekk); }
.knapp.primaer:hover { background:var(--blekk-hover); }
.knapp.sekundaer { background:var(--flate); border-color:var(--linje); color:var(--blekk); }
.knapp.sekundaer:hover { background:var(--flate-2); border-color:var(--linje-hover); }
.knapp.stille { background:transparent; color:var(--blekk-2); padding:0 8px; }
.knapp.stille:hover { background:var(--bakgrunn); color:var(--blekk); }
.knapp.farlig { background:var(--flate); border-color:var(--linje); color:var(--feil); }
.knapp.farlig:hover { background:var(--feil-myk); border-color:var(--feil-kant); }
.knapp.farlig.fylt { background:var(--feil-fylt); border-color:var(--feil-fylt); color:var(--pa-feil); }
.knapp.liten { height:28px; padding:0 10px; font-size:13px; }
.knapp.ikon { width:34px; padding:0; }
.knapp.ikon.liten { width:28px; padding:0; }
.knapp.ikon.stille { color:var(--stein); }
.knapp.ikon.stille:hover { color:var(--blekk); }
.skjema > .knapp, .kort > .knapp { justify-self:start; }
.knapp:disabled, .knapp[aria-disabled="true"] { opacity:.5; cursor:default; }
.knapp.lasting { position:relative; color:transparent !important; pointer-events:none; opacity:1; }
.knapp.lasting::after { content:""; position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-color:var(--pa-blekk) var(--pa-blekk) transparent transparent; animation:snurr .7s linear infinite; }
.knapp.sekundaer.lasting::after { border-color:var(--blekk) var(--blekk) transparent transparent; }
@keyframes snurr { to { transform:rotate(360deg); } }

/* Skjema */
.skjema { display:grid; gap:16px; }
.felt { display:grid; gap:6px; }
.felt > label, .felt > .etikett { font-size:13px; font-weight:500; color:var(--blekk); }
.felt .hjelp { font-size:12px; color:var(--stein); }
.felt .feilmelding { font-size:12px; color:var(--feil); }
.inndata, .tekstfelt, .nedtrekk { width:100%; height:36px; padding:0 11px; background:var(--flate); border:1px solid var(--linje); border-radius:var(--r-felt); font-size:14px; transition:border-color .12s, box-shadow .12s; }
.tekstfelt { height:auto; min-height:84px; padding:9px 11px; resize:vertical; line-height:1.5; }
.nedtrekk { appearance:none; padding-right:32px; background-image:var(--nedtrekk-pil); background-repeat:no-repeat; background-position:right 10px center; }
.inndata:hover, .tekstfelt:hover, .nedtrekk:hover { border-color:var(--linje-felt); }
.inndata:focus, .tekstfelt:focus, .nedtrekk:focus { outline:none; border-color:var(--blekk); box-shadow:0 0 0 3px var(--lime-myk); }
.inndata::placeholder, .tekstfelt::placeholder { color:var(--stein-2); }
.felt.ugyldig .inndata, .felt.ugyldig .tekstfelt { border-color:var(--feil); }
.tekstfelt.lav { min-height:60px; }
.felt-rad { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; align-items:start; }
.skjema > .knapper { display:flex; gap:8px; }
/* Liste med tekstfelt som kan fjernes (for eksempel forslag) */
.inndata-liste { display:grid; gap:6px; }
.inndata-rad { display:flex; gap:6px; }
.inndata-rad .knapp.ikon { width:36px; height:36px; flex:none; }
.valg-gruppe { display:flex; gap:6px; flex-wrap:wrap; }
.valg { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--linje); border-radius:var(--r-felt); background:var(--flate); cursor:pointer; font-size:14px; }
.valg:has(input:checked) { border-color:var(--blekk); box-shadow:inset 0 0 0 1px var(--blekk); }
.valg input { accent-color:var(--blekk); margin:0; }
/* A checkbox with a line of help under it, in an inline form */
.valg.avkrysning { align-items:flex-start; justify-self:start; gap:10px; padding:10px 12px; }
.valg.avkrysning input { margin-top:3px; }
.valg.avkrysning > span { display:grid; gap:2px; }
.valg.avkrysning small { font-size:13px; color:var(--stein); }
/* The box an owner ticks for content on another website, with its i mark beside it */
.rett-valg { display:flex; align-items:center; gap:8px; }

/* Bryter */
.bryter { position:relative; width:34px; height:20px; border-radius:99px; border:0; padding:0; background:var(--bryter-av); cursor:pointer; flex:none; transition:background-color .15s; }
.bryter::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--bryter-knott); transition:transform .15s, background-color .15s; }
.bryter[aria-checked="true"] { background:var(--bryter-pa); box-shadow:var(--bryter-pa-ramme); }
.bryter[aria-checked="true"]::after { transform:translateX(14px); background:var(--bryter-pa-knott); }

/* Merkelapper */
.merke { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:99px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--fyll); color:var(--fyll-tekst); }
.merke.lime { background:var(--merke-lime); color:var(--merke-lime-tekst); }
.merke.rod { background:var(--feil-myk); color:var(--feil); }
.merke.mork { background:var(--blekk); color:var(--pa-blekk); }
.merke.omriss { background:transparent; border:1px solid var(--linje); color:var(--blekk-2); }
.merke .prikk { width:6px; height:6px; border-radius:50%; background:currentColor; }
.merke.jobber .prikk { background:var(--lime); animation:puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity:.3; } }

/* Lister */
.liste { background:var(--flate); border:1px solid var(--linje); border-radius:var(--r-kort); overflow:hidden; }
.rad { display:flex; align-items:center; gap:14px; padding:12px 16px; min-height:52px; }
.rad + .rad { border-top:1px solid var(--linje-2); }
a.rad, .rad.klikk { text-decoration:none; color:inherit; cursor:pointer; }
a.rad:hover, .rad.klikk:hover { background:var(--flate-2); }
.rad.valgt, a.rad.valgt:hover, .rad.klikk.valgt:hover { background:var(--lime-myk); }
.rad-hoved { flex:1; min-width:0; display:grid; gap:1px; }
.rad-hoved .tittel { font-weight:500; overflow-wrap:anywhere; }
.rad-hoved .under { font-size:13px; color:var(--stein); overflow-wrap:anywhere; }
.rad-meta { display:flex; align-items:center; gap:12px; color:var(--stein); font-size:13px; flex:none; }
.rad > .ikon, .rad-lenke > .ikon { width:32px; height:32px; border-radius:8px; background:var(--bakgrunn); display:grid; place-items:center; flex:none; color:var(--blekk-2); }
.rad > .ikon svg, .rad-lenke > .ikon svg { width:16px; height:16px; }
.rad > .avatar, .rad-lenke > .avatar { width:32px; height:32px; border-radius:8px; font-size:13px; }
/* Kolonner i rad-meta som står på linje fra rad til rad */
.rad-meta .kol { min-width:96px; text-align:right; }
.rad-meta .kol.bred { min-width:120px; }
.rad.deaktivert .tittel { color:var(--stein); }
/* Rad med knapper i rad-meta: bare hoveddelen er lenken, og den fyller raden til venstre */
.rad-lenke { flex:1; min-width:0; align-self:stretch; display:flex; align-items:center; gap:14px; margin:-12px 0 -12px -16px; padding:12px 0 12px 16px; text-decoration:none; color:inherit; }
.rad:not(.valgt):has(> .rad-lenke:hover) { background:var(--flate-2); }
a.rad:focus-visible, .rad-lenke:focus-visible { outline-offset:-2px; }

/* Kort */
.kort { display:grid; gap:10px; align-content:start; background:var(--flate); border:1px solid var(--linje); border-radius:var(--r-kort); padding:20px; }
/* Kortoverskrift med merke til høyre */
.kort-topp { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kort-topp b { font-size:16px; letter-spacing:-.01em; }
/* A card that is a link lifts a little with a shadow on hover: never a ring or a darker border. */
a.kort { text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; }
a.kort:hover { box-shadow:var(--loft); transform:translateY(-2px); }
.kort.stiplet { border-style:dashed; background:var(--flate-2); }
/* Skjemakort som ikke skal fylle hele bredden: ett felt per linje (smal), to felt side om side (middels) */
.kort.smal { max-width:520px; }
.kort.middels { max-width:560px; }
.kort-rutenett { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }

/* Tom tilstand */
.tom { text-align:center; padding:48px 24px; display:grid; justify-items:center; gap:8px; }
.tom .ikon { width:44px; height:44px; border-radius:12px; background:var(--bakgrunn); display:grid; place-items:center; margin-bottom:4px; }
.tom .ikon svg { width:20px; height:20px; }
.tom p { color:var(--stein); max-width:42ch; }
.tom .knapp { margin-top:8px; }

/* Skjelett */
.skjelett { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--fyll) 25%,var(--skjelett-glans) 50%,var(--fyll) 75%); background-size:200% 100%; animation:skimmer 1.4s ease-in-out infinite; }
@keyframes skimmer { to { background-position:-200% 0; } }

/* Kvittering */
.kvittering { position:fixed; left:50%; bottom:24px; transform:translate(-50%,12px); opacity:0; display:flex; align-items:center; gap:10px; background:var(--hevet); color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; box-shadow:var(--skygge); transition:opacity .2s, transform .2s; z-index:50; pointer-events:none; }
.kvittering.vis { opacity:1; transform:translate(-50%,0); }
.kvittering::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); }
/* «Angre» after a save that happened by itself: the toast takes clicks only while it has the button */
.kvittering.vis:has(.kvittering-angre) { pointer-events:auto; }
.kvittering-angre { margin:-4px -6px -4px 6px; padding:4px 6px; border:0; border-radius:6px; background:none; color:var(--lime); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.kvittering-angre:hover { background:rgba(255,255,255,.08); }
.kvittering-angre:focus-visible { outline-color:#fff; }

/* Dialog */
.dialog-bak { position:fixed; inset:0; background:var(--slor); display:none; place-items:center; padding:16px; z-index:40; }
.dialog-bak.apen { display:grid; }
.dialog { width:min(440px,100%); background:var(--flate-flyt); border-radius:var(--r-flate); box-shadow:var(--skygge); padding:24px; display:grid; gap:16px; }
.dialog h2 { font-size:18px; }
.dialog .knapper { display:flex; justify-content:flex-end; gap:8px; }

/* Kode */
.kode:has(> .knapp) { padding-right:104px; }
.kode { position:relative; background:var(--natt); box-shadow:var(--natt-ramme); color:#E9E9E6; border-radius:var(--r-kort); padding:16px 18px; font-family:var(--mono); font-size:13px; line-height:1.6; overflow-x:auto; }
.kode .knapp { position:absolute; top:10px; right:10px; }
.kode .s { color:var(--lime); }

/* Kode i løpende tekst, og kodelinjen i .kode */
code.i { font-family:var(--mono); font-size:13px; color:var(--blekk); background:var(--bakgrunn); padding:1px 5px; border-radius:4px; }
.kode code { font:inherit; }
.steg.mellom { margin-top:20px; }

/* Innbygging: legg til en adresse under en liste, merknad, og advarsel når listen er tom */
.ny-adresse { display:flex; gap:8px; margin-top:12px; }
.ny-adresse .inndata { flex:1; min-width:0; }
.ny-adresse-feil { margin-top:6px; font-size:12px; color:var(--feil); }
.merknad { display:flex; gap:10px; align-items:flex-start; margin-top:12px; color:var(--stein); font-size:13px; }
.merknad svg { width:16px; height:16px; flex:none; margin-top:2px; color:var(--stein); }
.merknad.advarsel { margin-top:0; padding:12px 14px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate-2); color:var(--blekk-2); }
.merknad.advarsel svg { color:var(--blekk-2); }
.kildevarsel { margin-bottom:20px; max-width:70ch; }
.kildevarsel p { margin:2px 0 0; color:var(--stein); }
.kildevarsel ul { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:4px; }
.kildevarsel li { overflow-wrap:anywhere; }

/* Avatar */
.avatar { width:24px; height:24px; border-radius:6px; background:var(--blekk); color:var(--pa-blekk); display:grid; place-items:center; font-size:11px; font-weight:600; flex:none; }
.avatar.stor { width:36px; height:36px; border-radius:9px; font-size:14px; }
.avatar.lys { background:var(--bakgrunn); color:var(--blekk); border:1px solid var(--linje); }

/* Faner (segment) */
.segment { display:inline-flex; gap:2px; padding:3px; background:var(--bakgrunn); border-radius:8px; }
.segment button, .segment a { border:0; background:transparent; padding:5px 12px; border-radius:6px; font-size:13px; font-weight:500; color:var(--blekk-2); cursor:pointer; text-decoration:none; }
.segment [aria-selected="true"], .segment [aria-pressed="true"], .segment .valgt { background:var(--flate-hevet); color:var(--blekk); box-shadow:0 1px 2px rgba(var(--skyggetone),.08); }

/* Opplasting */
.slipp { border:1.5px dashed var(--linje-felt); border-radius:var(--r-kort); padding:24px; text-align:center; display:grid; gap:6px; justify-items:center; background:var(--flate-2); color:var(--stein); }
.slipp strong { color:var(--blekk); font-weight:500; }
.slipp.over { border-color:var(--blekk); }
/* Liggende: bilde, tekst og knapp på én linje (for eksempel logo) */
.slipp.liggende { grid-template-columns:auto minmax(0,1fr) auto; justify-items:start; align-items:center; gap:14px; padding:14px 16px; text-align:left; }
.bildeflis { width:44px; height:44px; border-radius:10px; background:var(--flate); border:1px solid var(--linje); display:grid; place-items:center; font-size:18px; font-weight:600; color:var(--blekk); overflow:hidden; }
.bildeflis img { width:100%; height:100%; object-fit:contain; }

/* Farge: prøve med «Aa», fargekode og forslag fra nettsiden */
.fargerad { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fargerad .inndata { width:116px; text-transform:uppercase; }
.fargeprove { position:relative; width:36px; height:36px; border-radius:var(--r-felt); box-shadow:inset 0 0 0 1px rgba(var(--tone),.1); display:grid; place-items:center; font-size:13px; font-weight:600; cursor:pointer; }
.fargeprove:has(:focus-visible) { outline:2px solid var(--blekk); outline-offset:2px; }
.fargeforslag { display:flex; align-items:center; gap:6px; margin-left:6px; font-size:13px; color:var(--stein); }
.fargeforslag button { width:22px; height:22px; padding:0; border:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(var(--tone),.12); cursor:pointer; }

/* To spalter: innhold til venstre, fast spalte til høyre på brede skjermer (for eksempel forhåndsvisning) */
.spalter { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
.spalter > * { min-width:0; }
@media (min-width:1100px) { .spalter { grid-template-columns:minmax(0,1fr) 380px; align-items:start; } .spalte-side { position:sticky; top:24px; } }
/* Overskrift med en knapp eller et segment ved siden av, på linje med overskriften i nabospalten */
.spalte-topp { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-8px 0 14px; }
/* Forhåndsvisning av widgeten: boblen under panelet */
.boble-rad { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; width:100%; max-width:380px; margin-top:16px; }

/* Testchat: widgeten på en scene, «Om svaret» til høyre på brede skjermer (fra design/prototype/testchat.html) */
.testoppsett { display:grid; gap:28px; }
.merknad { margin:0 0 20px; max-width:70ch; }
.feilboks + .testoppsett { margin-top:20px; }
@media (min-width:1100px) { .testoppsett { grid-template-columns:minmax(0,1fr) 300px; align-items:start; } .om-svaret { position:sticky; top:24px; } }
.scene { display:grid; place-items:center; padding:32px 16px; background:var(--nettside); border-radius:var(--r-kort); }
/* The line under the chat on the stage is on the website's surface; on a phone the stage goes, and the line is on the page. */
@media (min-width:520.02px) { .scene .boble-rad .svak { color:var(--nettside-tekst); } }
.scene .sw-panel { height:640px; max-height:none; }
.scene .sw-bot[data-svar] { cursor:pointer; transition:background-color .12s; }
.scene .sw-bot[data-svar]:hover { background:#EAE6DE; }
.scene .sw-bot[data-svar].valgt { background:var(--lime-myk); }
.scene .sw-omsvaret { display:block; margin-top:6px; padding:2px 0; border:0; background:none; font:inherit; font-size:12px; color:var(--sw-svak); text-decoration:underline; text-underline-offset:2px; cursor:pointer; opacity:.55; transition:opacity .12s; }
.scene .sw-bot:hover .sw-omsvaret, .scene .sw-omsvaret:focus-visible, .scene .sw-omsvaret[aria-pressed="true"] { opacity:1; }
@media (hover:none) { .scene .sw-omsvaret { opacity:.8; } }
@media (max-width:520px) { .scene { padding:0; background:none; } .scene .sw-panel { height:600px; border:1px solid var(--linje); box-shadow:none; border-radius:18px; } }
/* «Prøv selv» and «Test hele chatboten» (A3): the two parts of the test chat page. */
.testchat-valg { margin-bottom:20px; }
.heltest { container:heltest / inline-size; }
.heltest-status { display:grid; gap:10px; margin-bottom:12px; padding:14px 16px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate); }
.heltest-status-topp { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.heltest-fremdrift { height:6px; border-radius:3px; background:var(--linje-2); overflow:hidden; }
.heltest-fremdrift i { display:block; height:100%; border-radius:3px; background:var(--blekk); transition:width .4s ease; }
.heltest-sist, .heltest-igjen { margin:0 0 4px; }
.heltest .feilboks { margin-bottom:12px; }
.heltest-tall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0 20px; }
.heltest-tall .tall-kort { padding:13px 16px; gap:1px; }
.heltest-tall .navn { display:flex; align-items:center; gap:7px; }
.heltest-tall .under { font-size:13px; color:var(--stein); }
.heltest-filter { flex-wrap:wrap; margin-bottom:12px; }
.heltest-filter .antall { margin-left:3px; color:var(--stein); font-variant-numeric:tabular-nums; }
.heltest-rad { display:grid; gap:10px; align-items:stretch; padding:14px 16px; }
.heltest-hoved { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.heltest-hoved .rad-hoved { flex:1; min-width:0; display:grid; gap:3px; }
.heltest-kategori { font-size:12px; color:var(--stein); }
.heltest-rad .tittel { font-weight:500; overflow-wrap:anywhere; }
.heltest-svar { margin:2px 0 0; font-size:14px; line-height:1.55; color:var(--blekk-2); white-space:pre-line; overflow-wrap:anywhere; }
.heltest-kilder { margin:0; font-size:13px; color:var(--stein); overflow-wrap:anywhere; }
.heltest-kilder a { color:var(--blekk-2); }
.heltest-merker { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.heltest-merker .merke svg, .heltest-knapper .merke svg { width:12px; height:12px; }
.heltest-knapper { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; flex:none; max-width:45%; }
.heltest-knapper .merke a { color:inherit; }
.heltest-tom { margin:0; padding:16px; }
.heltest-eget { margin:0; min-width:0; }
.heltest-eget .knapper { flex-wrap:wrap; }
@container heltest (max-width:640px) {
  .heltest-tall { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .heltest-hoved { flex-direction:column; gap:10px; }
  .heltest-knapper { justify-content:flex-start; max-width:none; }
  .heltest-knapper .knapp { height:36px; }
}
.om-svaret summary { list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; cursor:pointer; }
.om-svaret summary::-webkit-details-marker { display:none; }
.om-svaret summary > span:first-child { display:grid; gap:4px; }
.om-svaret summary .pil { width:16px; height:16px; margin-top:2px; color:var(--stein); transition:transform .15s; flex:none; }
.om-svaret[open] summary .pil { transform:rotate(180deg); }
@media (min-width:1100px) { .om-svaret summary { cursor:default; } .om-svaret summary .pil { display:none; } }
.om-svaret h3 { margin:20px 0 8px; }
.om-svaret h3 .svak { font-weight:500; margin-left:6px; }
.om-svaret .tom-liste { margin-top:14px; }
.om-svaret .tom-liste .tom { padding:32px 20px; }
.om-svaret .tips { margin-top:14px; }
.om-svaret .fakta dd { flex-wrap:wrap; justify-content:flex-end; }

/* Samtaler: listen til venstre og samtalen til høyre; under 1000 px erstatter samtalen listen (fra design/prototype/samtaler.html) */
.sam { display:grid; grid-template-columns:340px minmax(0,1fr); gap:16px; height:calc(100vh - 176px); min-height:520px; }
/* In the app the breadcrumbs sit above the heading: the panes get that much less height, so the page does not scroll */
@media (min-width:1000px) { .smuler ~ .sam { height:calc(100vh - 206px); } }
.sam-venstre { display:flex; flex-direction:column; gap:10px; min-height:0; }
.sam-verktoy { display:grid; gap:10px; }
.sam-verktoy .segment { justify-self:start; }
.sam-liste { flex:1; min-height:0; overflow-y:auto; }
.sam-liste .rad { align-items:flex-start; padding:12px 14px; gap:0; }
.sam-liste .rad-hoved { gap:3px; }
.sam-liste .rad-hoved .tittel { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
.rad-linje { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--stein); min-height:22px; }
.rad-linje .merker { display:flex; gap:4px; }
.sam-liste .merke { height:20px; padding:0 7px; font-size:12px; }
.sam-tom { padding:32px 20px; text-align:center; color:var(--stein); }
.sam-flere { display:grid; justify-items:center; padding:10px; border-top:1px solid var(--linje-2); }

.sam-hoyre { background:var(--flate); border:1px solid var(--linje); border-radius:var(--r-kort); min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.sam-topp { padding:14px 20px; border-bottom:1px solid var(--linje); display:grid; gap:8px; }
.sam-topp h2 { font-size:16px; }
.sam-fakta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:13px; color:var(--stein); }
.sam-fakta span { display:inline-flex; align-items:center; gap:5px; }
.sam-fakta svg { width:14px; height:14px; }
.sam-fakta .merke { margin-left:2px; }
/* What the visitor answered when the chat ended */
.sam-evaluering { display:flex; flex-wrap:wrap; gap:2px 16px; font-size:13px; color:var(--stein); }
.sam-evaluering b { font-weight:600; color:var(--blekk); }
.sam-tilbake { display:none; align-items:center; gap:4px; font-size:13px; font-weight:500; color:var(--blekk-2); text-decoration:none; margin-bottom:2px; }
.sam-tilbake svg { width:16px; height:16px; }
.sam-melding { padding:20px; overflow-y:auto; flex:1; display:grid; gap:16px; align-content:start; }

.lead-boks { background:var(--lime-myk); border-radius:var(--r-kort); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; }
.lead-boks .hoved { display:flex; align-items:center; gap:12px; min-width:0; }
.lead-boks .avatar { background:var(--blekk); }
.lead-boks b { display:block; }
.lead-boks .linje { font-size:13px; color:var(--blekk-2); overflow-wrap:anywhere; }
.lead-boks .linje a { color:inherit; }
.lead-boks .sendt { font-size:13px; color:var(--blekk-2); }

/* Meldingene i samtalen: den besøkende til høyre, chatboten til venstre */
.tm { display:grid; gap:4px; max-width:78%; }
.tm .tid { font-size:12px; color:var(--stein); }
.tm.besokende { justify-self:end; justify-items:end; }
.tm.besokende .boble { background:var(--fyll); border-radius:14px 14px 4px 14px; padding:9px 13px; white-space:pre-line; overflow-wrap:anywhere; }
.tm.bot { justify-self:start; max-width:86%; }
.tm.bot .tekst { overflow-wrap:anywhere; }
.tm.bot .tekst p + p, .tm.bot .tekst p + ul, .tm.bot .tekst ul + p { margin-top:8px; }
.tm.bot .tekst ul { margin:0; padding-left:18px; }
.kilder { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:2px; font-size:12px; }
.kilder a, .kilder span { display:inline-flex; align-items:center; gap:4px; color:var(--stein); }
.kilder a:hover { color:var(--blekk); }
.kilder svg { width:12px; height:12px; }
.hvem { font-size:12px; color:var(--stein); }
.skjema-kort { justify-self:start; width:min(380px,100%); border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate-2); padding:14px 16px; display:grid; gap:10px; }
.skjema-kort .topp { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.skjema-kort dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:13px; }
.skjema-kort dt { color:var(--stein); }
.skjema-kort dd { margin:0; overflow-wrap:anywhere; }
.uten-svar-notat { justify-self:start; font-size:13px; color:var(--blekk-2); background:var(--bakgrunn); border-radius:8px; padding:8px 12px; }
/* «Rett dette svaret»: the quiet button under an answer, the line that takes its place, and a dialog that can scroll on a low screen. */
.rett { justify-self:start; margin-left:-10px; }
.rettet { justify-self:start; display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--stein); }
.rettet svg { width:12px; height:12px; flex:none; }
.rettet:focus { outline:none; }
.rett-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
@media (max-width:760px), (pointer:coarse) { .rett .knapp { height:36px; } }

@media (max-width:999px) {
  .sam { display:block; height:auto; min-height:0; }
  .sam-liste { overflow:visible; }
  .sam-hoyre { display:none; border:0; border-radius:0; overflow:visible; }
  .sam.apen .sam-venstre { display:none; }
  .sam.apen .sam-hoyre { display:flex; }
  .sam-tilbake { display:inline-flex; }
  .sam-topp { padding:0 0 12px; }
  .sam-melding { padding:16px 0 0; overflow:visible; }
  .side.apen .sidetopp, .side.apen .smuler { display:none; }
  .tm { max-width:90%; }
  .tm.bot { max-width:100%; }
  .sam-venstre { gap:12px; }
  .sam-liste .rad { padding:12px 14px; }
}

/* Søkefelt med ikon, verktøylinje */
.verktoy { display:flex; gap:12px; margin-bottom:12px; }
.sok { position:relative; }
.sok svg { position:absolute; left:11px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--stein); pointer-events:none; }
.sok .inndata { padding-left:34px; }
.verktoy .sok { flex:1; max-width:360px; }

/* Nøkkel og verdi (bruk på dl.liste) */
.fakta { margin:0; }
.fakta > div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 14px; }
.fakta > div + div { border-top:1px solid var(--linje-2); }
.fakta dt { color:var(--stein); }
.fakta dd { margin:0; display:flex; align-items:center; gap:8px; font-weight:500; text-align:right; }

/* Skjema som lagrer selv: «Lagrer …» i seksjonstoppen, og feilen nederst i seksjonen */
.lagrestatus { font-size:12px; color:var(--stein); white-space:nowrap; }
.lagrefeil { margin-top:16px; align-items:center; }
.lagrefeil > span { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.lagrefeil .knapp { color:var(--feil); }

/* Valgkort: radioknapper med tittel og beskrivelse (container .valg-kort, barn .valg) */
.valg-kort { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.valg-kort .valg { align-items:flex-start; gap:10px; padding:12px 14px; }
.valg-kort .valg input { margin-top:3px; }
.valg-kort .valg > span { display:grid; gap:3px; }
.valg-kort .valg > span > b { display:flex; align-items:center; gap:8px; font-weight:600; }
.valg-kort .valg > span > small { font-size:13px; color:var(--stein); }
/* Med bilde (Chatboble på Utseende): boblen slik den blir, nede til høyre på en flate som nettsiden */
.valg-kort .valg:has(.valg-bilde) { flex-wrap:wrap; align-content:space-between; }
.valg-kort .valg:has(.valg-bilde) > span:not(.valg-bilde) { flex:1; min-width:0; }
.valg-kort .valg > .valg-bilde { flex:1 0 100%; display:flex; justify-content:flex-end; align-items:flex-end; min-height:104px; padding:14px; border-radius:var(--r-felt); background:var(--nettside); overflow:hidden; }
.valg-bilde .sw { zoom:.72; }
.valg-bilde .sw, .boble-rad .sw { min-width:0; max-width:100%; }
.valg-bilde .sw-boble.sw-pille, .boble-rad .sw-boble.sw-pille, .valg-bilde .sw-hilsen { max-width:100%; }
.valg-bilde .sw:has(.sw-kort) { flex:1; }
.valg-bilde .sw-boble.sw-kort { width:100%; }
/* Der kortet er en rund knapp (samme spørring som i design/widget.css) */
@media (max-width:479.98px), (pointer:coarse) and (max-height:520px) {
  .valg-bilde .sw:has(.sw-kort) { flex:none; }
  .valg-bilde .sw-boble.sw-kort { width:56px; }
}
.valg-bilde .sw-hilsen-tekst span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }

/* Innlogging */
.lockup { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.03em; font-size:26px; }
.lockup svg { width:1.15em; height:1.15em; }
.lockup.stor { font-size:34px; }
.logg { width:min(400px,100%); padding:32px; display:block; }
.logg .lockup { margin-bottom:28px; }
.logg h1 { font-size:22px; margin-bottom:8px; }
.logg .skjema { margin-top:20px; }
.logg .knapp { width:100%; height:38px; }
.logg .liten.svak { margin-top:16px; }
.logg.tofaktor { width:min(460px,100%); }
.dialog.tofaktor { width:min(520px,100%); }
.tofaktor .skjema > p { margin:0; }
.tofaktor-qr { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.tofaktor-qr svg { width:148px; height:148px; flex:none; padding:4px; background:#fff; color:#111; border:1px solid var(--linje); border-radius:var(--r-kort); }
.tofaktor-qr > div { flex:1 1 180px; min-width:0; display:grid; gap:8px; }
.tofaktor-qr code { overflow-wrap:anywhere; font-size:13px; }
.sikkerhetskoder { list-style:none; margin:0; padding:14px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:6px 16px; font-family:var(--mono, ui-monospace, monospace); font-size:13px; background:var(--flate-2); border:1px solid var(--linje); border-radius:var(--r-kort); }
.tofaktor-status { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.tofaktor-status .knapper { display:flex; gap:8px; margin-left:auto; }
.rad-knapper { display:grid; gap:8px; margin-top:20px; }
/* Innboks: «Foreslå svar» with nothing new to answer. A plain line under the field, not an error. */
.merknad.sam-beskjed { margin:12px 0 0; }
.feilboks { display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:8px; background:var(--feil-myk); color:var(--feil); font-size:14px; }
.feilboks svg { width:16px; height:16px; flex:none; margin-top:3px; }
/* I rutenett gir gap avstanden allerede (.logg er en blokk) */
.skjema > .feilboks, .dialog > .feilboks, .kort:not(.logg) > .feilboks { margin-top:0; }
/* Under sidetoppen (en side som beholdt dataene da en oppdatering feilet) og under en seksjonsoverskrift */
.sidetopp + .feilboks { margin:0 0 24px; }
.seksjon-topp + .feilboks { margin-top:0; }
.feilboks + .kort-rutenett, .feilboks + .liste { margin-top:12px; }
@media (max-width:480px) { .logg { padding:24px; } }

/* Nummererte steg */
.steg { list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:s; }
.steg li { display:grid; grid-template-columns:28px 1fr; gap:12px; counter-increment:s; }
.steg li::before { content:counter(s); width:24px; height:24px; border-radius:50%; background:var(--bakgrunn); border:1px solid var(--linje); display:grid; place-items:center; font-size:12px; font-weight:600; }
.steg b { font-weight:500; }
.steg p { color:var(--stein); font-size:13px; }

/* Skjema i en seksjon */
.inline-skjema { background:var(--flate-2); border:1px solid var(--linje); border-radius:var(--r-kort); padding:16px; margin-bottom:12px; }
.inline-skjema .knapper { display:flex; gap:8px; flex-wrap:wrap; }
/* The shortcut for «Lagre og legg til en til», quietly under the buttons. Not on touch, where there is no keyboard to use. */
.inline-skjema .hjelp-tast { margin:-6px 0 0; font-size:12px; color:var(--stein); }
@media (max-width:999px), (pointer:coarse) { .inline-skjema .hjelp-tast { display:none; } }

/* Statuslinje under ingress */
.status-linje { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--stein); font-size:13px; margin-top:10px; }
.status-linje > :empty { display:none; }

/* Sidemeny */
.sidemeny { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:14px; padding:14px 12px; overflow-y:auto; }
.sm-logo { display:flex; align-items:center; gap:8px; padding:4px 8px; text-decoration:none; color:var(--blekk); font-weight:600; font-size:18px; letter-spacing:-.03em; }
.sm-logo svg { width:22px; height:22px; }
.velger { position:relative; }
.velger > button { width:100%; min-height:40px; display:flex; align-items:center; gap:9px; padding:7px 9px; background:var(--flate); border:1px solid var(--linje); border-radius:8px; cursor:pointer; text-align:left; }
.velger > button:hover { border-color:var(--linje-felt); }
.velger > button .navn { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.velger > button svg { width:16px; height:16px; color:var(--stein); flex:none; }
.velger-meny { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--flate-flyt); border:1px solid var(--linje); border-radius:10px; box-shadow:var(--skygge); padding:6px; display:none; z-index:30; }
.velger.apen .velger-meny { display:grid; gap:2px; }
.velger-meny .inndata { height:32px; margin-bottom:4px; font-size:13px; }
.velger-meny a { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:6px; text-decoration:none; font-size:14px; }
.velger-meny a:hover { background:var(--bakgrunn); }
.velger-meny a > svg { width:16px; height:16px; margin:0 4px; flex:none; color:var(--stein); }
.velger-meny a.valgt { font-weight:600; }
.velger-meny a.valgt::after { content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--blekk); }
.velger-meny hr { border:0; border-top:1px solid var(--linje-2); margin:4px 0; }
.velger-liste { display:grid; gap:2px; max-height:min(320px,50vh); overflow-y:auto; }
.velger-meny p { padding:7px 8px; font-size:13px; color:var(--stein); }
.sidemeny .feilboks { margin-top:0; font-size:13px; }
.sm-gruppe { display:grid; gap:1px; }
.sm-tittel { display:flex; align-items:center; justify-content:space-between; padding:6px 10px 4px; font-size:12px; font-weight:500; color:var(--stein); }
.sm-tittel button { border:0; background:none; color:var(--stein); cursor:pointer; padding:0; display:flex; align-items:center; gap:3px; font-size:12px; }
.sm-tittel button:hover { color:var(--blekk); }
.sm-tittel svg { width:14px; height:14px; }
.sm-lenke { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; text-decoration:none; color:var(--blekk-2); font-size:14px; }
.sm-lenke svg { width:16px; height:16px; flex:none; color:var(--stein); }
.sm-lenke:hover { background:rgba(var(--tone),.04); color:var(--blekk); }
.sm-lenke[aria-current="page"], .sm-lenke[aria-current="true"] { background:var(--flate-hevet); color:var(--blekk); font-weight:600; box-shadow:0 1px 2px rgba(var(--skyggetone),.06), inset 3px 0 0 var(--lime); }
.sm-lenke[aria-current="page"] svg, .sm-lenke[aria-current="true"] svg { color:var(--blekk); }
.sm-fot { margin-top:auto; display:flex; align-items:center; gap:9px; padding:8px 8px 2px; border-top:1px solid var(--linje); position:sticky; bottom:0; background:var(--bakgrunn); }
.sm-fot .navn { flex:1; min-width:0; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Mobil */
@media (max-width:900px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .innhold { margin:0; border:0; border-radius:0; }
  :root { --kant:16px; }
  .side { padding:20px var(--kant) 48px; }
  .mobiltopp { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20; height:52px; padding:0 12px; background:var(--flate); border-bottom:1px solid var(--linje); }
  .mobiltopp .tittel { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobiltopp button { width:36px; height:36px; display:grid; place-items:center; border:0; background:none; border-radius:8px; cursor:pointer; }
  .mobiltopp svg { width:20px; height:20px; }
  /* The user's picture on the right: opens Profil */
  .mobiltopp-profil { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; text-decoration:none; flex:none; }
  .mobiltopp-profil .avatar { width:28px; height:28px; border-radius:7px; font-size:12px; }
  .mobiltopp-profil[aria-current="page"] .avatar { box-shadow:0 0 0 2px var(--flate), 0 0 0 4px var(--lime); }
  /* The drawer is as tall as what is visible (dvh: above Safari's toolbar, not under it), keeps the profile row at the
     bottom clear of the home bar, and scrolls on a short screen. */
  .sidemeny { position:fixed; inset:0 auto 0 0; width:min(300px,86vw); height:100vh; height:100dvh; padding-top:max(14px, env(safe-area-inset-top)); padding-bottom:max(14px, env(safe-area-inset-bottom)); padding-left:max(12px, env(safe-area-inset-left)); overscroll-behavior:contain; z-index:35; background:var(--bakgrunn); transform:translateX(-100%); transition:transform .2s, box-shadow .2s; }
  .app.meny-apen .sidemeny { transform:none; box-shadow:var(--skygge); }
  .meny-bak { position:fixed; inset:0; background:var(--slor); z-index:34; display:none; }
  .app.meny-apen .meny-bak { display:block; }
  .sidetopp .handlinger { width:100%; }
  .rad { flex-wrap:wrap; }
  .rad-meta { width:100%; justify-content:flex-start; padding-left:0; flex-wrap:wrap; }
  .rad > .ikon + .rad-hoved + .rad-meta, .rad > .avatar + .rad-hoved + .rad-meta, .rad-lenke:has(> .ikon, > .avatar) + .rad-meta { padding-left:46px; }
  .rad-meta.fast { width:auto; margin-left:auto; padding-left:0 !important; }
  .rad-meta:has(> .kol) { gap:16px; }
  .rad-meta .kol { text-align:left; min-width:0; }
  .verktoy .sok { max-width:none; }
}

/* Kunnskap: søket i sidene (verktøyene fra leads), treff markert, og en ny side toner inn mens nettstedet leses */
.sidesok { margin-bottom:24px; }
.sidesok .tom { padding:28px 24px 8px; }
mark.treff { background:var(--lime-myk); color:inherit; border-radius:2px; }
.rad.ny { animation:inn .4s ease-out; }
/* Kunnskap: hvert nettsted er en del som åpnes og lukkes, med navn, antall sider og lesingen i toppen */
.nettstedsdel { border-top:1px solid var(--linje-2); padding:14px 0; scroll-margin-top:24px; }
.nettstedsdel:last-child { border-bottom:1px solid var(--linje-2); }
.nettstedsdel .seksjon-topp { align-items:flex-start; margin-bottom:0; }
.nettstedsdel.apen .seksjon-topp { margin-bottom:12px; }
.nettstedsdel h3 button { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0; border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--blekk); text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.nettstedsdel h3 button svg { width:16px; height:16px; flex:none; color:var(--stein); transform:rotate(-90deg); transition:transform .15s; }
.nettstedsdel.apen h3 button svg { transform:none; }
.nettstedsdel h3[tabindex="-1"]:focus { outline:none; }
.nettstedsdel .seksjon-topp .status-linje { padding-left:24px; }
/* Kunnskap: redigeringsskjema inne i en liste, svar på to linjer, feil ved opplasting */
.liste > .inline-skjema { background:var(--flate-2); border:0; border-radius:0; margin:0; }
.liste > .inline-skjema:not(:first-child), .liste > .inline-skjema + .rad { border-top:1px solid var(--linje-2); }
.klem-2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.feilboks.avvist { margin:0 0 12px; }
.feilboks.avvist > span { display:grid; gap:6px; justify-items:start; }
.feilboks.avvist ul { margin:0; padding-left:18px; }
h2[tabindex="-1"]:focus { outline:none; }

/* Booking: the settings form between the sections, the week plan, the calendars' switch and the free times */
fieldset.ramme-los { border:0; padding:0; margin:0; min-width:0; }
.seksjon + .booking-innstillinger, .booking-innstillinger + .seksjon { margin-top:36px; }
.ukeplan { display:grid; }
.ukedag { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start; padding:10px 0; }
.ukedag + .ukedag { border-top:1px solid var(--linje-2); }
.ukedag > b { font-weight:500; padding-top:7px; }
.tidsrom-liste { display:grid; gap:6px; justify-items:start; }
.tidsrom { display:flex; align-items:center; gap:8px; }
.tidsrom .nedtrekk { width:96px; font-variant-numeric:tabular-nums; }
.ukedag .stengt { color:var(--stein); padding-top:7px; }
.ukedag .feilmelding { font-size:12px; color:var(--feil); }
.ukedag.ugyldig .nedtrekk { border-color:var(--feil); }
.kal-tittel { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kal-bruk { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--blekk-2); }
/* Valgene for en kalender på egen linje under navnet, så navn og adresse får plass ved siden av ikonet */
.rad.kal-rad { flex-wrap:wrap; row-gap:10px; }
.rad.kal-rad > .rad-meta { width:100%; padding-left:46px; flex-wrap:wrap; }
.kal-far { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--blekk-2); }
.kal-far .valg { padding:4px 10px; font-size:13px; }
.kal-standard { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kal-standard .valg { padding:4px 10px; font-size:13px; }
/* «Ansvarsområder»: a whole line in the row's controls, on the Booking and the Live chat page */
.ansvar-felt { flex-basis:100%; min-width:0; }
.ansvar-lese { flex-basis:100%; font-size:13px; overflow-wrap:anywhere; }
.rad.ansvar-rad > .rad-meta { padding-left:0; }
.ledige { display:grid; gap:14px; }
.ledig-dag { display:grid; gap:6px; }
.ledig-dag b { font-weight:500; }
.ledige-tider { display:flex; flex-wrap:wrap; gap:6px; }
.ledige-tider .merke { font-variant-numeric:tabular-nums; }
.ledige .knapper, .inline-skjema.skjema .knapper { display:flex; gap:8px; }
.sperring-skjema { margin:12px 0 0; }
.seksjon .liste + .merknad, .seksjon .merknad + .liste { margin-top:12px; }
@media (max-width:600px) {
  .ukedag { grid-template-columns:minmax(0,1fr); gap:6px; }
  .ukedag > b { padding-top:0; }
}

/* Live chat (del 3): the inbox, the conversation with a person, Profil and the chatbot's Live chat page.
   From the approved sketch, docs/skisser/live-chat/css/app-tillegg.css. */

/* Sidebar: Innboks with the number waiting, and the profile link in the footer */
.sm-lenke .sm-antall { margin-left:auto; height:20px; min-width:20px; justify-content:center; padding:0 6px; font-variant-numeric:tabular-nums; }
.sm-profil { flex:1; min-width:0; display:flex; align-items:center; gap:9px; margin:-4px 0 -4px -4px; padding:4px; border-radius:7px; text-decoration:none; color:inherit; }
.sm-profil:hover { background:rgba(var(--tone),.04); }
.sm-profil[aria-current="page"] .navn { font-weight:600; }
.sm-fot .sm-profil + .knapp { flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.avatar.bilde { background:var(--bakgrunn); overflow:hidden; }

/* Innboks: «Tilgjengelig for chat» at the top */
.tilgjengelig { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate); }
.tilgjengelig .tekst { display:grid; gap:1px; }
.tilgjengelig b { font-weight:500; }
.tilgjengelig .hjelp { font-size:12px; color:var(--stein); }
.tilgjengelig .bryter { margin-left:auto; }
/* «Månedsrapport på e-post» on the customer's Innstillinger, and A-JOB's preview of it. */
.manedsrapport-innhold { display:grid; gap:14px; max-width:620px; }
.manedsrapport-eiere { display:grid; gap:6px; }
.manedsrapport-eiere .valg { display:flex; align-items:flex-start; }
.manedsrapport-eiere .valg input { margin-top:3px; }
.manedsrapport-eiere .svak { display:inline-block; font-size:12px; overflow-wrap:anywhere; }
.manedsrapport .merknad.advarsel { display:flex; gap:8px; align-items:flex-start; margin:8px 0 0; }
.manedsrapport .merknad.advarsel svg { width:16px; height:16px; flex:none; margin-top:2px; }
.dialog.rapport-dialog { width:min(680px,100%); max-height:calc(100dvh - 32px); overflow:auto; }
.rapport-emne { margin:0; font-size:14px; overflow-wrap:anywhere; }
.rapport-ramme { width:100%; height:min(62vh,620px); border:1px solid var(--linje); border-radius:var(--r-kort); background:#FFFFFF; }
.bryter-liste { display:grid; gap:8px; }
/* On a phone's home screen the page reaches the edge: keep what sits at the bottom above the home bar */
.kvittering { bottom:max(24px, calc(env(safe-area-inset-bottom) + 12px)); }
/* «Du får ikke varsel på noen enhet ennå» under the switch */
.tilgjengelig-boks { display:grid; gap:8px; max-width:420px; }
.tilgjengelig-varsel { margin:0; }
.tilgjengelig-varsel.i-rad { flex-basis:100%; margin:0; padding:8px 12px; font-size:13px; }
.tilgjengelig-boks > .feilboks { margin-top:0; }
@media (max-width:900px) { .sidetopp .tilgjengelig-boks { width:100%; max-width:none; } }
.innboks-merknad { margin:0 0 16px; }
/* «Legg Svarly på Hjem-skjermen»: the three steps in a row under the sentence, and «Skjul» to the right */
.hjemskjerm { flex-wrap:wrap; align-items:flex-start; }
.hjemskjerm > div { flex:1 1 220px; min-width:0; display:grid; gap:6px; }
.hjemskjerm-steg { margin:0; padding-left:18px; display:grid; gap:2px; color:var(--blekk-2); }
.varsler-av { flex-wrap:wrap; align-items:center; }
.varsler-av > span { flex:1 1 220px; min-width:0; }
.varsler-av-knapper { display:flex; flex-wrap:wrap; gap:8px; }
.innboks-valg { margin:0 0 16px; }
/* «2 venter i andre chatboter» and «Vis alle», between the inbox's picker and the groups */
.merknad.innboks-skjulte { margin:0; max-width:none; align-items:center; flex-wrap:wrap; }
.innboks-skjulte > span { flex:1 1 160px; min-width:0; }

/* The groups in the list: Venter, Pågår, Med boten nå */
.inn-grupper { flex:1; min-height:0; overflow-y:auto; display:grid; gap:20px; align-content:start; padding-bottom:4px; }
.inn-gruppe h2 { display:flex; align-items:baseline; gap:8px; font-size:14px; margin:0 0 8px; }
.inn-gruppe h2 .antall { font-size:13px; font-weight:500; color:var(--stein); }
.inn-gruppe .liste .rad { align-items:flex-start; padding:12px 14px; gap:0; }
.inn-gruppe .rad-hoved { gap:3px; }
.inn-gruppe .rad-hoved .tittel { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
.inn-gruppe .merke { height:20px; padding:0 7px; font-size:12px; }
.inn-gruppe .rad-linje > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inn-tom { padding:14px 16px; font-size:13px; color:var(--stein); }
.rad-status { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; color:var(--stein); }
.rad-status .hvem-har { color:var(--blekk-2); }
.venter-rad { box-shadow:inset 3px 0 0 var(--lime); }

/* Whether the visitor is on the page now */
.tilstede { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
/* The page the visitor is on can be long (a campaign address): one line, cut at the end, the whole of it in the title */
.sam-topp { grid-template-columns:minmax(0,1fr); min-width:0; }
.sam-fakta .sam-sted { min-width:0; max-width:100%; }
.sam-sted .sti { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tilstede::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gronn); flex:none; }
.tilstede.borte::before { background:transparent; box-shadow:inset 0 0 0 1.5px var(--stein-2); }

/* The conversation: heading with actions, the AI summary, system lines, the composer */
.sam-tittelrad { display:flex; align-items:flex-start; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.sam-tittelrad h2 { flex:1 1 260px; min-width:0; }
.sam-tittelrad .handlinger { display:flex; gap:8px; flex-wrap:wrap; }
.sammendrag { border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate-2); padding:14px 16px; display:grid; gap:10px; }
.sammendrag .topp { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sammendrag h3 { font-size:14px; }
.sammendrag .tekst { display:grid; gap:6px; font-size:13px; overflow-wrap:anywhere; }
.sammendrag.tom { border-style:dashed; color:var(--stein); font-size:13px; }
.sammendrag.tom p { margin:0; }

/* Leads (docs/skisser/leads): search, filters and the count */
.lead-verktoy { display:grid; gap:10px; margin-bottom:12px; }
.lead-filtre { display:flex; flex-wrap:wrap; gap:10px; }
.lead-filtre .sok { flex:1 1 280px; }
.lead-filtre .nedtrekk { flex:0 0 172px; width:172px; }
.lead-under { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.lead-under .segment button { display:inline-flex; gap:5px; }
.segment .tall { font-weight:400; color:var(--stein); font-variant-numeric:tabular-nums; }
/* A tab per chatbot on Leads: the segment in one line, sideways when the chatbots do not fit, and the number of new
   leads as in the menu */
.lead-faner { display:flex; width:fit-content; max-width:100%; overflow-x:auto; margin-bottom:12px; }
.lead-faner button { display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap; }
.lead-faner button:focus-visible { outline-offset:-2px; }
.lead-faner .merke { height:18px; min-width:18px; justify-content:center; padding:0 6px; font-variant-numeric:tabular-nums; }
.lead-antall { font-size:13px; color:var(--stein); }
/* The list: whole rows are links, columns line up from row to row */
.lead-kolonner, .lead-rad { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.15fr) 150px 84px 84px; grid-template-areas:"person bedrift signal status tid"; gap:0 14px; align-items:center; }
.lead-kolonner { padding:8px 16px; font-size:12px; font-weight:500; color:var(--stein); background:var(--flate-2); border-bottom:1px solid var(--linje-2); }
.lead-kolonner .h { text-align:right; }
.lead-rad { padding:10px 16px; min-height:60px; }
.l-person { grid-area:person; }
.l-bedrift { grid-area:bedrift; }
.l-signal { grid-area:signal; display:grid; justify-items:start; gap:3px; }
.l-status { grid-area:status; }
.l-tid { grid-area:tid; font-size:13px; color:var(--stein); text-align:right; white-space:nowrap; }
.l-person, .l-bedrift { min-width:0; display:grid; gap:1px; }
.l-person .tittel { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.l-person .under, .l-bedrift .under { font-size:13px; color:var(--stein); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; min-width:0; }
.l-firma { display:flex; align-items:center; gap:6px; min-width:0; }
.l-firma .navn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.l-firma .navn.svak { color:var(--stein); }
.l-firma .merke, .l-bedrift .merke, .l-signal .merke, .l-status .merke { height:20px; padding:0 7px; }
.l-firma .merke, .l-bedrift .merke { flex:none; }
.l-mote { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--blekk-2); white-space:nowrap; }
.l-mote svg { width:12px; height:12px; color:var(--stein); }
.l-grunn { font-size:12px; line-height:1.35; color:var(--stein); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.lead-flere { display:grid; justify-items:center; padding:12px; border-top:1px solid var(--linje-2); }
.lead-ingen { padding:32px 20px; display:grid; justify-items:center; gap:10px; color:var(--stein); text-align:center; }
/* One lead: reading on the left, the things you act on at the right */
.lead-side .sidetopp { margin-bottom:16px; }
.lead-side .sidetopp .ingress { max-width:none; }
.lead-side .sam-fakta { margin-top:6px; }
.lead-side > .merknad.advarsel { margin:0 0 16px; max-width:none; }
.lead-spalter { display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:16px; align-items:start; }
.lead-venstre, .lead-hoyre { display:grid; gap:16px; min-width:0; }
.lead-kontakt { justify-content:flex-start; gap:8px 24px; }
.lead-kontakt a, .lead-kontakt .mangler { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.lead-kontakt a { color:var(--blekk); text-underline-offset:3px; }
.lead-kontakt .mangler { color:var(--blekk-2); font-weight:400; }
.lead-kontakt svg { width:16px; height:16px; flex:none; color:var(--blekk-2); }
.lead-side .sammendrag h3 { line-height:1.35; letter-spacing:-.01em; }
.lead-side .sammendrag.tom { display:grid; gap:2px; }
.o-slett { display:none; }
.status-kort .segment { display:flex; }
.status-kort .segment button { flex:1; }
.status-kort .hvem-endret { font-size:12px; color:var(--stein); }
.kort-rad { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mote-kort .tekst { font-weight:500; }
.samtale-kort .sam-melding { padding:6px 0 0; overflow:visible; }
.dialog .merknad.advarsel { margin:0; }
/* Bigger targets on a phone, and the lead in one column: contact, status, summary, meeting, company, details, conversation */
@media (max-width:999px) {
  .lead-spalter { grid-template-columns:minmax(0,1fr); }
  .lead-venstre, .lead-hoyre { display:contents; }
  .o-kontakt { order:1; } .o-status { order:2; } .o-sammendrag { order:3; } .o-mote { order:4; } .o-bedrift { order:5; } .o-detaljer { order:6; } .o-samtale { order:7; }
  .lead-side .smuler, .lead-side .sidetopp .handlinger { display:none; }
  .o-slett { display:block; order:8; margin-top:8px; }
  .lead-side .sam-tilbake { margin-bottom:10px; }
}
@media (max-width:900px) {
  .lead-kolonner { display:none; }
  .lead-filtre .sok { flex-basis:100%; }
  .lead-filtre .nedtrekk { flex:1 1 120px; width:auto; min-width:0; }
  .lead-under .segment { display:flex; width:100%; }
  .lead-under .segment button { flex:1; justify-content:center; padding:8px 4px; }
  .lead-rad { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"tid status" "person person" "bedrift bedrift" "signal signal"; gap:4px 12px; padding:12px 14px; }
  .l-tid { text-align:left; font-size:12px; }
  .l-person .under, .l-bedrift .under { white-space:normal; overflow-wrap:anywhere; flex-wrap:wrap; }
  .l-signal { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
  .l-signal:empty { display:none; }
  .status-kort .segment button { padding:9px 4px; }
  .lead-kontakt { display:grid; gap:10px; }
  .kort-rad .knapp { height:36px; }
}
.passer-best { display:block; margin:0; font-size:13px; font-weight:500; color:var(--blekk-2); overflow-wrap:anywhere; }
.sam-system { justify-self:center; text-align:center; font-size:12px; color:var(--stein); max-width:90%; }
.sam-system b { color:var(--blekk-2); font-weight:500; }
.tm.agent .hvem { display:inline-flex; align-items:center; gap:6px; }
.tm.agent .hvem .avatar { width:18px; height:18px; border-radius:5px; font-size:9px; }
.tm.agent .tekst { white-space:pre-line; }
.tm.ny { animation:inn .25s ease-out; }
/* An answer on its way, and one that did not get there */
.tm.ventende { opacity:.65; }
.tm.ventende.feilet { opacity:1; }
.tm.ventende.feilet .hvem { color:var(--feil); }
.ventende-valg { display:flex; gap:4px; margin-top:2px; }
.sam-nye { justify-self:center; }
@keyframes inn { from { opacity:0; transform:translateY(4px); } }
.sam-kobler { display:flex; align-items:center; gap:8px; padding:8px 20px; background:var(--bakgrunn); border-bottom:1px solid var(--linje); font-size:13px; color:var(--blekk-2); }
.sam-kobler .snurr { width:12px; height:12px; border-radius:50%; border:2px solid var(--blekk-2); border-color:var(--blekk-2) var(--blekk-2) transparent transparent; animation:snurr .7s linear infinite; flex:none; }
.inn-kobler { margin:0 0 16px; border:1px solid var(--linje); border-radius:var(--r-kort); }
.sam-tom-valg { margin:auto; }

.sam-svar { border-top:1px solid var(--linje); padding:12px 16px 14px; display:grid; gap:8px; background:var(--flate); }
.sam-ta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sam-ta p { color:var(--blekk-2); font-size:13px; }
.sam-ta .knapp { min-width:120px; }
.sam-skriv { display:flex; align-items:flex-end; gap:8px; }
.sam-skriv .tekstfelt { min-height:38px; max-height:140px; padding:8px 11px; resize:none; }
.sam-skriv .knapp { height:38px; flex:none; }
/* On a phone the actions sit with the composer, so they stay in reach while the conversation scrolls */
.sam-handlinger-mobil { display:none; gap:4px; margin:-4px 0 0 -8px; }
.sam-tatt { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-kort); background:var(--bakgrunn); }
.sam-tatt b { font-weight:600; }
.sam-tatt p { font-size:13px; color:var(--stein); }
.sam-tatt:focus-visible { outline-offset:0; }
@media (max-width:999px) {
  .sam-svar { position:sticky; bottom:0; z-index:4; margin:16px -16px 0; padding:10px 16px max(12px, env(safe-area-inset-bottom)); box-shadow:0 -6px 14px -12px rgba(var(--skyggetone),.25); }
  .sam-ta .knapp { flex:1; }
  .side.apen { padding-bottom:0; }
  .sam-tittelrad .handlinger { display:none; }
  .sam-handlinger-mobil { display:flex; }
  .sam-kobler { position:sticky; top:0; z-index:5; margin:0 -16px; padding:8px 16px; }
  .send-tekst { display:none; }
  .sam-skriv .knapp { width:38px; padding:0; }
}
@media (max-width:900px) { .sam-kobler { top:52px; } }

/* Profil: the picture, the steps for an iPhone, the devices */
.profilbilde { width:44px; height:44px; border-radius:50%; background:#CE4B0D; color:#fff; display:grid; place-items:center; font-size:16px; font-weight:600; flex:none; overflow:hidden; }
.profilbilde img { width:100%; height:100%; object-fit:cover; display:block; }
.slipp.liggende .tekst { display:grid; gap:2px; color:var(--stein); font-size:13px; }
.slipp.liggende .tekst strong { font-size:14px; }
.slipp .knapper { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:480px) { .slipp.liggende { grid-template-columns:auto minmax(0,1fr); } .slipp.liggende .knapper { grid-column:1 / -1; } }
.iphone-steg { margin-top:4px; }
.merknad.advarsel + .skjema, .skjema + .merknad { margin-top:16px; }
.enheter { margin-top:20px; display:grid; gap:8px; }

/* Live chat: why the visitor does or does not see the button now, the status list under it, and the suggestions */
.fakta .merke { font-weight:500; }
.live-status { display:grid; gap:4px; margin-top:20px; padding:12px 14px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate-2); }
.live-status-topp { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.live-status-topp b { font-weight:400; color:var(--stein); font-size:13px; }
.live-status-tekst { font-weight:500; overflow-wrap:anywhere; }
.live-fakta { margin-top:12px; }
.forslag-liste { display:grid; gap:8px; margin-top:12px; }
.merknad.forslag { margin:0; max-width:none; align-items:center; flex-wrap:wrap; padding:10px 14px; border:1px dashed var(--linje-felt); border-radius:var(--r-kort); background:var(--flate-2); color:var(--blekk-2); }
.merknad.forslag > span { flex:1 1 220px; min-width:0; }
#hvem-kan-svare > .merknad.advarsel { margin:0; max-width:none; }
#hvem-kan-svare > .liten { margin-top:12px; }
/* «Personer og tilgang» on the customer's Innstillinger: one row per person, the name editable, and the facts beside */
.personer { margin-top:36px; }
.personer .inline-skjema { margin-bottom:16px; }
.personliste { list-style:none; margin:0; padding:0; }
.person { display:grid; gap:6px; padding:12px 16px; }
.person + .person { border-top:1px solid var(--linje-2); }
.person-rad { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; }
.person-rad .avatar { width:32px; height:32px; border-radius:8px; font-size:13px; }
.person-hoved { display:grid; gap:1px; min-width:0; }
.person-hoved .tittel { font-weight:600; overflow-wrap:anywhere; }
.person-hoved .under { font-size:13px; color:var(--stein); overflow-wrap:anywhere; }
.person-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.person-meta .nedtrekk { width:auto; min-width:96px; height:32px; color:var(--blekk); }
.person-hjelpetekst { margin:0 0 0 44px; }
.person-mer { margin-left:44px; }
.person-mer > summary { cursor:pointer; width:fit-content; font-size:13px; color:var(--stein); }
.person-detaljer { display:grid; gap:14px; padding-top:10px; }
.person-topp { display:grid; gap:2px; justify-items:start; }
.person-topp .inndata.person-navn { width:min(320px,100%); height:32px; font-weight:600; font-size:15px; }
.person-topp .feilmelding { font-size:12px; color:var(--feil); }
.person-felt { margin:0; display:grid; grid-template-columns:minmax(150px,280px) minmax(140px,auto) minmax(0,1fr); gap:12px 24px; }
.person-felt > div { display:grid; gap:6px; align-content:start; min-width:0; }
.person-felt dt { font-size:12px; color:var(--stein); }
.person-felt dd { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:13px; min-height:30px; }
/* Its own colour: a grey choice you can change would look disabled */
.person-felt .nedtrekk { width:auto; min-width:150px; height:32px; color:var(--blekk); }
.person-knapper { display:inline-flex; flex-wrap:wrap; gap:4px; }
.person .ansvar-felt { max-width:560px; }
.person-valg { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; }
.person-valg .nedtrekk.person-rolle { width:auto; min-width:110px; align-self:center; }
.personer-hjelp { margin-top:12px; }
@media (max-width:760px) {
  .person { padding:14px; }
  .person-rad { grid-template-columns:auto minmax(0,1fr); }
  .person-meta { grid-column:1 / -1; justify-content:flex-start; }
  .person-hjelpetekst, .person-mer { margin-left:0; }
  .person-felt { grid-template-columns:minmax(0,1fr); }
}
.seksjon + .live-apningstider { margin-top:36px; }

/* A switch that cannot be used now (push before the app is on the home screen, the button with live chat off) */
.bryter:disabled { opacity:.45; cursor:default; }

/* iPhone zooms in on a field whose text is smaller than 16 px, and the page (the send button with it) slides out of view.
   On touch and narrow screens every field you type in is 16 px. Zooming itself stays allowed (no maximum-scale). */
@media (max-width:760px), (pointer:coarse) {
  input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  textarea, select, [contenteditable]:not([contenteditable="false"]) { font-size:16px !important; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* Internal notes: stand apart from everything the visitor can see. Dashed and on the whole width, with who wrote it. */
.tm.notat { justify-self:stretch; max-width:none; padding:8px 12px; border:1px dashed var(--notat-kant); border-radius:var(--r-kort); background:var(--lime-myk); }
.tm.notat .hvem { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--blekk-2); }
.tm.notat .hvem svg { width:13px; height:13px; }
.tm.notat p { white-space:pre-line; overflow-wrap:anywhere; }
.sam-notat-apne { display:flex; margin:-2px 0 -4px -8px; }
.sam-notat { display:grid; gap:6px; padding:10px 12px; border:1px dashed var(--notat-kant); border-radius:var(--r-kort); background:var(--lime-myk); }
.sam-notat .tekstfelt { resize:none; max-height:140px; }
.sam-notat .knapper { display:flex; justify-content:flex-end; gap:6px; margin:0; }
.sam-skriv-under { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sam-skriv-valg { display:flex; align-items:center; gap:2px; margin-right:-8px; flex:none; }
.sam-skriv-valg .snarvei { margin-left:2px; padding:0 5px; border:1px solid var(--linje); border-radius:5px; font:inherit; font-size:11px; line-height:18px; color:var(--stein); background:var(--flate); }
@media (max-width:999px), (pointer:coarse) { .sam-skriv-valg .snarvei { display:none; } }
@media (max-width:480px) { .sam-skriv-under { flex-wrap:wrap; row-gap:0; } .sam-skriv-valg { margin-left:auto; } }

/* A draft from «Foreslå svar» in the field: marked until it is sent or thrown away, with the sources it came from. */
.sam-utkast { display:grid; gap:6px; padding:8px 10px 8px 12px; border:1px dashed var(--stein-2); border-radius:var(--r-kort); background:var(--lime-myk); }
.sam-utkast .topp { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sam-utkast .topp .mini { flex:1 1 200px; min-width:0; color:var(--blekk-2); }
.sam-utkast .topp .knapp { margin:-4px -4px -4px 0; }
.sam-utkast .kilder { margin:0; }
.sam-utkast .kilder .svak { color:var(--stein); }
.sam-utkast > p { margin:0; }
.sam-utkast-tekst { max-height:120px; overflow:auto; padding:6px 8px; border-radius:6px; background:var(--flate); white-space:pre-line; overflow-wrap:anywhere; font-size:13px; }
.sam-skriv.utkast .tekstfelt { border-style:dashed; border-color:var(--stein-2); background:var(--flate-2); }

/* Ready-made answers over the field to write in. */
.svarvalg { padding:4px; display:grid; gap:2px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate); }
.svarvalg ul { margin:0; padding:0; list-style:none; display:grid; gap:2px; max-height:220px; overflow:auto; }
.svarvalg p { padding:6px 8px; }
.svarvalg-bunn { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 0 0 8px; }
.svarvalg li { display:grid; gap:1px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.svarvalg li b { font-weight:600; font-size:13px; }
.svarvalg li span { font-size:12px; color:var(--stein); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svarvalg li.aktiv, .svarvalg li:hover { background:var(--lime-myk); }
.ferdig-rad .under { display:block; white-space:pre-line; overflow-wrap:anywhere; }

/* «Personer» under Kunnskap: the person catalog (src/app/sider/kunnskap/Personkatalog.tsx). */
.personkatalog .rad-hoved .tittel { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.personkatalog .rad-hoved .under { display:grid; gap:2px; }
.person-kilde a { display:inline-flex; align-items:center; gap:4px; color:inherit; text-decoration:underline; text-decoration-color:var(--linje); text-underline-offset:2px; }
.person-kilde svg { width:12px; height:12px; flex:none; }
.person-kontakt { display:flex; flex-wrap:wrap; gap:2px 14px; color:var(--blekk-2); }
.person-kontakt > span { display:inline-flex; align-items:center; gap:5px; min-width:0; overflow-wrap:anywhere; }
.person-kontakt svg { width:13px; height:13px; flex:none; }
.personkatalog-merknad { margin-top:8px; padding:8px 12px; border-radius:var(--r-felt); background:var(--flate-2); border:1px solid var(--linje); font-size:13px; max-width:62ch; }
.personkatalog-tatt-ut { margin-top:24px; }
.personkatalog-tatt-ut h3 { font-size:15px; margin:0 0 2px; }
.personkatalog-tatt-ut .liste { margin-top:10px; }
.personkatalog .vis-flere { display:flex; justify-content:center; margin-top:12px; }

/* A4 «Produkter» on Kunnskap (sider/kunnskap/Produkter.tsx): the connection in a box, the switch, «Prøv et filter» and the products with a thumbnail and the variants folded. */
.produkt-tilkobling { max-width:640px; }
.produkt-forklaring { margin:0; color:var(--stein); font-size:13px; max-width:62ch; }
.produktkobling { display:grid; gap:10px; padding:14px 16px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate); }
.produktkobling-topp { display:flex; align-items:flex-start; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.produktkobling-hvem { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere; }
.produktkobling-topp .knapper { display:flex; gap:8px; flex-wrap:wrap; }
.produktkobling .status-linje { margin-top:0; }
.produkt-telling, .produkt-merknad { margin:0; }
.produkt-mva { max-width:240px; }
.produkt-ajob { display:grid; gap:10px; padding-top:12px; border-top:1px dashed var(--linje); }
.produkt-ajob h4 { font-size:13px; font-weight:500; color:var(--stein); letter-spacing:0; }
.produkt-ajob p { margin:0; }
.produkt-ajob-felt, .produkt-prov-skjema { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.produkt-ajob-felt .felt, .produkt-prov-skjema .felt { flex:1 1 260px; }
.produkt-ajob-felt > .knapp, .produkt-prov-skjema > .knapp { margin-top:22px; }
.produkter > .tilgjengelig, .produkt-pakke { margin-top:12px; }
.produkt-pakke p { margin:0 0 6px; }
.produkt-prov, .produkt-liste-del { margin-top:24px; display:grid; gap:8px; }
.produkt-prov h3, .produkt-liste-del h3 { font-size:15px; }
.produkt-prov > p, .produkt-prov-svar p { margin:0; }
.produkt-prov-svar { display:grid; gap:8px; }
.produkt-filter { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.produkt-liste-del .lead-verktoy { margin-bottom:0; }
.produkt-liste-del .vis-flere { display:flex; justify-content:center; margin-top:4px; }
.produkt-rad { align-items:flex-start; }
.produkt-bilde { width:44px; height:44px; flex:none; border-radius:8px; background:var(--bakgrunn); overflow:hidden; }
.produkt-bilde img { width:100%; height:100%; object-fit:cover; display:block; }
.produkt-pris s { color:var(--stein); }
.produkt-pris b { font-weight:500; color:var(--blekk); }
.produkt-varianter { margin-top:4px; font-size:13px; }
.produkt-varianter summary { width:fit-content; cursor:pointer; color:var(--blekk-2); }
.produkt-varianter ul { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; }
.produkt-varianter li { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; color:var(--blekk-2); }
.produkt-varianter .merke { height:20px; padding:0 7px; }
.produkt-rad .rad-meta { align-self:center; }
@media (max-width:900px) { .produkt-bilde + .rad-hoved + .rad-meta { padding-left:58px; } .produkt-rad .rad-meta { align-self:auto; } }

/* A4: the product cards under a bot answer (ui/Produktkort.tsx), in Samtaler, the inbox and the test chat. */
.produktkort-liste { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; width:100%; }
.produktkort { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:10px; border:1px solid var(--linje); border-radius:var(--r-kort); background:var(--flate); }
.produktkort img { width:56px; height:56px; flex:none; border-radius:8px; object-fit:cover; background:var(--bakgrunn); }
.produktkort-tekst { display:grid; gap:2px; min-width:0; font-size:13px; }
.produktkort-navn { font-weight:500; overflow-wrap:anywhere; }
.produktkort-pris { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; }
.produktkort-pris s { color:var(--stein); }
.produktkort-lager { font-size:12px; color:var(--stein); }
.produktkort a { justify-self:start; color:var(--blekk); font-weight:500; }
.produktkort-liste.i-testchat { margin:0; grid-template-columns:1fr; }

/* «Utseende i appen» in Profil: the three choices side by side, under each other on a phone. */
.tema-valg .valg-kort, .valg-kort.tema-valg { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:600px) { .tema-valg .valg-kort, .valg-kort.tema-valg { grid-template-columns:minmax(0,1fr); } }

/* «A-JOB-brukere»: the people at the customers, one small list per customer under its name. */
.brukergrupper { display:grid; gap:20px; margin-top:4px; }
.brukergruppe h3 { display:flex; align-items:baseline; gap:8px; margin:0 0 8px; font-size:14px; }
.brukergruppe h3 a { text-decoration:none; }
.brukergruppe h3 a:hover { text-decoration:underline; text-underline-offset:2px; }
.brukergruppe h3 .antall { font-size:13px; font-weight:500; color:var(--stein); }