/* ── Leksihjelp Content Script Styles ── */

#lexi-tts-widget :focus-visible,
#lexi-prediction-dropdown :focus-visible {
  outline: 2px solid #11B49A;
  outline-offset: 2px;
}

/* @lexi-host-only: pdf-viewer */
/* ── PDF text layer (selectable text overlay on canvas, pdf.js v4) ──
   Used by host apps that render PDFs (e.g. Papertek lockdown's oppgave
   viewer). Harmless in the Chrome extension context — the rules only
   match if a `.pdf-text-layer` element is present. */
.pdf-text-layer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 10;
  /* Default: non-interactive. Parent toggles `.pdf-text-selectable` to
     enable selection — host decides when (e.g. only in split/full PDF
     modes where the page is large enough for precise drag-select). */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.pdf-text-selectable .pdf-text-layer {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.pdf-text-layer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.pdf-text-layer span.markedContent {
  top: 0 !important;
  height: 0 !important;
}
.pdf-text-layer ::selection {
  background: rgba(17, 180, 154, 0.3);
}
/* @lexi-host-only-end */

/* ── TTS Floating Widget ── */
#lexi-tts-widget {
  position: fixed;
  z-index: 2147483647;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  min-width: 320px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  color: #1e293b;
  max-height: 80vh;
  overflow: visible;
  transition: opacity 0.2s, transform 0.2s;
  /* Position at bottom center */
  left: 50% !important;
  transform: translateX(-50%);
  bottom: 24px !important;
  top: auto !important;
}

/* Phase 27: Exam-mode amber border tint on the floating widget. The widget
 * is fully suppressed when exam mode is on (showWidget bails), so this rule
 * is mostly a defensive marker — but if a future surface renders the widget
 * shell in exam mode (e.g. teacher preview), the amber border gives a clear
 * at-a-glance signal. Also ships to lockdown via the sync pipeline; the
 * lockdown variant of leksihjelp may render this widget in exam contexts.
 * Both the legacy-prefixed and current id selectors are included to match
 * the shipping conventions. */
#lexi-tts-widget.lh-exam-mode,
.leksihjelp-floating-widget.lh-exam-mode,
.lh-floating-widget.lh-exam-mode {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3), 0 8px 40px rgba(0, 0, 0, 0.12) !important;
}

#lexi-tts-widget.visible {
  display: flex;
  animation: lexi-fadein 0.2s ease-out;
}

@keyframes lexi-fadein {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ── Language Toggle ── */
#lexi-tts-widget .lh-lang-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

#lexi-tts-widget .lh-lang-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

#lexi-tts-widget .lh-lang-btn:hover {
  background: rgba(17, 180, 154, 0.05);
}

#lexi-tts-widget .lh-lang-btn.active {
  background: #11B49A;
  color: white;
  border-color: #11B49A;
}

#lexi-tts-widget .lh-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#lexi-tts-widget .lh-header .lh-close {
  margin-left: auto;
}

#lexi-tts-widget .lh-header:active {
  cursor: grabbing;
}

#lexi-tts-widget.dragged {
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  animation: none !important;
}

#lexi-tts-widget .lh-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #11B49A;
}

#lexi-tts-widget .lh-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

#lexi-tts-widget .lh-close:hover {
  color: #1e293b;
}

#lexi-tts-widget .lh-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

#lexi-tts-widget .lh-pause-widget {
  background: none;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

#lexi-tts-widget .lh-pause-widget:hover {
  color: var(--lh-accent, #11B49A);
}

/* Site-pause menu popover on the TTS bubble */
#lexi-tts-widget .lh-widget-pause-menu {
  position: absolute;
  top: 38px;
  right: 8px;
  z-index: 10;
  width: 230px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
#lexi-tts-widget .lh-widget-pause-title {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}
#lexi-tts-widget .lh-widget-pause-row {
  display: flex;
  gap: 6px;
}
#lexi-tts-widget .lh-widget-pause-btn {
  flex: 1 1 0;
  padding: 6px 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#lexi-tts-widget .lh-widget-pause-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
#lexi-tts-widget .lh-widget-pause-forever {
  width: 100%;
}
#lexi-tts-widget .lh-widget-pause-note {
  font-size: 11px;
  line-height: 1.45;
  color: #6b7280;
}
#lexi-tts-widget .lh-widget-pause-tts-only {
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--lh-accent, #11B49A);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Text area with font controls ── */
#lexi-tts-widget .lh-text-area-wrapper {
  position: relative;
}

#lexi-tts-widget .lh-font-controls {
  display: flex;
  gap: 2px;
  align-items: center;
}

#lexi-tts-widget .lh-font-controls.mode-auto .lh-font-decrease,
#lexi-tts-widget .lh-font-controls.mode-auto .lh-font-increase {
  display: none;
}

#lexi-tts-widget .lh-header .lh-font-mode {
  width: auto;
  padding: 0 8px;
}

#lexi-tts-widget .lh-font-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}

#lexi-tts-widget .lh-font-btn:hover {
  background: rgba(17, 180, 154, 0.1);
  color: #11B49A;
}

#lexi-tts-widget .lh-text-area {
  font-size: 15px;
  color: #1e293b;
  line-height: 1.5;
  min-height: 40px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 10px;
  padding-right: 56px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  white-space: pre-wrap;
  word-break: break-word;
}


#lexi-tts-widget .lh-text-area::-webkit-scrollbar {
  width: 6px;
}

#lexi-tts-widget .lh-text-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

#lexi-tts-widget .lh-text-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

#lexi-tts-widget .lh-text-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* ── Word highlighting in text area ── */
#lexi-tts-widget .lh-word {
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

#lexi-tts-widget .lh-word-active {
  background: rgba(17, 180, 154, 0.25);
  color: #0B3E44;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(17, 180, 154, 0.15);
}

#lexi-tts-widget .lh-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

#lexi-tts-widget .lh-lookup-btn {
  flex-shrink: 1;
  min-width: 0;
}

#lexi-tts-widget .lh-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #11B49A;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

#lexi-tts-widget .lh-play-btn:hover {
  background: #0F6A75;
}

#lexi-tts-widget .lh-play-btn:disabled {
  background: #94a3b8;
  cursor: default;
}

/* Venting på premiumstemma. Den einaste «animasjonen» her var ein litt
   lysare grøn — ingenting rørte seg, og på kaldstart kan det ta fleire
   sekund. Ein knapp som ser lik ut medan han arbeider, les som ein knapp
   som ikkje verka, og då trykkjer eleven igjen.

   Ringen ligg som ::after UTANFOR knappen, så han ikkje flyttar ikonet
   eller endrar knappens storleik midt i eit trykk. `pointer-events: none`
   av di ringen elles ville svelgje klikket som stoppar avspelinga. */
#lexi-tts-widget .lh-play-btn.loading {
  background: #7CC7A6;
  position: relative;
}
#lexi-tts-widget .lh-play-btn.loading::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #0F766E;
  border-right-color: #0F766E;
  animation: lh-tts-spin 700ms linear infinite;
  pointer-events: none;
}
@keyframes lh-tts-spin { to { transform: rotate(360deg); } }

/* Klokkeikonet inni pulsar i takt, så det ser ut som eitt system og ikkje
   som ein ring som tilfeldigvis snurrar rundt noko stillestående. */
#lexi-tts-widget .lh-play-btn.loading svg {
  animation: lh-tts-pulse 1400ms ease-in-out infinite;
}
@keyframes lh-tts-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Statuslina. Kaldstart kan ta lang tid, og ein ring aleine seier «vent»
   utan å seie kor lenge eller kvifor. */
#lexi-tts-widget .lh-mode-badge.loading {
  background: #ecfdf5;
  color: #0F766E;
}

@media (prefers-reduced-motion: reduce) {
  #lexi-tts-widget .lh-play-btn.loading::after,
  #lexi-tts-widget .lh-play-btn.loading svg { animation: none; }
  #lexi-tts-widget .lh-play-btn.loading::after { border-top-color: #0F766E; opacity: 0.6; }
}

#lexi-tts-widget .lh-slider-group {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#lexi-tts-widget .lh-slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#lexi-tts-widget .lh-slider-label {
  font-size: 10px;
  color: #94a3b8;
  min-width: 52px;
  font-weight: 500;
}

#lexi-tts-widget .lh-slider {
  flex: 1 1 0;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  outline: none;
}

#lexi-tts-widget .lh-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #11B49A;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#lexi-tts-widget .lh-voice-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  color: #1e293b;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

#lexi-tts-widget .lh-voice-select:focus {
  border-color: #11B49A;
}

#lexi-tts-widget .lh-mode-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(17, 180, 154, 0.1);
  color: #11B49A;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
}

/* ── Resized state: flex-constrained text area ── */
#lexi-tts-widget.resized {
  overflow: hidden;
}

#lexi-tts-widget.resized .lh-text-area-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#lexi-tts-widget.resized .lh-text-area {
  height: 100%;
  max-height: none;
}

/* ── Resize Handles ── */
#lexi-tts-widget .lh-resize-handle {
  position: absolute;
  z-index: 10;
}

#lexi-tts-widget .lh-resize-right {
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

#lexi-tts-widget .lh-resize-bottom {
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: ns-resize;
}

#lexi-tts-widget .lh-resize-corner {
  bottom: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}

#lexi-tts-widget .lh-resize-corner::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(0, 0, 0, 0.15);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

/* ── Font mode button ── */
#lexi-tts-widget .lh-font-mode {
  width: auto;
  padding: 0 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Word Prediction Dropdown ── */
#lexi-prediction-dropdown {
  position: fixed;
  z-index: 2147483646;
  display: none;
  min-width: 180px;
  max-width: 300px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 4px;
}

#lexi-prediction-dropdown.visible {
  display: block;
  animation: lexi-fadein 0.15s ease-out;
}

#lexi-prediction-dropdown .lh-pred-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}

#lexi-prediction-dropdown .lh-pred-item:hover,
#lexi-prediction-dropdown .lh-pred-item.selected {
  background: rgba(17, 180, 154, 0.1);
}

#lexi-prediction-dropdown .lh-pred-word {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

#lexi-prediction-dropdown .lh-pred-pos {
  font-size: 9px;
  color: #11B49A;
  background: rgba(17, 180, 154, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

#lexi-prediction-dropdown .lh-pred-typo {
  font-size: 9px;
  color: #f59e0b;
  font-weight: 500;
  font-style: italic;
  margin-left: 4px;
}

#lexi-prediction-dropdown .lh-pred-translation {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

#lexi-prediction-dropdown .lh-pred-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* UX-02 (Phase 5 Plan 03): "Vis flere" / "Vis færre" reveal link.
   Dyslexia-friendly text-link sizing (13px ≥ 14px-safe with the 1.4 line-
   height the dropdown inherits), underlined so the affordance reads as
   "clickable" to screen-reader + low-vision users, and subtle border-top
   separator so it doesn't look like another pred item. Match the existing
   .lh-pred-hint colour palette (conservative grays) rather than introducing
   new CSS variables — the file doesn't use any today. */
#lexi-prediction-dropdown .lh-pred-vis-flere {
  padding: 6px 12px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  user-select: none;
}

#lexi-prediction-dropdown .lh-pred-vis-flere:hover {
  color: #1e293b;
  background: rgba(0, 0, 0, 0.03);
}

#lexi-prediction-dropdown .lh-pred-icon {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  flex-shrink: 0;
}

#lexi-prediction-dropdown .lh-pred-lang {
  font-size: 9px;
  font-weight: 600;
  color: #11B49A;
  background: rgba(17, 180, 154, 0.08);
  border: 1px solid rgba(17, 180, 154, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
}

#lexi-prediction-dropdown .lh-pred-lang:hover {
  background: rgba(17, 180, 154, 0.15);
  border-color: rgba(17, 180, 154, 0.3);
}

#lexi-prediction-dropdown .lh-pred-lang-option {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

#lexi-prediction-dropdown .lh-pred-lang-option:hover {
  background: rgba(17, 180, 154, 0.1);
  color: #11B49A;
  border-color: rgba(17, 180, 154, 0.2);
}

#lexi-prediction-dropdown .lh-pred-lang-option.active {
  background: rgba(17, 180, 154, 0.12);
  color: #11B49A;
  border-color: rgba(17, 180, 154, 0.3);
}

#lexi-prediction-dropdown .lh-pred-hint {
  font-size: 10px;
  color: #cbd5e1;
  margin-left: auto;
}

#lexi-prediction-dropdown .lh-pred-pause {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: all 0.15s;
}

#lexi-prediction-dropdown .lh-pred-pause:hover {
  background: rgba(17, 180, 154, 0.08);
  color: #11B49A;
  border-color: rgba(17, 180, 154, 0.2);
}

/* Scrollbar for dropdown */
#lexi-prediction-dropdown::-webkit-scrollbar {
  width: 4px;
}

#lexi-prediction-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

/* Toast — small temporary notification */
.lh-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 10px 18px;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  z-index: 2147483647;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.lh-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Plan 43-04: passive auto-detect language hint banner. Shown above the
   active input when __lexiDetectLanguage reports a high-confidence
   mismatch with the surface's stored language key. */
.lh-lang-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff8e1;
  color: #5d4037;
  padding: 6px 10px;
  border: 1px solid #f7c948;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  max-width: 360px;
}
.lh-lang-hint .lh-lang-hint-msg {
  flex: 1 1 auto;
}
.lh-lang-hint .lh-lang-hint-accept,
.lh-lang-hint .lh-lang-hint-dismiss {
  flex: 0 0 auto;
  border: 1px solid #d4a017;
  background: #fff;
  color: #5d4037;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.lh-lang-hint .lh-lang-hint-accept {
  background: #ffd54f;
  border-color: #b8860b;
  font-weight: 600;
}
.lh-lang-hint .lh-lang-hint-accept:hover {
  background: #ffc107;
}
.lh-lang-hint .lh-lang-hint-dismiss:hover {
  background: #f5f5f5;
}

/* ── Dark mode (follows system preference) ── */
@media (prefers-color-scheme: dark) {
  #lexi-tts-widget {
    background: rgba(30, 32, 55, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    color: #e2e8f0;
  }

  #lexi-tts-widget .lh-lang-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
  }

  #lexi-tts-widget .lh-lang-btn:hover {
    background: rgba(17, 180, 154, 0.1);
  }

  #lexi-tts-widget .lh-close {
    color: #64748b;
  }

  #lexi-tts-widget .lh-close:hover {
    color: #e2e8f0;
  }

  #lexi-tts-widget .lh-text-area {
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
  }

  #lexi-tts-widget .lh-font-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
  }

  #lexi-tts-widget .lh-font-btn:hover {
    background: rgba(17, 180, 154, 0.15);
    color: #11B49A;
  }

  #lexi-tts-widget .lh-word-active {
    background: rgba(17, 180, 154, 0.3);
    color: #7CC7A6;
  }

  #lexi-tts-widget .lh-slider {
    background: #475569;
  }

  #lexi-tts-widget .lh-slider::-webkit-slider-thumb {
    border-color: #1e293b;
  }

  #lexi-tts-widget .lh-voice-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
  }

  #lexi-tts-widget .lh-resize-corner::after {
    border-color: rgba(255, 255, 255, 0.2);
  }

  #lexi-tts-widget::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
  }

  #lexi-prediction-dropdown {
    background: rgba(30, 32, 55, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  #lexi-prediction-dropdown .lh-pred-item:hover,
  #lexi-prediction-dropdown .lh-pred-item.selected {
    background: rgba(17, 180, 154, 0.15);
  }

  #lexi-prediction-dropdown .lh-pred-word {
    color: #e2e8f0;
  }

  #lexi-prediction-dropdown .lh-pred-translation {
    color: #64748b;
  }

  #lexi-prediction-dropdown .lh-pred-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  #lexi-prediction-dropdown .lh-pred-vis-flere {
    color: #94a3b8;
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  #lexi-prediction-dropdown .lh-pred-vis-flere:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
  }

  #lexi-prediction-dropdown .lh-pred-hint {
    color: #475569;
  }

  #lexi-prediction-dropdown .lh-pred-pause {
    border-color: rgba(255, 255, 255, 0.1);
    color: #64748b;
  }

  #lexi-prediction-dropdown .lh-pred-lang-option {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
  }

  #lexi-prediction-dropdown .lh-pred-lang-option:hover {
    background: rgba(17, 180, 154, 0.15);
  }

  #lexi-prediction-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
  }

  #lexi-pause-badge {
    background: #1e2035;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #94a3b8;
  }

  #lexi-spell-overlay .lh-spell-popover {
    background: rgba(30, 32, 53, 0.96);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
  }

  #lexi-spell-overlay .lh-spell-note {
    color: #94a3b8;
  }

  #lexi-spell-overlay .lh-spell-orig {
    color: #f87171;
  }

  /* Phase 05.1-05 inline UX gap-closure: dark-mode register-badge pill.
     Softer slate on dark background; colour palette matches the existing
     .lh-spell-note / .lh-spell-vis-flere dark variants above. */
  #lexi-spell-overlay .lh-spell-register-badge {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
  }

  #lexi-spell-overlay .lh-spell-lang-tag {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
  }

  #lexi-spell-overlay .lh-spell-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
  }

  #lexi-spell-overlay .lh-spell-accept {
    background: rgba(17, 180, 154, 0.25);
    color: #5eead4;
  }

  #lexi-spell-overlay .lh-spell-accept:hover {
    background: rgba(17, 180, 154, 0.4);
  }

  #lexi-spell-overlay .lh-spell-decline:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  #lexi-spell-overlay .lh-spell-add-word {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.45);
  }

  #lexi-spell-overlay .lh-spell-add-word:hover {
    background: rgba(34, 197, 94, 0.32);
  }

  /* UX-01 + UX-02 dark-mode variants (Phase 5 Plan 05) — match palette of the
     existing dark popover styles above. */
  #lexi-spell-overlay .lh-spell-explain {
    color: #e2e8f0;
  }

  #lexi-spell-overlay .lh-spell-explain em,
  #lexi-spell-overlay .lh-spell-emph {
    color: #5eead4;
  }

  #lexi-spell-overlay .lh-spell-sugg-row {
    color: #e2e8f0;
  }

  #lexi-spell-overlay .lh-spell-sugg-row:hover,
  #lexi-spell-overlay .lh-spell-sugg-row:focus-visible {
    background: rgba(17, 180, 154, 0.18);
  }

  #lexi-spell-overlay .lh-spell-vis-flere {
    color: #94a3b8;
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  #lexi-spell-overlay .lh-spell-vis-flere:hover {
    color: #e2e8f0;
  }
}

/* ── Spell-check overlay (per-word markers + popover) ── */

#lexi-spell-overlay {
  /* `top: 0; left: 0` + null storleik er ikkje berre ryddig: det er DET som
     gjer at den allereie `absolute` hint-markøren tolkar viewport-tal rett i
     uforankra modus — origo hennar fell saman med viewporten sitt. Gjev
     overlayet eit origo som ikkje er null ein dag, og hint-markørane ryk
     medan dei vanlege prikkane står. */
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 2147483645;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#lexi-spell-overlay .lh-spell-dot {
  position: fixed;
  height: 3px;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
  transition: height 0.1s, opacity 0.1s;
  opacity: 0.9;
  z-index: 2147483645;
}

/* Ankermodus: verten har gjeve oss eit element å bu i, og då er koordinatane
   ankerlokale. Eit `position: fixed` barn ville lese dei som viewport-tal —
   difor byter klassa BÅDE overlayet og markørane. Hint-markøren er allereie
   absolute og treng ingen regel her. Blokka står UNDER grunnregelen med vilje:
   ho vinn alt på spesifisitet, men då held ho òg om nokon seinare skrellar
   vekk id-prefikset. */
#lexi-spell-overlay.lh-anchored { position: absolute; }
#lexi-spell-overlay.lh-anchored .lh-spell-dot { position: absolute; }

#lexi-spell-overlay .lh-spell-dot::after {
  /* Invisible hit target that extends above the thin line so the word
     itself is clickable. */
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  bottom: 0;
}

#lexi-spell-overlay .lh-spell-dot:hover {
  height: 3px;
  opacity: 1;
}

#lexi-spell-overlay .lh-spell-typo { background: #ef4444; }
#lexi-spell-overlay .lh-spell-nb-runon-words { background: #ef4444; }  /* same red as typo — run-on words are a typo class */
#lexi-spell-overlay .lh-spell-aa_og { background: #dc2626; } /* red-600 — high-severity å/og grammar error */
#lexi-spell-overlay .lh-spell-homophone { background: #f97316; } /* orange-500 */
#lexi-spell-overlay .lh-spell-context-typo { background: #f97316; }
#lexi-spell-overlay .lh-spell-gender { background: #f59e0b; }
#lexi-spell-overlay .lh-spell-agreement { background: #f59e0b; }
#lexi-spell-overlay .lh-spell-modal_form { background: #f59e0b; }
#lexi-spell-overlay .lh-spell-de-capitalization { background: #f59e0b; }
#lexi-spell-overlay .lh-spell-de-grammar { background: #a855f7; }
#lexi-spell-overlay .lh-spell-en-grammar { background: #a855f7; }
#lexi-spell-overlay .lh-spell-es-accent { background: #38bdf8; }
#lexi-spell-overlay .lh-spell-es-coordination { background: #a855f7; }
#lexi-spell-overlay .lh-spell-es-grammar { background: #a855f7; }
#lexi-spell-overlay .lh-spell-fr-grammar { background: #a855f7; }
#lexi-spell-overlay .lh-spell-fr-contraction { background: #38bdf8; }
#lexi-spell-overlay .lh-spell-fr-preposition { background: #38bdf8; }
#lexi-spell-overlay .lh-spell-sarskriving { background: #8b5cf6; }
#lexi-spell-overlay .lh-spell-sarskriving-tentative { background: #fbbf24; }  /* amber-400 — Phase 45 tentative compound, sub-warning */
#lexi-spell-overlay .lh-spell-sarskriving_de { background: #8b5cf6; }         /* purple — same severity as nb sarskriving */
#lexi-spell-overlay .lh-spell-sarskriving_de_hint { background: #fbbf24; }    /* amber-400 — ambiguous imperative+noun at sentence start */
/* Phase 45-02: small amber pill rendered in the popover header for tentative compound findings, so students see at a glance this is a suggestion (vote Ja/Nei) rather than a confident correction. */
.lh-spell-tentative-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  vertical-align: middle;
}
#lexi-spell-overlay .lh-spell-dialect-mix { background: #0ea5e9; }  /* sky-500 — Phase 05.1 Gap D */
#lexi-spell-overlay .lh-spell-nn-verb-leakage { background: #f59e0b; }  /* amber-500 — NB verb leakage in NN */
#lexi-spell-overlay .lh-spell-nn-plural-leakage { background: #f59e0b; }  /* amber-500 — NB plural leakage in NN */
#lexi-spell-overlay .lh-spell-nb-nn-reflexive-possessive { background: #f59e0b; }  /* amber-500 — reflexive sin/si/sitt/sine vs hans/hennar/hennes/deira/deres */
#lexi-spell-overlay .lh-spell-nb-nn-infinitive-after-aa { background: #f59e0b; }  /* amber-500 — finite verb form after infinitive marker "å" */
#lexi-spell-overlay .lh-spell-nb-apostrophe-genitive { background: #f59e0b; }  /* amber-500 — English-style apostrophe before genitive -s */
#lexi-spell-overlay .lh-spell-quotation-suppression { background: transparent; } /* pre-pass, never surfaces */
#lexi-spell-overlay .lh-spell-register { background: #f59e0b; }  /* amber — P2 warn, Phase 6 REG-01 */
#lexi-spell-overlay .lh-spell-collocation { background: #f59e0b; }  /* amber — P2 warn, Phase 6 REG-02 */
#lexi-spell-overlay .lh-spell-redundancy { background: #f97316; }  /* P3 hint, Phase 6 REG-03 */
#lexi-spell-overlay .lh-spell-nb-v2 { background: #f59e0b; }  /* amber — P2 warn, Phase 7 WO-01 */
#lexi-spell-overlay .lh-spell-nb_neg_order { background: #f59e0b; }  /* amber — P2 warn, negation-before-verb */
#lexi-spell-overlay .lh-spell-de-v2 { background: #f59e0b; }  /* amber — P2 warn, Phase 7 WO-02 */
#lexi-spell-overlay .lh-spell-de-verb-final { background: #f59e0b; }  /* amber — P2 warn, Phase 7 WO-03 */
#lexi-spell-overlay .lh-spell-de-subject-verb { background: #a855f7; }  /* purple — grammar agreement (ich kannst→kann) */
#lexi-spell-overlay .lh-spell-de-strong-verb { background: #db2777; }  /* pink — strong-verb stem change (du fahrst→fährst) */
#lexi-spell-overlay .lh-spell-de-komparativ { background: #ca8a04; }  /* yellow-amber — komparativ wie→als */
#lexi-spell-overlay .lh-spell-de-adjective-declension { background: #f59e0b; }  /* amber — P2 warn, ADJDECL-DE-01 predicative declension */
#lexi-spell-overlay .lh-spell-de-dative-plural { background: #a855f7; }  /* purple — grammar case (seit drei Jahre→Jahren) */
#lexi-spell-overlay .lh-spell-de-dative-verb { background: #0d9488; }  /* teal — dative-verb object (helfe dich→dir) */
#lexi-spell-overlay .lh-spell-de-negation { background: #65a30d; }  /* lime — kein/nicht negation (nicht ein→kein) */
#lexi-spell-overlay .lh-spell-de-kein-noun { background: #65a30d; }  /* lime — kein/nicht negation (nicht Zeit→keine Zeit) */
#lexi-spell-overlay .lh-spell-de-reflexive { background: #7c3aed; }  /* violet — reflexive advisory (er freut mich→sich) */
#lexi-spell-overlay .lh-spell-de-akkusativ-pronoun { background: #9333ea; }  /* purple — object-pronoun advisory (sehe er→ihn) */
#lexi-spell-overlay .lh-spell-de-wechselpraep { background: #0ea5e9; }  /* sky blue — hint, Wechselpräposition case self-check */
#lexi-spell-overlay .lh-spell-de-possessive-genitive { background: #f97316; }  /* orange — hint, possessive pronoun in nominative form after noun */
#lexi-spell-overlay .lh-spell-de-dative-possessive { background: #fb923c; }   /* orange-400 — hint, possessive pronoun wrong case after dative preposition */
#lexi-spell-overlay .lh-spell-de-accusative-possessive { background: #fbbf24; } /* amber-400 — hint, possessive missing acc -n ending after accusative preposition */
#lexi-spell-overlay .lh-spell-de-dat-prep-pronoun { background: #34d399; }     /* emerald-400 — hint, nominative personal pronoun after dative preposition */
#lexi-spell-overlay .lh-spell-de-acc-prep-pronoun { background: #60a5fa; }     /* blue-400 — hint, nominative personal pronoun after accusative preposition */
#lexi-spell-overlay .lh-spell-de-wechsel-prep-pronoun { background: #a78bfa; } /* violet-400 — hint, nominative personal pronoun after Wechselpräposition */
#lexi-spell-overlay .lh-spell-de-prep-contraction { background: #14b8a6; }     /* teal-500 — hint, prep+article should be contracted (in dem → im) */
#lexi-spell-overlay .lh-spell-de-dass-das { background: #f87171; }             /* red-400 — error, 'das' written where 'dass' is required */
#lexi-spell-overlay .lh-spell-de-comma-subord { background: #fdba74; }         /* orange-300 — hint, missing comma before subordinating conjunction */
#lexi-spell-overlay .lh-spell-de-wo-wohin { background: #c084fc; }             /* purple-400 — hint, wo (location) vs wohin (direction) confusion */
#lexi-spell-overlay .lh-spell-de-zu-infinitive { background: #67e8f9; }        /* cyan-300 — hint, missing zu before infinitive after zu-governing verb */
#lexi-spell-overlay .lh-spell-de-nach-hause { background: #86efac; }           /* green-300 — hint, nach Hause (motion) vs zu Hause (location) */
#lexi-spell-overlay .lh-spell-de-dativ-objekt { background: #fca5a5; }         /* red-300 — hint, accusative pronoun as indirect object of ditransitive verb */
/* de-wechselpraep opt-in toggle inside its "Lær mer" popover */
#lexi-spell-overlay .lh-spell-pedagogy-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #0b3e44;
  cursor: pointer;
}
#lexi-spell-overlay .lh-spell-pedagogy-toggle input { cursor: pointer; flex: none; }
#lexi-spell-overlay .lh-spell-fr-bags { background: #f97316; }  /* P3 hint, Phase 7 WO-04 */
#lexi-spell-overlay .lh-spell-de-perfekt-aux { background: #f59e0b; }  /* amber — P2 warn, Phase 8 DE-03 */
#lexi-spell-overlay .lh-spell-nb-compound-gender { background: #f59e0b; }  /* amber — P2 warn, Phase 17 COMP-04 */
#lexi-spell-overlay .lh-spell-nb-demonstrative-gender { background: #f59e0b; }  /* amber — P1 error, Phase 18 SPELL-02 */
#lexi-spell-overlay .lh-spell-nb-double-definiteness { background: #f59e0b; }  /* amber — P1 error, double-definiteness gender */
#lexi-spell-overlay .lh-spell-nb-triple-letter { background: #ef4444; }  /* red — P1 error, Phase 18 SPELL-03 */
#lexi-spell-overlay .lh-spell-de-compound-gender { background: #f59e0b; }  /* amber — P2 warn, Phase 8 DE-04 */
#lexi-spell-overlay .lh-spell-de-prep-case { background: #f59e0b; }  /* amber — P2 warn, Phase 8 DE-01 */
#lexi-spell-overlay .lh-spell-de-separable-verb { background: #f59e0b; }  /* amber — P2 warn, Phase 8 DE-02 */
#lexi-spell-overlay .lh-spell-es-ser-estar { background: #f59e0b; }  /* amber — P2 warn, Phase 9 ES-01 */
#lexi-spell-overlay .lh-spell-es-por-para { background: #f59e0b; }  /* amber — P2 warn, Phase 9 ES-02 */
#lexi-spell-overlay .lh-spell-es-personal-a { background: #f59e0b; }  /* amber — P2 warn, Phase 9 ES-03 */
#lexi-spell-overlay .lh-spell-es-double-negation { background: #f59e0b; }  /* amber — P2 warn, NEG-01 double negation */
#lexi-spell-overlay .lh-spell-es-enye { background: #38bdf8; }  /* blue — P1 error, ENYE-01 ñ-omission spelling */
#lexi-spell-overlay .lh-spell-es-haber-impersonal { background: #f59e0b; }  /* amber — P2 warn, HABER-01 impersonal haber */
#lexi-spell-overlay .lh-spell-es-demonstrative-gender { background: #f59e0b; }  /* amber — P2 warn, DEM-01 demonstrative gender */
#lexi-spell-overlay .lh-spell-es-apocope { background: #f59e0b; }  /* amber — P2 warn, APOC-01 apocope before noun */
#lexi-spell-overlay .lh-spell-es-possessive-number { background: #f59e0b; }  /* amber — P2 warn, POSS-01 possessive number */
#lexi-spell-overlay .lh-spell-es-conmigo-contigo { background: #f59e0b; }  /* amber — P2 warn, CONM-01 con+pronoun contraction */
#lexi-spell-overlay .lh-spell-es-numeral-cien { background: #f59e0b; }  /* amber — P2 warn, CIEN-01 ciento apocope */
#lexi-spell-overlay .lh-spell-es-cardinal-gender { background: #f59e0b; }  /* amber — P2 warn, CARD-01 hundreds gender */
#lexi-spell-overlay .lh-spell-es-cualquier { background: #f59e0b; }  /* amber — P2 warn, CUAL-01 cualquiera apocope */
#lexi-spell-overlay .lh-spell-es-ambos { background: #f59e0b; }  /* amber — P2 warn, AMBOS-01 ambos/ambas gender */
#lexi-spell-overlay .lh-spell-es-otro { background: #f59e0b; }  /* amber — P2 warn, OTRO-01 otro determiner gender */
#lexi-spell-overlay .lh-spell-es-varios { background: #f59e0b; }  /* amber — P2 warn, VARIOS-01 varios/varias gender */
#lexi-spell-overlay .lh-spell-fr-elision { background: #38bdf8; }  /* blue — P1 error, Phase 10 FR-01 */
#lexi-spell-overlay .lh-spell-fr-etre-avoir { background: #f59e0b; }  /* amber — P2 warn, Phase 10 FR-02 */
#lexi-spell-overlay .lh-spell-fr-avoir-idiom { background: #f59e0b; }  /* amber — P2 warn, AVOIR-01 être→avoir idiom */
#lexi-spell-overlay .lh-spell-fr-cedille { background: #38bdf8; }  /* blue — P1 error, CEDILLE-01 ç-omission spelling */
#lexi-spell-overlay .lh-spell-fr-plural { background: #38bdf8; }  /* blue — P1 error, PLUR-FR-01 irregular plural */
#lexi-spell-overlay .lh-spell-fr-adj-plural { background: #38bdf8; }  /* blue — P1 error, ADJPLUR-FR-01 -al adjective plural */
#lexi-spell-overlay .lh-spell-fr-beau-bel { background: #f59e0b; }  /* amber — P2 warn, BEL-01 euphonic prenominal */
#lexi-spell-overlay .lh-spell-fr-plus-bon { background: #f59e0b; }  /* amber — P2 warn, PLUSBON-01 irregular comparative */
#lexi-spell-overlay .lh-spell-fr-aucun { background: #f59e0b; }  /* amber — P2 warn, AUCUN-01 aucun/aucune gender */
#lexi-spell-overlay .lh-spell-fr-pp-agreement { background: #f97316; }  /* P3 hint, Phase 10 FR-03 */
#lexi-spell-overlay .lh-spell-es-subjuntivo { background: #f59e0b; }  /* amber — P2 warn, Phase 11 MOOD-01 */
#lexi-spell-overlay .lh-spell-es-imperfecto-hint { background: #f97316; }  /* P3 hint, Phase 11 MOOD-02 */
#lexi-spell-overlay .lh-spell-fr-subjonctif { background: #f59e0b; }  /* amber — P2 warn, Phase 11 MOOD-03 */
#lexi-spell-overlay .lh-spell-fr-aspect-hint { background: #f97316; }  /* P3 hint, Phase 32-01 */
#lexi-spell-overlay .lh-spell-de-modal-infinitive-final { background: #f97316; }  /* P3 hint, v3.0.113 modal+infinitive placement */
#lexi-spell-overlay .lh-spell-de-participle-final { background: #f97316; }  /* P3 hint, v3.0.117 perfekt participle placement */
#lexi-spell-overlay .lh-spell-de-codeswitch { background: #dc2626; }  /* P1 error, v3.0.118 Norwegian word in German text */
#lexi-spell-overlay .lh-spell-de-wann-wenn { background: #f59e0b; }  /* P2 warning, v3.0.118 wann/wenn confusion */
#lexi-spell-overlay .lh-spell-de-sehr-komparativ { background: #a3e635; }  /* lime-400 — hint, sehr before comparative → viel */
#lexi-spell-overlay .lh-spell-de-sowohl-als-auch { background: #f472b6; }  /* pink-400 — hint, sowohl...und → als auch */
#lexi-spell-overlay .lh-spell-de-je-desto { background: #38bdf8; }         /* sky-400 — hint, je...je → je...desto */
#lexi-spell-overlay .lh-spell-de-trotz-conjunction { background: #fb7185; } /* rose-400 — hint, trotz + pronoun → obwohl */
#lexi-spell-overlay .lh-spell-de-ob-indirect { background: #818cf8; }       /* indigo-400 — hint, dass → ob in indirect yes/no question after fragen */
#lexi-spell-overlay .lh-spell-de-viel-viele { background: #34d399; }        /* emerald-400 — hint, viel → viele before plural nouns */
#lexi-spell-overlay .lh-spell-es-subject-verb { background: #dc2626; }  /* P1 error, v3.0.122 ES person agreement */
#lexi-spell-overlay .lh-spell-es-pro-drop { background: #f97316; }  /* P3 hint, Phase 12 PRON-01 */
#lexi-spell-overlay .lh-spell-es-gustar { background: #f59e0b; }  /* amber — P2 warn, Phase 12 PRON-02 */
#lexi-spell-overlay .lh-spell-fr-clitic-order { background: #f59e0b; }  /* amber — P2 warn, Phase 12 PRON-03 */
#lexi-spell-overlay .lh-spell-doc-drift-de-address { background: #f59e0b; }  /* amber — P2 warn, Phase 13 DOC-01 */
#lexi-spell-overlay .lh-spell-doc-drift-fr-address { background: #f59e0b; }  /* amber — P2 warn, Phase 13 DOC-02 */
#lexi-spell-overlay .lh-spell-doc-drift-nb-register { background: #f59e0b; }  /* amber — P2 warn, Phase 13 DOC-03 */
#lexi-spell-overlay .lh-spell-nb-riksmal-lexical { background: #f59e0b; }  /* amber — P2 warn, lexical riksmal */
#lexi-spell-overlay .lh-spell-doc-drift-nn-infinitive { background: #f59e0b; }  /* amber — P2 warn, Phase 13 DOC-04 */
#lexi-spell-overlay .lh-spell-en-morphology { background: #e67e22 !important; }  /* warning tier — Phase 14 MORPH-01 */
#lexi-spell-overlay .lh-spell-en-word-family { background: #e67e22 !important; }  /* warning tier — Phase 14 MORPH-03 */
#lexi-spell-overlay .lh-spell-fr-adj-gender { background: #e67e22 !important; }  /* warning tier — Phase 14 MORPH-02 */
#lexi-spell-overlay .lh-spell-es-mucho-muchos { background: #fb923c; }  /* orange-400 — hint, mucho/poco → muchos/muchas before plural nouns */
#lexi-spell-overlay .lh-spell-es-todo-todos { background: #a3e635; }  /* lime-400 — hint, todo/toda → todos/todas before plural nouns */
#lexi-spell-overlay .lh-spell-es-tener-edad { background: #f97316; }  /* orange-500 — warning, soy/eres N años → tengo/tienes N años */
#lexi-spell-overlay .lh-spell-es-ir-a-infinitivo { background: #f59e0b; }  /* amber-400 — warning, voy estudiar → voy a estudiar */
#lexi-spell-overlay .lh-spell-en-article-profession { background: #60a5fa; }  /* blue-400 — warning, copula + profession missing a/an */
#lexi-spell-overlay .lh-spell-fr-tout-tous { background: #6ee7b7; }  /* emerald-300 — hint, tout → tous/toutes before plural nouns */
#lexi-spell-overlay .lh-spell-fr-negation { background: #f59e0b; }  /* amber — P2 warn, FR-14: missing ne in ne…pas negation */
#lexi-spell-overlay .lh-spell-fr-relative-qui-que { background: #f59e0b; }  /* amber — P2 warn, FR-15: qui→que before subject pronoun */
#lexi-spell-overlay .lh-spell-fr-accord-possessif { background: #f59e0b; }  /* amber — P2 warn, FR-16: possessive gender mismatch (son/sa/mon/ma/ton/ta) */
#lexi-spell-overlay .lh-spell-fr-tout-le-monde { background: #f59e0b; }  /* amber — P2 warn, FR-17: plural verb after "tout le monde" */
#lexi-spell-overlay .lh-spell-fr-on-singulier { background: #f59e0b; }  /* amber — P2 warn, FR-18: non-singular verb after "on" */
#lexi-spell-overlay .lh-spell-fr-pays-preposition { background: #f59e0b; }  /* amber — P2 warn, FR-19: wrong preposition before country name */
#lexi-spell-overlay .lh-spell-nb-place-preposition { background: #f59e0b; }  /* amber — P2 warn, NB i/på before country name */
#lexi-spell-overlay .lh-spell-nb-subordinate-order { background: #f59e0b; }  /* amber — P2 warn, BIFF subordinate-clause adverb order */
#lexi-spell-overlay .lh-spell-nb-definiteness-advisory { background: #3b82f6; }  /* blue — P3 reflective advisory, double-definiteness (not a failure) */
#lexi-spell-overlay .lh-spell-nb-transitive-intransitive { background: #8b5cf6; }  /* purple — P3 reflective advisory, transitiv/intransitiv (not a failure) */
#lexi-spell-overlay .lh-spell-nb-adjective-agreement { background: #f59e0b; }  /* amber — P2 warn, attributive neuter adjective agreement (-t) */
#lexi-spell-overlay .lh-spell-nb-impersonal-det { background: #f59e0b; }  /* amber — P2 warn, missing expletive det (weather/existential) */
#lexi-spell-overlay .lh-spell-nb-noun-plural-quantifier { background: #f59e0b; }  /* amber — P2 warn, noun plural after quantifier (mange/flere) */
#lexi-spell-overlay .lh-spell-nb-bare-infinitive-present { background: #f59e0b; }  /* amber — P2 warn, bare infinitive where present is required (jeg gå → går) */
#lexi-spell-overlay .lh-spell-fr-aller-infinitif { background: #f59e0b; }  /* amber — P2 warn, FR-20: near future aller + infinitive */
#lexi-spell-overlay .lh-spell-fr-ce-cet-cette { background: #f59e0b; }  /* amber — P2 warn, FR-21: demonstrative gender agreement */
#lexi-spell-overlay .lh-spell-fr-quel-accord { background: #f59e0b; }  /* amber — P2 warn, FR-22: interrogative gender agreement */
#lexi-spell-overlay .lh-spell-fr-venir-de { background: #f59e0b; }  /* amber — P2 warn, FR-23: recent past venir de + infinitive */
#lexi-spell-overlay .lh-spell-fr-ville-preposition { background: #f59e0b; }  /* amber — P2 warn, FR-24: à before city names */
#lexi-spell-overlay .lh-spell-fr-si-conditionnel { background: #f59e0b; }  /* amber — P2 warn, FR-25: si-clause takes imperfect not conditional */
#lexi-spell-overlay .lh-spell-fr-moyen-transport { background: #f59e0b; }  /* amber — P2 warn, FR-26: en/à for means of transport */
#lexi-spell-overlay .lh-spell-fr-jouer-a-de { background: #f59e0b; }  /* amber — P2 warn, FR-27: jouer à sport / de instrument */
#lexi-spell-overlay .lh-spell-fr-on-ont { background: #f59e0b; }  /* amber — P2 warn, FR-28: on/ont homophone after ils/elles */
#lexi-spell-overlay .lh-spell-fr-son-sont { background: #f59e0b; }  /* amber — P2 warn, FR-29: son/sont homophone after ils/elles */
#lexi-spell-overlay .lh-spell-fr-ce-ces { background: #f59e0b; }  /* amber — P2 warn, FR-32: demonstrative number agreement (ce/cet/cette + plural → ces) */
#lexi-spell-overlay .lh-spell-fr-quel-pluriel { background: #f59e0b; }  /* amber — P2 warn, FR-33: interrogative number agreement (quel… + plural → quels/quelles) */
#lexi-spell-overlay .lh-spell-fr-leur-leurs { background: #f59e0b; }  /* amber — P2 warn, FR-34: possessive leur/leurs number agreement */
#lexi-spell-overlay .lh-spell-nn_passiv_s { background: #ef4444; }  /* red — P1 error, Phase 19 DEBT-04 */
#lexi-spell-overlay .lh-spell-doc-drift-nb-passiv-overuse { background: none; border-bottom: 2px dotted #94a3b8; }  /* P3 info, Phase 19 DEBT-04 */
#lexi-spell-overlay .lh-spell-nb-anglicism { background: #0ea5e9; }  /* sky-500 — hint, anglicism loan-verb */
#lexi-spell-overlay .lh-spell-nb-possessive-definite { background: #f59e0b; }  /* amber — P2 warn, possessive + definite */
#lexi-spell-overlay .lh-spell-en-a-an { background: #f59e0b; }  /* amber-500 — P2 warn, article agreement */
#lexi-spell-overlay .lh-spell-en-subject-verb { background: #f59e0b; }  /* amber-500 — P2 warn, subject-verb agreement */
#lexi-spell-overlay .lh-spell-en-confused-pair { background: #f97316; }  /* orange-500 — error, confused pairs */
#lexi-spell-overlay .lh-spell-en-double-comparative { background: #f97316; }  /* orange-500 — error, double comparative */
#lexi-spell-overlay .lh-spell-en-capitalization { background: #f59e0b; }  /* amber-500 — warn, proper noun capitalization */
#lexi-spell-overlay .lh-spell-en-preposition { background: #f59e0b; }  /* amber-500 — warn, Norwegian preposition transfer */
#lexi-spell-overlay .lh-spell-en-false-friend { background: #93c5fd; }  /* blue-300 — hint, false friend */
#lexi-spell-overlay .lh-spell-en-spelling-consistency { background: #67e8f9; }  /* cyan-300 — hint, British/American spelling consistency */
#lexi-spell-overlay .lh-spell-en-spelling-variety { background: #ef4444; }  /* red-500 — error, strict-variety spelling (native en-GB/en-US parity) */
#lexi-spell-overlay .lh-spell-nn-form-consistency { background: #67e8f9; }  /* cyan-300 — hint, NN dual-form consistency (mens/medan) */
#lexi-spell-overlay .lh-spell-nb-a-et-consistency { background: #67e8f9; }  /* cyan-300 — hint, NB -a/-et consistency (kasta/kastet) */
#lexi-spell-overlay .lh-spell-nb-comma { background: #f59e0b; }  /* amber-500 — P2 warn, missing comma */
#lexi-spell-overlay .lh-spell-nb-comma-leddsetning { background: #f59e0b; }  /* amber-500 — P2 warn, missing comma after fronted subordinate clause */
#lexi-spell-overlay .lh-spell-nb-adverbial-split { background: #f59e0b; }  /* amber-500 — P2 warn, deprecated run-together temporal adverbial (idag→i dag) */
#lexi-spell-overlay .lh-spell-nb-sentence-boundary { background: #f59e0b; }  /* amber-500 — P2 warn, missing sentence-boundary punctuation */
#lexi-spell-overlay .lh-spell-sentence-case { background: #f59e0b; }  /* amber-500 — P2 warn, sentence-start capital / space after full stop */

/* P2 warning — amber dot (same shape as P1, different colour) — Phase 6.
   The ::after is the invisible click hit-target inherited from .lh-spell-dot
   (top:-14px down to bottom:0). It must stay transparent — painting it amber
   turned the warning marker into a 17px-tall block covering the word instead
   of a 3px underline matching the P1 error tier. */
#lexi-spell-overlay .lh-spell-dot.lh-spell-warn {
  background: #f59e0b !important;  /* amber-500 */
}

/* P3 hint — solid 3px orange bar, word-width — F38-4 fix
   Phase 6 originally used border-bottom-only (height:auto, background:none)
   but border-bottom didn't paint reliably. Switch to a solid 3px bar same
   as P1/P2 markers, distinguished only by color (orange vs amber/red). */
#lexi-spell-overlay .lh-spell-dot.lh-spell-hint {
  height: 3px;
  border-radius: 2px;
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
}
#lexi-spell-overlay .lh-spell-dot.lh-spell-hint::after {
  display: none;  /* no hover-expand on hint markers */
}

#lexi-spell-overlay .lh-spell-popover {
  position: fixed;
  pointer-events: auto;
  /* Stack above .lh-spell-dot (z-index 2147483645). Without an explicit
     z-index here, dots paint through the popover background — visible as
     amber bars cutting across the popover content. */
  z-index: 2147483646;
  min-width: 200px;
  max-width: 280px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
  padding: 10px 12px;
  font-size: 13px;
  color: #1e293b;
  animation: lexi-fadein 0.12s ease-out;
}

#lexi-spell-overlay .lh-spell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

#lexi-spell-overlay .lh-spell-orig {
  color: #dc2626;
  text-decoration: line-through;
  font-weight: 500;
}

/* Konsekvenstips der BEGGE formene er rette (nb -a/-et, nn mens/medan,
   britisk/amerikansk engelsk). Ei raud overstreking over ordet sa «feil»
   rett over ei forklaring som seier «riktig» — same motseiinga som eit
   ✗-døme under «Ikke feil – bare et råd». Ordet blir ståande nøytralt. */
#lexi-spell-overlay .lh-spell-popover-nb-a-et-consistency .lh-spell-orig,
#lexi-spell-overlay .lh-spell-popover-nn-form-consistency .lh-spell-orig,
#lexi-spell-overlay .lh-spell-popover-en-spelling-consistency .lh-spell-orig {
  color: inherit;
  text-decoration: none;
}

/* Phase 05.1-05 inline UX gap-closure: register badge in the popover header.
   Small pill that tells the student which Norwegian standard (Bokmål / Nynorsk)
   the rule pipeline ran in. Kept visually quieter than .lh-spell-orig so the
   word-and-fix pair still reads as the primary content; pushed to the far
   right of the header via margin-left:auto so multi-suggest (orig only) and
   single-suggest (orig → fix) both dock it on the same edge. 10px uppercase
   typography twins the existing .lh-spell-note label for a consistent
   secondary-chrome feel. */
#lexi-spell-overlay .lh-spell-register-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Kodebyte (22.09.2026): språkmerket på ei forslagsrad når eit ord har
   forslag på to språk («procedure» engelsk / «proseder» bokmål). */
#lexi-spell-overlay .lh-spell-lang-tag {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  white-space: nowrap;
}

#lexi-spell-overlay .lh-spell-arrow {
  color: #94a3b8;
  font-size: 11px;
}

#lexi-spell-overlay .lh-spell-fix-text {
  color: #0d8a75;
  font-weight: 600;
}

#lexi-spell-overlay .lh-spell-note {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

#lexi-spell-overlay .lh-spell-actions {
  display: flex;
  gap: 6px;
}

#lexi-spell-overlay .lh-spell-report-confirm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#lexi-spell-overlay .lh-spell-report-confirm-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #475569;
}
#lexi-spell-overlay .lh-spell-report-confirm-actions {
  display: flex;
  gap: 6px;
}

#lexi-spell-overlay .lh-spell-btn {
  flex: 1;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}

#lexi-spell-overlay .lh-spell-accept {
  background: rgba(17, 180, 154, 0.15);
  color: #0d8a75;
}

#lexi-spell-overlay .lh-spell-accept:hover {
  background: rgba(17, 180, 154, 0.3);
}

#lexi-spell-overlay .lh-spell-decline {
  background: rgba(0, 0, 0, 0.05);
  color: #64748b;
}

#lexi-spell-overlay .lh-spell-decline:hover {
  background: rgba(0, 0, 0, 0.08);
}

#lexi-spell-overlay .lh-spell-report {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
  font-size: 11px;
  margin-left: auto;
}

#lexi-spell-overlay .lh-spell-report:hover {
  background: rgba(59, 130, 246, 0.15);
}

/* "Behold ordet" — add-to-personal-dictionary action. Calm affirmative green,
   outlined so it reads as distinct from the teal "Fiks" primary and the neutral
   "Avvis". Only rendered on unknown-word findings when personalization is on. */
#lexi-spell-overlay .lh-spell-add-word {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

#lexi-spell-overlay .lh-spell-add-word:hover {
  background: rgba(34, 197, 94, 0.18);
}

/* UX-01 (Phase 5 Plan 05): student-friendly explanation row. Larger than the
   retired .lh-spell-note (which was a 10px uppercase label) — dyslexia-aware
   body text at 13px with 1.4 line-height, wrapping naturally. Student's typed
   word is wrapped in <em> + .lh-spell-emph accent by the rule.explain() template. */
#lexi-spell-overlay .lh-spell-explain {
  padding: 6px 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #1e293b;
}

#lexi-spell-overlay .lh-spell-explain em,
#lexi-spell-overlay .lh-spell-emph {
  font-style: italic;
  color: #0d8a75;
  background: transparent;
}

/* UX-02 (Phase 5 Plan 05): multi-suggest row list — shown only when the
   popup Settings alternates toggle is ON AND finding carries >1 suggestion.
   Rows are buttons styled flat so they read as "clickable words", not
   "button bar". Dyslexia-friendly hit target (min-height 32px). */
#lexi-spell-overlay .lh-spell-suggestions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 0;
  margin-bottom: 6px;
}

#lexi-spell-overlay .lh-spell-sugg-row {
  appearance: none;
  border: none;
  background: transparent;
  padding: 7px 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  border-radius: 6px;
  min-height: 32px;
}

#lexi-spell-overlay .lh-spell-sugg-row:hover,
#lexi-spell-overlay .lh-spell-sugg-row:focus-visible {
  background: rgba(17, 180, 154, 0.08);
  outline: none;
}

/* Visual twin of .lh-pred-vis-flere in word-prediction (Plan 03) — same
   dyslexia-friendly underlined text-link pattern, scoped to the spell-check
   overlay so the two surfaces share affordance without style bleed. */
#lexi-spell-overlay .lh-spell-vis-flere {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 12px;
  color: #64748b;
  text-decoration: underline;
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  text-align: center;
  margin-top: 4px;
  user-select: none;
  font-family: inherit;
}

#lexi-spell-overlay .lh-spell-vis-flere:hover {
  color: #1e293b;
}

/* ── Manual spell-check button (Phase 18 Plan 02) ── */

.lh-spell-check-btn {
  position: fixed;
  padding: 4px 10px;
  border-radius: 12px;
  background: #11B49A;
  border: 1px solid #0ea388;
  font-size: 12px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #fff;
  cursor: grab;
  z-index: 2147483640;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: opacity 0.2s, background 0.15s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lh-spell-check-btn:active {
  cursor: grabbing;
}

.lh-spell-check-btn:hover {
  background: #0ea388;
}

.lh-spell-check-btn-lang {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  line-height: 1.2;
}

.lh-spell-lang-flyout,
.lh-spell-chip-menu {
  position: fixed;
  z-index: 2147483641;
  min-width: 220px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  padding: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
}

.lh-spell-chip-menu .lh-chip-menu-section {
  padding: 6px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.lh-spell-chip-menu .lh-chip-menu-section:last-child { border-bottom: 0; }

.lh-chip-menu-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0 4px 4px;
}

.lh-chip-menu-langrow,
.lh-chip-menu-pauserow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lh-chip-menu-langrow .lh-spell-lang-item {
  flex: 0 0 auto;
  width: auto;
  padding: 4px 8px;
}
.lh-chip-menu-langrow .lh-spell-lang-item.is-fl-placeholder {
  border-style: dashed;
  font-style: italic;
  opacity: 0.9;
}

.lh-chip-menu-pause-btn {
  flex: 1 1 0;
  min-width: 50px;
  padding: 6px 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lh-chip-menu-pause-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.lh-chip-menu-pause-forever {
  width: 100%;
  margin-top: 6px;
}

/* EN spelling-variety picker (Begge / Britisk / Amerikansk) — reuses the
   pause-button shell; active state mirrors the green lang-item selection. */
.lh-chip-menu-variety-btn.is-active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
.lh-chip-menu-variety-btn.is-active:hover { background: #d1fae5; border-color: #10b981; }

.lh-chip-menu-paused-status {
  padding: 4px 4px 8px;
  color: #6b7280;
  font-size: 12px;
}

.lh-chip-menu-resume {
  width: 100%;
  padding: 8px 10px;
  background: #11B49A;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.lh-chip-menu-resume:hover { background: #0f9d87; }

.lh-chip-menu-settings-link {
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  color: #2563eb;
  font-size: 13px;
  cursor: pointer;
}
.lh-chip-menu-settings-link:hover { background: #f1f5f9; }
.lh-chip-menu-version {
  padding: 2px 8px 0;
  font-size: 10px;
  color: #9ca3af;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lh-spell-fl-submenu {
  position: fixed;
  z-index: 2147483642;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  padding: 4px;
  display: flex;
  gap: 4px;
}
.lh-spell-fl-submenu-item {
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.lh-spell-fl-submenu-item:hover { background: #f3f4f6; }
.lh-spell-fl-submenu-item.is-active { background: #ecfdf5; }

/* ── Dictionary FL pill submenu (Plan 41-01) ──
   The popup pill row's chevron-submenu over de/es/fr. Lives in popup.css
   for the extension popup, but lockdown's bundled CSS doesn't sync popup
   .css — without these rules the dropdown renders transparent and looks
   missing. Inline z-index in JS already escapes any host overlay; these
   rules supply the visual surface. */
.lang-fl-dropdown {
  min-width: 140px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
}
.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: #3B3B3B;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.lang-fl-dropdown-item:hover {
  background: rgba(17, 180, 154, 0.08);
  border-color: rgba(17, 180, 154, 0.25);
}
.lang-fl-dropdown-item.active {
  background: #11B49A;
  color: #ffffff;
}
.lang-fl-dropdown-check {
  margin-left: auto;
  font-weight: 700;
}

/* Paused chip — greyed background + ⏸ countdown badge. */
/* Focus mode («Kun det jeg arbeider med») active for the chip's language:
   amber ring on the green pill (matches the Læringsbunken amber convention).
   The filtering itself is invisible in the text, so the chip is the ONLY
   on-page cue that findings are being suppressed — the web app's Skriving
   row is the sibling indicator. Applied by spell-check-renderer.js
   refreshLangBadge(); the 🎯 prefix in the lang badge is the second cue. */
.lh-spell-check-btn.lh-focus-on {
  box-shadow: 0 0 0 2px #f59e0b, 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lh-spell-check-btn.is-paused {
  background: #9ca3af;
  border-color: #6b7280;
  opacity: 0.95;
}
.lh-spell-check-btn.is-paused:hover { background: #6b7280; }
.lh-spell-check-btn.is-paused .lh-spell-check-btn-lang {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0;
  padding: 1px 4px;
}

.lh-spell-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: #1f2937;
}

.lh-spell-lang-item:hover {
  background: #f3f4f6;
}

.lh-spell-lang-item.is-active {
  background: #ecfdf5;
  color: #065f46;
  font-weight: 600;
}

.lh-spell-lang-item .lh-spell-lang-code {
  display: inline-block;
  min-width: 26px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #11B49A;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.lh-spell-lang-item.is-active .lh-spell-lang-code {
  background: #065f46;
}

.lh-spell-lang-hint {
  margin-top: 4px;
  padding: 6px 8px;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

/* ── Spell-check toast (Phase 18 Plan 02) ── */

@keyframes lh-toast-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.lh-spell-toast {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 2147483641;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;
  animation: lh-toast-fade 2.5s ease-in-out forwards;
}

/* Dark mode variants for button and toast */
@media (prefers-color-scheme: dark) {
  .lh-spell-check-btn {
    background: #0ea388;
    border-color: #0d937a;
    color: #fff;
  }

  .lh-spell-check-btn:hover {
    background: #11B49A;
  }

  .lh-spell-toast {
    background: #1e2035;
    color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

/* ── False-friend + sense display (floating-widget inline lookup) ── */
#lexi-lookup-card .lh-ff-banner {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
}

#lexi-lookup-card .lh-ff-banner em { font-style: italic; }
#lexi-lookup-card .lh-ff-banner strong { font-weight: 700; }

#lexi-lookup-card .lh-sense-group {
  margin-bottom: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── Lær mer pedagogy panel (Phase 26) ──
   Inline teaching panel rendered below the spell-check popover's actions row
   when a finding carries a `pedagogy` block (DE preposition rule, sourced via
   plan 26-01). Stays inside the popover surface — no modal, no overlay — so
   drag/Tab navigation continues to work. Colour + icon combo on correct/
   incorrect rows preserves access for colour-blind users (Phase 05.1 lesson).
   Note: this CSS file is sync'd into the lockdown webapp, so styles must
   degrade gracefully outside the extension context. */

#lexi-spell-overlay .lh-spell-laer-mer-btn {
  display: inline-block;
  margin: 6px 8px 0 8px;
  padding: 4px 10px;
  background: #F4F1EE;
  border: 1px solid #DCD5CC;
  border-radius: 12px;
  font-size: 12px;
  color: #3A3A3A;
  cursor: pointer;
  font-family: inherit;
}
#lexi-spell-overlay .lh-spell-laer-mer-btn:hover {
  background: #ECE6DC;
}
#lexi-spell-overlay .lh-spell-laer-mer-btn[aria-expanded="true"] {
  background: #E6E0D5;
  border-color: #C9C0B2;
}

#lexi-spell-overlay .lh-spell-pedagogy-panel {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  line-height: 1.4;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 55vh;
  overflow-y: auto;
}
#lexi-spell-overlay .lh-spell-pedagogy-panel[hidden] {
  display: none !important;
}

#lexi-spell-overlay .lh-spell-pedagogy-page[hidden] {
  display: none !important;
}
#lexi-spell-overlay .lh-spell-pedagogy-pages {
  display: flex;
  flex-direction: column;
}
#lexi-spell-overlay .lh-spell-pedagogy-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 8px;
  padding: 0 0 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-top: none;
  flex-shrink: 0;
  /* Sticky so the controls are always visible when panel content scrolls */
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 1;
}
#lexi-spell-overlay .lh-spell-pedagogy-nav button {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 13px;
  cursor: pointer;
  color: #475569;
}
#lexi-spell-overlay .lh-spell-pedagogy-nav button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}
#lexi-spell-overlay .lh-spell-pedagogy-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
#lexi-spell-overlay .lh-spell-pedagogy-indicator {
  font-size: 12px;
  color: #94a3b8;
}
#lexi-spell-overlay .lh-spell-pedagogy-nav-spacer {
  flex: 1;
}
#lexi-spell-overlay .lh-spell-pedagogy-speak,
#lexi-spell-overlay .lh-spell-pedagogy-expand {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
#lexi-spell-overlay .lh-spell-pedagogy-speak:hover,
#lexi-spell-overlay .lh-spell-pedagogy-expand:hover {
  opacity: 1;
}
#lexi-spell-overlay .lh-spell-pedagogy-nav--tools-only {
  justify-content: flex-end;
  border-bottom: none;
  margin-top: 6px;
  margin-bottom: 0;
  padding-bottom: 0;
  position: static;
}

/* Expanded pedagogy mode — wider centered popover, capped by viewport. The
   student opted into a big reading view, so use the space: large body text,
   roomy examples, a scaled-up illustration, and bigger nav controls. */
#lexi-spell-overlay .lh-spell-popover--expanded {
  max-width: min(760px, 94vw);
  width: 94vw;
}

/* Popoveret i ankermodus (03.10.2026). WebKit klipper det ved kantane til
   rullecontaineren ankeret sit i, så positionPopover held det INNE i ankeret
   sin synlege boks og skriv boksen som `--lh-pop-cap-w/h`. Taket tek minimum
   med popoveret sine eigne maks-mål — det kan berre krympe, aldri breie ut —
   og det som ikkje får plass, rullar inni popoveret. Står under grunnreglane
   (popover og --expanded) med vilje, same grunn som .lh-anchored-blokka over.
   IKKJE legg `z-index: auto` på overlayet: det fjernar klippet, men gjer
   kvar markør til sitt eige WebKit-lag (60 markørar: 48 → 346 CALayers).
   Eiga inngangsanimasjon: `lexi-fadein` er TTS-widgeten sin og flyttar
   elementet ei halv breidd til venstre i 120 ms — rett ut over kanten. */
#lexi-spell-overlay.lh-anchored .lh-spell-popover {
  /* Taket er border-boksen (popoverCapOf måler mot offsetWidth/Height). Utan
     dette legg padding og kant seg UTANPÅ max-height i ein vert utan eigen
     border-box-reset, og popoveret blir 22/26 px for stort for boksen. */
  box-sizing: border-box;
  max-width: min(280px, var(--lh-pop-cap-w, 280px));
  max-height: var(--lh-pop-cap-h, none);
  overflow: auto;
  overscroll-behavior: contain;
  animation-name: lexi-popover-in;
}
#lexi-spell-overlay.lh-anchored .lh-spell-popover--expanded {
  max-width: min(760px, 94vw, var(--lh-pop-cap-w, 94vw));
  width: min(94vw, var(--lh-pop-cap-w, 94vw));
}

@keyframes lexi-popover-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-panel {
  font-size: 20px;
  line-height: 1.75;
  max-height: 80vh;
  padding: 4px 20px 12px;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-summary,
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-explanation {
  font-size: 20px;
  line-height: 1.75;
  margin: 0 0 16px;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example {
  padding: 14px 18px;
  font-size: 18px;
  line-height: 1.6;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-translation,
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-note {
  font-size: 16px;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-extra {
  font-size: 18px;
  line-height: 1.7;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-visual {
  margin: 18px 0;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-svg-wrapper svg {
  max-height: 40vh;
  width: auto;
  height: auto;
  max-width: 100%;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-visual-caption {
  font-size: 15px;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-nav button {
  font-size: 17px;
  padding: 6px 14px;
}
/* Center each page's content vertically. The expand handler pins the pages
   container to the TALLEST page's height (so the popover doesn't jump on
   prev/next); without centering, a short page (e.g. a tips slide) sits at the
   top with a big empty gap below. Centering fills that reserved space. */
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Example cards: put the ✓ correct and ✗ incorrect forms side by side to use
   the extra width; translation + note span the full row beneath them. */
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-correct,
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-incorrect,
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-advice {
  flex: 1 1 42%;
  margin: 0;
}
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-translation,
#lexi-spell-overlay .lh-spell-popover--expanded .lh-spell-pedagogy-example-note {
  flex-basis: 100%;
}

#lexi-spell-overlay .lh-spell-pedagogy-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

#lexi-spell-overlay .lh-spell-pedagogy-case-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #888;
}
#lexi-spell-overlay .lh-spell-pedagogy-case-badge--akkusativ { background: #E08828; }
#lexi-spell-overlay .lh-spell-pedagogy-case-badge--dativ     { background: #2E74B5; }
#lexi-spell-overlay .lh-spell-pedagogy-case-badge--wechsel   { background: #8E5BCC; }
#lexi-spell-overlay .lh-spell-pedagogy-case-badge--genitiv   { background: #11B49A; }

#lexi-spell-overlay .lh-spell-pedagogy-contraction {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: #666;
}

#lexi-spell-overlay .lh-spell-pedagogy-summary,
#lexi-spell-overlay .lh-spell-pedagogy-explanation {
  margin: 0 0 6px 0;
  line-height: 1.4;
  color: #2A2A2A;
}
#lexi-spell-overlay .lh-spell-pedagogy-explanation {
  color: #4A4A4A;
}

/* Pedagogy endings table (e.g. de-subject-verb's pronoun/ending grid,
   sourced from grammarbank note strings). Deliberately NOT scoped under
   #lexi-spell-overlay: the same pedagogy strings render in the floating
   widget and in downstream consumers (lockdown, playground). */
.lh-pedagogy-table {
  border-collapse: collapse;
  margin: 6px 0 2px 0;
  font-size: 0.95em;
}
.lh-pedagogy-table td,
.lh-pedagogy-table th {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 3px 10px;
  line-height: 1.4;
  color: #2A2A2A;
  /* endings like -amos otherwise line-break after the hyphen */
  white-space: nowrap;
}
/* Pronoun/label cells are <th> (works for any layout: DE 2-pair grid,
   ES pronoun + conjugation-class columns) — muted tint, endings plain. */
.lh-pedagogy-table th {
  font-weight: 500;
  text-align: left;
  color: #4A4A4A;
  background: rgba(0, 0, 0, 0.03);
}

#lexi-spell-overlay .lh-spell-pedagogy-example {
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.015);
}

#lexi-spell-overlay .lh-spell-pedagogy-example-correct {
  color: #1F7A3A;
  font-weight: 500;
  margin-bottom: 2px;
}
#lexi-spell-overlay .lh-spell-pedagogy-example-correct strong {
  font-weight: 700;
}

#lexi-spell-overlay .lh-spell-pedagogy-example-incorrect {
  color: #C0392B;
  text-decoration: line-through;
  text-decoration-color: rgba(192, 57, 43, 0.4);
  margin-bottom: 4px;
}

/* Allowed but less advisable (example kind «advice»): neutral grey, no
   strike-through — the sentence is not wrong. */
#lexi-spell-overlay .lh-spell-pedagogy-example-advice {
  color: #555;
  margin-bottom: 4px;
}

#lexi-spell-overlay .lh-spell-pedagogy-example-translation {
  font-style: italic;
  font-size: 0.92em;
  color: #555;
}

#lexi-spell-overlay .lh-spell-pedagogy-example-note {
  margin-top: 2px;
  font-size: 0.88em;
  color: #777;
}
#lexi-spell-overlay .lh-spell-pedagogy-example-note em {
  font-style: italic;
}

/* Wechselpräposition motion vs location pair — stacked layout for narrow
   popovers (the spell-check popover is ~320px wide; flex-column avoids the
   awkward container-query / media-query dance). */
#lexi-spell-overlay .lh-spell-pedagogy-visual {
  margin: 12px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

#lexi-spell-overlay .lh-spell-pedagogy-svg-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lexi-spell-overlay .lh-spell-pedagogy-svg-wrapper svg {
  max-width: 100%;
  height: auto;
  display: block;
}

#lexi-spell-overlay .lh-spell-pedagogy-visual-caption {
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
  text-align: center;
  font-style: italic;
}

#lexi-spell-overlay .lh-spell-pedagogy-extra {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(17, 180, 154, 0.08);
  border-radius: 6px;
  font-size: 12px;
  color: #1e293b;
  line-height: 1.4;
}
/* "Se hele lista →" trigger for the browsable anglicism viewer. */
#lexi-spell-overlay .lh-anglicism-viewer-cta {
  margin-top: 12px;
}
#lexi-spell-overlay .lh-anglicism-viewer-btn {
  background: #11B49A;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#lexi-spell-overlay .lh-anglicism-viewer-btn:hover {
  background: #0e9d86;
}

/* "Se hele lista →" trigger for the browsable false-friends viewer. */
#lexi-spell-overlay .lh-falsefriend-viewer-cta {
  margin-top: 12px;
}
#lexi-spell-overlay .lh-falsefriend-viewer-btn {
  background: #11B49A;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#lexi-spell-overlay .lh-falsefriend-viewer-btn:hover {
  background: #0e9d86;
}

#lexi-spell-overlay .lh-spell-pedagogy-wechsel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

#lexi-spell-overlay .lh-spell-pedagogy-wechsel-motion,
#lexi-spell-overlay .lh-spell-pedagogy-wechsel-location {
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}

#lexi-spell-overlay .lh-spell-pedagogy-wechsel-motion {
  background: #FFF4E6;
  border-left-color: #E08828;
}

#lexi-spell-overlay .lh-spell-pedagogy-wechsel-location {
  background: #E6F0FA;
  border-left-color: #2E74B5;
}

#lexi-spell-overlay .lh-spell-pedagogy-wechsel-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  color: #2A2A2A;
}

#lexi-spell-overlay .lh-spell-pedagogy-wechsel-sentence {
  font-weight: 500;
  margin-bottom: 2px;
}

#lexi-spell-overlay .lh-spell-pedagogy-colloquial {
  display: block;
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: #F4F1EE;
  border-radius: 6px;
  font-size: 0.92em;
  font-style: italic;
  color: #4A4A4A;
}
#lexi-spell-overlay .lh-spell-pedagogy-colloquial em {
  font-style: italic;
}

/* Personalization (Phase 1) — popover hooks: mark-known + add-word + note */
#lexi-spell-overlay .lh-spell-mark-known {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  opacity: 0.85;
}
#lexi-spell-overlay .lh-spell-mark-known:hover { opacity: 1; }
#lexi-spell-overlay .lh-spell-known-note {
  font-size: 12px;
  opacity: 0.6;
  margin: 4px 0 0;
}
/* Læringsbunken: "you're practising this rule" note in the writing popover. */
#lexi-spell-overlay .lh-spell-learning-note {
  font-size: 12px;
  color: #9a6b16;
  margin: 6px 0 4px;
}
/* Læringsbunken: a marker for a rule the student is actively practising gets a
   soft amber ring so the mistake stands out as "the rule you're working on". */
#lexi-spell-overlay .lh-spell-dot.lh-spell-learning-marked {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e3a93a;
}

/* Level-scoped corrections — known-lesson "du kan dette" Lær mer badge */
#lexi-spell-overlay .lh-spell-laer-mer-btn.lh-spell-laer-mer-known { opacity: 0.75; font-style: italic; }

/* Lær mer lesson render — synced: works in the extension pop-out page AND the
   lockdown in-page modal (2026-06-13). The host injects an .lh-lesson-modal
   wrapper around .lh-lesson; the extension pop-out renders .lh-lesson directly. */
.lh-lesson { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; }
.lh-lesson-head { padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 16px; }
.lh-lesson-title { font-size: 22px; margin: 0; }
.lh-lesson-body { flex: 1; display: flex; }
.lh-lesson-foot { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lh-lesson-mark { padding: 8px 18px; border-radius: 8px; border: 1px solid #1e7a40; background: #1e7a40; color: #fff; cursor: pointer; font-size: 1rem; }
/* Secondary "Jeg lærer dette" button — outlined amber (læringsbunken). */
.lh-lesson-mark.lh-lesson-learn { background: #fff; color: #9a6b16; border-color: #d9b25f; }
.lh-lesson-learning-note { flex-basis: 100%; color: #9a6b16; font-size: 0.95rem; margin: 0; }
.lh-lesson-locked-note { color: #8a6d3b; font-style: italic; }
/* Click-flash feedback when a lesson footer button is pressed. */
@keyframes lh-lesson-mark-flash {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(30,122,64,.45); }
  40%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(30,122,64,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30,122,64,0); }
}
.lh-lesson-mark--flash { animation: lh-lesson-mark-flash 0.34s ease; }

/* Lesson "slide deck" layout (pop-out window + lockdown modal). Pin the nav to
   the TOP so its position is fixed regardless of slide length; hide the expand
   button (redundant in a full lesson view); give each slide a consistent frame
   and scale text up to use the available space. Scoped to .lh-lesson so the
   in-popover mini-panel keeps its compact bottom-nav layout. */
.lh-lesson .lh-spell-pedagogy-pages { display: flex; flex-direction: column; flex: 1; width: 100%; }
.lh-lesson .lh-spell-pedagogy-nav { order: -1; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0;
  display: flex; justify-content: center; align-items: center; gap: 8px; }
/* Drop the right-pushing spacer (popover-only) so the controls stay centered. */
.lh-lesson .lh-spell-pedagogy-nav-spacer { display: none; }
.lh-lesson .lh-spell-pedagogy-nav button { font-size: 1.05rem; padding: 4px 12px; }
.lh-lesson .lh-spell-pedagogy-indicator { font-size: 1rem; font-weight: 600; }
.lh-lesson .lh-spell-pedagogy-expand { display: none; }
.lh-lesson .lh-spell-pedagogy-page { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 320px; font-size: 1.2rem; line-height: 1.65; }
/* The `display:flex` above would otherwise override the [hidden] attribute's
   display:none, showing every slide at once (one long scroll). Re-hide the
   inactive slides so it's a real one-at-a-time slideshow. */
.lh-lesson .lh-spell-pedagogy-page[hidden] { display: none; }
.lh-lesson .lh-spell-pedagogy-explanation { font-size: 1.25rem; margin-bottom: 14px; }
/* lockdown modal shell (host injects .lh-lesson-modal wrapper) */
.lh-lesson-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.lh-lesson-modal { background: #fff; border-radius: 12px; padding: 24px; max-width: 560px; max-height: 80vh; overflow: auto; }

/* Cross-standard (nb/nn) note + switch hint in the dictionary view. Shipped
   here too because content.css is the synced surface the lockdown sidepanel
   loads — the dictionary-view module renders these classes there as well. */
.cross-standard-note { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.cross-standard-switch { background: none; border: none; color: #11B49A; font-size: 12px; cursor: pointer; padding: 2px 0; }
.cross-standard-switch:hover { text-decoration: underline; }

/* ── RSVP reader (rsvp-reader.js) ─────────────────────────────────────── */
/* The active paragraph is painted through the CSS Custom Highlight API, so
   nothing is wrapped in a span and the pupil's document stays untouched.
   ::highlight() accepts colour properties only — hence a tint, not a bar. */
::highlight(lh-rsvp-paragraph) {
  background-color: rgba(240, 192, 74, 0.28);
  color: inherit;
}

#lexi-rsvp {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(20, 20, 19, 0.86);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #f5f5f0;
}
#lexi-rsvp .lh-rsvp-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#lexi-rsvp .lh-rsvp-word { font-size: 48px; line-height: 1.1; letter-spacing: 0.5px; white-space: pre; }
#lexi-rsvp .lh-rsvp-pre { display: inline-block; text-align: right; width: 6ch; }
#lexi-rsvp .lh-rsvp-pivot { color: #f0c04a; }
#lexi-rsvp .lh-rsvp-post { display: inline-block; text-align: left; width: 12ch; }
#lexi-rsvp .lh-rsvp-tick { width: 1px; height: 10px; background: #54544e; margin-top: 4px; }
#lexi-rsvp .lh-rsvp-sentence { max-width: 620px; margin-top: 28px; font-size: 16px; line-height: 1.6; color: #c9c9c2; text-align: center; }
/* The surrounding sentence is already dim, so colour alone carries the mark —
   bolding it as well would make the paused view jump. */
#lexi-rsvp .lh-rsvp-sentence-word { color: #f0c04a; font-weight: normal; }
#lexi-rsvp .lh-rsvp-bar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid #33332f; }
#lexi-rsvp .lh-rsvp-progress { flex: 1; height: 4px; background: #33332f; border-radius: 2px; overflow: hidden; }
#lexi-rsvp .lh-rsvp-progress-fill { height: 100%; width: 0; background: #f0c04a; }
#lexi-rsvp .lh-rsvp-para, #lexi-rsvp .lh-rsvp-meter { font-size: 13px; color: #a8a8a2; }
#lexi-rsvp .lh-rsvp-wpm { font-size: 16px; color: #f5f5f0; }
#lexi-rsvp .lh-rsvp-record { margin-left: 10px; color: #7a7a72; }
#lexi-rsvp .lh-rsvp-record[hidden] { display: none; }
/* The keyboard hint is the only instructions the reader has, and a pupil
   meeting it for the first time has to read it from across a desk. 12px at
   #7a7a72 was too quiet to survive the dark scrim. */
#lexi-rsvp .lh-rsvp-hint { text-align: center; padding-bottom: 18px; font-size: 15px; color: #c9c9c2; letter-spacing: 0.2px; }
#lexi-rsvp .lh-rsvp-para, #lexi-rsvp .lh-rsvp-meter { font-size: 15px; }
#lexi-rsvp .lh-rsvp-wpm { font-size: 19px; }
#lexi-rsvp button { font-size: 15px; padding: 8px 14px; }
#lexi-rsvp button { background: transparent; border: 1px solid #54544e; color: #f5f5f0; border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
#lexi-rsvp button:hover { background: #2a2a26; }
#lexi-rsvp .lh-rsvp-result { position: absolute; inset: 0; background: #141413; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
/* An author `display:flex` beats the UA sheet's [hidden]{display:none}, so the
   result screen would cover the reader from the moment it opens. Same trap the
   pedagogy slideshow hit a few hundred lines up. */
#lexi-rsvp .lh-rsvp-result[hidden] { display: none; }
#lexi-rsvp .lh-rsvp-result-number { font-size: 52px; color: #f0c04a; line-height: 1.1; }
#lexi-rsvp .lh-rsvp-result-lead, #lexi-rsvp .lh-rsvp-result-detail { font-size: 13px; color: #a8a8a2; }
#lexi-rsvp .lh-rsvp-result-actions { display: flex; gap: 8px; margin-top: 14px; }

/* Fyrstegongsslida. Same grep som resultatskjermen — heildekkjande, same
   flate — fordi ho svarar på same spørsmål på motsett side av lesinga: kva
   skjer no. Lista står VENSTREJUSTERT sjølv om resten er sentrert: fire
   instruksjonslinjer midtstilte blir ein ragga blokk ingen les nedover.
   Og `[hidden]` må skrivast ut, elles slår `display:flex` her UA-arket sin
   `[hidden]{display:none}` og slida dekkjer lesaren for alltid — same fella
   resultatskjermen og pedagogikk-lysbileta gjekk i. */
#lexi-rsvp .lh-rsvp-intro {
  position: absolute; inset: 0; background: #141413;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px 24px; text-align: center;
}
#lexi-rsvp .lh-rsvp-intro[hidden] { display: none; }
#lexi-rsvp .lh-rsvp-intro-title { margin: 0; font-size: 26px; font-weight: 600; color: #f5f5f0; }
#lexi-rsvp .lh-rsvp-intro-lead { margin: 0; max-width: 480px; font-size: 16px; line-height: 1.6; color: #c9c9c2; }
#lexi-rsvp .lh-rsvp-intro-list {
  margin: 6px 0 0; padding: 0; list-style: none;
  max-width: 480px; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 15px; line-height: 1.5; color: #a8a8a2;
}
#lexi-rsvp .lh-rsvp-intro-actions { margin-top: 10px; }
/* Den einaste vegen vidare, så han skal sjå ut som det — utfylt aksent, ikkje
   den same tomme ramma som Pause og Utfordring har. */
#lexi-rsvp .lh-rsvp-intro-start {
  background: #f0c04a; border-color: #f0c04a; color: #141413;
  font-size: 16px; font-weight: 600; padding: 10px 22px;
}
#lexi-rsvp .lh-rsvp-intro-start:hover { background: #f7cf6a; border-color: #f7cf6a; }
/* Lynlesaren, ikkje opplesinga. Knappen låg 6px frå ▶ og heitte «Les», og to
   kontrollar side om side der den eine er ein play-knapp les som at begge
   gjer lyd. Han ligg no heilt til høgre, etter hastigheita, og er forma som
   ein SEKUNDÆR knapp: eiga ramme, dempa flate, ingen aksentfarge. Play-
   knappen er den grøne; denne skal ikkje konkurrere med han.

   Fyrste utgåva hadde `border-left` som skiljelinje og `border-radius:
   0 6px 6px 0`. Det såg ut som ein halv knapp med ein strek på avvegar —
   ei skiljelinje treng eit element å skilje, og her stod han ytst. */
#lexi-tts-widget .lh-rsvp-btn {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 11px;
  border: 1px solid var(--lh-border, #e2e8f0);
  border-radius: 999px;
  background: var(--lh-surface-2, #f8fafc);
  color: var(--lh-text-muted, #64748b);
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#lexi-tts-widget .lh-rsvp-btn:hover {
  background: var(--lh-surface, #fff);
  color: var(--lh-text, #334155);
  border-color: var(--lh-border-strong, #cbd5e1);
}

/* ── Marker-og-les (read-selection-layer.js) ──────────────────────────── */
/* Same teknikk og same grunn som RSVP-avsnittet over: den opplesne teksten
   blir måla gjennom CSS Custom Highlight API, så ingenting blir pakka inn i
   eit span og eleven sitt dokument står urørt. Utan denne regelen ville
   CSS.highlights.set() vore ein stille no-op — API-et ber ingen eigen farge.
   ::highlight() tek berre fargeeigenskapar, difor ei toning. */
::highlight(lh-read-selection) {
  background-color: rgba(17, 180, 154, 0.24);
  color: inherit;
}

/* ORDET som blir lese akkurat no (3.8.241, 18.09.2026). To signal, med vilje:

   1. VARM, GJENNOMSIKTIG fylling — fargetonen. Rello & Bigham (ASSETS 2017,
      341 lesarar, 89 med dysleksi): varme bakgrunnar (fersken, oransje, gul)
      gav raskast lesing for begge gruppene; blå, blågrå og grøn seinast.
      GJENNOMSIKTIG av di eit pdf.js-tekstlag ligg OPPÅ canvas-glyfane — ei
      tett fylling gøymer ordet ho skulle framheve.
   2. MØRK UNDERSTREK — luminansen. Ei pastellfylling kan ikkje nå WCAG 1.4.11
      sine 3:1 mot ei pastellmarkering rundt (målt: det gamle teal-ordet mot
      lockdown si blå PDF-markering var 1,21:1), og fargetone åleine held ikkje
      for fargeblinde. #0F6A75 gjev 6,3:1 mot kvit side og 4,7:1 mot den
      markeringa. Understreken har EIGEN farge: i PDF-tekstlaget er teksten
      `color: transparent`, og ein arva strekfarge ville vore usynleg.

   Tala er pinna i read-selection-highlight.test.js — endrar du fargane, reknar
   testen dei ut på nytt. `color: inherit` av same grunn som over. */
::highlight(lh-read-selection-word) {
  background-color: rgba(250, 204, 21, 0.5);
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: #0F6A75;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}