/*
 * Kundesiden på konto.appgarten.no (del 2a). Samme look som admin og mockupen
 * (docs/specs/kundeside/lerret/project/kunde.css på bit/kundeside-mockup). Fargene og skriftene kommer fra
 * felles/tokens.css. Ingen innebygde stiler (CSP style-src 'self').
 */
:root {
  --k-tekst: var(--farge-marine); --k-brod: var(--farge-skifer); --k-dempet: var(--farge-skifer-lys);
  --k-ikon: var(--farge-skifer-lys); --k-linje: var(--farge-linje); --k-linje-sterk: var(--farge-linje-sterk);
  --k-feltkant: #8B8579; --k-hvit: var(--farge-hvit); --k-lysbla: var(--farge-lysbla); --k-krem: var(--farge-krem);
  --k-rod: var(--farge-honerod);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.k { font-family: var(--skrift); font-size: 15px; line-height: 1.5; color: var(--k-brod); background: var(--k-krem);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; min-height: 100vh; }
.k a { color: var(--k-tekst); text-underline-offset: 3px; }
.k a:hover { color: var(--farge-marine-mork); }
.k h1 { font-family: var(--skrift-display); font-weight: 900; text-transform: uppercase; font-size: 34px; line-height: 1.05;
  letter-spacing: .01em; color: var(--k-tekst); margin: 0; }
.k h2 { font-size: 18px; font-weight: 700; color: var(--k-tekst); margin: 0; line-height: 1.3; }
.k h3 { font-size: 15px; font-weight: 700; color: var(--k-tekst); margin: 0; line-height: 1.35; }
.k p { margin: 0; }
.k :focus-visible { outline: 2px solid var(--farge-fokus); outline-offset: 2px; }
.k-dempet { color: var(--k-dempet); font-size: 13px; }
.k-mono { font-family: var(--skrift-mono); }
.k-svg-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.k-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-hopp { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 12px; border-radius: 6px; background: var(--k-tekst); color: #fff !important; }
.k-hopp:focus { top: 8px; }
.k-feil { color: var(--status-rod-ikon); font-weight: 600; }
.k-ok { color: var(--status-gronn-ikon); font-weight: 600; }

/* --- Ramme og meny (som admin, #489) ------------------------------------------------------------------------------ */
.k-ramme { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.k-meny { background: var(--k-hvit); border-right: 1px solid var(--k-linje); padding: 14px 10px; display: flex; flex-direction: column;
  gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.k-meny-innhold { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.k-merke-topp { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; }
.k-merke-topp > svg, .k-enkel-merke > svg { width: 28px; height: 28px; flex: none; }
/* Bare ordet «Appgarten», ikke tallet ved meldingsikonet (bug 33). */
.k-merke-topp > b, .k-enkel-merke > b { font-family: var(--skrift-display); font-weight: 900; text-transform: uppercase; font-size: 19px; letter-spacing: .01em; color: var(--k-tekst); }
.k-mliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.k-mliste + .k-mliste { border-top: 1px solid var(--k-linje); margin-top: 8px; padding-top: 8px; }
.k .k-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 6px; color: var(--k-brod);
  font-family: inherit; font-size: 14px; font-weight: 500; text-decoration: none; border: 0; background: none; cursor: pointer; text-align: left; }
.k .k-mi:hover { background: var(--k-krem); color: var(--k-tekst); }
.k .k-mi svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--k-ikon); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.k .k-mi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k .k-mi[aria-current="page"] { background: var(--k-lysbla); color: var(--k-tekst); font-weight: 700; }
.k .k-mi[aria-current="page"] svg { stroke: var(--k-tekst); }
.k-mliste form { margin: 0; }
.k-mi > .varselmerke { margin-left: auto; }
.k-mi-merke { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--status-gronn-flate); color: var(--k-tekst);
  font-size: 11px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.k-meg { margin-top: auto; border-top: 1px solid var(--k-linje); padding-top: 10px; position: relative; }
.k-meg-detaljer > summary { list-style: none; }
.k-meg-detaljer > summary::-webkit-details-marker { display: none; }
.k-meg-knapp { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 8px; border-radius: 6px;
  color: var(--k-tekst); cursor: pointer; }
.k-meg-knapp:hover { background: var(--k-krem); }
/* Bug 32: siden man står på, ligger i navnemenyen */
.k-meg-detaljer:not([open]) .k-meg-knapp.k-meg-aktiv { background: var(--k-lysbla); }
.k-meg-knapp b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-meg-knapp small { display: block; font-size: 12px; color: var(--k-dempet); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.k-meg-detaljer[open] .k-meg-knapp .k-svg-i { transform: rotate(180deg); }
.k-meg-meny { position: absolute; bottom: 60px; left: 0; right: 0; background: var(--k-hvit); border: 1px solid var(--k-linje);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(34, 50, 74, .14); padding: 6px; }
.k-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--k-lysbla); color: var(--k-tekst); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.k-ikonknapp { width: 44px; height: 44px; display: none; align-items: center; justify-content: center; border: 0; background: none;
  color: var(--k-tekst); border-radius: 6px; position: relative; cursor: pointer; }
.k-ikonknapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k-ikonknapp { --varselmerke-ring: var(--k-hvit); }
.k-mobil-lukk { display: none; }

/* --- Innhold ------------------------------------------------------------------------------------------------------- */
.k-innhold { padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 24px; min-width: 0; max-width: 84rem; }
.k-innhold:focus { outline: none; }
.k-hode { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.k-under { color: var(--k-dempet); font-size: 14px; margin-top: 6px !important; }
.k-kort { background: var(--k-hvit); border: 1px solid var(--k-linje); border-radius: 10px; box-shadow: 0 1px 2px rgba(34, 50, 74, .06); }
.k-kort-hode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--k-linje); flex-wrap: wrap; }
.k-kort-hode h2.k-liten, h2.k-liten { font-size: 15px; }
.k-kort-kropp { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.k-kort-kropp.k-luft { gap: 16px; }
.k-kort-flex { display: flex; flex-direction: column; }
.k-kort-flex .k-kort-kropp { flex: 1; }
.k-rad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.k-rad-mellom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.k-kol { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.k-kol-liten { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.k-rutenett-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.k-rutenett-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.k-to-kol { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.k-tekst-14 { font-size: 14px; }
.k-sterk { color: var(--k-tekst); font-weight: 700; }
.k-stort-tall { font-family: var(--skrift-mono); font-size: 20px; color: var(--k-tekst); font-weight: 600; }
.k-liste-ren { list-style: none; margin: 0; padding: 0; }
.k-mt-auto { margin-top: auto; }

/* Merker: alltid ikon og ord */
.k-mk { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 700;
  color: var(--k-tekst); white-space: nowrap; align-self: flex-start; }
.k-mk-liten { height: 24px; padding: 0 10px; font-size: 12px; }
.k-mk-oppe { background: var(--status-gronn-flate); }
.k-mk-oppe::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--status-gronn-ikon); box-shadow: 0 0 0 4px rgba(46, 107, 58, .18); }
.k-mk-nede { background: var(--status-rod-flate); }
.k-mk-nede::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--status-rod-ikon); }
.k-mk-gronn { background: var(--status-gronn-flate); }
.k-mk-gul { background: var(--status-gul-flate); }
.k-mk-rod { background: var(--status-rod-flate); }
.k-mk-gra { background: var(--status-gra-flate); }
.k-ik { font-weight: 800; font-size: 13px; line-height: 1; }
.k-ik-gronn { color: var(--status-gronn-ikon); } .k-ik-gul { color: var(--status-gul-ikon); } .k-ik-rod { color: var(--status-rod-ikon); } .k-ik-gra { color: var(--k-dempet); }

/* Oppetid: tre høyder, så delvis nede og nede skilles uten farge */
.k-stripe { display: grid; align-items: end; height: 32px; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.k-stripe-liten { height: 24px; gap: 2px; }
.k-s { display: block; height: 50%; background: var(--status-gronn-ikon); border-radius: 2px; }
.k-s-gul { height: 75%; background: var(--status-gul-ikon); }
.k-s-rod { height: 100%; background: var(--k-rod); }
.k-s-ingen { height: 50%; background: var(--k-hvit); border: 1px solid var(--k-feltkant); }
.k-akse { display: flex; justify-content: space-between; font-size: 12px; color: var(--k-dempet); margin-top: 4px; }
.k-prosent { font-family: var(--skrift-mono); font-weight: 600; font-size: 28px; color: var(--k-tekst); line-height: 1; }

/* De fire gruppene */
.k-gruppe { background: var(--k-hvit); border: 1px solid var(--k-linje); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.k-gruppe-se { border-left: 3px solid var(--status-gul-ikon); }
.k-gruppe-topp { display: flex; align-items: center; gap: 10px; }
.k-gruppe-topp h3 { flex: 1; }
.k-g-ikon { width: 28px; height: 28px; border-radius: 8px; background: var(--k-lysbla); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--k-tekst); }
.k-g-linjer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.k-g-linjer li { display: flex; gap: 8px; align-items: baseline; }
.k-g-linjer li span:last-child { margin-left: auto; color: var(--k-dempet); font-size: 13px; white-space: nowrap; }
.k-fire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.k-fire li { display: flex; gap: 8px; align-items: baseline; }
.k-fire li span:nth-child(2) { flex: 1; }

/* Velkomst (marine flate, som Min drift) */
.k-velkommen { background: var(--k-tekst); color: var(--k-krem); border-radius: 10px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.k-velkommen-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 14rem; }
.k-velkommen b { font-size: 20px; color: #fff; }
.k-velkommen p { color: var(--k-linje); font-size: 14px; }
.k-puls { width: 14px; height: 14px; border-radius: 50%; background: #5FD08C; box-shadow: 0 0 0 6px rgba(95, 208, 140, .25); flex: none; }
.k-puls-nede { background: #F28B74; box-shadow: 0 0 0 6px rgba(242, 139, 116, .25); }
.k-puls-venter { background: var(--k-linje-sterk); box-shadow: 0 0 0 6px rgba(207, 202, 192, .25); }

/* Knapper */
.k-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 6px; border: 0;
  background: var(--k-rod); color: #fff !important; font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.k-knapp:hover { background: var(--farge-honerod-hover, #A8331B); }
.k-knapp-sek { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 6px;
  border: 1.5px solid var(--k-tekst); background: var(--k-hvit); color: var(--k-tekst) !important; font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.k-lenke { color: var(--k-tekst); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; }
.k-lenke-liten { font-size: 13px; }

/* Lister med rader (meldinger, det som kommer) */
.k-liste-rad { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--k-linje); text-decoration: none; color: var(--k-brod) !important; }
.k-liste-rad:last-child { border-bottom: 0; }
.k-liste-rad-venter { border-left: 3px solid var(--k-rod); }
.k-liste-rad-topp { display: flex; justify-content: space-between; gap: 8px; }
.k-liste-rad-topp b { color: var(--k-tekst); font-size: 14px; }
.k-liste-rad .k-mk { margin-top: 4px; }
.k-las { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--k-dempet); }
.k-tom { padding: 16px; color: var(--k-dempet); font-size: 14px; }

/* Tabeller (innstillinger og brukere) */
.k-tabell { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-tabell th { text-align: left; font-size: 13px; font-weight: 700; color: var(--k-tekst); padding: 10px 16px; border-bottom: 1.5px solid var(--k-linje-sterk); }
.k-tabell td { padding: 10px 16px; border-bottom: 1px solid var(--k-linje); vertical-align: top; }
.k-tabell-rull { overflow-x: auto; }
.k-felt { width: 100%; min-height: 40px; border: 1px solid var(--k-feltkant); border-radius: 6px; padding: 8px 12px; font-family: inherit; font-size: 15px;
  color: var(--k-tekst); background: var(--k-hvit); }
.k-etikett { display: block; font-size: 14px; font-weight: 700; color: var(--k-tekst); margin-bottom: 4px; }
.k-skjema { display: flex; flex-direction: column; gap: 12px; max-width: 32rem; }
.k-skjema-linje { display: inline; margin: 0; }

/* Sider uten skallet (innlogging og feil) */
.k-enkel { max-width: 34rem; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.k-enkel-merke { display: flex; align-items: center; gap: 8px; }

/* --- Smal meny på PC (bug 43, Anders 9.11): bare ikoner, som i admin (admin.css «Smal meny»). kunde/smal-meny.js ----- */
/* Knappen er liten og rund på kanten av menyen. Fast plassert, fordi menyen ruller (overflow) og ville klippet den. */
.k-meny-knapp { display: none; }
@media (min-width: 48rem) {
  .k-meny-knapp:not([hidden]) {
    position: fixed; top: 20px; left: 220px; z-index: 20; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 1px solid var(--k-linje); border-radius: 50%;
    background: var(--k-hvit); color: var(--k-brod); cursor: pointer;
  }
  .k-meny-knapp:hover { background: var(--k-krem); color: var(--k-tekst); }
  .k-meny-knapp:focus-visible { outline: 2px solid var(--k-tekst); outline-offset: 2px; }
  .k-meny-knapp svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .k-meny-knapp[aria-expanded="true"] .k-meny-pil-ut,
  .k-meny-knapp[aria-expanded="false"] .k-meny-pil-inn { display: none; }

  .k-smal .k-meny-knapp:not([hidden]) { left: 52px; }
  .k-smal .k-ramme { grid-template-columns: 64px minmax(0, 1fr); }
  /* Smal: menyen er kort, så den ruller ikke, og den lille navnemenyen kan stå ved siden av. */
  .k-smal .k-meny { padding: 14px 4px; align-items: center; overflow: visible; }
  .k-smal .k-merke-topp { justify-content: center; padding: 4px 0 16px; }
  .k-smal .k-merke-topp > b { display: none; }
  .k-smal .k-meny-innhold { align-items: center; width: 100%; }
  /* Navnemenyen (k-meg-meny) åpner seg ved siden av med ordene, så den er ikke med her. */
  .k-smal .k-mliste:not(.k-meg-meny) { align-items: center; width: 100%; }
  /* Smal: en kort linje midt mellom gruppene. */
  .k-smal .k-mliste + .k-mliste { position: relative; border-top: 0; }
  .k-smal .k-mliste + .k-mliste::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; margin-left: -14px; border-top: 1px solid var(--k-linje);
  }
  .k-smal .k-mliste:not(.k-meg-meny) .k-mi { width: 44px; min-height: 44px; padding: 0; justify-content: center; position: relative; }
  /* Bare ikoner: ordene står for skjermlesere og i title (tooltip). */
  .k-smal .k-mliste:not(.k-meg-meny) .k-mi > span, .k-smal .k-mi-merke, .k-smal .k-meg-knapp > b {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Varselmerket (#578) på ikonet, som i admin. */
  .k-smal .k-mliste:not(.k-meg-meny) .k-mi > .varselmerke { position: absolute; margin: 0; top: calc(50% - 17px); left: calc(50% - 1px); box-shadow: 0 0 0 2px var(--k-hvit); }
  /* Navnet: bare avataren. Den lille menyen åpner seg ved siden av, nederst. */
  .k-smal .k-meg { position: static; width: 100%; display: flex; justify-content: center; }
  .k-smal .k-meg-knapp { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .k-smal .k-meg-knapp .k-svg-i { display: none; }
  .k-smal .k-meg-meny { left: calc(100% + 8px); right: auto; bottom: 12px; width: 232px; }
}

/* --- Mobil (under 48rem): topplinje med meldinger og menyknapp, menyen som liste under (kunde-meny.js) ------------- */
@media (max-width: 63.99rem) {
  .k-to-kol { grid-template-columns: minmax(0, 1fr); }
  .k-rutenett-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .k-ramme { display: block; }
  .k-meny { position: sticky; top: 0; z-index: 10; height: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--k-linje); overflow: visible; }
  .k-merke-topp { height: 60px; padding: 0 6px 0 16px; gap: 4px; }
  .k-merke-topp > b { margin-left: 4px; flex: 1; }
  .k-ikonknapp { display: inline-flex; }
  .k-ikonknapp[hidden] { display: none; }
  .k-meny-innhold { padding: 12px 16px 16px; }
  .k-meny-js .k-meny-innhold { display: none; }
  .k-meny-js .k-meny-innhold.k-apen { display: flex; position: fixed; top: var(--meny-topp, 60px); left: 0; right: 0; bottom: 0; background: var(--k-hvit); overflow-y: auto; }
  .k-meny-innhold .k-mi { min-height: 44px; font-size: 15px; }
  .k-meny-innhold .k-mi svg { width: 18px; height: 18px; }
  .k-meny-apen { overflow: hidden; }
  .k-meny-apen .k-mobil-apne { display: none; }
  .k-meny-apen .k-mobil-lukk { display: block; }
  .k-meny-apen .k-mobilknapp { background: var(--k-lysbla); }
  .k-meg-meny { position: static; border: 0; box-shadow: none; padding: 2px 0 0; }
  /* Bug 32: på mobil folder navnemenyen seg ut nedover, så pilen peker ned når den er lukket */
  .k-meg-knapp .k-svg-i { transform: rotate(180deg); }
  .k-meg-detaljer[open] .k-meg-knapp .k-svg-i { transform: none; }
  .k-innhold { padding: 20px 16px 32px; gap: 16px; }
  .k h1 { font-size: 28px; }
  .k-rutenett-2, .k-rutenett-3 { grid-template-columns: minmax(0, 1fr); }
  .k-velkommen { padding: 16px; }
  .k-velkommen .k-knapp { width: 100%; }
}

/* Tellerne for Appsjekk (rød, gul, grønn) */
.k-telle { border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.k-telle b { font-family: var(--skrift-mono); font-size: 28px; color: var(--k-tekst); line-height: 1.1; }
.k-telle-rod { background: var(--status-rod-flate); } .k-telle-gul { background: var(--status-gul-flate); } .k-telle-gronn { background: var(--status-gronn-flate); }
.k-las svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.k-kort-ny { border-left: 3px solid var(--status-gronn-ikon); }
.k-rapport-rad .k-rad { gap: 16px; }

/* Tidslinje (mockupen C) */
.k-statusrad { display: flex; gap: 12px; flex-wrap: wrap; }
.k-statusrad a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; text-decoration: none; }
.k-tl { list-style: none; margin: 0; padding: 0 16px 8px; }
.k-tl li { display: grid; grid-template-columns: 72px 20px minmax(0, 1fr); gap: 12px; position: relative; padding: 12px 0; }
.k-tl li::before { content: ""; position: absolute; left: 93px; top: 0; bottom: 0; width: 2px; background: var(--k-linje); }
.k-tl-se { background: var(--k-krem); margin: 0 -16px; padding: 12px 16px !important; }
.k-tl-tid { font-size: 13px; color: var(--k-dempet); text-align: right; padding-top: 2px; }
.k-tl-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.k-tl-tekst .k-lenke { min-height: 32px; }
.k-prikk { width: 20px; height: 20px; border-radius: 50%; background: var(--k-hvit); border: 2px solid var(--k-linje-sterk); position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.k-pr-ok { border-color: var(--status-gronn-ikon); color: var(--status-gronn-ikon); }
.k-pr-se { border-color: var(--status-gul-ikon); background: var(--status-gul-flate); color: var(--status-gul-ikon); }
.k-pr-nede { border-color: var(--status-rod-ikon); background: var(--status-rod-flate); color: var(--status-rod-ikon); }
.k-pr-info { border-color: var(--k-dempet); color: var(--k-dempet); }
@media (max-width: 47.99rem) {
  .k-tl li { grid-template-columns: 56px 20px minmax(0, 1fr); gap: 8px; }
  .k-tl li::before { left: 73px; }
}

/* Meldinger (mockupen Meldinger-pc og -mobil) */
.k-meldinger { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.k-meldinger:not(.k-meldinger-traad) { grid-template-columns: minmax(0, 40rem); }
.k-trader-topp { padding: 20px 16px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--k-linje); }
.k-trader-topp .k-knapp-sek { align-self: flex-start; min-height: 36px; }
.k-liste-rad-valgt { background: var(--k-lysbla); }
.k-prikk-ulest { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-rod); margin-right: 6px; vertical-align: middle; }
.k-traad { display: flex; flex-direction: column; min-width: 0; }
.k-traad-hode { padding: 16px 24px; border-bottom: 1px solid var(--k-linje); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.k-tilbake { display: none; }
.k-bobler { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.k-boble { max-width: 34rem; padding: 12px 14px; border-radius: 14px; font-size: 15px; }
.k-boble-oss { background: var(--k-hvit); border: 1px solid var(--k-linje); border-bottom-left-radius: 4px; align-self: flex-start; }
.k-boble-kunde { background: var(--k-lysbla); border-bottom-right-radius: 4px; align-self: flex-end; }
.k-avsender { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--k-tekst); margin-bottom: 4px !important; }
.k-avsender .k-dempet { font-weight: 500; }
.k-boble-tekst { overflow-wrap: anywhere; }
.k-svar { padding: 16px 24px 24px; border-top: 1px solid var(--k-linje); display: flex; flex-direction: column; gap: 10px; }
.k-svar.k-skjema { max-width: none; border-top: 0; }
.k-felt-stor { min-height: 96px; resize: vertical; }
@media (max-width: 63.99rem) {
  .k-meldinger, .k-meldinger:not(.k-meldinger-traad) { grid-template-columns: minmax(0, 1fr); }
  .k-meldinger-traad .k-trader { display: none; }
  .k-tilbake { display: inline-flex; min-height: 32px; }
}
@media (max-width: 47.99rem) {
  .k-bobler, .k-svar, .k-traad-hode { padding-left: 16px; padding-right: 16px; }
}

/* --- Innloggingen i nettsidens look (lerretet for salg av drift, Logginn-pc og -mobil) ------------------------- */
.ki-kropp { background: var(--farge-krem); }
.ki-topp { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 48px; background: var(--farge-krem); border-bottom: 1px solid var(--k-linje); }
.ki-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ki-logo svg { width: 40px; height: 40px; }
.ki-logo span { font-family: var(--skrift-display); font-weight: 900; font-size: 30px; text-transform: uppercase; color: var(--k-tekst); }
.ki-meny { display: flex; align-items: center; gap: 28px; }
.ki-tm { font-family: var(--skrift-display); font-weight: 800; font-size: 21px; text-transform: uppercase; text-decoration: none; color: var(--k-tekst) !important; }
.ki-min-side { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 2px solid var(--k-tekst); border-radius: 999px;
  background: var(--k-lysbla); font-family: var(--skrift-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--k-tekst) !important; text-decoration: none; white-space: nowrap; }
.ki-min-side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ki-hoved { max-width: 1240px; margin: 0 auto; padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.ki-hoved:focus { outline: none; }
.ki-venstre { display: flex; flex-direction: column; gap: 18px; }
.ki-venstre h1 { font-size: 48px; line-height: .97; }
.ki-kort { background: var(--k-hvit); border-radius: 20px; box-shadow: 0 20px 50px rgba(34, 50, 74, .14); padding: 24px 28px; width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 10px; }
.ki-skjema { margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Knappene følger leverandørenes retningslinjer: hvit flate, tynn grå kant, logo til venstre i original farge. */
.ki-lev { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 14px; border-radius: 6px; background: #FFFFFF;
  font-size: 16px; font-weight: 600; color: #1F1F1F; cursor: pointer; text-align: left; }
.ki-lev-google { border: 1px solid #747775; font-family: Roboto, Arial, sans-serif; font-weight: 500; }
.ki-lev-microsoft { border: 1px solid #8C8C8C; font-family: "Segoe UI", Arial, sans-serif; color: #5E5E5E; }
.ki-lev-github { border: 1px solid #747775; font-family: -apple-system, "Segoe UI", Arial, sans-serif; color: #1F2328; }
.ki-lev svg { width: 20px; height: 20px; flex: none; }
.ki-lev span { flex: 1; text-align: center; margin-right: 32px; }
.ki-eller { display: flex; align-items: center; gap: 12px; color: var(--k-dempet); font-size: 15px; margin: 4px 0 !important; }
.ki-eller::before, .ki-eller::after { content: ""; flex: 1; height: 1px; background: var(--k-linje-sterk); }
.ki-etikett { font-weight: 700; color: var(--k-tekst); font-size: 15px; }
.ki-felt { width: 100%; height: 44px; border: 1.5px solid var(--k-feltkant); border-radius: 6px; padding: 0 14px; font-family: inherit; font-size: 17px; color: var(--k-tekst); background: var(--k-hvit); }
.ki-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 14px;
  border: 2px solid var(--k-rod); background: var(--k-rod); color: #fff !important; font-family: var(--skrift-display); font-weight: 800; font-size: 21px;
  text-transform: uppercase; text-decoration: none; cursor: pointer; margin-top: 4px; }
.ki-knapp-sek { background: var(--k-hvit); color: var(--k-tekst) !important; border-color: var(--k-tekst); }
.ki-liten { font-size: 14px; color: var(--k-dempet); }
/* Ny hos oss? og «Vi fant ingen kundeside» (Anders 8.11, lerretet «Nettsiden: prøv drift gratis»). */
.ki-ny { width: 100%; max-width: 460px; border: 1.5px dashed var(--k-linje-sterk); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.ki-ny h2, .ki-h2 { margin: 0; font-family: var(--skrift-display); font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--k-tekst); }
.ki-ingen .ki-h2 { font-size: 34px; }
.ki-ny p, .ki-ingen p { margin: 0; }
.ki-ny p { font-size: 15px; }
.ki-steg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--k-tekst); }
.ki-steg li { display: flex; gap: 10px; align-items: baseline; }
.ki-steg b { font-family: var(--skrift-mono); font-size: 13px; color: var(--k-rod); }
.ki-knapp-liten { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 19px; align-self: flex-start; }
.ki-ingen > .ki-knapp { align-self: flex-start; }
.ki-plante { display: flex; justify-content: center; align-items: flex-end; }
/* Bug 6 (8.11): planten og «Ny hos oss?» i høyre kolonne, så innloggingen får plass på én skjerm (1280×800). */
.ki-hoyre { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ki-hoyre:has(.ki-ny) .ki-plante svg { width: 240px; }
.ki-hoyre .ki-ny { padding: 18px 22px; gap: 10px; }
.ki-plante svg { width: 380px; height: auto; max-width: 100%; }
.ki-plante svg .blekk { fill: none; stroke: var(--farge-marine); stroke-linecap: round; stroke-linejoin: round; }
.ki-plante svg .blekk.krem { fill: var(--farge-krem); }
.ki-plante svg .blekk.rod { stroke: var(--farge-honerod); }
.ki-plante svg .f-marine { fill: var(--farge-marine); } .ki-plante svg .f-rod { fill: var(--farge-honerod); } .ki-plante svg .f-krem { fill: var(--farge-krem); }
.ki-plante svg .s-marine { stroke: var(--farge-marine); } .ki-plante svg .s-krem { stroke: var(--farge-krem); }
/* I skallet (Innstillinger: legg til innlogging) står knappene smalere. */
.k-innhold .ki-skjema { max-width: 460px; }
@media (max-width: 63.99rem) {
  .ki-tm { display: none; }
  .ki-topp { padding: 10px 16px; }
  .ki-hoved { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px 40px; }
  /* Bug 7 (8.11): alt midtstilt med like marger. Planten øverst, «Ny hos oss?» nederst. */
  .ki-hoyre { display: contents; }
  .ki-plante { order: -1; }
  .ki-hoyre .ki-ny { order: 1; }
  .ki-plante svg, .ki-hoyre:has(.ki-ny) .ki-plante svg { width: 180px; }
  .ki-hoved { justify-items: center; }
  .ki-venstre { width: 100%; max-width: 460px; }
  .ki-venstre h1 { font-size: 44px; text-align: center; }
  .ki-kort { padding: 24px 20px; }
}
.k-bruker-rad .k-rad { margin-top: 8px; gap: 8px; }
.k-bruker-rad .k-knapp-sek { min-height: 36px; }

/* Kundeflyten 1.3: velkomsten første gang */
.k-vk-side { max-width: 760px; margin: 24px auto; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 28px; align-items: end; }
.k-vk-tekst { display: flex; flex-direction: column; gap: 16px; }
.k-vk-tekst h1 { font-size: 40px; }
.k-vk-tekst > p { font-size: 16px; }
.k-vk-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--k-tekst); }
.k-vk-fakta { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 12px; font-size: 14px; padding-top: 12px; border-top: 1px solid var(--k-linje); }
.k-vk-fakta dt { color: var(--k-dempet); }
.k-vk-fakta dd { margin: 0; font-weight: 700; color: var(--k-tekst); overflow-wrap: anywhere; }
.k-vk-plante svg { width: 170px; }
@media (max-width: 47.99rem) {
  .k-vk-side { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; margin: 0; }
  .k-vk-plante { order: -1; }
  .k-vk-plante svg { width: 120px; }
  .k-vk-tekst h1 { font-size: 32px; }
}

/* Kundeflyten: den diskrete linjen om drift nederst (1.8 og 1.10) */
.k-diskret { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--k-brod); padding: 10px 14px; border: 1px dashed var(--k-linje-sterk); border-radius: 10px; }
.k-diskret svg { width: 24px; height: 30px; flex: none; }
.k-diskret a { font-weight: 700; }
.k-teller { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.k-teller b { font-family: var(--skrift-display); font-size: 44px; color: var(--k-tekst); line-height: 1; }

/* Bug 14 (8.11): navnet på velkomsten og under Innstillinger */
.k-vk-skjema { display: flex; flex-direction: column; gap: 16px; }
.k-vk-fakta dd .k-felt { font-weight: 400; max-width: 320px; }
.k-vk-fakta dt label { color: var(--k-dempet); }
.k-navn-skjema .k-rad { flex-wrap: wrap; }
.k-navn-skjema .k-felt { flex: 1 1 240px; max-width: 360px; }

/* Punkt 24 (8.11): «Neste: … · Meldinger: n ulest →» som én tynn linje under velkomsten */
.k-neste-linje { margin: -8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--k-dempet); }
.k-neste-linje b { color: var(--k-tekst); font-weight: 700; }
/* Bug 25 (8.11): «Neste steg» med teksten til venstre og knappen under */
.k-neste-steg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.k-neste-steg p { margin: 0; }

/* Bug 30 (9.11): Appsjekk-rapporten i kundesidens look (kunde/gamle/rapport.html) */
.k-rapport { display: flex; flex-direction: column; gap: 16px; }
.k-rapport .k-hode { align-items: flex-start; }
.k-rapport-tall { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.k-rapport-tall b { font-weight: 800; }
/* Bug 42 (Anders 9.11, variant B): Akutte funn over fanene, fanene fra admin (felles/faner.css), og til høyre prisen,
   som står fast, og faktaboksen. På mobil står prisen fast nederst. */
.k-rapport-akutt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px;
  background: var(--status-rod-flate); border: 1px solid var(--status-rod-ikon); }
.k-rapport-akutt > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--status-rod-ikon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-rapport-akutt-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k-rapport-akutt h2 { font-size: 15px; }
.k-rapport-akutt ul { margin: 0; padding-left: 18px; color: var(--k-tekst); }
.k-rapport-akutt > .k-lenke { align-self: center; white-space: nowrap; }
.k-rapport-ramme { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.k-rapport-hoved { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.k-rapport-hoved .fanepanel { display: flex; flex-direction: column; gap: 16px; }
.k-rapport-hoved .fanepanel[hidden] { display: none; }
/* «Om Appsjekk» står etter «Det som er bra», som i malen. Når fanene er i bruk, står den nederst. */
.k-rapport-om { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--k-linje); }
.k-rapport-om h2 { font-size: 15px; }
.k-rapport-hoved:has(> .faner:not([hidden])) .k-rapport-om { order: 99; }
.k-rapport-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.k-rapport-pris { padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.k-rapport-pris-tall { display: flex; flex-direction: column; gap: 4px; }
.k-rapport-stort { font-family: var(--skrift-display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--k-tekst); margin: 0; }
.k-rapport-fakta { margin: 0; display: flex; flex-direction: column; }
.k-rapport-fakta > div { padding: 10px 20px; border-top: 1px solid var(--k-linje); }
.k-rapport-fakta > div:first-child { border-top: 0; }
.k-rapport-fakta dt { font-size: 12px; font-weight: 700; color: var(--k-dempet); }
.k-rapport-fakta dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--k-tekst); overflow-wrap: anywhere; }
.k-rapport-seksjon { font-size: 18px; margin: 8px 0 0; }
/* Resultat: de ti punktene som rader, med nummer, funn, farge og pris til høyre. */
.k-punktrader { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.k-punktrad { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px 112px; gap: 14px; align-items: start; padding: 14px 16px; }
.k-punktrad:target, .k-punktrad:focus { outline: 2px solid var(--k-tekst); outline-offset: 2px; }
.k-punktrad > .k-mk { justify-self: start; }
.k-rapport-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--k-lysbla); color: var(--k-tekst); font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.k-punktrad-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.k-punktrad-tekst h3 { font-size: 15px; }
.k-punktrad-pris { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 14px; color: var(--k-tekst); }
.k-punktrad-pris small { font-size: 12px; color: var(--k-dempet); }
.k-rapport-deler { gap: 0; }
.k-rapport-avsnitt { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--k-linje); }
.k-rapport-avsnitt:first-child { border-top: 0; padding-top: 0; }
.k-rapport-mer summary { cursor: pointer; font-weight: 700; color: var(--k-tekst); font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.k-rapport-del .k-kort-kropp h3 { margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.k-rapport-valg fieldset { border: 0; margin: 0; padding: 0; }
.k-rapport-valg legend { padding: 0; margin-bottom: 4px; color: var(--k-tekst); }
.k-rapport-prisrad { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--k-linje); }
.k-rapport-prisrad input { width: 20px; height: 20px; margin: 0; accent-color: var(--k-rod); }
.k-rapport-sum { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 16px; color: var(--k-tekst); }
.k-rapport-kvittering { background: var(--status-gronn-flate); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 63.99rem) {
  .k-rapport-ramme { grid-template-columns: minmax(0, 1fr); }
  .k-rapport-side { position: static; }
  .k-punktrad { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; }
  .k-punktrad > .k-mk { grid-column: 3; grid-row: 1; justify-self: end; }
  .k-punktrad-pris { grid-column: 3; grid-row: 2; }
  .k-rapport-nr { grid-column: 1; grid-row: 1; }
  .k-punktrad-tekst { grid-column: 2; grid-row: 1 / span 2; }
  .k-rapport-prisrad { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .k-rapport-prisrad .k-mk { display: none; }
}
@media (max-width: 47.99rem) {
  .k-rapport-akutt { flex-wrap: wrap; }
  .k-rapport-akutt > .k-lenke { flex-basis: 100%; padding-left: 34px; align-self: flex-start; }
  /* Mobil: prisen og knappen står fast nederst. Plassen under rapporten gjør at ingenting blir liggende bak. */
  .k-rapport-med-pris { padding-bottom: 88px; }
  .k-rapport-pris { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; border-width: 1px 0 0;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 -2px 8px rgba(34, 50, 74, .08); }
  .k-rapport-pris .k-liten { font-size: 12px; }
  .k-rapport-stort { font-size: 26px; }
  .k-rapport-pris-hva { display: none; }
}
.k-sporsmal-liste { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.k-sporsmal-liste .k-felt { min-height: 64px; resize: vertical; }

/* Bug 31: felles bryter (kunde/_bryter.html). Hele knappen er minst 44 px høy; tilstanden står i aria-checked. */
.k-bryter-skjema { display: inline-flex; margin: 0; }
/* Bug 37: meldingen under bryteren legger seg over siden og skyver ikke noe. */
.k-bryter-boks { position: relative; display: inline-flex; }
.k-bryter-melding { position: absolute; top: 100%; left: 0; z-index: 5; width: max-content; max-width: 240px; padding: 8px 10px;
  border: 1px solid #A8331B; border-radius: 8px; background: var(--k-hvit); color: #A8331B; font-size: 13px; font-weight: 600;
  line-height: 1.35; box-shadow: 0 4px 12px rgba(34, 50, 74, .12); }
.k-bryter-melding:empty { padding: 0; border: 0; box-shadow: none; }
.k-bryter[aria-disabled="true"] { cursor: progress; }
.k-bryter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 4px; border: 0;
  background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--k-tekst); cursor: pointer; border-radius: 8px; }
.k-bryter-spor { position: relative; width: 44px; height: 26px; flex: none; border-radius: 13px; background: var(--k-hvit);
  border: 2px solid var(--k-feltkant); transition: background-color .15s, border-color .15s; }
.k-bryter-knott { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--farge-skifer-lys);
  transition: transform .15s, background-color .15s; }
.k-bryter[aria-checked="true"] .k-bryter-spor { background: var(--status-gronn-ikon); border-color: var(--status-gronn-ikon); }
.k-bryter[aria-checked="true"] .k-bryter-knott { transform: translateX(18px); background: var(--k-hvit); }
.k-bryter-tekst { min-width: 2ch; }
.k-bryter:hover .k-bryter-spor { border-color: var(--k-tekst); }
.k-bryter[aria-checked="true"]:hover .k-bryter-spor { border-color: var(--k-tekst); }
.k-bryter:disabled { cursor: not-allowed; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .k-bryter-spor, .k-bryter-knott { transition: none; } }