/* ═══════════════════════════════════════════════════════════════════════════
   LearnKusto — Premium Design System
   Loaded AFTER Bootstrap 5.3 to override defaults.
   Dark-mode-first. Light mode via [data-bs-theme="light"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Inter and JetBrains Mono, vendored latin subsets (static/vendor/fonts).
   Previously a Google Fonts @import, which died silently on venue networks. */
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../vendor/fonts/Inter-300-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/Inter-400-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/Inter-500-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/Inter-600-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/Inter-700-latin.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/JetBrainsMono-400-latin.b636a65da4f0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/JetBrainsMono-500-latin.b636a65da4f0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --lk-bg-base:        #0a0f1a;
  --lk-bg-card:        rgba(17, 24, 39, 0.85);
  --lk-bg-elevated:    rgba(30, 41, 59, 0.7);
  --lk-bg-sidebar:     #070b14;
  --lk-bg-input:       rgba(15, 23, 42, 0.8);

  /* accent gradient */
  --lk-accent-1:       #06b6d4;   /* cyan-500  */
  --lk-accent-2:       #3b82f6;   /* blue-500  */
  --lk-accent-gradient: linear-gradient(135deg, var(--lk-accent-1), var(--lk-accent-2));

  /* A11Y (WCAG 1.4.3): white text on the brand gradient is 2.4:1 at the cyan
     end and 3.7:1 at the blue end. Buttons that carry white words use these
     deeper ends instead: 5.4:1 on cyan-700 and 6.7:1 on blue-700. The brand
     gradient above stays for fills that carry no text. */
  --lk-accent-1-deep:  #0e7490;   /* cyan-700  */
  --lk-accent-2-deep:  #1d4ed8;   /* blue-700  */
  --lk-button-gradient: linear-gradient(135deg, var(--lk-accent-1-deep), var(--lk-accent-2-deep));
  /* Secondary text on a primary button (the Shift+Enter hint): 5.0:1 on the
     cyan end, 6.3:1 on the blue end. */
  --lk-on-button-muted: #f0f9ff;

  /* status */
  --lk-success:        #10b981;
  --lk-warning:        #f59e0b;
  --lk-danger:         #ef4444;
  --lk-info:           #06b6d4;

  /* text */
  --lk-text-primary:   #f1f5f9;
  --lk-text-secondary: #94a3b8;
  /* A11Y-101 (WCAG 1.4.3): was #64748b, which is 3.8:1 on the card surface and
     4.0:1 on the base. This value clears 4.5:1 on base, card and elevated. */
  --lk-text-muted:     #7d8ba1;

  /* Text-on-surface variants of the accent and status colours. The solid
     brand values above are tuned for fills and borders, where 4.5:1 does not
     apply. These are the values to use when the colour carries words. */
  --lk-accent-text:    #06b6d4;
  --lk-success-text:   #10b981;
  --lk-warning-text:   #f59e0b;
  --lk-danger-text:    #f87171;
  --lk-info-text:      #06b6d4;

  /* borders & shadows */
  --lk-border:         rgba(148, 163, 184, 0.1);
  --lk-border-hover:   rgba(6, 182, 212, 0.25);
  --lk-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
  --lk-shadow-md:      0 4px 14px rgba(0, 0, 0, 0.35);
  --lk-shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.4);
  --lk-shadow-glow:    0 0 20px rgba(6, 182, 212, 0.08);
  --lk-shadow-glow-md: 0 0 30px rgba(6, 182, 212, 0.12);

  /* radii */
  --lk-radius-sm:  6px;
  --lk-radius-md:  10px;
  --lk-radius-lg:  14px;
  --lk-radius-xl:  20px;

  /* transitions */
  --lk-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --lk-duration:   0.3s;

  /* typography */
  --lk-font-body:  'Inter', system-ui, -apple-system, sans-serif;
  --lk-font-mono:  'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
}

/* Light-mode overrides */
[data-bs-theme="light"] {
  --lk-bg-base:        #f8fafc;
  --lk-bg-card:        rgba(255, 255, 255, 0.9);
  --lk-bg-elevated:    rgba(241, 245, 249, 0.9);
  --lk-bg-sidebar:     #ffffff;
  --lk-bg-input:       rgba(241, 245, 249, 0.8);
  --lk-text-primary:   #0f172a;
  --lk-text-secondary: #334155;
  --lk-text-muted:     #64748b;
  /* A11Y-101 (WCAG 1.4.3): the dark-mode accent and status colours drop to
     2.2:1 - 3.8:1 on a white card, so light mode needs darker text variants. */
  --lk-accent-text:    #0e7490;
  --lk-success-text:   #047857;
  --lk-warning-text:   #a16207;
  --lk-danger-text:    #b91c1c;
  --lk-info-text:      #0e7490;
  --lk-border:         rgba(15, 23, 42, 0.08);
  --lk-border-hover:   rgba(59, 130, 246, 0.25);
  --lk-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06);
  --lk-shadow-md:      0 4px 14px rgba(0, 0, 0, 0.08);
  --lk-shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.1);
  --lk-shadow-glow:    0 0 20px rgba(59, 130, 246, 0.06);
  --lk-shadow-glow-md: 0 0 30px rgba(59, 130, 246, 0.1);
}


/* ── Base Reset & Typography ───────────────────────────────────────────── */
body {
  font-family: var(--lk-font-body) !important;
  background: var(--lk-bg-base) !important;
  color: var(--lk-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lk-text-primary);
}

h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 600; }

small, .small, .text-muted { color: var(--lk-text-muted) !important; }
.text-body-secondary { color: var(--lk-text-secondary) !important; }
.text-body-tertiary  { color: var(--lk-text-muted) !important; }
.text-secondary      { color: var(--lk-text-secondary) !important; }
.text-primary:not(.badge):not(.alert):not(.bg-primary) { color: var(--lk-accent-text) !important; }

/* A11Y-101 (WCAG 1.4.3). Bootstrap's status text colours are fixed hex values
   tuned for a white page: on the dark surfaces they land at 3.8:1 - 4.0:1, and
   the brand greens and ambers fall to 2.2:1 - 2.5:1 in light mode. Route the
   text-only utilities through the theme-aware text tokens instead. Badges,
   alerts and filled backgrounds are excluded: they set their own ground, so the
   pairing is already controlled and must not be repainted here. */
.text-success:not(.badge):not(.alert):not([class*='bg-']) { color: var(--lk-success-text) !important; }
.text-danger:not(.badge):not(.alert):not([class*='bg-'])  { color: var(--lk-danger-text) !important; }
.text-warning:not(.badge):not(.alert):not([class*='bg-']) { color: var(--lk-warning-text) !important; }
.text-info:not(.badge):not(.alert):not([class*='bg-'])    { color: var(--lk-info-text) !important; }

code, pre, .flag-input {
  font-family: var(--lk-font-mono) !important;
}


/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--lk-bg-card) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-lg) !important;
  box-shadow: var(--lk-shadow-sm);
  transition: box-shadow var(--lk-duration) var(--lk-ease),
              border-color var(--lk-duration) var(--lk-ease),
              transform var(--lk-duration) var(--lk-ease);
}

.card:hover {
  box-shadow: var(--lk-shadow-md), var(--lk-shadow-glow);
  border-color: var(--lk-border-hover) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--lk-border) !important;
  padding: 1.1rem 1.5rem;
}

.card-body { padding: 1.5rem; }

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--lk-border) !important;
  padding: 1rem 1.5rem;
}

/* Lift-on-hover cards (opt-in) */
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--lk-shadow-lg), var(--lk-shadow-glow-md);
}

/* Suppress hover glow on cards that wrap tables or static content */
.card:has(.table):hover,
.card:has(.card-body.p-0):hover {
  box-shadow: var(--lk-shadow-sm);
  border-color: var(--lk-border) !important;
  transform: none;
}


/* ── KPI / Stat Cards ──────────────────────────────────────────────────── */
.kpi-card {
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lk-accent-gradient);
  border-radius: var(--lk-radius-lg) var(--lk-radius-lg) 0 0;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kpi-label {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lk-text-muted);
  margin-top: 0.25rem;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--lk-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--lk-bg-elevated);
  color: var(--lk-accent-1);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
}

.kpi-icon--success { color: var(--lk-success); box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); }
.kpi-icon--warning { color: var(--lk-warning); box-shadow: 0 0 15px rgba(245, 158, 11, 0.1); }
.kpi-icon--danger  { color: var(--lk-danger);  box-shadow: 0 0 15px rgba(239, 68, 68, 0.1); }
.kpi-icon--info    { color: var(--lk-info);    box-shadow: 0 0 15px rgba(6, 182, 212, 0.1); }


/* A11Y-102: heading level expresses structure, not size. A card title is an
   h2 (or h3 inside a section) and carries Bootstrap's .h4, .h5 or .h6 utility
   for the size it had when the level was chosen for its type scale, so the
   document outline has no gaps and nothing moves on screen. New cards follow
   the same rule: pick the level from the outline, the size from the class. */

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  border-radius: var(--lk-radius-sm) !important;
  padding: 0.55rem 1.25rem;
  transition: all var(--lk-duration) var(--lk-ease);
  letter-spacing: 0.01em;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--lk-button-gradient) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35) !important;
}
/* The keyboard hint inside Run was Bootstrap's 50 percent white, 1.1:1 at the
   cyan end. */
.btn-primary .text-white-50 {
  color: var(--lk-on-button-muted) !important;
}

/* A11Y (WCAG 1.4.3): outline buttons take the theme's text variant of their
   colour, not the fill colour. On a white card the fills are 2.4:1 (cyan),
   2.0:1 (info) and 1.6:1 (warning); the text variants are 5.4:1 and 4.9:1.
   Hover keeps the text colour on a tinted background so the label never
   disappears into its own fill. */
.btn-outline-primary {
  --bs-btn-color: var(--lk-accent-text);
  --bs-btn-border-color: var(--lk-accent-text);
  --bs-btn-hover-color: var(--lk-accent-text);
  --bs-btn-hover-bg: rgba(6, 182, 212, 0.1);
  --bs-btn-hover-border-color: var(--lk-accent-text);
  --bs-btn-active-color: var(--lk-accent-text);
  --bs-btn-active-bg: rgba(6, 182, 212, 0.18);
  --bs-btn-active-border-color: var(--lk-accent-text);
  border-color: var(--lk-accent-text) !important;
  color: var(--lk-accent-text) !important;
}
.btn-outline-primary:hover {
  background: rgba(6, 182, 212, 0.1) !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}
.btn-outline-info {
  --bs-btn-color: var(--lk-info-text);
  --bs-btn-border-color: var(--lk-info-text);
  --bs-btn-hover-color: var(--lk-info-text);
  --bs-btn-hover-bg: rgba(6, 182, 212, 0.1);
  --bs-btn-hover-border-color: var(--lk-info-text);
  --bs-btn-active-color: var(--lk-info-text);
  --bs-btn-active-bg: rgba(6, 182, 212, 0.18);
  --bs-btn-active-border-color: var(--lk-info-text);
}
.btn-outline-warning {
  --bs-btn-color: var(--lk-warning-text);
  --bs-btn-border-color: var(--lk-warning-text);
  --bs-btn-hover-color: var(--lk-warning-text);
  --bs-btn-hover-bg: rgba(245, 158, 11, 0.12);
  --bs-btn-hover-border-color: var(--lk-warning-text);
  --bs-btn-active-color: var(--lk-warning-text);
  --bs-btn-active-bg: rgba(245, 158, 11, 0.2);
  --bs-btn-active-border-color: var(--lk-warning-text);
}

.btn-outline-secondary {
  border-color: var(--lk-border) !important;
}
.btn-outline-secondary:hover {
  background: var(--lk-bg-elevated) !important;
}

/* A11Y-105, WCAG 2.2 SC 2.5.8 target size. A small button keeps its type size
   but never renders under 24 by 24 CSS pixels. The compact scale replaces the
   old btn-sm plus py-0 pairing in dense tables and toolbars: the same 14px
   text with 2px of vertical padding, which measures about 27px tall against
   the 22.6px the py-0 variant rendered at. Padding, not font size, so the
   visual weight of the row is kept. */
.btn-sm {
  min-height: 1.5rem;
  min-width: 1.5rem;
}

.btn-sm.lk-btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

/* Pill buttons (CTF filters, tags) */
.btn-pill {
  border-radius: 50px !important;
  padding: 0.4rem 1.1rem;
  font-size: 0.85rem;
}


/* ── Form Controls ─────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--lk-bg-input) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-sm) !important;
  color: var(--lk-text-primary) !important;
  padding: 0.65rem 1rem;
  transition: border-color var(--lk-duration) var(--lk-ease),
              box-shadow var(--lk-duration) var(--lk-ease);
}

.form-control:focus, .form-select:focus {
  border-color: var(--lk-accent-1) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}

.form-control::placeholder { color: var(--lk-text-muted) !important; }

.form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--lk-text-secondary);
  margin-bottom: 0.4rem;
}

.form-check-input:checked {
  background-color: var(--lk-accent-1) !important;
  border-color: var(--lk-accent-1) !important;
}

.form-switch .form-check-input {
  transition: background-color var(--lk-duration) var(--lk-ease);
}

/* A11Y-105 (WCAG 2.2 SC 2.5.8): the theme switch rendered 32 by 16 CSS pixels.
   The control itself is the target, so it grows to the 24px floor. */
.form-switch .form-check-input#themeToggle {
  width: 3rem;
  height: 1.5rem;
  margin-top: 0;
}


/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.35em 0.75em;
  border-radius: 50px;
}

.badge-glow {
  box-shadow: 0 0 10px currentColor;
}

/* A11Y (WCAG 1.4.3): the info badge (difficulty, dataset chips) was white on
   Bootstrap's cyan at 12px, 1.96:1. Dark text on a light cyan fill is 12.3:1
   and reads the same in both themes, so the rule is theme independent. */
.badge.bg-info,
.badge.text-bg-info {
  background-color: #67e8f9 !important;
  color: #0f172a !important;
}

/* Status badges */
.badge-done       { background: var(--lk-success) !important; }
.badge-stuck      { background: var(--lk-danger) !important; }
.badge-exercising { background: var(--lk-accent-2) !important; }
.badge-reading    { background: var(--lk-text-muted) !important; }


/* ── Tables ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--lk-bg-elevated);
  border-bottom: 2px solid var(--lk-border) !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lk-text-muted);
  padding: 0.85rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody tr {
  transition: background var(--lk-duration) var(--lk-ease);
}

.table tbody tr:hover {
  background: var(--lk-bg-elevated) !important;
}

.table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--lk-border) !important;
  vertical-align: middle;
}

.table-highlight {
  background: rgba(6, 182, 212, 0.05) !important;
  border-left: 3px solid var(--lk-accent-1);
}


/* ── List Groups ───────────────────────────────────────────────────────── */
.list-group-item {
  background: var(--lk-bg-card) !important;
  border-color: var(--lk-border) !important;
  color: var(--lk-text-primary);
  transition: background var(--lk-duration) var(--lk-ease);
}

.list-group-item:hover {
  background: var(--lk-bg-elevated) !important;
}


/* ── Alerts / Flash Messages ───────────────────────────────────────────── */
.alert {
  border-radius: var(--lk-radius-md) !important;
  border: none !important;
  border-left: 4px solid !important;
  padding: 1rem 1.25rem;
  backdrop-filter: blur(8px);
  animation: lk-slideDown 0.4s var(--lk-ease);
}

.alert-success { background: rgba(16, 185, 129, 0.1) !important; border-left-color: var(--lk-success) !important; color: var(--lk-success) !important; }
.alert-danger  { background: rgba(239, 68, 68, 0.1) !important; border-left-color: var(--lk-danger) !important; color: var(--lk-danger) !important; }
.alert-warning { background: rgba(245, 158, 11, 0.1) !important; border-left-color: var(--lk-warning) !important; color: var(--lk-warning) !important; }
.alert-info    { background: rgba(6, 182, 212, 0.1) !important; border-left-color: var(--lk-info) !important; color: var(--lk-info) !important; }


/* ── Sidebar ───────────────────────────────────────────────────────────── */
.lk-sidebar {
  background: var(--lk-bg-sidebar) !important;
  border-right: 1px solid var(--lk-border) !important;
  min-height: 100vh;
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.lk-sidebar-brand {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--lk-border);
}

.lk-sidebar-brand h5 {
  font-size: 1.15rem;
  font-weight: 700;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.lk-sidebar-brand .brand-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

.lk-sidebar-section {
  padding: 1rem 1rem 0.25rem;
}

.lk-sidebar-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lk-text-muted);
  padding: 0 0.75rem;
  margin-bottom: 0.4rem;
}

.lk-sidebar .nav-link {
  color: var(--lk-text-secondary) !important;
  padding: 0.55rem 0.75rem;
  border-radius: var(--lk-radius-sm);
  font-size: 0.875rem;
  font-weight: 450;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1px 0;
  position: relative;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-sidebar .nav-link i {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  opacity: 0.7;
  transition: opacity var(--lk-duration) var(--lk-ease);
}

.lk-sidebar .nav-link:hover {
  color: var(--lk-text-primary) !important;
  background: var(--lk-bg-elevated);
}

.lk-sidebar .nav-link:hover i { opacity: 1; }

.lk-sidebar .nav-link.active {
  color: var(--lk-text-primary) !important;
  background: rgba(6, 182, 212, 0.1) !important;
  font-weight: 500;
}

.lk-sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--lk-accent-gradient);
  border-radius: 0 3px 3px 0;
}

.lk-sidebar .nav-link.active i { opacity: 1; color: var(--lk-accent-1); }

.lk-sidebar-footer {
  margin-top: auto;
  padding: 1rem 1rem 1.25rem;
  border-top: 1px solid var(--lk-border);
}

.lk-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--lk-radius-sm);
  text-decoration: none;
  color: var(--lk-text-primary);
  transition: background var(--lk-duration) var(--lk-ease);
}

.lk-sidebar-user:hover { background: var(--lk-bg-elevated); color: var(--lk-text-primary); }

.lk-sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lk-accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}

.lk-sidebar-username {
  font-weight: 500;
  font-size: 0.875rem;
}


/* ── Main Content Area ─────────────────────────────────────────────────── */
.lk-main {
  flex-grow: 1;
  padding: 2rem 2.5rem;
  overflow-y: auto;
  max-height: 100vh;
  animation: lk-fadeIn 0.35s var(--lk-ease);
}


/* ── Page Header ───────────────────────────────────────────────────────── */
.lk-page-header {
  margin-bottom: 2rem;
}

/* A11Y-101: the page title is an h1 so every page has a top-level heading.
   h2 stays in the selector for the headers not yet converted, so both render
   identically and the conversion can finish surface by surface. */
.lk-page-header h1,
.lk-page-header h2 {
  font-size: 1.65rem;
  margin-bottom: 0.25rem;
}

.lk-page-header .lk-subtitle {
  color: var(--lk-text-muted);
  font-size: 0.9rem;
}


/* ── Public Page Hero (consistent header for all public pages) ────────── */
.lk-public-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    var(--lk-bg-base);
  border-bottom: 1px solid var(--lk-border);
}

[data-bs-theme="light"] .lk-public-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
    var(--lk-bg-base);
}


/* ── Training Day Timeline / Roadmap ───────────────────────────────────── */
.lk-timeline {
  position: relative;
  padding-left: 2.5rem;
}

.lk-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lk-border);
}

.lk-timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.lk-timeline-dot {
  position: absolute;
  left: -2.5rem;
  top: 1.2rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lk-bg-card);
  border: 2px solid var(--lk-text-muted);
  z-index: 1;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-timeline-item--completed .lk-timeline-dot {
  background: var(--lk-success);
  border-color: var(--lk-success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.lk-timeline-item--current .lk-timeline-dot {
  background: var(--lk-accent-1);
  border-color: var(--lk-accent-1);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
  animation: lk-pulse 2s infinite;
}

.lk-timeline-item--locked .lk-timeline-dot {
  background: var(--lk-bg-base);
  border-style: dashed;
  border-color: var(--lk-text-muted);
}

.lk-timeline-item--locked .card {
  opacity: 0.55;
}


/* ── Progress Ring (SVG) ───────────────────────────────────────────────── */
.lk-progress-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lk-progress-ring svg {
  transform: rotate(-90deg);
}

.lk-progress-ring__track {
  fill: none;
  stroke: var(--lk-border);
  stroke-width: 6;
}

.lk-progress-ring__fill {
  fill: none;
  stroke: url(#lk-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--lk-ease);
}

.lk-progress-ring__label {
  position: absolute;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Difficulty / Category Strips ──────────────────────────────────────── */
.card-difficulty-easy    { border-top: 3px solid var(--lk-success) !important; }
.card-difficulty-medium  { border-top: 3px solid var(--lk-warning) !important; }
.card-difficulty-hard    { border-top: 3px solid var(--lk-danger) !important; }

.difficulty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.difficulty-dot--easy   { background: var(--lk-success); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
.difficulty-dot--medium { background: var(--lk-warning); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.difficulty-dot--hard   { background: var(--lk-danger);  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }


/* ── Podium / Leaderboard ──────────────────────────────────────────────── */
.lk-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
}

.lk-podium-place {
  text-align: center;
  padding: 1.25rem 1.5rem;
  border-radius: var(--lk-radius-lg);
  background: var(--lk-bg-card);
  border: 1px solid var(--lk-border);
  min-width: 140px;
  transition: transform var(--lk-duration) var(--lk-ease);
}

.lk-podium-place:hover { transform: translateY(-4px); }

.lk-podium-place--gold {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.12);
  order: 2;
}

.lk-podium-place--silver {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.08);
  order: 1;
}

.lk-podium-place--bronze {
  border-color: #d97706 !important;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.08);
  order: 3;
}

.lk-podium-rank {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.lk-podium-place--gold   .lk-podium-rank { color: #fbbf24; }
.lk-podium-place--silver .lk-podium-rank { color: #94a3b8; }
.lk-podium-place--bronze .lk-podium-rank { color: #d97706; }

.lk-podium-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.lk-podium-score {
  font-size: 0.8rem;
  color: var(--lk-text-muted);
}


/* ── Rating Selectors (Questionnaire) ──────────────────────────────────── */
/* Every choice widget is a native radio (visually hidden, still focusable)
   followed by its label styled as a card. The label takes the checked and
   focus-visible state from the radio through the sibling selectors below, so
   the widgets work by keyboard and screen reader with no script. */
.lk-choice-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lk-choice-radio:focus-visible + .lk-rating-option,
.lk-choice-radio:focus-visible + .lk-nps-option,
.lk-choice-radio:focus-visible + .lk-skill-level,
.lk-choice-radio:focus-visible + .lk-choice-card {
  outline: 2px solid var(--lk-accent-1);
  outline-offset: 2px;
}

.lk-question {
  position: relative;
  margin-bottom: 1.5rem;
}

/* A headline number on the results page (average, NPS). */
.lk-kpi-value-lg {
  font-size: 2.5rem;
}

.lk-question + .lk-question {
  padding-top: 1.5rem;
  border-top: 1px solid var(--lk-border);
}

.lk-question-legend {
  float: none;
  width: auto;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.lk-rating-group {
  display: flex;
  gap: 0.5rem;
}

.lk-rating-option {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  border-radius: var(--lk-radius-md);
  border: 2px solid var(--lk-border);
  background: var(--lk-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--lk-duration) var(--lk-ease);
  color: var(--lk-text-secondary);
}

.lk-rating-option:hover {
  border-color: var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.08);
  color: var(--lk-accent-1);
  transform: translateY(-2px);
}

.lk-rating-option.active,
.lk-choice-radio:checked + .lk-rating-option {
  background: var(--lk-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
  transform: translateY(-2px);
}

/* NPS scale (0-10) */
.lk-nps-scale {
  display: flex;
  gap: 4px;
}

.lk-nps-option {
  flex: 1;
  margin-bottom: 0;
  padding: 0.6rem 0;
  text-align: center;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-border);
  background: var(--lk-bg-input);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-nps-option:hover { border-color: var(--lk-accent-1); }

.lk-nps-option.active,
.lk-choice-radio:checked + .lk-nps-option {
  color: #fff;
  border-color: transparent;
}

.lk-nps-option.active.nps-low,
.lk-choice-radio:checked + .lk-nps-option.nps-low    { background: var(--lk-danger); }
.lk-nps-option.active.nps-mid,
.lk-choice-radio:checked + .lk-nps-option.nps-mid    { background: var(--lk-warning); }
.lk-nps-option.active.nps-high,
.lk-choice-radio:checked + .lk-nps-option.nps-high   { background: var(--lk-success); }

/* Skill level meter */
.lk-skill-meter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.lk-skill-level {
  flex: 1;
  margin-bottom: 0;
  padding: 0.6rem 0.75rem;
  text-align: center;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-border);
  background: var(--lk-bg-input);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-skill-level:hover { border-color: var(--lk-accent-1); }

.lk-skill-level.active,
.lk-choice-radio:checked + .lk-skill-level {
  background: var(--lk-accent-gradient);
  border-color: transparent;
  color: #fff;
}

.lk-skill-level-name {
  font-size: 0.7rem;
}

/* Choice cards (multiple choice) */
.lk-choice-card {
  margin-bottom: 0;
  padding: 1rem 1.25rem;
  border-radius: var(--lk-radius-md);
  border: 2px solid var(--lk-border);
  background: var(--lk-bg-card);
  cursor: pointer;
  transition: all var(--lk-duration) var(--lk-ease);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lk-choice-card:hover {
  border-color: var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.04);
}

.lk-choice-card.active,
.lk-choice-radio:checked + .lk-choice-card {
  border-color: var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.08);
}

.lk-choice-card .lk-choice-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--lk-border);
  transition: all var(--lk-duration) var(--lk-ease);
  flex-shrink: 0;
}

.lk-choice-card.active .lk-choice-indicator,
.lk-choice-radio:checked + .lk-choice-card .lk-choice-indicator {
  border-color: var(--lk-accent-1);
  background: var(--lk-accent-1);
  box-shadow: inset 0 0 0 3px var(--lk-bg-card);
}

/* One slim line above the first chapter of the board while the pre-event
   questionnaire is still unanswered. */
.lk-pre-questionnaire-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-accent-1);
  background: rgba(6, 182, 212, 0.06);
  font-size: 0.9rem;
}


/* ── Wizard / Multi-Step Form ──────────────────────────────────────────── */
.lk-wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
}

.lk-wizard-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lk-text-muted);
  transition: color var(--lk-duration) var(--lk-ease);
}

.lk-wizard-step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--lk-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--lk-duration) var(--lk-ease);
  flex-shrink: 0;
}

.lk-wizard-step.active .lk-wizard-step-number {
  background: var(--lk-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.lk-wizard-step.active {
  color: var(--lk-text-primary);
}

.lk-wizard-step.completed .lk-wizard-step-number {
  background: var(--lk-success);
  border-color: var(--lk-success);
  color: #fff;
}

.lk-wizard-step.completed { color: var(--lk-success); }

.lk-wizard-connector {
  flex: 1;
  height: 2px;
  background: var(--lk-border);
  margin: 0 0.75rem;
  position: relative;
}

.lk-wizard-connector.completed {
  background: var(--lk-success);
}

/* Step panels */
.lk-wizard-panel {
  display: none;
  animation: lk-slideRight 0.35s var(--lk-ease);
}

.lk-wizard-panel.active { display: block; }


/* ── Auth Pages ────────────────────────────────────────────────────────── */
.lk-auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
    var(--lk-bg-base);
  padding: 2rem;
}

.lk-auth-card {
  width: 100%;
  max-width: 440px;
  padding: 2.5rem;
}

.lk-auth-logo {
  font-size: 2.5rem;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.3));
}

.lk-auth-tagline {
  font-size: 0.85rem;
  color: var(--lk-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}


/* ── Live Indicator ────────────────────────────────────────────────────── */
.lk-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lk-danger);
  display: inline-block;
  animation: lk-pulse 1.5s infinite;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}


/* ── Empty States ──────────────────────────────────────────────────────── */
.lk-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--lk-text-muted);
}

.lk-empty-icon {
  font-size: 2.5rem;
  opacity: 0.4;
  margin-bottom: 1rem;
}

.lk-empty-text {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}


/* ── Notification Dot ──────────────────────────────────────────────────── */
.lk-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lk-danger);
  display: inline-block;
  margin-left: 0.35rem;
  animation: lk-pulse 2s infinite;
}


/* ── Stagger Animation Helpers ─────────────────────────────────────────── */
.lk-stagger > * { animation: lk-fadeInUp 0.45s var(--lk-ease) both; }
.lk-stagger > *:nth-child(1)  { animation-delay: 0s; }
.lk-stagger > *:nth-child(2)  { animation-delay: 0.06s; }
.lk-stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.lk-stagger > *:nth-child(4)  { animation-delay: 0.18s; }
.lk-stagger > *:nth-child(5)  { animation-delay: 0.24s; }
.lk-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.lk-stagger > *:nth-child(7)  { animation-delay: 0.36s; }
.lk-stagger > *:nth-child(8)  { animation-delay: 0.42s; }
.lk-stagger > *:nth-child(9)  { animation-delay: 0.48s; }
.lk-stagger > *:nth-child(10) { animation-delay: 0.54s; }
.lk-stagger > *:nth-child(11) { animation-delay: 0.60s; }
.lk-stagger > *:nth-child(12) { animation-delay: 0.66s; }


/* ── Gradient Text Utility ─────────────────────────────────────────────── */
.lk-gradient-text {
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Progress Bar ──────────────────────────────────────────────────────── */
.progress {
  background: var(--lk-bg-elevated) !important;
  border-radius: 50px !important;
  height: 8px;
  overflow: hidden;
}

.progress-bar {
  background: var(--lk-accent-gradient) !important;
  border-radius: 50px;
  transition: width 1s var(--lk-ease);
}


/* ── Modals ────────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-xl) !important;
  box-shadow: var(--lk-shadow-lg);
  backdrop-filter: blur(16px);
}

.modal-header {
  border-bottom-color: var(--lk-border) !important;
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  border-top-color: var(--lk-border) !important;
}


/* ── Dropdown ──────────────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-md) !important;
  box-shadow: var(--lk-shadow-lg);
  backdrop-filter: blur(12px);
}

.dropdown-item {
  color: var(--lk-text-secondary) !important;
  border-radius: var(--lk-radius-sm);
  padding: 0.5rem 1rem;
  transition: all var(--lk-duration) var(--lk-ease);
}

.dropdown-item:hover {
  background: var(--lk-bg-elevated) !important;
  color: var(--lk-text-primary) !important;
}


/* ── Tooltips ──────────────────────────────────────────────────────────── */
.tooltip-inner {
  background: var(--lk-bg-elevated) !important;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}


/* ── Mobile Sidebar Toggle ─────────────────────────────────────────────── */
.lk-sidebar-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1060;
  width: 40px;
  height: 40px;
  border-radius: var(--lk-radius-sm);
  background: var(--lk-bg-card);
  border: 1px solid var(--lk-border);
  color: var(--lk-text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

@media (max-width: 991.98px) {
  .lk-sidebar-toggle { display: flex; }

  .lk-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    z-index: 1050;
    width: 260px;
    transition: left 0.3s var(--lk-ease);
    box-shadow: none;
  }

  .lk-sidebar.show {
    left: 0;
    box-shadow: var(--lk-shadow-lg);
  }

  .lk-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    backdrop-filter: blur(2px);
  }

  .lk-sidebar-backdrop.show { display: block; }

  .lk-main { padding: 1.5rem 1rem; padding-top: 4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Keyframe Animations
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes lk-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes lk-slideRight {
  from { opacity: 0; transform: translateX(-15px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes lk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.1); }
}

@keyframes lk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Shimmer loading skeleton */
.lk-skeleton {
  background: linear-gradient(
    90deg,
    var(--lk-bg-elevated) 25%,
    rgba(148, 163, 184, 0.08) 50%,
    var(--lk-bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: lk-shimmer 1.5s infinite;
  border-radius: var(--lk-radius-sm);
}

/* A single shimmering placeholder line; combine with .lk-skeleton and a width
   utility, e.g. <div class="lk-skeleton lk-skeleton-line w-75"></div>. */
.lk-skeleton-line {
  height: 1rem;
  margin-bottom: 0.6rem;
}
.lk-skeleton-line:last-child {
  margin-bottom: 0;
}

/* HTMX request indicator: fade an element in only while its request is in
   flight. htmx adds .htmx-request to the trigger and the hx-indicator target. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}


/* ── KQL block component ───────────────────────────────────────────────────
   Reusable, accessible read-only KQL display. Behaviour in static/js/kql-block.js
   (copy states, light highlighting). Works in both themes; used in lessons,
   challenges, scenarios and the query library. */
.lk-kql {
  margin: 1rem 0;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  overflow: hidden;
  background: var(--lk-bg-elevated);
}
.lk-kql-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--lk-border);
  background: var(--lk-bg-input);
  font-size: 0.75rem;
}
.lk-kql-lang {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lk-accent-1);
  text-transform: uppercase;
}
.lk-kql-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.lk-kql-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.lk-kql-run {
  font-size: 0.75rem;
  white-space: nowrap;
  text-decoration: none;
}
.lk-kql-copy {
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  background: var(--lk-bg-card);
  color: var(--lk-text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lk-kql-copy:hover { color: var(--lk-text-primary); border-color: var(--lk-border-hover); }
.lk-kql-copy.is-copied { color: var(--lk-success); border-color: var(--lk-success); }
.lk-kql-copy.is-failed { color: var(--lk-warning); border-color: var(--lk-warning); }
.lk-kql pre {
  margin: 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  background: transparent;
  border: none;
  border-radius: 0;
}
.lk-kql pre code {
  font-family: var(--lk-font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--lk-text-primary);
  background: transparent;
  white-space: pre;
}
.lk-kql-tables {
  margin: 0;
  padding: 0.4rem 1rem;
  border-top: 1px solid var(--lk-border);
  font-size: 0.75rem;
  color: var(--lk-text-muted);
}
/* Highlight tokens: readable in both light and dark themes. */
.lk-kql-tok-kw { color: var(--lk-accent-1); font-weight: 600; }
.lk-kql-tok-pipe { color: var(--lk-accent-2); font-weight: 700; }
.lk-kql-tok-string { color: var(--lk-success); }
.lk-kql-tok-comment { color: var(--lk-text-muted); font-style: italic; }

/* Plain lesson code blocks: a small copy button, injected by kql-block.js. */
.content-body pre.lk-code { position: relative; }
.content-body pre.lk-code .lk-kql-copy {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.content-body pre.lk-code:hover .lk-kql-copy,
.content-body pre.lk-code:focus-within .lk-kql-copy { opacity: 1; }


/* ── Auto-dismiss Alerts ───────────────────────────────────────────────── */
.alert-autodismiss {
  animation: lk-slideDown 0.4s var(--lk-ease),
             lk-fadeOut 0.4s var(--lk-ease) 4.6s forwards;
}

@keyframes lk-fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}


/* ── Scrollbar Styling ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--lk-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lk-text-muted);
}


/* ── Nav Tabs (Premium) ───────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--lk-border) !important;
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  color: var(--lk-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.65rem 1.1rem;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--lk-radius-sm) var(--lk-radius-sm) 0 0 !important;
  transition: all var(--lk-duration) var(--lk-ease);
  margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
  color: var(--lk-text-primary) !important;
  background: var(--lk-bg-elevated) !important;
  border-bottom-color: var(--lk-text-muted) !important;
}

.nav-tabs .nav-link.active {
  color: var(--lk-accent-1) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--lk-accent-1) !important;
}

.nav-tabs .nav-link .badge {
  font-size: 0.7rem;
  padding: 0.2em 0.5em;
  vertical-align: middle;
}


/* ── Breadcrumbs (Premium) ────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.breadcrumb-item a {
  color: var(--lk-text-muted) !important;
  text-decoration: none;
  transition: color var(--lk-duration) var(--lk-ease);
}

.breadcrumb-item a:hover {
  color: var(--lk-accent-1) !important;
}

.breadcrumb-item.active {
  color: var(--lk-text-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--lk-text-muted) !important;
}


/* ── Enhanced Empty States ────────────────────────────────────────────── */
.lk-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--lk-text-muted);
}

.lk-empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1.25rem;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lk-empty-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--lk-text-secondary);
  margin-bottom: 0.5rem;
}

.lk-empty-hint {
  font-size: 0.85rem;
  color: var(--lk-text-muted);
  margin-bottom: 1.25rem;
}

.lk-empty .btn {
  margin-top: 0.5rem;
}


/* ── Error Pages ──────────────────────────────────────────────────────── */
.lk-error-page {
  text-align: center;
  padding: 6rem 2rem;
}

.lk-error-code {
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--lk-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.lk-error-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.lk-error-desc {
  font-size: 0.95rem;
  color: var(--lk-text-muted);
  max-width: 420px;
  margin: 0 auto 2rem;
}


/* ── Pagination ───────────────────────────────────────────────────────── */
.pagination {
  gap: 4px;
}

.page-link {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  color: var(--lk-text-secondary) !important;
  border-radius: var(--lk-radius-sm) !important;
  padding: 0.45rem 0.85rem;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all var(--lk-duration) var(--lk-ease);
}

.page-link:hover {
  background: var(--lk-bg-elevated) !important;
  color: var(--lk-accent-1) !important;
  border-color: var(--lk-border-hover) !important;
}

.page-item.active .page-link {
  background: var(--lk-accent-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
}

.page-item.disabled .page-link {
  background: var(--lk-bg-elevated) !important;
  color: var(--lk-text-muted) !important;
  opacity: 0.5;
}


/* ── Toast Notifications ──────────────────────────────────────────────── */
.toast {
  background: var(--lk-bg-card) !important;
  border: 1px solid var(--lk-border) !important;
  border-radius: var(--lk-radius-md) !important;
  box-shadow: var(--lk-shadow-lg);
  backdrop-filter: blur(12px);
}

.toast-header {
  background: transparent !important;
  border-bottom: 1px solid var(--lk-border) !important;
  color: var(--lk-text-primary) !important;
}

.toast-body {
  color: var(--lk-text-secondary);
}


/* ── Links ────────────────────────────────────────────────────────────── */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.lk-sidebar-user) {
  color: var(--lk-accent-1);
  text-decoration: none;
  transition: color var(--lk-duration) var(--lk-ease);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.lk-sidebar-user):hover {
  color: var(--lk-accent-2);
}


/* ── Text Selection ───────────────────────────────────────────────────── */
::selection {
  background: rgba(6, 182, 212, 0.25);
  color: var(--lk-text-primary);
}


/* ── Bootstrap bg- Utility Overrides ──────────────────────────────────── */
.bg-body-secondary { background: var(--lk-bg-elevated) !important; }
.bg-body-tertiary  { background: var(--lk-bg-elevated) !important; }


/* ── Horizontal Rule ──────────────────────────────────────────────────── */
hr {
  border-color: var(--lk-border) !important;
  opacity: 1;
}


/* ── Focus Rings (Accessibility) ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--lk-accent-1) !important;
  outline-offset: 2px;
  border-radius: var(--lk-radius-sm);
}

/* Skip-to-content link: hidden until focused, so keyboard users can bypass the
   nav and jump straight to the main content (WCAG 2.4.1). */
.lk-skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 2000;
  padding: 0.5rem 0.9rem;
  border-radius: var(--lk-radius-sm);
  background: var(--lk-accent-1);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-in;
}
.lk-skip-link:focus {
  top: 0.5rem;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25) !important;
}


/* ── Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .lk-stagger > * { animation: none !important; }
  .card-lift:hover { transform: none; }
  .btn:hover { transform: none; }
}


/* ── Module Progress Steps ────────────────────────────────────────────── */
.lk-module-list .list-group-item {
  border-left: 3px solid transparent;
  transition: all var(--lk-duration) var(--lk-ease);
}

.lk-module-list .list-group-item:hover {
  border-left-color: var(--lk-accent-1);
}

.lk-module-list .list-group-item.lk-module--completed {
  border-left-color: var(--lk-success);
}

.lk-module-list .list-group-item.lk-module--in-progress {
  border-left-color: var(--lk-warning);
}


/* ── Credential Box ───────────────────────────────────────────────────── */
.lk-credential-box {
  background: var(--lk-bg-elevated);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  padding: 0.75rem 1rem;
}


/* ── Print Override: Skip Premium Styling ──────────────────────────────── */
@media print {
  .lk-sidebar, .lk-sidebar-toggle, .lk-sidebar-backdrop { display: none !important; }
  .lk-main { padding: 0 !important; max-height: none !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; backdrop-filter: none !important; border: 1px solid #ddd !important; }
  .kpi-value { -webkit-text-fill-color: #000 !important; color: #000 !important; }
  .alert-autodismiss { animation: none !important; }
}

/* ── Connection-lost bar (LKWS, static/js/ws-connection.js) ─────────────── */
.lk-conn-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 1rem;
  background: var(--lk-warning);
  color: #1a1206;
  font-weight: 600;
  box-shadow: var(--lk-shadow-md);
  transform: translateY(-105%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.lk-conn-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.lk-conn-bar.is-up {
  background: var(--lk-success);
  color: #042417;
}
.lk-conn-bar .lk-conn-sub {
  font-weight: 500;
  opacity: 0.8;
}
.lk-conn-bar .lk-conn-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lk-conn-bar .lk-conn-refresh {
  font-weight: 600;
}



/* ── Sidebar section toggles (declarative nav) ─────────────────────────── */
.lk-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* A11Y-105 (WCAG 2.2 SC 2.5.8): the toggles rendered 16px tall. */
  min-height: 1.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.lk-nav-section-toggle .lk-nav-chevron {
  font-size: 0.65rem;
  transition: transform 0.15s var(--lk-ease, ease);
}

.lk-nav-section-toggle[aria-expanded='false'] .lk-nav-chevron {
  transform: rotate(-90deg);
}

.lk-nav-section-toggle:focus-visible {
  outline: 2px solid var(--lk-accent-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Group sub-heading inside a section (Operate: Health, Security, Launch).
   Quieter than the section label so the hierarchy reads at a glance. */
.lk-nav-group-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lk-text-muted);
  padding: 0.6rem 0.75rem 0.15rem;
  list-style: none;
}

/* ── Shared components (IA overhaul PR 6) ──────────────────────────────── */
/* Card accent variants: replace the repeated
   style="border-color: var(--lk-danger) !important" pattern. */
.lk-card--danger { border-color: var(--lk-danger) !important; }
.lk-card--warning { border-color: var(--lk-warning) !important; }
.lk-card--success { border-color: var(--lk-success) !important; }
.lk-card--accent { border-color: var(--lk-accent-1) !important; }
.lk-card--muted { opacity: 0.75; }

/* Consistent data table: wrap in .lk-table-wrap for responsive scroll. */
.lk-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--lk-border);
  border-radius: 10px;
}

.lk-table {
  width: 100%;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.lk-table thead th {
  position: sticky;
  top: 0;
  background: var(--lk-bg-elevated);
  color: var(--lk-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--lk-border);
  white-space: nowrap;
}

.lk-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--lk-border);
  vertical-align: middle;
}

.lk-table tbody tr:last-child td { border-bottom: 0; }

.lk-table tbody tr:hover { background: var(--lk-bg-hover, rgba(148, 163, 184, 0.06)); }

/* Filter bar above lists: search + selects + clear, wraps on mobile. */
.lk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.lk-filter-bar .form-control,
.lk-filter-bar .form-select {
  width: auto;
  min-width: 10rem;
}

/* Toolbar: actions row aligned right of a heading or table. */
.lk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Explanatory note beside a control. Capped so the line length stays readable
   next to a button rather than running the full card width. */
.lk-note-narrow {
  max-width: 22rem;
}

/* Learning path progress meter (CURR-106).
   The fill width comes from a step class rather than an inline style, because
   the inline-style ratchet (core/tests_inline_style_ratchet.py) blocks new
   style attributes in templates. The service rounds the percentage down to the
   nearest 5 and the template picks the matching class. */
.lk-path-meter {
  background: var(--lk-bg-elevated);
  border-radius: 50px;
  height: 6px;
  overflow: hidden;
}

.lk-path-meter__fill {
  background: var(--lk-accent-gradient);
  border-radius: 50px;
  height: 100%;
  transition: width 1s var(--lk-ease);
}

.lk-path-meter__fill--0   { width: 0; }
.lk-path-meter__fill--5   { width: 5%; }
.lk-path-meter__fill--10  { width: 10%; }
.lk-path-meter__fill--15  { width: 15%; }
.lk-path-meter__fill--20  { width: 20%; }
.lk-path-meter__fill--25  { width: 25%; }
.lk-path-meter__fill--30  { width: 30%; }
.lk-path-meter__fill--35  { width: 35%; }
.lk-path-meter__fill--40  { width: 40%; }
.lk-path-meter__fill--45  { width: 45%; }
.lk-path-meter__fill--50  { width: 50%; }
.lk-path-meter__fill--55  { width: 55%; }
.lk-path-meter__fill--60  { width: 60%; }
.lk-path-meter__fill--65  { width: 65%; }
.lk-path-meter__fill--70  { width: 70%; }
.lk-path-meter__fill--75  { width: 75%; }
.lk-path-meter__fill--80  { width: 80%; }
.lk-path-meter__fill--85  { width: 85%; }
.lk-path-meter__fill--90  { width: 90%; }
.lk-path-meter__fill--95  { width: 95%; }
.lk-path-meter__fill--100 { width: 100%; }

/* PR 1 — CTF workspace story: chapter grouping, brief, pre-wrapped description.
   Classes replace per-element inline styles so the inline-style ratchet stays flat.
   Colour comes from .small / .text-muted (see the muted rule above). */
.lk-ctf-chapter-heading {
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lk-ctf-brief > summary { cursor: pointer; }
.lk-ctf-brief-body { white-space: pre-wrap; }
.lk-ctf-desc { white-space: pre-wrap; }

/* PR 2 — CTF chapter debrief box on the workspace surface. */
.lk-ctf-debrief {
  background: var(--lk-surface-2, rgba(125, 139, 161, .08));
  border-left: 3px solid var(--lk-primary, #3b82f6);
  border-radius: 6px;
}

/* PR 9 — case diagrams (timeline, network map, table map, ticket). Fixed render, no JS. */
.lk-case-diagram { max-width: 640px; }
.lk-case-timeline__row { padding: .35rem 0; border-bottom: 1px solid var(--lk-border, rgba(125,139,161,.15)); }
.lk-case-timeline__time { display: inline-block; min-width: 7.5rem; }
.lk-case-staged { opacity: .55; }
.lk-case-network { width: 100%; max-width: 360px; height: auto; }
.lk-case-network__edge { stroke: var(--lk-text-muted); stroke-width: 1.5; opacity: .5; }
.lk-case-network__node { fill: var(--lk-primary, #3b82f6); }
/* A11Y (WCAG 1.4.3): the label fill follows the theme's primary text token,
   so the network map reads in light mode too (it was a fixed light grey). */
.lk-case-network__label { fill: var(--lk-text-primary); font-size: 11px; }
.lk-case-group { background: var(--lk-surface-2, rgba(125,139,161,.08)); border-radius: 6px; }

/* P6 — the KQL workspace fits a 13-inch laptop.
   The editor takes a share of the viewport instead of a fixed 320px, the
   results scroller is a class (450px nested scroll by default, the Try-KQL
   playground keeps it) and the explore workspace (.lk-workspace--flow) lets the
   results run in the page scroll on a short viewport, so there is one scroll
   container with a sticky results header that jumps back to the answer box. */
.lk-proxy-editor {
  height: clamp(160px, 40vh, 520px);
  border-bottom: 1px solid var(--lk-border, #2a2f3a);
}
.lk-results-scroll { max-height: 450px; overflow-y: auto; }
.lk-results-min { min-height: 120px; }
.lk-results-head { background: var(--lk-surface, #1b1f24); }
@media (max-height: 819.98px) {
  .lk-workspace--flow .lk-results-scroll { max-height: none; overflow-y: visible; }
  .lk-workspace--flow .lk-results-head { position: sticky; top: 0; z-index: 3; }
}

/* P6 — compact question card on the explore workspace: the Show brief toggle
   swaps its label with the native open state, no JS. */
.lk-ctf-brief--compact .lk-when-open { display: none; }
.lk-ctf-brief--compact[open] .lk-when-open { display: inline; }
.lk-ctf-brief--compact[open] .lk-when-closed { display: none; }
.lk-ctf-card--compact { margin-bottom: 0 !important; }

/* ── CTF board tables (A11Y, WCAG 1.4.3) ─────────────────────────────────── */
/* The leaderboard and My stats tables carried Bootstrap's .table-dark, which
   on a white card in light mode left the even rows white on white. The board
   table takes its colours from the theme: card background, primary text and a
   6 percent stripe, so it reads in both themes. */
.lk-table-board {
  --bs-table-bg: transparent;
  --bs-table-color: var(--lk-text-primary);
  --bs-table-striped-bg: rgba(148, 163, 184, 0.06);
  --bs-table-striped-color: var(--lk-text-primary);
  --bs-table-hover-bg: var(--lk-bg-elevated);
  --bs-table-hover-color: var(--lk-text-primary);
  --bs-table-border-color: var(--lk-border);
  color: var(--lk-text-primary);
  background: var(--lk-bg-card);
}
.lk-table-board tbody td { color: var(--lk-text-primary); }

/* ── Query results grid (A11Y, WCAG 1.3.1, 2.1.1) ────────────────────────── */
/* The scroll container (.lk-results-scroll, declared with the P6 workspace
   rules above) is a named, focusable region so a keyboard user can reach and
   scroll the grid. Sort controls are real buttons inside th. The sticky thead
   is .lk-results-thead: .lk-results-head is the workspace results header. */
.lk-results-summary { color: var(--lk-text-muted); }
.lk-results-sort-hint { color: var(--lk-text-muted); font-size: 0.75rem; }
.lk-results-hint { opacity: 0.85; }
.lk-results-scroll:focus-visible {
  outline: 2px solid var(--lk-accent-1);
  outline-offset: -2px;
  border-radius: var(--lk-radius-sm);
}
.lk-results-table { font-size: 0.8rem; }
.lk-results-thead { background: var(--bs-body-bg); z-index: 2; }
.lk-results-rownum { width: 40px; font-size: 0.65rem; }
.lk-results-table .sortable-header { padding: 0; user-select: none; }
.lk-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
.lk-sort-btn:focus-visible {
  outline: 2px solid var(--lk-accent-1);
  outline-offset: -2px;
  border-radius: var(--lk-radius-sm);
}
.lk-sort-btn .sort-icon { font-size: 0.6rem; opacity: 0.4; }
.lk-sort-active .sort-icon { opacity: 1; }
.lk-results-table .result-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.lk-results-numeric { font-variant-numeric: tabular-nums; }
.lk-results-cell-value {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.82rem;
  max-height: 400px;
  overflow-y: auto;
}
.lk-results-empty { color: var(--lk-text-muted); }
.lk-results-empty-icon { font-size: 1.5rem; }

/* The way out of the Monaco editor, stated under it (WCAG 2.1.2). */
.lk-editor-hint { color: var(--lk-text-muted); border-bottom: 1px solid var(--lk-border); }
.lk-answer-bar-label { color: var(--lk-text-muted); letter-spacing: 0.03em; }

/* Profile page: preview of the certificate signature image. */
.lk-signature-preview { max-height: 60px; }