/* popup-views.css — auto-generated from popup.css for downstream embedding (lockdown sidepanel host).
   All rules scoped under #leksihjelp-sidepanel-root so the file is safe to inject into a host page.
   Drops body/html/.app rules. Keeps :root variables under the host scope.
   Source: extension/styles/popup.css — DO NOT EDIT THIS FILE BY HAND. */

/* ── Leksihjelp Popup — Glassmorphism Theme ── */#leksihjelp-sidepanel-root {
  --bg: #f0f2f5;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --blur: 12px;
  --accent: #11B49A;
  /* Merkevaretealen er for lys som TEKST på lys grunn. Målt i nettlesaren
     14.09.2026: alle ti stader han blei brukt som tekst låg under WCAG —
     oppslagsordet 2,62:1, ordklassen 2,43:1, appnamnet 2,50:1, mot kravet
     4,5:1 (3:1 for stor tekst). Dette er ei ordbok for elevar, fleire av
     dei med lesevanskar.

     --accent  blir verande merkevarefargen for FYLL, RAMMER, ikon og
     fokusringar, der kravet er eit anna og der han held.
     --accent-text er den same tealen mørkna til han ber tekst: 5,07:1 mot
     den lysaste grunnen han står på. I mørk modus går han andre vegen. */
  --accent-text: #0F766E;
  --accent-light: #7CC7A6;
  --accent-bg: rgba(17, 180, 154, 0.08);
  --text: #1e293b;
  /* Dei to sekundærnivåa var òg for lyse for tekst. Målt i nettlesaren
     14.09.2026 på ordbokkortet: --text-muted ga 2,56:1 på radetikettane i
     bøyingstabellen («Infinitiv», «Presens»), på seksjonsoverskriftene og
     på normeringsnoten. Radetikettane er ikkje pynt — dei er det som seier
     kva forma ved sida av ER. Nivåa er flytta opp eitt hakk kvar, så
     hierarkiet står og alle tre held 4,5:1. */
  --text-secondary: #475569;
  --text-muted: #64748b;
  --success: #22c55e;
  --error: #ef4444;
  --radius: 12px;
  --radius-sm: 8px;
}#leksihjelp-sidepanel-root * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}#leksihjelp-sidepanel-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Glass utility ── */#leksihjelp-sidepanel-root .glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}#leksihjelp-sidepanel-root .glass-subtle {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
}

/* ── Header ── */#leksihjelp-sidepanel-root .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}#leksihjelp-sidepanel-root .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}#leksihjelp-sidepanel-root .logo-icon {
  font-size: 20px;
}#leksihjelp-sidepanel-root .logo h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}#leksihjelp-sidepanel-root .header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}#leksihjelp-sidepanel-root .icon-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}#leksihjelp-sidepanel-root .icon-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Skriv (pencil) button: hidden by default — shown only once the user has
   searched something AND the inline "Trenger du et sted å skrive?" placeholder
   prompt is gone. While the placeholder is still showing, the inline link is
   doing the same job, so the header pencil would just be visual noise. */#leksihjelp-sidepanel-root #skriv-btn { display: none; }#leksihjelp-sidepanel-root .app:has(#view-dictionary.active.has-searched) #skriv-btn {
  display: flex;
}

/* First-run Fest onboarding callout. Sits below the header pointing at the
   Fest button (right side of header). One-shot — gated by a storage flag in
   popup.js#initFestOnboarding so it only appears once per install. */#leksihjelp-sidepanel-root .fest-onboarding {
  position: relative;
  margin: 8px 12px 0;
  padding: 12px 32px 12px 14px;
  background: var(--accent, #15a37f);
  color: white;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 50;
  animation: fest-onboarding-pop 280ms ease-out;
}#leksihjelp-sidepanel-root .fest-onboarding[hidden] { display: none; }#leksihjelp-sidepanel-root .fest-onboarding::before {
  content: '';
  position: absolute;
  top: -8px;
  /* Arrow points up at the Fest button (centred between Skriv and Settings
     in the header-actions row). 110px from right matches the button position
     for the 380px-wide popup. */
  right: 110px;
  width: 14px;
  height: 14px;
  background: var(--accent, #15a37f);
  transform: rotate(45deg);
  border-radius: 2px;
}#leksihjelp-sidepanel-root .fest-onboarding-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}#leksihjelp-sidepanel-root .fest-onboarding-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.95;
}#leksihjelp-sidepanel-root .fest-onboarding-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: white;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}#leksihjelp-sidepanel-root .fest-onboarding-close:hover { background: rgba(255, 255, 255, 0.15); }
@keyframes fest-onboarding-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pin (Fest) Button ── */#leksihjelp-sidepanel-root .pin-btn {
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  animation: pin-pulse 2s ease-in-out infinite;
}#leksihjelp-sidepanel-root .pin-btn .pin-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

@keyframes pin-pulse {

  0%,
  100% {
    background: rgba(255, 255, 255, 0.2);
  }

  50% {
    background: rgba(255, 255, 255, 0.4);
  }
}

/* ── Pin Overlay ── */#leksihjelp-sidepanel-root .pin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}#leksihjelp-sidepanel-root .pin-overlay.hidden {
  display: none;
}

/* ── Language Picker (first-run) ── */#leksihjelp-sidepanel-root .language-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}#leksihjelp-sidepanel-root .language-picker.hidden {
  display: none;
}#leksihjelp-sidepanel-root .language-picker-content {
  padding: 24px;
  max-width: 320px;
  text-align: center;
  width: 100%;
}#leksihjelp-sidepanel-root .language-picker-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}#leksihjelp-sidepanel-root .language-picker-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}#leksihjelp-sidepanel-root .lang-pick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}#leksihjelp-sidepanel-root .lang-pick-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-pick-btn:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .lang-pick-flag {
  font-size: 24px;
}#leksihjelp-sidepanel-root .lang-pick-name {
  font-size: 15px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .btn-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
}#leksihjelp-sidepanel-root .btn-link:hover {
  color: var(--accent-text);
}

/* ── Grammar Picker (first-run step 2) ── */#leksihjelp-sidepanel-root #grammar-picker {
  text-align: center;
}#leksihjelp-sidepanel-root #grammar-picker h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}#leksihjelp-sidepanel-root .grammar-pick-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}#leksihjelp-sidepanel-root .grammar-pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .grammar-pick-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .grammar-pick-name {
  font-size: 15px;
  font-weight: 600;
}

/* ── Language List (settings) ── */#leksihjelp-sidepanel-root .language-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}#leksihjelp-sidepanel-root .lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-size: 13px;
}#leksihjelp-sidepanel-root .lang-option:hover {
  background: rgba(17, 180, 154, 0.05);
  border-color: rgba(17, 180, 154, 0.2);
}#leksihjelp-sidepanel-root .lang-option.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-option.active .lang-option-status {
  color: rgba(255, 255, 255, 0.7);
}#leksihjelp-sidepanel-root .lang-option.downloading {
  opacity: 0.7;
  cursor: wait;
}#leksihjelp-sidepanel-root .lang-option-flag {
  font-size: 18px;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .lang-option-name {
  font-weight: 600;
  flex: 1;
}#leksihjelp-sidepanel-root .lang-option-status {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}#leksihjelp-sidepanel-root .lang-option-status.needs-download {
  color: #f59e0b;
}#leksihjelp-sidepanel-root .lang-option-status.downloading {
  color: var(--accent-text);
}#leksihjelp-sidepanel-root .ui-lang-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}#leksihjelp-sidepanel-root .ui-lang-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .ui-lang-option:hover {
  background: rgba(17, 180, 154, 0.05);
  border-color: rgba(17, 180, 154, 0.2);
}#leksihjelp-sidepanel-root .ui-lang-option.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-option-row {
  display: flex;
  gap: 4px;
}#leksihjelp-sidepanel-root .lang-option-row .lang-option {
  flex: 1;
}#leksihjelp-sidepanel-root .lang-delete-btn {
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .lang-delete-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}#leksihjelp-sidepanel-root .pin-overlay-content {
  padding: 20px;
  max-width: 320px;
  text-align: center;
}#leksihjelp-sidepanel-root .pin-overlay-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--accent-text);
}#leksihjelp-sidepanel-root .pin-steps {
  text-align: left;
  margin-bottom: 16px;
}#leksihjelp-sidepanel-root .pin-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
}#leksihjelp-sidepanel-root .pin-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}#leksihjelp-sidepanel-root .pin-dismiss-btn {
  width: 100%;
}

/* ── Search ── */#leksihjelp-sidepanel-root .search-container {
  padding: 12px 16px 8px;
}#leksihjelp-sidepanel-root .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}#leksihjelp-sidepanel-root .search-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root #search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
}#leksihjelp-sidepanel-root #search-input:focus-visible {
  outline: none;
}#leksihjelp-sidepanel-root .search-bar:focus-within {
  border-color: var(--accent);
}#leksihjelp-sidepanel-root #search-input::placeholder {
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .search-clear {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}#leksihjelp-sidepanel-root .search-clear:hover {
  color: var(--text);
}

/* ── Language Switcher (front page) ── */#leksihjelp-sidepanel-root .lang-switcher {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0;
}#leksihjelp-sidepanel-root .lang-switcher:empty {
  display: none;
}#leksihjelp-sidepanel-root .lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .lang-switch-btn:hover {
  background: rgba(17, 180, 154, 0.05);
  border-color: rgba(17, 180, 154, 0.2);
}#leksihjelp-sidepanel-root .lang-switch-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Mid-switch: the pill is already painted active, and a travelling sheen runs
   across it while the language bundle parses (de.json is ~11.7 MB, so this is
   a real 1–2 s wait). Movement is the point — a static style would still leave
   the student wondering whether the tap registered. */#leksihjelp-sidepanel-root .lang-switch-btn.busy {
  position: relative;
  overflow: hidden;
  cursor: progress;
}#leksihjelp-sidepanel-root .lang-switch-btn.busy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lang-switch-sheen 900ms ease-in-out infinite;
}

@keyframes lang-switch-sheen {
  to { transform: translateX(100%); }
}

/* Respect a reduced-motion preference: keep a visible busy state, drop the
   travelling animation. */
@media (prefers-reduced-motion: reduce) {#leksihjelp-sidepanel-root .lang-switch-btn.busy::after {
    animation: none;
    transform: none;
    background: rgba(255, 255, 255, 0.25);
  }
}#leksihjelp-sidepanel-root .lang-switch-flag {
  font-size: 14px;
}

/* ── FL consolidation (Plan 41-01) ──────────────────────────────────
   The FL pill (de/fr/es) carries a small ▾ chevron when consolidated.
   Right-click (or long-tap) opens .lang-fl-dropdown with the other
   foreign-language options. */#leksihjelp-sidepanel-root .lang-switch-btn.is-fl .lang-switch-chevron {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

/* ── First-FL placeholder pill ──────────────────────────────────────
   Rendered when the student hasn't picked a foreign language yet
   (studentForeignLang unset + currentLang is non-FL). Replaces the
   arbitrary-FL default so the pill row doesn't lie about a choice
   the student hasn't made. Click → onFirstFLPick → modal. */#leksihjelp-sidepanel-root .lang-switch-btn.is-fl-placeholder {
  background: rgba(17, 180, 154, 0.08);
  border-style: dashed;
  border-color: rgba(17, 180, 154, 0.5);
  color: var(--accent-text);
  font-style: italic;
}#leksihjelp-sidepanel-root .lang-switch-btn.is-fl-placeholder:hover {
  background: rgba(17, 180, 154, 0.16);
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .lang-fl-dropdown {
  z-index: 30;
  min-width: 140px;
  background: var(--card-bg, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}#leksihjelp-sidepanel-root .lang-fl-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #3B3B3B);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .lang-fl-dropdown-item:hover {
  background: rgba(17, 180, 154, 0.08);
  border-color: rgba(17, 180, 154, 0.25);
}#leksihjelp-sidepanel-root .lang-fl-dropdown-item.active {
  background: var(--accent, #11B49A);
  color: white;
}#leksihjelp-sidepanel-root .lang-fl-dropdown-check {
  margin-left: auto;
  font-weight: 700;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-fl-dropdown {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.08);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-fl-dropdown-item {
  color: rgba(255, 255, 255, 0.85);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-fl-dropdown-item:hover {
  background: rgba(17, 180, 154, 0.15);
}#leksihjelp-sidepanel-root .search-direction {
  display: flex;
  overflow: hidden;
}#leksihjelp-sidepanel-root .dir-btn {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}#leksihjelp-sidepanel-root .dir-btn.active {
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
}

/* ── Results ── */#leksihjelp-sidepanel-root .results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 12px;
}#leksihjelp-sidepanel-root .results-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
  text-align: center;
  gap: 16px;
}#leksihjelp-sidepanel-root .cross-lang-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}#leksihjelp-sidepanel-root .cross-lang-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}#leksihjelp-sidepanel-root .cross-lang-text {
  font-size: 13px;
  color: var(--text);
}#leksihjelp-sidepanel-root .cross-lang-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .cross-lang-btn:hover {
  filter: brightness(1.1);
}#leksihjelp-sidepanel-root .cross-standard-note { font-size: 12px; color: #64748b; margin-bottom: 4px; }#leksihjelp-sidepanel-root .cross-standard-switch { background: none; border: none; color: #11B49A; font-size: 12px; cursor: pointer; padding: 2px 0; }#leksihjelp-sidepanel-root .cross-standard-switch:hover { text-decoration: underline; }#leksihjelp-sidepanel-root .wish-word-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}#leksihjelp-sidepanel-root .wish-word-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
/* Known-form notice (v3.0.127): the missed query IS a valid word per the
   spell-check accept-list — reassure the student before the wish button. */#leksihjelp-sidepanel-root .wish-word-known {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
}#leksihjelp-sidepanel-root .wish-word-ext-link {
  display: inline-block;
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--color-accent, #2563eb);
  text-decoration: underline;
}#leksihjelp-sidepanel-root .wish-word-btn {
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #1e293b;
  transition: background 0.15s;
}#leksihjelp-sidepanel-root .wish-word-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}#leksihjelp-sidepanel-root .wish-word-btn:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .wish-word-sent {
  margin: 0;
  font-size: 13px;
  color: #16a34a;
  font-weight: 500;
}#leksihjelp-sidepanel-root .skriv-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(17, 180, 154, 0.06);
  border: 1px solid rgba(17, 180, 154, 0.15);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  transition: background 0.15s;
}#leksihjelp-sidepanel-root .skriv-link:hover {
  background: rgba(17, 180, 154, 0.12);
}#leksihjelp-sidepanel-root .skriv-link-icon {
  font-size: 16px;
}#leksihjelp-sidepanel-root .skriv-link span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}#leksihjelp-sidepanel-root .skriv-link-text {
  font-weight: 500;
  color: #11B49A;
}#leksihjelp-sidepanel-root .skriv-link-note {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}#leksihjelp-sidepanel-root .fallback-hint {
  padding: 8px 14px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(17, 180, 154, 0.06);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}#leksihjelp-sidepanel-root .result-card {
  padding: 12px;
  margin-bottom: 8px;
  transition: transform 0.15s;
}#leksihjelp-sidepanel-root .result-card:hover {
  transform: translateY(-1px);
}#leksihjelp-sidepanel-root .result-basic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}#leksihjelp-sidepanel-root .result-word-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Every allowed spelling of a headword is a `.result-word` — one class, so
   the equal treatment §15-4 requires cannot be undone by a later rule that
   only knows about "the first one". Do NOT add :first-child styling here. */#leksihjelp-sidepanel-root .result-word {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-text);
}

/* Separator between likestilte skrivemåter in the head (vei / veg). Muted so
   it reads as punctuation, never as one form pointing at another. */#leksihjelp-sidepanel-root .result-word-sep {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted, #888);
  margin: 0 -2px;
}

/* Bøyingstabell with one column per allowed form. Four-spelling words
   (nynorsk «ønske») overflow a narrow popup; scroll the table rather than
   shrink the later columns, which would favour the earlier ones. */#leksihjelp-sidepanel-root .likestilte-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* macOS hides overlay scrollbars until something scrolls, so a four-spelling
     table showed «bjerkeskau» clipped to 28 % of its column with NOTHING on
     screen to say a fourth form existed. Measured 2026-08-17 on «bjørkeskog»:
     wrapper 394 px, table 461 px, 67 px hidden — identical at 1280, 1440 and
     1920, because the 460 px results column caps it and not the screen.
     A permanently visible track is the neutral mitigation: it changes no
     column's width, colour or weight, so the § 15-4 reasoning above still
     holds, and the reader can at least see that the row continues. It does
     NOT make the fourth form as visible as the first — that needs a layout
     decision, and it is recorded in the approval log rather than guessed at
     here.

     NB: do not add `scrollbar-width: thin` here. Chromium honours the standard
     property and then ignores the ::-webkit-scrollbar rules below, which puts
     the overlay scrollbar back and undoes the whole point — measured, not
     assumed. */
}#leksihjelp-sidepanel-root .likestilte-scroll::-webkit-scrollbar {
  height: 8px;
}#leksihjelp-sidepanel-root .likestilte-scroll::-webkit-scrollbar-track {
  background: transparent;
}#leksihjelp-sidepanel-root .likestilte-scroll::-webkit-scrollbar-thumb {
  background: var(--text-muted, #888);
  border-radius: 4px;
}

/* Neutralise the two-column inheritance. `.conjugation-table td:last-child`
   paints the value column with the accent colour, which is right for a
   label/value table but is exactly the graphic favouring § 15-4 forbids once
   the columns are RIVAL SPELLINGS: it would green `veg` and leave `vei` plain.
   Every form cell here is identical, whatever its position. */#leksihjelp-sidepanel-root .likestilte-table td {
  color: var(--text);
  font-weight: 400;
}

/* Column headers are the spellings themselves — all of them get the accent,
   none of them alone. */#leksihjelp-sidepanel-root .likestilte-table th[scope="col"] {
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
}#leksihjelp-sidepanel-root .likestilte-table th[scope="row"] {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .likestilte-table td {
  white-space: nowrap;
}#leksihjelp-sidepanel-root .likestilte-note {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 0 0 6px;
}

/* Rolle-note: seier at oppslaget er ei norsk gjengiving av eit
   framandspråkleg uttrykk og ikkje eit ordbokoppslag. Same dempa uttrykk som
   .likestilte-note, av di han er ei opplysning og ikkje ei åtvaring — men med
   ei venstrelinje, så han ikkje les som endå ein bøyingsmerknad. */#leksihjelp-sidepanel-root .role-note {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 0 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border, #e0e0e0);
}

/* Norsk ordbank-markør (Språkrådet § 15-4 på metadata-nivå). Grøn pille
   berre der dommen er «verified»; dei andre statusane er dempa omriss, så
   «ikkje i Ordbank» ikkje les som ein feil. Ingen markør = ingen påstand. */#leksihjelp-sidepanel-root .result-norming {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent-text);
  font-weight: 500;
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .result-norming::after {
  content: ' ▾';
  opacity: 0.7;
}#leksihjelp-sidepanel-root .result-norming[aria-expanded="true"]::after {
  content: ' ▴';
}#leksihjelp-sidepanel-root .norming-note--inline {
  margin: 6px 0 0;
}#leksihjelp-sidepanel-root .result-norming--absent, #leksihjelp-sidepanel-root .result-norming--pos, #leksihjelp-sidepanel-root .result-norming--vedtak {
  background: transparent;
  color: var(--text-muted, #888);
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 400;
}#leksihjelp-sidepanel-root .norming-note {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 10px 0 0;
}#leksihjelp-sidepanel-root .audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-text);
  cursor: pointer;
  transition: all 0.15s ease;
}#leksihjelp-sidepanel-root .audio-btn:hover {
  background: var(--accent);
  color: white;
}#leksihjelp-sidepanel-root .audio-btn.playing {
  background: var(--accent);
  color: white;
}#leksihjelp-sidepanel-root .result-translation {
  font-size: 14px;
  color: var(--text);
}
/* Fleirtydig gloss (C3, 06.09.2026): éin <li> per tyding i staden for
   « | »-samanlimt linje. Nummereringa er sjølve informasjonen — «bok» er
   to ord med same bøying, og lesaren skal sjå at det er to. */#leksihjelp-sidepanel-root .result-senses {
  margin: 0;
  padding-left: 1.4em;
}#leksihjelp-sidepanel-root .result-senses li {
  margin: 0 0 3px;
}#leksihjelp-sidepanel-root .result-senses li::marker {
  color: var(--text-muted, #888);
  font-size: 12px;
}#leksihjelp-sidepanel-root .senses-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}#leksihjelp-sidepanel-root .sense-item {
  padding: 6px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}#leksihjelp-sidepanel-root .sense-trigger {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 2px;
}#leksihjelp-sidepanel-root .sense-forms {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}#leksihjelp-sidepanel-root .sense-example {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}#leksihjelp-sidepanel-root .sense-example-src {
  font-style: italic;
}[data-theme="dark"] #leksihjelp-sidepanel-root .sense-item {
  background: rgba(255, 255, 255, 0.04);
}#leksihjelp-sidepanel-root .false-friend-banner {
  margin: 6px 0 4px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff4d6;
  border-left: 3px solid #e0a800;
  font-size: 12px;
  line-height: 1.35;
}#leksihjelp-sidepanel-root .false-friend-heading {
  display: block;
  font-weight: 600;
  color: #7a5a00;
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .false-friend-item + .false-friend-item {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}#leksihjelp-sidepanel-root .false-friend-form {
  font-style: italic;
  font-weight: 600;
  color: var(--text);
}#leksihjelp-sidepanel-root .false-friend-meaning {
  color: var(--text-muted);
  margin-left: 6px;
}#leksihjelp-sidepanel-root .false-friend-warning {
  margin: 4px 0 0;
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .false-friend-banner {
  background: rgba(224, 168, 0, 0.12);
  border-left-color: #e0a800;
}[data-theme="dark"] #leksihjelp-sidepanel-root .false-friend-heading {
  color: #ffcf55;
}#leksihjelp-sidepanel-root .false-friend-les-mer-btn {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  color: #7a5a00;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}#leksihjelp-sidepanel-root .false-friend-les-mer-btn:hover {
  opacity: 0.8;
}[data-theme="dark"] #leksihjelp-sidepanel-root .false-friend-les-mer-btn {
  color: #ffcf55;
}#leksihjelp-sidepanel-root .inflection-hint {
  font-size: 12px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px;
  margin: 4px 0 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}#leksihjelp-sidepanel-root .inflection-grunnform-btn {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .inflection-grunnform-btn:hover {
  opacity: 1;
}#leksihjelp-sidepanel-root .result-meta {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* 06.09: a fourth chip overflowed the card on a phone */
  gap: 6px;
  margin-top: 2px;
}#leksihjelp-sidepanel-root .result-pos, #leksihjelp-sidepanel-root .result-gender, #leksihjelp-sidepanel-root .result-aux {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent-text);
  font-weight: 500;
}

/* Hjelpeverbmerket står med same vekt som ordklassen, ikkje som eit varsel:
   det er ein tilleggsopplysning om bruken, ikkje ei åtvaring om forma.
   Det er DIFOR det arvar fargane til .result-pos i staden for ein dempa
   variant: fyrste framlegget sette --text-muted på --accent-bg, og målt i
   nettlesaren ga det 2,56:1 mot bakgrunnen under. WCAG krev 4,5:1 for
   11px-tekst, og dette er ei ordbok for elevar. Skiljet ligg no i ramma.

   Ingen `opacity` her, av same grunn: fyrste retting sette 0.85, og det
   gjorde merket dårlegare enn .result-pos i staden for likt.

   MERK at .result-pos sjølv berre held 2,43:1 i lys modus (--accent
   #11B49A på kvitt), og .result-word 2,62:1. Det er ein eldre feil som
   gjeld kvart einaste kort, ikkje noko dette merket innførte, og han er
   meldt til Geir med tal. Merket held seg med vilje TIL den etablerte
   handsaminga i staden for å bli mørkare åleine: eit lesbart nytt merke
   ved sida av ein ulesbar ordklasse er verre enn to like, av di det
   skjuler at feilen finst. Blir --accent retta, blir begge retta. */#leksihjelp-sidepanel-root .result-aux {
  border: 1px solid currentColor;
}#leksihjelp-sidepanel-root .explore-btn {
  display: block;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}#leksihjelp-sidepanel-root .explore-btn:hover {
  text-decoration: underline;
}#leksihjelp-sidepanel-root .result-expanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 180, 154, 0.15);
}#leksihjelp-sidepanel-root .expanded-section {
  margin-bottom: 10px;
}#leksihjelp-sidepanel-root .expanded-section:last-child {
  margin-bottom: 0;
}#leksihjelp-sidepanel-root .expanded-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .expanded-section p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}#leksihjelp-sidepanel-root .example {
  margin-bottom: 6px;
}#leksihjelp-sidepanel-root .example-sentence {
  font-style: italic;
  color: var(--text);
}#leksihjelp-sidepanel-root .example-translation {
  color: var(--text-muted);
  font-size: 12px;
}

/* Plural badge */#leksihjelp-sidepanel-root .result-plural {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  font-weight: 500;
}#leksihjelp-sidepanel-root .result-cefr {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(17, 180, 154, 0.08);
  color: #11B49A;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ── Compound Card (Phase 17) ── */#leksihjelp-sidepanel-root .compound-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  font-weight: 600;
}#leksihjelp-sidepanel-root .compound-breakdown {
  margin: 10px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
}#leksihjelp-sidepanel-root .compound-breakdown-sep {
  color: var(--text-muted);
  font-weight: 400;
  padding: 0 2px;
}#leksihjelp-sidepanel-root .compound-components {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}#leksihjelp-sidepanel-root .compound-component-btn {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(17, 180, 154, 0.25);
  border-radius: 6px;
  background: rgba(17, 180, 154, 0.06);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-component-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-badge {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-component-btn {
  background: rgba(17, 180, 154, 0.1);
  border-color: rgba(17, 180, 154, 0.3);
}

/* Phase 24 COMP-01: Compound suggestions */#leksihjelp-sidepanel-root .compound-suggestions-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 0 2px;
}#leksihjelp-sidepanel-root .compound-suggestion {
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-suggestion:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(17, 180, 154, 0.12);
}#leksihjelp-sidepanel-root .compound-breakdown-compact {
  margin: 6px 0 0;
  font-size: 13px;
}

/* Phase 24 COMP-02: Pedagogy note */#leksihjelp-sidepanel-root .compound-pedagogy {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}#leksihjelp-sidepanel-root .compound-pedagogy-link {
  color: var(--accent-text);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}#leksihjelp-sidepanel-root .compound-pedagogy-link:hover {
  text-decoration-style: solid;
}

/* Phase 24 COMP-04: Translation guess */#leksihjelp-sidepanel-root .compound-guess {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.04);
  border-radius: var(--radius-sm);
  border-left: 3px solid rgba(124, 58, 237, 0.3);
}#leksihjelp-sidepanel-root .compound-guess-label {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}#leksihjelp-sidepanel-root .compound-guess-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Tier-3 (possible-compound) meaning helper: clickable part chips prompting
   the student to look up each component's dictionary entry. */#leksihjelp-sidepanel-root .compound-meaning-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}#leksihjelp-sidepanel-root .compound-meaning-part {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(17, 180, 154, 0.25);
  border-radius: 6px;
  background: rgba(17, 180, 154, 0.06);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-meaning-part:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-meaning-part {
  background: rgba(17, 180, 154, 0.1);
  border-color: rgba(17, 180, 154, 0.3);
}

/* Inline compound breakdown shown on an article card (barnehage → barn+e+hage) */#leksihjelp-sidepanel-root .compound-inline-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  font-size: 13px;
}#leksihjelp-sidepanel-root .compound-inline-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}#leksihjelp-sidepanel-root .compound-inline-part {
  padding: 2px 9px;
  border: 1px solid rgba(17, 180, 154, 0.25);
  border-radius: 5px;
  background: rgba(17, 180, 154, 0.06);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-inline-part:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Eit bunde ledd frå Ordbank («bade-», «vass-»): rett ledd, men ikkje eit
   oppslagsord, så det står som tekst og ikkje som knapp. */#leksihjelp-sidepanel-root .compound-inline-bound {
  padding: 2px 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .compound-inline-fuge {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}#leksihjelp-sidepanel-root .compound-inline-sep {
  color: var(--text-muted);
  font-size: 12px;
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-inline-part {
  background: rgba(17, 180, 154, 0.1);
  border-color: rgba(17, 180, 154, 0.3);
}

/* Kjeldelinja nedst på eit nb/nn-kort (Språkrådet 30.09.2026). Dempa, men
   lesbar: ho er ei lisensplikt, ikkje pynt. */#leksihjelp-sidepanel-root .source-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}#leksihjelp-sidepanel-root .source-note-link {
  color: var(--accent-text);
  white-space: nowrap;
}

/* Samansetjing med fleire tillatne former (Språkrådet 30.09.2026): linja
   nemner inga form før lesaren har valt ei i hovudet. */#leksihjelp-sidepanel-root .compound-inline-pick {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}#leksihjelp-sidepanel-root .compound-inline-variant {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}#leksihjelp-sidepanel-root .compound-inline-variant[hidden], #leksihjelp-sidepanel-root .compound-inline-pick[hidden] {
  display: none;
}

/* Formene i hovudet som knappar. SAME stil på alle — understrekinga seier
   berre «kan veljast». Den valde forma får heil strek; det er lesaren sitt
   val, ikkje vårt. */#leksihjelp-sidepanel-root .result-word-pick {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}#leksihjelp-sidepanel-root .result-word-pick[aria-pressed="true"] {
  text-decoration: underline solid;
}#leksihjelp-sidepanel-root .result-word-pick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Tier-3 compound vote — "is this a real compound?" student feedback */#leksihjelp-sidepanel-root .compound-vote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  font-size: 12px;
}#leksihjelp-sidepanel-root .compound-vote-prompt {
  color: var(--text-secondary);
}#leksihjelp-sidepanel-root .compound-vote-btns {
  display: flex;
  gap: 6px;
}#leksihjelp-sidepanel-root .compound-vote-btn {
  padding: 3px 12px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .compound-vote-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .compound-vote-thanks {
  font-size: 12px;
  color: var(--accent-text);
  font-weight: 600;
}#leksihjelp-sidepanel-root .compound-vote-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Compound qualified-guess declension table (inflection follows last element) */#leksihjelp-sidepanel-root .compound-declension-guess {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.04);
  border-radius: var(--radius-sm);
  border-left: 3px solid rgba(124, 58, 237, 0.3);
}#leksihjelp-sidepanel-root .compound-declension-guess .declension-table {
  margin-top: 4px;
}

/* Phase 24 COMP-03: Back-navigation */#leksihjelp-sidepanel-root .compound-back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--accent-text);
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 8px;
  font-weight: 500;
}#leksihjelp-sidepanel-root .compound-back-link::before {
  content: "\2190 ";
}#leksihjelp-sidepanel-root .compound-back-link:hover {
  text-decoration: underline;
}[data-theme="dark"] #leksihjelp-sidepanel-root .compound-guess {
  background: rgba(124, 58, 237, 0.08);
  border-left-color: rgba(124, 58, 237, 0.4);
}

/* Conjugation table */#leksihjelp-sidepanel-root .conjugation-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}#leksihjelp-sidepanel-root .conjugation-table td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}#leksihjelp-sidepanel-root .conjugation-table td:first-child {
  color: var(--text-muted);
  font-weight: 500;
  width: 40%;
}

/* Accent the value column of a LABEL/VALUE conjugation table. Excluded for
   .likestilte-table, whose columns are rival spellings rather than one label
   and one value: there, accenting the last column greens `veg` and leaves
   `vei` plain — the graphic favouring Språkrådet § 15-4 forbids. The exclusion
   lives on this rule because it out-specifies any override
   (.conjugation-table td:last-child is 0-2-1; .likestilte-table td is 0-1-1). */#leksihjelp-sidepanel-root .conjugation-table:not(.likestilte-table) td:last-child {
  color: var(--accent-text);
  font-weight: 600;
}
/* Per-paradigm transitivity note in the preteritum cell (henge: hang
   «intransitiv» / hengte «transitiv»). */#leksihjelp-sidepanel-root .conjugation-table .conj-note {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 0.85em;
}
/* "Les mer →" link under the conjugation table → transitiv/intransitiv lesson. */#leksihjelp-sidepanel-root .conjugation-lesmer {
  margin-top: 6px;
}#leksihjelp-sidepanel-root .conj-transintr-btn {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}#leksihjelp-sidepanel-root .conj-transintr-btn:hover {
  opacity: 0.8;
}#leksihjelp-sidepanel-root .conjugation-table tr:last-child td {
  border-bottom: none;
}

/* ── Views ── */#leksihjelp-sidepanel-root .view {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}#leksihjelp-sidepanel-root .view.active {
  display: flex;
}

/* Settings view needs to scroll */#leksihjelp-sidepanel-root #view-settings {
  overflow-y: auto;
}

/* Test view needs to scroll — findings list grows past the popup height. */#leksihjelp-sidepanel-root #view-test {
  overflow-y: auto;
}

/* Library view: keep the language picker pinned at top, scroll the lesson list.
   #view-library is the flex column (.view); the inner div holds the mounted
   list and must scroll (min-height:0 lets a flex child shrink below content). */#leksihjelp-sidepanel-root #view-library-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Settings ── */#leksihjelp-sidepanel-root .settings-back {
  padding: 12px 16px 4px;
}#leksihjelp-sidepanel-root .text-btn {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}#leksihjelp-sidepanel-root .text-btn:hover {
  text-decoration: underline;
}#leksihjelp-sidepanel-root .settings-group {
  margin: 8px 16px;
  padding: 14px;
}#leksihjelp-sidepanel-root .settings-group h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .settings-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Paused-sites list (settings) */#leksihjelp-sidepanel-root .paused-sites-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .paused-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
}#leksihjelp-sidepanel-root .paused-site-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}#leksihjelp-sidepanel-root .paused-site-host {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .paused-site-meta {
  font-size: 11px;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .paused-site-resume {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .paused-site-resume:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Min ordliste — personal word list (all languages) */#leksihjelp-sidepanel-root .personal-words-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}#leksihjelp-sidepanel-root .personal-words-lang {
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .personal-words-lang-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .personal-words-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .personal-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
}

/* Vis alle / Vis færre — one per language block that exceeds the collapsed
   count. Deliberately a quiet text button, not a filled one: it sits under a
   list of the pupil's own words and must not outweigh them. */#leksihjelp-sidepanel-root .personal-words-toggle {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text, #0a7d55);
  cursor: pointer;
}#leksihjelp-sidepanel-root .personal-words-toggle:hover {
  background: var(--bg-alt, rgba(0,0,0,0.04));
}#leksihjelp-sidepanel-root .personal-words-toggle:focus-visible {
  outline: 2px solid var(--accent, #0a7d55);
  outline-offset: 2px;
}#leksihjelp-sidepanel-root .personal-word {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .personal-word-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}#leksihjelp-sidepanel-root .personal-word-remove:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .personal-data-error {
  color: var(--error);
}#leksihjelp-sidepanel-root .settings-version {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.7;
  margin: 12px 0 4px;
}#leksihjelp-sidepanel-root .report-select, #leksihjelp-sidepanel-root .report-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  color: var(--text);
  outline: none;
  margin-bottom: 8px;
  font-family: inherit;
  resize: vertical;
}#leksihjelp-sidepanel-root .report-select:focus, #leksihjelp-sidepanel-root .report-textarea:focus {
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .report-btn {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}#leksihjelp-sidepanel-root .report-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}#leksihjelp-sidepanel-root .report-status {
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;
}#leksihjelp-sidepanel-root .report-ok { color: #22c55e; }#leksihjelp-sidepanel-root .report-err { color: #ef4444; }

/* ── Phase 27: Exam mode (badge + locked caption) ── */#leksihjelp-sidepanel-root .exam-mode-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}#leksihjelp-sidepanel-root .exam-mode-badge[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .exam-mode-locked-caption {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}#leksihjelp-sidepanel-root .exam-mode-locked-caption[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .exam-mode-dev-btn {
  display: block;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
}#leksihjelp-sidepanel-root .exam-mode-dev-btn:hover {
  opacity: 1;
}#leksihjelp-sidepanel-root #exam-mode-toggle:disabled ~ .toggle-slider {
  opacity: 0.7;
  cursor: not-allowed;
}#leksihjelp-sidepanel-root #exam-mode-toggle:disabled {
  cursor: not-allowed;
}#leksihjelp-sidepanel-root .glass-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}#leksihjelp-sidepanel-root .glass-input:focus {
  border-color: var(--accent);
}#leksihjelp-sidepanel-root select.glass-input {
  cursor: pointer;
}#leksihjelp-sidepanel-root .code-input-row {
  display: flex;
  gap: 8px;
}#leksihjelp-sidepanel-root .code-input-row .glass-input {
  flex: 1;
}#leksihjelp-sidepanel-root .btn-primary {
  padding: 8px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}#leksihjelp-sidepanel-root .btn-primary:hover {
  opacity: 0.9;
}#leksihjelp-sidepanel-root .btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root #subscribe-section .btn-primary {
  width: 100%;
  margin-top: 8px;
}#leksihjelp-sidepanel-root #logout-btn {
  margin-top: 10px;
}#leksihjelp-sidepanel-root .settings-note {
  margin-top: 4px;
}#leksihjelp-sidepanel-root .btn-secondary {
  padding: 8px 14px;
  background: var(--accent-bg);
  color: var(--accent-text);
  border: 1px solid rgba(17, 180, 154, 0.2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}#leksihjelp-sidepanel-root .btn-secondary:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .code-status {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
}#leksihjelp-sidepanel-root .code-status.success {
  color: var(--success);
}#leksihjelp-sidepanel-root .code-status.error {
  color: var(--error);
}

/* Toggle */#leksihjelp-sidepanel-root .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  cursor: pointer;
}#leksihjelp-sidepanel-root .toggle-row input[type="checkbox"] {
  display: none;
}#leksihjelp-sidepanel-root .toggle-slider {
  width: 40px;
  height: 22px;
  background: #cbd5e1;
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}#leksihjelp-sidepanel-root .toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}#leksihjelp-sidepanel-root .toggle-row input:checked+.toggle-slider {
  background: var(--accent);
}#leksihjelp-sidepanel-root .toggle-row input:checked+.toggle-slider::after {
  transform: translateX(18px);
}

/* ── Grammar Presets ── */#leksihjelp-sidepanel-root .grammar-preset-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}#leksihjelp-sidepanel-root .grammar-preset-pill {
  flex: 1;
  padding: 7px 4px;
  border: 1.5px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.35);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}#leksihjelp-sidepanel-root .grammar-preset-pill:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .grammar-preset-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}#leksihjelp-sidepanel-root .grammar-customize-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 6px;
  transition: color 0.15s;
}#leksihjelp-sidepanel-root .grammar-customize-btn:hover {
  color: var(--text);
}#leksihjelp-sidepanel-root .grammar-customize-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}#leksihjelp-sidepanel-root .grammar-customize-btn.expanded .grammar-customize-arrow {
  transform: rotate(180deg);
}#leksihjelp-sidepanel-root .grammar-features-collapsed {
  display: none;
}#leksihjelp-sidepanel-root .grammar-features-expanded {
  display: block;
}

/* ── Grammar Settings ── */#leksihjelp-sidepanel-root .grammar-category {
  margin-bottom: 12px;
}#leksihjelp-sidepanel-root .grammar-category:last-child {
  margin-bottom: 0;
}#leksihjelp-sidepanel-root .grammar-category-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}#leksihjelp-sidepanel-root .grammar-features-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}#leksihjelp-sidepanel-root .grammar-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}#leksihjelp-sidepanel-root .grammar-feature-item:hover {
  background: rgba(255, 255, 255, 0.6);
}#leksihjelp-sidepanel-root .grammar-feature-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}#leksihjelp-sidepanel-root .grammar-feature-name {
  font-size: 13px;
  color: var(--text);
}

/* ── Bottom Nav ── */#leksihjelp-sidepanel-root .bottom-nav {
  display: flex;
  border-radius: 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: none;
  border-left: none;
  border-right: none;
  background: var(--glass-bg);
}#leksihjelp-sidepanel-root .nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s;
}#leksihjelp-sidepanel-root .nav-btn.active {
  color: var(--accent-text);
}#leksihjelp-sidepanel-root .nav-btn:hover {
  color: var(--accent-light);
}

/* ── Pause nav button ── */#leksihjelp-sidepanel-root .pause-nav-btn {
  position: relative;
}#leksihjelp-sidepanel-root .pause-nav-btn.paused {
  color: var(--error);
}#leksihjelp-sidepanel-root .pause-nav-btn.paused .pause-icon {
  display: none;
}#leksihjelp-sidepanel-root .pause-nav-btn.paused .play-icon {
  display: block !important;
}#leksihjelp-sidepanel-root .pause-nav-btn:not(.paused) .play-icon {
  display: none;
}

/* Pause active indicator bar */#leksihjelp-sidepanel-root .pause-nav-btn.paused::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--error);
}

/* ── Keyboard shortcut list ── */#leksihjelp-sidepanel-root .shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}#leksihjelp-sidepanel-root .shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}#leksihjelp-sidepanel-root .shortcut-row kbd {
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-weight: 600;
}

/* ── Vipps Login ── */#leksihjelp-sidepanel-root .btn-vipps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: #ff5b24;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}#leksihjelp-sidepanel-root .btn-vipps:hover {
  opacity: 0.9;
}#leksihjelp-sidepanel-root .btn-vipps:disabled {
  opacity: 0.5;
  cursor: default;
}#leksihjelp-sidepanel-root .btn-vipps svg {
  fill: white;
}

/* .btn-vipps sets display:flex, which otherwise beats the UA [hidden]
   rule's implicit display:none — without this, #acct-action stays
   visible (an empty orange pill) whenever the model's action.kind is
   'none'. */#leksihjelp-sidepanel-root .btn-vipps[hidden] {
  display: none;
}

/* Top-up button */#leksihjelp-sidepanel-root .btn-topup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(17, 180, 154, 0.3);
  border-radius: 8px;
  background: rgba(17, 180, 154, 0.05);
  color: #11B49A;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}#leksihjelp-sidepanel-root .btn-topup:hover {
  background: rgba(17, 180, 154, 0.12);
}#leksihjelp-sidepanel-root .btn-topup:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Vipps yearly button */#leksihjelp-sidepanel-root .btn-secondary-vipps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 10px 16px;
  border: 2px solid #11B49A;
  border-radius: 10px;
  background: white;
  color: #11B49A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}#leksihjelp-sidepanel-root .btn-secondary-vipps:hover {
  background: #11B49A;
  color: white;
}#leksihjelp-sidepanel-root .btn-secondary-vipps:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Legacy Code Section ── */#leksihjelp-sidepanel-root .legacy-code-section {
  margin-top: 10px;
}#leksihjelp-sidepanel-root .legacy-code-toggle {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
}#leksihjelp-sidepanel-root .legacy-code-toggle:hover {
  color: var(--text-secondary);
}#leksihjelp-sidepanel-root .legacy-code-content {
  margin-top: 8px;
}

/* ── User Info ── */#leksihjelp-sidepanel-root .user-info {
  margin-bottom: 8px;
}#leksihjelp-sidepanel-root .user-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}#leksihjelp-sidepanel-root .user-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Account panel (state-driven: one headline, one note, one action) ── */#leksihjelp-sidepanel-root .acct-headline {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}#leksihjelp-sidepanel-root .acct-headline:empty {
  display: none;
}

/* ── Usage Bar ── */#leksihjelp-sidepanel-root .usage-bar-container {
  margin-top: 8px;
}#leksihjelp-sidepanel-root .usage-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .usage-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
}#leksihjelp-sidepanel-root .usage-bar-fill {
  height: 100%;
  background: #22c55e;
  /* green — plenty remaining */
  border-radius: 3px;
  transition: width 0.3s ease;
}#leksihjelp-sidepanel-root .usage-bar-fill.warning {
  background: #f59e0b;
  /* orange — low */
}#leksihjelp-sidepanel-root .usage-bar-fill.critical {
  background: #ef4444;
  /* red — critical */
}#leksihjelp-sidepanel-root .usage-rollover-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Utility ── */#leksihjelp-sidepanel-root .hidden {
  display: none !important;
}

/* Scrollbar - shared styles */#leksihjelp-sidepanel-root .results::-webkit-scrollbar, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar {
  width: 8px;
}#leksihjelp-sidepanel-root .results::-webkit-scrollbar-track, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}#leksihjelp-sidepanel-root .results::-webkit-scrollbar-thumb, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar-thumb {
  background: rgba(17, 180, 154, 0.35);
  border-radius: 4px;
}#leksihjelp-sidepanel-root .results::-webkit-scrollbar-thumb:hover, #leksihjelp-sidepanel-root #view-settings::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 180, 154, 0.55);
}

/* ── Dark Mode ── */[data-theme="dark"] #leksihjelp-sidepanel-root {
  --bg: #1a1b2e;
  --glass-bg: rgba(30, 32, 55, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --text: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --accent-bg: rgba(17, 180, 154, 0.15);
  --accent-text: #2DD4BF;
}[data-theme="dark"] #leksihjelp-sidepanel-root .glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}[data-theme="dark"] #leksihjelp-sidepanel-root .glass-subtle {
  background: rgba(30, 32, 55, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}[data-theme="dark"] #leksihjelp-sidepanel-root #search-input {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root #search-input::placeholder {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .glass-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-translation {
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-expanded {
  border-top-color: rgba(17, 180, 154, 0.2);
}[data-theme="dark"] #leksihjelp-sidepanel-root .conjugation-table td:first-child {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-preset-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-preset-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-preset-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-feature-item {
  background: rgba(255, 255, 255, 0.06);
}[data-theme="dark"] #leksihjelp-sidepanel-root .grammar-feature-item:hover {
  background: rgba(255, 255, 255, 0.1);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-plural {
  background: rgba(34, 197, 94, 0.12);
}[data-theme="dark"] #leksihjelp-sidepanel-root .bottom-nav {
  background: rgba(30, 32, 55, 0.85);
  border-top-color: rgba(255, 255, 255, 0.08);
}[data-theme="dark"] #leksihjelp-sidepanel-root .btn-secondary {
  background: var(--accent-bg);
  border-color: rgba(17, 180, 154, 0.3);
}[data-theme="dark"] #leksihjelp-sidepanel-root .shortcut-row kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .pin-overlay {
  background: rgba(0, 0, 0, 0.6);
}[data-theme="dark"] #leksihjelp-sidepanel-root .toggle-slider {
  background: #475569;
}[data-theme="dark"] #leksihjelp-sidepanel-root .usage-bar {
  background: rgba(255, 255, 255, 0.08);
}[data-theme="dark"] #leksihjelp-sidepanel-root .legacy-code-toggle {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .legacy-code-toggle:hover {
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-card:hover {
  background: rgba(255, 255, 255, 0.04);
}[data-theme="dark"] #leksihjelp-sidepanel-root .audio-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}[data-theme="dark"] #leksihjelp-sidepanel-root .audio-btn:hover {
  background: var(--accent);
  color: white;
}[data-theme="dark"] #leksihjelp-sidepanel-root .result-word {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .explore-btn {
  color: var(--accent-text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .search-direction button {
  color: var(--text-muted);
}[data-theme="dark"] #leksihjelp-sidepanel-root .search-direction button.active {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-switcher button {
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-switcher button.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .settings-group h3 {
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-option {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Plan 23-04: vocab update notice ─────────────────────────────────
   Non-blocking banner just under the header. Stacks vertically with the
   plan 23-03 hydration pill (when both are visible). */#leksihjelp-sidepanel-root .lexi-updates-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 12px 0;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}#leksihjelp-sidepanel-root .lexi-updates-notice[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .lexi-updates-msg {
  flex: 1 1 auto;
  line-height: 1.3;
}#leksihjelp-sidepanel-root .lexi-updates-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: rgb(99, 102, 241);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}#leksihjelp-sidepanel-root .lexi-updates-btn:hover:not(:disabled) {
  background: rgb(79, 82, 221);
}#leksihjelp-sidepanel-root .lexi-updates-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-updates-notice {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.40);
}

/* ── Plan 23-03: hydration status pills ──────────────────────────────
   Per-language progress indicator for the service-worker bootstrap.
   One pill per language, horizontal flex row, auto-hides on success. */#leksihjelp-sidepanel-root .lexi-vocab-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 12px 0;
  font-size: 12px;
  line-height: 1.3;
}#leksihjelp-sidepanel-root .lexi-vocab-status[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .lexi-vocab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: opacity 0.2s ease;
}#leksihjelp-sidepanel-root .lexi-vocab-pill.is-fetching {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.25);
  color: var(--text);
}#leksihjelp-sidepanel-root .lexi-vocab-pill.is-ready {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.30);
  color: #15803d;
}#leksihjelp-sidepanel-root .lexi-vocab-pill.is-error {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
  color: #b91c1c;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-vocab-pill.is-fetching {
  background: rgba(99, 102, 241, 0.20);
  border-color: rgba(99, 102, 241, 0.40);
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-vocab-pill.is-ready {
  background: rgba(34, 197, 94, 0.20);
  color: #86efac;
}[data-theme="dark"] #leksihjelp-sidepanel-root .lexi-vocab-pill.is-error {
  background: rgba(239, 68, 68, 0.20);
  color: #fca5a5;
}

/* ── Test view (paste-text rettskrivingstest) ── */#leksihjelp-sidepanel-root #view-test { padding: 12px; }#leksihjelp-sidepanel-root .test-view-header { padding: 14px; margin-bottom: 12px; }#leksihjelp-sidepanel-root .test-view-header h3 { margin: 0 0 4px; font-size: 15px; }#leksihjelp-sidepanel-root .test-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }#leksihjelp-sidepanel-root .test-lang-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary, #555);
}#leksihjelp-sidepanel-root .test-lang-label select {
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--glass-border, rgba(0,0,0,0.15));
  background: rgba(255,255,255,0.6); font: inherit;
}#leksihjelp-sidepanel-root #test-text {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--glass-border, rgba(0,0,0,0.15));
  border-radius: 8px; background: rgba(255,255,255,0.7); resize: vertical;
}#leksihjelp-sidepanel-root .test-exam-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary, #555);
  cursor: pointer;
}#leksihjelp-sidepanel-root .test-exam-label input { margin: 0; }#leksihjelp-sidepanel-root .test-actions { display: flex; gap: 8px; align-items: center; }#leksihjelp-sidepanel-root .test-actions .primary-btn {
  padding: 6px 14px; border-radius: 6px; border: none;
  background: #2563eb; color: #fff; font: inherit; cursor: pointer;
}#leksihjelp-sidepanel-root .test-actions .primary-btn:disabled { opacity: 0.5; cursor: wait; }#leksihjelp-sidepanel-root .test-status { font-size: 12px; color: var(--text-secondary, #666); margin: 4px 0 0; min-height: 16px; }#leksihjelp-sidepanel-root .test-findings { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }#leksihjelp-sidepanel-root .test-empty { text-align: center; color: var(--text-secondary, #888); padding: 16px; font-size: 13px; }#leksihjelp-sidepanel-root .test-finding {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.1));
  font-size: 13px;
}#leksihjelp-sidepanel-root .test-finding-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}#leksihjelp-sidepanel-root .test-finding-rule {
  font: 600 11px/1 ui-monospace, monospace;
  background: #eff6ff; color: #1e40af;
  padding: 2px 6px; border-radius: 4px;
}#leksihjelp-sidepanel-root .test-finding-pos { font: 11px ui-monospace, monospace; color: #888; }#leksihjelp-sidepanel-root .test-finding-fix { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }#leksihjelp-sidepanel-root .test-finding-fix code {
  font: 12px ui-monospace, monospace;
  padding: 1px 5px; border-radius: 3px;
}#leksihjelp-sidepanel-root .test-finding-orig { background: #fee2e2; color: #991b1b; text-decoration: line-through; }#leksihjelp-sidepanel-root .test-finding-new { background: #dcfce7; color: #166534; }#leksihjelp-sidepanel-root .test-finding-arrow { color: #888; }#leksihjelp-sidepanel-root .test-finding-extra { color: #666; font-size: 11px; }#leksihjelp-sidepanel-root .test-finding-ctx {
  margin-top: 6px; font: 12px/1.4 ui-monospace, monospace;
  color: #555; white-space: pre-wrap; word-break: break-word;
}#leksihjelp-sidepanel-root .test-finding-ctx mark {
  background: #fef08a; padding: 0 1px; border-radius: 2px;
}#leksihjelp-sidepanel-root .test-finding-explain {
  margin-top: 6px; font-size: 12px; color: #333;
  padding-top: 6px; border-top: 1px dashed rgba(0,0,0,0.1);
}[data-theme="dark"] #leksihjelp-sidepanel-root #test-text, [data-theme="dark"] #leksihjelp-sidepanel-root .test-lang-label select {
  background: rgba(30,30,30,0.6); color: #f3f4f6;
  border-color: rgba(255,255,255,0.15);
}[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding {
  background: rgba(30,30,30,0.6);
  border-color: rgba(255,255,255,0.1);
  color: #f3f4f6;
}[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-rule { background: rgba(37,99,235,0.25); color: #93c5fd; }[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-orig { background: rgba(239,68,68,0.20); color: #fca5a5; }[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-new { background: rgba(34,197,94,0.20); color: #86efac; }[data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-ctx, [data-theme="dark"] #leksihjelp-sidepanel-root .test-finding-explain { color: #e5e7eb; }


/* Personalization (Phase 1) — Lær mer library view */#leksihjelp-sidepanel-root .lh-library { padding: 8px 4px; }#leksihjelp-sidepanel-root .lh-library-overview { font-weight: 600; margin-bottom: 10px; font-size: 15px; }#leksihjelp-sidepanel-root .lh-library-item { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }#leksihjelp-sidepanel-root .lh-library-item.lh-library-known { opacity: 0.5; }#leksihjelp-sidepanel-root .lh-library-item.lh-library-known .lh-library-badge { opacity: 1; }#leksihjelp-sidepanel-root .lh-library-item-head { display: flex; justify-content: space-between; align-items: center; }#leksihjelp-sidepanel-root .lh-library-title { font-weight: 600; }#leksihjelp-sidepanel-root .lh-library-badge { font-size: 12px; font-weight: 600; }#leksihjelp-sidepanel-root .lh-library-toggle { margin-top: 8px; cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; }#leksihjelp-sidepanel-root .lh-library-dict { margin: 0 0 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; }#leksihjelp-sidepanel-root .lh-library-dict-summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; list-style: none; }#leksihjelp-sidepanel-root .lh-library-dict-summary::-webkit-details-marker { display: none; }#leksihjelp-sidepanel-root .lh-library-dict-summary::after { content: '▾'; margin-left: auto; transition: transform 0.2s ease; }#leksihjelp-sidepanel-root .lh-library-dict[open] .lh-library-dict-summary::after { transform: rotate(180deg); }#leksihjelp-sidepanel-root .lh-library-dict-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.08); font-size: 12px; text-align: center; }#leksihjelp-sidepanel-root .lh-library-dict-empty { margin: 0; padding: 0 12px 10px; font-size: 13px; opacity: 0.7; }#leksihjelp-sidepanel-root .lh-library-dict .lh-library-wordlist { padding: 0 12px 10px; }#leksihjelp-sidepanel-root .lh-library-wordlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }#leksihjelp-sidepanel-root .lh-library-wordlist li { background: rgba(0, 0, 0, 0.05); border-radius: 12px; padding: 3px 10px; font-size: 13px; }#leksihjelp-sidepanel-root .lh-library-remove-word { border: none; background: transparent; cursor: pointer; margin-left: 4px; }

/* Level-scoped corrections — locked (out-of-scope) library section */#leksihjelp-sidepanel-root .lh-library-locked { margin-top: 18px; opacity: 0.55; }#leksihjelp-sidepanel-root .lh-library-locked > h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }#leksihjelp-sidepanel-root .lh-library-locked .lh-library-item { pointer-events: none; }

/* Reworked Lær mer tab — compact list rows + language flag picker (2026-06-13) */
/* Non-personal lesson-count line (personalizationEnabled:false) — same look as .lh-library-overview */#leksihjelp-sidepanel-root .lh-library-overview, #leksihjelp-sidepanel-root .lh-library-count { font-weight: 600; margin-bottom: 10px; font-size: 15px; }#leksihjelp-sidepanel-root .lh-library-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border, #e3e3e3); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: #fff; }#leksihjelp-sidepanel-root .lh-library-row:hover { background: #f6f9f8; }#leksihjelp-sidepanel-root .lh-library-row.locked { opacity: 0.6; }

/* "Dette kan jeg" — mastered-lessons box (collapsible) */#leksihjelp-sidepanel-root .lh-library-known-box { margin: 10px 0 6px; border: 1px solid #d6ece0; border-radius: 10px; background: #f3faf6; overflow: hidden; }#leksihjelp-sidepanel-root .lh-library-known-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font-weight: 600; color: #1e7a40; }#leksihjelp-sidepanel-root .lh-library-known-title { flex: 1; text-align: left; }#leksihjelp-sidepanel-root .lh-library-known-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: #1e7a40; color: #fff; font-size: 12px; text-align: center; }#leksihjelp-sidepanel-root .lh-library-known-chev { transition: transform 0.25s ease; }#leksihjelp-sidepanel-root .lh-library-known-box.open .lh-library-known-chev { transform: rotate(180deg); }#leksihjelp-sidepanel-root .lh-library-known-body { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; padding: 0 10px; }#leksihjelp-sidepanel-root .lh-library-known-box.open .lh-library-known-body { max-height: 1600px; padding: 0 10px 8px; }#leksihjelp-sidepanel-root .lh-library-known-body .lh-library-row { background: #fff; }

/* "Læringsbunken" — active-learning stack box (collapsible, amber/study theme).
   Sits between the main list and the "Dette kan jeg" box. */#leksihjelp-sidepanel-root .lh-library-learning-box { margin: 10px 0 6px; border: 1px solid #f0e0bd; border-radius: 10px; background: #fdf8ec; overflow: hidden; }#leksihjelp-sidepanel-root .lh-library-learning-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; font-weight: 600; color: #9a6b16; }#leksihjelp-sidepanel-root .lh-library-learning-icon { font-size: 15px; }#leksihjelp-sidepanel-root .lh-library-learning-title { flex: 1; text-align: left; }#leksihjelp-sidepanel-root .lh-library-learning-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: #c98a1a; color: #fff; font-size: 12px; text-align: center; }#leksihjelp-sidepanel-root .lh-library-learning-chev { transition: transform 0.25s ease; }#leksihjelp-sidepanel-root .lh-library-learning-box.open .lh-library-learning-chev { transform: rotate(180deg); }#leksihjelp-sidepanel-root .lh-library-learning-body { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; padding: 0 10px; }#leksihjelp-sidepanel-root .lh-library-learning-box.open .lh-library-learning-body { max-height: 1600px; padding: 0 10px 8px; }#leksihjelp-sidepanel-root .lh-library-learning-body .lh-library-row { background: #fff; }
/* The little ✕ "remove from stack" control on a læringsbunken row. */#leksihjelp-sidepanel-root .lh-library-unlearn { color: #9a6b16; border-color: #ecdcb6; padding: 2px 8px; }

/* "Learned!" animation — green pulse + ✓ pop + collapse-fade as the lesson
   moves to the "Dette kan jeg" box. */
@keyframes lh-library-learned {
  0%   { background: #fff; transform: scale(1); }
  18%  { background: #c9f2dd; transform: scale(1.015); }
  55%  { background: #c9f2dd; opacity: 1; max-height: 80px; }
  100% { background: #c9f2dd; opacity: 0; max-height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transform: scale(0.96); }
}
@keyframes lh-library-check {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.4); }
  40%  { opacity: 1; transform: translateY(-50%) scale(1.25); }
  100% { opacity: 0; transform: translateY(-50%) scale(1); }
}#leksihjelp-sidepanel-root .lh-library-row--learned { animation: lh-library-learned 0.48s ease forwards; overflow: hidden; pointer-events: none; }#leksihjelp-sidepanel-root .lh-library-row--learned::after { content: '✓'; position: absolute; right: 16px; top: 50%; color: #059669; font-size: 22px; font-weight: 700; animation: lh-library-check 0.46s ease; }

/* "Into the stack!" animation — amber pulse + 📚 pop + collapse-fade as the
   lesson moves to the "Læringsbunken" box. */
@keyframes lh-library-bunked {
  0%   { background: #fff; transform: scale(1); }
  18%  { background: #fbeccb; transform: scale(1.015); }
  55%  { background: #fbeccb; opacity: 1; max-height: 80px; }
  100% { background: #fbeccb; opacity: 0; max-height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transform: scale(0.96); }
}#leksihjelp-sidepanel-root .lh-library-row--bunked { animation: lh-library-bunked 0.48s ease forwards; overflow: hidden; pointer-events: none; }#leksihjelp-sidepanel-root .lh-library-row--bunked::after { content: '📚'; position: absolute; right: 14px; top: 50%; font-size: 19px; animation: lh-library-check 0.46s ease; }#leksihjelp-sidepanel-root .lh-library-title { flex: 1; font-weight: 600; }#leksihjelp-sidepanel-root .lh-library-badge { font-size: 11px; padding: 2px 6px; border-radius: 10px; background: #eef3f1; color: #555; }#leksihjelp-sidepanel-root .lh-library-badge.known { background: #e6f4ea; color: #1e7a40; }#leksihjelp-sidepanel-root .lh-library-badge.locked { background: #f3eee6; color: #8a6d3b; }#leksihjelp-sidepanel-root .lh-library-toggle { font-size: 12px; }#leksihjelp-sidepanel-root .lh-library-empty { color: #777; padding: 16px; text-align: center; }#leksihjelp-sidepanel-root .library-lang-control { padding: 8px 12px; }#leksihjelp-sidepanel-root .lh-langpick { position: relative; display: inline-block; }#leksihjelp-sidepanel-root .lh-langpick-current { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border, #e3e3e3); border-radius: 8px; background: #fff; cursor: pointer; }#leksihjelp-sidepanel-root .lh-langpick-list { position: absolute; z-index: 20; margin-top: 4px; background: #fff; border: 1px solid var(--border, #e3e3e3); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }#leksihjelp-sidepanel-root .lh-langpick-option { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; background: none; border: none; cursor: pointer; text-align: left; }#leksihjelp-sidepanel-root .lh-langpick-option.active, #leksihjelp-sidepanel-root .lh-langpick-option:hover { background: #f0f5f3; }
/* "Bytt fremmedspråk" sub-section — change which FL is the student's chosen one. */#leksihjelp-sidepanel-root .lh-langpick-flsub { border-top: 1px solid var(--border, #e3e3e3); margin-top: 4px; padding-top: 4px; }#leksihjelp-sidepanel-root .lh-langpick-flsub-label { padding: 4px 12px 2px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .04em; }#leksihjelp-sidepanel-root .lh-langpick-fl-option { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; background: none; border: none; cursor: pointer; text-align: left; }#leksihjelp-sidepanel-root .lh-langpick-fl-option:hover { background: #f0f5f3; }

/* CEFR level filter pills in Lær mer library */#leksihjelp-sidepanel-root .lh-library-cefr-filter { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }#leksihjelp-sidepanel-root .lh-library-cefr-pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; background: none; transition: opacity 0.15s; }#leksihjelp-sidepanel-root .lh-library-cefr-pill:not(.active) { opacity: 0.65; }#leksihjelp-sidepanel-root .lh-library-cefr-pill:hover { opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-all { background: #f0f4f8; color: #4a5568; border-color: #cbd5e0; }#leksihjelp-sidepanel-root .lh-cefr-all.active { border-color: #718096; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-a1 { background: #E1F5EE; color: #0F6E56; border-color: #9FE1CB; }#leksihjelp-sidepanel-root .lh-cefr-a1.active { border-color: #0F6E56; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-a2 { background: #EAF3DE; color: #3B6D11; border-color: #C0DD97; }#leksihjelp-sidepanel-root .lh-cefr-a2.active { border-color: #3B6D11; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-b1 { background: #E6F1FB; color: #185FA5; border-color: #B5D4F4; }#leksihjelp-sidepanel-root .lh-cefr-b1.active { border-color: #185FA5; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-b2 { background: #EEEDFE; color: #534AB7; border-color: #CECBF6; }#leksihjelp-sidepanel-root .lh-cefr-b2.active { border-color: #534AB7; opacity: 1; }#leksihjelp-sidepanel-root .lh-cefr-c1 { background: #FAEEDA; color: #854F0B; border-color: #FAC775; }#leksihjelp-sidepanel-root .lh-cefr-c1.active { border-color: #854F0B; opacity: 1; }

/* Focus Mode toggle row in Lær mer tab */#leksihjelp-sidepanel-root .lh-library-focus-row {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}#leksihjelp-sidepanel-root .lh-library-focus-label {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}#leksihjelp-sidepanel-root .lh-library-focus-subtitle, #leksihjelp-sidepanel-root .lh-library-focus-guard {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}#leksihjelp-sidepanel-root .lh-library-focus-guard {
  color: var(--warning, #b45309);
}

/* ── Feide login (student identity — personalization sync) ── */#leksihjelp-sidepanel-root .feide-divider {
  margin: 14px 0 10px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}#leksihjelp-sidepanel-root .btn-feide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #1f4698;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}#leksihjelp-sidepanel-root .btn-feide:hover { background: #183a7e; }#leksihjelp-sidepanel-root .btn-feide:disabled { opacity: 0.6; cursor: default; }

/* «Hva er forskjellen?» — the three-way choice (nothing / Feide / Vipps) is
   genuinely not obvious from three buttons, but spelling it out inline would
   bury the panel. Collapsed by default, one line when opened, and shown only
   in the anonymous state — once you have chosen, it is answering a question
   you no longer have. */#leksihjelp-sidepanel-root .acct-explain {
  margin: -2px 0 10px;
}#leksihjelp-sidepanel-root .acct-explain summary {
  display: inline-block;
  padding: 2px 0;
  font-size: 12px;
  color: #6366f1;
  cursor: pointer;
  list-style: none;
}#leksihjelp-sidepanel-root .acct-explain summary::-webkit-details-marker { display: none; }#leksihjelp-sidepanel-root .acct-explain summary::before { content: '▸ '; }#leksihjelp-sidepanel-root .acct-explain[open] summary::before { content: '▾ '; }#leksihjelp-sidepanel-root .acct-explain p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* <details> carries display:block from the UA sheet, so [hidden] is not
   safely enough on its own here — same trap as .btn-vipps / .btn-feide /
   .voice-sample below. */#leksihjelp-sidepanel-root .acct-explain[hidden] {
  display: none;
}

/* «Hør forskjellen» — a try-before-you-buy comparison, NOT a way to log in.
   It first shipped as two full-width .btn-secondary buttons stacked directly
   above «Logg inn med Feide» and «Logg inn med Vipps», and at that width, in
   that position, it simply read as two more sign-in options. Same
   information, deliberately a different KIND of control: a muted box, small
   type, two compact buttons side by side. */#leksihjelp-sidepanel-root .voice-sample {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}#leksihjelp-sidepanel-root .voice-sample-label {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}#leksihjelp-sidepanel-root .voice-sample-row {
  display: flex;
  gap: 8px;
}#leksihjelp-sidepanel-root .voice-sample-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}#leksihjelp-sidepanel-root .voice-sample-btn:hover { background: #f1f5f9; }

/* The paid side gets the accent, so the pair reads as free-vs-premium at a
   glance rather than as two equivalent choices. */#leksihjelp-sidepanel-root .voice-sample-btn.is-premium {
  border-color: #14a37f;
  color: #0f766e;
}#leksihjelp-sidepanel-root .voice-sample-btn.is-premium:hover { background: #ecfdf5; }

/* .voice-sample sets no `display` of its own above, but the rule below is
   NOT redundant: this class has bitten twice in this file already (see
   .btn-vipps[hidden] and .btn-feide[hidden]), and the moment anyone gives
   the box a display the author rule would beat the UA [hidden] rule and a
   logged-OUT demonstration would appear for paying subscribers. */#leksihjelp-sidepanel-root .voice-sample[hidden] {
  display: none;
}

/* Exactly the .btn-vipps[hidden] problem, and it bit twice. display:flex
   above beats the UA [hidden] rule's implicit display:none, so
   `feideBtn.hidden = true` renders a fully visible, clickable button.
   Without this, every LOGGED-IN account state shows "Logg inn med Feide"
   under the panel — including a paying Vipps subscriber, who is exactly
   the person the exclusivity rule exists to keep away from it. */#leksihjelp-sidepanel-root .btn-feide[hidden] {
  display: none;
}#leksihjelp-sidepanel-root .feide-status {
  min-height: 1em;
  font-size: 0.85em;
  margin-top: 6px;
}#leksihjelp-sidepanel-root .feide-status.success {
  color: var(--success);
}#leksihjelp-sidepanel-root .feide-status.error {
  color: var(--error);
}

/* Demoted «already subscribed» login — link-styled button so the trial stays
   the primary action. Vipps bills Login per active user for 12 months, so a
   prominent bare login invites curiosity logins that cost for a year. */#leksihjelp-sidepanel-root .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--digital-teal, #11B49A); text-decoration: underline; cursor: pointer; }#leksihjelp-sidepanel-root .auth-existing { margin-top: 10px; }