:root {
  /* Kinetic Carving brand palette */
  --kc-ink:        #0E0E0E;
  --kc-coal:       #1A1A1A;
  --kc-iron:       #2A2A2A;
  --kc-steel:      #444444;
  --kc-fog:        #8A8A8A;
  --kc-stone:      #A9A9A9;
  --kc-bone:       #F0F0F0;
  --kc-paper:      #FFFFFF;
  --kc-blood:      #7B1515;
  --kc-blood-hot:  #A81C1C;
  --kc-flare:      #E83433;
  --kc-amber:      #F5B445;
  --kc-ember:      #D9531E;
  --kc-sawdust:    #C9A26B;

  /* Course tokens mapped to KC palette */
  --bg:           #171717;
  --bg-elevated:  #1A1A1A;
  --panel:        #1A1A1A;
  --panel-2:      #1F1F1F;
  --panel-3:      var(--kc-iron);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: var(--kc-steel);
  --text:          #F9F9F9;
  --text-2:        #C9C9C9;
  --muted:         var(--kc-stone);
  --muted-2:       var(--kc-fog);

  /* Fiber = blood/flare (crimson). CO2 = amber (workshop accent). */
  --fiber-1:    var(--kc-blood-hot);
  --fiber-2:    var(--kc-flare);
  --fiber-glow: rgba(232, 52, 51, 0.22);
  --co2-1:      #B47A22;
  --co2-2:      var(--kc-amber);
  --co2-glow:   rgba(245, 177, 66, 0.22);

  --accent-1:    var(--fiber-1);
  --accent-2:    var(--fiber-2);
  --accent-glow: var(--fiber-glow);

  --ok:   #5FD68A;
  --warn: var(--kc-amber);
  --bad:  var(--kc-flare);

  /* House design spec (vector-spec.html) */
  --focus:      #0B61CD;
  --vector-ink: #E83433;

  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 0 rgba(0,0,0,0.5);
  --shadow:    0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px var(--accent-glow), 0 8px 28px var(--accent-glow);

  --topbar-h: 72px;

  --font-display: "Oswald", "Anton", Impact, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --font-stencil: "Special Elite", "Courier New", monospace;
}

body[data-machine="co2"] {
  --accent-1: var(--co2-1);
  --accent-2: var(--co2-2);
  --accent-glow: var(--co2-glow);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Decorative background */
.bg-decoration {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
  transition: background 0.6s ease;
}
.glow-1 {
  top: -200px; left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--accent-1) 0%, transparent 70%);
}
.glow-2 {
  bottom: -300px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
  opacity: 0.25;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: rgba(16, 16, 16, 0.82);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.brand {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.topbar-controls {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  position: relative;
  flex-shrink: 0;
  transition: filter 0.3s ease;
}
.logo:hover { filter: drop-shadow(0 0 10px var(--kc-flare)); }
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
}
.title-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--kc-bone);
  text-transform: uppercase;
  position: relative;
  padding-right: 10px;
}
.title-mark::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8%;
  height: 84%;
  width: 2px;
  background: var(--kc-flare);
}
.title-accent {
  font-family: var(--font-display);
  color: var(--kc-fog);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.subtitle {
  font-family: var(--font-stencil);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.tagline {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.device-status-label {
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 9.5px;
}
.device-status-name {
  color: var(--kc-flare);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.device-status-meta {
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding-left: 6px;
  border-left: 1px solid var(--border);
}

.machine-toggle {
  position: relative;
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.toggle-indicator {
  position: absolute;
  top: 4px; left: 4px;
  height: calc(100% - 8px);
  width: calc(25% - 2.5px);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-radius: 4px;
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1), background 0.4s ease;
  box-shadow: 0 4px 14px var(--accent-glow);
  z-index: 0;
}
body[data-machine="general"] .toggle-indicator { transform: translateX(0); }
body[data-machine="fiber"] .toggle-indicator { transform: translateX(100%); }
body[data-machine="co2"] .toggle-indicator { transform: translateX(200%); }
body[data-machine="diode"] .toggle-indicator { transform: translateX(300%); }
body[data-machine="general"] {
  --accent-1: #4A6B85;
  --accent-2: #6FA3C2;
  --accent-glow: rgba(74, 107, 133, 0.22);
}
body[data-machine="diode"] {
  --accent-1: #6E5BCC;
  --accent-2: #9B82FF;
  --accent-glow: rgba(155, 130, 255, 0.22);
}

.device-profile-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  padding: 4px 8px 4px 12px;
  border-radius: 4px;
}
.device-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}
.device-select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  max-width: 240px;
}
.device-select:focus { border-color: var(--kc-flare); }

.toggle-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: color 0.2s ease;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 88px;
}
.toggle-btn:hover { color: var(--text-2); }
.toggle-btn.active { color: #fff; }
.toggle-icon { display: inline-flex; align-items: center; }

.lens-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  border-radius: 12px;
  gap: 2px;
}
.lens-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 10px 0 8px;
}
.lens-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-variant-numeric: tabular-nums;
}
.lens-btn .unit { font-size: 10px; font-weight: 500; opacity: 0.7; margin-left: 1px; }
.lens-btn:hover { color: var(--text-2); }
.lens-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px var(--border),
    0 1px 0 rgba(255,255,255,0.04);
}

/* Layout */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 300px 1fr 380px;
  min-height: calc(100vh - var(--topbar-h) - 56px);
}
.layout.qa-hidden { grid-template-columns: 300px 1fr; }

/* Sidebar */
.sidebar {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 20px 16px 40px;
  border-right: 1px solid var(--border-subtle);
  background: rgba(16, 16, 16, 0.6);
  backdrop-filter: blur(8px);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.search-box { margin-bottom: 20px; }
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.2s ease;
}
.search-input-wrap input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px 10px 36px;
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: all 0.2s ease;
}
.search-input-wrap input::placeholder { color: var(--muted-2); }
.search-input-wrap input:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--bg);
}
.search-input-wrap input:focus + .kbd-hint { opacity: 0; }
.kbd-hint {
  position: absolute;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  background: var(--panel-3);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 2px 6px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chip {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover {
  border-color: var(--accent-1);
  color: var(--text);
  background: var(--accent-glow);
}

.modules { display: flex; flex-direction: column; gap: 4px; }
.module-section { margin-top: 16px; }
.module-section:first-of-type { margin-top: 4px; }
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--kc-flare);
  padding: 8px 10px 8px;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-subtle), transparent);
}

.module-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  user-select: none;
}
.module-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  border-radius: 0 2px 2px 0;
  transition: transform 0.2s ease;
}
.module-item:hover {
  background: var(--panel);
  color: var(--text);
}
.module-item.active {
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  color: var(--text);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.module-item.active::before { transform: translateY(-50%) scaleY(1); }
.module-item .num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
  width: 26px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-weight: 500;
}
.module-item.active .num {
  color: var(--accent-2);
  font-weight: 600;
}
.module-item .module-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-item .check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--muted-2);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.module-item.completed .check {
  opacity: 1;
  color: var(--ok);
}
.module-item.completed .num {
  color: var(--ok);
  opacity: 0.7;
}
.module-item.completed .module-title {
  color: var(--text-2);
}

/* Module action row + pager */
.module-actions {
  display: flex;
  justify-content: flex-end;
  margin: 32px 0 16px;
}
.complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.complete-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--panel-2);
}
.complete-btn.done {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--ok);
}
.complete-btn.done:hover {
  background: rgba(74, 222, 128, 0.14);
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}
.pager-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: all 0.18s ease;
  min-height: 64px;
}
.pager-btn:hover {
  background: var(--panel-2);
  border-color: var(--border);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.pager-prev { justify-self: start; }
.pager-next {
  justify-self: end;
  text-align: right;
  flex-direction: row;
}
.pager-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pager-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.pager-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pager-arrow {
  font-size: 18px;
  color: var(--accent-2);
  font-weight: 400;
  transition: transform 0.18s ease;
}
.pager-prev:hover .pager-arrow { transform: translateX(-3px); }
.pager-next:hover .pager-arrow { transform: translateX(3px); }
.pager-spacer { display: block; }

/* Content */
.content-wrap {
  position: relative;
  padding: 36px 56px 80px;
  max-width: 100%;
  overflow-x: hidden;
}
.content {
  max-width: 760px;
  margin: 0 auto;
}

/* Hero / dashboard for landing module */
.hero {
  background: linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-glow);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  position: relative;
}
.hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #b8c2d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lede {
  font-size: 15.5px;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 0 20px;
  position: relative;
}
.hero-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.stat {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 90px;
}
.stat-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Module meta row */
.module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--muted);
}
.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-weight: 500;
}
.meta-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-1);
}

/* Headings */
.content h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--kc-bone);
  text-transform: uppercase;
}
.content .lead {
  color: var(--text-2);
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
.content h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 36px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  color: var(--kc-bone);
}
.content h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 24px 0 8px;
  color: var(--accent-2);
}
.content p { margin: 10px 0; color: var(--text-2); }
.content ul, .content ol { margin: 10px 0; padding-left: 22px; color: var(--text-2); }
.content li { margin: 5px 0; }
.content li::marker { color: var(--muted-2); }
.content strong { color: var(--text); font-weight: 600; }
.content em { color: var(--text); font-style: italic; }

.content code {
  font-family: var(--font-mono);
  background: var(--panel-2);
  color: var(--accent-2);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border-subtle);
}

/* Callouts */
.callout {
  position: relative;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px 52px;
  margin: 18px 0;
  color: var(--text-2);
}
.callout::before {
  content: "";
  position: absolute;
  left: 14px; top: 16px;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--accent-glow);
  display: flex;
}
.callout::after {
  content: "i";
  position: absolute;
  left: 14px; top: 16px;
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2);
}
.callout.warn::before { background: rgba(251, 191, 36, 0.12); }
.callout.warn::after { content: "!"; color: var(--warn); font-style: normal; font-family: var(--font-sans); }
.callout.danger::before { background: rgba(248, 113, 113, 0.12); }
.callout.danger::after { content: "!"; color: var(--bad); font-style: normal; font-family: var(--font-sans); }
.callout.tip::before { background: rgba(74, 222, 128, 0.12); }
.callout.tip::after { content: "✓"; color: var(--ok); font-style: normal; font-family: var(--font-sans); font-size: 13px; }

.callout-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  margin-bottom: 4px;
}
.callout.warn .callout-label { color: var(--warn); }
.callout.danger .callout-label { color: var(--bad); }
.callout.tip .callout-label { color: var(--ok); }

/* Tables */
table.settings {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.settings th, table.settings td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
table.settings th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
table.settings tr:last-child td { border-bottom: 0; }
table.settings tr { transition: background 0.15s ease; }
table.settings tbody tr:hover { background: var(--panel-2); }
table.settings td { color: var(--text-2); }
table.settings td.num, table.settings td:has(.num) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
table.settings td:first-child {
  font-weight: 500;
  color: var(--text);
}

/* Tables on narrow screens (Sep 11 2026). The old phone rule forced every
   cell to 110px (140px for the first column) and made every table scroll
   sideways, so most tables ran off the right edge of a phone. Tables now fit
   their column and wrap; app.js fitTables() turns the ones that still would
   not fit (and, on phones, 4+ columns with paragraph-length cells) into
   stacked cards. A table with merged cells cannot stack, so it scrolls. */
@media (max-width: 760px) {
  table.settings { font-size: 12.5px; }
  table.settings td, table.settings th { padding: 9px 10px; }
}
table.settings.table-scroll {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.settings.table-stack,
table.settings.table-stack tbody,
table.settings.table-stack tr,
table.settings.table-stack td,
table.settings.table-stack tbody th { display: block; width: auto; }
table.settings.table-stack thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
table.settings.table-stack tr { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
table.settings.table-stack tr:last-child { border-bottom: 0; }
table.settings.table-stack td,
table.settings.table-stack tbody th { padding: 4px 0; border-bottom: 0; overflow-wrap: break-word; }
table.settings.table-stack td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
table.settings.table-stack td:first-child { font-size: 14px; font-weight: 600; color: var(--text); padding-bottom: 6px; }
table.settings.table-stack td:first-child::before { display: none; }

/* Lens chips */
.lens-note {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  vertical-align: middle;
}
.lens-note.lens-70.active-lens {
  background: rgba(255, 149, 88, 0.12);
  border-color: var(--fiber-2);
  color: var(--fiber-2);
  box-shadow: 0 0 12px rgba(255, 149, 88, 0.25);
}
.lens-note.lens-150.active-lens {
  background: rgba(77, 217, 255, 0.12);
  border-color: var(--co2-2);
  color: var(--co2-2);
  box-shadow: 0 0 12px rgba(77, 217, 255, 0.25);
}
.lens-note:not(.active-lens) { opacity: 0.4; }

/* CO2 mode adjustments */
body[data-machine="co2"] .lens-toggle { display: none; }

/* Q&A panel */
.qa-panel {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 20px 16px 40px;
  border-left: 1px solid var(--border-subtle);
  background: rgba(16, 16, 16, 0.6);
  backdrop-filter: blur(8px);
  animation: qa-in 0.25s ease;
}
@keyframes qa-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.qa-panel::-webkit-scrollbar { width: 8px; }
.qa-panel::-webkit-scrollbar-track { background: transparent; }
.qa-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.qa-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.qa-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.qa-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
  word-break: break-word;
}
.qa-close {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border-subtle);
  width: 28px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.qa-close:hover { color: var(--text); border-color: var(--border-strong); }

.qa-result {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease;
}
.qa-result:hover { border-color: var(--border); }
.qa-result .badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-glow);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.qa-result .badge.module { color: var(--muted); background: var(--panel-3); }
.qa-result .badge.machine-general { color: #B6C7D8; background: rgba(74, 107, 133, 0.18); }
.qa-result .badge.machine-fiber { color: #FF8585; background: rgba(168, 28, 28, 0.18); }
.qa-result .badge.machine-co2 { color: #F5B142; background: rgba(245, 177, 66, 0.14); }
.qa-result .badge.machine-diode { color: #B0A0FF; background: rgba(110, 91, 204, 0.18); }
.qa-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.qa-result-header .badge { margin-bottom: 0; }
.qa-result .breadcrumb {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.qa-result .breadcrumb::before {
  content: "›";
  margin-right: 6px;
  opacity: 0.6;
}
.qa-result.clickable {
  cursor: pointer;
}
.qa-result.clickable:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-color: var(--border);
}
.qa-result mark {
  background: rgba(232, 52, 51, 0.22);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}
.qa-counter {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.qa-result .q {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.4;
}
.qa-result .a {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}
.qa-result .src {
  font-size: 12px;
  color: var(--accent-2);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: gap 0.15s ease;
}
.qa-result .src:hover { gap: 10px; }
.qa-result .src::after {
  content: "→";
  font-size: 14px;
}
.qa-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 32px 12px;
  text-align: center;
  line-height: 1.7;
}
.qa-empty strong { display: block; color: var(--text-2); margin-bottom: 8px; font-weight: 600; }

/* Footer */
.footer {
  position: relative;
  z-index: 1;
  padding: 16px 28px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(16, 16, 16, 0.6);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-left { display: flex; align-items: center; gap: 8px; }
.footer-brand { color: var(--text-2); font-weight: 600; }
.footer-divider { color: var(--muted-2); }
.footer-link {
  color: var(--kc-flare) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 8px;
  font-weight: 500;
}
.footer-link:hover { color: var(--kc-amber) !important; }

/* First-visit disclaimer banner */
.disclaimer-banner {
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  background: rgba(232, 52, 51, 0.10);
  border-top: 1px solid rgba(232, 52, 51, 0.3);
  border-bottom: 1px solid var(--kc-flare);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: disclaimer-slide-in 0.35s ease;
}
@keyframes disclaimer-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.disclaimer-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 28px;
  font-size: 13px;
  color: var(--text);
  flex-wrap: wrap;
}
.disclaimer-banner-icon {
  flex-shrink: 0;
  color: var(--kc-flare);
}
.disclaimer-banner-text {
  flex: 1;
  min-width: 220px;
  line-height: 1.5;
  color: var(--text-2);
}
.disclaimer-banner-text strong {
  color: var(--kc-flare);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-right: 4px;
}
.disclaimer-banner-action {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.disclaimer-banner-link {
  background: transparent;
  color: var(--kc-flare);
  border-color: var(--kc-flare);
}
.disclaimer-banner-link:hover {
  background: var(--kc-flare);
  color: var(--kc-paper);
}
.disclaimer-banner-dismiss {
  background: var(--kc-flare);
  color: var(--kc-paper);
  border-color: var(--kc-flare);
}
.disclaimer-banner-dismiss:hover {
  background: var(--kc-blood-hot);
  border-color: var(--kc-blood-hot);
}

@media (max-width: 760px) {
  .disclaimer-banner-inner {
    padding: 10px 16px;
    gap: 10px;
  }
  .disclaimer-banner-text {
    font-size: 12px;
    min-width: 100%;
  }
}
.muted { color: var(--muted); }

/* Responsive */
@media (max-width: 1180px) {
  /* .layout.qa-hidden (desktop rule, two classes) outranks a bare .layout,
     so it is named here too. Without it, phones kept the 300px sidebar
     column and squeezed the article to ~50px (fixed Sep 10 2026). */
  .layout, .layout.qa-hidden { grid-template-columns: 260px 1fr; }
  .qa-panel {
    position: fixed;
    right: 0;
    top: var(--topbar-h);
    bottom: 0;
    width: 380px;
    z-index: 5;
    box-shadow: var(--shadow-lg);
    /* Overlay mode covers the page, so the panel goes solid in the house
       panel colour. Desktop keeps the translucent column so the ember
       glow behind it still shows. */
    background: var(--panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .content-wrap { padding: 32px 36px 60px; }
}
@media (max-width: 760px) {
  /* Header, sidebar and floating-control rules for narrow screens live in
     "Narrow screens" at the end of this file. */
  .subtitle { display: none; }
  .layout, .layout.qa-hidden { grid-template-columns: 1fr; }
  .qa-panel { width: 100%; }
  .content-wrap { padding: 24px 20px 60px; }
  .hero { padding: 24px; }
  .hero-title { font-size: 26px; }
  .pager { grid-template-columns: 1fr; }
  .pager-btn { min-height: 56px; }
}

/* Test Grid Generator UI */
#test-grid-app { margin: 16px 0 24px; }
.tg-form {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.tg-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.tg-row:last-of-type { margin-bottom: 0; }
.tg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.tg-field > span {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
}
.tg-field select,
.tg-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.tg-field select:focus,
.tg-field input:focus { border-color: var(--accent-1); }
.tg-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.tg-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.tg-btn:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
}
.tg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tg-btn.primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.tg-btn.primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.tg-output {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
}
.tg-svg-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  overflow-x: auto;
}
.tg-svg-wrap svg {
  max-width: 100%;
  height: auto;
}
.tg-legend table.settings { margin: 0; }
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}
.legend-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  vertical-align: middle;
}
.tg-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* YouTube channel gallery */
.lead-sub {
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
  margin: -8px 0 14px;
}
.yt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 14px 0 24px;
}
.yt-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px 16px;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: all 0.18s ease;
  position: relative;
}
.yt-card:hover {
  border-color: var(--kc-flare);
  background: var(--panel-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.yt-card-name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kc-bone);
  text-transform: uppercase;
}
.yt-card-tags {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-flare);
}
.yt-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}
.yt-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

/* External links inside content */
.content a, .content a:visited {
  color: var(--kc-flare);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.content a:hover { color: var(--kc-amber); }
table.settings a { color: var(--kc-flare); }

/* Recipe Browser */
#recipe-browser-app { margin: 16px 0 24px; }
.rb-form {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
}
.rb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rb-output { display: flex; flex-direction: column; gap: 12px; }
.rb-device-summary {
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 14px;
  background: var(--panel);
  border-left: 3px solid var(--kc-flare);
  border-radius: 4px;
  margin-bottom: 4px;
}
.rb-recipe {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 14px 16px;
}
.rb-recipe-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.rb-recipe-title {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rb-material, .rb-goal, .rb-color {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.rb-color { background: rgba(245, 177, 66, 0.12); color: var(--kc-amber); border-color: rgba(245, 177, 66, 0.4); }
.rb-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rb-badge-best { background: rgba(74, 222, 128, 0.14); color: #6FA84A; border: 1px solid #6FA84A; }
.rb-badge-good { background: rgba(245, 177, 66, 0.14); color: var(--kc-amber); border: 1px solid var(--kc-amber); }
.rb-badge-warn { background: rgba(232, 52, 51, 0.10); color: var(--kc-flare); border: 1px solid var(--kc-flare); }
.rb-badge-neutral { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.rb-note {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}
.rb-source {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.rb-source-origin { color: var(--muted-2); }
.rb-settings {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  line-height: 1.6;
}
.rb-focus {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}
.rb-scaled {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(232, 52, 51, 0.06);
  border-left: 3px solid var(--kc-flare);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text-2);
}
.rb-scaled-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--kc-flare);
  margin-bottom: 4px;
}
.rb-empty {
  color: var(--muted);
  text-align: center;
  padding: 30px 14px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .rb-row { grid-template-columns: 1fr; }
}

/* Job Recommender UI */
#job-rec-app { margin: 16px 0 24px; }
.jr-form {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
}
.jr-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.jr-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.jr-output { margin-top: 16px; }
.jr-card {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--kc-blood);
  border-radius: 4px;
  padding: 18px 18px 14px;
  position: relative;
}
.jr-card.jr-empty { border-color: var(--border); }
.jr-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--kc-flare);
  margin-bottom: 12px;
}
.jr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.jr-cell {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 10px 12px;
}
.jr-cell-label {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.jr-cell-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.jr-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.jr-section-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 8px;
}
.jr-settings {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  line-height: 1.6;
}
.jr-setup { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; }
.jr-setup li { margin: 4px 0; }
.jr-warnings {
  margin-top: 12px;
  padding: 10px 12px 10px 14px;
  background: rgba(245, 177, 66, 0.08);
  border-left: 3px solid var(--kc-amber);
  border-radius: 4px;
}
.jr-warn-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--kc-amber);
  margin-bottom: 4px;
}
.jr-warnings ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--text-2); }
.jr-related { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-related-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.jr-related-btn:hover {
  border-color: var(--kc-flare);
  color: var(--kc-flare);
}

@media (max-width: 760px) {
  .jr-row, .jr-grid { grid-template-columns: 1fr; }
}

/* Module images (drop photos into screenshots/ and reference with <img class="module-image" src="screenshots/foo.jpg">) */
.module-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  margin: 16px 0;
  background: var(--panel);
}
.module-image.bordered { padding: 4px; }
figure.module-figure {
  margin: 18px 0;
}
figure.module-figure figcaption {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  font-style: italic;
}
/* Inline video figure — full-width within content column, max ~600px */
figure.module-video {
  margin: 14px auto 12px;
  max-width: 600px;
  text-align: center;
}
figure.module-video video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: #000;
}
figure.module-video figcaption {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  font-style: italic;
}
/* Lightbox modal — same-tab image viewer for thumbnails */
.lightbox[hidden] { display: none !important; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 60px;
  animation: lightbox-fade-in 160ms ease-out;
}
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox-content {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}
.lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  max-width: 720px;
  font-style: italic;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  padding: 0;
}
.lightbox-close:hover, .lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
  outline: none;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
  padding: 0;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 540px) {
  .lightbox { padding: 16px 12px 12px; }
  .lightbox-close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-content img { max-height: calc(100vh - 80px); }
}
@media print {
  .lightbox { display: none !important; }
}

/* Feedback FAB — bottom-RIGHT inside .float-dock, stacked above the floating-nav cluster.
   Originally lived bottom-left but overlapped the sidebar tree on narrow
   viewports; right-side stack keeps it out of content text and pairs visually
   with the back/forward/top controls below it. */
.feedback-fab {
  position: absolute;
  bottom: 78px;
  right: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 12px;
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.feedback-fab:hover {
  background: rgba(232, 52, 51, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.feedback-fab:focus-visible {
  outline: 2px solid var(--kc-flare, #E83433);
  outline-offset: 2px;
}
.feedback-fab svg { display: block; }
@media (max-width: 540px) {
  .feedback-fab { bottom: 64px; right: 16px; padding: 10px; }
  .feedback-fab-label { display: none; }
}
@media print {
  .feedback-fab, .feedback-modal { display: none !important; }
}

/* Feedback modal */
.feedback-modal[hidden] { display: none !important; }
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  animation: lightbox-fade-in 160ms ease-out;
}
.feedback-card {
  position: relative;
  background: var(--panel, #161616);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 28px 28px 22px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.feedback-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #a3a3a3);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, background 120ms ease;
  padding: 0;
}
.feedback-close:hover, .feedback-close:focus-visible {
  color: var(--text, #fff);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.feedback-card h2 {
  margin: 0 0 6px;
  font-family: var(--font-display, inherit);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.feedback-desc {
  color: var(--text-2, #c8c8c8);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.feedback-field {
  display: block;
  margin-bottom: 14px;
}
.feedback-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2, #c8c8c8);
  margin-bottom: 6px;
}
.feedback-label em {
  color: var(--muted, #a3a3a3);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.feedback-field select,
.feedback-field input,
.feedback-field textarea {
  width: 100%;
  background: var(--panel-3, #0e0e0e);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text, #fff);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.feedback-field select:focus,
.feedback-field input:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--kc-flare, #E83433);
  box-shadow: 0 0 0 2px rgba(232, 52, 51, 0.2);
}
.feedback-context-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0 18px;
  font-size: 12px;
  color: var(--muted, #a3a3a3);
}
.feedback-context-label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-2, #c8c8c8);
}
.feedback-context {
  margin: 0;
  padding-left: 18px;
  list-style: square;
}
.feedback-context li { margin: 2px 0; }
.feedback-context code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text, #fff);
  font-size: 11.5px;
}
.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.feedback-cancel,
.feedback-submit {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.feedback-cancel {
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.12));
  color: var(--text-2, #c8c8c8);
}
.feedback-cancel:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text, #fff); }
.feedback-submit {
  background: var(--kc-flare, #E83433);
  border: 1px solid var(--kc-flare, #E83433);
  color: #fff;
}
.feedback-submit:hover { background: #cf2c2b; border-color: #cf2c2b; }
.feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Floating navigation cluster — back / forward / back-to-top, bottom-right inside .float-dock */
.floating-nav {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* children re-enable individually so disabled state still blocks clicks */
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease, opacity 150ms ease;
  backdrop-filter: blur(6px);
  padding: 0;
}
.nav-btn:hover:not(:disabled) {
  background: rgba(232, 52, 51, 0.92);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}
.nav-btn:focus-visible {
  outline: 2px solid var(--kc-flare, #E83433);
  outline-offset: 2px;
}
.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;
}
.nav-btn svg { display: block; }

/* Floating back-to-top button — appears after scrolling */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 12px;
  background: rgba(232, 52, 51, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, background 150ms ease;
  backdrop-filter: blur(6px);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: rgba(232, 52, 51, 1);
}
.back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.back-to-top svg { display: block; }
.back-to-top-label { display: inline; }
@media (max-width: 540px) {
  .floating-nav {
    bottom: 16px;
    right: 16px;
    gap: 6px;
  }
  .back-to-top { padding: 10px; }
  .back-to-top-label { display: none; }
  .nav-btn { width: 36px; height: 36px; }
}
@media print {
  .floating-nav { display: none !important; }
}

/* Compact clickable thumbnail row — opens full-size in a new tab */
.thumb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 14px auto 6px;
  text-align: center;
  width: 100%;
}
.thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: 160px;
  text-decoration: none !important;
  color: var(--text);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--panel);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
/* Broken-image fallback styling — only visible when src fails to load */
.thumb img { color: var(--muted); font-size: 11px; line-height: 1.4; }

/* Vertical-media row — used when the row contains a vertical (portrait) video.
   All thumbs scale UP to match the video's natural height so everything aligns. */
.thumb-row.vertical-media { align-items: stretch; }
.thumb-row.vertical-media .thumb { width: 160px; }
.thumb-row.vertical-media .thumb img,
.thumb-row.vertical-media .thumb video {
  display: block;
  width: 160px;
  height: 320px;
  object-fit: cover;
  background: #000;
}
.thumb-row.vertical-media .thumb-video {
  width: 180px;
  cursor: default;
}
.thumb-row.vertical-media .thumb-video video {
  width: 180px;
  height: 320px;
  object-fit: cover;
}
@media (max-width: 540px) {
  .thumb-row.vertical-media .thumb { width: 128px; }
  .thumb-row.vertical-media .thumb img,
  .thumb-row.vertical-media .thumb video {
    width: 128px;
    height: 240px;
  }
  .thumb-row.vertical-media .thumb-video,
  .thumb-row.vertical-media .thumb-video video {
    width: 144px;
    height: 240px;
  }
}
.thumb:hover, .thumb:focus-visible {
  transform: translateY(-1px);
  border-color: var(--kc-flare, #E83433);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  outline: none;
}
.thumb img {
  display: block;
  height: 120px;
  width: 160px;
  object-fit: cover;
}
.thumb-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 8px;
  color: var(--text);
  background: var(--panel);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  line-height: 1.3;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.thumb-hint {
  display: block;
  width: 100%;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin: 4px 0 8px;
}
.thumb-label .check-good {
  color: #1fae5b;
  font-weight: 800;
  margin-right: 3px;
}
.thumb-label .check-bad {
  color: #e83433;
  font-weight: 800;
  margin-right: 3px;
}

/* In-site module cross-references — clickable links that navigate to other modules */
.content a[data-module-link],
.content a[data-module-link]:visited {
  color: var(--kc-flare, #E83433) !important;
  text-decoration: underline dotted var(--kc-flare, #E83433);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  font-weight: 600;
  transition: color 120ms ease, text-decoration-color 120ms ease, text-decoration-style 120ms ease;
}
/* Force inner <strong> / <em> / <code> to inherit the link color (otherwise .content strong wins) */
.content a[data-module-link] strong,
.content a[data-module-link] em,
.content a[data-module-link] code,
.content a[data-module-link] span {
  color: inherit !important;
}
.content a[data-module-link]:hover,
.content a[data-module-link]:hover strong,
.content a[data-module-link]:hover em,
.content a[data-module-link]:focus-visible {
  color: var(--kc-amber, #F5B142) !important;
  text-decoration-style: solid;
  text-decoration-color: var(--kc-amber, #F5B142);
  outline: none;
}

/* Sources / references list — module footer pattern for verifiable claims */
.content ul.sources {
  margin: 12px 0 8px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  list-style: square;
}
.content ul.sources li {
  margin: 4px 0;
}
.content ul.sources a {
  color: var(--text-2);
}
.content ul.sources a:hover {
  color: var(--kc-flare, #E83433);
}
@media (max-width: 540px) {
  .thumb { width: 128px; }
  .thumb img { height: 96px; width: 128px; }
  .thumb-hint { display: block; width: 100%; margin-left: 0; margin-top: 2px; text-align: center; }
}

@media (max-width: 760px) {
  .tg-row { grid-template-columns: 1fr; }
}

/* Print — clean black-on-white module export. Strip nav, chrome, decorations. */
@media print {
  body { background: #fff; color: #111; }
  .topbar, .sidebar, .qa-panel, .footer, .bg-decoration,
  .module-actions, .pager, .suggestion-chips, .kbd-hint { display: none !important; }
  .layout { display: block; }
  .content-wrap { padding: 0; max-width: 100%; }
  .content { max-width: 100%; color: #111; }
  .content h1, .content h2, .content h3 {
    color: #000 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }
  .content h2 { border-top: 1px solid #ccc; }
  .content p, .content ul, .content ol, .content li, .content strong, .content em, .content .lead { color: #111; }
  .content code {
    background: #f3f3f3;
    color: #b8480e;
    border: 1px solid #e0e0e0;
  }
  table.settings {
    background: #fff;
    border-color: #ccc;
    box-shadow: none;
  }
  table.settings th, table.settings td {
    border-color: #e0e0e0;
    color: #111;
    background: #fff;
  }
  table.settings th { background: #f6f6f6; color: #555; }
  table.settings td.num, table.settings td:has(.num) { color: #000; }
  .callout {
    background: #fafafa;
    border: 1px solid #ddd;
    border-left-width: 3px;
    color: #111;
  }
  .callout::before, .callout::after { display: none; }
  .callout { padding-left: 14px; }
  .callout-label { color: #444 !important; }
  .module-meta { display: none; }
  .lens-note { background: #f6f6f6; color: #555; border-color: #ccc; opacity: 1; }
  a, a:visited { color: #000; text-decoration: underline; }
  @page { margin: 0.75in; }
}

/* ============================================================
   Kinetic Carving house design (vector-spec.html), Sep 2026
   ============================================================ */

/* House focus ring. Element rules with their own :focus-visible
   still win on specificity; this is the baseline for everything else. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Vector in the search panel. He is created when results open and
   removed when the panel closes, so a closed panel runs no animation. */
.qa-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qa-head-text { min-width: 0; }
.qa-vector-slot { display: inline-flex; flex: none; width: 56px; height: 56px; }
.qa-vector-slot:empty { display: none; }

/* Static ember field like the live site, masked to the edges so it
   never sits behind reading text. No animation, no JS. */
.bg-decoration::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(245, 150, 70, 0.75), transparent 70%),
    radial-gradient(1.2px 1.2px at 64% 34%, rgba(232, 96, 51, 0.60), transparent 70%),
    radial-gradient(2px 2px at 38% 72%, rgba(245, 170, 80, 0.60), transparent 70%),
    radial-gradient(1.3px 1.3px at 84% 82%, rgba(232, 84, 51, 0.55), transparent 70%),
    radial-gradient(1.1px 1.1px at 22% 52%, rgba(245, 150, 70, 0.50), transparent 70%),
    radial-gradient(1.5px 1.5px at 76% 8%, rgba(232, 96, 51, 0.55), transparent 70%);
  background-size: 380px 420px, 380px 420px, 520px 460px, 520px 460px, 300px 340px, 300px 340px;
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 50%, transparent 42%, #000 100%);
          mask-image: radial-gradient(ellipse 60% 56% at 50% 50%, transparent 42%, #000 100%);
}

/* Floating controls dock (Sep 10 2026). The Feedback button and the back,
   forward, and Top buttons used to be position: fixed, so at the end of a
   page they sat on the footer's Amazon Storefront and Disclaimer links.
   They now sit in this zero-height sticky box at the bottom of .page-shell
   (index.html). While you read, it rides the bottom of the screen; at the
   end of the page it stops at the top edge of the footer. The buttons keep
   their old bottom/right offsets, now measured from this box. */
.float-dock {
  position: sticky;
  bottom: 0;
  height: 0;
  z-index: 200;
}
/* Room under the last content for the docked buttons, so at the end of a
   page they cover neither the footer nor the pager's Next card. Stack =
   .feedback-fab offset + height (78 + 37 desktop, 64 + 36 at <=540px),
   plus a gap. */
:root { --dock-clear: 128px; }
@media (max-width: 540px) {
  :root { --dock-clear: 116px; }
}
@media screen {
  .content-wrap { padding-bottom: var(--dock-clear); }
}
@media print {
  .float-dock { display: none !important; }
}

/* Narrow screens (Sep 11 2026). David's iPhone showed the machine switch
   sitting on the logo and KERF title: the topbar is a 1fr/auto/1fr grid, the
   old phone rule only set flex-wrap (ignored by grid), and the four switch
   buttons have an 88px minimum. Tablets clipped the tagline from ~1150px
   down, and at 800px "// BY KINETIC CARVING" ran under the switch. The
   module list also filled the first phone screen, and the back/forward
   arrows floated over the article. */

/* Tablets: brand on the left at its natural width, switch on the right. */
@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto 1fr; }
  .topbar-controls { justify-self: end; }
}

/* 800px and below: two rows (brand, then a full-width switch), and the
   header scrolls away instead of sticking, so reading gets the whole screen;
   the Top button and every module change bring it back. --topbar-h is the
   sticky offset the sidebar, search panel and disclaimer use, so it drops to
   0. The header and disclaimer drop to z-index auto, which lets the search
   panel (inside .layout, z-index 1) open over them at full height. */
@media (max-width: 800px) {
  :root { --topbar-h: 0px; }
  .topbar {
    position: relative;
    z-index: auto;
    grid-template-columns: 1fr;
    row-gap: 10px;
    height: auto;
    padding: 10px 16px 12px;
  }
  .topbar-controls { grid-column: 1; justify-self: stretch; }
  .machine-toggle { display: flex; width: 100%; }
  .toggle-btn { min-width: 0; padding: 8px 4px; }
  .title { flex-wrap: wrap; row-gap: 4px; }
  .tagline { white-space: normal; text-wrap: balance; }
  .disclaimer-banner { position: relative; z-index: auto; }
}

/* Phones: the module list waits behind "Browse all modules" so a page opens
   on the article; opened, it grows in place (no inner scroll box), and
   picking a module closes it (app.js init). Phones have their own
   back/forward, so the floating arrows go; Feedback and Top stay. */
.modules-toggle { display: none; }
@media (max-width: 760px) {
  .sidebar {
    position: relative;
    top: 0;
    height: auto;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .search-box { margin-bottom: 14px; }
  .kbd-hint { display: none; }
  .modules-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: var(--panel);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .modules-toggle svg { flex-shrink: 0; transition: transform 0.2s ease; }
  .sidebar.modules-open .modules-toggle svg { transform: rotate(180deg); }
  .sidebar:not(.modules-open) .modules { display: none; }
  .sidebar.modules-open .modules { margin-top: 14px; }
  .nav-btn { display: none; }
  /* Pager: the desktop rule sizes each card to its title (justify-self
     start/end), which in one column left Previous and Next ragged and
     misaligned. Stack them full width; the empty spacer that holds
     column 1 on a first module would only add a gap here. */
  .pager-prev, .pager-next { justify-self: stretch; }
  .pager-spacer { display: none; }
}

/* Kinetic's Recommendation (Sep 11 2026): the featured channel card
   (Thunder Laser USA) gets a brand-red outline and badge; the ambassador
   line sits under the handle. */
.yt-card-featured {
  border-color: var(--kc-flare);
  box-shadow: 0 0 0 1px var(--kc-flare), 0 10px 28px rgba(232, 52, 51, 0.16);
}
.yt-card-featured:hover {
  border-color: var(--kc-flare);
  box-shadow: 0 0 0 1px var(--kc-flare), 0 10px 28px rgba(232, 52, 51, 0.26);
}
.yt-card-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kc-flare);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.yt-card-note {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted-2);
}

/* Tool forms (Sep 11 2026). Three equal grid columns could not shrink below
   each dropdown's longest option, so the last field ran past the panel
   (Job Recommender: 42px at desktop, 349px at 800px). Fields now take their
   natural width, grow to fill the row, and wrap to a new line when a row is
   full, so no option text is cut; each control fills its field. */
.jr-row, .rb-row, .tg-row { display: flex; flex-wrap: wrap; gap: 12px; }
.jr-row > *, .rb-row > *, .tg-row > * { flex: 1 1 auto; min-width: 0; }
.tg-field select, .tg-field input { width: 100%; min-width: 0; }

/* The KERF logo and title link home (app.js init). */
a.brand { color: inherit; text-decoration: none; border-radius: 8px; }

/* LightBurn Material Test helper (module f-test-grid, Sep 11 2026). The two
   axis cards mirror the Rows / Columns halves of LightBurn's dialog. */
.jr-grid.mt-axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-axis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  margin: 6px 0 0;
}
.mt-axis dt { color: var(--muted-2); font-size: 12px; }
.mt-axis dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.mt-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.mt-muted { margin-top: 6px; font-size: 12px; color: var(--muted); }