/* ============================================================================
   MODERN GREEN DESIGN SYSTEM
   Color Palette: Elegant greens with white text, faded background
   ============================================================================ */

:root {
  /* Modern green palette - fresh, calm, professional */
  --primary: #10b981;           /* Emerald green - main accent */
  --primary-light: #34d399;     /* Lighter emerald for highlights */
  --primary-dark: #059669;      /* Darker emerald for depth */
  --primary-deep: #047857;      /* Mörk smaragd — vit text klarar WCAG AA (4,5:1) */
  --primary-deepest: #065f46;   /* Mörkaste smaragd för gradienter/hover */

  /* Accent (teal) - komplementton för sekundära genvägsknappar (Case, Ordlista) */
  --accent: #0d9488;            /* Teal */
  --accent-dark: #0f766e;       /* Mörkare teal för text/kontrast */

  /* Backgrounds */
  --bg-main: #dcfce7;           /* Stronger green background for better visibility */
  --bg-gradient-start: #bbf7d0; /* Mint green for gradients */
  --bg-gradient-end: #dcfce7;   /* Pale green */
  --surface: #ffffff;           /* Card/input backgrounds */

  /* Text colors */
  --text-primary: #1f2937;      /* Dark gray-blue for main text */
  --text-secondary: #6b7280;    /* Medium gray for secondary text */
  --text-light: #ffffff;        /* White for contrast */

  /* Semantic colors */
  --success: #10b981;           /* Green - correct answers */
  --success-bg: #ecfdf5;        /* Success background */
  --error: #dc2626;             /* Red - wrong answers; klarar WCAG AA mot vitt åt båda hållen */
  --error-bg: #fef2f2;          /* Error background */
  --warning: #f59e0b;           /* Amber - warnings */

  /* Spacing & sizing */
  --radius: 12px;               /* Border radius */
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
  --shadow-lg: 0 8px 24px rgba(16, 185, 129, 0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Ubuntu', sans-serif;
  background: linear-gradient(135deg, var(--bg-main) 0%, var(--bg-gradient-end) 100%);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* Ensure body fills viewport */
body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: var(--primary);
  color: var(--text-light);
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  z-index: 999;
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

/* Döljer element visuellt men behåller dem för skärmläsare */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   LAYOUT & CONTAINER
   ============================================================================ */

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    padding: 24px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 32px;
  }
}

/* ============================================================================
   HEADER & TYPOGRAPHY
   ============================================================================ */

.header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  animation: slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .header h1 {
    font-size: 2rem;
  }
}

.header-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}

.header h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  line-height: 1.2;
  flex-shrink: 0;
}

.version {
  font-size: 0.9rem;
  font-weight: 400;
  color: #059669;
  white-space: nowrap;
  flex-shrink: 0;
}

.tagline {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 400;
}

/* Om-sektionen sist på startsidan — beskrivande text för besökare och SEO */
.intro h2 {
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.intro p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.intro a {
  color: var(--primary-dark);
  font-weight: 600;
}

/* Dölj Om-sektionen när startvyn är dold (under quiz/flashcards/resultat) */
#setup.hidden ~ .intro {
  display: none;
}

/* ============================================================================
   CARD STYLES
   ============================================================================ */

.card {
  background: var(--surface);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  border: 1px solid rgba(16, 185, 129, 0.1);
  animation: fadeInUp 0.5s ease-out;
  transition: all var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card.hidden {
  display: none;
}

@media (max-width: 640px) {
  .card {
    padding: 16px;
  }
}

/* ============================================================================
   FORMS & INPUTS
   ============================================================================ */

label {
  display: block;
  margin: 16px 0 8px 0;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

label:first-child {
  margin-top: 0;
}

input,
select {
  font: inherit;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(16, 185, 129, 0.15);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

input::placeholder,
select::placeholder {
  color: var(--text-secondary);
}

option {
  color: var(--text-primary);
  background: var(--surface);
}

/* Två checkboxar bredvid varandra (öva extra + tidsgräns); radbryts på smal skärm */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 16px 0 8px;
}

.checkbox-group .checkbox-row {
  flex: 1 1 240px;
  margin: 0;
}

/* Checkbox-rad (t.ex. "Öva extra på de jag svarar fel på") */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
}

.checkbox-row input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  /* I linje med etikettens FÖRSTA rad (inte centrerad över ev. hjälptext under).
     Gäller alla nuvarande och framtida checkboxar i settings. */
  margin: calc((1.4em - 20px) / 2) 0 0 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.checkbox-row small {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  color: var(--text-secondary);
}

option:disabled {
  color: var(--text-secondary);
  background: #f3f4f6;
}

/* På smala mobilskärmar: krymp alla dropdowns (de var onödigt stora) så att
   texten ryms bättre i listan som poppar upp. */
@media (max-width: 480px) {
  select,
  select option {
    font-size: 0.8rem;
  }
}

input:hover,
select:hover {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.02);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Tydlig fokusring vid tangentbordsnavigering (WCAG 2.4.7) */
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 2px;
}

/* ============================================================================
   BUTTONS & ACTIONS
   ============================================================================ */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 600px) {
  .actions {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .actions {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.btn {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--primary);
  cursor: pointer;
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  position: relative;
  overflow: visible;
  flex: 1;
  text-decoration: none;
  line-height: 1.3;
  word-break: break-word;
}

/* Button hover state - subtle lift effect */
.btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.05);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Button active state */
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

/* Primary button - full gradient with white text */
.btn.primary {
  background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-deepest) 100%);
  color: var(--text-light);
  border: none;
  box-shadow: var(--shadow);
}

.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-deepest) 0%, #064e3b 100%);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* Disabled button state */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tydlig fokusring enbart vid tangentbordsfokus (WCAG 2.4.7) */
.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 2px;
}

/* Cancel button - red, separate from other actions */
.btn-cancel {
  border-color: var(--error);
  color: var(--error);
  white-space: nowrap;
  flex: 0 0 auto;
}

.btn-cancel:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.05);
  border-color: #dc2626;
  color: #dc2626;
}

/* ============================================================================
   INSTÄLLNINGSSIDA — brödsmulor, frågetyps-piller, etiketter
   ============================================================================ */

/* Brödsmulelänk överst: "‹ Start  ›  Inställningar" */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.crumb-link {
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
}

.crumb-link:hover {
  text-decoration: underline;
}

.crumb-current {
  color: var(--text-secondary);
}

/* Etikett som ser ut som <label> men för piller-gruppen */
.settings-label {
  display: block;
  margin: 16px 0 8px 0;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.settings-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Förklaring av MC/FC/TF under ämnesväljaren på startsidan */
.topic-legend {
  font-size: 0.75em;
  font-style: italic;
  margin: 0.25em 0 0;
}

/* ============================================================================
   QUIZ SECTION STYLES
   ============================================================================ */

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(16, 185, 129, 0.1);
  gap: 16px;
  flex-wrap: wrap;
}

.quiz-header > div {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

/* Question display area */
.question {
  font-size: 1.25rem;
  font-weight: 600;
  padding: 20px;
  background: linear-gradient(135deg, #a7f3d0 0%, #86efac 100%);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary-dark);
  margin-bottom: 24px;
  color: var(--text-primary);
  line-height: 1.6;
  animation: fadeIn 0.4s ease-out;
  box-shadow: var(--shadow);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Answers grid - responsive layout */
.answers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 24px 0;
}

@media (min-width: 768px) {
  .answers {
    grid-template-columns: 1fr 1fr;
  }
}

/* Individual answer buttons */
.answer-btn {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(16, 185, 129, 0.2);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  min-height: 60px;
  display: flex;
  align-items: center;
}

.answer-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.05);
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: var(--shadow);
}

.answer-btn:active:not(:disabled) {
  transform: translateX(0);
}

.answer-btn:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 2px;
}

/* Correct answer styling - mörk smaragd, vit text klarar WCAG AA */
.answer-btn.correct {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: white;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: slideInCorrect 0.4s ease-out;
  font-weight: 600;
}

@keyframes slideInCorrect {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Wrong answer styling - PURE RED */
.answer-btn.wrong {
  background: var(--error);
  border-color: var(--error);
  color: white;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  animation: shake 0.4s ease-out;
  font-weight: 600;
}

/* ✓/✗-markering på besvarad fråga — komplement till färgen (WCAG 1.4.1) */
.answer-mark {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 700;
  font-size: 1.1em;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ============================================================================
   QUIZ FOOTER & TIMER
   ============================================================================ */

.quiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid rgba(16, 185, 129, 0.1);
  gap: 16px;
  flex-wrap: wrap;
}

.quiz-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}

.timer {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 100px;
  text-align: center;
}

/* Tiden fram till klick, visad på den tryckta svarsknappen */
.answer-time {
  margin-left: 8px;
  font-size: 0.85em;
  font-weight: 700;
  opacity: 0.75;
}

/* Tiden fram till klick, visad på flashcardens svarssida */
.fc-answer-time {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Timer warning state - red when running out */
.timer.warning {
  color: white;
  background-color: var(--error);
  padding: 4px 8px;
  border-radius: 4px;
  animation: blink-red 0.5s infinite;
}

@keyframes blink-red {
  0%, 100% { background-color: var(--error); opacity: 1; }
  50% { background-color: #ff6b6b; opacity: 0.8; }
}

/* ============================================================================
   MANAGE & REPORTED SECTIONS
   ============================================================================ */

.manage-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(16, 185, 129, 0.08);
  gap: 12px;
  transition: all var(--transition-fast);
}

.manage-row:hover {
  background: rgba(16, 185, 129, 0.02);
  padding-left: 16px;
}

.manage-row:last-child {
  border-bottom: none;
}

.manage-title {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

/* Badges for question metadata */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge.placeholder {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

/* ============================================================================
   INFO & CHANGELOG SECTION
   ============================================================================ */

/* Setup action area: primärknappar + sekundära knappar */
.setup-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Rad med quiz- och flashcard-knapparna — identisk logik som .secondary-actions */
.primary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.primary-actions .btn {
  width: 100%;
}

.btn-start {
  padding: 14px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.secondary-actions {
  display: flex;
  gap: 12px;
}

.secondary-actions .btn {
  flex: 1;
}

/* Accent-rad (teal) — genvägsknapparna Case + Ordlista längst ned på framsidan */
.accent-row .btn {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.accent-row .btn:hover:not(:disabled) {
  background: rgba(13, 148, 136, 0.06);
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2);
}

.accent-row .btn:active:not(:disabled) {
  box-shadow: 0 2px 4px rgba(13, 148, 136, 0.15);
}

.accent-row .btn:focus-visible {
  outline-color: var(--accent-dark);
}

.info-about {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 28px;
}

.info-about p {
  margin: 0 0 12px 0;
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.info-about p:last-child {
  margin-bottom: 0;
}

.info-creator {
  color: var(--text-secondary) !important;
  font-size: 0.95rem !important;
}

.info-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.info-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

#info h2 {
  font-size: 1.05rem;
}

/* ============================================================================
   FRÅGESTATISTIK (info.html)
   ============================================================================ */

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.stats-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(16, 185, 129, 0.2);
}

.stats-table th:not(:first-child) {
  text-align: right;
}

.stats-table td {
  padding: 9px 12px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(16, 185, 129, 0.08);
}

.stats-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-total-row td {
  font-weight: 700;
  border-top: 2px solid rgba(16, 185, 129, 0.2);
}

.stats-fc-row td {
  border-bottom: none;
  border-top: 2px solid rgba(16, 185, 129, 0.1);
  color: var(--text-secondary);
  font-style: italic;
}

.stats-diff {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.stats-loading {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
}

.changelog-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(16, 185, 129, 0.15);
  letter-spacing: 0.2px;
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.changelog-loading {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 8px 0;
  margin: 0;
}

.changelog-entry {
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.changelog-version {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #ffffff;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.cl-body {
  padding: 10px 16px 12px 16px;
  background: var(--surface);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.cl-item {
  color: var(--text-primary);
  font-size: 0.616rem;
  line-height: 1.6;
  padding: 3px 0;
  border-bottom: 1px solid rgba(16, 185, 129, 0.06);
}

.cl-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ============================================================================
   GLOSSARY / ORDLISTA
   ============================================================================ */

.glossary-desc {
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  font-size: 0.95rem;
}

.glossary-search {
  margin-bottom: 20px;
}

.glossary-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  max-height: 62vh;
  overflow-y: auto;
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-sm);
}

/* h3-rubrik per bokstav — nollställ rubrikens UA-marginal */
.glossary-letter {
  margin: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 5px 16px;
  letter-spacing: 1.5px;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* <dl> per bokstavsgrupp — nollställ listans UA-marginal */
.glossary-group {
  margin: 0;
}

.glossary-entry {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(16, 185, 129, 0.07);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: background var(--transition-fast);
  align-items: start;
}

.glossary-entry:last-child {
  border-bottom: none;
}

.glossary-entry:hover {
  background: rgba(16, 185, 129, 0.04);
}

/* <dt> — nollställ ev. UA-marginal */
.glossary-term {
  margin: 0;
  font-weight: 700;
  color: var(--primary-dark);
  word-break: break-word;
}

/* <dd> — nollställ webbläsarens indrag (margin-inline-start: 40px) */
.glossary-def {
  margin: 0;
  color: var(--text-primary);
}

.glossary-empty {
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 600px) {
  .glossary-entry {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 12px;
  }

  .glossary-def {
    color: var(--text-secondary);
  }
}

/* ============================================================================
   BRÖDSMULOR
   Används på fristående undersidor (ordlista) samt SPA-sektioner (info).
   button.breadcrumb-link nollställer knappens standardstilar.
   ============================================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.breadcrumb-link {
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

/* Specificitet 0,2,1 — täcker alla länktillstånd inklusive :visited (lila på mobil) */
a.breadcrumb-link,
a.breadcrumb-link:visited,
a.breadcrumb-link:hover,
a.breadcrumb-link:focus,
a.breadcrumb-link:active {
  color: var(--primary-dark);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Knappvariant — nollställer ALL webbläsar- och OS-styling så att
   button.breadcrumb-link ser identisk ut med a.breadcrumb-link */
button.breadcrumb-link {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--text-secondary);
  opacity: 0.5;
}

.breadcrumb-current {
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
  margin-top: 32px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
  border-top: 1px solid rgba(16, 185, 129, 0.1);
}

.footer code {
  background: rgba(16, 185, 129, 0.08);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

/* ============================================================================
   ORDERED LISTS
   ============================================================================ */

ol {
  padding-left: 1.5rem;
  color: var(--text-primary);
}

ol li {
  margin-bottom: 12px;
  line-height: 1.6;
}

/* Topplistan: kompakt, prydlig rad per post med kolumner.
   VIKTIGT: overflow-x på #scoreList är behållaren som gör att en för bred rad
   scrollar INUTI listan i stället för att tänja ut hela kortet/sidan (det var
   det 0.4.34 missade, vilket sköt statistiken utanför mobilskärmen). Rör ej. */
#scoreList,
#bestList {
  list-style: none;
  padding-left: 0;
  overflow-x: auto;
}

.score-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 5px 8px;
  margin: 0;
  border-radius: 6px;
}

.score-row:nth-child(odd) {
  background: rgba(16, 185, 129, 0.06);
}

/* Fasta kolumner; ämnet får krympa/avkortas så raden helst ryms inom skärmbredden */
.score-row > span { white-space: nowrap; flex: 0 0 auto; }
.score-row .sr-rank { color: var(--text-secondary); min-width: 1.6em; text-align: right; }
.score-row .sr-name { font-weight: 700; }
.score-row .sr-topic { color: var(--text-secondary); flex: 1 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
.score-row .sr-score { font-variant-numeric: tabular-nums; }
.score-row .sr-pct { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
/* Ej klarat (< 75 %): röd procenttext, samma röda ton som statistikens svaga ämnen. */
.score-row .sr-pct.weak { color: var(--error); }
.score-row .sr-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.score-row .sr-date { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .score-row {
    font-size: 0.62rem;
    gap: 7px;
    padding: 4px 6px;
  }
}

/* ============================================================================
   RESPONSIVE DESIGN
   Mobile-first approach ensures great experience on all devices
   ============================================================================ */

@media (max-width: 640px) {
  .quiz-footer {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
  }

  .quiz-actions {
    margin-left: 0;
    gap: 8px;
    flex: 0 0 auto;
  }

  .btn {
    padding: 6px 8px;
    font-size: 0.8rem;
    min-height: 36px;
    flex: 0 0 auto !important;
    width: auto;
  }

  /* Fyra knappar på en rad: krymp font/padding/gap så de längsta orden
     ("Topplista", "Inställningar") ryms på en rad utan radbrytning. */
  .secondary-actions {
    gap: 6px;
  }

  .secondary-actions .btn {
    flex: 1 !important;
    width: 0;
    padding: 8px 3px;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  .btn-cancel {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .timer {
    font-size: 0.75rem;
    min-width: auto;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  .header > div:last-child {
    text-align: right;
  }
}

/* ============================================================================
   MOTION & ANIMATION PREFERENCES
   Respect user's motion preferences for accessibility
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   FLASHCARDS
   Tvåsidigt kort med 3D-flip-animation. Framsida = fråga, baksida = svar.
   ============================================================================ */

/* Rubrikrad med spelarnamn och kortets position */
.fc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Yttre behållare — skapar perspektivet för 3D-effekten */
.fc-scene {
  cursor: pointer;
  margin-bottom: 24px;
  border-radius: var(--radius);
  outline: none;
}

.fc-scene:focus-visible .fc-card {
  box-shadow: 0 0 0 3px var(--primary);
}

/*
 * Kortet — per-element-perspective-teknik.
 * Undviker transform-style: preserve-3d som iOS Safari hanterar fel
 * när ett förälderelement har border-radius. Varje sida har sin
 * egen perspective() direkt i transform-egenskapen.
 */
.fc-card {
  position: relative;
  border-radius: var(--radius);
  min-height: 220px;
  background: #bbf7d0;
}

/* Gemensamma stilar för fram- och baksida */
.fc-front,
.fc-back {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 20px;
  overflow-y: auto;
  border-radius: var(--radius);
  /*
   * Transform och opacity animeras var för sig. Opacity får en RIKTIG
   * varaktighet (0.25s) — inte 0s, som iOS/WebKit behandlar som "ingen
   * övergång" och därför byter direkt vid t=0 (= svaret blinkar fram medan
   * frågan syns). Sidorna staggas (se transition-delay nedan) så att frågan
   * tonar ut under första halvan och svaret tonar in under andra halvan;
   * vid mittpunkten är kortet kant-mot-kant och tomt → ingen dubbeltext.
   */
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transition-duration: 0.5s, 0.25s;
  transition-duration: 0.5s, 0.25s;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease;
}

/* Framsida — synlig i vila, tonar ut under flippens FÖRSTA halva */
.fc-front {
  background: transparent;
  border: 2px solid rgba(16, 185, 129, 0.2);
  box-shadow: var(--shadow);
  -webkit-transform: perspective(800px) rotateY(0deg);
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
  -webkit-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}

/* Baksida — dold i vila, tonar in under flippens ANDRA halva */
.fc-back {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-lg);
  -webkit-transform: perspective(800px) rotateY(-180deg);
  transform: perspective(800px) rotateY(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0s, 0.25s;
  transition-delay: 0s, 0.25s;
}

/* Flippad — framsidan vrids bort och döljs, baksidan vrids fram */
.fc-card.is-flipped .fc-front {
  -webkit-transform: perspective(800px) rotateY(180deg);
  transform: perspective(800px) rotateY(180deg);
  opacity: 0;
}

.fc-card.is-flipped .fc-back {
  -webkit-transform: perspective(800px) rotateY(0deg);
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
}

/*
 * Vid kortbyte snäpps kortet tillbaka till framsidan helt utan animation,
 * så att baksidans (nästa korts) svar aldrig hinner skymta på mobilen medan
 * innehållet byts. Flip-animationen slås på igen nästa frame.
 */
.fc-card.fc-no-anim .fc-front,
.fc-card.fc-no-anim .fc-back {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Frågetexten på framsidan */
.fc-question {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.55;
  margin: 0 0 6px 0;
}

/* Indikationsrad under frågan — t.ex. "(Vad är dess funktion?)" */
.fc-question-sub {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  margin: 0 0 20px 0;
}

.fc-question-sub.hidden {
  display: none;
}

/* Svaret på baksidan */
.fc-answer {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  line-height: 1.4;
  margin: 0;
  white-space: pre-line;
}

/* "Tryck för att se svaret" — diskret ledtext */
.fc-hint {
  font-size: 0.64rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-top: auto;
  letter-spacing: 0.2px;
}

/* "SVAR"-etikett på baksidan */
.fc-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 14px;
}

/* Klart-vy när alla kort är genomgångna */
.fc-finish-actions {
  grid-template-columns: 1fr 1fr 1fr;
}

.fc-finished {
  text-align: center;
  padding: 32px 0 8px;
}

.fc-done-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
}

/* Reducera animation för användare som föredrar det */
@media (prefers-reduced-motion: reduce) {
  .fc-front,
  .fc-back {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   TOPPLISTA — filter & statistik
   ============================================================================ */

.hs-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.hs-filter label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.hs-filter select {
  flex: 1;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--primary);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.hs-stats-heading {
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 1rem;
  color: var(--text-primary);
}

.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-gradient-start);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.stats-list li:last-child {
  border-bottom: none;
}

/* Statistikrad: ämne | antal försök | stapel | procent | tid/fråga.
   Stapeln (.st-bar) krymper/växer; övriga kolumner har fast bredd så att
   procent och tid radar upp sig prydligt. Speglar topplistans .score-row.
   OBS: selektorn måste vara mer specifik än `.stats-list li` (0,1,1) annars
   vinner dess font-size: 0.9rem — därför `.stats-list .stat-row` (0,2,0). */
.stats-list .stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--bg-gradient-start);
  font-size: 0.78rem;
  line-height: 1.4;
  border-radius: 6px;
}

.stat-row:nth-child(odd) {
  background: rgba(16, 185, 129, 0.06);
}

.stat-row:last-child {
  border-bottom: none;
}

.st-topic {
  font-weight: 700;
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-count {
  flex: 0 0 auto;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.st-bar {
  flex: 0 0 70px;
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  overflow: hidden;
}

.st-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

.st-pct {
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: right;
  font-weight: 700;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

/* Svagt ämne (< 75 % snitt): röd stapel och röd procent som varningssignal. */
.stat-row.weak .st-bar {
  background: rgba(239, 68, 68, 0.15);
}

.stat-row.weak .st-bar-fill {
  background: linear-gradient(90deg, var(--error) 0%, #f87171 100%);
}

.stat-row.weak .st-pct {
  color: var(--error);
}

.st-time {
  flex: 0 0 auto;
  min-width: 4.2em;
  text-align: right;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .stats-list .stat-row {
    font-size: 0.62rem;
    gap: 7px;
    padding: 8px 6px;
  }
  .st-bar { flex-basis: 48px; }
  .st-time { min-width: 3.6em; }
}

/* ============================================================================
   CASE — kliniska fallbeskrivningar (case.html)
   ============================================================================ */

.case-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
}

.case-filter label {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.case-filter select {
  flex: 1 1 160px;
  min-width: 140px;
  margin: 0;
}

.case-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case-card {
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(52, 211, 153, 0.04) 100%);
  padding: 20px;
}

.case-card.hidden { display: none; }

.case-card-head {
  margin-bottom: 12px;
}

.case-topic-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: rgba(16, 185, 129, 0.12);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.case-title {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.case-meta {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
}

.case-body p {
  margin: 0 0 12px 0;
  line-height: 1.7;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.case-body p:last-child {
  margin-bottom: 0;
}

/* Medicinskt latinska termer kursiveras för att skilja dem från brödtexten */
.case-body em {
  font-style: italic;
  color: var(--primary-dark);
}

/* Mobil: case-texten är lång, så den får en något mindre grad och tätare radavstånd */
@media (max-width: 640px) {
  .case-body p {
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .case-title {
    font-size: 1rem;
  }
}

.case-empty {
  margin: 18px 0 0;
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
}

.case-empty.hidden { display: none; }