/**
 * Shared base styles for DroneBlocks trifecta articles.
 * All articles link to this file instead of duplicating inline styles.
 * Article-specific styles can be added in a <style> block after this link.
 */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --db-navy: #003A5D;
  --db-cyan: #00A7E1;
  --db-green: #1B9E5A;
  --db-orange: #E07842;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Spacing scale — use these, not one-off values (8 / 12 / 16 / 20 / 24 / 32 / 48).
     --space-block is the standard vertical gap between article content blocks. */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-block: 24px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gray-50);
  color: var(--gray-800);
  line-height: 1.7;
}

/* ─── Header ────────────────────────────────────────────────── */

.site-header {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Header layout: the logo is the left brand anchor and the "← Back to <section>" link
   sits on the right. The wrapper div holds [back-link, logo] in DOM order; row-reverse
   + space-between renders them logo-left / back-right across every article. */
.site-header > div { width: 100%; justify-content: space-between; flex-direction: row-reverse; }

.site-header a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-header img {
  height: 32px;
  width: auto;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--db-cyan);
  color: white;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.header-cta:hover { background: #0095cc; }

/* ─── Article container ─────────────────────────────────────── */

.article-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.article-tag {
  display: inline-block;
  background: rgba(0, 167, 225, 0.1);
  color: var(--db-cyan);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}
a.article-tag {
  cursor: pointer;
  transition: background 0.15s;
}
a.article-tag:hover {
  background: rgba(0, 167, 225, 0.2);
}

.article-tag.green {
  background: rgba(27, 158, 90, 0.1);
  color: var(--db-green);
}

/* Route/address badge alongside a heading, e.g. "DEXI GCS  /gcs" */
.route-badge {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  /* Fixed, not em: badges stay the same size on an h2 and an h3. */
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ─── Typography ────────────────────────────────────────────── */

h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--db-navy);
  line-height: 1.3;
  margin-bottom: 16px;
}

.article-subtitle {
  font-size: 1.1rem;
  color: var(--gray-500);
  margin-bottom: 32px;
  line-height: 1.6;
}

h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--db-navy);
  margin-top: 48px;
  margin-bottom: 16px;
  padding-top: 16px;
}

h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-navy);
  margin-top: 32px;
  margin-bottom: 12px;
}

/* Inline body links (not class-based nav/card links) */
.article-container p a:not([class]) {
  color: var(--db-cyan);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 167, 225, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.article-container p a:not([class]):hover {
  color: var(--db-navy);
  border-bottom-color: var(--db-navy);
}

p {
  margin-bottom: 16px;
  font-size: 1rem;
  color: var(--gray-700);
}

/* ---- Article body lists — branded markers + proper rhythm.
   Applies in BOTH content wrappers: .article-container (standalone article files)
   AND .lesson-content (the portal lesson page injects the inner HTML there, so any
   .article-container-only rule never reaches it). Scoped with :not([class]) so the
   specialized lists (.toc / .objectives-list / .kv-list) keep their own styling. ---- */
.article-container ul:not([class]),
.lesson-content ul:not([class]),
.overview-body ul:not([class]),
.article-container ol:not([class]),
.lesson-content ol:not([class]),
.overview-body ol:not([class]) {
  margin: 4px 0 22px;
  padding-left: 1.55rem;
  font-size: 1rem;
  color: var(--gray-700);
}
.article-container ul:not([class]),
.lesson-content ul:not([class]),
.overview-body ul:not([class]) { list-style: none; }
.article-container ul:not([class]) > li,
.lesson-content ul:not([class]) > li,
.overview-body ul:not([class]) > li,
.article-container ol:not([class]) > li,
.lesson-content ol:not([class]) > li,
.overview-body ol:not([class]) > li {
  position: relative;
  margin-bottom: 0.6rem;
  line-height: 1.7;
  padding-left: 0.2rem;
}
.article-container ul:not([class]) > li::before,
.lesson-content ul:not([class]) > li::before,
.overview-body ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;            /* soft square in brand cyan — cleaner than the default dot */
  background: var(--db-cyan);
}
.article-container ol:not([class]) > li::marker,
.lesson-content ol:not([class]) > li::marker,
.overview-body ol:not([class]) > li::marker {
  color: var(--db-cyan);
  font-weight: 700;
}
.article-container ul:not([class]) ul,
.lesson-content ul:not([class]) ul,
.article-container ul:not([class]) ol,
.lesson-content ul:not([class]) ol,
.article-container ol:not([class]) ul,
.lesson-content ol:not([class]) ul,
.article-container ol:not([class]) ol,
.lesson-content ol:not([class]) ol {
  margin: 0.55rem 0 0.3rem;
}

code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
}

hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 48px 0;
}

/* ─── Video player & sticky mini-player ─────────────────────── */

.video-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  background: #000;
}

.video-wrapper video,
.video-wrapper iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Embedded interactive figure (Ground School 3D). Taller than a video: the
   figure carries a readout card and a control bar as well as the scene. */
.figure-embed {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  background: #0b1520;
}
.figure-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 420px;
  border: none;
}
.figure-embed + .caption { margin-top: 0; }
@media (max-width: 640px) {
  .figure-embed iframe { aspect-ratio: 3 / 4; min-height: 380px; }
}

.video-wrapper.sticky {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  margin-bottom: 0;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: visible;
  animation: slideIn 0.25s ease;
}

.video-wrapper.sticky video,
.video-wrapper.sticky iframe { border-radius: 10px; }

.video-placeholder { height: 1px; margin: 0; }

.video-placeholder.active {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  margin-bottom: 40px;
  background: var(--gray-100);
  border: 2px dashed var(--gray-200);
}

.sticky-close {
  display: none;
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  background: var(--gray-800);
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 1001;
  align-items: center;
  justify-content: center;
}

.video-wrapper.sticky .sticky-close { display: flex; }

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

/* ─── Timestamps ────────────────────────────────────────────── */

.timestamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gray-100);
  color: var(--db-cyan);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  transition: all 0.15s ease;
  vertical-align: middle;
  margin-left: 2px;
  cursor: pointer;
}

.timestamp:hover {
  background: rgba(0, 167, 225, 0.12);
  color: #0090c0;
}

.timestamp svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ─── Video thumbnails (inline chips) ───────────────────────── */

.video-thumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 4px 10px 4px 4px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  vertical-align: middle;
  margin: 4px 0;
}

.video-thumb:hover {
  border-color: var(--db-cyan);
  box-shadow: 0 2px 8px rgba(0, 167, 225, 0.1);
}

.video-thumb img {
  width: 48px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
}

.video-thumb span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--db-cyan);
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
}

/* ─── Table of contents ─────────────────────────────────────── */

.toc {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.toc h3 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 0;
}

.toc li {
  counter-increment: toc;
  margin-bottom: 6px;
}

.toc li a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 0;
  transition: color 0.15s ease;
  cursor: pointer;
}

.toc li a:hover { color: var(--db-cyan); }

.toc li a::before {
  content: counter(toc);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.toc li a .toc-time {
  margin-left: auto;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* ─── Feature cards ─────────────────────────────────────────── */

.feature-card {
  background: white;
  border-radius: 12px;
  padding: 18px 20px;
  margin: var(--space-block) 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--db-cyan);
}

.feature-card.math { border-left-color: var(--db-orange); }
.feature-card.loops { border-left-color: var(--db-orange); }
.feature-card.sim { border-left-color: var(--db-green); }
.feature-card.tools { border-left-color: var(--db-green); }

.feature-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--db-navy);
  /* reset the leaked top margin from the base h3 rule — the title should sit
     at the top of the card, not float 32px down from it. */
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

.feature-card p {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--gray-600);
}

/* Responsive card row — short spec lists (Hardware / Tools) sit side by side on
   desktop and stack on mobile. auto-fit means a lone card fills the full width. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-block) 0;
  align-items: stretch;
}
.feature-grid .feature-card {
  margin: 0;          /* the grid gap owns the spacing */
  height: 100%;       /* equal-height cards when side by side */
}

/* Long parts lists (build guides): a hardware list of six or more items next
   to a two-item tools card leaves the tools card mostly empty and the row as
   tall as the list. Such lessons stack the cards full width instead and flow
   the list in two columns; short lists keep the side-by-side grid above. */
.feature-card.cols2 ul { columns: 2; column-gap: 32px; }
.feature-card.cols2 li { break-inside: avoid; }
@media (max-width: 640px) {
  .feature-card.cols2 ul { columns: 1; }
}

/* ─── Equation callout box ─────────────────────────────────── */

.equation-box {
  background: linear-gradient(135deg, rgba(0, 58, 93, 0.04), rgba(0, 167, 225, 0.06));
  border: 1px solid rgba(0, 167, 225, 0.15);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  text-align: center;
}

.equation {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--db-navy);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.equation-label {
  font-size: 0.82rem;
  color: var(--gray-500);
}

/* ─── Code comparison panels ────────────────────────────────── */

.code-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.code-comparison .code-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.code-panel h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

.code-panel h4.before { color: var(--gray-400); }
.code-panel h4.after { color: var(--db-green); }

.code-panel .block-list {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.8;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
}

.code-panel .block-list .highlight {
  color: var(--db-orange);
  font-weight: 600;
}

.code-panel .block-list .indent { padding-left: 20px; }
.code-panel .block-list .indent-2 { padding-left: 40px; }

/* ─── Math tables ───────────────────────────────────────────── */

.math-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9rem;
}

.math-table th,
.math-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.math-table th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--db-navy);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.math-table td { color: var(--gray-700); }

/* ─── Blocks preview ────────────────────────────────────────── */

.blocks-preview {
  background: white;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.blocks-preview .highlight {
  color: var(--db-orange);
  font-weight: 600;
}

.blocks-preview .indent { padding-left: 20px; }
.blocks-preview .indent-2 { padding-left: 40px; }

/* ─── Mission picker ────────────────────────────────────────── */

.mission-picker {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin: 48px 0 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
}

/* Locked overlay — covers the mission picker for non-authenticated users */
.picker-locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-locked-card {
  text-align: center;
  max-width: 320px;
  padding: 20px;
}

.picker-locked-card .lock-icon {
  color: var(--db-navy);
  margin-bottom: 12px;
}

.picker-locked-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-navy);
  margin-bottom: 6px;
}

.picker-locked-card > p {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.picker-locked-cta {
  display: inline-block;
  background: var(--db-cyan);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.picker-locked-cta:hover {
  background: #0090c0;
}

.picker-locked-login {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--gray-400);
}

.picker-locked-login a {
  color: var(--db-cyan);
  text-decoration: none;
  font-weight: 600;
}

.picker-locked-login a:hover {
  text-decoration: underline;
}

.mission-picker h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--db-navy);
  margin-bottom: 4px;
}

.mission-picker > p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 20px;
}

.picker-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin-bottom: 8px;
}

.picker-scenes {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.picker-scene {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--gray-200);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.picker-scene:hover { border-color: var(--gray-300); }

.picker-scene.selected {
  border-color: var(--db-cyan);
  box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.12);
}

.picker-scene-img {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.picker-scene-img.city { background: linear-gradient(135deg, #1e3a5f, #2d5f8a); }
.picker-scene-img.mars { background: linear-gradient(135deg, #5a1a0a, #a0522d); }
.picker-scene-img.tundra { background: linear-gradient(135deg, #1a3a4a, #5f8fa0); }

.picker-scene-body { padding: 8px 10px; text-align: center; }

.picker-scene-body h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 1px;
}

.picker-scene-body p {
  font-size: 0.6rem;
  color: var(--gray-500);
  margin-bottom: 0;
}

/* Shape picker grid */
.picker-shapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.picker-shape {
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.picker-shape:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.picker-shape.selected {
  border-color: var(--db-cyan);
  box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.12);
  background: rgba(0, 167, 225, 0.03);
}

.picker-shape .shape-icon {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.picker-shape h5 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 2px;
}

.picker-shape p {
  font-size: 0.65rem;
  color: var(--gray-500);
  margin-bottom: 0;
}

.picker-launch {
  background: linear-gradient(135deg, var(--db-navy), #005580);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.picker-launch-info h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: white;
}

.picker-launch-info p {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0;
}

.picker-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--db-cyan);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.picker-launch-btn:hover {
  background: #0095cc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 167, 225, 0.3);
}

/* ─── Lesson navigation ─────────────────────────────────────── */

.lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}

.lesson-nav a {
  display: block;
  background: white;
  border-radius: 12px;
  padding: 16px 20px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-200);
  transition: all 0.15s ease;
}

.lesson-nav a:hover {
  border-color: var(--db-cyan);
  box-shadow: 0 2px 8px rgba(0, 167, 225, 0.1);
}

.lesson-nav .nav-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
  margin-bottom: 4px;
}

.lesson-nav .nav-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--db-navy);
}

/* ─── Course navigation (prev/next between lessons) ─────────── */
/* Rendered at the foot of a standalone article so the static /articles/
   URLs chain together. The in-app course player strips this block and
   renders its own footer nav, so it never doubles up.
   Anchors may be plain text (legacy articles) or carry
   .nav-label / .nav-title spans. Both are handled. */

.course-nav {
  display: flex;
  gap: 16px;
  margin: 40px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
}

.course-nav a {
  flex: 0 1 calc(50% - 8px);
  display: block;
  background: white;
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--db-navy);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-200);
  transition: all 0.15s ease;
}

.course-nav a:hover {
  border-color: var(--db-cyan);
  box-shadow: 0 2px 8px rgba(0, 167, 225, 0.1);
}

/* A lone "next" (first lesson) sits right; a lone "prev" (last) stays left. */
.course-nav .nav-next {
  margin-left: auto;
  text-align: right;
}

.course-nav .nav-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
  margin-bottom: 4px;
}

.course-nav .nav-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--db-navy);
}

@media (max-width: 640px) {
  .course-nav { flex-direction: column; }
  .course-nav a { flex: 1 1 auto; }
  .course-nav .nav-next { margin-left: 0; text-align: left; }
}

/* ─── Objectives list ───────────────────────────────────────── */

.objectives-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.objectives-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 0.95rem;
  color: var(--gray-700);
}

.objectives-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--db-green);
  font-weight: 700;
}

/* ─── Physical block lessons (Mars Mission Builder etc.) ───── */

.block-sheet-container {
  margin: 1.5rem 0;
  background: var(--gray-50);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}
.block-sheet-container svg { max-width: 100%; height: auto; }
.block-sheet-label {
  color: var(--gray-500);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.challenge-card {
  background: linear-gradient(135deg, var(--db-navy) 0%, #00527a 100%);
  color: white;
  border-radius: 12px;
  padding: 2rem;
  margin: 1.5rem 0;
}
.challenge-card h3 {
  color: var(--db-cyan);
  margin-top: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.challenge-card p { line-height: 1.7; margin-bottom: 0; color: white; }

.success-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1B9E5A22;
  color: var(--db-green);
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.hint-box {
  background: #FFF7ED;
  border-left: 4px solid var(--db-orange);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}
.hint-box h4 { color: var(--db-orange); margin-top: 0; margin-bottom: 0.5rem; }
.hint-box ul { margin: 0; padding-left: 1.2rem; }
.hint-box li { margin-bottom: 0.4rem; line-height: 1.6; }

.section-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1rem 0;
}
.toggle-solution {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--db-navy);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.toggle-solution:hover { background: #00527a; }
.solution-hidden { display: none; }

/* ─── Mission launcher callout ─────────────────────────────── */

.mission-launcher {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mission-launcher-info { flex: 1; min-width: 0; }
.mission-launcher-info h3 {
  color: var(--db-navy);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.mission-launcher-info p {
  color: var(--gray-600);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}
.mission-launcher-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--db-cyan);
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.mission-launcher-btn:hover { background: #0090c0; }

@media (max-width: 640px) {
  .mission-launcher { flex-direction: column; align-items: stretch; text-align: left; }
  .mission-launcher-btn { justify-content: center; }
}

/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  .article-container { padding: 32px 16px 64px; }
  h2 { font-size: 1.15rem; margin-top: 36px; }
  .video-wrapper.sticky { width: 260px; bottom: 10px; right: 10px; }
  .code-comparison { grid-template-columns: 1fr; }
  .picker-scenes { flex-direction: column; }
  .picker-shapes { grid-template-columns: repeat(2, 1fr); }
  .picker-launch { flex-direction: column; gap: 12px; text-align: center; }
  .lesson-nav { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Utility components (callouts, spec tables, captions, key/detail lists) ── */

.callout {
  position: relative;
  padding: 16px 18px 16px 50px;
  margin: 24px 0;
  border-radius: 10px;
  border-left: 4px solid var(--db-cyan);
  background: var(--gray-50);
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.6;
}
.callout::before { position: absolute; left: 16px; top: 15px; font-size: 1.1rem; line-height: 1.5; }
.callout strong { color: var(--gray-900); }
.callout-info { border-left-color: var(--db-cyan); background: #eff8fd; }
.callout-info::before { content: "ℹ️"; }
.callout-warning { border-left-color: var(--db-orange); background: #fdf3ee; }
.callout-warning::before { content: "⚠️"; }
.callout-danger { border-left-color: #dc2626; background: #fef2f2; }
.callout-danger::before { content: "🛑"; }
.callout-tip { border-left-color: var(--db-green); background: #ecfdf5; }
.callout-tip::before { content: "💡"; }
.callout-mistake { border-left-color: var(--db-orange); background: #fff7ed; }
.callout-mistake::before { content: "✗"; color: var(--db-orange); font-weight: 700; }

/* Wide tables scroll inside their own wrapper rather than pushing the page
   sideways at 430px. Optional — a table narrow enough to fit needs no wrap. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap .spec-table { min-width: 520px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}
.spec-table thead th {
  background: var(--db-navy);
  color: #fff;
  text-align: left;
  font-weight: 600;
  padding: 10px 14px;
  font-size: 0.85rem;
}
.spec-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--gray-200);
  vertical-align: top;
}
.spec-table tbody tr:nth-child(even) { background: var(--gray-50); }
.spec-table td:first-child { white-space: nowrap; }

/* Content images — opt-in class so the rule can't touch inline chips/thumbs.
   Bound tightly to the caption below it; standard block gap above/below the pair. */
.article-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-block) auto 0;
  border-radius: 12px;
}
.article-img + .caption { margin-top: 10px; }

.caption {
  margin: 10px auto var(--space-block);
  max-width: 600px;
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.5;
  text-align: center;
}

/* Key / detail list — organized alternative to loose bullets */
.kv-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}
.kv-list li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 14px 18px;
  border-top: 1px solid var(--gray-200);
}
.kv-list li:first-child { border-top: none; }
.kv-list li:nth-child(even) { background: var(--gray-50); }
.kv-list .kv-key { font-weight: 700; color: var(--db-navy); }
.kv-list .kv-val { color: var(--gray-700); line-height: 1.55; }
@media (max-width: 640px) {
  .kv-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* Step list — numbered, with a connecting timeline (for ordered sequences) */
ol.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 24px 0;
}
ol.steps > li {
  position: relative;
  padding: 3px 0 3px 48px;
  margin-bottom: 18px;
  line-height: 1.6;
  color: var(--gray-700);
}
ol.steps > li:last-child { margin-bottom: 0; }
ol.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--db-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
ol.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: -18px;
  width: 2px;
  background: var(--gray-200);
}
ol.steps > li strong { color: var(--gray-900); }
/* Nested sub-points inside a step: normal bullets, indented, not step-numbered */
ol.steps > li ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 8px 0 0;
}
ol.steps > li ul li { margin-bottom: 4px; line-height: 1.6; }

/* Feature-card bullet lists (Hardware / Tools required) — indent off the card edge */
.feature-card ul { padding-left: 1.4rem; margin: 4px 0 0; }
.feature-card li { margin-bottom: 4px; line-height: 1.55; }

/* Checklist — round check markers (for verification / pre-flight lists) */
ul.checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
ul.checklist li {
  position: relative;
  padding: 2px 0 2px 34px;
  margin-bottom: 12px;
  line-height: 1.6;
  color: var(--gray-700);
}
ul.checklist li:last-child { margin-bottom: 0; }
ul.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--db-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ─── Code blocks ───────────────────────────────────────────────
   Lives here, not in a per-article <style>, because the lesson page
   (pages/[track]/courses/[id]/[lesson].vue) extracts only the <article>
   element and loads this stylesheet — anything in an article's own <head>
   is dropped, so styles defined there work standalone and vanish in the
   course. Three articles had each redefined this block; consolidating it
   makes all of them render inside a lesson too. */
pre.code-block {
  background: var(--gray-900);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0;
  overflow-x: auto;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
}
pre.code-block .comment  { color: #6b7280; }
pre.code-block .prompt   { color: #fbbf24; }
pre.code-block .path     { color: #93c5fd; }
pre.code-block .ok       { color: #86efac; }
pre.code-block .err      { color: #fca5a5; }
pre.code-block .keyword  { color: #c084fc; }
pre.code-block .string   { color: #86efac; }
pre.code-block .function { color: #93c5fd; }
pre.code-block .builtin  { color: #fbbf24; }
pre.code-block .number   { color: #f9a8d4; }

/* ─── Download links ────────────────────────────────────────────
   A file or tool to go and fetch, as its own row: bold name, then a
   monospace-ish detail line. Used by the DEXI-3 Configuration course for
   QGroundControl, the DEXI OS image, and the firmware/parameter files. */
.dl {
  display: block;
  margin-bottom: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--db-cyan);
  border-radius: 0 10px 10px 0;
  text-decoration: none;
}
.dl:hover { background: var(--gray-50); }
.dl b {
  display: block;
  color: var(--db-navy);
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.dl span {
  color: var(--gray-500);
  font-size: 0.82rem;
  line-height: 1.5;
  word-break: break-word;
}

/* ─── Numbered step headings ────────────────────────────────────
   A step's number as a chip in front of its <h3>, for procedures where the
   order is the point and a bare heading sequence would not say so. */
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  vertical-align: -4px;
  border-radius: 50%;
  background: var(--db-cyan);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

/* ─── Which-kit badges ──────────────────────────────────────────
   Marks a step as applying to one kit rather than every drone. */
.kit {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.kit-dev { background: #dbeafe; color: #1d4ed8; }
.kit-all { background: #dcfce7; color: #15803d; }

/* ─── Inline SVG diagrams ───────────────────────────────────────
   The SVG carries its own <style>, namespaced under .prop-fig so its short
   class names cannot leak into the page. */
.prop-fig { margin: 24px 0 8px; }
.prop-fig svg { width: 100%; height: auto; display: block; }

/* Opt-in variant for a table whose first column holds a sentence rather than
   a short label. The default nowrap is right for a parameter list and wrong
   here — it pushes the table past its wrapper and forces a sideways scroll to
   reach column two. */
.table-wrap--prose .spec-table td:first-child { white-space: normal; }

/* ─────────────────────────────────────────────────────────────────────────
   Ground School Unplugged lessons (public/articles/gs-unplugged-*.html).
   Mirrors the author's PDF layout: navy step tabs, boxed panels, and block
   chips in the simulator palette (BLOCK_DEFS in public/js/block-sheet.js).
   Everything is scoped to .unplugged so no other article changes.
   ───────────────────────────────────────────────────────────────────────── */
.unplugged {
  --up-panel: #eaf3f9;
  --up-panel-line: #b9d3e4;
  --blk-takeoff: #2D8B5E;
  --blk-land: #CF7A5A;
  --blk-move: #5BA68A;
  --blk-hover: #7C5BAD;
  --blk-photo: #4A6B8A;
}

.unplugged > h2 {
  border-bottom: 2px solid var(--up-panel-line);
  padding-bottom: var(--space-1);
}

/* At a Glance: navy label column, like the PDF */
.unplugged .glance-table td:first-child {
  background: var(--db-navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  width: 170px;
}
.unplugged .glance-table tbody tr:nth-child(even) { background: transparent; }
.unplugged .glance-table tbody tr:nth-child(even) td:first-child { background: var(--db-navy); }
.unplugged .glance-table td { border-top-color: rgba(255, 255, 255, 0.12); }
.unplugged .glance-table td + td { border-top-color: var(--gray-200); }

/* Long first-column text (book titles, rubric indicators) wraps instead of
   squeezing the description column to a word per line */
.unplugged .spec-table td:first-child { white-space: normal; min-width: 120px; }

/* Boxed panels (Learning Objectives, Real-World Connection) */
.unplugged .panel {
  background: var(--up-panel);
  border: 1px solid var(--up-panel-line);
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0 var(--space-block);
}
.unplugged .panel > :first-child { margin-top: 0; }
.unplugged .panel > :last-child { margin-bottom: 0; }
.unplugged .panel .objectives-list { margin-bottom: 0; }

/* Step cards: STEP N + time in a navy tab, the activity beside it */
.unplugged .step {
  display: grid;
  grid-template-columns: 112px 1fr;
  margin: var(--space-5) 0;
  border: 1px solid var(--up-panel-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.unplugged .step-tab {
  background: var(--db-navy);
  color: #fff;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.unplugged .step-num { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; }
.unplugged .step-time { font-size: 0.8rem; opacity: 0.8; }
.unplugged .step-body {
  background: var(--up-panel);
  padding: var(--space-4) var(--space-5);
  min-width: 0;
}
.unplugged .step-body > :last-child { margin-bottom: 0; }
.unplugged .step-title {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.unplugged .step-sub { font-weight: 600; color: var(--gray-600); }
.unplugged .step-body .table-wrap { background: #fff; border-radius: 10px; }
.unplugged .step-body .callout,
.unplugged .step-body .challenge-card,
.unplugged .step-body .hint-box { background: #fff; }

@media (max-width: 640px) {
  .unplugged .step { grid-template-columns: 1fr; }
  .unplugged .step-tab {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .unplugged .step-body { padding: var(--space-3); }
  .unplugged .glance-table td:first-child { width: auto; }
}

/* Block chips: sequences and the Block Card Guide */
.unplugged .seq {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.unplugged .seq-dot { color: var(--gray-400); font-weight: 700; }
.unplugged .blk {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--blk-move);
}
.unplugged .blk-takeoff { background: var(--blk-takeoff); }
.unplugged .blk-land { background: var(--blk-land); }
.unplugged .blk-hover { background: var(--blk-hover); }
.unplugged .blk-photo { background: var(--blk-photo); }
.unplugged .blk-row .blk { margin-right: 0; }
.unplugged .blk-colon { margin-right: 4px; }

/* Simulator links: a button labeled with the scenario title */
.unplugged a.sim-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--db-cyan);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}
.unplugged a.sim-link:hover { background: var(--db-navy); }
.unplugged .sim-link-icon { font-size: 0.7rem; }

/* Physical keys */
kbd {
  display: inline-block;
  background: white;
  border: 1px solid var(--gray-300);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 7px;
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--db-navy);
  white-space: nowrap;
}