/* assets/css/hjelp.css — Hjelp-sidene for leserne (ADR-0139 steg 4, prefiks .kbh-).
   Lastes av crew/hjelp.php, public/hjelp.php og «Som leser» i admin/admin_kunnskap.php — alltid ETTER kunnskap.css, som
   eier artikkelinnholdet (.kb-art) og treet (.kb-tre-panel, .kb-node). Bare temaets variabler; merkene er .hub-tag,
   knappene .btn-cyber, feltene elementregelen. Backstage = .kbh.is-backstage (tre | artikkel | aside), deltaker =
   .kbh.is-deltaker (én kolonne, mobil først). */

.kbh { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kbh .header-section { margin-bottom: 4px; }
.kbh-hint { font-size: 0.85em; color: var(--text-muted); }
.kbh-etikett { margin: 10px 0 0; font-size: 0.74em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.kbh-under-etikett { margin: -10px 0 0; }

/* Søket: stort på forsidene, lite i toppen av de andre visningene. */
.kbh-sok { position: relative; display: flex; align-items: center; max-width: 720px; margin: 0; }
.kbh-sok > .fa { position: absolute; left: 13px; color: var(--text-muted); pointer-events: none; }
.kbh-sok input[type="search"] { width: 100%; margin: 0; padding-left: 38px; }
.kbh-sok.is-stor > .fa { left: 16px; font-size: 1.1em; }
.kbh-sok.is-stor input[type="search"] { height: 54px; padding-left: 46px; font-size: 1.05em; }

/* Ikonet for et område: appens farge (--c), ellers merkefargen. */
.kbh-ikon { --c: var(--brand-primary); width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c) 12%, var(--surface-raised)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border-color)); color: var(--c); }
.kbh-pil { margin-left: auto; color: var(--text-muted); flex: none; }

/* ------------------------------------------------------------------ Backstage-forsiden */
.kbh-fritt { display: flex; align-items: center; gap: 16px; max-width: 720px; padding: 16px 20px; box-sizing: border-box; text-decoration: none; color: var(--text-main); transition: border-color 0.15s; }
.kbh-fritt:hover { border-color: var(--brand-primary); }
.kbh-fritt .kbh-ikon { width: 48px; height: 48px; font-size: 1.2em; }
.kbh-fritt-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kbh-fritt-tekst strong { font-size: 1.05em; }

.kbh-kortgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kbh-kort { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; min-width: 0; }
.kbh-kort-hd { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-main); text-decoration: none; }
.kbh-kort-hd:hover .kbh-kort-navn { color: var(--brand-primary); }
.kbh-kort-hd .kbh-ikon { width: 34px; height: 34px; }
.kbh-kort-hd .kbh-hint { margin-left: auto; font-weight: 400; white-space: nowrap; }
.kbh-kort-navn { min-width: 0; overflow-wrap: anywhere; }
.kbh-kort ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.92em; }
.kbh-kort li a { color: var(--text-main); text-decoration: none; }
.kbh-kort li a:hover { color: var(--brand-primary); text-decoration: underline; }
.kbh-kort li a.kbh-flere { color: var(--brand-primary); font-weight: 600; }
.kbh-kort.is-tom { border-style: dashed; justify-content: center; background: transparent; }
.kbh-kort.is-tom .kbh-kort-navn { color: var(--text-muted); font-weight: 600; }

.kbh-nylig { list-style: none; margin: 0; padding: 0; max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
.kbh-nylig li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kbh-nylig li a { color: var(--text-main); font-weight: 600; text-decoration: none; }
.kbh-nylig li a:hover { color: var(--brand-primary); text-decoration: underline; }
.kbh-nylig li .kbh-hint { margin-left: auto; }

/* ------------------------------------------------------------------ Backstage: område, artikkel, søk */
.kbh-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.kbh-topp .kbh-sok { margin-left: auto; width: 320px; max-width: 100%; }
.kbh-smuler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.9em; color: var(--text-muted); min-width: 0; }
.kbh-smuler a { color: var(--brand-primary); text-decoration: none; }
.kbh-smuler a:hover { text-decoration: underline; }
.kbh-smuler .fa { font-size: 0.7em; }

.kbh-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.kbh-grid.has-aside { grid-template-columns: 260px minmax(0, 1fr) 230px; }
.kbh-tre .kb-tre-innhold { padding: 10px; }
.kbh-tre .kb-node { text-decoration: none; }
.kbh-tre .kb-node.kbh-node-art { padding-left: 46px; font-size: 0.86em; }
.kbh-tre .kb-node.kbh-node-art .kb-node-navn { white-space: normal; }

.kbh-hoved { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kbh-omraade-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kbh-omraade-hd h1 { margin: 0; font-size: 1.8em; color: var(--text-main); overflow-wrap: anywhere; }
.kbh-omraade-hd .btn-cyber { margin-left: auto; }
.kbh-emne { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.kbh-emne > h2 { margin: 0; font-size: 1.15em; color: var(--text-main); }

.kbh-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kbh-rad { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-main); text-decoration: none; transition: border-color 0.15s; }
.kbh-rad:hover { border-color: var(--brand-primary); }
.kbh-rad:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.kbh-rad.is-snarvei { border-style: dashed; }
.kbh-rad-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kbh-rad-tittel { font-weight: 700; overflow-wrap: anywhere; }
.kbh-utdrag { font-size: 0.9em; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.kbh mark { background: color-mix(in srgb, var(--brand-primary) 22%, transparent); color: var(--text-main); border-radius: 3px; padding: 0 2px; }
.kbh-sok-tittel { margin: 0; font-size: 1.6em; color: var(--text-main); }

.kbh-artikkel { min-width: 0; padding: 26px 30px; box-sizing: border-box; }
.kbh-art-merker { align-items: center; margin-bottom: 10px; }
.kbh-art-tittel { margin: 0 0 14px; font-size: 2em; line-height: 1.2; color: var(--text-main); overflow-wrap: anywhere; }
.kbh-artikkel .kb-art { font-size: 1.02em; }
.kbh-artikkel .kb-art h2, .kbh-artikkel .kb-art h3 { scroll-margin-top: 16px; }

.kbh-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; min-width: 0; }
.kbh-app { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.kbh-app-navn { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.kbh-app-navn .kbh-ikon { width: 34px; height: 34px; }
.kbh-app .btn-cyber { justify-content: center; }
.kbh-toc-boks { display: flex; flex-direction: column; gap: 8px; }
.kbh-toc { display: flex; flex-direction: column; border-left: 2px solid var(--border-color); }
.kbh-toc a { padding: 5px 0 5px 12px; margin-left: -2px; border-left: 2px solid transparent; font-size: 0.9em; color: var(--text-muted); text-decoration: none; }
.kbh-toc a.is-h3 { padding-left: 24px; font-size: 0.85em; }
.kbh-toc a:hover { color: var(--text-main); }
.kbh-toc a.is-her { color: var(--brand-primary); border-left-color: var(--brand-primary); font-weight: 600; }

/* ------------------------------------------------------------------ deltakeren (mobil først) */
.kbh.is-deltaker { max-width: 760px; margin: 0 auto; width: 100%; }
.kbh.is-deltaker .kbh-sok { max-width: none; }
.kbh-tilbake { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: flex-start; color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.kbh-tilbake:hover { text-decoration: underline; }
.kbh-mliste { display: flex; flex-direction: column; gap: 10px; }
.kbh-mkort { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-main); }
.kbh-mkort > summary, .kbh-mkort.is-lenke { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; box-sizing: border-box; cursor: pointer; list-style: none; text-decoration: none; color: var(--text-main); }
.kbh-mkort > summary::-webkit-details-marker { display: none; }
.kbh-mkort > summary:focus-visible, .kbh-mkort.is-lenke:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 12px; }
.kbh-mkort strong { font-size: 0.97em; min-width: 0; overflow-wrap: anywhere; }
.kbh-mkort .kbh-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.kbh-mkort.is-lenke:hover, .kbh-mkort:has(> summary:hover) { border-color: var(--brand-primary); }
.kbh-mkort[open] { border-color: var(--brand-primary); box-shadow: var(--brand-glow); }
.kbh-mkort[open] > summary .kbh-pil { transform: rotate(180deg); }
.kbh-mkort-kropp { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.kbh-egen-side { align-self: flex-start; color: var(--brand-primary); }
.kbh.is-deltaker .kbh-artikkel { padding: 20px; }
.kbh.is-deltaker .kbh-art-tittel { font-size: 1.7em; }
.kbh.is-deltaker .kbh-omraade-hd h1 { font-size: 1.6em; }
.kbh-aapne-app { align-self: flex-start; }

/* ------------------------------------------------------------------ «Som leser» (SuperAdmin) — stripa og artikkellinja */
.kbh-stripe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; margin-bottom: 18px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent); background: color-mix(in srgb, var(--brand-gold) 8%, var(--card-bg)); }
.kbh-stripe .hub-chip-nav { margin-bottom: 0; }
.kbh-stripe .kbh-som { display: flex; align-items: center; gap: 8px; margin: 0; }
.kbh-stripe .kbh-som select { width: auto; min-width: 200px; margin: 0; }
.kbh-stripe .grow { flex: 1; }
.kbh-stripe .hub-tag { text-decoration: none; }
.kbh-redbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 16px; border-radius: 10px; border: 1px dashed var(--brand-primary); }
.kbh-redbar .grow { flex: 1; }
.kb-visning { margin-bottom: 16px; }

/* ------------------------------------------------------------------ smal skjerm */
/* Mellombredde: aside-en (Gjelder appen + På denne siden) legger seg over artikkelen, treet står til venstre. */
@media (max-width: 1250px) {
    .kbh-grid.has-aside { grid-template-columns: 240px minmax(0, 1fr); }
    .kbh-grid.has-aside > .kbh-tre { grid-column: 1; grid-row: 1 / span 2; }
    .kbh-grid.has-aside > .kbh-aside { grid-column: 2; grid-row: 1; position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .kbh-grid.has-aside > .kbh-aside > * { flex: 1 1 220px; }
    .kbh-grid.has-aside > .kbh-artikkel { grid-column: 2; grid-row: 2; }
}
/* Smal: én kolonne i DOM-rekkefølge — treet (lukket bak knappen), artikkelen, så «Gjelder appen». Innholdsfortegnelsen
   faller bort: nederst er den til ingen nytte, og artiklene er korte nok til å rulle. */
@media (max-width: 900px) {
    .kbh-grid, .kbh-grid.has-aside { grid-template-columns: minmax(0, 1fr); }
    .kbh-grid.has-aside > .kbh-tre, .kbh-grid.has-aside > .kbh-aside, .kbh-grid.has-aside > .kbh-artikkel { grid-column: auto; grid-row: auto; }
    .kbh-toc-boks { display: none; }
    .kbh-topp .kbh-sok { margin-left: 0; width: 100%; }
}
@media (max-width: 768px) {
    .kbh-artikkel { padding: 18px 16px; }
    .kbh-art-tittel { font-size: 1.55em; }
    .kbh-fritt { padding: 14px 16px; gap: 12px; }
    .kbh-fritt .kbh-ikon { width: 40px; height: 40px; }
    .kbh-kortgrid { grid-template-columns: minmax(0, 1fr); }
    .kbh-nylig li .kbh-hint { margin-left: 0; width: 100%; }
    .kbh-stripe .kbh-som { width: 100%; }
    .kbh-stripe .kbh-som select { flex: 1; min-width: 0; }
}

/* «Som leser» (steg 6): innspill-linja under redaksjonens stripe på artikkelen. */
.kbh-innspill-linje { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 10px; margin: -8px 0 16px; border-radius: 10px; border: 1px solid var(--border-color); border-left: 3px solid var(--status-warning); background: var(--surface-raised); font-size: 0.88em; color: var(--text-muted); overflow-wrap: anywhere; }
.kbh-innspill-linje strong { color: var(--text-main); }
.kbh-innspill-linje .fa { color: var(--status-warning); }
.kbh-innspill-linje a { margin-left: auto; color: var(--brand-primary); }