/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size-base); scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface-alt);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: var(--line-height-heading); font-weight: 700; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ========================================
   LAYOUT WRAPPER
   ======================================== */
.app-layout { display: flex; flex-direction: column; min-height: 100vh; }

/* ========================================
   HEADER
   ======================================== */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.app-header__logo {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none;
}
.app-header__logo:hover { text-decoration: none; }
/* Clevr-logoen. Bærer navnet selv, så ingen egen produktetikett ved siden av. */
.brand-lockup { display: flex; align-items: center; gap: var(--space-3); }
.brand-lockup__logo { height: 22px; width: auto; display: block; }

/* Positiv og negativ variant ligger begge i markupen; her velges den som
   passer temaet. Designer har levert en ekte negativ fil, så vi filtrerer ikke
   den positive lenger. Samme to-selektor-mønster som fargetokens — se brand.css.
   display, ikke .is-hidden: klassen er JS-ens verktøy, temaet er CSS-ens. */
.brand-lockup__logo--mork { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-lockup__logo--lys { display: none; }
  :root:not([data-theme="light"]) .brand-lockup__logo--mork { display: block; }
}
:root[data-theme="dark"] .brand-lockup__logo--lys { display: none; }
:root[data-theme="dark"] .brand-lockup__logo--mork { display: block; }

/* Lyst tema er eksplisitt valgt — da skal den positive stå selv i et mørkt OS */
:root[data-theme="light"] .brand-lockup__logo--lys { display: block; }
:root[data-theme="light"] .brand-lockup__logo--mork { display: none; }
.app-header__user { display: flex; align-items: center; gap: var(--space-4); font-size: 14px; color: var(--color-text-secondary); }
.app-header__user strong { color: var(--color-text); }

/* ========================================
   STEPPER
   ======================================== */
.stepper {
  display: flex; align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.stepper__item { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }
.stepper__item.active { color: var(--color-primary); }
.stepper__item.done { color: var(--color-success); }
.stepper__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.stepper__item.active .stepper__num { background: var(--color-primary); color: var(--color-on-primary); }
.stepper__item.done .stepper__num { background: var(--color-success); color: var(--color-surface); }
.stepper__sep { flex: 1; height: 1px; background: var(--color-border); margin: 0 var(--space-3); max-width: 64px; }
@media (max-width: 600px) { .stepper__label { display: none; } .stepper__sep { max-width: 24px; } }

/* ========================================
   MAIN
   ======================================== */
/* 1200px overalt. 800px ga for lite luft på skjemasidene — særlig AI-innsikt,
   der lesevisningen har flere kolonner med informasjon ved siden av hverandre.
   .main--wide var det samme tallet og er fjernet fra CSS og views. */
.main { flex: 1; padding: var(--space-8) var(--space-6); max-width: 1200px; width: 100%; margin: 0 auto; }

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-6);
  border-radius: var(--border-radius-btn);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent;
  transition: background var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out),
              transform var(--duration-fast) var(--easing-out);
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; color: var(--color-on-primary); }
.btn--primary:disabled, .btn--primary[disabled] { background: var(--color-disabled); border-color: var(--color-disabled); cursor: not-allowed; opacity: .6; }
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-ui); }
.btn--secondary:hover { background: var(--color-surface-alt); border-color: var(--color-text-secondary); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; }
.btn--danger { background: var(--color-error-light); color: var(--color-error); border-color: var(--color-error); }
.btn--danger:hover { background: var(--color-error-light); border-color: var(--color-error); text-decoration: none; }
.btn--full { width: 100%; }
.btn--lg { height: 52px; font-size: 16px; padding: 0 var(--space-8); }
.btn--sm { height: 36px; font-size: 13px; padding: 0 var(--space-4); }
.btn-link {
  background: none; border: none; color: var(--color-text-secondary); font-size: 14px;
  cursor: pointer; display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2); border-radius: var(--border-radius-sm);
  transition: color var(--duration-fast) var(--easing-out), background var(--duration-fast) var(--easing-out);
  min-height: 44px; min-width: 44px;
}
.btn-link:hover { color: var(--color-error); background: var(--color-error-light); }

/* ========================================
   CARD
   ======================================== */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); }
.card__title { font-size: 20px; font-weight: 700; font-family: var(--font-heading); margin-bottom: var(--space-6); }

/* ========================================
   FORM
   ======================================== */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.form-label { font-size: 14px; font-weight: 500; color: var(--color-text); }
.form-label--required::after { content: ' *'; color: var(--color-error); }
.form-help { font-size: 13px; color: var(--color-text-secondary); }
.form-control {
  width: 100%; height: 44px; padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border-ui); border-radius: var(--border-radius-md);
  font-family: var(--font-body); font-size: 16px; color: var(--color-text); background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
}
.form-control:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
.form-control::placeholder { color: var(--color-disabled); }
.form-control--error { border-color: var(--color-error); }
.form-control--error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.form-control--brreg { background: var(--color-brreg-bg); border-color: var(--color-brreg-border); }
.form-control--ai { background: var(--color-ai-bg); border-color: var(--color-ai-border); }
textarea.form-control { height: auto; min-height: 100px; padding: var(--space-3) var(--space-4); resize: vertical; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.form-error { font-size: 13px; color: var(--color-error); display: flex; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.field-row .form-control { flex: 1; }
.field-row .source-badge { margin-top: 10px; flex-shrink: 0; }

/* ========================================
   SOURCE BADGES
   ======================================== */
.source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.source-badge--brreg { background: var(--color-brreg-bg); color: var(--color-brreg-text); border: 1px solid var(--color-brreg-border); }
.source-badge--ai { background: var(--color-ai-bg); color: var(--color-ai-text); border: 1px solid var(--color-ai-border); }

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section { margin-bottom: var(--space-8); }
.form-section__title {
  font-size: 16px; font-weight: 600; color: var(--color-text);
  margin-bottom: var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-2);
}
.form-section__title svg { color: var(--color-text-secondary); }

/* ========================================
   TAGS
   ======================================== */
.tags-wrap {
  display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3);
  background: var(--color-ai-bg); border: 1.5px solid var(--color-ai-border);
  border-radius: var(--border-radius-md); min-height: 44px;
}
/* Fokus vises på hele kontrollen, ikke på det bare tekstfeltet inni.
   Tydeligere for brukeren, og uavhengig av :focus-visible-heuristikken. */
.tags-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500;
}
.tag__remove {
  background: none; border: none; cursor: pointer; color: var(--color-text-secondary);
  padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1;
  /* 24x24 = WCAG 2.2 SC 2.5.8 minstemål, uten avhengighet av avstandsunntaket */
  min-width: 24px; min-height: 24px;
}
.tag__remove:hover { color: var(--color-error); }
.tag-input {
  border: none; background: transparent;
  font-family: var(--font-body); font-size: 13px; color: var(--color-text);
  min-width: 140px; flex: 1; padding: 4px; align-self: center;
}
.tag-input::placeholder { color: var(--color-text-secondary); }

/* ========================================
   SEARCH BOX
   ======================================== */
.search-wrapper { position: relative; margin-bottom: var(--space-8); }
.search-box {
  display: flex; align-items: center; background: var(--color-surface);
  border: 2px solid var(--color-border-ui); border-radius: var(--border-radius-lg);
  padding: var(--space-3) var(--space-4); gap: var(--space-3);
  transition: border-color var(--duration-fast) var(--easing-out); box-shadow: var(--shadow-sm);
}
.search-box:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.search-box svg { color: var(--color-text-secondary); flex-shrink: 0; }
.search-box input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: 17px; color: var(--color-text); background: transparent; }
.search-box input::placeholder { color: var(--color-disabled); }
.search-dropdown {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 200; display: none;
}
.search-dropdown.open { display: block; }
.search-dropdown__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4); cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast) var(--easing-out); min-height: 44px;
}
.search-dropdown__item:last-child { border-bottom: none; }
.search-dropdown__item:hover { background: var(--color-primary-light); }
/* Fokus må være tydelig synlig — bakgrunnsskiftet alene er 1.09:1 mot hvit */
.search-dropdown__item:focus,
.search-dropdown__item:focus-visible {
  background: var(--color-primary-light);
  outline: 2px solid var(--color-primary); outline-offset: -2px;
}
.search-dropdown__name { font-weight: 600; font-size: 15px; }
.search-dropdown__orgnr { font-size: 13px; color: var(--color-text-secondary); font-family: var(--font-mono); }

/* ========================================
   LOADING
   ======================================== */
.loading-banner {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-primary-light); border: 1px solid var(--color-primary-border);
  border-radius: var(--border-radius-md); padding: var(--space-4);
  margin-bottom: var(--space-6); font-size: 14px; color: var(--color-ai-text); font-weight: 500;
}
.mini-spinner {
  width: 20px; height: 20px; border: 2px solid var(--color-primary-border); border-top-color: var(--color-primary);
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}
.btn .spinner, .spinner {
  width: 18px; height: 18px; border: 2px solid currentColor; opacity: .9;
  border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
.skeleton { background: linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 50%,#E2E8F0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--border-radius-sm); }
.skeleton-line { height: 44px; width: 100%; border-radius: var(--border-radius-md); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   AI SOURCE
   ======================================== */
.ai-source { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--color-ai-text); margin-top: var(--space-1); }
.ai-source a { color: var(--color-primary); font-size: 12px; }

/* ========================================
   LOGO-OPPLASTING
   ======================================== */
.logo-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); text-align: center; cursor: pointer;
  padding: var(--space-6); border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--border-radius-md); background: var(--color-surface-alt);
  color: var(--color-text-secondary); transition: border-color var(--duration-fast) var(--easing-out), background var(--duration-fast) var(--easing-out);
}
.logo-drop:hover, .logo-drop:focus-within, .logo-drop.is-dragover {
  border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary);
}
.logo-drop svg { color: var(--color-primary); margin-bottom: var(--space-1); }
.logo-drop__title { font-size: 14px; font-weight: 500; color: var(--color-text); }
.logo-drop__hint  { font-size: 12px; color: var(--color-text-secondary); }

.logo-preview {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-md); background: var(--color-surface);
}
.logo-preview__thumb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-alt);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-preview__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-preview__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.logo-preview__name { font-size: 14px; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-preview__size { font-size: 12px; color: var(--color-text-secondary); }
.logo-preview__remove {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary); cursor: pointer; transition: all var(--duration-fast) var(--easing-out);
}
.logo-preview__remove:hover { border-color: var(--color-error-border); background: var(--color-error-light); color: var(--color-error); }

/* ========================================
   HJELPEKLASSER
   ========================================
   Synlighet styres med klasse, ikke med style-attributt. Da trenger ikke
   markupen inline CSS, og siden kan kjøre under en streng CSP der
   style-src-attr er blokkert. JS toggler .is-hidden via classList. */
.is-hidden { display: none !important; }

.u-inline        { display: inline; }
.u-right         { text-align: right; }
.u-center        { text-align: center; }
.u-nowrap        { white-space: nowrap; }
.u-mt-0          { margin-top: 0; }
.u-ml-auto       { margin-left: auto; }
.u-stack-2       { display: flex; flex-direction: column; gap: var(--space-2); }
.u-stack-4       { display: flex; flex-direction: column; gap: var(--space-4); }
.u-row-end       { justify-content: flex-end; }
.u-full          { width: 100%; }

/* Gjentatte tekststiler fra skjema- og panelvisninger */
.u-label-mini {
  font-size: 11px; font-weight: 700; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: .06em;
}
.u-label-mini--mb1 { margin-bottom: var(--space-1); }
.u-label-mini--mb2 { margin-bottom: var(--space-2); }
.u-body-sm   { font-size: 13px; line-height: 1.55; color: var(--color-text-primary); }
.u-meta-sm   { font-size: 12px; color: var(--color-text-secondary); }
.u-title-md  { font-size: 16px; font-weight: 500; }

/* Nøytralt merke, f.eks. «Valgfritt» */
.source-badge--nøytral {
  margin-left: auto; margin-top: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* Avstand og mål */
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-4 { margin-top: var(--space-4); }
.u-pad-6 { padding: var(--space-6); }
.u-pad-0-clip { padding: 0; overflow: hidden; }
.u-pl-36 { padding-left: 36px; }
.u-max-420 { max-width: 420px; }
.u-max-480 { max-width: 480px; }
.u-w-60 { width: 60%; }
.u-w-auto-180 { width: auto; min-width: 180px; }
.u-ikon-16 { width: 16px; height: 16px; }

/* Flex-oppsett som gjentar seg */
.u-flex-2      { display: flex; gap: var(--space-2); }
.u-flex-mid    { display: flex; align-items: center; gap: var(--space-2); }
.u-flex-mid-3  { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.u-flex-mid-mb { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.u-flex-split  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.u-flex-end-1  { display: flex; gap: var(--space-1); justify-content: flex-end; }
.u-inline-mid  { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Typografi */
.u-h1        { font-size: 28px; margin-bottom: var(--space-2); }
.u-h2        { font-size: 24px; margin-bottom: var(--space-1); }
.u-tekst-sm  { font-size: 13px; color: var(--color-text-secondary); }
.u-tekst-xs  { font-size: 11px; color: var(--color-text-secondary); }
.u-tagline   { font-style: italic; color: var(--color-text-secondary); font-size: 13px; margin-bottom: var(--space-1); }
.u-sterk     { font-weight: 600; color: var(--color-primary); }
.u-feil      { color: var(--color-error); }
.u-etikett   { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }

/* Tomme tilstander */
.u-tom-8  { text-align: center; padding: var(--space-8); color: var(--color-text-secondary); }
.u-tom-12 { text-align: center; padding: var(--space-12) var(--space-8); color: var(--color-text-secondary); }
.u-tom-ikon { margin: 0 auto var(--space-4); color: var(--color-border); }

/* Søkefelt med ikon inni */
.u-sok-felt { position: relative; flex: 1; min-width: 200px; }
.u-sok-ikon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--color-text-secondary);
}
.u-thumb-tom {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; color: var(--color-border);
}
.u-thumb-bg { background: var(--color-bg-subtle); }

/* Små merker/pill-er */
.u-pill-ai {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--color-ai-bg); color: var(--color-ai-text);
  border: 1px solid var(--color-ai-border);
}
.u-pill-antall {
  margin-left: 6px; font-size: 11px; padding: 2px 6px; border-radius: 999px;
  background: var(--color-primary-light); color: var(--color-primary); font-weight: 600;
}
.u-kilde-merke { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.u-kilde-merke--ok { color: var(--color-success); }

/* AI-panel */
.u-ai-toggle {
  font-size: 12px; color: var(--color-primary); background: none;
  border: 1px solid var(--color-primary-border); border-radius: 4px;
  padding: 2px 10px; cursor: pointer; white-space: nowrap; margin-left: auto;
}
.u-ai-detaljer {
  margin-top: var(--space-4); border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.u-ai-varsel {
  font-size: 12px; color: var(--color-warning);
  background: var(--color-warning-light); border: 1px solid var(--color-warning-300);
  border-radius: 6px; padding: var(--space-2) var(--space-3);
}
.u-spinner-tekst { margin-left: var(--space-3); font-size: 13px; color: var(--color-text-secondary); }
.u-velg-rad { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14px; }

/* Fremdriftsstolper: bredden settes av JS fra data-pct, ikke av et style-attributt */
.admin-bar__fill[data-pct] { width: 0; }

/* ========================================
   FARGEPALETT
   ======================================== */
.palette-swatches { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.palette-swatch-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 120px; }
.palette-swatch-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-text-secondary);
}
.palette-swatch-wrap { display: flex; align-items: center; gap: var(--space-2); }
.palette-color-input {
  width: 48px; height: 48px; padding: 2px;
  border: 2px solid var(--color-border); border-radius: var(--border-radius-md);
  background: none; cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-out);
}
.palette-color-input:hover { border-color: var(--color-primary); }
.palette-color-input:focus-visible { border-color: var(--color-primary); outline: none; box-shadow: var(--focus-ring); }
.palette-hex-display {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--color-text-secondary); letter-spacing: .02em;
}

/* ========================================
   KILDEVELGER (Brønnøysund / Google)
   ======================================== */
.source-toggle { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.source-toggle__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); min-width: 80px; min-height: 44px;
  border: 1.5px solid var(--color-border-ui); border-radius: var(--border-radius-btn);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-out),
              background var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.source-toggle__btn:hover { border-color: var(--color-primary); color: var(--color-text); }
.source-toggle__btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ========================================
   AI-INNSIKT: KJØRINGSDETALJER (modell + tokens)
   ======================================== */
.ai-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
}
.ai-meta__chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: 11px; line-height: 1.7; white-space: nowrap;
}
.ai-meta__chip svg { flex-shrink: 0; opacity: .75; }
/* Modellen er det viktigste her — la den skille seg ut fra tallene */
#ai-meta-modell {
  border-color: var(--color-ai-border);
  background: var(--color-ai-bg);
  color: var(--color-ai-text);
  font-weight: 500;
}

/* ========================================
   UTTREKK FRA EKSISTERENDE KILDER
   ======================================== */
.extract-intro { margin-bottom: var(--space-4); }

/* Feltet og Hent-knappen side om side; knappen faller under på smale skjermer */
.extract-row { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.extract-row .form-control { flex: 1 1 240px; min-width: 0; }
.extract-row .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); }

.extract-status {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 13px; color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

.extract-ok {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-success-border); border-radius: var(--border-radius-sm);
  background: var(--color-success-light); color: var(--color-success);
  font-size: 13px;
}
.extract-ok svg { flex-shrink: 0; }

/* Dokument-thumbnail viser et ikon i stedet for bilde */
.doc-preview__thumb { color: var(--color-primary); }

/* Under pågående uttrekk skal droppsonen verken invitere til klikk eller hover */
.logo-drop.is-disabled { opacity: .55; pointer-events: none; }

/* ========================================
   ALERTS
   ======================================== */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--border-radius-md); font-size: 14px; margin-bottom: var(--space-4); }
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert--error { background: var(--color-error-light); color: var(--color-error); border: 1px solid #FECACA; }
.alert--success { background: var(--color-success-light); color: var(--color-success); border: 1px solid #BBF7D0; }
.alert--info { background: var(--color-primary-light); color: var(--color-ai-text); border: 1px solid var(--color-primary-border); }

/* ========================================
   PAGE ACTIONS
   ======================================== */
.page-actions { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) 0 var(--space-4); border-top: 1px solid var(--color-border); margin-top: var(--space-6); gap: var(--space-4); }

/* ========================================
   FILTER BAR + SEGMENTED CONTROL
   ======================================== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-6); padding: var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
}
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
}
.seg__btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 34px; padding: 0 var(--space-4); border: none; background: transparent;
  border-radius: var(--border-radius-sm); cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.seg__btn:hover { color: var(--color-text); }
.seg__btn.is-active {
  background: var(--color-primary); color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.seg__btn.is-active svg { color: var(--color-on-primary); }
.seg__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ========================================
   TEMPLATE GALLERY
   ======================================== */
.template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
@media (max-width: 1023px) { .template-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) { .template-grid { grid-template-columns: 1fr; } }
.template-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--border-radius-lg); overflow: hidden; cursor: pointer; transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out); }
.template-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.template-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); }
.template-card__img-wrap { position: relative; overflow: hidden; background: var(--color-surface-alt); aspect-ratio: 16/10; }
.template-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-card__check { position: absolute; top: var(--space-2); right: var(--space-2); width: 28px; height: 28px; background: var(--color-primary); color: var(--color-on-primary); border-radius: 50%; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.template-card.selected .template-card__check { display: flex; }
.template-card__body { padding: var(--space-4); }
.template-card__name { font-weight: 700; font-family: var(--font-heading); font-size: 15px; margin-bottom: var(--space-1); }
.template-card__category { font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.template-card__type { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; margin-bottom: var(--space-3); }
.template-card__type--ai { background: var(--color-ai-bg); color: var(--color-ai-text); border: 1px solid var(--color-ai-border); }
.template-card__type--standard { background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.template-card__btn { width: 100%; height: 40px; font-size: 14px; }
.template-card.selected .template-card__btn { background: var(--color-success); border-color: var(--color-success); }

/* ========================================
   MODAL
   ======================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.65); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-overlay.open { display: flex; animation: fadeIn var(--duration-fast) var(--easing-out); }
.modal { background: var(--color-surface); border-radius: var(--border-radius-lg); width: 100%; max-width: 860px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.25); animation: slideUp var(--duration-normal) var(--easing-out); }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.modal__title { font-size: 18px; font-weight: 700; font-family: var(--font-heading); }
.modal__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: var(--border-radius-md); cursor: pointer; color: var(--color-text-secondary); transition: background var(--duration-fast) var(--easing-out); }
.modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.modal__preview { flex: 1; overflow: hidden; background: var(--color-surface-alt); }
.modal__preview img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.modal__preview iframe { width: 100%; height: 480px; border: none; }
.modal__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-shrink: 0; }
.modal__footer-info { flex: 1; min-width: 0; }
.modal__footer-info h3 { font-size: 16px; margin-bottom: 2px; }
.modal__footer-info p { font-size: 14px; color: var(--color-text-secondary); }
.modal__nav { display: flex; gap: var(--space-2); }
.modal__nav-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-border); background: var(--color-surface); border-radius: var(--border-radius-md); cursor: pointer; color: var(--color-text); transition: background var(--duration-fast) var(--easing-out); }
.modal__nav-btn:hover { background: var(--color-surface-alt); }

/* ========================================
   RESULT
   ======================================== */
.result-card { text-align: center; padding: var(--space-12) var(--space-8); }
.result-card__icon { width: 80px; height: 80px; background: var(--color-success-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); color: var(--color-success); }
.result-card__icon--processing { background: var(--color-primary-light); color: var(--color-primary); }
.result-card__icon--error { background: var(--color-error-light); color: var(--color-error); }
.spinner--lg { width: 36px; height: 36px; border-width: 3px; border-color: var(--color-primary-border); border-top-color: var(--color-primary); }

/* ── Clevr-stjernen: ventemarkør mens nettsidene bygges ──────────────────── */

/* overflow: visible slik at gnistene kan ligge helt ute i kanten av viewBoxen
   uten å bli klippet */
.stjerne { overflow: visible; }

/* To lag bevegelse på samme form: rotoren snurrer jevnt, pulsen puster.
   Delt i to fordi én keyframe ikke kan gjøre begge deler uten at rotasjonen
   må reverseres for å komme tilbake til utgangspunktet. */
.stjerne__rotor {
  transform-origin: 62px 62px;
  animation: stjerne-spinn 7s linear infinite;
}
.stjerne__hoved {
  transform-origin: 62px 62px;
  animation: stjerne-puls 2.2s var(--easing-out) infinite;
}

/* transform-box: fill-box gir gnistene sin EGEN boks som origo. Uten den
   regnes 62px 62px fra SVG-rota, og de skalerer seg ut av bildet. */
.stjerne__gnist {
  transform-box: fill-box; transform-origin: center;
  animation: stjerne-blink 2.2s var(--easing-out) infinite;
}
.stjerne__gnist--1 { animation-delay: .5s; }
.stjerne__gnist--2 { animation-delay: 1.3s; }

@keyframes stjerne-spinn { to { transform: rotate(360deg); } }

@keyframes stjerne-puls {
  0%, 100% { transform: scale(.86); opacity: .8; }
  50%      { transform: scale(1);   opacity: 1; }
}

@keyframes stjerne-blink {
  0%, 100% { transform: scale(.4); opacity: 0; }
  45%      { transform: scale(1);  opacity: .85; }
}

/* Vedvarende, ikke-essensiell bevegelse må kunne skrus av (WCAG 2.3.3).
   Stjernen blir stående — den er dekorativ; fremdriften leses av teksten
   og jobb-listen under. */
@media (prefers-reduced-motion: reduce) {
  .stjerne__rotor, .stjerne__hoved, .stjerne__gnist { animation: none; }
  .stjerne__gnist { opacity: .6; }
}
/* Sammendragskortet er ikke alene på resultatsiden: uten bunnmarg lå
   underkanten inntil resultatkortene under, og de to rammene leste som én
   sammenhengende boks. Samme avstand som gridden bruker nedover. */
.result-card { margin-bottom: var(--space-4); }

.result-card__title { font-size: 28px; margin-bottom: var(--space-3); }
.result-card__subtitle { font-size: 16px; color: var(--color-text-secondary); max-width: 440px; margin: 0 auto var(--space-8); }

/* Er ingressen siste element, holder kortets egen bunn-padding. De 32 ekstra
   pikslene ga 80px dødt rom under teksten. På Behandler-siden står jobb-lista
   under, og der gjelder margen fortsatt. */
.result-card__subtitle:last-child { margin-bottom: 0; }
.preview-link-box { background: var(--color-surface-alt); border: 1.5px solid var(--color-border); border-radius: var(--border-radius-md); padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-3); margin: 0 auto var(--space-8); max-width: 480px; text-align: left; }
.preview-link-box svg { color: var(--color-primary); flex-shrink: 0; }
.preview-link-box a { font-size: 15px; font-weight: 600; word-break: break-all; }

/* ========================================
   LOGIN
   ======================================== */
.login-screen { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface-alt) 100%); }
.login-card { width: 100%; max-width: 420px; padding: var(--space-8); }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.login-logo__img { height: 34px; width: auto; display: block; }
.login-logo__img--mork { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-logo__img--lys { display: none; }
  :root:not([data-theme="light"]) .login-logo__img--mork { display: block; }
}
:root[data-theme="dark"] .login-logo__img--lys { display: none; }
:root[data-theme="dark"] .login-logo__img--mork { display: block; }
:root[data-theme="light"] .login-logo__img--lys { display: block; }
:root[data-theme="light"] .login-logo__img--mork { display: none; }
.password-wrap { position: relative; }
.password-wrap .form-control { padding-right: 52px; }
.password-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-text-secondary); }
.password-toggle:hover { color: var(--color-text); }

/* ========================================
   ADMIN TABLE
   ======================================== */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-weight: 600; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-border); color: var(--color-text-secondary); }
.admin-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.admin-table tr:hover td { background: var(--color-surface-alt); }
.admin-table th.num, .admin-table td.num { text-align: right; white-space: nowrap; }

/* Brede tabeller skal rulle i sin egen boks — aldri dytte siden sidelengs */
.table-scroll { overflow-x: auto; }

/* ── Admin-dashbord ──────────────────────────────────────────────────────── */
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.admin-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.admin-stat { padding: var(--space-5); }
.admin-stat__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-secondary); margin-bottom: var(--space-2);
}
.admin-stat__value { font-size: 36px; font-weight: 700; color: var(--color-primary); line-height: 1; }
.admin-stat__sub { font-size: 11px; color: var(--color-text-secondary); margin-top: var(--space-1); }

.admin-panel { padding: 0; overflow: hidden; margin-bottom: var(--space-4); }
.admin-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.admin-panel__title { font-size: 15px; font-weight: 600; margin: 0; }
.admin-panel__refresh { flex-shrink: 0; }

/* Plassholder mens et panel hentes via AJAX */
.admin-skeleton {
  padding: var(--space-6); text-align: center;
  color: var(--color-text-secondary); font-size: 13px;
}
.admin-panel-slot[aria-busy="true"] .admin-skeleton { opacity: .7; }

.admin-title { font-size: 24px; margin-bottom: var(--space-1); }
.admin-nowrap { white-space: nowrap; }
.admin-num--feil { color: var(--color-error); font-weight: 600; }
.inline-form { display: inline; }
.admin-empty { padding: var(--space-6); text-align: center; color: var(--color-text-secondary); font-size: 13px; }

.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 820px) { .admin-grid-2 { grid-template-columns: 1fr; } }

.admin-bars { padding: var(--space-3) var(--space-5); }
.admin-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.admin-bar:last-child { border-bottom: none; }
.admin-bar__rank {
  font-size: 12px; font-weight: 700; color: var(--color-text-secondary);
  width: 18px; text-align: right; flex-shrink: 0;
}
.admin-bar__body { flex: 1; min-width: 0; }
.admin-bar__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.admin-bar__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-bar__val { font-size: 12px; font-weight: 700; color: var(--color-primary); margin-left: var(--space-2); flex-shrink: 0; }
.admin-bar__track { height: 4px; background: var(--color-border); border-radius: 2px; }
.admin-bar__fill { height: 100%; background: var(--color-primary); border-radius: 2px; }
.admin-bar__fill--alt { background: var(--color-ai-border); }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge--active { background: var(--color-success-light); color: var(--color-success); }
.badge--inactive { background: var(--color-error-light); color: var(--color-error); }

/* ========================================
   UTILITIES
   ======================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.font-mono { font-family: var(--font-mono); }
.text-secondary { color: var(--color-text-secondary); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.text-sm { font-size: 14px; }
.flex-center { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ========================================
   BEVEGELSE OG BRUKERPREFERANSER
   ======================================== */
/* WCAG 2.3.3 Animation from Interactions. Vi fjerner ikke overganger helt —
   det ville skjult tilstandsendringer — men gjør dem tilnærmet umiddelbare. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
  .modal { animation: none; }
}

/* Windows høykontrastmodus: sørg for at kanter og fokus overlever
   når systemet overstyrer fargene våre. */
@media (forced-colors: active) {
  .btn, .form-control, .search-box, .card, .admin-table td, .admin-table th {
    border: 1px solid ButtonBorder;
  }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .admin-bar__fill, .stepper__num { forced-color-adjust: none; }
}

/* ========================================
   HOPP TIL INNHOLD (skip-link)
   ======================================== */
/* Synlig kun ved tastaturfokus. Lar tastaturbrukere hoppe forbi header
   og stepper på hver side (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4);
  z-index: 1000;
  transform: translateY(-200%);
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--border-radius-btn);
  font-weight: 600; text-decoration: none;
  transition: transform var(--duration-fast) var(--easing-out);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* Scroll-område for brede tabeller — fokuserbart så tastaturbrukere
   kan rulle sidelengs (WCAG 2.1.1) */
.table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Tokenoppdeling ved siden av chippen — synlig i stedet for title-tooltip */
.ai-meta__detalj { font-size: 11px; color: var(--color-text-secondary); align-self: center; }

/* ========================================
   HEADER: BRUKER, TEMA OG IKONKNAPPER
   ======================================== */
/* Skjult for øyet, lest av skjermleser. Brukes til å gi ikonknapper og
   avatar-sirkelen et fullverdig tekstalternativ. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Kvadratisk ikonknapp — 40px er over WCAG 2.2 AA (24px) med god margin,
   og gir en tettere header enn tekstknappene den erstatter. */
.ikon-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--border-radius-md);
  background: none; color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out);
}
.ikon-knapp:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-ui);
  color: var(--color-text);
  text-decoration: none;
}
.ikon-knapp--fare:hover {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Temaknapp: sol vises i lys modus, måne i mørk */
.tema-knapp__mane { display: none; }
.tema-knapp--mork .tema-knapp__sol  { display: none; }
.tema-knapp--mork .tema-knapp__mane { display: block; }

/* Brukerchip: initial-sirkel + navn */
.bruker-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: 0; color: var(--color-text-secondary); font-size: 14px;
}
.bruker-chip__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  line-height: 1;
}
.bruker-chip__navn {
  font-weight: 500; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch;
}

/* På smale skjermer bærer avataren identiteten alene — navnet er uansett
   tilgjengelig for skjermlesere via .visually-hidden. */
@media (max-width: 640px) {
  .bruker-chip__navn { display: none; }
  .app-header { padding: var(--space-3) var(--space-4); }
  .app-header__user { gap: var(--space-1); }
}

/* ========================================
   BRANSJETYPER (admin)
   ======================================== */
/* Advarsel — brukes der en handling har konsekvenser utenfor egen skjerm */
.alert--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-300);
}

/* Smal dialog for enkle skjemaer — standardmodalen (860px) er laget for
   mal-forhåndsvisning og blir for bred til ett tekstfelt. */
.modal--smal { max-width: 480px; }
.modal__body { flex: 1; overflow-y: auto; }
.modal__body .form-group:last-of-type { margin-bottom: var(--space-4); }

/* ========================================
   BILDEBIBLIOTEK (admin)
   ======================================== */
.bilde-antall { margin-bottom: var(--space-4); }

.bilde-rutenett {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4); list-style: none;
}
@media (max-width: 520px) { .bilde-rutenett { grid-template-columns: 1fr; } }

.bilde-kort {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--border-radius-md);
  background: var(--color-surface); overflow: hidden;
  transition: border-color var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
}
.bilde-kort:hover { border-color: var(--color-border-ui); box-shadow: var(--shadow-md); }

.bilde-kort__bilde {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--color-surface-alt); overflow: hidden;
}
.bilde-kort__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mono setter aiGenerated automatisk fra C2PA-lisens */
.bilde-kort__ai {
  position: absolute; top: var(--space-2); left: var(--space-2);
  background: var(--color-ai-bg); color: var(--color-ai-text);
  border: 1px solid var(--color-ai-border); border-radius: var(--border-radius-sm);
  font-size: 10px; font-weight: 700; padding: 2px 6px; letter-spacing: .04em;
}

.bilde-kort__innhold { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.bilde-kort__navn {
  font-size: 13px; font-weight: 500; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bilde-kort__meta { font-size: 11px; color: var(--color-text-secondary); }
.bilde-kort__status { font-size: 11px; color: var(--color-warning); }
.bilde-kort__merker { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Slettknappen ligger over bildet — vises tydelig ved hover og alltid ved fokus */
.bilde-kort__slett {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: var(--color-surface); opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-out);
}
.bilde-kort:hover .bilde-kort__slett,
.bilde-kort__slett:focus-visible { opacity: 1; }
/* Touch har ingen hover — der må knappen alltid være synlig */
@media (hover: none) { .bilde-kort__slett { opacity: 1; } }

.merke {
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  border-radius: var(--border-radius-sm); border: 1px solid transparent;
}
.merke--bransje {
  background: var(--color-primary-light); color: var(--color-primary);
  border-color: var(--color-primary-border);
}
.merke--bildetype {
  background: var(--color-surface-alt); color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* Kø over filer valgt for opplasting */
.bilde-kø { list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.bilde-kø__rad {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt); font-size: 13px;
}
.bilde-kø__navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilde-kø__str { color: var(--color-text-secondary); font-size: 12px; flex-shrink: 0; }
.bilde-kø__status { color: var(--color-text-secondary); font-size: 12px; flex-shrink: 0; min-width: 76px; text-align: right; }
.bilde-kø__fjern { width: 32px; height: 32px; flex-shrink: 0; }

.bilde-valgfritt { margin-bottom: var(--space-4); }
.bilde-valgfritt > summary {
  cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--color-text-secondary); padding: var(--space-2) 0;
}
.bilde-valgfritt > summary:hover { color: var(--color-text); }
.bilde-valgfritt[open] > summary { margin-bottom: var(--space-4); }

/* Flervalgsliste for bransjetyper */
select[multiple].form-control { height: auto; padding: var(--space-2); }

/* ========================================
   AI-INSTRUKSJON (admin)
   ======================================== */

/* Prompter er lange og har betydningsbærende innrykk — monospace og myk ombrekking
   gjør det mulig å se strukturen uten vannrett rulling. */
.prompt-felt {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12.5px; line-height: 1.6; resize: vertical; min-height: 140px;
  white-space: pre-wrap; tab-size: 2;
}

.plassholdere {
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt);
}
.plassholder-liste {
  list-style: none; margin: 0 0 var(--space-2); padding: 0;
  display: grid; gap: var(--space-2) var(--space-4);
  /* auto-fit gjør at listen går fra flere kolonner til én på smale skjermer
     uten et eget brytepunkt (WCAG 1.4.10 Reflow) */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plassholder-liste li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.plassholder-liste li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Klikkbart merke: setter plassholderen inn der markøren står i malen.
   min-height holder treffflaten på 24px (WCAG 2.2 SC 2.5.8). */
.plassholder-knapp {
  cursor: pointer; flex-shrink: 0;
  min-height: 24px; display: inline-flex; align-items: center;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  transition: background var(--duration-fast) var(--easing-out);
}
.plassholder-knapp:hover { background: var(--color-primary); color: #fff; }
.plassholder-knapp:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.prompt-forhandsvisning {
  margin: 0; padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12.5px; line-height: 1.6; color: var(--color-text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow-y: auto;
}

.advarsel-liste { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: 13px; }
.advarsel-liste li + li { margin-top: var(--space-1); }

/* Testresultat: to kolonner på bredt, stablet på smalt */
.test-resultat { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.test-resultat__rad {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3);
  font-size: 13px; align-items: baseline;
}
.test-resultat__navn { color: var(--color-text-secondary); font-weight: 500; }
@media (max-width: 560px) {
  .test-resultat__rad { grid-template-columns: 1fr; gap: 2px; }
}

/* ── AI-modell (admin) ───────────────────────────────────────────────────── */

.u-mt-3 { margin-top: var(--space-3); }

/* Modell-ID-er leses tegn for tegn — monospace gjør versjonsnummer lesbare.
   Ingen word-break: en ID brutt midt i («gemini-flash-lates/t») er verre å lese
   enn en som stikker ut, og tabellen den står i ruller allerede vannrett. */
code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: .92em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}

/* Nettleserens standardramme rundt fieldset hører ikke hjemme i skjemaene våre —
   ingen andre form-group-er har ramme. Gjelder også bildetypene i Bildebibliotek. */
fieldset.form-group {
  border: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  min-width: 0;   /* uten denne nekter fieldset å krympe i flex/grid */
}
fieldset.form-group > legend { padding: 0; }

/* ── Tilleggsinformasjon til AI-research ─────────────────────────────────── */

.tillegg {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt);
}

.tillegg__sammendrag {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--color-text);
  /* min-height holder treffflaten godt over 24px (WCAG 2.2 SC 2.5.8) */
  min-height: 44px;
  border-radius: var(--border-radius-sm);
}
.tillegg__sammendrag:hover { color: var(--color-primary); }
.tillegg__sammendrag:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tillegg__sammendrag > svg { flex-shrink: 0; color: var(--color-text-secondary); }

/* Standardtrekanten peker feil vei og lar seg ikke style likt på tvers av
   nettlesere — egen indikator i stedet */
.tillegg__sammendrag::-webkit-details-marker { display: none; }
.tillegg__sammendrag::marker { content: ''; }
.tillegg__sammendrag::after {
  content: '▾';
  margin-left: auto; flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform var(--duration-fast) var(--easing-out);
}
.tillegg[open] > .tillegg__sammendrag::after { transform: rotate(180deg); }

/* Viser at feltet er utfylt når panelet er lukket */
.tillegg__teller {
  font-size: 11px; font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--border-radius-sm);
  padding: 2px 6px;
}

.tillegg__innhold {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.tillegg__felt { resize: vertical; min-height: 120px; line-height: 1.6; }

/* ── To maler: valg, fremdrift og resultat ───────────────────────────────── */

/* Nummeret erstatter haken når to maler er valgt — viser rekkefølgen */
.template-card__nr {
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

.btn--valgt { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.btn--valgt:hover { background: var(--color-success); border-color: var(--color-success); }

.valg-status {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  justify-content: flex-end;
}

/* Fremdrift per mal på Behandler-siden */
.jobb-liste {
  list-style: none; margin: var(--space-5) auto 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 460px; text-align: left;
}
.jobb-rad {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt); font-size: 14px;
}
.jobb-rad__ikon {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary);
}
.jobb-rad__navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobb-rad__status { flex-shrink: 0; font-size: 12px; color: var(--color-text-secondary); }

.jobb-rad.is-ok { border-color: var(--color-success); }
.jobb-rad.is-ok .jobb-rad__ikon,
.jobb-rad.is-ok .jobb-rad__status { color: var(--color-success); }
.jobb-rad.is-feil { border-color: var(--color-error); }
.jobb-rad.is-feil .jobb-rad__ikon,
.jobb-rad.is-feil .jobb-rad__status { color: var(--color-error); }

/* Resultat: ett kort per opprettet side, side ved side når det er to */
.resultat-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: var(--space-4);
}
/* Én side skal ikke strekkes over hele bredden */
/* Full bredde, som sammendragskortet over og advarselen under. Den gamle
   640px-midtstillingen ga mening da .main var 800px bred; på 1200px ble
   enkeltkortet smalere enn alt rundt seg og laget en trappekant. */
.resultat-grid--enkel { grid-template-columns: minmax(0, 1fr); }

.resultat-kort { padding: var(--space-5); }

/* .preview-link-box ble laget for å stå ALENE og midtstilt på resultatsiden —
   derav max-width, auto-margin og en stor bunnmarg. Inne i et resultatkort er
   alle tre feil: boksen skal fylle kortets bredde, og avstanden ned til
   knappene styres av .resultat-kort__knapper. */
.resultat-kort .preview-link-box { max-width: none; margin: 0; }
.resultat-kort__topp {
  display: flex; align-items: center; gap: var(--space-3);
  justify-content: space-between; margin-bottom: var(--space-4);
}
.resultat-kort__mal { font-size: 16px; font-weight: 600; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.resultat-kort__knapper {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4);
}

.page-actions--senter { justify-content: center; }

/* ── Språkvalg ───────────────────────────────────────────────────────────── */

/* Ligger øverst i AI-innsikt og må leses før knappen trykkes */
.sprak-valg { max-width: 320px; }

.sprak-tabell td { vertical-align: middle; }
/* Et språk som er skrudd av kan ikke være forhåndsvalgt — dempes så det synes */
.sprak-tabell tr.is-av td { opacity: .55; }
.sprak-tabell input[type="checkbox"],
.sprak-tabell input[type="radio"] { width: 18px; height: 18px; cursor: pointer; }
.sprak-tabell input:disabled { cursor: not-allowed; }

/* Språk Mono ikke har klargjort — skal ikke skrus på uten at admin vet det */
.sprak-merke {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: var(--border-radius-sm); margin-left: var(--space-2);
}
.sprak-merke--ubekreftet {
  background: var(--color-error-light); color: var(--color-error); border: 1px solid #FECACA;
}

/* Språkvelger i toppmenyen — samme høyde som ikon-knappene ved siden av */
.sprak-velger { display: flex; align-items: center; }
.sprak-velger__felt {
  height: 40px; padding: 0 var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.sprak-velger__felt:hover { border-color: var(--color-primary); }
.sprak-velger__felt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Min side ────────────────────────────────────────────────────────────── */

/* Konto og passordbytte side ved side, stablet på smal skjerm */
.minside-topp {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: var(--space-4);
}

.konto-rad {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); padding: var(--space-2) 0; font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}
.konto-rad:last-of-type { border-bottom: 0; }
.konto-rad__navn { color: var(--color-text-secondary); flex-shrink: 0; }

.minside-filter {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.minside-filter__sok { display: flex; gap: var(--space-2); flex: 1; min-width: 240px; }
.minside-filter__sok .form-control { flex: 1; min-width: 0; }

/* Nøkkeltallene for perioden */
.minside-tall {
  display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4);
}
.minside-tall__kort {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt); min-width: 180px;
}
.minside-tall__verdi { font-size: 26px; font-weight: 700; line-height: 1.1; }
.minside-tall__navn { font-size: 12px; color: var(--color-text-secondary); }
.minside-tall__endring { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
/* Farge ALENE bærer ikke betydningen — fortegnet står i teksten (WCAG 1.4.1) */
.minside-tall__endring.er-opp { color: var(--color-success); }
.minside-tall__endring.er-ned { color: var(--color-error); }

/* Knappen i egendefinert-raden skal stå på linje med feltene, ikke over dem */
.u-selvjuster { display: flex; align-items: flex-end; }

/* Brikken er blitt en lenke — den skal ikke se ut som brødtekst */
a.bruker-chip { text-decoration: none; color: inherit; }
a.bruker-chip:hover .bruker-chip__navn { color: var(--color-primary); }
a.bruker-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Applikasjonslogg ────────────────────────────────────────────────────── */

.logg-filter {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}
.logg-filter__sok { display: flex; gap: var(--space-2); flex: 1; min-width: 260px; }
.logg-filter__sok .form-control { flex: 1; min-width: 0; }
.u-auto-venstre { margin-left: auto; }

.logg-tabell td { vertical-align: top; }
.logg-melding { font-size: 13px; overflow-wrap: anywhere; }

/* Nivåmerket har både farge OG tekst — fargen alene bærer ikke betydning (WCAG 1.4.1) */
.logg-niva {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: var(--border-radius-sm); white-space: nowrap;
}
.logg-niva.niva--kritisk,
.logg-niva.niva--feil     { background: var(--color-error-light); color: var(--color-error); }
.logg-niva.niva--advarsel { background: var(--color-warning-light, #FEF3C7); color: #92400E; }
.logg-niva.niva--info     { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.logg-niva.niva--debug    { background: var(--color-surface-alt); color: var(--color-text-secondary); }

/* Venstrekant gjør det mulig å skumme etter feil uten å lese nivåkolonnen */
.logg-tabell tr.niva--feil td:first-child,
.logg-tabell tr.niva--kritisk td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.logg-tabell tr.niva--advarsel td:first-child { box-shadow: inset 3px 0 0 #D97706; }

.logg-unntak > summary {
  cursor: pointer; font-size: 12px; color: var(--color-text-secondary);
  padding: var(--space-1) 0; min-height: 24px;
}
.logg-unntak > summary:hover { color: var(--color-primary); }
.logg-unntak pre {
  margin: var(--space-2) 0 0; padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  font-size: 11.5px; line-height: 1.5; max-height: 320px;
  overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* Tone og målgruppe — samme bredde som språkvelgeren over dem */
.stil-valg { margin-bottom: var(--space-4); }

/* Valglister for tone og målgruppe i AI-instruksjonen */
.valgliste { border: 0; margin: 0 0 var(--space-5); padding: 0; min-width: 0; }
.valgliste > legend { padding: 0; }
.valgliste__rader { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.valgliste__rad {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr 40px;
  gap: var(--space-2); align-items: start;
}
.valgliste__instruksjon { resize: vertical; min-height: 44px; font-size: 13px; line-height: 1.5; }
.valgliste__rad .ikon-knapp { margin-top: 2px; }
/* Stables på smal skjerm — tre kolonner blir ubrukelige under ~640 px */
@media (max-width: 640px) {
  .valgliste__rad { grid-template-columns: 1fr 40px; }
  .valgliste__instruksjon { grid-column: 1 / -1; }
}

/* Rollevalg i brukertabellen */
.rolle-skjema { display: flex; flex-direction: column; gap: 2px; }
.rolle-valg { font-size: 12px; white-space: nowrap; }
.rolle-valg input:disabled { cursor: not-allowed; }
/* En låst hake skal se låst ut, ikke bare oppføre seg låst */
.rolle-valg input:disabled + * , .rolle-valg:has(input:disabled) { opacity: .7; }

/* ── AI-innsikt: visning og redigering ───────────────────────────────────── */

/* Nummeret gjør radene mulige å snakke om («den tredje tjenesten»). CSS-counter
   og ikke JS: da holder nummereringen seg riktig etter sletting og «Legg til»
   uten at noe må rendres på nytt. */
.innsikt-liste { counter-reset: innsikt-rad; }

/* Erstatter inline style= i aiDetailItem — style-src-attr blokkeres av CSP */
.innsikt-rad {
  counter-increment: innsikt-rad;
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
}
.innsikt-rad::before {
  content: counter(innsikt-rad);
  grid-column: 1; grid-row: 1;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.innsikt-rad__tittel {
  grid-column: 2; grid-row: 1;
  font-size: 13px; font-weight: 600; color: var(--color-text); line-height: 1.5;
}
.innsikt-rad__tekst {
  grid-column: 2; grid-row: 2;
  font-size: 12px; color: var(--color-text-secondary);
  margin-top: 2px; line-height: 1.4;
}

/* Redigerbar rad: nummer, tittel og slettknapp på ØVERSTE linje, beskrivelsen
   under. Slettknappen satt loddrett midt i et høyt kort før — langt fra
   tittelen den faktisk sletter.
   ALLE barn må plasseres eksplisitt: uten grid-column på slettknappen tar
   auto-plasseringen første kolonne og presser tittelfeltet ut i 20px. */
.innsikt-rad--rediger { grid-template-columns: 20px 1fr 28px; row-gap: var(--space-2); }
.innsikt-rad--rediger::before { align-self: center; }
/* Lavere polstring enn .form-control: raden skal være kompakt, og tittelen er
   alltid én linje */
.innsikt-rad__felt1 { grid-column: 2; grid-row: 1; padding: var(--space-2) var(--space-3); }
.innsikt-rad__felt2 { grid-column: 2 / span 2; grid-row: 2; }
.innsikt-rad__fjern { grid-column: 3; grid-row: 1; width: 28px; height: 28px; }

/* textarea.form-control har min-height: 100px — riktig for skjemafeltene, men
   her ble hver ettlinjes beskrivelse en boks med ~60 % død plass, og lista
   føltes endeløs. field-sizing lar feltet vokse med teksten der nettleseren
   støtter det; ellers gjelder min-height, som er to linjer. */
textarea.innsikt-rad__felt2,
textarea.innsikt-felt {
  min-height: 38px; max-height: 260px;
  padding: var(--space-2) var(--space-3);
  field-sizing: content;
}

/* Firefox har ikke field-sizing. Der vokser feltet ikke, og 38px ville gjort
   en lengre beskrivelse til en rullebar kikkert. Tre linjer som bunn i stedet
   — fortsatt langt under de 100px vi kom fra. */
@supports not (field-sizing: content) {
  textarea.innsikt-rad__felt2,
  textarea.innsikt-felt { min-height: 72px; }
}

/* På smal skjerm spiser nummer- og slettkolonnen tittelfeltet ned til ~110px.
   Da flytter vi nummeret og slettknappen opp på en egen topplinje — de hører
   fortsatt sammen, og tittel og beskrivelse får full bredde (WCAG 1.4.10). */
@media (max-width: 520px) {
  /* Kort i kort i rad: polstringen legger seg oppå hverandre og spiser 80px av
     en 375px-skjerm. Strammes inn her, ikke på desktop der luften trengs. */
  .innsikt-kort { padding: var(--space-3); }
  .innsikt-kort.is-rediger #ai-details { padding: var(--space-2); }
  .innsikt-oppsett { padding: var(--space-3); }
  .innsikt-rad { padding: var(--space-2); }

  .innsikt-rad--rediger { grid-template-columns: 1fr 28px; }
  .innsikt-rad--rediger::before { grid-column: 1; grid-row: 1; }
  .innsikt-rad__fjern { grid-column: 2; grid-row: 1; }
  .innsikt-rad__felt1 { grid-column: 1 / span 2; grid-row: 2; }
  .innsikt-rad__felt2 { grid-column: 1 / span 2; grid-row: 3; }
}

/* Gjelder både tagline-inputen og de to beskrivelses-textarea-ene */
.innsikt-rad__felt1,
.innsikt-rad__felt2,
.innsikt-felt { font-size: 13px; line-height: 1.5; }
textarea.innsikt-rad__felt2,
textarea.innsikt-felt { resize: vertical; }

/* ── AI-innsikt: oppsettkortet før kjøring ───────────────────────────────── */

/* Språk, tone, målgruppe og tilleggsinfo hører sammen: de gjelder ÉN kjøring.
   Uten rammen leste de som løse skjemafelt på linje med Kontaktinfo og Logo. */
.innsikt-oppsett {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.innsikt-oppsett__tittel {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* auto-fit gir én kolonne på smal skjerm uten egen media query (WCAG 1.4.10) */
.innsikt-oppsett__rad {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-4);
}
.innsikt-oppsett__rad .form-group { margin-bottom: 0; min-width: 0; }

/* Tilleggsinfo ligger nå INNE i kortet — uten dette blir det boks i boks */
.innsikt-oppsett > .tillegg {
  margin-bottom: 0;
  background: var(--color-surface);
}

/* ── AI-innsikt: resultatkortet ──────────────────────────────────────────── */

/* Resultatet er noe man vurderer, ikke et skjema man fyller ut. Egen flate
   skiller det fra Kontaktinfo/Logo/Fargepalett rundt. */
.innsikt-kort {
  border: 1px solid var(--color-ai-border);
  border-radius: var(--border-radius-md);
  background: var(--color-ai-bg);
  padding: var(--space-4);
}

/* Av/på-bryter for redigeringsmodus. Sitter ved siden av «Vis detaljer», men
   skal skille seg fra den: den ene endrer hva du ser, den andre hva du kan gjøre. */
.innsikt-rediger {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 12px; font-weight: 500;
  color: var(--color-primary); background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--border-radius-sm);
  /* min-height holder treffflaten over 24px (WCAG 2.2 SC 2.5.8) */
  min-height: 24px; padding: 2px var(--space-2);
  cursor: pointer; white-space: nowrap;
}
.innsikt-rediger:hover { background: var(--color-primary-light); }
.innsikt-rediger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Påslått modus må synes på mer enn fargen alene (WCAG 1.4.1): knappen blir
   fylt OG teksten bytter fra «Rediger» til «Ferdig». */
.innsikt-rediger--aktiv {
  background: var(--color-primary); color: var(--color-surface);
  border-color: var(--color-primary);
}
.innsikt-rediger--aktiv:hover { background: var(--color-primary); opacity: .9; }

/* Redigeringsmodus rammer inn selve detaljpanelet, så det er tydelig hvor
   endringene gjelder — resten av kortet er fortsatt bare visning */
.innsikt-kort.is-rediger #ai-details {
  border: 1px dashed var(--color-primary-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-3);
  border-top-width: 1px;
}

.innsikt-bunn {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Dempet med vilje: handlingen koster tokens og skriver over redigeringer,
   så den skal ikke konkurrere med «Vis detaljer» om oppmerksomheten */
.innsikt-regen {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
  /* Treffflate over 24px (WCAG 2.2 SC 2.5.8) */
  min-height: 24px; padding: 2px var(--space-1);
  border-radius: var(--border-radius-sm);
}
.innsikt-regen:hover { color: var(--color-primary); }
.innsikt-regen:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Sier fra at teksten ikke lenger er ren AI — viktig når begge deler er mulig */
.innsikt-endret {
  font-size: 12px; font-weight: 600;
  color: var(--color-primary); background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
}

/* Endret-merket bærer også angreknappen — der man oppdager endringen */
.innsikt-endret {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  justify-content: space-between;
}
.innsikt-endret__tilbake {
  font-size: 12px; font-weight: 600; flex-shrink: 0;
  /* Treffflate over 24px (WCAG 2.2 SC 2.5.8) uten å bli en stor knapp */
  min-height: 24px; padding: 0 var(--space-1);
}